/* Style the range input for all browsers */
.range-slider {
    -webkit-appearance: none; /* Remove default appearance for webkit browsers */
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #e0e7ff; /* Light indigo background */
    outline: none;
    transition: background 0.3s ease;
}

/* Style for the thumb in Webkit-based browsers (Chrome, Safari, Edge) */
.range-slider::-webkit-slider-runnable-track {
    background: #e0e7ff;
    height: 8px;
    border-radius: 5px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5; /* Indigo color */
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Style for the thumb in Firefox */
.range-slider::-moz-range-track {
    background: #e0e7ff;
    height: 8px;
    border-radius: 5px;
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5; /* Indigo color */
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Optional: Add hover effect for the thumb */
.range-slider:hover::-webkit-slider-thumb,
.range-slider:hover::-moz-range-thumb {
    background: #4338ca; /* Darker indigo on hover */
}

/* Disabled button state */
#submit-button:disabled {
    background-color: #D1D5DB; /* gray-300 */
    cursor: not-allowed;
    opacity: 0.6;
}

.bg-custom-purple {
    background-color: #b483a3;
}

.bg-custom-black {
    background-color: #231641;
}

.tab-control.active {
    background-color: #b483a3; /* Active tab background color */
    color: white;
}

.tab-panel {
    display: none; /* Ensure tab panels are hidden initially */
}

.tab-panel.active {
    display: block; /* Display the active tab panel */
}

thead {
    position: sticky;
    top: 0;
    background-color: #4f46e5; /* Same as bg-indigo-600 */
    z-index: 10;
}


@keyframes spin-slower {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.animate-spin-slower {
    animation: spin-slower 2.5s linear infinite;
}

@keyframes spin-reverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.animate-spin-reverse {
    animation: spin-reverse 3s linear infinite;
}