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

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

.login-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 50px;
    position: relative;
    width: 65%;
}

.login-logo {
    position: absolute;
    top: 30px;
    left: 30px;
    max-width: 165px;
    width: 15%;
}

.login-data {
    padding: 30px 50px;
    background-color: var(--white-color);
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-image-card {
    max-width: 475px;
    width: 45%;
}

.login-data-card {
    max-width: 450px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    line-height: var(--line-height);
    color: var(--black-color);
    text-transform: capitalize;
    margin-bottom: 0;
}

.login-title>span {
    margin-top: 8px;
    display: block;
    color: var(--black555-color);
    font-size: var(--font-size-14px);
    line-height: var(--line-height);
    font-weight: 300;
    text-transform: none;
}

.login-title>span span {
    color: var(--black-color);
    font-weight: 400;
}

.login-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-btn-row .bb-btn {
    padding-block: 14px;
}

.remember-forgot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.remember-forgot-row .bb-form-checkbox {
    gap: 6px;
}

.remember-forgot-row .bb-form-checkbox-input {
    width: 14px;
    height: 14px;
}

.remember-forgot-row .bb-form-label {
    font-size: calc(var(--font-size-14px) - 2px);
}

.forgot-text {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: calc(var(--font-size-14px) - 2px);
    line-height: var(--line-height);
    color: var(--primary-color);
}

.forgot-text:hover {
    color: var(--hover-color);
}

.otp-code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.otp-code-row .bb-form-control {
    flex: 1 0 0;
    min-height: 60px;
    text-align: center;
    padding: 5px;
    font-size: 24px;
    font-weight: 500;
}

.otp-code-row .bb-form-control::-webkit-outer-spin-button,
.otp-code-row .bb-form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-code-row>p {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black555-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.otp-code-row>p a {
    color: var(--black888-color);
    font-weight: 400;
    pointer-events: none;
    display: flex;
    gap: 4px;
    opacity: 0.75;
}

.otp-code-row>p a>i {
    color: var(--black888-color);
}

.otp-code-row>p b {
    color: var(--black-color);
    font-weight: 400;
}

.otp-code-row>p a.enabled {
    color: var(--primary-color);
    pointer-events: all;
    opacity: 1;
}

.otp-code-row>p a.enabled>i {
    color: var(--primary-color);
}

.otp-code-row>p a.enabled~* {
    display: none;
}

.password-check-row {
    display: flex;
    align-items: center;
    gap: 5px 15px;
    flex-wrap: wrap;
    margin-block: 10px 20px;
}

.password-check-row p {
    margin-bottom: 0;
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    text-transform: capitalize;
    color: var(--black-color);
    opacity: .5;
    display: flex;
    align-items: center;
    gap: 5px;
}

.password-check-row p.validate {
    opacity: 1;
}

.password-check-row p.validate i {
    color: var(--tertiary-color);
}


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

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.dashboard-header>aside {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--black-color);
}

.dashboard-header>aside span {
    display: block;
    font-size: var(--font-size-14px);
    font-weight: 300;
    color: var(--black555-color);
}

.dashboard-header .bb-datepicker-container {
    align-self: stretch;
}

.dashboard-header .bb-datepicker-container .bb-form-control-only {
    padding-block: 8px;
    min-height: auto;
    height: 100%;
}

.dashboard-header .bb-datepicker-container .bb-datepicker-clear-btn {
    height: 100%;
}

.dashboard-row {
    --dashRowWidth: 4;
    display: grid;
    grid-template-columns: repeat(var(--dashRowWidth), 1fr);
    gap: 20px;
}

.dashboard-card {
    background-color: var(--white-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 8px;
    transition: var(--transition);
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--boxShadow);
}

.dashboard-card-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.dashboard-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--primary05-color);
    color: var(--primary-color);
    font-size: 25px;
    width: 50px;
    height: 50px;
}

.dashboard-card-top aside {
    font-size: 20px;
    font-weight: 600;
    line-height: var(--line-height);
    color: var(--secondary-color);
    width: calc(100% - 65px);
    margin-top: 2.5px;
}

.dashboard-card-top aside span {
    display: block;
    text-transform: capitalize;
    font-weight: 300;
    color: var(--black555-color);
    margin-bottom: 5px;
    font-size: var(--font-size-14px);
}

.dashboard-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--secondary08-color);
    padding-top: 20px;
    margin-top: auto;
}

.dashboard-card-bottom>p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black888-color);
    text-transform: capitalize;
}

.dashboard-card-bottom>p span {
    font-weight: 400;
    color: var(--tertiary-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-card-bottom>p span.red-color {
    color: var(--red-color);
}

.dashboard-card-bottom>p span i {
    font-size: 8px;
    margin-top: 1px;
}

.view-all-btn {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--black888-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
    background-color: transparent;
    padding: 0;
    border: none;
}

.view-all-btn:not(.dashboard-row .bb-card-header .view-all-btn) {
    justify-content: space-between;
    width: 100%;
}

.dashboard-card:hover .view-all-btn,
.view-all-btn:hover {
    color: var(--primary-color);
}

.view-all-btn i {
    font-size: calc(var(--font-size-14px) - 4px);
    margin-top: -1px;
}

.dashboard-inner-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-inner-row .dashboard-card {
    height: 100%;
}

.se-chart-card {
    grid-column: 2 / span 3;
}

.wmy-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wmy-group input {
    display: none;
}

.wmy-group label {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 400;
    line-height: var(--line-height);
    text-align: center;
    color: var(--black333-color);
    padding: 6px 10px;
    background-color: var(--primary08-color);
    border-radius: 4px;
    text-transform: capitalize;
    cursor: pointer;
    transition: var(--transition);
}

.wmy-group label:hover {
    background-color: var(--primary15-color);
    color: var(--black-color);
}

.wmy-group input:checked+label {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.se-chart-card .bb-card-body {
    padding: 0 10px 0 5px;
}

#sales-expense-chart {
    margin-bottom: -10px;
}

.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value,
.apexcharts-datalabels,
.apexcharts-pie-label {
    font-size: calc(var(--font-size-14px) - 4px);
    font-weight: 500;
}

.apexcharts-text tspan {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    fill: var(--black333-color);
}

.apexcharts-legend {
    gap: 15px;
    transform: translateY(10px);
}

.apexcharts-legend-series {
    margin: 0 !important;
    gap: 5px;
}

span.apexcharts-legend-marker {
    margin-right: 0;
}

.apexcharts-legend-text {
    font-size: calc(var(--font-size-14px) - 2px) !important;
    font-weight: 300 !important;
    line-height: var(--line-height);
    color: var(--black-color) !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--secondary-color) !important;
    box-shadow: var(--boxShadow) !important;
    background-color: var(--white-color) !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background: var(--secondary-color) !important;
    border-bottom: none !important;
    color: var(--white-color);
    margin: 0;
    padding: 5px 10px;
    font-weight: 300;
}

.apexcharts-tooltip-series-group {
    padding: 8px 10px !important;
}

.apexcharts-tooltip-y-group {
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 2px;
}

.apexcharts-tooltip .apexcharts-tooltip-text-y-label {
    font-size: var(--font-size-14px);
    vertical-align: middle;
    opacity: .8;
}

.apexcharts-tooltip-series-group .apexcharts-tooltip-marker {
    width: 6px;
    height: 6px;
    margin-right: 6px;
}

.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-z-value {
    margin-left: 2px;
    font-size: var(--font-size-14px);
    vertical-align: middle;
    line-height: 1;
}

.customer-card-body {
    padding: 20px 0;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-card-body .apexcharts-tooltip.apexcharts-theme-dark {
    background-color: transparent !important;
}

.customer-card-body .apexcharts-tooltip-series-group {
    background-color: var(--secondary-color) !important;
    border-radius: 4px;
    padding-block: 7px !important;
    border: 1px solid var(--secondary30-color);
}

.customer-card-body .apexcharts-tooltip-y-group span {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    opacity: .9;
}

.customer-card-body .apexcharts-tooltip-y-group .apexcharts-tooltip-text-y-value {
    font-weight: 500;
    opacity: 1;
}

.customer-card-body .apexcharts-datalabels text {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 500;
    fill: var(--secondary-color);
}

.recent-order-card {
    grid-column: 2 / span 3;
}

.top-low-selling-row {
    --olChartRow: 3;
    display: grid;
    grid-template-columns: repeat(var(--olChartRow), 1fr);
    gap: 20px;
    grid-column: 1 / span 4;
}

.dashboard-row .bb-table .table tr th {
    background-color: var(--secondary03-color);
}


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

.item-variant-card>* {
    flex-basis: 200px;
}

.item-variant-card .addon-card {
    flex-grow: 1;
}

.item-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 0;
}

.flex-item-text {
    min-width: 250px;
}

.group-item-name-card {
    flex-grow: 1;
}

.copy-add-row .bb-select-css.disabled .ts-control {
    border-color: var(--secondary20-color);
}

.copy-add-row .bb-select-css .ts-control::before {
    display: none;
}

.item-no-result {
    --itemNoResultHeight: 130px;
    height: calc(100vh - var(--itemNoResultHeight));
    height: calc(100dvh - var(--itemNoResultHeight));
    background-color: var(--white-color);
}


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

.bb-unit-conversion-card .bb-form-group {
    flex-grow: 1;
}

.bb-unit-conversion-card>p {
    margin: 21px 5px 0;
    flex: 0 0 auto;
    font-weight: 300;
    color: var(--black555-color);
    font-size: calc(var(--font-size-14px) + 4px);
}

.bb-unit-conversion-card .bb-form-control-text {
    font-size: var(--font-size-14px);
    color: var(--black-color);
}

.bb-view-business-card-image .bb-view-card-data>p {
    width: auto;
}

.bb-view-business-card-image-data {
    --businessCardWidth: 45%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--businessCardWidth), 1fr));
    gap: 15px;
}

