/* icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;600&family=Montserrat:wght@400;500;600&family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css');

@import url('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css');

/* Track width */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #dedede;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #9e9e9e;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #bdbdbd;
}

:root {
    --cartbar-width: 400px;
    --top-navbar-height: 66px;
}

body{
    background: #F0F3F8 !important;
    font-family: 'Poppins', sans-serif !important;
}

img {
    animation: laaazyyy 1s ease;
}
@keyframes laaazyyy {
    0%{
        opacity: 0%;
    }
    100%{
        opacity: 100%;
    }
}

#main_nav {
    height: var(--top-navbar-height);
    border-bottom: 0px solid #ccc !important;
    background-image: linear-gradient(to right, #156654, #1c7d68, #24957d, #2bae92, #33c7a8) !important;
    /*background-color: #DF292A !important;*/
}

main {
    background-color: transparent;
}

.offcanvas-backdrop {
    z-index: 1040;
}

thead th {
    color: #AFAFAF !important;
}#product-page-list tbody tr td{
    vertical-align: middle;
    font-weight: 600;
}
td {
    white-space: nowrap;
}

.card{
    background: #FFFFFF !important;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
    border: 0px solid !important;
}

.analytics_products_thumb{
    height: 60px;
    width: 60px;
    background: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}

#cartbar {
    width: 100%;
    background-color: #ffffff;
}
#cartbar a {
    text-decoration: none !important;
}

.searchbar{
    background: #FFFFFF !important;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3) !important;
    border-radius: 4px !important;
}
.searchbar .form-control{
    border: 0px solid !important;
}.searchbar .form-control:focus{
    box-shadow: none !important;
    border: 0px solid !important;
}
.searchbar-icon{
    background: #ffffff !important;
    border: 0px solid !important;
    border-right: 0px solid !important;
    border-radius: 4px !important;
    color: #666 !important;
    font-size: 12px !important;
}

.bottom-category{
    overflow: auto;
    white-space: nowrap;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #ccc;
}
.category-box{
    padding: 10px 20px;
    width: fit-content;
    border-radius: 7px;
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
}

#sale-product-list{
    margin-bottom: 80px;
    display: none;
}#sale-product-list-mobile{
    margin-bottom: 80px;
    display: flex;
}

#open-cart-mobile{
    display: block;
}#close-cart-mobile{
    display: block;
}

#product-page-list{
    height: 600px;
}

@media (min-width: 992px){
    #cartbar {
        width: var(--cartbar-width);
        transform: none;
        visibility: visible !important;
        top: var(--top-navbar-height);
        height: calc(100% - var(--top-navbar-height));
    }
    #cartbar-head {
        display: none;
    }
    main {
        margin-right: var(--cartbar-width);
    }#products-main {
        margin-left: 250px;
    }
    .offcanvas-backdrop {
        z-index: 2000;
    }
    .bottom-category{
        width: calc(100% - var(--cartbar-width));
    }
    #sale-product-list{
        display: flex;
    }#sale-product-list-mobile{
        display: none;
    }
    #open-cart-mobile{
    display: none;
    }#close-cart-mobile{
        display: none;
    }
    
    #product-page-list{
        height: 425px;
    }
}

/*.bg-body-mpos{
    background: #4E6E81 !important;
}*/

.navbar .container-fluid{
    /*justify-content: flex-start !important;*/
}

.text-deco-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}.text-deco-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}.text-deco-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.btn-success{
    background: #33B858 !important;
    border: 0px solid !important;
}.btn-success:hover{
    background: #24a648 !important;
    border: 0px solid !important;
}

.btn-mpos{
    background: rgba(0,0,0,0.1) !important;
    color: #ffffff !important;
    border: 0px solid !important;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}.btn-mpos:hover{
    background: rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
    border: 0px solid !important;
    font-weight: 600;
    border-radius: 5px;
}.btn-mpos:focus{
    background: rgba(0,0,0,0.2); !important;
    color: #ffffff !important;
    border: 0px solid !important;
    font-weight: 600;
    border-radius: 5px;
}.btn-mpos:active{
    background: rgba(0,0,0,0.15); !important;
    color: #ffffff !important;
    border: 0px solid !important;
    font-weight: 600;
    border-radius: 5px;
}

.btn-just{
    padding: 3px 6px;
    background: #dedede !important;
    border-radius: 5px;
    cursor: pointer;
    border: 0px solid;
}.btn-just:hover{
    background: #ccc !important;
}.btn-just:active{
    background: #dedede !important;
}

