#mapNav {    
        background-color: rgba(0, 0, 0, 0.65);
        z-index: 999;
}

#mapNav2 {
	display: none;
	background-color: rgba(0, 0, 0, 0.65);
}

.navButton {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 12px;
	box-sizing: border-box;
	transition: 0.2s opacity;
}
.navButton:active img {
	transform: scale(0.8);
}
.navButton img {
	opacity: 0.3;
	transition: 0.2s all;
	cursor: pointer;
}
.navActive img {
	opacity: 1;
}
.navName {
    display: none;
    position: absolute;
    top: 50%;
    left: 66px;
    width: max-content;
    color: white;
    font-size: 13px;
    text-shadow: 2px 2px 2px black;
    transform: translate(0, -50%);
}
.navButton:hover .navName {
	display: block;
}

.navRange:active img {
	transform: scale(1);
}
.navMore {
	display: none;
    position: absolute;
    top: 0;
    left: 56px;    
    width: max-content;
    height: 56px;
    background-color: rgba(0, 0, 0, 0.65);
    box-sizing: border-box;
}
.range {
    float: left;
    display: inline-block;
    padding: 18.6px;
    border-left: 1px solid #1b1b1b;
    cursor: pointer;
    height: 56px;
    box-sizing: border-box;
}
.range:first-child {
	border: 0;
}
.range span {
	font-size: 13px;
	font-weight: 600;
	color: white;
	vertical-align: middle;
}
.rangeCheckbox {
	display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #1b1b1b;
    border-radius: 50%;
    margin-right: 6px;
    box-sizing: border-box;
}
.rangeCheckbox div {
	display: none;
	width: 14px;
	height: 14px;
	background-color: #e67200;
	border-radius: 50%;
	margin: 2px;
}

.navRain {
	border-top: 1px solid #1b1b1b;
}
.navRefresh, .navPin {
	border-bottom: 1px solid #1b1b1b;
}
.navRefresh img, .navHome img, .navPin img {
	opacity: 1;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
* {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:none;
}
.refreshAnimation {
	animation-name: buttonRotation;
	animation-duration: 1s;
}

.navMobile {
	display: none;
}
.navMobile img {
	width: 32px;
	opacity: 1;
}

#legend-tiles { 
	padding-top: 0; 
	text-align: right; 
}
.livedelay {
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.leaflet-control-attribution a {
    color: #336666;
}

@keyframes buttonRotation {
	0% {
            transform: rotate(0deg);
	}
	100% {
            transform: rotate(360deg);
	}
}

@media (max-width: 768px) {
	#mapNav2 {
		display: block;
                margin-bottom: 20px;
	}
	.navMobile {
		display: block;
	}
	.mobileSlide, .navPin, .navHome {
		display: none;
	}
	.navName {
		display: none !important;
	}
	.navMore {
		background-color: transparent;
		height: auto;
	}
	.range {
		display: block;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.65);
	}
        #mapNav2 .navPin, #mapNav2 .navHome {
            display: block !important;
        }
        #mapNav2:after {
            display: block;
            content: "";
            clear: both;
        }
        #mapNav2 .navButton {
                float: left;
                /*width: 56px;*/
                width:40px;
                height:40px;
                padding:8px;
        }
        #mapNav2 .navButton img {
                width:25px;
                height:25px;
        }
        #mapNav2 .navName {
                display: none !important;
        }
        #legend-tiles {
            text-align: right;
        }
        
        #mapNav2 .navPin {
                border: 0px !important;
        }
        #legend-tiles {
                text-align: right;
                padding: 0 !important;
        }
}