/*Roboto-font*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap");

html,
body {
    font-family: 'Roboto', sans-serif !important;
}

html,
body {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    /*display: table;*/
    width: 100%;
    min-width: 100%;
    scroll-behavior: smooth;
    word-wrap: break-word;
    word-break: break-word;
}

body {
    overflow-x: hidden;
}

footer {
    z-index: 1;
}

/*common-bootstrap-override-css*/
a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: #981f3a !important;
}

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.modal-lg {
    margin: 1.50rem auto;
}

.modal-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0rem 1.75rem;
    border-radius: 0 !important;
    border-bottom: 0px solid transparent;
}

.close {
    text-shadow: 0 1px 0 #000;
}

.theme-bg,
main {
    background: #efefef;
}

main .theme-bg {
    transition: all .5s ease-in;
}

.shadow-top {
    -webkit-box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .125) !important;
    box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .125) !important;
}

/*colors*/
.btn-primary {
    border: 0 none;
}

.bg-primary,
button.bg-primary:focus {
    /* background-color: #d01d45 !important; */
    background-color: #006B38 !important;
}

button.bg-primary:hover,
a.bg-primary:hover {
    /* background-color: #981f3a !important; */
    background-color: #064c2a !important;
}

.bg-secondary,
button.bg-secondary:hover {
    /* background-color: #939598 !important; */
    background-color: #D3D3D3 !important;
}

.bg-warning {
    background-color: #FFF6DB !important;
}

.bg-info {
    background-color: #7dd4e2 !important;
}

.bg-off-white {
    background-color: #d8d8d8 !important;
}

/*text-color css*/
.text-primary {
    color: #d01d45 !important;
}

.bg-green {
    background: #006B38 !important;
    ;
}

.bg-orange-dark {
    background: #dc4d3b;
}

.bg-orange-light {
    background: #e17a29;
}

.bg-yellow-dark {
    color: #F9A602;
}

.bg-yellow-light {
    color: #fddf01;
}

.text-green,
.text-green:hover {
    color: #80a33d;
}

.bg-pink {
    background-color: #ed4494;
}

.text-pink,
.text-pink:hover {
    color: #ed4494;
}

.bg-brown {
    background-color: #b4974d;
}

.bg-brown-gradient {
    background: linear-gradient(150deg, #b4974d, #dca61c);
}

.text-brown,
.text-brown:hover {
    color: #b4974c;
}

.bg-gold {
    background-color: #f8b91a;
}

.text-gold,
.text-gold:hover {
    color: #f8b91a;
}

.text-red,
.text-red:hover {
    color: #d01d45;
}


.text-blue,
.text-blue:hover {
    color: #3d6faa;
}

.bg-number-panel {
    background: #293440;
}

.bg-red {
    background-color: #d01d45;
}

.text-maroon {
    color: #792020;
}

.bg-light-green {
    background-color: #8c9b74 !important;
}

/*end*/
.nav-tabs .nav-link {
    border: 1px solid transparent;
    color: #495057;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border: 1px solid #006B38;
    border-bottom: 2px solid #006B38;
    color: #006B38;
}

button:focus,
input,
.btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ced4da;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.table td,
.table th {
    padding: 0.50rem .25rem !important;
    font-weight: normal;
}

.icon-box {
    background: rgba(0, 0, 0, 0.3);
    min-height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.data-table-main {
    width: 100%;
    user-select: none;
    -webkit-transition: 300ms all linear;
    transition: 300ms all linear;
}

.sidebar-wrapper {
    -webkit-transition: 1s all linear;
    transition: 1s all linear;
    -webkit-animation: slide-right 500ms linear;
    animation: slide-right 500ms linear;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 400px;
    z-index: 2;
}

.sidebar-show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 400px;
    z-index: 2;
}

.data-table-main-collapse {
    width: 80%;
}

.w-80 {
    width: 80%;
}

.d-none {
    display: none !important;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

section.dashboard.wrapper header.header-section .d-flex.justify-content-between {
    /* background: url(../images/header-bg.png) center no-repeat; */
    background-size: cover;
    min-height: 50px;
    height: 50px;
    font-size: 0.86em;
}

.header-section .logo,
.header-section a.navbar-brand {
    height: 100%;
}

.header-section .logo a.navbar-brand img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

section.dashboard.wrapper header.header-section div.Branches {
    height: 45px;
    min-height: 45px;
    font-size: 0.9em;
    text-transform: capitalize;
}

section.dashboard.wrapper header.header-section div.Branches div.filter,
section.dashboard.wrapper header.header-section div.Branches div.filter .dropdown {
    height: 100%;
}

section.dashboard.wrapper header.header-section div.Branches div.filter .dropdown button#filter_dropdown {
    height: 100%;
    padding: 0.25em 0.50rem !important;
}

section.dashboard.wrapper header.header-section div.Branches div.Branches-inner,
section.wrapper header.header-section div.Branches div.Branches-inner {
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100% !important;
    white-space: nowrap;
}

div.Branches div.Branches-inner .branch.col-md-1.d-flex.flex-fill.align-items-center.justify-content-center {
    margin-right: 20px;
}

div.Branches div.Branches-inner .branch.col-md-1.d-flex.flex-fill.align-items-center.justify-content-center:last-of-type {
    margin-right: 0px;
}

section.dashboard.wrapper header.header-section div.Branches div.filter div.dropdown div.dropdown-menu,
section.wrapper header.header-section div.Branches div.filter div.dropdown div.dropdown-menu {
    min-width: 15rem;
    border-top: 5px solid #d01d45 !important;
    border-radius: 0px;
    -webkit-transform: translate3d(0px, -3px, 0px) !important;
    transform: translate3d(0px, -3px, 0px) !important;
}

section.dashboard.wrapper header.header-section div.Branches div.filter div.dropdown div.dropdown-menu div.all-franchise select.all-franchise-menu,
section.wrapper header.header-section div.Branches div.filter div.dropdown div.dropdown-menu div.all-franchise select.all-franchise-menu {
    position: relative;
    width: 210px;
    line-height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    padding: 5px;
    background: #fff url(../images/down-arrow.png) no-repeat right center;
    background-size: 36px auto;
}

section.dashboard.wrapper header.header-section div.profile-block div.media div.dropdown div.dropdown-menu,
section.wrapper header.header-section div.profile-block div.media div.dropdown div.dropdown-menu {
    border-radius: 0px;
    min-width: 13rem;
}

section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header {
    padding: 10px 0 0;
    height: auto;
}

section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-branches,
section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-agents {
    position: relative;
    overflow: hidden;
}

section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-agents:before,
section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-branches:before {
    content: "";
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 14px auto;
    height: 36px;
    width: 36px;
    display: block;
    position: absolute;
    right: 8px;
    top: 1px;
    padding: 5px;
    z-index: 101;
}

section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-branches select.all-branches-menu,
section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-agents select.all-agents-menu {
    position: relative;
    width: 210px;
    line-height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*border-radius: 5px;
    padding: 5px;
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 36px auto;*/
}

.dropdown-toggle::after {
    content: none;
    position: absolute;
}

div.info-btn-box div.dropdown div.dropdown-menu {
    border-top: 5px solid #d01d45 !important;
    border-radius: 0px;
    -webkit-transform: translate3d(-125px, 38px, 0px) !important;
    transform: translate3d(-125px, 38px, 0px) !important;
}

section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
    height: 39vw;
}

/* section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive table.table {
    border: 1px solid #ccc;
} */

