.form-control.invalid {
    border-color: #dc3545;
}

.validation-message {
    width: 100%;
    margin-top: .25rem;
    font-size: 90%;
    color: #dc3545;
}

.btn-theme {
    background: #009d54;
    color: white;
}

.btn-success, .btn-success:hover, .btn-success:focus {
    color: #fff;
    background-color: #009d54;
    border-color: #009d54;
}

.btn-orange {
    background: #fc4e00;
    color: white;
}

    .btn-orange:hover {
        background: #ec4a02;
        color: white;
    }

.sk-fading-circle {
    margin: 100px auto;
    width: 40px;
    height: 70px;
    position: relative;
    margin-top: 200px;
}

    .sk-fading-circle .sk-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #fc4e00;
            border-radius: 100%;
            -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

    .sk-fading-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .sk-fading-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .sk-fading-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .sk-fading-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .sk-fading-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .sk-fading-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .sk-fading-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .sk-fading-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .sk-fading-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .sk-fading-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .sk-fading-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }

    .sk-fading-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-fading-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-fading-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-fading-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .sk-fading-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .sk-fading-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .sk-fading-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .sk-fading-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .sk-fading-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .sk-fading-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .sk-fading-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

.modal .modal-content .modal-header.modal-header-secondary {
    background-color: #f89f19;
}
.modal .modal-content .modal-header.modal-header-warning {
    background-color: #f89f19;
}

.modal .modal-content .modal-header .modal-title.modal-title-secondary {
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
}
.modal .modal-content .modal-header .modal-title.modal-title-warning {
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
}

.modal-title-secondary .flaticon-lg {
    font-size: 1.5rem;
}

.man {
    margin: 0 !important;
}

.badge-border {
    border: solid 1px #ccc;
    font-size: 100% !important;
    font-weight: 400 !important;
    margin: 0px 5px 5px 0px;
    border-color: #f89f19;
}

.modal-body-secondary .form-group.my-form__group {
    padding-left: 15px;
    padding-right: 15px;
}

.table-form-label {
    font-weight: 500;
    font-size: 1.1rem;
    color: #000;
    vertical-align: middle !important;
}

.my-table--head-bg-secondary thead th {
    background: #fc4e00;
    color: #ffffff;
    border-bottom: 0;
    border-top: 0;
}

.modal .modal-content .modal-header.modal-header-secondary {
    background-color: #009d54;
    padding: 15px 25px;
}

    .modal .modal-content .modal-header.modal-header-secondary .modal-title {
        color: #fff;
        font-size: 1.6rem;
    }

.heading-form-label {
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    color: #000 !important;
    display: block;
    margin-bottom: 15px;
}

.search-bar {
    padding: 15px 30px 0px 30px;
    text-align: right;
    background-color: #f0f1f7;
}

.my-checkbox-label {
    width: 50%;
    float: left;
}

.my-user-checkbox-label {
    width: 30%;
    float: left;
}

.irs-from, .irs-to, .irs-single {
    background: #009d54;
}

    .irs-from:after, .irs-to:after, .irs-single:after {
        border-top-color: #009d54;
    }

.m-checkbox.m-checkbox--brand.m-checkbox--solid > input:checked ~ span {
    background: #009d54 !important;
}

.dataTables_wrapper .pagination .page-item.active > .page-link {
    background: #009d54 !important;
}

.dataTables_wrapper .pagination .page-item:hover > .page-link {
    background: #2d9d54 !important;
    color: #ffffff;
}

/*--------Export Modal CSS --------*/

.btn-success-secondary {
    background-color: #009d54;
    border-color: #009d54;
}

    .btn-success-secondary:hover, .btn-success-secondary:focus, .btn-success-secondary:active {
        background-color: #00924e;
        border-color: #00924e;
    }

.btn-outline-secondary {
    border-color: #fc4e00;
    color: #fc4e00;
}

    .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.selected {
        background-color: #fc4e00;
        color: #fff;
    }

.btn-outline-green {
    border-color: #009d54;
    color: #009d54;
}

    .btn-outline-green:hover, .btn-outline-green:focus, .btn-outline-green:active, .btn-outline-green.selected {
        background-color: #009d54;
        color: #fff;
    }

.modal .modal-content .modal-header.modal-header-primary {
    background-color: #009d54;
    padding: 15px 25px;
}

    .modal .modal-content .modal-header.modal-header-primary .modal-title {
        color: #ffffff;
    }

.close.close-icon, .close.close-icon:hover {
    color: #fff !important;
    text-shadow: 0 1px 0 #009d54;
    opacity: 1 !important;
    margin-top: 0;
}

.modal-md {
    max-width: 540px;
}

.m-radio.m-radio--success.my-radio--success.m-radio--solid > input:checked ~ span {
    background: #009d54;
}

.m-radio.m-radio--brand.my-radio--brand.m-radio--solid > input:checked ~ span {
    background: #fc4e00;
}

