@import 'partial/variable.css';
@import 'partial/common.css';

.rz-textbox,
.rz-textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .rz-textbox:focus,
    .rz-textarea:focus,
    .rz-dropdown:focus,
    .rz-datepicker:focus,
    .rz-calendar .rz-inputtext:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    }



/* Dropdown -> Bootstrap form-select */
.rz-dropdown {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    appearance: none;
}

/* DatePicker -> Bootstrap form-control */
.rz-calendar .rz-datepicker .rz-inputtext {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Validation error (Bootstrap .is-invalid) */
.rz-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + .75rem);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

body {
    font-family: var(--primary-font);
    background: #fff !important;
}

html {
    background-color: #f3f5f7;
}
/*.doctor-table th {
    background-color: #0b75b9;
    color:#f3f5f7
}*/

.btn-wrapper {
    font-size: 1.5em;
    padding: 1em 1em 1em 1em;
    text-align: center;
    font-weight: 500;
    border-radius: 10px;
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.btn-wrapper2 {
    font-size: 1.5em;
    padding: 2.5em 1em 2.5em 1em;
    text-align: center;
    font-weight: 500;
    border-radius: 10px;
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

    .btn-wrapper2:hover, .btn-wrapper:hover {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

.bg-l-blue {
    background: #546feb;
}

.bg-orange {
    background-color: #ff6600;
}

.bg-green {
    background-color: #00b33c;
}

.bg-yellow {
    background-color: #ffe433;
}

.bg-light-green {
    background-color: #48de2a;
}

.bg-grey {
    background-color: #f8f9fa;
    padding-bottom: 2rem;
}

.announcer-bg-light-green {
    background-color: #259025 !important;
}

.eng-text {
    margin-bottom: 5px;
}

.form-control:focus {
    border-color: #2a3b89 !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(42 59 137 / 60%) !important;
}

.cursor-pointer {
    cursor: pointer;
}

@media (min-width: 768px) {
    .responsive-iframe {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 767px) {
    .responsive-iframe {
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
}

.btn-primary {
    background-color: #00737c !important;
    border-color: #00737c !important;
}

    .btn-primary:hover {
        background-color: #005f63 !important;
        border-color: #005f63 !important;
    }

.btn-secondary {
    background-color: #5dde45 !important;
    border-color: #5dde45 !important;
}

    .btn-secondary:hover {
        background-color: #4cc53b !important;
        border-color: #4cc53b !important;
    }

.btn-dark {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

    .btn-dark:hover {
        background-color: #111111 !important;
        border-color: #111111 !important;
    }



.form-select {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: #fff;
}

    .form-select:focus {
        border-color: var(--bs-secondary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);
    }

    .form-select option:checked {
        background-color: var(--bs-primary);
        color: #fff;
    }

    .form-select option:hover {
        background-color: var(--bs-primary);
        color: #fff;
    }

    .form-select option:checked {
        background-color: var(--bs-secondary);
        color: #fff;
    }

    .form-select:hover {
        border-color: var(--bs-secondary);
        background-color: #f5fff5;
        cursor: pointer;
    }

.navbar {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
}

/* Forms */
.form-control {
    border-radius: .375rem;
    border-color: var(--bs-primary) !important;
}

    .form-control:focus {
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0 0 .25rem rgba(0, 115, 115, .25) !important;
    }

/* Links */
a {
    color: var(--bs-primary);
}

    a:hover {
        color: var(--bs-btn-hover-bg);
    }

/* Alerts */
.alert-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

.alert-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.alert-dark {
    background-color: var(--bs-dark);
    color: #fff;
}

.sidebar {
    background-image: linear-gradient( 180deg, var(--bs-primary) 10%, var(--bs-secondary) 60%, var(--bs-dark) 100% ) !important;
    
    overflow: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar::-webkit-scrollbar {
        display: none;
    }

@media (max-width: 768px) {
    .sidebar {
        width: 100% !important;
        position: relative; /* ensure it flows normally */
        height: auto; /* optional: allow height to adjust */

        overflow: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .sidebar::-webkit-scrollbar {
            display: none;
        }
}

.navbar {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-family: var(--bs-body-font-family) !important;
}

    .navbar .navbar-brand {
        font-weight: bold;
        font-size: 1.2rem;
        color: #fff !important;
    }

        .navbar .navbar-brand img {
            max-height: 30px;
            margin-right: 8px;
        }

@media (max-width: 1599.98px) {
    .navbar .navbar-brand {
        font-size: 0.95rem;
    }
}

/* Navbar toggler */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,..."); /* keep Bootstrap icon or customize */
}

/* Sidebar nav menu */
.nav-item {
    font-family: var(--bs-body-font-family) !important;
}

.nav-link {
    color: #fff !important;
    /*font-size: 1rem;*/
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease;
}

    .nav-link:hover {
        background-color: var(--bs-secondary) !important;
        color: #fff !important;
        text-decoration: none;
    }

    /* Active link */
    .nav-link.active {
        background-color: var(--bs-primary) !important;
        color: #fff !important;
    }

/* Submenu */
.nav.flex-column.ms-3 {
    background-color: rgba(0, 0, 0, 0.1);
}

    .nav.flex-column.ms-3 .nav-link {
        padding-left: 2rem;
    }

/* Icon styling */
.nav-link i {
    width: 20px;
    text-align: center;
}

/* Buttons in navbar/sidebar */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-dark {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn-outline-primary {
    color: white !important; /* text color */
    background-color: var(--bs-primary) !important; /* button background */
    border-color: var(--bs-primary) !important; /* border color */
}

    .btn-outline-primary:hover {
        background-color: var(--bs-secondary) !important; /* hover background */
        color: white !important;
        border-color: var(--bs-primary-dark) !important;
    }

.bg-primary {
    background-color: rgba(var(--bs-secondary-rgb), 0.8) !important;
}

/* Sidebar background */
div[class^="NavMenuCssClass"] {
    background-color: var(--bs-dark) !important;
}

.nav.flex-column.ms-3 {
    background-color: rgba(0, 0, 0, 0.1); /* subtle background for submenu */
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 3px solid var(--bs-primary); /* highlight border for submenu */
}

.nav.flex-column.ms-3 {
    background-color: rgba(0, 0, 0, 0.1); /* subtle background */
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 3px solid var(--bs-primary);
}

    /* Submenu links */
    .nav.flex-column.ms-3 .nav-link {
        display: flex;
        align-items: center;
        gap: 8px; /* space between icon and text */
        color: #fff !important;
        font-size: 0.95rem;
        padding: 0.4rem 1rem;
        text-decoration: none;
        white-space: nowrap;
    }

        /* Hover state for submenu links */
        .nav.flex-column.ms-3 .nav-link:hover {
            background-color: var(--bs-primary) !important;
            color: #fff !important;
        }

        /* Active submenu link */
        .nav.flex-column.ms-3 .nav-link.active {
            background-color: var(--bs-primary) !important;
            color: #fff !important;
        }

        /* Icon alignment */
        .nav.flex-column.ms-3 .nav-link i {
            min-width: 20px;
            text-align: center;
        }

.rz-button {
    background-color: var(--rz-primary);
    color: white;
}

    .rz-button:hover {
        background-color: var(--rz-secondary);
    }

.rz-dropdown-items .rz-dropdown-item:hover {
    background-color: var(--rz-secondary) !important;
    color: #fff !important;
}

/* Selected item highlight */
.rz-dropdown-items .rz-dropdown-item.rz-state-highlight {
    background-color: var(--rz-primary) !important;
    color: #fff !important;
}

/* Optional — set normal item colors */
.rz-dropdown-items .rz-dropdown-item {
    color: var(--rz-dark) !important;
}

.rz-calendar-view td .rz-state-default {
    color: var(--bs-dark) !important;
    font-size: 14px !important;
    border-radius: 6px !important;
}

    .rz-calendar-view td .rz-state-default.rz-state-focused,
    .rz-calendar-view td .rz-state-default:hover,
    .rz-calendar .rz-calendar-view td .rz-state-default.rz-state-focused,
    .rz-calendar .rz-calendar-view td .rz-state-default:hover {
        background: var(--bs-secondary) !important;
        background-color: var(--bs-primary) !important;
        color: #fff !important;
        transition: background-color 0.25s ease, color 0.25s ease !important;
        box-shadow: none !important;
    }

.rz-calendar-view td:hover .rz-state-default,
.rz-calendar-view td a.rz-state-default:hover,
.rz-calendar-view td a.rz-state-default.rz-state-focused {
    background: var(--bs-secondary) !important;
    color: #fff !important;
}

.rz-calendar-view td .rz-state-default.rz-calendar-today {
   
    background-color: var(--bs-secondary) !important;
    
}