* {
box-sizing: border-box;
}
@media screen and (min-width: 1px) and (max-width: 669px) {
.can_split_in_columns{column-count:1;-moz-column-count:1;-webkit-column-count:1;}
}
@media screen and (min-width: 669px) and (max-width: 1069px) {
.can_split_in_columns{column-count:2;-moz-column-count:2;-webkit-column-count:2; widows:4}
}
@media screen and (min-width: 1069px) {
.can_split_in_columns{column-count:3;-moz-column-count:3;-webkit-column-count:3;widows:4}
}

@media only screen and (max-width: 755px) {
#checklist td:nth-child(1),#checklist td:nth-child(3),#checklist td:nth-child(4){
display:none;
}

.responsive thead {
visibility: hidden;
height: 0;
position: absolute;
}

.responsive tr {
display: block;
margin-bottom: .625em;
}

.responsive td {
border: 1px solid;
border-bottom: none;
display: block;
font-size: .8em;
text-align: right;
}

.responsive td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}

.responsive td:last-child {
border-bottom: 1px solid;
}

#photobox div{
float:center;
width:80%;

}
}

@media screen and (max-width: 1400px) {
ul.list1column {
column-count: 1;
}
.mySlides {
height:40vh;
width:100vh;
}

}

#photobox{
}

@font-face
{
font-family: "NotoSans"; 
src: url("fonts/NotoSansNerdFont-SemiCondensed.woff2")format("woff2");
}
@font-face
{
font-family: "NotoSerif"; 
src: url("fonts/NotoSerifNerdFont-SemiCondensed.woff2")format("woff2");
}
@font-face
{
font-family: "Icons"; 
src: url("fonts/material-design-outlined.woff2")format("woff2");
}
body, html{
scroll-behavior: smooth;
scroll-padding-top: 46px;
text-rendering: geometricPrecision;
}


#logo_image{
position:fixed;
top:0px;
left:0px;
height:50px;
z-index:99999;
}

#logo_image:hover{
-webkit-filter: drop-shadow(6px 6px 3px rgba(0,0,0,0.5));     
filter: drop-shadow(6px 6px 3px rgba(0,0,0,0.5));  height:50px;
}

.menu-bars{
    src:url("images/menu-bars.svg");
}

/*Remove jquery styling
 .ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-autocomplete, .ui-autocomplete:hover,
.ui-menu-item, .ui-menu-item:hover,
.ui-menu-item a, .ui-menu-item a:hover,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-menu .ui-menu-item a {
background: #ffffff none no-repeat;
padding:0;
margin:0;
display:block;
border:0;border-collapse:collapse;
}

ul ui-menu ui-widget ui-widget-content ui-autocomplete ui-front
li ui-menu-item
a ui-menu-item-wrapper


*/
#mytextinput {
-moz-border-radius: 25px;
border-radius: 25px;
background-color: white;
border: thin solid black;
margin: 4px;
padding: 4px;
}

#mytextinput:focus {
-moz-border-radius: 25px;
border-radius: 25px;
background-color:#ffeb3b;
}

.ui.menu-item{
padding: 8px 16px;
border-bottom: 1px solid #ddd;
}
.ui-menu-item a{
text-decoration: none;
}
ul .ui-autocomplete, li::marker{
list-style: none !important;
}
.ui-state-hover, .ui-state-active{
background-color:#ffeb3b;
}
.ui-state-focus {
background-color: #ffeb3b;
}
li:has(> .ui-state-active) { /* styles to apply to the li tag */
background-color: #ffeb3b;

}
ul.ui-autocomplete {
background-color:white;
            -moz-border-radius: 0 0 15x 15px;
            border-radius: 0 0 15px 15px;
border-style: black;
}
.w3-content{
max-width:1680px;
//margin:4px;
}


.w3-modal-content{
width:auto;
height:auto;
padding-top:0px;
cursor:zoom-out;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}

#myInput{
//max-width: 100%;
}

/* Slideshow */