section.dashboard.wrapper main div.data-table-main div.data-table-inner div.navigation-btn-main button {
    font-size: 16px;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main {
    background: #f4f4f4;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.name-plate {
    min-height: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 5px;
    font-size: 24px;
    margin: 25px 0;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box {
    margin: 25px 0;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box input {
    min-height: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 26px;
    background: #f9f9f9;
    border-radius: 5px;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
    height: 56px;
    width: 95px;
    font-size: 24px;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button.clear {
    font-size: 20px;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
    width: 143px;
    font-size: 22px;
}

section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn div.delivery-btn button div.icon-box:first-child,
section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn div.takeout-btn button div.icon-box:first-child {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*coustomerinfo page*/
section.wrapper.h-100 {
    background: #f4f4f4;
}

section.wrapper main div.container-fluid div.customer-info-block {
    width: 80%;
    background: #f4f4f4;
}

section.wrapper main div.container-fluid div.right-btns {
    width: 18%;
    background: #f4f4f4;
}

section.wrapper main div.container-fluid div.customer-info-block div.customer-info-form {
    border-right: 1px solid #f4f4f4;
    overflow-y: auto;
}

div.right-btns div.right-btn-main div.right-btns button.btn-success div.d-flex div.icon-box {
    background: #357a39;
}

div.right-btns div.right-btn-main div.right-btns button.btn-danger div.d-flex div.icon-box {
    background: #aa2f27;
}

div.customer-info-form form#customer-edit div.all-Branch select.Branch-menu {
    position: relative;
    line-height: 20px;
    -webkit-appearance: none;
    border-radius: 5px;
    padding: 5px;
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 14px auto;
    background-position: 98% 50%;
}

div.customer-info-block div.customer-info-options div.card.active {
    background: #f4f4f4;
}

/*========================15-10-2018 mahapal=======================*/
.btn-bg {
    border: solid #fff;
    border-width: 1px 1px 0 0;
    padding: 1vw 0.3vw !important;
    font-size: 1vw;
    min-height: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.catalog-left .tab-pane {
    border: 1px solid #e7e7e7;
    padding-left: 1px;
    padding-bottom: 1px;
    overflow-y: auto;
    scroll-behavior: smooth;
    height: 21.5vw;
    user-select: none;
}
.col-md-3.p-3.btn-bg.templatemenu.active {
    border: 2px solid #000;
}

.templatemenu.disabled {
    background-color: #9ca5a5 !important;
}

.catalog-left .nav-item {
    padding: .6vw 0.3vw !important;
    font-size: 1.1vw;
}

.yellow-green {
    background: #c6cc8a;
}

.bg-red-light {
    background: #ddbcba;
}

.font-weight-medium {
    font-weight: 500;
}

.bg-blue {
    background: #3d6faa;
}

.col-md-8.category-menu {
    padding-left: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    /* height: 30.5vw; */
    height: 24.5vw;
    user-select: none;
}

.catalog-right {
    margin-top: 5px;
    user-select: none;
}

.catalog-right::before {
    background: url(../images/catalog-top-img.png) repeat-x center center;
    background-size: 0.67em auto;
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    display: block;
    top: -7px;
    height: 8px;
}

.main-content .catalog-right::before {
    right: 16px;
}

.viodorder .input-group {
    justify-content: center;
    margin: 0;
    width: 100%;
}

.billing-box {
    background: #f2f2f2;
    padding: 0.50rem 0.75rem;
    margin: 0.30rem 0 !important;
}

.billing-box p {
    font-size: 0.9rem;
    line-height: 1.2;
}

.table-design table th {
    font-weight: 500;
    border-bottom: 0;
}

.table-design .table td,
.table-design .table th {
    padding: 0.5vw 0.8vw !important;
    vertical-align: middle;
    font-size: 1vw;
}

.modal-body .bill-main .table-design .table td,
.modal-body .bill-main .table-design .table th {
    padding: 0.4vw 0.8vw !important;
    vertical-align: middle;
}

.modal-body .bill-main .table-design .table td,
.modal-body .bill-main .table-design .table th,
.modal-body .bill-main.catalog-right p,
.modal-body .bill-main.catalog-right .billing-box h6 {
    font-size: 1rem;
}

/*.modal-body .bill-main .table-design .item-col{ width: 45%;
}*/
.table-design .scroll-table-pad tr {
    margin-right: 10px;
}

/*.modal-body .bill-main .table-design .item-col,
.modal-body .bill-main .table-design .item-col-1 {
    width: 50%;
}

.modal-body .bill-main .table-design .price-col,
.modal-body .bill-main .table-design .price-col-3 {
    width: 10%;
}

.modal-body .bill-main .table-design .quantity-col,
.modal-body .bill-main .table-design .quantity-col-2 {
    width: 15%;
}*/

.modal-body .catalog-right .table-mb {
    margin: 0 0 10px !important;
}

.modal-body .scroll-table {
    border: 0px none;
}

.catalog-right .table-design .table td p {
    font-size: .9vw;
    line-height: 1;
}

.modal-body .bill-main.catalog-right .table-design .table td p {
    font-size: 0.75rem;
}

.quantity-calculate {
    flex-wrap: nowrap !important;
}

.quantity-calculate .form-control {
    width: 2.5vw;
    font-size: 1vw;
    padding: 0;
    text-align: center;
    max-width: 2.5vw;
}

.quantity-calculate .btn {
    background: #fff url(../images/quantity-cal-icon.png) no-repeat;
    background-size: 3.3vw;
    border-radius: 0;
    padding: 0;
    width: 2.1em;
    height: 100%;
    box-shadow: inset -1px -14px 10px -1px rgba(239, 239, 239, 0.5);
    border: 1px solid #d8d8d8;
    border-left: 0;
}

.quantity-calculate .btn-plus {
    background-position: 0.65em 0.65em;
}

.quantity-calculate .btn-minus {
    background-position: -1.40em;
    border-left: 1px solid #d8d8d8;
    border-right: 0px solid #d8d8d8;
}

.delete-icon {
    background: url(../images/delete-red-icon.png) no-repeat center;
    width: 20px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    margin-left: .4vw;
}

.delete-gray-icon {
    background: url(../images/delete-gray-icon.png) no-repeat center;
    width: 2vw;
    height: 2vw;
    display: inline-block;
    vertical-align: middle;
    background-size: 1.5vw;
    margin-left: .4vw;
}
/* .templatemenu{
    height: 50px !important;
    min-height: 50px !important;
    max-width: 100px !important;
    margin-right: 3px;
}
.templatemenu.active {
    border: 1px solid;
} */
.delete-transparent-icon {
    background: url(../images/delete-icon.png) no-repeat center;
    width: 2vw;
    height: 2vw;
    display: inline-block;
    vertical-align: middle;
    background-size: 1.5vw;
    margin-left: .4vw;
}

.total-amount td {
    font-weight: bold !important;
}

.row.kybord {
    margin: 0 -0.25vw !important;
}

.kybord .col-md-1 {
    max-width: 15%;
    -webkit-box-flex: inherit;
    flex: inherit;
    -ms-flex: inherit;
    margin: .25vw !important;
}

.kybord a {
    display: block;
    padding: 0.7vw 0 !important;
    font-size: 1.2vw;
}

.kybord .bg-clear {
    border: 1px solid #cccccc;
}

.col-md-8 a.kybord-btn ,.col-md-8 button.kybord-btn {
    overflow: hidden;
    text-align: center;
}

.col-md-8 a.kybord-btn span.btn-img ,.col-md-8 button.kybord-btn span.btn-img {
    background: rgba(0, 0, 0, 0.3);
    float: left;
}

.billing-box h6 {
    font-size: 0.9em;
}

.catalog-right p {
    font-size: 0.80em;
}

.catalog-top-had h3 {
    font-size: 2vw;
    line-height: 1;
}

.catalog-right .table-mb {
    margin-bottom: 1.5vw;
}

.kybord-row .kybord-pr {
    padding-right: .1vw;
}

.kybord-row .kybord-pl {
    padding-left: .1vw;
}

.catalog-body main {
    height: auto !important;
}

.scroll-table {
    overflow-y: auto;
    height: 15.4vw;
    border-bottom: 1px solid #dee2e6;
}

.table-design .scroll-table-pad {
    border-bottom: 0;
}

#sidebar-btn img {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

#sidebar-btn.sidebar-btn-toggle img {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

a.btn.cancel,
a.btn.save {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 22% !important;
    flex: 0 0 22% !important;
    max-width: 22.65% !important;
}

/*checkbox css strat*/
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-check-box label {
    text-indent: 55px;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    height: 20px;
    width: 20px;
    border: 1px solid #eaeaea;
    vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.custom-check-box:hover input ~ .checkmark {
    background-color: #f4f4f4;
}

/* When the checkbox is checked, add a blue background */
.custom-check-box input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-check-box input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-check-box .checkmark:after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    margin: auto;
    height: 10px;
    border: solid #006B38;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*checkbox end*/
/*login page*/
.login-btns button.btn.bg-primary.text-white.p-0.m-1 {
    height: 60px;
    width: 80px;
    font-size: 24px;
}

button.btn.bg-secondary.p-0.m-1 {
    height: 60px;
    width: 80px;
    font-size: 22px;
}

.login-inputbox.text-center input {
    min-height: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    width: 260px;
}

.forgot-inputbox input {
    min-height: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    width: 260px;
}

div.login-btns div.d-flex.justify-content-around button.btn.text-white.p-0.m-1 {
    height: 60px;
    width: 125px;
    font-size: 20px;
}

main.access-page.d-flex div.container div.d-flex div.w-600,
main.fr-access-page.d-flex div.container div.d-flex div.w-600 {
    width: 600px;
}

main.access-page.d-flex div.container div.d-flex div.w-600 div.login-btns {
    width: 300px;
}

.selected-row {
    background: #9395984f;
}

.modal .modal-body .scroll-table {
    /*height: 100%;*/
    overflow: auto;
}

.modal-content {
    border: 0px solid transparent;
}

.modal .modal-body .catalog-right::before {
    background: url(../images/catalog-top-img.png) repeat-x;
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    display: block;
    top: -7px;
    height: 8px;
    height: 0.5em;
    background-size: 1em 100%;
    background-position: center;
}

/*drivers page*/
div.driver-sidebar div.all-branches select.all-branches-menu {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    padding: 5px;
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 36px auto;
}

div.driver-sidebar div.drivers-list,
.drivers-detail,
.driver-order-detail,
.cus-detail {
    height: auto;
    overflow-y: scroll;
}

div.driver-sidebar div.drivers-list div a {
    text-decoration: none;
}

.drivers-detail .drivers-orders.card {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-animation: 600ms fade-in;
    animation: 600ms fade-in;
}

.driver-order-detail .bill-main {
    -webkit-box-shadow: 0px -4px 25px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px -4px 25px 0px rgba(0, 0, 0, 0.25);
}

.modifiers-menu {
    overflow-x: hidden;
    overflow-y: auto;
}

#modal-shortnote .modal-body textarea,
#modal-notew .modal-body textarea {
    font-size: 1.2rem;
    height: 200px;
}

div.special-block select.special-select {
    position: relative;
    width: 300px;
    line-height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    padding: 5px;
    margin: 0 auto;
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 36px auto;
}

.coupon-number-panel a.btn {
    height: 50px;
    width: 50px !important;
    flex: 0 0 23% !important;
    line-height: 40px;
}

.coupon-number-panel a.btn:last-of-type {
    flex: 0 0 73% !important;
}

.drivers-status {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    padding: 10px;
    height: 12em;
}

.select-branch {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
}

.btns a.btn.bg-brown span.btn-img {
    background: #695931;
}

.navigation-btns button.void-btn {
    background: url(../images/voidorder-btn.png) center no-repeat;
    background-size: cover;
    height: 50px;
    padding-left: 50px !important;
}

input.error,
textarea.error,
select.error {
    border-color: red;
}

label.error {
    color: red;
}

#customer-edit label.error {
    color: red;
    display: none !important;
}

.order-name,
.item-col {
    max-width: 45%;
    flex: 0 0 45%;
}

.order-qty,
.quantity-col {
    max-width: 25%;
    flex: 0 0 25%;
}

.order-price,
.price-col {
    max-width: 30%;
    flex: 0 0 30%;
    text-align: right;
    padding-left: 10px;
}

div#modifier_1061 span.text-muted.text-left:nth-child(1) {
    width: 50%;
}

div.alphabet a.cancel {
    flex: 0 0 9.333333% !important;
    max-width: 9.333333% !important;
}

.media .dropdown button.btn.dropdown-toggle img {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    object-fit: cover;
}

.take-btns .row a.btn {
    height: 50px;
    margin: 0.25em 0.1em !important;
}

.take-btns .row a.btn span.btn-img {
    background: rgba(0, 0, 0, 0.3);
}

div.driver-sidebar div.drivers-list div.border-bottom {
    border-bottom: 1px solid #f8f9fa59 !important;
}

button#sidebar-btn {
    border-top-left-radius: 10em;
    border-bottom-left-radius: 10em;
    transition: all .5s ease;
    display: none;
}

.login-btns button.btn,
button.btn.bg-secondary.p-0.m-1,
.alphabet button.btn {
    height: 45px;
    width: 70px;
    font-size: 20px;
    margin: 3px !important;
}

textarea#description {
    min-height: calc(2.25rem + 8px) !important;
    height: calc(2.25rem + 8px);
}

.loading {
    z-index: 1101 !important;
}

/*.scroll-table::-webkit-scrollbar-track
{
    width: 5px;
    background:rgb(242, 242, 242);
}

.scroll-table::-webkit-scrollbar
{
    width: 5px;
}

.scroll-table::-webkit-scrollbar-thumb
{
    border-radius: 0px;
    background: rgba(208, 29, 69,1);
}*/
.customer-info-options .card-body {
    word-wrap: break-word;
    word-break: break-word;
}

.modifer_seqs div ul li input {
    height: 16px;
    width: 16px;
	display:none;
}
.data-table-main-collapse ~ .sidebar-wrapper {
    display: none;
}

form#frm-misc select,
.special-block select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    padding: 5px;
    background: url(../images/down-arrow.png) no-repeat right center;
    background-size: 36px auto;
}

