@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");



@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Oxanium:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&family=Tangerine:wght@400;700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap'); */



/* @import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=Great+Vibes&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Oxanium:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&family=Tangerine:wght@400;700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap'); */

/* @import url('https://db.onlinewebfonts.com/c/a25a2b5ee7c422eb0afa54d96a36b144?family=SweetSansPro-Bold');

@import url('https://db.onlinewebfonts.com/c/304efff9f3963a0ded6c244c0c9a941e?family=SweetSansPro-Regular'); */



@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Genos:ital,wght@0,100..900;1,100..900&family=Great+Vibes&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Oxanium:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&family=Tangerine:wght@400;700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');



@font-face {



  font-family: 'Open Sans Condensed';



  src: url('/app-assets/fonts/OpenSans-CondLight.ttf') format('truetype');



  font-weight: normal;



  font-style: normal;



}



* {



  margin: 0px;

  padding: 0px;

  box-sizing: border-box;



}



table thead th {

  border: 2px solid white !important;  

}



th {
  pointer-events: none;
  user-select: text !important;
}

#sortSelect {



  background-color:white;



  color:black;



}



.bordertop {   



  border-top: 1px solid #e6e5e5;



  margin-bottom:10px;



}



.btn {



  text-decoration:none;



  border: 1px solid black; /* Warna merah sebagai contoh */



  color: black; /* Warna teks sesuai dengan warna border */



}







.btn:hover {



  background-color: black; /* Warna latar belakang pada hover */



  color: #ffffff; /* Warna teks pada hover */



}

.swal-custom-popup {

  font-family: 'Genos', sans-serif;

  text-transform: uppercase;

  padding: 0px;

}



@keyframes fadeZoomIn {

  from {

      opacity: 0;

      transform: scale(0.95) translateY(-10px);

      /* efek modal: sedikit mengecil dan turun */

  }



  to {

      opacity: 1;

      transform: scale(1) translateY(0);

  }

}



.fadeZoomIn {

  animation: fadeZoomIn 0.8s ease-out;

}



/* .custom-yes-button,

.custom-no-button {

  margin: 0 10px !important;

  width: 145px !important;





} */



.custom-popup {

  background-color: #4c4c4c !important;

  color: white !important;

  font-family: Arial, sans-serif !important;

  text-align: center !important;

  border-radius: 2px !important;

  padding: 15px 10px 18px !important;

  max-width: 345px !important;

  margin: 0 auto !important;

}



.custom-button-group {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin: 5px 0 0 0 !important;

  padding: 0 !important;

}



.custom-yes-button {

  background-color: #008000 !important;

  color: white !important;

  border-radius: 3px !important;

  font-size: 14px !important;

  border: none !important;

  width: 145px !important;

  height: 25px !important;

}



.custom-no-button {

  background-color: #ff0000 !important;

  color: white !important;

  border-radius: 3px !important;

  font-size: 14px !important;

  border: none !important;

  width: 145px !important;

  height: 25px !important;

}



/* Optional: rapatkan antar bagian Swal */

.swal2-popup {

  padding: 10px 10px 15px !important;

}



.swal2-html-container {

  margin: 0 !important;

  padding: 0 !important;

}



.swal2-actions {

  margin: 5px 0 0 0 !important;

  padding: 0 !important;

}



.dekorasiatas a {



  text-decoration:none;



  font-size:14px;



  font-weight: bold;



  color:black;



  font-family: Arial, sans-serif;



}



.dekorasiatas {



  text-decoration:none;



  font-size:14px;



  font-weight: bold;



  color:black;



  font-family: Arial, sans-serif;



  background-color: white;



}



.dekorasiatasisi {



  text-decoration:none;



  font-size:13px;



  font-weight: bold;



  /* color:black; */



  font-family: Arial, sans-serif;



  background-color: white;



}



.datasearch {

  position: relative;

  cursor: pointer;

  display: inline-block;

  font-family: 'Genos', sans-serif;

  font-size: 14px;

  font-weight: 500;

}



/* Tooltip default: tidak tampil */

.datasearch::after {

  content: attr(data-tooltip);

  white-space: pre-wrap !important;   

  position: absolute;

  top: 25px;

  left: 50%;

  transform: translateX(-50%);

  background: #5d5b6a; ;

  color: #fff;

  padding: 6px 10px;

  border-radius: 4px;

  font-size: 13px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.2s ease-in-out;

  z-index: 1000;

}



.datasearch:hover::after {

  opacity: 1;

  visibility: visible;

}





.dekorasiatastipis {    



  text-decoration:none;



  font-size:18px;    



  color:gray;



  /* font-weight: bold; */



  font-family: Arial, sans-serif;



  background-color: white;



}