.text-form-label {
    padding-top: calc(0.85rem + 1px);
    padding-bottom: calc(0.85rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.25;
}

.badge-border {
    border: solid 1px #ccc;
    font-size: 100% !important;
    font-weight: 400 !important;
    margin: 0px 5px 5px 0px;
    border-color: #f89f19;
    color: #777;
}

.role-details-row {
    background-color: #f5f4f8;
}

.text-gray {
    color: #777;
}

.m-badge.my-badge--dot {
    padding: 0;
    line-height: 20px;
    min-height: 15px;
    min-width: 15px;
    height: 15px;
    width: 15px;
    border-radius: 100%;
}


html,
body {
    height: 100%
}

body {
    display: grid;
    font-family: 'Manrope', sans-serif;
    background: #000
}

.cross {
    padding: 10px;
    color: #6A1B9A;
    cursor: pointer;
    font-size: 23px
}

    .cross i {
        margin-top: 3px;
        cursor: pointer
    }

.icons i {
    color: #6A1B9A
}

.send {
    color: #fff;
    background-color: #6A1B9A;
    border-color: #6A1B9A
}

    .send:hover {
        color: #fff;
        background-color: #6A1B9A;
        border-color: #6A1B9A
    }

.gj-datepicker-md [role=right-icon] {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 24px;
}

.datetimepicker {
    width: 325px !important;
}

.gj-picker [role=body] [role=dial] {
    margin-left: 25px !important;
}

.gj-picker-md [role=header] {
    background: #009d54;
}

.gj-picker-md [role=switch] {
    background: #009d54;
}

.gj-picker-md .arrow-end {
    border: 16px solid #009d54;
}

.gj-picker-md .arrow-begin, .gj-picker-md [role=body] [role=arrow] {
    background-color: #009d54;
}

.gj-picker-md table tr td.selected.gj-cursor-pointer div {
    background: #009d54;
}

.m-form .form-control-label, .m-form label {
    font-weight: 500 !important;
    font-size: 1.1rem !important;
}

.jstree-default .jstree-anchor.jstree-hovered {
    background-color: #ebedf2 !important;
}

.btn-sm {
    padding: 0.55rem 1rem !important;
    font-size: 1rem !important;
}

.icon-xl {
    font-size: 1.3rem !important;
}

.btn-outline-warning:hover, .btn-outline-warning:not(:disabled):not(.disabled):active, .btn.btn-outline-warning:hover:not(:disabled) {
    color: #fff !important;
}
/*.card-relationship {
    height: calc(100% - 3.5em)
}*/

@media (min-width: 1025px) {
    body .m-aside-left--skin-dark .m-header .m-header-head {
        box-shadow: none !important;
    }
}

.multiselect-container > li.multiselect-group label {
    padding: 0 !important;
}

.multiselect-container > li > a > label.checkbox {
    padding-left: 20px !important;
}

.multiselect-container > li.multiselect-item.multiselect-all > a > label.checkbox {
    padding-left: 0 !important;
}

.table-custom {
    font-size: 12px;
}

    .table-custom th {
        font-weight: 600;
    }

.font-secondary {
    font-family: 'Roboto';
}

@media (min-width: 1200px) {
    .modal-dialog.modal-xl {
        max-width: 1100px;
    }
}

.btn.btn-icon.btn-circle {
    border-radius: 50%;
}

.btn.btn-icon.btn-xs {
    height: 24px;
    width: 24px;
    padding: 0.46rem 0.2rem;
}

/*Animation Effect button*/
.custom-btn {
    width: 85px;
    height: 34px;
    color: #fff;
    border-radius: 0px;
    padding: 10px 25px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    /* box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);*/
    outline: none;
}


.btn-cards {
    background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
    line-height: 34px;
    padding: 0;
    border: none;
}

.btn-cards-green {
    background: green;
}

.btn-cards-red {
    background: red;
}

.btn-cards-orange {
    background: orange;
}

.btn-cards-blue {
    background: blue;
}

.btn-cards span {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-cards:before,
.btn-cards:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: rgba(251,75,2,1);
    /*box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3);*/
    transition: all 0.3s ease;
}

.btn-cards-green:before,
.btn-cards-green:after {
    background: green;
}

.btn-cards-red:before,
.btn-cards-red:after {
    background: red;
}

.btn-cards-orange:before,
.btn-cards-orange:after {
    background: orange;
}

.btn-cards-blue:before,
.btn-cards-blue:after {
    background: blue;
}

.btn-cards:before {
    height: 0%;
    width: 2px;
}

.btn-cards:after {
    width: 0%;
    height: 2px;
}

.btn-cards:hover {
    color: rgba(251,75,2,1);
    background: transparent;
}

.btn-cards-green:hover {
    color: green;
}

.btn-cards-red:hover {
    color: red;
}

.btn-cards-orange:hover {
    color: orange;
}

.btn-cards-blue:hover {
    color: blue;
}

.btn-cards:hover:before {
    height: 100%;
}

.btn-cards:hover:after {
    width: 100%;
}

.btn-cards span:before,
.btn-cards span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: rgba(251,75,2,1);
    transition: all 0.3s ease;
}

.btn-cards-green span:before,
.btn-cards-green span:after {
    background: green;
}

.btn-cards-red span:before,
.btn-cards-red span:after {
    background: red;
}

.btn-cards-orange span:before,
.btn-cards-orange span:after {
    background: orange;
}

.btn-cards-blue span:before,
.btn-cards-blue span:after {
    background: blue;
}