.catalog-left .tab-pane .btn-bg {
    display: flex;
    /* flex-wrap: wrap; */
    float: left;
    border: 2px solid transparent;
}

.catalog-left div#nav-tab {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap !important;
}

.catalog-left .nav-item {
    background: #fff;
    margin: 2px;
    border: 1px solid #dadada;
    border-bottom: 2px solid #dadada;
    transition: all .5s ease;
}

.modifer_builder .active {
    background: #228B22 !important;
}

.bg_blue {
    background: #007bff !important;
}

div.pGroup {
    line-height: 18px;
}

.flexigrid div.pDiv div.pButton {
    overflow: visible !important;
}

.category-list .tab-content .tab-pane .categoriesmenus.active {
    border: 2px solid #000;
}
.category-list .tab-content .tab-pane .categoriesmenus{
    margin: 1px;
    padding: 10px !important;
}
.category-list .tab-content .tab-pane .categoriesmenusDiscount.active {
    border: 2px solid #000;
}
.category-list .tab-content .tab-pane .categoriesmenusDiscount{
    margin: 1px;
    padding: 10px !important;
}
.text-black{
    color: black;
}
@media (min-width: 768px){
    .category-list .tab-content .tab-pane .categoriesmenus.col-md-6{
        max-width: 49.2%;
    }
}
.franchaise-main {
    padding: 5px;
}

.franchaise-main .franchaise {
    position: relative;
}

.franchaise-main .franchaise span.name {
    position: absolute;
    left: 10px;
    bottom: 0px;
    font-size: 12px !important;
    color: #000000;
}

