/**************************************************
*                      BB css                     *
**************************************************/

@media screen and (max-width: 1199px) {
    .bb-body-bg {
        overflow: hidden;
    }
    .bb-body-bg::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 50%);
        backdrop-filter: blur(.5px);
        overflow: hidden;
    }
    .hide-menu-row-btn.sidebar-close-overlay,
    .hide-order-type-card-btn.sidebar-close-overlay,
    .bb-sidebar-close-btn.sidebar-close-overlay {
        position: fixed;
        width: calc(100% - 215px);
        height: 100%;
        background-color: transparent;
        border-radius: 0px;
        top: 0;
        right: 0;
        z-index: -1;
        display: none;
    }
    .hide-menu-row-btn.sidebar-close-overlay,
    .hide-order-type-card-btn.sidebar-close-overlay {
        width: 100%;
        right: auto;
        left: 0;
    }
    .pos-billing-menu-row.open .hide-menu-row-btn.sidebar-close-overlay,
    .pos-billing-row-order-type.open .hide-order-type-card-btn.sidebar-close-overlay,
    .bb-sidebar.open .bb-sidebar-close-btn.sidebar-close-overlay {
        display: block;
    }
    .bb-header-title {
        font-size: 18px;
    }
    .bb-header-icon-row {
        gap: 15px;
    }
    .bb-header-icon-row>* {
        font-size: 18px;
    }
    .bb-datatable-length span {
        font-size: 12px;
    }
    .bb-datatable-length .bb-form-control-only .ts-control {
        min-width: 65px;
    }
    .bb-datatable-length .bb-select-css .ts-control .item {
        font-size: 12px;
    }
    .dt-paging nav::before {
        width: calc(100% - 78px);
    }
    .bb-datatable-footer .dt-paging nav button.dt-paging-button {
        width: 34px;
        height: 34px;
    }
    .bb-count-card>p:hover,
    .bb-count-card>p:focus {
        color: var(--primary-color);
        background-color: var(--white-color);
    }
    .bb-count-card>p:active {
        color: var(--white-color);
        background-color: var(--primary-color);
    }
    .bb-scrollspy-nav.scrollable .scroll-arrow {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .bb-sidebar {
        left: -120%;
        transition: var(--transition);
        transition-property: left;
        z-index: 100000;
    }
    .bb-sidebar.open {
        left: 0;
    }
    .bb-logo {
        height: 60px;
    }
    .bb-logo a {
        max-width: 100px;
    }
    .bb-sidebar-open-btn {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--secondary-color);
        font-size: 16px;
        line-height: 1;
        padding: 0;
        border: none;
        background-color: transparent;
    }
    .bb-sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        font-size: 8px;
        padding: 0;
        background-color: var(--primary-color);
        color: var(--white-color);
        border: none;
    }
    .bb-header-left .back-btn {
        margin-left: 5px;
    }
    .bb-header-title {
        font-size: 16px;
    }
    .bb-container {
        width: 100%;
        margin-left: 0;
        padding: 15px;
        gap: 15px;
    }
    .bb-800-offcanvas.offcanvas,
    .bb-900-offcanvas.offcanvas {
        width: calc(100% - 20px);
    }
}