.btn-cards-blue span:before,
.btn-cards-blue span:after {
    background: blue;
}

.btn-cards span:before {
    width: 2px;
    height: 0%;
}

.btn-cards span:after {
    height: 2px;
    width: 0%;
}

.btn-cards span:hover:before {
    height: 100%;
}

.btn-cards span:hover:after {
    width: 100%;
}


.m-page--wide .m-header, .m-page--fluid .m-header {
    background-color: transparent;
}

.m-aside-menu .m-menu__nav {
    list-style: none;
    padding: 0px 0 30px 0;
}

.m-topbar .m-topbar__nav.m-nav {
    padding-top: 15px;
    font-size: 12px;
}

.text-default {
    color: #fc4e00 !important;
}

.text-default-primary {
    color: #f89f19;
}

.user-device {
    padding: 10px 30px 0px 30px;
}

@media (max-width: 991px) {
    .user-device {
        padding: 70px 20px 0 20px;
    }
}

@media (min-width: 1025px) {
    .m-header--fixed .m-body {
        padding-top: 30px !important;
    }

    .m-header {
        height: auto;
    }

    .m-header--fixed .m-body {
        padding-top: 0 !important;
    }

    .m-header--fixed .m-header {
        max-width: 255px;
    }
}

.btn.btn-icon.btn-xsm {
    height: 18px;
    width: 18px;
    padding: 0.16rem 0.0rem;
}

.modal-content-secondary h5.modal-title {
    font-size: 21px !important;
}

.modal-content-secondary h6 {
    font-size: 14px;
}

.modal-content-secondary .close {
    position: absolute;
    top: 0;
    right: -25px;
}

    .modal-content-secondary .close:before {
        display: none;
    }

.popup-circle-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: #fff;
    margin-top: -65px;
    border-radius: 50%;
}

.bg-gray {
    background-color: #f2f2f2;
}

.modal-content-secondary .modal-body {
    margin-top: -60px;
    padding: 1.875rem;
}

.row-secondary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

    .row-secondary > .col, .row-secondary > [class*=col-] {
        padding-right: 10px;
        padding-left: 10px;
    }

.link, .link:hover {
    color: #212529;
    text-decoration: none;
}

.bg-light-success {
    background-color: #C9F7F5 !important;
}

.bg-light-danger {
    background-color: #FFE2E5 !important;
}

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

.modal, .modal-backdrop {
    left: 255px;
}

.m-wrapper {
    margin-bottom: 0 !important;
}

.modal-backdrop.show {
    top: -30px;
}

.modal-dialog.modal-dialog-right {
    position: absolute;
    right: 30px;
    top: 35px;
}
.modal-dialog.modal-dialog-center {
    position: absolute;
    right: 660px;
    top: 38px;
}
.modal-custom {
    min-width: 280px;
}

.modal .modal-dialog.modal-sm .modal-content .modal-header.modal-header-secondary .modal-title {
    font-size: 1.4rem;
}

.close {
    color: #fff;
    text-shadow: none;
    opacity: 1;
}

    .close:hover {
        color: #fff;
    }

.m-aside-left--minimize .modal-backdrop {
    left: 0;
}

#m_aside_left:hover + .m-brand--skin-dark {
    width: 255px;
}
.m-header {
    z-index: 4;
}
.m-aside-left--minimize-hover .m-header {
    z-index: 999 !important;
}

.m-aside-left--minimize-hover .m-brand--skin-dark {
    width: 255px;
}

.m-aside-left--minimize-hover .m-brand .m-brand__logo {
    display: table !important;
    padding-left: 20px;

}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bg-light-warning {
    background-color: #FFF8DD;
}

.bg-light-primary {
    background-color: #F1FAFF;
}

.bg-light-danger {
    background-color: #FFF5F8;
}

.bg-light-success {
    background-color: #E8FFF3;
}

.bg-light-gray {
    background-color: #F5F8FA;
}

.bg-light-info {
    background-color: #F8F5FF;
}

.text-orange {
    color: #FC4E00;
}

.card-size-14, .card-size-14 .btn {
    font-size: 1.27rem;
}

.card-sales {
    border: solid 1px rgba(0, 0, 0, 0.07) !important;
    border-radius: 0.45rem;
    border: solid 1px #fc4e00;
}

    .card-sales h4 {
        font-size: 1.4rem;
    }

    .card-sales span img {
        width: 62px;
        height: 52px;
        border-radius: 0.45rem;
        border: solid 1px #fc4e00;
    }

.nav-size-14 {
    font-size: 1.27rem;
}

.nav.nav-custom-tab .nav-link.active {
    color: #FC4E00;
}

.ellipsis-text {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.ellipsis-text-secondary {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}


.m-btn--icon.m-btn--icon-only.btn-xs, .m-btn--icon.m-btn--icon-only.btn-xs:focus {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.07);
    border-color: transparent;
    color: #000;
}

    .m-btn--icon.m-btn--icon-only.btn-xs:hover {
        background-color: #ec4a02;
        border-color: #ec4a02;
        color: #fff;
    }