.bb-view-bill-image-data {
    --businessCardWidth: 28%;
}

.business-card-image-box {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1 / 0.57;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--secondary05-color);
}

.bb-view-bill-image-data .business-card-image-box {
    aspect-ratio: 1 / 1.27;
}

.business-card-image-box a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.business-card-image-box a,
.business-card-image-box img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.business-card-image-box .business-card-icon-img {
    object-fit: contain;
    width: 50%;
    height: 50%;
}

.add-raw-material-card>* {
    flex-basis: 110px;
}

.add-raw-material-card>* .bb-select-css .ts-control,
.add-raw-material-card>* .bb-form-control {
    padding-left: 10px;
}

.add-raw-material-card>* .bb-form-control-bg {
    padding-right: 30px;
    background-position: right 10px center;
}

.add-wastage-item-row .add-raw-material-flex,
.add-raw-material-card .add-raw-material-flex {
    flex-grow: 1;
}

.add-raw-material-card .bb-datepicker-container {
    flex-basis: 145px;
}

.add-raw-material-card .bb-datepicker-container .bb-form-control-bg {
    padding-right: 50px;
}

.add-raw-material-card .bb-datepicker-container .bb-datepicker-clear-btn {
    right: 35px;
}

.add-raw-material-card>* .bb-datepicker-js {
    min-width: auto;
}

.upload-bill-image-view-row {
    flex-direction: row;
    flex-wrap: wrap;
}

.upload-bill-image-view-row .bb-file-upload-view-card {
    flex: 1 0 30%;
}

.bb-flex-card.stock-purchase-flex-card {
    gap: 15px;
}

.stock-purchase-flex-card>* {
    flex-basis: 0;
}

.stock-purchase-flex-card .bb-form-label {
    white-space: nowrap;
}

.stock-purchase-flex-card .bb-form-checkbox-row {
    flex-wrap: nowrap;
}

.bb-flex-card-item-recipe {
    position: relative;
}

.bb-flex-row-copy-item-recipe .bb-flex-card-item-recipe,
.bb-flex-row-view-item-recipe .bb-flex-card-item-recipe {
    z-index: 0;
}

.bb-flex-row-view-item-recipe .bb-flex-row-special-note .bb-flex-card-special-note>*,
.bb-flex-row-view-item-recipe .bb-flex-card-item-recipe>*:not(.bb-form-checkbox-input, .bb-flex-row-special-note),
.bb-flex-row-copy-item-recipe .bb-flex-row-special-note .bb-flex-card-special-note>*,
.bb-flex-row-copy-item-recipe .bb-flex-card-item-recipe>*:not(.bb-form-checkbox-input, .bb-flex-row-special-note) {
    flex-basis: 100px;
}

.bb-flex-row-copy-item-recipe .bb-flex-row-special-note {
    margin-left: 13px;
}

.bb-flex-row-copy-item-recipe .bb-flex-card.bb-flex-card-special-note>*:first-child {
    padding-left: 40px;
}

.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: 25px;
}

.bb-flex-card-item-recipe .bb-flex-row-special-note::before {
    z-index: 0;
}

.bb-flex-row-copy-item-recipe .bb-flex-card-item-recipe .bb-flex-row-special-note::before,
.bb-flex-row-view-item-recipe .bb-flex-card-item-recipe .bb-flex-row-special-note::before {
    z-index: -1;
}

.bb-flex-card-special-note .bb-flex-card-special-note-grow,
.bb-flex-card-item-recipe .bb-form-control-card-item-recipe {
    flex-grow: 1;
}

.bb-flex-card-special-note .bb-flex-card-special-note-grow-small,
.bb-flex-card-item-recipe .bb-form-control-card-item-recipe-small {
    flex-basis: 300px;
}

.bb-flex-row-item-recipe-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bb-flex-row-item-recipe-group .bb-form-label {
    margin: 0;
    padding: 0;
    color: var(--black333-color);
    position: sticky;
    top: 50px;
    padding-block: 5px;
}

.bb-offcanvas .bb-flex-row-item-recipe-group .bb-form-label {
    top: 30px;
}

.bb-accordion .bb-flex-row-item-recipe-group .bb-form-label {
    top: 52px;
}

.bb-flex-row-item-recipe-group .bb-form-label+* {
    margin: 0;
}

.bb-accordion .bb-card-header-item-recipe .accordion-button,
.bb-card-header-item-recipe {
    background-color: var(--secondary05-color);
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0px;
    z-index: 3;
}

.bb-offcanvas .bb-card-header-item-recipe {
    top: -20px;
}

.bb-accordion .bb-card-header-item-recipe {
    background-color: transparent;
    position: sticky;
}

.bb-card-header-item-recipe .bb-card-title {
    text-transform: none;
    font-weight: 300;
}

.bb-accordion .bb-card-header-item-recipe .accordion-button {
    border-radius: 8px;
}

