:root {
    --popupCloseBtnColor: #666;
    --popupCloseBtnBgColor: #000;
    --popupCloseBtnHoverColor: #666;
    
    --focusOutlineColor: #919291;

    --coreColor: #666;
    --darkColor: #000;
    --lightColor: #ccc;
}

*{      
    -webkit-tap-highlight-color: transparent;
}

.map-overlay {
    font: 14px/20px "Segoe UI", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 250px;
    top: 10px;
    left: 10px;
    z-index: 2;
    
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

.map-overlay-inner {
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 0;
}

.map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
}

.map-overlay-inner fieldset:last-child {
    margin: 0;
}

.map-overlay-inner header {
    display: inline-block;
    font-weight: 700;
    margin: 10px 0 14px 10px;
    color: #333;
}

.map-overlay-inner label {
    display: inline-block;
    font-weight: 700;
    margin: 0 0 0px;
    color: #333;
}

.shadow::after {
    content: "";
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.45);

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.map-overlay .btn-tab {
    display: inline-block;
    position: absolute;
    border-radius: 6px;
    padding: 10px;
    margin-top: 0px;
    width: 40px;
    height: 20px;
    border: 0px solid;
    background-color: white;
    right: -20px; 
    top: 8px;
    text-align: center;
}

.map-overlay button {
    display: inline-block;
    position: absolute;
    border-radius: 6px;
    padding: 10px;
    margin-top: 0px;
    width: 40px;
    height: 40px;
    border: 0px solid;
    background-color: transparent;
    right: -20px; 
    top: 8px;
    text-align: center;
    z-index: 2;

    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

.map-overlay button:hover {
    cursor: pointer;
    animation-name: bounce;
    -moz-animation-name: bounce;
    
}
.map-overlay button:hover .arrow-icon path {
    stroke: black;
}

.map-overlay button:focus {
    outline:2px dashed var(--focusOutlineColor);
}
.map-overlay button:active {
    outline:none;
}

.show {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.hide {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
    outline:none;
}

@keyframes bounce {
	0%, 100%, 80%, 50%, 20% {
		-webkit-transform: translateX(0);
		-ms-transform:     translateX(0);
		transform:         translateX(0)
	}
	40% {
		-webkit-transform: translateX(-6px);
		-ms-transform:     translateX(-6px);
		transform:         translateX(-6px)
	}
	60% {
		-webkit-transform: translateX(-10px);
		-ms-transform:     translateX(-10px);
		transform:         translateX(-10px)
	}
}

@keyframes slide-in {
    0% {
        -webkit-transform: translateX(-97%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
  
@-webkit-keyframes slide-in {
    0% {
        transform: translateX(-97%);
    }
    100% {
        transform: translateX(0%);
    }
}
  
@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-97%);
    }
}
  
@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-97%);
    }
}

/*
TOGGLES
*/

.toggle {
    position: relative;
    display: inline-block;
    margin: 0 0 10px;
    width: 210px;
    height: 30px;
    padding-left: 10px;
}
.toggle:focus {
    outline:2px dashed var(--focusOutlineColor);
}
.toggle:active {
    outline:none;
}

.toggle-input {    
    position: absolute;
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 0px; width: 0px; 
    margin: -1px; padding: 0; border: 0;
}

/* gutter and text */
.toggle-label {
    display: block;
    width: 34px;
    height: 17px;
    line-height: 18px;
    text-indent: 130%;
    clip: rect(0 0 0 0);
    color: white;
    user-select: none;
    cursor: pointer;
    -ms-transform: translateY(35%);
    transform: translateY(35%);
}

.toggle-label::before,
.toggle-label::after {
    content: "";
    display: block;
    position: absolute;
    cursor: pointer;
}

/* gutter OFF */
.toggle-label::before {    
    width: 32px;
    height: 16px;
    background-color: lightBlue;
    border-radius: 9999em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 6px -2px inset, rgba(0, 0, 0, 0.3) 0px 3px 6px -3px inset;
    border-width: 0.5px;
    border-style: solid;
    border-color: #505050;

    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-transition-property: background-color, border-color;
    transition-property: background-color, border-color;
}
.toggle-label::before {
    background-color: black;
}
.toggle-label-techspark::before {
    background-color: #ccc;
}
.toggle-label-ffa-farmbeats::before {
    background-color: #ccc;
}
.toggle-label-airband::before {
    background-color: #ccc;
}
.toggle-label-rural-teals::before {
    background-color: #ccc;
}
.toggle-label-land-grants::before {
    background-color: #ccc;
}
.toggle-label-4-h::before {
    background-color: #ccc;
}
.toggle-label-journalism::before {
    background-color: #ccc;
}

