body {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 110%;
}

h3 {
    text-align: center;
}

#report_link {
    text-decoration: none;
    color: #000000;
}

a:link {
    text-decoration: none;
    color: #000000;

}

#export_btn{
    float: right;
}



a:hover {
    text-decoration: none;
    font-weight: bold;
}

.loader {
    position: absolute;
    left: 50%;
    top: 110%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Navbar */
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    cursor: pointer;
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown:hover .dropbtn,
.dropbtn:focus {
    text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown-content.show {
    display: block;
}




/*style for the entire list of menu items*/
.menu_items_list {
    margin-left: 4%;
}

.menu_item {
    font-size: 12px;
}


/*make all menu items have text in bold*/
.menu_item {
    font-weight: bold;
}

/*make create transaction button on side menu stand out with a blue background*/
.create_txn_btn {
    background-color: #1976D2;
}


/* Side bar  */


/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
    height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
}

/* Set black background color, white text and some padding */
footer {
    background-color: #555;
    color: white;
    padding: 10px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 10px;
    }

    .row.content {
        height: auto;
    }
}


.logo_side_menu_img {
    width: 90%;
    margin-top: -15%;
    margin-bottom: -15%;
}


.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(7, 29, 73);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 2.7%;
}

.sidebar a {
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #000000;
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 26px;
    margin-left: 50px;
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: rgb(7, 29, 73);
    color: white;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #101010;
}

.closebtn:hover {
    background-color: #101010;
}

.main_content {
    padding-top: 5%;
}

#main {

    transition: margin-left .5s;
    padding: 16px;

}


#main_hearder {
    color: #fff;
    font-weight: bold;
}

#action_btn {
    color: #000000;
}

.fa {
    color: #fff;

}

.panels {
    padding: 0 0px;
    display: none;
    background-color: white;
    color: #000000;
    overflow: hidden;
}

.panels a {
    padding: 15 15 15 15px;
    font-size: 14px;
    color: #818181;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }

    .sidebar a {
        font-size: 18px;
    }
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    font-size: 16px;
}


/* Accordion for the side nav */

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/* .active, .accordion:hover {
  background-color: #ccc;
} */

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}


/* Test */
#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
    background-color: #111c24 !important;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

#sidebar-wrapper .list-group {

    width: 15rem;
}

#page-content-wrapper {

    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

.bg-nav {
    background-color: #111c24 !important;
    color: #fff;
}

.navs {
    background-color: #111c24;
    color: #fff;
}

.text-color {
    color: #fff;
}

.panel {
    padding: 0 12px;
    display: none;
    background-color: white;
    color: #000000;
    overflow: hidden;
    font-size: 10px;
}


.tr-background-color {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #dcedc8;

}

.tr-paragraph {
    text-align: center;
    font-size: 12px;
}


.centered_btns {
    margin: auto;
    display: table;
}

/* invalid-feedback */
.invalid-feedback {
    color: red;
    font-size: 14px;
    font-weight: bold;
}


/* Cards  */
.navBackground-color {
    background-color: #e7e7e7;
}

.card-title {
    font-weight: bold;
    color: #000000;
}


/* Float four columns side by side */
.column {
    float: left;
    width: 25%;
    padding: 0 10px;
}

/* Style the counter cards */
.card {
    background-color: #fff;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}

/* Curved table */

.table-curved {
    border-collapse: separate;
}

.table-curved {
    border: solid #ccc 1px;
    border-radius: 2.5px;
}

.table-curved td,
.table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.table-curved tr>*:first-child {
    border-left: 0px;
}

.table-curved tr:first-child>* {
    border-top: 0px;
}


/* Quantities */
.banners {
    background-color: #E4ECF7;
    ;
    border: 1px solid #1A73E8;
    border-radius: 5px;
    margin-bottom: 3%;
    padding-top: 2%;
    padding-bottom: 1%;
    text-align: center;
    color: #1A73E8;
}

/* Toast when transaction successful */
.alert-container {
    font-family: helvetica, arial;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.alert-container {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.alert-container {
    opacity: 0.7;
    background-color: #dcedc8;
    color: #000000;
    border: 1px solid #e7e7e7;
}



.alert-container {

    position: fixed;
    bottom: 50%;
    left: 55%;
    width: 20%;
    margin: 0 25% 0 25%;
}

.alert-container .alert {
    text-align: center;
    padding: 17px 0 20px 0;
    margin: 0 25% 0 25%;
    height: 54px;
    font-size: 20px;
}


#mains {
    transition: margin-left .8s;
    padding: 10px;
}



/* toast message */

#error_message {
    background: #F3A6A6;
}

#success_approve_message {
    background: #CCF5CC;
}