.total-charges {
    border-radius: 0.45rem;
}

    .total-charges .card-header {
        background-color: #009d54;
        padding: 1.15rem 2.72rem;
        border-radius: calc(0.45rem - 1px) calc(0.45rem - 1px) 0 0;
    }

    .total-charges .card-body {
        padding-left: 2.72rem;
        padding-right: 2.72rem;
        padding-bottom: 2.72rem;
    }

.card-scroll {
    padding-left: 2.72rem;
    padding-right: 2.72rem;
    padding-top: 1.36rem;
    max-height: 250px;
    overflow-y: auto;
}

.btn-plus-minus {
    background-color: #EEF0F8;
}

    .btn-plus-minus:hover {
        background-color: #ec4a02 !important;
        color: #ffffff !important;
    }

.text-16 {
    font-size: 1.45rem;
}

.btn.btn-outline-orange {
    border-color: #FC4E00;
    color: #FC4E00;
    background-color: transparent;
}

    .btn.btn-outline-orange:hover {
        background-color: #FC4E00;
        color: #fff;
    }

.la-lg {
    font-size: 1.33333333em !important;
}

.btn-hover-orange:hover {
    background-color: #fc4e00 !important;
    color: #fff;
}

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

.gradient-warning {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(255,244,222,1) 100%);
}

.gradient-primary {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(225,240,255,1) 100%);
}

.gradient-danger {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(255,226,229,1) 100%);
}

.gradient-success {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(201,247,245,1) 100%);
}

.gradient-gray {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(238,240,248,1) 100%);
}

.gradient-info {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(238,229,255,1) 100%);
}

.gradient-warning:hover {
    background: #FFF4DE;
}

.gradient-primary:hover {
    background: #E1F0FF;
}

.gradient-danger:hover {
    background: #FFE2E5;
}

.gradient-success:hover {
    background: #C9F7F5;
}

.gradient-gray:hover {
    background: #EEF0F8;
}

.gradient-info:hover {
    background: #EEE5FF;
}

.gradient-warning .btn-add {
    background-color: #FFF4DE;
}

.gradient-primary .btn-add {
    background-color: #E1F0FF;
}

.gradient-danger .btn-add {
    background-color: #FFE2E5;
}

.gradient-success .btn-add {
    background-color: #C9F7F5;
}

.gradient-gray .btn-add {
    background-color: #EEF0F8;
}

.gradient-info .btn-add {
    background-color: #EEE5FF;
}

.sales-cart:hover .btn-add {
    border: solid 1px #000;
}

.sales-cart .card-body {
    padding: 20px;
}

.sales-cart h6 {
    font-size: 14px;
}

.sales-cart .product-img {
    margin-right: 15px;
}

.size-text {
    font-size: 12px;
    color: #383838
}

