/* ==========================================================================
   BRAND THEME
   --------------------------------------------------------------------------
   The whole portal — including the login / QR-auth pages and their modals —
   is driven by the three brand colours below. To re-skin for another school:

     a) set "Primary Color" / "Secondary Color" / "Accent Color" in the shared
        `configurations` table — views/_theme_vars.php emits those as a :root
        override on top of these defaults (no code change), or
     b) edit the three values here.

   Everything under "derived" recomputes from them automatically, so nothing
   else in this file or in the views needs touching.

   Each derived token is declared twice on purpose: the first (static) line is
   the fallback for browsers without color-mix(), the second does the real
   work. Browsers that don't understand color-mix() simply drop that line.
   ========================================================================== */
:root {
    --theme: #2E7D22;                   /* primary   — buttons, links, focus  */
    --theme-active: #1E5416;            /* secondary — hover / pressed / rail */
    --theme-accent: #0731A1;            /* accent    — gradient tail, chips   */

    /* ---- derived: brand shades ------------------------------------------ */
    --theme-press: #2a1084;             /* button :active                     */
    --theme-press: color-mix(in srgb, var(--theme-active) 86%, #000);
    --theme-dark: #241a5e;              /* deepest — top band + display text  */
    --theme-dark: color-mix(in srgb, var(--theme-active) 70%, #000);

    /* ---- derived: text -------------------------------------------------- */
    --theme-ink: var(--theme-dark);     /* headings + body copy               */
    --theme-muted: #6d67a0;             /* secondary copy, muted controls     */
    --theme-muted: color-mix(in srgb, var(--theme-ink) 62%, #fff);
    --theme-faint: #a79fc7;             /* placeholders, fine print           */
    --theme-faint: color-mix(in srgb, var(--theme-ink) 38%, #fff);
    --theme-on-dark: #b7acee;           /* muted text ON the dark band        */
    --theme-on-dark: color-mix(in srgb, var(--theme) 45%, #fff);

    /* ---- derived: surfaces ---------------------------------------------- */
    --theme-bg: #faf9fe;                /* page background                    */
    --theme-bg: color-mix(in srgb, var(--theme) 4%, #fff);
    --theme-surface: #ffffff;           /* cards, modals                      */
    --theme-field: #fbfaff;             /* input background                   */
    --theme-field: color-mix(in srgb, var(--theme) 3%, #fff);
    --theme-soft: #f0edfc;              /* soft brand tint (chips, icon hover)*/
    --theme-soft: color-mix(in srgb, var(--theme) 9%, #fff);
    --theme-line: #ebe7f8;              /* hairline dividers                  */
    --theme-line: color-mix(in srgb, var(--theme) 12%, #fff);
    --theme-border: #ddd8f0;            /* input borders                      */
    --theme-border: color-mix(in srgb, var(--theme) 20%, #fff);
    --theme-ring: rgba(90, 56, 214, .15);   /* focus glow                     */
    --theme-ring: color-mix(in srgb, var(--theme) 18%, transparent);
}

/* From header */
.main_loader{position:fixed;left:50%;top:50%;z-index:9999;display:none}.bg_disabled{z-index:-1}.custom-select-a{color:#495057;border:1px solid #dedede;background:#fbfbfb;border-radius:4px;box-shadow:none;box-shadow:0 0!important;outline:0!important;padding:5px 8px!important;height:32px}.toast__container{display:table-cell;vertical-align:middle}.toast__cell{display:inline-block}.add-margin{margin-top:1px}.toast__svg{fill:#fff}.toast{text-align:left;padding:11px 0;background-color:#fff;border-radius:4px;max-width:500px;top:0;position:relative;box-shadow:1px 7px 14px -5px rgba(0,0,0,.2)}.toast:before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-top-left-radius:4px;border-bottom-left-radius:4px}.toast__icon{position:absolute;top:15%;left:5px;transform:translateY(-50%);width:14px;height:14px;padding:7px;border-radius:50%;display:inline-block}.toast__type{color:#3e3e3e;font-weight:700;margin-top:0;margin-bottom:8px}.toast__message{font-size:12px;margin-top:0;margin-bottom:0;color:#878787}.toast__content{padding-left:55px;padding-right:170px}.toast__close{position:absolute;right:22px;top:50%;width:14px;cursor:pointer;height:14px;fill:#878787;transform:translateY(-50%)}.toast--green:before{background-color:#2bde3f}.toast--blue:before{background-color:#1d72f3}.toast--yellow:before{background-color:#ffc007}.image-upload>input{display:none}.image-upload img{width:28px;cursor:pointer;padding-top:15px}.my-file-upload .bootstrap-filestyle{display:none}#notification-list{cursor:pointer}.notification-timestamp{font-size:10px}.branch-location{font-size:10px;display:block;max-width:60px;margin-bottom:0;max-height:30px;overflow:hidden;text-overflow:ellipsis}.notification-timestamp-alarm{font-size:10px;float:right}#notification-list .alert{margin-bottom:5px}.user-name{font-size:10px}.loading{height:0;width:0;padding:10px;border:4px solid #ccc;border-right-color:#888;border-radius:22px;-webkit-animation:rotate 1s infinite linear;position:absolute;left:40%;top:5%}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}.material-icons{font-size:18px;padding-right:8px}.announcement-detail{font-size:12px}.image-container-preview{width:100px;height:100px;position:relative}.image-preview-btn-delete{position:absolute;left:116%;margin-left:-10px;margin-top:2px;cursor:pointer}#popimages-preview{padding-bottom:13px}.image-preview{width:100px;float:left;height:100px;margin-bottom:5px;margin-left:5px;border:2px solid #b06c1c;border-radius:10px}			
#img_viewer {
    display: none; justify-content: center; align-items: center; padding: 15px 20px!important; position: fixed; top: 0; width: 100vw; background: rgba(0,0,0,0.8); z-index: 101;
}
#img_viewer_close {
    position: absolute; 
    right: 20px; 
    top: 15px; 
    z-index: 1002; 
    cursor: pointer;
}
#img_viewer_close i {
    color: #9c9c9c; 
    font-size: 45px;
    font-weight: 100;
}
#img_viewer_close i:hover {
    color: #dbdbdb; 
}
#img_details {
    display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column;
}
#img_details img {
    width: auto; max-width: 100%; max-height: 505px;
}
#img_details #img_label {
    display: flex; justify-content: center; align-items: center; width: 100%;
}
#img_label #dLabel {
    padding-right: 10px; padding-left: 10px; padding-top: 40px; line-height: 24px; max-width: 950px; margin: 0 auto; text-align: center; color: #fff; font-size: 16px;
}

.search-focus {
    background: url('../img/main/search_icon.png') no-repeat left;
    border: 1px solid #ccc;
    outline: none;
    background-size: 15px;
    background-position: 10px;
    border-radius: 50px;
    width: 35px;
    height: 35px;
    padding: 10px 22px 10px 10px;
    transition: all .5s;
    cursor: pointer;
    z-index: 999
}
.sidebar-nav ul.navbar-nav>li.menu-section{
    color: #ffffffa7;
}
.header-brand{
    background: var(--theme-active);
}
.push-right .sidebar-nav ul.navbar-nav>li.active, .push-right .sidebar-nav ul.navbar-nav>li.nav-item:hover{
    background-color: var(--theme-active);
}
.sidebar-nav ul.navbar-nav>li.item-submenu.active>ul.submenu li a, .sidebar-nav ul.navbar-nav>li.item-submenu>ul.submenu li a, .sidebar-nav ul.navbar-nav>li.nav-item>a i,.sidebar-nav ul.navbar-nav li.item-submenu.active>a .nav-text, .sidebar-nav ul.navbar-nav li.item-submenu.active>a.nav-toggle i.icon, .sidebar-nav ul.navbar-nav li.item-submenu.active>ul.submenu>li.item-submenu.active>a.nav-toggle i.icon, .sidebar-nav ul.navbar-nav>li.item-submenu.active>ul.submenu>li.item-submenu.active>a>.nav-text, .sidebar-nav ul.navbar-nav>li.item-submenu>ul.submenu li.nav-item a.nav-link:hover, .sidebar-nav ul.navbar-nav>li.nav-item>a .nav-text, .sidebar-nav ul.navbar-nav>li.nav-item>a:hover i{
    color: #f6f6f6;
}
.theme {
    background: var(--theme) !important;
}
.nav-card {
    display: flex;
    background: var(--theme) !important;
    border-top: solid var(--theme) 1px !important;
}
.subheader .title h3{
    color: #000000 !important;
}
.push-right .sidebar-nav ul.navbar-nav>li.menu-section .menu-section-text{
    font-size: 14px;
    font-weight: 500;
}
.subj_container {
    width: 250px;
    height: 305px;
    background: #ffffff!important;
    border-radius: 10px;
    overflow: hidden;
    border: solid #eeeeee 1px!important;
    -webkit-box-shadow: 0 3px 15px 1px rgba(15,37,81,.05);
    box-shadow: 0 3px 13px 1px rgba(15, 37, 81, 0.18) !important;
    transition: all .3s ease-in-out;
}
.subj_container:hover{
    box-shadow: 0 3px 20px 2px rgb(15 37 81 / 35%) !important;
}
.subj_bottom div h5 {
    color: #000000 !important;
}
.subj_bottom div p {
    color: #000000 !important;
    font-weight: 500;
    font-size: 12px;
}
.subj_top{
    border-bottom: solid #cacaca 1px;
}
.sched {
    color: #8b8b8b;
    font-weight: 800;
}
.vcall-not {
    color: #c8c8c8!important;
}
.vcall-start {
    color: #0fb116!important;
}
.nav-content:hover {
    background: #081c42;
}
#navbarText h5 i{
    font-size: 25px;
    position: relative;
    top: 3px;
}
#navbarText h5{
    font-size: 14px !important;
    font-weight: 600;
    margin-top: 20px;
}

.push-right .sidebar-nav ul.navbar-nav>li.menu-section .menu-section-text{
    font-size: 12px !important;
    font-weight: 400 !important;
}
.hide{
    display: none;
}
.bmd-form-group .checkbox label, .bmd-form-group .radio label, .bmd-form-group label{
    font-size: 13px !important;
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { 
    height: 100% !important;
    overflow-y: visible !important;
}
body::-webkit-scrollbar, .modal::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .table-responsive-md::-webkit-scrollbar { 
    width: 10px;
    height: 10px; 
}
body::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track, .table-responsive-md::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px #192f5d; 
}
body::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .table-responsive-md::-webkit-scrollbar-thumb {
    background: #adaaaa; 
    border-radius: 5px;
}
body::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover, .table-responsive-md::-webkit-scrollbar-thumb:hover { 
    background: #adaaaa;
}
.card-danger{
    border-left: solid #de252d 5px;
    border-radius: 5px 0px 0px 5px;
}
.card-success{
    border-left: solid #4caf50 5px;
    border-radius: 5px 0px 0px 5px;
}
.card-warning{
    border-left: solid #ff9800 5px;
    border-radius: 5px 0px 0px 5px;
}
.card-primary{
    border-left: solid #2196F3 5px;
    border-radius: 5px 0px 0px 5px;
}
.form-group label{
    color: #8a8a8a;
    font-size: 13px;
}
.search-focus.has-value{
    width: 400px;
    padding-left: 30px;
    cursor: text;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}
.text-center .radio label{
    margin-left: 10px;
}
/* End of From header */



.brand-logo img{
    max-width: unset;
}
.sidebar-nav, .header-bg-fill .dropdown-header, .mini ul.navbar-nav>li.item-submenu ul.submenu{
    background: var(--theme);
    background-color: var(--theme);
}
.brand-tools .brand-icon span, .brand-tools .brand-icon span:after, .brand-tools .brand-icon span:before{
    background: #ffffff !important;
}
.modal-header{
    background: var(--theme) !important;
    background-color: var(--theme) !important;
}
.mini ul.navbar-nav>li.item-submenu ul.submenu:before{
    border-color: transparent var(--theme) transparent transparent;
}
.btn-theme {
    background: var(--theme) !important; 
    border-color: var(--theme) !important;
    color: #ffffff !important;
}
.btn-theme:hover {
    background: var(--theme-active)!important;
}
.header-bg-fill .dropdown-menu:before{
    border-bottom-color: var(--theme);
}

input, textarea, .card {
    font-size: 13px !important;
}
input::placeholder, textarea::placeholder {
    color: #bfbfbf !important;
    font-size: 13px !important;
}
.form-group-view p{
    font-weight: 500;
}
.accorhead-title:hover{
    cursor: pointer;
    background-color: #f0f0f0!important;
}
.accorhead-title{
    border-radius: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}

input[type="password"] {
    -webkit-text-security: disc;
}
.btn.loader:before{
    animation: spin 0.8s linear infinite
}
.btn-danger.loader:before, .btn-dark.loader:before, .btn-info.loader:before, .btn.loader:before, .btn-secondary.loader:before, .btn-success.loader:before, .btn-warning.loader:before{
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.btn.loader{
    text-align: center !important;
}
.btn.loader:before, .loader:before{
    border-top: 2px solid #ffffff;
}
.card-box.my-classes{
    min-height: 65vh;
}
.form-group a.pswd-toggle {
    position: absolute;
    top: 35px;
    right: 10px;
    color: #6c757d;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}
.modal .modal-white .modal-header{
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.modal .modal-white .modal-header .modal-title{
    color: var(--dark);
}
.fw-bold{
    font-weight: bold !important;
}
.fw-700{
    font-weight: 700 !important;
}
.fw-600{
    font-weight: 600 !important;
}
.fw-700{
    font-weight: 700 !important;
}