.theme1-colors,
:root {
    --home-color-primary: #006dd8;
    --home-color-primary-soft: #47b8ff;
    --home-color-primary-light: #dff4ff;
    --home-color-primary-muted: #eef8ff;
    --home-color-primary-border: #bfe0f6;
    --home-color-primary-text: #173b5f;

    --home-color-accent: #b89724;
    --home-color-accent-soft: #efe27e;
    --home-color-accent-light: #fcf1c1;
    --home-color-accent-muted: #fff4c5;
    --home-color-accent-border: #ead98c;
    --home-color-accent-text: #352a0a;
    --home-color-accent-text-soft: #6f560e;

    --home-color-surface: #feffa7;
    --home-color-surface-soft: rgba(221, 241, 255, 0.84);
    --home-color-text: #1f2937;
    --home-color-text-muted: #6f6a58;
    --home-radius: 8px;
    --home-shadow-accent: 0 10px 24px rgba(184, 151, 36, .14);
    --home-shadow-primary: 0 10px 24px rgba(0, 109, 216, .11);
    --home-shadow-menu: 0 9px 18px rgba(31, 48, 66, .09);
    --home-shadow-menu-hover: 0 14px 28px rgba(31, 48, 66, .14);

    --cbt-page-primary: #006dd8;
    --cbt-page-primary-soft: #47b8ff;
    --cbt-page-secondary: #389fdf;
    --cbt-page-secondary-soft: #389fdf;
    --cbt-page-accent: var(--home-color-accent-soft);
    --cbt-page-text: #172033;
    --cbt-page-text-muted: #475569;
    --cbt-page-surface: #ffffff;
    --cbt-page-surface-soft: #f8fafc;
    --cbt-page-helper-bg: #eef8ff;
    --cbt-page-helper-border: #bfe0f6;
    --cbt-page-helper-text: #173b5f;
    --cbt-page-border: #e7edf5;
    --cbt-page-input-border: #d8e2ee;
    --cbt-page-radius: var(--home-radius);
    --cbt-page-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    --cbt-page-hero-shadow: 0 16px 34px rgba(0, 109, 216, .18);
    --cbt-page-warning-bg: #fff8d8;
    --cbt-page-warning-border: #ead98c;
    --cbt-page-warning-text: #6f560e;

    --akademik-page-primary: #389fdf;
    --akademik-page-primary-soft: #389fdf;
    --akademik-page-secondary: #006dd8;
    --akademik-page-secondary-soft: #47b8ff;
    --akademik-page-accent: var(--home-color-accent-soft);
    --akademik-page-text: #172033;
    --akademik-page-text-muted: #475569;
    --akademik-page-muted: #64748b;
    --akademik-page-surface: #ffffff;
    --akademik-page-surface-soft: #f8fafc;
    --akademik-page-filter-bg: #f4fbfb;
    --akademik-page-border: #e7edf5;
    --akademik-page-input-border: #d8e2ee;
    --akademik-page-radius: var(--home-radius);
    --akademik-page-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    --akademik-page-hero-shadow: 0 16px 34px rgba(47, 157, 106, .18);
    --akademik-page-link-shadow: 0 10px 20px rgba(47, 157, 106, .20);

    --tm-page-primary: #006dd8;
    --tm-page-primary-soft: #47b8ff;
    --tm-page-secondary: #389fdf;
    --tm-page-accent: var(--home-color-accent-soft);
    --tm-page-text: #172033;
    --tm-page-text-muted: #475569;
    --tm-page-muted: #64748b;
    --tm-page-surface: #ffffff;
    --tm-page-surface-soft: #f8fafc;
    --tm-page-filter-bg: #f4fbfb;
    --tm-page-border: #e7edf5;
    --tm-page-input-border: #d8e2ee;
    --tm-page-radius: var(--home-radius);
    --tm-page-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    --tm-page-hero-shadow: 0 16px 34px rgba(0, 109, 216, .18);
    --tm-page-warning-bg: #fff8d8;
    --tm-page-warning-border: #ead98c;
    --tm-page-warning-text: #6f560e;

    --ll-page-primary: #006dd8;
    --ll-page-primary-soft: #47b8ff;
    --ll-page-secondary: #389fdf;
    --ll-page-accent: var(--home-color-accent-soft);
    --ll-page-text: #172033;
    --ll-page-text-muted: #475569;
    --ll-page-muted: #64748b;
    --ll-page-surface: #ffffff;
    --ll-page-surface-soft: #f8fafc;
    --ll-page-filter-bg: #f4fbfb;
    --ll-page-border: #e7edf5;
    --ll-page-input-border: #d8e2ee;
    --ll-page-radius: var(--home-radius);
    --ll-page-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    --ll-page-hero-shadow: 0 16px 34px rgba(0, 109, 216, .18);
    --ll-page-warning-bg: #fff8d8;
    --ll-page-warning-border: #ead98c;
    --ll-page-warning-text: #6f560e;

    --pg-page-primary: #006dd8;
    --pg-page-primary-soft: #47b8ff;
    --pg-page-secondary: #389fdf;
    --pg-page-accent: var(--home-color-accent-soft);
    --pg-page-text: #172033;
    --pg-page-text-muted: #475569;
    --pg-page-body-text: #334155;
    --pg-page-muted: #64748b;
    --pg-page-surface: #ffffff;
    --pg-page-surface-soft: #f8fafc;
    --pg-page-filter-bg: #f4fbfb;
    --pg-page-detail-muted-bg: #f1f5f9;
    --pg-page-border: #e7edf5;
    --pg-page-input-border: #d8e2ee;
    --pg-page-radius: var(--home-radius);
    --pg-page-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    --pg-page-hero-shadow: 0 16px 34px rgba(0, 109, 216, .18);
    --pg-page-warning-bg: #fff8d8;
    --pg-page-warning-border: #ead98c;
    --pg-page-warning-text: #6f560e;
}

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