.dekorasiatastipisvalue {    



  text-decoration:none;



  font-size:16px;    



  color:black;



  font-weight: bold;



  font-family: Arial, sans-serif;



  background-color: white;



}



.table_headerinput {



  width: 100%;



  height: 30px;



  opacity:unset;



  background-color: rgba(247, 221, 221, 0.267);



  padding: 5px;



  border-bottom: 1px solid silver;  



}







.labelcustom label {



  font-size:12px;



  font-family: 'Roboto',sans-serif;  



  text-transform: none;



}







.table_headerinput a:hover {



  color: purple; 



  text-decoration: underline; 







}







.labelcustom input,



.labelcustom select ,



.labelcustom textarea



{



  color:black;



  font-size:13px;



  font-family: 'Open Sans',sans-serif;



  height: 30px;



  text-transform: none;



  padding:3px;



  border-radius:1px;



}











.table_headerinput span {



  font-weight: 500;



  font-family: 'Oswald',sans-serif;



  font-size: 15px;



}







.table_header span {



  font-weight: 300px;



  font-style: italic;



  font-size: 11px;



}



.quickconnect {

  /* position: absolute; */

}



.quickconnect span:hover {

  cursor: pointer;

  color:silver;

  padding-bottom:2px;

}



.alltable_header span {

  font-family: 'Genos', sans-serif !important;

  font-weight:400;

  text-transform: uppercase !important;

  transform: scaleY(0.7);

  background-color:#3b414d;

  color:white;

  font-size:21px !important;

  letter-spacing:1px !important; 

  color:white;

  padding:0;

}



.border-header {



  border-bottom:2px solid silver;



}







.dekorasi a {



  text-decoration:none;



  font-size:11px;



  color:black;



  font-family: Arial, sans-serif;



}



.dekorasi span {



  text-decoration:none;



  font-size:11px;



  color:black;



  font-family: Arial, sans-serif;



  font-weight: 300;



}



.dekorasi {



  text-decoration:none;



  font-size:13px;



  color:black;



  font-family: Calibri, sans-serif;



}











#featured {



  height: 100%;



  width: 100%;



  transform-origin: center center;



  transform-origin: 20px 20px;



  object-fit: cover;



  transform: scale(1);



  cursor: pointer;



}











input::placeholder {



  font-size: 12px;



  font-weight: 400;



}







textarea::placeholder {



  font-size: 12px;



  font-weight: 400;



}







.form-control-position {



  position: absolute;



  top: 2px;



  right: 0;



  display: block;



  width: 2.5rem;



  height: 2.5rem;



  line-height: 2.5rem;



  text-align: center;



  color: rgba(0, 0, 0, 0.4);



}







.form-control-position {



  position: absolute;



  top: 2px;



  right: 0;



  display: block;



  width: 2.5rem;



  height: 2.5rem;



  line-height: 2.5rem;



  text-align: center;



  color: rgba(0, 0, 0, 0.4);



}







/* Input Icon Positioning */



.position-relative .form-control {



  padding-right: calc(1.4em + 0.94rem + 3.7px);



}







.position-relative .form-control.form-control-lg ~ .form-control-position {



  top: 6px;



}







.position-relative .form-control.form-control-sm ~ .form-control-position {



  top: -4px;



}







/* Input Icon Left */



.has-icon-left .form-control {



  padding-right: 1.6rem;



  padding-left: 2.5rem;



}







.has-icon-left .form-control-position {



  right: auto;



}







.has-icon-left .form-control-position i {



  position: relative;



  left: 2px;



  top: 1px;



  color: rgba(0, 0, 0, 0.4);



}











.indent{



  padding-left:10px;



}



.faq{



  max-width: 700px;



  margin-top: 2rem 0rem;



  padding-bottom: 1rem;



  /* border-bottom: 1px solid silver; */



  cursor: pointer;



}



.question{



  /* display: flex;



  justify-content: space-between;



  align-items: start; */



}



.answer{



  max-height: 0;



  overflow:hidden;



  transition: max-height 1.4s ease;



}



.answer p {



  padding-top: 1rem;



  line-height: 1.6;



  font-size: 1.4rem;



}



.answer label {



  padding-top: 1rem;



  line-height: 1.6;



  font-size: 1.4rem;



}







.faq.active .answer{



  max-height: 300px;



}



.hero {



  min-height: 100vh;



  /* background-image: url("/assets/img/backgrounds/1.jpg"); */



  background-size: cover;



  background-position: center;



  background-color: white;



  width: 100%;



}







.hero a{



  color:black;



}



.myshoppingcard {



  background-color:transparent;



  padding-bottom:15px;



  border:1px solid black;  



  box-shadow: 1px 1px 10px rgba(0,0,0,0.1);  



}







