:root	{
		--orange		: #f50;
		--red			: #c00;
		--fg-blue		: #045a99;
		--blue			: #045a99;
		--fg-dark-gray		: #666676;
		--fg-darker-gray	: #444454;

		--bg-orange		: rgba(255,102,0,0.3);
		--bg-green		: rgba(0,102,51,0.3);
		--bg-blue		: #1484cb;
		--bg-gray		: #eeeeee;
		--bg-less-light		: #f9f6f3;
		--bg-light		: #fbf9f7;
		--bg-dark		: #f4f0ea;
		--font-family		: 'Roboto condensed';

}
.bg-light-gray	{ background-color: var(--bg-light) !important; box-shadow: 3px 3px 3px #ccc;  }
.bg-light-gray:hover	{ background-color: var(--bg-less-light) !important; box-shadow: 3px 3px 3px #ccc;  }
mi	{ color: var(--orange); }
html	{ font-size: min(max(11px, 1vmax), 14px); }
body	{ margin: 0px 40px 20px 40px; font-family: var(--font-family); color: #555; }
a		{ text-decoration: none; color: inherit; }

input[type=text] { font-family: 'Roboto'; color: var(--orange); font-weight: bold; font-size: 1rem;
		   border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark);
		 }
.mapbiomas_sel
	{ font-family: 'Roboto'; color: var(--orange); font-weight: bold; font-size: 1rem;
	  border: none; box-shadow: none; background-color: #fff;
	 }

input[type=checkbox]	{ font-family: 'Roboto Condensed'; border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark);}
select	{ border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark); color: var(--orange); font-weight: bold; }
option	{ border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark); color: var(--orange); font-weight: bold; }
.lang-combo	{ font-family: 'Roboto Condensed'; border: none; box-shadow: none; background-color: var(--bg-blue); color: white; font-weight: 500; font-size: 1rem;  }

:checked + span { font-weight: bold; color: var(--orange); background-color: rgb(20,132,203,0.15); }
.selected-layers { color: var(--orange); background-color: #fff; }
textarea	{ font-family: 'Roboto'; min-width: 200px; color: var(--orange); font-weight: bold; font-size: 1rem;
		  border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark);
		}

#query-info	{ font-size: small; color: #999; border-top: 1px solid #eee; margin-top: 3px; text-align: right; }
#div-link	{ float: left; }

.elink 		{ color: var(--blue) }
.glink 		{ color: var(--orange) }
.videoo::after {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==");
  display: inline-block;
  width: 14px; height: 16px; margin: 6px;
  vertical-align: bottom;
}
.video::after {
  content: '|▷';
  margin-left: 4px;
  font-weight: bold;
  color: black;
}

#header {
  background-color: #fff;
  color: #444;
  width: 100%;
  margin: 5px 0px 5px 0px;
  height: 50px;
  border: none;
  outline: none;
  font-size: 0.9rem;
  font-weight: bold;
  transition: 0.4s;
}
#table-header { width: 100% }
#header-logo { text-align: left; width: 220px; }

.news-alert	{ color: var(--red);	font-size: 1.0rem; text-align: right; }
.news-warning	{ color: var(--orange); font-size: 1.0rem; text-align: right; float: right; max-width: 80%;}
.news-info	{ color: var(--blue);	font-size: 1.0rem; text-align: right; }
.news-blink	{ color: var(--red);    font-size: 1.0rem; text-align: right;
		  animation: blink-animation 1s steps(5, start) infinite;
		  -webkit-animation: blink-animation 1s steps(5, start) infinite;
		}
	@keyframes blink-animation { to { visibility: hidden; } }
	@-webkit-keyframes blink-animation { to { visibility: hidden; } }

/*    ACCORDION */

