/* Define the font faces */
@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('path/to/TeXGyreHeros-Regular.woff2') format('woff2'),
         url('path/to/TeXGyreHeros-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('path/to/texgyreheros-bold.woff2') format('woff2'),
         url('path/to/texgyreheros-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}



body { 
    margin: 0; 
    padding: 0; 
    background-color: white; /* Set background color of the body */
}

.everything-container {
    width: 100vw;
    height: 100vh;
    background-color: white; /* Set background color of the container */
    color: white; /* Set text color to white */
    flex-direction: column; /* Stack elements vertically */
}

.main-map-container {
    width: 100%;
    height: 65%; /* Adjusted height */
    top: 0;
    position: relative;
    display: flex; /* Use flexbox to stack elements */
    flex-direction: column; /* Stack elements vertically */
}

.main-map-container .map-overlay {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 2; /* Ensure the overlay is above the map */
    display: flex;
    flex-direction: row; /* Place headlines and info-box next to each other */
    justify-content: space-between; /* Distribute space between the headlines and info-box */
    align-items: center;
    padding: 6px 3.5px; /* Add padding to the left and right to align with sub-headlines */
    background-color: white; /* Set background color to white */
}

.map-overlay .headlines {
    margin-top: 0;
    padding: 0;
    padding-left: 0.4em;
    display: flex;
    flex-direction: column; /* Stack h1 and h2 vertically */
    justify-content: flex-start; /* Align headlines at the top */
}

.map-overlay .info-box {
    margin: 0;    /* Remove margin to align items at the top */
    padding: 0; /* Remove padding to align items at the top */
    padding-right: 0.4em;
    right: 0;
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 3fr;
    grid-template-rows: auto auto;
    gap: 0; /* Remove gap to align items at the top */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    color: black; /* Black text color */
    pointer-events: none;
}

.map-overlay h1 { 
    margin: 0;    /* Remove margin to align items at the top */
    padding: 0; /* Remove padding to align items at the top */
    font: clamp(4px, 4vw, 200px) 'TeX Gyre Heros', sans-serif;
    color: black; /* Set text color to black */
    -webkit-text-stroke: 0.5px black; /* Adds an outline for fatness*/
    transform: scaleY(0.98); /* compresses the height */
    font-weight: bold;
    line-height: 1;
    text-align: left; /* Align text to the left */
    width: 100%;
}

.map-overlay h1 a { 
    margin: 0;    /* Remove margin to align items at the top */
    padding: 0; /* Remove padding to align items at the top */
    font: clamp(4px, 4vw, 200px) 'TeX Gyre Heros', sans-serif;
    color: black; /* Set text color to black */
    text-decoration: none; /* Remove underline from link */
    -webkit-text-stroke: 0.5px black; /* Adds an outline for fatness*/
    transform: scaleY(0.98); /* compresses the height */
    font-weight: bold;
    line-height: 1;
    text-align: left; /* Align text to the left */
}

.info-item {
    flex: 1;
    font: clamp(2px, 1.65vw, 80px) 'TeX Gyre Heros', sans-serif;
    font-weight: bold;
    line-height: 1;
    padding: 0.05em;
}

#count,
#filtered-count,
#total-area,
#filtered-area {
    text-align: right; /* Align text to the right for these specific elements */
}

#count, #count-label, #total-area, #total-area-label {
    color: #b8fff7; 
    -webkit-text-stroke-width: 1.2px; /* Text Shadow width */
    -webkit-text-stroke-color: #8afff3; /* Text Shadow color */
}

#filtered-count, #filtered-count-label, #filtered-area, #filtered-area-label {
    color: #00e0ca;
    font-weight: bold;
    line-height: 1;
}

#count-label {
    text-align: left; /* Align text to the right for these specific elements */
}

#filtered-area-label,
#filtered-area-label {
    text-align: justify; 
}

.main-map-container .map-container {
    flex-grow: 1; /* ensures it expands to fill any remaining space in the .main-map-container after accounting for the height of the .map-overlay. */
    width: 100%; /* Full height for the fifth map container */
    position: relative; /* ensures it is part of the normal document flow, allowing the .map-container to take up the full height available in the .main-map-container.*/
    pointer-events: auto; /* Ensure pointer events are enabled */
    touch-action: none; /* Prevent default touch actions to ensure map controls work on touch devices */
}

.map-instance-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 35%; /* Use 37% of the height of the viewport for the four maps */
    bottom: 0;
}