.btn-size {
    width: 24px;
    height: 24px;
    background-color: rgba(000,000,000,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000;
    line-height: normal;
    font-weight: 600;
    cursor: pointer;
}

.btn-size:hover {
    background-color: #000;
    color: #ffff;
    text-decoration: none;
}

.btn-size.btn-active {
    background-color: #000;
    color: #fff;
}

.sales-cart h5 {
    font-size: 16px;
}

.text-orange {
    color: #FC4E00;
}

.btn-add {
    border: solid 1px transparent;
    height: 46px;
    display: block;
}

.sales-card-content {
    min-height: 70px;
}

.btn-sm-custom {
    top: 0px;
    right: 0px;
    padding: 0.75rem 1rem !important;
    border-radius: 0rem 0.2rem 0.2rem 0 !important
}
/* Responsive CSS Start*/
@media (min-width: 1200px) {
    .modal-dialog.modal-xl {
        max-width: 1000px;
    }

    .font-lable {
        font-size: 1.1rem;
    }
}

@media (max-width: 1199px) {
    .modal, .modal-backdrop {
        left: 0;
    }
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.input-close-sales-payment {
    top: 2px;
    right: 22px;
}

/* Sale Payment */
h3.table-heading {
    color: #fff;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
    min-height: 50px;
    padding: 10px 20px;
}

.bg-yellow {
    background-color: #F89F19;
}

.bg-blue {
    background-color: #00a3e8;
}

.bg-green {
    background-color: #009F53;
}

.table-custom {
    color: #383838;
    border: solid 1px #ddd
}

.table-custom thead tr th {
    border-bottom-color: #000;
    border-width: 1px;
    font-weight: 500;
    color: #000;
}

.table-checkout tr th, .table-checkout tr td {
    padding: 1.24rem 0.54rem;
    font-size: 14px;
}
.table-custom tr th, .table-custom tr td {
    padding: 0.54rem;
    font-size: 14px;
}

.text-black {
    color: #000;
}

.bg-light-head {
    background-color: #F2F3F8;
}

.bg-light-warning {
    background-color: #FFF4DE;
}

.table-custom tfoot tr td {
    border: 0
}

.table-custom tfoot tr:first-child td {
    border-top: solid 1px #000;
}

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

.text-orange {
    color: #FC4E00;
}

.custom-card {
    border-radius: 8px;
}

.btn-tip {
    border-color: #dddddd;
    color: #383838;
    width: 100%;
}

.btn-tip:hover, .btn-tip:focus, .btn-tip:active, .btn-tip:hover:focus:active, .btn-tip:visited, .btn-tip.active {
    background-color: #FC4E00;
    border-color: #FC4E00;
    color: #ffffff;
    box-shadow: none;
}

.per-tip {
    font-size: 14px;
    color: #343434;
}

.btn-tip:hover .per-tip, .btn-tip:focus .per-tip, .btn-tip:active .per-tip, .btn-tip:hover:focus:active .per-tip, .per-tip .btn-tip:visited, .btn-tip.active .per-tip {
    color: #ffffff;
}

.btn-green, .btn-green:hover, .btn-green:focus {
    background-color: #009F53;
}

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

.flex-gap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.font-weight-900 {
    font-weight: 900
}

.textmuted {
    color: #6c757d;
    font-size: 13px;
}

.form-expire {
    font-size: 14px;
    height: 20px;
    width: 55px;
    border: none;
    border-radius: 0;
    font-weight: 700;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
}

.form-expire:focus {
    box-shadow: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
}

.form-cvc {
    font-size: 14px;
    height: 20px;
    width: 30px;
    border: none;
    border-radius: 0;
    font-weight: 700;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
}

.form-cvc:focus {
    box-shadow: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
}

.text-muted {
    font-size: 10px;
}

.form-card {
    height: 25px;
    width: 150px;
    border: none;
    border-radius: 0;
    font-weight: 700;
    padding: 0 0 5px 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
    font-size: 14px;
}

.btn.btn-purchase {
    width: 100%;
    height: 45px;
    border-radius: 0;
    padding: 16px 0;
    background-color: #FC4E00;
    border: none;
    font-weight: 600;
    color: white;
}

.btn.btn-purchase:hover .fas {
    transform: translateX(10px);
    transition: transform 0.5s ease
}

.fs-14 {
    font-size: 14px;
}
.fs-16 {
    font-size: 16px;
}

.fw-900 {
    font-weight: 900;
}

.h4-total {
    font-family: 'Work Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: x-large;
}

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

.ps-2 {
    padding-left: 0.5rem !important;
}

/*scroll table*/
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
}

.table-scroll {
    position: relative;
    width: 100%;
    margin: auto;
    overflow-y: auto;
    height: 350px;
    /*height: auto;*/
}

.table-scrollforInvoice {
    position: relative;
    width: 100%;
    margin: auto;
    overflow-y: auto;
    /*height: auto;*/
}

.table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-scroll th {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #F2F3F8;
    z-index: inherit;
}

.table-scroll html {
    box-sizing: border-box;
}
.daterangepicker .ranges {
    padding: 0;
}
.daterangepicker .ranges ul li{
    margin-bottom:0;
        border-radius: 0;
}
    .daterangepicker .ranges li.active {
        background-color: #384ad7 !important;
    }

.daterangepicker td.in-range {
    background-color: #ffebc1 !important;
    color: #000 !important;
}
.daterangepicker tbody td.active {
    background: #f89f19 !important;
    color: #fff !important;
}
.daterangepicker tbody td.today {
    background: #f89f19;
}
.applyBtn, .applyBtn:hover, .applyBtn:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #009d54;
    border-color: #009d54;
}
    .applyBtn:disabled {
        background-color: #009d54;
        border-color: #009d54;
    }
.daterangepicker .ranges li.active {
    background-color: #009d54 !important;
}

.progress-bar {
    border-radius:10px;
    position:relative;
}
.progress{
    height:0.5rem;
    overflow: inherit;
}

.progress-bar span {
    position: absolute;
   /* right: 0;*/
    width: 22px;
    height: 22px;
    display: block;
    background-color: #34bfa3;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
}
.timelineline {
    position: absolute;
    top: 0px;
    left: calc(33% + 15px);
    right:0;
    bottom: -21px;
    width: 4px;
    background: #ddd;
    height: 100%;
}

.timeline {
    width: 100%;
    max-width: 800px;
    background: #fff;
    padding: 0;
    position: relative;
    max-height: 300px;
    overflow: auto;
    font-size: 12px;
}

.inner{ position:relative;height:auto;}

   /* .timeline:before {
        content: '';
        position: absolute;
        top: 0px;
        left: calc(33% + 15px);
        bottom: 0px;
        width: 4px;
        background: #ddd;
        height:auto;
    }

    .timeline:after {
        content: "";
        display: table;
        clear: both;
    }*/

.entry {
    clear: both;
    text-align: left;
    position: relative;
}

    .entry .title {
        margin-bottom: 0.5em;
        float: left;
        width: 33%;
        padding-right: 10px;
        text-align: right;
        position: relative;
    }

        .entry .title:before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border: 4px solid #f7bb33;
            background-color: #fff;
            border-radius: 100%;
            top: 15%;
            right: -25px;
            z-index: 0; /*  old      99;*/
        }

        .entry .title h3 {
            margin: 0;
            font-size: 120%;
        }

        .entry .title p {
            margin: 0;
            font-size: 100%;
        }

    .entry .body {
        margin: 0 0 1em; /*3em;*/
        float: right;
        width: 66%;
        padding-left: 30px;
    }

        .entry .body p {
            line-height: 1.4em;
        }

            .entry .body p:first-child {
                margin-top: 0;
                font-weight: 400;
            }

        .entry .body ul {
            color: #aaa;
            padding-left: 0;
            list-style-type: none;
        }

            .entry .body ul li:before {
                content: "–";
                margin-right: 0.5em;
            }
