/* NavLink Color */
.nav-link:hover {
    color: red !important;
    /* Replace with your desired color */
}

.nav-link.active {
    color: #006ec9 !important;
    /* Replace with your desired color */
}

footer {
    height: 160px;
}

/* dcc datepicker */
#date_range_picker {
    width: 100%;
}


.row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.row>* {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    margin-left: 0px;

}

[class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}


/* Small devices (576px and up) */
@media (min-width: 320px) and (max-width: 576px) {
    .Select-value {
        display: flex;
        width: 95%;
    }

    .dash-bootstrap .Select--multi .Select-value {
        min-width: 200px;
    }

    .Select-value-label {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
    }

    .Select-multi-value-wrapper {
        width: 92%;
    }
}

main {
    width: 100%;
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 80%;
    }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 80%;
    }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 80%;
    }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1300px) {
    .container {
        max-width: 80%;
    }
}

/* XXL devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 80%;
    }
}

/* XXL devices (1400px and up) */
@media (min-width: 1500px) {
    .container {
        max-width: 80%;
    }
}


/* Small devices (576px and down) - Portrait mode */
@media screen and (max-width: 576px) and (orientation: portrait) {
    .leaflet-container {
        height: 70vh;
        /* Increase height for portrait on small devices */
    }
}

/* Small devices (576px and down) - Landscape mode */
@media screen and (max-width: 576px) and (orientation: landscape) {
    .leaflet-container {
        height: 50vh;
        /* Less height in landscape */
    }
}


/* Wide screens (1280px and up) */
@media screen and (min-width: 1280px) {
    .leaflet-container {
        height: 65vh;
    }
}

/* Normal screens (between 768px and 1280px) */
@media screen and (min-width: 768px) and (max-width: 1280px) {
    .leaflet-container {
        height: 50vh;
    }
}


/* Transparent Tooltip */
.transparent-tooltip {
    background-color: rgba(200, 200, 200, 0.3);
    border: none;
    color: black;
}

/* Custom CSS for dcc.Slider marks to appear horizontal on the rightmost end */
.rc-slider-mark-text {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-anchor: right !important;
}