@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary_abu: #99A6C0;
    --primary_green: #67C57B;
    --pink_light: #ff99cc;
    --pink_rabbani: #EC088D;
    --pink_bani: #DD0B86;
    --dark_text: #202C44;
    --green-2: #27AE60;
    --checklist: rgba(189, 195, 213, 0.90);
    --red: #EB5757;
    --white_text: #FFFFFF;
    --second-text-color: #99A6C0;
    --main-text-color: #202C44;
    --kuning_emas: #F7C11D;
}

.navbar {
    position: fixed;
    width: 100%;
    max-width:  420px;
    bottom: 0;
    z-index: 1000;
}

.box-shadow {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 576px) { .container { max-width: 420px !important; }}

@media (min-width:770px) {
    #navbar-desktop {
        display: inline;
    }
}

@media (max-width:768px) {
    #navbar-desktop {
        display: none;
    }
}

body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
    background: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

.tab-pane form {
    cursor: pointer;
}

.data-kosong {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 768px) {
    .carousel-control-prev {
        display: none !important;
    }
    .carousel-control-next {
        display: none !important;
    }
}
/* Preloader */

#preloader { 
    display: flex;
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--pink_light); 
    align-items: center;
    justify-content: center;
}

#preloader img {
    width: 80px;
    height: 80px;
    animation: fadeIn 2s;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#processing { 
    display: flex;
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: #EC088D20; 
    align-items: center;
    justify-content: center;
}


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* .promo-modal .promo-back.scrolled {
    background: lightblue;
} */

/* .promo-modal .promo-back {
    padding-top:10px;
    padding-left:12px;
    padding-bottom:10px;
    background-color: #00000040;
    position: fixed;
    top: 0;
    width: 100%;
} */

.promo-modal .promo-back {
    padding-top:10px;
    padding-left:12px;
    padding-bottom:10px;
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.5s ease-in-out;
    max-width: 420px;
}

.promo-back-active {
    background-color:#fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
    transition: 0.5s ease-in;
    max-width: 420px;
}

.promo-modal {
    background: #FFFFFF;
    min-height: 100vh;
}

.promo-modal .promo-detail {
    margin-top:230px;
    padding-top:10px;
}

.promo-modal .promo-banner-active {
    height:230px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFFFFF !important;
    transition: 0.5s ease-in-out;
}

.promo-modal .promo-date {
    padding: 10px 5px 10px 5px;
    margin-top:12px;
    margin-left:5px;
    margin-right:5px;
    background:#fff;
    border-radius:10px;
    box-shadow: 0px 0px 10px 2px rgba(211,211,211,0.5);

    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    color: var(--second-text-color);
}

.promo-description {
    padding:5px;
    margin-top:18px;
    margin-bottom:12px;
    margin-left:5px;
    margin-right:5px;
    background: linear-gradient(90deg, rgba(236,8,141,1) 0%, rgba(236,8,141,1) 30%, rgba(215,7,151,1) 35%, rgba(201,7,158,1) 45%, rgba(0,0,255,1) 100%);
    border-radius:50px;
}

.promo-description-detail {
    padding:5px;
    margin-top:12px;
    margin-bottom:12px;
    margin-left:5px;
    margin-right:5px;
    background: #f1f4fa;
    border-radius:20px;
}

.promo-description-sticky {
    position: fixed;
    top: 35px;
    max-width: 420px;
}

.promo-modal .promo-description .snk-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.promo-modal .promo-description .description-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

#promo-detail .promo-banner {
    width: 440px;
    margin-left: 50%;
    transform: translateX(-50%);
}

@media (min-width:800px) {
    .promo-description-sticky {
        width: 420px;
    }
    .promo-modal .promo-back {
        width: 420px;
    }
}

@media (max-width: 420px) {
    .promo-modal .promo-detail {
        margin-top:210px;
    }
}

@media (max-width: 415px) {
    .promo-modal .promo-detail {
        margin-top:230px;
    }
}

@media (max-width: 391px) {
    .promo-modal .promo-detail {
        margin-top:220px;
    }
}

@media (min-width: 370px) and (max-width: 389px)  {
    .promo-modal .promo-detail {
        margin-top:210px;
    }
}

@media (max-width: 360px)  {
    .promo-modal .promo-detail {
        margin-top:200px;
    }
}

/* Preloader */


.half-circle {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background: transparent;
    z-index: 0;
}

.bubble_circle {
    display: table;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 15px;
    position: absolute;
    background: var(--pink_light);
    top: -30px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.20);
    /* z-index: value; if need and change as your need */
}

.eyebrow {
    width: 80px;
    height: 20px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 15px;
    position: absolute;
    background: var(--pink_light);
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2000;
    /* z-index: value; if need and change as your need */
}

.bubble_circle .icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.bubble_circle .icon .icon-tag {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 240% */
    color: #fff;
}

.circle {
    display: flex;
    margin-top: 5px;
    margin-left: 10px;
    width:20px;
    height:20px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    background: var(--green-2);
    border: 4px solid #27ae604d;
}

.outer {
    margin-top: 5px;
    margin-left: 10px;
    background: #27ae604d;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 2px 2px 2px 2px;
}
.inner {
    background: var(--green-2);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin: 2px 2px 2px 2px;
}

.sonar-wrapper {
    height: 100%;
}
  
.sonar-wrapper {
    position: relative;
    z-index: 0;
    overflow: hidden;
}
  
.sonar-emitter {
    position: relative;
    margin: 8px 8px;
    height: 12px;
    width: 12px;
    border-radius: 9999px;
    background-color: HSL(145, 63%, 42%);
}
  
.sonar-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: HSL(145, 63%, 42%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
  
.sonar-wave1 {
    animation: sonarWave 1s linear infinite;
}
  
@keyframes sonarWave {
    from {
      opacity: 0.65;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
}

.navbar-rabbani {
    background-color: var(--pink_rabbani) !important;
}

.navbar-rabbani .nav-item.active a {
    color: #FFFFFF !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.navbar-rabbani .nav-item .active-img,
.navbar-rabbani .nav-item.active .inactive-img {
    display: none;
}

.navbar-rabbani .nav-item.active .active-img,
.navbar-rabbani .nav-item .inactive-img {
    display: inline-block;
}


/* .navbar {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
} */

.main-container {
    background: #ffffff;
    min-height: 100vh;
    flex-grow: 1;
}

.main-container-login {
    background: #ffffff;
    min-height: 100vh;
}

.main-container-product {
    background: #ffffff;
    min-height: 100vh;
}

.main-container-notification {
    background: #ffffff;
    min-height: 100vh;
}

.main-container-product-detail {
    background: transparent;
    min-height: 100vh;
    padding-bottom: 165px;
}

.main-container-stock {
    background: transparent;
    margin-bottom: 140px;
}

.main-container-stock-selesai {
    background: transparent;
    min-height: 100vh;
}

.main-container-promo-detail {
    background: transparent;
    min-height: 100vh;
}

.main-container-report-detailed {
    background: #ffffff;
    min-height: 100vh;
    padding-bottom: 20px;
}

.main-container-pembayaran {
    background: transparent;
    margin-bottom: 140px;
}

.main-container-point {
    background: #FB8AC2;
    min-height: 100vh;
    margin: 0;
}

.main-container-order {
    background: transparent;
    margin-bottom: 70px;
}

.main-container-order-detail {
    background: transparent;
    min-height: 100vh;
    padding-bottom: 60px;
}

.main-container-order-detailed {
    background: #FFFFFF;
    min-height: 100vh;
}

.main-container-user {
    background: #FFFFFF;
    min-height: 100vh;
}

.main-container-order-pelacakan {
    background: #fff;
    min-height: 100vh;
}

.main-container-search-penjualan {
    background: #fff;
    min-height: 100vh;
}

.main-container-order-pesanan {
    background: transparent;
    min-height: 100vh;
}

.main-container-order-pembayaran {
    background: transparent;
    min-height: 100vh;
    padding-bottom: 80px;
}

.main-container-promo {
    background: #FFFFFF;
    min-height: 100vh;
}

.main-container-order-success {
    background: #FB8AC2;
    min-height: 100vh !important;
}

.main-container-order-success-v2 {
    background: #FFFFFF;
    min-height: 100vh;
}

.main-container-product-mandiri {
    background: #FFFFFF;
    min-height: 100vh;
}

.main-container-cart {
    background: transparent;
    margin-bottom: 85px;
}

.pageTop {
    padding: 10px;
}

.pageTop p {
    color: var(--primary_abu);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.pageTop .active-status p {
    color: var(--primary_abu);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.active-status > span, .active-status > p {
    display: inline-flex;
}

.pageTop h1 {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
}

.pageTop .notification {
    color: #99A6C0;
    font-size: 32px;
    font-weight: 400;
    cursor: pointer;
}

/* Mini Dashboard */

.mini-dashboard {
    background: var(--pink_light);
    padding: 15px 0 15px 0;
    margin: 0;
    border-radius: 20px;
}

.statistic-board .icon-statistic {
    margin-right: 5px;
    background:rgba(255, 255, 255, 0.20);
    padding:6px;
    border-radius:50%;
}

.statistic-board .poin-statistic {
    font-family: 'Sarabun', sans-serif;
    font-size:18px;
    font-weight:500;
}

.statistic-board sup {
    font-size: 10px;
}

.statistic-board .penjualan-statistic {
    font-family: 'Sarabun', sans-serif;
    font-size:18px;
    font-weight:500;
}

.statistic-board .text-statistic {
    font-family: 'Sarabun', sans-serif;
    font-size:12px;
    font-weight:400;
}

.statistic-board .text-statistic img {
    height: 10px !important;
    margin-left: 5px !important;
}
@media (max-width: 376px) {
    .statistic-board .poin-statistic {
        font-size:15px;
    }
    
    .statistic-board .penjualan-statistic {
        font-size:15px;
    }
    
    .statistic-board .text-statistic {
        font-size:11px;
    } 
}

@media (max-width: 282px) {
    .statistic-board .icon-statistic {
        padding:6px;
    }

    .statistic-board .icon-statistic img {
        width: 10px !important;
        height: 10px !important;
    }

    .statistic-board sup {
        font-size: 8px;
    }

    .statistic-board .poin-statistic {
        font-size:14px;
    }
    
    .statistic-board .penjualan-statistic {
        font-size:14px;
    }
    
    .statistic-board .text-statistic {
        font-size:8px;
    } 

}

/* Login */

#login-section .illus-image {
    margin-top: 20px;
    margin-bottom: 30px;
}

#login-section .title {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 100% */
}

#login-section .sub-text {
    color: gray;
    /* body_text */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
    margin-top: 10px;
    margin-bottom: 30px;
}

#login-section .sub-text .link-text {
    font-weight: 600;
    color: #9B5A1E;
}

#login-section .sub-text .link-text a {
    font-weight: 600;
    color: #9B5A1E;
    text-decoration: none;
}

#login-section .fixed-bot {
    left: 20%;
    right: 20%;
    position: fixed;
    bottom: 5px;
}

.login-input input{

    height: 40px;
    background: rgba(234, 235, 239, 0.40);
    border-radius: 20px;
    border: none;

}

.login-input input::placeholder {
    color: var(--checklist);
}


.login-input input:focus{

    box-shadow: none;
    background: rgba(234, 235, 239, 0.40);
    border: none;


}

.login-button,
.login-button:active,
.login-button:hover {
    border-radius: 20px;
    background: var(--pink_rabbani);
    border: none;
    margin-top: 20px;
    
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}


.login-button:disabled {
    border-radius: 20px;
    background: #EAEBEF;
    color: var(--primary_abu);
    border: none;
    margin-top: 20px;
}

.transparent {
    background: rgba(234, 235, 239, 0.40) !important;
    border: none;
}

.left-border-none {    
    border-radius: 20px;
}
.right-border-none {
    border-radius: 20px;
}
/* Login */

/* Mini Dashboard */

.feature-button button {
    border: none;
}

.feature-button .feature-items {
    background:rgba(255, 153, 204, 0.40);
    padding:20px;
    border-radius:10px;
}

.feature-button .spinner-border {
    width: 24px;
    height: 24px;
    display: none;
}

.feature-button .text {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-top: 12px;
}

#banner .container h4 {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

#banner .container .btn-show-all {
    position: relative;
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 20px 0 10px;
    
    color: #333;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400; 
}

#banner .container .btn-show-all .icon {
    color: var(--primary_abu);
    font-size: 10px;
    position: absolute;
    top:5px;
    right: 6px;
}

#banner-kitalog .container h4 {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}


/* Bootstrap Carousel */

.carousel-inner .carousel-item img {
    border-radius: 20px;
}

/* Bootstrap Carousel */


/* Slick Carousel */

.slide-promo {
    width: 300px;
    height: auto;
}

.slide-promo img {
    border-radius: 20px
}

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */
  
  .slick-slide {
      margin: 0px 10px;
  }
  
  .slick-slide img {
      width: 100%;
  }
  
  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
      touch-action: auto;
      -ms-touch-action: auto;
  }
  
  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }

@media (max-width: 376px) {
    .slide-promo {
        width: 275px;
    }
}
/* Slick Carousel */


#top .title {
    color: rgba(0, 0, 0, 0.87);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--primary_abu);
 }

.round { 
    border-radius: 50%;
}
/* search input field */

.search {
    position: relative;
      
}

.search input{

    height: 40px;
    text-indent: 30px;
    background: rgba(234, 235, 239, 0.40);
    border-radius: 10px;

}

.search input::placeholder {
    color: var(--checklist);
}


.search input:focus{

    box-shadow: none;
    background: rgba(234, 235, 239, 0.40);
    border: 2px solid #d6d4d4;


}

.search .fa-search{

    rotate: 90deg;
    position: absolute;
    color: #99A6C0;
    top: 10px;
    left: 14px;
    font-size: 18px;

}

.search .product-mandiri input{

    height: 40px;
    text-indent: 30px;
    background: #EC088D20;
    border-radius: 20px;
    color: var(--pink_rabbani) !important;
    border: none;
    text-transform:uppercase

}

.search .product-mandiri input::placeholder {
    color: var(--pink_rabbani);
}

.search .product-mandiri input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.search .product-mandiri .cari {
    background: #EC088D;
    position: absolute;
    right: 14px;
    padding: 4px 20px 4px 20px;
    margin: 5px 0 5px 0;
    border-radius: 20px;
    border: none;
    
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.search .product-mandiri .cari:disabled {
    opacity: 0.3;
    background: #EC088D20;
    color: var(--pink_rabbani);
}

/* search input field */


/* Product */

.product-topbar {
    background: #fff;
    font-family: 'Roboto', sans-serif;
}

.topbar-searching {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.30);
}

