body {
    color: black;
}

.modal-xl {
    /* max-width: 1200px; */
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



.counter {
    font-weight: 700;
}


.sessionAlert {
    position: fixed;
    top: 19px;
    left: 0px;
    margin: auto;
    margin-bottom: 0px;
    right: 0px;
    z-index: 5000;
    text-align: center;
    display: inline-block;
    width: auto;
    max-width: 550px;
    font-weight: 700;
    font-size:16px;
    padding: 8px 0px;
    text-transform: capitalize;
    
    border-radius: 6px;
}


.sessionAlert.success {
    background-color: #f3f7f7;
    color: #242934;
    box-shadow: 0px 1px 4px 0px lightgrey;
}



.sessionAlert.danger {
    background-color: #dc3545;
    color: white;
    box-shadow: 0px 1px 4px 0px whitesmoke;
}

.custom-border li{
    border-radius: 5px !important;
}

@media (min-width: 1670px){
    .page-wrapper.horizontal-wrapper .page-body-wrapper.horizontal-menu header.main-nav .main-navbar .right-arrow {
        display: none;
    }
}

/* .page-wrapper.horizontal-wrapper .page-body-wrapper.horizontal-menu header.main-nav .main-navbar #mainnav {
    justify-content: center;
} */

.page-wrapper.horizontal-wrapper .page-body-wrapper.horizontal-menu header.main-nav {
    z-index: 3;
    height: 54px;
    line-height: inherit;
    position: fixed;
    width: 100%;
    top: 77px;
    background: #fff;
    border-top: 1px solid #e6edef;
    border-bottom: 1px solid #e6edef;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper.horizontal-menu header.main-nav .main-navbar #mainnav {
    display: flex;
    width: 100%;
}


.homePreloader {
    max-width: 250px;
}

.of-contain {
    object-fit: contain;
}

.noevents {
    pointer-events: none;
}


.noeventsTable {
    pointer-events: none;
    background-color: transparent !important;
    color: black !important;
}

.noevents-p {
    pointer-events: none;
}

.modal {
    background-color: #000000d6;
}


.bc-white {
    border-color: white;
}


.title-flex {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.br-0 {
    border-radius: 0px !important;
}


.br-5 {
    border-radius: 5px;
}

.br-12 {
    border-radius: 12px !important;
}


.badge-theme-blue {
    background-color:#96D0C4;
    color:black;
    border-radius:5px;
}


.badge-theme-blue:hover,
.badge-theme-blue:focus,
.badge-theme-blue.active {
    background-color:#84bbb0;
}

.bg-theme {
    background: white;
    background: linear-gradient(120deg, rgb(255 255 255) 71%, rgb(253 253 253) 89%);
}


.bg-theme-blue {
    background: rgb(123,176,165);
    background: linear-gradient(120deg, rgba(123,176,165,1) 53%, rgba(51,122,108,1) 96%); 
    border-color: rgb(123, 176, 165);
}



.w-150 {
    width: 150px !important;
}




.fw-700 {
    font-weight: 700 !important;
}


.fw-600 {
    font-weight: 600 !important;
}



.mw-auto {
    min-width: auto !important;
}



.mw-80 {
    min-width: 80px;
}


.mw-100 {
    min-width: 100px;
}



.mw-160 {
    min-width: 160px;
}



.mw-200 {
    min-width: 200px;
}


.mw-240 {
    min-width: 240px;
}

.mw-260 {
    min-width: 260px;
}

.mw-300 {
    min-width: 300px;
}






/* max widths */

.maxw-80 {
    max-width: 80px;
}


.maxw-100 {
    max-width: 100px;
}



.maxw-160 {
    max-width: 160px;
}



.maxw-200 {
    max-width: 200px;
}


.maxw-240 {
    max-width: 240px;
}

.maxw-260 {
    max-width: 260px;
}

.maxw-300 {
    max-width: 300px;
}


.mw-60 {
    max-width: 60px;
}






.h-34 {
    height: 34px !important;
}


.h-35 {
    height: 35px !important;
}


.h-46 {
    height: 46px;
}

.hf-46 {
    height: 46px !important;
}


.lh-22 {
    line-height: 22px;
}

.fz-11 {
    font-size: 11px;
}



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


.fz-13 {
    font-size: 13px;
}


.fz-14 {
    font-size: 14px;
}

.fz-15 {
    font-size: 15px;
}

.fz-16 {
    font-size: 16px;
}


.fz-17 {
    font-size: 17px;
}

.fz-18 {
    font-size: 18px;
}


.fz-19 {
    font-size: 19px;
}

.fz-21 {
    font-size: 21px;
}



/* side by side popnote */
.sidebyside::after {
    content:' / ';
}


.sidebyside:last-of-type::after {
    content:none;
}




/* pagination */
.pagination-wrap .pagination {
    justify-content: center;
}



.pagination-wrap li a, 
.pagination-wrap li span {

    padding: 2px 15px;
    display:inline-block;
    width: 100%;

}

.pagination-wrap li {

    padding: 0px;
    background-color: whitesmoke;
    font-size: 17px;
    color: #337A6C;
    font-weight: 600;

}



.pagination-wrap li.active {

    background-color: #337A6C;
    color: white;
    font-weight: 700;

}



.vertical-middle {
    vertical-align: middle;
}


.vertical-middle-table th,
.vertical-middle-table td {

    vertical-align: middle !important;
}











.form-control,
.form-select {
    color: black;
}


.checkbox-types {
    border-bottom: 1px solid whitesmoke;
    margin-bottom: 6px;
    padding-bottom: 2px;
}

.checkbox-types label {
    font-weight:500 !important;
}





.table-styling-white.table-striped tbody tr:nth-of-type(2n+1) {

    background-color: white;
}




.table-styling-white.table-striped tbody tr:nth-of-type(2n+1) th,
.table-styling-white.table-striped tbody tr:nth-of-type(2n+1) td
 {
    color: #337A6C;
}




.table-styling-inputs.table-primary thead {
    background-color: white;
    border-color: white;
}

.table-styling-inputs.table-primary thead th {
    color: #242934;
}


.table-styling-inputs.table-primary tbody tr {
    background-color: #E8FFDE !important;
}

.table-styling-inputs.table-primary tbody tr.tr-ingredient .form-control[readonly] {

    background-color: transparent !important;

}



.table-styling-inputs.table-primary tbody tr.tr-portion {
    
    background-color: #FDEAC9;
}



.table-styling-inputs.table-primary tbody tr.tr-portion .form-control[readonly] {

    background-color: transparent !important;

}









/* ---------------------- */


.table-styling-inputs.table-primary tbody tr.tr-snack {

    background-color: #FBD0D3;
}



.table-styling-inputs.table-primary tbody tr.tr-snack .form-control[readonly] {

    background-color: transparent !important;

}





/* ---------------------- */


.table-styling-inputs.table-primary tbody tr.tr-side {

    background-color: #C9E5FD;
}



.table-styling-inputs.table-primary tbody tr.tr-side .form-control[readonly] {

    background-color: transparent !important;

}





/* ---------------------- */


.table-styling-inputs.table-primary tbody tr.tr-drink {
    
    background-color: #E2E2E2;
}



.table-styling-inputs.table-primary tbody tr.tr-drink .form-control[readonly] {

    background-color: transparent !important;

}






/* ---------------------- */


.table-styling-inputs.table-primary tbody tr.tr-sauce {

    background-color: #ebc9fdf2;
}



.table-styling-inputs.table-primary tbody tr.tr-sauce .form-control[readonly] {

    background-color: transparent !important;

}





.table-styling-inputs {
    border-color: #7bb0a5 !important;
}




.dropify-wrapper {

    border:2px solid #7BB0A5;
    border-radius: 6px;
    color: #ffe1a9
}


.dropify-outer.builder .dropify-wrapper {

    max-height: 175px;
}


.form-control[readonly] {
    cursor: not-allowed !important;
    background-color: #69988e !important;
    color: white !important;
}


table .form-control[readonly] {
    color: #111 !important;
}

.form-control[readonly]::placeholder {
    color: whitesmoke !important;
}


.seperator-top {

    border-top: 1px solid #ffe1a9;

}

.seperator-top-blue {

    border-top: 1px solid #84bbb0;

}





.seperator-bottom-navy {

    border-bottom: 1px solid #337a6c;

}


.seperator-bottom-offwhite {

    border-bottom: 1px solid #fcfcfc;

}


.seperator-bottom-blue {

    border-bottom: 1px solid #7bb0a5;

}



.form-switch {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom:0px;
}


.form-switch label {
    margin-bottom: 0px;
    margin-left: 18px;
    font-size: 16px;
}

.form-switch .form-check-input {
    height: 24px;
    width: 55px;
    margin-top:0px;
    box-shadow:none !important;
}


.form-check-input:checked {
    background-color: #69988e;
    border-color: #69988e;
}



/* popover button active */
.card-right-section .item-popover.active {
    background-color: #337a6c;
    color:white;
}


.thin-border {
    border: 5px solid transparent !important
}


.text-theme {
    color: #337A6C;
}


.text-theme-blue {
    color: #96D0C4;
}


.text-black {
    color: #111;
}




.bg-black {
    background-color: #111 !important;
}

.bg-theme-blue {
    background-color: #96D0C4;
}

.bg-theme-blue:hover, .bg-theme-blue:focus {
    background-color: #7BB0A5;
}


.btn {
    border-radius: 3px;
}


.btn-dark {
    background-color: #111 !important;
    border-color: #111 !important;
}


.btn-outline-dark {
    border-color: #111 !important;
    color: #111 !important;

}



.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
    
    background-color: #111 !important;
    border-color: #111 !important;
    color: white !important;

}




.danger-darker {
    border-color:#a82431;
    color:white;
    background-color: #a82431;
}


.danger-outline-darker {
    border:1px solid#a82431;
    color:#a82431;
}

.danger-outline-darker i {
    color:#a82431 !important;
}

.menu-input {
    height: 42px;
    border-radius: 4px;
    border: 1px solid #84bbb0;
}


.menu-input:hover, .menu-input:focus {
    border-radius: 4px;
    border: 1px solid #337A6C;
}



.small-input {

    height: 30px !important;

} 




.menu-textarea {
    height: 130px;
}




.with-label {
    background-color: #7BB0A5;
    color:white;
    align-items: center;
    border-radius: 5px;
    padding:6px 0px;
}

.with-label label {
    font-size: 14px;
    display: block;
    margin-bottom: 0px;
    text-align: center;
}


.with-label input {
    height: 34px;
    text-align: center;
    font-size: 14px;
}


.with-label textarea {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
}


.delete-button {
    height: 35px;
    font-size: 18px;
    text-align: center;
    padding: 0px;
    width: 35px;
}


.delete-button.small {
    height: 30px;
    font-size: 17px;
    text-align: center;
    padding: 0px;
    width: 30px;
}



.small-price {
    font-size:11px;
    font-weight: 600;
}








.menu-btn {
    font-size: 13px;
    height:42px;
}





.radio-title {
    border-bottom: 1px solid #337a6c;
    padding-bottom: 10px;
    padding-top: 15px;
    font-weight:600;
    margin-bottom: 0px;
    font-size:16px;
    text-transform: uppercase;
}



.radio-label {
    width: 100%;
    color: white;
    font-weight: 600;
    font-size:16px !important;
    cursor: pointer;
}


.radio-label.active {
    background-color: #4c7d72;
}








/* ============================= */
/* menu page */



.nav-item.same-link {
    margin-left: 0px !important;
    border-right: 1px solid #337A6C;
}

.nav-item.same-link a {
    border-radius: 0px;
}


.nav-item.same-link:last-of-type {

    border-right: 1px solid transparent;
}

.nav-item.same-link:first-of-type a {
    border-top-left-radius: 0.25rem;
}

.nav-item.same-link:last-of-type a {
    border-top-right-radius: 0.25rem;
}


.mr-20 {
    margin-right: 20px !important;
}

.bc-transparent {
    border-color: transparent !important;
}




.pagination-links span.relative.z-0.inline-flex.shadow-sm.rounded-md{
    display:none
}


.pagination-links div div p {
    margin-top:25px;
    text-align:center;
}


.pagination-links nav div:first-of-type {
    margin-top:15px;
    text-align:center;
}


/* ================================= */
/* menu card */


.menu-card {
    position: relative;
    border:none;
    border-radius: 4px;
    margin-top:95px;
}

.menu-card-wrapper {
    border-radius: 8px;
    border: 1px solid #96d0c408;
    transition: 0.3s all ease-in-out;
}






.menu-card-wrapper:hover, .menu-card-wrapper:focus {
    box-shadow: 0px 0px 6px 0px #96d0c4;
    transition: 0.3s all ease-in-out;
}



.menu-card .card-left-section {
    position: absolute;
    /* top: 27%; */
    bottom:18px;
}






.menu-card .card-left-section a {
    width: 100%;
    border-radius: 2px 14px;
    margin-bottom: 5px;
    padding:4px 8px;
    max-width: 182px;
    box-shadow: 0px 0px 1px 0px #337a6c;
    transition: 0.3s all ease-in-out;
}



.menu-card .card-left-section:hover a {
    border-radius: 0px;
    transition: 0.3s all ease-in-out;
}



/* for meals only */
.menu-card.meal-card .card-left-section {
    left: -9px;
    display: none;
}


.menu-card.meal-card .card-left-section a {
    padding: 4px 0px;
    width: 33px;
    margin-bottom: 7px;
}









/* package version */
.menu-card .card-left-section.package-version {
    position: relative;
    top: 0px;
    left:0px;
    text-align: center;
    margin-top: 18px;
}




/* meal version */
.menu-card .card-left-section.meal-version-2 {

    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    text-align: center;
    bottom: 0px;
}



.menu-card .card-left-section.meal-version-2 li {

    width: auto;
    display: inline-block;
}


.menu-card .card-left-section.meal-version-2 li a {
    border-radius: 4px;
}






/* plan version */
.menu-card .card-left-section.plan-version {
    position: relative;
    top: 0px;
    left:0px;
    text-align: center;
    margin-top: 0px;
    display: block;
}


.menu-card .card-left-section.plan-version li {

    display: inline-block;
}

.menu-card .card-left-section.plan-version li label {

    width: auto;
    padding: 3px 4px;
    font-size: 13px;
    text-align: center;
    border-radius: 4px;
    min-width: 74px;
    box-shadow: none;
}


.menu-card .card-left-section.plan-version li a {

    width: auto;
    padding: 3px 4px;
    font-size: 13px;
    text-align: center;
    border-radius: 4px;
    min-width: 74px;
    box-shadow: none;
}

.menu-card .card-right-section {
    position: absolute;
    top: 1%;
    right: -9px;
}

.menu-card .card-right-section a {

    font-size: 16px;
    padding: 2px 9px;
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
    border:2px solid #337A6C;
    margin-bottom: 8px;
    color: #337A6C;
    transition: 0.2s all ease-in-out;
}


.menu-card .card-right-section a:hover,
.menu-card .card-right-section a:focus {
    box-shadow: 0px 0px 5px 0px gray;
    transition: 0.2s all ease-in-out;
}





.fix-card .menu-card .card-right-section a {

    padding: 3px 7px;
}


.fix-card-img .menu-card .card-profile img {

    height: 150px;
}




.menu-card .card-profile {
    width: 90%;
    position:relative;
    margin: auto;
}


.menu-card .card-profile h5 {
    padding: 0px 10px;
    height: 48px;
    text-overflow: ellipsis;
    overflow: hidden;
}


.menu-card .card-profile img {

    height: 200px;
    width: 95%;
    object-fit: contain;
    margin-top: -120px;
    margin-bottom: 35px;
    object-position: bottom;
}


.menu-card .card-footer {
    margin-top: 25px;
    border-top: 1px solid #337a6c;
}








/* ======================== */


.menu-card.plan-card .card-profile h5 {
    height: 42px;
    font-size: 16px;
}



.card-profile .vip-tag {

    position:absolute;
    top:0px;
}

.menu-card.plan-card .card-footer {

    margin-top: 17px;
    padding: 20px 8px;
}




/* ============================= */
/* section card */




.section-card {
    position: relative;
    border:none;
    border-radius: 4px;
}



.outline-input {
    background-color: #fdfdfd;
    padding:10px 7px;
}



.outline-input.darker {
    background-color: #ffefd2;
    padding:9px 7px;
}


.outline-input.blue {
    background-color: #96d0c4;
    padding: 9px 7px;
}


.outline-input.blue.v2 {
    background-color: #96d0c4;
    padding:6px 7px;
}


.outline-input.transparent {
    background-color: transparent;
}

.section-card-wrapper {
    border-radius: 8px;
    border: 1px solid #96d0c408;
    transition: 0.3s all ease-in-out;
}






.section-card-wrapper:hover, .section-card-wrapper:focus {
    /* box-shadow: 0px 0px 6px 0px #96d0c4; */
    transition: 0.3s all ease-in-out;
}





/* ============================== */
/* table customization */


.menu-table thead {
    background-color: #337a6c;
    border-color: #337a6c;
}


.menu-table thead th {
    color: white;
}



table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after {

    color: white;
    opacity: 0.6;
}

table.dataTable thead .sorting::after {

    color: white;
    opacity: 0.9;
}


.menu-table.dataTable.stripe tbody tr.odd,
.menu-table.dataTable.display tbody tr.odd {

}

.menu-table.dataTable.display tbody tr.odd>.sorting_1,
.dataTables_wrapper .menu-table.dataTable tbody tr.odd> td {
    background-color: white;
}


.menu-table.dataTable.display tbody tr.even>.sorting_1,
.dataTables_wrapper .menu-table.dataTable tbody tr.even>td {
    background-color: #f4f4f4;
}


.dataTables_wrapper table.dataTable tbody td {
    border-color: #fff8ed;
}

.dataTables_wrapper table.dataTable thead th {
    border-color: #fff8ed;
}


.dataTables_wrapper .dataTables_paginate {
    border:1px solid #fff8ed;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #FFF1D7;
    color: black !important;
    border: 1px solid #fff8ed !important;
}


div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 25px;
}