.bb-accordion .bb-card-header-item-recipe .accordion-button[aria-expanded="true"] {
    border-color: var(--secondary20-color);
    background-color: var(--secondary03-color);
    border-radius: 8px 8px 0 0;
}

.bb-accordion .bb-card-header-item-recipe .bb-datatable-action-row>* {
    color: var(--secondary-color);
}

.addon-accordion-card .accordion-body {
    border-color: var(--secondary20-color);
}

.bb-flex-row.bb-flex-row-special-note {
    flex-basis: 100%;
    position: relative;
    gap: 10px;
}

.bb-flex-row-special-note::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 10px;
    width: 1px;
    height: calc(100% + 15px);
    background-color: var(--secondary10-color);
}

.bb-flex-card.bb-flex-card-special-note>*:first-child {
    padding-left: 25px;
    position: relative;
}

.bb-flex-card.bb-flex-card-special-note>*:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 15px;
    height: 1px;
    background-color: var(--secondary10-color);
}

.bb-flex-card-special-note .bb-form-switch {
    visibility: hidden;
}


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

.integration-grid {
    --integrationWidth: 325px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--integrationWidth), 1fr));
    gap: 20px;
}

.integration-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: var(--white-color);
    border-radius: 8px;
}

.integration-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
}

.integration-logo {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
}

.integration-logo>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.integration-title {
    flex: 1 0 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: calc(var(--font-size-14px) + 2px);
    font-weight: 500;
    line-height: var(--line-height);
    color: var(--black-color);
    text-transform: capitalize;
}

.integration-title>span {
    text-transform: none;
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    color: var(--black555-color);
}

.integration-card-top>i {
    flex-shrink: 0;
    font-size: calc(var(--font-size-14px) + 6px);
    color: var(--tertiary-color);
    display: none;
}

.integration-para {
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black555-color);
    margin: 0;
}

.integration-card-bottom {
    margin-top: auto;
    border-top: 1px solid var(--secondary08-color);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.integration-card-bottom .bb-btn {
    padding: 6px 12px;
    min-width: auto;
    min-height: auto;
}

.integration-card-bottom .bb-form-switch {
    display: none;
}

.integration-card-bottom .bb-btn-border {
    pointer-events: none;
    opacity: .5;
    color: var(--secondary-color);
}

.integration-card.connected .integration-card-bottom .bb-form-switch,
.integration-card.connected .integration-card-top>i {
    display: block;
}


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

.web-pricing-group.current-pricing-group .web-pricing-card {
    border-color: var(--secondary-color);
    position: relative;
}

.web-pricing-group.current-pricing-group .bb-btn {
    background-color: transparent;
    color: var(--secondary-color);
    align-items: flex-start;
    transform: translateY(-2px);
    text-align: center;
    padding: 0;
}

.plan-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.expiry-text {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: var(--font-size-14px);
    padding: 8px 15px;
    background-color: var(--secondary05-color);
    border-radius: 4px;
    color: var(--black333-color);
}

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

.expiry-text>b {
    color: var(--black-color);
    font-weight: 500;
    margin-top: 1px;
}

.day-status,
.expiry-text>span {
    padding: 2px 8px;
    background-color: var(--red-color);
    color: var(--white-color);
    border-radius: 100px;
    font-weight: 400;
    line-height: 1.1;
    min-width: 30px;
    text-align: center;
    margin-left: 5px;
}

.renew-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px 30px;
    background-color: var(--white-color);
    border-radius: 12px;
}

.renew-pricing-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.renew-pricing-list>p {
    margin: 0;
    font-size: var(--font-size-14px);
    color: var(--black555-color);
    margin: 0;
    text-transform: capitalize;
}

.renew-pricing-list>aside {
    font-size: calc(var(--font-size-14px) + 2px);
    font-weight: 400;
    color: var(--black-color);
    line-height: 1.1;
    text-transform: capitalize;
}

.renew-pricing-group .web-pricing-card {
    background-color: var(--secondary03-color);
    border: 1px solid var(--secondary08-color);
    margin-bottom: 15px;
}

.web-pricing-card.web-pricing-card-border {
    border: 1px solid var(--secondary10-color);
}

.web-pricing-card.active {
    border-color: var(--secondary-color);
}

.subscription-plan-row {
    --planCardWidth: 22%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--planCardWidth), 1fr));
    gap: 20px;
}

.subscription-plan-row .web-pricing-card {
    padding: 20px;
    gap: 20px;
    border-radius: 8px;
}

.subscription-plan-row .web-pricing-name-row>p {
    font-size: calc(var(--font-size-14px) + 2px);
}

.subscription-plan-row .web-pricing-plan-text>aside {
    font-size: calc(var(--font-size-14px) + 22px);
}

.subscription-plan-row .web-pricing-plan-text>aside>span {
    font-size: calc(var(--font-size-14px) + 6px);
}

.subscription-plan-row .web-pricing-plan-text>p,
.subscription-plan-row .web-pricing-list>li {
    font-size: var(--font-size-14px);
}

.subscription-plan-row .web-pricing-plan-row>p,
.subscription-plan-row .web-pricing-list>li i {
    font-size: calc(var(--font-size-14px) - 2px);
}

.subscription-plan-row .web-btn-row .bb-btn {
    padding-inline: 10px;
}


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

.refer-group {
    padding: 30px;
    background-color: var(--white-color);
    border-radius: 8px;
    display: flex;
    gap: 30px;
}