.map-instance {
    position: relative;
    width: 25%; /* 25% of the viewport width for each instance */
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height of the map instance group */
}

.map-instance .map-container {
    flex-grow: 1; /* Take up remaining height */
    position: relative; /* Changed from absolute */
    left: 0;
    right: 0;
    top: 0;
    height: auto; /* Changed to auto to use remaining height */
    pointer-events: auto; /* Ensure pointer events are enabled */
    touch-action: none; /* Prevent default touch actions to ensure map controls work on touch devices */
}

.map-instance .map-overlay {
    position: relative; /* Changed from absolute */
    padding-left: 0.1em; /* Add padding if needed for better alignment */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; /* Changed to auto to use remaining height */
    z-index: 2; /* Ensures the overlay is above the map */
}

.map-instance .map-overlay-inner h3 {
    display: block; 
    font: clamp(1px, 2vw, 16px) 'TeX Gyre Heros', sans-serif;
    font-weight: bold;
    margin: 0 0 -10px; 
    color: black; /* Set text color to white */
}

.map-instance .map-overlay-inner h4 {
    display: block; 
    line-height: 5px; 
    font: clamp(1px, 2vw, 8px) 'TeX Gyre Heros', sans-serif;
    font-weight: normal;
    margin-top: 10px; 
    margin-bottom: 20px; 
    color: black; /* Set text color to white */
}

.map-instance .sliders-wrapper { 
    display: flex; 
    justify-content: space-between; 
    font: clamp(1px, 2vw, 8px) 'TeX Gyre Heros', sans-serif;
    padding: 0.6%; /* Control distance from left and right borders */
}

.map-instance .slider-container { 
    flex: 1; 
    min-width: 0;
}

.map-instance .min-max-container { 
    display: flex; 
    justify-content: space-between;
    font: clamp(1px, 2vw, 8px) 'TeX Gyre Heros', sans-serif;
    font-weight: bold;
    padding-right: 0.5em; /* Control distance from left and right borders */
    padding-left: 0.5em; /* Control distance from left and right borders */
    color: black; /* Set text color to white */
}

.map-instance .map-overlay input { 
    background-color: transparent; 
    display: block; 
    width: 100%; 
    cursor: ew-resize;
    color: black; /* Set text color to white */
}



/* Slider thumb styles for WebKit browsers like Chrome and Safari */

/* Generic WebKit styling */
.map-instance .map-overlay-inner input[type="range"]::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #8a8a8a; /* Thumb color */
    outline: 1.5px solid #ffffff; /* White outline */
    box-shadow: 0 0 5px #838383; /* Optional: subtle shadow for contrast */
    cursor: pointer;
    margin-top: -7px;
}

/* Chrome specific styling */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .map-instance .map-overlay-inner input[type="range"]::-webkit-slider-thumb {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #8a8a8a; /* Thumb color */
            outline: 1.5px solid #ffffff; /* White outline */
            box-shadow: 0 0 5px #838383; /* Optional: subtle shadow for contrast */
            cursor: pointer;
            margin-top: -7px;
        }
    }
}


/* Slider thumb styles for Mozilla Firefox */
.map-instance .map-overlay-inner input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #8a8a8a; /* Thumb color */
    outline: 1.5px solid #ffffff; /* White outline */
    box-shadow: 0 0 5px #838383; /* Optional: subtle shadow for contrast */
    cursor: pointer;
    margin-top: -7px;
}


/* Align "Upper Threshold" label to the right */
.slider-container:nth-child(2) label {
    text-align: right;
    display: block;
}

/* Gradient and border-radius styling for the sliders */

/* MAP1: Gradient and border-radius styling for the FIRST slider */
#map1-slider-min::-webkit-slider-runnable-track {
    outline: none; /* Remove any outline */
    -webkit-appearance: none; /* Ensure no default webkit appearance */
    appearance: none; /* Ensure no default appearance */
    height: 2px; /* Set track height */
    background: linear-gradient(to left, #ecf5ff, #2e60ff); /* Gradient background */
    border-radius: 5px 0px 0px 5px; /* Rounded corners */
    border: none; /* Remove any border */
    box-shadow: none; /* Remove any shadow */
    background-clip: content-box; /* Ensure the background is clipped correctly */
    margin: 0; /* Ensure no margins are applied */
    
    /* Additional neutralizing styles */
    -webkit-box-shadow: none; /* Safari specific shadow removal */
    background-color: transparent; /* Ensure background color is transparent */
}