@media screen and (max-width: 767px) {
     :root {
        --font-size-14px: 12px;
    }
    .bb-form-control[type="file"] {
        padding-top: 12px;
    }
    .bb-form-control[type="file"]::file-selector-button {
        font-size: 10px;
    }
    .bb-scrollspy-link,
    .bb-tabs .nav-tabs .nav-link {
        min-height: 45px;
        padding-inline: 12px;
    }
    .bb-btn {
        gap: 8px;
        padding-inline: 15px;
        min-width: 75px;
        min-height: 35px;
    }
    table.dataTable input.dt-select-checkbox,
    .bb-form-checkbox-input {
        width: 14px;
        height: 14px;
    }
    .bb-form-switch-input {
        width: 28px;
        height: 16px;
        background-size: 12px;
    }
    .bb-form-checkbox-input:checked {
        background-size: 8px;
    }
    .bb-form-label {
        margin-inline: 8px;
    }
    .pn-form-control-card {
        gap: 10px;
    }
    .pn-text {
        padding-inline: 10px;
        transform: translateY(2px);
    }
    .bb-form-control-only.multi.has-items .ts-control,
    .bb-form-control-only .ts-control,
    .bb-form-control-only,
    .bb-select-css .ts-dropdown .no-results,
    .bb-select-css .ts-control .item,
    .bb-select-css .ts-dropdown .option {
        padding-block: 6px;
    }
    .bb-dropdown .dropdown-item,
    .bb-select-css .ts-dropdown .create,
    .bb-select-css .ts-control .item,
    .bb-select-css .ts-dropdown .option {
        padding: 6px 12px;
    }
    .bb-select-css.multi.has-items .ts-control,
    .bb-select-css .ts-control,
    .bb-form-control {
        padding-inline: 12px;
    }
    .bb-select-css .ts-control .item {
        padding-block: 0;
    }
    .bb-select-css.single .ts-control .item {
        padding-inline: 0;
    }
    .bb-select-span-css .ts-dropdown [data-selectable] {
        gap: 0px;
    }
    .bb-select-span-css .ts-control .item span,
    .bb-select-span-css .ts-dropdown [data-selectable] span {
        text-transform: capitalize;
        color: var(--black888-color);
    }
    div.bb-form-control .bb-icon-veg,
    div.bb-form-control .bb-icon-nonveg,
    div.bb-form-control .bb-icon-egg,
    .bb-select-css .ts-control .item i,
    .bb-select-css .ts-dropdown .option i {
        margin-right: 6px;
    }
    .bb-select-css .ts-control {
        padding-right: 30px !important;
    }
    .bb-select-css.multi.has-items .ts-control,
    .bb-select-css .ts-control,
    .bb-form-control {
        min-height: 40px;
    }
    .pn-form-control-card .bb-form-control {
        min-height: 38px;
    }
    .bb-select-css.multi.has-items .ts-control {
        gap: 5px;
    }
    div.ts-wrapper.bb-select-css.multi .item {
        padding: 4px 6px !important;
        gap: 6px;
        border-radius: 2px;
    }
    div.ts-wrapper.bb-select-css.multi .item .remove {
        width: 10px;
        height: 10px;
    }
    .bb-select-css .ts-control::before {
        right: 12px;
    }
    .bb-form-control-bg {
        padding-right: 35px;
        background-position: right 12px center;
    }
    .bb-form-icon {
        top: 14px;
        right: 12px;
    }
    .bb-form-label+* {
        margin-top: -6px;
    }
    .bb-card-header {
        min-height: 42px;
        padding: 10px 15px;
    }
    .bb-accordion .accordion-body,
    .bb-card-body {
        padding: 15px;
    }
    .bb-card-hr {
        margin-block: 15px;
    }
    .bb-table .table tr th,
    .bb-table .table tr td {
        height: 46px;
    }
    .bb-table-flex-text {
        gap: 4px 8px;
    }
    .bb-table-flex-text i {
        margin-top: 4px;
    }
    .bb-header {
        padding: 10px;
        gap: 8px;
    }
    .bb-header-left {
        gap: 5px;
    }
    .bb-header-icon-row,
    .bb-header-right {
        gap: 10px;
    }
    .bb-header-icon-row>* {
        font-size: 16px;
    }
    .bb-badge {
        padding: 10px;
    }
    .bb-datatable-header .bb-badge {
        padding-inline: 8px;
    }
    .bb-sidebar-list {
        padding-block: 5px;
    }
    .bb-sidebar-link::before {
        height: 18px;
    }
    .bb-sidebar-collapse li a::before {
        height: 31px;
    }
    .logout-list {
        padding-block: 10px;
    }
    .bb-datepicker-js,
    .bb-multiple-datepicker-js,
    .bb-datetimepicker-js,
    .bb-range-datepicker-js,
    .bb-monthpicker-js {
        min-width: auto;
    }
    .bb-datepicker-container .bb-form-control-bg {
        padding-right: 50px;
    }
    .bb-datepicker-clear-btn {
        right: 32px;
        height: 40px;
    }
    .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
        left: 8px;
    }
    .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
        right: 8px;
    }
    .flatpickr-calendar {
        min-width: auto;
        width: 275px;
    }
    .flatpickr-months {
        padding-block: 8px;
    }
    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month .numInputWrapper {
        width: 65px;
    }
    .flatpickr-time .flatpickr-am-pm,
    .flatpickr-time .numInputWrapper {
        height: 30px;
    }
    .flatpickr-time .flatpickr-am-pm {
        line-height: 30px;
    }
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        background-size: 7px;
        background-position: right 7px center;
        padding-right: 20px;
    }
    .numInputWrapper span.arrowUp:after {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-bottom: 3px solid rgba(57, 57, 57, 0.6);
    }
    .numInputWrapper span.arrowDown:after {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 3px solid rgba(57, 57, 57, 0.6);
    }
    span.flatpickr-weekday,
    .flatpickr-day {
        width: 28px;
        height: 28px;
    }
    .flatpickr-calendar.static.open,
    .flatpickr-calendar.open {
        gap: 8px;
    }
    .flatpickr-calendar.hasTime.open {
        padding-block: 8px;
    }
    .flatpickr-calendar.hasTime .flatpickr-time,
    .flatpickr-custom-button-row,
    .flatpickr-custom-input,
    .flatpickr-rContainer {
        margin-inline: 8px;
    }
    .flatpickr-calendar.open {
        gap: 8px;
    }
    .flatpickr-custom-input input.bb-form-control {
        min-height: 30px;
    }
    .flatpickr-day.inRange,
    .flatpickr-day.prevMonthDay.inRange,
    .flatpickr-day.nextMonthDay.inRange,
    .flatpickr-day.inRange {
        box-shadow: -8px 0 0 var(--fpBoxShadow), 8px 0 0 var(--fpBoxShadow);
    }
    .bb-600-offcanvas.offcanvas,
    .bb-700-offcanvas.offcanvas {
        width: calc(100% - 20px);
    }
    .offcanvas-header {
        padding: 11.5px 15px;
    }
    .offcanvas-header .offcanvas-btn-close {
        width: 22px;
        height: 22px;
    }
    .offcanvas-body {
        padding: 15px;
    }
    .offcanvas-footer {
        padding: 9.5px 15px;
    }
    table.dataTable input.dt-select-checkbox:checked,
    .bb-form-checkbox-input:checked {
        background-size: 8px;
    }
    .bb-datatable-header {
        padding: 15px;
    }
    .bb-datatable-header>.bb-form-control-card .bb-select-css .ts-control,
    .bb-datatable-header .bb-form-control,
    .bb-datatable-header>* {
        min-height: 36px;
    }
    .bb-datatable-header .bb-datepicker-container .bb-datepicker-clear-btn {
        height: 36px;
    }
    .bb-datatable-header .bb-datepicker-container .bb-datepicker-clear-btn>i {
        margin-top: 2px;
    }
    .bb-datatable-header .bb-datepicker-container {
        flex-basis: 210px;
    }
    .bb-datatable-header .bb-dropdown {
        flex-basis: 90px;
    }
    .bb-select-dropdown-btn-row>* {
        min-height: 26px;
    }
    .bb-select-dropdown-btn-row {
        gap: 5px;
        padding: 5px;
    }
    .ts-dropdown .optgroup-header {
        padding: 5.5px 8px;
    }
    table.fixedHeader-floating>thead>tr>th,
    table.fixedHeader-floating>thead>tr>td,
    .bb-table .table tr th,
    .bb-table .table tr td,
    table.dataTable>tbody>tr>td,
    .bb-datatable .table tr th,
    .bb-datatable .table tr td {
        padding: 10px;
    }
    table.fixedHeader-floating>thead>tr>th,
    table.fixedHeader-floating>thead>tr>td,
    table.dataTable>tbody>tr>td,
    .bb-datatable .table tr th,
    .bb-datatable .table tr td {
        height: 55px;
    }
    div.dt-processing,
    .bb-datatable-footer,
    .bb-card div.dt-container.dt-empty-footer tbody>tr:last-child>*,
    table.dataTable>tbody>tr>td,
    .bb-datatable .table tr th,
    .bb-datatable .table tr td,
    table.dataTable>tbody>tr:first-child>* {
        border-top-width: 3px;
    }
    table.fixedHeader-floating>thead>tr>th,
    table.fixedHeader-floating>thead>tr>td {
        border-bottom-width: 3px;
    }
    table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,
    table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,
    table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order,
    table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order,
    table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order,
    table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order,
    table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order,
    table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order {
        right: 8px;
    }
    table.dataTable>tbody>tr>td.datatable-medium-column,
    .bb-datatable .table tr .datatable-medium-column {
        width: 100px;
    }
    .bb-datatable-action-row {
        gap: 4px;
    }
    .bb-datatable-action-row>* {
        width: 20px;
        height: 20px;
    }
    .bb-form-control.bb-datatable-search-input {
        flex-basis: 125px;
        order: 1;
    }
    .bb-datatable-footer {
        padding: 19px 15px 15px;
    }
    .bb-datatable-length .bb-form-control-only .ts-control {
        min-width: 55px;
        padding-inline: 8px 20px !important;
    }
    .bb-datatable-length .bb-form-control-only .ts-control {
        padding-block: 3px !important;
    }
    .bb-datatable-length .bb-select-css .ts-control::before {
        right: 6px;
    }
    .dt-paging nav::before {
        width: calc(100% - 70px);
    }
    .bb-datatable-footer .dt-paging nav button.dt-paging-button {
        width: 30px;
        height: 30px;
    }
    .bb-datatable-footer .dt-paging nav .dt-paging-button.first,
    .bb-datatable-footer .dt-paging nav .dt-paging-button.last {
        font-size: 8px;
    }
    .no-results {
        font-size: 14px;
        gap: 10px;
    }
    .dt-empty .no-results {
        min-height: 150px;
    }
    .no-results img {
        width: 50px;
    }
    .bb-empty-data-card>img {
        width: 60px;
    }
    .bb-empty-data-card>span {
        margin-bottom: 15px;
    }
    .bb-modal-action .modal-body {
        padding: 25px;
        gap: 25px;
    }
    .bb-modal-action .modal-body>aside>span {
        margin-top: 3px;
    }
    .off-import-btn {
        gap: 12px;
        padding: 12px;
    }
    .off-import-btn>img {
        width: 20px;
    }
    .bb-file-upload-card label {
        min-height: 130px;
        padding-bottom: 43.5px;
    }
    .bb-file-upload-card label i {
        font-size: 16px;
    }
    .bb-file-upload-info {
        margin-top: -43.5px;
    }
    .bb-file-upload-info p {
        min-width: auto;
    }
    .bb-file-upload-view-card {
        gap: 8px;
        padding: 8px;
    }
    .bb-file-upload-preview {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }
    .bb-file-upload-preview>* {
        width: 26px;
        height: 26px;
    }
    .bb-file-upload-data {
        gap: 3px;
    }
    .bb-file-upload-view-card>button {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
    .bb-file-upload-alert {
        padding-block: 10px;
    }
    .bb-flex-card {
        gap: 8px;
    }
    .bb-flex-card>* {
        flex-basis: 125px;
    }
    .bb-flex-card>.bb-icon-drag,
    .bb-flex-card .bb-small-btn {
        margin-top: 10px;
    }
    .bb-flex-card>.bb-form-checkbox-input {
        margin-top: 13px;
    }
    .bb-flex-card .bb-form-switch {
        margin-top: 12px;
    }
    .bb-circle-badge {
        width: 14px;
        height: 14px;
        font-size: 9.5px;
    }
    .bb-table-flex-text .bb-circle-badge {
        margin-top: 2px;
    }
    .bb-view-card {
        padding: 10px;
        gap: 10px;
    }
    .bb-status {
        padding-inline: 10px;
        min-width: 65px;
    }
    .bb-status.medium {
        min-width: 55px;
    }
    .bb-status.small {
        min-width: 50px;
    }
    .basic-status,
    .premium-status,
    .enterprise-status {
        min-width: 70px;
    }
    .bb-status.mw-40 {
        min-width: 34px;
    }
    .bb-form-control-text.bb-form-control-text-btn,
    button.bb-status.bb-value-btn-js {
        top: 10px;
    }
    .document-list li a {
        padding: 12px;
    }
    .bb-form-checkbox-row {
        gap: 7.5px 10px;
    }
    .bb-badge-row {
        gap: 5px;
    }
    .bb-badge-row .bb-badge {
        padding-block: 8px;
    }
    .bb-view-card-data>p {
        width: 118px;
    }
    .platfrom-image {
        max-width: 28px;
    }
    .iziToast-wrapper {
        padding: 15px;
    }
    .iziToast-capsule .iziToast {
        padding: 8px 38px 11px 8px;
    }
    .iziToast-capsule .iziToast.bb-toast-undo>.iziToast-body {
        min-height: 30px;
    }
    .iziToast-capsule .iziToast>.iziToast-body .iziToast-texts {
        gap: 6px;
        padding-block: 5px;
    }
    .iziToast-capsule .iziToast.bb-toast-undo {
        margin-bottom: 5px;
        min-height: 40px;
        padding-inline: 7px;
    }
    .iziToast-capsule .iziToast.bb-toast-undo>.iziToast-body .iziToast-buttons .iziToast-buttons-child {
        padding-block: 6.5px;
    }
    .iziToast-capsule .iziToast>.iziToast-close {
        width: 38px;
    }
    .iziToast-capsule .iziToast.bb-toast-undo>.iziToast-close {
        width: 24px;
        height: 24px;
    }
    .bb-video-grid {
        --videoWidth: 200px;
    }
    .bb-accordion .accordion-button {
        padding-inline: 10px 70px;
    }
    .bb-accordion .accordion-header .bb-datatable-action-row {
        right: 15px;
        gap: 8px;
    }
    .bb-count-card {
        width: 58px;
        height: 20px;
    }
    .not-support-card {
        gap: 25px;
    }
    .not-support-card>img {
        width: 90px;
    }
    .not-support-card>aside {
        gap: 5px;
    }
    .not-support-card>aside>p {
        font-size: calc(var(--font-size-14px) + 10px);
    }
    .not-support-card>aside>span {
        font-size: calc(var(--font-size-14px) + 4px);
    }
    .offcanvas-body .bb-card-header-sticky {
        top: -15px;
    }
}

