.active-quadrant {
    /* background styles */
    background-color: #b40;
    /*for compatibility with older browsers*/
    /* 
    background-image: linear-gradient(#be6f38, #C47D4B);
    */
    background-image: linear-gradient(#b40, orange);
    /* text styles */
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-family: sans-serif;
    font-weight: 100;
    /*  round the corners, engrave the text, add subtle shadows  */
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
}

.active-quadrant:after {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.active-quadrant:hover {
    background: linear-gradient(#225376, #04d9ff);
}

.active-city {
    /* background styles */
    background-color: #258;
    /*for compatibility with older browsers*/
    /* 
    background-image: linear-gradient(#be6f38, #C47D4B);
    */
    background: linear-gradient(#225376, #04d9ff);

    /* text styles */
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-family: sans-serif;
    font-weight: 100;
    /*  round the corners, engrave the text, add subtle shadows  */
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
}

.active-city:after {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.active-city:hover {
    background-image: linear-gradient(#258, #aef);
}

#modalContent {
    width: var(--modal-content-width) !important;
    height: var(--modal-content-height) !important;
}

#modal-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    width: 70%;
    /* Stretches near the sides of the map */
    pointer-events: none;
    /* Prevent interaction with this element */
}

.modal-city-btn {
    width: 100%;
    /* Set the fixed height for each button */
    display: flex;
    justify-content: center;
    /* Horizontally centers text */
    align-items: center;
    /* Vertically centers text */
    text-align: center;
    background-color: var(--color-button-primary);
    padding: 0px;
    font-size: var(--modal-city-btn-font-size);
    color: white;
    text-align: center;
}

/*
    position: absolute;
    top: 5px;
    left: 300px;
    padding: 5px 10px;
    display: block;
    border-radius: 5px;
    font-size: 0.75vw;
    color: white;
*/
#modal-city-btn-cta {
    background-color: red;
    opacity: 0.5;
    z-index: 10;
    visibility: visible;
}

#slideshow-cta {
    position: absolute;
    top: -15px;
    right: 15px;
    padding: 5px 10px;
    display: none;
    border-radius: 5px;
    background-color: red;
    font-size: 0.75vw;
    color: white;
    opacity: 0.5;
}

.modal>.mapboxgl-ctrl-bottom-right {
    bottom: 5px;
    /* Adjust this value to position vertically */
    right: 125px;
    /* Adjust this value to position horizontally */
}

#modal-left-quadrant-column button,
#modal-right-quadrant-column button {
    background-color: var(--color-primary);
    color: white;
}

.modal-quadrant-btn {
    font-size: var(--modal-quadrant-btn-font-size) !important;
}

#prev-poi-btn,
#next-poi-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    pointer-events: auto;
    /* Allow interaction only on the buttons */
}

#open-left-map-btn-container {
    position: absolute;
    bottom: 4px;
    /* Adjust this value as needed */
    left: 60%;
    transform: translateX(-60%);
    font-size: 24px;
    /* Adjust the size as needed */
    color: #000;
    /* Adjust the color as needed */
}

#open-right-map-btn-container {
    position: absolute;
    bottom: 4px;
    /* Adjust this value as needed */
    left: 40%;
    transform: translateX(-40%);
    font-size: 24px;
    /* Adjust the size as needed */
    color: #000;
    /* Adjust the color as needed */
}

/*
    font-size: clamp(0.75, 0.85vw, 0.90vw);
*/
.open-modal-btn {
    display: inline-block;
    border: none;
    margin: var(--open-modal-btn-margin);
    padding: var(--open-modal-btn-padding-vertical) var(--open-modal-btn-padding-lateral);
    background-color: dodgerblue;
    color: white;
    font-size: var(--open-modal-btn-font-size);
    text-align: center;
}

.search-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: none;
    /* Initially hidden */
}