.site-search-view .map-tool-view {
	display: none !important;
}

body{
	min-width: 420px;
}

.map-tool-view .site-search-view {
	display: none !important;
}

.map-tool-view #map-view {
	display: block;
}

#view-tabs {
	margin-top: 20px;
	overflow: hidden;
}

#view-tabs > span {
	float:left;
	padding: 8px;
}

#view-tabs span.message {
	text-align: right;
	float: right;
	width: calc( 100% - 260px);
}

#view-tabs span span {
}

.site-search-view #view-tabs .set-site-search {
}

.site-search-view #view-tabs .set-site-search > span {
}

.map-tool-view #view-tabs .set-map-tool {
}

.map-tool-view #view-tabs .set-map-tool > span{
}

#main {
  border-right: none !important;
  margin-top: -20px;
}

.site-count {
  font-weight: bold;
  font-size: 16px;
  font-family: "proxima-nova", sans-serif;
}

.site-count span {
	font-weight: normal;
}

.result-count.lower {
	clear:both;
}

.result-count.lower .site-count {
	margin-bottom: 0;
}

#map-sizer button{
	float: unset;
	border-radius: 4px;
	margin-top: -1px;
}

/*#site-search-view-button button:before, #map-tool-view-button button:before */
					
/* map and various views sizing and hiding */

#map {
	position: absolute;
	left: -4000px;
	width: 475px;
    height: 100%;
	float:left;
	opacity: 0;
}

#map.show-map,
#view-container.map-tool-view #map {
	opacity:1;
}

.site-search-view #map.show-map, .map-tool-view #map {
	position:static !important; 
	float: right;
}

.site-search-view #map.show-map {
	clear:both;
}

#map-view-controls {
    float:right;
    margin-top: 15px;
    margin-bottom: 10px;
}

.map-tool-view #map-view-controls {
	margin-top: 0px;
	margin-bottom: 10px;
}
                      	
#map #map-view {
	position: relative;
	left: 15px;
	width: 460px;
	/* width: 250px; */
	height: 700px;
	/* height: 300px; */
}

.site-search-view.cs-button {
	top: 8px !important;
}

.site-search-view.cs-button > div {
	float: right;
}

.map-tool-view #map {
	width: 700px;
	clear:both;
}

.map-tool-view #map #map-view {
	width: 100%; 
  	height: 700px !important;
  	left: 0px;
}

#map-config {
	width: calc(100% - 700px); 
	float: left;
	height: 100%;
	max-width: 430px;
} 

#map-view-controls div {
	display: inline;
}

.map-tool-view #map-tool-view-button button {
	background-color: #efefef;
	pointer-events: none;
	display: none;
}

.big-map #map.show-map, 
.big-map .map-tool-view #map {
	position:static !important; 
	z-index: 10; 
	width: 100%;
	margin-bottom: 30px;
}
 
.big-map #map.show-map #map-view, 
.big-map .map-tool-view #map #map-view {
	width: 100%;
	left:0 !important; 
}

.big-map #sites.show-map {
	display:block;
	width: 100%;
}

.big-map .map-tool-view #map-config {
	display: block;
}

/* hide the info buttons until they have a data resource assigned */
/* example of fully defined: <i class="fa fa-info-circle pop-left medium" data-resource="15561" aria-hidden="true"> */
/* pop up characteristics such as pop-left are defined in page-sitesearch.js in the fillPopup function */
i.fa-info-circle {display:none;}

i.fa.fa-info-circle[data-resource] {
	display: initial;
	cursor: pointer;
}
/* info buttons */

.d-inline {
	display: inline;
}

.filter-panels .popover h3, .popover h3 {
	margin-top: 0px !important;
}
   
/* map sizer and map display controls */ 
#map-sizer button {
	background-color: white; /* #d0dee3 ; */
	padding-left: 5px;
}

#map-sizer button .site-search-view {
	background-image: url('/wp-content/themes/ameriflux/library/images/globe 4.png');
	background-repeat: no-repeat;
	padding-left: 20px;
	background-size: contain;
}

#map-size-choices {
	padding: 3px 5px;
    background-color: white;
	width: 75px;
	right: 0px;
	min-width: 30px !important;
	left: 62px;
}

#map-size-choices li.active {
	background-color: #d0dee3;
}
            	
#map-sizer.show-map {
	margin-top: -40px;
	margin-left: 40px; 
}

.big-map #map-sizer.show-map {
	margin-top: -40px;
	margin-left: calc(100% - 435px); 
}

#settings > h2 {
	margin: 0px;
	padding-top: 4px ;
	padding-bottom: 5px;
	border-top: solid 1px #ccc;
	border-bottom: 0px;
}

#settings > h2:last-of-type {
	border-bottom:1px solid #ccc;
}

#settings > h2.open {
	border-bottom: none;
}

#settings > h2 i {
	float: right;
	margin-right: 20px;
}

#settings h2+div {
	display:none;
}

#settings h2.open+div {
	display:block;
}

#settings h2 span:after {
	font: normal normal normal 14px/1 FontAwesome;
    content: "\f107"; float:right; 
    margin-right: 10px; 
    color: #487e90; 
    position: relative;
    top: 5px;
}

#settings h2 span:last-child:after {
   content: "\f106"; 
}

#settings h2 span:last-child {
   display:none;
}

#settings h2.open span:last-child {
	display:inline;
}

#settings h2 span:first-child {
   display:inline;
}

#settings h2.open span:first-child {
  display:none;
}


#settings #TitleDiv {
	margin-bottom: 10px;
}

#settings #TitleDiv label {
	width: 45%; 
	margin-bottom: 0px;
	margin-top: 5px;
	font-weight: normal !important;
}

#settings #TitleDiv input[type='text'] {
	width: 95%; 
}

#overlayChoices {
	border: 1px #ccc solid;
	padding: 10px 0px 0px 5px;
	margin: 5px 5px 10px 0px;
}