@media screen and (max-width: 767px) and (min-width: 576px) {
    .bb-empty-data-card {
        min-height: calc(100vh - 100px);
    }
    .not-support-card {
        margin-top: 15px;
    }
    .not-support-body .login-logo {
        top: 15px;
    }
}

@media screen and (max-width: 575px) {
    .bb-header-right {
        width: 100%;
        justify-content: space-between;
    }
    .bb-offcanvas.offcanvas {
        margin: 0;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        top: 10px;
    }
    .bb-600-offcanvas.offcanvas {
        width: calc(100% - 20px);
    }
    .bb-offcanvas.offcanvas-end.show {
        right: 10px;
    }
    .billboox-link-card {
        padding: 15px;
        gap: 20px;
    }
    .billboox-link-data {
        width: calc(100% - 120px);
    }
    .bb-datatable-header .bb-badge,
    .bb-datatable-header .bb-datepicker-container {
        flex-grow: 1;
    }
    .flex-basis-100,
    .bb-datatable-search-input {
        flex-basis: 100%;
    }
    .bb-datatable-header .bb-btn {
        flex: 1 0 36px;
        padding-inline: 0px;
        min-width: auto;
        max-width: 65px;
    }
    .bb-datatable-header .bb-btn.flex-basis-auto {
        flex-basis: auto;
        max-width: none;
    }
    .bb-datatable-header .bb-btn:not(.flex-basis-auto) i {
        font-size: 14px;
    }
    .bb-datatable-header .bb-btn:not(.flex-basis-auto)>span {
        display: none;
    }
    .bb-datatable-header .bb-dropdown {
        flex-grow: 1;
        flex-basis: 65px;
    }
    .bb-datatable-header .bb-dropdown .bb-form-control {
        padding-inline: 10px;
    }
    .bb-form-control.bb-datatable-search-input {
        flex-basis: 100%;
    }
    .bb-datatable .table tr .datatable-name-column {
        min-width: 115px;
    }
    .bb-datatable-footer {
        flex-direction: column;
    }
    .bb-flex-card>* {
        flex-basis: 90px;
        flex-grow: 1;
    }
    .bb-flex-card .group-item-name-card {
        flex-basis: 80% !important;
    }
    .bb-file-upload-card label {
        padding-bottom: 33.5px;
    }
    .bb-file-upload-info {
        margin-top: -33.5px;
        padding: 10px;
    }
    .bb-badge-customer-row .bb-badge {
        flex-basis: 40%;
    }
    .iziToast-capsule .iziToast {
        width: 100%;
    }
}

