@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --black: #293d40;
    --black-light: #293d40ef;
    --white: #ffffff;
    --orange: #f2a516;
    --orange-light: #fefaf3;
    --orange-dark: #f25f29;
    --animation: all 0.3s linear;
    --red: #ec2628;
    --light-grey: #f9f9f9;
    --grey-two: #e2e8f0;
    --grey-three: #94a3b8;
    --grey-four: #f8fafc;
    --grey-five: #f4f6f8;
    --grey-six: #dde4ea;
    --grey-seven: #d9dddd;
    --grey-nine: #93a4b8;
    --grey-ten: #868f9a;
    --grey-eleven: #edf0f3;
    --grey-twelve: #f6f8f9;
    --grey-thirteen: #e5eaf2;
    --grey-fourteen: #aab6c7;
    --dark-grey: #333333;
    --green: #0acf83;
    --blue: #3498db;
}

.loader-box {
    width: 100%;
    height: 100vh;
    background: #000000d6;
    position: fixed;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}


.spinner {
    width: 72px;
    height: 72px;
    display: grid;
}

    .spinner::before,
    .spinner::after {
        content: "";
        grid-area: 1/1;
        background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
        background-size: 17.3px 17.3px;
        background-repeat: no-repeat;
        animation: spinner-3hs4a3 1.4s infinite;
    }

    .spinner::before {
        --c: radial-gradient(farthest-side,#fff 92%,#0000);
        margin: 5.8px;
        background-size: 11.5px 11.5px;
        animation-timing-function: linear;
    }

    .spinner::after {
        --c: radial-gradient(farthest-side,#f2a516 92%,#0000);
    }

@keyframes spinner-3hs4a3 {
    100% {
        transform: rotate(.5turn);
    }
}

.btn-success {
    background: var(--green);
    border-color: var(--green);
}

.btn {
    font-size: 14px;
}

.modal-title {
    font-size: 24px !important;
    font-weight: 700;
}

.modal-header {
    border: 0px;
}

.btn-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 1px var(--grey-three);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    position: absolute;
    right: -16px;
    top: -14px;
    opacity: 1;
}

.form-floating input {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.btn-close:hover {
    opacity: 1;
    border-color: var(--red);
    color: var(--red);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f22e2e'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.modal-footer {
    justify-content: space-between;
    border: 0px;
}

.modal-backdrop {
    background: var(--grey-three);
    opacity: 0.8;
}

.form-control, .form-select {
    font-size: 14px;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    padding: 5px 13px;
    height: 50px;
    min-height: 50px;
    font-size: 14px;
    padding-top: 19px !important;
}

.form-floating > label {
    padding: 13px;
    font-size: 14px;
    color: rgba(var(--bs-body-color-rgb),.65);
}

.form-control:focus, .form-select:focus {
    border-color: #f9a61f61;
    box-shadow: 0 0 0 0.25rem rgb(253 191 20 / 21%);
}

.form-check-input:checked {
    background-color: var(--orange);
    border-color: var(--orange);
}

.form-check-input:focus {
    border-color: #f9a61f61;
    box-shadow: 0 0 0 0.25rem rgb(253 191 20 / 21%);
}

.animate {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.container {
    position: relative;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--dark-grey);
    text-decoration: none;
    background-color: var(--grey-two);
}

.dropdown-menu {
    box-shadow: 0px 7px 10px rgba(0,0,0,0.1);
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.header-top {
    padding: 7px;
    background: var(--white);
    border-bottom: solid 1px var(--grey-two);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-box img {
    width: 200px;
    height: auto;
}

.user-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-photo {
    width: 45px;
    height: 45px;
    cursor: pointer;
}

    .user-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.user-details h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0px;
    margin-bottom: -4px;
    color: var(--dark-grey);
}

.user-details p {
    font-size: 14px;
    margin: 0px;
    font-weight: 600;
    color: var(--red);
}

.user-details-text {
    text-align: right;
}

.header-nav a {
    color: var(--dark-grey);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .header-icons a.rount-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: solid 1px var(--grey-three);
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

        .header-icons a.rount-icon svg path {
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .header-icons a.rount-icon:hover {
            border-color: var(--red);
        }

            .header-icons a.rount-icon:hover svg path {
                fill: var(--red);
            }

.badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    border: solid 2px var(--white);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -12px;
    top: -9px;
}

.header-icons a.active-icon {
    border-color: var(--red);
}

    .header-icons a.active-icon svg path {
        fill: var(--red);
    }

.header-bottom {
    background: var(--white);
    border-bottom: solid 1px var(--grey-two);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .header-bottom .navbar .container-fluid {
        padding: 0px;
    }

.top-nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.header-bottom .navbar {
    width: 100%;
    padding: 0px;
}

    .header-bottom .navbar li a {
        position: relative;
        color: var(--black);
        font-weight: 500;
        padding: 10px 22px !important;
    }

        .header-bottom .navbar li a:hover {
            color: var(--red);
        }

.navbar-nav .nav-item .active {
    color: var(--red);
    border-bottom: solid 3px var(--red);
}

.navbar-nav .nav-item .badge {
    right: -2px;
    top: 3px;
}

.account-balance {
    padding: 0px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .account-balance span {
        color: var(--orange-dark);
        font-weight: 500;
    }

.checkout-btn {
    background: var(--orange);
    border-radius: 40px;
    color: var(--white);
    border: 0px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px 6px 6px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

    .checkout-btn:hover {
        background: var(--orange-dark);
    }

        .checkout-btn:hover .cart-balance {
            fill: var(--orange-dark);
            ;
        }

.calendar-container {
    background: var(--grey-four);
    border-bottom: solid 1px var(--grey-two);
    padding: 18px 0px;
}

.calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-top-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rounded-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px var(--grey-three);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

    .rounded-btn svg path {
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .rounded-btn:hover {
        border-color: var(--red);
    }

        .rounded-btn:hover svg path {
            fill: var(--red);
        }

.calendar-month h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    margin: 0px;
}

.calendar-month a {
    font-size: 14px;
    font-weight: 500;
    color: var(--red);
    text-decoration: none;
}

    .calendar-month a:hover {
        text-decoration: underline;
    }

.calendar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .calendar-right .round-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: solid 1px var(--grey-three);
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

        .calendar-right .round-icon svg path {
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .calendar-right .round-icon:hover {
            border-color: var(--red);
        }

            .calendar-right .round-icon:hover svg path {
                fill: var(--red);
            }

.calendar-btn-group {
    border: solid 1px var(--grey-two);
    background: var(--white);
    border-radius: 50px;
    padding: 4px;
}

    .calendar-btn-group button {
        font-size: 16px;
        font-weight: 700;
        color: var(--black);
        background: var(--white);
        width: 100px;
        border-radius: 50px;
        border: 0px;
        padding: 7px 0px;
    }

        .calendar-btn-group button:hover {
            background: var(--grey-two);
        }

        .calendar-btn-group button.active {
            background: var(--red);
            color: var(--white);
        }

.change-month-year {
    padding: 15px;
    margin-top: 10px !important;
}

    .change-month-year h3 {
        font-size: 14px;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 5px;
    }

.change-month-year-inner {
    display: flex;
}

.cal-arrow-left {
    width: 18px;
    height: 30px;
    border: solid 1px var(--grey-two);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-radius: 50px 0px 0px 50px;
    border-right: 0px;
}

.change-month-year-inner select {
    border: solid 1px var(--grey-two);
    font-size: 14px;
    width: 100px;
    height: 30px;
}

.cal-arrow-right {
    width: 18px;
    height: 30px;
    border: solid 1px var(--grey-two);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-radius: 0px 50px 50px 0px;
    border-left: 0px;
}

    .cal-arrow-left:hover, .cal-arrow-right:hover {
        background: var(--grey-two);
    }

.green-btn {
    background: var(--green);
    border-radius: 4px;
    height: 30px;
    width: 75px;
    text-align: center;
    border: 0px;
    margin-left: 20px;
    color: var(--white);
    font-size: 14px;
}

.orange-btn {
    background: var(--orange);
    border-radius: 4px;
    height: 30px;
    text-align: center;
    border: 0px;
    color: var(--white);
    font-size: 14px;
    padding: 0px 20px;
}

.green-btn-big {
    background: var(--green);
    border-radius: 4px;
    text-align: center;
    border: 0px;
    color: var(--white);
    font-size: 14px;
    padding: 6px 16px;
}

.items-scroll {
    width: 550px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.cart-details-header {
    display: flex;
    gap: 10px;
    padding: 8px;
    align-items: center;
    background: #94a3b829;
    border-radius: 10px;
    margin: 0px 7px;
}

.cart-school-logo {
    width: 45px;
    height: 45px;
    background: var(--white);
    border-radius: 50%;
    overflow: hidden;
}

    .cart-school-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cart-scholl-details h3 {
    font-size: 18px;
    font-weight: bold;
    color: var(--black);
    margin: 0px;
}

.cart-scholl-details p {
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
    margin: 0px;
}

.cart-details-body .table {
    font-size: 14px;
}

.cart-details .table td {
    /*vertical-align: middle;
        word-wrap: break-word;
        white-space: unset;
        padding-right: 0px !important;*/
    padding: 5px;
    vertical-align: top;
    font-size: 13px;
}

div.contents .cart-details .table tbody tr td:nth-child(2) {
    min-width: 266px;
    white-space: normal;
}

div.contents .cart-details .table tbody tr td:nth-child(1) {
    min-width: 125px;
    max-width: 125px;
    white-space: normal;
}

.cart-details .table-responsive {
    overflow-x: hidden;
}

.cart-details .contents {
    overflow-x: auto;
}

@media (min-width: 1024px) {
    #powerTip {
        left: 50% !important;
        top: 100px !important;
        transform: translate(-50%, 0);
    }
}

@media(max-width:767px) {
    div.contents .cart-details .table tbody tr td:nth-child(2) {
        min-width: 155px;
    }

    .disableAlacarte {
        margin-left: 11px;
    }

    .autoreplenishAmount {
        margin-top: 15px;
    }

    .student-list-btn {
        margin-top: 6px !important;
    }
}

.cart-details .table tbody tr td:last-child {
    padding-left: 0px;
}

.cart-details-body .table tr th:last-child, .cart-details-body .table tr td:last-child {
    width: auto !important;
}

.cart-delete, .transfer-balance {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0px;
    background: var(--white);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cart-delete svg path, .transfer-balance svg path {
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .cart-delete:hover {
        background: var(--red);
    }

    .transfer-balance:hover {
        background: var(--orange);
    }

        .cart-delete:hover svg path, .transfer-balance:hover svg path {
            fill: var(--white);
        }

.cart-details-body .cart-delete {
    display: inline-flex;
}

.sub-total {
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    padding-right: 20px !important;
}

.cart-total {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    padding: 5px 18px;
    background: var(--grey-three);
    color: var(--white);
    margin-top: -16px;
    z-index: 9;
    position: relative;
}

.cart-btn {
    padding: 8px 8px 2px 8px;
    display: flex;
    gap: 8px;
}

    .cart-btn button {
        flex: 1;
        border-radius: 5px;
        border: 0px;
        color: var(--white);
        padding: 5px;
        font-size: 14px;
    }

    .cart-btn .grey-btn {
        background: var(--grey-three);
    }

    .cart-btn .red-btn {
        background: var(--red);
    }

    .cart-btn .yellow-btn {
        background: var(--orange);
    }

.calendar-box {
    padding-top: 10px;
}

    .calendar-box table {
        border-width: 0px;
        width: 100%;
        border-collapse: collapse;
    }

        .calendar-box table th {
            font-weight: bold;
            color: var(--black);
            text-align: center;
            padding-bottom: 10px;
        }

        .calendar-box table td {
            padding: 10px 10px 0px 10px;
            vertical-align: top;
        }

    .calendar-box .cart-details-header {
        background: var(--grey-five);
        border-radius: 200px;
        width: 100%;
        min-height: inherit;
        padding: 10px;
    }

        .calendar-box .cart-details-header .cart-school-logo {
            width: 85px;
            height: 85px;
            min-width: 85px;
            min-height: 85px;
        }
        /* .calendar-box .cart-details-header .cart-school-logo img{
    object-fit: none;
} */
        .calendar-box .cart-details-header div {
            min-height: inherit;
        }

.calendar-food-box {
    border: solid 1px var(--grey-two);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    height: 168px;
    width: 175px;
    margin-bottom: 20px;
    position: relative;
    padding-top: 35px;
}

.food-name {
    height: 80px;
    font-size: 14px;
    font-weight: bold;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.food-btn {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

    .food-btn button {
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.1s linear;
    }

        .food-btn button.round-blue-btn {
            background: var(--blue);
            border: solid 2px var(--blue);
        }

        .food-btn button.round-orange-btn {
            background: var(--orange);
            border: solid 2px var(--orange);
        }

        .food-btn button.round-green-btn {
            background: var(--green);
            border: solid 2px var(--green);
        }

        .food-btn button.round-red-btn {
            background: var(--red);
            border: solid 2px var(--red);
        }

        .food-btn button.round-grey-btn {
            background: var(--grey-nine);
            border: solid 2px var(--grey-nine);
        }

        .food-btn button:hover {
            scale: 1.1;
            background: var(--white);
        }

    .food-btn .round-orange-btn:hover svg path {
        fill: var(--orange);
    }

    .food-btn .round-green-btn:hover svg path {
        fill: var(--green);
    }

    .food-btn .round-red-btn:hover svg path {
        fill: var(--red);
    }

    .food-btn .round-grey-btn:hover svg path {
        fill: var(--grey-nine);
    }

    .food-btn .round-blue-btn:hover svg path {
        fill: var(--blue);
    }

.food-name label {
    color: var(--orange);
    display: block;
    font-size: 13px;
}

.purchased-box {
    border-color: var(--orange);
    background: var(--orange-light);
}

.grey-box-order {
    background: var(--grey-six);
    border-radius: 10px;
    height: 145px;
    width: 175px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

.items-subject-text {
    color: var(--orange-dark);
    font-size: 14px;
    font-weight: bold;
}

.footer-box {
    margin-top: 30px;
    padding: 10px;
    text-align: center;
    color: var(--black);
    background: var(--grey-four);
    border-top: solid 1px var(--grey-two);
    font-weight: 600;
}

    .footer-box a {
        color: var(--black);
    }

.meal-not-avaialbe {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: var(--black-light);
    color: var(--white);
    text-align: center;
    left: 0px;
    top: 0px;
    padding: 10px;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    z-index: 9;
}

.calendar-top-left .dropdown a:hover svg {
    position: relative;
    z-index: 2;
}

.calendar-top-left .dropdown a:hover:before {
    content: "";
    background: var(--red);
    width: 40px;
    height: 40px;
    position: absolute;
    opacity: 0.1;
    border-radius: 50%;
    left: -8px;
    top: -6px;
}

.meal-detail-popup-top {
    display: flex;
    gap: 15px;
    padding: 20px;
}

.meal-detail-popup-top-left {
    width: 200px;
    text-align: center;
}

    .meal-detail-popup-top-left img {
        max-width: 100%;
    }

.meal-detail-popup-top-right {
    width: calc(100% - 215px);
}

    .meal-detail-popup-top-right h3 {
        font-size: 24px;
        font-weight: bold;
        color: var(--black);
        margin: 0px;
    }

    .meal-detail-popup-top-right label {
        font-size: 18px;
        font-weight: bold;
        color: var(--red);
        margin: 0px;
    }

    .meal-detail-popup-top-right .food-btn {
        justify-content: flex-start;
    }

.modal-content {
    border: 0px;
    border-radius: 20px;
}

#meal-detail .modal-body {
    padding: 0px;
}

.popup-tab-body {
    padding: 20px;
    background: var(--grey-four);
    border-top: solid 1px var(--grey-two);
    border-radius: 0px 0px 30px 30px;
}

.popup-tab .nav-link {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600 !important;
    color: var(--black);
}

    .popup-tab .nav-link.active {
        color: var(--red);
        border-bottom-color: var(--red);
    }

.nutri-detail {
    display: flex;
    gap: 20px;
}

.nutri-detail-left {
    width: 185px;
    display: flex;
    gap: 25px;
    flex-direction: column;
}

.nutri-detail-right {
    width: calc(100% - 205px);
}

.nutri-detail-left h4 {
    font-size: 24px;
    font-weight: 800;
    color: var(--black);
    margin: 0px;
}

.nutri-detail-left p {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
    margin: 0px;
}

.nutri-detail-right table {
    width: 100%;
    border-collapse: collapse;
}

    .nutri-detail-right table td {
        padding: 6px;
        background: var(--white);
        border: solid 1px var(--black);
    }

.nutri-detail-inner {
    display: flex;
    justify-content: space-between;
}

.qty-input {
    padding: 0px 0px 0px 5px;
    font-size: 14px;
    line-height: 10px;
    width: 40px;
    height: 30px;
}

.note-control {
    width: 100%;
    height: 200px;
    resize: none;
}

.cart-other-items {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

    .cart-other-items button {
        background: transparent;
        border: 0px;
        color: var(--red);
    }

.sur-order-details {
    margin: 0px;
    padding: 0px;
    list-style: none;
    padding-left: 30px;
    margin-top: 20px;
}

    .sur-order-details li {
        padding: 3px 0px;
    }

    .sur-order-details a {
        color: var(--black);
        font-weight: 600;
        text-decoration: none;
    }

        .sur-order-details a:hover {
            color: var(--orange-dark);
        }

        .sur-order-details a i {
            margin-right: 10px;
            color: var(--orange-dark);
        }

.cancel-full-weak div > a {
    color: var(--red) !important;
}

.cancel-full-weak a i {
    color: var(--red);
}

.meal-drink-popup {
    width: 270px;
    padding: 0px 10px;
    font-size: 14px;
}

    .meal-drink-popup .modal-footer {
        border-top: solid 1px var(--grey-two);
        margin-top: 8px;
        margin-left: -10px;
        margin-right: -10px;
        padding: 8px 8px 0px 8px;
    }

        .meal-drink-popup .modal-footer button {
            width: 60px;
            padding: 4px;
        }

.daily-items {
    background: var(--grey-five);
    border-radius: 10px;
    padding: 10px;
}

.select-day {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 26px;
}

    .select-day .form-check {
        margin: 0px;
        padding: 0px;
        width: 40px;
        position: relative;
    }

    .select-day .form-check-input {
        width: 40px;
        height: 40px;
        border-radius: 50% !important;
        float: none;
        margin: 0px !important;
        cursor: pointer;
    }

    .select-day .form-check-label {
        position: absolute;
        left: 13px;
        top: 9px;
        width: 15px;
        height: 5px;
        text-align: center;
        font-weight: 600;
        cursor: pointer;
    }

    .select-day .form-check-input:checked[type=checkbox] {
        background-image: none;
    }

.cancel-order li a {
    font-size: 13px;
}

    .cancel-order li a:hover {
        color: var(--black);
    }

.empty-cart {
    text-align: center;
}

    .empty-cart .bi-exclamation-diamond {
        font-size: 65px;
        color: var(--red);
    }

    .empty-cart .modal-footer {
        border: 0px;
        justify-content: center;
    }

.addons-heading {
    font-weight: bold;
    margin-bottom: 0px;
}

.food-addons-detail .daily-items {
    margin-top: 10px;
}

.page-body {
    padding: 20px 0px;
}

.grey-box-top {
    background: var(--grey-four);
    border-bottom: solid 1px var(--grey-two);
}

.custom-tab {
    gap: 20px;
    border: 0px;
}

    .custom-tab li button {
        padding: 12px 20px;
        background: transparent;
        border: 0px;
        font-size: 16px;
        color: var(--black);
        font-weight: 600;
    }

        .custom-tab li button.active {
            color: var(--red);
            border-bottom: solid 3px var(--red);
        }

.small-container {
    max-width: 800px;
    margin: 0 auto;
}

.green-btn-footer {
    padding: 8px 25px;
    border: 0px;
    background: var(--green);
    color: var(--white);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.footer-btn {
    text-align: right;
    max-width: 800px;
    margin: 0 auto;
}

.add-icon-inside-btn {
    background: transparent;
    border: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 15px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    font-weight: 500;
}

    .add-icon-inside-btn:hover {
        background: var(--grey-five);
        border-radius: 5px;
    }

.student-list {
    margin: 20px 0px 0px 0px;
    padding: 0px;
    list-style: none;
}

    .student-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        border-radius: 5px;
        margin-bottom: 10px;
        border: solid 1px var(--grey-seven);
    }

        .student-list li h4 {
            font-size: 24px;
            color: var(--black);
            margin: 0px;
            font-weight: 800;
        }

        .student-list li p {
            font-size: 14px;
            color: var(--black);
            margin: 0px;
        }

.student-list-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-icon-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0px;
    background: var(--white);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .edit-icon-btn svg path {
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .edit-icon-btn:hover {
        background: var(--grey-three);
    }

        .edit-icon-btn:hover svg path {
            fill: var(--white);
        }

.allergen-list {
    padding: 10px 20px;
    background: var(--grey-four);
    border-top: solid 1px var(--grey-two);
    border-bottom: solid 1px var(--grey-two);
    margin-top: -10px;
}

    .allergen-list h5 {
        font-size: 18px;
        font-weight: 700;
    }

.payment-container {
    padding: 20px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: solid 1px var(--grey-seven);
}

.green-switch .form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
}

.green-switch .form-check-input {
    height: 1.3em;
}

.green-switch {
    min-height: 1.6rem;
}

.po-btn-box {
    display: flex;
    gap: 10px;
    margin: 10px 0px;
}

.card-list {
    margin: 10px 0px 20px 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .card-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px 10px 20px;
        border-radius: 5px;
        border: solid 1px var(--grey-seven);
        font-size: 20px;
        color: var(--black);
        font-weight: 700;
        width: calc(50% - 8px);
    }

.notification-section h5 {
    font-weight: 700;
}

.filter-fields {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    flex-wrap: wrap;
}

    .filter-fields .form-floating {
        width: 175px;
    }

.export-btn {
    position: absolute;
    right: 0px;
    bottom: 8px;
}

    .export-btn button {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 0px;
        background: var(--red);
    }

.table td {
    vertical-align: middle;
    /*white-space: nowrap;*/
}

.table th {
    white-space: nowrap;
}

.table tr th:last-child, .table tr td:last-child {
    width: 100%;
    text-align: right;
}

    .table tr td:last-child .food-btn {
        justify-content: flex-end;
        padding-right: 2px;
    }

.green-label {
    background: var(--green);
    color: var(--white);
    border-radius: 20px;
    padding: 5px 15px;
    max-width: 135px;
    font-size: 13px;
    white-space: initial;
}

.red-label {
    background: var(--red);
    color: var(--white);
    border-radius: 20px;
    padding: 5px 15px;
    max-width: 135px;
    font-size: 13px;
    white-space: initial;
}

.order-header {
    padding: 15px 0px;
}

.detail-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

    .detail-list label {
        font-size: 13px;
        color: var(--grey-ten);
        margin-bottom: -4px;
        display: block;
    }

    .detail-list p {
        font-size: 16px;
        color: var(--black);
        font-weight: 500;
        margin: 0px;
    }

.checkout-section {
    padding: 12px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pickup-text {
    font-size: 14px;
    font-weight: 500;
}

.back-link a {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--black);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.back-link .rounded-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 0px;
}

.check-out-section {
    display: flex;
    gap: 10px;
}

.check-out-details {
    width: calc(100% - 320px);
}

.check-out-summary {
    width: 320px;
}

.cart-details-body table td {
    vertical-align: top;
}

.check-out-inner {
    margin-bottom: 20px;
}

    .check-out-inner .cart-delete {
        display: inline-flex;
    }

.table td, .table th {
    padding-right: 30px;
}

.orders-table .table td, .orders-table .table th {
    white-space: normal;
}

.table tr td:last-child, .table th:last-child {
    padding-right: inherit;
}

.check-out-details th {
    background: var(--grey-eleven);
}

.check-out-details .table {
    margin: 10px 0px 0px 0px;
}

.table-sub-total {
    font-size: 16px;
    font-weight: bold;
    color: var(--black);
}

.order-notes textarea {
    height: 100px !important;
    resize: none;
}

.check-out-summary-inner {
    border: solid 1px var(--grey-two);
    border-radius: 10px;
    padding: 6px 15px;
}

    .check-out-summary-inner ul {
        margin: 0px 0px 10px 0px;
        padding: 0px;
        list-style: none;
    }

        .check-out-summary-inner ul li {
            display: flex;
            justify-content: space-between;
            padding: 6px 0px;
            font-size: 15px;
        }

.font-bold {
    font-weight: bold;
}

.checkout-note {
    color: var(--red);
    font-size: 12px;
    font-style: italic;
}

.check-out-summary-inner .green-btn-footer {
    width: 100%;
}

.empty-cart {
    width: 100%;
    display: block;
    color: var(--red);
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0px;
}

.check-out-payment {
    max-width: 530px;
    border: solid 1px var(--grey-two);
    border-radius: 10px;
    padding: 15px;
    margin: 0 auto;
}

.stored-option {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0px;
}

    .stored-option .form-floating {
        width: calc(100% - 40px);
    }

.fees_header {
    padding: 15px 0px;
}

    .fees_header .cart-school-logo {
        width: 85px;
        height: 85px;
        padding: 10px;
        border: solid 1px var(--grey-two);
    }

    .fees_header .cart-scholl-details h3 {
        margin-bottom: 6px;
    }

    .fees_header .form-floating {
        width: 230px;
    }

    .fees_header .header-filter {
        display: flex;
        gap: 10px;
        align-items: center;
    }

.filter-checkbox {
    font-size: 14px;
    width: 200px;
    padding-left: 14px;
}

.fees-activities-section {
    display: flex;
    gap: 25px;
}

.category-section {
    width: 200px;
}

.category-section-inner {
    border: solid 1px var(--grey-two);
    border-radius: 15px;
    padding-bottom: 15px;
}

    .category-section-inner h5 {
        font-weight: 700;
        padding: 15px;
        border-bottom: solid 1px var(--grey-two);
        margin: 0px;
    }

    .category-section-inner ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    .category-section-inner li a {
        display: block;
        padding: 6px 15px;
        color: var(--black);
        text-decoration: none;
    }

        .category-section-inner li a.active, .category-section-inner li a:hover {
            background: #fef4f4;
            color: var(--red);
        }

.fees-list {
    width: calc(100% - 200px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.fees-card {
    border: solid 1px var(--grey-two);
    border-radius: 15px;
    padding: 15px;
    width: calc(100% / 4 - 12px);
    text-align: center;
    cursor: pointer;
}

    .fees-card:hover {
        border: solid 1px var(--grey-three);
    }

    .fees-card label {
        display: none;
        font-weight: bold;
        font-size: 12px;
    }

.fees-list .active {
    border-color: var(--orange);
}

    .fees-list .active label {
        color: var(--orange);
        display: block;
    }

.fees-card p {
    margin: 0px;
    font-size: 16px;
    color: var(--black);
    font-weight: bold;
}

.fees-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .fees-img img {
        max-width: 100%;
    }

.fee-detail-popup-top {
    display: flex;
    gap: 15px;
}

.fee-detail-popup-top-left {
    width: 100px;
    text-align: center;
}

    .fee-detail-popup-top-left img {
        max-width: 100%;
    }

.fee-detail-popup-top-right {
    width: calc(100% - 100px);
}

    .fee-detail-popup-top-right h3 {
        font-size: 24px;
        font-weight: bold;
        color: var(--black);
        margin: 0px;
    }

    .fee-detail-popup-top-right .amount-box {
        font-size: 18px;
        font-weight: bold;
        color: var(--red);
        margin: 0px;
    }

    .fee-detail-popup-top-right .food-btn {
        justify-content: left;
        margin-top: 10px;
    }

    .fee-detail-popup-top-right p {
        margin: 0px;
    }

    .fee-detail-popup-top-right .red-link {
        color: var(--red);
    }

.popup-tab-body-fee {
    padding: 20px;
    background: var(--grey-four);
    border-top: solid 1px var(--grey-two);
    border-radius: 0px 0px 30px 30px;
    margin: -16px;
    margin-top: 18px;
}

    .popup-tab-body-fee .nutri-detail-right {
        width: 100%;
    }

.fee-popup-form {
    margin-top: 10px;
}

.auto-draft {
    max-width: 550px;
    border: solid 1px var(--grey-two);
    border-radius: 15px;
    padding: 20px;
    margin: 0 auto;
}

.form-box-billing {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0px;
}

.form-floating {
    width: 100%;
}

.auto-draft-btn {
    border-top: solid 1px var(--grey-two);
    padding-top: 15px;
    text-align: right;
    margin: 10px -20px 0px -20px;
    padding-right: 15px;
}

    .auto-draft-btn button {
        width: auto;
        margin: 0px;
        padding: 0px 20px;
    }

.contact-text {
    margin: 0px;
    padding: 15px 0px;
}

.contact-form-box {
    max-width: 755px;
    margin: 0 auto;
}

    .contact-form-box .form-floating {
        width: 100%;
    }

    .contact-form-box .comment-contact textarea {
        resize: none;
        height: 100px;
    }

.pbb-2 {
    padding-bottom: 10px;
}

.no-data-found {
    text-align: center;
    padding: 20px 0px;
}

    .no-data-found img {
        margin-bottom: 10px;
    }

.reson-textarea textarea {
    resize: none;
    height: 150px !important;
}

.grey-box-no-data {
    height: 100%;
    background: var(--grey-twelve);
    border: solid 1px var(--grey-seven);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donate-form {
    max-width: 1000px;
    margin: 0 auto;
}

.filter-fields-big {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    flex-wrap: wrap;
}

    .filter-fields-big .form-floating {
        width: 255px;
    }

.fund-raise-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.nutri-card-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.nutri-card {
    border: solid 1px var(--grey-two);
    border-radius: 15px;
    padding: 15px;
    width: calc(100% / 4 - 12px);
    text-align: center;
    cursor: pointer;
}

    .nutri-card:hover {
        border: solid 1px var(--grey-three);
    }

    .nutri-card label {
        font-weight: bold;
        font-size: 14px;
        color: var(--red);
    }

    .nutri-card p {
        margin: 0px;
        font-size: 16px;
        color: var(--black);
        font-weight: bold;
    }

    .nutri-card a {
        margin: 0px;
        font-size: 16px;
        color: var(--black);
        font-weight: bold;
        text-decoration: none;
    }

.progress-bar {
    background: var(--grey-two);
    height: 8px;
    border-radius: 10px;
    margin-top: 10px;
}

.progress-inner {
    height: 8px;
    background: var(--green);
    border-radius: 10px;
}

.fundraise-detail {
    margin: 12px 0px;
}

.amount-text {
    text-align: center;
}

    .amount-text b {
        display: block;
        font-size: 20px;
        margin-bottom: -8px;
    }

    .amount-text span {
        display: block;
        font-size: 14px;
    }

.red-text {
    color: var(--red);
}

.green-text {
    color: var(--green);
}

.orange-text {
    color: var(--orange);
}

.fundraise-detail td {
    width: 33%;
}

.white-bg {
    background: var(--white);
}

.nutri-accordion .accordion-button {
    background: var(--grey-thirteen) !important;
    color: var(--dark-grey);
    font-weight: bold;
}

    .nutri-accordion .accordion-button:after {
        background-color: var(--white);
        border-radius: 50%;
        border: solid 1px #d2d7da;
        width: 25px;
        height: 25px;
        background-position: center center;
        background-size: 15px;
    }

.nutri-accordion .accordion-body {
    background: #f5f7fa;
}

.nutri-accordion .accordion-item {
    border-radius: 10px;
    margin-bottom: 5px;
    overflow: hidden;
}

.nutri-card label.added-to-cart {
    color: var(--green);
    font-size: 12px;
    display: none;
}

.added-cart-box {
    border-color: var(--green);
}

    .added-cart-box label.added-to-cart {
        display: block;
    }

.cart-popup-detail-top {
    align-items: center;
    margin-bottom: 10px;
}

    .cart-popup-detail-top .fee-detail-popup-top-left {
        width: 60px;
    }

.rank-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-accordion .accordion-button {
    font-weight: normal;
    padding: 6px;
}

    .rank-accordion .accordion-button .form-floating > label {
        padding: 17px 13px;
    }

.rank-text {
    display: flex;
    gap: 10px;
    font-size: 14px;
}

.fav-school-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
    gap: 10px;
}

    .fav-school-inner > ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .fav-school-inner > ul > li {
            background: var(--grey-fourteen);
            border-radius: 20px;
            color: var(--white);
            padding: 6px 15px;
            font-size: 14px;
            display: flex;
            gap: 10px;
            cursor: pointer;
        }

            .fav-school-inner > ul > li li {
                font-size: 13px;
            }

    .fav-school-inner .orange-btn {
        border-radius: 20px;
        height: auto;
        padding: 7px 20px;
    }

    .fav-school-inner > ul > li.selected-school {
        background-color: var(--red);
    }

.ticket-detail-left {
    border-right: solid 1px var(--grey-seven);
}

.ticket-qty {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    margin: 10px 0px;
}

    .ticket-qty input {
        width: 55px;
    }

    .ticket-qty span:nth-child(1) {
        min-width: 135px;
    }

.ticket-detail-left h3 {
    font-weight: bold;
    font-size: 18px;
}

.ticket-detail-left p {
    margin: 0px;
}

.ticket-detail-left .orange-btn {
    border-radius: 20px;
    height: auto;
    padding: 7px 20px;
}

.ticket-detail-right h3 {
    font-weight: bold;
    font-size: 16px;
}

.ticket-detail-right .grey-box-no-data {
    height: calc(100% - 90px);
}

.my-ticket-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.my-ticket-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tiket-container {
    justify-content: space-between;
}

.my-ticket-right .orange-btn {
    border-radius: 20px;
    height: auto;
    padding: 7px 20px;
}

.redeem-btn {
    border-radius: 20px;
    height: auto;
    padding: 7px 20px;
    width: 100%;
}

.nutri-card .tt-check {
    text-align: left;
}

    .nutri-card .tt-check .form-check-label {
        color: var(--black);
        font-weight: normal;
    }


/* ------------------------ day view css ------------------------ */
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    margin-top: -4px;
}

.day-view-container {
    display: flex;
    gap: 10px;
}

.day-view-left {
    width: 320px;
}

.day-view-right {
    width: calc(100% - 320px);
}

.day-view-img {
    text-align: center;
    margin-bottom: 20px;
}

.form-floating .day-view-notes {
    height: 100px;
    resize: none;
}

.day-view-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.day-view-right .calendar-food-box .food-img img {
    max-width: 100%;
}

.day-view-right .calendar-food-box {
    min-height: 230px;
}

    .day-view-right .calendar-food-box .food-btn {
        position: absolute;
        bottom: 9px;
        width: calc(100% - 21px);
    }

    .day-view-right .calendar-food-box .food-name {
        height: auto;
        margin-bottom: 10px;
    }

.date-day-view {
    margin: 0px;
    font-size: 20px;
    color: var(--black);
    font-weight: bold;
    text-align: center;
}

.day-view-right table {
    width: 100%;
}

    .day-view-right table td {
        vertical-align: top;
    }

.ui-datepicker {
    background: #fff;
    border: solid 1px var(--grey-thirteen);
    box-shadow: 0px 7px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.ui-datepicker-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ui-datepicker-title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    background: var(--grey-thirteen);
}

.ui-datepicker-prev {
    color: var(--red);
    text-decoration: none;
    padding: 5px 10px;
}

.ui-datepicker-next {
    color: var(--red);
    text-decoration: none;
    padding: 5px 10px;
}

.ui-datepicker-calendar {
    width: calc(100% - 20px);
    margin: 10px;
}

    .ui-datepicker-calendar td,
    .ui-datepicker-calendar th {
        padding: 5px;
        text-align: center;
    }

        .ui-datepicker-calendar td a {
            color: var(--grey-ten);
            text-decoration: none;
        }

    .ui-datepicker-calendar .ui-datepicker-today a {
        color: var(--red);
    }

    .ui-datepicker-calendar .ui-datepicker-current-day {
        background: var(--grey-thirteen);
        border-radius: 5px;
    }

        .ui-datepicker-calendar .ui-datepicker-current-day a {
            color: var(--dark-grey);
        }

.login-container {
    display: flex;
    height: 100vh;
}

.login-left {
    width: 65%;
    background: url("../images/login-bg.jpg") no-repeat;
    background-size: cover;
    height: 100%;
}

.login-right {
    width: 35%;
    height: 100%;
}

.login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

    .login-links a {
        color: var(--black);
        text-decoration: none;
        transition: var(--animation);
    }

        .login-links a:hover {
            color: var(--orange);
            text-decoration: none;
        }

.login-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 61px);
}

    .login-detail .form-floating input {
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }

.login-box {
    max-width: 375px;
}

    .login-box .logo-box {
        text-align: center;
        margin-bottom: 30px;
    }

        .login-box .logo-box img {
            text-align: center;
            max-width: 100%;
        }

    .login-box h2 {
        color: var(--black);
        font-size: 20px;
        font-weight: 700;
        margin: 0px 0px 10px 0px;
        text-align: center;
    }

    .login-box .form-floating .login-icon-left {
        position: absolute;
        left: 10px;
        top: 14px;
    }

#login-form .form-floating {
    margin-bottom: 10px;
}

    #login-form .form-floating .form-control {
        padding: 5px 32px;
    }

    #login-form .form-floating > label {
        padding: 13px 32px;
    }

        #login-form .form-floating > label:after {
            inset: inherit !important;
        }

.login-icon-right {
    position: absolute;
    right: 8px;
    top: 0px;
    cursor: pointer;
    width: 20px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-login-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .check-login-box a {
        color: var(--red);
    }

.login-btn {
    width: 100%;
    text-align: center;
    padding: 8px 20px;
    color: var(--black);
    background: rgb(242,165,22);
    background: linear-gradient(107deg, rgba(242,165,22,1) 55%, rgba(242,102,39,1) 100%);
    border: 0px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    margin: 10px 0px;
    transition: var(--animation);
}

.create-account-link {
    text-align: center;
}

    .create-account-link a {
        color: var(--red);
        font-size: 16px;
    }

.eye-close {
    display: none;
}

.fa-eye-slash .eye-close {
    display: block;
}

.fa-eye-slash .eye-open {
    display: none;
}

#register-account a {
    color: var(--red);
    font-size: 14px;
}

#register-account .form-floating {
    margin-bottom: 10px;
}


@media(max-width:1023px) {
    .login-left {
        display: none;
    }

    .login-right {
        width: 100%;
    }

    .login-box {
        max-width: 100%;
    }

    .login-container {
        background: var(--light-grey);
    }
}

.catering-btn {
    background: var(--orange);
    border-radius: 6px;
    text-align: center;
    border: 0px;
    color: var(--white);
    font-size: 14px;
    padding: 8px 20px;
    text-decoration: none;
}

.AddFav {
    background: var(--orange);
    border-radius: 6px;
    text-align: center;
    border: 0px;
    color: var(--white);
    font-size: 14px;
    padding: 8px 20px;
    text-decoration: none;
    margin-bottom: 15px;
    display: inline-block;
}

.calendar_detailBox h5 {
    font-weight: bold !important;
    color: var(--black);
    text-align: center;
    font-size: 14px;
}

.create-account-selection {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.create-account-selection-inner {
    background: var(--white);
    border: solid 1px var(--grey-two);
    border-radius: 10px;
    width: 226px;
    position: relative;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

    .create-account-selection-inner:hover {
        background: var(--white);
        border: solid 1px var(--orange);
    }

.create-account-selection .active {
    background: var(--white);
    border: solid 1px var(--orange);
}

.create-account-selection-inner h4 {
    font-weight: bold !important;
    color: var(--black);
    text-align: center;
    font-size: 18px;
}

.create-account-heading {
    margin: 0px;
    font-size: 30px;
    color: var(--black);
    font-weight: bold;
    text-align: center;
}

.create-account-selection-inner-icon-box {
    padding: 30px 0px;
    text-align: center;
}

.create-account-selection-inner-icon {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgb(253,204,12);
    background: linear-gradient(126deg, rgba(253,204,12,1) 0%, rgba(245,128,25,1) 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-account-selection-fields {
    max-width: 400px;
    padding: 30px 0px;
    margin: 0 auto;
    text-align: center;
}

    .create-account-selection-fields .form-floating {
        margin-bottom: 10px;
    }

    .create-account-selection-fields .orange-btn {
        padding: 10px 30px;
        height: auto;
    }

.red-text-steric {
    color: var(--red);
    margin-right: 5px;
}

#ulMultiCategoryList .fees-name {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*#powerTip{
    padding-bottom: 0px;
    top: 100px !important;
    left: 50% !important;
    transform: translate(-50%, 0%) !important;
}*/
.calendar_detailBox {
    position: relative;
}

.holidays {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 5px;
    font-size: 12px;
}

.ui-dialog-buttonset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .ui-dialog-buttonset button {
        background: var(--green);
        border: 0px;
        padding: 8px 20px;
        border-radius: 5px;
        color: var(--white);
    }

.header-right .dropdown .cart {
    position: fixed;
    z-index: 9;
    right: 4px;
    top: 109px;
    height: calc(100vh - 117px);
}

.header-right .header-icons .dropdown .dropdown-menu.show {
    transform: none !important;
    height: 100%;
}

.cart-close-btn {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s linear;
    background: var(--red);
    border: solid 2px var(--red);
    position: absolute;
    right: 4px;
    top: 3px;
    color: #fff;
    font-size: 13px;
}

.cart-details-body .table .sub-total {
    padding: 10px !important;
}





@media(max-width:1199px) {
    .header-bottom .navbar li a {
        border-bottom: solid 1px var(--grey-two);
    }

    .account-balance {
        padding: 8px 10px;
        justify-content: center;
    }

    .header-bottom {
        border: 0px;
    }

        .header-bottom .show {
            border-bottom: solid 1px var(--grey-two);
        }
}

@media(max-width:991px) {
    .container {
        max-width: 100%;
    }
}

@media(max-width:767px) {
    .calendar-top {
        flex-wrap: wrap;
    }

    .calendar-top-left {
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }

    .calendar-container {
        padding: 8px 0px;
    }

    .calendar-right {
        width: 100%;
        justify-content: center;
        position: relative;
    }

    .user-details-text {
        display: none;
    }

    .logo-box {
        display: flex;
        gap: 10px;
    }

    .header-top {
        flex-wrap: wrap;
    }

    .header-right {
        width: 100%;
        justify-content: center;
    }

    .user-details .dropdown {
        position: absolute;
        right: 5px;
        top: 0px;
    }

    .rounded-btn {
        min-width: 40px;
    }

    .calendar-month h3 {
        font-size: 14px;
    }

    .calendar-month a {
        font-size: 13px;
    }

    .print-icon {
        position: absolute;
        left: 14px;
    }

    .allergy-icon {
        position: absolute;
        right: 14px;
    }

    .change-month-year {
        margin-top: 15px !important;
        margin-left: -7px !important;
    }

    .items-scroll {
        width: 100vw;
    }

    .filter-fields .form-floating {
        width: 100%;
    }

    .filter-fields-big .form-floating {
        width: 100%;
    }

    .nav-tabs li {
        width: 100%;
    }

        .nav-tabs li button {
            width: 100%;
            border-bottom: solid 1px #ccc;
        }

        .nav-tabs li:last-child button {
            border-bottom: 0px;
        }

    .detail-list > div {
        width: 100%;
    }

    .check-out-section {
        flex-wrap: wrap;
    }

    .check-out-details, .check-out-summary {
        width: 100%;
    }

    .nutri-card {
        width: 100%;
    }

    .fees-card {
        width: 100%;
    }

    .fees-activities-section {
        flex-wrap: wrap;
    }

    .category-section, .fees-list {
        width: 100%;
    }

    .fav-school-inner > ul > li {
        width: 100%;
        justify-content: space-between;
    }

    .fav-school-inner .orange-btn {
        width: 100%;
    }
}

/* --------------- ColorBox fix ------------------------- */

#colorbox {
    width: 800px !important;
    border-radius: 0px;
    margin-left: auto;
    right: 0px;
    height: 100vh !important;
}

    #colorbox .modal-header {
        padding: 10px;
        border-bottom: solid 1px var(--grey-two);
    }

    #colorbox #cboxContent,
    #colorbox #cboxLoadedContent,
    #colorbox #cboxWrapper {
        width: 100% !important;
        overflow: hidden !important;
    }

    #colorbox .modal-header .btn-close {
        display: none;
    }

    #colorbox #cboxClose {
        right: 10px;
    }

    #colorbox .accordion-item {
        border: solid 1px var(--grey-two);
        margin-bottom: -1px;
        padding: 0px
    }

    #colorbox .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        cursor: pointer;
    }

        #colorbox .accordion-header h3 {
            margin: 0px;
            font-size: 16px;
            font-weight: bold;
        }

    #colorbox .accordion-item .arrow {
        transition: transform 0.3s;
        font-size: 10px;
    }

    #colorbox .accordion-content {
        padding: 0px 10px 10px 10px;
    }

    #colorbox .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 115px);
    }

    #colorbox .modal-dialog {
        pointer-events: auto;
    }

    #colorbox .modal-footer {
        padding: 0px 15px;
    }

    #colorbox .custom-modal-footer .btn-grey {
        background: #adaeb9;
        font-size: 14px;
        color: var(--white);
    }

    #colorbox .custom-modal-footer .btn-green {
        background: #8dc63f;
        font-size: 14px;
        color: var(--white);
    }