#map1-slider-min::-moz-range-track {
    border: none; /* Remove any border */
    box-shadow: none; /* Remove any shadow */
    outline: none; /* Remove any outline */
    height: 2px;
    background: linear-gradient(to left, #ecf5ff, #2e60ff);
    border-radius: 5px 0px 0px 5px;
}

/* MAP1: Gradient and border-radius styling for the SECOND slider */
#map1-slider-max::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: linear-gradient(to left, #2e60ff, #000941);
    border-radius: 0px 5px 5px 0px;
    border: none; /* Remove any border */
    box-shadow: none; /* Remove any shadow */
    outline: none; /* Remove any outline */
   
}

#map1-slider-max::-moz-range-track {
    height: 2px;
    background: linear-gradient(to left, #2e60ff, #000941);
    border-radius: 0px 5px 5px 0px;
    border: none; /* Remove any border */
    box-shadow: none; /* Remove any shadow */
    outline: none; /* Remove any outline */
}

/* Invert the sliders for map1 */
#map1-slider-min,
#map1-slider-max {
    direction: rtl; /* Reverse the direction of the slider */
}

#map1-slider-min::-webkit-slider-thumb,
#map1-slider-max::-webkit-slider-thumb {
    transform: translateX(0%); /* Correct the thumb position in WebKit browsers */
}

#map1-slider-min::-moz-range-thumb,
#map1-slider-max::-moz-range-thumb {
    transform: translateX(0%); /* Correct the thumb position in Firefox */
}

/* MAP2: Gradient and border-radius styling for the FIRST slider */
#map2-slider-min::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right, #FFFFDF, #FCEB4E);
    border-radius: 5px 0px 0px 5px;
}

#map2-slider-min::-moz-range-track {
    height: 2px;
    background: linear-gradient(to right, #FFFFDF, #FCEB4E);
    border-radius: 5px 0px 0px 5px;
}

/* MAP2: Gradient and border-radius styling for the SECOND slider */
#map2-slider-max::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right, #FCEB4E, #EC5A29);
    border-radius: 0px 5px 5px 0px;
}

#map2-slider-max::-moz-range-track {
    height: 2px;
    background: linear-gradient(to right, #FCEB4E, #EC5A29);
    border-radius: 0px 5px 5px 0px;
}

/* MAP3: Gradient and border-radius styling for the FIRST slider */
#map3-slider-min::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to left, #fe8fa5, #fd1f4b);
    border-radius: 5px 0px 0px 5px;
}

#map3-slider-min::-moz-range-track {
    height: 2px;
    background: linear-gradient(to left, #fe8fa5, #fd1f4b);
    border-radius: 5px 0px 0px 5px;
}

/* MAP3: Gradient and border-radius styling for the SECOND slider */
#map3-slider-max::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to left, #ffeff2, #fe8fa5);
    border-radius: 0px 5px 5px 0px;
}

#map3-slider-max::-moz-range-track {
    height: 2px;
    background: linear-gradient(to left, #fe8fa5, #fd1f4b);
    border-radius: 0px 5px 5px 0px;
}



/* MAP4: Gradient and border-radius styling for the FIRST slider */
#map4-slider-min::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right, #AAC08A, #42651B);
    border-radius: 0px 5px 5px 0px;
}

#map4-slider-min::-moz-range-track {
    height: 2px;
    background: linear-gradient(to right, #AAC08A, #42651B);
    border-radius: 0px 5px 5px 0px;
}

/* MAP4: Gradient and border-radius styling for the SECOND slider */
#map4-slider-max::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right, #F8FFEE, #AAC08A);
    border-radius: 5px 0px 0px 5px;
}

#map4-slider-max::-moz-range-track {
    height: 2px;
    background: linear-gradient(to right, #F8FFEE, #AAC08A);
    border-radius: 5px 0px 0px 5px;
}

/* Invert the sliders for map4 */
#map4-slider-min,
#map4-slider-max {
    direction: rtl; /* Reverse the direction of the slider */
}

#map4-slider-min::-webkit-slider-thumb,
#map4-slider-max::-webkit-slider-thumb {
    transform: translateX(0%); /* Correct the thumb position in WebKit browsers */
}

#map4-slider-min::-moz-range-thumb,
#map4-slider-max::-moz-range-thumb {
    transform: translateX(0%); /* Correct the thumb position in Firefox */
}