@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;900&display=swap');

:root {
    --bg-color-list-product: #f8f9fa;
    --bd-color-list-product: #CCCCCC;
    --bg-color-list-product-hover: #6eec5a;
    --bd-color-list-product-hover: #09D129;
    --bg-total-amount-summary: #5ad1f6;
    --bg-total-customer-summary: #09D129;
    --bg-total-amount-order-summary: #712cf9;
    --bg-total-order-summary: #ffc107;
    --bg-lol: #8efc8e;
    --bg-slightlightGrey: #eaeaea;
    --bg-red-light: rgba(252, 209, 209, 0.35);

    /*    =====Cashier Css corlor======*/
    --bg-active-side-nav: #09D129;
    --bg-button-hover: #048d1c;

    /*    =====Finance CSS ======*/
    --bg-light: #f4f6fa;
    /*    ===================   */

}

.bg-lol {
    background-color: #8efc8e !important;
}

.bg-add-btn {
    background-color: #09d129;
}

.bg-view-btn {
    background-color: #5ad1f6;
    color: white;
}

.bg-edit-btn {
    background-color: #8efc8e;
    color: white;
}

.bg-delete-btn {
    background-color: #f34011;
    color: white;
}

.breadcrumb-item a {
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.active a {
    color: #000000;
}

.bundle-item {
    cursor: pointer;
    width: 110px;
    height: 110px;
}

.bundle-item:hover {
    background-color: white !important;
    border: 1px solid green !important;
}

/*Radio button as a box select */
.bundle_radio label {
    border: 3px solid var(--bs-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.bundle_radio input[type="radio"]:checked + label {
    border-color: var(--bd-color-list-product-hover);
    background-color: white;
}

.bundle_radio label:hover {
    border-color: var(--bg-color-list-product-hover);
    background-color: #EEEEEE;
}

.item-box {
    border: 2px solid var(--bd-color-list-product);
    background-color: white;
    height: 100px;
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
}

.item-box:hover {
    /*border: 2px solid green;*/
    border: 2px solid var(--bd-color-list-product-hover);
}

.item-box:active {
    border: 4px solid var(--bd-color-list-product-hover);
}

.invoice_block {
    font-family: 'Roboto', sans-serif !important;
    width: 350px;
    height: auto;
}

.font-size-invoice {
    font-size: 12px;
}

@media print {
    body {
        visibility: hidden;
    }

    #invoice-ticket {
        visibility: visible;
        border: 1px solid transparent;
    }
    #receipt_ticket{
        visibility: visible;
        border: 1px solid transparent;
    }
}

.item_list_block {
    /*border: 1px solid green;*/
    height: 80%;
}

.block-amount-summary {
    border-radius: 10px;
    border-color: var(--bg-total-amount-summary);
    background-color: var(--bg-total-amount-summary);
}

.block-customer-summary {
    border-radius: 10px;
    border-color: var(--bg-total-customer-summary);
    background-color: var(--bg-total-customer-summary);
}

.icon-summary {
    font-size: 60px;
    /*border: 1px solid red;*/
}

.block-total-order-amount-summary {
    border-radius: 10px;
    background-color: var(--bg-total-amount-order-summary);
}

.block-total-order-summary {
    border-radius: 10px;
    background-color: var(--bg-total-order-summary);
}

#camera {
    border: 1px solid var(--bd-color-list-product-hover);
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    width: 100%;

}

/*Customize layout sidebar*/
.layout-sidebar {
    /*border: 1px solid green;*/
    width: 5%;
}

.layout-content {
    width: 95%;
}

#ul_side {
    /*border: 1px solid red;*/

}

.list_item_sidebar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    /*border: 1px solid red;*/
    font-size: 20px;
}
.list_item_sidebar:hover.active_list{
    background-color: var(--bg-active-side-nav);
}
.list_item_sidebar:hover{
    background-color: var(--bg-slightlightGrey);
    color: black;
}

.active_list {
    background-color: var(--bg-active-side-nav);
    border: 1px var(--bg-active-side-nav);
}

.active_list:active {
    background-color: var(--bg-active-side-nav) !important;
}

.link_nav_side_bar {
    text-decoration: none;
    color: black;
}

.cashier.active {
    color: white !important;
}

.top-section {
    /*border: 1px solid green;*/
    height: 10vh;
}

.product_section {
    /*border: 1px solid green;*/
    height: 90vh;
}

.button-continue {
    background-color: var(--bg-active-side-nav);
    color: white;
}

.button-continue:active {
    background-color: var(--bg-active-side-nav) !important;
}

.button-continue:hover {
    background-color: var(--bg-button-hover);
    color: white;
}

.btn-plus {
    background-color: var(--bg-active-side-nav);
    color: white !important;
}

.btn-minus {
    color: var(--bg-active-side-nav) !important;
    border: 3px solid var(--bg-active-side-nav);
}