.main-container-order-detailed .semi-oval {
    /* background:#EC088D; */
    background: linear-gradient(90deg, rgba(236,8,141,1) 0%, rgba(236,8,141,0.9) 30%, rgba(236,8,141,0.45) 100%);
    border-radius: 50% / 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height:10vh;
    position: relative;
    border: none;
}
.main-container-order-detailed .semi-oval .upload-group {
    width: 100px;
    height: 100px;
    position: relative;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
}
.main-container-order-detailed .semi-oval .user-images {
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

.main-container-order-detailed .semi-oval .user-icon {
    border-radius: 100px;
    background: #00000050;
    width: 28px;
    height: 28px;
    padding: 5px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

/* .semi-oval.upload-group {
    width: 100px;
    height: 100px;
    position: relative;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
} */

.semi-oval .user-images {
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

.product-topbar .sukses-list .dropdown-menu {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-weight: 400;
    border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.product-topbar .title {
    font-size: 18px;
    font-weight: 400;
}

.product-topbar .topbar-status .btn-status {
    position: relative;
    width: 100%;
    padding: 6px 12px 8px 12px;
    border-radius: 50px;
    background: #F1F4FA;
    border: none;
    
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.product-topbar .topbar-status .btn-status i {
    position: absolute;
    top: 9px;
    right: 10px;
}

.product-topbar .topbar-status .dropdown-berlangsung {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-weight: 400;
    border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.dropdown-toggle {
    cursor: pointer;
}

.product-topbar .topbar-status .dropdown-berlangsung .dropdown-item {
    margin-right: 30px;
    cursor: pointer;
}

.product-topbar .topbar-status .dropdown-berlangsung i {
    color: #EC088D;
    font-size: 16px;
    margin-top: 2px;
}

#product-list {
    padding-top: 90px;
}

#product-list .btn-total-data {
    border: 1px solid #828282;
    border-radius: 20px;
    padding: 8px 10px 8px 10px;

    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

#product-list .card {
    border-color: #EC088D30 !important;
    border-radius: 10px !important;
}

#product-list .card .title {
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
    line-height: normal;
}

#product-list .card .text {
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

#product-list .card .bar {
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: #EC088D30;
    margin-bottom: 8px;
}

#product-list .card .bar.active {
    background:#EC088D;
}

#update-product .title {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#update-product .price-title {
    color: var(--primary_green);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#update-product .custom-label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#update-product .value{
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


#update-product input[type=text] {
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#update-product .harga input:focus {
    border: 0;
    border-bottom: 1px solid #000;
}

.product-detail .product-code {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.product-detail .product-img {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
}

.product-detail .product-name {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.product-detail .product-name-search {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.product-detail .product-color-search {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.product-detail .standard-price {
    color: var(--red);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.product-detail .selling-price {
    color: var(--primary_green);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.product-detail .product-mandiri .product-name {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 150% */
}

.product-detail .product-mandiri .selling-price {
    color: var(--primary_green);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.product-detail .btn-ubah {
    width: 130px;
    height: 30px;
    border: 1px solid #99A6C0;
    border-radius: 6px;

    color: #99A6C0;
    font-family: 'Sarabun', sans-serif;
}

.product-detail .btn-ubah:active,
.product-detail .btn-ubah:hover {
    color: #FFFFFF;
    background: #99A6C0;
}

.product-detail .selling-price .price {
    font-family: 'Sarabun', sans-serif;
    line-height: 20px;
    margin-right: 20px;
}

.product-detail .selling-price .status {
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 10px 0 10px;
    margin-left: 10px;
    
    /* text */
    color: var(--primary_green);
    font-family: 'Sarabun', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.product-detail .selling-price .icon {
    margin-right: 5px;
}

.product-detail .selling-price .price .tag-ico {
    rotate: 90deg;
}

.product-detail .selling-price .pieces {
    font-family: 'Sarabun', sans-serif;
    color: #9869D9;
}

.product-detail .selling-price .stock {
    font-family: 'Sarabun', sans-serif;
    color: #99A6C0;
}

.product-detail .text {
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

.product-detail .kategori-pilih {
    color: #99A6C0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

.product-detail .img-color {
    width: 14px;
    height: 14px;
    position: relative;
    display: inline-block;
    top: 3px;
    border-radius: 50%;
}

.product-detail .tambah-icon {
    color: #EC088D;
    width: 14px;
    height: 14px;
}

.product-detail .kategori-icon {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 24px;
}

.product-detail .kategori-icon .icon {
    color: #000000;
    width: 14px;
    cursor: pointer;
    line-height: 24px;
}

.product-detail .select2-customize .select2-selection {
    padding: 10px 10px 15px 10px !important;
    border-color: #99A6C0 !important;
    border-radius: 6px !important;
}

.product-detail .select2-customize .select2-selection--multiple .select2-selection__choice {
    /* background: #99A6C040 !important;
    border: none;
    border-radius: 8px !important;
    padding-right: 10px !important;
    color: #333333; */
    background-color: #99A6C040;
    border: 1px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 4px 4px 0 0;
    padding: 0 6px 0 22px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: relative;
    color: #333333;
}

.product-detail .select2-customize  .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: absolute;
    top: 0;
    right: 0;
    height: 22px;
    width: 22px;
    margin: 0;
    text-align: center;
    color: #e74c3c;
    font-weight: bold;
    font-size: 16px;
    border: none;
}

.product-detail.varian-detail .form-check-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #000;
}

.product-detail.varian-detail .item-detailed .text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #000;
}

.product-detail.varian-detail .item-detailed .form-control {
    border: 1px solid #99A6C0;
    border-radius: 6px;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: #99A6C0;
}

.product-detail.varian-detail .item-detailed .btn-primary {
    border-radius: 100px;
    padding: 6px 10px;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.product-detail.varian-detail .item-detailed .form-control::placeholder {
    color: #99A6C0;
}

.product-detail.varian-detail .item-detailed .title {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px; 
}

.product-detail.varian-detail .item-detailed .form-check-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px; 
}

#product-modal .modal-dialog {
    position: fixed;
    right: -10px;
    bottom: -11px;
    left: -10px;
    z-index: 10040;
    max-width: 420px;
    overflow: auto;
    overflow-y: auto;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

#product-modal .modal {
    --bs-modal-border-top-left-radius: 14px;
}

.btn-eyebrow {
    background: #C4C4C4;
}

.btn-simpan,
.btn-simpan:active,
.btn-simpan:hover {
    width: 100%;
    background: var(--pink_rabbani);
    border: none;
    border-radius: 50px;
    padding: 5px !important;

    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
    color: #FFFFFF;
}

.btn-rabbani-light {
    background: var(--pink_light);
}

#tambah-produk-mandiri .container-tambah-produk-mandiri .btn-simpan-produk {
    border-radius: 100px;
    background: var(--pink_rabbani);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#tambah-produk-mandiri .container-tambah-produk-mandiri .btn-pratinjaw,
#tambah-produk-mandiri .container-tambah-produk-mandiri .btn-pratinjaw:active {
    border-radius: 100px;
    background: #EC088D20;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#tambah-produk-mandiri .container-tambah-produk-mandiri {
    background: #ffffff;
    height: 100vh;
    max-height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* overflow-y: auto; */
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width: 800px) {
    #tambah-produk-mandiri .container-tambah-produk-mandiri {
        max-width: 420px;
    }
}

@media (min-width: 767px) {
    #mobile-topbar {
        display: none;
    }
    #desktop-topbar {
        display: block;
    }
}

@media (max-width: 767px) {
    #mobile-topbar {
        display: block;
    }
    #desktop-topbar {
        display: none;
    }
}

/* Product */


/* Product Detail */

.pr-0 {
    padding-right: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.product-detail-topbar {
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

.back-cart {
    max-width: 420px;
}

.product-detail-topbar .back-cart .button-back {
    width: 45px;
    height: 45px;
    display: table;
    border-radius: 5px;
    background: #F4F6F8;
    z-index: 100;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

.product-detail-topbar .back-cart .button-cart {
    width: 45px;
    height: 45px;
    display: table;
    border-radius: 5px;
    background: #F4F6F8;
    z-index: 100;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

.product-detail-topbar .img-ico {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

.product-detail-topbar .img-ico .badge-container {
    display: table;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    padding: 2px;
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    background: var(--red);
}

.product-detail-topbar .img-ico .badge-container .cart-badge {
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    color: #FFFFFF;
    font-size: 8px;
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.order-cart .badge-container {
    display: table;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    padding: 2px;
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    background: var(--red);
}

.order-cart .badge-container .cart-badge {
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    color: #FFFFFF;
    font-size: 8px;
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.cart-animation {
    width: 40px;
    height: auto;
    position: fixed;
    right: 36%;
    transform: translateX(-20%);
}

/* @media (min-width: 800px) {
    .product-detail-topbar .button-back {
        left: 36%;
        transform: translateX(20%);
    }   
    .product-detail-topbar .button-cart {
        right: 36%;
        transform: translateX(-20%);
    }   
} */

.product-detail-topbar .carousel-inner {
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.modal-detail-image .carousel-inner {
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

/* indicators position */

.product-detail-topbar .carousel-indicators button, .modal-detail-image .carousel-indicators button {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: var(--pink_rabbani);
}

.modal-detail-image .modal-content {
    position: relative;
}

.modal-detail-image .modal-dialog {
    background: #000 !important;
    height: 100%;
}

/* @media (min-width: 768px) {
    .modal-detail-image .modal-dialog {
        left: 33.77%;
    }
} */

.modal-detail-image .modal-content .btn-close {
    padding: 13px 20px 20px 20px;
    border-radius: 10px;
    background: #9E9E9E;
    position: absolute;
    top: -80px;
    right: 10px;
    opacity: 1;
}

.modal-detail-image .modal-content .btn-close i {
    color: #000;
    font-size: 24px;
}

.modal-detail-image .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EC088D' width='3' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}
   
.modal-detail-image .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EC088D' width='3' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    width: 15px !important;
    height: 15px !important;
}

.product-detail-topbar .carousel-indicators, .modal-detail-image .carousel-indicators {
    bottom: -10px;
}

/* indicators position */

.product-detail-topbar .product-image, .modal-detail-image .product-image {
    width: 100%;
    z-index: 99;
}

#imgMaximize .modal-dialog {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#imgMaximize .modal-body {
    padding: 0 !important;
    margin: 0 !important;
}

#imgMaximize .modal-content {
    background-color: transparent !important;
    border: 0px !important;
}

.product-detail-topbar .product-title {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.product-detail-topbar .product-price {
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-topbar .product-discount {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: line-through;
}

.product-detail-topbar .product-label {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.product-detail-topbar .btn-radio {
    border-radius: 100px;
    background: rgba(255, 153, 204, 0.50);
    /* margin-right: 5px; */
    
    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

.product-detail-topbar .btn-warna {
    border-radius: 100px;
    background: #F0F1F4;
    border: none;
    padding: 6px 15px 6px 15px;

    /* text */
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 200% */
}

.product-detail-topbar .btn-ukuran {
    border-radius: 100px;
    background: #F0F1F4;
    border: none;

    /* text */
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

#product-estimation .estimasi {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#product-estimation .time {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#product-detail-description {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

#product-detail-description .title {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#product-detail-description .detail-description {
    color: #6A6A6A;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#product-detail-description .moreless-button {
    color: #65CADF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#product-detail-description .moreless-icon {
    font-size: 14px;
    color: #65CADF;
}

#tambah-keranjang .container-tambah-keranjang {
    background: #ffffff;
    height: 100vh;
    max-height: 150px;
    max-width: 420px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

.container-tambah-keranjang .btn-discount {
    border-radius: 100px;
    background: rgba(101, 202, 223, 0.15);

    /* text */
    color: #65CADF;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-tambah-keranjang .btn-discount img {
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
}

.container-tambah-keranjang .text-price {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-tambah-keranjang .product {
    position: relative;
}

.container-tambah-keranjang .product img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.10);
}

.container-tambah-keranjang .product .maximize {
    position: absolute;
    bottom: 3px;
    right: 2px;
    z-index: 10;
    color: #FFFFFF;
}

.container-tambah-keranjang .product i {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #75757540;
    height: 19px;
    width: 19px;
    font-size: 9px;
    border-radius: 10px;
    rotate: 45deg;
}

.container-tambah-keranjang .product i:active {
    border: 1px solid var(--pink_rabbani);
}

.container-tambah-keranjang .btn-order-langsung {
    border-radius: 100px;
    background: var(--pink_rabbani);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-tambah-keranjang .btn-tambah-keranjang,
.container-tambah-keranjang .btn-tambah-keranjang:active {
    border-radius: 100px;
    background: #EC088D20;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* Product Detail */


/* Stock Opname */

.stock-opname{
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    background: var(--pink_light);
    padding: 24px 0 24px 0;
    margin: 0;
    border-radius: 10px;
}

#stock-opname {
    padding-top: 70px;
}

.stock-topbar {
    background: #fff;
}

.stock-topbar .title {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.topbar-icon {
    margin-top: 13px;
}

.stock-opname .label {
    margin-top: -10px;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.stock-opname .invoice-data {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.stock-opname .text-invoice {
    padding-right: 0 !important;
    padding-top: 1px;
}

.stock-opname .custom-date {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding:0;
    background:transparent;
    color:white;
    border:none;
}

.stock-opname .text-date {
    padding-top: 2px;
}

.stock-opname .text-total {
    margin-top: -10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

}

.stock-opname .number-total {
    font-family: 'Sarabun', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.separator {
    margin-top: -10px;
}

.separator .line {
    border: 1px solid #ffffff;
    opacity: 1;
}

.stock-opname input[type="date"] {
    position: relative;
}
  
.stock-opname input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}
  
.stock-opname input[type="date"]:before {
    color: transparent;
    background: none;
    display: block;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    right: -6px;
    color: #fff;
}

.feature-items-stock {
    position: relative;
    display: table;
    background: #FFFFFF;
    border: none;
    border-radius:10px;
    height: 40px;
    width: 100%;
}

.feature-items-stock .icon-img {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.hover-me {
    position: relative;
    display: inline;
}

.hover-me .popup-text {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background:#00000080 !important;
    padding:5px 10px 5px 10px;
    border-radius: 5px;
    z-index: 100;
    white-space: nowrap;
    text-align: center;

    color:#ffffff !important;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
}

.search-stock {
    position: relative;
      
}

.search-stock input{

    height: 40px;
    text-indent: 30px;
    background: #ffffff(234, 235, 239, 0.40);
    border-radius: 10px;
    border: none;
    color: #828282 !important;
}

.search-stock input::placeholder {
    color: #828282;
}


.search-stock input:focus{

    box-shadow: none;
    background: #ffffff;


}

.search-stock .fa-search{

    rotate: 90deg;
    position: absolute;
    color: #000000;
    top: 12px;
    left: 14px;

}

#stock-items {
    display: flex;
}

#stock-items .container-stock {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 10px 15px 10px;
    margin-top: 10px;
}

.container-stock input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: none;
}

.container-stock input[type="checkbox"]:checked {
    background-color: var(--primary_green);
    border: none;
}

.item-details {
    font-family: 'Sarabun', sans-serif;
}

.item-details .barcode {
    width:30px;
    height:30px;
    position: relative;
    top: -1px;
    margin-right: 6px;
}

.item-details .product-code {
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.item-details .product-name {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
}

.item-details .color-size {
    background: #F1F4FA;
    border-radius: 50px;
    padding: 5px 10px 8px 10px;
    margin-top: 5px;
    border: 1px solid var(--pink_rabbani);

    /* text */
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.price-detail {
    margin-top: 20px;
}

.price-detail .text-label {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.price-detail .text-info {
    margin-top: 5px;
    color: #828282 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.price-detail .form-control {
    border: none;
    border-bottom: 1px solid #828282;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;

    color: #000;
}

.price-detail .text-price {
    color: var(--dark_text);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.item-details .stock-number {
    display: flex;
    margin-top: 20px;
    padding-left: 130px;
    padding-right: 10px;
}

.item-details .stock-number .icon {
    font-size: 20px;
    color: var(--kuning_emas);
}

.item-details .stock-number .plus-minus {
    font-size: 26px;
    color: var(--pink_rabbani);
}

.item-details .stock-number .btn {
    padding: 0;
    border: none;
}

.item-details .stockopname-number {
    display: flex;
    padding-left: 60px;
    padding-right: 10px;
}

.item-details .stockopname-number .icon {
    font-size: 20px;
    color: var(--kuning_emas);
}

.item-details .stockopname-number .plus-minus {
    font-size: 26px;
    color: var(--pink_rabbani);
}

.item-details .stockopname-number .btn {
    padding: 0;
    border: none;
}

/* .item-details .stock-number .btn-number {
    max-width: 26px;
    max-height: 26px;
} */

.item-details .product-stock .form-control {
    border-radius: 10px;
    text-align: center;
    padding: 0;
    border-radius: 0;
    max-width: 30px;
    height: 20px;
    border: none;
    box-shadow: none;
    margin-bottom: 4px;

    /* text */
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 415px) {
    
    .stock-opname .text-invoice {
        padding-top: 2px;
    }

    .stock-opname .custom-date {
        padding-left: 25px;
    }

    input[type="date"]:before {
        margin-bottom: 5px;
    }
    
}

@media (max-width: 392px) {
    
    .stock-opname .text-invoice {
        padding-top: 3px;
    }

    .stock-opname .custom-date {
        padding-left: 22px;
    }
    
}

@media (max-width: 376px) {
    .stock-opname .invoice-data {
        font-size: 12px;
    }
    
    .stock-opname .custom-date {
        font-size: 12px;
        padding-left: 30px;
    }

    input[type="date"]:before {
        margin-bottom: 0 !important;
    }
    
}

.dropdown-toggle::after { 
    content: none; 
} 

.dropdown-menu{
    border-radius: 10px;
}

@media (max-width: 282px) {
    
    .stock-opname .invoice-data {
        font-size: 9px;
    }
    
    .stock-opname .custom-date {
        font-size: 9px;
        padding-top: 5px;
        padding-left: 20px !important;
    }
    
    input[type="date"]:before {
        margin-top: 6px !important;
    }
}

#save-button,.save-button {
    position: fixed; /* Fixed/sticky position */
    bottom: 90px; /* Place the button at the bottom of the page */
    left: 80%;
    transform: translateX(-35%);
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--primary_green); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 100px; /* Rounded corners */
    font-size: 12px; /* Increase font size */
    width: 100px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
}

@media (min-width: 767px) {
    #save-button,.save-button {
        left: 58%;
        transform: translateX(-20%);
    }
}

#stock-modal .modal-dialog {
    position: absolute;
    top: 40%;
    left: 10px;
    right: 10px;
    z-index: 10040;
    overflow: auto;
    overflow-y: auto;
    border-radius: 10px;
}

#stock-modal .confirm-title {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-top: -10px;
    margin-bottom: 10px;
}

#stock-modal .confirm-content {
    color: var(--second-text-color, #99A6C0);
    /* body_text */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#stock-modal .btn-confirm {
    width: 128px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary_green);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 25px;
    /* body_text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#stock-opname-success {
    font-family: 'Roboto', sans-serif;
    background: var(--white_text);
    margin: 0;
    margin-top: 65px;
    min-height: 100vh;
}

#stock-opname-success .img-stock-success {
    margin-top: 20px;
}

#stock-opname-success .text-stock-success {
    color: var(--primary_green);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#stock-opname-success .detail-success .label {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-top: 10px;
}

#stock-opname-success .detail-success .code {
    color: var(--second-text-color);
    /* body_text */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

#stock-opname-success .detail-success .date {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; 
    margin-top: 5px;
}

#stock-opname-success .detail-success .count-number {
    color: var(--green-2);
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-top: 10px;
}

#stock-opname-success .detail-success .detail-label {
    margin-top: 10px;
    color: var(--second-text-color);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 10px;
}

#stock-opname-success .buttons {
    position: fixed; /* Fixed/sticky position */
    bottom: 10px; /* Place the button at the bottom of the page */
    z-index: 99; /* Make sure it does not overlap */
    padding-right: 10px;
}

#stock-opname-success .buttons .cetak-button {
    border-radius: 10px;
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#stock-opname-success .buttons .stock-button {
    border-radius: 10px;
    color: var(--primary_green);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#stock-opname-success .buttons .tambah-button {
    margin-top: 10px;
    border-radius: 10px;
    color: var(--white_text, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/* @media (max-width: 416px) {
    #stock-opname-success {
        height: 830px;
    }
}

@media (max-width: 392px) {
    #stock-opname-success {
        height: 778px;
    }
} */


/* Laporan */

#laporan-topbar {
    background: #ffffff;
    margin-bottom: 68px;
}

#laporan-topbar .separator {
    background:#f5f5f5;
    height:10px;
    padding:0;
}

#laporan-topbar li button.active {
    background: var(--pink_rabbani);
    border-radius: 20px;
}

#laporan-topbar .info-tab .form-control {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    border:none;
    box-shadow: none;
    max-width: 160px;
}

#laporan-topbar .info-tab input[type="date"] {
    position: relative;
    padding: 10px 10px 5px 10px;
    margin-left: -10px;
}

#laporan-topbar .info-tab input::-webkit-date-and-time-value{ text-align:left; }

#laporan-topbar .info-tab input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}
  
#laporan-topbar .info-tab input[type="date"]:before {
    color: transparent;
    background: none;
    display: block;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    
    width: 15px;
    height: 20px;
    position: absolute;
    right: 10px;
    color: #000;
}

#laporan-topbar .info-tab .text-neto {
    color: var(--pink_rabbani);
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
}

