.content-wrapper>.content{padding:1rem; padding-top:2.1rem;}.col-lg-3.col-6.percent20{flex:0 0 20%!important;max-width:20%!important}@-webkit-keyframes slide{100%{top:15%}}@keyframes slide{100%{top:15%}}.slider-size{height:344px}.carousel-item img{width:100%;height:344px;margin:0 auto}@media(max-width:767px){.col-form-label{padding-top:0;padding-bottom:0}}.sub-menu-bg{color:#fff!important;background-color:#dc3545!important}label.custom-control-label.adjusttop:before,label.custom-control-label.adjusttop:after{top:8px!important}.required{color:#000}.information{font-size:13px;color:#666;padding:0;margin:0;width:100%;display:block}.text-danger-sm{font-size:14px;color:#dc3545;padding:0;margin:0}.btn-circle.btn-sm{width:30px;height:30px;padding:6px 0;border-radius:15px;text-align:center;line-height:1.2}.btn-circle.btn-md{width:50px;height:50px;padding:7px 10px;border-radius:25px;text-align:center;line-height:1.2}.btn-circle.btn-xl{width:70px;height:70px;padding:10px 16px;border-radius:35px;text-align:center;line-height:1.2}
.bg-app-primary {background-color: #036399 !important
}.bg-app-secondary{background-color:#f58733!important}ul.navbar-nav a.nav-link{color:#fff!important}.valid{border-color:#28a745!important}.valid+div.input-group-append>div.input-group-text{border-color:#28a745!important}.input-validation-error{border-color:#dc3545!important}.input-validation-error+div.input-group-append>div.input-group-text{border-color:#dc3545!important}.sidebar-dark-danger .nav-sidebar>.nav-item>.nav-link.active,.sidebar-light-danger .nav-sidebar>.nav-item>.nav-link.active{background-color:#f58733!important;color:#fff!important}.col-form-label{padding-bottom:0!important;padding-top:0!important}.search input[type="text"].form-control{height:calc(1.75rem + 2px)}.dropdown-item a{cursor:pointer}.dropdown-item a:hover,.dropdown-item a:focus{color:#16181b;text-decoration:none;background-color:#f8f9fa}.input-group>.custom-file:not(:last-child) .custom-file-label::after{display:none!important}.table td.fit,.table th.fit{white-space:nowrap;width:1%}.table td input,.table td select{width:100%;height:calc(2rem + 2px)}#clientConfirmationModal,#confirmationModal{z-index:1051!important}body.modal-open{overflow:auto}body.modal-open[style]{padding-right:0!important}.modal::-webkit-scrollbar{width:0!important}.loading-overlay{position:absolute;z-index:1052;width:100%;height:100%;font-weight:bolder;color:#007bff;background-color:#fff;opacity:.9;border-radius:5px;text-align:center;display:none}.loading-overlay .spinner-wrapper{position:relative;top:0;left:0}.loading-overlay .spinner-wrapper i,.loading-overlay .spinner-wrapper img{margin-top:25%}@media print{.verticaltext{transform:rotate(-90deg);transform-origin:right,top;-ms-transform:rotate(-90deg);-ms-transform-origin:right,top;-webkit-transform:rotate(-90deg);-webkit-transform-origin:right,top;position:absolute}}.blink_me{animation:blinker 1s linear infinite}@keyframes blinker{50%{opacity:0}}.form-control:focus{box-shadow:none!important}table.vertical-align>tbody>tr>td{vertical-align:middle}.custom-control-label::before{background-color:#fff}.custom-control-input:disabled~.custom-control-label::before{background-color:#dadada}.unselectable{-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.pagination{justify-content:flex-end!important}.brand-link{height:57px}.brand-link>img{height:80%}a.nav-link>img.imgProfileImage{width:40px;height:40px;border-radius:20px}.userImage{cursor:pointer;position:relative}.userImageEdit{position:absolute;top:0;right:0}.userPartialImage{top:15%!important;position:relative!important}.userListImage{width:30px;height:30px;border-radius:15px}.file-block{border-radius:10px;background-color:#90a3cb;background-color:rgba(144,163,203,.2);margin:5px;color:initial;display:inline-flex}.file-block>span.name{padding-right:10px;width:max-content;display:inline-flex}.file-delete{display:flex;width:24px;color:initial;background-color:#6eb4ff;font-size:large;justify-content:center;margin-right:3px;cursor:pointer}.file-delete:hover{background-color:#90a3cb;background-color:rgba(144,163,203,.2);border-radius:10px}.file-delete>span{transform:rotate(45deg)}
.login-logo > img {
    width: 100%;
    height: auto;
    max-width: 295px;
    padding: 2px;
}.register-logo>img{width:auto;height:40px}
:root, [data-bs-theme=light] {
    --primaryColor: #ffeeee;
    --secondaryColor: #ffffff;
    --thirdColor: #f5821f;
}

    .fixedDate {
        position: absolute;
        right: 0px;
        top: 0px;
        background: #036399;
        z-index: 1;
        padding: 5px;
        border-radius: 5px;
    }

    .pinsidebar {
        width: 40px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


/*    .btn {
        --bs-btn-padding-x: 0.75rem;
        --bs-btn-padding-y: 0.375rem;
        --bs-btn-font-family:;
        --bs-btn-font-size: 0.9rem;
        --bs-btn-font-weight: 400;
        --bs-btn-line-height: 1.5;
        --bs-btn-color: var(--bs-body-color);
        --bs-btn-bg: transparent;
        --bs-btn-border-width: var(--bs-border-width);
        --bs-btn-border-color: transparent;
        --bs-btn-border-radius: var(--bs-border-radius);
        --bs-btn-hover-border-color: transparent;
        --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(3, 7, 11, 0.075);
        --bs-btn-disabled-opacity: 0.65;
        --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
        display: inline-block;
        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
        font-family: var(--bs-btn-font-family);
        font-size: var(--bs-btn-font-size);
        font-weight: var(--bs-btn-font-weight);
        line-height: var(--bs-btn-line-height);
        color: var(--bs-btn-color);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
        border-radius: var(--bs-btn-border-radius);
        background-color: var(--bs-btn-bg);
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
    }

    @media(prefers-reduced-motion: reduce) {
        .btn {
            transition: none
        }
    }

    .btn:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color)
    }

    .btn-check + .btn:hover {
        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color)
    }

    .btn:focus-visible {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        outline: 0;
        box-shadow: var(--bs-btn-focus-box-shadow)
    }

    .btn-check:focus-visible + .btn {
        border-color: var(--bs-btn-hover-border-color);
        outline: 0;
        box-shadow: var(--bs-btn-focus-box-shadow)
    }

    .btn-check:checked + .btn,
    :not(.btn-check) + .btn:active,
    .btn:first-child:active,
    .btn.active,
    .btn.show {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color)
    }

        .btn-check:checked + .btn:focus-visible,
        :not(.btn-check) + .btn:active:focus-visible,
        .btn:first-child:active:focus-visible,
        .btn.active:focus-visible,
        .btn.show:focus-visible {
            box-shadow: var(--bs-btn-focus-box-shadow)
        }

    .btn-check:checked:focus-visible + .btn {
        box-shadow: var(--bs-btn-focus-box-shadow)
    }

    .btn:disabled,
    .btn.disabled,
    fieldset:disabled .btn {
        color: var(--bs-btn-disabled-color);
        pointer-events: none;
        background-color: var(--bs-btn-disabled-bg);
        border-color: var(--bs-btn-disabled-border-color);
        opacity: var(--bs-btn-disabled-opacity)
    }
    */



     
 

  
    .invoice-logo {
        max-width: 150px
    }

    .sidebar-menu > li:hover > a span {
        color: white;
    }

    .sidebar-menu > li:hover > a::after {
        color: white;
    }

    .page-wrapper.pinned .logo {
        object-fit: cover;
        height: 47px;
        object-position: left;
        transition: .3s;
    }

    a.auth-logo img {
        max-width: 302px;
    }

 
 
/*.form-group label {
    border-left: 3px solid;
    line-height: 1;
    padding-left: 6px;
    margin-bottom: 10px;
    display: inline-block;
}*/
    .pinsidebar {
        display: flex;
    }

    .pinsidebar {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid;
    }


.layout-navbar-fixed .wrapper .sidebar-light-danger .brand-link:not([class*=navbar]) {
     background-color: transparent; 
}
    /* ── Sidebar wrapper ── */
    .sidebar { 
        padding-bottom: 1rem;
        padding-right: 0px;
    }
    /* ── User panel ── */
    .user-panel {
        border-bottom: 1px solid #e0e0e0;
    }

        .user-panel .image img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-panel a {
            text-decoration: none;
            color: #000;
        }

            .user-panel a p {
                font-size: 13px;
                margin: 0;
                line-height: 1.4;
            }
    /* ── Nav list reset ── */
    .nav-sidebar {
        list-style-type: none;
        margin: 1rem 0 0 0;
        padding: 0 0 0 -3px;
    }
        /* ── Every top-level nav-item ── */
        .nav-sidebar > .nav-item {
            position: relative;
            margin: 3px 0;
            /* width: 231px; */
        }
            /* ── Top-level nav-link ── */
            .nav-sidebar > .nav-item > .nav-link {
                padding: 7px 17px 7px 7px;
                display: flex;
                align-items: center;
                text-decoration: none;
                color: #000;
                position: relative;
                z-index: 1;
                transition: background 0.2s;
                border-radius: 0;
            }
                /* ── Nav icon box ── */
                .nav-sidebar > .nav-item > .nav-link > .nav-icon {
                    width: 36px;
                    height: 36px;
                    background: var(--secondaryColor);
                    border-radius: 10px;
                    font-size: 1.1rem;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 0.5rem 0 0;
                }
                /* ── Nav text ── */
                .nav-sidebar > .nav-item > .nav-link > p {
                    margin: 0;
                    font-size: 13px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                    /* ── Treeview arrow (fa-angle-right inside p) ── */
                    .nav-sidebar > .nav-item > .nav-link > p > .right {
                        font-size: 0.6rem;
                        width: 16px;
                        height: 16px;
                        border-radius: 10px;
                        border: 1px solid #f5821f;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #000;
                        transition: transform 0.5s;
                        flex-shrink: 0;
                        top: 16px;
                    }
            /* ── Rotate arrow when open ── */
            .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right {
                transform: rotate(-90deg);
            }
            /* ── Hover state ── */
            .nav-sidebar > .nav-item:hover > .nav-link {
                background: #005d98;
                border-radius: 18px 30px 30px 18px;
                color: #fff;
                z-index: 2;
            }

                .nav-sidebar > .nav-item:hover > .nav-link > p > .right {
                    color: #fff;
                    border-color: #fff;
                }
            /* ── Active (open treeview parent) ── */
            .nav-sidebar > .nav-item.menu-open > .nav-link {
                background: #0076b5;
                border-radius: 18px 30px 30px 18px;
                border-left: 3px solid #2a7f62;
                color: #fff;
            }

                .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon {
                    background: #f5821f;
                    color: #fff;
                }

                .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right {
                    color: #fff;
                    border-color: #fff;
                }
            /* ── Current / active page ── */
            .nav-sidebar > .nav-item > .nav-link.active {
                background: #f58733;
                border-radius: 16px 0 0 16px;
                border-left: 3px solid #b8336a;
                color: #fff;
                box-shadow: none !important;
            }

                .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
                    background: linear-gradient(90deg, rgba(0,130,196,1) 0%, rgba(0,0,30,1) 100%);
                    color: #fff;
                }
            /* ── Decorative curved corners for active page ── */
            .nav-sidebar > .nav-item:has(> .nav-link.active)::before {
                content: "";
                position: absolute;
                right: 0;
                top: -50px;
                width: 50px;
                height: 50px;
                background: #ffeeee;
                border-radius: 50px;
                box-shadow: 35px 35px 0 10px #f58733;
                pointer-events: none;
            }

            .nav-sidebar > .nav-item:has(> .nav-link.active)::after {
                content: "";
                position: absolute;
                right: 0;
                top: 50px;
                width: 50px;
                height: 50px;
                background: #ffeeee;
                border-radius: 50px;
                box-shadow: 35px -35px 0 10px #f58733;
                pointer-events: none;
            }
            /* ── Disabled items ── */
            .nav-sidebar > .nav-item .disabled {
                cursor: not-allowed;
                opacity: 0.5;
            }
    /* ── Submenu (nav-treeview) ── */
    .nav-treeview {
        display: none;
        list-style: none;
        margin: 0;
        padding: 8px 0 8px 5px;
    }

    .nav-sidebar > .nav-item.menu-open > .nav-treeview {
        display: block;
    }
    /* ── Submenu items ── */
    .nav-treeview > .nav-item > .nav-link {
        padding: 10px 20px 10px 15px;
        margin: 0 0px 0 0px;
        border-left: 1px dashed #f5821f;
        display: flex;
        align-items: center;
        color: #000;
        text-decoration: none;
        white-space: nowrap;
        border-radius: 0 60px 60px 0;
        position: relative;
        z-index: 1;
        font-size: 13px;
        transition: background 0.2s;
    }

        .nav-treeview > .nav-item > .nav-link > p {
            margin: 0;
            font-size: 13px;
        }

        .nav-treeview > .nav-item > .nav-link .nav-icon {
            font-size: 1rem;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .nav-treeview > .nav-item > .nav-link:hover {
            background-color: #0076b5;
            color: #fff;
            box-shadow: inset 3px 0 4px rgba(0,0,0,0.05);
        }
        /* ── Submenu active ── */
        .nav-treeview > .nav-item > .nav-link.active,
        .nav-treeview > .nav-item > .nav-link.active-sub {
            background: rgba(0,0,0,0.1);
            box-shadow: inset 3px 0 4px rgba(0,0,0,0.05);
        }

            .nav-treeview > .nav-item > .nav-link.active:hover,
            .nav-treeview > .nav-item > .nav-link.active-sub:hover {
                background: rgba(0,0,0,0.1);
            }
    /* ── Nested treeview ── */
    .nav-treeview .nav-treeview {
        padding-left: 20px;
    }
    /* ── App container ── */
    .app-container {
        padding: 0;
    }

    .main-header {
        padding: 0 1.5rem;
        background: #bee3fb;
        -webkit-border-radius: 30px 0 0 0;
        -moz-border-radius: 30px 0 0 0;
        border-radius: 30px 0 0 0;
        border-left: 2px solid #f5821f;
    }

.user-panel .image{
    padding-left:0px;
}
.content-wrapper {
    position: relative;
    height: calc(100vh - 96px);
    border-left: 2px solid #f5821f !important;
}

body, .main-sidebar {
    background: var(--primaryColor);
}

.main-sidebar a.brand-link {
    border: none;
}
.main-sidebar.elevation-1 {
    box-shadow: none!important;
}
 

.sidebar .user-panel {
    background: url(../img/curve-line-2.svg) repeat-x;
    justify-content: left;
    gap: 7px;
    padding: 0 0rem 1rem 0rem;
    align-items: anchor-center;
    margin: 0px 1rem 1rem 0.5rem;
    background-position: bottom;
    border: none;
    z-index: 1;
}

#barChart{
/*    max-width:500px;*/
    width:100%;

}
[class*=sidebar-light-] .nav-sidebar > .nav-item.menu-open > .nav-link, [class*=sidebar-light-] .nav-sidebar > .nav-item:hover > .nav-link {
    background-color: #046499; 
}
.wrapper .content-wrapper{
    overflow-y:auto;
}

[class*=sidebar-light-] .nav-treeview > .nav-item > .nav-link.active, [class*=sidebar-light-] .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: rgb(3 99 153);
    color: #ffffff;
}
.nav-treeview > .nav-item > .nav-link.active:hover, .nav-treeview > .nav-item > .nav-link.active-sub:hover {
    background: rgb(1 142 206);
}


.nav-sidebar > .nav-item:hover > a > i {
    color: #f5821f;
}

.user-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fff3ee;
    border-radius: 20px;
    font-size: 13px;
    color: #ff6a00;
    font-weight: 500;
    justify-content: space-between;
    box-shadow: 0px 0px 0px 4px #d9d9d947;
}

    .user-mini span {
        color: #036399;
    }

.fixedDate {
    background: #fff3ee;
    border: 1px solid #ffd2c2;
}

    .fixedDate span {
        color: #036399;
        font-weight: 600;
    }

    .fixedDate i {
        color: #0363a4;
        font-size: 16px;
    }

body.sidebar-mini.layout-fixed.layout-navbar-fixed.unselectable {
}

.content-wrapper {
/*    background: radial-gradient( circle farthest-side at 0% 50%, #e9ecef 23.5%, rgba(255, 170, 0, 0) 0 ) 21px 30px, radial-gradient( circle farthest-side at 0% 50%, #f1f3f5 24%, rgba(240, 166, 17, 0) 0 ) 19px 30px, linear-gradient( #e9ecef 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #e9ecef 0 ) 0 0, linear-gradient( 150deg, #e9ecef 24%, #f1f3f5 0, #f1f3f5 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #f1f3f5 0, #f1f3f5 76%, #e9ecef 0 ) 0 0, linear-gradient( 30deg, #e9ecef 24%, #f1f3f5 0, #f1f3f5 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #f1f3f5 0, #f1f3f5 76%, #e9ecef 0 ) 0 0, linear-gradient( 90deg, #f1f3f5 2%, #e9ecef 0, #e9ecef 98%, #f1f3f5 0% ) 0 0 #e9ecef;*/
    background-size: 40px 60px;
}

/* ===== TREE CONTAINER ===== */
.tree {
    list-style: none;
    padding-left: 0;
    font-family: 'Segoe UI', sans-serif;
}
 
    .tree li {
        margin: 6px 0;
    }
     
        .tree li > i.indicator {
            margin-right: 8px;
            color: #ff6b00;
            cursor: pointer;
        }

    div .tree li {
        background: #ffffff;
        padding: 10px 14px;
        border-radius: 10px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        position: relative;
        margin-bottom:10px;
    }
     
        .tree li:hover {
            background: #fff7f2;
            transform: translateX(4px);
        } 
    .tree li {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    } 
        .tree li a {
            text-decoration: none;
        }

            .tree li a i {
                font-size: 16px;
                padding: 4px;
                border-radius: 6px;
                margin-left: 6px;
                transition: 0.3s;
                width: 30px;
                height: 30px;
                line-height: 1.3;
            } 
                .tree li a i.fa-edit {
                    background: #e3f2fd;
                    color: #2196f3;
                }

                .tree li a i.fa-plus {
                    background: #e8f5e9;
                    color: #4caf50;
                }

                .tree li a i.fa-trash {
                    background: #ffebee;
                    color: #f44336;
                } 
                .tree li a i:hover {
                    transform: scale(1.2);
                }
                 
    .tree li {
        margin: 0;
        padding: 6px 1em;
        line-height: 2em;
        color: #3c3c3c;
        font-weight: 700;
        position: relative;
        margin-bottom: 5px;
    } 
    .tree li ul li[style*="display: none"] {
        display: none !important;
    } 
    .tree li.open > i.indicator {
        transform: rotate(90deg);
        transition: 0.3s;
    } 
    .tree ul {
        transition: all 0.3s ease;
    } 
    .tree .badge {
        background: #ff6b00;
        color: #fff;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 8px;
    }



/* ===== Wrapper ===== */
.dataTables_wrapper {
    font-family: 'Segoe UI', sans-serif;
    padding: 10px;
}

    /* ===== Top Controls ===== */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 10px;
    }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 6px 10px;
            outline: none;
            transition: 0.3s;
        }

            .dataTables_wrapper .dataTables_filter input:focus {
                border-color: #4facfe;
                box-shadow: 0 0 6px rgba(79,172,254,0.3);
            }

