@font-face {
    font-family: "PlusJakartaSans";
    src: url(../../../Style/Fonts/PlusJakartaSans/PlusJakartaSans-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: auto
}

@font-face {
    font-family: "PlusJakartaSans";
    src: url(../../../Style/Fonts/PlusJakartaSans/PlusJakartaSans-Light.ttf) format('truetype');
    font-weight: auto;
    font-style: auto
}

@font-face {
    font-family: "PlusJakartaSans";
    src: url(../../../Style/Fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "PlusJakartaSans";
    src: url(../../../Style/Fonts/PlusJakartaSans/PlusJakartaSans-Italic.ttf) format('truetype');
    font-weight: auto;
    font-style: italic
}

@font-face {
    font-family: "PlusJakartaSans";
    src: url(../../../Style/Fonts/PlusJakartaSans/PlusJakartaSans-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic
}
:root {
    --bs-page-bg: #eae6df;
    --bs-body-color: #404040;
    --bs-chat-primary-bg: #ed7b01;
    --bs-primary-text: #f2f3f5;
    --bs-primary-bg: #ed7b01;
    --bs-chat-primary-text: #f2f3f5;
    --bs-chat-secondary-bg: #605d5e;
    --bs-chat-secondary-text: #f2f3f5;
    --bs-card-bg:#f2f3f5;
    --bs-gray-100: #212529;
    --bs-gray-200: #272c3b;
    --bs-gray-300: #36404a;
    --bs-gray-400: #a6b0cf;
    --bs-gray-500: #9aa1b9;
    --bs-gray-600: #abb4d2;
    --bs-gray-700: #e1e9f1;
    --bs-gray-800: #eff2f7;
    --bs-gray-900: #f8f9fa;
    --bs-border-color:#f0eff5;
}
body, html {
    font-size: 11.5pt;
    font-family: "PlusJakartaSans", ui-rounded, sans-serif !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bs-page-bg) !important;
    background-color: var(--bs-page-bg) !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
td,th{
    vertical-align: middle;
}
.background-page {
    background: var(--bs-page-bg) !important;
}
.full-screen{
    width: 100%;
    height: 100%;
    overflow: auto;
}
*{
    padding: 0;
    margin: 0;
}

.modal-content {
    border: 0 !important;
}

a {
    text-decoration: none
}



.card-header, .card-actions, .card-body {
    padding: .2em 0.5em !important
}

.card-actions {
    text-align: center
}

.card-actions .btn {
    margin: 0.2em !important;
    padding: 0.2em !important
}

.container-fluid {
    width: 100%;
    position: relative;
    bottom: 70px !important;
    top: 0;
    padding: 0 !important
}

.list-group-flush .list-group-item {
    border-radius: 5px !important
}



.nav-link {
    padding: 0.5em 0.2em;
}

.fixed-bottom {
    height: 65px !important
}

#PAGE_MAIN {
    height: calc(100% - 60px)
}

.page-container {
    max-width: 700px;
    margin: auto
}

.page {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 100%
}

.page-no-scroll {
    overflow: hidden
}

.page-scroll {
    overflow-y: auto
}

.page-scroll-y {
    overflow-y: auto;
    overflow-x: clip
}

.img-contain {
    object-fit: contain !important
}

.img-cover {
    object-fit: cover !important
}

.img-scale-down {
    object-fit: scale-down !important
}

.img-fill {
    object-fit: fill !important
}

.page-body-trolley {
    height: calc(100% - 160px);
    position: relative;
}

.page-header-trolley {
    background-color: #fff;
    height: 60px;
    position: fixed;
    bottom: 0;
    top: 0;
    overflow-y: hidden;
    overflow-x: hidden
}

.xselect {
    font-size: 11pt !important;
    line-height: 11pt
}

#categories .card-header {
    background-color: #fff
}

#categories .card-body {
    background-color: rgba(0, 0, 0, .15);
    padding-left: 1em !important
}

.page-footer-trolley {
    bottom: 0;
    z-index: 999;
    padding: .2em 1em;
    border-radius: 0;
    height: 90px
}

.page-header-trolley {
    width: 100%;
    z-index: 999;
    background: #fff;
    padding: 0;
    margin: 0;
    height: 100px
}

.page-header {
    width: 100%;
    z-index: 999;
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0 solid #e9ecef;
    border-radius: 0;
    height: 70px
}

h5 {
    font-size: 10pt !important;
    line-height: 10pt
}

h6 {
    font-size: 8pt !important;
    line-height: 8pt
}

h4, h3 {
    font-size: 12pt !important;
    line-height: 12pt
}

h2 {
    font-size: 15pt !important;
    line-height: 15pt
}

h1 {
    font-size: 18pt !important;
    line-height: 18pt
}
.card-title{
    font-size: 11pt !important;
}
.page-body {
    background-color: #fff;
    width: 100%;
    position: relative;
    bottom: 64px;
    top: 57px;
    overflow-y: scroll
}

.page-body-tab {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 70px;
    top: 0;
    overflow: hidden
}

.page-body-tab .tab-content-sub {
    overflow-y: scroll;
    height: calc(100% - 30px);
    position: absolute;
    top: 70px;
    width: 100%
}

.page-body-tab .tab-content-main {
    overflow-y: auto;
    height: calc(100% - 72px);
    position: absolute;
    top: 72px;
    width: 100%
}

.page-body-contents {
    overflow-y: auto;
    height: calc(100% - 70px);
    position: absolute;
    top: 70px;
    width: 100%;
    background-color: #fff;
    bottom: 70px;
    font-family: "PlusJakartaSans", ui-rounded
}

.page-title {
    font-size: 22pt;
    line-height: 22pt;
    padding: .2em;
    font-weight: bolder;
    font-family: "PlusJakartaSans", ui-rounded
}

* {
    font-family: "PlusJakartaSans", ui-rounded;
    padding: 0;
    margin: 0
}

div {
    font-family: "PlusJakartaSans", ui-rounded;
    height: auto;
    min-height: 0
}

::-webkit-scrollbar, iframe::-webkit-scrollbar {
    width: .2em
}

::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px transparent;
    border-radius: 10px
}

::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover, iframe::-webkit-scrollbar-thumb:hover {
    background: #b30000
}

.pop-sign-form {
    border-radius: 1em;
}

.pop-up-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1041;
    overflow: hidden
}

.pac-container {
    z-index: 99999 !important
}

.address-container {
    position: relative
}

.pop-up-page .modal-dialog {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0
}

.pop-up-page .modal {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0
}