.highlightred {
    background-color: #fc4e00;
}

.btn-active:focus {
    border:solid 1px #000;
}

.btn-square-md {
    width: 100%;
    max-width: 100%;
    max-height: 100% !important;
    height: 100px !important;
    text-align: center;
    padding: 0px;
    font-size: 12px;
}
table.dataTable tr th.select-checkbox.selected::after {
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}

live-preview-root {
display:none;
}

.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-pos > input:checked ~ span {
    background: #fff4de !important;         /* #ffff6b */
}
.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-kiosk > input:checked ~ span {
    background: #FFD580 !important;
}
.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-online > input:checked ~ span {
    background: #c3bfbf !important;
}
.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-pos > span:after {
    border: solid #000;
}

.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-kiosk > span:after {
    border: solid #000;
}

.m-checkbox.m-checkbox--brand.m-checkbox--solid.m-check-online > span:after {
    border: solid #000;
}
.gradient-warning {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(255,244,222,1) 100%);
}

.gradient-primary {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(225,240,255,1) 100%);
}

.gradient-danger {
    background: rgb(255,255,255);
    background: linear-gradient(300deg, rgba(255,255,255,1) 0%, rgba(255,226,229,1) 100%);
}

.gradient-success {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(201,247,245,1) 100%);
}

.gradient-gray {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(238,240,248,1) 100%);
}

.gradient-info {
    background: rgb(255,255,255);
    background: linear-gradient(301deg, rgba(255,255,255,1) 0%, rgba(238,229,255,1) 100%);
}

.gradient-warning:hover {
    background: #FFF4DE;
}

.gradient-primary:hover {
    background: #E1F0FF;
}

.gradient-danger:hover {
    background: #FFE2E5;
}

.gradient-success:hover {
    background: #C9F7F5;
}

.gradient-gray:hover {
    background: #EEF0F8;
}

.gradient-info:hover {
    background: #EEE5FF;
}

.gradient-warning .btn-add {
    background-color: #FFF4DE;
}

.gradient-primary .btn-add {
    background-color: #E1F0FF;
}

.gradient-danger .btn-add {
    background-color: #FFE2E5;
}

.gradient-success .btn-add {
    background-color: #C9F7F5;
}

.gradient-gray .btn-add {
    background-color: #EEF0F8;
}

.gradient-info .btn-add {
    background-color: #EEE5FF;
}

.sales-cart:hover .btn-add {
    border: solid 1px #000;
}

.sales-cart {
    margin-bottom: 30px;
}

    .sales-cart .card-body {
        padding: 20px;
    }

    .sales-cart h6 {
        font-size: 14px;
    }

    .sales-cart .product-img {
        margin-right: 15px;
    }

.size-text {
    font-size: 12px;
    color: #383838
}

.btn-size {
    width: 46px;
    height: 46px;
    background-color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    line-height: normal;
    font-weight: 600;
}

    .btn-size:hover {
        background-color: #000;
        color: #ffff !important;
        text-decoration: none;
    }

.sales-cart h5 {
    font-size: 16px;
}

.text-orange {
    color: #FC4E00;
}

.btn-add {
    border: solid 1px transparent;
}

/* Sales Screen */

.product-card h3 {
    position: absolute;
    bottom: 0;
    background: linear-gradient(90deg, rgba(248, 159, 25, 0.85) -5.71%, rgba(239, 82, 35, 0.85) 102.86%);
}

.sales-product-col {
    margin-bottom: 30px;
}

.sales-product {
    position: relative;
}

.product-size-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: #008CBA; */
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
}

.product-size {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.sales-product:hover .product-size-overlay {
    height: 100%;
}

.sales-page-heading {
    font-size: 24px;
    margin-top: 30px;
}

.sales-product-card-body {
    padding: 0 30px;
}

.sales-product-grid {
    padding-right: 0;
    border-right: solid 1px #ccc;
}

.sales-product-total-charges {
    padding-left: 30px;
    padding-bottom:30px;
}

.total-charges-heading {
    font-size: 20px;
    padding-top: 30px;
    margin-bottom: 29px;
}

.sales-product-list {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: solid 1px #d9d9d9;
}

    .sales-product-list h5 {
        font-size: 14px;
    }

    .sales-product-list h4 {
        font-size: 18px;
    }

.sales-product-thumbnail {
    position: relative;
    margin-right: 20px;
}

.sales-product-size {
    width: 24px;
    height: 24px;
    background-color: #000000;
    font-size: 14px;
    position: absolute;
    top: -6px;
    right: -10px;
}

.count-plus-minus {
    width: 32px;
    height: 32px;
    border: solid 1px #D9D9D9;
    background-color: #fff;
    color: #383838;
}

.form-control-plus-minus {
    min-width: 56px;
    height: 32px;
    border: 0;
    text-align: center;
    color: #000;
    font-size: 14px;
    max-width: 32px;
    width: auto !important;
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
}

    .form-control-plus-minus:focus, .discount-code .form-control:focus {
        outline: none;
        box-shadow: none;
    }

    .form-control-plus-minus::-webkit-input-placeholder {
        color: #000;
    }

    .form-control-plus-minus::-moz-placeholder, .form-control-plus-minus:-ms-input-placeholder, .form-control-plus-minus::-ms-input-placeholder, .form-control-plus-minus::placeholder {
        color: #000;
    }

.discount-code, .total-payment {
    margin-bottom: 20px;
    box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.12);
}


    .discount-code .form-control{ font-size:14px;}

    .total-payment {
        font-size: 14px;
    }

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