.refer-image {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refer-row {
    width: calc(75% - 30px);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.refer-row>ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: circle;
    border: 1px solid var(--secondary08-color);
    padding: 20px;
    padding-left: 40px;
    border-radius: 8px;
    margin: 0;
}

.refer-row>ul>li {
    margin-right: 2px;
    padding-left: 10px;
    font-size: calc(var(--font-size-14px) + 2px);
    line-height: 1.5;
    color: var(--black333-color);
    font-weight: 300;
}

.refer-row>ul>li>b {
    color: var(--black-color);
    font-weight: 500;
}

.refer-row .bb-badge-row {
    flex-wrap: nowrap;
}

.refer-row .bb-badge-row .bb-badge {
    white-space: normal;
    display: block;
    padding: 20px;
    background-color: var(--secondary03-color);
}

.refer-row .bb-badge-row .bb-badge>b {
    display: inline-block;
    white-space: nowrap;
}

.refer-link-btn {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.refer-link-group {
    flex: 1 0 300px;
}

.refer-link-group.code-group {
    flex: 0 0 150px;
}

.refer-link-group .bb-form-control {
    padding-block: 6.5px 4.5px;
}

.refer-link-group .bb-form-icon {
    top: 50%;
    transform: translateY(-50%);
}

.refer-link-btn>.bb-btn {
    min-height: 50px;
    min-width: 120px;
}

.refer-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 2px;
}

.refer-badge-card {
    flex: 1 0 150px;
    padding: 30px 10px;
    background-color: var(--secondary05-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.refer-badge-card>img {
    aspect-ratio: 1;
    object-fit: contain;
}

.refer-badge-card>aside {
    font-weight: 600;
    font-size: calc(var(--font-size-14px) + 10px);
    line-height: var(--line-height);
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--secondary-color);
}

.refer-badge-card>aside span {
    font-weight: 300;
    color: var(--black555-color);
    font-size: var(--font-size-14px);
    text-transform: capitalize;
}


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

.general-setting-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.general-setting-row>* {
    margin-bottom: 0;
    width: calc(100% / 3 - 10px);
}

.setting-logo-card {
    background-color: var(--secondary08-color);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-logo-image {
    width: 100%;
    background-color: var(--white-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
}

.setting-logo-image img {
    max-height: 120px;
    object-fit: contain;
}

.setting-logo-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.setting-logo-data aside {
    font-size: var(--font-size-14px);
    font-weight: 300;
    display: flex;
    flex-direction: column;
    color: var(--black-color);
}

.setting-logo-data aside>span {
    font-size: 12px;
    color: var(--black555-color);
}

.setting-logo-data-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.setting-logo-data-btn-row .bb-btn {
    flex-grow: 1;
}

.email-edit-btn {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0;
    border: none;
    width: 20px;
    height: 20px;
    top: 15px;
}

.setting-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: var(--body-color);
    padding-block: 10px;
    margin-block: -10px;
}

.action-checkbox-row .bb-form-checkbox .bb-form-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-checkbox-row .bb-form-checkbox .bb-form-label i {
    color: currentColor;
    font-size: calc(var(--font-size-14px) - 2px);
}


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

.bb-header-billing {
    padding-block: 16.25px;
}

.bb-header-billing-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bb-header-billing-row>.bb-status {
    padding-block: 6px;
}

.bb-header-billing-row .empty-status {
    background-color: var(--secondary05-color);
}

.bb-header-billing-row>.bb-btn {
    min-width: auto;
}

.pos-billing-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.pos-billing-row-area {
    width: calc(100% - 380px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.abdt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.abdt-row>p {
    margin: 0;
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black555-color);
    text-transform: capitalize;
}

.abdt-row>p>span {
    font-weight: 400;
    color: var(--black-color);
}

.abdt-row>p>span:empty::before {
    content: "-";
}

.pos-billing-table-grid {
    --tableGroupWidth: 140px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tableGroupWidth), 1fr));
    gap: 20px;
}

.pos-billing-table-group {
    position: relative;
}

.pos-billing-table-card {
    padding: 10px 14px;
    border-radius: 8px;
    background-color: var(--secondary05-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    aspect-ratio: 1 / 0.86;
    cursor: pointer;
    transition: var(--transition);
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--pos-mask-image);
    -webkit-mask-image: var(--pos-mask-image);
}

.pos-billing-table-card:hover {
    background-color: var(--secondary10-color);
}

.pos-billing-table-card.running-card {
    --pos-mask-image: url(../images/billing-card-2.svg);
    background-color: var(--running-bg-color);
}

.pos-billing-table-card.running-card-without-whatsapp {
    --pos-mask-image: url(../images/billing-card-1.svg);
    background-color: var(--running-bg-color);
}

.pos-billing-table-card.bill-given-card {
    --pos-mask-image: url(../images/billing-card-1.svg);
    background-color: var(--bill-given-bg-color);
}

.pos-billing-table-card.reserved-card {
    --pos-mask-image: url(../images/billing-card-1.svg);
    background-color: var(--reserved-bg-color);
}

.pos-billing-table-card.disable-card {
    background-color: var(--secondary05-color);
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 23.25C18.2058 23.25 23.25 18.2058 23.25 12C23.25 5.79419 18.2058 0.75 12 0.75C5.79419 0.75 0.75 5.79419 0.75 12C0.75 18.2058 5.79419 23.25 12 23.25ZM12 2.31977C17.3372 2.31977 21.6802 6.66279 21.6802 12C21.6802 17.3372 17.3372 21.6802 12 21.6802C6.66279 21.6802 2.31977 17.3372 2.31977 12C2.31977 6.66279 6.66279 2.31977 12 2.31977Z" fill="%23B4B5BD"/><path d="M19.4302 20.1104C19.629 20.1104 19.8279 20.0371 19.9848 19.8802C20.2883 19.5767 20.2883 19.0744 19.9848 18.7709L5.33368 4.11971C5.03019 3.81622 4.52787 3.81622 4.22438 4.11971C3.92089 4.42319 3.92089 4.92552 4.22438 5.22901L18.8755 19.8802C19.0325 20.0371 19.2314 20.1104 19.4302 20.1104Z" fill="%23B4B5BD"/></svg>');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.pos-billing-table-number-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: calc(var(--font-size-14px) + 2px);
    font-weight: 500;
    line-height: var(--line-height);
    color: var(--black555-color);
}

.pos-billing-table-card.running-card .pos-billing-table-number-text,
.pos-billing-table-card.bill-given-card .pos-billing-table-number-text,
.pos-billing-table-card.reserved-card .pos-billing-table-number-text {
    color: var(--black-color);
}

.pos-billing-table-number-text .bb-circle-badge,
.pos-billing-item-card .bb-circle-badge {
    width: 14px;
    height: 14px;
}

.pos-billing-order-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-billing-order-data>span,
.pos-billing-order-data>aside {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: var(--line-height);
}

.pos-billing-order-data>span {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    color: var(--black555-color);
}

.pos-billing-order-data>span i,
.pos-billing-order-data>aside i {
    font-size: calc(var(--font-size-14px) - 4px);
}

.pos-billing-order-data>aside {
    font-size: calc(var(--font-size-14px) + 4px);
    font-weight: 500;
    color: var(--black-color);
}

.pos-billing-bill-btn-row {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 8%;
    aspect-ratio: 1 / 0.4713;
    width: 46.15%;
}

.pos-billing-bill-btn-row>* {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: calc(var(--font-size-14px) + 2px);
    border: none;
    border-radius: 6px;
    flex: 1 0 auto;
}

.pos-billing-table-card.running-card-without-whatsapp+.pos-billing-bill-btn-row>*,
.pos-billing-table-card.running-card+.pos-billing-bill-btn-row>* {
    background-color: var(--running-bg-color);
}

.pos-billing-table-card.running-card-without-whatsapp+.pos-billing-bill-btn-row>* i,
.pos-billing-table-card.running-card+.pos-billing-bill-btn-row>* i {
    color: var(--running-color);
}

.pos-billing-table-card.running-card-without-whatsapp+.pos-billing-bill-btn-row,
.pos-billing-table-card.reserved-card+.pos-billing-bill-btn-row,
.pos-billing-table-card.bill-given-card+.pos-billing-bill-btn-row {
    aspect-ratio: 1 / 1.012;
    width: 21.5%;
}

.pos-billing-table-card.bill-given-card+.pos-billing-bill-btn-row>* {
    background-color: var(--bill-given-bg-color);
}

.pos-billing-table-card.bill-given-card+.pos-billing-bill-btn-row>* i {
    color: var(--bill-given-color);
}

.pos-billing-table-card.reserved-card+.pos-billing-bill-btn-row>* {
    background-color: var(--reserved-bg-color);
}

.pos-billing-table-card.reserved-card+.pos-billing-bill-btn-row>* i {
    color: var(--reserved-color);
}

.pos-billing-row-order-type {
    width: 360px;
    background-color: var(--white-color);
    border-radius: 8px;
    height: calc(100vh - 180px);
    position: sticky;
    top: 20px;
    display: flex;
}

.pos-billing-order-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 100%;
}

.order-detail-table .pos-billing-order-no-data {
    width: 100%;
    padding-top: 40px;
    position: absolute;
    top: 0;
}

.pos-billing-order-no-data>img {
    padding: 0;
    object-fit: contain;
    width: 70px;
}

.pos-billing-order-no-data>span {
    padding: 0;
    font-size: calc(var(--font-size-14px) + 2px);
    font-weight: 300;
    line-height: var(--line-height);
    text-transform: capitalize;
    color: var(--black555-color);
}

.pos-billing-row-order-type>.bb-tabs {
    position: sticky;
    top: 0;
    width: 100%;
}

.pos-billing-row-order-type>.bb-tabs .tab-content {
    height: calc(100% - 50px);
}

.pos-billing-row-order-type>.bb-tabs .tab-content>* {
    height: 100%;
}

.pos-billing-order-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    height: 100%;
    overflow-y: auto;
}

.pos-billing-order-card {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--secondary10-color);
    cursor: pointer;
    transition: var(--transition);
}

.pos-billing-order-card:hover {
    border-color: var(--secondary30-color);
}

.pos-billing-order-card-top {
    display: flex;
    gap: 5px;
}

.pos-billing-order-card-top-leftside {
    flex: 1 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pos-billing-table-info-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary05-color);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: calc(var(--font-size-14px) + 4px);
    font-weight: 400;
    line-height: calc(var(--line-height) + 0.25);
    overflow: hidden;
    position: relative;
}

.pos-billing-table-info-card.running {
    background-color: var(--running-bg-color);
    color: var(--running-color);
}

.pos-billing-table-info-card.bill-given {
    background-color: var(--bill-given-bg-color);
    color: var(--bill-given-color);
}

.pos-billing-table-info-card.reserved {
    background-color: var(--reserved-bg-color);
    color: var(--reserved-color);
}

.pos-billing-table-info-card .bb-circle-badge {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 8px;
    border-radius: 0 0 3px 0;
}

.pos-billing-table-data-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.pos-billing-table-data-card>h3 {
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black-color);
    margin: 0;
}

.pos-billing-table-data-card>span {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    color: var(--black555-color);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: var(--line-height);
}

.pos-billing-table-data-card>span i {
    font-size: calc(var(--font-size-14px) - 4px);
}

.pos-billing-order-card-top-rightside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-billing-order-card-top-rightside .bb-status {
    min-width: auto;
    border-radius: 2px;
    padding: 1.5px;
    line-height: 1.2;
    height: 18px;
    font-size: calc(var(--font-size-14px) - 4px);
}

.pos-billing-order-collapse-btn-row {
    display: flex;
    gap: 4px;
}

.pos-billing-order-collapse-btn {
    background-color: var(--secondary08-color);
    font-size: var(--font-size-14px);
    padding: 0;
    border-radius: 4px;
    border: none;
    height: 28px;
    width: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-billing-order-collapse-btn i {
    color: var(--secondary-color);
}

.pos-billing-order-collapse-btn.running {
    background-color: var(--running-bg-color);
}

.pos-billing-order-collapse-btn.running i {
    color: var(--running-color);
}

.pos-billing-order-collapse-btn.bill-given {
    background-color: var(--bill-given-bg-color);
}

.pos-billing-order-collapse-btn.bill-given i {
    color: var(--bill-given-color);
}

.pos-billing-order-collapse-btn.reserved {
    background-color: var(--reserved-bg-color);
}

.pos-billing-order-collapse-btn.reserved i {
    color: var(--reserved-color);
}

.pos-billing-order-collapse-btn[aria-expanded="true"] {
    background-color: var(--secondary10-color);
}

.pos-billing-order-collapse-btn i {
    transition: var(--transition);
}

.pos-billing-order-collapse-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.pos-billing-order-card-middle {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--secondary10-color);
}

.pos-billing-order-card-middle .table {
    margin: 0;
}

.pos-billing-order-card-middle .table th,
.pos-billing-order-card-middle .table td {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    padding: 0 0 10px;
    border: none;
    color: var(--black-color);
    width: 65%;
}

.pos-billing-order-card-middle .table th {
    text-transform: capitalize;
    white-space: nowrap;
    color: var(--black777-color);
}

.pos-billing-order-card-middle .table tr:last-child td {
    padding-bottom: 0;
}

.pos-billing-order-card-middle .table th:nth-child(2),
.pos-billing-order-card-middle .table td:nth-child(2) {
    text-align: center;
    padding-inline: 6px;
    width: 10%;
}

.pos-billing-order-card-middle .table th:nth-child(3),
.pos-billing-order-card-middle .table td:nth-child(3) {
    text-align: right;
    width: 25%;
}

.pos-billing-reservation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0;
}

.pos-billing-reservation-list li {
    flex: 1 0 45%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-transform: capitalize;
    color: var(--black777-color);
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    padding: 10px 5px 0 0;
    border-top: 1px solid var(--secondary08-color);
}

.pos-billing-reservation-list li>span {
    color: var(--black-color);
    text-transform: none;
}

.pos-billing-order-card-bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--secondary10-color);
    text-transform: capitalize;
}

.pos-billing-order-card-bottom>* {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--black-color);
    margin: 0;
}

.pos-billing-order-card-bottom>span {
    font-size: calc(var(--font-size-14px) + 2px);
    font-weight: 500;
}

.pos-billing-row-order-type .offcanvas-footer,
.show-order-type-card-btn {
    display: none;
    width: 100%;
}

.pos-billing-row-order-type .offcanvas-footer {
    padding-inline: 15px;
}

.pos-billing-take-order-body {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pos-billing-item-row {
    width: calc(100% - 600px);
    padding: 30px;
}

.pos-billing-item-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.pos-billing-item-search-row>input.bb-form-control {
    flex-basis: 70%;
}

.pos-billing-item-grid {
    --itemCardWidth: 180px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--itemCardWidth), 1fr));
    gap: 15px;
}

.pos-billing-variant-grid,
.pos-billing-addon-grid {
    --itemCardWidth: 140px;
}

.pos-billing-item-card {
    user-select: none;
    position: relative;
    border: 1px solid var(--primary10-color);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.pos-billing-variant-grid .pos-billing-item-card {
    padding: 0;
    gap: 0;
}

.pos-billing-variant-grid .pos-billing-item-card:active,
.pos-billing-addon-grid .pos-billing-item-card:active {
    transform: none;
}

.out-of-stock-card {
    cursor: not-allowed;
    border-color: var(--secondary10-color);
}

.out-of-stock-card>* {
    opacity: .5;
}

.pos-billing-item-card:not(.out-of-stock-card):hover {
    background-color: var(--primary03-color);
}

.pos-billing-item-card.active {
    background-color: var(--primary03-color);
    border-color: var(--primary-color);
}

.pos-billing-variant-grid .pos-billing-item-card:hover,
.pos-billing-addon-grid .pos-billing-item-card:hover,
.pos-billing-variant-grid .pos-billing-item-card.active,
.pos-billing-addon-grid .pos-billing-item-card.active {
    background-color: transparent;
}

.pos-billing-variant-grid .pos-billing-item-card.active,
.pos-billing-addon-grid .pos-billing-item-card.active {
    cursor: default;
}

.pos-billing-item-card-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pos-billing-variant-grid .pos-billing-item-card-title {
    height: 100%;
}

.pos-billing-item-card-title>i {
    font-size: calc(var(--font-size-14px) - 4px);
    flex-shrink: 0;
    margin-top: 4px;
}

.pos-billing-item-card-title>h3 {
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: calc(var(--line-height) + 0.15);
    color: var(--black-color);
    margin: 0;
    transition: var(--transition);
    word-break: break-word;
}

.pos-billing-variant-grid .pos-billing-item-card-title>h3 {
    background-color: var(--primary03-color);
    text-align: center;
    padding: 10px 5px;
    width: 100%;
    border-radius: 3px 3px 0 0;
    font-weight: 400;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-billing-variant-grid .pos-billing-item-card:hover .pos-billing-item-card-title>h3 {
    color: var(--primary-color);
    background-color: var(--primary10-color);
}

.pos-billing-addon-grid .pos-billing-item-card:hover .pos-billing-item-card-title>h3,
.pos-billing-addon-grid .pos-billing-item-card.active .pos-billing-item-card-title>h3 {
    color: var(--primary-color);
}

.pos-billing-variant-grid .pos-billing-item-card.active .pos-billing-item-card-title>h3 {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.pos-billing-item-card-description {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 200;
    line-height: var(--line-height);
    margin-bottom: 0;
    color: var(--black888-color);
}

.pos-billing-item-card-price-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding-top: 15px;
}

.pos-billing-item-card-price-row .bb-customisable-row {
    align-self: flex-end;
}

.pos-billing-variant-grid .pos-billing-item-card-price-row {
    padding: 15px 5px 8px;
    text-align: center;
    justify-content: center;
    margin-top: initial;
}

.pos-billing-item-card-price-row>p {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black777-color);
    margin-bottom: 0;
    user-select: none;
}

.pos-billing-variant-grid .bb-count-card {
    margin: 0 auto 15px;
}

.pos-billing-item-card-price-row .bb-small-btn {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-14px);
    color: var(--black555-color);
}

.pos-billing-item-card-price-row .bb-small-btn.active {
    color: var(--primary-color);
}

.pos-billing-item-card:not(.active) .pos-billing-item-card-price-row .bb-small-btn {
    opacity: .2;
    pointer-events: none;
}

.out-of-stock-badge {
    font-size: calc(var(--font-size-14px) - 4px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--secondary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 4px 0 3px 0;
    background-color: var(--secondary10-color);
    padding: 4.5px 8px;
    text-transform: capitalize;
    opacity: 1;
}

.pos-billing-menu-row {
    position: sticky;
    top: 0px;
    width: 600px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--white-color);
}

.pos-billing-menu-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.pos-billing-menu-body>form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
}

.pos-billing-order-type-ctca-row {
    display: flex;
    gap: 10px;
}

.pos-billing-order-type-ctca-row>.bb-form-checkbox-row {
    border: 1px solid var(--secondary10-color);
    border-radius: 8px;
    padding: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.pos-billing-order-type-ctca-row>.bb-card {
    flex: 1 1 50px;
    max-width: 100%;
}

.pos-billing-order-type-ctca-row .bb-tabs .nav-tabs .nav-link {
    padding-inline: 14px;
    min-height: 39px;
}

.pos-billing-order-type-ctca-row .tab-pane {
    padding: 14px 15px;
}

.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: 40px;
    max-height: 40px;
}

.pos-billing-order-type-ctca-row .tab-content .bb-form-control-only.bb-select-css.single .ts-control {
    padding-block: 1px;
}

.pos-billing-order-type-ctca-row .pn-form-control-card .bb-form-control {
    min-height: 38px;
}

.bb-flex-card .pos-billing-customer-btn-row {
    flex-basis: auto;
    width: 50px;
    height: 40px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 0;
}

.bb-flex-card .pos-billing-customer-btn-row>* {
    flex-grow: 1;
    margin-top: 0 !important;
    font-size: calc(var(--font-size-14px) - 3px);
    width: 100%;
    gap: 3px;
    text-transform: capitalize;
    font-weight: 400;
    padding-inline: 2px;
    line-height: 1.15;
    background-color: var(--primary10-color);
}

.bb-flex-card .pos-billing-customer-btn-row>* i {
    font-size: calc(var(--font-size-14px) - 6px);
}

.bb-flex-card .pos-billing-customer-btn-row>*.active,
.bb-flex-card .pos-billing-customer-btn-row>*:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.bb-flex-card .pos-billing-customer-btn-row .customer-due-btn {
    background-color: var(--secondary05-color);
    color: var(--secondary-color);
}

.bb-flex-card .pos-billing-customer-btn-row .customer-due-btn.red-color {
    background-color: var(--red-color);
    color: var(--white-color);
}

.bb-flex-card .pos-billing-customer-btn-row .customer-due-btn.red-color:hover {
    background-color: var(--hover-red-color);
}

.bb-table .complementary-bogo-table tr td {
    padding-block: 20px;
}

.bb-table-checkbox-row,
.complementary-bogo-checkbox {
    gap: 12px;
}

.bb-table-checkbox-row .bb-form-label,
.complementary-bogo-checkbox .bb-form-label {
    text-transform: none;
}

.complementary-bogo-checkbox .order-item-addon-text {
    display: block;
    padding-top: 4px;
}

.complementary-bogo-checkbox .bb-form-checkbox-input:not(:checked)+.bb-form-label .order-item-addon-text {
    opacity: 0.7;
}

.pos-billing-apply-bogo-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.bb-count-card.disabled,
.pos-billing-item-card .bb-count-card.disable,
.pos-billing-item-card:not(.active) .bb-count-card,
.pos-billing-apply-bogo-row .bb-count-card:not(.active) {
    opacity: .3;
    pointer-events: none;
}

.order-detail-table {
    border: 1px solid var(--secondary08-color);
    border-radius: 8px;
    overflow-y: auto;
    position: relative;
}

.pos-billing-menu-body .order-detail-table {
    flex: 1 0 150px;
}

.order-detail-table .bb-table {
    border-width: 0 0 1px;
    border-radius: 8px 8px 0 0;
}

.order-detail-table .table tr th,
.order-detail-table .table tr td {
    padding-inline: 10px;
}

.order-detail-table .table tr th {
    height: 40px;
    background-color: var(--secondary03-color);
    font-weight: 300;
    color: var(--black555-color);
    font-size: var(--font-size-14px);
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--secondary08-color);
    border-bottom: none;
}

.order-detail-table .table tr td {
    padding-block: 15px;
}

.order-detail-table .table tr th:first-child,
.order-detail-table .table tr td:first-child {
    width: 100%;
}

.pos-billing-order-item-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.order-item-card-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.order-item-card-title>i {
    font-size: calc(var(--font-size-14px) - 4px);
    flex-shrink: 0;
    margin-top: 3px;
}

.order-item-card-title>h3 {
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black-color);
    margin-bottom: 0;
    /* white-space: nowrap; */
}

.order-item-special-text,
.order-item-addon-text {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: calc(var(--line-height) + 0.15);
    background-color: transparent;
    border: none;
    padding: 0;
    text-align: left;
    color: var(--black777-color);
    display: inline-block;
    margin: 0;
}

.order-item-special-text {
    color: var(--black333-color);
}

.order-item-addon-text>span {
    color: var(--primary-color);
}

.order-item-discount-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.order-item-bogo-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    background-color: var(--secondary10-color);
    border-radius: 100px;
    padding-inline: 2px;
}

.order-item-bogo-row .bb-circle-badge {
    background-color: var(--white-color);
    color: var(--secondary-color);
    font-weight: 400;
    width: 14.5px;
    height: 14.5px;
}

.order-item-discount-row .bb-status {
    background-color: var(--secondary08-color);
    color: var(--secondary-color);
    font-size: calc(var(--font-size-14px) - 4px);
    min-width: auto;
    padding: 3px 8px;
}

.order-item-bogo-row .bb-status {
    background-color: transparent;
    padding-inline: 6px;
}

.order-item-discount-row .new-status {
    background-color: var(--primary10-color);
    color: var(--primary-color);
}

.order-detail-main-price-text {
    color: var(--black888-color);
}

.order-detail-price-text {
    font-weight: 300;
    font-size: var(--font-size-14px);
    color: var(--black-color);
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
}

.order-detail-price-text>span {
    font-size: calc(var(--font-size-14px) - 2px);
    text-decoration: line-through;
    color: var(--black888-color);
}

.order-detail-action-td {
    width: 40px;
}

.order-detail-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-detail-action-row>* {
    font-size: calc(var(--font-size-14px) + 2px);
    width: calc(var(--font-size-14px) + 4px);
    height: calc(var(--font-size-14px) + 4px);
}

.add-discount-charges-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 10px 10px 20px;
    background-color: var(--primary08-color);
    border-radius: 4px;
}

.add-discount-charges-row.min-h-60 {
    min-height: 60px;
}

.add-discount-charges-row .bb-form-checkbox-row {
    margin-top: 12px;
    min-height: 16px;
}

.add-discount-charges-card {
    flex: 1 0 60px;
}

.add-discount-charges-card .bb-form-control {
    min-height: 40px;
    border-color: transparent;
}

.add-discount-charges-card .bb-form-control:focus {
    border-color: var(--secondary-color);
}

.add-discount-charges-card .bb-form-icon {
    top: 13px;
    line-height: 1;
    background-color: var(--white-color);
    padding-left: 6px;
    pointer-events: none;
    color: var(--black-color);
}

.pos-billing-payment-card .bb-card-header {
    padding-inline: 10px;
    min-height: 40px;
}

.pos-billing-payment-card .bb-card-body {
    padding: 10px;
}

.pos-billing-payment-card .add-discount-charges-row {
    gap: 5px;
    padding: 5px 5px 5px 15px;
    justify-content: space-between;
}

.pos-billing-payment-card .add-discount-charges-card {
    flex: 0 0 112px;
}

.pos-billing-payment-card .add-discount-charges-row .bb-form-checkbox-row {
    margin-top: 9px;
    min-height: auto;
}

.pos-billing-payment-card .add-discount-charges-row .bb-form-checkbox-row .bb-form-label {
    font-size: calc(var(--font-size-14px) - 2px);
}

.pos-billing-payment-card .add-discount-charges-card .bb-form-control {
    min-height: 30px;
    padding: 4px 10px;
    font-size: calc(var(--font-size-14px) - 1px);
    font-weight: 400;
}

.pos-billing-payment-card .add-discount-charges-card .bb-form-control-bg {
    padding-right: 30px;
    background-position: right 10px center;
    background-size: calc(var(--font-size-14px) - 2px);
    border-color: transparent;
}

.pos-billing-payment-card .online-radio-row .bb-form-control,
.pos-billing-payment-card .card-radio-row .bb-form-control {
    min-height: 40px;
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 400;
}

.pos-billing-payment-card .part-radio-row .add-discount-charges-card {
    flex-basis: 90px;
}

.pos-billing-order-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
}

.pos-billing-order-btn-row>* {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 0 50px;
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: 1;
    padding: 5px 2px;
    border-radius: 4px;
    text-transform: capitalize;
    border: none;
    min-height: 40px;
    color: var(--white-color);
}

.pos-billing-order-btn {
    background-color: #00AEEF;
}

.pos-billing-whatsapp-bill-btn {
    background-color: #2ec54d;
}

.pos-billing-print-bill-btn {
    background-color: #f1a500;
}

.pos-billing-mark-billed-btn {
    background-color: #9c86e3;
}

.pos-billing-kot-bill-btn {
    background-color: #ed7a3f;
}

.pos-billing-cancel-btn {
    background-color: var(--black888-color);
}

.pos-billing-order-btn-row>*:hover {
    filter: brightness(0.95)
}

.pos-billing-order-btn-row>*:disabled {
    pointer-events: none;
    opacity: .5;
}

.pos-billing-item-footer {
    padding-block: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    background-color: var(--body-color);
    margin-block: 5px -15px;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.pos-billing-item-footer>* {
    flex: 1 0 50px;
}

.hide-menu-row-btn.sidebar-close-overlay {
    display: none;
}

.pos-billing-menu-row .offcanvas-footer {
    padding: 10px;
    width: 100%;
    display: none;
}

.pos-billing-action-payment-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pos-billing-action-row {
    display: flex;
    gap: 5px;
}

.pos-billing-action-row .bb-btn {
    flex: 1 0 0;
    min-height: 30px;
    padding: 4px 5px;
    font-size: calc(var(--font-size-14px) - 2px);
    background-color: var(--primary05-color);
    border: 1px solid transparent;
    color: var(--primary-color);
    gap: 8px;
    line-height: 1;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: auto;
}

.pos-billing-action-row .bb-btn::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    background-color: var(--primary-color);
    border-radius: 100%;
    opacity: 0;
    visibility: hidden;
}

.pos-billing-action-row .bb-btn:hover {
    background-color: var(--primary10-color);
}

.pos-billing-action-row .bb-btn.active {
    background-color: var(--primary15-color);
}

.pos-billing-action-row .bb-btn.active::before {
    opacity: 1;
    visibility: visible;
}

.pos-billing-action-row .bb-btn>i {
    font-size: calc(var(--font-size-14px) - 4px);
}

.bb-total-card .total-card-css>aside {
    font-size: calc(var(--font-size-14px) + 2px);
}

.pos-billing-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 4px;
    padding: 5px 10px;
    position: relative;
    z-index: 2;
    background-color: var(--secondary08-color);
    min-height: 50px;
}

.pos-billing-payment-row>p {
    font-size: calc(var(--font-size-14px) + 6px);
    font-weight: 500;
    color: var(--black-color);
    line-height: 1;
    margin: 0;
}

.pos-billing-payment-row>span,
.pos-billing-payment-row>button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--font-size-14px);
    font-weight: 300;
    line-height: 1;
    text-transform: capitalize;
    color: var(--black-color);
    padding: 0;
    background-color: transparent;
    border: none;
}

.pos-billing-payment-row>button>i {
    font-size: calc(var(--font-size-14px) - 4px);
    color: var(--secondary-color);
    transition: var(--transition);
}

.pos-billing-payment-row>button[aria-expanded="true"]>i {
    transform: rotate(180deg);
}

.pos-billing-summary-collapse {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0px;
    width: 100%;
}

.settle-action-payment-group .pos-billing-summary-collapse {
    position: initial;
}

.pos-billing-summary-collapse .bb-view-card {
    background-color: var(--white-color);
    border-color: var(--secondary25-color);
    border-radius: 4px;
    padding: 12px 10px;
    gap: 12px;
    box-shadow: var(--boxShadow);
}

.settle-action-payment-group .pos-billing-summary-collapse .bb-view-card {
    box-shadow: none;
    border-color: var(--secondary10-color);
}

.pos-billing-summary-collapse .bb-view-card-data>p>button,
.pos-billing-summary-collapse .bb-view-card-data>p {
    font-size: calc(var(--font-size-14px) - 1px);
    color: var(--black555-color);
}

.pos-billing-summary-collapse .bb-view-card-data>p>button i {
    font-size: calc(var(--font-size-14px) - 2px);
}