input[name='overlayGroup']{
	display: none !important;
}

.base-label {
	opacity: 1;
	width: 30%;
	font-size: 12px;
	font-weight: normal !important;
	text-align: center;
	margin-bottom: unset;
	cursor: pointer;
}

.base-label img {
	display: block;
	margin: 0 auto;
	outline: 1px #ccc solid;
}

.base-label[for='satnolabel'] {
	white-space: nowrap !important;
	text-aligh: left;
}

input[name='overlayGroup']:checked + label > img{
	outline: black 1px solid;
}

input:disabled + label {
	color: #ccc;
}

/*
input:disabled + label::before {
	content: "No legend";
	color: #ccc;
}
*/

#credit, #logoBox {
	position: absolute; 
	bottom: 40px;
	z-index: 30;
}

#logoBox {
	width: 150px;
}
#credit {
	bottom: 20px;
	padding: 5px;
	z-index: 30;
}

#avhrrLegend {width:185px}
#globLegend {width: 350px; }
#modisLegend {width: 185px; }

#overlayLegend > div, #markerLegend {
	background: white; 
	border: 1px black solid; 
	margin-bottom: 10px;
	display: none;
}

#markerLegend {
	display: block;
	padding: 0 8px 8px 0;
}

#overlayLegend h2, #markerLegend h2 {
	margin: 0;
	padding: 5px;
}

#markerLegend h2 {
	padding-bottom: 0px;
}

#overlayLegend table {
	border: 0px !important;
}

#overlayLegend table tr td {
	border: unset;
	padding: 2px;
}

#overlayLegend .legendBox {
	width: 15px;
	height: 15px;
}

#overlayLegend div {
	padding: 2px;
}

#markerLegend li {
	list-style: none;
}

#markerLegend li svg {
	width: 60px;
	height: 30px; 
	position: relative;
	left: 10px;
}

#markerLegend li svg.triangle {
	left: 9px;
}

#markerLegend li svg.circle {
	left: 8px;
}

#markerLegend li svg.img {
	height: 35px; 
	position: relative;
	left: -2px;
	top: 1px;
}

#markerLegend li span {
	font-size: 14px;
	position: relative;
	top: -6px;
	left: -9px;
}

#markerLegend li svg.img+span {
	top: -9px;
}

#operations #totals {
	padding: 0;
	border: none;
}

#operations #sitesets li {
	list-style: none;
	margin-top: 5px;
  padding-bottom: 12px;
}

.alert-success {
	width: 212px;
}

#sitesets div {padding-top: 5px; }
#ss-text {padding-right: 7px; }


#downloaddata-modal, 
#sets-modal, 
#savedsearch-modal {
	display:none;
	position: fixed;
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 1000;
	top: 0px;
}

#downloaddata-modal .dialog-box {
	display:none;
	width: 50%;
	min-width: 485px;
	height: 80%;
	margin: 5% auto;
	background: white;
	padding: 0;
}

#downloaddata-modal .dialog-box .message{
}

#downloaddata-modal table button{
	color: transparent;
	border: none;
	background-color: transparent;
}

#downloaddata-modal table button:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f111"; /* f192 circle dot */
  color: #333;			
}

#downloaddata-modal table button.picked:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f192"; /* circle dot */
  color: #333;			
}

#content {
	padding-bottom: 40px !important; 
}

#savedsearch-modal .dialog-box,
#sets-modal .dialog-box {
	display:none;
	width: 500px;
	margin: 220px auto;
	background: white;
	padding: 0;
}

.dialog-box header {
	background: #CCDBE1;
	font-weight: bold;
	font-size: 16px;
	padding: 10px 20px;
}

.dialog-box .message {
	padding: 20px;
}

.dialog-box .buttons {
	padding-top: 20px;
}

.dialog-box .message i {
	font-style: normal;
}

#search-clear-copy {
	margin-top: 10px;
}

#search-clear-copy > * {
	margin-right: 18px;
}

@media (max-width: 425px ) {
	#search-clear-copy > a {
		margin-bottom: 10px;
	}

}

#filter .summary {
	float: left;
}

#filter .summary .media-heading {
}

#filter .summary small {
	float: right;
}

#filter-accordion {
	width: 70%;
	float:left;
}

#filter-accordion .panel {
	width: 45%;
}

#filter .panel-default {
	width: 45%;
	float: left;
}

#filter .thumbnail,
#sites #totals {
  background-color: white;
  border: 1px solid #999;
  margin-bottom: 2px;
  padding: 5px 8px;
}

#sites #totals {
  padding: 0 0 8px 0;
  border: none;
}

#filter-read-out .label {
  white-space: normal;
  margin-bottom: 2px;
  margin-right: 2px;
  display: inline-block;
  text-align: left;
  font-size: 14px;
  padding-right: .2em;
  padding-left: .2em;
}

#filter-read-out .fa {
  font-size: 14px !important;
}

#mapTitle, #mapDescr, #logoBox, #credit, #overlayLegend, #markerLegend {
	cursor: grabbing;
}

div.markers {
	float: none;
	display: block;
	clear: both;
	border: 1px #ccc solid;
    padding-top: 0px;
    padding-left: 16px;
    margin-right: 5px;
    margin-top: 10px;
}


#iShapes li {
    list-style: none;
    float: left;
    width: 69px;
    height: 69px;
    margin-right: 8px;
    outline: 1px solid #ccc;
    color: transparent;
    background: #BAD7B2;
    padding: 16px 19px;
}

#iShapes li.selected {
	border: 2.5px solid black;
	padding: 13px 17px;
	outline: unset;
}

#iShapes li.img {
	padding: 0px;
}

#iShapes li.img img{
	margin-top: -22px;
    transform: scale(1.25);
}