.pop-up-page .modal-content {
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

.modal-bottom-dialog {
    position: fixed;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0
}

.modal-bottom-dialog .modal-content {
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

.animate-bottom {
    position: relative;
    animation: animatebottom 0.4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

.modal-header {
    border-bottom: 0 solid
}

.modal-footer {
    border-top: 0 solid;
    display: block;
    padding: .5em
}

.pop-up-page .modal-header {
    background-color: #fff;
    width: 100%;
    top: 0;
    z-index: 99;
    border-radius: 0;
    height: 45px;
    padding: 0
}

.pop-up-page .modal-body {
    width: 100%;
    position: absolute;
    bottom: 70px;
    top: 50px;
    overflow-y: auto;
    border-radius: 0
}

.pop-up-page .modal-body-center {
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0
}

.no-footer .modal-body {
    bottom: 0 !important;
    border-radius: 0
}

.pop-up-page .modal-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 99;
    border-radius: 0
}

.pop-up-page .card {
    padding: .5em
}

.pop-up-page .modal-footer .alert {
    width: 100%
}

.pop-up-page .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important
}

.pop-up-form {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.pop-up-form table {
    border: 0 !important
}

.has-header-nav .modal-body {
    top: 100px !important
}

.has-header-nav .modal-nav {
    background-color: #fff;
    width: 100%;
    position: absolute;
    top: 60px
}

.ratings-table {
    width: 100%;
    border-spacing: 0;
    empty-cells: show;
    font-size: 100%;
    margin: 20px 0 40px;
    border: 1px solid #dae2e6
}

.ratings-table tbody td, .ratings-table thead th {
    border-bottom: 1px solid #dae2e6;
    border-right: 1px solid #dae2e6;
    line-height: 1.3
}

.ratings-table input[type=checkbox], .ratings-table input[type=radio] {
    margin: 0 auto
}

.ratings-table thead th {
    font-weight: 600;
    font-size: 17pt;
    line-height: 17pt;
    padding: .4rem .5rem;
    color: #777;
    vertical-align: middle;
    text-transform: uppercase;
    background-color: #f6f6f6;
    text-align: center
}

.ratings-table tbody td {
    font-size: 16pt;
    line-height: 16pt;
    padding: 1.5rem 1rem;
    vertical-align: middle;
    text-align: center
}

.ratings-table tbody td:first-child {
    font-size: 16pt;
    line-height: 16pt;
    text-align: left
}

@media (max-width: 600px) {
    .ratings-table tbody td, .ratings-table thead th {
        padding-left: 5px;
        padding-right: 5px
    }

    .ratings-table thead {
        display: none
    }

    .ratings-table tbody td:first-child {
        font-size: 16pt;
        line-height: 16pt;
        text-align: left
    }
}

.page-no-scroll .nav-item {
    height: 70px !important;
    min-height: 70px !important
}

.menu-bar button {
    text-transform: capitalize
}

.modal-title {
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 .5em
}

.list-group-item {
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    margin-bottom: .5em
}

.btn-search-item {
    margin: .5em
}

.info-boxes-container {
    background-color: #ec2226
}

.info-boxes-container .container, .info-boxes-container .container-fluid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0
}

.info-box {
    display: flex;
    align-items: center;
    padding: 1.1rem 1.5rem;
    width: 100%;
    color: #c8cdcf
}

.info-box i {
    color: #fff;
    font-size: 3.7rem;
    margin-right: 1.8rem;
    min-width: 3.7rem;
    text-align: center
}

.info-box i::before {
    margin: 0;
    width: auto
}

.info-box h4 {
    color: #fff;
    margin-bottom: .2rem;
    letter-spacing: .05rem
}

.info-box p {
    margin-bottom: 0;
    color: #fff
}

.info-box + .info-box {
    border-top: 1px solid #fff
}

@media screen and (min-width: 768px) {
    .info-boxes-container {
    }

    .info-boxes-container .container, .info-boxes-container .container-fluid {
        flex-direction: row;
        align-items: center;
        justify-content: center
    }

    .info-box {
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding-top: 2rem;
        padding-bottom: 2rem;
        justify-content: center
    }

    .info-box:first-child {
        justify-content: flex-start
    }

    .info-box + .info-box {
        border-top: none
    }
}

@media screen and (max-width: 767px) {
    .info-boxes-container .container {
        width: 100%;
        max-width: none
    }
}

.simple-slider .swiper-slide {
    height: 500px;
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
    width: 50px;
    margin-left: 20px;
    margin-right: 20px
}

@media (max-width: 767px) {
    .simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
        display: none
    }
}

@media (max-width: 767px) {
    .simple-slider .swiper-slide {
        height: 360px
    }
}

#myTabProduct {
    margin: 1em
}

#product_panel, #wish_list_panel {
    z-index: 9998
}

.product-wrapper {
    overflow: hidden
}

.product-wrapper .category-grid {
    margin-bottom: -1px
}

.product form {
    margin-bottom: 0
}

.product {
    border: 0 solid;
    position: relative;
    margin-bottom: 1.5rem;
    background: #fff
}

.trolley-item {
    margin-bottom: 1em;
    padding: .8em;
    font-size: 9pt;
    line-height: 9pt;
    background: #fff
}

.trolley-item p {
    font-size: 7pt;
    line-height: 7pt
}

.btn {
    font-weight: 700 ;
}

.card-item {
    margin-bottom: 1em;
    border-radius: 5px
}

.trolley-actions {
    border-top: 1px solid #000;
    margin-top: 1em
}