/* knob OFF */
.toggle-label::after {
    top: -0.5px;
    left: -1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: green;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    border-width: 1px;
    border-style: solid;
    opacity: 1.0;

    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    transition-property: left;
    -webkit-transition-property: left;
}
.toggle-label-techspark::after {
    background-color: #107c10; /* Core Color */
    border-color: #054b16;  /* Dark Tint */
}
.toggle-label-ffa-farmbeats::after {
    background-color: #8661c5;
    border-color: #3b2e58;
}
.toggle-label-airband::after {
    background-color: #0078d4;
    border-color: #243a5e;
}
.toggle-label-rural-teals::after {
    background-color: #d83b01;
    border-color: #6b2929;
}
.toggle-label-land-grants::after {
    background-color: #008575;
    border-color: #274b47;
}
.toggle-label-4-h::after {
    background-color: #737373;
    border-color: #505050;
}
.toggle-label-journalism::after {
    background-color: #ffb900;
    border-color: #6a4b16;    
}

/* gutter ON */
.toggle-input:checked + .toggle-label::before {
    background-color: black;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-width: 0.5px;
    border-style: solid;
}
.toggle-input-techspark:checked + .toggle-label-techspark::before {
    background-color: #9bf00b; /* Light Tint */
    border-color: #054b16; /* Dark Tint */
}
.toggle-input-ffa-farmbeats:checked + .toggle-label-ffa-farmbeats::before {
    background-color: #d59dff;
    border-color: #3b2e58;
}
.toggle-input-airband:checked + .toggle-label-airband::before {
    background-color: #50e6ff;
    border-color: #243a5e;
}
.toggle-input-rural-teals:checked + .toggle-label-rural-teals::before {
    background-color: #ff9349;
    border-color: #6b2929;
}
.toggle-input-land-grants:checked + .toggle-label-land-grants::before {
    background-color: #30e5d0;
    border-color: #274b47;
}
.toggle-input-4-h:checked + .toggle-label-4-h::before {
    background-color: #e6e6e6;
    border-color: #505050;
}
.toggle-input-journalism:checked + .toggle-label-journalism::before {
    background-color: #fef000;
    border-color: #6a4b16;
}

/* knob ON */
.toggle-input:checked + .toggle-label::after {
    left: 16px;
    background-color: black;
    border-width: 1px;
    border-style: solid;
    opacity: 1.0;
}
.toggle-input-techspark:checked + .toggle-label-techspark::after {
    background-color: #107c10; /* Core Color */
    border-color: #054b16; /* Dark Tint */
}
.toggle-input-ffa-farmbeats:checked + .toggle-label-ffa-farmbeats::after {
    background-color: #8661c5;
    border-color: #3b2e58;
}
.toggle-input-airband:checked + .toggle-label-airband::after {
    background-color: #0078d4;
    border-color: #243a5e;
}
.toggle-input-rural-teals:checked + .toggle-label-rural-teals::after {
    background-color: #d83b01;
    border-color: #6b2929;
}
.toggle-input-land-grants:checked + .toggle-label-land-grants::after {
    background-color: #008575;
    border-color: #274b47;
}
.toggle-input-4-h:checked + .toggle-label-4-h::after {
    background-color: #737373;
    border-color: #505050;
}
.toggle-input-journalism:checked + .toggle-label-journalism::after {
    background-color: #ffb900;
    border-color: #6a4b16;    
}

.toggle-label:hover::after {
    /* box-shadow: rgba(0, 0, 0, 0.32) 0px 2px 4px 0px, rgba(27, 31, 35, 0.45) 0px 0px 0px 2px; */
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}

/*  
.toggle-input [type="checkbox"]:checked:focus + label:before,
.toggle-input [type="checkbox"]:not(:checked):focus + label:before {
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(203, 34, 237, .2);
}
*/


/*
POPUP
*/

.mapboxgl-popup {
max-width: 400px;
font: 12px/20px "Segoe UI", 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.mapboxgl-popup-close-button {
margin-top: -15px;
margin-right: 0px;
color: var(--popupCloseBtnColor);
background: var(--popupCloseBtnBgColor);
}

.mapboxgl-popup-close-button:hover {
color: var(--popupCloseBtnHoverColor);
background: var(--popupCloseBtnBgColor);
}

.mapboxgl-popup-content {
font: 400 14px/22px "Segoe UI", 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 0;
width: 220px;
}

.mapboxgl-popup-content-wrapper {
padding: 1%;
}

.mapboxgl-popup-content h3 {
background: #91c949;
color: #fff;
margin: 0;
display: block;
padding: 10px;
border-radius: 3px 3px 0 0;
font-weight: 700;
margin-top: -15px;
}

.mapboxgl-popup-content p {
background: #91c949;
color: #fff;
margin: 0;
display: block;
padding: 10px;
border-radius: 3px 3px 0 0;
font-weight: 400;
margin-top: -15px;
}

.mapboxgl-popup-content h4 {
margin: 0;
display: block;
padding: 10px;
font-weight: 700;
}

.mapboxgl-popup-content div {
padding: 10px;
}

.mapboxgl-container .leaflet-marker-icon {
cursor: pointer;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
margin-top: 15px;
}

.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip  {
display: none;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip  {
display: none;
}
.mapboxgl-popup-anchor-right > .mapboxgl-popup-tip  {
display: none;
}
.mapboxgl-popup-anchor-left > .mapboxgl-popup-tip  {
display: none;
}