label {
  color: light-gray;
  font-weight: normal;
  font-size: clamp(0.5rem, 0.7vw, 1rem);
  //pointer-events: none;
}
label input, label textarea,label checkbox{

  font-size: clamp(1rem, 1.5vw, 2rem);

}

label:focus-within,
label:active-within {
  font-weight:bold;
}

.nav-tabs{
  margin-top:1em;
}

.mySlides {
width:100%;
height:60vh;
background-position: center center;
//background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
overflow: scroll;

/* Hide the images by default */
display: none;
}

.textoverlay{
  background-color: rgb(255 255 255 / 30%);
backdrop-filter: blur(2px) brightness(40%);
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
  font-size: clamp(1rem, 1.5vw, 2rem);
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: clamp(1.2rem, 2vw, 2.8rem);
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: clamp(1rem, 1.5vw, 2rem);
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
border-collapse: separate;
border-spacing: 0;
}

th { /* header cell */
cursor: pointer;
top: 38px;
background-color: #ffffff;
}

thead {
position: sticky;
box-shadow: 0 5px 2px -2px rgb(0,0,0,0.2);

}
th input {
min-width: 10px;
max-width: 100%;
width: 100%;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}

th, td {
text-align: left;
padding: 16px;
}
td {
text-align: left;
padding: 8px;
}

.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 1;
-webkit-line-clamp: 1;
}
.clamp-2 {
line-clamp: 2!important;
-webkit-line-clamp: 2!important;
}
.clamp-3 {
line-clamp: 3!important;
-webkit-line-clamp: 3!important;
}

.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 1px;
}


.icons .search{

font-family: "Icons";

}
.search:before{
"";
}

/* CHECKLIST */

#checklist{
font-family: "NotoSerif, Times New Roman", serif;
}

tr.link:hover{
background: #ffeb3b;
outline: none;
cursor: pointer;
}

.checklist .name {
font-family: "NotoSerif, Times New Roman", serif;
font-size: clamp(0.9rem, 1.7vw, 2.2rem);
white-space:nowrap;
}

.checklist .author{
font-variant: small-caps;
/*white-space:nowrap;*/
}

.checklist .family{
font-size: clamp(1.5rem, 2.5vw, 3rem);
font-weight: 500;
text-transform: uppercase;
white-space:nowrap;
margin-left: 0px;
}

.checklist .subfamily{
font-size: clamp(1.3rem, 2.3vw, 2.8rem);
font-weight: 500;
text-transform: uppercase;
white-space:nowrap;
margin-left: 5px;
}
.checklist .tribe{
font-size: clamp(1.1rem, 2.1vw, 2.6rem);
font-weight: 400;
white-space:nowrap;
margin-left: 10px;
}
.checklist .subtribe{
font-size: clamp(0.9em, 1.9vw, 2.4rem);
font-weight: 400;
white-space:nowrap;
margin-left: 15px;
}
.checklist .genus{
font-size: clamp(0.9rem, 1.7vw, 2.2rem);
font-weight: 300;
white-space:nowrap;
margin-left: 20px;
}
.checklist .names{
break-before: always;
font-size: clamp(0.9rem, 1vw, 1rem);
}
.checklist .subgenus{
font-size: clamp(0.9rem, 1.7vw, 2.2rem);
font-weight: 300;
white-space:nowrap;
margin-left: 25px;
}

.checklist .species{
font-weight: 200;
white-space:nowrap;
margin-left: 35px;
}

.checklist .subspecies{
font-size: clamp(0.9rem, 1.7vw, 2.2rem);
font-weight: 200;
white-space:nowrap;
margin-left: 40px;
}

.checklist .group{
font-size: clamp(0.9rem, 1.7vw, 2.2rem);
font-size:medium;
font-weight: 200;
white-space:nowrap;
margin-left: 30px;

}
.checklist .group:after {
//content: "-group";
}


.photo{
width:100%;
height:100%;
object-fit:cover;
}
a.photo:after{
content:url('../images/foto.gif');
margin-left: 5px;
}