/* ================================================= */
/* modals */

.modal-header {
    background-color: #7BB0A5;
}

.modal-header h4{
    color: white;
}

.modal-header button {
    filter: invert(1);
}







/* ============================================== */
/* package card */




.macro-wrapper {

    background-color: #7bb0a5;
    padding: 10px 5px;
    border-radius: 4px;
}


.macro-wrapper.alt {
    background-color: #454545;
}

.macro-wrapper h6 {
    font-size: 13px;
    color:white;
    padding: 5px 0px;
}


.macro-wrapper input {
    height: 32px;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
}


.macro-wrapper.alt input {

    border-color: #454545 !important;
}





/* plan version */
.macro-wrapper.plan-version {
    margin:auto;
    max-width: 130px;
    margin-right:0px;
    margin-bottom: 20px;
}





/* for assign */
.range-macros-shortcuts.assign-version {


    background-color: #7bb0a5;
    padding:0px 4px 14px 0px;
    border:2px solid #337A6C;
    border-radius: 5px;

}


.range-macros-shortcuts.assign-version h5 {

    color: white;
    font-weight: 600;
    padding-bottom: 13px;
    padding-top: 21px;
    background-color: #337A6C;
    
}


.range-macros-shortcuts.assign-version h2 {

    color: white;
    margin-bottom: 0px;
}