#iColors, #iShapes, button.change-markers { 
	clear:both; 
	display: block; 
	overflow: hidden;
}

#iShapes {margin: 5px 0px; padding-left: 0px; }

#iColors {margin: 6px 0px; padding-left: 1px; }

/*
#iColors.disabled {
	opacity: .3;
	point-events: none;
}
*/

#iColors li {
    list-style: none;
    float: left;
    width: 40px;
    height: 69px;
    outline: 1px solid #ccc;
    color: transparent;
    font-size: 1px;
    margin-right: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    box-shadow: 0 0 0 1px black inset;
    border-top: solid 20px #BAD7B2;
    border-bottom: solid 20px #BAD7B2;
    border-left: 5px solid #BAD7B2;
    border-right: solid 5px #BAD7B2;
}

#iColors li.selected {
    outline-offset: -1px;
    outline: 3px solid black;
}

#MarkerDiv, #addRule {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

#MarkerDiv .disabled {
	pointer-events: none;
	opacity: .4;
}

.error {
    box-shadow: 1px 2px 3px red;
    outline: red solid 1px;
    background-color: pink;
}

#Rules header {
	display: flex;
	margin-left: 6px;
}

#Rules header span {
	width: 145px;
	font-weight: bold;
}

#Rules header span:last-child {
	width: 50px;
}

#ruleRows {
	border-collapse: collapse !important;
	border: 0px !important;
	box-shadow: 0 0 0 transparent;
	outline: unset;
	width: 98% !important;
	padding-left:0px;
}

#ruleRows tr, #ruleRows td, #ruleRows th {
	border: none !important;
	padding-left: 1px !important;
}

#ruleRows th {
	padding-left: 1px !important;
}

#ruleRows.bounded {
	overflow-y: scroll;
	max-height: 210px;
	border: 1px solid #ddd;
}

.ruleNum {
	font-weight: bold;
	padding-right: 5px;
	width: 16px;
	float: none;
	margin-left: -4px;
}

#ruleRows .ui-sortable-helper {
	background-color: #CCDBE1;
}

#ruleRows input,
#ruleRows select {
	background-color: white;
}

.ruleNum.wide {
	padding-right: 0px;
}

.ruleRow {
	list-style: none; 
	padding-left: 0px; 
	clear: both;
	display: flex;
	align-items: center;
}

.ruleRow td {
	vertical-align: middle !important;
}

.ruleRow i {
	background: transparent;
    padding: 4px;
    border-radius: 4px;
}

.ruleRow.active {
	background-color: #efefef;
}

.ruleRow.active i {
	background: transparent;
}

.ruleRow div {
	float: left;
}

#ruleRows .rule-op {
	min-width: 145px;
	padding-right: 0px;
}

#ruleRows .rule-op .selectdiv{
	float:right;
}

.gripicon {
	opacity: .5;
    border-left: solid transparent 3px;
}
.gripicon:hover {opacity: 1; border-left-color: #487e90;}
.gripicon:active {cursor: grab;}

li:only-child .gripicon,
.active .gripicon {
/* turn off gripicon when editing row */
  pointer-events: none;
  cursor: default;
}

#ruleRows .rule-vals {
	min-width: 144px;
    padding-right: 0px;
    padding-left: 0px;
}

.ruleVal {
    padding-left: 5px;
}

#ruleRows .ruleVal input {
	width: 65px;
	padding-right: 2px;
}

/*
.ruleVal2 span:before {
    content: '≤x≤';
}
*/

.ruleRow .rule-info.pin-pick {
    max-width: 60px;
    min-width: 50px;
    max-height: 40px;
    padding-left: 6px;
}

.ruleRow .rule-info.pin-pick svg {
	height: 40px;
	max-height: 40px;
	width: 45px;
	transform: translate(10px, 2px);
}	

.ruleRow .rule-info.pin-pick svg.circle {
	transform: translate(8px, 1px);
}

.ruleRow .rule-info.pin-pick svg.triangle {
	transform: translate(10px, 2px);
}

.ruleRow .rule-info.pin-pick svg.img {
	width: 53px;
	transform: translatex(-5px) scale(.75); ;
}

svg.img { 
	transform: scale(.75); 
	width: 60px;
	max-height: 40px; 
}

svg.img text {
    transform: translate(9px, 20px);
    stroke: #fff;
}

.pin-pick svg.img text{
	transform: translate(6px, 20px);
}

.ruleRow .rule-action {
	width: 35px;
    max-height: 40px;
    text-align: center !important;
    padding: 8px 2px 8px 2px !important;
}

.ruleRow .cancel span {
	display:none;
}

.ruleRow .fa.apply {
	display:none;
}

.ruleRow.active .fa.apply {
	display: block;
}

.ruleRow.active .fa.edit {
	display: none;
}

.ruleRow.editing .cancel span {
	display: inline-block;
}

/* experimental 
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #efefef;
    color: #111;
    font-size: 125%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    white-space: nowrap;
    opacity: 0;
    border: 1px solid #ddd;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
*/

/* this can be used anywhere */
.selectdiv {
	display: inline;
}

.selectdiv select{
	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
  	padding: 2px 15px 2px 5px;
}


/*.selectdiv:after {
    content: "\f0d7";
    display:inline-block;
    margin-left: -15px;
    font: normal normal normal 14px/1 FontAwesome;
    pointer-events:none;
    position:absolute;
    margin-top:6px;
    top:auto;
    right:auto;
}*/


.selectdiv select:focus,
#addRule button:focus {
    outline:none;
}

.ruleSelect {
	width: 111px;
}

#addRule.active .active {
	display:inline !important;
}

#addRule.active .waiting {
	display:none;
}

#addRule.waiting .active {
	display:none;
}

#addRule.waiting .waiting {
	display:inline;
}
	

/**/


#downloadmap-modal {
	display:none;
	position: fixed;
	height: 3000px;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 3000;
	top: 0px;
}

