/* Global Body Styles */
body {
    color: #54575A;
    background-color: #fff;
}

/* Headings in grade level, category, and department filters */
.grade-level-label,
.category-filters h3,
.department-filters h3,
.semester-filters h3,
.course-search-container h3 {
    color: #54575A;
}

/* Main heading in the catalog left column */
.catalog-left-col h2 {
    color: #002868;
    -webkit-text-decoration-color: #FED700;
    text-decoration-color: #FED700;
}

/* Category group headings inside the catalog left column */
.catalog-left-col .category-group h3 {
    color: #54575A;
}

/* Department group heading */
.department-group h4 {
    color: #CE5C17;
}

/* Course item title styling */
.course-item h5,
#no-courses-message {
    color: #002868;
}

/* Course item title hover state */
.course-item h5:hover,
#no-courses-message {
    color: #CE5C17;
}

/* Course item description text */
.course-item p {
    color: #54575A;
}

/* Grade Filters Button Styling */
.grade-filters button {
    color: #000;
    border: 1px solid #CE5C17;
    background-color: #fff;
}

/* Grade Filters Button hover and active state */
.grade-filters button:hover,
.grade-filters button.active {
    background-color: #CE5C17;
    color: #fff;
}

/* Department Dropdown Trigger styling */
.dept-dropdown-trigger,
.semester-dropdown-trigger {
    background-color: #f5f5f5;
    color: #002868;
}

/* Divider lines for grouping elements */
.divider {
    border-bottom: 1px solid #D1D0D0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.divider-line {
    border-bottom: 1px solid #D1D0D0;
}

/* Department filter label styling */
.department-filter label,
.semester-filter label {
    color: #54575A;
}

/* Reset Department Filters Button styling */
.reset-department-filters,
.reset-semester-filters {
    background-color: #f5f5f5;
    color: #BF0A30;
}

/* Reset Department Filters Button hover state */
.reset-department-filters:hover,
.reset-semester-filters:hover {
    color: #CE5C17;
}

/* Course Modal Background */
.course-modal {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Course Modal Content styling */
.course-modal-content {
    background-color: #fff;
    border: 1px solid #888;
}

/* Course Modal Title styling */
.course-modal-title,
.prereq-modal-title {
    color: #002868;
}

/* Modal labels for required materials and prerequisites */
.course-modal-required-label,
.course-modal-semester-label,
.course-modal-prereq-label {
    color: #CE5C17;
}

/* Modal content text for grades, description, required materials, and prerequisites */
.course-modal-grades,
.course-modal-desc,
.course-modal-required,
.course-modal-semester,
.course-modal-prereq {
    color: #000;
}

/* Prerequisite Button styling */
.prereq-button {
    background-color: #BF0A30;
    color: #fff;
}

/* Prerequisite Button hover state */
.prereq-button:hover {
    background-color: #CE5C17;
}

/* Modal Action Buttons (close buttons) styling */
.course-modal-close-btn,
.prereq-modal-close-btn,
.dynamic-modal-close-btn {
    background-color: #BF0A30;
    color: #fff;
}

/* Modal Action Buttons hover state */
.course-modal-close-btn:hover,
.prereq-modal-close-btn:hover,
.dynamic-modal-close-btn:hover {
    background-color: #CE5C17;
}

/* Scroll-to-top Button styling */
#scrollToTopBtn {
    background-color: #002868;
    color: #fff;
}

/* Mobile Styles: Adjustments for screens up to 980px wide */
@media (max-width: 980px) {

    /* Mobile Filter Button styling */
    #mobile-filter-btn {
        background-color: #BF0A30;
        color: #fff;
    }

    /* Mobile Filter Button hover state */
    #mobile-filter-btn:hover {
        background-color: #CE5C17;
    }

    /* Mobile Filter Modal background */
    #mobile-filter-modal {
        background-color: rgba(0, 0, 0, 0.7);
    }

    /* Mobile Filter Modal content styling */
    #mobile-filter-modal .modal-content {
        background-color: #fff;
        border-top: 12px solid #CE5C17;
    }

    /* Mobile Filter Modal header styling */
    #mobile-filter-modal .modal-header {
        background-color: #fff;
        color: #fff;
        box-shadow: 0 0px 10px -2px gray;
    }

    /* Mobile Filter Modal header title styling */
    #mobile-filter-modal .modal-header h4 {
        color: #002868;
    }

    /* Mobile Filter Modal header button styling */
    #mobile-filter-modal .modal-header button {
        background-color: #002868;
        color: #fff;
    }
}

/* driver */
/* container */
.driverjs-theme.driver-popover {
  border: 2px solid #002868;
}

/* title */
.driverjs-theme .driver-popover-title {
  color: #54575A;
  -webkit-text-decoration-color: #FED700;
  text-decoration-color: #FED700;
}

/* content */
.driverjs-theme .driver-popover-description,
.driverjs-theme .driver-popover-progress-text {
  color: #54575A;
}

.driverjs-theme .driver-popover-next-btn,
.driverjs-theme .driver-popover-prev-btn {
  border: 2px solid #002868;
  color: #002868;
}


/* close button */
.driverjs-theme .driver-popover-close-btn {
  color: #002868;
}

.driverjs-theme .driver-popover-close-btn:hover, .driverjs-theme .driver-popover-close-btn:focus {
  color: #002868;
}

/* pointer */
.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #002868;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #002868;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #002868;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #002868;
}