.total-payment h5 {
    font-size: 18px;
}

.btn-gradient {
    background: linear-gradient(90deg, #F89F19 -5.71%, #EF5223 102.86%);
    border: 0;
    color: #fff;
}

    .btn-gradient:hover {
        background: linear-gradient(90deg, #EF5223 -5.71%, #F89F19 102.86%);
        border: 0;
        color: #fff;
    }

    .btn-gradient:focus {
        box-shadow: none;
        border: 0;
    }

.btn-payment {
    min-height: 42px;
    padding: 1.1rem .75rem;
    font-size:14px;
}

@media (min-width:768px) and (max-width:1199px) {
    .sales-product-card-body {
        padding: 0 30px;
    }

    .product-card h5 {
        font-size: 1rem
    }

   /* .sales-product-grid {
        padding-right: 20px;
    }*/

    .sales-product-total-charges {
        padding-left: 20px;
    }
}

@media (max-width:767px) {
    .sales-product-card-body {
        padding: 0 20px;
    }

    .sales-product-grid {
        padding-right: 15px;
    }

    .sales-product-total-charges {
        padding-left: 20px;
    }

    .sales-product-grid {
        border-bottom: solid 1px#d9d9d9;
        border-right: 0;
    }
}
.rounded-lg {
    border-radius: 0.3rem !important;
}
.overflow-hidden {
    overflow: hidden !important;
}

.numpadbutton {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.10);
}
.qtyInput {
    display: block;
    width: 100%;
    padding: 6px 12px;
    color: #555;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.nmpd-grid button.btn.btn-default.numero {
    WIDTH: 100%;
    HEIGHT: 50PX;
}
input.nmpd-display {
    WIDTH: 320px;
    HEIGHT: 42PX;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04) !important;
}
.nmpd-grid td{ padding:0.35rem;width:25%;}

.sales-container {
    height: calc(100% - 50px);
}

.shift {
    color: white;
    display: inline !important;
    width: 80px;
    position: absolute;
    top: -50px;
    z-index: 99;
}
.sales-product-card-body .nav-tabs {
    border-bottom: 0px solid #d9d9d9;
}
.sales-product-card-body .nav-tabs .nav-link {
    display: block;
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    border-radius: 0.25rem;
    background-color: #eff0f5;
    margin-bottom: 5px;
}
.sales-product-card-body .card-header {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    border-bottom: 1px solid #ccc;
}
.sales-product-card-body .card-body {
    padding: 30px;
}
.sales-product-card-body .nav-tabs .nav-link.active {
    background-color: #fff;
    margin-bottom: 0 !important;
    padding-bottom: 1.5rem !important;
    border-color: #ccc #ccc #fff;
    color: #fc4e00;
}

.numfunction {
    width: 100%;
    height: 50px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.10) !important;    
}
    .numfunction:hover {
        color: white;
    }
.numpadgrid {
    width: 350px;
    margin: 0 auto;
    border-radius: 15px;
    background: #F2F3F8;
}

.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.circle-border {
    width: 150px;
    height: 150px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(63,249,220);
    background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
    animation: spin .8s linear 0s infinite;
}
.circle-core {
    width: 100%;
    height: 100%;
    background-color: #1d2630;
    border-radius: 50%;
}
#SafeDropWarning {
    width: 36%;
    position: fixed;
  /*  bottom: 0;
    right: 0;
    margin: 0;*/
    top: 70%;
    left: 65%;
    outline: none;
}
.hv-100{
    height:100vh;
}
@media (min-width: 768px) {
    .table-heading {
        margin-left: -20px;
        margin-right: -18px;
    }
}

.print-receipt{
    color: #fff;
    right: 480px;
    width: 134px;
}

@media (max-width: 1024px) {


    .modal-dialog.modal-dialog-center {
        right: 0;
        left: 0;
        position: inherit;
    }

    .shift {
        width: 90px;
    }

    .print-receipt {
        width: 134px;
        right:-10px;
    }
}


.select-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.invoice-data {
    /*font-family: 'Manrope',sans-serif;*/
    font-size: 14px;
    font-weight: 500 !important;
}

.invoice-dataTotal {
    /*font-family: 'Manrope',sans-serif;*/
    font-size: 14px;
}

/*@media print {
    @page {
        size: auto;
        margin: 15mm;
    }

    body * {
        visibility: hidden;
    }

    #ReportModal,
    #ReportModal * {
        visibility: visible;
    }

    #ReportModal {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal-dialog-centered {
        align-items: flex-start !important;
        min-height: 0 !important;
    }

    .modal-content {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-body {
        padding: 20px !important;
    }*/

    /* Table adjustments */
    /*table {
        width: 100% !important;
        page-break-inside: avoid;
        margin-top: 0 !important;
    }*/

    /* Text sizing */
    /*table, th, td {
        font-size: 12pt !important;
    }*/

    /* Hide elements */
    /*.modal-header button.close,
    .no-print,
    #printButton {
        display: none !important;
    }*/

    /* Table spacing */
    /*.table td,
    .table th {
        padding: 8px !important;
    }
}*/

