/* BEBAS =====================================================================================*/
@font-face 
{
    font-family: 'Ferro'; /*memberikan nama bebas untuk font*/
    src: url('font/FerroRosso.ttf');/*memanggil file font eksternalnya di folder nexa*/
}

.opacity-50{
  opacity: .5;
}

.img-w-standard img{
  width: 100%;
  height: auto;
}

.attachment__caption{
  display: none;
}

.spin_model{
  display: block;
}

.border-circle{
  border-radius: 30px;
}

.text-theme{
  color: #1DA48E;
}

.pl-3{
  padding-left: 15px !important;
}

.pr-3{
  padding-right: 10px !important;
}

.btn-theme{
  background-color: #1DA48E;
  color: white;
}

.align-right{
  text-align: right;
}

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

.cursor-pointer{
  cursor: pointer;
}

.text-right{
  text-align: right;
}

.card-header{
  background-color: #1DA48E;
  color: white;
}

.produk_terlaris{
  margin-top: 8% !important;
  margin-bottom: 3% !important;
}
#catatan{
  margin-top: 8% !important;
  margin-bottom: 3% !important;
}
/* LOGIN */
.border_login{
  max-width: 100%;
  margin: 3% 25% 20% 25%;
  border:1px rgb(232, 232, 232) solid;
}
.bg_login{
  margin: 6%;
}