.product-image-container {
    position: relative;
    display: block;
    margin-bottom: 0;
    transition: all .3s;
    text-align: center;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.pic110 {
    height: 110px
}

.product-image-container .btn-quickview, .product-image::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.product-image {
    display: block;
    overflow: hidden
}

.product-image img {
    display: block;
    z-index: -1
}

.prod-image-2 img {
    display: block;
    width: 100%;
    height: 50px
}

.promo-msg {
    height: 25px !important;
    font-size: 8pt;
    line-height: 8pt
}

.prod-image img {
    display: block;
    width: 100%;
    height: auto
}

.prod-image {
    overflow: hidden
}

.product-details {
    text-align: left;
    padding: 5px
}

.product-title {
    letter-spacing: 0;
    height: 62pt;
    margin-bottom: .2em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    padding: 0 5px;
    justify-content: left;
    font-weight: bolder;
    overflow: hidden;
    word-break: break-word;
    font-size: 10pt !important;
    line-height: 10pt
}

.btn-corner-round {
    border-radius: 5px
}

.product-title a {
    color: inherit
}

.price-box {
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 10pt;
    line-height: 10pt
}

.product-price {
    font-size: 10pt;
    line-height: 10pt;
    font-weight: bolder;
    width: 100%;
    overflow: hidden;
    padding: 0 5px
}

.product-cents {
    font-size: 70%;
    line-height: normal;
    top: 2px;
    margin-left: 3px;
    transform: none;
    position: relative;
    vertical-align: top
}

.old-price {
    width: 100%;
    color: #999;
    font-size: 9pt;
    line-height: 9pt;
    text-decoration: line-through;
    padding: 0 5px
}

.deal-msg {
    width: 100%;
    height: 20pt;
    color: #999;
    font-size: 8pt;
    line-height: 8pt;
    padding: 0 5px
}

.circle-badge {
    position: absolute;
    font-size: 8pt;
    line-height: 8pt;
    height: 50px;
    width: 50px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.top-right-0 {
    position: absolute;
    top: 0;
    right: 0
}

.top {
    position: absolute;
    top: 0;
    padding-left: 1em
}

.old-price + .product-price {
    margin-left: .6rem
}

.product-action {
    padding: 0;
    margin-bottom: .2em;
    align-items: center
}

.product-action .btn, .btn-actions {
    font-size: 10pt !important;
    width: 65px !important;
    height: 60px !important;
    line-height: 10pt
}

.product-action .btn-block {
    font-size: 10pt !important;
    width: 100% !important;
    height: 60px !important;
    line-height: 10pt
}

.product-action .col-12, .product-action .col-8, .product-action .col-4, .product-action .col-6, .product-action .row {
    padding: 0;
    margin: 0
}

.product-action .alert {
    padding: .15rem .25rem !important;
    margin: 0 !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    overflow: hidden;
    height: 60px;
    text-overflow: ellipsis;
    justify-content: center;
    font-size: 11pt !important;
    line-height: 11pt
}

.product-action .row {
    padding: .15rem .25rem !important
}

.product-action .btn, .product-action .row {
    height: 100%
}

.product-action .btn {
    padding: .2em 0.5em !important;
    font-size: 12pt !important;
    line-height: 12pt
}

.product .product-action {
    width: 100%
}

.product .mb-3 {
    margin-bottom: 0 !important
}

.ratings-container .product-ratings::before, .ratings-container .ratings::before {
    content: "\f005 " "\f005 " "\f005 " "\f005 " "\f005"
}

.grid-product:hover .paction.add-compare, .grid-product:hover .paction.add-wishlist, .product:hover .paction.add-compare, .product:hover .paction.add-wishlist {
    visibility: visible;
    opacity: 1
}

.grid-product:hover .paction.add-wishlist, .product:hover .paction.add-wishlist {
    right: 0
}

.grid-product:hover .paction.add-compare, .product:hover .paction.add-compare {
    left: 0
}

.product-warning {
    position: absolute;
    z-index: 99;
    bottom: 3.6em;
    right: 0;
    left: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    padding: .5rem;
    min-width: 46px;
    background-color: #fa4a4a;
    color: #fff
}

.product-label {
    position: absolute;
    z-index: 90;
    top: 0;
    right: 0;
    font-size: .6rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    padding: .5rem;
    min-width: 46px;
    background-color: #fa4a4a;
    color: #fff
}

.product-label.label-hot, .product-label.label-new {
    background-color: #62b959
}

.product-label.label-sale {
    background-color: #e27c7c
}

.product-label + .product-label {
    top: 2rem
}

.ratings-container {
    margin-bottom: .4rem;
    line-height: 1
}

.ratings-container .product-ratings, .ratings-container .ratings {
    position: relative;
    display: inline-block;
    letter-spacing: .1em;
    line-height: 1;
    font-family: "PlusJakartaSans", "Font Awesome 5 Free"
}

.ratings-container .product-ratings {
    height: 11px
}

.ratings-container .product-ratings::before {
    color: #b3b3b3
}

.ratings-container .ratings {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden
}

.banner, .banner-image > a {
    position: relative
}

.autocomplete {
    position: relative
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    color: #666;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    font-size: 1.3rem
}

.autocomplete-items div:hover {
    background-color: #e9e9e9
}

.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #fff
}

.error-full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.error-box {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da
}

.dropdown-el {
    width: 100%;
    min-width: 12em;
    position: relative;
    display: inline-block;
    margin-right: 1em;
    min-height: 2em;
    max-height: 2em;
    overflow: hidden;
    top: .5em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    color: #444;
    outline: none;
    border: .06em solid transparent;
    border-radius: 1em;
    background-color: #cde4f5;
    transition: 0.3s all ease-in-out
}

.dropdown-el input:focus + label {
    background: #def
}

.dropdown-el input {
    width: 1px;
    height: 1px;
    display: inline-block;
    position: absolute;
    opacity: .01
}

.dropdown-el label {
    border-top: .06em solid #d9d9d9;
    display: block;
    height: 2em;
    line-height: 2em;
    padding-left: 1em;
    padding-right: 3em;
    cursor: pointer;
    position: relative;
    transition: 0.3s color ease-in-out
}

.dropdown-el label:nth-child(2) {
    margin-top: 2em;
    border-top: .06em solid #d9d9d9
}

.dropdown-el input:checked + label {
    display: block;
    border-top: none;
    position: absolute;
    top: 0;
    width: 100%
}

.dropdown-el input:checked + label:nth-child(2) {
    margin-top: 0;
    position: relative
}

.dropdown-el::after {
    content: "";
    position: absolute;
    right: .8em;
    top: .9em;
    border: .3em solid #3694d7;
    transition: .4s all ease-in-out
}

.dropdown-el.expanded {
    border: .06em solid #3694d7;
    background: #fff;
    border-radius: .25em;
    padding: 0;
    box-shadow: rgba(0, 0, 0, .1) 3px 3px 5px 0;
    max-height: 15em
}

.dropdown-el.expanded label {
    border-top: .06em solid #d9d9d9
}

.dropdown-el.expanded label:hover {
    color: #3694d7
}

.dropdown-el.expanded input:checked + label {
    color: #3694d7
}

.dropdown-el.expanded::after {
    transform: rotate(-180deg);
    top: .55em
}

#interactive.viewport {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center
}

#interactive.viewport > canvas, #interactive.viewport > video {
    max-width: 100%;
    width: 100%
}

canvas.drawing, canvas.drawingBuffer {
    position: absolute;
    left: 0;
    top: 0
}

.form-group input:placeholder-shown + .form-group label {
    visibility: hidden;
    z-index: -1
}

span {
    cursor: pointer
}

.number {
    margin: 5px;
    width: 125px;
    min-width: 125px
}

.numminus, .numplus {
    width: 20px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 8px 5px 8px 5px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 11pt
}

.numinput {
    height: 34px;
    width: 60px;
    max-width: 100px;
    text-align: center;
    font-size: 12pt;
    line-height: 12pt;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle
}

.input-group .form-floating {
    width: 100%
}

.input-group .form-floating .form-control {
    padding-right: 55px
}

.input-group .input-group-btn {
    position: absolute;
    right: 5px;
    top: 10px
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em
}

.alert-danger, .alert-error, .alert-info, .alert-success, .alert-warning, .bg-aqua, .bg-aqua-active, .bg-black, .bg-black-active, .bg-blue, .bg-blue-active, .bg-fuchsia, .bg-fuchsia-active, .bg-green, .bg-green-active, .bg-light-blue, .bg-light-blue-active, .bg-lime, .bg-lime-active, .bg-maroon, .bg-maroon-active, .bg-navy, .bg-navy-active, .bg-olive, .bg-olive-active, .bg-orange, .bg-orange-active, .bg-purple, .bg-purple-active, .bg-red, .bg-red-active, .bg-teal, .bg-teal-active, .bg-yellow, .bg-yellow-active, .callout.callout-danger, .callout.callout-info, .callout.callout-success, .callout.callout-warning, .label-danger, .label-info, .label-primary, .label-success, .label-warning, .modal-danger .modal-body, .modal-danger .modal-footer, .modal-danger .modal-header, .modal-info .modal-body, .modal-info .modal-footer, .modal-info .modal-header, .modal-primary .modal-body, .modal-primary .modal-footer, .modal-primary .modal-header, .modal-success .modal-body, .modal-success .modal-footer, .modal-success .modal-header, .modal-warning .modal-body, .modal-warning .modal-footer, .modal-warning .modal-header {
    color: #fff !important
}

.bg-default, .label-default {
    background-color: #444444 !important
}

.bg-dim-black, .label-dim-black {
    background-color: rgba(0, 0, 0, .075)
}

.bg-light-blue, .label-primary {
    background-color: #3c8dbc !important
}

.alert-danger, .alert-error, .bg-red, .callout.callout-danger, .label-danger {
    background-color: #dd4b39 !important
}

.alert-warning, .bg-yellow, .callout.callout-warning, .label-warning {
    background-color: #f39c12 !important
}

.alert-info, .bg-aqua, .callout.callout-info, .label-info {
    background-color: #00c0ef !important
}

.alert-success, .bg-green, .callout.callout-success, .label-success {
    background-color: #00a65a !important
}

.color-primary {
    color: #3c8dbc !important
}

.color-danger {
    color: #dd4b39 !important
}

.color-warning {
    color: #f39c12 !important
}

.color-success {
    color: #00a65a !important
}

.color-info {
    color: #00c0ef !important
}

.bg-outline-primary {
    border: 1px solid transparent !important
}