.myshoppingcard label,span



 {



  color:black;



  font-family:'Roboto',sans-serif;



  font-size:15px;







}







.myshoppingcard tfoot td {



  background-color: white;



}



.myshoppingcard th, thead {



  color:black;  



  font-weight:100;



  font-size:15px;



  background-color: transparent;



  border-bottom:1px solid black;



  font-family: 'Roboto',sans-serif;



}







.myshoppingcard tfoot {



  background-color: #f2f2f2; /* Warna latar belakang */  



}







.myshoppingcard td {



  border-bottom: 1px solid black;



  text-align: center;



  color: black;



  font-family: 'Roboto',sans-serif;



}







.myshoppingcard i{



  color:black;



}







.mybtn{



  background-color: transparent;



  border:1px solid white;



  color:black;



  font-size: 14px;



  border-radius: 0;;



}







.mygallery {



  width:100%;



  display:flex;



  overflow-x:scroll;



  padding:5px;



  grid-gap:5px;



  grid-template-columns: auto auto auto;



  flex:none;



}







.box {



  width:175px;  



  border-radius:5px;        



  left:50%



  top:50%



  transform:translate(-50%-50%);



}







.box2 {



  width:340px;



  height:276.59px;



  box-shadow: 1px 1px 10px rgba(0,0,0,0.1);



  border:1px solid silver;



  border-radius:5px;        



  left:100%



  top:50%



  transform:translate(-50%-50%);



}







.cardbox {



  /* box-shadow: 1px 1px 10px rgba(0,0,0,0.1);     */



}



.slide-img {  



  width:175px;



  height:125px;



  display:flex;



  justify-content:center;



  align-items:center;



  position:relative;



}



.slide-img2 {  



  width:90%;



  height:90%;



  display:flex;



  justify-content:center;



  align-items:center;



  position:relative;



}







.slide-img img {



  width:120px;



  height:100%;



  object-fit:contain;



  box-sizing:border-box;



  padding:5px;



}











.detail-box2 {   



  width:100%;



  /*height:75px;*/



  display:flex;



  justify-content:center;      



  align-items:center;



  /* padding:10px 10px; */



  /* box-sizing:border-box; */



  font-family:'Roboto',sans-serif;



  /* border-top:1px solid #e6e5e5; */



  /* background: #f9f9f9;   */



  height:75px;  



}







.detail-box {   



  width:100%;



  display:flex;



  justify-content:center;      



  align-items:center;



  padding:10px 10px;



  box-sizing:border-box;



  font-family:'Roboto',sans-serif;



}







.type {



  display:flex;



  justify-content: center;    



  flex-direction:column;



}







.type a {



  color:black;  



  font-size:10px;



  margin:5px 0px;



  text-align: center;



  text-wrap: balance;



  justify-content: center;  



  font-weight:500;



  letter-spacing:0.5px;



  padding-right:8px;



  font-family:'Roboto',sans-serif;



}



.type span{



  color:black;



  font-size:10px;



  text-align: center;



  justify-content: center;  



}







.type2 {



  display:flex;



  justify-content: center;    



  flex-direction:column;



}







.type2 a {



  color:black;  



  font-size:13px;



  margin:5px 0px;



  text-align: center;



  text-wrap: balance;



  justify-content: center;  



  /* font-weight:500; */



  /* letter-spacing:0.5px; */



  padding-right:8px;



  font-family:'Roboto',sans-serif;



  text-transform: uppercase;



}



.type2 span{



  color:black;



  font-size:13px;



  text-align: center;



  justify-content: center;  



  font-family:'Roboto',sans-serif;



}







.price{



  color:#333333;



  font-weight:600;



  font-size:1.1rem;



  font-family:poppins;



  letter-spacing:0.5px;



  font-family:'Roboto', sans-serif;



}







.overlay {



  position:absolute;



  left:50%;



  top:50%;



  transform:translate(-50%,-50%);



  width:100%;



  height:100%;



  /* background-color:rgba(92,95,236,0.6); */



  display:flex;



  justify-content:center;



  align-items:center;    



  visibility:hidden;



}







.overlay2 {



  position:absolute;



  left:50%;



  top:50%;



  transform:translate(-50%,-50%);



  width:100%;



  height:100%;



  /* background-color:rgba(92,95,236,0.6); */



  display:flex;



  justify-content:center;



  align-items:center;    



  visibility:hidden;



}







.buy-btn{



  width:80px;



  height:25px;



  display:flex;



  justify-content:center;



  align-items:center;



  background-color:#FFFFFF;



  color:#252525;



  font-weight:500;



  font-size: 13px;



  letter-spacing:1px;



  font-family:calibri;



  border-radius:20px;



  box-shadow:2px 2px 30px rgba(0,0,0,0.2);



}







