.dashboard_card {
    border-radius: 4px;
    border: 2px solid var(--white);
    transition: 0.3s;
}

.dark-mode .dashboard_card {
    background: var(--gray-dark);
    border: 1px solid var(--card-boarder);
}

.card-value {
    margin-top: 4px;
    font-size: calc(1.275rem + 0.3vw);
    font-weight: 500;
}

.text-success {
    margin-bottom: 0;
    font-size: 9px;
}

.text-danger {
    margin-bottom: 0;
}

.text-secondary {
    margin-bottom: 0;
}

.dashboard_card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.login_page {
    background: #6BA55A url("bg-lines.svg");
    animation: changeColor 10s linear infinite;
}

@keyframes changeColor {
    0% {
        background-color: #6BA55A; /* Starting color */
    }
    10% {
        background-color: #5FA25D; /* Midway color */
    }
    20% {
        background-color: #51A05F; /* Midway color */
    }
    30% {
        background-color: #439E62; /* Midway color */
    }
    40% {
        background-color: #359C64; /* Midway color */
    }
    50% {
        background-color: #1599C1; /* Midway color */
    }
    60% {
        background-color: #359C64; /* Midway color */
    }
    70% {
        background-color: #439E62; /* Midway color */
    }
    80% {
        background-color: #51A05F; /* Midway color */
    }
    90% {
        background-color: #5FA25D; /* Midway color */
    }
    100% {
        background-color: #6BA55A; /* Ending color */
    }
}

@media print {
    #content_table {
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        -ms-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


.table > tbody > tr > td {
    vertical-align: middle;
}

.login_page_title {
    color: #e1fcfb;
}

.login_page_sub_title {
    color: #93f3ef;
}

.login_page_inner_title {
    color: #1a837e;
    font-size: large;
}

.login_box {
    border-radius: 16px;
    font-size: 12px;
    padding: 16px;
    color: #3CC3BD;
    background: #fbfdfd;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
}


.account_balance_layout {
    display: flex;
    flex-direction: row;
    vertical-align: center;
    justify-content: left;
}

.money_style {
    font-weight: normal;
}

.cummulative_balance_style {
    margin-bottom: auto;
    margin-top: auto;
    vertical-align: center;
}

.account_label {
    font-weight: normal;
    margin-bottom: auto;
    margin-top: auto;
    margin-right: 8px;
    vertical-align: center;
    font-size: small;
}

.transaction {
    border-radius: 10px;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: center;
    font-size: 14px;
    border-color: #dcdbdb;
    border-bottom-color: white;
    border-style: dotted dotted dotted dotted;
    border-width: 1px;
}

.P, .p {
    background-color: #bbf8fd;
    color: #0e6981;
}

.R, .r {
    background-color: #C9F9CD;
    color: #088d47;
}

.F {
    background-color: #bff3fa;
    color: #00353b;
}

.A {
    background-color: #e9c9fc;
    color: #410165;
}

.S {
    background-color: #ddb6ff;
    color: #4e0279;
}

.D {
    background-color: #dbbef5;
    color: #51017e;
}

.M {
    background-color: #f4fdcd;
    color: #455600;
}

.K {
    background-color: #fabff2;
    color: #5e1255;
}

.X {
    background-color: #c9d3fc;
    color: #1f358c;
}

.W {
    background-color: #c9d3fc;
    color: #1f358c;
}

.C {
    background-color: #affafa;
    color: #013b3b;
}

.E {
    background-color: #cbcbcb;
    color: #212121;
}

.L {
    background-color: #ceffe8;
    color: #01502a;
}

.Z {
    background-color: #b2c0f8;
    color: #2a3664;
}

.U {
    background-color: #b7f6f8;
    color: #014446;
}

.U {
    background-color: #e8fac0;
    color: #324802;
}

.J {
    background-color: #f8d4ba;
    color: #642a01;
}

.B {
    background-color: #c7fded;
    color: #025b40;
}

.V {
    background-color: #acb0fa;
    color: #020988;
}

.G {
    background-color: #cbadff;
    color: #2a0170;
}

.H {
    background-color: #eeb1fc;
    color: #500262;
}

.N {
    background-color: #b8fad2;
    color: #025022;
}

.sms_units {
    background-color: #f6d0b6;
    color: #6e2f04;
}

.remedial_paid {
    background-color: #b0fcd7;
    color: #01502a;
}

.remedial_not_paid {
    background-color: #fcf1c5;
    color: #524615;
}

.not_paid {
    background-color: #fcd2c5;
    color: #521e15;
}

.dashboard_table_data {
    color: #696969;
}

.exempted-students-title {
    font-size: 18px;
    text-decoration: underline;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 16px;
}

.annual_cost_summary {
    font-size: 12px;
    font-weight: normal;
    text-align: start;
}


.name_style {
    font-size: small;
}

.date_time_style {
    font-size: small;
    color: #696969;
}

.page_header_style {
    font-size: medium;
    text-align: center;
    height: 100%;
    margin-bottom: -4px;
    text-transform: uppercase;
}

.balance {
    border-radius: 16px;
    text-align: center;
    padding: 4px 16px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: center;
    font-size: 16px;
    font-weight: bolder;
    border-color: #dcdbdb;
    border-bottom-color: white;
    border-style: dotted dotted dotted dotted;
    border-width: 1px;
}

.student_balances_row {
    font-size: small;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    vertical-align: center;
    text-transform: uppercase;
}

.student_balance {
    margin: 0 10px;
}

.card_header_style {
    font-size: medium;
    text-align: center;
    height: 100%;
    padding-bottom: 8px;
    padding-top: 8px;
    margin-bottom: -4px;
    font-family: "Roboto Thin", monospace;
    text-transform: uppercase;
}

.page_header_layout {
    background-color: #a8b8c0;
}


.completed {
    border-radius: 16px;
    text-align: center;
    width: fit-content;
    padding: 4px 16px;
    font-size: 12px;
    background-color: #b0e1fc;
    color: #013450;
}

.deposit {
    border-radius: 16px;
    text-align: center;
    font-family: Monospace, monospace;
    width: fit-content;
    padding: 4px 16px;
    font-size: 12px;
    background-color: #b0fcd7;
    color: #01502a;
}

.withdrawal {
    border-radius: 16px;
    width: fit-content;
    padding: 4px 16px;
    text-align: center;
    font-size: 12px;
    background-color: #dac7aa;
    color: #030303;
}

.arrears {
    border-radius: 16px;
    width: fit-content;
    padding: 4px 16px;
    text-align: center;
    font-size: 12px;
    background-color: #fcc0c0;
    color: #7e0101;
}