#laporan-topbar .info-tab .mini-board .total-po {
    cursor: pointer; 
    border-bottom: 4px solid;
    border-right: 4px solid;
    border-color: #B388FF;
}

#laporan-topbar .info-tab .mini-board .total-po .card-text {
    color: #B388FF; 
    font-weight: 700 !important;
    font-size: 12px !important;
}

#laporan-topbar .info-tab .mini-board .total-po .ico {
    color: #B388FF; 
    padding-left: 5px;
}

#laporan-topbar .info-tab .mini-board .total-terpenuhi {
    cursor: pointer; 
    border-bottom: 4px solid;
    border-right: 4px solid;
    border-color: #67C57B;
}

#laporan-topbar .info-tab .mini-board .total-terpenuhi .card-text {
    color: #67C57B; 
    font-weight: 700 !important;
    font-size: 12px !important;
}

#laporan-topbar .info-tab .mini-board .total-terpenuhi .ico {
    color: #67C57B; 
    padding-left: 5px;
}

#laporan-topbar .info-tab .mini-board .total-sisa {
    cursor: pointer; 
    border-bottom: 4px solid;
    border-right: 4px solid;
    border-color: #F7C11D;
}

#laporan-topbar .info-tab .mini-board .total-sisa .card-text {
    color: #F7C11D; 
    font-weight: 700 !important;
    font-size: 12px !important;
}

#laporan-topbar .info-tab .mini-board .total-sisa .ico {
    color: #F7C11D; 
    padding-left: 5px;
}

#laporan-topbar .info-tab .mini-board .total-persentase {
    cursor: pointer; 
    border-bottom: 4px solid;
    border-right: 4px solid;
    border-color: #99A6C0;
}

#laporan-topbar .info-tab .mini-board .total-persentase .card-text {
    color: #99A6C0; 
    font-weight: 700 !important;
    font-size: 12px !important;
}

#laporan-topbar .info-tab .mini-board .total-persentase .ico {
    color: #99A6C0; 
    padding-left: 5px;
}

#laporan-topbar .info-tab sup {
    font-size: 14px;
    font-weight: 400;
}

#laporan-topbar .info-tab .total-pendapatan {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-top: 5px;
    margin-bottom: 30px;
}

#laporan-topbar .info-tab .total-pendapatan small {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

#laporan-topbar .transaction {
    padding-top: 20px;
    padding-bottom: 20px;
}

#laporan-topbar .transaction .transaction-code {
    color: var(--main-text-color);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */ 
}

#laporan-topbar .transaction .transaction-date {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

#laporan-topbar .omzet {
    position: relative;
    font-family: 'Sarabun', sans-serif !important;
}

#laporan-topbar .omzet .vertical-line-omzet {
    background: blue !important;
    height: 42px;
    width: 5px;
    content: '';
    position: absolute;
    background: white;
    border-radius: 100px;
    z-index: 1;
}


#laporan-topbar .omzet .vertical-line-retur {
    background: var(--pink_rabbani) !important;
    height: 42px;
    width: 5px;
    content: '';
    position: absolute;
    background: white;
    border-radius: 100px;
    z-index: 1;
}

#laporan-topbar .omzet .transaction-code {
    color: var(--main-text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */ 
    margin-left: 10px;
}

#laporan-topbar .omzet .transaction-date {
    color: var(--primary_abu);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-left: 10px;
}

#laporan-topbar .nominal .transaction-nominal {
    color: #000000;

    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

#laporan-topbar .nav {
    background: #ffffff;
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.table-responsive::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#laporan-topbar .nav::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
#laporan-topbar .nav {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide text in the navigation tabs by default */
.nav-item span, .nav-item .active-img {
    display: none;
}

/* Show the one that's active */
.nav-item .active span, .nav-item .active .active-img {
    display: inline-block;
}

.nav-item .active span {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    margin-left: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.nav-item .active .inactive-img {
    display: none;
}

#laporan-topbar .tab-content {
    padding-top: 72px;
}

.info-tab .icon {
    position: relative;
    display: table;
    background: rgba(155, 81, 224, 0.10);
    color: #9B51E0;
    border: none;
    border-radius:50%;
    height: 42px;
    width: 100%;
}

.info-tab .icon .icon-receipt {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* Laporan */


/* Detail Laporan */

.report-detailed-topbar {
    background: #fff;
}

.ticket-container {
    width: 65px;
}

#report-detailed-list {
    padding-top: 120px;
    font-family: 'Sarabun', sans-serif;
}

#report-detailed-list .list-title {
    color: #000000;
    font-weight: 600;
    font-size: 16px;
}

#report-detailed-list .title {
    background:#75757520;
    margin: 0;
    padding: 10px 0 10px 0 !important;

    color: #757575;
    font-size: 16px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#report-detailed-list .text-normal {
    margin: 0;
    padding: 10px 0 10px 0 !important;
    border-bottom: 1px solid #75757520;

    color: #757575;
    font-size: 14px;
}

.items-report-detailed-list .title {
    background:#75757520;
    margin: 0;
    padding: 10px 0 10px 0 !important;

    color: var(--pink_rabbani);
    font-size: 16px;
}

.items-report-detailed-list .text-normal {
    margin: 0;
    padding: 10px 0 10px 0 !important;
    border-bottom: 1px solid #EC088D20;

    color: var(--pink_rabbani);
    font-size: 14px;
}

.report-detailed-topbar .search{
    position: relative;
      
}

.report-detailed-topbar .search input{

    height: 40px;
    text-indent: 30px;
    background: #ffffff;
    border: 1px solid rgba(234, 235, 239, 0.40);
    border-radius: 20px;

}

.report-detailed-topbar .search input::placeholder {
    color: var(--checklist);
}


.report-detailed-topbar .search input:focus{

    box-shadow: none;
    background: rgba(234, 235, 239, 0.40);
    border: 2px solid #d6d4d4;
}

.report-detailed-topbar .search .fa-search{

    position: absolute;
    color: #99A6C0;
    top: 12px;
    left: 14px;

}

.report-detailed-topbar .transaction {
    padding: 10px 0 10px 0;
    margin-top: 10px;
    margin-bottom: 15px;
    border: 1px solid;
    background: linear-gradient(90deg, rgba(236,8,141,1) 0%, rgba(236,8,141,1) 30%, rgba(215,7,151,1) 35%, rgba(201,7,158,1) 45%, rgba(0,0,255,1) 100%);
    border-radius: 20px;

    font-family: 'Sarabun', sans-serif;
    color: #FFFFFF;
}

.report-detailed-topbar .transaction .transaction-code {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */ 
}

.report-detailed-topbar .transaction .transaction-date {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

@media (min-width: 767px) {
    #mobile-topbar {
        display: none;
    }
    #desktop-topbar {
        display: block;
    }
}

@media (max-width: 767px) {
    #mobile-topbar {
        display: block;
    }
    #desktop-topbar {
        display: none;
    }
}

@media (max-width: 380px) {
    
    #laporan-topbar .info-tab input[type="date"]:before {
        top: 10px;
        right: 30px;
    }
}

/* Detailed Laporan */


/* Penjualan */

#penjualan-topbar {
    background: #ffffff;
}

@media (min-width: 767px) {
    #penjualan-topbar .topbar-tabs {
        width: 420px;
    }
}

#penjualan-topbar .container {
    background: #ffffff;
}

#penjualan-topbar .nav {
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

#penjualan-topbar li button.active {
    background: var(--pink_rabbani);
    border-radius: 20px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#penjualan-topbar .nav::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
#penjualan-topbar .nav {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide text in the navigation tabs by default */
#penjualan-topbar .nav-item span, .nav-item .active-img {
    display: none;
}
/* Show the one that's active */
#penjualan-topbar .nav-item .active span, .nav-item .active .active-img {
    display: inline-block;
}