.buy-btn:hover{



  color:#FFFFFF;



  background-color:#f15fa3;



  transition: all ease 0.3s;



}







.slide-img:hover .overlay{



  visibility:visible;



  animation:fade 0.5s;



}



.slide-img2:hover .overlay{



  visibility:visible;



  animation:fade 0.5s;



}







@keyframes fade{



      0%{



          opacity:0;



      }



      100%{



          opacity:1;



      }



}















.heroadmin {



  padding:10px;



  /* height: 100vh;   */



  background-color: white;    



}



.stepper-input{



  position: absolute;







  left: 46%;



  transform: translate(-50%,-50%);



  width: 180px;



  height: 30px;



  background: #fff;



  border: 1px solid #ddd;



  border-radius:8px;



  box-shadow: 0px 20px 5px rgba(0, 0, 0, 0.05);



  overflow: hidden;



}







.wrapping{



  height: 30px;



  width: 40%;



  display: flex;



  margin-left: 2px;



  align-items: center;



  justify-content: center;



  border:1px solid silver;



  background: #fff;



  border-radius: 5px;



  /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); */



}







.wrapping span{



  width: 100%;



  text-align: center;



  font-size: 15px;



  font-weight: 600;



  font-family: 'Poppins',sans-serif;



  cursor: pointer;



}



.wrapping span.num{



  font-size: 13px;



  font-weight: 500;



  color: :black;



  border-right: 2px solid rgba(0, 0, 0, 0.2);



  border-left: 2px solid rgba(0, 0, 0, 0.2);



  pointer-events: none;



}



.mycard-header h5{



  display: flex;



  align-items: center;



  justify-content: space-between;;



}







.licard-img,



.licard-img-top {



  width:100%;



  height:100%;



  display:flex;



  align-items: center;



  justify-content: center;



  margin: auto;



  object-fit: contain;



}







.leftdashboard {  



  padding:10px;



  /* border: 1px solid #e5f5dc;



  border-radius: 3px; */



}







.rightdashboard {



  padding:10px;  



  /* border: 1px solid #e5f5dc;



  border-radius: 3px; */



}







.container p, span,label,h3 {



  color:black;



}







.mycontainer {



  max-width: 1480px;



  margin: auto;



  padding: 0 15px;



}







.admincontainer {



  max-width: 1400px;



  margin: auto;



  padding: 0 15px;



}







body {  



  font-family: "Poppins", sans-serif;



  background: white;



}



.heroadmin {



  padding:10px;



  /* height: 100vh;   */



  background-color: white;    



}







.userlogin {



  height: 100vh;



}



.alltable_header {



  font-size: 20px;



  font-family: 'Roboto', sans-serif;



  color: white;



  position: fixed;



  top:50px;



  left:0;



  width: 100%;



  height: 35px !important;



  background-color: rgb(61, 65, 78);

  /* border-bottom: white; */



  padding: 10px;



  z-index: 10;  



  opacity: 1;



}







.loginheader h1 {



  font-family: 'Poppins',sans-serif;



  font-style: normal;



  font-weight: 600;



  font-size: 32px;



  line-height: 48px;



  color: black;



}











.loginheader p {



  font-family: 'Poppins',sans-serif;



  font-style: normal;



  font-weight: 400;



  font-size: 14px;



  line-height: 21px;



  color: #737373;



  margin-bottom: 20px;



}



.login-form input{



  font-family: 'Poppins',sans-serif;



  background-color: #FFFFFF;



  border: 1px solid #BCBCBC;



  box-sizing: border-box;



  border-radius: 8px;



}







.login-form label {



  font-family: 'Poppins',sans-serif;



  margin-top: 20px;



  font-style: normal;



  font-weight: 400;



  font-size: 16px;



  line-height: 24px;



  color: #000000;



}







.login-left {



  border-right: 1px solid silver;



}











.login-form a{



  font-family: 'Poppins',sans-serif;



  font-style: normal;



  font-weight: 400;



  font-size: 14px;



  line-height: 21px;



  color: #737373;



  margin-top:20px !important;



  display: block;



}



.login-form .signin {



  font-family: 'Poppins',sans-serif;



  width: 100%;



  height: 42px;



  background:#000000;



  border:none;



  border-radius: 8px;



  color:#ffffff;



  margin:5px 0 0 0;



}



.login-form .span {



  font-family: 'Poppins',sans-serif;



  font-style: normal;



  font-weight: 400;



  font-size: 14px;



  line-height: 21px;



  color: #737373;



}



.login-form span a {



  font-family: 'Poppins',sans-serif;



  font-weight: 600;



}











