/* 
COURSE: CRTY1033 Web Mapping
PURPOSE: Assignment 4 - JavaScript Libraries for Web Mapping Applications (Mapbox)
DEVELOPER: Carlyle Apps
DATE: February 13, 2025 
REVISED: February 18, 2025  
*/

/* Colour Reference:  */
/* base: rgb(215, 215, 201) */
/* green: rgb(151, 149, 99) */
/* pale blue: rgb(159, 174, 163) */
/* dark blue (body text) rgb(50, 87, 99) */
/* orange accent 1: rgb(229, 149, 52) */
/* orange accent 2: rgb(204, 154, 83)*/
/* dark rust: rgb(143, 85, 67) */
/* light rust: rgb(201, 126, 103) */
/* brown/grey: rgb(150, 137, 110) */
/* dark: rgb(24, 26, 27) */

/* Style from original import code */
body { 
    margin: 0; 
    padding: 0; 
}

#map { 
    position: absolute;
    top: 0; 
    bottom: 0; 
    width: 100%; 
}


/* Popup */
.mapboxgl-popup {
    max-width: 400px;
    color: rgb(50, 87, 99);
    font-family: "Outfit", sans-serif;
    padding: 1rem;
    background-color: transparent;
}

.mapboxgl-popup h2,
h4 {
    color: rgb(204, 154, 83);
}

.mapboxgl-popup h4 {
    font-size: 14px;
}

.mapboxgl-popup-content {
    max-height: 400px; /* Set a fixed height for the popup */
    overflow-y: scroll; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling (optional) */
    padding: 1rem;
    border-radius: 15pt;
}

.mapboxgl-popup-close-button {
    display: none;
}

/* Popup scrollbar styling */
/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 5px grey;  */
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(201, 126, 103); 
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(143, 85, 67); 
}

/* Owl image size */
#owlImage {
    max-width: 75%;
    height: auto;
    border-radius: 10pt;
}

/* Legend */
/* Hide "Only rendered" heading text */
.mapboxgl-legend-onlyRendered-label {
    display: none;
}

/* Hide checkboxes for headings */
.mapboxgl-legend-onlyRendered-checkbox {
    display: none;
}

/* customize legend */
.mapboxgl-legend-list {
    padding: 1.25rem;
    font-family: "Outfit", Sans Serif;
    color: rgb(50, 87, 99);
    font-size: larger;
}

/* Hide the legend item checkbox */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.legend-table-td img {
    height: 50px !important;
}

/* Geolocator */
.mapboxgl-ctrl-geocoder--icon {
fill:  rgb(143, 85, 67);
}

/* Button hover colour */
.mapboxgl-ctrl button:not(:disabled):hover {
    background-color: rgb(201, 126, 103,0.25);
}

/* Collapsed and close legend button colour */
.mapboxgl-legend-switcher {
    filter: brightness(0) saturate(100%) invert(59%) sepia(73%) saturate(2000%) hue-rotate(334deg) brightness(60%) contrast(98%); /* applied filter to make svg closely match colour dark rust */
}

/* all top-left button colours */
.mapboxgl-ctrl-icon {
    filter: brightness(0) saturate(100%) invert(59%) sepia(73%) saturate(2000%) hue-rotate(334deg) brightness(60%) contrast(98%); /* applied filter to make svg closely match colour dark rust */
}

/* Scale bar*/
.mapboxgl-ctrl-scale {
    background-color: rgb(215, 215, 201);
    border: 2px solid rgb(143, 85, 67);
    border-top: rgb(143, 85, 67);
    color: rgb(143, 85, 67);
}