#penjualan-topbar .nav-item .active span {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    margin-left: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#penjualan-topbar .nav-item .active .inactive-img {
    display: none;
}

#data-penjualan {
    padding-top: 72px;
}

.data-penjualan {
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    background: var(--pink_light);
    padding: 24px 0 24px 0;
    margin: 0;
    border-radius: 10px;
}

.data-penjualan .label {
    margin-top: -10px;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.data-penjualan .invoice-data {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.data-penjualan .text-invoice {
    padding-right: 0 !important;
    padding-top: 1px;
}

.data-penjualan .text-date {
    padding-top: 2px;
}

.data-penjualan .custom-date {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding:0;
    background:transparent;
    color:white;
    border:none;
}

.data-penjualan .text-total {
    margin-top: -10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

}

.data-penjualan .number-total {
    font-family: 'Sarabun', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.number-total sup {
    top: -15px;
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; /* 107.143% */
}

.data-penjualan input[type="date"] {
    position: relative;
}
  
.data-penjualan input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}
  
.data-penjualan input[type="date"]:before {
    color: transparent;
    background: none;
    display: block;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    right: -6px;
    color: #fff;
}

#pay-button,.pay-button {
    position: fixed; /* Fixed/sticky position */
    bottom: 90px; /* Place the button at the bottom of the page */
    left: 80%;
    transform: translateX(-35%);
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--primary_green); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 100px; /* Rounded corners */
    font-size: 12px; /* Increase font size */
    width: 100px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
}

@media (min-width: 767px) {
    #pay-button,.pay-button {
        left: 58%;
        transform: translateX(-20%);
    }
}

#retur-button {
    position: fixed; /* Fixed/sticky position */
    bottom: 90px; /* Place the button at the bottom of the page */
    right: 15px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--primary_green); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 100px; /* Rounded corners */
    font-size: 12px; /* Increase font size */
    width: 110px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
}

@media (max-width: 415px) {
    
    .data-penjualan .text-invoice {
        padding-top: 2px;
    }

    .data-penjualan .custom-date {
        padding-left: 25px;
    }
    
}

@media (max-width: 392px) {
    
    .data-penjualan .text-invoice {
        padding-top: 3px;
    }

    .data-penjualan .custom-date {
        padding-left: 22px;
    }
    
}

@media (max-width: 376px) {
    .data-penjualan .invoice-data {
        font-size: 12px;
    }
    
    .data-penjualan .custom-date {
        font-size: 12px;
        padding-left: 30px;
    }
    
}

@media (max-width: 282px) {
    
    .data-penjualan .invoice-data {
        font-size: 9px;
    }
    
    .data-penjualan .custom-date {
        font-size: 9px;
        padding-top: 5px;
        padding-left: 20px !important;
    }
    
}

/* Penjualan */


/* Pembayaran */


#data-pembayaran {
    padding-top: 62px;
}

.data-pembayaran {
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    background: var(--pink_light);
    padding: 24px 0 24px 0;
    margin: 0;
    border-radius: 10px;
}

.data-pembayaran .label {
    margin-top: -10px;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.data-pembayaran .invoice-data {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.data-pembayaran .text-invoice {
    padding-right: 0 !important;
    padding-top: 1px;
}

.data-pembayaran .text-date {
    padding-top: 2px;
}

.data-pembayaran .custom-date {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding:0;
    background:transparent;
    color:white;
    border:none;
}

.data-pembayaran .text-total {
    margin-top: -10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

}

.data-pembayaran .number-total {
    font-family: 'Sarabun', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}


#pembayaran-items {
    display: flex;
}

#pembayaran-items .container-pembayaran {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 12px 15px 12px;
    margin-top: 10px;
}

#pembayaran-items .container-pembayaran .item-details .section-title {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#pembayaran-items .container-pembayaran .item-details .section-subtitle {
    color: var(--second-text-color);
    
    /* menu_text */
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

#pembayaran-items .container-pembayaran .item-details .btn-tunai {
    border-radius: 100px;
    border: 1px solid var(--pink_bani);
    background: rgba(221, 11, 134, 0.10);
    padding: 2px 24px 2px 24px;
    margin-top: 5px;
    margin-bottom: 5px;

    /* menu_text */
    color: var(--dark_text);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

#pembayaran-items .container-pembayaran .item-details .form-control {
    border: none;
    box-shadow: none;
    padding: 0;

    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#pembayaran-items .container-pembayaran .item-details .form-discount {
    border: none;
    border-radius: 20px;
    box-shadow: none;
    background: #F4F6F8;
    padding: 10px 20px 10px 20px;
    width: 170px;
    
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

/* Custom Form Switch */

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-md {
    padding-left: 4.5em;
    height: 2.5em;
}

#pembayaran-items .container-pembayaran .item-details .form-check-input {
    background-color: #78788029;
    box-shadow: none;
    border: none;
}

#pembayaran-items .container-pembayaran .item-details .form-check-input:checked {
    background-color: var(--pink_light);
    box-shadow: none;
    border: none;
    
}

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-md .form-check-input {
    margin-left: -4.5em;
    height: 2em;
    width: 4em;
}

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-md .form-check-label {
    padding-top: 0.5em;
}

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-lg {
    padding-left: 8.5em;
    height: 4.5em;
}

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-lg .form-check-input {
    margin-left: -8.5em;
    height: 4em;
    width: 8em;
}

#pembayaran-items .container-pembayaran .item-details .form-switch.form-switch-lg .form-check-label {
    padding-top: 1.5em;
}

/* Custom Form Switch */


#pembayaran-items .text-label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-items .text-tagihan-price {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#pembayaran-items .text-price {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-items .text-total-price {
    color: var(--primary_green);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-items .text-kembalian {
    color: var(--pink_rabbani);
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 
}


/* Modal Pembayaran */

#pembayaran-modal .modal-dialog {
    position: absolute;
    top: 40%;
    left: 10px;
    right: 10px;
    z-index: 10040;
    overflow: auto;
    overflow-y: auto;
    border-radius: 10px;
}

#pembayaran-modal .confirm-title {
    color: var(--dark_text);
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-top: -10px;
    margin-bottom: 10px;
}

#pembayaran-modal .confirm-content {
    color: var(--second-text-color, #99A6C0);
    /* body_text */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#pembayaran-modal .left-button {
    margin-left:20px;
    margin-right:-8px;
}

#pembayaran-modal .right-button {
    margin-left:-8px;
    margin-right: 20px;
}

#pembayaran-modal .btn-simpan {
    width: auto;
    height: 40px;
    border-radius: 10px;
    background: var(--pink_rabbani);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 25px;
    /* body_text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#pembayaran-modal .btn-simpan-cetak {
    width: auto;
    height: 40px;
    border-radius: 10px;
    background: var(--primary_green);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 25px;
    /* body_text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/* Modal Pembayaran */


#pembayaran-success {
    font-family: 'Sarabun', sans-serif;
    background: var(--white_text);
    margin: 0;
    padding-top: 65px;
    min-height: 100vh;
}

#pembayaran-success .img-stock-success {
    margin-top: 20px;
}

#pembayaran-success .text-stock-success {
    color: #4CAF50;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#pembayaran-success .detail-success .label {
    color: #828282;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-top: 10px;
}

#pembayaran-success .detail-success .vertical-separator {
    /* border: 2px solid rgba(189, 195, 213, 0.90); */
    width:60px;
    height:40px;
    margin-top: 10px;
	background: linear-gradient(to right, 
	                              transparent 0%, 
	                              transparent calc(50% - 0.81px), 
	                              rgba(130, 130, 130, 0.90) calc(50% - 0.8px), 
	                              rgba(130, 130, 130, 0.90) calc(50% + 0.8px), 
	                              transparent calc(50% + 0.81px), 
	                              transparent 100%); 
}

#pembayaran-success .detail-success .code {
    color: #828282;
    /* body_text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

#pembayaran-success .detail-success .date {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; 
    margin-top: 5px;
}

#pembayaran-success .detail-success .count-number {
    margin-top: 20px;
    color: #4CAF50;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

#pembayaran-success .detail-success .detail-label {
    margin-top: 30px;
    color: #828282;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-success .buttons {
    position: fixed; /* Fixed/sticky position */
    bottom: 10px; /* Place the button at the bottom of the page */
    z-index: 99; /* Make sure it does not overlap */
    padding-right: 10px;
}

#pembayaran-success .buttons .cetak-button,
#pembayaran-success .buttons .cetak-button:active {
    border-radius: 50px;
    border: 1px solid #9869D9;
    color: #9869D9;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-success .buttons .stock-button,
#pembayaran-success .buttons .stock-button:active {
    border-radius: 50px;
    border: 1px solid var(--primary_green);
    color: var(--primary_green);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-success .buttons .tambah-button,
#pembayaran-success .buttons .tambah-button:active {
    border: none;
    margin-top: 10px;
    border-radius: 50px;
    background: var(--pink_rabbani);
    color: var(--white_text, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#pembayaran-success #buttons .container {
    padding: 0;
}

@media (min-width:767px) {
    #pembayaran-success #buttons .container {
        width: 420px;
    }
}

/* Pembayaran */

/* Point */

#total-point .container-point {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 20%;
}

#total-point .container-point.is-active {
    top: 10%;
}

#total-point .container-point .point-label {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#total-point .container-point .point-number {
    color: #ffffff;
    font-family: 'Sarabun', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.3px;
}

#total-point .container-point .point-update-date {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detailed-point .container-point-list {
    background: #ffffff;
    height: 100vh;
    max-width: 420px;
    max-height: 280px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
}

#point-doodles .img-kiri {
    position: absolute;
    left: 0;
    top: 330px;
}

#point-doodles .img-kanan {
    position: absolute;
    right: 0;
    bottom:0;
}

/* @media (min-width: 800px) {
    #point-doodles .img-kiri {
        position: absolute;
        left: 35%;
        transform: translateX(-45%);
        top: 45%;
    }

    #point-doodles .img-kanan {
        position: absolute;
        right: 40%;
        transform: translateX(33%);
        bottom:0;
    }
    
} */

#detailed-point .container-point-list.is-active {
    min-height: 450px !important;
}

#detailed-point .container-point-list .btn-point-eyebrow {
    background: #E0E0E0;
    min-width:34px;
    max-height:5px !important;
    border:none !important;
    padding:3px;
}

#detailed-point .container-point-list .text-title {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detailed-point .container-point-list .point-list-detail {
    display: flex;
    /* justify-content:flex-start; */
    align-items: center;
    align-content: center;
    border-radius: 20px;
    background: linear-gradient(90deg, #9869D9 6.28%, #B087E8 78.51%);
    padding: 10px;
}

#detailed-point .container-point-list .point-list-detail .detail-image {
    background: rgba(255, 255, 255, 0.20);
    width: 71px;
    height: 71px;
    border-radius: 100px;
    /* padding: 14px; */
    margin-right: 20px;
}

#detailed-point .container-point-list .point-list-detail .detail-image img {
    width: 70px;
    object-fit: cover;
}

#detailed-point .container-point-list .point-list-detail .detail-point .detail-label-group .label {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detailed-point .container-point-list .point-list-detail .detail-point .detail-label-group .value {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}


#detailed-point .container-point-list .point-list-detail .detail-point .detail-point-group {
    display:flex;
    flex-direction: row;
    justify-content:space-between !important;
    cursor: pointer;
}

#detailed-point .container-point-list .point-list-detail .detail-point .detail-point-group .label {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
    cursor: pointer;
}

#detailed-point .container-point-list .point-list-detail .detail-point .detail-point-group .value {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detailed-point .container-point-list .point-list-detail .detail-point .detail-point-group .vertical-separator {
    width:30px;
    height:35px;
	background: linear-gradient(to right, 
	                              transparent 0%, 
	                              transparent calc(50% - 0.81px), 
	                              #ffffff calc(50% - 0.8px), 
	                              #ffffff calc(50% + 0.8px), 
	                              transparent calc(50% + 0.81px), 
	                              transparent 100%); 
}

#detailed-point .container-point-list .point-list-detail .detail-help {
    position: absolute;
    right: 25px;
    margin-top: -65px;
    cursor: pointer;
}

#detail-point-modal .modal-dialog {
    position: fixed;
    max-width: 420px;
    bottom: 10px;
    right: -10px;
    bottom: -11px;
    left: -10px;
    z-index: 10040;
    overflow: auto;
    overflow-y: initial;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

#detail-point-modal .modal {
    --bs-modal-border-top-left-radius: 14px;
}

#detail-point-modal .modal-body {
    height: 50vh;
    overflow-y: auto;
}

#detail-point-modal .modal-body.modal-help {
    height: 40vh;
    overflow-y: auto;
}

#detail-point-modal .modal-body .text-title {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detail-point-modal .modal-body .text-list {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#detail-point-modal .modal-dialog .btn-point-eyebrow {
    background: #E0E0E0;
    min-width:34px;
    max-height:5px !important;
    border:none !important;
    padding:3px;
}

.popover {
    border: none;
}

.popover .popover-body{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 10px 5px 10px 5px !important;
    text-align: center;
    color: var(--second-text-color);
}


