:root {
    --derma-theme-gradient-color: #6F7072;
    --derma-theme-font-color: #6f7072;
    --derma-theme-header-color: #e5e3e4;
    --derma-theme-blue-color: #54C5DE;
    --derma-theme-green-color: #D4DD2E;
    --derma-theme-border-color: #e8e9eb;
    --green-success: #7AE62E;
    --grey-remaining: #DBDBDB;
    --derma-theme-footer: #E5E3E4;
    --derma-button-product-color: #E0E1E3;
    --store-header-menu-color: #00376D;
    --store-cart-count-color: #FD0100;
    --store-wrapper-size: 90%;
    /*Added by Maulana on 20230823*/
    --store-color-logo-1: #d3dd2d;
}

.pac-container {
    background-color: #FFF;
    z-index: 21;
    position: fixed;
    display: inline-block;
    float: left;
}

.form-store {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-radius: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
}

#pac-input {
    border-radius: 0px !important;
    top: 10% !important;
    left: 50% !important;
    width: 90% !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid !important;
    padding-left: 1rem !important;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 95% center;
}

.btn-store {
    background-color: var(--derma-button-product-color) !important;
    color: var(--derma-theme-font-color) !important;
}

/*Added by Maulana on 20230409*/
.btn-store-selected {
    background-color: var(--derma-theme-blue-color) !important;
    color: #fff !important;
}

.btn-store-submit,
.btn-store-submit :hover,
.btn-store-submit :active,
.btn-store-submit :focus {
    /*Modified by Maulana on 20250107*/
    /*background-color: #0F6FAB !important;*/
    background-color: #F88424 !important;

    color: #fff !important;
}

.store-text-color-btn {
    color: var(--derma-theme-blue-color);
}

.btn-cart-wrapper {
    width: var(--store-wrapper-size) !important;
}

.breadcrumb .breadcrumb-item:after {
    content: "\00a0 /" !important;
}

.product-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 3em;
}

.img-marker {
    width: 2em;
}

.img-marker-wrapper {
    min-width: 4em;
}

#map {
    height: 25em !important;
}

#wrapper-address {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.label-store {
    color: var(--derma-theme-font-color) !important;
}

.modal {
    z-index: 20 !important;
}

.modal-backdrop {
    z-index: 10 !important;
}

.img-search-product {
    width: 1em;
}

.icon-cart {
    width: 2.3em;
}

.icon-user {
    width: 2.3em;
    height: 2.3em;
}

.bg-cart-count {
    background-color: var(--store-cart-count-color) !important;
}

.store-wrapper {
    width: var(--store-wrapper-size) !important;
}

/*body {
    background-color: #fff !important;
}*/

.svg-icon {
    width: 1.5em;
    fill: var(--derma-theme-font-color);
}

.h-1em {
    height: 1em;
}

.offcanvas {
    z-index: 9999 !important;
}

.bottom-icon {
    width: 1.5em;
}

#bottomNav {
    z-index: 10 !important;
}

.menu-item .menu-link .menu-icon {
    margin-right: 1rem !important;
}

.sales-status-0 {
    background-color: var(--derma-theme-font-color);
    color: white;
}

.sales-status-1 {
    background-color: #0970FB;
    color: white;
}

.sales-status-2 {
    background-color: #DC3640;
    color: white;
}

.sales-status-3 {
    background-color: #218853;
    color: white;
}

/*Added by Maulana on 20240414*/
.sales-status-4 {
    background-color: #DC3640;
    color: white;
}

.sales-status-5 {
    background-color: var(--derma-theme-font-color);
    color: white;
}

/*Added by Fahmi on 20230412*/
.sales-status-6 {
    background-color: #F9D949;
    color: white;
}

/*Added by Maulana on 20231130*/
.sales-status-7 {
    background-color: #dc3545 !important;
    color: white;
}

.nav-home-wrapper {
    /*Modified by Fahrel on 20240313*/
    /*background-image: url("/images/eCommerce/bg-blue-derma.png");*/
    /*Modified by Fahrel on 20240625*/
    /*background-color: #F88424;*/
    background-color: white;

    background-size: cover;
}

#newProducts .slick-list {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.product-flex {
    flex: 0 0 50%;
}

.text-selected-store {
    user-select: none;
}

.section-border {
    border: 1px solid #cdcdcd;
    border-radius: 0.625rem !important;
}

/*Added by Maulana on 20230329*/
#thumbnail-home-mobile {
    margin-top: 70px;
}

/*Added by Maulana on 20230417*/
#body {
    padding-top: 78px !important;
    padding-bottom: 52.5938px !important;
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .product-flex {
        flex: 0 0 20%;
    }

    #content-home {
        /*Modified by Fahrel on 20231024*/
        /*margin-top: 138.25px;*/
        margin-top: 35.25px;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .product-flex {
        flex: 0 0 16.66%;
    }

    .text-selected-store {
        user-select: text;
    }

    .icon-user {
        width: 4.5em;
        height: 4.5em;
    }

    /*Added by Maulana on 20230417*/
    #body {
        padding-top: 153.25px !important;
        padding-bottom: 52.5938px !important;
    }
}

/*Added by Maulana on 20230322*/
.form-floating-group input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.text-initial-capitalize {
    text-transform: lowercase
}

    .text-initial-capitalize::first-letter {
        text-transform: uppercase;
    }


/*Added by Maulana on 20230326*/
.toastr {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

/*Added by Maulana on 20230330*/
.widget-product {
    border: 2px solid var(--derma-theme-border-color);
    border-radius: 5px;
    width: 10em;
}

.plus-icon {
    fill: var(--derma-theme-blue-color) !important;
    width: 1.9em;
}

.minus-icon {
    fill: var(--derma-theme-border-color) !important;
    width: 1.9em;
}

/*Added by Maulana on 20230409*/
.daterangepicker .drp-calendar {
    max-width: 100% !important;
}

/*Added by Maulana on 20230411*/
#toastr-container > div {
    opacity: 0.9 !important;
}

/*Added by Maulana on 20230704*/
.rpt-viewer {
    height: 800px;
}

/*Added by Maulana on 20230705*/
.img-fluid {
    max-height: 100% !important;
}

.image-thumb {
    width: 6em;
    height: 6em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Added by Maulana on 20230824*/
.disabled-pull-down {
    overscroll-behavior-y: contain !important;
}

/*Added by Maulana on 20231010*/
.menu-item .menu-link .active {
    background-color: #f9f9f9 !important;
    color: #009ef7 !important;
}

/*Commented by Maulana on 20240624*/
/*.menu-item a {
    color: black !important;
}*/

/*Added by Fahrel on 20240227*/
@media only screen and (min-width: 850px) {
    .desktop-event {
        width: 20% !important;
    }
}

/*Added by Maulana on 20240402*/
.btn.btn-primary {
    color: white;
    border-color: #F88424 !important;
    background-color: #F88424 !important;
}

    .btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary, .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active, .btn.btn-primary.show, .show > .btn.btn-primary {
        color: white;
        border-color: #F88424 !important;
        background-color: #F88424 !important;
    }

.page-link.active, .active > .page-link {
    color: white;
    background-color: #F88424 !important;
}

/*Added by Maulana on 20240531*/
.footsty {
    background-color: #f88424 !important;
}

/*Added by Fahrel on 20240801*/
.btn-store:hover {
    background-color: #f88424 !important;
    color: white !important;
}