.myheader {



  position: fixed;



  left: 0;



  top: 0;



  width: 100%;



  /* border-bottom: 0.5px solid white; */

  border-bottom: 1px solid rgba(255, 255, 255, 0.5);

  /* background-color:#e6e5e5; */



  background-color: rgb(61, 65, 78);



  z-index: 11;



}







.myheader .mycontainer {



  display: flex;



  align-items: center;



  justify-content: space-between;



}







.mylogo {



  /* background-color: #e6e5e5;   */



  background-color: transparent;



}







.myheader .mylogo img {



  vertical-align: middle;



  /* margin-left: 350px; */



}



.myheader .mymenu .myhead {



  display: none;



}







.myheader .mymenu ul {



  list-style: none;



  



}







.myheader .mymenu > ul > li {



  display: inline-block;



  



}







.myheader .mymenu > ul > li:not(:last-child) {



  margin-right: 15px;  



}







.myheader .mymenu .mydropdown {



  position: relative;



}



.myheader .mymenu .mydropdown  i{



  color:white;



}







.myheader .mymenu > ul > .mydropdown > a {



  padding-right: 15px;



  



}







.myheader .mymenu .mysub-menu{



    position: absolute;



    top: 100%;    



    left: 0;    



    padding: 15px 0;



    white-space: nowrap;



    background-color: #e6e5e5;



    box-shadow: hsla(0, 0%, 0%, 0.5)



    z-index: 1;



    transform-origin:top;



    transform:scaleY(0);



    visibility:hidden;



    opacity: 0;   



    



}











.myheader .mymenu .mysub-menu a{



    padding: 6px 24px;



    font-size: 15px;

    color: black;



    /* margin-bottom:15px; */



    



}







.myheader .mymenu .mysub-menu i{



transform: rotate(-90deg);



right: 24px;



color:black;



}







.myheader .mymenu a:hover {



  background-color: silver; 



  color: black !important; 



  width:100%; 



  transition: background-color 0.3s ease, color 0.3s ease;



}







.myheader .mymenu a {



  font-family: "Open Sans Condensed", sans-serif;



  letter-spacing: 2px;



  text-decoration: none;  



  text-transform: uppercase;  



  display: block;  



  color: white;



  font-size: 17px; 



   /* font-weight: 100;   */







}



.myheader .mymenu .mysub-menu .mydropdown > a{



    padding-right: 34px;

    color: black;



}



/* .pd-menu {

  padding: 10px 20px;

  color: black;

  text-decoration: none;

  background-color: transparent;

  transition: background-color 0.3s;

} */



.pd-menu.active {

  background-color: #007bff; 

  color: black; ;

}



.pd-menu:hover {

  background-color: #0056b3; /* Hover color */

  color: white;

}



.myheader .mymenu .mysub-menu span{



    /* background-image: linear-gradient(hsl(0,0%,100%), hsl(0,0%,100%));



    background-size: 0 1px;



    background-repeat: no-repeat;



    background-position: 0 100%;



    transition: background-size 0.5s ease; */



}







.myheader .mymenu .mysub-menu-right{



    left: 100%;



    top:0;



}







.myheader .mymenu .mysub-menu-left{



    left: auto;



    top:0;



    right:100%



}







.myheader .mymenu li:hover > .mysub-menu{



    opacity:1;



    transform: none;



    visibility: visible;



    transition: all 0.5s ease;

    color: black !important;



}







.myheader .mymenu .mysub-menu li:hover > a > span{



    background-size: 100% 1px;

    



}







.myheader .mymenu i {



  font-size: 10px;



  pointer-events: none;



  user-select: none;



  position: absolute;



  color:hsl(0, 0%, 100%));



  top: calc(50% - 5px);



}







.myheader .mymenu > ul > li > i{



    right:0;



    color:white;



}



.myheader-right { 



    display:flex;

    width:200px !important;



}







.myheader-right span {



color:black;



}







.myheader-right span {



  color:black;



  }







.myheader-right > *{



    margin-left: 25px;



}







.myheader-right .icon-btn{



    background-color: transparent;



    border:none;



    cursor: pointer;



    color: black;



    font-size:16px;



}







.myheader-right .open-menu-btn{



    display:none;



}







.mytableanalisis {







    overflow-y: auto;



}



 



.mboard {  



  height:30px;



  /* background-color: white;   */



  display: flex;



  align-items: center;



  justify-content: center;



  width: auto; 



  margin: 0;



  color:black;



}







.mboard span { 



  color:black;



  text-decoration: none;



  font-family: 'Roboto',sans-serif;



  font-weight: 500;



 }



.mboardleft {



  background-color: white;



  padding:10px  0 0 0 ;  



  width: 100%; 



  margin-top: 0;  



}



