.nav-link-hover:hover {
    border-bottom: 2px solid white !important;
    color: white !important;
}

.nav-link.active {
    border-bottom: 2px solid white !important;
    color: white !important;
}

.nav-link-custom:hover {
    background-color: #63B3ED !important;
    color: white !important;
    transform: translateX(5px);
}

.nav-link-custom.active {
    background-color: #6B46C1 !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-link-custom:focus {
    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.3);
}

/* Bounce animation for the arrow */
@keyframes bounceLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20px);
    }
}

/* Floating animation for the metrics icon */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add hover effect to the container */
.metrics-welcome:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Add subtle pulse animation to the metrics icon */
.metrics-icon:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Make range slider markers bold */
.rc-slider-mark-text {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333 !important; /* Darker text for better readability */
}

/* Increase visibility of the selected range on the slider */
.rc-slider-track {
    background-color: #6B46C1 !important;
    height: 6px !important;
}

/* Style the slider handle to match theme */
.rc-slider-handle {
    border: solid 2px #6B46C1 !important;
    background-color: white !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Improve hover effect on handles */
.rc-slider-handle:hover {
    border-color: #63B3ED !important;
    box-shadow: 0 0 0 5px rgba(99, 179, 237, 0.2) !important;
}

/* Make the rail more visible */
.rc-slider-rail {
    background-color: #E2E8F0 !important;
    height: 6px !important;
}

/* Make the selected date range text bold */
.rc-slider-tooltip-inner, 
.rc-slider-tooltip-content,
.rc-slider-handle-tooltip {
    font-weight: bold !important;
    font-size: 14px !important;
    color: white !important;
}

/* Target the date range display in the slider */
.slider-value, 
#slider-id .dash-tooltip, 
.dash-tooltip-inner {
    font-weight: bold !important;
    font-size: 14px !important;
    color: white !important;
}

/* Export button styling */
.export-button:hover {
    background-color: #805AD5 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.export-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}