@media screen and (max-width: 355px) {
    .bb-datatable-header .bb-btn {
        max-width: none;
    }
}


/**************************************************
*                      Login                     *
**************************************************/

@media screen and (max-width: 1199px) {
    .login-image {
        width: 55%;
    }
    .login-logo {
        max-width: 130px;
    }
    .login-image-card {
        max-width: 350px;
    }
    .login-data {
        width: 45%;
    }
}

@media screen and (max-width: 991px) {
    .login-container {
        flex-wrap: wrap;
    }
    .login-image,
    .login-data {
        width: 100%;
        min-height: 50vh;
        min-height: 50dvh;
    }
}

@media screen and (max-width: 767px) {
    .login-image {
        flex-direction: column;
        gap: 40px;
        padding: 30px 15px 15px;
        min-height: auto;
        justify-content: flex-start;
    }
    .login-logo {
        position: initial;
        max-width: 150px;
        width: auto;
    }
    .login-image-card {
        max-width: 200px;
    }
    .login-data {
        padding: 15px 30px;
    }
    .login-data-card {
        gap: 30px;
    }
    .login-title {
        font-size: 20px;
    }
    .login-btn-row .bb-btn {
        padding-block: 10.25px;
        font-size: 14px;
    }
    .remember-forgot-row .bb-form-checkbox-input {
        width: 12px;
        height: 12px;
    }
    .otp-code-row .bb-form-control {
        min-height: 50px;
    }
    .password-check-row {
        margin-block: 5px 15px;
    }
}