.mboardright {



  background-color: white;



  padding:10px  0 0 0 ;  



  width: 100%; 



  display: flex;



  justify-content: end;



}



.mainrigntspan {



  display: flex;



  justify-content: flex-end;  



}



.mainrigntspan span {



  background-color: white;   



  display: flex;    



  align-items: end;



  margin-top: auto;



  font-size: 10px;



  font-weight: 500;



  font-style: italic;



}



.mainleftspan {



  margin-top: 20px;



}



.mainleftspan span {



  font-size: 10px;



  font-style: italic;



  color:black;  



  padding-bottom: 0;



}



.mboardright .kotakleft {



  font-family: 'Roboto', sans-serif;



  border: 1px solid silver;



  padding: 5px 15px 5px 15px;



  border-radius: 5px;



  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);  



  color: black;



  display: inline-block;



  word-wrap: break-word;  



  width: auto;   



  box-sizing: border-box; /* Menghitung padding dan border ke dalam lebar */



  white-space: normal;



  background-color: #0dcaf0;



}



.newmessage {



  font-family:'Poppins', sans-serif;



  font-size:18px;  



}



.no-spacing p {



  margin: 0;



  /* padding: 0; */



}



.mboardleft .kotakleft {



  font-family: 'Roboto', sans-serif;



  border: 1px solid silver;



  padding: 5px 15px 5px 15px;



  border-radius: 5px;



  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);  



  color: black;



  display: inline-block;



  word-wrap: break-word;



  width: auto; 



  box-sizing: border-box; /* Menghitung padding dan border ke dalam lebar */



  white-space: normal;



  margin-top: 0;



  justify-content: center;



  font-style: normal;



}







.table_header {



  width: 100%;



  height: 45px;



  background-color: rgba(247, 221, 221, 0.267);



  padding: 10px;



border-bottom: 1px solid silver;



}







.table_header span {



  font-weight: 300px;



  font-style: italic;



  font-size: 12px;



}







.table_body {



  width: 100%;



  max-height: 100%;



  background-color: #fffb;



  margin: 0 auto;



  border: radius 0.6rem;



  overflow: auto;



}







table{



  width: 100%;



}







table, th, td {



  padding: .5rem;



  border-collapse: collapse;



  font-family: 'Oswald',sans-serif;



  font-style: normal;



  font-weight: 300;



  /* text-align: center; */



}



.table_body span{



font-weight: 400;



color: red;



}



.table_body a {



  font-weight: 400;



  color: rgb(122, 122, 192);



  font-size: 13px;



}







thead th {
  font-family: 'Oswald',sans-serif;
  font-style: normal;
  font-weight: 400;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #d5d1defe;
}
tfoot tr td {
  font-family: 'Roboto',sans-serif;  
  font-weight: 400;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #d5d1defe;
}

.table_body::-webkit-scrollbar{
  width: 0.5rem;
  height: 0.5rem;
}

.table_body::-webkit-scrollbar-thumb{
  border-radius: .5rem;
  background-color: #0004;
  visibility: visible;
}

.table_body::hover:-webkit-scrollbar-thumb{
  visibility: hidden;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: #888;
  transition: background-color 0.3s ease; /* animasi ketika hover */
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* warna berubah saat hover */
}

tbody tr:nth-child(even) {
  background-color: #c022220b;
}

tbody tr:nth-child(even) td,

tbody tr:nth-child(even) td span {
  color: black; /* Warna teks hitam untuk sel-sel di baris genap */
}

.table-produk tbody tr:nth-child(even) {
  background-color: #e6e5e5;
}

/* tbody tr:hover{
  background-color: rgba(238, 218, 218, 0.4);
  cursor:pointer;
} */

/* .table-produk tbody tr:hover{
  background-color: rgba(238, 218, 218, 0.4);  
} */


@media screen and (max-width:1200px) {
  .detail-box{
    /* width:100%; */
  }
.slide-img{
  width:100%;
}

.box
{   
  width:auto;  
  }
}

.myuser {
  /* position: fixed; */
}