.btn-white {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #fff !important
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn-app-mini {
    border-radius: 3px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #6c757d;
    font-size: 7pt ;
    height: 65px ;
    margin: 0 0 5px 5px ;
    min-width: 50px ;
    padding: 5px 2px;
    position: relative;
    text-align: center
}

.btn-app {
    border-radius: 3px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #6c757d;
    font-size: 9pt !important;
    height: 65px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    padding: 15px 5px;
    position: relative;
    text-align: center
}

.btn-app-mini > .fa, .btn-app-mini > .fas, .btn-app-mini > .far, .btn-app-mini > .fab, .btn-app-mini > .fal, .btn-app-mini > .fad, .btn-app-mini > .svg-inline--fa, .btn-app-mini > .ion {
    display: block;
    font-size: 15px
}

.btn-app > .fa, .btn-app > .fas, .btn-app > .far, .btn-app > .fab, .btn-app > .fal, .btn-app > .fad, .btn-app > .svg-inline--fa, .btn-app > .ion {
    display: block;
    font-size: 20px
}

.btn-app > .svg-inline--fa {
    margin: 0 auto
}

.btn-app:hover {
    background-color: #f8f9fa;
    border-color: #aaa;
    color: #444
}

.btn-app:active, .btn-app:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn-app > .badge {
    font-size: 10px;
    font-weight: 400;
    position: absolute;
    right: -10px;
    top: -3px
}

.btn-xs {
    padding: .125rem .25rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .15rem
}

.dark-mode .btn-default, .dark-mode .btn-app {
    background-color: #3a4047;
    color: #fff;
    border-color: #6c757d
}

.dark-mode .btn-default:hover, .dark-mode .btn-default:focus, .dark-mode .btn-app:hover, .dark-mode .btn-app:focus {
    background-color: #3f474e;
    color: #dee2e6;
    border-color: #727b84
}

.dark-mode .btn-light {
    background-color: #454d55;
    color: #fff;
    border-color: #6c757d
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-app > .badge {
    font-size: 10px;
    font-weight: 400;
    position: absolute;
    right: -10px;
    top: -3px
}

select {
    position: relative;
    -webkit-appearance: button;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    height: 2.2em;
    margin: 2px;
    padding: .3em .6em;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: .3em;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .3), 0 1px 2px rgba(0, 0, 0, .4);
    font-family: "PlusJakartaSans";
    font-size: .85em;
    font-weight: 400;
    overflow: hidden;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: box-shadow 200ms, border-color 200ms;
    -moz-transition: box-shadow 200ms, border-color 200ms;
    transition: box-shadow 200ms, border-color 200ms;
    white-space: nowrap
}

select option {
    text-shadow: none
}

.alert-outline-warning {
    color: #e0a800;
    border-color: #e0a800 !important
}

.alert-outline-danger {
    color: #a81421;
    border-color: #a81421 !important
}

.alert-primary {
    color: #000000 !important;
    background-color: #ffcccc !important;
    border-color: #ffb8b8 !important
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6;
    border-bottom: 2px solid #ec2226 !important
}

.active .text, a.active {
    font-weight: 900 !important
}

.nav-item {
    font-weight: 500 !important
}

.badge {
    padding: 4px ;
    border-radius: 0.25rem
}

.nav-tabs .nav-link {
    border: none !important;
    border-radius: 0 !important
}

.txt-height-fill {
    height: 100%
}


.no-limit-width{
    max-width: 100% !important;
}
.btn-search-click div {
    padding: .1em .5em;
    color: #c1c1c1;
    background: #fff;
    border-radius: 5px
}

.close {
    width: 40px !important;
    height: 40px !important;
    margin: 0.5em !important;
    padding: 0.5em !important;
    font-size: 10pt !important;
    opacity: 1 !important;
    border: 1px solid !important;
    line-height: 10pt !important
}
.hk-nav-close{
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
}

.table-bordered td,.table-bordered th{
    border: 1px solid;
    padding: 0.2em;
}

.btn-act {
    margin: 0.5em !important;
    padding: .5em 1em !important;
    font-size: 11pt ;
    opacity: 1 !important;
    line-height: 11pt ;
    border: 1px solid !important;
    border-radius: .5em;
    white-space: normal;
    text-align: center
}
.btn-act-borderless {
    margin: 0.5em ;
    padding: .5em 1em ;
    font-size: 11pt ;
    opacity: 1 !important;
    line-height: 11pt ;
    border: 0 solid !important;
    border-radius: .5em;
    white-space: normal;
    text-align: center
}
.modal-full-screen{
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-full-screen .modal-content{
    height: 100%;
}

.modal-full-screen .modal-body{
    overflow-y: auto;
}

.btn-circle {
    border-radius: 50% !important
}

.btn-block {
    overflow: hidden
}

.top-right {
    position: absolute;
    top: 10px;
    right: 10px
}

.nowrap {
    white-space: nowrap;
    overflow: hidden
}

.shadow {
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000
}

.contact-info li {
    position: relative;
    margin-bottom: 1.2rem
}

.contact-info-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    font-family: "PlusJakartaSans";
    color: #fff;
    text-transform: uppercase;
    margin-bottom: .1rem;
    letter-spacing: .02em
}

.contact-info {
    margin-bottom: 1rem;
    padding-top: .5rem
}

.contact-info > div {
    margin-bottom: 1rem
}

.contact-info > div::after {
    display: block;
    clear: both
}

.contact-info i {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 2.3rem;
    height: 2.3rem;
    color: #fff;
    background-color: #282d3b;
    text-align: center;
    font-size: 1rem;
    border-radius: 0
}

.contact-info p {
    margin-left: 3rem;
    margin-bottom: 0
}

.contact-info > div::after, .entry-author::after, .entry-content::after, .list li a::before, .simple-entry-list li::after, .tagcloud::after {
    content: ''
}

.high-priority {
    z-index: 1099
}
.high-priority-1{
    z-index: 9999;
}
.high-priority-2{
    z-index: 99999;
}
.high-priority-3{
    z-index: 999999;
}
.center-panel {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center
}

iframe {
    border-style: none;
    width: 100%;
    height: 100%
}

.center-full {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.sign-in-window {
    text-align: center
}

.bg-black {
    background: #000000 !important;
    color: #ffffff !important
}

.center-body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center !important;
    justify-content: center !important
}

.center-body2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center !important
}

.entry {
    border-bottom: 1px solid;
    padding-bottom: .5px
}

.entry p, .entry h4 {
    font-size: 80%
}

.entry p {
    color: #4e555b;
    padding-left: 1em
}

a:hover {
    color: initial
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.no-height {
    height: auto !important
}

.no-scroll {
    overflow: hidden;
    -ms-overflow: hidden
}

.no-scroll-y {
    overflow-y: hidden;
    -ms-overflow-y: hidden;
    overflow-x: visible;
    -ms-overflow-x: visible
}

.no-scroll-x {
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    overflow-y: visible;
    -ms-overflow-y: visible
}

.wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important
}

.overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.overlay_fill {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.overlay_fill_class {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .20);
    backdrop-filter: blur(10px);
    z-index: 99999;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center
}

.widget-circle {
    text-align: center;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    margin: 1em
}

.navbar {
    width: 100%;
    background-color: #555;
    padding: 0 !important
}

.bottom_space {
    padding-bottom: .5em;
    font-size: 13pt !important;
    line-height: 13pt
}

.navbar .active {
    border-radius: 1em
}

.cards {
    margin-bottom: .8em
}

.navbar a {
    color: #fff;
    overflow: hidden;
    font-weight: 800;
    text-transform: uppercase
}

.nav-link {
    overflow: hidden
}