#downloadmap-modal .dialog-box {
	width: 450px;
	margin: 180px auto;
	background: white;
	padding: 0;
}

#downloadmap-modal header {
	background: #CCDBE1;
	font-weight: bold;
	font-size: 16px;
	padding: 10px 20px;
}

#downloadmap-modal .message {
	padding: 20px;
}

#downloadmap-modal .message div {
	margin-bottom: 15px;
}

#downloadmap-modal #dm-buttons {
	margin: 0px;
    overflow: hidden;
    padding-top: 10px;
}

#downloadmap-modal .message i {
	font-style: normal;
}

#downloadmap-modal #dm-buttons button {
	float: left;
	margin-right: 10px;
	width: 100px;
}

#downloadmap-modal .dlm-choice label {
	font-weight: normal !important;
}

#sites {
  font-size: 13px;
  width: 100%;
  float: left;
  height: auto;
  max-height: 700px !important;
  margin-bottom: 20px;
  z-index: 10;
  display: block;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

#sites.config-map {
	display: none;
}  

#sites.show-map {
	width: calc(100% - 475px); 
	float: left;
}  
/* set starting map width somewhere and use it above in calc */

#sites h3 {
  font-size: 24px;
}

.site-thumbnail {
  width: 80px;
  height: 103px;
  overflow: hidden;
}
#sites ul p,
#sites ul table {
  font-size: 12px;
  line-height: 1.2em;
}
#sites table th, #sites table td {
  font-weight: normal;
  padding-left: 4px !important;
}

#sites table th {
	vertical-align: bottom !important;
}

#sites table td {
	vertical-align: middle !important;
}

#sites table .measure{
	max-width: 6rem;
}

#sites table td.num {
	text-align: right !important;
	padding-left: 0px !important;
	padding-right: 4px !important;
}

#sites > ul,
#sites #sites-table-container {
  height: 100%;
  max-height: 700px;
  overflow-y: scroll;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-bottom: 1px solid #ddd;
}
#sites #totals h3 {
  margin: 8px 0 0 0;
}
#sites #totals h2 {
  margin: 0;
}
#sites .controls {
  width: 75px;
  text-align: right;
  margin-right: 10px;
}
#sites .controls i {
  cursor: pointer;
}

#sites #list-actions {
	width: 150px;
	text-align: right;
}

.copy-list {

}

#sites #list-actions i {
    cursor: pointer;
}

#sites .drawer td {
	padding: 5px;
}

#sites .table-cells {
	cursor: pointer;
}

#sites .media-heading {
	width: 70px;
	margin: 5px 0px;
}

div.title {
	position: relative;
	left: 15px;
}

.disabled-overlay {
    width: 35%;
    height: 50px;
    position: absolute;
    background: rgba(250, 250, 250, .85);
    z-index: 10000;
    top: 0;
}

.loading-message {
    text-align: center;
    font-weight: bold;
    padding: 0;
    margin: auto;  
    float: right;
}

.thumbnails-compact {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}
.thumbnails-compact:before,
.thumbnails-compact:after {
  display: table;
  content: "";
  line-height: 0;
}
.thumbnails-compact:after {
  clear: both;
}
.thumbnails-compact > li {
  margin-bottom: -1px;
  margin-left: 0;
  float: none;
}
.thumbnails-compact .thumbnail,
.media-table > tbody > tr > td,
.media-table > thead > tr > th {
  /*display: block;*/
  padding: 2px !important;
  line-height: 20px;
  border: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  border-collapse: collapse;
}
.thumbnails-compact.lowlight .thumbnail,
.media-table.lowlight > tbody > tr > td {
  background-color: #fff;
  border: none;
}
.thumbnails-compact .thumbnail.highlight,
.media-table > tbody.highlight > tr > td {
  background-color: #fff;
  border: none;
}
.thumbnails-compact > li:first-child .thumbnail {
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.thumbnails-compact > li:last-child .thumbnail {
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.panel-group .panel {
  background-color: #fff;
  border: 1px solid #999;
}
.panel-group .panel + .panel {
	margin-top: 2px;
}
.white {
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.green {
  color: #46a546;
}
.gray {
  color: #999999;
}
.hidden {
  display: none !important;
}
.tiny {
	font-size: 8px;
}
.sortable {
	cursor: pointer;
}
/*.glossary-term {
  border-bottom: 1px dotted #999999;
}
*/

#top-openers .fa, #filter .fa {
	font-size: 16px;
}

.fa-download, .fa-remove {
/*    margin-right: 6px;*/
}
.fa-times {
  cursor: pointer;
}
.fa-times:hover {
  color: #990000;
}
.zoom-to-site, .trash-this-site {
	color: #507e8f;
}

#top-openers {
	overflow: hidden;
}

#top-openers > div {
	float:left;
	padding: 0px 10px;
}

#top-openers #search {
	padding: 0px;
	margin-top: 3px;
}

#top-openers #search .input-group {
	width: 45%;
}

.opener {
	margin-top: 10px;
}

#filter-opener {
	margin-top: 10px;
	width: 210px;
}

#savesearch-opener, #savedsearch-load {
	margin: 10px 0;
}

#savedsearch-load .select2{
	width: 135px !important;
}

#map-opener-wrap {
	position: relative;
}

#map-opener {
	position: absolute;
	top: -100px;
	left: calc(100% - 435px);
}

.opener {
	cursor:pointer;
	font-weight: bold;
	font-size: 16px;
}

#filter-form {
	width: 90%;
	overflow: hidden;
}

#filter-form .filter-panels {
	float:left;
	padding: 0px 26px 0 0;
	width: 31%;
}

.filter-panels .panel {
	-webkit-box-shadow: none;
	margin-bottom: 10px !important;
}

.filter-panels.geo {
	margin-left: 80px;
}

.filter-panels.three {
	padding-top: 33px !important;
}