/**************************************************
*                    Dashboard                   *
**************************************************/

@media screen and (min-width: 1200px) and (max-width: 1499px) {
    .dashboard-card-top aside span {
        font-size: 12px;
    }
    .view-all-btn,
    .dashboard-card-bottom>p {
        font-size: 10px;
        line-height: 1.3;
    }
    .dashboard-card-bottom>p span i {
        font-size: 7px;
    }
    .dashboard-row .bb-card-header {
        padding-inline: 15px;
    }
    .dashboard-row .bb-table .table tr th {
        font-size: 14px;
    }
    .dashboard-row .bb-table .table tr td {
        font-size: 13px;
    }
}

@media screen and (max-width: 1499px) {
    .dashboard-card {
        padding: 15px;
        gap: 15px;
    }
    .dashboard-card-icon {
        font-size: 22px;
        width: 44px;
        height: 44px;
    }
    .dashboard-card-top aside {
        width: calc(100% - 59px);
        font-size: 18px;
    }
    .dashboard-card-bottom {
        padding-top: 15px;
    }
    .wmy-group label {
        padding: 5px 8px;
    }
    #sales-expense-chart {
        margin-bottom: -20px;
    }
}

@media screen and (max-width: 1199px) {
    .dashboard-row {
        --dashRowWidth: 2;
    }
    .top-low-selling-row>.bb-card:first-child,
    .top-low-selling-row,
    .recent-order-card,
    .co-card,
    .dashboard-inner-row,
    .se-chart-card {
        grid-column: 1 / span 2;
    }
    .dashboard-inner-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dashboard-inner-row .dashboard-card {
        flex: 1 0 180px;
    }
    .top-low-selling-row {
        --olChartRow: 2;
    }
}

@media screen and (max-width: 767px) {
    .top-low-selling-row,
    .dashboard-row,
    .dashboard-inner-row {
        gap: 15px;
    }
    .apexcharts-tooltip .apexcharts-tooltip-title {
        font-size: 8px !important;
    }
    .apexcharts-tooltip-text-goals-value,
    .apexcharts-tooltip-text-y-value,
    .apexcharts-tooltip-text-z-value,
    .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
        font-size: 10px;
    }
    .apexcharts-tooltip-series-group {
        padding-block: 6px !important;
    }
    .apexcharts-text tspan {
        font-size: 8px;
    }
    .apexcharts-legend {
        gap: 10px;
    }
    .customer-card-body .apexcharts-tooltip-series-group {
        padding-block: 4px !important;
    }
    .customer-card-body .apexcharts-datalabels text {
        font-size: 8px;
    }
    .dashboard-header>aside {
        font-size: 16px;
    }
    .dashboard-header>aside span {
        margin-top: 2px;
    }
}

@media screen and (max-width: 575px) {
    .dashboard-header>aside {
        width: 100%;
    }
    .dashboard-header .bb-datepicker-container {
        width: 100%;
    }
    .dashboard-header .bb-datepicker-container .bb-form-control-only {
        height: 40px;
    }
    .dashboard-row {
        grid-template-columns: 100%;
    }
    .top-low-selling-row>.bb-card:first-child,
    .top-low-selling-row,
    .recent-order-card,
    .co-card,
    .dashboard-inner-row,
    .se-chart-card {
        grid-column: 1 / span 1;
    }
    .dashboard-inner-row .dashboard-card {
        flex-basis: 100%;
        height: auto;
    }
    #sales-expense-chart {
        margin-bottom: -35px;
    }
    .se-chart-card .bb-card-body {
        padding: 0 5px 0 0px;
    }
    .apexcharts-datalabel,
    .apexcharts-datalabel-label,
    .apexcharts-datalabel-value,
    .apexcharts-datalabels,
    .apexcharts-pie-label {
        font-size: 7px;
    }
    .flex-offcanvas-body {
        gap: 20px;
    }
    .top-low-selling-row {
        --olChartRow: 1;
    }
}


/**************************************************
*                      Menu                       *
**************************************************/

@media screen and (max-width: 1599px) {
    .item-no-result {
        --itemNoResultHeight: 120px;
    }
}

@media screen and (max-width: 1199px) {
    .item-variant-card>* {
        flex-grow: 1;
    }
    .item-no-result {
        --itemNoResultHeight: 180px;
    }
}

@media screen and (max-width: 767px) {
    .item-variant-card>* {
        flex-basis: 40%;
    }
    .flex-item-text {
        min-width: 160px;
    }
    .item-badge-row {
        gap: 10px 20px;
    }
    .item-no-result {
        --itemNoResultHeight: 135px;
    }
}

@media screen and (max-width: 575px) {
    .item-variant-card>.bb-form-switch {
        flex-direction: column-reverse !important;
        margin-top: 3px;
    }
    .menu-badge-row {
        gap: 15px 20px;
    }
}


/**************************************************
*                   Inventory                    *
**************************************************/

@media screen and (max-width: 1367px) {
    .add-raw-material-card>* {
        flex-basis: 100px;
    }
}