.franchaise-main .franchaise img.logo-img {
    position: relative;
}

.franchaise-main .franchaise img.logo-img::after {
    position: absolute;
    content: " ";
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.modi_build div.modifierbuilder_items,
.modi_build .selected_modifierbuilder,
.modifer_seqs .modifer_seqs_builder_data,
.modifer_seqs .selected_seq_modifierbuilder {
    height: 30em;
    overflow-y: auto;
    overflow-x: hidden;
}

.modi_build .btn-bg {
    white-space: normal;
    height: 60px;
    padding: 5px !important;
    line-height: 1.3em;
}
.modifer_seqs div ul li{
	padding: 1px !important;
	cursor:pointer;
}
.modifer_seqs div ul li .d-flex.bg-off-white.rounded{
	height:60px;
	width: 100%;
    align-items: center;
    white-space: normal;
    overflow: hidden;
	text-align:center;
}
.modifer_seqs div ul li .d-flex.bg-off-white.rounded span{
	font-size:14px;
}
.modifer_seqs div ul li .d-flex.bg-off-white.rounded.active {
    background: #228B22 !important;
}
.modal-lg {
    max-width: 1140px !important;
}
.modifer_seqs  .selected_seq_modifierbuilder .even,.modi_build .selected_modifierbuilder .even{
	background:#bfbebe;
	border-bottom:1px solid #8e8d8d;
}
.modifer_seqs  .selected_seq_modifierbuilder .odd,.modi_build .selected_modifierbuilder .odd{
	background:#d8d8d8;
	border-bottom:1px solid #8e8d8d;
}
.modi_build .btn-bg{
	background:#ddd !important;
}
.modi_build .btn-bg.active{
    background: #228B22 !important;
}
.navigation-btns button.btn145{
  width: 145px !important;
}
.navigation-btns button.btn140{
  width: 140px !important;
}
.report-menu-main button.btn{
    font-size: 13px;
    opacity: 0.7;
}
.report-menu-main button.btn.active{
    border: 2px solid #000;
    opacity: 1;
}
div#vieworder-modal .modal-dialog.modal-lg {
    max-width: 700px !important;
}
.col-md-8 a.kybord-btn, .col-md-8 button.kybord-btn, .col-md-8 div.kybord-btn {
    line-height: 38px;
    height: 40px;
    width: 23%;
    margin: 0.25em 0.1em !important;
    font-size: 0.80em;
    text-align: center;
}
.payment-type-btn-group {
    width: 100% !important;
}
.col-md-8 a.kybord-btn span.btn-img, .col-md-8 button.kybord-btn span.btn-img {
    width: 30%;
    display: inherit;
    text-align: center !important;
    height: 40px;
}
.col-md-8 a.kybord-btn span.btn-img img, .col-md-8 button.kybord-btn span.btn-img img {
    width: 70%;
    text-align: center;
    padding: 5px 0;
}
/* div#vieworder-modal .table-design table{
    min-height: 300px;
} */
/*--------------media query strat here--------------*/
@media screen and (max-width: 1920px) {
    .data-table-main {
        width: calc(100% - 400px);
    }

    .data-table-main-collapse {
        width: 120em;
    }

    .catalog-left .nav-item {
        padding: 1vw 0.3vw !important;
    }

    .catalog-left .tab-pane {
        /* height: 32.5vw; */
        height: 23.5vw;
    }

    .scroll-table {
        height: 37em;
    }

    .modifiers-menu {
        height: 47em;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 70px;
        width: 80px;
        font-size: 24px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 130px;
    }

    .navigation-btns button {
        width: 160px;
    }

    .navigation-btns button div.text-white.flex-fill.text-uppercase.text-left.px-2.text-center {
        text-align: center !important;
    }

    section.wrapper main div.container-fluid div.customer-info-block {
        height: 82vh;
        /*overflow: auto;*/
    }

    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 79vh;
        overflow: auto;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 38.5vw;
        }

        .catalog-left .tab-pane {
            height: 32vw;
        }
    }

    section.wrapper main div.container-fluid div.right-btns {
        width: 12%;
    }

    main.access-page h1,
    main.fr-access-page h1 {
        font-size: 24px;
    }

    div.fr-btns div.d-flex.justify-content-around button.btn.text-white.p-0.m-1 {
        height: 45px;
        width: 125px;
        font-size: 18px;
    }

    div.driver-sidebar div.drivers-list div a {
        padding: 1rem;
    }

    .drivers-detail,
    .cus-detail {
        height: 58em;
    }

    div.driver-sidebar div.drivers-list {
        height: 55em;
    }

    a.qty-num,
    .numbers button.btn.backspace_numbers {
        height: 55px;
        line-height: 44px;
        width: 15%;
        margin: 0.20em 0.11rem !important;
        font-size: 1.2rem;
    }

    .col-md-8 a.kybord-btn, .col-md-8 button.kybord-btn.update_bttn {
        line-height: 55px;
        height: 55px;
        width: 23.9%;
        margin: 0.25em 0.1em !important;
        font-size: 1em;
    }

    /* .col-md-8 a.kybord-btn.shortnote {
        line-height: 26px;
    } */

    .col-md-8 a.kybord-btn span.btn-img ,.col-md-8 button.kybord-btn span.btn-img {
        width: 34%;
        display: flex;
        align-items: center !important;
        justify-content: center;
        height: 55px;
    }

    .col-md-8 a.kybord-btn span.btn-img img , .col-md-8 button.kybord-btn span.btn-img img {
        width: 44%;
        text-align: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 60px;
        line-height: 46px;
        font-size: 16px;
    }

    .select-branch {
        height: 48em;
    }

    .login-btns button.btn

    /*button.btn.bg-secondary.p-0.m-1,.alphabet button.btn*/
        {
        height: 45px;
        width: 70px;
        font-size: 20px;
        margin: 3px !important;
    }

    .quantity-calculate .btn {
        width: 2.8em;
    }

    .quantity-calculate .btn-plus {
        background-position: 0.50em;
    }

    .quantity-calculate .btn-minus {
        background-position: -1.92em;
    }

    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        height: 38em;
    }

    .flexigrid div.bDiv {
        height: 38em !important;
    }

    .btn-bg {
        min-height: 90px;
        height: 90px;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        /* height: 49em; */
        height: 33em;
    }

    .catalog-right p,
    .billing-box h6 {
        font-size: 1em;
    }

}

@media screen and (max-width: 1800px) {
    /* .data-table-main {
        width: 109em;
    } */

    .data-table-main-collapse {
        width: 96em;
    }

    .catalog-left .tab-pane {
        height: 48.5vw;
    }

    .btn-bg {
        padding: 1.96vw 0.3vw !important;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        height: 53.5vw;
    }

    .table-design .table td,
    .table-design .table th {
        padding: 1.5vw 0.8vw !important;
    }

    .catalog-left .nav-item {
        padding: 1.2vw 0.3vw !important;
    }

    .scroll-table {
        height: 27.8vw;
    }

    /*footer { margin-bottom: 50px; }*/
    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        /* height: 50vw; */
        height: 38em;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 70px;
        width: 80px;
        font-size: 24px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 130px;
    }

    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 79.3vh;
    }

    section.wrapper main div.container-fluid div.right-btns {
        width: 15%;
    }

    section.wrapper main div.container-fluid div.right-btns .right-btn-main.d-flex.flex-column.align-items-center.justify-content-center.px-2.py-3 {
        padding: 20px !important;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 50vw;
        }
    }

    a.qty-num {
        height: 55px;
        line-height: 44px;
        width: 100%;
        margin: 0.20em 0.11rem !important;
        font-size: 1.2rem;
    }

    .col-md-8 a.kybord-btn {
        line-height: 50px;
        height: 55px;
        width: 23.9%;
        margin: 0.25em 0.1em !important;
        font-size: 1em;
    }

    .col-md-8 a.kybord-btn span.btn-img,.col-md-8 button.kybord-btn span.btn-img {
        width: 40%;
        display: inherit;
        text-align: center !important;
        height: 60px;
    }

    .col-md-8 a.kybord-btn span.btn-img img,.col-md-8 button.kybord-btn span.btn-img img {
        width: 60%;
        text-align: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 60px;
        line-height: 46px;
    }

    .select-branch {
        height: 55em;
    }

    .quantity-calculate .btn {
        width: 2.7em;
    }

    .quantity-calculate .btn-plus {
        background-position: 0.60em;
    }

    .quantity-calculate .btn-minus {
        background-position: -1.92em;
    }

    .btn-bg {
        min-height: 60px;
        height: 60px;
    }
}