.navbar a:hover {
    font-weight: 700
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: .5;
    z-index: 0
}

.full-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

.dataTables_length {
    float: left
}

.dataTables_filter, .dataTables_paginate {
    float: right
}

@media screen and (max-width: 300px) {
    .price-box, .product-title, .product-details {
        font-size: 10px;
        line-height: 12pt
    }
}

.wrapper {
    padding: 0 2em;
    font-size: 17pt;
    line-height: 17pt
}

.StepProgress {
    position: relative;
    padding-left: 20px;
    list-style: none
}

.StepProgress::before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    border-left: 10px solid #ccc
}

.StepProgress-item {
    position: relative;
    counter-increment: list;
    padding: .5em 2em
}

.StepProgress-item:not(:last-child) {
    padding-bottom: 80px
}

.StepProgress-item::before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -20px;
    height: 100%;
    width: 10px
}

.StepProgress-item::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -40px;
    width: 12px;
    height: 12px;
    border: 25px solid #ccc;
    border-radius: 50%;
    background-color: #fff
}

.StepProgress-item.is-done::before {
    border-left: 10px solid #fff000
}

.StepProgress-item.is-done::after {
    content: "";
    font-size: 15pt;
    position: absolute;
    color: #fff;
    text-align: center;
    border: 25px solid #fff000;
    background-color: #fff000
}

.StepProgress-item.current::before {
    border-left: 10px solid #fff000
}

.StepProgress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: #fff000;
    border: 10px solid #fff000;
    background-color: #fff
}

.StepProgress strong {
    display: block
}

.StepProgress-header {
    position: relative;
    counter-increment: list;
    padding: .5em 2em
}

.StepProgress-header h2 {
    padding: 20px;
    margin-left: -65px;
    margin-bottom: 0;
    margin-right: -50px;
    background: #ccc;
    z-index: 9
}

.StepProgress-header h2.is-done {
    background: #fff000
}

.StepProgress-header {
    padding-bottom: 0
}

.StepProgress-header::before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -20px;
    height: 100%;
    width: 10px;
    top: 0
}

.StepProgress-header.is-done::before {
    border-left: 10px solid #fff000
}

.StepProgress-header.is-done::after {
    content: "";
    font-size: 15pt;
    position: absolute;
    color: #fff;
    text-align: center;
    border: 0 solid #fff000;
    background-color: #fff000
}

.StepProgress-header.current::before {
    border-left: 10px solid #fff000
}

.StepProgress-header.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: #fff000;
    border: 10px solid #fff000;
    background-color: #fff
}

.bar_container {
    width: 100%
}

.progressbar {
    counter-reset: step
}

.progressbar li {
    list-style: none;
    counter-increment: list;
    width: 30.33%;
    position: relative;
    text-align: center;
    cursor: pointer
}

.progressbar li:before {
    content: "";
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: #fff
}

.progressbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1
}

.progressbar li:first-child:after {
    content: none
}

.progressbar li.active {
    color: green
}

.progressbar li.active:before {
    border-color: green
}

.progressbar li.active + li:after {
    background-color: green
}

.progress-bold-container {
    background-color: #eee;
    border-radius: 0;
    overflow: hidden;
    position: relative
}

.progress-bar {
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background-color: #3498db;
    transition: width 0.5s
}

.progress-text {
    position: relative;
    z-index: 1
}

.progress-bar {
    background-color: #e74c3c
}

.progress-bar.progress-high {
    background-color: #27ae60
}

.font-size-8 {
    font-size: 8px !important
}

.font-size-9 {
    font-size: 9px !important
}

.font-size-10 {
    font-size: 10px !important
}

.font-size-11 {
    font-size: 11px !important
}

.font-size-12 {
    font-size: 12px !important
}

.font-size-13 {
    font-size: 13px !important
}

.font-size-14 {
    font-size: 14px !important
}

.font-size-15 {
    font-size: 15px !important
}

.font-size-16 {
    font-size: 16px !important
}

.font-size-17 {
    font-size: 17px !important
}

.font-size-18 {
    font-size: 18px !important
}

.font-size-20 {
    font-size: 20px !important
}

.font-size-22 {
    font-size: 22px !important
}

.font-size-24 {
    font-size: 24px !important
}

.fw-medium {
    font-weight: 500
}

.fw-semibold {
    font-weight: 600
}

.news_image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 300px;
    z-index: 0;
    object-fit: cover
}

.news_title {
    position: absolute;
    top: 150px;
    width: 100%;
    height: 30px;
    z-index: 2
}

.news_body div.card {
    width: 100%;
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important
}

.news_title div.card {
    padding: 0.5em !important;
    border-width: 2px !important
}

.news_container {
    position: absolute;
    top: 160px;
    width: 100%
}

.news_box_close {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 10
}

.news_body {
    z-index: 1
}

.loading {
    --speed-of-animation: 0.9s;
    --gap: 6px;
    --first-color: #4c86f9;
    --second-color: #49a84c;
    --third-color: #f6bb02;
    --fourth-color: #f6bb02;
    --fifth-color: #2196f3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    gap: 6px;
    height: 100px
}

.loading span {
    width: 4px;
    height: 50px;
    background: var(--first-color);
    animation: scale var(--speed-of-animation) ease-in-out infinite
}

.loading span:nth-child(2) {
    background: var(--second-color);
    animation-delay: -0.8s
}

.loading span:nth-child(3) {
    background: var(--third-color);
    animation-delay: -0.7s
}

.loading span:nth-child(4) {
    background: var(--fourth-color);
    animation-delay: -0.6s
}

.loading span:nth-child(5) {
    background: var(--fifth-color);
    animation-delay: -0.5s
}

@keyframes scale {
    0%, 40%, 100% {
        transform: scaleY(.05)
    }
    20% {
        transform: scaleY(1)
    }
}

.nav-badge {
    position: absolute;
    top: 0;
    right: .1em;
    line-height: 13pt !important;
    height: 15pt !important;
    font-size: 13pt !important;
    display: flex;
    align-items: center;
    padding: 4px !important;
    border-radius: 0.25rem !important
}

.form-search {
    border-radius: 1em
}

.list {
    display: flex;
    overflow-x: scroll;
    padding: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scroll-padding-inline-start: 20px
}

.list_grid {
    display: grid;
    padding: 0 !important;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    list-style-type: none;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 600px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}

.list::-webkit-scrollbar {
    display: none
}

.list_grid .item_body {
    width: 100%;
    margin: .5em;

}

.item {
    flex-shrink: 0;
    text-align: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;

}

.item:last-child {
    position: relative
}

.item:last-child::after {
    position: absolute;
    left: 100%;
    height: 1px;
    width: 20px;
    display: block;
    content: ""
}

.list {
    list-style: none;

    padding: 10px;
    border-radius: 12px
}

.item_body  span{
    font-size: 6pt;
}

.itemspecial_body{
    position: relative;
    height: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;

}
.itemspecial_body span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}
.itemspecial_body img {
    position: absolute;

}
.item_body {
    position: relative;
    display: flex;
    height: 100px;
    width: 85px;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    font-size: 6pt;
}

.list .item:not(:last-child) {
    margin-right: 10px
}

.item a {
    text-align: center
}

.item span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}

.viewport {
    max-width: 100%;
    width: calc(100% - 20px);
    margin-left: 5px;
    margin-right: 5px
}
.no-wrap {
    white-space: nowrap;
    overflow: hidden; /* Optionally hide overflow */
    text-overflow: ellipsis; /* Optionally add ellipsis if overflowed */
}
.quantity {
    display: inline-block;
    border-radius: .5em;
    border: 1px solid
}