#filter-form .filter-panels.one {
	width: 28%;
}

.filter-panels h3 {
	font-size: 16px;
	font-family: 'proxima-nova', sans-serif;
	margin-top: 10px !important;
}

.filter-panels .panel-heading a {
	color: black;
	font-weight: bold;
}

.filter-panels .panel-heading {
	padding: 0;
	border: none;
}

.filter-panels .panel-body {
	padding: 0;
}

.filter-panels select[multiple] {
    height: 150px;
}

#sites {
	border-top: 1px #efefef solid;
}

#site-selectors {
	margin-top: 10px;
}

#site-selectors div {
	height: 10px;
}

#site-selectors fieldset {
	margin-bottom: 6px;
}

img.map-toggle {
	display: block;
}

img.show-map {
	display: none;
}

div.data-radio * {
	display: inline-block;
}

.data-radio .radio {
	font-weight: normal !important;
	margin-right:8px;
	margin-top: 0px;
}

td.has-data.yes::before,
td.has-data-fluxnet.yes::before {
font-family: 'FontAwesome';
content: "\f00c";
}

td.has-data.yes,
td.has-data-fluxnet.yes {
font-family: 'FontAwesome';
text-align: center !important;
}

#map-view .labels {
	color:white;
	width:60px;
}

.bullet_MacroPoi {
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  color: #fff;
  height: 28px;
  width: 28px;
  line-height: 28px;
  background: url('http://sc1.maps.live.com/i/out/20130311.1901/pins/macro_list.png') no-repeat 4px 4px;
  display: block;
  position: relative;
  margin: -6px 0 -21px -7px;
}

.container-fluid {
  width: 100% !important;
}

.form-submit-container button{
    width: 50%;
    margin: 20px 0px;
}

.controls-clear {
    position: relative;
}

.clear-input-btn {
    background-color: #aaa;
    width: 18px;
    text-align: center;
    border-radius: 50px;
    color: white;
    height: 18px;
    cursor: pointer;
    display: none;

    position: absolute;
    top: 8px;
    z-index: 3;
    left: 90%;
}

.clear-input-btn:hover {
    background-color: #888;
}

.clear-input-btn span {
    position: relative;
    top: -2.5px;
    font-size: 12px;
}

.clear-input-btn.precip,
.clear-input-btn.temp, 
.clear-input-btn.elevation {
    left: calc( 100% - 75px );
}

.input-message {
    display: none;
    color: firebrick;
    font-size: 14px;    
    margin-top: 4px; 
}
 
.download-sites-text {
    display: none;
}

.remove-download-site {
    display: none;
}

#sites-table th , #sites-table td {
	max-width: 165px;
}

#sites-table th.site-name , #sites-table td.site-name {
	max-width: 215px;
}

#sites-table th {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	box-shadow: 0 1px 1px #ddd;
}

.site-search-view #map-note {display:none;}
#data-notes {position:absolute;}


/******/
/* variables view */

#fluxmet {
	padding-top: 10px;
}

#fluxmet .panel-body {
	margin-bottom: 10px
}

#fm-wrap {
	position: fixed;
	background: rgba(0,0,0,.5);
	width: 100%;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 1000;
}

#fm-variables-available {
	width: 95%;
	max-width: 1100px;
	height: 95%;
	margin: 1% auto;
	background: white;
	overflow: hidden;
}

#fm-variables-available > h3 {
	padding: 15px;
    background-color: #D4E2E6;
    margin: 0px !important;
}

#fm-variables-available #fm-config {
	padding: 0px 5px 5px;
	overflow: hidden;
} 

#fm-variables-available #fm-config .form-group {
	margin-bottom: 0;
}

#fm-variables-available #fm-config > p {
	margin-bottom: 10px !important;
}

p.further-info{
	margin-bottom: 0px !important;
}

.from-years label {
	margin-left: 0px !important;
}

.fm-config {
	float: left;
	margin-right: 15px;
}

.fm-config.from-years {
	border-left: 1px solid black;
	padding-left: 20px;
}

#fm-variables-available .panel-body{
	overflow-y:scroll;
	height: calc( 100% - 250px ) ;
	border: 1px solid black;
	margin: 0 15px;
}

#fm-variables-available #variables{
	column-count: 5;
	padding: 5px 15px;
}


#fm-variables-available .vargroup {
	border-top: 1px black solid;
	padding-top: 8px;
	margin-bottom: 15px;
}

#variables div:first-child {
	margin-top: 10px;
}

#fm-variables-available label {
	display: block;
	font-weight: normal !important;
	margin-left: 18px;
}

#fm-variables-available .fm-config label {
	margin-left: 12px;
}

#fm-variables-available label.vargroupname {
    font-weight: bold !important;
    margin-left: 4px;
}

#fm-vars-controls {
	padding: 15px;
}

#fm-vars-controls a {
	margin-right: 15px;
}

#fm-vars-controls .loading {
	position:absolute; 
	left: 210px; 
	top: 20px;
}

.push {
	margin-top: 12px;
}

.slowfade {
	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	color: brown;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	padding: 0;
	margin: 0;
}

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
 
 @keyframes fadeOut {
	0% {opacity: 1; }
	100% {opacity: 0;}
}
 
@media (max-width: 1100px) {
	#fm-variables-available #variables{
		column-count: 4;
	}
}

@media (max-width: 825px) {
	#fm-variables-available #variables{
		column-count: 3;
	}
}

@media (max-width: 625px) {
	#fm-variables-available #variables{
		column-count: 2;
	}
	
	#fm-vars-controls {
		padding-top: 8px;
	}
	
	#fm-wrap {
		position: relative;
	}

	#fm-variables-available .panel-body{
		height: 80vh;
		overflow-y: scroll;
	}
	
	#filter .filter-panels, #ops-opener {
		width: 95% !important;
	}
	
}

