/*	Without jquery mobile
	=====================
	
	Flower site and Guide
*/

body,
input,
select,
textarea
{
  	background-color: white;
  	color: black;	
	font-size: 1em;
	line-height: 1.4;
	font-family: "helvetica neue",arial,sans-serif; /*{global-font-family}*/;
}

body
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

a {
  color: DodgerBlue;
  text-decoration: none;
 }

a.dark-mode {
  color: LightBlue;	
}

.text_blue
{
  color: DodgerBlue;	
}


body.dark-mode {
  background-color: black;
  color: white;
}

/* family header */
.family-h {	
	font-size: 1.2em;
	font-style: italic;	
}

.familyCommon
{
	font-size: 1em;	
	vertical-align: sub;
}

.genusCommon
{
	font-size: 1em;	
} 

.genusScientific
{
	font-style: italic;
}

/*	======================
*/

.FlowerTextIntro {
    font-size:1.2em;
    text-align: left;
}


.FlowerTextLeftFirst {
	font-size:1.1em;
	text-align: left;
	font-weight: bold;	
}

.FlowerTextLeftFirst a:hover, a:visited, a:link, a:active{
	text-decoration: none;	
}

.FlowerTextLeft {
	font-size:1.0em;
	text-align: left;
	font-style: italic;
}

.FlowerTextLeft a:hover, a:visited, a:link, a:active{
	text-decoration: none;
}

.FlowerTextLargeDatabase { 
	font-size:1.1em;
	text-align: center;     
}

.FlowerTextLargeDatabaseItalic { 
	font-size:1.0em;
	text-align: center;
	font-style: italic;	
}

.FlowerTextDatabaseItalic {
	font-size:0.9em;
	font-style: italic;		
	text-align: center;
}


.FlowerTextLarge { 
	font-size:1.3em;
	text-align: center;     
}

.FlowerTextLargeItalic { 
	font-size:1.3em;
	text-align: center;
	font-style: italic;	
}

.FlowerText {
	font-size:0.9em;
	text-align: center;
}

.FlowerPhotoText {
	font-size:0.9em;
	text-align: left;
}

.FlowerTextItalic {
	font-size:1.1em;
	font-style: italic;		
	text-align: center;
}


.FlowerFamilyBorderTopBottom {
	border: solid 0 #060;
	border-top-width:3px;
	border-bottom-width:3px;
}

.FlowerFamilyBorderTop {
	border: solid 0 #060;
	border-top-width:3px;
}

.FlowerFamilyBorderBottom {
	border: solid 0 #060;
	border-bottom-width:3px;
}

.DescriptionText {
    font-size:1em;
    text-align: left !important;
}

td.DescriptionText {
	color: red;   
}

.DescriptionImg img
{
	max-width: 300px;
}

.DescriptionImgText
{
    font-size:1.1em;
//    color: rgb(0, 0, 200); 
}

.DescriptionImgText a:hover, a:visited, a:link, a:active{
    text-decoration: none;	
}

a.ExplainLink:visited, a.ExplainLink:link, a.ExplainLink:active{
    color: black;    
}

.KeyText {
    font-size:1em Lucidatypewriter, monospace;
}

.KeyGenus
{
	font-size:1.3em;
	color: rgb(0, 0, 200);
}
.KeyItem
{
	font-size:1.1em;	
	font-weight: bold
}

.KeyImage
{
	margin:1px 5px 25px 5px;
	
}

.KeyImage img
{
}


/* flower photo */
.PhotoFlowerAlbum
{
	cursor: pointer;
    margin:20px 2px 0px 2px;

}

.PhotoFlowerAlbum img
{
    width: 400px;
}

.PhotoFlower
{
	margin-top: 0px;
	margin-botton: 20px;
}

.PhotoFlower img
{
	cursor: pointer;
    width: 400px;
}


.PhotoFlowerText
{
	font-size: 1.4em;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0px;
	cursor: pointer;	
}

.PhotoFlowerThumb
{
    margin:0px 0px 0px 0px;
    width: 60px; 	    
}

.PhotoFlowerThumb img
{
    width: 80px; /* must match IMAGE_WIDTH_DEFAULT in js  */
}

.PhotoFlowerThumbSingle
{
    margin:0px 0px 0px 0px;
    width: 160px;    
}

.PhotoFlowerThumbSingle img
{
    width: 160px;
}

.TableDatabase th
{
    border-collapse: collapse;
    padding: 0px;
}

.TableDatabase tr td
{
    border-collapse: collapse;
    padding: 0px;
}

.TableAlbum th
{
    border-collapse: collapse;
    padding: 0px;
}

.TableAlbum tr td
{
    border-collapse: collapse;  
    padding: 0px;
}

.TableIntro tr td
{
    border-collapse: collapse;
    padding: 0px;	
}

#uploadGallery .thumbnail
{
    width: 50px;
    height: 50px;
    float:left;
    margin:2px;
}
#uploadGallery .thumbnail img
{
    width: 50px;
    height: 50px;
}

