/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26 jan. 2021, 17:29:11
    Author     : Wim
*/


html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: "Arial";
    background-color: #DDEEEE;
}

body { 
    margin-top:0px;
/*    max-width:  1350px;*/
}

h1 { color: darkslategray;
text-align: center }

h2 { color: darkslategray;
text-align: center ;
margin-top: 0px;
margin-bottom: 3px;
font-size: 16px;
}

h3 { color: seagreen;
padding-left: 20px; 
margin-top: 0px;
margin-bottom: 0px;
}

h4 { color: seagreen;
padding-left: 20px; 
margin-top: 5px;
margin-bottom: 5px;
}

/* responsive and layout */
* {
  box-sizing: border-box;
}

.container {
    height:380px;
}

/*---------------  home  -----------------*/

.home_menu {
  width: 15%;
  float: left;
}

.home_extra {
  width: 25%;
  float: left;
  padding-right: 14px;  
}
.home_main {
  width: 60%;
  float: left;
}


a.button {
/*            width: 120px;*/
}        
        
a.button:link, a.button:visited {
  background-color: lightseagreen;
  color: white;
  padding: 5px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.button:hover, a.button:active {
  background-color: seagreen;
}

a.button2:link, a.button2:visited {
  background-color: lightgoldenrodyellow;
  color: seagreen;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.button2:hover, a.button2:active {
  background-color: goldenrod;
  color: white;

}

.home_menu a.button {
  width: 90%;
}

div.footer {
    font-size:9pt;
    color: blue; 
    text-align: center;
    background-color: #f1f7f7
}
/*---------  species list ------------------*/

div.species-main{
    overflow-y: scroll;
    height: calc(100vh - 110px);
/*    float: left;*/
    font-size: 10pt;
    background-color: #EEFFFF;
}

div.species-footer{
  margin-top:4px;
}    
table.species_list {
/*            max-width: 1100px;*/
            border: 1px solid seagreen ;
            font-size:9pt;
            color: darkslategray;
            font-family:"Calibri",sans-serif;
        }

table.species_list tr:nth-child(even){background-color: #f2f2f2;}

div.species_links {
  width: 700px;
  text-align: center;  
}

div.species_links span {
  display: inline-block;
  width: 23px;
  border-bottom: 1px solid #3b7fa6;
  border-right: 1px solid #91c3d3;
  background-color:#f2f2f2;
  text-align: center;
}

div.species_links span a {
    text-decoration: none;
    color: #7676e9;
    font-weight: bold
}

td.td_species_2, td.td_species_1, td.td_species_0  {   
    font-size:14.0pt; 
}       

td.auth, td.syn_auth1, td.syn_auth2 {   
    font-size:11.0pt; 
    color: darkslategray; 
    padding-right: 10px;
    }          
    
td.td_species_2 a:link {
  text-decoration: none;
  color: #7676e9;   
}
td.td_species_2 a:visited {
 text-decoration: none;
 color: #7676e9;    
}
td.td_species_2 a:hover {
  color: blue; 
  text-decoration: underline;
}
td.td_species_2 a:active {
  text-decoration: underline;
  color: #7676e9;    
}

td.td_species_1 a:link {
  text-decoration: none;
  color: darkgrey;   
}
td.td_species_1 a:visited {
 text-decoration: none;
 color: darkgrey;    
}
td.td_species_1 a:hover {
  color: blue; 
  text-decoration: underline;
}
td.td_species_1 a:active {
  text-decoration: underline;
  color: darkgrey;    
}


table.species_list tr.inactive a:link {
  text-decoration: none;
  color: gray; 
  cursor: no-drop;  
}
table.species_list tr.inactive a {
  text-decoration: none;
  color: gray; 
  cursor: no-drop;    
}



td.syn_auth1 {   
    font-size:10.0pt; 
    color: red; 
    }      
td.syn_name1, td.syn_name2x {   
    font-size:11pt; 
    color: red; 
    font-weight: bold;
    }    
td.syn_name2 {   
    font-size:11pt; 
    color: green; 
    font-weight: bold;
    }   
 td.syn_auth2 {   
    font-size:10.0pt; 
    color: green; 
    }      

tr.syn_status_error td {   
    background-color: lightsalmon;
    color: darkslategray;    
    }     
    
tr.syn_status_sugg td {   
    background-color: lightgoldenrodyellow;
    color: gray;
    } 
 
tr.syn_status_todo td {   
    color: darkslategray;
    }    
    
tr.syn_status_sugg td.syn_name2, tr.syn_status_sugg td.syn_comment {   
    }     
    
tr.syn_status_todo td.syn_name2, tr.syn_status_todo td.syn_comment {   
    background-color: lightcyan;
    color: blue;
    }   
    
td.fe	{
    background-color: lightcyan;
    border: 1px solid blue; 
    text-align: center;
}      
        
td.fe, span.fe	{
    background-color: lightcyan;
    border: 1px solid blue; 
    text-align: center;
    padding-left:2px; padding-right:2px;
    width: 25px;
}      
 
td.wa, span.wa	{
    background-color: linen;
    border: 1px solid red; 
    text-align: center;
    padding-left:2px; padding-right:2px;
} 

/*----------- literature --------------*/

table.lit {
    width: 800px;
    border-top: 1px solid seagreen ;
    border-bottom: 1px solid seagreen ;
    font-size:9pt;
}
table.lit tr:nth-child(even){background-color: #f2f2f2;}

tr.lit {}
td.aut { font-weight: bold;}
td.ref {
}
td.reflink a:link {
  text-decoration: none;
}



/* ------------    species info --------------  */
.species-bar{width:100%; overflow:hidden; width:auto; 
            position:static; background-color:inherit; 
            margin-top: 3px; 

}
.species-bar .species-bar-item{
    padding:5px 16px;float:left; width:auto;border:none;outline:0;
}
.species-bar .species-button{white-space:normal}
.species-bar-item{width:100%;display:block;padding:8px 12px;text-align:left;border:none;white-space:normal;float:none;outline:0}

.species-button{
    border:none;display:inline-block;padding:8px 8px;vertical-align:middle; margin-left:5px;
    overflow:hidden;text-decoration:none;color:inherit;background-color:lightblue;
    text-align:center;cursor:pointer;white-space:nowrap;
    -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;
    -moz-user-select:none;-ms-user-select:none; margin-bottom: 5px;
}
.species-button:disabled{cursor:not-allowed;opacity:0.3}

button.pageselected{
   background-color:cadetblue; 
   color: white;
   margin-bottom: 0px;
}

div.speciesinfo-main{
    overflow-y: scroll;
    height: calc(100vh - 80px);
/*    float: left;*/
    font-size: 10pt;
    background-color: #EEFFFF;
width: 100%;
}

div.speciesinfo-page {
/*    min-width: 600px;*/

}

div.speciesinfo-page p {
    margin-left: 20px;
}
div.speciesinfo-page p.left {
    margin-left: 5px;
}

div.header{height: 44px;}
div.header2{height: 40px;}

div.header span.h1 { 
    color: darkslategray;
    padding-left: 20px;
    font-size: 18pt;
    font-weight: bold;
    min-width: 200px;
}

div.header div.h3 { 
    color: seagreen;
    padding-left: 14px; 
    text-align: center;
}

div.header div.buttons { 
    padding-left: 100px;
    padding-top: 10px;
    float: left;
}

div.header div.buttons button { 
    margin-left: 10px;
    cursor: pointer;
}

div.header div.title { 
    float: left;
}
/*-------------  divs   --------------*/

div.main{
    overflow-y: scroll;
    height: calc(100vh - 60px);
/*    float: left;*/
    font-size: 10pt;
    background-color: #EEFFFF;

}
/* Clear floats after the columns */
div.main:after {
  content: "";
  display: table;
  clear: both;
}

/*-------------------*/

.i1 { 
    font-size: 18pt;
    color: seagreen;
    border-top: 1px solid lightseagreen;
    padding-top: 0px;
}

span.i1 {
    font-size: 18pt;
    color: seagreen;
    border-top: none;
    width: 300px;
  display:inline-block;    
}

.i2 { font-size: 12pt;
color: darkslategrey;
border-top: 1px solid lightseagreen;
padding-top: 10px;
font-weight: bold;
max-width:  1000px;
}

.i3 { font-size: 10pt;
    color: black;
    margin-left: 20px;
    text-indent: -10px;
    max-width: 1000px;
}

.i3 span { font-size: 10pt;
color: darkslategrey;
padding-right: 5px;
font-weight: bold;
}

.i4 { font-size: 10pt;
    color: black;
    margin-left: 50px;
    text-indent: -10px;
    max-width: 1000px;
}

.i4 span { font-size: 10pt;
color: seagreen;
width: 60px;
  display:inline-block;
}

/*  figures  */

table.figures {
  font-size: 10pt;
  color: darkslategrey;  
  font-family: sans-serif;
}

table.figures td {
    vertical-align: bottom;
    text-align: center;
border: 1px solid lightgray;    
}
table.figures td img{
    max-height: 250px; height: auto;  max-width: 250px; width: auto; 
}

table.references {
  font-size: 10pt;
  color: darkslategrey;  
  font-family: sans-serif;
}

table.references tr:nth-child(even){background-color: #f2f2f2;}

table.references  td.ref_code {
  width: 100px;
}
table.references td.ref_link {
  width: 200px;
  text-decoration: none;
}
table.references td.ref_type {
  width: 120px;
}
table.references td.syn {
  font-style: italic; font-size: smaller;
}
table.references td.type {
  font-weight:bold;
}

table.references tr.legend td{background-color: #f8f8f8;  border: 1px solid seagreen ;}


div.type_description {
    background-color: linen;
    font-family: "times";
    font-size: 10pt;
   max-width: 600px;
}

p.key { font-size: smaller; color: gray;}
div.type_description p.i { font-style: italic;}
div.type_description p.small { font-size: smaller;}
div.type_description p.center {   text-align: center;}
div.type_description p.indent {  text-indent:40px; }
div.type_description p.smallcaps {font-variant-caps: small-caps;}

div.type_description span.caps { text-transform: uppercase; font-style: normal;}

table.photos {
  font-size: 9pt;
  font-style: italic;
  color: darkslategrey;  
  font-family: sans-serif;
}
table.photos td {
    vertical-align: bottom;
}

table.photos td img{
    max-height: 500px; height: auto;  max-width: 500px; width: auto; border: 1px solid lightgrey;
}

/*   -----   species-info data*/

table.data {
    
}

table.data tr:nth-child(even){
    background-color: #f2f2f2;
}

table.data tr.page {
  font-size: large;  
}

table.data tr.head {
  font-size: larger;  
color: #f8f8f8;
  background-color: #6cbdb5;
}


table.data td.data-label{
    font-style: italic;
}

span.o1 {
    font-size: smaller;
    color: grey;
}    

span.o1::before {
      content: "(";
}
span.o1::after {
      content: ")";
}
span.o2 {
    color: blue;
}
/* terminology  */

table.terms {
            max-width: 800px;
            border: 1px solid seagreen ;
            font-size:9pt;
            color: darkslategray;
            font-family:"Calibri",sans-serif;
        }

table.terms tr:nth-child(even){background-color: #f2f2f2;}

table.terms td.subtitle {
    font-weight: bold;
    font-size: larger;
    border-top: 1px solid seagreen;
}

td.term {
    width: 100px;
    font-weight: bold;
}

tr.header td {
    font-weight: bold;
    background-color: lightblue;
}

td.desc {
   
}

p.legend {
    font-size: small;
    color: darkslategray;
}

/*-=============== KEY ==============-*/

div.key-main{
    height: calc(100vh - 60px);
    font-size: 10pt;
    background-color: #EEFFFF;
}

label.h3 {
    font-weight: bold;  
    margin-left: -5px;  
}

label.varname {
  font-weight: bold;    
  font-size: 11pt; 
  color: #256c45;
}

table.spec-table td.complink { color: blue; cursor:pointer;  text-decoration: underline;}
table.spec-table td.missing1 { color: gray}
table.spec-table td.missing2 { color: gray}
table.spec-table td.missing3 { color: gray}



span.listheader {
    border-bottom: 1px solid gray;
    font-style: italic;
    font-size: small;
}


div.key-pages{
    background-color: #EEFFFF;
/*    overflow: scroll;   */
    height: calc(100vh - 100px);
/*    width: 635px;*/
}

div.key-page{
    overflow-y: scroll;  
    height: 100%;
    width: 500px;
}

div.form{
    background-color: #EEFFFF;
    float: left;
/*    min-width: 500px;
    max-width: calc(70% - 210px);*/
    height: calc(100vh - 80px);    
}

img.img_2 {   width: 240px; }
img.img_3 {   width: 160px; }
img.img_4 {   width: 120px; }
img.img_5 {   width: 95px; }
img.img_6 {   width: 80px; }
img.img_7 {   width: 70px; }

div.species_result{
    background-color: #d2f4ff;
    height: 100%;
    float: left;
    width: 480px;
    max-width: 600px;
}

div.result_top{
    height: 50%;
    min-height: 250px;
    border: 1px solid gray;
    background-color: #EEFFFF;
}

div.list{
    width: 50%;
    background-color: #EEFFFF;
    float: left;
    overflow-y: scroll;    
    height: 100%;
/*    min-width: 250px;*/
}

div.extra_features{
    overflow-y: scroll;
    height: 100%;
    float: left;
    width: 50%;
}

div.result_mid{
    height: 20pt;
    border: 1px solid gray;
}

div.result_bottom{
    height: calc(50% - 20pt);
    min-height: 250px;
    border: 1px solid gray;
    background-color: #EEFFFF;
}

div.compare{
    width: 50%;
/*    min-width: 250px;*/
    float: left;
    overflow-y: scroll;    
   height: 100%;
}

span.prop {
  font-style: italic;
  text-transform: lowercase; 
}

span.feat_val {
   font-weight: bold;
}

div.features{
    overflow-y: scroll;
    height: 100%;
    float: left;
    width: 50%;
}

div.spec_feature {
   border-bottom: 1px solid #a7d9bb;
}

div.feathead {
color: #2a5c45;
    font-weight: bold;
    font-size: large;
}

div.specimen {
  margin-left: 20px;
  float: left;  
  font-style: italic;

}

span.specimen-code {
  color: blue;
  font-style: normal;
  display: inline-block;
  width:    150px;
}

#jsondata {
  width: 400px;
  height: 200px;
  background-color: #eeffff;
  color: #729ea5;
  border: 1px solid #729ea5;
}    

#specimen {

}

textarea.specimenlabel {
  width: 300px;
  height: 40px;
  background-color: #f9faef;
  color: #171716;
  border: 1px solid #729ea5;
}    
textarea.remarks {
  width: 300px;
  height: 60px;
  background-color: #fffefe;
  color: black;
  border: 1px solid #729ea5;
}   

@media (max-width: 600px) {
  div.form, div.list, div.result {
    width: 100%;
    max-height: 200px;
  }
}
  
div.detail-specimen {
    
}
div.detail-species {
    
}


/* Style the footer */
div.key-footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  height: 50px;
}


/*===============  COMPARE =================*/

div.compare-main{
    height: calc(100vh - 60px);
    font-size: 10pt;
    background-color: #EEFFFF;
}

div.comphead {
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
color: #2a5c45;
}

div.compare div.s1 { background-color: #80ff80; }
div.compare div.s2 { background-color: #ccff99; }
div.compare div.s3 { background-color: #ffffcc; }
div.compare div.s4 { background-color: #ffcc99; }
div.compare div.s5 { background-color: #ff9999; }
div.compare div.missing { background-color: #e1e1d0; }

div.formelement {
}
div.form span.check {
    min-width: 210px; 
    padding-right:5px;
    display: inline-block;
}

div.form span.check2 {
    min-width: 210px; 
    padding-right:5px;
    padding-left:20px;
    display: inline-block;
}

div.form span.check3 {
    min-width: 100px; 
    padding-right:5px;
    display: inline-block;
    vertical-align: top;
}

div.form p {
    margin-top: 2px; margin-bottom: 5px;
}

div.form label {
    font-weight: normal;
}

div.species span.score {
    float: right;
}

table.optiontable {
          
            border: 1px solid seagreen ;
            font-size:9pt;
            color: darkslategray;
            font-family:"Calibri",sans-serif;
            border-collapse: collapse;
        }
        
 table.optiontable td {
    border-left: 1px solid seagreen;
    text-align: center;
}       
 table.optiontable td.ref {
    text-align: left;
  font-size: 9pt;
  font-style: italic;
}    



/*compare*/


div.species_list {
    width:  260px;
    height: 100%;
}
div.comp_species_div {
    height: calc(100% - 10px);
    overflow-y: scroll;    
}

table.comp_species {
   
}

table.comp_species tr:nth-child(even) {
   background: #dbefef;
}

td.specname {
    font-size: 12pt;
    width: 120px;
    float:  left;
    font-style: italic;
}
input.comcheck {
  cursor:   pointer;
}
label.h3 {
  cursor:   pointer;
}

div.comp_result{
    background-color: #d2f4ff;
    height: 100%;
    float: left;
    width: calc(100vw - 295px);
    max-width:  1000px;
}
div.comp_bottom{
    height: calc(100% - 30px);
    border: 1px solid gray;
    background-color: #EEFFFF;
    overflow-y: scroll;
}
div.comp_header{
    height: 30px;
    border-bottom: 1px solid gray;
    background-color: #EEFFFF;
}

table.comp-table {
    border-collapse:    collapse;
}

table.comp-table tr:nth-child(even) {
   background: #dbefef;
}
table.comp-table tr td  {
   border: 1px solid #4a9580;
/*   padding: 2px;*/
}
table.comp-table tr:nth-child(5n+1) td  {
   border-bottom: 2px solid #2d564d;
}


td.prophead {
    min-width:  125px;
    color:  #2d564d;
    text-indent: -10px;
    padding-left: 13px;
    text-transform: lowercase;
}

td.top1 {
  font-weight: bold;
  font-size: 11pt;
}


td.top2 {
  font-weight: bold;
}

td.comp_0 { background-color: #99ff9f;}
td.comp_1 { background-color: #99ff9f;}
td.comp_2 { background-color: #ccff99;}
td.comp_3 { background-color: #e3fd89;}
td.comp_4 { background-color: #fdfd89;}
td.comp_5 { background-color: #f7d06d;}
td.comp_6 { background-color: #ffaa94;}

/* -------------compare keys----------------- */

table.comp_key tr.keyname {
    padding-top: 5px;
    font-weight: bold;
    border-bottom: 2px solid #2d564d;
    background-color: #85fbcf;   
}
table.comp_key tr.keyname td {
    border-top: 2px solid #2d564d;
/*    border-bottom: 1px solid #2d564d;*/
}    
    
table.comp_key td.tarspec {
    min-width: 110px;
    font-weight: bold;
    text-align: right;
    font-style: italic;
}

table.comp_key tr.opta {
  background-color: #d2f9ef; 
  vertical-align: top;
}
table.comp_key tr.opta td {
    border-top: 1px solid #2d564d;
}
table.comp_key tr.optb {
  background-color: #d4f5fb; 
  vertical-align: top;
}
table.comp_key tr.optc {
  background-color: #d4fbdd; 
  vertical-align: top;
}

table.comp_key tr td.syn,
span.syn {
    color: blue;
}

/*================  keys ===============*/


#keys {
    
}

div.keys-index {
    height: 100%;
    width: 300px;
    float: left;
    overflow-y: scroll;
}

div.keys {
    margin-top:    10px;
}
div.keys-index div.keyname  {
    border-top : 1px solid grey;
    padding-top: 5px;
    font-weight: bold;
    
}
div.keys-index div.title {
    font-size : smaller;
    color: grey;
}

div.keys-index div.buttons {
    padding-bottom: 5px;
}

div.keys-index div.buttons span {
    padding-left: 5px;
    color:  red;
}

button.keysex {
    min-width: 140px; 
}

div.keys-index div.secttitle {
text-align: center;
    color: #008e7a;
}

div.keys-main {
  height: calc(100vh - 135px);  
}

div.key-sub {
   border-bottom: 3px solid black; 
   max-width: 800px;
}

table.key-sub {
   width: 100%; 
}

div.keys-detail {
    height: 100%;
    float: left;
    width: calc(100vw - 335px);
    overflow-y:  scroll;
}

table.key-sub tr.y0 {
  color: green;  
}
table.key-sub tr.y1 {
  color: blue;  
}
table.key-sub tr.y2 {
  color: purple;  
}

table.key-sub tr.result { 
    background-color: #85fbcf;
    font-weight: bold;
    text-align: right;
}    

table.key-sub tr.no {
  color: red;
  font-size: smaller;  
}
table.key-sub tr.line td {
  border-top:   1px solid grey;
  font-size: small;
}

table.key-sub tr.opta {
  background-color: #d2f9ef; 
  vertical-align: top;
}
table.key-sub tr.opta td {
    border-top: 1px solid #2d564d;
}
table.key-sub tr.optb {
  background-color: #d4f5fb; 
  vertical-align: top;
}
table.key-sub tr.optc {
  background-color: #d4fbdd; 
  vertical-align: top;
}


table.key-sub td.prev {
    width: 15px;
    text-align: left;
}   

table.key-sub td.opt {
    color: #0d7c20;
    font-size: 10pt;
    vertical-align: middle;
    text-align: left;
}    

table.key-sub td.nest, table.comp-table td.nest {
    width: 50px;
}


table.key-sub td.spec {
    color: #0d7c20;
    font-size: 11pt;
    vertical-align: middle;
    text-align: right;
    font-style: italic;
    font-weight: bold;
}    




/*literature keys*/

div.litkeys_list {
    width:  400px;
    height: 100%;
}
div.litkeys_header {
}

div.litkeys_div {
    height: 100%;
    overflow-y: scroll;
}

table.litkeys {
   
}

table.litkeys  td.refname{
   border-top: 2px solid blue; 
   font-weight: bold;
   font-size: 11pt;
}

table.litkeys  td.criteria{
   border-bottom: 1px solid blue; 
   color: darkgrey;
   font-size: smaller;
}
table.litkeys  td.genus{
   color: darkgrey;
   font-size: 10pt;
   font-style:  italic;
}
table.litkeys  td.area{
   color: darkgrey;
   font-size: small;

}

td.specname {
    font-size: 12pt;
    width: 120px;
    float:  left;
    font-style: italic;
}

div.litkeys_result{
    background-color: #d2f4ff;
    height: 100%;
    float: left;
    width: calc(100vw - 437px);
}
div.litkeys_bottom{
/*    height: calc(100% - 30px);*/
    border: 1px solid gray;
    background-color: #EEFFFF;
/*    overflow-y: scroll;*/
}
div.litkeys_header{
    border-bottom: 1px solid gray;
    background-color: #EEFFFF;
}

table.key_table {
    border-collapse:    collapse;
}

table.key_table tr:nth-child(even) {
   background: #dbefef;
}
table.key_table tr td  {
   border: 1px solid #4a9580;
/*   padding: 2px;*/
}
table.key_table tr:nth-child(5n+1) td  {
   border-bottom: 2px solid #2d564d;
}

table.key-info {
    width:100%;
}
table.key-info tr.keyname {
   color: blue;
   font-weight: bold; 
}
table.key-info td.genus {
  width: 200px;
  font-style: italic;
}
table.key-info td.area {
}
table.key-info tr.keytitle {
  font-size: 10pt;
  color: gray;
}
table.key-info tr.keypub {
  font-size: 9pt;
  color: gray;
}
table.key-info tr.comment td {
  font-size: small;
  border:1px solid blue;
  color: blue;
}
table.key-info tr.criterium {
  font-size: 10pt;
  color: #178f68;
}
table.key-info tr.section {
   color: #2a5c45;
   font-weight: bold; 
}

table.key-sub td.next {
   width: 20px;
}
table.key-sub td.tar {
   text-align:right;
}

table.key-sub td.fig, table.comp_key td.fig {
   max-width: 500px;
}

table.key-sub div.figs, table.comp_key div.figs {
   max-width: 700px;
   overflow-x: scroll;
    display: inline-block;
    width: 100%;   
}

table.key-sub div.fig {
   text-align:center;
   float: left;
   padding-left: 4px;
}

table.key-sub td.desc {
   font-size: 10pt;
   max-width: 700px;
}


tr.fig td {
  min-width:120px;
}

table.key-sub td.opt {
    color: #0d7c20;
    font-size: 10pt;
    vertical-align: middle;
    text-align: left;
}    


tr.legend {
    font-size: small;
    color: grey;
    vertical-align: top;
}

.img-modal{z-index:3;display:none;

         position:fixed;
         left:200px;
         top:100px;
/*         width:300px;
         height:100%;*/
         overflow:auto;
         background-color:rgb(0,0,0);
         background-color:rgba(0,0,0,0.4);
         border: 1px solid blue;
}
.img-modal-content{
    margin:auto;
    background-color:#fff;
    position:relative;
    padding:0;
    outline:0;
    max-width:800px;
    max-height:600px;
    height: auto;
    width:auto;
    cursor: zoom-out;
}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}