@media (max-width: 540px) {
	#fm-variables-available #variables{
		column-count: 1;
	}
	
}



/******/

@media (max-width: 1199px) {

	#map-opener {
		left: calc(100% - 100px);
	}	

	.map-tool-view #map {
		float: none;
		width: 100%;
	}
	.map-tool-view #map-config {
		width:100%;
		margin-top:50px;
	}
}		

@media (max-width: 1100px) {
  #map #map-view {
      width: 100%;
      top: 0 !important;
      left: 0 !important;
  }

   #map {
    top: 50px;
  }
  
  #filter-form, #top-openers > div {
  	width: 100%;
  	float: none;
  	padding: 0px;
  }
  
  #filter .filter-panels, #ops-opener {
		width: 290px;
		float: none;
		clear: both;
		padding: 10px;
		margin: 0;
		display: block;
	}
	
	#ops-opener {
		padding-left: 0px;
	}
	
	div.has-data * {
		display: block;
	}
	
	.mobile-map #map.show-map {
	position:static !important; 
	z-index: 10; 
	width: 100%;
	margin-bottom: 50px;
	}
 
	.mobile-map #map.show-map #map-view {
		width: 100%;
	}

	.mobile-map #map.show-map #map-view{
		left:0 !important; 
	}

	.mobile-map #sites.show-map {
		display:block;
		width: 100%;
	}
	
	.map-tool-view .mobile-map #map-sizer {
		display: none;
	}
	
	#map-size-choices .small-map {
		display: none;
	}
	
	#map-view-controls {
		margin-top: unset;
		display: block;
	}
	
	#sites table th {
		vertical-align: top !important;
	}
}

@media (max-width: 768px ) {
	#sites-table .med-hide {display: none; }
	
}

@media (max-width: 568px ) {
	.mobile-map #view-tabs span.message {
		display:both;
		text-align:left;
		width:100%;
	}
	.map-tool-view #map-config{
		margin-top: 70px;
	}
	
}


@media (max-width : 420px ) {
	#sites-table th:nth-child(n+5), #sites-table td:nth-child(n+5) {
		display:none; 
	}
	
	.mobile-map #sites.show-map {
		margin-top: 20px;
	}
	
	div.markers {
                padding-left: 6px;
                margin-right: 0px;
	}

	#iColors { 
			margin-left: 6px;
	}

	#iColors li, #iShapes li {
			margin-right: 1px;
			margin-left: 2px;
	}

}

.data-from-years.haserrors input {box-shadow: 0 1px 5px red;}
.data-from-years.haserrors .input-message {display: block !important; }
.site-start.haserrors input {box-shadow: 0 1px 5px red;}
.site-start.haserrors .input-message {display: block !important; }
.site-end.haserrors input {box-shadow: 0 1px 5px red;}
.site-end.haserrors .input-message {display: block !important; }

/* new sitesearch items */
.alt-title {display: none; }
#filter-modal .site-chars .alt-title {display: inline;}
#filter-modal .site-chars select.stringhelper {
	display:none;
}

@media (min-width: 320px) {
	#view-container,
	#filter-modal .wrap.dialog-box {
    	width: 1170px !important;
	}
}

.sortable:after {
	font-family: "Font Awesome 5 Free"; 
  	font-weight: 900; 
  	content: " \f0dc";
}

.sortable.asc:after {
	content: " \f0de";
}

.sortable.desc:after {
	content: " \f0dd";
}

input, select, .placeholder {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}

span.varc, abbr[title] {text-decoration:none; cursor:default !important; border-bottom: 1px dotted #999999;}
li.unavail input[type=checkbox] {pointer-events:none; display:none;}
li.unavail input[type=checkbox]:checked {accent-color:auto; pointer-events:all; display:inline;}
li.unavail input + abbr {color: #ccc; pointer-events:none;}
li.unavail input + abbr:before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  background-color: #ccc;
}
.data-vars button.unavail:before,
li.unavail input:checked + abbr:before,
li.error:after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f06a";
  background-color: transparent;
  color: #B21B00; 
}