#progressBarUpload {
    width: 90%;
    height: 22px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBarUpload div {
    height: 90%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0099ff;
}

.Head_Title
{
	font-size: 1.4em;
	text-align: center;	
//	color: rgb(204, 204, 204);
	background-color: rgb(51, 51, 255);	
}

.tableApp
{
    border-collapse: collapse;
}

.tableApp tr td
{
    border-collapse: collapse;
    padding: 10px;
}

.TableDatabase td 
{
    border-collapse: collapse;
    vertical-align: top;
}

hr 
{
    color: #060;    
    background: #060;      
    border-width: 2px;     
}

.img_app_640
{
    max-width: 180px;
}

.img_app_800
{
    max-width: 320px;
}

.img_app_1280
{
    max-width: 400px;
}

.img50_link_center
{
    width: 50px;
    vertical-align: middle;
}

.splash_width
{
    max-width: 1400px;

}

.hidden_item
{
    visibility: hidden;
}

/*jssor slider loading skin spin css*/
.jssorl-009-spin img 
{
	animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-009-spin
{
	from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }

	/*jssor slider bullet skin 053 css*/
    .jssorb053 .i {position:relative;cursor:pointer;}
    .jssorb053 .i .b {fill:#fff;fill-opacity:0.5;}
    .jssorb053 .i:hover .b {fill-opacity:.7;}
    .jssorb053 .iav .b {fill-opacity: 1;}
    .jssorb053 .i.idn {opacity:.3;}

    /*jssor slider arrow skin 093 css*/
    .jssora093 {display:block;position:absolute;cursor:pointer;}
    .jssora093 .c {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
    .jssora093 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
    .jssora093:hover {opacity:.8;}
    .jssora093.jssora093dn {opacity:.6;}
    .jssora093.jssora093ds {opacity:.3;pointer-events:none;}


.ef_slider
{
	margin-top: 125px;
 	z-index: -1
}

/* main header */
.ef_header_margin
{
	padding-top: 40px;
}


.ef_header
{	
  	position: fixed;
  	top: 0;
  	right: 0;	
	overflow: hidden;
	background-color: #0071bc;
	z-index: 100; /* alway main header */
	width:100%;	
}    

.ef_header_ns
{	
  	position: top;
  	top: 0;
  	right: 0;	
	overflow: hidden;
	background-color: #0071bc;
	z-index: 100; /* alway main header */
	width:100%;	
} 

.ef_header_float
{	
	overflow: hidden;
	background-color: #0071bc;
	z-index: 100; /* alway main header */
	width:100%;	
}  
    
.ef_header_text
{
	font-size: 1.2em;
	color: white;
	text-align: center;
	vertical-align: center;
	width:100%;
}

.ef_footer
{
  	position: fixed; 
  	bottom: 0;
  	left: 0;	
	overflow: hidden;
	background-color: #0071bc;
	z-index: 101; /* alway main footer */
	width:100%;
}

.ef_footer_text
{
	font-size: 1.1em;
	color: white;
	text-align: center;
	vertical-align: center;
	width:100%;
}


.ef_text
{
	color: white;
}

/* buttons */

.ef_btn
{
	display: inline-block;	
	border: none;
  	background-color: #0071bc;
  	height: 38px;
	margin-top: 10px;
	margin-bottom: 4px; 
  	padding: 8px 10px;
  	color: white;  	
  	font-size: 1em;
  	cursor: pointer;
}

.ef_btn_right
{
	float:right;
}

.ef_btn[disabled]:hover,
.ef_btn:disabled,
.ef_btn[disabled],
.ef_btn_disabled
{
	background-color: grey;
}

.ef_btn_not_selected:hover,
.ef_btn:hover
{
  	background-color: grey; 
}

.ef_btn_not_selected
{
	border-style: none;		
	/* do not use brightness... */
  	background-color: lightgrey;
  	color: black;	
}

.ef_btn_on_line
{
	color: lightblue;
}

.ef_btn_wide
{
	border: none;
	text-align:left;
	width:100%;	
}

.ef_btn_small
{
	border: none;
  	padding: 4px 5px;	
	font-size: 0.9em;	
}

.ef_btn_header
{
  	background-color: #0071bc;
  	border-width: 1px;
  	color: white;
  	padding: 2px 6px 2px 6px;
  	font-size: 14px;
  	cursor: pointer;
}
.ef_btn_header:hover
{
  	background-color: gray;
}

.ef_btn_lower_text
{
	position:relative; top:2px;
}

.ef_btn_text
{
	position:relative; top:1px;
}

.collaps
{
	display:none;
}

.ef_btn_area_input_txt
{
  	font-size: 16px;
  	border: ridge;
  	padding: 6px 6px;
  	font-size: 16px;
	width: 100%;
  	color: black; 
}

/* align button next to input */
.ef_btn_area
{
	vertical-align: top;	
}

.rain_expand_item
{
    background-color: #F8F8FF;
}


/* plant list */

.pl_header_margin
{
    position: zsticky;
}

#pl_col_common
{
      font-size: 120%;  
}

#pl_col_scientific
{
      font-size: 120%;  
}

.rain_main tr td:nth-child(even){
    background-color: #F0F0F0;
}

.pl_table {
    border-collapse: collapse;
    width: 100%;
}

.pl_table th,
.pl_table td {
   border-collapse: collapse;	
   border: 1px solid grey;
}

.pl_table tr:first-child>th{
    position: sticky;
  	position: -webkit-sticky; /* Safari */    
    top: 0;
}

.pl_table td {
    text-align: left;
    padding: 4px;
}

.pl_table th {
    text-align: left;
    padding: 8px;
}

.pl_table tr td:first-child {
    width: 14px;
    background-color: lightgray;
}

.pl_table th {
    background-color: #0071bc;
    color: white;
}

.pl_table tr:nth-child(even){background-color: #e7e7e7}



/* spinner */

.ef_spinner_img, .ef_spinner_text
{
	display: inline-block;	
	position: fixed;
  	z-index: 999;
  	overflow: show;
  	margin: auto;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	width: 64px;
  	height: 64px;
}

.ef_spinner_text
{	
  	color: RoyalBlue;
	background-color: white;  	
  	font-size: 28px;
  	z-index: 998;
/*  	background-color: black */   	
}

/* slider */

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #0071bc;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #0071bc;
    cursor: pointer;
}

.sliderText{
	 text-align: center;
	 font-size: 1.5em;
}

/* iNat Map */

/* status Genus */

table.inat_table, table.inat_table td
{
    padding-left: 10px;
   	padding-right: 10px;	
 	border: 1px;
    border-collapse: collapse;	
}

table.inat_table tr:nth-child(even)
{
    border-collapse: collapse;    
    background: #E0E0E0;
}

table.inat_table a
{
	color: black;
}

table.inat_table tr:nth-child(odd)
{
    border-collapse: collapse;
    background: white;    
}

table.inat_table_inner, table.inat_table td
{
 	border: 1px, black;
    border-collapse: collapse;	
}
table.inat_table_inner tr:nth-child(even)
{
    background: #D3D3D3;	
    border-collapse: collapse;    
}

table.inat_table_inner tr:nth-child(odd)
{
    border-collapse: collapse;
    background: white;    
}


/* legend */

table.inat_table_legend, table.inat_table_legend td
{
 	border: 0px;	
    border-collapse: collapse;	
}

table.inat_table_legend tr:nth-of-type(even)
{
    border-collapse: collapse;  
    padding: 10px;	
    background: #D3D3D3;
}

table.inat_table_legend tr:nth-of-type(odd)
{
    border-collapse: collapse;    
    padding: 10px;
    background: white;    
}
/* side panel */

.sidepanel {
  height: 100%;
  width: 0;
  position: fixed;
 /* z-index: 1;*/
  top: 0;
  right: 0;
  background-color: darkgrey;
  overflow-x: hidden;
  transition: 0.6s;
  padding-top: 40px;
  padding-left: 5px;
}

.closebtn {
	cursor: pointer;
  	color: white;
  	float: right;
	margin-right: 15px;
  	font-size: 28px;
  	font-weight: bold;
}

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closebtn-photo {
	cursor: pointer;
  	color: white;
  	float: top;
	vertical-align: top;  	
	margin-right: 0px;
  	font-size: 28px;
  	font-weight: bold;
  	background-color: #0071bc;
}

.closebtn-photo:hover,
.closebtn-photo:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
  background-color: grey; 
}

/* Modal BEGIN */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  padding-top: 120px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: grey;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 300px;
  font-size: 1em;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
  text-indent: 5px;
}

.modal-content.dark-mode{
	background-color: black;
}

.modal-text {
  margin-left: 4px;	
}

.modal_btn {
	width: 50%;
	height: 50%;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 1px 2px;
  background-color: #0071bc;
/*  color: white; */
}

.modal-body {
	padding: 2px 16px;	
}

/* Modal Inline */
.modalInline {
	position: relative;
	z-index: 2; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalInline-header {
  padding-top: 2px;	
  padding-left: .5em;
  height: 26px;
  color: white;
}

/* Modal Content */
.modalInline-content {
  position: relative;
  background-color: darkgrey;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: auto;
  font-size: 1 em;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.2s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.modalInline-content.dark-mode
{
  	background-color: black;	
}

.modalInline-text {
  padding-left: .5em;
  color: black;
}

.modalInline-img
{
	max-width: 100%; /* Full width */
	cursor: pointer;	 	
}

.modalInline-close {
  color: white;
  float: right;
  font-size: 20px;
  font-weight: bold;
}

.modalInline-close:hover,
.modalInline-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.Foot_Info {
	font-size: 0.7em;
}

textarea {
  min-width: 100%;
  max-width: 100%;  
  min-height: 100px;
  max-height: 400px;
}