html,body{margin:0px;height:100%;width:100%}
#map {position:absolute;width:100%;height:100%; font-family: 'Montserrat', sans-serif;}
.content{ position: absolute; bottom: 20px; left: 50%; color:#fff;width:auto;height:auto;background-color:#486141;border:1px solid #0c2c45;text-align:center;white-space: nowrap;padding: 2px 10px 2px 10px;border-radius:25px; }
.my-control{background:#051127;border:5px solid #fff;border-radius:5px;color:#fff;height:50px;line-height:50px;text-align:center;font-size:30px;padding:0 8px}
.sidepanel{background:#dceaf2;position:absolute;z-index:10;width:0px;height:100%;overflow-x: hidden;}
.closebtn { position: absolute; top: 20px; right: 20px; font-size: 25px; margin-right: 0px;}
.sidepanel a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 12px; color: #f1f1f1; display: block; transition: 0.3s;}
.sidepanel input { margin-left: 10%; width: 79%;}
.sidepanel a:hover { color: #ffffff;}
.sidepanel2{/*background:#dceaf2;*/position:absolute;z-index:5; width:390px;height:80%; overflow-x: hidden; margin-left: 20px; overflow-y: auto; margin-top: 80px; padding: 10px;}
.sidepanel3{/*background:#dceaf2;*/position:absolute;z-index:5; width:390px;height:80%; overflow-x: hidden; margin-left: 20px; overflow-y: auto; margin-top: 80px; padding: 10px;}
.autocomplete-list{/*background:#dceaf2;*/position:absolute;z-index:5; width:390px; max-height:300px; overflow-x: hidden; margin-left: 20px; margin-top: 60px; padding: 10px;}
.autocomplete-list-element{ position: relative; background: #f2f2f2; width: 100%; height: 16px; padding: 5px; list-style-type:none; font-size: 11px; font-weight: bold;}
.autocomplete-list-element:hover { background-color: rgb(177, 210, 230); }
.autocomplete-list-element:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }
.closebtn2 {background: rgba(227,227,227,0); font-size: 13.5px; /*display: none;*/ color: white;}
.search-input {height: 24px; width: 280px; border: 1px solid #499bd1; border: none;}
.sidepanel2 a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 12px; color: #f1f1f1; display: block; transition: 0.3s;}
.sidepanel2 input { margin-left: 10%; width: 79%; outline: none;}
.sidepanel2 a:hover { color: #ffffff;}
.sidepanel3 a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 12px; color: #f1f1f1; display: block; transition: 0.3s;}
.sidepanel3 input { margin-left: 10%; width: 79%; outline: none;}
.sidepanel3 a:hover { color: #ffffff;}
.custom_menu{width:150px;color:#fff;background-color:#499bd1;border:0px solid #0c2c45;list-style:none;padding:0}
.custom_menu li{padding:0 8px;font-size:12px;line-height:24px}
.custom_menu li:hover{background:#265371;cursor:pointer}
.custom_menu li+li{border-top:1px solid #bbb}
.search-element{ position: relative; background: #f2f2f2; width: 95%; height: 160px; padding: 10px; margin-top: 5px; border-radius: 15px; list-style-type:none;}
.search-element:hover { background-color: rgb(177, 210, 230); }
.search-element:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }
.notFound-element{ position: relative; background: #f2f2f2; width: 95%; height: 20px; padding: 10px; margin-top: 5px; border-radius: 15px; list-style-type:none;}
.notFound-element:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }
.weatherbox {background: #499bd1; color:white; width: 150px; height: 65px; bottom:1px; left: 50px; z-index: 10; text-align: center; border-radius: 10px 0px 0px 10px;}
.switch_control {background: #e3e3e3; color:white; width: 40px; height: 40px; z-index: 11; overflow: hidden; border-radius: 10px; }
.switch_control img {display: block;margin-left: auto;margin-right: auto; height: 30px; width: 30px; padding: 5px;}
.switch_control:hover { background: #e3e3e3; color:black; width: 200px; height: auto; z-index: 11; overflow: hidden; border-radius: 10px; }
.switch_control:hover img {display: none;}
.switch_control ul { margin-top: 30px; margin-bottom: 30px; list-style-type: none;}
.switch_control ul li { margin-left: -20px; font-size: 16px; vertical-align: middle; padding: 3px;}
.maptalks-toolbar-vertical ul { background: rgba(227,227,227,0.75); border-radius: 10px; padding-top: 5px; }
.maptalks-toolbar-vertical ul li { background: none; padding: 6px 5px 3px 5px;}
.maptalks-toolbar-vertical ul li:hover { background: none;}
.maptalks-toolbar-vertical ul li + li { border: 0px; }
.maptalks-zoom .maptalks-zoom-zoomlevel { background: #499bd1; height:30px; width:30px; transform: none; border-radius: 10px; border: 1px solid #e3e3e3; opacity:0.8;}
.maptalks-zoom-slider a.maptalks-zoom-zoomin, .maptalks-zoom-slider a.maptalks-zoom-zoomout { background: #499bd1; height:30px; width:30px; border: 1px solid #e3e3e3; opacity:0.8; line-height: 25px;}
.maptalks-zoom-slider a.maptalks-zoom-zoomin { background: #499bd1; border-radius: 10px 10px 0px 0px;}
.maptalks-zoom-slider a.maptalks-zoom-zoomout { border-radius: 0px 0px 10px 10px;}
.maptalks-zoom-slider a.maptalks-zoom-zoomin:hover, .maptalks-zoom-slider a.maptalks-zoom-zoomout:hover { background: #2d5f80; }
.maptalks-toolbar-horizonal ul { background: rgba(73, 155, 209,0.75); border-radius: 10px; height: 50px;}
.maptalks-toolbar-horizonal ul li { background: none; padding: 10px 10px 10px 10px;}
.maptalks-toolbar-horizonal ul li:hover { background: none;}
.maptalks-toolbar-horizonal ul li + li { border: 0px; }
.route_play_container { bottom: 30px; right: 50%; transform: translateX(100px); width: 200px; height: 40px; }
.info_list { padding: 3px;}
.info_list table { background: #499bd1; width: 300px; border-collapse: collapse; z-index: 1; table-layout:fixed}
.info_list table tr {min-height: 25px;}
.info_list table tr td { color: white; border: 1px solid #b2c5d1; line-height: 20px; font-size: 12px; padding-left: 5px; word-wrap:break-word;}
.remove_info_table { background: #499bd1; color: white; border: 1px solid #b2c5d1; left:262px; width: 30px; height: 15px; text-align: center; padding: 3px; font-size: 12px; font-weight: bold; position: relative; z-index: 0; border-radius: 10px 10px 0px 0px;}
.copy_alert{background:rgba(73, 155, 209,0.75);border:0px solid #fff;border-radius:5px;color:#fff;height:50px;line-height:37px;text-align:center;font-size:16px;padding:0 8px;}
.content-marker-details { position: relative; background: #dceaf2; color: black; border: 1px solid #b2c5d1; padding: 5px; min-height: 150px; width: 390px;}
.content-img-details { background: rgba(0,0,0); color: black; border: 1px solid #b2c5d1; padding: 5px; height: 200px; width: 390px;}
.content-reverse-details { background: #dceaf2; color: black; border: 1px solid #b2c5d1; padding: 5px; height: 50px; width: 300px; font-size: 12px;}
.content-img-details img{margin: auto; height: 100%; }
.mySlides {display: none}
.filter-control { background: rgba(73, 155, 209,0.75); border-radius: 10px; color: white; height: 40px; line-height: 35px; padding: 5px; text-align: center; font-size: 30px; font-weight: bold;}
.filter-container { background: rgba(73, 155, 209,0); color: white; height: 40px; text-align: center; font-size: 13px; /*font-weight: bold;*/ table-layout: fixed;}
.filter-container tr td{ margin: 3px; width: 80px; border-radius: 15px; border: 1px solid #b2c5d1; }
.fb-share-button {
background: #3b5998;
border-radius: 3px;
font-weight: 600;
padding: 5px 8px;
height: 30px;
margin-left: 10px;
display: inline-block;
position: static;
}
.fb-share-button:hover {
cursor: pointer;
background: #213A6F
}
.fb-share-button svg {
width: 18px;
fill: white;
vertical-align: middle;
border-radius: 2px
}
.fb-share-button a {
vertical-align: middle;
color: white;
font-size: 14px;
padding: 0 3px
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}