li.unavail input:checked + abbr {color: #B21B00; pointer-events:all;}
.data-vars button.unavail:before {
	padding-right: 5px;
}


select, .placeholder {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 10px;
  background-position: calc(100% - 2px) 7px;
  background-repeat: no-repeat;
  padding-left: 2px;
  padding-right: 15px;
}

.placeholder {
	padding-left: 5px;
}

li.error input.comp:focus,
li.error input.comp,
li.error span.units {
	border-color:#B21B00 !important;
	border-width: 1px !important;
}

li.error input.comp:focus {
	outline: none;
}

li.compare.error {
	background-color:transparent;
	box-shadow: unset;
	outline: none;
}
	
.placeholder {
	border-width: 1px; 
	border-color: rgb(118,118,118); 
	font-size: 14px; 
	height: 20px;
}
.placeholder span.none {color: #b2b2b2; font-style: italic;  font-size: 14px; }
.placeholder span.multiple {font-style: italic;}
.placeholder + .hint {display: none; }
.placeholder.open + .hint {display: inline; margin-left: 4px; }
.placeholder + .hint + div.multi {display:none;}
.placeholder.open + .hint + div.multi {display:block;}
.placeholder + div.multi {display:none;}
.placeholder.open + div.multi {display:block;}

.filters li {list-style:none; width: 100%; clear:both;}
.filters ul.full li input.text {float:right;}
.filters ul {padding-left: 0px; }
.filters li:focus-within {background-color: #ccdbe1 }
li.filter .checkbox.awesome {position: relative; top:1px;}
li.filter.compare .checkbox.awesome {position: relative; top:4px;}
#filter-modal li.filter.string {margin:7px 0px;}
#filter-modal li.filter.choose {margin:7px 0px;}

#filter-modal li[data-name="all_metadata"] input.text {width: calc(100% - 140px) }
li[data-name="site_id"] input.text {width: calc(100% - 93px) }
li[data-name="site_name"] input.text {width: calc(100% - 120px) }
li[data-name="site_desc"] input.text {width: calc(100% - 165px) }
li[data-name="site_team"] input.text {width: calc(100% - 188px) }
li[data-name="data_product"] > span {font-weight: bold; }

.checkbox.awesome {display: inline; min-height:unset; margin:0px;}

.compare input, .compare select, .compare .units {
	height: 20px;
}

input[type="checkbox"]:focus {
	outline: none;
}

input.comp {width: 40px; position: relative; top:-1px;}
input.comp+span.units {
	background: #EFEFEF;
	border: 1px solid #CCCCCC;
	border-radius: 0px 4px 4px 0px;
	margin-right: 2px; 
	padding: 0px 2px; 
	width: auto !important;
	position: relative;
    left: -2px;
}

.range input.second {margin-right: 2px;}

.filters select {
	margin-right: 4px;
}

.filter[data-name="data_product"] select {
    width: calc(100% - 128px);
    background-color: white;
}

.norange input.second,  .norange input.second+.units {
	display:none;
}

.front-line > div {float:left}
.front-line .section-title {font-weight:bold;}

#filter-modal .left {width: 45%; float: left;}
#filter-modal .right {width: 35%; float: left; margin-left:20px;}

#filter-modal {
	height: 100vh; 
	width: 100vw; 
	display:none; 
	position:fixed; 
	left:0px; 
	top: 0px; 
	z-index:1000; 
	background-color: rgba(0,0,0,.7); }
#filter-modal .wrap {width: 90%; height: 95%; background:white; margin:10px auto 0px; }

#bookkeeper li {list-style:none; border-bottom: 1px #ccc solid; padding: 3px 0px;}
#bookkeeper li span:empty:before {color: #ccc; font-style: italic;}
#bookkeeper li.data-products span button:before {content:"Data Product: ";}
#bookkeeper li.data-products span button {text-align:left;}
#bookkeeper li.data-vars span:empty:before  {content:'No Data Variables Selected';}
#bookkeeper li.data-chars span:empty:before  {content:'No Data Characteristics Selected';}
#bookkeeper li.site-chars span:empty:before  {content:'No Site Characteristics Selected';}
#bookkeeper li.site-set:empty {display:none; border-bottom: unset; padding: 0; }
#bookkeeper button i.fa-times {
	color: #efefef;
    position: relative;
    top: 1px;
    font-weight: 600;
}

#bookkeeper .panel button {
	background: #999999;
	color: white;
	border: none;
	border-radius: 4px;
	margin: 1px 2px 1px 0px;
}

#bookkeeper .panel button.unavail {
	border: solid 1px #B21B00;
	background-color: rgba(178, 27, 0, .1);
	color: black;
}

#bookkeeper button.unavail i.fa-times {
	color: #333;
	font-weight: normal;
}

#top-bar {margin: 20px 0px; overflow: hidden; }

li.andOr label,
li.andOr input {
	margin: 0px 5px 0px 0px;
}

#map-view > div { position: static !important;}
#map {left: 50%;}

#fm-vars {
	column-count: 6;
	font-size: 12px;
}

#fm-vars .vargroupname {
	border-top: 1px solid black; 
	padding-top: 5px;
}

#fm-vars .vargroup .var {
	padding-left: 10px;
}

#fm-vars abbr { 
	font-weight:bold;
}

.searchbar li {width: auto; float: left;}
div.multi { border: solid #ccc 1px; height: 200px; padding: 5px; overflow: scroll; white-space:nowrap;}
div.multi label {display: block;}

li.filter.choose[data-name=igbp] div.multi {
    height: 150px;
}

li.filter.choose[data-name=network] div.multi {
    height: 120px;
}

.panel {
	background: white;
    margin: 0px;
    border: 1px solid #ccc;
    padding: 2px 0px 2px 2px;
    border-radius: 0px;
    box-shadow: none;
}

#view-container {position:relative;}

#all-wrap {
	background: transparent;
	height: 242px;
}

#suspended span {
	display: none;
}

#all-wrap > div {
	position: relative;
	background: transparent;
	float:left;
	margin-top:20px;
	height: 100%;
}

#all-wrap.hideall > div {
	display: none;
}

#all-wrap.hideall,
#all-wrap.hideall #suspended {
	height: 75px;
	display:block;
}

#all-wrap.hideall #suspended span {
	display: block;
}
	
#all-wrap #suspended {
	border: 1px solid #888;
	border-bottom: 0px;
	border-top: 0px;
	width:100%; 
	position: absolute; 
	left:0px; 
	height:242px; 
	background:#f9f9f9;
	margin-top:0px;
}

.sitechar-panel li.norange > span {
    width: 50px;
    display: inline-block;
}

.tbb {margin-right: 13px;}

.searchbar {
	margin-right: 16px; 
	padding-right: 3px; 
	border-right: 1px solid gray; 
}

.searchbar input.text {
	width: 220px;
}

.searchbar .submit {
	height: 24px;
    width: 26px;
    background: var(--link-color-bg-1);
    color: white;
    position: relative;
    left: -3px;
    border-radius: 0px 5px 5px 0px;
    margin-right: 13px;
    border: 0px;
}

.searchbar .submit i {
	position: relative;
	top: 1px;
}

.more-chars {
	clear:both;
	display: block;
}

.open-table,
.hide-front-line { 
	appearance: none; 
	border: none; 
	background: transparent; 
	font-size: 16px; 
}

.hide-front-line { 
	margin-top: 10px;
	margin-right: 23px;
}

#suspended span {
	font-weight: bold;
	margin-top: 10px;
	margin-left: 30px;
}

#suspended > div {
	position: absolute;
	z-index: 50;
	right: 0px;
}