/* ===== Table ===== */
table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

    /* Header */
    table.dataTable thead {
        background: linear-gradient(135deg,#4facfe,#00f2fe);
        color: #fff;
    }

        table.dataTable thead th {
            padding: 14px 16px;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: none;
        }

    /* Body */
    table.dataTable tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    /* Zebra */
    table.dataTable tbody tr:nth-child(even) {
        background: #f9fbfd;
    }

    /* Hover */
    table.dataTable tbody tr {
        transition: all 0.2s ease;
    }

        table.dataTable tbody tr:hover {
            background: #eef6ff;
        }

/* ===== Pagination ===== */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: none !important;
        background: #f1f3f6 !important;
        color: #333 !important;
        padding: 6px 12px;
        margin: 2px;
        border-radius: 8px;
        transition: 0.25s;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #4facfe !important;
            color: #fff !important;
        }

        /* Active page */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg,#4facfe,#00f2fe) !important;
            color: #fff !important;
        }

/* ===== Info Text ===== */
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
}

/* ===== Length Dropdown ===== */
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    outline: none;
}

/* ===== Processing Loader ===== */
.dataTables_wrapper .dataTables_processing {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ===== Responsive ===== */
@media(max-width:768px) {
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 10px;
        font-size: 12px;
    }
}


/* Action column container */
td.fit {
    white-space: nowrap;
}

    /* Base Action Button */
    td.fit a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-right: 6px;
        border-radius: 10px;
        background: #f4f6f9;
        color: #555;
        text-decoration: none;
        transition: all 0.25s ease;
        position: relative;
    }

        /* Icon */
        td.fit a i {
            font-size: 14px;
            transition: 0.2s;
        }

        /* Hover Effects */
        td.fit a:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.12);
        }

        /* Individual Colors */
        td.fit a[aria-label="Edit"] {
            background: #e8f1ff;
            color: #0d6efd;
        }

            td.fit a[aria-label="Edit"]:hover {
                background: #0d6efd;
                color: #fff;
            }

        td.fit a[aria-label="Role"] {
            background: #fff4e5;
            color: #ff9800;
        }

            td.fit a[aria-label="Role"]:hover {
                background: #ff9800;
                color: #fff;
            }

        td.fit a[title="Email"] {
            background: #e6f7ee;
            color: #28a745;
        }

            td.fit a[title="Email"]:hover {
                background: #28a745;
                color: #fff;
            }

        /* Optional: Privilege Login */
        td.fit a[aria-label="Privilege Login"] {
            background: #f3e8ff;
            color: #6f42c1;
        }

            td.fit a[aria-label="Privilege Login"]:hover {
                background: #6f42c1;
                color: #fff;
            }

        /* Tooltip improvement spacing fix */
        td.fit a[data-bs-toggle="tooltip"] {
            cursor: pointer;
        }