#success_acknowledge_message {
    background: #CCF5CC;
}

.ajax_response {
    padding: 10px 20px;
    border: 0;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    display: none;
    color: #555;
}



/* Paginations */


.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0%;
    list-style: none;
    border-radius: .25rem;
    justify-content: center;
}

button:hover {
    font-weight: bold;
}

p {
    text-align: center;
}

/* Finance workflow additions: retain the existing navy brand while improving scanability. */
.master-card, .table-responsive .table {
    border-radius: 0.5rem;
}

.master-card {
    border: 0;
}

.table-hover tbody tr:hover {
    background-color: rgba(7, 29, 73, 0.04);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 767px) {
    .sidebar { padding-top: 3.5rem; }
    .table-responsive { font-size: 0.9rem; }
}

/* 2026 finance UI layer: existing navy remains the brand anchor. */
:root { --finance-navy: rgb(7, 29, 73); --finance-surface: #f7f9fc; --finance-border: #e4e9f1; }
body { background: var(--finance-surface); color: #1d2939; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin:1rem 0 1.5rem; }
.page-heading h1 { font-size:1.75rem; margin:0; font-weight:700; }
.eyebrow, .sidebar-label { color:#64748b; font-size:.72rem; font-weight:700; letter-spacing:.09em; margin:0 0 .25rem; }
.metric-card { position:relative; min-height:150px; background:#fff; border:1px solid var(--finance-border); border-radius:.75rem; padding:1.25rem; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.metric-card p { text-align:left; color:#667085; margin:0 0 .35rem; }.metric-card h2 { font-size:1.7rem; font-weight:700; }.metric-card small { color:#667085; }.metric-icon { position:absolute; right:1.25rem; top:1.25rem; color:var(--finance-navy); opacity:.8; font-size:1.25rem; }
.sidebar-user { display:flex; gap:.65rem; align-items:center; color:#fff; padding:1.1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.16); margin-bottom:.75rem; }.sidebar-user i { font-size:1.7rem; }.sidebar-user small { display:block; color:#cbd5e1; }
.sidebar-label { padding:1rem 1.25rem .3rem; color:#9fb0cc; }.sidebar a.menu_item { color:#dbe6f8; padding:.62rem 1.25rem; font-size:.9rem; font-weight:500; }.sidebar a.menu_item i { width:1.35rem; }.sidebar a.menu_item:hover { color:#fff; background:rgba(255,255,255,.1); font-weight:500; }
.btn { border-radius:.45rem; font-weight:600; }.form-control:focus { border-color:var(--finance-navy); box-shadow:0 0 0 .2rem rgba(7,29,73,.12); }
@media (max-width: 767px) { .page-heading { flex-direction:column; }.metric-card { min-height:130px; } }

/* Edulution product shell: these rules supersede the legacy sidebar/accordion CSS above. */
:root {
    --edulution-navy: #0a2457;
    --edulution-blue: #77b7e6;
    --edulution-lime: #93c01f;
    --edulution-yellow: #f6c638;
    --edulution-ink: #172033;
    --edulution-surface: #f6f8fb;
    --edulution-border: #e4eaf2;
}
body { background: var(--edulution-surface); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.openbtn { background:transparent; padding:10px; font-size:18px; }.openbtn:hover { background:rgba(255,255,255,.1); }
.sidebar { top:64px; bottom:0; height:auto; width:0; padding:0; background:var(--edulution-navy); z-index:1030; overflow-y:auto; overflow-x:hidden; transition:width .22s ease; box-shadow:2px 0 12px rgba(7,29,73,.12); }
body.sidebar-open .sidebar { width:280px; }.app-content { min-height:100vh; padding:88px 24px 32px; transition:margin-left .22s ease; }body.sidebar-open .app-content { margin-left:280px; }.content-container { max-width:1440px; }
.logo_side_menu_img { display:block; width:210px; max-width:calc(100% - 40px); height:auto; margin:22px auto 14px; }.sidebar .closebtn { display:none; }
.sidebar-user { margin:0 16px 10px; padding:14px 4px; }.sidebar-label { color:rgba(255,255,255,.56); padding:16px 20px 6px; font-size:.68rem; }.sidebar a.menu_item, .sidebar button.menu_item { width:100%; display:block; border:0; background:transparent; color:#eaf2ff; text-align:left; padding:10px 20px; font-size:.9rem; font-weight:600; text-decoration:none; }.sidebar a.menu_item:hover,.sidebar button.menu_item:hover,.sidebar button.menu_item.active { background:rgba(119,183,230,.16); color:#fff; }.sidebar a.menu_item i,.sidebar button.menu_item i { color:var(--edulution-blue); }
.accordion { cursor:pointer; }.panels { display:block; padding:0 0 2px; background:transparent; color:inherit; }.panels:not(.is-open) { display:none; }.panels a.menu_item { padding:8px 20px 8px 42px; color:rgba(234,242,255,.76); font-size:.84rem; }.panels a.menu_item:hover { color:#fff; background:rgba(255,255,255,.08); }
.fa { color:inherit; }.btn-solid.theme-primary { background:var(--edulution-navy); border-color:var(--edulution-navy); }.btn-solid.theme-primary:hover,.btn-solid.theme-primary:focus { background:#061a42; border-color:#061a42; }.btn-outline.theme-primary { color:var(--edulution-navy); border-color:var(--edulution-navy); }.btn-outline.theme-primary:hover { background:var(--edulution-navy); border-color:var(--edulution-navy); }
.card,.metric-card { border-color:var(--edulution-border); }.table thead th { color:#526074; font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; border-bottom-color:var(--edulution-border); }.table > :not(caption) > * > * { padding:.85rem .75rem; border-bottom-color:var(--edulution-border); }
.alert { border:0; border-radius:.6rem; box-shadow:0 3px 12px rgba(15,23,42,.08); }
@media (max-width: 900px) { body.sidebar-open .sidebar { width:280px; } body.sidebar-open .app-content { margin-left:0; } .sidebar { z-index:1050; } .sidebar .closebtn { display:block; color:#fff; background:transparent; border:0; position:absolute; right:12px; top:8px; font-size:26px; } .app-content { margin-left:0; padding:84px 14px 24px; } }

.form-card { max-width:880px; border:0; border-radius:.85rem; box-shadow:0 4px 18px rgba(15,23,42,.06); }.form-section-title { font-size:1rem; font-weight:700; color:var(--edulution-navy); margin:0 0 1rem; padding-bottom:.65rem; border-bottom:1px solid var(--edulution-border); }.form-label { font-size:.88rem; font-weight:650; color:#344054; }.form-control { min-height:44px; border-radius:.5rem; border-color:var(--edulution-border); }.select2-container--default .select2-selection { min-height:44px; border-radius:.5rem; }
.auth-page { min-height:100vh; background:var(--edulution-navy); display:grid; place-items:center; padding:24px; }.auth-shell { width:min(100%,440px); }.auth-card { background:#fff; padding:42px; border-radius:1rem; box-shadow:0 20px 60px rgba(0,0,0,.22); }.auth-logo { display:block; width:210px; max-width:100%; margin:0 0 32px; padding:12px 14px; border-radius:.5rem; background:var(--edulution-navy); }.auth-card h1 { font-size:1.75rem; font-weight:750; color:var(--edulution-navy); }.auth-card .eyebrow { color:var(--edulution-lime); }

/* Dashboard polish */
.brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--edulution-lime); color:var(--edulution-navy); font-size:.72rem; font-weight:800; letter-spacing:.02em; }
#main_hearder { display:flex; flex-direction:column; font-size:.92rem; font-weight:750; letter-spacing:.02em; line-height:1; }
#main_hearder small { color:rgba(255,255,255,.55); font-size:.52rem; letter-spacing:.16em; margin-top:4px; }
.topbar-user { color:rgba(255,255,255,.7); font-size:.78rem; padding:0 10px; }
.sidebar-brand { display:flex; align-items:center; gap:.7rem; color:#fff; margin:24px 20px 22px; }
.sidebar-brand strong { display:block; font-size:1rem; }.sidebar-brand small { display:block; color:rgba(255,255,255,.55); font-size:.68rem; margin-top:2px; }
.overview-hero { display:flex; justify-content:space-between; align-items:center; min-height:176px; padding:2rem 2.25rem; border-radius:1rem; background:linear-gradient(115deg, #0a2457 0%, #123b7b 67%, #1e5c8f 100%); color:#fff; overflow:hidden; position:relative; }
.overview-hero:after { content:""; position:absolute; width:260px; height:260px; right:9%; top:-135px; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.035); }
.overview-hero .eyebrow { color:#9ed1ee; }.overview-hero h2 { font-size:2.35rem; margin:.35rem 0 .25rem; letter-spacing:-.03em; }.overview-hero p:last-child { margin:0; color:rgba(255,255,255,.7); font-size:.9rem; }.hero-mark { color:var(--edulution-lime); font-size:4.3rem; opacity:.9; margin-right:4%; z-index:1; }
.metric-card { min-height:142px; transition:transform .18s ease, box-shadow .18s ease; }.metric-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.08); }.metric-card h2 { letter-spacing:-.03em; }.metric-card-blue { border-top:3px solid var(--edulution-blue); }.metric-card-lime { border-top:3px solid var(--edulution-lime); }.metric-card-dark { border-top:3px solid var(--edulution-navy); }.metric-card-dark h2 { color:var(--edulution-navy); }
.dashboard-table { border:1px solid var(--edulution-border); border-radius:.85rem; overflow:hidden; box-shadow:0 4px 18px rgba(15,23,42,.045); }.section-heading { display:flex; justify-content:space-between; align-items:center; padding:1.35rem 1.5rem 1.05rem; border-bottom:1px solid var(--edulution-border); }.section-heading h2 { font-size:1.05rem; margin:0; color:var(--edulution-ink); }.section-heading .eyebrow { margin-bottom:.35rem; }.account-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--edulution-lime); margin-right:.7rem; }.amount-cell { color:var(--edulution-navy); font-weight:700; }
@media (max-width: 600px) { .topbar-user { display:none; }.overview-hero { padding:1.5rem; min-height:150px; }.overview-hero h2 { font-size:1.9rem; }.hero-mark { font-size:3rem; margin-right:0; }.section-heading { align-items:flex-start; gap:1rem; }.section-heading .btn { white-space:nowrap; }.page-heading h1 { font-size:1.5rem; } }

/* Compatibility guardrails for legacy templates. */
*, *::before, *::after { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; font-size:15px; line-height:1.5; overflow-x:hidden; }
p { text-align:left; }
.app-content { width:auto; }
.page-heading > div { min-width:0; }
.page-heading .fg-secondary { margin:.45rem 0 0; }
.page-heading .btn-action { flex:0 0 auto; margin-top:.35rem; }
.overview-hero > div:first-child { position:relative; z-index:1; }
.overview-hero .fg-danger { color:#ffd6d6 !important; }
.metric-card p { text-align:left; }
.card-body { min-width:0; }
.table-responsive { -webkit-overflow-scrolling:touch; }
.table { min-width:460px; }
.dashboard-table .table { min-width:0; }
.btn { white-space:nowrap; }
.form-control { width:100%; }
@media (max-width: 900px) {
    body.sidebar-open { overflow:hidden; }
    body.sidebar-open::after { content:""; position:fixed; inset:64px 0 0; background:rgba(10,36,87,.28); z-index:1020; }
    .sidebar { box-shadow:8px 0 24px rgba(7,29,73,.18); }
    .app-content { padding-left:16px; padding-right:16px; }
    .page-heading { margin-top:.35rem; }
}
@media (max-width: 600px) {
    .page-heading { gap:.75rem; }
    .page-heading .btn-action { width:100%; }
    .overview-hero { align-items:flex-start; }
    .hero-mark { margin-top:.2rem; }
    .section-heading { flex-wrap:wrap; }
    .section-heading .btn { margin-left:auto; }
}