.action-bar {
	margin: 10px 0px;
}

.action-bar > div {
	margin-top: 10px;
}

/* table control */
#column-picker #column-choices {
	position:absolute;
	background: white;
    border: 1px solid #333;
    width: 490px;
    left: -330px;
    columns: 2;
    top: 30px;
    z-index: 50;
    padding: 8px;
    
}

#column-picker #column-choices label{
	display:block;
}

#column-picker #column-choices .checkbox:nth-child(1)  {
	display:none;
}

#column-picker #column-choices label span{
	font-weight:400;
}

/* table display */
#table-tabs .tab {font-weight: bold; }

#table-display.show-map {width: calc(100% - 475px);}
.big-map #table-display.show-map {width: 100%; clear:both; }
#table-display {margin-top: 25px; }
#display-tables {height: 325px; margin-bottom: 50px; }

#set-select-checks {
	width: 80%; 
	display: flex; 
	gap: 10px; 
	align-items: 
	baseline; margin-bottom: 5px;
}

.show-map #set-select-checks {
	width: 100%;
}

#display-tables #tables-wrap {
	resize:vertical; 
	overflow:scroll; 
	height: 100%; 
	border: 1px solid #ddd;
}

#tables-wrap table {
	margin-top: 10px; 
	font-size: 14px; 
	width:100%; 
	margin: 0px auto; 
	border: none !important;
}

#tables-wrap table th {
	text-align: left; 
	position:sticky; 
	top: 0; 
	background:white; 
	border-left: #ddd solid 1px;
	box-shadow: 0 1px 1px #ddd;
	padding-right: 2px !important;
	padding-left: 5px !important;
	padding-bottom: 1px !important;
}
#tables-wrap table td {
	overflow-wrap: break-word;
	padding-right: 2px !important;
	padding-left: 5px !important;
}

#tables-wrap table th:nth-child(1),
#tables-wrap table td:nth-child(1) {
	border-left:none;
}

#tables-wrap table tr:last-child td {
	border-bottom: #ddd solid 1px;
}

.dav { display: none; }
.avail-view td,
.avail-view th {
	display: none;
}
.avail-view .dav,
.avail-view .selector {
	display: table-cell;
}

.avail-view .selector.nvis {
	display: none;
}

.avail-view td {
	border: none !important;
}

#tables-wrap .avail-view td table td {
	height: 18px;
	padding: 0px !important;
	padding-right: 0px !important;
	padding-left: 0px !important;
	border: solid 1px #ddd !important;
	width: 20px;
}

.avail-view .dav.years {
	height: 40px;
}

.avail-view th.dav.years li {
	white-space: nowrap;
	padding-top:4px;
}

.avail-view th.dav.years span {
	display: inline-block;
    margin-top: 4px;
}

span.notwist .fa-square {
    background-color: transparent;
    width: 22.5px;
    color: transparent;
}

span.twist {
	transform: rotate(-90deg) !important;
	width:22.5px;
}
    
td.dav.years {
	white-space: nowrap;
}

td.dav.years li {
	list-style:none;
	padding-left: 2px;
}

td.dav.years span {
	border: 1px solid #ddd;
	display: inline-block;
	width: 22.5px;
}

td.dav.years span .fa {
	width: 20.5px;
	text-align:center;
}

td.dav.years span .fa-square {
	color: transparent;
}

.avail-view .dav.years span:last-child {
	margin-right: 0px;
}

table .nvis {display:none;}

td.has_base_data,
td.has_fluxnet_data {
	text-align: center !important;
}

table:has(.alert) {
	width: 300px;
}

table .selector {	
	width: 25px;
}

table .site_id {
	min-width: 75px !important;
}


table .site_name {
	min-width: 169px !important;
	width: 220px !important;
}

table .data_policy {
	min-width: 80px !important;
}

table .elevation {
	max-width: 60px !important;
}

table .site_id_2 {
	width: 75px !important;
}

table .policy {
	width: 65px !important;
}

table td.policy {
	text-align: center !important;
}

table .data_product {
	width: 165px;
}

table .data_product p, table .years p {
	padding: 0px;
	margin: 0px !important;
}

table tbody.alert td,
table tbody.alert tr { 
	border: none !important;
}
table tbody.alert .signal {
	font-size: 24px; 
	font-weight: bold;
}

table tbody.alert .text {
	font-size: 24px; 
	font-weight: normal;
}

.error-panel > div {
	margin-top: 69px;
	margin-left: 137px;
}

.error-panel div span.heading {
	color: #b21b00;
	font-size: 24px;
	font-weight: bold;
}

.error-panel div span.message {
	font-size: 18px;
	font-weight: normal;
}
	
#filter-modal .dialog-box .message  {
	padding-top: 0px;
}

#tabs button { font-weight: bold;}

/* download modal */
.ss-count { font-weight: bold;}

.dd-choice table {
	margin-bottom: 20px;
}
.dd-choice table thead {
	background-color: #f9f9f9;
	font-weight: bold;
	vertical-align: bottom;
}
.dd-choice table th,
.dd-choice table td {
	border: #999999 solid 1px;
	padding: 10px;
}

.dd-choice table th:nth-child(1),
.dd-choice table td:nth-child(1) {
	border:none;
}
.dd-choice table td:nth-child(2) {
	text-align: right;
	width: 55px;
}

/* popover tables need borders */
.popover h3 {
	font-family: 'proxima-nova';
}

.popover table  td, .popover table  th {
	padding: 5px;
	border: 1px solid #ddd;
	text-align:center;
	vertical-align: top;
}

.popover table  td:first-child,
.popover table th {
	background-color: #f9f9f9;
}

.popover table th:first-child {
	border:none;
	background-color:white;
}

.popover table  td:first-child {
	text-align: left;
}

.popover table td.ccby4,
.popover table td.legacy {
	text-align: left;
	vertical-align: middle !important;
}