.range-meals-macros-shortcuts input {

    background-color: white;
    border:1px solid #337A6C;
    border-radius: 5px;
    width: 100%;
    font-weight:700;
    font-size:18px;
    margin-top:5px;
    cursor: not-allowed !important;
}

.range-pack-wrapper {
    position:relative;
}


.range-pack-wrapper img {

    width: 100%;
    height: 100%;
    max-height:55px;
    object-position: center;
    object-fit: contain;
}


.range-pack-wrapper h4 {

    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-bottom: 0px;
    background-color: #337A6C;
    border-radius: 0px 4px 4px 0px;
    width: 39px;
    padding: 6px;
    font-weight: 700;
    font-size: 16px;
    color: white;

} 







/* ============================================== */


.table-small-font > * {

    font-size: 14px;

}


.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: #7bb0a5;
}



/* ============================================ */



.vip-li a.active {
    background-color: #337A6C !important;
    border-color: #337A6C !important;
    color: white !important;
}




/* ========================================== */

.assign-scale-title {
    
}



/* ========================================= */


.other-carousel .owl-item {
    padding-top: 20px;
}


.other-carousel .item {
    padding-top: 20px;
    width: 238px;
}


.owl-theme .owl-dots .owl-dot.active span {
    background: #337A6C;
}