@media(max-width:991px) {
  .myuser{
    display: none;

  }



    .myheader{



        padding: 12px 0;



    }



    .myheader .mymenu{



        position: fixed;

        right: 0;



        top: 0;



        width: 320px;



        height: 100%;



        background-color: #e6e5e5;



        /* padding: 15px 30px 30px; */



        overflow-y: auto;



        z-index: 1;



        transform: translateX(100%);



        



    } 



    



    .myheader .mymenu.open{



        transform: none;



        display: block;



    }



    



    .myheader .mymenu .myhead{



        display: flex;



        align-items: center;



        justify-content: space-between;



        margin-bottom: 25px;



    }



    



    .myheader .mymenu .close-menu-btn{



        height: 35px;



        width: 35px;



        position: relative;



        display: inline-flex;







        align-items: center;



        justify-content: center;



        background-color: transparent;



        cursor: pointer;



        border: none;



    }



    .myheader .mymenu .close-menu-btn:before,



    .myheader .mymenu .close-menu-btn:after{



        content:'';



        position: absolute;



        width: 80%;



        height: 2px;



        background-color: hsl(0, 0%, 100%);



    }



    



    .myheader .mymenu .close-menu-btn:before{



        transform: rotate(45deg);



    }



    .myheader .mymenu .close-menu-btn:after{



        transform: rotate(-45deg);



    }



    



    .myheader .mymenu > ul > li {



        display: block;



    }



    .myheader .mymenu > ul > li:not(:last-child){



        margin-right: 0;



    }



    .myheader .mymenu li{



        border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);



    } 



    .myheader .mymenu li:first-child{



        border-top: 1px solid hsla(0, 0%, 100%, 0.25);



    }



    .myheader .mymenu > ul > li > a{



        padding: 12px 0;



    }



    .myheader .mymenu > ul > .mydropdown > a {



        padding-right: 34px;



    }



    .myheader .mymenu i{



        height: 34px;



        width: 34px;



        border: 1px solid hsla(0, 0%, 100%, 0.25);



        display: inline-flex;



        align-items: center;



        justify-content: center;



        pointer-events: auto;



        cursor: pointer;



        top: 7px;



        text-transform: uppercase;



    }



    .myheader .mymenu .mydropdown.active > i{



        background-color: hsla(0, 0%, 100%, 0.25);



        transform: rotate(180deg);



    }







    .myheader .mymenu .mydropdown.active > .mysub-menu {



        display:block;

        background-color: blue;



    }







    .myheader .mymenu .mysub-menu {



        position: static;



        opacity: 1;



        transform: none;



        visibility: visible;



        padding: 0;



        transition: none;



        box-shadow: none;



        width: 100%;



        display: none;



    }







    .myheader .mymenu .mydropdown.active > .mysub-menu{



      display: block;



    }







    .myheader .mymenu .mysub-menu li:last-child{



        border:none;



    }



    .myheader .mymenu .mysub-menu a{



        padding: 12px 0 12px 15px;

        color: black;



    }



    .myheader .mymenu .mysub-menu .mysub-menu a{



        padding-left: 30px;



    }



    .myheader .mymenu .mysub-menu .mysub-menu .mysub-menu a{



        padding-left: 45px;



    }



    .myheader .mymenu .mysub-menu span{



        background-image: none;



    }



    .myheader .mymenu .mysub-menu i {



        transform: none;



        right: 0;



    }



    .myheader-right .open-menu-btn{



        display: inline-flex;



        align-items: center;



        justify-content: center;



        height: 40px;



        width: 44px;



        cursor: pointer;



        position: relative;



        background-color: transparent;       



        border: none; 



    }



    .myheader-right .open-menu-btn .line{



        height: 2px;



        width: 30px;



        background-color: hsl(0, 0%, 100%);



        position: absolute;



    }



    .myheader-right .open-menu-btn .line-1{



        transform: translateY(-8px);



    }



    .myheader-right .open-menu-btn .line-3{



        transform: translateY(8px);



        footer .content .top {

          display: flex;

          justify-content: space-between;

          align-items: center;

      }

}











footer {



  position: fixed;



  background-color: #e6e5e5;



  height: 27px;



  width: 100%;



  padding: 0;



  bottom: 0;



  left: 0;    



  }



  footer .content {



    max-width: 1250px;



    margin: auto;



    padding: 0; 



    top:0px;



    box-sizing: border-box;



  }



footer .content .top{



    display: flex;



    align-items: center;



    justify-content: space-between;



}



footer .mylogo-details {



  color: #e6e5e5;



  font-size: 20px;



}



footer .copyright{



    color: black;



    text-align: center;



}



footer .media-icons {



  display: flex; 



}



footer .media-icons a {



  margin: 0 8px;



  text-align: center;



  color: #fff;



  display: inline-block;



}







.content .top .mylogo-details, 



{



    color: black;



    font-size: 20px;



}







.content .top span



{



    color: black;



    font-size: 20px;



}







.content .top .mylogo-details span{



  color: black;



  font-size: 15px;



}







.content .top .media-icons{



    display: flex;



}