.genera {
font-size: clamp(0.6rem, 0.8vw, 0.9rem) ;
white-space: wrap;
line-height: 1;
text-decoration:none;
break-inside: avoid;
}
.genera:not(:first-child){
margin-top: 40px;
}

.genera p {
	padding-top:0px; 
}


.genera .genus span.title,
.genera .subgenus span.title,
.genera .group span.title
{
font-variant: small-caps;
}

.genera .genus span.title
{
font-size: clamp(1.4rem, 1.3vw, 1.8rem);
font-weight: 600;
}

.genera .subgenus span.title
{
font-size: clamp(1.2rem, 1.2vw, 1.5rem);
font-weight: 600;
}
.genera .group span.title
font-weight: 400;
{
font-size: clamp(1.0rem, 1.1vw, 1.2rem);
}

.genera .occurence  p {
padding-left:1.5em;
text-indent:-1.5em;
margin: 0em;
}
.genera .synonyms  p {
padding-left:1.5em;
text-indent:-1.5em;
margin: 0em;
}
.genera .etymology  p {
padding-left:1.5em;
text-indent:-1.5em;
margin: 0em;
}

.genera .synonyms .notice{
color:red; 
font-size: 12px;
background-color: #ffcaca;
margin: .5em .5em .5em 1.5em;
padding: .5em;
border-radius: 5px 5px 5px;
border: 1px solid red;
padding-left: 1.5em;
padding-right: 1.5em;
position:relative;
}

.tooltip {
  position: relative;
  /*display: inline-block;
  border-bottom: 1px dotted black;*/
  cursor: help;
}

.tooltip img {
 float:right;
}

.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #ffffff;
	text-wrap: balance;
  text-align: center;
  border-radius: 6px;
  padding: 15px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.notes{
color:gray; 
font-size: 12px;
margin: 1.5em;
padding: .5em;
border-radius: 5px 5px 5px;
border: 1px solid gray;
padding-left: 1.5em;
padding-right: 1.5em;
position:relative;
}

.genera .genus span,
.genera .subgenus span,
.genera .group span {
font-size: clamp(1.2rem, 1.2vw, 1.6rem);
font-weight: 400;
text-align: start;
}


.link a{
text-decoration:none;
}



/* Style the list */
ul.breadcrumb {
padding: 40px 16px 0px 80px;
margin:0px;
list-style: none;
background-color: #fff;
font-size: clamp(0.5rem, 0.7vw, 0.9rem);
}

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
}

/* Add a slash symbol (/) before each list */
ul.breadcrumb:before {
padding: 8px;
color: black;
content: "⟫\00a0";
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "⟩\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}

/* Create a 2 comumn list*/
ul.list2column {
column-count: 2;
margin:0;
padding:0;
column-rule: dotted 1px #333;
list-style-type: none;
}
ul.list2column li ul {
list-style-type: none;
column-count: 2;
margin:0;
padding:0;
}
ul.list2column li ul li {
white-space: nowrap;
list-style-type: none;
}

form fieldset{
padding:1em;
}

form label{
color:gray;
}

form textarea{
width:100%;
}


/* Footer */
.footer{
padding:20px;
text-align:center;
margin-top:20px;
}


.notiBtn {
text-align:center;
margin-top:80px;
}

.notiBtn button {
color: #fff;
border: none;
border-radius: 5px;
display: inline-block;
font-weight: 600;
outline: medium none;
padding: 1em 3em;
cursor:pointer;
}

#success-btn {
background: #006400;
}

#success-btn:hover {
background-color: #008000;
}

#error-btn {
background: #c0392b;
}

#error-btn:hover {
background-color: #e74c3c;
}

#info-btn {
background: #2980b9;
}

#info-btn:hover {
background-color: #3498db;
}

#warning-btn {
background: #f1c40f;
}

#warning-btn:hover {
background-color: #f39c12;
}



.isslogo{
height:30vh;
}

.imageContainer {

}
.imageCenter {
width: 100%;
height: 100vh;
}
.imageCenter img {
width:100%;
height:100vh;
object-fit: contain;
}