.lollipop {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop::before {
    background: #EC088D20 !important;
    height: 70px;
    width: 4px;
    content: '';
    position: absolute;
    top: 24px;
    left: 10px;
    background: white;
    z-index: 1;
}

.lollipop-active {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop-active::before {
    background: #EC088D60 !important;
    height: 70px;
    width: 4px;
    content: '';
    position: absolute;
    top: 24px;
    left: 10px;
    background: white;
    z-index: 1;
}
   
.lollipop-active::after {
    height: 8px;
    width: 8px;
    content: '';
    position: absolute;
    background: var(--pink_bani);
    top: 8px;
    left: 8px;
    border-radius: 50%;
    background: var(--pink_bani);
}


/* lollipop order */

.lollipop-order {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop-order::before {
    background: #EC088D20 !important;
    height: 72px;
    width: 4px;
    content: '';
    position: absolute;
    bottom: 24px;
    left: 10px;
    background: white;
    z-index: 1;
}

.lollipop-order.active {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop-order.active::before {
    background: #EC088D60 !important;
    height: 72px;
    width: 4px;
    content: '';
    position: absolute;
    bottom: 24px;
    left: 10px;
    background: white;
    z-index: 1;
}
   
.lollipop-order.active::after {
    height: 8px;
    width: 8px;
    content: '';
    position: absolute;
    background: var(--pink_bani);
    top: 8px;
    left: 8px;
    border-radius: 50%;
    background: var(--pink_bani);
}

.lollipop-order-start {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}

.lollipop-order-start-active {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}

.lollipop-order-start-active::after {
    height: 8px;
    width: 8px;
    content: '';
    position: absolute;
    background: var(--pink_bani);
    top: 8px;
    left: 8px;
    border-radius: 50%;
    background: var(--pink_bani);
}

/* lollipop order */


/* lollipop checkout */

.lollipop-checkout {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop-checkout::before {
    background: #EC088D20 !important;
    height: 4px;
    width: 115px;
    content: '';
    position: absolute;
    bottom: 10px;
    right: 24px;
    background: white;
    z-index: 1;
}

@media (max-width: 360px) {
    .lollipop-checkout::before {
        width: 95px !important;
    }
}

.lollipop-checkout.active {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}
   
.lollipop-checkout.active::before {
    background: #EC088D60 !important;
    height: 4px;
    width: 115px;
    content: '';
    position: absolute;
    bottom: 10px;
    right: 24px;
    background: white;
    z-index: 1;
}
   
.lollipop-checkout.active::after {
    height: 8px;
    width: 8px;
    content: '';
    position: absolute;
    background: var(--pink_bani);
    top: 8px;
    left: 8px;
    border-radius: 50%;
    background: var(--pink_bani);
}

.lollipop-checkout-start {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}

.lollipop-checkout-start.active {
    height: 24px;
    max-width: 24px;
    border-radius: 50%;
    position: relative;
    background: white;
    z-index: 2;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.29);
}

.lollipop-checkout-start.active::after {
    height: 8px;
    width: 8px;
    content: '';
    position: absolute;
    background: var(--pink_bani);
    top: 8px;
    left: 8px;
    border-radius: 50%;
    background: var(--pink_bani);
}

@media (max-width: 395px) {
    .lollipop-checkout::before {
        width: 105px;
    }
   
    .lollipop-checkout.active::before {
        width: 107px;
    }
}

@media (max-width: 380px) {
    .lollipop-checkout::before {
        width: 100px;
    }
   
    .lollipop-checkout.active::before {
        width: 102px;
    }
}

/* lollipop checkout */

#list-terkumpul .text-title {
    color: #828282;
    font-family: Sarabun;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-terkumpul .poin-date {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-terkumpul .transaction,
#list-ditukar .transaction {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-terkumpul .reshare,
#list-ditukar .reshare {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-terkumpul .points {
    color: #6FCF97;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-ditukar .text-title {
    color: #828282;
    font-family: Sarabun;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-ditukar .poin-date {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#list-ditukar .points {
    color: var(--red);
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}
/* Point */

/* Progress bar */

.container-progress {
    position: relative;
}

.progress {
    margin-top: 12%;
    width: 220px;
    height: 220px;
    background: none;
    position: relative;
}
  
.progress::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}
  
.progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
  
.progress .progress-left {
    left: 0;
}
  
.progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 5px;
    border-style: solid;
    position: absolute;
    top: 0;
}
  
.progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
  
.progress .progress-right {
    right: 0;
}
  
.progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}
  
.progress .progress-value {
    position: absolute;
    font-family: 'Sarabun', sans-serif;
    top: 0;
    left: 0;
}

.progress .progress-value .text-label {
    color: #757575;
    font-size: 14px;
    font-weight: 400;
}

.progress .progress-value .text-value {
    font-size: 24px;
    font-weight: 700;
}

.progress2 {
    width: 200px;
    height: 200px;
    background: none;
    position: relative;
    margin-top: -210px;
}
  
.progress2::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}
  
.progress2>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
  
.progress2 .progress2-left {
    left: 0;
}
  
.progress2 .progress2-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 5px;
    border-style: solid;
    position: absolute;
    top: 0;
}
  
.progress2 .progress2-left .progress2-bar {
    left: 100%;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
  
.progress2 .progress2-right {
    right: 0;
}
  
.progress2 .progress2-right .progress2-bar {
    left: -100%;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}
  
.progress2 .progress2-value {
    position: absolute;
    top: 0;
    left: 0;
}

.border-pink {
    border-color: var(--pink_bani);
}

.border-biru {
    border-color: blue;
}

/* @media (max-width: 360px) {
    .progress {
        margin-top: 10px;
    }
} */

/* Progress bar */


/* Order */

#data-order {
    padding-top: 55px;
}

#order-items {
    display: flex;
}

#order-items .container-order {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
}

#order-items .container-order .title {
    color: var(--dark_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

#order-items .container-order .btn-show-all {
    position: relative;
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 30px 0 15px;
    
    color: #333;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400; 
}

#order-items .container-order .detail-container .btn-lainnya {
    background: #F1F4FA;
    width: 30px;
    height: 30px;
    padding: 3px 5px 5px 5px;
    border-radius: 50px;
}

#order-items .container-order .btn-show-all .icon {
    color: var(--primary_abu);
    font-size: 10px;
    position: absolute;
    top:5px;
    right: 12px;
}

#order-items .container-order .detail-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 5px 10px 10px 10px;
    margin-top: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

/* indicators position */

#order-items .container-order .detail-container .carousel-indicators button {
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: var(--pink_rabbani);
}

#order-items .container-order .detail-container 
.carousel-indicators {
    bottom: -50px;
}

/* indicators position */

#order-items .container-order .detail-container .text-small {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

#order-items .container-order .detail-container .text-small.text-date {
    font-weight: 600;
}

#order-items .container-order .detail-container .btn-status-menunggu_pembayaran {
    border-radius: 100px;
    background: rgba(155, 81, 224, 0.10);
    padding: 2px 10px 4px 10px;

    /* text */
    color: #9B51E0;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items .container-order .detail-container .btn-status-dipickup {
    border-radius: 100px;
    background: #4CAF5020;
    padding: 2px 20px 2px 20px;

    /* text */
    color: #27AE60;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items .container-order .detail-container .btn-status-dibatalkan {
    border-radius: 100px;
    background: #9E9E9E20;
    border: none;
    padding: 2px 10px 4px 10px;

    /* text */
    color: #9E9E9E;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items .container-order .detail-container .btn-status-selesai {
    border-radius: 100px;
    background: #4CAF5020;
    padding: 2px 10px 4px 10px;

    /* text */
    color: #4CAF50;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items .container-order .detail-container .btn-product-recom {
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 5px 0 5px;

    /* text */
    color: #65CADF;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#order-items .container-order .detail-container .btn-product-recom img {
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
}

#order-items .container-order .detail-container .product-name {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

#order-items .container-order .detail-container .product-price {
    color: #333;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

#order-items .container-order .detail-container .product-name-recom {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;

    /* string length */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

#order-items .container-order .detail-container .product-price-recom {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

#order-items .container-order .detail-container .product-estimasi img {
    width: 16px;
    height: 16px;
}

#order-items .container-order .detail-container .product-estimasi .time {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
}

#order-items .container-order .detail-container .product-discount {
    color: var(--primary_abu);
    font-family: 'Roboto', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: line-through;
}

#order-items .container-order .detail-container .product-img {
    margin-left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

#order-items .container-order .detail-container .product-img-recom {
    min-width: 100%;
    min-height: 100%;
    max-width: 155px;
    max-height: 200px;
    border-radius: 10px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.10);
}

@media (min-width: 360px) and (max-width: 391px) {
    #order-items .container-order .detail-container .product-img-recom {
        max-width: 125px;
    }  
}
/* Order */


/* Order list detailed */

#data-order-detailed {
    padding-top: 100px;
}

#order-items-detailed {
    display: flex;
}

#order-items-detailed .container-order {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
}

#order-items-detailed .container-order .detail-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 5px 10px 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

#order-items-detailed .container-order .detail-container .text-small {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

#order-items-detailed .container-order .detail-container .text-small.text-date {
    font-weight: 600;
}

#order-items-detailed .container-order .detail-container .btn-status-menunggu_pembayaran {
    border-radius: 100px;
    background: rgba(155, 81, 224, 0.10);
    padding: 2px 10px 4px 10px;
    border: none;

    /* text */
    color: #9B51E0;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items-detailed .container-order .detail-container .btn-status-dipickup {
    border-radius: 100px;
    background: #4CAF5020;
    padding: 2px 20px 2px 20px;

    /* text */
    color: #27AE60;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items-detailed .container-order .detail-container .btn-status-dibatalkan {
    border-radius: 100px;
    background: #9E9E9E20;
    border: none;
    padding: 2px 10px 4px 10px;

    /* text */
    color: #9E9E9E;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items-detailed .container-order .detail-container .btn-status-selesai {
    border-radius: 100px;
    background: #4CAF5020;
    padding: 2px 10px 4px 10px;

    /* text */
    color: #4CAF50;
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-items-detailed .container-order .detail-container .product-name {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

#order-items-detailed .container-order .detail-container .product-price {
    color: #333;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}
/* Order list detailed */


/* Order Detailed */

#data-order-detail {
    padding-top: 48px;
}

#order-detail-items {
    display: flex;
}

#order-detail-items .container-order-countdown {
    background: #F9C;
    padding-top: 10px;
    padding-bottom: 10px;
}

#order-detail-items .container-order-countdown #timer .col-2 {
    margin-right: 5px;
}

#order-detail-items .container-order-countdown .text {
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-countdown .time {
    display: inline;
    background: #FFFFFF20;
    border-radius:20px;
    padding: 25px 5px 30px 5px;
    
    color: #FFF;
    font-family: 'Sarabun', sans-serif;
    text-align: center;
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 66.667% */
}

#order-detail-items .container-order-countdown .text-time {
    color: #FFF;
    text-align: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

#order-detail-items .container-order-detail {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}

#order-detail-items .container-order-detail .inactive {
    color: #BDBDBD;
}

#order-detail-items .container-order-detail .tag-batal {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    width: 70px;
    height: 70px;
    background: #E0E0E0;
    clip-path: polygon(35% 0, 100% 65%, 100% 100%, 0 0);
}
    
#order-detail-items .container-order-detail .tag-batal .text {
    rotate: 45deg;
    color: #000;
    text-align: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-top: 17px;
    margin-left: 16px;
}

#order-detail-items .container-order-detail .info {
    border: 1px solid #9E9E9E60;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}

#order-detail-items .container-order-detail .info .icon {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #9E9E9E;

    color:  #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

#order-detail-items .container-order-detail .info .text {
    color:  var(--primary_abu);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    line-height: normal;
}

#order-detail-items .container-order-detail .btn-status-dibatalkan .text {
    margin-bottom: 10px;
}

#order-detail-items .container-order-detail .btn-status-menunggu_pembayaran {
    border-radius: 200px;
    background: rgba(155, 81, 224, 0.10);
    border: none;
    padding-left: 20px;
    margin-top: 10px;

    /* text */
    color: #9B51E0;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-detail .btn-status-menunggu_pembayaran i {
    font-size: 20px;
    margin-right: 5px;
}

#order-detail-items .container-order-detail .btn-status-menunggu_pembayaran img {
    margin-right: 2px;
}

#order-detail-items .container-order-detail .btn-status-selesai {
    border-radius: 200px;
    background: #4CAF5020;
    border: none;
    padding-left: 20px;
    margin-top: 10px;

    /* text */
    color: #4CAF50;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-detail .btn-status-selesai img {
    margin-right: 2px;
}

#order-detail-items .container-order-detail .btn-status-dibatalkan {
    border-radius: 200px;
    background: #9E9E9E20;
    border: none;
    padding-left: 20px;
    margin-top: 10px;

    /* text */
    color: #9E9E9E;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-detail .btn-status-dibatalkan i {
    font-size: 20px;
    margin-right: 5px;
}

#order-detail-items .container-order-detail .label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-detail .value {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-rincian {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

#order-detail-items .container-order-rincian .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-rincian .img-container {
    width: 75px;
    height: 75px;
    border-radius: 15px;
    box-shadow: 0px 8px 10px 5px rgba(0, 0, 0, 0.10);
    margin-top: 5px !important;
    /* filter: drop-shadow(0px 7px 18px rgba(0, 0, 0, 0.08)); */
}

#order-detail-items .container-order-rincian .img-container .product-img {
    border-radius: 10px;
    width: 100%;
}

#order-detail-items .container-order-rincian .product {
    color: #828282;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-rincian .product .name {
    color: #202C44;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-rincian .color-size i {
    font-size: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

#order-detail-items .container-order-rincian .product .percentage {
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 10px 0 10px;

    /* text */
    color: #65CADF;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-right: 10px;
}

#order-detail-items .container-order-rincian .product .price {
    text-decoration-line: line-through;
}

#order-detail-items .container-order-rincian .product .subtotal {
    color: #202C44;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; 
}

#order-detail-items .container-order-pembayaran {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

#order-detail-items .container-order-pembayaran .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-pembayaran .label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-pembayaran .value {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-pembayaran .value-discount {
    color: var(--primary_abu);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-pembayaran .total {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 171.429% */
}


#order-detail-items .container-order-pembayaran .btn-batal-order {
    border-radius: 100px;
    background: #FF980045;
    width: 100%;

    /* text */
    color: #86af25;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-detail-items .container-order-pembayaran .btn-batal-order img {
    margin-right: 10px;
    margin-bottom: 5px;
}

#order-detail-items .container-order-metode-pembayaran {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}
#order-detail-items .container-order-metode-pembayaran .italic {
    font-style: italic !important;
}

#order-detail-items .container-order-metode-pembayaran .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
}

#order-detail-items .container-order-metode-pembayaran .metode {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 171.429% */
}

#order-detail-items .container-order-metode-pembayaran .bank {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-detail-items .container-order-metode-pembayaran .btn-selengkapnya {
    background: #F1F4FA;
    border-radius: 20px;
    padding: 5px 15px 8px 15px;

    /* text */
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 171.429% */
}

#order-detail-items .container-order-metode-pembayaran i {
    color: #9E9E9E;
    width: 24px;
    height: 24px;
    font-size: 14px;
}

#order-detail-items .container-order-metode-pembayaran .btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    padding: 5px;
    background: #F1F4FA;
}

#order-detail-items .container-order-metode-pembayaran .icon-wallet {
    font-size: 18px;
}

#order-detail-items .container-order-info-pickup {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

#order-detail-items .container-order-info-pickup .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

#order-detail-items .container-order-info-pickup .info {
    border: 1px solid #9E9E9E60;
    border-radius: 10px;
    padding: 15px 10px 15px 10px;
    margin-top: 10px;
    margin-bottom: 15px;
    background: #F1F4FA;
}

#order-detail-items .container-order-info-pickup .info .icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 20px;
    background: #9E9E9E30;

    color:  #9E9E9E;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