@media screen and (max-width: 1600px) {
    

    .data-table-main-collapse {
        width: 98em;
    }

    .catalog-left .tab-pane {
        /* height: 48em; */
        height: 29em;
    }

    .btn-bg {
        padding: 1.96vw 0.3vw !important;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        /* height: 52em; */
        height: 34em;
    }

    .table-design .table td,
    .table-design .table th {
        padding: 1.5vw 0.8vw !important;
    }

    .catalog-left .nav-item {
        padding: 1.2vw 0.3vw !important;
    }

    .scroll-table {
        height: 41em;
    }

    /*footer { margin-bottom: 50px; }*/
    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        height: 28em;
    }

    .flexigrid div.bDiv {
        height: 28em !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 70px;
        width: 80px;
        font-size: 24px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 130px;
    }

    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 79.3vh;
    }

    section.wrapper main div.container-fluid div.right-btns {
        width: 15%;
    }

    section.wrapper main div.container-fluid div.right-btns .right-btn-main.d-flex.flex-column.align-items-center.justify-content-center.px-2.py-3 {
        padding: 20px !important;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 50vw;
        }
    }

    a.qty-num {
        height: 55px;
        line-height: 44px;
        width: 100%;
        margin: 0.20em 0.11rem !important;
        font-size: 1.2rem;
    }
    .col-md-8 a.kybord-btn, .col-md-8 button.kybord-btn {
        line-height: 55px;
        height: 55px;
        width: 23.9%;
        margin: 0.25em 0.1em !important;
        font-size: 14px;
    }

    .col-md-8 a.kybord-btn span.btn-img,.col-md-8 button.kybord-btn span.btn-img {
        width: 30%;
        display: flex;
        align-items: center !important;
        justify-content: center;
        height: 55px;
    }

    .col-md-8 a.kybord-btn span.btn-img img ,.col-md-8 button.kybord-btn span.btn-img img {
        width: 50%;
        display: flex;
        align-items: center !important;
        justify-content: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 60px;
        line-height: 46px;
    }

    .select-branch {
        height: 55em;
    }

    .quantity-calculate .btn {
        width: 2.4em;
    }

    .quantity-calculate .btn-plus {
        background-position: 0.70em;
    }

    .quantity-calculate .btn-minus {
        background-position: -1.4em;
    }
}

@media screen and (max-width: 1366px) {
    .data-table-main {
        width: calc(100% - 380px);
        padding-bottom: 0 !important;
    }

    .data-table-main-collapse {
        width: 83em;
    }

    .sidebar-wrapper {
        width: 380px;
    }

    .data-table-main-collapse ~ .sidebar-wrapper {
        display: none;
    }

    .catalog-left .tab-pane {
        height: 27em;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        height: 30em;
    }

    .scroll-table {
        height: 18.5em;
    }

    .cus-order-detail .scroll-table {
        height: 10em;
    }

    .table-design .table td,
    .table-design .table th {
        padding: 0.45em 0.65em !important;
    }

    .btn-bg {
        height: 46px;
        min-height: 46px;
        padding: 1em !important;
        font-size: 0.75em;
        word-break: break-word;
    }

    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        height: 30em;
    }

    .flexigrid div.bDiv {
        height: 24em !important;
    }

    .sidebar-inner.d-flex.flex-column.py-3.flex-fill.px-4.p-xxl-0.mh-100.h-100.bg-white {
        padding: 0 10px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.name-plate {
        min-height: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        margin: 10px 0 !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box {
        margin: 10px 0;
        padding: 0 !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box input {
        min-height: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 55px;
        width: 68px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 110px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button.clear {
        font-size: 18px;
    }

    .navigation-btns button {
        width: 160px;
    }

    section.wrapper main div.container-fluid div.customer-info-block div.customer-info-form,
    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 42em;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 30.6em;
        }
    }

    .login-btns button.btn,
    button.btn.bg-secondary.p-0.m-1,
    .alphabet button.btn {
        height: 45px;
        width: 70px;
        font-size: 20px;
        margin: 3px !important;
    }

    div.login-btns div.d-flex.justify-content-around button.btn.text-white.p-0.m-1 {
        height: 50px;
        width: 108px;
        font-size: 18px;
    }

    main.access-page .login-inputbox.text-center.my-3 {
        margin: 10px 0 !important;
    }

    main.access-page .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-size: 1rem !important;
    }

    .login-inputbox.text-center input {
        min-height: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 20px;
        width: 225px;
    }

    .modal-dialog {
        margin: 1rem auto;
    }

    div.driver-sidebar div.drivers-list div a {
        padding: 0.50rem;
    }

    .modal-lg {
        margin: 0.6rem auto;
    }

    .drivers-detail,
    .cus-detail {
        height: 28.2em;
    }

    div.driver-sidebar div.drivers-list {
        height: 35em;
    }

    a.qty-num,
    .numbers button.btn.backspace_numbers {
        height: 40px;
        line-height: 34px;
        width: 53px;
        margin: 0.20em 0.11rem !important;
    }

    .col-md-8 a.kybord-btn , .col-md-8 button.kybord-btn{
        line-height: 38px;
        height: 40px;
        width: 23%;
        margin: 0.25em 0.1em !important;
        font-size: 0.80em;
        text-align: center;
    }

    .col-md-8 a.kybord-btn.shortnote {
        line-height: 18px;
    }

    .col-md-8 a.kybord-btn span.btn-img ,.col-md-8 button.kybord-btn span.btn-img {
        width: 30%;
        display: inherit;
        text-align: center !important;
        height: 40px;
    }

    .col-md-8 a.kybord-btn span.btn-img img ,.col-md-8 button.kybord-btn span.btn-img img {
        width: 70%;
        text-align: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 55px;
        line-height: 40px;
    }

    .select-branch {
        height: 34em;
    }

    .quantity-calculate .btn {
        width: 2.1em;
    }

    .quantity-calculate .btn-plus {
        background-position: 0.50em;
    }

    .quantity-calculate .btn-minus {
        background-position: -1.3em;
    }

    /*.btn-bg {
        min-height: 60px;
        height: 60px;
    }*/
    .catalog-right p {
        font-size: 0.80em;
        margin-bottom: 0.125rem;
    }

    .billing-box h6 {
        font-size: 0.90em;
    }


    section.wrapper main div.container-fluid div.customer-info-block {
        height: 42em;
    }

    .catalog-left .nav-item {
        padding: 0.8vw 1.0vw !important;
    }

}