.quantity .input-text.qty {
    width: 60px;
    height: 39px;
    padding: 0 5px;
    text-align: center;
    background-color: transparent;
    border: 0 solid #efefef
}

.quantity.buttons_added {
    text-align: left;
    position: relative;
    white-space: nowrap;
    vertical-align: top
}

.quantity.buttons_added input {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    box-shadow: none
}

.quantity.buttons_added .minus, .quantity.buttons_added .plus {
    padding: 7px 10px 8px;
    height: 41px;
    background-color: #fff;
    border: 0 solid #efefef;
    border-radius: .5em;
    cursor: pointer
}

.quantity.buttons_added .minus {
    border-right: 0
}

.quantity.buttons_added .plus {
    border-left: 0
}

.quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover {
    background: #eee
}

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

.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus {
    outline: none
}

.product__images {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.product__main-image {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    cursor: pointer
}

.product__slider-wrap {
    max-width: 500px;
    min-height: 100px;
    display: flex;
    align-items: center
}

.product__slider {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto
}

.product__image {
    max-width: 180px;
    max-height: 100px;
    object-fit: cover;
    cursor: pointer;
    opacity: .5;
    margin: .25rem;
    border: 1px solid #070707
}

.product__image:first-child {
    margin-left: 0
}

.product__image:last-child {
    margin-right: 0
}

.product__image:hover {
    opacity: 1
}

.product__image--active {
    opacity: 1
}

.product__slider::-webkit-scrollbar {
    height: 10px
}

.product__slider::-webkit-scrollbar-thumb {
    background-color: #f9564f;
    border-radius: 50px
}

.dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%
}

.dot {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #b3d4fc;
    animation: pulse 1.5s infinite ease-in-out
}

.dot:last-child {
    margin-right: 0
}

.dot:nth-child(1) {
    animation-delay: -0.3s
}

.dot:nth-child(2) {
    animation-delay: -0.1s
}

.dot:nth-child(3) {
    animation-delay: 0.1s
}

@keyframes pulse {
    0% {
        transform: scale(.8);
        background-color: #b3d4fc;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, .7)
    }
    50% {
        transform: scale(1.2);
        background-color: #6793fb;
        box-shadow: 0 0 0 10px rgba(178, 212, 252, 0)
    }
    100% {
        transform: scale(.8);
        background-color: #b3d4fc;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, .7)
    }
}

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    border-radius: 10px;
}

.mySlides {
    display: none;
    border-radius: 10px;
}
.mySlides img {
    border-radius: 10px;
}

.slideshow-container .prev, .slideshow-container .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none
}

.slideshow-container .next {
    right: 0;
    border-radius: 3px 0 0 3px
}

.slideshow-container .prev:hover, .slideshow-container .next:hover {
    background-color: rgba(0, 0, 0, .8)
}

.slideshow-container .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center
}

.slideshow-container .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0
}

.slider_dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease
}

.slideshow-container .active, .slider_dot:hover {
    background-color: #717171
}

.slideshow-container .img_fade {
    animation-name: img_fade;
    animation-duration: 1.5s
}

@keyframes img_fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

#refresh_page {
    display: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: lightgray
}

.button {
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 18px;
    border-radius: 0.5em;
    background: #e8e8e8;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
}

.button:hover {
    border: 1px solid white;
}

.button:active {
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
}




/*region Auto Complete*/
.auto_list_result {
    width: 90%;
    max-height: 200px;
    position: absolute;
    border: 1px dotted #ccc;
    z-index: 99;
    background: #fff;
    margin:0 1em;
    padding: 0.5em;
    border-radius: 0.5em;
    overflow: auto;
    box-shadow: inset 0 0 1px transparent;

}
.auto_list_result ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.auto_list_result ul li {
    padding: 5px 0;
}
.auto_list_result ul li:hover {
    background: #eee;
}
/*endregion*/

/*region Search */
.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.search__input {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #f4f2f2;
    color: #646464;
    padding: 0.7em 2em 0.7em 1em;
    border-radius: 15px;
    width: 100%;
    transition: all ease-in-out .5s;
    margin-right: -2rem;
}

.search__input:hover, .search__input:focus {
    box-shadow: 0 0 1em #00000013;
}

.search__input:focus {
    outline: none;
    background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
    font-weight: 100;
    color: #ccc;
}

.search__input:focus + .search__button {
    background-color: #f0eeee;
}

.search__button {
    border: none;
    background-color: transparent;
    margin-right: 5px;
}
/* Custom marker styling */
.controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}
.search__button:hover {
    cursor: pointer;
}

.search__icon {
    height: 1.3em;
    width: 1.5em;
    fill: #b4b4b4;
}
/*endregion*/