/* Mobile */
@media(max-width:768px) {
    td.fit a {
        width: 30px;
        height: 30px;
    }
}


/* Wrapper */
.content .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 10px;
    background: linear-gradient(135deg,#fff7f2,#fff7f2);
    border-radius: 10px;
    border: 1px solid rgba(255,122,24,0.08);
}

.row.main-grid, .main-grid .row {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    align-items: baseline;
}

/* Info Text */
.dt-info {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Pagination Wrapper */
.dt-paging {
    display: flex;
    justify-content: flex-end;
}

/* Pagination UL */
.pagination {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Page Buttons */
.page-item .page-link {
    border: none;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #f4f6f8;
    color: #495057;
    transition: all 0.25s ease;
}

/* Hover Effect */
.page-item:not(.active):not(.disabled) .page-link:hover {
    background: #ffe8d9;
    color: #ff7a18;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255,122,24,0.2);
}

/* Active Page */
.page-item.active .page-link {
    background: linear-gradient(135deg,#ff7a18,#ffb347);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255,122,24,0.4);
    transform: scale(1.05);
}

/* Disabled */
.page-item.disabled .page-link {
    background: #f1f3f5;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Icon Buttons (first/prev/next/last) */
.page-link.first,
.page-link.last,
.page-link.previous,
.page-link.next {
    font-size: 16px;
    padding: 6px 10px;
}

/* Subtle animation */
.page-item .page-link:active {
    transform: scale(0.95);
}

/* Responsive */
@media (max-width:768px) {
    .row {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .dt-paging {
        justify-content: center;
    }
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: inset 0 0 0 9999px rgb(255 238 238);
}


.dt-search {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 4px 8px;
    border-radius: 30px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    /* Label */
    .dt-search label {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #6c757d;
        margin-right: 6px;
    }

    /* Input */
    .dt-search input {
        border: none;
        outline: none;
        font-size: 13px;
        padding: 4px 6px;
        min-width: 140px;
    }

    /* Focus effect */
    .dt-search:focus-within {
        border-color: #ff7a18;
        box-shadow: 0 0 0 3px rgba(255,122,24,0.15);
    }

/* Button Group */
.dt-buttons {
    display: flex;
    gap: 0;
}

    /* Buttons Base */
    .dt-buttons .btn {
        border: none;
        border-radius: 10px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        margin: 0;
        justify-content: center;
        transition: all 0.25s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

/* Column Toggle Button */
.buttons-colvis {
    background: linear-gradient(135deg, #f64343, #bb0000);
    color: #fff;
}

/* Excel Button */
.buttons-excel {
    background: linear-gradient(135deg,#28a745,#5cd65c);
    color: #fff;
}

/* Hover */
.dt-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0.95;
}

/* Icon styling */
.dt-buttons i {
    font-size: 14px;
}

/* Responsive */
@media (max-width:768px) {
    .col-sm-6.text-right {
        justify-content: center;
        gap: 8px;
    }

    .dt-search input {
        min-width: 100px;
    }
}

.dt-buttons > button {
    margin-left: 0px !important;
}


/* Length Wrapper */
.dt-length {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 8px 10px;
    border-radius: 30px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: auto;
}

    /* Select Dropdown */
    .dt-length select {
        border: none;
        outline: none;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        color: #495057;
        cursor: pointer;
        padding: 2px 6px;
    }

    /* Label */
    .dt-length label {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #6c757d;
    }

    /* Focus effect */
    .dt-length:focus-within {
        border-color: #ff7a18;
        box-shadow: 0 0 0 3px rgba(255,122,24,0.15);
    }

    /* Custom dropdown arrow */
    .dt-length select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg fill='%236c757d' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 4px center;
        padding-right: 18px;
    }

    /* Hover */
    .dt-length:hover {
        border-color: #ffd2b3;
    }

/* Responsive */
@media (max-width:768px) {
    .dt-length {
        justify-content: center;
        width: 100%;
    }
}

/* Form Group */
.form-group {
    position: relative;
    margin-bottom: 18px;
}

    /* Label */
    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 6px;
        display: inline-block;
        transition: 0.2s ease;
    }

    /* Select Box */
    .form-group .form-select {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #495057;
        transition: all 0.25s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

/* Custom Arrow */
.form-group {
    position: relative;
}

    .form-group .form-select {
        background-image: url("data:image/svg+xml;utf8,<svg fill='%236c757d' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 35px;
    }

        /* Hover */
        .form-group .form-select:hover {
            border-color: #ffd2b3;
        }

        /* Focus */
        .form-group .form-select:focus {
            border-color: #ff7a18;
            box-shadow: 0 0 0 3px rgba(255,122,24,0.15);
            outline: none;
        }

    /* Floating effect (optional modern touch) */
    .form-group:focus-within label {
        color: #ff7a18;
    }

    /* Optional: subtle background on hover */
    .form-group:hover {
        transform: translateY(-1px);
        transition: 0.2s;
    }

.tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .tree > li {
        display: inline-block;
        vertical-align: top;
        margin: 6px 1%;
    }

    /* Card style */
    .tree li {
        background: #fff;
        border-radius: 10px;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        transition: 0.2s ease;
        position: relative;
    }

        /* Hover effect */
        .tree li:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }

        /* Nested UL */
        .tree li ul {
            margin-top: 8px;
            padding-left: 15px; 
            padding-right: 15px; 
        }

            /* Child items spacing */
            .tree li ul li {
                margin-top: 6px;
            }

    /* Title text */
    .tree li {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
    }

        /* Action icons */
        .tree li a {
            color: #6b7280;
            margin-left: 6px;
            transition: 0.2s;
        }

            .tree li a:hover {
                color: #f97316;
            }

    /* Indicator icon (expand/collapse) */
    .tree .indicator {
        margin-right: 6px;
        color: #f97316;
        cursor: pointer;
    }

    /* Align content properly */
    .tree li {
        display: block;
    }

        /* Flex inside item (text + actions) */
        .tree li > span,
        .tree li > a,
        .tree li > i {
            vertical-align: middle;
        }

        .tree li > ul {
            width: 100%;
        }

        /* Top row alignment */
        .tree li > .indicator + * {
            display: inline;
        }

/* Responsive */
@media (max-width: 768px) {
    .tree > li {
        width: 100%;
        margin: 6px 0;
    }
}

.tree li > a {
}

div .tree ul li:before { 
    top: 1.8em ;
}

.tree li > i.indicator {
    margin-right: 8px;
    color: #ff6b00;
    cursor: pointer;
    float: left;
    position: absolute;
    left: -12px;
    top: 16px;
    font-size: 19px;
}



/* Modal container */
.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* Header */
.modal-header {
    background: linear-gradient(135deg, #04649a, #f58733);
    color: #fff;
    border-bottom: none;
    padding: 16px 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.modal-header .btn-close,
.modal-header .close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Body */
.modal-body {
    background: #ffeeee;
    padding: 20px;
}

    /* Labels */
    .modal-body label {
        font-size: 12.5px;
        font-weight: 600;
        color: #04649a;
        margin-bottom: 5px;
    }

    /* Inputs */
    .modal-body .form-control {
        border-radius: 10px;
        border: 1px solid #ffd6d6;
        padding: 10px 12px;
        font-size: 14px;
        background: #fff;
        transition: all 0.2s ease;
    }

        .modal-body .form-control:focus {
            border-color: #f58733;
            box-shadow: 0 0 0 3px rgba(245,135,51,0.2);
        }

    /* Icon preview */
    .modal-body i {
        color: #f58733;
    }

    /* Switch / checkbox */
    .modal-body input[type="checkbox"]:checked {
        accent-color: #f58733;
    }

/* Footer */
.modal-footer {
    border-top: none;
    padding: 16px 20px;
    background: #ffeeee;
    border-top: 2px dashed gainsboro;
    justify-content: center;
}

    /* Primary button */
    .modal-footer .btn-primary {
        background: linear-gradient(135deg, #f58733, #ff9f5a);
        border: none;
        border-radius: 10px;
        padding: 8px 18px;
        font-weight: 500;
        transition: 0.2s;
    }

        .modal-footer .btn-primary:hover {
            background: linear-gradient(135deg, #e67620, #f58733);
        }

    /* Secondary button */
    .modal-footer .btn-default,
    .modal-footer .btn-secondary {
        background: #04649a10;
        color: #04649a;
        border: none;
        border-radius: 10px;
        padding: 8px 18px;
    }

        .modal-footer .btn-default:hover,
        .modal-footer .btn-secondary:hover {
            background: #04649a20;
        }

/* Validation */
.modal-body .text-danger {
    font-size: 11.5px;
}

/* Smooth animation */
.modal.fade .modal-dialog {
    transform: translateY(25px) scale(0.98);
    transition: all 0.25s ease;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}




/* container spacing */
td.text-center:has(i[data-bs-title="Edit"]) {
    white-space: nowrap;
}

td.text-center a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 3px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #000000;
    transition: all 0.2s ease;
    text-decoration: none;
}

    /* EDIT (has data-id + modal target) */
    td.text-center a[data-id][data-bs-target] {
        background: #04649a15;
    }

        td.text-center a[data-id][data-bs-target]:hover {
            background: #04649a;
            color: #fff;
        }

    /* DELETE (disabled via pointer-events) */
    td.text-center a[style*="pointer-events: none"] {
        pointer-events: none;
        opacity: 0.4;
        background: #e5e7eb;
        cursor: not-allowed;
    }

    /* DELETE hover (if enabled in future) */
    td.text-center a:not([data-id]):not([data-pid]):hover {
        background: #f58733;
        color: #fff;
    }

/* icon */
td.text-center i {
    font-size: 13px;
}
    /* Base icon styling */
    td.text-center i.fa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 28px;
        border-radius: 50%;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    /* SUCCESS (check icon) */
    td.text-center i.fa-check-circle {
        background: #22c55e20;
        color: #22c55e;
    }

        /* Hover effect */
        td.text-center i.fa-check-circle:hover {
            background: #22c55e;
            color: #fff !important;
            transform: scale(1.1);
        }





    /* ===== STATUS ICONS ===== */

    /* Info */
    td.text-center i.fa-info-circle {
        background: #04649a20;
        color: #04649a;
    }

        td.text-center i.fa-info-circle:hover {
            background: #04649a;
            color: #fff !important;
            transform: scale(1.1);
        }

    /* Warning */
    td.text-center i.fa-exclamation-circle {
        background: #facc1520;
        color: #facc15;
    }

        td.text-center i.fa-exclamation-circle:hover {
            background: #facc15;
            color: #fff !important;
            transform: scale(1.1);
        }

    /* Error / Danger */
    td.text-center i.fa-times-circle {
        background: #ef444420;
        color: #ef4444;
    }

        td.text-center i.fa-times-circle:hover {
            background: #ef4444;
            color: #fff !important;
            transform: scale(1.1);
        }

    /* Pending / Clock */
    td.text-center i.fa-clock {
        background: #f5873320;
        color: #f58733;
    }

        td.text-center i.fa-clock:hover {
            background: #f58733;
            color: #fff !important;
            transform: scale(1.1);
        }

    /* Neutral / Inactive */
    td.text-center i.fa-minus-circle {
        background: #9ca3af20;
        color: #9ca3af;
    }

        td.text-center i.fa-minus-circle:hover {
            background: #9ca3af;
            color: #fff !important;
            transform: scale(1.1);
        }


/* ===== EXTRA ACTION ICONS ===== */

/* View */
td.text-center a i.fa-eye:hover {
    background: #04649a;
    color: #fff;
}

/* Download */
td.text-center a i.fa-download:hover {
    background: #22c55e;
    color: #fff;
}

/* Copy */
td.text-center a i.fa-copy:hover {
    background: #6366f1;
    color: #fff;
}

/* Settings */
td.text-center a i.fa-cog:hover {
    background: #6b7280;
    color: #fff;
}


/* ===== OPTIONAL MICRO INTERACTIONS ===== */

/* smooth icon zoom */
td.text-center i.fa:hover {
    transform: scale(1.1);
}

/* subtle click feedback */
td.text-center a:active {
    transform: scale(0.95);
}

.sidebar{
    padding-bottom:50px;
}


/* Header container */
.card-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #134f79, #0797d7);
    border-radius: 10px 10px 0 0;
    color:white;
}
.btn-primary {
    color: #fff;
    background-color: #f58733;
    border-color: #fe6002;
    box-shadow: none;
}

    /* Title */
    .card-header .card-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
    }

    /* Right actions container fix */
    .card-header a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: 6px;
        border-radius: 8px;
        background: rgb(255 255 255);
        color: #fff !important;
        transition: all 0.2s ease;
        text-decoration: none;
    }

        /* Hover effects */
        .card-header a:hover {
            background: #fff;
            color: #04649a !important;
            transform: translateY(-1px);
        }

    /* Icons */
    .card-header i {
        font-size: 14px;
    }


    .card-header > a:last-of-type {
        margin-right: 0;
    }



    /* FORM ALIGN */
    .card-header form {
        margin: 0;
    }

        /* INPUT GROUP */
        .card-header form .input-group {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transition: 0.2s ease;
        }

            /* HOVER EFFECT */
            .card-header form .input-group:hover {
                box-shadow: 0 6px 18px rgba(0,0,0,0.12);
            }

        /* REMOVE DEFAULT BORDERS */
        .card-header form .btn,
        .card-header form .custom-file-label {
            border: none !important;
        }

        /* BUTTONS BASE */
        .card-header form .btn {
            width: 36px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 13px;
            transition: 0.2s ease;
        }

        /* DOWNLOAD BUTTON */
        .card-header form .input-group-prepend .btn {
            background: #04649a;
            color: #fff;
        }

            .card-header form .input-group-prepend .btn:hover {
                background: #03527c;
            }

        /* UPLOAD BUTTON */
        .card-header form .input-group-append .btn {
            background: #f58733;
            color: #fff;
        }

            .card-header form .input-group-append .btn:hover {
                background: #e67620;
            }

        /* FILE INPUT */
        .card-header form .custom-file {
            display: flex;
            align-items: center;
        }

        .card-header form .custom-file-input {
            cursor: pointer;
        }

        /* FILE LABEL */
        .card-header form .custom-file-label {
            display: flex;
            align-items: center;
            padding: 7px 10px;
            font-size: 13px;
            color: #6b7280;
            height: auto;
            background: #fff;
        }

            /* OPTIONAL BROWSE TEXT */
            .card-header form .custom-file-label::after {
                background: #f3f4f6;
                border-left: 1px solid #e5e7eb;
                color: #374151;
            }

        /* ICONS */
        .card-header form i {
            font-size: 13px;
        } 
.blob {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 650px;
    height: 650px;
    border-radius: 100%;
    background-image: linear-gradient(#ffb5b5 10%, #ff6e00);
    filter: blur(250px);
    transition: all 450ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    z-index: -1;
} 
.custom-switch .custom-control-label::before {
    background: rgba(0,123,255,0.25);
    border: none;
    border-radius: 50px;
    transition: all .25s ease;
} 
.custom-switch .custom-control-label::after {
    background: #ffffff;
    border: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: all .25s cubic-bezier(.4,0,.2,1);
} 
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg,#f58733,#ff6b00); 
} 
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    box-shadow: 0 3px 12px rgba(255,77,0,0.6);
} 
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(255,77,0,0.25);
} 
.custom-switch .custom-control-label:hover::before {
    box-shadow: 0 0 0 5px rgba(255,77,0,0.2);
} 
.daterangepicker {
    border: none;
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
} 
    .daterangepicker .calendar-table {
        background: transparent;
        border: none
    } 
    .daterangepicker td, .daterangepicker th {
        border-radius: 8px;
        transition: .2s ease
    } 
        .daterangepicker td.available:hover {
            background: rgba(255,109,0,0.15);
            color: #ff6d00
        } 
        .daterangepicker td.off {
            opacity: .4
        } 
        .daterangepicker td.active, .daterangepicker td.active:hover {
            background: linear-gradient(135deg,#ff6d00,#ff9442);
            color: #fff;
            box-shadow: 0 4px 12px rgba(255,109,0,0.4);
        } 
        .daterangepicker td.in-range {
            background: rgba(255,109,0,0.12);
            color: #ff6d00
        } 
    .daterangepicker .month {
        font-weight: 600;
        color: #333
    } 
    .daterangepicker th.available:hover {
        background: rgba(255,109,0,0.15);
        color: #ff6d00
    } 
    .daterangepicker .drp-buttons {
        border-top: none;
        padding-top: 10px
    } 
    .daterangepicker .applyBtn {
        background: linear-gradient(135deg,#ff6d00,#ff9442);
        border: none;
        border-radius: 8px;
        padding: 5px 14px;
    } 
    .daterangepicker .cancelBtn {
        border-radius: 8px;
        padding: 5px 14px
    } 
    .daterangepicker .drp-selected {
        font-weight: 500;
        color: #555
    }
.card-header b {
    color: white;
} 
.content-wrapper > .content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    -webkit-border-radius: 0 0 30px 30px;
    -moz-border-radius: 0 0 30px 30px;
    border-radius: 0 0 30px 30px;
    min-height: 160px;
    background-color: #0795d5;
    z-index: -1;
}





.main-grid {
    padding: 10px;
}

.dashboard-card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: relative;
    transition: 0.3s;
}

    .dashboard-card:hover {
        transform: translateY(-4px);
    }

.icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.value {
    font-weight: 700;
    margin: 0;
}

.growth {
    font-size: 12px;
}

.badge-top {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.8;
}

/* Report Cards */
.report-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: 0.3s;
    background: #fff;
}
.main-grid {
    align-content: stretch;
}

    .report-card:hover {
        box-shadow: 0 5px 18px rgba(0,0,0,0.06);
        transform: translateY(-3px);
    }

    .report-card .icon-box {
        width: 45px;
        height: 45px;
        color: #fff;
    }

    .report-card h6 {
        margin: 0;
        font-size: 14px;
    }

    .report-card small {
        display: block;
        font-size: 11px;
        color: #999;
    }

    .report-card h5 {
        margin: 5px 0;
        font-weight: 700;
    }



/* WIDGET CONTAINER */
.timeline-widget {
    height: 455px;
    overflow: hidden;
    position: relative;
    padding-left: 15px;
}
.fa-plus-square { 
    color: #f58733;
}
.timeline-track {
    position: relative;
}

/* VERTICAL LINE */
.timeline-widget::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    width: 3px;
    height: 100%;
    background: #e5e7eb;
    border-radius: 10px;
}

/* ITEM */
.tw-item {
    position: relative;
    margin-bottom: 22px;
}

/* DOT */
.tw-dot {
    position: absolute;
    left: -2px;
    top: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #999;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
}

/* CARD */
.tw-card {
    margin-left: 35px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #f8f9fa;
    transition: all 0.25s ease;
}

    /* HOVER */
    .tw-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

    /* TEXT */
    .tw-card h6 {
        margin: 0;
        font-weight: 600;
        font-size: 15px;
    }

    .tw-card p {
        margin: 5px 0 0;
        font-size: 13px;
        color: #6c757d;
    }

/* COLORS (MATCH IMAGE STYLE) */
.success .tw-card {
    background: #e6f4ea;
    color: #1e7e34;
}

.success .tw-dot {
    background: #28a745;
}

.danger .tw-card {
    background: #fbe9ea;
    color: #842029;
}

.danger .tw-dot {
    background: #dc3545;
}

.primary .tw-card {
    background: #e7f1ff;
    color: #0d47a1;
}

.primary .tw-dot {
    background: #0d6efd;
}

.purple .tw-card {
    background: #f3e8ff;
    color: #6f42c1;
}

.purple .tw-dot {
    background: #6f42c1;
}




.custom-box {
    border: 2px solid #036399;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.box-title {
    font-weight: 600;
    color: #036399;
    margin-bottom: 10px;
}

/* NOTICE */
.notice-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .notice-ul li {
        padding: 8px 0;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

.tag-new {
    background: #f58733;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    text-transform: lowercase;
}

/* EVENTS */
.event-item {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.event-date {
    width: 90px;
    text-align: center;
}

.date-top {
    background: #fff;
    border: 2px solid #036399;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    font-weight: 600;
}

    .date-top span {
        font-size: 12px;
    }

.date-bottom {
    background: linear-gradient(135deg, #134f79, #0797d7);
    color: #fff;
    padding: 6px;
    font-size: 12px;
    border-radius: 0 0 10px 10px;
}

.event-content {
    padding: 10px;
    flex: 1;
}

    .event-content h6 {
        margin: 0;
        font-weight: 600;
    }

.meta {
    font-size: 13px;
    color: #036399;
}

    .meta span {
        margin-right: 10px;
    }

.event-content p {
    margin: 5px 0 0;
    font-size: 13px;
}

/* AUTO SCROLL */
.auto-scroll {
    height: 250px;
    overflow-y:auto;
}

ul.notice-ul li + li {
    border-top: 1px dashed #bcbcbc;
}


/* MAIN BACKGROUND */
.login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00a3ff, #000000);
    position: relative;
    overflow: hidden;
}

    /* BACKGROUND IMAGE */
    .login-bg::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../img/mumbg.jpg') center/cover no-repeat;
        opacity: .25;
        z-index: 0; 
    }

    /* 🔥 RIGHT OVAL SHAPE */
.login-bg::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 460px;
    height: 460px;
    background: linear-gradient(135deg, #00000045, #ff6e008a);
   
    clip-path: polygon(100% 0, 100% 13%, 100% 35%, 100% 70%, 101% 100%, 68% 100%, 0 100%, 22% 93%, 93% 93%, 94% 13%);
    z-index: 1;
    box-shadow: inset -20px -20px 60px rgba(0, 0, 0, .2), 0 20px 60px rgba(0, 0, 0, .3);
}

    /* 🔥 BOTTOM STRIP (IMPORTANT FIX) */
    .login-bg .bottom-strip {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, #f58733 22%, #036399 22%);
        z-index: 2;
    }

/* CENTER */
.auth-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
    position: relative;
}

/* CARD */
.login-bg .card {
    border-radius: 10px 7px 108px 10px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    border: none;
    overflow: hidden;
    position: relative;
    animation: fadeUp .8s ease;
    background: #ffffff14;
    backdrop-filter: blur(7px);
}

/* TOP ORANGE STRIP */
    .login-bg .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -24px;
        height: 7px;
        width: 75%;
        background: #f58733;
        /* border-top-right-radius: 30px; */
        z-index: 1;
        transform: skewX(-42deg);
    }

.login-bg .bottom-strip::before {
    position: absolute;
    left: -23px;
    background: #f58733;
    content: '';
    height: 17px;
    width: 34%;
    transform: skewX(-40deg);
}
/* LOGO */
.login-logo img { /* width:120px; */
    margin-top: 16px;
}

/* HEADER */
.login-bg .card-header {
    background: none;
    border: none;
    font-weight: 300;
    font-size: 17px;
    color: #fff;
    padding: 0;
    border-bottom: 1px solid;
    width: auto;
    margin: auto;
}
  .login-bg .information, .login-bg  p{
    color: white;
}
/* INPUT */
.form-control {
    border-radius: 8px;
    padding: 10px;
    transition: .3s;
}

    .form-control:focus {
        border-color: #0797d7;
        box-shadow: 0 0 10px rgba(7,151,215,.3);
    }

/* LINKS */


/* ANIMATION */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media(max-width:768px) {
    .login-bg::after {
        width: 260px;
        height: 260px;
        right: -80px;
        bottom: -80px;
    }

    .login-bg .card {
        border-radius: 0 0 90px 0 !important;
    }
}

.login-card-body {
    padding-bottom: 40px;
    padding-left: 7%;
    padding-right: 15%;
}

    .login-card-body a {
        color: #ffffff;
        line-height: 1;
        text-decoration: underline;
    }
    .login-card-body .form-group label {
        color: #ffffff;
        border-left: 2px solid #ffffff;
        line-height: 1;
        padding-left: 7px;
    }

/* Smooth + light scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 10px;
}

/* Thumb */
::-webkit-scrollbar-thumb {
    background: #036399;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #f58733;
    }

    /* Active (when clicking) */
    ::-webkit-scrollbar-thumb:active {
        background: #036399;
    }