@media screen and (max-width: 1280px) {
    .data-table-main {
        width: 61em;
    }

    .data-table-main-collapse {
        width: 77.5em;
    }

    .sidebar-wrapper {
        width: 320px;
    }

    .catalog-left .tab-pane {
        height: 33vw;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        height: 37vw;
    }

    .btn-bg {
        padding: 1.1vw 0.3vw !important;
    }

    .table-design .table td,
    .table-design .table th {
        padding: 0.8vw 0.8vw !important;
    }

    .scroll-table {
        height: 14em;
    }

    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        height: 33em;
    }

    .flexigrid div.bDiv {
        height: 465px !important;
    }

    .sidebar-inner.d-flex.flex-column.py-3.flex-fill.px-4.p-xxl-0.mh-100.h-100.bg-white {
        padding: 0 10px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.name-plate {
        min-height: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        margin: 10px 0 !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box {
        margin: 10px 0;
        padding: 0 !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box input {
        min-height: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 55px;
        width: 68px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 110px;
        font-size: 20px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button.clear {
        font-size: 18px;
    }

    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 38.32em;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 35.9vw;
        }

        .scroll-table {
            height: 18vw;
        }
    }

    div.driver-sidebar div.drivers-list {
        height: 37em;
    }

    .drivers-detail,
    .cus-detail {
        height: 40em;
    }

    a.qty-num {
        height: 40px;
        line-height: 34px;
        width: 100%;
        margin: 0.20em 0.11rem !important;
        font-size: 1rem;
    }

    .col-md-8 a.kybord-btn {
        line-height: 38px;
        height: 40px;
        width: 108px;
        margin: 0.25em 0.1em !important;
        font-size: 0.80em;
    }

    .col-md-8 a.kybord-btn.shortnote {
        line-height: 18px;
    }

    .col-md-8 a.kybord-btn span.btn-img {
        width: 28%;
        display: inherit;
        text-align: center !important;
        height: 40px;
    }

    .col-md-8 a.kybord-btn span.btn-img img {
        width: 80%;
        text-align: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 55px;
        line-height: 40px;
        font-size: 1rem;
    }

    .select-branch {
        height: 30em;
    }
}

@media screen and (max-width: 1024px) {
    .data-table-main {
        width: 45em;
    }

    .data-table-main-collapse {
        width: 61.5em;
    }

    .sidebar-wrapper {
        width: 17em;
    }

    .catalog-left .tab-pane {
        height: 29em;
    }

    .col-md-8.category-menu,
    .modifiers-menu {
        height: 31.5em;
    }

    .scroll-table {
        height: 20em;
    }

    .btn-bg {
        padding: 1.1vw 0.3vw !important;
    }

    .modi_build div.modifierbuilder_items,
    .modi_build .selected_modifierbuilder {
        height: 18em;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .table-design .table td,
    .table-design .table th {
        padding: 0.5em !important;
    }

    .w-80 {
        width: 100%;
        padding: .5rem 0px !important;
    }

    .navigation-btns button span {
        font-size: 1.25vw;
    }

    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
        height: 31em;
    }

    .sidebar-inner.d-flex.flex-column.py-3.flex-fill.px-4.p-xxl-0.mh-100.h-100.bg-white {
        padding: 0 10px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.name-plate {
        min-height: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        margin: 10px 12px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box {
        margin: 10px 0;
        padding: 0 12px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btn-input-box input {
        min-height: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button {
        height: 55px;
        width: 68px;
        font-size: 18px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.action-btn a {
        width: 100px;
        font-size: 18px;
    }

    section.dashboard.wrapper main div.container-fluid div.sidebar-main div.d-flex div.sidebar-inner div.dial-btns-box button.clear {
        font-size: 16px;
    }

    .all-branches.mr-4,
    .all-agents.mr-4,
    .search-box.mr-4 {
        margin-right: 10px !important;
    }

    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-branches select.all-branches-menu,
    section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.data-table-header div.all-agents select.all-agents-menu {
        width: 140px;
    }

    .custom-check-box label {
        text-indent: 35px;
    }

    .checkmark {
        left: 9px;
    }

    .table-responsive .table td,
    .table th {
        padding: 0.40rem .15rem !important;
        font-weight: normal;
        font-size: 0.90em;
    }

    .navigation-btns button {
        width: auto;
    }

    section.wrapper main div.container-fluid div.right-btns .right-btn-main.d-flex.flex-column.align-items-center.justify-content-center.px-2.py-3 {
        padding: 10px 5px !important;
    }

    section.wrapper main div.container-fluid div.right-btns button.btn.bg-primary.p-0.rounded.btn-block div.text-white.flex-fill.text-uppercase.text-left.px-3 {
        padding: 0 10px !important;
    }

    @-moz-document url-prefix() {
        section.dashboard.wrapper main div.container-fluid div.data-table-main div.data-table-inner div.table-responsive {
            height: 32em;
        }
    }

    .driver-order-detail .catalog-right,
    .driver-order-detail .billing-box h6 {
        font-size: .99rem !important;
    }

    .driver-order-detail .catalog-right .table-design .table td,
    .driver-order-detail .catalog-right .table-design .table th,
    .driver-order-detail .catalog-right p {
        font-size: 0.80rem;
    }

    .cus-order-detail .catalog-right,
    .cus-order-detail .billing-box h6 {
        font-size: .99rem !important;
    }

    .cus-order-detail .catalog-right .table-design .table td,
    .cus-order-detail .catalog-right .table-design .table th,
    .cus-order-detail .catalog-right p {
        font-size: 0.80rem;
    }

    .drivers-detail,
    .cus-detail {
        height: 38em;
    }

    .table-design .table td,
    .table-design .table th {
        font-size: .80rem;
    }

    .catalog-right .table-design .table td p {
        font-size: 0.80em;
        line-height: 1;
    }

    .btn-bg {
        font-size: 0.75em;
    }

    .cus-info .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-size: 1em !important;
    }

    .alphabet a {
        margin: 0.125rem !important;
    }

    a.qty-num,
    .numbers button.btn.backspace_numbers {
        height: 40px;
        line-height: 34px;
        width: 28px;
        margin: 0.20em 0.11rem !important;
    }

    .col-md-8 a.kybord-btn {
        line-height: 38px;
        height: 40px;
        width: 100px;
        margin: 0.25em 0.1em !important;
        font-size: 0.80em;
        text-align: content: '';
    }

    .col-md-8 a.kybord-btn.shortnote {
        line-height: 18px;
    }

    .col-md-8 a.kybord-btn span.btn-img {
        width: 30%;
        display: inherit;
        text-align: center !important;
        height: 40px;
    }

    .col-md-8 a.kybord-btn span.btn-img img {
        width: 80%;
        text-align: center;
        padding: 5px 0;
    }

    div.modifiers-menu-main div.modifiers-menu-inner div.modifiers-left div a.col-md-12 {
        height: 55px;
        line-height: 40px;
    }

    .cus-orders.card,
    .drivers-detail .card {
        font-size: 0.9rem;
    }

    .select-branch {
        height: 34em;
    }

    /*section.wrapper main div.container-fluid div.customer-info-block div.customer-info-form {*/
    section.wrapper main div.container-fluid div.customer-info-block div.customer-info-form,
    .customer-info-options.bg-white.p-2.shadow-sm {
        height: 42.5em;
        overflow-y: auto;
    }

    .quantity-calculate .btn {
        width: 1.5em;
    }

    .quantity-calculate .btn-plus {
        background-position: 0.50em;
    }

    .quantity-calculate .btn-minus {
        background-position: -1.00em;
    }

    .customer-info-options .card-body {
        padding: 0.50rem 1rem !important;
    }

    .quantity-calculate .form-control {
        width: 3em;
        height: 3em;
        max-width: 3em;
    }

    .flexigrid div.bDiv {
        height: 405px !important;
    }

    section.wrapper main div.container-fluid div.customer-info-block {
        height: 43em;
    }

    .all-order-btn-box {
        margin-right: 10px !important;
        white-space: nowrap;
    }

    .all-order-btn-box .btn:first-child {
        margin-right: 5px;
    }

    .modi_build .btn-bg {
        white-space: normal;
        height: 60px;
        padding: 5px !important;
        line-height: 1.3em;
    }
}

/*button.btn, a.btn {
    background: #8a9c6a !important;
}*/
/*===============15-10-2018 mahapal end==============*/
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
        visibility: hidden;
    }

    25% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
        visibility: hidden;
    }

    50% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        visibility: hidden;
    }

    75% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        visibility: hidden;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        visibility: visible;
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
        visibility: hidden;
    }

    25% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
        visibility: hidden;
    }

    50% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        visibility: hidden;
    }

    75% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        visibility: hidden;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        visibility: visible;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    25% {
        opacity: 0.7;
        visibility: hidden;
    }

    50% {
        opacity: 0.5;
        visibility: hidden;
    }

    75% {
        opacity: 0.2;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    25% {
        opacity: 0.7;
        visibility: hidden;
    }

    50% {
        opacity: 0.5;
        visibility: hidden;
    }

    75% {
        opacity: 0.2;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* samir css start */
#catalog-form .table-design .table tr th{
    padding: 0.5vw 0.8vw !important;
} 
.action-btn .btn img{
    max-height: 40px;
}
.btn-cat-bg {
    min-height: 60px !important;
    height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#category-menu-main .category-menu-inner{
    max-height: 55vh;
    overflow-y: auto;
}
.table-design .scroll-table{
    height: 15em;
}
#nav-tabContent-template .templatemenu {
    border: 3px solid #ccc !important;
    margin-right: 10px;
    width: 60px;
    height: 55px;
    padding: 8px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: white !important;
    margin-bottom: 10px;
}
#nav-tabContent-template .active>.templatemenu{
    border-color: #006B38 !important;
}
.img_box_text{
    margin-top: -8px;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}
