:root {
    --BRAND_WHITE: #e8f8ff;
    --BRAND_LIGHT_BLUE: #a6ddf4;
    --BRAND_YELLOW: #ffebb5;
    --BRAND_PINK: #d90368;
    --BRAND_LIGHT_PINK: #f385b9;
    --BRAND_GREEN: #04a777;
    --BRAND_DARK_BLUE: #000f4d;
    --BRAND_LIGHT_PURPLE: #d1d8e9;
    --BRAND_PEACH: #f8d8aa;
    --BRAND_ORANGE: #e27237;
    --BRAND_BROWN: #9a8f6e;
    --BRAND_TAUPE: #b19074;
}

body {
  font-family: "IBM Plex Mono", monospace;
}

.map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.map-search-container {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    top: 10px;
    right: 10px;
    width: 260px;
    padding: 10px;
    border-radius: 8px;
    overflow: visible;
}

.mapboxgl-ctrl-top-right {
    top: 160px; 
    right: 10px;
}

.geocoder {
    position: relative;
    margin: 10px 0 10px;
}

#returnbutton {
    position: relative;
    margin: 10px 0 10px;
    width: 100%;
}

.left-panel {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    width: min(300px, 30vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.scroll-area {
    background: rgba(255, 255, 255, 0.4);
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    border-radius: 8px;
}

.card-kew { 
    background-color: var(--BRAND_GREEN); 
    width: 100%;
    border-radius: 8px;
} 
.card-ivan-forrest { 
    background-color: var(--BRAND_LIGHT_BLUE); 
    width: 100%;
    border-radius: 8px;

} 
.card-pub-crawl { 
    background-color: var(--BRAND_TAUPE); 
    width: 100%;
    border-radius: 8px;
} 
.card-artwalk { 
    background-color: var(--BRAND_LIGHT_PINK);}

.card-date-night { 
    background-color: var(--BRAND_PINK); 
    width: 100%;
    border-radius: 8px;
} 
.card-page-to-screen { 
    background-color: var(--BRAND_YELLOW); 
    width: 100%;
    border-radius: 8px;
} 

.card-pup-crawl { 
    background-color: var(--BRAND_LIGHT_BLUE); 
    width: 100%;
    border-radius: 8px;
} 

.card-scenic-route { 
    background-color: #c4a2d5; 
    width: 100%;
    border-radius: 8px;
} 

.side-panel {
    position: absolute;
    left: 330px; 
    top: 20px;
    width: 300px; 
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 10px;
}

#panel-kew { background-color: var(--BRAND_GREEN); }
#panel-ivan-forrest { background-color: var(--BRAND_LIGHT_BLUE); }
#panel-pub-crawl { background-color: var(--BRAND_TAUPE); }
#panel-page-to-screen { background-color: var(--BRAND_YELLOW); }
#panel-artwalk { background-color: var(--BRAND_LIGHT_PINK);} 
#panel-date-night { background-color: var(--BRAND_PINK); }
#panel-pup-crawl { background-color: var(--BRAND_LIGHT_BLUE); }

/* .custom-popup {
    max-width: 200px;
    background-color: blue;
} */

/* .h6 {
    color: blue;
} */