body {font-family: "Helvetica"; margin: 0;}
table {border-spacing: 0;}
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

div#map {width: 100%; height: 100vh; border: none;}
div#divStatus {font-size:9pt;}
div#divDebug {position:absolute; left:20px; top:130px; background-color:lightblue;opacity:0.8; padding:5px; min-width:250px; max-height:200px; overflow-y:scroll}
div#divOffline {position: absolute;top: 40%;left: 0;width: 100%;padding-top: 1em;padding-bottom: 1em;text-align: center;font-size: 14pt;background-color: yellow;opacity: 0.8;}

#legendcontainer .section {font-weight:bold; font-size:14px;}
#legendcontainer .icon {font-size:14px; margin-left:10px;}
#legendcontainer {position: absolute; z-index: 5; top: 10px; left: 10px; height: 36px; box-shadow: 0 0 10px 2px rgba(0,0,0,.1); }
#legendaccordian { width: auto; height: 75vh; padding: 5px 0; overflow-y: scroll; background-color: #fff; opacity:0.9; }
#legend {margin-left:10px}
#legendtitle {font-weight:bold; width: auto; cursor:pointer; padding:8px; background-color: #fff; opacity: 1; border-radius: 4px;}

#styleoptionscontainer {position: absolute;width: auto;right:10px;bottom: 50px;margin: 0 10px;padding: 0.5em;border-radius: 0.25em;background-color: #fff;font-weight: bold;opacity:0.7}
#styleoptions input[type=radio] {width: 2em;height: 2em;margin: 0 0 0.25em 0;vertical-align: middle;}
#styleoptions > div {display: inline-block;}
#styleoptions label {margin-right: 1em;}

table.Grid { font-family:Verdana; color:Black; font-size:10pt; background-color: white; border-collapse: collapse; border: solid 1px gray }
table.Grid td { padding-left:5px; padding-right:5px; line-height:normal; border-bottom:dotted 1px gray }
table.Grid th { font-weight:bold;background-color:#F8F8FF; color:black; border: solid 0px gray; text-align:left; padding-left:5px; padding-right:5px }
table.Grid tr.EvenRow { color:black; background-color:#F8F8FF; }
table.Grid tr.OddRow  { color:black; background-color:#F8F8FF; }

.mapboxgl-popup {width: 320px !important;}

.mapboxgl-ctrl-top-right {position: static;margin-left: 1.5em;}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {margin:10px 10px 10px 0}
.mapboxgl-ctrl-geocoder {z-index:3000 !important;}
.mapboxgl-ctrl-group > button {width:42px; height:42px}


.mapboxgl-popup-close-button {font-size:18pt; color:white}
.mapboxgl-popup-content {background-color:#CE0609; padding:2px;}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {border-right-color: #CE0609}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {border-left-color: #CE0609}
        
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {border-top-color: #CE0609}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {border-top-color: #CE0609}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {border-top-color: #CE0609}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {border-bottom-color: #CE0609}
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {border-bottom-color: #CE0609}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {border-bottom-color: #CE0609}

div.PopupTitle {font-weight:bold; font-size:12pt; background-color:#CE0609; color:white; padding:3px; width:300px}
table.PopupGrid {min-width:200px; width:100%}

@media screen and (max-width: 639px) {
    #legendcontainer {top: 70px;left: 10px;}
}