.mobile-footer {
    display: none;
}

/* TAMPIL HANYA DI HP */
@media (max-width: 768px) {

    .mobile-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .footer-wrapper {
        height: 60px;
        background: linear-gradient(to top, var(--home-color-primary-soft, #47b8ff), var(--home-color-primary, #006dd8));
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }

    .home-btn {
        position: absolute;
        top: -12px;
        width: 64px;
        height: 64px;
        background: var(--home-color-accent-soft, #efe27e);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #000;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transition: 0.2s;
    }

    .home-btn:hover {
        transform: scale(1.1);
    }

    /* Biar konten tidak ketutup footer */
    body {
        padding-bottom: 30px;
    }
}

.cbt-page {
    color: var(--cbt-page-text, #172033) !important;
}

.keu-hero {
    background: linear-gradient(135deg, var(--cbt-page-secondary, #2f9d6a) 0%, var(--cbt-page-primary, #006dd8) 100%) !important;

}

.cbt-page .cbt-hero {
    background: linear-gradient(135deg, var(--cbt-page-secondary, #2f9d6a) 0%, var(--cbt-page-primary, #006dd8) 100%) !important;
    border-radius: var(--cbt-page-radius, 8px) !important;
    color: var(--cbt-page-surface, #ffffff) !important;
    box-shadow: var(--cbt-page-hero-shadow, 0 16px 34px rgba(0, 109, 216, .18)) !important;
}

.cbt-page .cbt-hero h4,
.cbt-page .cbt-hero small,
.cbt-page .cbt-hero div {
    color: var(--cbt-page-surface, #ffffff) !important;
}

.cbt-page .cbt-card,
.cbt-page .cbt-question-card,
.cbt-page .modal-content {
    background: var(--cbt-page-surface, #ffffff) !important;
    border-color: var(--cbt-page-border, #e7edf5) !important;
    border-radius: var(--cbt-page-radius, 8px) !important;
    box-shadow: var(--cbt-page-shadow, 0 10px 28px rgba(15, 23, 42, .06)) !important;
}

.cbt-page .cbt-filter label,
.cbt-page .cbt-form-section label,
.cbt-page .cbt-form-section span,
.cbt-page label,
.cbt-page .col-form-label,
.cbt-page .cbt-score-row label,
.cbt-page .cbt-info-item span {
    color: var(--cbt-page-text-muted, #475569) !important;
}

.cbt-page .cbt-panel-title,
.cbt-page .cbt-form-section-title,
.cbt-page .cbt-info-item strong,
.cbt-page .cbt-question-head h5,
.cbt-page .FormOpenDTL .DataMaster {
    color: var(--cbt-page-text, #172033) !important;
}

.cbt-page .cbt-helper,
.cbt-page .alert-info {
    background: var(--cbt-page-helper-bg, #eef8ff) !important;
    border-color: var(--cbt-page-helper-border, #bfe0f6) !important;
    color: var(--cbt-page-helper-text, #173b5f) !important;
    border-radius: var(--cbt-page-radius, 8px) !important;
}

.cbt-page .cbt-form-section,
.cbt-page .cbt-info-item,
.cbt-page .cbt-question-head,
.cbt-page .cbt-question-text,
.cbt-page .cbt-answer-box,
.cbt-page .form-control,
.cbt-page .modal-footer {
    border-color: var(--cbt-page-border, #e7edf5) !important;
    border-radius: var(--cbt-page-radius, 8px) !important;
}

.cbt-page .cbt-info-item,
.cbt-page .cbt-question-head,
.cbt-page .cbt-answer-box,
.cbt-page .FormOpenDTL .modal-body,
.cbt-page table thead th {
    background: var(--cbt-page-surface-soft, #f8fafc) !important;
}

.cbt-page .form-control {
    border-color: var(--cbt-page-input-border, #d8e2ee) !important;
}

.cbt-page table thead th {
    color: var(--cbt-page-text, #172033) !important;
    font-weight: 800;
}

.cbt-page .cbt-stat {
    border-left-color: var(--cbt-page-secondary, #2f9d6a) !important;
}

.cbt-page table>tbody>tr.odd.selected,
.cbt-page table>tbody>tr.even.selected {
    color: var(--cbt-page-surface, #ffffff) !important;
    background-color: var(--cbt-page-secondary, #2f9d6a) !important;
}

.cbt-page .btn-primary,
.cbt-page .modal-header.bg-primary {
    background: var(--cbt-page-primary, #006dd8) !important;
    border-color: var(--cbt-page-primary, #006dd8) !important;
}

.cbt-page .btn-outline-light:hover {
    color: var(--cbt-page-primary, #006dd8) !important;
}

.cbt-page .cbt-empty {
    background: var(--cbt-page-warning-bg, #fff8d8) !important;
    border-color: var(--cbt-page-warning-border, #ead98c) !important;
    color: var(--cbt-page-warning-text, #6f560e) !important;
    border-radius: var(--cbt-page-radius, 8px) !important;
}

.ak-page,
.jadwal-shell {
    color: var(--akademik-page-text, #172033) !important;
}

.ak-page .ak-hero,
.jadwal-shell .jadwal-hero,
.jadwal-shell .jadwal-student-day-head {
    background: linear-gradient(135deg, var(--akademik-page-primary, #2f9d6a) 0%, var(--akademik-page-secondary, #006dd8) 100%) !important;
    border-radius: var(--akademik-page-radius, 8px) !important;
    color: var(--akademik-page-surface, #ffffff) !important;
    box-shadow: var(--akademik-page-hero-shadow, 0 16px 34px rgba(47, 157, 106, .18)) !important;
}

.ak-page .ak-hero h4,
.ak-page .ak-hero .cabang-top,
.jadwal-shell .jadwal-hero h4,
.jadwal-shell .jadwal-hero .cabang-top,
.jadwal-shell .jadwal-student-day-head strong,
.jadwal-shell .jadwal-student-day-head span {
    color: var(--akademik-page-surface, #ffffff) !important;
}

.ak-page .ak-card,
.ak-page .table-responsive,
.ak-page .INU,
.ak-page .modal-content,
.jadwal-shell .card-box,
.jadwal-shell .jadwal-summary,
.jadwal-shell .jadwal-student-day,
.jadwal-shell .jadwal-student-card,
#Dt-Show .jadwal-board-table {
    background: var(--akademik-page-surface, #ffffff) !important;
    border-color: var(--akademik-page-border, #e7edf5) !important;
    border-radius: var(--akademik-page-radius, 8px) !important;
    box-shadow: var(--akademik-page-shadow, 0 10px 28px rgba(15, 23, 42, .06)) !important;
}

.jadwal-shell .jadwal-filter-card,
.jadwal-shell .jadwal-board {
    background: linear-gradient(135deg, var(--akademik-page-surface, #ffffff) 0%, var(--akademik-page-filter-bg, #f4fbfb) 100%) !important;
}

.ak-page .ak-panel-title,
.jadwal-shell .jadwal-mapel-title,
.jadwal-shell .jadwal-pengajar-name,
.jadwal-shell .jadwal-student-course,
.jadwal-shell .jadwal-summary table td,
.jadwal-shell h5 {
    color: var(--akademik-page-text, #172033) !important;
}

.ak-page .ak-filter-item label,
.ak-page label,
.ak-page .modal .col-form-label,
.jadwal-shell .jadwal-filter-field label,
.jadwal-shell .jadwal-mapel-meta,
.jadwal-shell .jadwal-student-meta,
.jadwal-shell .jadwal-student-time,
.jadwal-shell small {
    color: var(--akademik-page-text-muted, #475569) !important;
}

.ak-page .form-control,
.ak-page .modal .form-control,
.jadwal-shell .form-control {
    border-color: var(--akademik-page-input-border, #d8e2ee) !important;
    border-radius: var(--akademik-page-radius, 8px) !important;
}

.ak-page table thead th,
#Dt-Show .jadwal-day-row td {
    background: var(--akademik-page-surface-soft, #f8fafc) !important;
    color: var(--akademik-page-text, #172033) !important;
    border-color: var(--akademik-page-border, #e7edf5) !important;
}

#Dt-Show .jadwal-slot-row td {
    border-top-color: var(--akademik-page-border, #e7edf5) !important;
    color: var(--akademik-page-text, #172033) !important;
}

#Dt-Show .jadwal-slot-row:hover td {
    background: var(--akademik-page-surface-soft, #f8fafc) !important;
}

.ak-page .modal-header.bg-primary {
    background: linear-gradient(135deg, var(--akademik-page-primary, #2f9d6a) 0%, var(--akademik-page-secondary, #006dd8) 100%) !important;
}

.ak-page .modal .card-footer {
    background: var(--akademik-page-surface-soft, #f8fafc) !important;
    border-top-color: var(--akademik-page-border, #e7edf5) !important;
}

.jadwal-shell .jadwal-zoom-link,
.ak-page .jadwal-zoom-link {
    background: linear-gradient(135deg, var(--akademik-page-primary, #2f9d6a) 0%, var(--akademik-page-primary-soft, #63c895) 100%) !important;
    box-shadow: var(--akademik-page-link-shadow, 0 10px 20px rgba(47, 157, 106, .20)) !important;
}

.jadwal-shell .jadwal-library-link,
.ak-page .jadwal-library-link {
    background: linear-gradient(135deg, var(--akademik-page-secondary, #006dd8) 0%, var(--akademik-page-secondary-soft, #47b8ff) 100%) !important;
    box-shadow: 0 10px 20px rgba(0, 109, 216, .18) !important;
}

.jadwal-shell .jadwal-student-session {
    background: var(--akademik-page-filter-bg, #f4fbfb) !important;
    border-color: var(--akademik-page-primary-soft, #63c895) !important;
    color: var(--akademik-page-primary, #2f9d6a) !important;
}

.jadwal-shell .jadwal-student-empty,
.jadwal-shell .jadwal-empty-link {
    color: var(--akademik-page-muted, #64748b) !important;
    border-color: var(--akademik-page-input-border, #d8e2ee) !important;
}

.tm-page {
    color: var(--tm-page-text, #172033) !important;
}

.tm-page .tm-hero {
    background: linear-gradient(135deg, var(--tm-page-secondary, #389fdf) 0%, var(--tm-page-primary, #006dd8) 100%) !important;
    border-radius: var(--tm-page-radius, 8px) !important;
    color: var(--tm-page-surface, #ffffff) !important;
    box-shadow: var(--tm-page-hero-shadow, 0 16px 34px rgba(0, 109, 216, .18)) !important;
}

.tm-page .tm-hero h4,
.tm-page .tm-hero small,
.tm-page .tm-hero div {
    color: var(--tm-page-surface, #ffffff) !important;
}

.tm-page .tm-card,
.tm-page .tm-table-wrap,
#ModalTugas .modal-content,
#ModalUploadTugas .modal-content,
#ModalSubmission .modal-content,
#ModalDetailTugas .modal-content {
    background: var(--tm-page-surface, #ffffff) !important;
    border-color: var(--tm-page-border, #e7edf5) !important;
    border-radius: var(--tm-page-radius, 8px) !important;
    box-shadow: var(--tm-page-shadow, 0 10px 28px rgba(15, 23, 42, .06)) !important;
}

.tm-page .tm-filter {
    background: linear-gradient(135deg, var(--tm-page-surface, #ffffff) 0%, var(--tm-page-filter-bg, #f4fbfb) 100%) !important;
}

.tm-page .tm-stat {
    border-left-color: var(--tm-page-secondary, #389fdf) !important;
}

.tm-page .tm-stat strong,
.tm-page table thead th,
#ModalTugas h4,
#ModalUploadTugas h4,
#ModalSubmission h4,
#ModalDetailTugas h4 {
    color: var(--tm-page-text, #172033) !important;
}

.tm-page .tm-stat span,
.tm-page .tm-filter label,
.tm-page label,
.tm-page small,
#ModalTugas label,
#ModalUploadTugas label,
#ModalSubmission label,
#ModalDetailTugas label,
#ModalTugas small,
#ModalUploadTugas small,
#ModalSubmission small,
#ModalDetailTugas small {
    color: var(--tm-page-text-muted, #475569) !important;
}

.tm-page .form-control,
#ModalTugas .form-control,
#ModalUploadTugas .form-control,
#ModalSubmission .form-control,
#ModalDetailTugas .form-control {
    border-color: var(--tm-page-input-border, #d8e2ee) !important;
    border-radius: var(--tm-page-radius, 8px) !important;
}

.tm-page table thead th,
#ModalTugas table thead th,
#ModalUploadTugas table thead th,
#ModalSubmission table thead th,
#ModalDetailTugas table thead th {
    background: var(--tm-page-surface-soft, #f8fafc) !important;
    border-color: var(--tm-page-border, #e7edf5) !important;
    font-weight: 800;
}

.tm-page .tm-empty-db {
    background: var(--tm-page-warning-bg, #fff8d8) !important;
    border-color: var(--tm-page-warning-border, #ead98c) !important;
    color: var(--tm-page-warning-text, #6f560e) !important;
    border-radius: var(--tm-page-radius, 8px) !important;
}

.tm-page .btn-primary,
#ModalTugas .btn-primary,
#ModalUploadTugas .btn-primary,
#ModalSubmission .btn-primary,
#ModalDetailTugas .btn-primary,
#ModalTugas .modal-header.bg-primary,
#ModalUploadTugas .modal-header.bg-primary,
#ModalSubmission .modal-header.bg-primary,
#ModalDetailTugas .modal-header.bg-primary,
#ModalDetailTugas .modal-header.bg-info {
    background: linear-gradient(135deg, var(--tm-page-secondary, #389fdf) 0%, var(--tm-page-primary, #006dd8) 100%) !important;
    border-color: var(--tm-page-primary, #006dd8) !important;
    color: var(--tm-page-surface, #ffffff) !important;
}

#ModalTugas .modal-header h4,
#ModalUploadTugas .modal-header h4,
#ModalSubmission .modal-header h4,
#ModalDetailTugas .modal-header h4,
#ModalTugas .modal-header button,
#ModalUploadTugas .modal-header button,
#ModalSubmission .modal-header button,
#ModalDetailTugas .modal-header button {
    color: var(--tm-page-surface, #ffffff) !important;
}

#ModalTugas .modal-footer,
#ModalUploadTugas .modal-footer,
#ModalSubmission .modal-footer,
#ModalDetailTugas .modal-footer {
    background: var(--tm-page-surface-soft, #f8fafc) !important;
    border-top-color: var(--tm-page-border, #e7edf5) !important;
}

.ll-page {
    color: var(--ll-page-text, #172033) !important;
}

.ll-page .ll-hero {
    background: linear-gradient(135deg, var(--ll-page-secondary, #389fdf) 0%, var(--ll-page-primary, #006dd8) 100%) !important;
    border-radius: var(--ll-page-radius, 8px) !important;
    color: var(--ll-page-surface, #ffffff) !important;
    box-shadow: var(--ll-page-hero-shadow, 0 16px 34px rgba(0, 109, 216, .18)) !important;
}

.ll-page .ll-hero h4,
.ll-page .ll-hero small,
.ll-page .ll-hero div {
    color: var(--ll-page-surface, #ffffff) !important;
}

.ll-page .ll-card,
.ll-page .ll-table-wrap,
.ll-page .ll-tree-node,
#ModalLibrary .modal-content,
#ModalDetailLibrary .modal-content {
    background: var(--ll-page-surface, #ffffff) !important;
    border-color: var(--ll-page-border, #e7edf5) !important;
    border-radius: var(--ll-page-radius, 8px) !important;
    box-shadow: var(--ll-page-shadow, 0 10px 28px rgba(15, 23, 42, .06)) !important;
}

.ll-page .ll-filter {
    background: linear-gradient(135deg, var(--ll-page-surface, #ffffff) 0%, var(--ll-page-filter-bg, #f4fbfb) 100%) !important;
}

.ll-page .ll-stat {
    border-left-color: var(--ll-page-secondary, #389fdf) !important;
}

.ll-page .ll-stat strong,
.ll-page .ll-tree-title,
.ll-page .ll-link-title,
.ll-page table thead th,
#ModalLibrary h5,
#ModalDetailLibrary h5 {
    color: var(--ll-page-text, #172033) !important;
}

.ll-page .ll-stat span,
.ll-page .ll-filter label,
.ll-page .ll-tree-subtitle,
.ll-page .ll-link-meta,
.ll-page label,
.ll-page small,
#ModalLibrary label,
#ModalDetailLibrary label,
#ModalLibrary small,
#ModalDetailLibrary small {
    color: var(--ll-page-text-muted, #475569) !important;
}

.ll-page .ll-tree-head,
.ll-page table thead th {
    background: var(--ll-page-surface-soft, #f8fafc) !important;
}

.ll-page .ll-tree-body,
.ll-page .ll-tree-link,
.ll-page table thead th {
    border-color: var(--ll-page-border, #e7edf5) !important;
}

.ll-page .ll-tree-count {
    background: var(--ll-page-secondary, #389fdf) !important;
    color: var(--ll-page-surface, #ffffff) !important;
    border-radius: var(--ll-page-radius, 8px) !important;
}

.ll-page .form-control,
#ModalLibrary .form-control,
#ModalDetailLibrary .form-control {
    border-color: var(--ll-page-input-border, #d8e2ee) !important;
    border-radius: var(--ll-page-radius, 8px) !important;
}

.ll-page .ll-empty-db {
    background: var(--ll-page-warning-bg, #fff8d8) !important;
    border-color: var(--ll-page-warning-border, #ead98c) !important;
    color: var(--ll-page-warning-text, #6f560e) !important;
    border-radius: var(--ll-page-radius, 8px) !important;
}

.ll-page .btn-primary,
#ModalLibrary .btn-primary,
#ModalDetailLibrary .btn-primary,
#ModalLibrary .modal-header.bg-primary,
#ModalDetailLibrary .modal-header.bg-primary {
    background: linear-gradient(135deg, var(--ll-page-secondary, #389fdf) 0%, var(--ll-page-primary, #006dd8) 100%) !important;
    border-color: var(--ll-page-primary, #006dd8) !important;
    color: var(--ll-page-surface, #ffffff) !important;
}

#ModalLibrary .modal-header h5,
#ModalDetailLibrary .modal-header h5,
#ModalLibrary .modal-header button,
#ModalDetailLibrary .modal-header button {
    color: var(--ll-page-surface, #ffffff) !important;
}

#ModalLibrary .modal-footer,
#ModalDetailLibrary .modal-footer {
    background: var(--ll-page-surface-soft, #f8fafc) !important;
    border-top-color: var(--ll-page-border, #e7edf5) !important;
}

.pg-page {
    color: var(--pg-page-text, #172033) !important;
}

.pg-page .pg-hero {
    background: linear-gradient(135deg, var(--pg-page-secondary, #389fdf) 0%, var(--pg-page-primary, #006dd8) 100%) !important;
    border-radius: var(--pg-page-radius, 8px) !important;
    color: var(--pg-page-surface, #ffffff) !important;
    box-shadow: var(--pg-page-hero-shadow, 0 16px 34px rgba(0, 109, 216, .18)) !important;
}

.pg-page .pg-hero h4,
.pg-page .pg-hero small,
.pg-page .pg-hero div {
    color: var(--pg-page-surface, #ffffff) !important;
}

.pg-page .pg-card,
.pg-page .pg-table-wrap,
#ModalPengumuman .modal-content,
#ModalDetailPengumuman .modal-content,
#ModalDetailPengumuman .pg-detail-content,
#ModalDetailPengumuman .pg-attachment {
    background: var(--pg-page-surface, #ffffff) !important;
    border-color: var(--pg-page-border, #e7edf5) !important;
    border-radius: var(--pg-page-radius, 8px) !important;
    box-shadow: var(--pg-page-shadow, 0 10px 28px rgba(15, 23, 42, .06)) !important;
}

.pg-page .pg-filter {
    background: linear-gradient(135deg, var(--pg-page-surface, #ffffff) 0%, var(--pg-page-filter-bg, #f4fbfb) 100%) !important;
}

.pg-page .pg-filter label,
#ModalPengumuman .pg-form label,
#ModalPengumuman label,
#ModalDetailPengumuman label,
#ModalPengumuman small,
#ModalDetailPengumuman small,
#ModalDetailPengumuman .pg-detail-empty-attachment {
    color: var(--pg-page-text-muted, #475569) !important;
}

.pg-page table thead th,
#ModalPengumuman .pg-preview-title,
#ModalDetailPengumuman .modal-title,
#ModalDetailPengumuman .pg-attachment-head,
#ModalDetailPengumuman .pg-detail-title {
    color: var(--pg-page-text, #172033) !important;
}

.pg-page table thead th,
#ModalPengumuman .pg-preview,
#ModalDetailPengumuman .pg-detail,
#ModalDetailPengumuman .pg-attachment-head,
#ModalDetailPengumuman .pg-detail-empty-attachment {
    background: var(--pg-page-surface-soft, #f8fafc) !important;
}

.pg-page table thead th,
#ModalPengumuman .pg-preview,
#ModalDetailPengumuman .pg-attachment-head,
#ModalDetailPengumuman .pg-attachment-preview img,
#ModalDetailPengumuman .pg-attachment-preview iframe {
    border-color: var(--pg-page-border, #e7edf5) !important;
}

#ModalPengumuman .pg-preview-body,
#ModalDetailPengumuman .pg-preview-body,
#ModalDetailPengumuman .pg-detail-content {
    color: var(--pg-page-body-text, #334155) !important;
}

#ModalDetailPengumuman .pg-detail-hero {
    background: linear-gradient(135deg, var(--pg-page-secondary, #389fdf) 0%, var(--pg-page-primary, #006dd8) 100%) !important;
    color: var(--pg-page-surface, #ffffff) !important;
}

#ModalDetailPengumuman .pg-detail-hero .pg-detail-title,
#ModalDetailPengumuman .pg-detail-hero .pg-detail-meta,
#ModalDetailPengumuman .pg-detail-hero span {
    color: var(--pg-page-surface, #ffffff) !important;
}

.pg-page .form-control,
#ModalPengumuman .form-control,
#ModalDetailPengumuman .form-control {
    border-color: var(--pg-page-input-border, #d8e2ee) !important;
    border-radius: var(--pg-page-radius, 8px) !important;
}

.pg-page .pg-empty-db {
    background: var(--pg-page-warning-bg, #fff8d8) !important;
    border-color: var(--pg-page-warning-border, #ead98c) !important;
    color: var(--pg-page-warning-text, #6f560e) !important;
    border-radius: var(--pg-page-radius, 8px) !important;
}

.pg-page .btn-primary,
#ModalPengumuman .btn-primary,
#ModalDetailPengumuman .btn-primary,
#ModalPengumuman .modal-header.bg-primary {
    background: linear-gradient(135deg, var(--pg-page-secondary, #389fdf) 0%, var(--pg-page-primary, #006dd8) 100%) !important;
    border-color: var(--pg-page-primary, #006dd8) !important;
    color: var(--pg-page-surface, #ffffff) !important;
}

#ModalPengumuman .modal-header h5,
#ModalPengumuman .modal-header button {
    color: var(--pg-page-surface, #ffffff) !important;
}

#ModalPengumuman .modal-footer,
#ModalDetailPengumuman .modal-footer {
    background: var(--pg-page-surface-soft, #f8fafc) !important;
    border-top-color: var(--pg-page-border, #e7edf5) !important;
}

.login-page {

    background-image: url("../../images/login_mobile.png");
    /* The image used */

    background-color: #cccccc;
    /* Used if the image is unavailable */

    height: 500px;
    /* You must set a specified height */

    background-position: center;
    /* Center the image */

    background-repeat: no-repeat;
    /* Do not repeat the image */

    background-size: cover;

}



@media(max-width:780px) {

    .login-page {

        background-image: url("../../images/mobile_page.png");
        /* The image used */

        background-position: center;
        /* Center the image */

        background-repeat: no-repeat;
        /* Do not repeat the image */

        background-size: cover;

    }

}

@media(max-width:520px) {

    .login-page {

        background-image: url("../../images/mobile_page.png");
        /* The image used */

        background-position: center;
        /* Center the image */

        background-repeat: no-repeat;
        /* Do not repeat the image */

        background-size: cover;

    }

}

.mtext {

    font-size: 13px;

}

.child1 :hoover {

    background-color: rgba(221, 221, 221, 0.836);

}



.sidebar-light .sidebar-menu .dropdown-toggle:hover,

ul.submenu.child2 .dropdown-toggle:hover,

.sidebar-light .sidebar-menu .dropdown.child2 .dropdown-toggle:hover,

.sidebar-light .sidebar-menu .menu.child2 :hover,

.sidebar-light .sidebar-menu .child2 .dropdown-toggle:hover,

.sidebar-light .sidebar-menu .child2.show>.dropdown-toggle {

    color: #fff;

    font-weight: 800;

    /* background-color: #01a3fd, */

    background-image: linear-gradient(to left, #bc8a11, #bb890100);

}

.sidebar-light .sidebar-menu .submenu .child li a.active,

.sidebar-light .sidebar-menu .submenu .child li a:hover {

    color: #fff;

    font-weight: 800;
    background-image: linear-gradient(to left, #bc8a11, #bb890100);

}

.sidebar-light .sidebar-menu .submenu.child2 .menu :hover,

.sidebar-light .sidebar-menu .child2 .dropdown-toggle:hover,

.sidebar-light .sidebar-menu .dropdown-toggle:hover,

.sidebar-light .sidebar-menu .child1.show>.dropdown-toggle,

.sidebar-light .sidebar-menu .submenu .child1 li a.active,

.sidebar-light .sidebar-menu .submenu .child1 li a:hover {

    color: rgb(255, 255, 255);

    font-weight: 800;

    background-color: #006dd8
}

ul .submenu.child.child2 {

    color: rgb(0, 0, 0)
}

.loginproses {

    font-size: 18px;

    animation: typing 5s steps(22) 1s infinite alternate;

    animation-name: example;

    animation-duration: 5s;

}

.TextLogin {

    font-size: 18px;

}

@keyframes example {

    0% {
        color: #006dd8;
    }

    50% {
        color: #242424;
    }

    100% {
        color: #01a3fd;
    }

}





.TableButtosPrimary {

    background-color: #006dd8;

    color: #fff;

}



thead {

    color: #fff;

    background-color: #006dd8;

}

span.micon {

    color: #006dd8;

}

th.sorting_asc {

    font-size: 12px;

}



.h4-notif {

    text-align: center;

}

;

td {

    font-size: 8px;

}

th {

    font-size: 10px;

}



@media (max-width:1200px) {

    .menudashboard {

        font-size: 12px;

        font-weight: 800;

    }

}

@media (max-width:768px) {

    .menudashboard {

        font-size: 10px;

        font-weight: 800;

    }

    .btn-m {

        font-size: 13px;

    }

    .dt-buttons {

        float: right;

    }

}

@media (max-width:500px) {

    .menudashboard {

        font-size: 10px;

        font-weight: 800;

    }

    .btn-m {

        font-size: 13px;

    }

    .dt-buttons {

        float: right;

    }

}



.menudashboard-icon {

    font-size: 32px;

    color: #01a3fd;

}

.col-3>a>div.w-100.align-items-center>div> {

    background-color: #fff;

}

.col-3>a>div.w-100.align-items-center>div>div:hover,

.col-3>a>div.w-100.align-items-center>div>div>span:hover {

    background-color: #e6f2c4;

    color: #fff
}



.dataTables_filter {

    float: right;

}

.select2-search__field {

    z-index: 99999999;

}



.modal {

    overflow: auto;

}



.modal-body {

    overflow: visible;

}

.datepicker-container {
    position: fixed;
    opacity: 0;
}





.help-block {

    font-size: 12px;

    color: #006dd8
}



/*//////////////////////////////////////*/

/*//////////////////////////////////////*/

/*//////////////////////////////////////*/

/*

    Wizard

*/



.wizard>.steps>ul {
    display: flex;

}

.wizard>.steps>ul>li {

    font-size: 10px;

    max-width: 20%;

}

.wizard>.steps>ul>li>a {

    width: auto;

}

.wizard>.steps>ul>li>a>span.step {

    font-size: 12px;

}



.wizard>.steps a,

.wizard>.steps a:hover,

.wizard>.steps a:active {

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}



.wizard>.steps .error a:hover,

.wizard>.steps .error a:active {

    background: #006dd8;

    color: #fff;

}



.actions.clearfix {

    margin-top: 20px;

}



.cabang-top {

    color: #006dd8;
    font-size: 13px;
    font-weight: 500;
    margin-left: 30px;
    margin-bottom: 20px;
    border-top: 2px solid #0a0a0a
}



#radioBtn .notActive {

    color: #006dd8;

    background-color: #fff;

}

#radioBtn .absensi_set {

    font-size: 12px;

}



/*////////////////////////////////////*/

/*////////////////////////////////////*/

.switch-lable {

    margin-left: 5px;

    font-weight: 500;

}





/*////////////////////////////////////*/

/*////////////////////////////////////*/

.loader {

    position: fixed;

    left: 50%;

    top: 40%;

    z-index: 9999999999;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    border: 10px solid #00ff00;

    display: flex;

}



.m-load {

    left: 35%;

}



.loader::after {

    content: "";

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 8px solid transparent;

    border-top: 8px solid #006dd8;

    animation: rotate 1.3s linear infinite;

}

@keyframes rotate {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}

/*////////////////////////////////////*/

/*////////////////////////////////////*/