.underline { border-bottom: 1px solid #eee; }

em	{ color: #222; font-weight: 550 }
/*    FLEX */

.cflex-container { display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  background-color: inherit;
                }
.rflex-container { display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  background-color: inherit;
                }
.box1x0 { flex-grow: 0;
          overflow: hidden;
	  margin: 4px 10px 0px 0px;
	  padding: 4px 4px 4px 4px;
        }
.box1x1 { flex-grow: 1;
          overflow: hidden;
	  margin: 4px 10px 0px 0px;
	  padding: 4px 4px 4px 4px;
        }
.box2x1
        { flex-grow: 2;
          flex-basis: auto;
          overflow: auto;
	}
.box3x1
        { flex-grow: 3;
          flex-basis: auto;
          overflow: auto;
	}
.box4x1
        { flex-grow: 4;
          flex-basis: auto;
          overflow: auto;
	}
.box {  color: #444;
	margin: 4px;
	padding: 4px;
	}
.box th { background-color: #eee; font-weight: 550 }

.class-container
	{ display: grid;
	  width: 98%;
	  grid-template-columns: 80% auto;
	  grid-template-rows: auto;
	  grid-gap: 5px;
	  grid-auto-flow: row;
	}
.class-invs
	{ overflow-y: scroll;
	}
.class-recs
	{ 
	}

.image-box {  color: #444;
	margin: 4px;
	padding: 4px;
	}

.image-grid { width: 120px; height: 180px; }
.image-grid td { text-align: center; height: 160px; }
.image-grid th { font-size: small; text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 20px;}

.center	{ text-align: center }
.left	{ text-align: left !important }
.right	{ text-align: right }
.high th { background-color: #ddd }

.float-left	{ float: left }
.float-right	{ float: right }

.fg-orange	{ color: var(--orange) }
.fg-gray	{ color: var(--fg-dark-gray) }
.fg-light_gray	{ color: var(--fg-dark-gray) }
.fg-blue	{ color: var(--fg-blue) }
.fg-darkgreen	{ color: darkgreen }

#div-aux-record { display: none;
		  padding-top: 20px; 
		  background-color: #fff;
		  overflow-y: auto; overflow-x: hidden;
		  transition: max-height 0.2s ease-out;
}
#div-form	{ display: none; }
#div-ins-cols	{ display: none;
		  padding-top: 20px; 
		  background-color: #fff;
		  overflow-x: hidden;
		  transition: max-height 0.2s ease-out;
}
#div-result	{ display: none;
		  padding-top: 20px; 
		  margin-bottom: 20px;
		  background-color: #fff;
		  overflow-x: hidden;
		  transition: max-height 0.2s ease-out;
}
#div-show-images
	{ width: 100%; height: calc(100% - 150px);
		  top: 150px; left: 0px;
		  position: absolute;
		  background-color: #fff;
		  display: none; 
		  vertical-align: bottom;
		  box-shadow: 3px 3px 3px #ccc;
		  overflow: hidden;
	}
#show-images-info
	{ height: 50px;
	  font-size: small;
	}
#div-map
	{ width: 100%;
	  height: 98%;
	}
.info	{ padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { font-size: 10px; text-align: left; line-height: 18px; color: #555; }
.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

.img-cell	{ max-width: 40%; }

.thumb-rec	{ box-shadow: 3px 3px 3px #ccc; }

.cel-row	{ display: table-row-group; width: 100%; }

.warning	{ text-align: center; color: var(--orange); font-size: 1rem; font-weight: bold; }
.warning::before{ content: url('/search/imgs/warning-32.png'); padding-right: 5px; }
.error		{ text-align: center; color: var(--red); font-size: medium; font-weight: bold; }
.error::before	{ content: url('/search/imgs/error-32.png'); padding-right: 5px; }


.flex-menu-bar
		{ display: flex;
		  flex-direction: row;
		  flex-wrap: wrap;
		  width: 100%;
		}
.mi-records	{ float: right }
.action-box { flex-grow: 0;
          overflow: hidden;
	  margin: 4px 10px 0px 0px;
	  padding: 4px 4px 4px 4px;
        }
.flex-box
		{ display: flex;
		  flex-direction: row;
		  flex-wrap: wrap;
		  width: 100%;
		}

footer		{ color: #666666;
		  position: relative;
		  display: flex;
		  justify-content:center;
		  align-items: center;
		  width: 100%; height: 35px;
		  border-top: 2px solid var(--bg-blue);
		  bottom: 1px;
		}
footer span	{ width: 30% ; text-align: center; }

.l-space { padding-left: 10px }
.r-space { padding-right: 10px }
.bullet { letter-spacing: 0.4px; }
.bullet::before { content: url('/search/imgs/orange-bullet3.png'); }

.banner-link	{ color: #fff; text-decoration: none; font-size: 1.2rem; }

/* ACTION */
.action-bar	{ background-color: #fff; opacity: 0.8;
		}

.none-box	{ background-color: #fff;
		  margin-right: 5px;
		}

.action-submit
	{ padding: 5px 2px 5px 2px;
	  font-size: 1.8rem;
	  font-weight: 700;
	  background-color: #fff;
	  font-family: 'Roboto Condensed';
	  letter-spacing: -0.6px;
	  border: none;
	  color: var(--fg-blue);
	  cursor: pointer;
	  font-variant: small-caps;
	}

.action-form	{ color: var(--orange) }
.action-submit:hover	{ color: var(--orange) !important; border: none; }
.action-submit:active	{ color: var(--orange); border: none; }
.disabled	{ color: #ccc }

.pointer	{ cursor: pointer; }

.geo-table	{ empty-cells: hide; border-spacing: 0px; border-collapse: collapse; margin: 5px 5px 5px 5px; }
.geo-table th	{ text-align: center; border-bottom: 1px solid #fff; background-color: inherit; }
.geo-table td	{ background-color: inherit; padding-left: 5px; }
.geo-table td:empty	{ border: 0px solid #eee; } 
.geo-table th.title{ text-align: left; border-bottom: 1px solid rgb(255,102,0,0.3); background-color: inherit; }

.form-table 	{ max-width: 30vw; min-width: 20vw; }
.form-table th	{ text-align: left; border-bottom: 0px solid rgb(255,102,0,0.3); background-color: inherit; }
.form-table td	{ background-color: inherit; }

.sec-table 	{ width: auto; }

.full-record-table	{ font-size: medium; border-spacing: 2px; min-width: 70%; max-width: 95%; }
.full-record-table  th	{ font-size: medium; font-weight: 600; text-align: left; border: 1px solid #eee; padding: 5px; } 
.full-record-table  td	{ font-size: medium; font-weight: 400; text-align: left; border: 1px solid #eee; padding: 5px; } 
.no-border	{ border: none !important }

.annotation-table	{ font-size: medium; border-spacing: 2px; min-width: 70%; }
.annotation-table  tr	{ vertical-align: top; } 
.annotation-table  th	{ font-size: medium; font-weight: 600; text-align: left; border: 1px solid #eee; padding: 10px; vertical-align: top; } 
.annotation-table  td	{ font-size: medium; font-weight: 400; text-align: left; border: 1px solid #eee; padding: 10px; } 

.numbers-table		{ font-size: medium; border-spacing: 2px; empty-cells: hide; }
.numbers-table  th	{ font-size: medium; font-weight: 600; border: 1px double #eee; padding: 5px 10px 5px 10px; box-shadow: 1px 1px 1px #ccc; } 
.numbers-table  td	{ font-size: medium; font-weight: 400; border: 1px double #eee; padding: 5px 10px 5px 10px; box-shadow: 1px 1px 1px #ccc; } 
.numbers-table  td:empty	{ border: 0px solid #eee; } 

.num-hgap	{ min-width: 10px }
.num-vgap	{ height: 0px }
.num-logo,.num-graph
		{ box-shadow: none !important; border: none !important; }
.num-cell	{ width: 100px; height: 40px; font-size: x-large; font-weight: bold; color: var(--fg-dark-gray); }
.big-num	{ font-size: large; font-weight: bold; color: var(--fg-blue); }
.hi-num		{ font-size: x-large; font-weight: bold; color: var(--orange); }

.inv-rec-table		{ font-size: 1.0rem; border-spacing: 2px; empty-cells: hide; }
.inv-rec-table  th	{ font-size: 1.0rem; font-weight: 600; border: 1px double #eee; padding: 5px 10px 5px 10px; box-shadow: 1px 1px 1px #ccc; } 
.inv-rec-table  td	{ font-size: 1.0rem; font-weight: 400; border: 1px double #eee; padding: 5px 10px 5px 10px; box-shadow: 1px 1px 1px #ccc; } 

.inv-rec-acc,.status-acc-1,.tax-status-acc-1	{ color: #080; font-weight: 500 !important; cursor: pointer; font-style: italic; }
.inv-rec-syn,.status-syn-1	{ color: #666; font-weight: 500 !important; cursor: pointer; font-style: italic; }
.inv-rec-amb,.status-amb-1	{ color: #808; font-weight: 500; cursor: pointer; font-style: italic; }

.inv-rec-acc-lax,.status-acc-0	{ color: #080; font-weight: 400 !important; cursor: pointer; font-style: italic; }
.inv-rec-syn-lax,.status-syn-0	{ color: #888; font-weight: 400 !important; cursor: pointer; font-style: italic; }
.inv-rec-amb,.status-amb-0	{ color: #808; font-weight: 400; cursor: pointer; font-style: italic; }

.inv-rec-unk,.status-unk	{ color: #960; font-weight: 400; cursor: pointer; font-style: italic; }
.inv-rec-gen,.status-gen	{ color: #08f; font-weight: 400; cursor: pointer; font-style: italic; }
.italic		{ font-style: italic }

.ins-hgap	{ width: 10px; background-color: #fff; border-collapse: collapse; padding: 0px; border: none;  border-spacing: 0px; }

.layers-table		{ font-size: medium; border-spacing: 2px; empty-cells: hide; }
.layers-table  th	{ font-size: medium; font-weight: 600; border: none; padding: 2px 2px 1px 2px; text-align: left; background-color: #fff; } 
.layers-table  td	{ font-size: medium; font-weight: 400; border: 1px double #eee; padding: 2px 2px 1px 2px; } 
.layers-table  td:empty	{ border: 0px solid #eee; } 

.cite-table		{ font-size: medium; border-spacing: 2px; empty-cells: hide;  max-width: 60%; min-width: 80%; }
.cite-table  th	{ font-size: medium; font-weight: 600; border: none; padding: 2px 2px 1px 2px; text-align: left; background-color: #fff; } 
.cite-table  td	{ font-size: medium; font-weight: 400; border: none; padding: 2px 2px 1px 2px; } 

.sel-states-table { float: right }
.sel-states-table th { padding-right: 10px; padding-left: 10px; }

.cols-6	{ columns: 200px 6; column-rule: 1px solid #eee; }
.cols-5	{ columns: 200px 5; column-rule: 1px solid #eee; }
.cols-4	{ columns: 200px 4; column-rule: 1px solid #eee; }
.cols-3	{ columns: 200px 3; column-rule: 1px solid #eee; }
.cols-2	{ columns: 200px 2; column-rule: 1px solid #eee; }
		

.sel-input	{ height: 30px; width: 400px; font-size: large; }
.tiny		{ font-size: small; }
.xtiny		{ font-size: x-small; color: var(--fg-blue); } 
.add-del	{ font-size: x-large; font-weight: bold; color: var(--fg-dark-gray); cursor: pointer; }
.click		{ cursor: pointer; color: var(--fg-blue); font-weight: 600; text-shadow: 1px 1px 1px #eee; }
.fechar		{ cursor: pointer; color: var(--orange); font-weight: 600; text-shadow: 1px 1px 1px #eee; }
.click:hover	{ color: var(--orange); }
.tiny-click	{ cursor: pointer; font-size: small; color: var(--fg-blue); font-weight: 600; }
.clear-form	{ cursor: pointer; font-size: 1.2rem ; color: var(--orange); font-weight: 600; }
.tip-icon	{ cursor: help; color: var(--orange); font-size: small; }
.look		{ cursor: pointer; color: var(--fg-blue); font-size: larger; }
.look:hover	{ color: var(--orange); }

.recs-table	{ width: 100%; border-spacing: 0px; border: 1px solid #ccc;  padding: 3px; }
.recs-table td { padding: 4px 4px 4px 4px; font-size: 1.0rem }
.recs-table td img { width: 100px }

.dups-table	{ width: calc(100% - 200px); border-spacing: 0px; }
.dups-table td { padding: 4px 4px 4px 4px; font-size: medium }
.dups-table td img { width: 100px }

.bg-gray	{ background-color: var(--bg-gray) !important }
/* .bg-beige	{ background-color: var(--bg-beige) !important } */
.bg-geo		{ background-color: #f0f0f0 !important }

.bg-white	{ background-color: #ffffff !important }
.bg-dark	{ background-color: var(--bg-dark) !important }
.bg-light	{ background-color: var(--bg-light) !important }
.bg-green	{ background-color: var(--bg-green) }
.bg-orange	{ background-color: var(--bg-orange); }
.main-rec	{ font-size: 1.1rem !important }

.float-right	{ float: right }
.float-left	{ float: left }

.close-button	{ float: right; z-index: 10; font-size: medium; font-weight: bold; height: 20px; color: var(--fg-blue) }

.comment	 { font-size: small; font-style: italic; }
.comment fieldset	{ border: 1px solid #eee; width: 80%; margin: 5px 10px 5px 10px; background-color: #fcfcfc; margin-left: 25px; }
.commFs { border: 1px solid #fefefe; background-color: #fefefe;

          border-top-right-radius: 25px; border-bottom-left-radius: 25px;
        }
.commFs::before { content: url('/search/imgs/comment-on.png'); margin-left: 15px; float:left; left: -40px }
.commBody       { margin-left: 15px; display: block }
.commSign       { width: 100%; display: block; text-align: right; font-style: italic }
.commNote       { font-size: x-small; color: #666666; text-align: left; display: block }

#top-bar	{ width: 100%; height: 40px;
		  background-color: var(--bg-blue);
		  border-top: 2px solid var(--bg-blue);
		  border-bottom: 2px solid var(--bg-blue);
		  color: white;
	 	  text-align: center;
		}
/*
#disclaimer	{ position: absolute;
		  top: calc(100% / 4);
		  width: calc(100% / 3); height: 300px;
		  left: calc(100% / 3);
		  background-color: var(--bg-blue);
		  color: white;
		  z-index: 9;
		  display: none;
		  padding: 20px 20px 20px 20px;
		}
*/
#disclaimer	{ position: absolute;
		  bottom: 10px;
		  width: 90%;
		font-size: small;
		  background-color: var(--bg-blue);
		  color: white;
		  z-index: 9;
		  display: none;
		  padding: 20px 20px 20px 20px;
		}
.button		{ background-color: white;
		  border: none;
		  font-weight: bold;
		  color: var(--fg-blue);
		  padding: 2px 4px 2px 4px;
		}

.oV	{ font-weight: bold; color: maroon; font-variant: small-caps; cursor: pointer }
.tK	{ font-weight: bold; color: maroon; font-variant: small-caps }
.tP	{ font-weight: bold; color: maroon; font-variant: small-caps }
.tC	{ font-weight: bold; color: maroon; font-variant: small-caps }
.tO	{ font-weight: bold; color: maroon; font-variant: small-caps }
.tF	{ font-weight: bold; color: maroon; font-variant: small-caps }

.tnoId	{ text-decoration: none; color: #0099cc; font-weight: normal  }

.tGg	{ font-style: italic; text-decoration: none; color: #08f  }

.tUnk	{ text-decoration: none; color: #960  }
.tG	{ font-style: italic; text-decoration: none; color: #960  }
.tE	{ font-style: italic; text-decoration: none; color: #960  }
.tM	{ font-style: normal; text-decoration: none; color: #960  }
.tS	{ font-style: italic; text-decoration: none; color: #960  }

.tAcc	{ font-weight: bold; text-decoration: none; color: #080  }
.tGa	{ font-weight: bold; font-style: italic; text-decoration: none; color: #080  }
.tEa	{ font-weight: bold; font-style: italic; text-decoration: none; color: #080  }
.tMa	{ font-weight: bold; font-style: normal; text-decoration: none; color: #080  }
.tSa	{ font-weight: bold; font-style: italic; text-decoration: none; color: #080  }

.tGa-lax,.tGax	{ font-weight: normal; font-style: italic; text-decoration: none; color: #080  }
.tEa-lax,.tEax	{ font-weight: normal; font-style: italic; text-decoration: none; color: #080  }
.tMa-lax,.tMax	{ font-weight: normal; font-style: normal; text-decoration: none; color: #080  }
.tSa-lax,.tSax	{ font-weight: normal; font-style: italic; text-decoration: none; color: #080  }

.tSyn	{ font-weight: bold; text-decoration: none; color: #666  }
.tGs	{ font-weight: bold; font-style: italic; text-decoration: none; color: #666  }
.tEs	{ font-weight: bold; font-style: italic; text-decoration: none; color: #666  }
.tMs	{ font-weight: bold; font-style: normal; text-decoration: none; color: #666  }
.tSs	{ font-weight: bold; font-style: italic; text-decoration: none; color: #666  }

.tGs-lax,.tGsx	{ font-weight: normal; font-style: italic; text-decoration: none; color: #666  }
.tEs-lax,.tEsx	{ font-weight: normal; font-style: italic; text-decoration: none; color: #666  }
.tMs-lax,.tMsx	{ font-weight: normal; font-style: normal; text-decoration: none; color: #666  }
.tSs-lax,.tSsx	{ font-weight: normal; font-style: italic; text-decoration: none; color: #666  }

.tAmb	{ font-weight: normal; text-decoration: none; color: #808  }
.tG2	{ font-weight: bold; font-style: italic; text-decoration: none; color: #808  }
.tE2	{ font-weight: bold; font-style: italic; text-decoration: none; color: #808  }
.tM2	{ font-weight: bold; font-style: normal; text-decoration: none; color: #808  }
.tS2	{ font-weight: bold; font-style: italic; text-decoration: none; color: #808  }

.tG2-lax,.tG2x	{ font-weight: normal; font-style: italic; text-decoration: none; color: #808  }
.tE2-lax,.tE2x	{ font-weight: normal; font-style: italic; text-decoration: none; color: #808  }
.tM2-lax,.tM2x	{ font-weight: normal; font-style: normal; text-decoration: none; color: #808  }
.tS2-lax,.tS2x	{ font-weight: normal; font-style: italic; text-decoration: none; color: #808  }

.tA	{ text-decoration: none; color: black  }
.tT	{ font-weight: bold; color: red }
.tR	{ font-weight: bold; color: darkred }

em      { font-weight: bold; font-style: italic; color: #444444 }
u	{ text-decoration: none; border-bottom: 1px solid maroon; }

.bC	{ color: black; font-weight: bold }
.tN	{ color: black; font-weight: bold }

.bA	{ color: #444444; font-weight: bold  }
.bT     { color: black; font-weight: bold  }
.bL     { color: black  }
.bY     { color: black; font-weight: bold }
.cY     { color: black; font-weight: bold }
.tY     { color: black; font-weight: bold }
.bI     { color: black  }

.nO     { color: black  }

ll      { color: var(--fg-blue); }
.ll     { color: var(--fg-blue); }
llb     { color: darkgoldenrod; font-weight: bold }
.llb    { color: darkgoldenrod; font-weight: bold }
lf      { color: #444444; font-size: x-small; }

.tag	{ color: var(--fg-dark-gray); }
label	{ color: var(--fg-dark-gray); font-style: normal; font-size: 1.1rem; }
label.geo	{ font-style: normal; font-weight: 500; color: var(--fg-darker-gray); font-size: 1.1rem; }

label.cb	{ color: var(--fg-dark-gray); cursor: pointer; font-size: 1.1rem; }
label.mod	{ color: var(--fg-dark-gray); cursor: pointer; font-size: 1.0rem; }

.collID	{ vertical-align: top; background-color: #ffffff; width: 50px }

.graph-icon	{ width: 30px; height: 30px; padding-top: 10px; }
.shadow		{ box-shadow: 3px 3px 3px #ccc; }
.graph-canvas
	{ box-shadow: 3px 3px 3px var(--bg-dark); background-color: var(--bg-light) }

:root {
  --balloon-border-radius: 0;
  --balloon-color: var(--bg-blue);
}
h1 { font-size: large; color: #444444; }

#recs-viewer-div
	{ position: absolute;
	  bottom: 10px;
	  width: calc(100% - 100px);
	  height: calc(100% - 100px);
	  left: 100px;
	  display: block;
	  visibility: hidden;
	  background-color: var(--bg-gray);
          flex-direction: row;
	  box-shadow: 3px 3px 3px #ccc;
	}
.control-bar
	{ width: calc(100% - 25px);
	  height: 26px;
	  box-shadow: 3px 3px 3px #ccc; 
	  background-color: rgb(255,102,0,0.05);
	  color: var(--fg-dark-gray);
	  font-weight: bold;
	}
.control-bar select	{ border: none; box-shadow: none; background-color: inherit; }
#div-tip	
	{ position: absolute; top: 0; left: 0; display: none; width: 300px; z-index: 9; background-color: var(--bg-blue); overflow: auto;
	  border: 1px  solid #e0e0e0; color: white;
	  box-shadow: 5px 5px 5px #ccc; 
	  padding: 5px; 
	  font-size: small;
	}
#div-tip b	{ font-weight: 600 }

#img-download a	{ color: var(--fg-blue); text-decoration: none; padding: 0 15px 5px 0; font-weight: 600; }
/*
.bg-dark-blue	{ background-color: rgb(20,132,203,0.1) }
 */
.bg-dark-blue	{ background-color: rgb(255,255,255,0.1) }
.bg-blue	{ background-color: rgb(20,132,203,0.075) }
.bg-light-blue	{ background-color: rgb(20,132,203,0.05) }
.geo-bullet	{ background-color: rgb(128,0,0,0.7)	!important; color: #fff; }
.mb-bullet	{ background-color: rgb(153,102,0,0.7)	!important; color: #fff; }
.hi-bullet	{ background-color: rgb(20,132,203,0.8) !important; color: #fff; }
.lo-bullet	{ background-color: rgb(238,238,238,1.0) !important; color: var(--blue); text-align: left; font-family: 'Roboto Condensed'; font-weight: 500; }

.bg-dark-gray	{ background-color: rgb(204,204,204,0.1) }
.bg-medium-gray { background-color: rgb(204,204,204,0.075) }
.bg-light-gray	{ background-color: rgb(204,204,204,0.05) }

.bg-beige{ background-color: rgb(255,102,0,0.05) }
.bg-light-beige{ background-color: rgb(255,102,0,0.025) }


fieldset { border: 1px solid #fff; }

.sins1  { background-color: #eee; color: #1484cb; }     /* instituição */
.sins2  { background-color: #eee;  color: #045a99;}     /* sub-instituição */
.sins1 label  { background-color: #eee; color: #1484cb; }     /* instituição */
.sins2 label { background-color: #eee;  color: #045a99;}     /* sub-instituição */

.scol1  { background-color: #fff; color: #444; font-weight: normal; }   /* coleção */
.scol2  { background-color: #fff; color: #666; font-weight: normal;     /* sub-coleção */}

.border	{ border: 1px solid #ccc !important; }	/* for debug purposes */
.icell	{ width: 90% !important }
/* .w135	{ max-width: 135px !important; min-width: 135px !important; } */
.w135	{ width: 135px }
.w300	{ width: 300px }
.w422	{ width: 100% }
.w60	{ width: 60px; max-width: 60px }

.w100pc	{ width: 95% }

.fcl	{ color: #ccc; margin-left: 10px; font-size: large; font-style: normal; cursor: pointer; }
.fcl:hover	{ color: #f00; }

.hidden	{ display: none; visibility: collapse; }
.hidden2	{ display: table-row; visibility: visible; }

.faq 		{ padding-left: 10%; padding-right: 10%; font-size: medium; }
.faq em		{ font-style: normal; font-weight: bold; }
.faq .faq-1     { list-style-type: none; }
.faq .faq-1 li b	{ color: var(--orange); font-size: 1.2rem; }
.faq-1 .faq-2     { list-style-type: square; }
.faq-1 .faq-2 li b	{ color: var(--fg-blue); font-size: 1.2rem; }
.faq-2 .faq-3     { list-style-type: square; }
.faq-2 .faq-3 li b	{ color: var(--fg-dark-gray); font-size: 1.1rem; }
.faq-3 .faq-4     { list-style-type: square; }
.faq-3 .faq-4 li b	{ color: var(--fg-dark-gray); font-size: 1.0rem; }

.redlist        { color: white; font-weight: bold; background-color: #c00; border-radius: 0px 7px 0px 0px; padding: 0 5px 0 5px; }

.grid-grid-table
	{ display: grid; width: 100%; height: 100%;
	  grid-template-areas: "viewer" "thumbs" "info";
	  grid-template-columns: auto 150px;
	  grid-template-rows: auto 100px;
	}
.grid-grid-viewer
	{ grid-row: 1;
	  grid-column: 1;
background-color: yellow;
	}
.grid-grid-thumbs
	{ grid-row: 1;
	  grid-column: 2;
	  overflow-y: scroll;
background-color: blue;
	}
.grid-grid-info
	{ grid-row: 2;
	  grid-column: 1 / 2;
	  overflow-y: scroll;
background-color: green;
	}
	
.thumb  { flex: auto; background-color: #efefef; color: #222; margin: 2px; font-size: x-small; text-align: center; }
#osd-container { width: 100%; height: 100%; z-index: 15; display: none; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.8); }
#osd-header { width: 100%; height: 60px; background-color: rgba(255,255,255,1.0); padding: 0px 20px 0px 20px; font-size: 1rem; }
#osd-header-logo { float: left; }
#osd-header-coll { font-size: 1.2rem; font-weight: bold; float: right; padding-right: 30px; margin-bottom: 3px }
#osd-viewer { width: 100%; height: calc(100% - 150px); }
#osd-text   { width: 100%; height: 100px; background-color: rgba(255,255,255,1.0); padding: 3px 20px 3px 20px; font-size: 0.9rem; }

.mb-year        { font-size: 0.9rem; font-weight: bold; }
.mb-n1		{ font-size: 0.9rem; font-weight: normal; }
.mb-n2		{ font-size: 0.9rem; font-weight: normal; font-style: italic; }
.mb-l1		{ font-size: 0.9rem; font-weight: bold; background-color: #eee; }
.mb-l2		{ font-size: 0.9rem; font-weight: normal; }

.ellipsis	{ text-overflow: ellipsis; /* enables ellipsis */
		  white-space: nowrap; /* keeps the text in a single line */
		  overflow: hidden; /* keeps the element from overflowing its parent */
		}

.landuse-table		{ font-weight: normal; background-color: #f9f9f9; margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; }
.landuse-table td	{ border: 1px solid #fff; }
.landuse-table th	{ }
.lu-title	{ background-color: #fff; font-size: 1.0rem; text-align: left; color: var(--fg-blue); font-size: 1.0rem; font-weight: normal; color: var(--fg-blue); }
.lu-class	{ background-color: #f9f9f9; font-size: 0.8rem; text-align: left; color: var(--fg-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }

.lu-year-1	{ font-size: 0.6rem !important; font-weight: normal; color: var(--fg-blue); cursor: help; background-color: #f9f9f9;}
.lu-year-2	{ font-size: 0.6rem !important; font-weight: normal; color: #f9f9f9; cursor: auto; background-color: #f9f9f9;}
.lu-year-col	{ font-size: 0.6rem !important; font-weight: normal; color: #ff0000; cursor: help; background-color: #f00; cursor: help; }
.lu-tick	{ font-size: 0.6rem !important; opacity: 0.5; height: 5px; cursor: help; }


/* GBIF backbone required styles */

.gen-acc, .sp-acc, .sub-acc
        { color: darkgreen; font-style: italic; }
.acc, .hi-acc
        { color: darkgreen; }

.gen-syn, .sp-syn, .sub-syn
        { color: #666; font-style: italic; }
.syn, .hi-syn
        { color: #666; }

.gen-amb, .sp-amb, .sub-amb
        { color: fuchsia; font-style: italic; }
.amb, .hi-amb
        { color: fuchsia; }

.gen-unk, .sp-unk, .sub-unk
        { color: orange; font-style: italic; }
.unk, .hi-unk
        { color: orange; }


.users-layers { color: #800000 !important }

.rotate {
  transform: rotate(-90deg);

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/*              SCROLL TEXT
                reference: https://blog.hubspot.com/website/scrolling-text-css
*/


#scroll-container {
  border: none;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }