/* Quick Product Form Styling */
.form-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.section-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
    font-size: 14px;
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 4px;
}

.form-control,
.form-select {
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 14px;
    padding: 8px 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#subUnitContainer {
    max-height: 250px;
    overflow-y: auto;
}

/* Container and list-data max-width for large screens */
.container,
.container.list-data {
    max-width: 1300px;
    width: 95%;
}

/* Price and actions row styling */
/* Drastically reduce header height by 50% */
.product-details .header-row.compact {
    margin-bottom: 5px; /* reduced from 10px */
}

    .product-details .header-row.compact .product-image {
        width: 70px; /* reduced from 100px */
        height: 70px; /* reduced from 100px */
        margin-right: 10px; /* reduced from 20px */
    }

    .product-details .header-row.compact .product-header {
        margin-bottom: 4px; /* reduced from 8px */
    }

    .product-details .header-row.compact .product-title {
        line-height: 1.1; /* reduced line height */
    }

    .product-details .header-row.compact .item-code {
        margin-bottom: 2px; /* reduced from 5px */
        font-size: 12px; /* reduced from 14px */
    }

    .product-details .header-row.compact .product-name {
        margin-bottom: 2px; /* reduced from 5px */
        font-size: 16px; /* reduced from 18px */
    }

    .product-details .header-row.compact .btn-edit-product {
        width: 32px; /* reduced from 40px */
        height: 32px; /* reduced from 40px */
    }

    .product-details .header-row.compact .price-badge {
        padding: 3px 8px; /* reduced from 5px 10px */
    }

    .product-details .header-row.compact .price {
        font-size: 18px; /* reduced from 20px */
    }

    .product-details .header-row.compact .unit-name {
        font-size: 12px; /* reduced from 14px */
    }

.product-details .price-actions-row {
    margin-top: 2px; /* reduced from 5px */
}

/* Additional spacing adjustments */
.product-details .container {
    padding: 10px; /* reduced from 20px */
}

/* Further reduce toggle button size */
.product-details .details-toggle.small {
    padding: 4px 8px;
    font-size: 12px;
}

    .product-details .details-toggle.small .details-toggle-icon {
        font-size: 10px;
    }
.product-details .price-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

/* Smaller toggle button */
.product-details .details-toggle.small {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    user-select: none;
    transition: background-color 0.3s ease;
    margin: 0;
    font-size: 14px;
}

    .product-details .details-toggle.small:hover {
        background-color: #eef2f7;
    }

    .product-details .details-toggle.small .details-toggle-icon {
        margin-left: 5px;
        font-size: 12px;
    }

/* Adjust the style for price badge to align with the toggle */
.product-details .price-badge {
    display: inline-flex;
    align-items: baseline;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 5px 10px;
}

/* Ensure the details grid has proper spacing */
.product-details .details-grid {
    margin-top: 10px;
}

/* Make room for the toggle button on small screens */
@media (max-width: 576px) {
    .product-details .price-actions-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-details .details-toggle.small {
        margin-top: 8px;
        align-self: flex-end;
    }
}
.product-details .container {
    background-color: white;
    border: none;
    border-radius: 12px;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .product-details .container:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.product-details .header-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
}

.product-details .product-image {
    width: 140px;
    height: 140px;
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .product-details .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.product-details .product-info {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-details .product-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.product-details .product-title {
    flex-grow: 1;
}

.product-details .item-code {
    color: #959595;
    margin-bottom: 5px;
}

.product-details .product-name {
    font-weight: 600;
    color: #404040;
    margin-bottom: 10px;
}

.product-details .price-badge {
    display: inline-flex;
    align-items: baseline;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 5px;
}

.product-details .price {
    color: #0095da;
    font-weight: 600;
    margin-right: 5px;
}

.product-details .unit-name {
    color: #959595;
}

.product-details .product-actions {
    display: flex;
    align-items: center;
}

.product-details .btn-edit-product {
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #D6D6D6;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .product-details .btn-edit-product:hover {
        background-color: #0095da;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .product-details .btn-edit-product i {
        font-size: 18px;
    }

/* Details Toggle and Grid */
.product-details .details-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 15px 0;
    user-select: none;
    transition: background-color 0.3s ease;
}

    .product-details .details-toggle:hover {
        background-color: #eef2f7;
    }

.product-details .details-toggle-icon {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
    color: #0095da;
}

    .product-details .details-toggle-icon.rotated {
        transform: rotate(0deg);
    }

.product-details .details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 15px 0;
    max-height: 1000px;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    overflow: hidden;
    padding: 0 10px;
}

    .product-details .details-grid.collapsed {
        max-height: 0;
        opacity: 0;
        margin: 0;
        gap: 0;
    }

.product-details .detail-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.product-details .detail-label {
    color: #959595;
    font-size: 14px;
    margin-bottom: 5px;
}

.product-details .detail-value {
    color: #404040;
    font-weight: 500;
    font-size: 15px;
}

/* Status indicators */
.product-details .active-status {
    position: relative;
    color: #28a745;
}

    .product-details .active-status::before {
        content: "•";
        color: #28a745;
        margin-right: 5px;
        font-size: 18px;
        line-height: 0;
        position: relative;
        top: 2px;
    }

.product-details .inactive-status {
    position: relative;
    color: #dc3545;
}

    .product-details .inactive-status::before {
        content: "•";
        color: #dc3545;
        margin-right: 5px;
        font-size: 18px;
        line-height: 0;
        position: relative;
        top: 2px;
    }

/* Product Stock Styles */
.product-details .product-stock {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.product-details .stock-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #404040;
}

    .product-details .stock-header i {
        margin-right: 8px;
        color: #0095da;
    }

.product-details .stock-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.product-details .stock-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.product-details .stock-label {
    color: #959595;
    font-size: 14px;
    margin-bottom: 5px;
}

.product-details .stock-value {
    color: #404040;
    font-weight: 500;
    font-size: 15px;
}

/* Action buttons */
.product-details .product-actions-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.product-details .btn-add-to-cart,
.product-details .btn-quick-order {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .product-details .btn-add-to-cart i,
    .product-details .btn-quick-order i {
        margin-right: 8px;
    }

.product-details .btn-add-to-cart {
    background-color: #0095da;
    color: white;
}

    .product-details .btn-add-to-cart:hover {
        background-color: #0084c3;
        transform: translateY(-2px);
    }

.product-details .btn-quick-order {
    background-color: white;
    color: #0095da;
    border: 1px solid #0095da;
}

    .product-details .btn-quick-order:hover {
        background-color: #f0f7fc;
        transform: translateY(-2px);
    }

/* Comments section */
.product-details .comments {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    color: #959595;
}

    .product-details .comments i {
        margin-right: 5px;
    }

/* Fix for grid layout on product listing */
#divListItem {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Responsive styles */
@media (max-width: 576px) {
    .product-details .container {
        padding: 15px;
    }

    .product-details .header-row {
        flex-direction: column;
    }

    .product-details .product-image {
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .product-details .details-grid,
    .product-details .stock-details {
        grid-template-columns: 1fr;
    }

    .product-details .product-actions-footer {
        flex-direction: column;
    }
}
/*---end */
.set-text .w-400 {
    padding-left: 20px;
}

.set-text .col-4 p,
.set-text .col-8 p {
    margin-bottom: 0;
}

.tab-content .col-8 {
    max-height: calc(100vh - 3rem);
    min-height: calc(100vh - 3rem);
    overflow-y: auto;
}
.product-image {
    width: 200px; /* ปรับขนาด div ตามต้องการ */
    height: 200px;
    overflow: hidden; /* ป้องกันรูปภาพเกินขอบ */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ทำให้รูปพอดีกับ div โดยไม่ถูกตัด */
}
/* Tree View Styles */
.tree-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
}

.tree-view {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.tree-item {
    padding: 8px 12px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .tree-item:hover {
        background-color: #e9e9e9;
    }

    .tree-item.focused {
        font-weight: bold;
    }

.tree-level-2,
.tree-level-3,
.tree-level-4,
.tree-level-5 {
    background-color: transparent !important;
}

.tree-item.focused .tree-level-2,
.tree-item.focused .tree-level-3,
.tree-item.focused .tree-level-4,
.tree-item.focused .tree-level-5 {
    background-color: transparent !important;
    font-weight: normal !important;
}

.tree-children {
    list-style-type: none;
    padding-left: 20px;
    margin: 0;
    display: none;
    background-color: transparent;
}

    .tree-children.open {
        display: block;
    }

.tree-toggle {
    margin-right: 8px;
    color: #0095da;
    display: inline-block;
    width: 12px;
    text-align: center;
    cursor: pointer;
}

    .tree-toggle.empty {
        visibility: hidden;
    }

.tree-level-1 {
    margin-left: 0;
}

.tree-level-2 {
    margin-left: 8px;
}

.tree-level-3 {
    margin-left: 8px;
}

.tree-level-4 {
    margin-left: 8px;
}

.tree-level-5 {
    margin-left: 8px;
}

 html {
    font-size: 16px;
    -webkit-overflow-scrolling: touch;
}
/* width */
::-webkit-scrollbar {
    width: 0px;
}

/* Remove default bullets */
ul, #myUL {
    list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

    /* Create the caret/arrow with a unicode, and style it */
    .caret::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px;
    }

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}

.loader-display {
    position: fixed;
    display: none;
    z-index: 9999;
}
.loader-loading {
    display: flex;
    justify-content: center;
    z-index: 9999;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #0000006b;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
}
.logo-loading-mymaxx {
    width:100px;
    height:100px;
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
  }
}
.w-600 {
    font-weight: 600 !important;
}
.w-500 {
    font-weight: 500 !important;
}
.w-400 {
    font-weight: 400 !important;
}
.font-12 {
    font-size: 12px !important;
}
.font-13 {
    font-size: 13px !important;
}
.font-14 {
    font-size: 14px !important;
}
.font-15 {
    font-size: 15px !important;
}
.font-16 {
    font-size: 16px !important;
}
.font-18 {
    font-size: 18px !important;
}
.font-20 {
    font-size: 20px !important;
}
.font-24 {
    font-size: 24px !important;
}
.font-bold {
    font-weight: bold;
}

html {
  position: relative;
  min-height: 100%;
}

body{
    font-family: 'Kanit', sans-serif;
    background-color: #f7f7f7;
    --background-color: #f7f7f7;
    color: #000000;
    font-weight: 300;
    height: 100%;
    font-size: 16px;
}
samp {
    font-family: 'Kanit', sans-serif;
    color: #000000;
    font-weight: 300;
    height: 100%;
    font-size: 16px;
}
a {
    color:initial; /* Replace with your preferred color */
    text-decoration: none; /* Removes the underline */
}

/* Optional: Change the appearance on hover */
a:hover {
    text-decoration: underline; /* You can set this back if you want underlining on hover */
    color: initial; /* Replace with hover color */
}


    .body-loadings {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        /* background-color: rgba(0, 0, 0, 0.4);*/
        background-color: #ffffff;
        margin: 0;
        position: absolute;
        z-index: 9999;
    }


.bg-color-grey {
    background-color: #0000001C;
    /*background-color: #0000001C;*/
}
.color-text {
    color: #000000;
}
.color-grey-2 {
    color: #959595;
}
.color-rad {
    color: #F5355C;
}
.color-default {
    color: #404040 !important;
}
.table-tr-color {
    background-color: #C5E3F6;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #E7E7E7;
}
.table-bordered {
    border: 1px solid #E7E7E7;
}
    .table-bordered thead,.table-bordered tbody {
        border: 0px solid #E7E7E7;
    }
    .table-bordered thead tr{
        border: 0px solid #E7E7E7;
        border-right: 0px solid #E7E7E7;
    }
    .table-bordered tbody tr {
        border: 0px solid #E7E7E7; 
    }
    .table-bordered thead tr th.th-sell {
        border: 0px solid #E7E7E7;
        border-left: 1px solid #E7E7E7;
        border-radius: 0 8px 0 0;
    }

        .table-bordered thead tr th.th-time {
            border: 0px solid #E7E7E7;
            border-right: 0px solid #E7E7E7 !important;
            border-left: 0px solid #E7E7E7;
            border-radius: 8px 0 0 0;
        }
    .table-bordered tbody tr td.td-sell {
        border: 0px solid #E7E7E7;
        border-right: 0px solid #E7E7E7 !important;
        border-left: 1px solid #E7E7E7;
        border-bottom: 1px solid #E7E7E7;
    }
    .table-bordered tbody tr td.td-time {
        border: 0px solid #E7E7E7;
        border-right: 1px solid #E7E7E7 !important;
        border-left: 0px solid #E7E7E7;
        border-bottom: 1px solid #E7E7E7;
    }
    .table.table-bordered td, .table.table-bordered th {
        padding: 0.5rem;
        vertical-align: middle !important;
        color: #000000B5;
    }         
    .shadow {
        box-shadow: 0px 3px 6px #C5C5C528 !important;
    }
.btn-menu {
    width: 38px;
    height: 38px !important;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 0px solid #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center-listradio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.flex-center-listradio-null {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}
.flex-center-listmenu-null {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}
.set-btn-end {
    position: absolute;
    /*bottom: 15px;*/
    display: flex;
    align-items: center;
    max-width: 1140px;
    min-height: 55px;
    background-color: #F7F7F7;
    width: var(--container-width);
    padding-right: var(--padding-horizontal);
    padding-left: var(--padding-horizontal);
}
.btn-cal-promotion {
    width:42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem !important;
}

.flex-center-justify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.flex-column-nowrap {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
}
.modal-row-item.mb-10:last-of-type {
    margin-bottom: 0px;
}

.img-cal-promotion {
    width: 18px;
    height: 18px;
}
@media (min-width: 0px) and (max-width: 575px) {
    .set-btn-end {
        right: 0px;
    }
}
@media (min-height: 0px) and (max-height: 695px) {
    .set-btn-end {
        position: initial;
        /*margin-top: 25px;*/
        bottom: 10px;
        max-width: 1140px;
        width: var(--container-width);
        /*width: -webkit-fill-available;*/
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom:10px;
    }
}
@media (min-height: 0px) and (max-height: 795px) {
    .set-detail-product.set-btn-end {
        position: initial;
        /*margin-top: 25px;*/
        bottom: 10px;
        max-width: 1140px;
        width: var(--container-width);
        /*width: -webkit-fill-available;*/
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 10px;
    }
}

.btn-detailedit-item {
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #0095da;
    box-shadow: 0px 3px 6px #C5C5C528;
}
.btn-detailedit-item:focus {
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #0095da !important;
    box-shadow: 0px 3px 6px #C5C5C528;
}
h5 {
    font-size: 16px;
}
#BodyLoging {
    display: none;
}
.body-load {
    background: #ffffff;
    width: 100%;
    height: 100%;
}
.load-page-mymaxx {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.set-btn-cart {
    position: sticky;
}
.item-number {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    background: #0096DA 0% 0% no-repeat padding-box;
    font-size: 8px;
    color: #ffffff;
    width: 14px;
    height: 14px;
    position: absolute;
    top: -5px;
    left: 20px;
}

@media (min-width: 0px) and (max-width: 264px) {
    .logo-load-mymaxx {
        width: 100%;
    }
}
@media (min-width: 265px) and (max-width: 294px) {
    .logo-load-mymaxx {
        width: 230px;
    }
}
@media (min-width: 295px) and (max-width: 339px) {
    .logo-load-mymaxx {
        width: 255px;
    }
}
@media (min-width: 340px) and (max-width: 367px) {
    .logo-load-mymaxx {
        width: 275px;
    }
}




.btn-menu-back {
    box-shadow: 0px 3px 6px #C5C5C528;
    width: 38px;
    height: 38px !important;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 0px solid #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0 0;
}
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {

        border:0px solid #ffffff;
        box-shadow:none;
    }

p,a {
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7em;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
::placeholder {
    color: #0095da;
    opacity: 1;
}
input {
    color: #0095da !important;
}
.navbar {
    /*padding: 15px 15px;*/
    border: none;
    border-radius: 0;
    padding: 15px 0rem;
}
.center-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: auto;
    margin: 0;
}
.navbar-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    padding-top: 15px;
    padding-bottom: 15px;
    align-items: center;
}
.sub-navbar-top {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding-top: 15px;
    padding-bottom: 15px;
    align-items: center;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

#sidebar {
    width: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    z-index: 999;
    background: #ffffff;
    color:  #000000;
    transition: all 0.3s;
    /*overflow-y: auto;*/
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

    #sidebar.active {
        left: 0;
    }

/* Sidebar controls container */
.sidebar-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    z-index: 1000;
}

#dismiss, #sidebarPin {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #ffffff;
    color: #0095da;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#dismiss:hover, #sidebarPin:hover {
    background: #f0f8ff;
    transform: scale(1.05);
}

/* Pin button active state */
#sidebarPin.pinned {
    background: #0095da;
    color: #ffffff;
}

#sidebarPin.pinned:hover {
    background: #007bb8;
}

/* Locked sidebar state */
#sidebar.locked {
    position: fixed;
    left: 0 !important;
    z-index: 998;
}

/* Hide dismiss button when locked */
#sidebar.locked #dismiss {
    display: none;
}

/* Adjust main content when sidebar is locked */
body.sidebar-locked {
    margin-left: 250px;
    transition: margin-left 0.3s;
}

/* Responsive adjustments for sidebar-locked at different screen sizes */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    body.sidebar-locked {
        margin-left: 300px; /* Adjust for medium screens like 1360px */
    }
}

@media only screen and (min-width: 1400px) {
    body.sidebar-locked {
        margin-left: 320px; /* Adjust for larger screens */
    }
}

/* Remove duplicate dismiss styling - already handled above */
    transition: all 0.3s;
    border-radius: 1rem;
}

    #dismiss:hover {
        background: #ffffff;
        color: #0095da;
    }
.logo-mymaxx2 {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

    .overlay.active {
        display: block;
        opacity: 1;
    }

#sidebar .sidebar-header {
    padding: 10px;
    background: #bcdef1;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color:  #000000;
    padding: 10px;
}

    #sidebar ul li a:hover {
        color:  #000000;
        background: #fff;
    }

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color:  #000000;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    color:  #000000;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color:  #000000 !important;
}

#content {
    transition: all 0.3s;
    position: initial;
    top: 0;
    right: 0;
}

.menu-flex-space {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-list-menu {
    height: 40px;
    border-radius: 0;
    padding-left: 0px;
    background-color: #ffffff !important;
    border: 0px solid #ffffff;
    color:  #000000;
    display: flex;
    align-items: center;
}
    .btn-list-menu:hover, .list-hover:hover {
        background-color: #f8f9fa !important;
    }
.btn-lists-menu {
    border-radius: 0;
    padding-left: 30px;
    background-color: #ffffff !important;
    border: 0px solid #ffffff;
    color:  #000000;
    height: 40px;
    display: flex;
    align-items: center;
}

    .btn-lists-menu:hover {
        background-color: #f8f9fa !important;
    }
.btn-menu p {
    color:  #000000;
    
}
.list-menu-group li {
    border: 0px solid rgba(0, 0, 0, .125);
}
.list-group-item {
    border: 0px solid #ffffff;
    border-bottom: 0px solid rgba(0,0,0,.125);
    margin-bottom: 0px;
}
.list-group-item:focus {
    border: 0px solid #ffffff;
    border-bottom: 0px solid rgba(0,0,0,.125);
}
.list-group-language.list-group-item:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
.list-group-language.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.list-group-language:hover {
    border-bottom: 0px solid rgba(0,0,0,.125);
    background-color: #ffffff !important;
}
.list-group-language:nth-child(even):not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
    border-top: 1px solid rgba(0,0,0,.125) !important;
}

.list-menu-group-item .list-group-item {
    padding: 5px;
    border: 0px solid rgba(0, 0, 0, .125) !important;
}

.btn-logout {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #0095da;
    border-radius: 8px;
    color: #0095da;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .btn-logout:hover, .btn-logout:focus {
        color: #0095da !important;
        border: 1px solid #0095da !important;
    }

.set-btn-logout p {
    font-size: 12px;
}
.text-version {
    font-size:12px;
}

.wrapper .mCSB_container {
    height: 100% !important;
}
.title-flex-user {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.title-flex-user-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mCustomScrollBox {
    height: auto !important;
}
.set-btn-logout {
    /*padding: 20px 0 0 10px;
    bottom: 10px;
    position: fixed;*/
    bottom: 10px;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow-y:auto;
    /*position: -webkit-sticky;*/ /* Safari */
}
.ios-set-btn-logout {
    /* padding: 20px 0 0 10px;*/
    bottom: 10px;
    /* top:0;*/
    position: absolute;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}
.list-group-item i {
    color: #0095da;
}

.user-status-on {
    color: #0096DA;
}

.user-status-off {
    color: #000000;
}

.syncbox {
    text-align: end;
}
/*.user-status-on {
    background: #0096DA;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}
.user-status-off {
    background: #808080;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}*/
.menu-color {
    color: #0095da;
}

@media only screen and (min-width: 1200px) {
    #sidebar {
        width: 15%;
        min-width: 300px;
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        z-index: 999;
        background: #ffffff;
        color: #000000;
        transition: all 0.3s;
        /*overflow-y: auto;*/
    }
}
/*@media only screen and (min-height: 0px) and (max-height: 720px) {*/
@media only screen and (min-height: 0px) and (max-height: 500px) {
    #sidebar {
        overflow-y: auto;
    }
    .set-btn-logout {
        /* padding: 20px 0 0 10px;*/
        bottom: 10px;
        /* margin-top: 0; */
        position: initial;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        overflow-y:auto !important;
    }

    .ios-set-btn-logout {
       /* padding: 20px 0 0 10px;*/
        /*bottom: 100px;*/
        /* top:0;*/
        position: initial;
    }
}
@media only screen and (min-height: 501px) and (max-height: 650px) {
    .set-btn-logout {
       /* padding: 20px 0 0 10px;*/
        bottom: 10px;
        /* margin-top: 0; */
        position: absolute;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
    }
    .ios-set-btn-logout {
        padding: 20px 0 0 10px;
        /*bottom: 100px;*/
        /* top:0;*/
        position: initial;
    }
}

@media only screen and (min-height: 651px) and (min-width: 1200px) {
    .mCustomScrollBox {
        height: 100% !important;
    }

    .set-btn-logout {
        position: absolute;
        padding: 0px 0 0 0px;
        bottom: 10px;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }
}
@media only screen and (max-height: 651px) and (min-width: 1200px) {
/*    .set-btn-logout {
        margin-top: 70%;
        position: sticky;
        padding: 0px 0 0 10px;
        bottom: 20px;
        left: 25%;
        margin-top: -5%;
        position: sticky;
        padding: 0px 0 0 0px;
        display: flex;
         bottom: 20px; 
        width: 100%;
        height: 100%;
         left: 25%; 
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }*/

    .mCustomScrollBox {
        height: auto !important;
    }
}
@media only screen and (min-height: 0px) and (max-height: 500px) and (min-width: 1200px) {
    .set-btn-logout {
        margin-top: 5%;
        position: initial;
        width: auto;
        height: auto;
    }

    .mCustomScrollBox {
        height: auto !important;
    }
}

/*Login*/
.body-login {
    height: 100vh;
    
}
.bg-color-white{
    background-color: #FFFFFF !important;
}
.body-menu-login {
    /*display:flex;*/
}
.set-login {
    display: flex;
    justify-content: flex-end;
    grid-column-gap: 10px;
    padding:10px;

}
.text-align-end {
    text-align: center;
}
.position-end {
    position:fixed;
    bottom:20px;
}
.position-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.color-white {
    color:white;
}
.color-orange {
    color: #0095da;
}
.btn-language {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0095da;
    width: 38px;
    height: 38px !important;
}
.btn-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0095da;
    width: 38px;
    height: 38px !important;
}
input,select,.btn {
    height:40px ;
}

/* Small buttons for OCR table actions */
.btn-sm-32 {
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Add button with right margin */
.btn-add-item {
    margin-right: 8px !important;
}
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #0095da;
    color: white;
    height: 40px;
}
    .btn-login:hover, .btn-login:focus {
        background-color: #0095da;
        color: white;
    }
.span-input-login {
    background-color: white;
    border: 1px solid #ffffff;
    border-radius: 8px;
}
    .span-input-login:focus {
        border-right: 1px solid #ffffff !important;
        outline: 0;
    }
.input-login {
    border-left: 0;
    color: #0095da;
    border: 1px solid #ffffff;
    border-radius: 8px;
}
    .input-login::placeholder {
        color: #0095da;
        opacity: 1;
    }
    .input-login:focus {
        box-shadow: none !important;
        outline: 0;
        border: 1px solid #ffffff;
        border-left: 1px solid #ffffff !important;
    }
.input-login-icon {
    /* display: flex; */
    position: absolute;
    /* height: 16px; */
    font-size: 5px;
    left: 35px;
    top: 10px;
    /* border: 1px solid #E7E7E7; */
    /* opacity: 1; */
    height: 20px;
    color: #E7E7E7;
    /* align-items: center; */
    background: #E7E7E7;
}

@media only screen and (min-height: 0px) and (max-height: 540px) {
    .position-center {
        position: static;
        top: 50%;
        left: 50%;
        transform: none;
    }

    .position-end {
        margin-top: 50px;
        position: static;
        bottom: 0px;
    }
}
input.input-login {
   color: #0095da !important;
}
.flex-item-radio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
    .flex-item-radio:focus {
        border:1px solid #ffffff;
        outline:0;
    }
.title-flex-center {
    display: flex;
    justify-content: center;
    height:32px;
}
.a-position-next {
     position:absolute;
}
.body-btn-fixed-bottom {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-save-language {
    color: white;
    background-color: #0095da;
    width: 100%;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .btn-save-language:hover, .btn-save-language:focus {
        color: white;
    }


@media only screen and (min-height: 0px) and (max-height: 310px) {
    .body-btn-fixed-bottom {
        position: initial;
        bottom: initial;
        left: initial;
        transform: none;
        padding: initial;
        margin-top: 2rem;
    }
}
.item-radio-language {
    display:none;
}
.btn-a {
    width: 38px;
    height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center {
    display: flex;
    align-items: center;
}
.flex-center-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.input-default {
    color: #0095da !important;
}

    .input-default ::placeholder {
        color: #0095da;
        opacity: 1;
    }

    .input-default:focus {
        box-shadow: none !important;
        outline: 0;
        border: 1px solid #ced4da;
        border-left: 1px solid #ced4da !important;
    }

.fw-4 {
    font-weight:400 !important;
}

input::placeholder, textarea::placeholder {
    color: #9ccdf1 !important;
}
.radius-8 {
    border-radius:8px;
}
.radius-0 {
    border-radius: 0px;
}
.radius-top-8 {
    border-radius: 8px 8px 0 0 ;
}
.fs-20 {
    font-size:20px;
}
.nolink {
    -webkit-touch-callout: none !important; /* ป้องกันการแสดงเมนูการโทร */
    -webkit-user-select: none !important; /* ป้องกันการเลือก */
    -webkit-text-decoration: none !important; /* ป้องกันการแสดงขีดเส้นใต้ */
    text-decoration: none !important; /* ป้องกันการแสดงขีดเส้นใต้ */
    pointer-events: none !important; /* ป้องกันการคลิก */
}
.item-col {
   /* display: flex;
    justify-content: center;*/
    height: 215px;
    margin-bottom:20px;
    
}
.item-card {
    min-width: 164px;
   /* height: 123px;*/
    border-radius: 8px 8px 8px 8px;
}
.item-bard {
    min-width: 164px;
    height: 100px;
    background-color: #FFFFFF;
    border-radius: 0px 0px 8px 8px;
}
.item-img {
    min-width: 164px;
    height: 123px;
    /*height: 50%;*/
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 8px 0px 0px;
}
.item-menu-bar {
    min-width: 100px;
    height: 40px;
    /*height: 50%;*/
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 8px 8px 8px;
}
.item-menu-bar-btn {
    min-width: 40px;
    height: 40px;
    /*height: 50%;*/
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 8px 8px 8px;
}

.grid-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    /*grid-row-gap: 10px;*/
}
.weight-500 {
    font-weight:500;
}
.container {
    --container-width: 100%; /* Default to 100% */
    /*--padding-horizontal: 15px;*/
}

@media (min-width: 0px) and (max-width: 319px) {
    .container {
        --container-width: 100%;
        --padding-horizontal: 15px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        /*grid-column-gap: 10px;
        grid-row-gap: 20px;*/
    }
    

}
@media (min-width: 318px) and (max-width: 462px) {
    .container {
        /*--container-width: 367px;*/
        --padding-horizontal: 15px;
    }

    .grid-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
    }

    .item-card {
        min-width: 139px;
    }

    .item-bard {
        min-width: 139px;
    }

    .item-img {
        min-width: 139px;
    }
   
}
@media (min-width: 363px) and (max-width: 450px) {
    .container {
       /* --container-width: 420px;
        --padding-horizontal: 0px;*/
    }

    .grid-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
    }

    /*.item-card {
        min-width: 139px;
    }

    .item-bard {
        min-width: 139px;
    }

    .item-img {
        min-width: 139px;
    }*/
}
@media (min-width: 451px) and (max-width: 499px) {
    .container {
       /* --container-width: 450px;*/
        --padding-horizontal: 15px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        
    }

    /*.item-card {
        min-width: 139px;
    }

    .item-bard {
        min-width: 139px;
    }

    .item-img {
        min-width: 139px;
    }*/
}
@media (min-width: 500px) and (max-width: 575px) {
    .container {
        --padding-horizontal: 15px;
        --container-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .grid-item {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        /*grid-row-gap: 13px;*/
    }
    .item-card {
        min-width: 149px;
    }

    .item-bard {
        min-width: 149px;
    }

    .item-img {
        min-width: 149px;
    }
}
@media (min-width: 576px) {
    .container {
        --container-width: 540px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        
    }
}
@media (min-width: 768px) {
    .container {
        --container-width: 720px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
       
    }
}
@media (min-width: 992px) {
    .container {
        --container-width: 960px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
       
    }
}
@media (min-width: 1200px) {
    .container {
        --container-width: 1140px;
    }
    .grid-item {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
       
    }
}
.p-item {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; 
    overflow: hidden !important;
    height:55px;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    margin-left: .4em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23404040'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    cursor: pointer;
}
.set-search {
    border-radius: 8px;
    box-shadow: -5px 5px 10px #C5C5C528;
    border: 0px solid #ced4da;
}
input[type=search].set-search {
    box-sizing: border-box;
    background-color: #FFFFFF;
    background-position: 13px 12px;
    background-repeat: no-repeat;
    padding-left: 40px;
    padding-right: 5px;
    background-size: 16px 16px; /* Adjust the size as needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23404040' class='bi bi-search' viewBox='0 0 16 16'%3E %3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E %3C/svg%3E");
}
.input-group-search {
    background-color: #FFFFFF;
    border: 0px solid #ced4da;
    border-radius: 0 8px 8px 0;
    padding: 8px;
    width:40px;
    color: #0095da;
    box-shadow: 5px 0 10px #C5C5C528;
}
:root {
    --loading-grey: #ededed;
}
.content {
    padding: 2rem 1.8rem;
}

h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.description {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description {
    background-color: var(--loading-grey) ;
    background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 1.6rem;
    border-radius: 4px;
    animation-delay: .05s;
}

.loading .description {
    position: absolute;
    right: 10px;
    bottom: 7px;
    min-height: 1.6rem;
    width: 60px;
    border-radius: 4px;
    animation-delay: .06s;
}

.loading .w-80px {
    width:80px;
}

.loading .w-120px {
    width:120px;
}

.loading .h-text-item {
    min-height: 22.8px!important;
}

.item-img-80-60 {
    min-width: 80px;
    width: 80px;
    height: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 8px 0px 0px;
}
.loading .grid-loading-text {
    display: grid;
    grid-row-gap: 3.71px;
}


.none-item {
    display: none;
}
.set-text {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.set-text-number {
    display: flex;
}
.btn-modal-all {
    background-color: #0095da;
    color: #FFFFFF;
    border-radius: 8px;
    outline: 0;
    border: 0px solid transparent;
}
.btn-tab-menu {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    color: #0095da;
    border: 1px solid #0095da;
}
    .btn-tab-menu:focus {
        background-color: #FFFFFF ;
        color: #0095da ;
        border: 1px solid #0095da !important;
    }
    .nav-pills .nav-link.btn-tab-menu.active, .nav-pills .show > .nav-link.btn-tab-menu {
        color: #FFFFFF;
        background-color: #0095da;
        border: 1px solid #0095da;
    }
.set-list-menus {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.wrapper-menu::-webkit-scrollbar {
    width: 0;
    display: none;
}
.wrapper-menu {
    max-height: auto ;
    display: flex;
    overflow-x: overlay ;
    flex-wrap: nowrap;
}
.flex-center-column {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.grid-column-10 {
    grid-column-gap: 10px;
}
.flex-wrap-justify-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.flex-column {
    display: flex;
    flex-direction: column;
} 
.set-row-menu {
    display: flex;
    flex-wrap: nowrap;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.grid-10 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.grid-1 {
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}
.horizontal-scroll:active {
    cursor: grabbing; /* Change cursor when dragging */
}
.margin-top-20 {
    margin-top:-23px;
}
.modal-body-color {
    background-color: #F7F7F7;
}
.center-header {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.set-btn-close {
    outline:0;
    margin: initial;
}
    .set-btn-close:focus {
        outline:0;
        border:0px solid #ffffff;
    }
.text-small-color {
    color: #808080;
}
.set-modal {
    border-radius: 8px;
}
.set-modal-body {
    border-radius: 0px 0px 8px 8px;
}
.modal-title {
    position:absolute;
}
.set-overflow-group-product {
    /*overflow-y:auto;
    min-height:80vh;*/
}
.mb-10 {
    margin-bottom:10px;
}
.mt-10 {
    margin-top: 10px;
}
.mb-20 {
    margin-bottom: 5rem;
}
.my-10 {
    margin-bottom: 10px;
    margin-top: 10px;
}
.flex-text-head {
    position: absolute;
    /*position: fixed;
    top: 28px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;*/
}
.img-product {
    min-width: 164px;
    height: 259px;
    background-color: #ededed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}
.flex-center-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-center-space-between-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex-center-space-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.body-bg-color {
    background-color: #FFFFFF;
}
.color-grey {
    color: #808080;
}
.list-item-grid {
    display: flex;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    flex-wrap: wrap;
    flex-direction: row;
}
.flex-justify-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-radio-item {
    z-index: 1;
    color: #0095da;
    background-color:#ffffff;
    border: 1px solid #0095da;
}
input[type="radio"]:checked + .btn-radio-item {
    background-color: #0095da !important;
    color: #FFFFFF !important;
}
.btn-add-item {
    width: 100%;
    color: #FFFFFF;
    background-color: #0095da;
}
.input-product-price {
    border-left: 0;
    color: #0095da;
    border: 1px solid #9ccdf1;
    border-radius: 8px;
    height:40px;
    text-align:right;
}

    .input-product-price::placeholder {
        color: #0095da;
        opacity: 1;
    }

    .input-product-price:focus {
        box-shadow: none !important;
        outline: 0;
        border: 1px solid #9ccdf1;
        border-left: 1px solid #9ccdf1 !important;
    }


.btn-dash {
    font-size: 24px;
    color: #0095da;
    background-color: #FFFFFF;
    border-right: 1px solid #FFFFFF !important;
    border-radius: 8px 0px 0px 8px;
    padding: 5px;
}
    .btn-dash:focus {
        border: 1px solid #D6D6D6 !important;
        border-right: 1px solid #FFFFFF !important;
    }
    .btn-dash:disabled {
        opacity:1;
    }
    .btn-dash:disabled .bi.bi-dash {
        opacity: 0.65;
    }
.btn-list-dash {
    padding: 5px;
    height: 32px;
}
.btn-plus {
    font-size: 24px;
    color: #0095da;
    background-color: #FFFFFF;
    border-left: 1px solid #FFFFFF !important;
    border-radius: 0px 8px 8px 0px;
    padding: 5px;
}
    .btn-plus:focus {
        border: 1px solid #D6D6D6 !important;
        border-left: 1px solid #FFFFFF !important;
    }

.btn-list-plus{
    padding:5px;
    height:32px;
}
input[type="number"].input-item-number {
    color: #000000;
    text-align: center;
}
input[type=number] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.input-item-number {
    border-left: 0;
    color: #000000 !important;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    border-left: 1px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
}

    .input-item-number::placeholder {
        color: #000000;
        opacity: 1;
    }

    .input-item-number:focus {
        box-shadow: none !important;
        outline: 0;
        border: 1px solid #D6D6D6;
        border-left: 1px solid #FFFFFF !important;
        border-right: 1px solid #FFFFFF !important;
    }
.input-item-number.input-list-number{
    height:32px;
    width:52px;
}
.hr-item {
    background-color: #F7F7F7;
    padding: 1px;
}
.margin-none {
    margin: initial;
}
.btn-cash {
    height: 32px;
    padding: 5px;
    background-color: #FFFFFF;
    color: #0095da;
    border: 1px solid #0095da;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size:13px;
}
    .btn-cash:focus {
        border: 1px solid #0095da !important;
        outline: 0;
      
    }

.null-list-items {
    position: fixed; /* Stay fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.flex-end-menu {
    display: flex;
}
.flex-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}
.btn-chrck-out {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border: 1px solid #0095da;
    background-color: #0095da;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 8px;
    height: 40px;
}
    .btn-chrck-out:focus {
        border: 1px solid #0095da !important;
        outline: 0;
    }
    .btn-chrck-out:disabled {
        opacity: 0.65;
        border: 1px solid #0095da;
        background-color: #FFFFFF;
        color: #0095da;
    }


.btn-delete {
    border: 1px solid #D6D6D6;
    background-color:#FFFFFF;
}
.btn-delete:focus {
    border: 1px solid #D6D6D6 !important;
    background-color: #FFFFFF !important;
}
.card-body-default {
    border-radius: 8px;
}
.btn-edit {
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid #D6D6D6;
    color: #0095da;
}
.btn-percent {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #D6D6D6;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 8px;
}
.btn-pencil-square {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #D6D6D6;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 8px;
}
.btn-list-delete {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #D6D6D6;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 8px;
}
.btn-edit-list {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #D6D6D6;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 8px;
}
    .btn-list-delete:disabled {
        opacity: 0.65;
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #D6D6D6;
    }
    .btn-percent:focus, .btn-pencil-square:focus, .btn-list-delete:focus, .btn-edit-list:focus {
        border: 1px solid #D6D6D6 !important;
        outline: 0;
    }

.set-listimg {
    width: 80px;
    min-height: 60px;
    border-radius: 4px;
}
.set-list-text{
    width:100%;
}
.flex-center-text-head {
    display: flex;
}
.hw32 {
    height: 32px;
    width: 32px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.border-rd-8 {
    border-radius: 8px;
}
.btn-default-orange {
    background-color: #0095da;
    color: #ffffff;
    border-radius: 8px;

}
.btn-default-orange-w {
    background-color: #ffffff;
    color: #0095da;
    border-radius: 8px;
    border: 1px solid #0095da;
}
.btn-default-orange-w:focus {
    border: 1px solid #0095da !important;
}
.btn-default-orange-w-border-d {
    background-color: #ffffff;
    color: #0095da;
    border-radius: 8px;
    border: 1px solid #D6D6D6;
}

    .btn-default-orange-w-border-d:focus {
        border: 1px solid #D6D6D6 !important;
    }
input[type="number"].input-default-number {
    color: #000000;
    text-align: right;
}

input[type="text"].input-default-number {
    color: #000000;
    text-align: right;
}
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230095da' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230095DA' class='bi bi-calendar4' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3E%3C/svg%3E") !important;
}
.set-i-radio {
    position:absolute;
    right:0px;
}

.button-container {
    opacity: 0;
    display: none;
    transition: opacity .3s ease-in-out;
}
.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.show-button .button-container {
    opacity: 1;
    display: block;
}
.btn-edit-item {
    height: 100%;
    background-color: #FDCDB2;
    width: 64px;
    color: #0095da;
}
.flex-body-img-product {
    width: 100% ;
    display: flex;
    justify-content: center;
}
.no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard */
}
.product-link {
    cursor: pointer; /* Added to change cursor to pointer */
}
.grid-12 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
@media (min-width: 1200px) {
    .grid-xl-6 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
}
.border-rd-4 {
    border-radius: 4px;
}
.text-clamp-1 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important; /* Number of lines displayed before it truncate */
    overflow: hidden !important;
}
.btn-add-product {
    background-color: #0095da;
    color: #ffffff;
    display: flex;
    border-radius: 8px;
    align-items: center;
    height: 38px;
    outline: 0;
    border: 0px solid transparent;
}
    .btn-add-product:focus {
        outline: 0;
        border: 0px solid transparent;
    }

.img-background {
    background-color: #D6D6D6;
}
.set-img-new-item {
    min-height:259px;
    height:259px;
    min-width:259px;
}
.btn-add-img {
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #0095da;
    height: 38px;
    padding: 5px;
    width: 190px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    position: absolute;
}
    .btn-add-img:focus {
        border: 1px solid #0095da !important;
        outline:0;
    }

.btn-remove-img {
    background-color: #ffffff;
    color: #808080;
    border: 1px solid #808080;
    height: 38px;
    padding: 5px;
    width: 190px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    position: absolute;
}
    .btn-remove-img:focus {
        border: 1px solid #808080 !important;
        outline: 0;
    }

.position-new-img {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-clear-item {
    border: 1px solid #D6D6D6;
    background: #ffffff;
    color: #404040;
    height: 38px;
}
    .btn-clear-item:focus {
        border: 1px solid #D6D6D6 !important;
    }
    .btn-clear-item:disabled {
        color: #D6D6D6;
        border: 1px solid #D6D6D6;
    }
.btn-chevron {
    padding:0px;
    background-color: #ffffff;
    color: #0095da;
}
    .btn-chevron:focus {
        border: 0px solid #ffffff !important;
    }
.cart-header-sub {
    background-color: #ffffff;
    border: 0px solid #ffffff;
    cursor: pointer;
}
@media (min-width: 0px) and (max-width: 308px) {
    .cart-center-item.flex-center-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap
    }
    .set-group-prepend {
        width:100%;
    }
}
/*.cart-sub-item {
    height:auto !important;
}*/

#ModalEditPercentItem .row.scrollbar-modal {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.fw-5 {
    font-weight: 500;
}
.receipt-mb-10 {
    margin-bottom: 10px;
}
.grid-column-gap10{
    grid-column-gap: 10px;
}
.receipt-flex-between-noweap {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}
.receipt-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.receipt-flex-start-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.hr-receipt {
    border-top: 1px dashed #707070;
    margin-top:10px;
    margin-bottom:10px;
}
.hr-checkout {
    border-top: 1px solid #707070;
    margin-top: 10px;
    margin-bottom: 10px;
}
.receipt-list-flex-between-start-nowrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.receipt-itemname {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-wrap: wrap;
}

.receipt-flex-center-nowrap {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}
.receipt-flex {
    display: flex;
}
.receipt-w70 {
    width:100%;
}
.receipt-w10 {
    /*width: 10%;*/
    width: 60px;
    min-width:60px;
}
.receipt-w-trans {
    
    min-width: 120px;
}
.receipt {
    ;
    width: 350px;
    min-width: 300px;
}
    .receipt p, .receipt-80 p, .receipt-58 p {
        font-family: Tahoma, "Trebuchet MS", sans-serif !important
    }
.receipt-80 {
   
    width: 520px;
}
    .receipt-80 p.fw-4 {
        font-size: 28px;
        font-weight: 400 !important;
    }
    .receipt-80 .line-height20-80 {
        line-height: 40px;
    }
.receipt-58 {
   
    width: 384px;
}

    .receipt-58 p.fw-4 {
        font-size: 26px;
        font-weight: 400 !important;
    }

    .receipt-58 .line-height20-58 {
        line-height: 35px;
    }
    .receipt-58 p, .receipt-80 p {
        font-size: 22px;
        line-height: 1.5em !important;
        font-weight: 400;
    }

    .receipt-58 .txt-share {
        font-size: 26px !important;
    }

    .receipt.receipt-58 .txt-share {
        font-size: 18px !important;
    }

    .receipt-80 .txt-share {
        font-size: 26px !important;
    }

    .receipt.receipt-80 .txt-share {
        font-size: 18px !important;
    }


    .body-receipt {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
    }
.receipt p{
    font-size:14px;

}
.line-height20 {
    line-height: 20px;
}

.set-print-txt {
    z-index: -9999;
    position: fixed;
    top: 0;
    opacity: 0.0;
}
.receipt-card {
    padding:15px;
}
.receipt-bg-58 {
    width: 384px;
}
.receipt-bg-80 {
    width: 520px;
    /*height: 625px;*/
    position: initial;
    border: 0px solid #000000;
    background-color: #ffffff;
}
.receipt-bg-80 p {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: #000000;
    margin: 0;
}
.btn-receipt {
    height: 64px;
    width: 80px;
    min-width: 80px;
    background-color: #ffffff;
    border: 1px solid #9ccdf1;
    color: #000000;
}
    .btn-receipt:focus {
        border: 1px solid #9ccdf1 !important;
    }
    .btn-receipt p {
        font-size: 12px;
    }
.text-btn-receipt {
    height:13px;
}
.flex-center-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.scrollbar-modal::-webkit-scrollbar {
    width: 0px;
}
.scrollbar-modal {
    overflow-y: auto;
    max-height: calc(75vh - 8.5rem);
    min-height: calc(75vh - 8.5rem);
}

.scrollbar-modal-modal-product::-webkit-scrollbar {
    width: 0px;
}

.scrollbar-modal-modal-product {
    overflow-y: auto;
    max-height: calc(75vh - 2rem);
    min-height: calc(75vh - 40rem);
}


.flex-null-modal-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mb-receipt {
    margin-bottom:10rem;
}
.checkout-receipt {
    width: 350px;
    min-width: 280px;
}
.body-footer-end {
    min-width: calc(100vw - 1.5rem);
    /*min-width: 300px;*/
    position: fixed;
    bottom: 0px;
}
/*@media (min-width: 318px) and (max-width: 362px) {
    .body-footer-end {
        max-width: 367px;
    }
}*/
@media (min-width: 332px) and (max-width: 363px) {
    .body-footer-end {
        min-width: 91%;
        /*padding-right: 10px;
        padding-left: 10px;*/
    }
}

@media (min-width: 363px) and (max-width: 450px) {
    .body-footer-end {
        min-width: 380px;
        /*padding-right: 10px;
        padding-left: 10px;*/
    }
}
@media (min-width: 451px) and (max-width: 499px) {
    .body-footer-end {
        min-width: 430px;
        /*padding-right: 10px;
        padding-left: 10px;*/
    }
}
/*@media (min-width: 500px) and (max-width: 575px) {
    .body-footer-end {
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}*/

@media (min-width: 576px) {
    .body-footer-end {
        min-width: 540px;
    }
} 
@media (min-width: 768px) {
    .body-footer-end {
        min-width: 720px;
    }
}

@media (min-width: 992px) {
    .body-footer-end {
        min-width: 960px;
    }
}

@media (min-width: 1200px) {
    .body-footer-end {
        min-width: 1140px;
    }
}
.set-sublist-text {
    display:flex;
}

.cart-list-flex-between-start-nowrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}


.receipt-flex {
    display: flex;
}

.cart-w70 {
    width: 75%;
}

.cart-w10 {
    width: 10%;
}
.btn-checkout {
    height: 40px;
    width: 40px;
    background-color: #ffffff;
    border: 1px solid #9ccdf1;
    color: #000000;
}
.flex-center-justify-align-nowrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}
.h-52 {
    height: 52px !important;
}
.flip-icon {
    transform: rotate(180deg);
}
.btn-payment {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 64px;
    min-width: 80px;
    width: 100%;
    flex-wrap: nowrap;
    background-color: #FFFFFF;
    color: #808080;
    border: 1px solid #808080;
}

.flex-column-payment {
    display: flex;
    flex-direction: column;
}

.btn.btn-payment:focus {
    outline: 0;
    border: 1px solid #808080;
}

.btn-bills {
    z-index: 9999;
}
.card-onclick {
    z-index: 999;
}
.set-card-item-saleshistory {
position:initial
}
.set-btn-gray-saleshistory {
    position:absolute;
}


.nav-pills .nav-link.btn-payment.active, .nav-pills .show > .nav-link {
    color: #0095da;
    border: 1px solid #0095da;
    background-color: #FFFFFF;
}
.nav-payment {
    flex-wrap: nowrap;
}
@media (min-width: 0px) and (max-width: 290px) {
    .nav-payment {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .btn-payment{
        max-width: initial ;
        width: 100%;
    }
}
.h-cash {
    min-height:300px;
}
.p-payment-cash {
    text-align: right;
    color: #9ccdf1;
    border-radius: 8px;
    border: 1px solid #D6D6D6;
}
.p-payment-change {
    text-align: right;
    color: #404040;
    border-radius: 8px;
    border: 1px solid #D6D6D6;
}
.scrollbar-list-items::-webkit-scrollbar {
    width: 0px;
}

.scrollbar-list-items {
    overflow-y: auto;
    max-height: calc(75vh - 3.5rem);
    min-height: calc(75vh - 3.5rem);
}

.scrollbar-list-items-full {
    overflow-y: auto;
    max-height: calc(75vh - 3.5rem);
    min-height: calc(75vh - 3.5rem);
}



.fixed-bottom-wrapper {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.fixed-bottom {
    /*background-color: #F7F7F7;*/
    background-color: #F7F7F7;
    /* padding: 10px;*/
    height: 60px;
    display: flex;
    text-align: center;
    box-sizing: border-box;
    width: var(--container-width);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-horizontal);
    padding-left: var(--padding-horizontal);
    align-items: center;
    justify-content: center;
}
.fixed-bottom-receipt {
    /*background-color: #F7F7F7;*/
    background-color: #F7F7F7;
    /* padding: 10px;*/
    height: 80px;
    display: flex;
    text-align: center;
    box-sizing: border-box;
    width: var(--container-width);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-horizontal);
    padding-left: var(--padding-horizontal);
    align-items: center;
    justify-content: center;
}
.img-syncpromaxx {
    width:30px;
    height:30px;
}
.img-void {
    width: 30px;
    height: 30px;
}


.flex-number-btn-payment {
    margin-top: 10px;
    margin-bottom: 10px;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.btn-number-payment {
    border-radius: 16px;
    color: #0095da;
    background-color: #ffffff;
    border: 1px solid #D6D6D6;
    width:56px;
    height:40px;
    padding:3px;
  
}
.btn-number-payment-cash {
    border-radius: .25rem;
    color: #000000 !important;
    background-color: #ffffff;
    border: 1px solid #0095da;
    width: 40px;
    height: 40px;
    padding: 3px;
}
.btn.btn-number-payment:focus, .btn-number-payment-cash:focus {
    border: 1px solid #D6D6D6;
}
    .btn-number-payment p {
        font-size: 14px;
    }
.border-payment {
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    margin-bottom:4rem;
}
.border-radius-8 {
    border-radius: 8px;
}
.flex-direction-column {
    flex-direction: column;
}
@media (min-height: 0px) and (max-height: 414px) {
    .mb-sm-20 {
        margin-bottom:4rem;
    }
}
@media (min-width: 0px) and (max-width: 304px) {
    .flex-number-btn-payment {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
@media (min-width: 305px) {
    .flex-number-btn-payment {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
@media (min-width: 360px) {
    .flex-number-btn-payment {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
@media (min-width: 767px) {
    .flex-number-btn-payment {
        grid-column-gap: 10px;
        grid-row-gap: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.btn-listmenu-search {
    border:1px solid #0095da;
    background-color:#FFFFFF;
    color:#0095da;

}
    .btn-listmenu-search:focus {
        border: 1px solid #0095da !important;
    }
.set-listsearch {
    display: flex;
}


    .set-listsearch label, .set-listsearch input  {
        height: initial;
    }

.form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

    .form-check-input.radio-search + .form-check-label::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        height: 16px;
        width: 16px;
        background-color: #FFFFFF;
        border: 1px solid #0095da;
        border-radius: 50%;
    }

   /* .form-check-input.radio-search:hover + .form-check-label::before {
        background-color: #0095da;
    }*/

    .form-check-input.radio-search:checked + .form-check-label::before {
        background-color: #FFFFFF;
         border: 1px solid #0095da;
    }

    .form-check-input.radio-search + .form-check-label::after {
        content: "";
        position: absolute;
        display: none;
    }

    .form-check-input.radio-search:checked + .form-check-label::after {
        display: block;
    }

    .form-check-input.radio-search + .form-check-label::after {
        top: 6px;
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #0095da;
        background: #0095da;
    }
.btn-work-search {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background-color: #FFFFFF;
    font-size: 14px;
    width: 72px;
    border: 1px solid #0095da;
    color: #0095da;
    border-radius: 4px;
}
.btn-work-search:focus {
    border: 1px solid #0095da !important;
}
.btn-work-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background-color: #F7F7F7;
    border: 1px solid #D6D6D6;
    font-size: 14px;
    width: 72px;
    border-radius: 4px;
    color: #000000;
}
    .btn-work-clear:focus {
        border: 1px solid #D6D6D6 !important;
    }
#cardsearch {
    display: none;
    opacity: 0;
    transition: opacity 1s ease;
}

    #cardsearch.show {
        display: block;
        opacity: 1;
    }
.btn-warning-info {
    background-color: #ffffff;
    color: #0095da;
    border: 2px solid #0095da;
    border-radius: 8px;
    height: 38px;
    width: 120px;
}
.btn-clear-info {
    border: 2px solid #D6D6D6;
    background: #ffffff;
    color: #404040;
    height: 38px;
    border-radius: 8px;
    width: 120px;
}
    .btn-clear-info:focus {
        border: 2px solid #D6D6D6!important;
    }
    .btn-warning-info:focus {
        border: 2px solid #0095da !important;
    } 
.grid-col-gap10 {
    display:flex;
    grid-column-gap: 10px;
}

.set-btn-end-confirm {
/*    position: absolute;
    bottom: 10px;
    max-width: 1140px;
    width: -webkit-fill-available;*/
    padding-right: 0px;
}
.btn-confirm {
    background-color: #0095da;
    color:#FFFFFF;
    width:100%;
}
.flex-row-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.flex-direction-row {
    display: flex;
    flex-direction: row;

}
.flex-end-modal-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    grid-column-gap: 20px;
}
.flex-thia-qr-logo {
    width:100px;
    padding-top:10px;
}
.font-icon-payment {
    font:20px !important;
}
.head-thia-qr {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #133e67;
    justify-content: center;
    flex-wrap: nowrap;
    border-radius: 8px 8px 0 0;
    align-items: center;
}
.flex-thia-qr {
    height: 50px;
}
.btn-ok-modal {
    color: #0095da;
    border: 1px solid #0095da;
    background-color: #FFFFFF;
    border-radius: 8px;
    width: 124px;
    height: 40px;
}
    .btn-clear-modal:focus {
        border: 1px solid #0095da !important;
    }
.btn-clear-modal {
    color: #000000;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    width: 124px;
    height: 40px;
}
    .btn-clear-modal:focus {
        border: 1px solid #D6D6D6 !important;
    }
.btn-ok-modal-sync {
    color: #FFFFFF;
    border: 1px solid #0095da;
    background-color: #0095da;
    border-radius: 8px;
    width: 124px;
    height: 65px;
    font-size: 14px;
}
    .btn-ok-modal-sync:focus {
        border: 1px solid #0095da !important;
    }
.btn-ok-modal-nosync {
    color: #0095da;
    border: 1px solid #0095da;
    background-color: #FFFFFF;
    font-size: 14px;
    border-radius: 8px;
    width: 124px;
    height: 65px;
}
    .btn-ok-modal-nosync:focus {
        border: 1px solid #0095da!important;
    }
.flex-modal-head {
    display: flex;
    position: initial;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.set-p-modal-head {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 12%;
    left: 50%;
}
.close-i-modal {
    font-size: 16px;
    background-color: #FFFFFF;
    border: 0px solid rgba(0, 0, 0, .2);
}
.set-img-dateempty {
    width:228px;
    height:228px;
}

.flex-center-modal-null-item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.color-nulldate {
    color: #808080;
    font-size:16px;
}
.text-flex-center-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.set-w-id {
    min-width: 20px;
}
.set-w-tel {
    min-width: 20px;
}
.set-modal-loading-mymaxx {
    width: 70px;
    height: 70px;
}
.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
    .fade-in.show {
        opacity: 1;
    }

.scrollbar-modal-null {
    overflow-y: auto;
    max-height: calc(75vh - 8.5rem);
    min-height: calc(75vh - 8.5rem);
}
.scrollbar-modal-0 {
    overflow-y: auto;
    max-height: calc(75vh - 8.5rem);
    min-height: calc(75vh - 8.5rem);
}
.client-p-name{
    min-height:23.8px;
}
.border-bottom-detail {
    border-bottom-color: #F7F7F7;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.pt-10 {
    padding-top:10px;
}
.set-img-share {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    left: 0px;
    margin: auto;
}
.set-p-share {
    line-height: 15px;
    position: relative;
    top: -5px;
    left: 0px;
    margin: auto;
}

.set-img-printer {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    left: 0px;
    margin: auto;
}
.set-p-printer {
    line-height: 15px;
    position: relative;
    top: -5px;
    left: 0px;
    margin: auto;
}

.set-img-syncpromaxx {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    left: 0px;
    margin: auto;
}
.set-p-syncpromaxx {
    line-height: 15px;
    position: relative;
    top: -10px;
    left: 0px;
    margin: auto;
}

.set-img-void {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    left: 0px;
    margin: auto;
}

.set-p-void {
    line-height: 15px;
    position: relative;
    top: -5px;
    left: 0px;
    margin: auto;
}
@media (min-width: 0px) and (max-width: 375px) {
    .fixed-bottom-receipt {
        background-color: #F7F7F7;
        height: 80px;
        display: flex;
        text-align: center;
        box-sizing: border-box;
        width: var(--container-width);
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--padding-horizontal);
        padding-left: var(--padding-horizontal);
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
}
.set-imgdailttopsellrs {
    height:60px;
    width:80px;
}
.set-label-printer {
    height: 40px;
    display: flex;
    align-items: center;
}
.set-radio-printer {
    z-index: -999;
    position: absolute;
}
.custom-radio {
    border-bottom: 1px solid #ccc;
}

    .custom-radio:last-child {
        border-bottom: none;
    }

.connection-status {
    width:105px;
}
.void-bill {
    position: absolute;
    top: 30%;
    left: 14%;
    z-index: 9999;
    transform: rotate(-40deg);
    width: 250px;
    text-align: center;
    border: 10px solid rgba(245, 53, 92,0.4);
    border-radius: .25rem;
}
    .void-bill p {
        font-size: 70px;
        font-weight: 600;
        color: rgba(245, 53, 92,0.4);
    }
.text-payment-flex-center {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.flex-list-item-null {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 14rem);
    min-height: calc(100vh - 14rem);
    overflow-y: hidden;
}


.orange-receipt-grandtotal {
    color: #F95900;
}

.align-flex-end {
    align-items: flex-end;
}

.btn-color-back {
    background-color: #D6D6D6 !important;
    color: #000000 !important;
    border-right: 1px solid #D6D6D6 !important;
    border-radius: 8px;
}

.set-img-logo-merchant {
    min-height: 120px;
    height: 120px;
    min-width: 360px;
}

.btn-add-img-logo-merchant {
    background-color: #ffffff;
    color: #0095da;
    border: 1px solid #0095da;
    height: 38px;
    padding: 5px;
    width: 360px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}
    .btn-add-img-logo-merchant:focus {
        border: 1px solid #0095da !important;
        outline: 0;
    }

.btn-remove-img-logo-merchant {
    background-color: #ffffff;
    color: #808080;
    border: 1px solid #808080;
    height: 38px;
    padding: 5px;
    width: 190px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

    .btn-remove-img-logo-merchant:focus {
        border: 1px solid #808080 !important;
        outline: 0;
    }

.text-image-color {
    color: #B2B2B2
}

.img-background-merchant {
    background-color: transparent;
}