.mpos-active{
    background: rgba(0,0,0,0.3) !important;
}

.load-area{
  background: rgba(255,255,255,0.6);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 999999999999999999999;
}.load-bar{
  width: 100%;
  height: 5px;
  background: #FF5D5C;
}.load-light{
  height: 5px;
  width: 200px;
  background: #ffffff;
  opacity: 0.4;
  box-shadow: 0px 0px 20px 10px #ffffff;
  animation: load 0.8s ease infinite;
}
@keyframes load{
  from{
    margin-left: -2%;
  }to{
    margin-left: 102%;
  }
}

.item-card{
    width: 100%;
    height: 150px;
    background: #ffffff;
    cursor: pointer;
    transition: 0.3s ease-out;
    position: relative;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}.item-card:hover{
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}.item-card:active{
    background: rgba(78,110,129,0.1) !important;
    box-shadow: none;
}.item-price{
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 50px;
    background: #33B858;
    padding: 0px 10px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 0px 10px 10px 0px;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}.item-inv{
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 20px;
    background: #c46025;
    padding: 0px 10px;
    font-size: 12px;
    color: #ffffff;
    border-radius:10px 0px 0px 10px;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}.item-image{
    width: 100%;
    height: 100px;
    background: #eee;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}.item-title{
    width: 100%;
    font-size: 14px;
    font-weight: 600;
}

.cart-qty{
    display: flex;
    align-items: center;
    justify-content: space-around;
}.btn-qty{
    background: #ccc !important;
    font-size: 18px !important;
    padding: 2px 4px !important;
    border: 2px solid #ccc !important;
}.btn-qty:hover{
    background: #c2c2c2 !important;
}.btn-qty:active{
    background: #dedede !important;
}.cart-qty .form-control{
    border-radius: 0px;
    padding: 4.5px 4px;
    border: 1px solid #ccc;
    text-align: center;
}.cart-qty .form-control{
    border-radius: 0px;
    padding: 4.5px 4px;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
}.cart-qty .form-control:focus{
    box-shadow: none;
}

.jconfirm-content .form-control{
    border: 2px solid #dedede;
}.jconfirm-content .form-control:focus{
    border: 2px solid #666;
}

.cart-loading {
    background: rgba(255,255,255,0.7); position: absolute; top: 0; left: 0; display: none; align-items: center; justify-content: center;
}

.modal-content{
    border-radius: 3px;
}

.modal .form-control{
    font-weight: 500;
}.modal .form-control:focus{
    box-shadow: none;
    border-color: #ccc;
}

.btn-secondary{
    background: #dedede !important;
    border: 0px solid !important;
    color: #666 !important;
}.btn-secondary:hover{
    background: #ccc !important;
}.btn-secondary:active{
    background: #eee !important;
} 

.productpage_thumbnail{
    height: 70px;
    width: 70px;
    border-radius: 7px;
    background-color: #dedede;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.payment_mode{
    padding: 5px 10px;
    border: 2px solid #dedede;
    color: #666;
    font-weight: bold;
}.pay_mode:checked+label { color: #0d6efd; font-weight: bold; }

.smooth-loader {
     height: 20px;
     border-radius: 3px;
     opacity: 0.7;
     animation: skeleton-loading 1s linear infinite alternate;
}
@keyframes skeleton-loading {
     0% {
         background-color: hsl(200, 20%, 75%);
    }
     100% {
         background-color: hsl(200, 20%, 95%);
    }
}

.form-select:focus{
    box-shadow: none;
    border: 2px solid #000000;
}.form-select{
    box-shadow: none;
    border: 2px solid #dedede;
}

#scan_by_scanner:read-only{
    background: #dedede;
}

.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{
    border-radius: 10px !important;
}
.btn-red{
    border-radius: 7px !important;
    margin-left: 10px !important;
}.btn-green{
    border-radius: 7px !important;
    margin-left: 10px !important;
}.btn-default{
    border-radius: 7px !important;
}

.modal.fade.show{
    opacity: 1 !important;
}
.modal.fade{
    background: rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(4px) !important;
}

.spinner-4 {
  width: 70px;
  --b: 8px; /* the border thickness */
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#2FBA9C) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:s4 1s infinite steps(10);
}
@keyframes s4 {to{transform: rotate(1turn)}}

.jconfirm{
    backdrop-filter: blur(4px) !important;
    background: rgba(0,0,0,0.4) !important;
}