.course-list {
    max-height: 175px;
    overflow-y: auto;
}

.course-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.course-item:last-child {
    border-bottom: none;
}

.course-item form {
    margin-left: 10px;
}

.course-item button {
    padding: 2px 8px;
}
.background_hue_slider::-webkit-slider-thumb {
    background: linear-gradient(
        to right,
        hsl(0, 97.7%, 83.1%),
        hsl(30, 97.7%, 83.1%),
        hsl(60, 97.7%, 83.1%),
        hsl(90, 97.7%, 83.1%),
        hsl(120, 97.7%, 83.1%),
        hsl(150, 97.7%, 83.1%),
        hsl(180, 97.7%, 83.1%),
        hsl(210, 97.7%, 83.1%),
        hsl(240, 97.7%, 83.1%),
        hsl(270, 97.7%, 83.1%),
        hsl(300, 97.7%, 83.1%),
        hsl(330, 97.7%, 83.1%),
        hsl(360, 97.7%, 83.1%)
      ) !important;      
}


.background_hue_slider::-moz-range-track {
    background: linear-gradient(
        to right,
        hsl(0, 97.7%, 83.1%),
        hsl(30, 97.7%, 83.1%),
        hsl(60, 97.7%, 83.1%),
        hsl(90, 97.7%, 83.1%),
        hsl(120, 97.7%, 83.1%),
        hsl(150, 97.7%, 83.1%),
        hsl(180, 97.7%, 83.1%),
        hsl(210, 97.7%, 83.1%),
        hsl(240, 97.7%, 83.1%),
        hsl(270, 97.7%, 83.1%),
        hsl(300, 97.7%, 83.1%),
        hsl(330, 97.7%, 83.1%),
        hsl(360, 97.7%, 83.1%)

      ) !important;  
  }

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        hsl(0, 97.7%, 83.1%),
        hsl(30, 97.7%, 83.1%),
        hsl(60, 97.7%, 83.1%),
        hsl(90, 97.7%, 83.1%),
        hsl(120, 97.7%, 83.1%),
        hsl(150, 97.7%, 83.1%),
        hsl(180, 97.7%, 83.1%),
        hsl(210, 97.7%, 83.1%),
        hsl(240, 97.7%, 83.1%),
        hsl(270, 97.7%, 83.1%),
        hsl(300, 97.7%, 83.1%),
        hsl(330, 97.7%, 83.1%),
        hsl(360, 97.7%, 83.1%)
      ) !important;  
  }

#profile-tab, #preferences-tab, #schedule-tab{
    color: black;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: none !important;
}

#preferences-tab{
    color: black;

}

#profile-tab.active, #preferences-tab.active {
    color: #0d6efd;
}


#profile-tab:hover,
#preferences-tab:hover,
#schedule-tab:hover{
    background-color: #f1f1f1;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#profileTabs {
    border-bottom: 1px solid white;
}

.block-container {
    border-radius: 8px;
    height: 100%;
}

.block-header {
    padding: 5px 8px;
}

.block-content {
    padding: 5px;
    display: flex;
    align-items: center;
}

.course-selector {
    flex-grow: 1;
    margin-right: 10px;
}

.block-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.block-buttons .btn {
    white-space: nowrap;
    min-width: 110px;
}

/* Make sure the CourseSelector custom element fits well */
.course-selector select,
.course-selector .selected-items {
    width: 100%;
    min-height: 38px;
}

#profilePictureMenu {
    display: none; 
    position: absolute;
    top: 90%; 
    left: 1;
    z-index: 9999 !important; 
    background-color: white;
    border-width: 0.2px;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: 400px;
}

.changeablePfp:hover::after {
    content: "Click to change";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Ensure the text doesn't interfere with the hover */
}

.changeablePfp:hover {
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Ensure the text doesn't interfere with hover */
    text-align: center;
}

/* Show hover text on hover */
.changeablePfp:hover + .hover-text {
    display: block !important;
}

.block-label {
    margin-right: 10px;
}

/* Compare Schedules Button */
#compare-schedules-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#compare-schedules-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
}

#compare-schedules-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.magic-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    border: none !important;
    padding: .375rem .75rem;
    color: white;
    z-index: 3;
}

.magic-btn .fa-magic {
    color: #00c3ff;
    border-radius: 50%;
    padding: 2px;
    font-size: 1.1em;
    transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1)
}

.magic-btn:hover .fa-magic,
.magic-btn:focus .fa-magic {
    transform: scale(1.25);
}

.magic-btn:disabled, .magic-btn:disabled .fa-magic {
    background: rgb(183, 94, 243);
    color: #000000;
    pointer-events: all;
}

/* Simple change detection button */
.change-detected {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
    border-color: #007bff !important;
    color: white !important;
    animation: scale-pulse 0.5s ease-in-out infinite alternate;
    transition: background 0.3s ease, transform 0.2s ease !important;
}

.change-detected:hover {
    background: linear-gradient(135deg, #0056b3, #007bff) !important;
    transform: scale(1.05) !important;
    animation: none;
}

@keyframes scale-pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}