.content .top .media-icons a{



  /* height: 30px;



  width: 30px; */



  /* background-color: red; */



  margin: 0 8px;



  /* border-radius: 50%; */



  text-align: center;



  /* line-height: 30px; */



  color: black;



  display: inline-block;







}



  .search-box {   



    height: 30px;             



    width: 300px;



    display: flex;



    border:1px solid silver;



    align-items: center;



    background-color: #fafafa;



    padding: 0px 8px;



    border-radius: 3px;



  }







  .search-box .search-icon{



    font-size: 1rem;



    color: black;



  }



  .search-box .search-input{



    width: 100%;



    transition: .5s;    



    overflow: hidden;



  }







  .search-input .input{    



  border: none;



  outline: none;



  background-color: unset;



  padding: 15px;



  }







  .search-box:hover .search-input {



    



  }







  .divider {



    display: block;    



    text-align: center;



    overflow: hidden;



    white-space: nowrap;



    margin: 1rem 0;



  }



  



  



  .divider .divider-text {



    font-family: 'Roboto',sans-serif;



    position: relative;



    display: inline-block;



    font-size: 1.5rem;



    padding: 0 1rem;



    color: black;



  }







  /* warna label dll */



  a,p,label,td {



    color:black;



  } 







.login-form label {



  color:black;



}







  .type a,.type span {



    color:black;



  }







  .instockred {



    color:red;



  }



  .instockgreen {



    color:green;



  }







  .divider .divider-text h4 {



    font-family: 'Roboto',sans-serif;



    position: relative;



    display: inline-block;



    /* font-size: 1.5rem; */



    padding: 0 1rem;



    color: black;



  }







  .divider .divider-text i {



    font-size: 1rem;



  }



/*   



  .divider .divider-text {



    font-size: 20px;



    color:white;



    font-family: 'Poppins',sans-serif;



  } */







  .divider .divider-text:before, .divider .divider-text:after {



    content: "";



    position: absolute;



    top: 50%;



    width: 9999px;



    border-top: 1px solid #e6e5e5;



  }



  



  .divider .divider-text:before {



    right: 100%;



  }



  



  .divider .divider-text:after {



    left: 100%;



  }



  



  .divider.divider-left .divider-text {



    float: left;    



    padding-left: 0;



  }



  



  .divider.divider-left .divider-text:before {



    display: none;    



  }



  



  .divider.divider-left-center .divider-text {



    left: -25%;    



  }



  



  .divider.divider-right .divider-text {



    float: right;



    padding-right: 0;    



  }



  



  .divider.divider-right .divider-text:after {



    display: none;



  }



  



  .divider.divider-right-center .divider-text {



    right: -25%;



  }



  



  .divider.divider-dotted .divider-text:before, .divider.divider-dotted .divider-text:after {



    border-style: dotted;



    border-width: 1px;



    border-top-width: 0;



    border-color: #DFE3E7;    



  }



  



  .divider.divider-dashed .divider-text:before, .divider.divider-dashed .divider-text:after {



    border-style: dashed;



    border-width: 1px;



    border-top-width: 0;



    border-color: #DFE3E7;



  }







  .grid-item {



    display: flex;



    align-items: center;



    justify-content: center;



  



    background-color: #03afff;



    border-radius: 4px;



    transition: transform 0.3s ease-in-out;



  



    background-size: cover;



    background-position: center;



    background-repeat: no-repeat;



  }



  



  .grid-item:hover {



    filter: opacity(0.9);



    transform: scale(1.04);



  }



  



  



  .grid-container {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));



    grid-auto-rows: minmax(200px, auto);



    gap: 20px;



    padding: 20px;



    grid-auto-flow: dense;



  }







  .grid-container1 {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));



    grid-auto-rows: minmax(200px, auto);



    gap: 50px;



    padding: 3px;



    grid-auto-flow: dense;



  }







  @media (min-width: 600px) {



    .wide {



      grid-column: span 2;



    }



  



    .tall {



      grid-row: span 2;



    }



  }



  



  #theme-switcher {



    position: fixed;



    top: 13px; /* position the button 20px from the top edge of the viewport */



    left: 15px; /* position the button 20px from the right edge of the viewport */    



    width: 79px;



    padding:0px;



    font-family: 'Poppins', sans-serif;



    font-size: 8px;



    font-style: inherit; /* Gaya font diwariskan */



    font-weight: bold; /* Tebal font bold */



    line-height: 20px;



    height: 25px;     



    background-color: #e6e5e5;



    color: black;



    border-color: #f6ecec17;



    border: 1px solid #f6ecec17;



    border-radius: 2px;



    cursor: pointer;



    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);



  }



  



  #theme-switcher:before {



    content: "DARK THEME";    



    display: block;



    line-height: 10px; /* Menyesuaikan tinggi button */



    text-align: center;    



}







  #theme-switcher:hover {



    background-color: #b6b9bc7a;



  }



    







  #language {



    position: fixed;



    top: 15px; /* position the button 20px from the top edge of the viewport */



    left: 120px;     



  }    







  #language span {



    color:black;



    font-family:'Oswald',sans-serif;



  }