/* ==========================================================
   TDHI Scheduler
   Custom Theme Overrides
   ----------------------------------------------------------
   This file contains ONLY custom styles.
   Never modify soft-ui-dashboard.css directly.
========================================================== */


/* ==========================================================
   1. COLORS
========================================================== */

/* Use Soft UI's Success Gradient as the new Primary Color */

.bg-gradient-primary,
.btn.bg-gradient-primary,
.icon-shape.bg-gradient-primary {
    background-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%) !important;
    border: none !important;
}


/* ==========================================================
   2. BUTTONS
========================================================== */

/* Primary Button Hover */

.btn.bg-gradient-primary:hover,
.btn.bg-gradient-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%) !important;
    border: none !important;
}

/* Button Focus Ring */

.btn:focus {
    box-shadow: 0 0 0 .2rem rgba(23, 173, 55, .25);
}


/* ==========================================================
3. SIDEBAR
========================================================== */

/* Active Menu */
.sidenav .navbar-nav .nav-link.active {
    background-color: #ffffff !important;
    color: #344767 !important;
}

/* Active Menu Icon - TDHI Green */
.sidenav .navbar-nav .nav-link.active > .icon {
    background-image: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%) !important;
    background-color: transparent !important;
    color: #ffffff !important;

    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.07) !important;
}


/* ==========================================================
   4. LOGIN PAGE
========================================================== */

/* Reserved for Login Page Customizations */


/* ==========================================================
   5. TABLES
========================================================== */

/* Reserved for Table Customizations */


/* ==========================================================
   6. FORMS
========================================================== */

/* ==========================================================
   FORM SWITCH
========================================================== */

.form-check-input:checked {
    background-color: #17ad37 !important;
    border-color: #17ad37 !important;
    background-image: none !important;
}

.form-check-input:focus {
    border-color: #17ad37 !important;
    box-shadow: 0 0 0 .2rem rgba(23,173,55,.25) !important;
}


/* Form Control Focus */

.form-control:focus {
    border-color: #17ad37;
    box-shadow: 0 0 0 .2rem rgba(23, 173, 55, .15);
}


/* ==========================================================
   7. CALENDAR
========================================================== */

/* Reserved for FullCalendar Customizations */


/* ==========================================================
   8. DATATABLES
========================================================== */

/* Reserved for DataTables Customizations */


/* ==========================================================
   9. MODALS
========================================================== */

/* Reserved for Modal Customizations */


/* ==========================================================
   10. RESPONSIVE
========================================================== */

/* Remove only the collapse arrow */

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   FIXED SOFT UI NAVBAR
========================================================== */

.navbar-main {
    position: fixed !important;
    top: 1rem !important;
    left: 250px !important;
    right: 1rem !important;
    z-index: 1030 !important;
}


/* Keep page content below the fixed navbar */

.main-content {
    padding-top: 5.5rem !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 1199.98px) {

    .navbar-main {
        left: 1rem !important;
        right: 1rem !important;
    }

}

/* ==========================================================
   COMPACT SIDEBAR MENU
========================================================== */

/* Reduce vertical spacing between main menu items */
.navbar-vertical .navbar-nav > .nav-item {
    margin-bottom: 0.2rem !important;
}

/* Reduce the height/padding of each main menu link */
.navbar-vertical .navbar-nav > .nav-item > .nav-link {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    margin-bottom: 0 !important;
}

/* Keep the menu icons nicely centered */
.navbar-vertical .navbar-nav > .nav-item > .nav-link .icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

/* Reduce spacing for submenu items */
.navbar-vertical .navbar-nav .collapse .nav-link {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    margin-bottom: 0 !important;
}

/* Reduce spacing between submenu items */
.navbar-vertical .navbar-nav .collapse .nav-item {
    margin-bottom: 0 !important;
}

/* ==========================================================
   NATIVE APPOINTMENT MODAL
   Does not depend on Bootstrap JavaScript
========================================================== */

#appointmentModal.appointment-modal-open {

    display: block !important;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 1060;

    overflow-x: hidden;
    overflow-y: auto;

}


#appointmentModal.appointment-modal-open
.modal-dialog {

    margin-top: 40px;
    margin-bottom: 40px;

}


.appointment-native-backdrop {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1055;

}

/* ==========================================================
   APPOINTMENT SECTION TITLES
========================================================== */

.appointment-section-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 8px;

    margin-bottom: 18px;

    padding-bottom: 8px;

    border-bottom: 1px solid #e9ecef;

    color: #344767;

    font-size: 15px;

    font-weight: 700;

}


.appointment-section-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: linear-gradient(
        310deg,
        #82d616,
        #5fd20d
    );

    color: #fff;

    font-size: 12px;

    font-weight: 700;

}


#appointmentModal .form-control:disabled {

    background-color: #f8f9fa;

    cursor: not-allowed;

}


#appointmentModal .form-label {

    color: #344767;

    font-weight: 600;

}


#appointmentModal .modal-body {

    max-height: 70vh;

    overflow-y: auto;

}


#appointmentSubmitButton:disabled {

    opacity: .55;

    cursor: not-allowed;

}

<style>

/* ==========================================================
   USER MENU HOVER
========================================================== */

.navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}


/* Keep dropdown from disappearing while moving into it */

.navbar .dropdown-menu {
    transition: opacity .15s ease,
                transform .15s ease;
}


/* User area hover effect */

#userMenuDropdown {
    border-radius: 12px;
    transition: background-color .2s ease;
}

#userMenuDropdown:hover {
    background-color: rgba(0, 0, 0, 0.04);
}


/* Dropdown item hover */

.navbar .dropdown-menu .dropdown-item {
    transition: all .15s ease;
}

.navbar .dropdown-menu .dropdown-item:hover {
    transform: translateX(2px);
}

</style>