/*css Finance*/
.bg-color-slight {
    background-color: var(--bg-light);
}

#menu {
    padding: 5px;
    /*border: 1px solid red;*/
}

#menu li a {
    /*width: 100%;*/
}

#menu li {
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: var(--bg-light);
    width: 100%;
}

.tab_active {
    background-color: var(--bg-active-side-nav) !important;
}

.title_active {
    color: white !important;
}

.top-section.customer-index {
    background-color: white;
}

.below_section {
    height: 90vh;
    /*border: 1px solid red;*/
}

.shorten_nav {
    /*border:2px solid red;*/
    position: relative;
    min-height: 100vh;
}

.list_nav {
    /*border: 1px solid green;*/
}

.right_section {
    /*border: 1px solid red;*/
}

.left_section {
    /*border: 1px solid green;*/
    z-index: 1000;
}

.up_section {
    /*border: 1px solid red;*/
}

.customer-index {
    height: 10vh;
}

@media (max-width: 1080px) {
    .card-view {
        width: 100% !important;
    }
}

/*Login CSS*/
.middle_block {
    min-height: 60%;
}

.left_side {
    background-color: #85ba67;
    overflow: hidden;
}

.body-block {
    background-color: #ecffe1;
}

.active_profile {
    background-color: var(--bg-active-side-nav);
    color: white !important;
}

.active_profile:hover {
    background-color: var(--bg-active-side-nav) !important;
    color: white !important;

}


/* Customize style by Coca on Form */
.required > label:after, .required > .label:after {
    content: ' *';
    color: #C3232D;
}

/*Cadt cateen logo*/
.cadt_canteen_logo{
    /*border: 1px solid red;*/
    margin-top: 5px;
}
.cadt_canteen_logo .logo_name{
    font-size: 10px;
    line-height: 1;
}
.logo_canteen{
    /*border: 1px solid red;*/
    width: 30px;
    height: auto;
}
.cadt_logo{
    /*border: 1px solid red;*/
    width: 50px;
    height: auto;
}
.status_label{
    padding: 5px 10px;
    border-radius: 5px;
    margin: auto 0;
    /*display: block;*/

}
.active_label{
    border: 1px solid #ccf8e4;
    background-color: #ccf8e4;
    color: #36cd95;
}
.inactive_label{
    border: 1px solid #ffe2df;
    background-color: #ffe2df;
    color: #f6705b;
}

.categories .nav-link{
    color: var(--bg-active-side-nav);
}
.categories .nav-link.active{
    background-color: var(--bg-active-side-nav);
    border-radius: 5px;
}
.category-title{
    color:var(--bg-active-side-nav);
}

#bundleCollapse{
    /*border: 1px solid red;*/
    text-align: center;
    list-style: none;
}
.sub_list{
    /*background-color: white!important;*/

}
.active_sublist, .active_sublist>i, .active_sublist>span{
    color: var(--bg-active-side-nav) !important;
}
.report_navs > .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-width: 2px;
    border-color: #ffffff #ffffff var(--bg-active-side-nav);
}
.btn_download{
    color: var(--bg-active-side-nav);
    font-size: 20px;
    background-color: #D9FFC8;
    border-radius: 5px;
}
.form-check{
    margin-left: 5px;
}
.money_text{
    color: var(--bg-active-side-nav);
}
.number_text{
    color: #d39e00;
}


/*Add here 12/17/22*/
.isHidden {
    display: none; /* hide radio buttons */
}

.label {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 10%;
}

.radio:checked + .label {   /* target next sibling (+) label */
    background-color: var(--bg-active-side-nav);
    color: black;
}
.option-wrapper{
    border: 1px solid var(--bs-secondary);
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-color: white;
}
.radio:checked + .label .option-wrapper{
    border: 1px solid var(--bg-active-side-nav);
}
.label:hover{
    cursor: pointer;
}
.label:hover > .option-wrapper{
    border: 1px solid var(--bg-active-side-nav);
}
.product_section{
    /*border: 1px solid red;*/
}
/* ============Scroll bar=============== */
.product_section::-webkit-scrollbar,
.item_list_block::-webkit-scrollbar {
    width: 0.5rem;
    background-color: #eaeaea;
    border-radius: 0.5rem;
}
.product_section::-webkit-scrollbar-thumb,
.item_list_block::-webkit-scrollbar-thumb {
    background-color: lightgrey;
    border-radius: 0.5rem;
}
.product_section::-webkit-scrollbar-thumb:hover,
.item_list_block::-webkit-scrollbar-thumb:hover {
    background-color: grey;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--bg-active-side-nav);
    border-color: var(--bg-active-side-nav);
}
.bg-red-light{
    background-color: var(--bg-red-light);
}
.enable-product.form-check-input:checked {
    background-color: var(--bg-active-side-nav);
    border-color: var(--bg-active-side-nav);
}