#nav-tabContent-template .templatemenu img{
    height: 40px;
    width: 46px;
    object-fit: contain;
}
.right-btn-main .btn img{
    width: 20px;
    height: 20px;
}
.modifiers-menu-inner .bg-number-panel.bg-info{
    background-color: #006B38 !important;
}
.order-qty .btn{
    background: white !important;
    opacity: 1;
    color: black;
}
@media (min-width: 1650px){
    #category-menu-main .category-menu-inner{
        max-height: 65vh;
    }
    .table-design .scroll-table{
        height: 25em;
    }
    #nav-tabContent-template .templatemenu{
        width: 85px;
        height: 75px;
    }
    #nav-tabContent-template .templatemenu img{
        height: 60px;
        width: 64px;
    }
}

.btn {
    box-shadow: none !important;
    outline: none;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Source Sans Pro', sans-serif;
  }
  .btn.btn-info {
    border: 1px solid black !important;
    color: black !important;
    background-color: transparent !important;
  }
  .btn.btn-primary {
    border-color: #096a3b !important;
    color: white !important;
    background-color: #096a3b !important;
  }
  .btn.btn-secondary {
    border-color: transparent !important;
    background-color: transparent !important;
    color: black !important;
  }
  .custom-radio-btn:checked + label {
    background-color: #5bc0de;
    color: #fff;
}
.modifier_stage_data.required {
    background-color: #f9ebebe0;
    color: red;
}
/**
*/
.customize-container {
    background-color: #fff;
    position: fixed;
    bottom: -100%;
    width: 30%;
    padding: 20px 0 0;
    z-index: 100;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    transition-property: bottom, visibility;
    visibility: hidden;
    height: 100%;
  }
  
  .customize-container.active {
    bottom: 0;
    visibility: visible;
  }


.close-popup {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px;
  }
  
  .font-weight-medium {
    font-weight: 500 !important;
  }
  
  .item-qyt {
    border: 1px solid #7D8187;
    border-radius: 3px;
    width: auto;
    max-width: 120px;
  }
  
  .item-qyt .number-input {
    width: 40px;
    padding-top: 0;
    padding-bottom: 0;
    height: 26px;
    text-align: center !important;
    color: #006B35;
    font-weight: bold;
  }
  
  .item-qyt .icon-square {
    width: 40px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .item-qyt .icon-square svg rect,
  .item-qyt .icon-square svg path {
    fill: #006B35;
  }
  
  .item-qyt .icon-square.minus:after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    background: #7D8187;
    right: 0;
  }
  
  .item-qyt .icon-square.plus:after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    background: #7D8187;
    left: 0;
  }
  
  .item-qyt .icon-square:hover,
  .item-qyt .icon-square:focus,
  .item-qyt .icon-square:active {
    background-color: #006B35;
  }
  
  .item-qyt .icon-square:hover svg rect,
  .item-qyt .icon-square:hover svg path,
  .item-qyt .icon-square:focus svg rect,
  .item-qyt .icon-square:focus svg path,
  .item-qyt .icon-square:active svg rect,
  .item-qyt .icon-square:active svg path {
    fill: #fff;
  }
  
  .qty .item-qyt {
    margin-top: 2px;
    max-width: 80px;
    flex-direction: row !important;
  }
  
  .qty .item-qyt .number-input {
    width: 28px;
  }
  
  .qty .item-qyt .icon-square {
    width: 28px;
  }
  .input-counter {
    border: 0;
    border-radius: 0;
    padding: 10px 0;
    background-color: transparent;
    position: relative;
    z-index: 2;
    font-size: 16px;
}
body.overlay-body {
    overflow: hidden;
    position: relative;
}
body.overlay-body:before {
    content: "";
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.item-qyt {
    border: 1px solid #7D8187;
    border-radius: 3px;
    width: auto;
    max-width: 120px;
  }
  
  .item-qyt .number-input {
    width: 40px;
    padding-top: 0;
    padding-bottom: 0;
    height: 26px;
    text-align: center !important;
    color: #006B35;
    font-weight: bold;
  }
  
  .item-qyt .icon-square {
    width: 40px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .item-qyt .icon-square svg rect,
  .item-qyt .icon-square svg path {
    fill: #006B35;
  }
  
  .item-qyt .icon-square.minus:after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    background: #7D8187;
    right: 0;
  }
  
  .item-qyt .icon-square.plus:after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    background: #7D8187;
    left: 0;
  }
  
  .item-qyt .icon-square:hover,
  .item-qyt .icon-square:focus,
  .item-qyt .icon-square:active {
    background-color: #006B35;
  }
  
  .item-qyt .icon-square:hover svg rect,
  .item-qyt .icon-square:hover svg path,
  .item-qyt .icon-square:focus svg rect,
  .item-qyt .icon-square:focus svg path,
  .item-qyt .icon-square:active svg rect,
  .item-qyt .icon-square:active svg path {
    fill: #fff;
  }
  
  .qty .item-qyt {
    margin-top: 2px;
    max-width: 80px;
    flex-direction: row !important;
  }
  
  .qty .item-qyt .number-input {
    width: 28px;
  }
  
  .qty .item-qyt .icon-square {
    width: 28px;
  }
  
  .modifier_stages {
      border: 0;
      border-radius: 0;
      padding: 10px 0;
      background-color: transparent;
      position: relative;
      z-index: 2;
      font-size: 16px;
  }
  .modal-body {
    overflow-y: scroll;
    max-height: 600px;
  }

.thirdPartyformData {
    padding: 5px 5px 5px 5px;
    background: white;
}
.thirdPartyformData label{
    font-size: 14px;
  }
.thirdparty-header {
    background: green;
    color: white;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-top: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 33px !important;
}
.sidebar-inner .dial-btns-box{
    max-width: 300px;
    margin: auto;
}
.sidebar-inner .action-btn{
    max-width: 300px;
    margin: auto !important;
    width: 272px;
}
.error_callcenter_order {
    font-size: 12px;
    line-height: 12px;
}
div#branch_section_header_thirdParty {
    background: #6fc38633 !important;
}
.inner_sidebar_wraper{
    max-height: 650px;
    overflow-y: auto;
}
#call_center_order_wrapper th{
    white-space: nowrap;
    /* border: 0 !important; */
    border-bottom: 1px solid black !important;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

