@import "all.min.css";

.fa-search, .fa-times { position: absolute; display: block; top:72px;    right:15px; font-size: 20px; color: #555; background: none;    border: 0;}
.navbar-header p { color: #fff; font-size: 20px; margin-bottom: 0; }
.tab-content div p:first-of-type { line-height: 1.4; border-top: 1px solid #ddd;}

.form-inline select { position: absolute; width:90px; top:73px; margin-left: 3px; border: none;}
.form-inline input[type=text] { text-indent: 85px; color: #111 !important; padding-right: 30px;}
.resultSet { width: 100%; padding: 0 2px; margin:5px 0 10px 0; }
.resultSet li { position: relative; min-height: 60px; padding: 10px 0; cursor: pointer; margin:0 ; border-bottom: 1px solid #ddd; list-style: none;}
.resultSet li:hover { background: #f5f5f5;}
.resultSet li.selected { box-shadow: 0 0 7px #ccc;}
.resultSet li span.fas:before { position: absolute; font-size: 30px; left: 5px; }
.resultSet li span.number { position: absolute; width: 30px; z-index: 5; text-align: center; left: -34px; margin-top: 7px; color: #fff; font-size: 14px !important; display: inline-block;}
.resultSet li span { font-size: 14px; display: block;word-wrap: break-word; margin-left: 35px; line-height: 1; }

#results .dropdown-search { position: absolute; top:99px; left: 15px; width: 270px; margin: 0; list-style: none; z-index: 10; background: rgba(255,255,255,0.9); border:1px solid #ebedf2; border-radius: 0 0 5px 5px; padding: 5px 0px; }
#results .dropdown-search li { font-size: 15px; padding-left: 15px; line-height: 22px; cursor: pointer;}
#results .dropdown-search li:hover { font-weight: bold; background: #eee;}

.page-inner {position:relative;left:0;top:0; z-index: 1; padding: 0; margin: 0;} 
.mapSet {position: absolute; left: 0; top: 0; z-index: 2}
.map {position: absolute; left: 0; top: 100px; z-index: 6; }
.map .fa-map-marker { position: absolute; width: 30px; height: 40px; text-align: center;}
.map .fa-map-marker>span { position: relative; top: 7px; color: #fff; font-size: 16px; font-weight: normal; line-height: 1;}
.map .fa-map-marker:before { position: absolute; left: 0; width: 100%; font-size: 39px;}
.map .fa-map-marker.selected { width: 44px; height: 58px; }
.map .fa-map-marker.selected:before { top: 7px; font-size: 50px; text-shadow: -1px -1px 6px #000;}
.map .fa-map-marker.selected>span { top: 16px; font-size: 20px; font-weight: bold;}

.popup {position: absolute; left: 0;  top: 100px; z-index: 7; }
.popup .popup-close-button { position: absolute; right: 7px; font-size: 20px; }
.popup-content-wrapper { position: absolute; bottom: 10px; left: -94px; }
.popup-content { border-radius: 5px; background: #fff; width: 230px; padding: 10px; box-shadow: 0 3px 14px rgba(0,0,0,0.4); font-size: 13px; }
.popup-content p { line-height: 15px; margin-bottom:3px; }
.popup-content .title {  font-weight: bold; font-size: 14px;}
.fa-caret-down { font-size: 30px; width: 230px; text-align: center; position: absolute;  margin-top: -11px; }

.main-panel .content #map { height:100vh !important;}

.popdata {position: absolute; bottom: 89px; z-index: 10000; width: 100%; background: #e2eff4; padding: 20px; text-align: center; box-shadow: 5px 0px 10px rgba(0,0,0,0.2); max-height:165px; overflow: scroll;  }
.popdata ul { overflow: hidden; margin: 0; padding: 0; }
.popdata li { list-style: none; width: 170px; float: left; padding-right:3px;}
.popdata-close { position: absolute; float: right; font-size: 20px; right: 0px; color: #555;line-height: 1; margin-top: -20px;}
.popdata li.down {  position: absolute; float: right; right: 25px; top:2px; line-height:17px; width:150px; color:#084177; border-radius:2px; background:#084177}
.popdata li.down a { color:#fff}
.popdata li.down i { padding-right:5px;}


.table { border-collapse: collapse; width: 100%; border-top:2px solid #9dccde; text-align: center; margin-bottom: 0;}
.table th { height: 20px; background: #eee; padding: 5px !important; border: 1px solid #ddd;border-bottom-width:1px !important;}
.table td { height: 20px; background: #fff; padding: 5px !important; border: 1px solid #ddd; }
.table td:hover { background: #d7ebf3;  }

footer { position: fixed; bottom: 0; width: calc(100%); height: 66px; background: #ccc; line-height: 66px; z-index: 10000; padding: 0 15px;}

.green { color: #00909e; }

.purple { color: #633a82; }
/*
.blue { color: #084177; }
.pink { color: #c06c84; }
*/
.brown  { color: #ba6b57; }
.orange { color: #f17362;}
/*
.chemical { color: #c06c84; }
.reaction { color: #084177; }
*/

.chemical { color: #ff00ff; }
.reaction { color: #00c6ed; }

.leaflet-popup-content .fas::before { padding-right: 7px;}

.hidden {display:none}

.sideBtn { position: fixed; width: 30px; height: 30px; top: 57px; left: 0; background: #00909e; z-index: 999; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size:20px; color:#fff; text-align:center; }
.sideBtn::before { content: "\f054";}
.sideBtn.active {left: 300px }
.sideBtn.active::before { content: "\f053";}
.sidebar, .sideBtn, .main-panel { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.sidebar { left: -300px !important; }
.slide { left: 0 !important; }
.slide2 { width: calc(100% - 300px) !important; }