#order-detail-items .container-order-info-pickup .info .label {
    color: #828282;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-detail-items .container-order-info-pickup .info .lokasi {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-detail-items .container-order-info-pickup .info .alamat {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal-metode-pembayaran .title {
    color: #202C44;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; /* 150% */
}

.modal-metode-pembayaran .metode {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 171.429% */
}

.modal-metode-pembayaran .bank {
    color: #99A6C0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 171.429% */
}

.modal-metode-pembayaran img {
    width: auto;
    height: 40px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}
/* Order Detailed */


/* Cart */

#data-cart {
    padding-top: 50px;
    padding-bottom: 110px;
}

#cart-items {
    display: flex;
}

#cart-items .container-cart {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
}

#cart-items .container-cart .img-container {
    width: 103px;
    height: 103px;
    border-radius: 15px;
    box-shadow: 0px 8px 10px 5px rgba(0, 0, 0, 0.10);
    /* filter: drop-shadow(0px 7px 18px rgba(0, 0, 0, 0.08)); */
}

#cart-items .container-cart .img-container .product-img {
    border-radius: 10px;
    width: 100%;
}

#cart-items .container-cart .product-detail .product-name {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#cart-items .container-cart .product-detail .color-size {
    color: var(--primary_abu);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#cart-items .container-cart .product-detail .color-size i {
    font-size: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

#cart-items .container-cart .product-detail .product-discount {
    background: #82828210;
    padding: 2px 10px;
    margin-left: 10px;
    border-radius: 50px;

    color: #9B51E0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#cart-items .container-cart .product-detail .product-price {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#cart-items .container-cart .stock .product-stock {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#cart-items .container-cart .stock .btn{
    border-radius: 100px !important;
    border: none;
}

#cart-items .container-cart .stock .product-stock .form-control {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    border: none;
    box-shadow: none;
}

#cart-items .container-cart .stock i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border: 3px solid var(--primary_abu);
    color: var(--primary_abu);
    height: 22px;
    width: 22px;
    font-size: 16px;
    border-radius: 20px;
}


#cart-items .container-cart .stock-v2 {
    margin-top: 5px;
    margin-right: 15px;
}

#cart-items .container-cart .stock-v2 .btn{
    border-radius: 100px !important;
    border: none;
}

#cart-items .container-cart .stock-v2 .product-stock .form-control {
    border-radius: 10px;
    background: #F1F4FA;
    text-align: center;
    padding: 0;
    width: 53px;
    height: 20px;
    border: none;
    box-shadow: none;
    margin-top: 5px;

    /* text */
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#cart-items .container-cart .stock-v2 i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border: 3px solid #4F4F4F;
    color: #4F4F4F !important;
    font-weight: 700;
    height: 25px;
    width: 25px;
    font-size: 14px;
    border-radius: 20px;
}

#cart-items .container-cart .delete-product {
    padding: 0;
    height: 25px;
    width: 25px;
    font-size: 14px;
    border-radius: 20px;
    background: #F1F4FA;
    margin-top: 5px;
}

#cart-items .container-cart .delete-product:active {
    border:1px solid #4F4F4F;
}

#cart-submit .container-cart-submit {
    background: #ffffff;
    height: 100vh;
    max-height: 200px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width:768px){
    #cart-submit .container-cart-submit {
        width: 420px;
    }
}

/* @media (min-width: 800px) {
    #cart-submit .container-cart-submit {
        max-width: 385px;
    }
} */

.container-cart-submit .label {
    color: #828282;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-cart-submit .price {
    color: #333;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.container-cart-submit .discount {
    color: var(--primary_abu);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.container-cart-submit .total-label {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.container-cart-submit .total-price {
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.container-cart-submit .btn-cart-submit {
    border-radius: 100px;
    background: var(--pink_rabbani);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Cart */


/* Order Success */

#order-success-items {
    display: flex;
}

#order-success-items .container-order-success {
    padding: 10px;
    margin-top: 10px;
}

#order-success-items .container-order-success img {
    width: 200px;
    height: auto;
    margin-top: -10px;
}

#order-success-detail .container-order-success-detail .bottom-button {
    position:fixed;
    bottom:0;
    max-width: 420px;
}

#order-success-items .container-order-success .text-big {
    color: #FFFFFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-success-items .container-order-success .text-regular {
    color: #FFFFFF;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-success-detail .container-order-success-detail {
    background: #ffffff;
    height: 100vh;
    max-height: 370px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

#order-success-detail .container-order-success-detail .container {
    border: 1px solid #F1F4FA;
    border-radius: 10px;
    margin: 0;
    padding: 10px 0 10px 0;
}

@media (min-width:768px) {
    #order-success-detail .container-order-success-detail .bottom-button {
        width: 420px;
    }
    #order-success-detail .container-order-success-detail {
        max-width: 420px;
    }
}

@media (max-width: 380px) {
    #order-success-items .container-order-success img {
        width: 130px;
    }
    #order-success-detail .container-order-success-detail {
        max-height: 330px !important;
    }
}

#order-success-detail .container-order-success-detail .container .label {
    color: #333;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#order-success-detail .container-order-success-detail .container .value {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

#order-success-detail .container-order-success-detail .title {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-success-detail .container-order-success-detail .text {
    color: #828282;
    text-align: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-detail .container-order-success-detail .text strong {
    color: #000;
}

#order-success-detail .container-order-success-detail .text span {
    color: var(--pink_rabbani);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-success-detail .container-order-success-detail .btn-show-detail {
    position: relative;
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 30px 0 20px;
    
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400; 
}

#order-success-detail .container-order-success-detail i {
    color: var(--primary_abu);
    font-size: 12px;
    position: absolute;
    top:4px;
    right: 15px;
}

#order-success-detail .container-order-success-detail .btn-order-kembali {
    border-radius: 100px;
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    padding: 10px;
    width: 100%;

    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-detail .container-order-success-detail .btn-order-kembali:active {
    background: var(--pink_rabbani);
    color: #FFF;
}

#order-success-detail .container-order-success-detail .btn-lacak {
    border-radius: 100px;
    background: var(--pink_rabbani);
    padding: 10px;
    width: 100%;

    /* text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-detail .container-order-success-detail .btn-lacak:active {
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    color: var(--pink_rabbani);
}

@media (max-width: 360px) {
    #order-success-detail .container-order-success-detail {
        max-height: 270px;
    }
    
}

/* Order Success */

/* Order Success v2 */

#order-success-v2 {
    padding-top: 0;
}

#order-success-items-v2 {
    display: flex;
}

#order-success-items-v2 .separator {
    background:#F4F6F8;
    height:10px;
    padding:0;
}

#order-success-items-v2 .container-order-success {
    background: #fff;
    padding: 10px;
}

#order-success-items-v2 .container-order-success img {
    margin-top: 50px;
    margin-bottom: 50px;
}

#order-success-items-v2 .container-order-success {
    background: #ffffff;
}

#order-success-items-v2 .container-order-success .title {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-success-items-v2 .container-order-success .text {
    color: #000;
    text-align: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 50px;
    margin-right: 50px;
}

#order-success-items-v2 .container-order-success .text span {
    color: var(--pink_rabbani);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-items-v2 .container-order-success .btn-show-detail {
    position: relative;
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 40px 0 20px;
    
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400; 
}

#order-success-items-v2 .container-order-success i {
    color: var(--primary_abu);
    font-size: 12px;
    position: absolute;
    top:4px;
    right: 25px;
}

#order-success-items-v2 .container-order-success .btn-order-kembali {
    border-radius: 100px;
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    padding: 15px;
    width: 100%;

    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-items-v2 .container-order-success .btn-order-kembali:active {
    background: var(--pink_rabbani);
    color: #FFF;
}

#order-success-items-v2 .container-order-success .btn-lacak {
    border-radius: 100px;
    background: var(--pink_rabbani);
    padding: 15px;
    width: 100%;

    /* text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-success-items-v2 .container-order-success .btn-lacak:active {
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    color: var(--pink_rabbani);
}


#bayar-sekarang .container-bayar-sekarang {
    background: #ffffff;
    font-family: 'Sarabun', sans-serif;
    height: 100vh;
    max-height: 60px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width:768px) {
    #bayar-sekarang .container-bayar-sekarang {
        width: 420px !important;
    }
}

.container-bayar-sekarang .label {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.container-bayar-sekarang .price {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}

.container-bayar-sekarang .btn-bayar-sekarang {
    border-radius: 100px;
    background: var(--pink_rabbani);
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    /* text */
    color: var(--white_text);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-bayar-sekarang .btn-proses-bayar,
.container-bayar-sekarang .btn-proses-bayar:active {
    border-radius: 100px;
    background: var(--pink_rabbani);
    width: 100%;
    padding: 8px 15px 8px 15px;

    /* text */
    color: var(--white_text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.container-bayar-sekarang .btn-proses-bayar .text-end {
    font-weight: 600 !important;
}

@media (min-width: 800px) {
    #order-success-items-v2 .container-order-success .fixed-bottom {
        left: 35%;
        max-width: 450px;
    }
}

@media (max-width: 360px) {
    #order-success-items-v2 .container-order-success img {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #order-success-items-v2 .container-order-success .text {
        font-size: 12x !important;
        margin-left: 35px;
        margin-right: 35px;
    }
    #order-success-items-v2 .container-order-success .text span {
        font-size: 12x !important;
    }
    
}

/* Order Success v2 */

/* Order Pelacakan */

.main-container-order-pelacakan .status-order {
    color: #9E9E9E;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.main-container-order-pelacakan .nomor-order {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#data-order-pelacakan {
    padding-top: 115px;
}

#order-pelacakan-items .container-order-pelacakan {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}

#order-pelacakan-items .container-order-pelacakan .tracking {
    height: 80px;
}

#order-pelacakan-items .container-order-pelacakan .status {
    color: #333;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#order-pelacakan-items .container-order-pelacakan .detail {
    color: #9E9E9E;
    font-family: 'Sarabun', sans-serif;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}


/* Order Pelacakan */


/* Order Pembayaran */

#data-order-pembayaran {
    padding-top: 60px;
    font-family: 'Sarabun', sans-serif;
}

#order-pembayaran-items .container-order-pembayaran {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}

#order-pembayaran-items .container-order-pembayaran .title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-pembayaran-items .container-order-pembayaran sup {
    top: -15px;
    color: #333;
    font-size: 12px;
    font-weight: 400px;
    margin-bottom: 10px;
}

#order-pembayaran-items .container-order-pembayaran .price {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
}

#order-pembayaran-items .container-order-pembayaran .kode-unik {
    border: 2px solid var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    border-radius: 8px;
    padding: 0 2px 0 2px;
}

#order-pembayaran-items .container-order-pembayaran .btn-salin {
    width: fit-content;
    border-radius: 20px;
    padding: 0 10px 2px 10px;
    background: #F1F4FA;
    border: none;

    color: #000;
    font-size: 12px;
}

#order-pembayaran-items .container-order-pembayaran .btn-salin:disabled {
    opacity: 0.5;
}

#order-pembayaran-items .container-order-pembayaran .btn-info-bayar {
    border-radius: 20px;
    padding: 0 10px 2px 10px;
    background: #F1F4FA;

    color: #EC088D80;
    font-size: 14px;
}

#order-pembayaran-items .container-order-pembayaran .label {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-pembayaran-items .container-order-pembayaran .nomor-rekening {
    color: var(--pink_rabbani);
    font-size: 24px;
    font-weight: 600px;
}

#order-pembayaran-items .container-order-pembayaran .nama-tujuan {
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

#order-pembayaran-items .container-order-pembayaran .info-waktu-bayar {
    color: var(--primary_abu);
    font-size: 14px;
    font-weight: 400;
}

#order-pembayaran-items .container-order-pembayaran .nomor-order {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-pembayaran-items .container-order-pembayaran .container {
    border: 1px solid #9E9E9E60;
    border-radius: 10px;
    margin-left:0;
    padding: 10px 0 10px 0 !important;
}

#order-pembayaran-items .container-order-pembayaran .container .icon-bank {
    width: 50px;
    height: 25px;
    padding: 5px 5px 8px 8px;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
}

#order-pembayaran-items .container-order-pembayaran .container .metode {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 171.429% */
}

#order-pembayaran-items .container-order-pembayaran .container .bank {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 171.429% */
}

#order_pembayaran .container-order-pembayaran {
    background: #ffffff;
    height: 100vh;
    max-height: 60px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width: 800px) {
    #order_pembayaran .container-order-pembayaran {
        width: 420px;
    }
}

#order_pembayaran .container-order-pembayaran .btn-kembali {
    border-radius: 100px;
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    padding: 8px 10px 10px 10px;
    width: 100%;

    /* text */
    color: var(--pink_rabbani);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order_pembayaran .container-order-pembayaran .btn-kembali:active {
    background: var(--pink_rabbani);
    color: #FFF;
}

#order_pembayaran .container-order-pembayaran .btn-upload {
    border-radius: 100px;
    background: var(--pink_rabbani);
    padding: 8px 10px 10px 10px;
    width: 100%;

    /* text */
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order_pembayaran .container-order-pembayaran .btn-upload:disabled {
    background: #F1F4FA;
    color: #828282;
    border: none;
}

#order_pembayaran .container-order-pembayaran .btn-upload:active {
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    color: var(--pink_rabbani);
}

/* Order Pembayaran */


/* Order Pembayaran Konfirmasi */


#data-order-konfirmasi {
    padding-top: 60px;
    font-family: 'Sarabun', sans-serif;
}

#order-konfirmasi-items .container-order-konfirmasi {
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

#order-konfirmasi-items .container-order-konfirmasi .title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-konfirmasi-items .container-order-konfirmasi sup {
    top: -15px;
    color: #333;
    font-size: 12px;
    font-weight: 400px;
    margin-bottom: 10px;
}

#order-konfirmasi-items .container-order-konfirmasi .price {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

#order-konfirmasi-items .container-order-konfirmasi .kode-unik {
    border: 1px solid var(--primary_abu);
    border-radius: 10px;
    padding: 0 2px 0 2px;
}

#order-konfirmasi-items .container-order-konfirmasi .btn-salin {
    width: fit-content;
    border-radius: 20px;
    padding: 0 10px 2px 10px;
    background: #F1F4FA;

    color: #000;
    font-size: 12px;
}

#order-konfirmasi-items .container-order-konfirmasi .btn-info-bayar {
    border-radius: 20px;
    padding: 0 10px 2px 10px;
    background: #F1F4FA;

    color: #828282;
    font-size: 14px;
}

#order-konfirmasi-items .container-order-konfirmasi .label {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-konfirmasi-items .container-order-konfirmasi .value {
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

#order-konfirmasi-items .container-order-konfirmasi .info-waktu-bayar {
    color: var(--primary_abu);
    font-size: 14px;
    font-weight: 400;
}