@media(max-width:800px) {
    #colorbox {
        width: 100% !important;
    }
}

/* --------------- ColorBox fix ------------------------- */

.form-check-checkbox-list {
    display: inline-block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin: 2px;
    min-width: 115px;
}

    .form-check-checkbox-list .form-check-label {
        padding-left: 5px;
    }

.form-switch-checkbox-list {
    padding-left: 2.5em !important;
}

/*#powerTip {
    left: 50% !important;
    top: 100px !important;
    transform: translate(-50%, 0);
}*/

#Content_Content_registrationiAddStduent {
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0px;
    display: flex;
    flex-wrap: wrap;
}

    #Content_Content_registrationiAddStduent h2 {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }

#Content_Content_StudentsInAccount_panelAdd {
    width: 48%;
}

#Content_Content_StudentsInAccount_panelList {
    width: 50%;
}

#Content_Content_StudentsInAccount_panelAdd .col-md-4 {
    width: 100%;
    margin-bottom: 15px;
}

#Content_Content_StudentsInAccount_panelAdd .add-student {
    margin: 20px 0px 0px 0px !important;
}

#Content_Content_pnlPlanning {
    width: 100%;
    padding: 10px;
    text-align: center;
    background: var(--grey-two);
    margin-top: 20px;
    border-radius: 5px;
}

    #Content_Content_pnlPlanning a {
        color: #ec2628;
    }

#Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel {
    width: 48%;
    border: 0px;
}

    #Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel h3 {
        font-size: 20px;
    }

    #Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel .arrow {
        display: none;
    }

    #Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel .accordion-item {
        padding: 10px;
    }

    #Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel .col-md-4 input {
        width: 100% !important;
    }

    #Content_Content_registrationiAddStduent #Content_Content_EditStudent_StudentPanel .col-md-4 select {
        width: 100% !important;
    }

.btn-grey {
    background: #adaeb9;
    font-size: 14px;
    color: var(--white);
}

.btn-green {
    background: #8dc63f;
    font-size: 14px;
    color: var(--white);
}

    .btn-green:hover {
        fill: var(--green)
    }

@media (max-width: 429px) {

    div.contents .cart-details .table tbody tr td:last-child {
        min-width: 35px !important;
        width: 35px !important;
    }

        div.contents .cart-details .table tbody tr td:last-child button {
            width: 35px !important;
            padding: 0px !important;
        }

    div.contents .cart-details .table tbody tr td:nth-child(2) {
        min-width: 150px !important;
            
    }
    div.contents .cart-details .table tbody tr td:nth-child(1) {
        min-width: 70px;
        max-width: 70px;
        white-space: normal;
    }

    div.contents .cart-details .table thead tr th {
        padding: 5px !important;
        font-size: 14px !important;
            
    }
}