@media screen and (max-width: 1199px) {
    .add-raw-material-card>* {
        flex-grow: 1;
    }
    .add-raw-material-card .add-raw-material-flex {
        flex-basis: 50%;
    }
    .add-wastage-item-row .add-raw-material-flex {
        flex-basis: 45%;
    }
    .upload-bill-image-view-row .bb-file-upload-view-card {
        flex-basis: 100%;
    }
    .stock-purchase-flex-card>* {
        flex-grow: 1;
    }
    .bb-flex-card-special-note .bb-form-switch,
    .bb-flex-card-special-note .bb-flex-card-special-note-grow-small {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .bb-unit-conversion-card>p {
        margin-top: 15px;
    }
    .add-raw-material-card .bb-datepicker-container {
        flex-basis: 130px;
    }
    .add-raw-material-card .bb-datepicker-container .bb-datepicker-clear-btn {
        right: 32px;
    }
    .bb-flex-card-item-recipe .bb-form-control-card-item-recipe {
        flex-basis: 70%;
    }
    .bb-flex-row-item-recipe-group .bb-form-label {
        top: 42px;
    }
    .bb-accordion .bb-flex-row-item-recipe-group .bb-form-label {
        top: 50px;
    }
    .bb-offcanvas .bb-card-header-item-recipe {
        top: -15px;
    }
    .bb-offcanvas .bb-flex-row-item-recipe-group .bb-form-label {
        top: 25px;
    }
    .bb-flex-card-item-recipe .bb-form-control-card-item-recipe-small {
        flex-grow: 1;
        flex-basis: 200px;
    }
    .bb-flex-row-special-note::before {
        top: -35px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-row-special-note {
        margin-left: 11px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-card.bb-flex-card-special-note>*:first-child {
        padding-left: 35px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-row-special-note::before,
    .bb-flex-row-copy-item-recipe .bb-flex-card.bb-flex-card-special-note>*:first-child::before {
        left: 20px;
    }
}

@media screen and (max-width: 575px) {
    .bb-accordion .bb-flex-row-item-recipe-group .bb-form-label {
        top: 67px;
    }
    .bb-flex-row-special-note::before {
        height: calc(100% - 33px);
    }
    .bb-flex-card.bb-flex-card-special-note>*:first-child,
    .bb-flex-card-item-recipe .bb-form-control-card-item-recipe-small {
        flex-basis: 70%;
    }
    .bb-flex-card.bb-flex-card-special-note>*:nth-child(2) {
        padding-left: 25px;
    }
    .bb-unit-conversion-card>p {
        margin-inline: 0;
    }
    .add-raw-material-card>* {
        flex-basis: 80px;
    }
    .add-wastage-item-row .add-raw-material-flex,
    .stock-purchase-flex-card>*,
    .add-raw-material-card .add-raw-material-flex {
        flex-basis: 100%;
    }
    .stock-purchase-flex-card .bb-form-checkbox-row {
        flex-wrap: wrap;
    }
    .bb-badge-row.stock-purchase-badge-row {
        gap: 5px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-row-special-note {
        margin-left: 0px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-card.bb-flex-card-special-note>*:first-child {
        padding-left: 25px;
    }
    .bb-flex-row-copy-item-recipe .bb-flex-row-special-note::before,
    .bb-flex-row-copy-item-recipe .bb-flex-card.bb-flex-card-special-note>*:first-child::before {
        left: 10px;
    }
}


/**************************************************
*                 Integration                    *
**************************************************/

@media screen and (max-width: 767px) {
    .integration-grid {
        --integrationWidth: 295px;
    }
    .integration-card {
        gap: 15px;
        padding: 15px;
    }
    .integration-card-top {
        gap: 10px;
    }
    .integration-logo {
        width: 44px;
        height: 44px;
    }
}


/**************************************************
*              Subscription Plan                  *
**************************************************/

@media screen and (max-width: 1599px) {
    .subscription-plan-row {
        --planCardWidth: 45%;
    }
}

@media screen and (max-width: 767px) {
    .subscription-plan-row {
        --planCardWidth: 100%;
    }
}


/**************************************************
*                  Refer & Earn                   *
**************************************************/

@media screen and (max-width: 1199px) {
    .refer-group {
        padding: 20px;
    }
    .refer-image {
        display: none;
    }
    .refer-row {
        width: 100%;
    }
    .refer-badge-card {
        flex-direction: column;
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .refer-group {
        padding: 15px;
    }
    .refer-row>ul {
        padding: 15px;
        padding-left: 35px;
    }
    .refer-row .bb-badge-row {
        flex-wrap: wrap;
    }
    .refer-row .bb-badge-row .bb-badge {
        padding: 10px;
    }
    .refer-link-btn {
        flex-wrap: wrap;
    }
    .refer-link-btn>.bb-btn {
        flex-basis: 100%;
        min-height: 35px;
    }
    .refer-badge-card {
        flex-basis: 22%;
        padding-block: 20px;
    }
}

@media screen and (max-width: 575px) {
    .refer-link-group .bb-form-control {
        padding-block: 9.5px 6.5px;
    }
    .refer-row .bb-badge-row .bb-badge,
    .refer-link-group.code-group,
    .refer-link-btn>* {
        flex-basis: 100%;
    }
    .refer-badge-card {
        flex-basis: 45%;
    }
}


/**************************************************
*                   Setting                      *
**************************************************/

@media screen and (max-width: 1199px) {
    .general-setting-row>* {
        width: calc(100% / 2 - 7.5px);
    }
}

@media screen and (max-width: 767px) {
    .email-edit-btn {
        top: 10px;
    }
}

@media screen and (max-width: 575px) {
    .general-setting-row>* {
        width: 100%;
    }
    .setting-logo-card {
        padding: 10px;
        gap: 10px;
    }
    .setting-logo-data-btn-row {
        width: 100%;
    }
}


/**************************************************
*                   POS Billing                   *
**************************************************/

@media screen and (min-width: 1200px) and (max-width: 1440px) {
    .pos-billing-item-row {
        width: calc(100% - 550px);
        padding: 25px;
    }
    .pos-billing-menu-row {
        width: 550px;
    }
    .pos-billing-order-type-ctca-row .pn-form-control-card {
        gap: 10px;
    }
    .pos-billing-order-type-ctca-row .pn-form-control-card.bb-form-control-card input.bb-form-control {
        padding-inline: 0 10px;
    }
    .pos-billing-order-type-ctca-row .tab-content .bb-form-control-only.bb-select-css.single .ts-control,
    .pos-billing-order-type-ctca-row .pn-form-control-card .pn-text,
    .pos-billing-order-type-ctca-row .tab-content .bb-form-control-card .bb-form-control {
        padding-inline: 10px;
    }
    .pos-billing-payment-card .add-discount-charges-row {
        padding-left: 10px;
    }
    .pos-billing-payment-card .add-discount-charges-card {
        flex-basis: 105px;
    }
    .pos-billing-payment-card .part-radio-row .add-discount-charges-card {
        flex-basis: 85px;
    }
}

@media screen and (max-width: 1199px) {
    .bb-header-billing-row {
        gap: 5px;
    }
    .bb-header-billing-row>.bb-status {
        padding-block: 5px;
        min-width: auto;
        font-size: 10px;
    }
    .bb-header-billing-row>.bb-btn {
        min-width: auto;
        padding: 7.5px 15px;
        min-height: auto;
    }
    .pos-billing-row {
        gap: 10px;
    }
    .pos-billing-row-area {
        width: 100%;
    }
    .pos-billing-row-order-type .offcanvas-footer,
    .show-order-type-card-btn {
        display: flex;
    }
    .pos-billing-menu-row,
    .pos-billing-row-order-type {
        position: fixed;
        top: 10px;
        right: -800px;
        z-index: 1000;
        height: calc(100vh - 20px) !important;
        height: calc(100dvh - 20px) !important;
        transition: var(--transition);
        transition-property: right;
    }
    .pos-billing-row-order-type {
        align-items: flex-start;
        flex-wrap: wrap;
        width: 400px;
    }
    .pos-billing-item-grid-count .pos-billing-item-card:hover {
        background-color: transparent;
    }
    .pos-billing-item-grid-count .pos-billing-item-card.active {
        background-color: transparent;
    }
    .pos-billing-menu-row {
        width: 600px;
        border-radius: 8px;
    }
    .pos-billing-menu-body {
        height: calc(100% - 61px);
        overflow-y: auto;
    }
    .pos-billing-menu-body .order-detail-table {
        flex-basis: auto;
        min-height: 200px;
    }
    .pos-billing-menu-row.open,
    .pos-billing-row-order-type.open {
        right: 10px;
    }
    .pos-billing-row-order-type>.bb-tabs {
        height: calc(100% - 70px);
    }
    .pos-billing-item-row {
        width: 100%;
        padding: 25px;
    }
    .pos-billing-menu-body .order-detail-table .bb-table {
        border-bottom: none;
    }
    .pos-billing-menu-row .offcanvas-footer {
        display: flex;
    }
}

@media screen and (max-width: 767px) {
    .bb-pos-header {
        padding: 0;
    }
    .bb-header-billing {
        gap: 10px;
    }
    .bb-header-billing-row>.bb-status {
        padding-block: 4px;
        font-size: 8px;
    }
    .bb-header-billing-row>.bb-btn {
        padding: 8px 12px;
    }
    .pos-billing-table-grid {
        --tableGroupWidth: 130px;
        gap: 15px;
    }
    .abdt-row {
        gap: 10px 15px;
    }
    .pos-billing-order-no-data>img {
        width: 70px;
    }
    .pos-billing-row-order-type>.bb-tabs {
        height: calc(100% - 54px);
    }
    .pos-billing-row-order-type>.bb-tabs .tab-content {
        height: calc(100% - 46px);
    }
    .pos-billing-item-row {
        padding: 15px;
    }
    .pos-billing-item-search-row {
        margin-bottom: 15px;
    }
    .pos-billing-item-card,
    .pos-billing-item-card-title {
        gap: 6px;
    }
    .pos-billing-item-card .bb-customisable-row {
        gap: 5px;
    }
    .pos-billing-table-number-text .bb-circle-badge,
    .pos-billing-item-card .bb-circle-badge {
        width: 12.5px;
        height: 12.5px;
        font-size: 8.5px;
    }
    .pos-billing-item-footer {
        padding-block: 10px;
        margin-bottom: -10px;
    }
    .pos-billing-variant-grid .pos-billing-item-card-title>h3 {
        padding: 8px 4px;
    }
    .pos-billing-variant-grid .pos-billing-item-card-price-row {
        padding-top: 10px;
        padding-bottom: 6px;
    }
    .pos-billing-variant-grid .bb-count-card {
        margin-bottom: 10px;
    }
    .pos-billing-menu-body {
        height: calc(100% - 61px);
    }
    .pos-billing-order-type-ctca-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pos-billing-order-type-ctca-row>.bb-form-checkbox-row {
        width: 100%;
        flex-direction: row;
        padding: 12px 15px;
    }
    .bb-table .complementary-bogo-table tr td {
        padding: 15px;
    }
    .add-discount-charges-card .bb-form-icon {
        top: 15px;
        right: 10px;
    }
    .pos-billing-table-info-card {
        line-height: calc(var(--line-height) + 0.5);
    }
}

@media screen and (max-width: 575px) {
    .bb-header-billing-row>.bb-btn {
        padding: 6px 10px;
    }
    .pos-billing-row-order-type,
    .pos-billing-menu-row {
        width: calc(100% - 20px);
    }
    .pos-billing-item-grid {
        --itemCardWidth: 120px;
    }
    .pos-billing-variant-grid,
    .pos-billing-addon-grid {
        --itemCardWidth: 110px;
    }
    .total-price-badge {
        flex-basis: 100%;
    }
    .pos-billing-order-type-ctca-row .bb-tabs .nav-tabs .nav-link {
        padding-inline: 11px;
        min-height: 34px;
    }
    .pos-billing-order-type-ctca-row .tab-pane {
        padding: 9px 10px;
    }
    .pos-billing-order-type-ctca-row .pn-form-control-card {
        gap: 8px;
    }
    .pos-billing-order-type-ctca-row .pn-form-control-card .pn-text {
        padding-inline: 8px;
    }
    .pos-billing-order-type-ctca-row .bb-select-css.multi.has-items .ts-control,
    .pos-billing-order-type-ctca-row .bb-select-css .ts-control,
    .pos-billing-order-type-ctca-row .bb-form-control {
        min-height: 35px;
        max-height: 35px;
        padding-inline: 8px;
    }
    .pos-billing-order-type-ctca-row .pn-form-control-card .bb-form-control {
        min-height: 33px;
        padding-inline: 0 8px;
    }
    .bb-flex-card .pos-billing-customer-btn-row {
        width: 45px;
        height: 35px;
    }
    .bb-table .complementary-bogo-table tr td:first-child {
        width: 100%;
    }
    .bb-table-checkbox-row,
    .complementary-bogo-checkbox {
        gap: 10px;
    }
    .pos-billing-menu-body .order-detail-table .pos-billing-order-no-data>img {
        width: 50px;
    }
    .pos-billing-menu-body .order-detail-table .bb-table .table tr th {
        height: 36px;
    }
    .add-discount-charges-row {
        gap: 10px;
        padding: 10px;
    }
    .pos-billing-payment-card .add-discount-charges-row {
        padding: 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .pos-billing-payment-card .part-radio-row .add-discount-charges-card,
    .pos-billing-payment-card .add-discount-charges-row>* {
        flex-basis: 100%;
    }
    .pos-billing-payment-card .add-discount-charges-row .bb-form-checkbox-row {
        margin-top: 0;
    }
    .pos-billing-action-row .bb-btn {
        min-height: 26px;
    }
    .pos-billing-order-btn-row>* {
        flex-basis: 15%;
        min-height: 30px;
    }
    .pos-billing-payment-row {
        min-height: 42px;
    }
}

@media screen and (min-width: 991px) {
    .bb-small-sidebar {
        width: 80px;
    }
    .bb-small-sidebar .bb-sidebar-link {
        font-size: 0px;
        justify-content: center;
        gap: 0;
    }
    .bb-small-sidebar+.bb-container {
        width: calc(100% - 80px);
        margin-left: 80px;
    }
    .pos-tooltip-inner .tooltip-inner {
        font-size: var(--font-size-14px);
        padding: 3px 10px;
    }
}


/**************************************************
*                        KDS                      *
**************************************************/

@media screen and (max-width: 1199px) {
    .kds-no-results>img {
        max-width: 250px;
    }
}

@media screen and (max-width: 991px) {
    .kds-logout {
        min-width: 100px;
    }
}

@media screen and (max-width: 767px) {
    .kds-body {
        --font-size-14px: 14px;
        padding: 20px;
    }
    .kds-header {
        gap: 10px;
        border-radius: 0 0 15px 15px;
        min-height: 65px;
        padding: 10px 20px;
    }
    .kds-grid {
        --kdsWidth: 250px;
    }
    .kds-logout .bb-sidebar-link {
        width: 36px;
        height: 36px;
    }
    .kds-no-results {
        min-height: calc(100vh - 105px);
        min-height: calc(100dvh - 105px);
    }
    .kds-no-results>img {
        max-width: 175px;
    }
    .kds-no-results>span {
        font-size: var(--font-size-14px);
    }
}

@media screen and (max-width: 575px) {
    .kds-header {
        gap: 15px;
    }
    .kds-header-title {
        order: 1;
        width: 100%;
        text-align: center;
        padding-block: 10px 5px;
        border-top: 1px solid rgb(255 255 255 / 10%);
    }
    .kds-grid {
        --kdsWidth: 100%;
    }
    .bb-btn.food-ready-text {
        min-height: auto;
    }
    .kds-no-results {
        min-height: calc(100vh - 170px);
        min-height: calc(100dvh - 170px);
    }
}


/**************************************************
*                      Admin                      *
**************************************************/

@media screen and (max-width: 767px) {
    .restaurant-logo {
        width: 44px;
        height: 44px;
    }
    .commission-card .bb-small-btn {
        margin-top: 13px;
    }
}

@media screen and (max-width: 575px) {
    .refer-card-body .bb-form-group {
        flex-basis: 100%;
    }
    .commission-card.bb-flex-card>*:not(.bb-small-btn) {
        flex-basis: 70px;
    }
}