div.dataTables_scrollHead table.dataTable {
    margin-bottom: 0 !important;
}
.table {
    color: #697a8d;
    vertical-align: middle;
    border-color: #d9dee3;
}
.dataTable {
    border: 0 !important;
}
.table-bordered {
    border: 1px solid #f4f4f4;
}
.dataTable tr {
    border-bottom: 1px dotted #eff2f5 !important;
}

.dataTables_scrollHead {
    overflow: hidden;
    position: relative;
    border: 0px;
    width: 100%;
}

    #order_filters {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#order_filters .bg-white {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
}

#order_filters .all-branches,
#order_filters .all-agents,
#order_filters .search-box,
#order_filters .all-order-btn-box,
#order_filters .info-btn-box {
    margin-right: 15px;
}

#order_filters .form-control {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 10px 15px;
    font-size: 0.9rem;
    height: 42px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

#order_filters .form-control:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

#order_filters .input-group {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

#order_filters .input-group .form-control {
    box-shadow: none;
}

#order_filters .input-group-append button {
    background: #4299e1;
    border: 1px solid #4299e1;
    border-radius: 0 8px 8px 0;
    padding: 0 12px;
    transition: all 0.3s ease;
}

#order_filters .input-group-append button:hover {
    background: #3182ce;
}

#order_filters .btn-info {
    background: #4299e1;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#order_filters .btn-info:hover {
    background: #3182ce;
    transform: translateY(-2px);
}

#order_filters .reset {
    background: #a0aec0;
}

#order_filters .reset:hover {
    background: #718096;
}

#order_filters .dropdown-toggle {
    background: #2d3748;
    color: white;
    border-radius: 8px;
    padding: 10px 15px;
    border: none;
    transition: all 0.3s ease;
}

#order_filters .dropdown-toggle:hover {
    background: #4a5568;
}

#order_filters .dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}

#order_filters .dropdown-item {
    padding: 10px 15px;
    border-bottom: 1px solid #edf2f7;
    font-weight: 500;
}

#order_filters .dropdown-item:last-child {
    border-bottom: none;
}

#order_filters .text-red {
    color: #e53e3e !important;
}

#order_filters .text-green {
    color: #38a169 !important;
}

#order_filters .text-primary {
    color: #4299e1 !important;
}

#order_filters .bg-gold {
    background: linear-gradient(to right, #f6ad55, #ed8936);
    border: none;
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
}

#order_filters .bg-gold:hover {
    background: linear-gradient(to right, #ed8936, #dd6b20);
    transform: translateY(-2px);
}

#order_filters .bg-gold .icon-box {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px 0 0 8px;
}

#order_filters .bg-gold .text-white {
    padding: 10px 15px;
    font-weight: 500;
}

#order_filters .btn140 {
    min-width: 140px;
}

/* Checkbox section - keeping original structure but improving visuals */
#order_filters .check-boxs {
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#order_filters .custom-check-box {
    margin-right: 25px;
}

#order_filters .custom-check-box label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 0;
}

#order_filters .custom-check-box input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    accent-color: #4299e1;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    #order_filters .bg-white {
        flex-wrap: wrap;
    }
    
    #order_filters .all-branches,
    #order_filters .all-agents,
    #order_filters .search-box,
    #order_filters .all-order-btn-box,
    #order_filters .info-btn-box {
        margin-bottom: 15px;
        flex: 1;
        min-width: 200px;
    }
    
    #order_filters .check-boxs .d-flex {
        flex-wrap: wrap;
    }
    
    #order_filters .custom-check-box {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    #order_filters .all-branches,
    #order_filters .all-agents,
    #order_filters .search-box,
    #order_filters .all-order-btn-box,
    #order_filters .info-btn-box {
        min-width: 100%;
        margin-right: 0;
    }
    
    #order_filters .all-order-btn-box {
        display: flex;
        gap: 10px;
    }
    
    #order_filters .all-order-btn-box .btn {
        flex: 1;
    }
}
.discount-card .card {
    border-radius: 12px;
    background-color: #e6f9ec; /* light green */

}

/* Discount nature-based background colors */
.nature-1 .card {
    background-color: #e6f9ec; /* light green */
    box-shadow: 0 2px 6px rgba(0, 128, 0, 0.15) !important;
}

.nature-2 .card {
    background-color: #fff3e0; /* light orange */
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.15) !important;
}

.nature-3 .card {
    background-color: #f3e6ff; /* light purple */
    box-shadow: 0 2px 6px rgba(128, 0, 128, 0.15) !important;
}

.nature-4 .card {
    background-color: #ffe6f0; /* light pink/blue */
    box-shadow: 0 2px 6px rgba(255, 20, 147, 0.15) !important;
}
/* Legend badge styles */
.badge.nature-1,
.badge.nature-2,
.badge.nature-3,
.badge.nature-4 {
    font-size: 0.75rem;   /* smaller font */
    padding: 0.35em 0.6em;
    border-radius: 12px;  /* rounded corners */
    font-weight: 500;
}
/* Legend badge styles */
.badge.nature-1 {
    background-color: #e6f9ec; /* light green */
    color: #198754;
    border: 1px solid #198754;
}

.badge.nature-2 {
    background-color: #fff3e0; /* light orange */
    color: #fd7e14;
    border: 1px solid #fd7e14;
}

.badge.nature-3 {
    background-color: #f3e6ff; /* light purple */
    color: #6f42c1;
    border: 1px solid #6f42c1;
}

.badge.nature-4 {
    background-color: #ffe6f0; /* light pink/blue */
    color: #d63384;
    border: 1px solid #d63384;
}
/* Minimum height for discount modal */
#modal-discount .modal-content {
    min-height: 60vh;  /* 60% of viewport height */
}

/* Ensure the body expands if needed */
#modal-discount .modal-body-discount {
    min-height: 40vh;  
    overflow-y: auto;  /* scroll if content is long */
}
/* Hover effect */
.discount-card:hover .card {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.discount-card {
    cursor: pointer;
    display: block;
}

/* when radio is selected */
.discount-btn:checked + .discount-card .card {
    border: 2px solid #dc3545 !important; /* Bootstrap red */
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.6);
    transform: translateY(-3px);
    background-color: #f8d7da; /* light red background */
}

#discount_amount, 
#discount_percentage {
    max-width: 300px;
}
.discount-nature-badge {
    font-size: 0.7rem;     /* smaller text */
    font-weight: 500;      /* medium weight */
    padding: 0.25em 0.5em; /* tighter padding */
    border-radius: 8px;    /* rounded */
    background-color: #28a745; /* Bootstrap green */
}

/* Custom XXL modal */
.modal-xxl {
  max-width: 95% !important;   /* almost full screen */
}

.modal-body-discount     {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.menu-item {
    margin: 5px;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.categoriesmenus {
    margin: 5px;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.menu-item.in-stock {
    cursor: pointer;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.menu-item.in-stock:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.menu-item.in-stock:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.menu-item.out-of-stock {
    background-color: #f8f9fa !important;
    color: #6c757d;
    cursor: not-allowed;
    box-shadow: 
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.menu-item.placeholder {
    background-color: #e9ecef;
    border: 2px dashed #ced4da;
    box-shadow: none;
    cursor: default;
}

.menu-item-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    padding: 12px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}


.menu-item.out-of-stock .menu-item-text {
    color: #6c757d;
    text-shadow: none;
}

.menu-item.placeholder .menu-item-text {
    color: #adb5bd;
    text-shadow: none;
}

/* Out of stock ribbon */
.out-of-stock-badge {
    position: absolute;
    top: 10px;
    right: -30px;
    background: #d9534f;
    color: white;
    padding: 5px 40px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .menu-item {
        margin: 4px;
        min-height: 100px;
    }
    
    .menu-item-text {
        font-size: 13px;
        padding: 8px;
    }
}