/*region Conversation*/
.chat-conversation {
    display: flex;
    flex-direction: column-reverse;
}
.chat-conversation ul,.chat-preview ul{
    position: relative;
}
.chat-conversation li,.chat-preview li {
    clear: both;
    width: 100%;
}
.chat-conversation .chat-avatar ,.chat-preview .chat-avatar {
    margin: 0 0 0 16px;
}
.chat-conversation .chat-avatar img,.chat-preview .chat-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.chat-conversation .chat-day-title,.chat-preview .chat-day-title {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 12px;
}
.chat-conversation .chat-day-title .title,.chat-preview .chat-day-title .title {
    background-color: var(--bs-border-color);
    position: relative;
    font-size: 13px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 5px;
}
.chat-conversation .chat-day-title:before,.chat-preview .chat-day-title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    right: 0;
    left: 0;
    background-color: var(--bs-border-color);
    top: 10px;
}
.chat-conversation .chat-day-title .badge ,.chat-preview .chat-day-title .badge {
    font-size: 12px;
}
.chat-conversation .conversation-list,.chat-preview .conversation-list {
    /*margin-bottom: 24px;*/
    padding-bottom: 1em;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.chat-conversation .conversation-list .ctext-wrap,.chat-preview .conversation-list .ctext-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
}
.chat-conversation .conversation-list .ctext-wrap-content,.chat-preview .conversation-list .ctext-wrap-content {
    padding: 12px 20px;
    background-color: var(--bs-chat-secondary-bg);
    border-radius: 8px 8px 8px 0;
    color: var(--bs-chat-secondary-text);
    position: relative;
}
.chat-conversation .conversation-list .ctext-wrap-content:before,.chat-preview .conversation-list .ctext-wrap-content:before {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    border-left-color: var(--bs-chat-secondary-bg);
    border-top-color: var(--bs-chat-secondary-bg);
    right: auto;
    left: 0;
    bottom: -10px;
}
@media (max-width: 575.98px) {
    .chat-conversation .conversation-list .ctext-wrap-content .attached-file .attached-file-avatar, .chat-preview .conversation-list .ctext-wrap-content .attached-file .attached-file-avatar {
        display: none;
    }
}
.chat-conversation .conversation-list .conversation-name ,.chat-preview .conversation-list .conversation-name {
    font-weight: 500;
    font-size: 14px;
}
.chat-conversation .conversation-list .dropdown .dropdown-toggle ,.chat-preview .conversation-list .dropdown .dropdown-toggle {
    font-size: 18px;
    padding: 4px;
    color: var(--bs-gray-600);
}
@media (max-width: 575.98px) {
    .chat-conversation .conversation-list .dropdown .dropdown-toggle,  .chat-preview .conversation-list .dropdown .dropdown-toggle {
        display: none;
    }
}
.chat-conversation .conversation-list .chat-time,.chat-preview .conversation-list .chat-time {
    font-size: 12px;
    margin-top: 4px;
    text-align: left;
}
.chat-conversation .conversation-list .message-img ,.chat-preview .conversation-list .message-img {
    border-radius: 0.2rem;
    position: relative;
}
.chat-conversation .conversation-list .message-img .message-img-list ,.chat-preview .conversation-list .message-img .message-img-list {
    position: relative;
}
.chat-conversation .conversation-list .message-img img,.chat-preview .conversation-list .message-img img {
    max-width: 150px;
}
.chat-conversation .conversation-list .message-img .message-img-link ,.chat-preview .conversation-list .message-img .message-img-link {
    position: absolute;
    left: 10px;
    right: auto;
    bottom: 10px;
}
.chat-conversation .conversation-list .message-img .message-img-link li > a,.chat-preview .conversation-list .message-img .message-img-link li > a {
    font-size: 18px;
    color: #fff;
    display: inline-block;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.chat-conversation .right .chat-avatar,.chat-preview .right .chat-avatar {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-left: 0px;
    margin-right: 16px;
}
.chat-conversation .right .chat-time ,.chat-preview .right .chat-time {
    text-align: right;
}
.chat-conversation .right .conversation-list,.chat-preview .right .conversation-list {
    float: right;
    text-align: right;

}
.chat-conversation .right .conversation-list .ctext-wrap ,.chat-preview .right .conversation-list .ctext-wrap {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content,.chat-preview .right .conversation-list .ctext-wrap .ctext-wrap-content {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    background-color: var(--bs-chat-primary-bg);
    color: var(--bs-chat-primary-text);
    text-align: left;
    border-radius: 8px 8px 0px 8px;
}
.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content:before,.chat-preview .right .conversation-list .ctext-wrap .ctext-wrap-content:before {
    border: 5px solid transparent;
    border-top-color: var(--bs-chat-primary-bg);
    border-right-color: var(--bs-chat-primary-bg);
    right: 0px;
    left: auto;
}
.chat-conversation .right .conversation-list .dropdown,.chat-preview .right .conversation-list .dropdown {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
.chat-conversation .right .conversation-list .dropdown .dropdown-menu[style] ,.chat-preview .right .conversation-list .dropdown .dropdown-menu[style] {
    left: 0 !important;
    right: auto !important;
}
.chat-conversation .right .dot,.chat-preview .right .dot {
    background-color: #343a40;
}

.chat-conversation {
    /*height: calc(100vh - 160px);*/
}
.chat-conversation-full {
    height: auto !important;
}


.chat-input-section {
    background-color: var(--bs-card-bg);
    height: 60px;
}
@media (max-width: 991.98px) {
    .chat-conversation {
        /*height: calc(100vh - 180px);*/
    }
    .chat-input-section {
        position: fixed;
        height: 60px;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
    }
}

.chat-input-links .list-inline-item:not(:last-child) {
    margin: 0;
}

.animate-typing .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-left: -1px;
    background: #fff;
    -webkit-animation: wave 1.3s linear infinite;
    animation: wave 1.3s linear infinite;
    opacity: 0.6;
}
.animate-typing .dot:nth-child(2) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.animate-typing .dot:nth-child(3) {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes wave {
    0%, 60%, 100% {
        -webkit-transform: initial;
        transform: initial;
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes wave {
    0%, 60%, 100% {
        -webkit-transform: initial;
        transform: initial;
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}
/*endregion*/

/*region Tracking Order*/

.cd__main{
    background: linear-gradient(to right, #8e9eab, #eef2f3) !important;
}
#tracking{
    background: #fff
}
.tracking-detail {
    padding: 3rem 0;
}
#tracking {
    margin-bottom: 1rem;
}
[class*="tracking-status-"] p {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
[class*="tracking-status-"] {
    padding: 1.6rem 0;
}
.tracking-list {
    border: 1px solid #e5e5e5;
}
.tracking-item {
    border-left: 4px solid #00ba0d;
    position: relative;
    padding: 2rem 1.5rem 0.5rem 2.5rem;
    font-size: 0.9rem;
    margin-left: 3rem;
    min-height: 5rem;
}
.tracking-item:last-child {
    padding-bottom: 4rem;
}
.tracking-item .tracking-date {
    margin-bottom: 0.5rem;
}
.tracking-item .tracking-date span {
    color: #888;
    font-size: 85%;
    padding-left: 0.4rem;
}
.tracking-item .tracking-content {
    padding: 0.5rem 0.8rem;
    background-color: #f4f4f4;
    border-radius: 0.5rem;
}
.tracking-item .tracking-content span {
    display: block;
    color: #767676;
    font-size: 13px;
}
.tracking-item .tracking-icon {
    position: absolute;
    left: -0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    font-size: 1.1rem;
    background-color: #fff;
    color: #fff;
}

.tracking-item-pending {
    border-left: 4px solid #d6d6d6;
    position: relative;
    padding: 2rem 1.5rem 0.5rem 2.5rem;
    font-size: 0.9rem;
    margin-left: 3rem;
    min-height: 5rem;
}
.tracking-item-pending:last-child {
    padding-bottom: 4rem;
}
.tracking-item-pending .tracking-date {
    margin-bottom: 0.5rem;
}
.tracking-item-pending .tracking-date span {
    color: #888;
    font-size: 85%;
    padding-left: 0.4rem;
}
.tracking-item-pending .tracking-content {
    padding: 0.5rem 0.8rem;
    background-color: #f4f4f4;
    border-radius: 0.5rem;
}
.tracking-item-pending .tracking-content span {
    display: block;
    color: #767676;
    font-size: 13px;
}
.tracking-item-pending .tracking-icon {
    line-height: 2.6rem;
    position: absolute;
    left: -0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #d6d6d6;
}
.tracking-item-pending .tracking-content {
    font-weight: 600;
    font-size: 17px;
}

.tracking-item .tracking-icon.status-current {
    width: 1.9rem;
    height: 1.9rem;
    left: -1.1rem;
}
.tracking-item .tracking-icon.status-intransit {
    color: #00ba0d;
    font-size: 0.6rem;
}
.tracking-item .tracking-icon.status-current {
    color: #00ba0d;
    font-size: 0.6rem;
}
@media (min-width: 992px) {
    .tracking-item {
        margin-left: 10rem;
    }
    .tracking-item .tracking-date {
        position: absolute;
        left: -10rem;
        width: 7.5rem;
        text-align: right;
    }
    .tracking-item .tracking-date span {
        display: block;
    }
    .tracking-item .tracking-content {
        padding: 0;
        background-color: transparent;
    }

    .tracking-item-pending {
        margin-left: 10rem;
    }
    .tracking-item-pending .tracking-date {
        position: absolute;
        left: -10rem;
        width: 7.5rem;
        text-align: right;
    }
    .tracking-item-pending .tracking-date span {
        display: block;
    }
    .tracking-item-pending .tracking-content {
        padding: 0;
        background-color: transparent;
    }
}

.tracking-item .tracking-content {
    font-weight: 600;
    font-size: 17px;
}

.blinker {
    border: 7px solid #e9f8ea;
    animation: blink 1s;
    animation-iteration-count: infinite;
}
@keyframes blink { 50% { border-color:#fff ; }  }
/*endregion*/

/*region Radio*/

.radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
}

.radio-tile-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-tile-group .input-container {
    position: relative;
    height: 100px;
    width: 100px;
    margin: 0.5rem;
}

.radio-tile-group .input-container .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid  var(--bs-primary);
    border-radius: 5px;
    padding: 0.5rem;
    transition: transform 300ms ease;
}

.radio-tile-group .input-container .icon svg {
    fill: var(--bs-primary);
    width: 1rem;
    height: 1rem;
}
.radio-tile-group .input-container .icon  {
    color: var(--bs-primary);
}

.radio-tile-group .input-container .radio-tile-label {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--bs-primary);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile {
    background-color: var(--bs-primary);
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary-text);
    transform: scale(1.1, 1.1);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon  {
    fill: var(--bs-primary-text);
    color: var(--bs-primary-text);
    background-color: var(--bs-primary);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary);
}

/*endregion*/

/*region Button*/
/* From Uiverse.io by sihamjardi */
.icon-button {
    position: relative;
    border-radius: 6px;
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid #df1c27;
    background-color: #df1c27;
    overflow: hidden;
}

.icon-button,
.button__icon,
.button__text {
    transition: all 0.3s;
}

.icon-button .button__text {
    transform: translateX(35px);
    color: #fff;
    font-weight: 600;
}

.icon-button .button__icon {
    position: absolute;
    transform: translateX(109px);
    height: 100%;
    width: 39px;
    background-color: #df1c27;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button .fa {
    width: 20px;
}

.icon-button:hover {
    background: #cc0000;
}

.icon-button:hover .button__text {
    color: transparent;
}

.icon-button:hover .button__icon {
    width: 148px;
    transform: translateX(0);
}

.icon-button:active .button__icon {
    background-color: #b20000;
}

.icon-button:active {
    border: 1px solid #b20000;
}

/*endregion*/

/*region widget*/
.widget-card {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 250px;
}
.widget-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff007f;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 20px;
    margin-right: 10px;
}
.widget-text {
    text-align: center;
    color: #333;
    font-family: "PlusJakartaSans", ui-rounded
}
/*endregion*/

.row>* {
    padding-right: calc(var(--bs-gutter-x)* .2);
    padding-left: calc(var(--bs-gutter-x)* .2);

}

/*region Side Bar*/
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}

/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
    background:var(--bs-sidebar-bg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    width: 100%;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -200px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/
.navbar {
    padding: 0;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
    background-color: #1c1c1c;
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;

}
.sidebar-nav li:first-child a {
    color:  var(--bs-sidebar-menu-item-color);
    background-color:  var(--bs-sidebar-bg);
}
.sidebar-nav li:before {
    background-color: var(--bs-primary-bg);
}

.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;

}

.sidebar-nav li a {
    display: block;
    color: var(--bs-sidebar-menu-item-color);
    text-decoration: none;
    padding: 1em 15px 1em 15px;
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
    color: var(--bs-sidebar-menu-item-color);
    text-decoration: none;
    background-color: transparent;
}
.sidebar-header {
    text-align: center;
    font-size: 20px;
    position: relative;
    width: 100%;
    display: inline-block;
}
.sidebar-brand {
    position: relative;
    color:var(--bs-primary-text);
    background:var(--bs-primary-bg);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.sidebar-brand a {
    color: var(--bs-sidebar-menu-item-color);
}
.sidebar-brand a:hover {
    color: var(--bs-sidebar-menu-item-color);
    text-decoration: none;
}
.dropdown-header {
    text-align: center;
    font-size: 1em;
    color: var(--bs-sidebar-menu-item-color);
    background:#212531;
    background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
}
.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #222;
    box-shadow: none;
}
.dropdown-menu.show {
    top: 0;
}

/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
    position: fixed;
    top: 20px;
    z-index: 999;
    display: block;
    width: 32px;
    height: 32px;
    margin-left: 15px;
    background: transparent;
    border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
    outline: none;
}
.hamburger.is-closed:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
    background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
    top: 5px;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
    bottom: 5px;
    -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed:hover .hamb-top {
    top: 0;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
    bottom: 0;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-open .hamb-top {
    -webkit-transform: rotate(45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
    -webkit-transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px,0,0);
    -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.page_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 1;
}
/*endregion*/


.list_grid {
    display: grid;
    padding: 0 !important;
    grid-template-columns:1fr 1fr 1fr 1fr;
    list-style-type: none;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 600px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}

.list::-webkit-scrollbar {
    display: none
}

.list_grid .item_body {
    width: 100%;
    margin: .5em;

}

.item {
    flex-shrink: 0;
    text-align: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;

}

.item:last-child {
    position: relative
}

.item:last-child::after {
    position: absolute;
    left: 100%;
    height: 1px;
    width: 20px;
    display: block;
    content: ""
}

.list {
    list-style: none;

    padding: 10px;
    border-radius: 12px
}

.item_body  span{
    font-size: 6pt;
}

.itemspecial_body{
    position: relative;
    height: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;

}
.itemspecial_body span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}
.itemspecial_body img {
    position: absolute;

}
.item_body {
    position: relative;
    display: flex;
    height: 100px;
    width: 85px;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    font-size: 6pt;
}

.list .item:not(:last-child) {
    margin-right: 10px
}

.item a {
    text-align: center
}

.item span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}
.high-priority-1{
    z-index: 999999;
}
.viewport {
    max-width: 100%;
    width: 100%;

}
.no-wrap {
    white-space: nowrap;
    overflow: hidden; /* Optionally hide overflow */
    text-overflow: ellipsis; /* Optionally add ellipsis if overflowed */
}
.quantity {
    display: inline-block;
    border-radius: .5em;
    border: 1px solid
}

.quantity .input-text.qty {
    width: 60px;
    height: 39px;
    padding: 0 5px;
    text-align: center;
    background-color: transparent;
    border: 0 solid #efefef
}

.quantity.buttons_added {
    text-align: left;
    position: relative;
    white-space: nowrap;
    vertical-align: top
}

.quantity.buttons_added input {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    box-shadow: none
}

.quantity.buttons_added .minus, .quantity.buttons_added .plus {
    padding: 7px 10px 8px;
    height: 41px;
    background-color: #fff;
    border: 0 solid #efefef;
    border-radius: .5em;
    cursor: pointer;
    font-size: 10pt;
    font-weight: bold;
}
.btn-outline-light{
    color:#1a1e21;
    border-color:#1a1e21;
}
.btn-outline-green{
    color: #026102;
    border-color:#026102;
}
.btn-outline-blue{
    color: #0b1185;
    border-color: #0b1185;
}
.btn-outline-red{
    color: #df0027;
    border-color: #df0027;
}
.quantity.buttons_added .minus {
    border-right: 0
}

.quantity.buttons_added .plus {
    border-left: 0
}

.quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover {
    background: #eee
}

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

.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus {
    outline: none
}



.profileImage {
    margin-top: 1em;
    width: 100px;
    height: 100px;
}

.textContainer {
    width: 100%;
    text-align: left;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.name {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.profile {
    font-size: 0.84em;
    letter-spacing: 0.2px;
}


.btn-outline-whatsapp{
    color: #075e54;
    border-color: #075e54;
}
.btn-outline-telegram{
    color: #27A7E7;
    border-color: #27A7E7;
}
.btn-outline-facebook{
    color: #0165E1;
    border-color: #0165E1;
}
.btn-outline-instagram{
    color: #C13584;
    border-color: #C13584;
}
/*region Spinner*/

.spinner {
    background-image: linear-gradient(var(--bs-primary) 35%,var(--bs-secondary));
    width: 100px;
    height: 100px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0 -5px 20px 0 var(--bs-primary), 0 5px 20px 0 var(--bs-secondary);
}

.spinner1 {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
}

@keyframes spinning82341 {
    to {
        transform: rotate(360deg);
    }
}
/*endregion*/