@media print {
    /* Only apply print styles when printing the report */
    body.printing * {
        visibility: hidden;
    }

    body.printing #ReportModal,
    body.printing #ReportModal * {
        visibility: visible;
    }

    @page {
        size: auto;
        margin: 15mm;
    }

    #ReportModal {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal-dialog-centered {
        align-items: flex-start !important;
        min-height: 0 !important;
    }

    .modal-content {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-body {
        padding: 20px !important;
    }

    .download-btn {
        display: none !important;
    }   

    /* Table adjustments */
    table {
        width: 100% !important;
        page-break-inside: avoid;
        margin-top: 0 !important;
    }

     Text sizing 
    table, th, td {
        font-size: 12pt !important;
    }

     Hide elements 
    .modal-header button.close,
    .no-print,
    #printButton {
        display: none !important;
    }

     Table spacing 
    .table td,
    .table th {
        padding: 8px !important;
    }
}

.d-flex.flex-wrap {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: gray lightgray; /* For Firefox */
}

    .d-flex.flex-wrap::-webkit-scrollbar {
        width: 8px; /* For Chrome, Safari, and Edge */
    }

    .d-flex.flex-wrap::-webkit-scrollbar-thumb {
        background-color: gray; /* Scrollbar thumb color */
        border-radius: 10px;
    }

    .d-flex.flex-wrap::-webkit-scrollbar-track {
        background: lightgray; /* Scrollbar track color */
    }

.scrollable-container {
    max-height: 170px; /* Restrict the height */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow wrapping of items */
    margin: -0.5rem; /* Adjust for padding */
}

.card-item {
    flex: 1 1 calc(33.333% - 1rem); /* Ensure 3 items per row */
    min-width: 245px; /* Minimum width of each item */
    max-width: calc(33.333% - 1rem); /* Maximum width of each item */
    padding: 0.5rem; /* Padding for spacing */
    box-sizing: border-box; /* Include padding in width calculation */
}

.custom-file-button input[type="file"] {
    margin-left: -2px !important;
}

.custom-file-button input[type="file"]::-webkit-file-upload-button {
    display: none;
}

.custom-file-button input[type="file"]::file-selector-button {
    display: none;
}

.custom-file-button:hover label {
    background-color: #dde0e3;
    cursor: pointer;
}

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

.refund-label {
    font-size: 1.45rem;
    text-align: left;
    padding-top: 0.85rem;
}


.refund-container {
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.product-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /*padding: 10px;*/
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

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

    .product-details img {
        margin-right: 15px;
    }

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

    .product-quantity input {
        width: 60px;
        margin-right: 10px;
    }

.summary-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
}

.refund-btn {
    width: 100%;
    background-color: #dc3545;
    color: white;
}

.scan-playcard-btn {
    background-color: #6c757d;
    color: white;
}

.refund-hr {
    margin-left: -30px;
    margin-right: -30px;
}

.rounded-custom-border {
    border-radius: 10px;
}




.shopify-spinner-container {
    display: flex;
    align-items: center;
    /*font-family: sans-serif;*/
    /*width: 14%;*/
}

.shopify-spinner-wrapper {
    position: relative;
    /*display: inline-block;*/
    display: flex;
    align-items: center;
    width: 100%;
}

.shopify-spinner-input {
    width: 100%;
    padding: 4px 32px 4px 13px; /* more right padding to make room for /5 */
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    appearance: textfield;
}

    .shopify-spinner-input::-webkit-outer-spin-button,
    .shopify-spinner-input::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
    }

.spinner-buttons {
    position: absolute;
    /*top: 1px;*/
    right: 4%;
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

.shopify-spinner-wrapper:hover .spinner-buttons {
    visibility: visible;
}

.spinner-buttons button {
    padding: 0;
    border: 2px;
    font-size: 10px;
    height: 12px;
    cursor: pointer;
    width: 15px;
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;    
}

    .arrow.up {
        border-bottom: 8px solid #444;
    }

    .arrow.down {
        border-top: 8px solid #444;
    }

.max-indicator {
    position: absolute;
    top: 50%;
    right: 35%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #666;
    pointer-events: none;
}


.refund-input-wrapper {
    position: relative;
}

.refund-input {
    padding-left: 20px;
}

.refund-dollar-sign {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}


.btn-disable {
    background-color: #cbcfd3;
}

.salespay-invoice {
    font-size: large !important;
}

.salespayment-chargecard {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
    
}

.salespay-card-color {
    color: #ffffff;
}

.deposit-header {
    font-size: x-large;
    text-align: center;
    width: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 38px;
    background-color: #28a745;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slider-label {
    color: white;
    font-size: 14px;
    font-weight: 600;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

.slider-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 34px;
    height: 34px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    cursor: grab;
    transition: left 0.3s ease;
}

.slider-arrow {
    font-size: 22px;
    color: green;
    font-weight: bold;
}


.btn-square-height {
    height : 45px !important;
}

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