.pos-billing-summary-collapse .bb-view-card-data>aside {
    color: var(--black-color);
}


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

.kds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    background-color: var(--secondary-color);
    border-radius: 0 0 20px 20px;
    min-height: 85px;
    padding: 10px 30px;
}

.kds-header .bb-logo {
    width: auto;
    height: auto;
    padding: 0;
}

.kds-header-title {
    font-size: calc(var(--font-size-14px) + 4px);
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--white-color);
    margin: 0;
    text-align: center;
}

.kds-header-title>span {
    font-size: var(--font-size-14px);
    display: block;
    text-transform: capitalize;
    font-weight: 400;
    margin-top: 8px;
    color: var(--secondary30-color);
}

.kds-logout {
    min-width: 165px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.kds-logout .bb-sidebar-link {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #1b255d;
    font-size: calc(var(--font-size-14px) + 6px);
}

.kds-body {
    padding: 30px;
}

.kds-grid {
    --kdsWidth: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kdsWidth), 1fr));
    gap: 20px;
}

.kds-card {
    padding: 15px;
    background-color: var(--white-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.kds-card-animate-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.kds-card-animate-out {
    animation: scaleOut 0.3s ease-in;
    animation-fill-mode: forwards;
}

.kds-card.kds-food-ready-card *:not(.kds-card-hr) {
    filter: grayscale(1);
    pointer-events: none;
}

.kds-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kds-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kds-card-kot-number {
    font-size: calc(var(--font-size-14px) + 6px);
    font-weight: 700;
    line-height: var(--line-height);
    margin: 0;
}

.kds-card-dine-in .kds-card-kot-number {
    color: #2ec54d;
}

.kds-card-pick-up .kds-card-kot-number {
    color: #33bced;
}

.kds-card-delivery .kds-card-kot-number {
    color: #f1a500;
}

.kds-card-header-row .bb-status {
    min-width: auto;
    color: var(--white-color);
    padding-block: 5px;
}

.kds-card-header-row.kds-card-dine-in .bb-status {
    background-color: #2ec54d;
}

.kds-card-header-row.kds-card-pick-up .bb-status {
    background-color: #33bced;
}

.kds-card-header-row.kds-card-delivery .bb-status {
    background-color: #f1a500;
}

.kds-card-time,
.kds-card-area-table {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 400;
    line-height: var(--line-height);
    margin: 0;
    color: var(--black555-color);
}

.kds-card-hr {
    display: flex;
    align-items: center;
    position: relative;
    height: 20px;
    padding-inline: 5px;
    opacity: 1;
}

.kds-card-hr::before,
.kds-card-hr::after {
    content: "";
    position: absolute;
    left: -22.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--body-color);
}

.kds-card-hr::after {
    left: auto;
    right: -22.5px;
}

.kds-card-hr>span {
    width: 100%;
    border-top: 1px dashed var(--secondary10-color);
}

.kds-card-body {
    background-color: var(--secondary05-color);
    border-radius: 4px;
    flex-grow: 1;
}

.kds-card-item-info {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 10px;
}

.kds-card-item-info:last-child {
    border-radius: 0 0 4px 4px;
}

.kds-card-item-info:not(:last-child) {
    border-bottom: 1px solid var(--secondary10-color);
}

.kds-card-item-info>.bb-form-checkbox-input {
    width: 16px;
    height: 16px;
}

.kds-card-item-info>.bb-form-checkbox-input:checked~.kds-card-item-info-row .kds-card-item-info-data>ul li,
.kds-card-item-info>.bb-form-checkbox-input:checked~.kds-card-item-info-row .kds-card-item-info-data>p,
.kds-card-item-info>.bb-form-checkbox-input:checked~.kds-card-item-info-row .kds-card-item-info-data-top>h4,
.kds-card-item-info>.bb-form-checkbox-input:checked~.kds-card-item-info-row .kds-card-item-qty {
    text-decoration: line-through;
    opacity: .7;
}

.kds-card-item-info-row {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
}

.kds-card-item-info-data-top {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.kds-card-item-info-data,
.kds-card-item-info-data-top>h4 {
    flex-grow: 1;
}

.kds-card-item-info-data>ul li,
.kds-card-item-info-data-top>h4,
.kds-card-item-qty {
    margin: 0;
    font-size: var(--font-size-14px);
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--black-color);
    min-width: 20px;
}

.kds-card-item-info-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kds-card-item-info-data>p {
    font-size: calc(var(--font-size-14px) - 2px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black555-color);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.kds-card-item-info-data>p>span {
    flex-shrink: 0;
}

.kds-card-item-info-data>ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.kds-card-item-info-data>ul li {
    font-size: calc(var(--font-size-14px) - 2px);
    min-width: auto;
    font-weight: 300;
}

.kds-card-item-info-data>ul .kds-addon-group-name {
    font-weight: 400;
}

.kds-new-badge {
    font-size: calc(var(--font-size-14px) - 6px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--white-color);
    text-transform: capitalize;
    padding: 2px 5px;
    background-color: var(--secondary-color);
    border-radius: 100px;
    margin-top: 2px;
}

.bb-btn.food-ready-text {
    background-color: transparent;
    color: var(--black555-color);
    text-align: center;
    padding: 5px 0 0;
    line-height: calc(var(--line-height) + 0.15);
    opacity: 1;
    margin-inline: -10px;
    filter: grayscale(0);
}

.kds-no-results {
    min-height: calc(100vh - 145px);
    min-height: calc(100dvh - 145px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 30px;
}

.kds-no-results>img {
    max-width: 350px;
}

.kds-no-results>span {
    font-size: calc(var(--font-size-14px) + 4px);
    font-weight: 300;
    line-height: var(--line-height);
    color: var(--black333-color);
    text-align: center;
}

@keyframes highlight-new-card {
    0% {
        box-shadow: 0 0 0 0 rgba(51, 86, 220, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(51, 86, 220, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(51, 86, 220, 0);
    }
}

.kds-card-highlight {
    animation: highlight-new-card 1.5s ease-in-out 3;
}

@keyframes highlight-new-item {
    0% {
        background-color: rgba(51, 86, 220, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

.kds-item-highlight {
    animation: highlight-new-item 1.5s ease-in-out 3;
}


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

.restaurant-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
}

.restaurant-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--font-size-14px);
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid var(--secondary08-color);
    font-size: calc(var(--font-size-14px) + 6px);
    color: var(--black888-color);
    margin-block: 5px;
}

.restaurant-logo a,
.restaurant-logo a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.restaurant-detail>aside {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
    line-height: var(--line-height);
}

.restaurant-detail>aside.black-color {
    color: var(--black-color);
}

.restaurant-detail>aside>span {
    color: var(--black555-color);
    font-size: calc(var(--font-size-14px) - 2px);
}

.restaurant-detail>aside>.red-color {
    color: var(--red-color);
}

.restaurant-detail>aside>span>span {
    color: var(--black-color);
    min-width: 10.75px;
    display: inline-block;
    text-align: center;
}

.day-status {
    margin-left: 0;
    font-size: calc(var(--font-size-14px) - 2px);
    display: inline-block;
}

.day-status:not(.below-30) {
    background-color: var(--secondary08-color);
    color: var(--secondary-color);
}

.refer-card-body .bb-form-group {
    flex-grow: 1;
}

.refer-card-body .bb-badge-row {
    flex: 1 0 100%;
}

.commission-card .bb-small-btn {
    margin-top: 18.5px;
}