#order-konfirmasi-items .container-order-konfirmasi .nomor-order {
    color: #828282;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#order-konfirmasi-items .container-order-konfirmasi .container {
    border: 1px solid #9E9E9E60;
    border-radius: 10px;
    margin-left:0;
    padding: 10px 0 10px 0 !important;
}

#order-konfirmasi-items .container-order-konfirmasi .container .icon {
    width: 50px;
    height: 25px;
    padding: 5px 5px 8px 8px;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
}

/* #order-konfirmasi-items .container-order-konfirmasi .container .img-preview {
    width: 60px;
    height: auto;
    border-radius: 10px;
} */
 #img-preview {
    width:100px; 
    height:100px; 
    position:relative;
    overflow:hidden;
    margin: auto;
    border-radius: 10px !important;
}
#img-preview .img-preview {
    position:absolute; 
    width:100%;
    top: 50%;
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

#order-konfirmasi-items .container-order-konfirmasi .container .close {
    position: absolute;
    top: 2px;
    right: 130px;
    z-index: 10;
    padding: 0;
    color: var(--kuning_emas);
    left: 63%;
    transform: translateX(-63%);
}

/* @media (min-width: 767px) {
    #order-konfirmasi-items .container-order-konfirmasi .container .close {
        left: 60%;
        transform: translateX(-60%);
    }
} */

/* @media (max-width: 420px) {
    #order-konfirmasi-items .container-order-konfirmasi .container .close {
        right: 135px;
    } 
}

@media (max-width: 395px) {
    #order-konfirmasi-items .container-order-konfirmasi .container .close {
        right: 125px;
    } 
}

@media (max-width: 380px) {
    #order-konfirmasi-items .container-order-konfirmasi .container .close {
        right: 110px;
    } 
} */

#order-konfirmasi-items .container-order-konfirmasi .container .btn-upload {
    border-radius: 10px;
    background: #F1F4FA;
    padding-top: 15px;
    padding-bottom: 15px;

    color: var(--pink_rabbani);
    font-size: 12px;
}

#order-konfirmasi-items .container-order-konfirmasi .container .btn-preview {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 1;
}

#order-pembayaran-items .container-order-pembayaran .btn-preview {
    position: relative;
    border-radius: 10px;
    padding: 0;
    z-index: 1;
}

#confirm-modal .btn-picture {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 10px;

    color: #828282;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
}

#confirm-modal .btn-confirm-ico {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #EC088D;
    border-radius: 50px;

    color: #828282;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
}

#confirm-modal .btn-confirm-ico:active {
    background: #EC088D;
    color: #FFFFFF;
}

#confirm-modal .btn-confirm-ico span {
    vertical-align: middle;
}

#confirm-modal i {
    color: #000;
    font-size: 18px;
}

#confirm-modal .update-profile {
    color: #9B51E0 !important;
    font-size: 18px;
}

#order-konfirmasi-items .container-order-konfirmasi .container .fa-image {
    font-size: 20px;
}

#order-konfirmasi-items .container-order-konfirmasi .container .form-control {
    color: #828282 !important;
}

#order-konfirmasi-items .container-order-konfirmasi .container .form-control::placeholder {
    color: #828282 !important;
}

#confirm-modal .modal-dialog {
    position: fixed;
    width: 420px;
    right: -10px;
    bottom: -9px;
    left: -10px;
    z-index: 10040;
    overflow: auto;
    overflow-y: auto;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

#confirm-modal .modal {
    --bs-modal-border-top-left-radius: 14px;
}

#confirm-modal .title {
    color: #000;
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
}

#confirm-modal .img-bukti .img1 {
    position: relative;
    margin-right: 10px;
}

#confirm-modal .img-bukti .img2 {
    position: relative;
    margin-left: 10px;
}

#confirm-modal .img-bukti i {
    width: 27px;
    height: 27px;
    padding: 4px;
    position: absolute;
    top: -10px;
    right: -10px;
    color: #FFFFFF;
    background: var(--primary_green);
    border: 3px solid #ffffff;
    border-radius: 20px;
    font-size: 16px;
}

#confirm-modal .img-bukti img {
    width: 60px;
    height: auto;
}

#confirm-modal .form-check-label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: justify;
}

#confirm-modal .form-check-input {
    box-shadow: none;
    margin-top: 4px;
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: 2px solid var(--pink_rabbani);
}

#confirm-modal .form-check-input:checked{
    background-color: var(--pink_rabbani);
    border: 0;
 }

#confirm-modal .text {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: justify;
}

#confirm-modal .form-control {
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid #828282;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}

#confirm-modal .btn-confirm {
    border: none;
    border-radius: 50px;
    background: var(--pink_rabbani);
    padding: 8px 10px 10px 10px;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
}

#confirm-modal .btn-order-kembali {
    border-radius: 100px;
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    padding: 8px;
    width: 100%;

    /* text */
    color: var(--pink_rabbani);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#confirm-modal .btn-order-kembali:active {
    background: var(--pink_rabbani);
    color: #FFF;
}

#confirm-modal .btn-lacak {
    border-radius: 100px;
    background: var(--pink_rabbani);
    padding: 8px;
    width: 100%;

    /* text */
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#confirm-modal .btn-lacak:active {
    border: 1px solid var(--pink_rabbani);
    background: #fff;
    color: var(--pink_rabbani);
}

/* Order Pembayaran Konfirmasi */


/* Checkout */

#data-order-checkout {
    padding-top: 60px;
    font-family: 'Sarabun', sans-serif;
}

#order-checkout-items .container-order-checkout {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}

#order-checkout-items .container-order-checkout .tracking .icon {
    font-size: 32px;
    color: #EC088D35;
    margin-bottom: 5px;
}

#order-checkout-items .container-order-checkout .tracking .text {
    font-size: 14px;
    color: #EC088D35;
    margin-top: 5px;
}

#order-checkout-items .container-order-checkout .tracking .icon.active {
    color: var(--pink_rabbani);
}

#order-checkout-items .container-order-checkout .tracking .text.active {
    color: #333;
}

#order-checkout-items .container-order-rincian {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

#order-checkout-items .container-order-rincian .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

#order-checkout-items .container-order-rincian .img-container {
    width: 75px;
    height: 75px;
    border-radius: 15px;
    box-shadow: 0px 8px 10px 5px rgba(0, 0, 0, 0.10);
    margin-top: 5px !important;
    /* filter: drop-shadow(0px 7px 18px rgba(0, 0, 0, 0.08)); */
}

#order-checkout-items .container-order-rincian .img-container .product-img {
    border-radius: 10px;
    width: 100%;
}

#order-checkout-items .container-order-rincian .product {
    color: #828282;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

#order-checkout-items .container-order-rincian .product .name {
    color: #202C44;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

#order-checkout-items .container-order-rincian .color-size i {
    font-size: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

#order-checkout-items .container-order-rincian .product .percentage {
    border-radius: 100px;
    background: #F1F4FA;
    padding: 0 10px 0 10px;

    /* text */
    color: #65CADF;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-right: 10px;
}

#order-checkout-items .container-order-rincian .product .price {
    text-decoration-line: line-through;
}

#order-checkout-items .container-order-rincian .product .subtotal {
    color: #202C44;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; 
}

#order-checkout-items .container-order-pembayaran {
    background: #ffffff;
    width: 420px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

#order-checkout-items .container-order-pembayaran .title {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

#order-checkout-items .container-order-pembayaran .label {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-checkout-items .container-order-pembayaran .value {
    color: #202C44;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-checkout-items .container-order-pembayaran .value-discount {
    color: var(--primary_abu);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

#order-checkout-items .container-order-pembayaran .total {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 171.429% */
}


#order-checkout-items .container-order-pembayaran .btn-batal-order {
    border-radius: 100px;
    background: #FF980045;
    width: 100%;

    /* text */
    color: #86af25;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-checkout-items .container-order-pembayaran .btn-batal-order img {
    margin-right: 10px;
    margin-bottom: 5px;
}

#alert-copy {
    position: fixed;
    bottom: 150px;
    z-index: 1040;
}

#alert-copy .alert-copy {
    padding: 8px 10px 10px 10px;
    border-radius: 10px;
    background: var(--pink_light);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

#alert-copy .alert-gagal {
    color: #FFFFFF;
    text-align: center;
    padding: 8px 10px 10px 10px;
    border-radius: 10px;
    background: #FF9800;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width: 800px) {
    #alert-copy {
        left: 50%;
        transform: translateX(-50%);
    }
}

#alert-copy .alert-copy .text {
    font-family: 'Sarabun', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
}

#modal-checkout .modal-content {
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#modal-checkout .modal-dialog {
    max-width: 425px;
    font-family: 'Sarabun', sans-serif;
}

@media (max-width:768px){
    #modal-checkout .modal-dialog {
        margin-left: 45px !important;
        margin-right: 45px !important;
    }
}

#modal-checkout .modal-dialog .title {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

#modal-checkout .modal-dialog .text {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
}

#modal-checkout .modal-dialog .btn-batal {
    width: 100%;
    border: none;
    border-radius: 50px;
    background: #F1F4FA;
    padding: 8px 10px 10px 10px;

    color: var(--pink_rabbani);
    font-size: 14px;
    font-weight: 400;
}
#modal-checkout .modal-dialog .btn-confirm {
    width: 100%;
    border: none;
    border-radius: 50px;
    background: var(--pink_rabbani);
    padding: 8px 10px 10px 10px;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
}
#modal-checkout .modal-dialog .btn-confirm-bayar {
    width: 80px;
    border: none;
    border-radius: 50px;
    background: var(--pink_rabbani);
    padding: 8px 10px 10px 10px;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
}

/* Checkout */

/* Detail Pesanan */

#data-order-pesanan {
    padding-top: 140px;
}

#order-pesanan-items .container-order-pesanan {
    background: #FFFFFF;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    position: relative;
    font-family: 'Sarabun', sans-serif;
}

.main-container-order-pesanan .product-topbar .status-order {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 800;
    font-style: normal;
    line-height: 24px;
}

.main-container-order-pesanan .product-topbar .nomor-order {
    color: #828282;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
}

#order-pesanan-items .container-order-pesanan .total-payment {
    border: 2px solid #000;
}

#order-pesanan-items .container-order-pesanan .total-payment .text {
    color:#000;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

#order-pesanan-items .container-order-pesanan .total-payment .payment {
    color:#000;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: normal;
}

#order-pesanan-items .container-order-pesanan .label-item {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#order-pesanan-items .container-order-pesanan .nama-item {
    color: #000;
    font-size: 14px;
    font-weight: 800;
    line-height: 21px;
}

#order-pesanan-items .container-order-pesanan .price-item {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

#order-pesanan-items .container-order-pesanan .color-size {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#order-pesanan-items .container-order-pesanan .color-size i {
    font-size: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

#order-pesanan-items .container-order-pesanan .percentage {
    border-radius: 100px;
    padding: 0 10px 0 10px;
    border: 1px solid #828282;

    /* text */
    color: #828282;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-right: 10px;
}
/* Detail Pesanna */


/* Searching Penjualan */
.main-container-search-penjualan .form-search .form-control {
    box-shadow: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--pink_rabbani);
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
}

.main-container-search-penjualan .form-search .form-control::placeholder {
    color: var(--pink_rabbani);
}

.main-container-search-penjualan .form-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.main-container-search-penjualan .header-ico {
    font-size: 20px;
    margin-top: 5px;
    margin-right: 15px;
    color: #EC088D90;
}

.main-container-search-penjualan .header-ico.ico-close {
    width: 20px;
    height: 20px;
    padding: 2px 3px 2px 3px;
    border-radius: 100%;
    font-size: 18px;
    background-color: #EC088D90;
    color: #FFFFFF !important;
}

#data-search-penjualan {
    padding-top: 55px;
}

#search-penjualan-items .container-search-penjualan {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;

    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
}

#search-penjualan-items .container-search-penjualan .add-langsung {
    position: relative;
}

#search-penjualan-items .container-search-penjualan .add-langsung .keranjang {
    position: absolute;
    top: 38px;
    right: 35px;
}

#search-penjualan-items .container-search-penjualan .add-langsung .keranjang-retur {
    position: absolute;
    top: 30px;
    right: 35px;
}

#search-penjualan-items .container-search-penjualan .suggest-ico {
    font-size:20px;
    margin-right: 15px;
    color: #828282;
}

#search-penjualan-items .container-search-penjualan .name {
    color: #000;
    margin-left: 4px;
}
#search-penjualan-items .container-search-penjualan .barcode {
    color: #828282;
    margin-left: 4px;
}

#search-penjualan-items .container-search-penjualan .img-round {
    width: 45px;
    height: 45px;
    border-radius: 70px;
    background-color: #4CAF5040;
    display: flex;
    justify-content: center;
    align-items: center;
}

#search-penjualan-items .container-search-penjualan .img-round .round {
    width: 25px;
    height: 25px;
}
/* Searching Penjualan */


/* Product Mandiri */

.main-container-product-mandiri .image-cover {
    width: 280px;
    height: 220px;
}

.main-container-product-mandiri .text {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.main-container-product-mandiri .scan-barcode,
.main-container-product-mandiri .scan-barcode:active {
    background: var(--pink_rabbani);
    border-radius: 50px;
    width: 50px;
    height: 50px;
    padding: 11px;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

/* Product Mandiri */


/* Promo */

#data-promo {
    padding-top: 100px;
    padding-bottom: 60px;
}

#order-items-promo .container-promo {
    background: #ffffff;
}

#order-items-promo .container-promo .detail-promo {
    background: #ffffff;
    padding: 0;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

#order-items-promo .container-promo .detail-promo .img-fluid {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#order-items-promo .container-promo .detail-promo .text-small {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

/* Promo */


/* Kitalog */

#data-kitalog {
    margin-top: -10px;
}

#items-kitalog .container-kitalog {
    background: #ffffff;
    padding: 10px;
    padding-left:0;
    padding-right:0;
}

#items-kitalog .container-kitalog iframe {
    width: 100%;
    height: 80vh;
}

@media (min-width: 767px) {
    #items-kitalog .container-kitalog iframe {
        height: 90vh;
    }
}

/* Kitalog */


/* User */

#data-user {
    padding-top: 50px;
}

#user-items .container-user {
    min-height: 90vh;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Sarabun', sans-serif;
}

#user-items .container-user .faq-title {
    color: #828282;
    font-size: 42px;
    font-weight: 700;
    font-style: normal;
}

#user-items .container-user .faq-info {
    background: #9869D910;
    padding: 15px 20px 15px 10px !important;

    text-align: justify;
    color: #9869D9;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