#tab-students .row .col-md-12 .fixed-div,
#tab-students > .row > .col-md-12 > .col-md-7,
#tab-students > .row > .col-md-12 > .bottom-fixed-div {
    height: calc(100vh - 180px);
}

#tab-students > .row > div.col-md-12:first-of-type {
    display: flex;
    gap: 20px;
}

#tab-students .row .col-md-12 .fixed-div {
    position: relative;
    top: 0px;
    left: 0;
    padding: 0px 10px;
    box-sizing: border-box;
    border: solid 1px var(--grey-seven);
    border-radius: 5px;
}

#tab-students > .row > .col-md-12 > .col-md-7 {
    margin-left: 0px !important;
    overflow-y: auto;
}

#tab-students > .row > .col-md-12 > .bottom-fixed-div {
    position: relative;
    bottom: 0px;
    right: 0px;
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
}

@media(max-width:1024px) {
    #tab-students > .row > div.col-md-12:first-of-type {
        flex-wrap: wrap;
        flex-direction: column;
    }

    #tab-students .row .col-md-12 .fixed-div,
    #tab-students > .row > .col-md-12 > .col-md-7,
    #tab-students > .row > .col-md-12 > .bottom-fixed-div {
        height: auto;
        width: 100% !important;
    }

    #tab-students > .row > .col-md-12 > .bottom-fixed-div {
        position: fixed;
        z-index: 999;
        bottom: 0px;
        padding: 10px;
        width: 100%;
        background: #fff;
        border-top: solid 1px var(--grey-seven);
        justify-content: center;
    }
}