.owl-theme .owl-dots .owl-dot span {
    background-color: lightgrey;
}


.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px;
}






/* ------------------------------------------------ */



.group-discount {
    border:1px solid whitesmoke;
    padding:5px 0px;
    border-radius: 5px;
}



/* ------------------------------------------------ */

.span-label {
    display: inline-block;
    font-size: 14px;
    background-color: #fdfdfd;
    padding: 1px 10px;
    margin-bottom: 8px;
}




/* --------------------------------------------------- */

.macro-wrapper.ingredient h6 {
    font-size:12px;
}



.macro-wrapper.ingredient input {
    font-size:12px;
}



.macro-wrapper.ingredient.main {
    background-color: #9e8e71;
}


.macro-wrapper.ingredient.main input {

    border:1px solid #9e8e71;
}



.ingredientTypeTitle {
    margin-bottom: 0px;
    background-color: white;
    border-radius: 4px 0px 0px 4px;
    padding: 6px 12px;
    font-weight: 700;
    color: #337A6C;
    margin-bottom: 14px;
    display:inline-block;
}





/* --------------------------------------------------- */


.login-input {
    height:44px;
}


.login-input input {
    color: #222 !important;
    font-weight:500;
}




/* ----------------------------------------------------- */


.reportTable th {

    min-width: 90px !important;
    font-size:14px !important;
}


.reportTable td {

    font-size:14px !important;
    line-height: 21px;
    padding-top: 9px;
    padding-bottom: 9px;
}




.dataTables_wrapper a {
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #337A6C;
    border: 1px solid #fff;
}



.QR {
    position: absolute;
    z-index: 1;
    height: auto;
    top: 14px;
    left: 14px;
}

.QR svg {
    width: 75px;
    height:75px;
    object-fit: contain;
    display:inline-block;
}










/* ============================== */
/* radio customization */
.radio-wrap input {
    display: inline-block;
    width: 35px;
    height: 21px;
    border-color: #337a6c;
}


.radio-wrap input[checked],
.radio-wrap input:focus {
    background-color: #337a6c;
    border-color: #337a6c;
}












/* small padding table styling */
.small-padding-table.v2 th,
.small-padding-table.v2 td {

    padding-top: 10px;
    padding-bottom: 10px;
}



.small-padding-table th .menu-input,
.small-padding-table td .menu-input, 
.small-padding-table .select2-container .select2-selection--single {

    height:32px !important;
}


.small-padding-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height:20px;
}


.small-padding-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height:18px;
}


.table-border-radius,
.table-border-radius tbody,
.table-border-radius table {
    border-radius: 5px;
}