/* LOGIN */
        /* KERANJANG  ====================== */
        .sidebar-keranjang {
          position: fixed;
          right: -250px;
          max-width: 250px;
          /* width:25%; */
          height: 100%;
          background: white;
          transition: all .5s ease;
          z-index: 1111;
          display:block;
          padding: 5px;
        }
        .sidebar-keranjang header {
          font-size: 22px;
          color: rgb(59, 59, 59);
          line-height: 70px;
          /* text-align: center; */
          background: rgb(255, 255, 255);
          user-select: none;
          border-bottom: 2px rgb(97, 97, 97) solid;
        }

        .sidebar-keranjang ul{
          overflow: auto;
          height: 100%;
          /* overflow-x: unset; */
        }

        .center{
          width: 150px;
            margin: 40px auto;
            
          }

        .sidebar-keranjang ul li{
          box-sizing: border-box;
          border-bottom: 1px solid rgb(240, 240, 240);
          margin-top: 25px;
        }

        .sidebar-keranjang ul li div p{
          font-size: 15px !important;
        }

        .sidebar-keranjang ul li img{
          border: 1px rgb(235, 235, 235) solid;
          border-radius: 4px;
          padding: 1px;
          min-height: 80px;
          min-width: 50px;
        }
        .sidebar-keranjang ul a{
          display: block;
          height: 100%;
          width: 100%;
          line-height: 65px;
          font-size: 20px;
          color: black;
          box-sizing: border-box;
          transition: .4s;
          text-decoration: none;
        }
        .belum-login a:hover{
          opacity: 60%;
        }

        #check{
          display: none;
        }
        label #btn-keranjang, label #cancel{
          cursor:pointer;
        }
        #btn-keranjang:hover {
          color:grey;
          }
          
          label #cancel:hover{
            color:grey;
          }
          
          label #cancel{
            z-index: 1111;
            right: 235px;
            top: 17px;
            font-size: 25px;
            color: rgb(80, 80, 80);
            padding: 4px 9px;
            transition: all .5s ease;
            border: 1px solid rgb(80, 80, 80);
            border-radius: 10px;
            
          }


          
          /* IKI LO BENAKNO KERANJANG MORAT MARET */
                    #check:checked ~ .sidebar-keranjang{
                      right: 0;
                    }
                        /* NAVBAR */
                        #check:checked ~ nav ul li a{
                          pointer-events: none; 
                        }
                        #check:checked ~ nav .logo{
                          cursor: not-allowed;
                          pointer-events: none;
                        }
                        #check:checked ~ nav .singkatnavbar{
                          cursor: not-allowed;
                          pointer-events: none;
                        }
                        #check:checked ~ nav{
                          opacity:20%;
                          right: -195px;
                        }
                        /* NAVBAR */
                        /* LISTPRODUK */
                            #check:checked ~ section .sidebar-filter{
                              cursor: not-allowed;
                              pointer-events: none;
                            }
                            #check:checked ~ section .listproduk{
                              cursor: not-allowed;
                              pointer-events: none;
                        }
                        /* LISTPRODUK */
          #check:checked ~ section{
            margin-left: 0px;
            opacity:20%;
            overflow: hidden;
          }
          #check:checked ~ #off-keranjang{
            position:fixed;
            opacity:20%;
            cursor: not-allowed;
            pointer-events: none;
          }
          /* #check:checked ~ section{
            
          } */
          /* IKI LO BENAKNO KERANJANG MORAT MARET */















          nav label i:hover #btn-keranjang{
            color:yellow;
          }
          
          .sidebar-keranjang ul li a:hover{
            opacity: 60%;
          }
        /* ================================  KERANJANG*/

        /* LIST PRODUK  ==============================*/

                /* SIDEBAR-FILTER ========================*/
                .slider{
                  height: 40vh;
                  display: -ms-grid;
                  display: grid;
                  background-color: white;
                }
                .wrapper{
                  /* position: relative;
                  width: 40vmin; */
                  background-color: white;
                  padding: 5px 40px 20px 0px;
                }
                .wrapperm{
                  /* position: relative;
                  width: 70vmin; */
                  background-color: white;
                  padding: 5px 20px 20px 20px;
                }
                .container{
                  position: relative;
                  width: 100%;
                  height: 50px;
                  background-color: white;
                  padding-top: 0px;
                  
                }
                .containerm{
                  position: relative;
                  width: 100%;
                  height: 50px;
                  background-color: white;
                  padding-top: 0px;
                  
                }
                input[type="range"]{
                  -webkit-appearance: none;
                  -moz-appearance: none;
                  appearance: none;
                  width: 100%;
                  outline: none;
                  position: absolute;
                  margin:auto;
                  top: 0;
                  bottom: 0;
                  background-color: transparent;
                  pointer-events: none;
                }
                .slider-track{
                  width: 100%;
                  height: 5px;
                  position: absolute;
                  margin: auto;
                  top: 0;
                  bottom: 0;
                  border-radius: 5px;
                }
                .slider-trackm{
                  width: 100%;
                  height: 5px;
                  position: absolute;
                  margin: auto;
                  top: 0;
                  bottom: 0;
                  border-radius: 5px;
                }
                input[type="range"]::-webkit-slider-runnable-track{
                  -webkit-appearance: none;
                  height: 5px;
                }
                input[type="range"]::-moz-range-track{
                  -moz-appearance: none;
                  height: 5px;
                }
                input[type="range"]::-ms-track{
                  appearance: none;
                  height: 5px;
                }
                input[type="range"]::-webkit-slider-thumb{
                -webkit-appearance: none;
                height: 1.7em;
                width: 1.7em;
                background-color: #1DA48E;
                cursor: pointer;
                border-radius: 10px;
                pointer-events: auto;
                margin-top: -9px;
                
                }
                input[type="range"]::-moz-range-thumb{
                  -webkit-appearance: none;
                  height: 1.7em;
                  width: 1.7em;
                  cursor: pointer;
                  border-radius: 50%;
                  background-color: #1DA48E;
                  pointer-events: auto;
                }
                input[type="range"]::-ms-thumb{
                  appearance: none;
                  height: 1.7em;
                  width: 1.7em;
                  cursor: pointer;
                  border-radius: 50%;
                  background-color: #1DA48E;
                  pointer-events: auto;
                }
                input[type="range"]:active::-webkit-slider-thumb{
                  background-color: white;
                  border:3px solid #1DA48E;
                }
                .values{
                  width: 92%;
                  position: relative;
                  margin-left: 58px;
                  padding: 10px 0;
                  border-radius: 5px;
                  text-align: center;
                  font-weight: 200;
                  font-size: 5px;
                  color: grey;
                }
                .values:before{
                  content: "";
                  position: absolute;
                  height: 0;
                  width: 0;
                  border-left: 15px solid transparent;
                  border-right: 15px solid transparent;
                  margin: auto;
                  left: 0;
                  right: 0;
                }
                .valuesm{
                  width: 92%;
                  position: relative;
                  /* margin-left: 23px; */
                  padding: 10px 0;
                  border-radius: 5px;
                  text-align: center;
                  font-weight: 200;
                  font-size: 5px;
                  color: grey;
                }
                .valuesm:before{
                  content: "";
                  position: absolute;
                  height: 0;
                  width: 0;
                  border-left: 15px solid transparent;
                  border-right: 15px solid transparent;
                  margin: auto;
                  left: 0;
                  right: 0;
                }
                .filter-harga{
                  height: 35px;
                  width: 100%;
                background-color: #1DA48E;
                border-radius: 20px;
                color: white;
                cursor: pointer;
                text-align: center;
                /* padding: 8px 60px 30px 30px; */
                margin: 70px 0 0 0;
                }
                .filter-harga:hover{
                  opacity: .85;
                  color: white;
                }
                .hasil_detail{
                padding: 3% 4% 0 4%;
                }
                .judul_histori_pesanan{
                  margin-bottom: 2%;
                }
                .button-judul a:hover{
                opacity: 70%;
                }
                /*======================== SIDEBAR-FILTER */

          .diskon{
            position: relative;
            height: 57px;
            width: 57px;
            margin-top: 0%;
          background-color: red;
          border-radius: 50%;
          color: white !important;
          z-index: 111;
          padding: 12px;
          top: 30%;
          /* margin-left: -10px; */
          opacity: 60%;
          justify-content: center;
          text-decoration: none;
          }
          .diskon-terlaris{
            position: relative;
            height: 57px;
            width: 57px;
            color: white !important;
            /* padding-top: 100px; */
          background-color: red;
          border-radius: 50%;
          z-index: 111;
          padding: 12px;
          top: 75px;
          /* margin-left: -10px; */
          opacity: 60%;
          justify-content: center;
          text-decoration: none;
          }
          .no_diskon{
            position: relative;
            height: 57px;
            width: 57px;
            margin-top: 0%;
          background-color: transparent;
          border-radius: 50%;
          z-index: 111;
          padding: 12px;
          top: 30%;
          margin-left: -10px;
          opacity: 60%;
          justify-content: center;
          text-decoration: none;
          }

          .listproduk .teks{
            text-decoration: none;
            border-style: none;
            margin: 20px 20px 0 0px;
            font-size:10%;
            color: rgb(68, 68, 68);
          }
          .produk_terlaris .listproduk .teks h5{
            text-decoration: none;
            border-style: none;
            margin: 20px 20px 0 0px;
            font-size:100%;
            color: rgb(68, 68, 68);
          }
          .listproduk .capt-jenis{
            color: rgb(197, 197, 197);
            margin-bottom: -25px;
          }
          .part{
            box-shadow: 
            3px 5px 2px rgba(70, 70, 70, 0.2);
            transition: .4s ease all;
          }
          .part-terlaris{
            box-shadow: 
            3px 5px 2px rgba(70, 70, 70, 0.2);
            transition: .4s ease all;
          }

          .part-terlaris p{
            font-size: 15px !important;
          }

          .part-terlaris:hover{
            margin-top: -7px;
          }

          .part:hover{
            margin-top: -7px;
          }
          .teks:hover{
            opacity: 70%;
          }

          .gambar1 {
            display: block;
            height: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 1;
          }

          .overlay-produk {
            position: relative;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            text-align: center;
            
          }

          .item_produk:hover .gambar2{
            opacity: 98%;
          }

          .gambar2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transition: .4s ease;
            text-align: center;
            opacity: 0;
            border-radius: 2px;
          }

          /*=============================== LIST PRODUK*/
        
         

          /* NAVBAR ====================================*/
          nav ul li{
            margin: 0 15px;
        }
        
        .cool-link::after{
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #1DA48E;
            transition: width .3s;
        }
        .cool-link:hover::after{
            width: 100%;
            transition: width .3s;
        }

        /*====================================  NAVBAR*/
      
      
      
      /* LANDING PAGE =======================*/
      .rekom_produk{
        background-color: white;
      }
      .pilihan_produk{
        background-color: white;
        padding: 3%;
      }
      .pilihan_kategori{
        width: 100%;
        height: 100vh;
      }
      .button_jenis {
        border-radius: 2px;
        background-color: #ffffff;
        border: none;
        color: rgb(0, 0, 0);
        text-align: center;
        font-size: 22px;
        padding: 12px;
        width: 150px;
        transition: all 0.5s;
        cursor: pointer;
        margin-top:80%;
        box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
      }
      
      .button_jenis{
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }
      
      .button_jenis:after {
        content: '»';
        position: absolute;
        opacity: 0;  
        top: 12px;
        right: -20px;
        transition: 0.1s;
      }
      
      .button_jenis:hover{
        padding-right: 24px;
        padding-left:8px;
        background-color: #1DA48E;
        color: white;
      }
      
      .button_jenis:hover:after {
        opacity: 1;
        right: 10px;
      }
      .pilihan_produk section{
        opacity: 80%;
      }
      .capt_pilihan{
        color: white;
        padding-top: 20%;margin-bottom:-20%
      }
      .pilihan_produk section:hover{
        opacity: 100%;
      }
      #kaki{
        background-color: #1DA48E;
        color: white;
        padding: 4% ;
      }
      .kontak a:hover{
        opacity: 60%;
      }
      .pusat_bantuan a{
        text-decoration: none;
      }
      .pusat_bantuan a:hover{
        color: white;
        opacity: .6;
      }

      .card-testi {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 40%;
        padding: 2px;
        margin-bottom: 5px;
        border-radius: 3%;
      }
      
      section .testi .item p{
        font-size: 2px;
      }
      .capt-testi h5{
        font-size: 8pt;
      }
      .capt-testi h6{
        font-size: 9pt;
      }
      section .testi .item-testi{
        width: 250px;
        height: 110px;
      } 

      section .testi .item-testi img{
        border-radius: 20px;
        max-width: 80%;
        height: auto;
      }
      /*======================= LANDING PAGE*/
      
      /* FOOTER==================== */
      li.list-group-romawi::before {
        /* font-size: 2.25rem; */
        content: counter(section, lower-flatin) ". ";
        border: none;
    }
    
      #kurir_pengiriman p{
        margin-left: 4%;
      }
      /* =======================FOOTER */



      /* GAROH */
      .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }
      
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      
      .dropdown-content a:hover {background-color: #f1f1f1;}
      
      .dropdown:hover .dropdown-content {
        display: block;
      }
      
      .dropdown:hover .dropbtn {
        background-color: #3e8e41;
      }
      /* GAROH */

      .status_space{
        padding: 5px 15px;
        border-radius: 30px;
    }
    .status_pending{
        background-color: rgb(208, 178, 43);
        color:white;
    }
    .status_cancelled{
        background-color: rgb(209, 12, 12);
        color:white;
    }
    .status_paid{
        background-color: rgb(95, 193, 129);
        color:white;
    }
    .status_process{
        background-color: rgb(0, 255, 145);
        color:white;
    }
    .status_sending{
        background-color: rgb(0, 102, 255);
        color:white;
    }
    .status_completed{
        background-color: rgb(9, 126, 26);
        color:white;
    }

     .transaction_list{
      box-shadow: #1DA48E 0px 5px 15px;
      border-radius: 10px;
      transition: .5s;
     }
    .transaction_list:hover{
      /* opacity: .75; */
      filter: brightness(.9);
      color: black;
    }

    .vertical-center{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .vertical-center-left{
      display: flex;
      align-items: center;
    }

    .any_testimony{
      padding: 8px;
      border: 3px solid #92c792;
      border-radius: 30px;
      color: #92c792;
    }
/* =====================================================================================  BEBAS */

.spinner-border-lg{
  position: fixed;
  top: 50%;
  left: calc(50%);
}


/* TESTI IMAGE ZOOM MODAL */
.special-modal .modal-content {
  background-color: unset;
  border: unset;
}

.special-modal .modal-header {
  border-bottom: unset;
}
.modal.fade.zoom:not(.show) .modal-dialog {
  transform: scale(2);
}

.teks-promo{
  padding: 10px;
  text-align: center;
  color: white !important;
}
 .navbar li .dropdown-item:active{
  background-color: #127967;
 }
 .navbar li .dropdown-item:hover{
  background-color: #1DA48E;
  color: white;
 }

 .navbar li .dropdown-item{
  transition: all .3s ease;
 }


 /* .mobile-banner{
  height: 100vh;
} */
 @media screen and (min-width: 992px) {
  .web-banner{
    display: block !important;
  }
  .mobile-banner{
    display:none !important;
  }
}
@media screen and (max-width: 991px) {
  .web-banner{
    display: none !important;
  }
  .mobile-banner{
    display:block !important;
  }
}



.read-more-show{
  cursor:pointer;
  color: #1DA48E;
}
.read-more-hide{
  cursor:pointer;
  color: #1DA48E;
}
.hide_content{
  display: none;
}

.transition{
  transition: all .5s ease;
}

.no-li{
  list-style: none;
}

.children_sidebar_category{
  margin-left: 15px;
}

.page-sidebar-menu{
  height: 250px;
  overflow-y:auto;
  overflow-x:hidden;
}