body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100vh;
}

/* Cari apa di Indomata */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    width: 2.375rem;
    height: 1.2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    color: #808080;
    margin-top: 10px;
}

.has-search input {
    width: 400px;
}

@media (max-width: 768px) {
    .has-search input {
        width: 180px;
    }
}

/* End of Indomata search */

/* Navbar Menu : Tentang Kami, Hubungi Kami etc */
#navbarMenu {
    width: 80vw;
    padding: 10px;
}

#navbarMenu a,
#navbarMenu a:link,
#navbarMenu a:visited {
    color: white;
    font-size: 20px;
}
#navbarMenu a:hover {
    color:darkblue;
    background-color: greenyellow;
}

#navbarSupportedContent {
    background-color: #192857;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

@media (max-width: 768px) {
    #navbarSupportedContent {
        background-color: white !important;
        max-width: 250px;
        line-height: 22px;
    }

    #navbarSupportedContent .nav-link {
        color: #000 !important;
        margin-left: 20px;    
    }

    #navbarMenu a:hover {
        color:darkblue;
        font-weight:bold;
        background-color: white;
    }
}

/* End of Navbar Menu */

/* Login Modal */

#LoginModal.close-btn {
    background-color: #0294AC;
    border: none;
    color: #000;
    padding: 1px 8px;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
}

/* Darker background on mouse-over */
#LoginModal.close-btn:hover {
    color: #fff;
    background-color: RoyalBlue;
}

#LoginModal.modal {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#LoginModal.modal-dialog {
    margin: 120px auto;
}


#Password {
    background-image: url('/resource/protected.jpg');
    background-repeat: no-repeat;
    background-position: right;
    padding-left: 5px;
}

/* End of Login Modal */


/* Cart/MyTrans/Wishlist Count Label */

.badge {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 50%;
}

.badge.badge-warning {
    font-size: 8px;
    background: #ff0000;
    color: #fff;
    vertical-align: top;
    margin-left: -10px;
}

/* End of Cart/Wishlist Count Label */


/* Logout dropdown menus */
.userMenu {
    position: relative;
    display: inline-block;
}

.userMenu:hover .userMenu-dropdown-content {
    display: block;
}

.userMenu .userMenu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    line-height: 30px;
    padding-left: 10px;
    width: 110px;
    float: left;
    z-index: 1;
}

.userMenu-dropdown-content a {
    text-decoration: none;
    text-align: left;
    float: left;
    cursor: pointer;
}

/* END OF HEADER SECTION */



/* CONTAINER SECTION */

.container {
    width: 100vw;
    height: calc(100% - 115px);
}


/* Store Products, consisting of 2 columns : (1)Side Menu, (2)Banners/Product Images (Image-Grid) */

.store-products {
    display: flex;
}

/* 1. Side Menu */
.product-menu {
    width: 170px;
    background-color: #f4f4f4;
    padding: 10px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
}

.product-menu .ui-accordion-content {
    overflow: auto;
    height: auto !important;
}

.product-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
}

.product-menu ul::-webkit-scrollbar {
    display: none;
}

.product-menu li {
    padding: 5px;
    margin: 3px -20px;
    background-color: #e0e0e0;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    width: 170px;
    scrollbar-width: none;
}

.product-menu li:hover {
    background-color: #d0d0d0;
}

@media (max-width: 768px) {
    .product-menu {
        width: 140px;
    }

    .product-menu li {
        width: 140px;
    }
}


/* End of Side Menu */


/* 2. Store Contents */
.store-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-top: 10px;
}
/* End of Store Contents */


/* 2a. Store Banners */
.store-banner img {
    width: 100%;
    height: auto;
}

/* 2b. Store Products */
.image-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0px;
    }
}

.image-grid img {
    display:flex;
}

/* End of Store Products */


/* Image Grid class for getStores function */

.store-card {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.slider img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .store-card {
        width: 200px;
        height: 140px;
    }
}

/* Sales Order */

.orders-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    text-align: center;
}

.orders-sheet.column.first {
    flex: 0 0 30%;
}

.orders-sheet.column.second {
    flex: 0 0 30%;
}

.orders-sheet.column.third {
    flex: 0 0 40%;
}


@media (max-width: 768px) {
    .orders-sheet {
        grid-template-columns: repeat(1, 1fr);
    }

    .orders-sheet.column {
        flex: 1 1 100%;
    }
}

/* End of Sales Order */

/* Sales Cart */

.sales-cart {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 20px;
}

.sales-cart.column.first {
    flex: 0 0 70%;
}

.sales-cart.column.second {
    flex: 0 0 30%;
}

.cart-product {
    width: 120px;
    height: 60px;
}

.operator {
    cursor: pointer;
}

@media (max-width: 768px) {
    .sales-cart {
        grid-template-columns: repeat(1, 1fr);
        font-size: 11px;
    }

    .sales-cart.column {
        flex: 1 1 100%;
    }

    .cart-product {
        width: 80px;
        height: 40px;
    }

    .operator {
        width: 16px;
        height: 16px;
    }

    #btnPay {
        font-size: 12px;
    }
}

/* End of Sales Cart */

/* Image slider captions */
figure {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

figure figcaption {
    display: block;
    color: black;
    font-size: 14px;
    text-align: center;
}

/* End of Image slider captions */

/* End of Image Grid class for getStores function */


/* Table pagination */
#pagination {
    float: left;
    cursor: pointer;
}

#pagination .active {
    font-weight: bold;
    display: inline-block;
    padding: 4px 15px;
    background-color: lightskyblue;
    border-radius: 5px;
}

#pagination .paging {
    color: #000000;
    display: inline-block;
    padding: 4px 10px;
}
/* End of Table pagination */



/* IMA Chat */
.open-chat {
    background-color: transparent;
    color: white;
    border: none;
    outline: hidden;
    cursor: pointer;
    opacity: 0.5;
    position: fixed;
    bottom: 10px;
    right: 0px;
    width: 280px;
}

.open-chat:focus {
    outline: hidden;
}

.ui-dialog-titlebar {
    border: 1px solid #34495e;
    color: white;
    background: #0194AC;
    box-shadow: 5px 5px #000000;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none;
    border: 0;
}

.ui-dialog-titlebar-close {
    position: relative;
    float: right;
}

.ui-dialog-titlebar-close:after {
    position: absolute;
    font-family: FontAwesome;
    font-size: 1.0em;
    top: 0;
    right: 2px;
    content: "\f00d ";
    color: white;
}

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #EADDCA;
    overflow: auto;
    zoom: 1;
}

.ButtonClass {
    background-color: blue;
    padding: 3px;
    width: 200px;
    color: white;
    border-radius: 5px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 0.8;
}

#ChatRoom {
    max-height: 400px;
    overflow: hidden;
}

.chat-iframe {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/* End of IMA Chat */