#user-items .container-user .container-list {
    background: #FFFFFF;
    padding: 10px 10px 10px 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
    
    font-family: 'Sarabun', sans-serif;
}

#user-items .container-user .container-list .title-list {
    color: #000000;
    font-size: 14px;
    font-style: normal;
}

#user-items .container-user .container-list .detail-list {
    color: var(--pink_rabbani);
    font-size: 14px;
}

#user-items .container-user .container-list .poin-list-icon {
    display: table;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF980030;
}

#user-items .container-user .container-list .poin-list-icon .poin-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#user-items .container-user .container-list .poin-list-icon .poin-icon img {
    width: 20px;
    height: auto;
    position: absolute;
    right: -2px;
    top: 10px;
}

#user-items .container-user .container-list .setting-list-icon {
    display: table;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #B388FF30;
}

#user-items .container-user .container-list .setting-list-icon .setting-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#user-items .container-user .container-list .setting-list-icon .setting-icon img {
    width: 20px;
    height: auto;
    position: absolute;
    right: -3px;
    top: 10px;
}

#user-items .container-user .container-list .wrench-list-icon {
    display: table;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0000FF30;
}

#user-items .container-user .container-list .wrench-list-icon .wrench-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#user-items .container-user .container-list .wrench-list-icon .wrench-icon img {
    width: 20px;
    height: auto;
    position: absolute;
    right: -2px;
    top: 10px;
    rotate: 90deg;
}

#user-items .container-user .container-list .help-list-icon {
    display: table;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4CAF5030;
}

#user-items .container-user .container-list .help-list-icon .help-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#user-items .container-user .container-list .help-list-icon .help-icon img {
    width: 20px;
    height: auto;
    position: absolute;
    right: -2px;
    top: 10px;
}

.container-user .user-mini-board {
    background-image: url("images/user_bg.svg");
    background-size: cover;
    padding: 15px 10px 15px 10px;
    border-radius: 20px;
    position: relative;

    font-family: 'Sarabun', sans-serif;
    color: #FFFFFF;
}

.container-user .user-mini-board .barcode {
    width: 130px;
    height: auto;
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.container-user .user-mini-board .icon {
    margin-top: 15px;
    z-index: 100;
}

.container-user .user-mini-board .icon .user-images {
    border-radius: 100px;
    width: 55px;
    height: 55px;
    z-index: 100;
}

.container-user .user-mini-board .icon-group {
    position: relative;
    z-index: 100;
}

.container-user .user-mini-board .icon-group .fa-solid {
    position: absolute; 
    z-index: 100;
}

.container-user .user-mini-board .icon-group .fa-certificate {
    color: #9869D9 !important;
    font-size: 20px;
    z-index: 100;
}

.container-user .user-mini-board .icon-group .fa-check {
    padding: 6px 5px 6px 5px;
    color: var(--pink_light) !important;
    font-size: 10px;
    z-index: 100;
}

.container-user .user-mini-board .title {
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    position: relative;
    z-index: 100;
}
.container-user .user-mini-board .label {
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    z-index: 100;
}
.container-user .user-mini-board .value {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    z-index: 100;
}



#user-items .container-user .container-akun-setting {
    background: #ffffff;
    padding-bottom: 15px;
    font-family: 'Sarabun', sans-serif;
}

#user-items .container-user .container-akun-setting .form-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--pink_rabbani);
}


#akun-buttons .buttons {
    position: fixed; /* Fixed/sticky position */
    bottom: 10px; /* Place the button at the bottom of the page */
    z-index: 99; /* Make sure it does not overlap */
    padding-right: 10px;
}

#akun-buttons .buttons .tambah-button,
#akun-buttons .buttons .tambah-button:active {
    border: none;
    margin-top: 10px;
    border-radius: 50px;
    background: var(--pink_rabbani);
    color: var(--white_text, #FFF);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#akun-buttons .buttons .tambah-button:disabled {
    background: #EC088D30;
    color: #EC088D;
}

#akun-buttons .buttons .batal-button,
#akun-buttons .buttons .batal-button:active {
    border: none;
    margin-top: 10px;
    border-radius: 50px;
    color: var(--pink_rabbani);
    background: #EC088D10;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#akun-buttons #buttons .container {
    padding: 0;
}

@media (min-width:767px) {
    #akun-buttons #buttons .container {
        width: 420px;
    }
}

.user-back-active {
    position: fixed;
    width: 420px;
    top: 0;
    background-color:#fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
    transition: 0.2s ease-in;
    color: #000 !important;
    z-index: 1000;
}

/* @media (min-width: 768px) {
    .user-back-active {
        width: 420px;
    }
} */

.user-whatsapp-active {
    max-width: 420px;
    position: fixed;
    bottom: 0;
    background-color:#fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
    transition: 0.2s ease-in;
    color: #000 !important;
    z-index: 1000;
}

.user-whatsapp-hide {
    display: none !important;
}

#user-items .container-user .profile-list {
    font-family: 'Sarabun', sans-serif;
}

#user-items .container-user .profile-list .title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
}

#user-items .container-user .profile-list .form-group {
    position: relative;
    border-radius: 10px !important;
    border: 1px solid #EC088D50 !important;
    padding: 5px 10px 10px 10px;
}

#user-items .container-user .profile-list .form-group label {
    color: var(--pink_rabbani);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

#user-items .container-user .profile-list .form-group .form-control {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

#user-items .container-user .profile-list .form-group .form-control.not-set {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    line-height: normal;
}

#user-items .container-user .profile-list .form-group .form-control.is-set {
    text-overflow: ellipsis;
    /* max-width: 275px; */
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

#user-items .container-user .profile-list .form-group .update-data {
    color: var(--pink_light);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    right: 15px;
    bottom: 10px;
}

#user-items .container-user .profile-list .form-floating {
    position: relative;
}

#user-items .container-user .profile-list .form-images .images-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#user-items .container-user .profile-list .form-images .images-container::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
#user-items .container-user .profile-list .form-images .images-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#user-items .container-user .profile-list .form-images .images-container .hidden {
    display: none;
}

#user-items .container-user .profile-list .form-images .images-container .btn-add-image {
    padding: 0;
    width: 86px;
    height: 86px;
    border: 1px dashed #EC088D;
    border-radius: 8px;
    color: #EC088D;
    font-size: 12px;
    margin-right: 5px;

}

#user-items .container-user .profile-list .form-images .images-container .center-cropped_old {
    object-fit: none; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    height: 86px;
    width: 86px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 8px;
}

#user-items .container-user .profile-list .form-images .images-container .center-cropped {
    object-position: center;
    height: 86px;
    width: 86px;
    border-radius: 8px;
    position: relative;
}

.img-sampul {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}

.sampul {
    position: absolute;
    background: #EC088D66;
    background-size: cover;
    bottom: 0;
    color: white;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
}

.close {
    position: absolute;
    background: #EC088D66;
    background-size: cover;
    top: 2px;
    right: 2px;
    color: white;
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 50%;
    z-index: 100;
    cursor: pointer;

    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

#user-items .container-user .profile-list .form-alamat {
    border: 1px solid #EC088D50 !important;
    border-radius: 10px;
    padding: 10px;
}

#user-items .container-user .profile-list .form-alamat .alamat {
    position: relative;
}

#user-items .container-user .profile-list .form-alamat .form-control {
    padding: 10px 0 10px 0;
    border: none;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
}

#user-items .container-user .profile-list .form-floating input {
    border-radius: 10px !important;
    border: 1px solid #EC088D50 !important;
}

#user-items .container-user .profile-list .form-floating input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

#user-items .container-user .profile-list .form-floating input::-webkit-date-and-time-value{ text-align:left; }

#user-items .container-user .profile-list .form-floating > input + label:after {
    background: transparent !important;
}

#user-items .container-user .profile-list .form-floating input:disabled {
    background: #EC088D10;
}

#user-items .container-user .profile-list .form-floating label,
#user-items .container-user .profile-list .form-alamat label {
    color: var(--pink_rabbani);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

#user-items .container-user .profile-list .form-floating .form-control {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
}

#user-items .container-user .profile-list .form-floating .form-control.not-set,
#user-items .container-user .profile-list .form-alamat .form-control.not-set {
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    line-height: normal;
}

#user-items .container-user .profile-list .form-floating .form-control.is-set,
#user-items .container-user .profile-list .form-alamat .form-control.is-set {
    text-overflow: ellipsis;
    max-width: 275px;
    overflow: hidden;
    white-space: nowrap;
}

#user-items .container-user .profile-list .form-floating .update-data {
    color: var(--pink_light);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    right: 15px;
    bottom: 10px;
}

#user-items .container-user .profile-list .form-alamat .update-data {
    color: var(--pink_light);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    right: 5px;
    bottom: 10px;
}

#user-items .container-user .profile-list .form-floating .update-data i,
#user-items .container-user .profile-list .form-alamat .update-data i {
    color: #EC088D90;
    margin-left: 5px;
    font-weight: 700 !important;
}

#user-items .container-user .profile-list .form-floating .update-data img {
    width: 18px;
    height: auto;
    z-index: 100;
}

#modal-checkout .modal-content .popup-update label {
    color: var(--pink_rabbani);
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
}

#modal-checkout .modal-content .popup-update .form-control {
    padding: 0 0 10px 0;
    border: none;
    border-bottom: 2px solid #EC088D;
    border-radius: 0;
    box-shadow: none;
}

#modal-checkout .modal-content .popup-update .form-check {
    margin-left:20%;
    transform:translateY(-50%);

    font-size: 16px;
    font-weight: 400;
    font-family: 'Sarabun', sans-serif;
}

#modal-checkout .modal-content .popup-update .form-check label {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Sarabun', sans-serif;
}

#modal-checkout .modal-content .popup-update .form-check input[type=radio]:checked {
    border-color: #EC088D;
    color: #EC088D;
    background-color: #EC088D;
}

#user-items .container-user .container-akun-setting .autocomplete {
    position: relative;
}

#user-items .container-user .container-akun-setting .select-location{
    position: relative;
}

#user-items .container-user .container-akun-setting .search-image {
    position: absolute;
    rotate: 90deg;
    font-size: 18px;
    right: 12px;
    bottom: 8px;
    color: #EC088D90;
}

#user-items .container-user .container-akun-setting input {
    border: 1px solid transparent;
    background-color: #ffffff;
    border: 1px solid #EC088D80;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    box-shadow: none;
    color: var(--pink_rabbani) !important;
}

#user-items .container-user .container-akun-setting input:focus {
    border: 2px solid red;
}

#user-items .container-user .container-akun-setting input[type=text] {
    background-color: #ffffff;
    width: 100%;
}

#user-items .container-user .container-akun-setting input[type=submit] {
    background-color: DodgerBlue;
    color: #fff;
    cursor: pointer;
}

#user-items .container-user .container-akun-setting .autocomplete-items {
    position: absolute;
    background: #F5F5F5;
    max-height: 30vh !important;
    overflow: auto;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.20);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    color: var(--pink_rabbani);
    font-weight: 400;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
}

#user-items .container-user .container-akun-setting .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
}


/*when hovering an item:*/

#user-items .container-user .container-akun-setting .autocomplete-items div:hover {
    background-color: #e9e9e9;
}


/*when navigating through the items using the arrow keys:*/

#user-items .container-user .container-akun-setting .autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

#user-items .container-user .accordion-header {
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: none;
}

#user-items .container-user .accordion-item {
    border: none;
    border-radius: 0;
}
#user-items .container-user .accordion-collapse {
    border: none;
    border-radius: 0;
}

#user-items .container-user .accordion-button {
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding-left: 10px;
    color: #008000;
}

#user-items .container-user .accordion-button:not(.collapsed) { 
    background-color: #00800010; 
    color: #008000;
} 

#user-items .container-user .accordion-button:not(.collapsed)::after,
#user-items .container-user .accordion-button.collapsed::after { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 16 16' width='24px' fill='%23EC088D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    color: white !important;
} 

#user-items .container-user .accordion-body { 
    background-color: #00800010; 
    color: #000;
    transition: 0.5s;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
}  

#user-items .container-user .collapsing {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
    transition: height 0.7s ease;
}

.main-container-order-detailed .btn-chat-wa i {
    font-size: 18px;
    margin-right: 5px;
}

.main-container-order-detailed .btn-chat-wa,
.main-container-order-detailed .btn-chat-wa:active {
    width: 100%;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: #4CAF50;
    color: var(--white_text, #FFF);
    text-align: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* User */

/* select 2 */
.select2-container .select2-selection--single {
    border: 1px solid transparent !important;
    background-color: #ffffff !important;
    border: 1px solid #EC088D80 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 40px !important;
    color: var(--pink_rabbani) !important;
    padding: 5px;
}
/* select 2 */

/* aktifasi */

#aktifasi .bg-aktifasi {
    background: #c6303e;
}

#aktifasi .text-small {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

#aktifasi .btn-aktifasi {
    background-color: #001b2e;
    border-radius: 20px;
    padding: 8px 15px;
    white-space: nowrap;
    
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}
@media (min-width: 767px) {
    .topbar-aktifasi {
        width: 420px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* aktifasi */


/* notification */

.cursor-pointer {
    cursor: pointer !important;
}

.bg-notif-home {
    background: #99A6C0 !important;
    color: #fff !important;
}

.notif-container {
    position: relative;
}

.notif-badge {
    position: absolute;
    font-size: 8px !important;
    top: 2px;
    right: 12px;
}

#notification-list {
    padding-top: 50px;
}

#notification-list .new-notif {
    font-weight: 600 !important;
    color: #000 !important;
}

#notification-list .notification-title {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

#notification-list .notification-title-width {
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

#notification-list .notification-desc {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

#notification-list .notification-desc-width {
    width: 300px;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

#notification-list .notification-date {
    color: #9E9E9E;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

#notification-list .list-detail .title {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: normal;
}

#notification-list .list-detail .text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

#notification-list .list-detail .text-gray {
    color: var(--primary_abu);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#notification-list .list-detail .description {
    text-align: justify;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
}

#notification-list .list-detail .vertical-line {
    background: #A1CBFE !important;
    height: 60px;
    width: 6px;
    content: '';
    position: absolute;
    background: white;
    border-radius: 100px;
    z-index: 1;
}
/* notification */


.nk-body { outline: none; }
.nk-app-root { outline: none; }
.nk-content-body { flex-grow: 1; }


@media (min-width: 576px) { .wide-xs { max-width: 420px !important; }
  .wide-xs-fix { width: 420px !important; } }

.is-relative {
    position: relative !important;
}

#faq .container-faq {
    background: #ffffff;
    overflow-y: auto;
    padding-top: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

@media (min-width:768px){
    #faq .container-faq {
        width: 420px;
    }
}