.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}
.ol-mouse-position{top:8px;right:8px;position:absolute}
.ol-scale-line{
    bottom:36px;
    background:rgba(33,33,33,0.7);
    left:48px;
    padding:6px;
    position:absolute;
    font-family:'Roboto';
    outline: 3px solid rgba(255,255,255,.6);
    border-radius: 2px;
}
.ol-scale-line-inner{
    border:2px solid #ffffff;
    border-top:none;
    color:#ffffff;
    font-size:11px;
    font-weight:bold;
    text-align:center;
    margin:0px;
    will-change:contents,width;
}
.ol-overlay-container{will-change:left,right,top,bottom}
.ol-unsupported{display:none}
/* .ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;} */
.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}
.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}
.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:2px;padding:2px}
/* .ol-control:hover{background-color:rgba(255,255,255,.6)} */
.ol-zoom{top:4px;right:4px;transition:all, 0.3s;display:none;}
.ol-rotate{top:.5em;right:2.4em;transition:opacity .25s linear,visibility 0s linear}
.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.ol-zoom-extent{top:4.643em;left:.5em}
.ol-full-screen{right:.5em;top:.5em}
@media print{.ol-control{display:none}
}
.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(33,33,33,0.7);border:none;border-radius:2px;outline:none;cursor:pointer;}
.ol-control button::-moz-focus-inner{border:none;padding:0}
.ol-zoom-extent button{line-height:1.4em}
.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}
.ol-touch .ol-control button{font-size:1.5em}
.ol-touch .ol-zoom-extent{top:5.5em;}
.ol-control button:hover{text-decoration:none;background-color:rgba(33,33,33,0.7)}
.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0;transition:all, 0.3s;}
.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px;transition:all, 0.3s;}
.ol-zoom .ol-zoom-in:hover{background-color:rgba(33,33,33,0.7);}
.ol-zoom .ol-zoom-out:hover{background-color:rgba(33,33,33,0.7);}
.ol-zoom .ol-zoom-in:active{background-color:rgba(33,33,33,0.7);}
.ol-zoom .ol-zoom-out:active{background-color:rgba(33,33,33,0.7);}
.ol-attribution{text-align:left;bottom: 4px; left: 8px;border-radius: 2px;max-width:calc(100% - 1.3em);z-index:2;cursor:default;padding: 2px 4px;display: inline-block;}
.ol-attribution ul{margin:0;padding:0 4px;text-shadow:0 0 2px #fff;display: flex;flex-direction: row-reverse;}
.ol-attribution li{display:inline;list-style:none;color:#424242;font-size:12px;}
.ol-attribution li a{padding:0;margin:0;color:var(--primary-lighten);text-shadow: none;}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,.ol-attribution ul{display:inline-block;outline:none;}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution.ol-logo-only ul{display:block}
/* .ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)} */
.ol-attribution.ol-uncollapsible{text-align:left;bottom: 4px;left: 8px;border-radius: 2px;max-width:calc(100% - 1.3em);z-index:2;cursor:default;padding: 2px 8px;display: inline-block;}
.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}
.ol-zoomslider{top:4.5em;left:.5em;height:200px}
.ol-zoomslider button{position:relative;height:10px}
.ol-touch .ol-zoomslider{top:5.5em}
.ol-overviewmap{left:8px;top:8px;opacity:1;}
.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0;}
.ol-overviewmap .ol-overviewmap-map{height:128px;width:176px;margin:0;opacity:0.85;}
.ol-overviewmap:not(.ol-collapsed) button{display:none;}
.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8);}
.ol-overviewmap-box{border:2px solid var(--secondary-lighten);border-radius: 2px;}
.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}
.ol-dragzoom{border:3px dashed #7f8c8d;}

#canvas .tooltip {position: relative;background: rgba(0, 0, 0, 0.5);border-radius: 4px;color: white;padding: 4px 8px;opacity: 0.7;white-space: nowrap;}
#canvas .tooltip-measure {opacity: 1;font-weight: bold;}
#canvas .tooltip-static {background-color: var(--secondary);color:#fff;border: 1px solid white;}
#canvas .tooltip-measure:before,
#canvas .tooltip-static:before {border-top: 6px solid rgba(0, 0, 0, 0.5);border-right: 6px solid transparent;border-left: 6px solid transparent;content: "";position: absolute;bottom: -6px;margin-left: -7px;left: 50%;}
#canvas .tooltip-static:before {border-top-color: var(--secondary);} 
.ol-customtitle {position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:3px;top: .5em; left: 50%;margin-left:-25px;transform: translate(-50%, -0%);}
.ol-customtitle h1{margin:10px;text-align:center;font-size:1em;height:25px;line-height:1.2em;font-family:'Roboto';padding:3px 14px;color:#f5f5f5;background:rgba(33,33,33,0.7);margin:0;display:float;}
.ol-custom-mouse-position{text-align:left;}

#canvas.navigate:hover{cursor:grab;cursor:-webkit-grab;}
#canvas.navigate:active{cursor:grabbing;cursor:-webkit-grabbing;}
#canvas.pointer:hover{cursor:help;}
#canvas.zoomin:hover{cursor:zoom-in;}
#canvas.zoomin:active{cursor:crosshair;}
#canvas.distance:hover{cursor:crosshair;}
#canvas.area:hover{cursor:crosshair;}
#canvas.rotate:hover{cursor:move;}