@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=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://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&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=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;
}
@import url('https://fonts.cdnfonts.com/css/sweet-sans-pro');


  *,

  *::before,

  *::after {

    box-sizing: border-box;

  }

  /* * {
    outline: 1px solid red !important;
} */
:root {
  --clr-seeprice-bg:#5d5b6a;
  --clr-seeprice-font:white;
  --clr-notif-txt:white;
  --clr-button-back: #8f8e8e;
  --clr-button-font:#fff;
  --clr-archives: white;  
  --clr-archives-font: black;  
  --clr-light: white;  
  --clr-title-font:white;
  --clr-tittle-background:#5d5b6a; 
  --clr-dark: black;
  --clrbtn1:#d1d1d1;
  --warnacanvas:black;

  --clr-primary: white;

  --clr-secondary: #c3fcf2;

  --clr-discount:red;

  --clr-accent: #ff7750;

  --clr-menu-aktif:silver;

  --clr-table:#f8f9f9;

  --submenu :#e6e5e5;

  --foreground: var(--clr-dark); 

  --background: var(--clr-light);

  --warnainstock:black;

  --warnagarisonsale:#ffa400;
  --clr-notif-bg:#454545;
}

.darkmode {
  --warnacanvas:white;
  --clr-seeprice-bg:white;
  --clr-seeprice-font:black;
  --clr-notif-bg:white;
  --clr-notif-txt:black;
  --clr-archives: black;  
  --clr-button-back:black;
  --clr-button-font:white;
  --clr-archives-font: white;  
  --clr-light: white;  
  --clr-title-font:black;
  --clr-tittle-background:white; 
  --clr-dark: black;
  --clrbtn1:#d1d1d1;
  --clr-discount:white;

  --clr-primary: black;

  --clr-secondary: #201c1c;

  

  --clr-accent: #ff7750;

  --clr-menu-aktif:silver;
  --clr-table:#201c1c;

  --submenu :#201c1c;

  --foreground: var(--clr-light);

  --background: var(--clr-dark);  

  --warnainstock:white;

  --warnagarisonsale:#ffa400;

}

/* .dropdown-menu {
  background-color: silver;
} */
*,

*::before,

*::after {

  box-sizing: border-box;

}

    .dropdown-menu .dropdown-item {
        padding: 5px 10px 5px 13px;
        /* default biasanya 8px 20px */
        font-family: 'Genos';
        font-size: 18px;
        line-height: 1.2;
        color: var(--clr-seeprice-font) ;
    }

.dropdown-menu-right {
        background-color: var(--clr-seeprice-bg) !important;            
    }    

.swal-title-style {
  font-size: 70px !important;
  font-weight: 600;
  color: var(--clr-notif-txt) !important;
  text-transform: uppercase;
  margin: 5px 10px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  font-family: 'Genos', sans-serif;
  text-align: center;
  display: block;
  width: 100%;
  white-space: normal !important; /* agar wrap jika terlalu panjang */
  word-break: break-word;
}

.swal-popup-style {
  text-align: center;
  font-family: 'Genos', sans-serif;  
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--clr-notif-bg) !important;
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
}

.swal-container-topshift {
  top: 5px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 10px !important;
}

.swal2-container.swal-container-topshift {
  top: 5px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 10px !important;
  height: auto !important;
}

.swal2-popup.swal-popup-style {
  padding: 0px 0px 8px 0 !important; 
  height: 50px !important;
  max-height: unset !important;
  box-sizing: border-box;
}


.price-role-item.active {
  background-color: #aaa; /* warna latar saat aktif */
  color: black; /* ubah warna teks */
}

.price-role-item.active .seeprice-icon {
  color: white; /* ubah warna icon SVG saat aktif */
}

.price-role-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 100%;
  background-color: var(--clr-seeprice-bg);
  display: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.price-role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-seeprice-font);
  cursor: pointer;
}
.price-role-item:hover {
  background-color: #c2c2c2;
  color:black !important;
}

.toggle-footer {
  position: relative;
  width: 235px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

.seeprice-icon {
  color: var(--clr-seeprice-font);
  width: 20px;
  height: 20px;
  transition: color 0.3s ease;
}

.toggle-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - 36px);
  background-color: silver;
  line-height: 36px;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  padding-left: 10px;
  opacity: 0;
  visibility: hidden;
}

.toggle-label.visible {
  opacity: 1;
  visibility: visible;
}

.toggle-icon {
  background-color: #444;
  color: var(--clr-seeprice-font) !important;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.toggle-icon i {
  color: white !important;
  font-size: 16px;
}

.price-role-container {
  position: fixed;
  top: 442px !important;
  right: 15px;
  width: 235px;
  z-index: 999;
  font-family: 'Genos', sans-serif;
}

.price-role-wrapper {
  position: relative;
  width: 100%;
}

/* my account */
.nav-pills .nav-link.active {
  background-color: #d1d1d1 !important;
  border-radius: 0 !important;        
  color: black !important;        
}

.nav-item a {
  font-family: 'Roboto';
  font-size: 15px;
  border-radius: 0px !important;
  background-color: transparent !important;
  color: black;
  font-weight: 500;
}

.nav-pills {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid silver;
  border-radius: 0;
}

.nav-pills .nav-item {
  margin: 0px !important;
}
.nav-item1 a {
  font-family: 'Roboto';
  font-size: 15px;
  border-radius: 0px !important;
  background-color: transparent !important;
  color: black;
  font-weight: 500;
}

.nav-pills .nav-item1 {
  margin: 10px !important;
}

.nav-pills .nav-link {
  border-radius: 0 !important;
  margin: 0 !important;
}

.nav-link span {
  color: var(--foreground) !important;
  background-color: ;
}

.nav-link {
  color: var(--foreground) !important;
}

/* end my account */




.menucategory {
  position: fixed;
  background:var(--clr-archives);
  color:var(--clr-archives-font);
  /* border-top: 1px solid var(--clr-archives-font); */
  left: 0;
  margin:0;
  top: 155px;
  width: 200px;
  padding: 0px;
  z-index: 1000;
}
.menucategory label {
  color:var(--clr-archives-font);
  font-size:13px;  
  padding:0 0 10 25;
  margin:0;
}
.menucategory label a {
  color:var(--clr-archives-font);
  font-weight: 400;
  font-size:12px;    
}
.titleatas {
  width:100%;
  background:var(--clr-archives);
  position:fixed;
  color:var(--clr-archives);        
  /* border-top: 0.5px solid var(--clr-archives-font); */
  /* box-shadow: 0 -0.3px 0 var(--clr-archives-font); */
  padding: 2px;
  left: 0;                    
  top:109px;    
  z-index: 100;  
}
.titleatas label{
  color:var(--clr-archives-font);
  font-weight:700;
  letter-spacing:2px;
  font-size:18px;
  margin:12px 0 5px 10px;
}
.menucategory .divider-text label a:hover {
  background: #eaeaea;
  color: #000 !important  ; 
}
.menucategory .divider-text label a.active {
  background: #eeeeee; 
  color: black !important; 
  border-radius:3px;
  width:100%;
  padding:0 5px 0px 5px;
}

    .dark-mode-toggle {
        position: relative;
        padding: 20px 30px;
        cursor: pointer;
        background: #222;
        color: #fff;
        font-family: 'Genos', sans-serif;
        border-radius: 5px;
        font-size: 15px !important;
        font-weight: 500 !important;
        top:150px !important;
    }

    /* Tooltip Styling */
    .dark-mode-toggle::after {
        content: attr(data-tooltip);
        position: absolute;
        top: -25px;
        /* Jarak tooltip di atas button */
        left: 0px;
        /* transform: translateX(-50%); */
        background: var(--clr-tittle-background);
        color: var(--clr-title-font);
        padding: 3px 5px;
        border-radius: 3px;
        /* border: 1px solid grey; */
        font-size: 14px;
        white-space: nowrap;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0s ease-in-out, visibility 0s ease-in-out;
    }

    /* Tampilkan tooltip langsung saat hover */
    .dark-mode-toggle:hover::after {
        visibility: visible;
        opacity: 1;
    }

.mywrapper {
  position: fixed;
  bottom: 33px;
  right: -115%;
  height:112px !important;
  width: 20%;
  max-height: 150px; /* Batasi tinggi container */
  background: var(--foreground);
  border-radius: 0px;
  border: black;
  padding: 10px 15px 5px 15px;
  transition: right 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column; /* Pastikan elemen tersusun secara vertikal */
}
.data {
  max-height: 40px; /* Batasi tinggi area scroll */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox - Gunakan scrollbar kecil */
  scrollbar-gutter: stable;
  -ms-overflow-style: none; /* IE & Edge - Sembunyikan scrollbar */
}
.data::-webkit-scrollbar {
  width: 6px; /* Ukuran scrollbar kecil */
}

.data::-webkit-scrollbar-thumb {
  background-color: rgba(180, 180, 180, 0.7); /* Warna thumb agar terlihat jelas */
  border-radius: 10px;
}

.data::-webkit-scrollbar-track {
  background: rgba(50, 50, 50, 0.2); /* Warna track sedikit gelap agar tetap terlihat */
}

/* Untuk Firefox */
.data {
  scrollbar-width: thin; /* Pastikan tetap kecil */
  scrollbar-color: rgba(180, 180, 180, 0.7) rgba(50, 50, 50, 0.2);
}

.mywrapper.show {
  right: 75px;
}

.mywrapper .header1 {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
.header1 i {
  color: var(--background);
  font-size: 22px;
}

.header1 span {
  color: var(--background);
  font-weight: 500;
  font-size: 15px;
}

/* .mywrapper .data {
  height: 75px !important;
} */

.mywrapper .data span {
  color: var(--background);
  font-size: 10px;  
  display: block;
  font-weight:500;
  text-align: justify;
}

.data p a {
  color: #4070f4;
  text-decoration: none;
}
.data p a:hover {    
  text-decoration: underline;
}


.buttons {
  display: flex;
  justify-content: space-between; /* Elemen akan berada di kiri & kanan */
  align-items: center;
  width: 100%; /* Pastikan lebar penuh */
  /* max-width: 400px;  */
  margin: 0 ; /* Agar berada di tengah */
}

.buttons .button,
.buttons .readmore {
  border: none;
  padding: 10px 20px 10px 20px;
  text-align: center;
  transition: all 0.2s ease;  
}

.buttons .button {
  background-color: var(--clr-button-back);  
  color: var(--clr-button-font);
  font-size:11px;
  letter-spacing: 1px;
  cursor: pointer;
  padding:3 25 3 25;
}

.buttons .readmore {
  color: var(--background);
  padding:10 0 10 10;  
  font-size: 11px;
  text-decoration: underline;
  font-family: 'Poppins',sans-serif;
}

.buttons .button:hover {
  background-color: #034bf1;
}
.buttons .readmore:hover {
  color: #034bf1;
  text-decoration: none;
}

.warnahome{
  color: var(--foreground);
}
.demo-icon {
  font-family: "mygrid";
  font-style: normal;
  font-weight: normal;
  font-size:18px;
  speak: never;     
  /* display: inline-block; */
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;      
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.backsort {
  position: fixed;
  top: 100px;
  z-index: 2;
  padding: 10px;
  background-color: var(--background);
}
.backsort1 {
  position: fixed !important;  
  top: 110px !important;
  z-index: 102 !important;
  padding: 10px;      
  background-color: var(--background) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  /* width:100% !important; */
}

/* Mode gelap jika diatur di sistem pengguna */
/* @media (prefers-color-scheme: dark) {
 body {
      --background: var(--clr-dark);
      --foreground: var(--clr-light);
  }
} */

.warnaopsi{

  padding: 0px;

  background-color: var(--background);

 color: var(--foreground);

}

.garisonsale {
  text-decoration: none; /* Hilangkan garis bawah default */
  border-bottom: 0.1em solid var(--warnagarisonsale); 
  padding-bottom:-10px;
  margin:0;
}

.dark-mode-toggle {
  position: fixed;
  z-index: 1001;
  top: 1em;
  left: 1em;
  color: var(--foreground);
  border: 0px solid currentColor;
  padding: 0; /* Pastikan tidak ada padding */
  background: transparent;
  cursor: pointer;
  border-radius: 1px; /* Sesuaikan sudut */
  width: 25px; /* Lebar lebih kecil */
  height: 25px; /* Tinggi lebih kecil */
  line-height: 18px; /* Menyelaraskan ikon secara vertikal */
  text-align: center; /* Menyelaraskan ikon secara horizontal */
  vertical-align: middle; /* Menyelaraskan ikon di tengah */
}

.dark-mode-toggle svg {
  width: 100%; /* Memastikan SVG mengambil seluruh lebar tombol */
  height: auto; /* Mempertahankan proporsi SVG */
  display: block; /* Menghindari ruang ekstra di bawah SVG */
  margin: auto; /* Memastikan SVG berada di tengah */
}





.click-here {

/* // SVG icon from Font Awesome */

width: 100px;

right: 1.5em;

position: absolute;

top: 3em;

}

.dropdown-language {      
  position: fixed;
  z-index: 100; 
  top: 1.2em;
  right: 1.2em;  
  padding: 2px;
  cursor: pointer; 
}



.filtergrid {

  display: flex;

  justify-content: end;

  gap: 20px  

}

.filtergrid1 {
  display: flex;
  
  gap: 20px;
  width: 100%; /* Pastikan punya lebar */
  max-width: 100% !; 
}


.gridfilter {

  width:20%;

}

#sortSelect {

  background-color:white;

  color:black;

}

.bordertop {   

  border-top: 1px solid var(--clr-menu-aktif);;

  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 */

}



.dekorasiatas a {

  text-decoration:none;

  font-size:14px;

  font-weight: bold;

  color:black;

  font-family: Roboto, 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: Roboto, sans-serif;

  background-color: white;

}



.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: Roboto, 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;

}

.alltable_header span {

  color:white;

}

.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: 10px;

  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 {   

  /* background-position: center; */

  background-color: var(--background);

  width: 100%;
  height: auto;

}



.hero a{

  color: var(--foreground);

}

.myshoppingcard {

  background-color:var(--background);

  padding-bottom:15px;

  border:1px solid --foreground;  

  /* box-shadow: 1px 1px 10px rgba(0,0,0,0.1);   */

}



.myshoppingcard label,span

 {

  color:var(--foreground);

  font-family:'Roboto',sans-serif;

  font-size:15px;



}



.myshoppingcard tfoot td {

  background-color: var(--background);

}

.myshoppingcard th, thead {

  color:var(--foreground);  

  font-weight:100;

  font-size:15px;

  background-color: var(--background);

  border-bottom:1px solid --foreground;

  font-family: 'Roboto',sans-serif;

}



.myshoppingcard tfoot {

  background-color: var(--background); /* Warna latar belakang */  

  color: var(--foreground);

}



.myshoppingcard td {

  border-bottom: 1px solid --foreground;

  text-align: center;

  color: var(--foreground);

  font-family: 'Roboto',sans-serif;

}



.myshoppingcard i{

  color:var(--foreground);

}



.mybtn{

  background-color: var(--background);

  border:1px solid var(--foreground);

  color:var(--foreground);

  font-size: 13px;

  border-radius: 1px;

}

.mybtn1{

  background-color: var(--clrbtn1) !important;

  border:1px solid var(--foreground);

  color:black !important;

  font-size: 13px;

  border-radius: 1px;

}

.mybtn:hover {

  background-color: var(--foreground); /* Ganti warna background saat hover */

  color: var(--background); /* Ganti warna teks saat hover */

}

.mygallery {
  width:100%;
  display:flex;
  overflow-x:scroll;
  padding:5px;
  grid-gap:5px;
  grid-template-columns: auto auto auto;
  flex:none;
  margin-right:30px;
  margin-left:30px;
}
.mygallery img {
  width: 100%;
  filter: grayscal(100%); 
  transition: transform 0.5s;
}
.warnabody{

  background-color: var(--background);

}

.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 {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  height: auto;

  padding: 15px; /* Tambahkan padding untuk kenyamanan visual */

  box-sizing: border-box;
  gap: 1px;

}

.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%;

  display:flexbox;

  justify-content:center;      

  align-items:center;

  font-family:'Roboto',sans-serif;

  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:var(--foreground);  

  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:var(--foreground);

  font-size:10px;

  text-align: center;

  justify-content: center;  

}



.type2 {

  display:flex;

  justify-content: center;    

  flex-direction:column;

}

.hargadiscount {

  color:var(--foreground);  

}

.type2 .price {  
    margin:0;    
    padding: 0;
}
.namabarang{
  margin:0;
  padding: 0;
}
.type2 a {

  color:var(--foreground);  

  font-size:15px;

  margin:5px 0px;

  text-align: center;

  text-wrap: balance;

  justify-content: center;  

  padding-right:0px;

  font-family:'Genos',sans-serif;

  text-transform: uppercase;

}

.type2 span{

  color:var(--foreground);

  font-size:15px;

  text-align: center;

  justify-content: center;  

  font-family:'Genos',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: var(--background);    

}

.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:100px;

  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;

}



.center-logo {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

}



.mycontainer {

  max-width: 1310px !important;

  margin: 0px auto;

  padding: 0 15px;

  background-color: var(--background);

  width: 100%; 

  box-sizing: border-box; 

}

.mycontainer2 {

  max-width: 1780px;

  margin: 10px auto;

  padding: 0 15px;

  background-color: var(--background);

  width: 100%; 

  box-sizing: border-box; 

}



.mycontainerinvoice {

  width: 100%; /* Menyebar penuh di dalam elemen induk */

  max-width: 1200px; /* Misalnya, lebar maksimum untuk menjaga tata letak */

  margin: 10px auto; /* Menjaga elemen tetap di tengah secara horizontal */

  padding: 0 15px;

  background-color: var(--background);  

  box-sizing: border-box; /* Pastikan padding dan border termasuk dalam ukuran elemen */

}



.mycontainer1 {  

  width: 1352px;       

  padding: 15px;

  background-color: var(--background);
  margin-left: auto;
  margin-right: auto;

}

.mycontainer1 .row {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.admincontainer {

  max-width: 1400px;

  margin: auto;

  padding: 0 15px;

}



.heroadmin {

  padding:10px;

  /* height: 100vh;   */

  background-color: var(--background);    

}



.userlogin {

  height: 70vh;  
  width: 100%;

}

.alltable_header {

  font-size: 20px;

  font-family: 'Roboto', sans-serif;

  color: white;

  position: fixed;

  top:50px;

  left:0;

  width: 100%;

  height: 45px;

  background-color: rgb(61, 65, 78);

  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: var(--foreground);

}





.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-color:var(--foreground);

  border:1px;

  border-radius: 8px;

  color:var(--background);

  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;

}

.batasatas {  

  margin-top: 75px;

}



.myheader {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;  

  background-color: var(--background);

  z-index: 1000;

}



.myheader .mycontainer {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.mylogo {

  /* background-color: #e6e5e5;   */

  background-color: --background;

}



.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: 20px;
}

.myheader .mymenu .mydropdown {
  position: relative;
}

.myheader .mymenu .mydropdown  i{
  color:var(--foreground);
}

.myheader .mymenu > ul > .mydropdown > a {
  padding-right: 15px;
}

.mysub-menu li a.active {
  background-color: blue; 
  color:var(--foreground); 
}



/* .mysub-menu li a.active {

  background-color: var(--clr-menu-aktif); 

  color: #000; 

} */


.myheader .mymenuweb .myhead {
  display: none;
}

.myheader .mymenuweb ul {
  list-style: none;
}

.myheader .mymenuweb > ul > li {
  display: inline-block;
}

.myheader .mymenuweb > ul > li:not(:last-child) {
  margin-right: 20px;
}

.myheader .mymenuweb .mydropdown {
  position: relative;
}

.myheader .mymenuweb .mydropdown  i{
  color:var(--foreground);
}

.myheader .mymenuweb > ul > .mydropdown > a {
  padding-right: 15px;  
}

.mysub-menu li a.active {
  background-color: silver; 
  color:var(--foreground); 
}


/* perbandingan css */

.pd-menu {

  text-decoration: none;

  color: var(--foreground);

  border-radius: 1px;;

  padding: 0px;

  display: block;

}

/* menu aktif */

.pd-menu.active {

  /* background-color: var(--clr-menu-aktif) !important; */
  background-color:silver;
  color: black !important;
  font-weight: 700;

}



.mydropdown:hover .mysub-menu {

  display: block;
  
}



.mysub-menu li a.active {

  background-color: #f0f0f0;

  color: #000;

}


.myheader .mymenu .mysub-menu{
    position: absolute;    
    top: 100%;        
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;    
    background-color: var(--submenu);
    box-shadow: hsla(0, 0%, 0%, 0.5)
    z-index: 9999;    
    transform-origin:top;
    transform:scaleY(0);
    visibility:hidden;
    opacity: 0;           
}

.myheader .mymenu .mysub-menu a{
    padding-left: 15px;
    padding-right:15px;
    font-size: 18px;
    
    color: var(--foreground);    
}

.myheader .mymenu .mysub-menu i{
transform: rotate(-90deg);
right: 24px;
color:var(--foreground);
}

.myheader .mymenu a:hover {
  background-color: silver; 
  border-radius: 1px;
  color: black; 
  width:100%;   
  transition: background-color 0.3s ease, color 0.3s ease;
}

.myheader .mymenu a {
  font-family: "Genos", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;  
  text-transform: uppercase;  
  display: block;    
  color: var(--foreground);
  font-size: 18px;   
  font-weight: 400;
}

.myheader .mymenu .mysub-menu .mydropdown > a{
    padding-right: 34px;
}

.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;
}

.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;
}

/* menuweb */


.myheader .mymenuweb .mysub-menu{
  position: absolute;    
  top: 100%;    
  left: 0;    
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 10px;
  padding-bottom: 10px;  
  white-space: nowrap;    
  background-color: var(--submenu);
  box-shadow: hsla(0, 0%, 0%, 0.5)
  z-index: 9999;    
  transform-origin:top;
  transform:scaleY(0);
  visibility:hidden;
  opacity: 0;       
}

.myheader .mymenuweb .mysub-menu a{
  padding-left: 15px;
  padding-right:15px;
  font-size: 16px;
  color: var(--foreground);    
}

.myheader .mymenuweb .mysub-menu i{
transform: rotate(-90deg);
right: 24px;
color:var(--foreground);
}

.myheader .mymenuweb a:hover {
background-color: silver; 
border-radius: 1px;
color: black; 
width:100%;   
transition: background-color 0.3s ease, color 0.3s ease;
}

.myheader .mymenuweb a {
font-family: "Open Sans Condensed", sans-serif;
letter-spacing: 2px;
text-decoration: none;  
text-transform: uppercase;  
display: block;    
color: var(--foreground);
font-size: 19px;   
}

.myheader .mymenuweb .mysub-menu .mydropdown > a{
  padding-right: 34px;  
}

.myheader .mymenuweb .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 .mymenuweb .mysub-menu-right{
  left: 100%;
  top:0;
}

.myheader .mymenuweb .mysub-menu-left{
  left: auto;
  top:0;
  right:100%
}

.myheader .mymenuweb li:hover > .mysub-menu{
  opacity:1;
  transform: none;
  visibility: visible;
  transition: all 0.5s ease;
}

.myheader .mymenuweb .mysub-menu li:hover > a > span{
  background-size: 100% 1px;
}

.myheader .mymenuweb i {
font-size: 10px;
pointer-events: none;
user-select: none;
position: absolute;
color:hsl(0, 0%, 100%));
top: calc(50% - 5px);
}

.myheader .mymenuweb   > ul > li > i{  
  color:white;
}
/* endmenuweb */
.myheader-right { 
    display:flex;
}



.myheader-right span {

color:black;

}



.myheader-right span {

  color:black;

  }



.myheader-right > *{

    margin-left: 20px;

}



.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: var(--background);

  padding:10px  0 0 0 ;  

  width: 100%; 

  margin-top: 0;  

}

.mboardright {

  background-color: var(--background);

  padding:10px  0 0 0 ;  

  width: 100%; 

  display: flex;

  justify-content: end;

}

.mainrigntspan {

  display: flex;

  justify-content: flex-end;  

}

.mainrigntspan span {

  background-color: var(--background);   

  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:var(--foreground);  

  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: var(--foreground);

  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: var(--background);

}

.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: var(--foreground);

  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: var(--background);

}

.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: transparent;

}



tbody tr:nth-child(even) td,

tbody tr:nth-child(even) td span {

  color: var(--foreground); /* Warna teks hitam untuk sel-sel di baris genap */

}



tbody tr:nth-child(even) td.invoicetext {

  color:black;

}



.table-produk tbody tr:nth-child(even) {

  background-color:var(--clr-table);

}





.grid-container {

  display: grid;

  gap: 20px;

  padding: 20px;

  transition: grid-template-columns 0.3s ease-in-out; /* Transisi halus untuk perubahan kolom grid */

}



/* Konfigurasi grid untuk 2, 3, dan 4 kolom */

.grid-container.two-columns {

  grid-template-columns: repeat(2, 1fr);

}



.grid-container.three-columns {

  grid-template-columns: repeat(3, 1fr);

}



.grid-container.four-columns {

  grid-template-columns: repeat(4, 1fr);

}

.basic-carousel{  
  margin-top:70px;
  margin-left:45px;
  width:557;

  /* height:342.95;   */

}

.detailbarang{
  margin-top:0px;
  left:-25px;
}

/* Penyesuaian responsif */


.logo-container img {
  height: 60px !important;
}
/* true logo container */
.logo-container {
    position: fixed;
  left:110px;
  top:30px !important;
}
.homepadding {
  padding-left:100px !important;
  padding-right:100px !important;
}

.mygallery-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border:0px solid #e6e5e5;
  width:auto;
  height:100px;
  background-color:white;
  border-radius:0px;
  margin-top:-1px;
  position:relative;
  /* margin:10% auto; */
}
.swipergallery {
  display: inline-block;
  margin-right: 7px;
  white-space: normal;
  /* Ensure child elements wrap properly */
}

.itemnya {
  margin-right:7px;
}
.accountmobile {
  display:none !important;
}
.mymenu .menu-list {
  display:block !important;
}
.dimension {
  width:150px;
  font-size:12.5px;
  padding:5px;
  font-family:'Oswald',sans-serif;
  height:25px;
  padding:2px 5px 1px 5px;
  font-weight:100;
  letter-spacing:1px;
}
.dimensionchoose {
  float: right; 
  display: flex; 
  align-items: center; 
  margin-right:140px;
  margin-top:5px;
}
@media (max-width: 576px) {
  body {
    width:100% !important;
  }
  .dimension {
    width: 15% !important;
  }
  .dimensionchoose {        
    padding:0 !important;
    margin:5px 0px 0px 0px !important;
  }
  .mycontainer1 {  
    width: 95% !important;       
    padding: 0 0 30px 0 !important;      
    margin: 0 0 50px 0 !important;
    /* background-color: #034bf1;     */
  }
  .batasgambar {    
    width:100% !important;
    padding:0px;
    margin-left:0px !important;
    
  
  }  
  .accountmobile {
    display: block  !important;
  }
.btnnav {
  display: none;
}
  .mymenu {    
    top:0 !important;
  }
.detailbarang {
  padding: 2px !important;
}
  .mymenuweb {
    display: none;
  }
  .detailbarang{
    margin-top:20px;
    left:15px;
    padding:25px;
  }
  .itemnya {
    margin:0px !important;
    padding: 0;
  }
  .basic-carousel{  
    width: 100% !important;
    margin-top:38px;
    margin-left:5px;
    padding-left:15px;  
  }

  .mygallery {
    width: 100% !important;
  }
  
  #heroSection {
    width: 100vw; /* Pastikan lebar sesuai viewport */
    max-width: 100%; /* Hindari elemen keluar dari layar */
}
  .absolute-right {
    right: 5px;
}
  .homepadding {
    padding-left:30px !important;
    padding-right:30px !important;
  }
  .absolute-right {
    right: 5px;
  }
  .mobile-menu-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-box {
    display: none !important;
  }
  .logo-container {
    display: none !important;
  }
  .logo-container img {
    max-width: 100%;
    height: auto;
  }
  .mycontainerhome {
      width: 100%;
      padding: 10px; /* Mengurangi padding agar tidak terlalu melebar */
  }

  .carousel {
      width: 100%;
      overflow: hidden; /* Hindari overflow horizontal */
  }

  .itemnya {
      width: 100%;
      height: auto; /* Pastikan tinggi menyesuaikan konten */
  }

  .divider-text p {
      font-size: 18px !important; /* Perkecil ukuran judul */
  }

  .warnahome {
      font-size: 12px !important; /* Perkecil teks kondisi */
  }

  /* Sesuaikan teks dan konten agar tidak terlalu besar */
  .mycontainerhome div[style*="padding-left:100px"] {
      padding-left: 20px !important;
      padding-right: 20px !important;
      text-align: center;
  }
}



@media screen and (max-width:1640px) {

  .myheader .mymenu a {
    font-size: 18px;
    padding: 0;    
  }
  /* .backsort{
    right:202px;
  } */
.logo-container {
  position: fixed;
  left: 70px;
  /* top: 20px; */
  display: block;
}

.logo-container img {
  height: 50px;
  left:100px;
}
  .mymenu ul > li > a {

    padding: 7px 8px;

  }

  .detail-box{

    /* width:100%; */

  }

/* .slide-img{

  width:100%;

} */



.box

{   



  width:auto;  

  }

}

@media screen and (max-width:1600px) {
  /* .backsort{
    right:233px;
  } */
}

.mobile-menu-toggle {

  display: none;

}

.mymenu ul > li > a.active,

.mymenu ul > li a:hover {

  background-color: var(--clr-);

  transition: 0.5s;

}

/*  menu untuk selected active  */

.myheader .mymenu .mydropdown.active > a,

.myheader .mymenu ul > li > a.active {  

  /* color: black;

  background-color: silver;   */ */

}



.grid-item img {

  width: 100%; 

  height: auto; 

}

@media(max-width:992px) {  

  .tomboldd{

    display: none;

  }

  .produkrelated{

    display:none;

  }

  .mobile-menu-toggle {

    display: flex;

    text-decoration: none;

    color: var(--header-color);

    background-color: var(--menu-bg);

    font-size: 30px;

    cursor: pointer;    

    z-index: 101;

    border-radius: 5px;

    padding: 4px;

  }  



  .myheader{

    padding: 12px 0;

  }

  .myheader .mymenu {

    position: fixed;

    top: 100px;

    right: -1000px; /* Start hidden off-screen */

    width: 100vw;

    height: 100vh;

    background-color: var(--clr-secondary);

    transition: right 0.3s ease; /* Smooth transition */

    z-index: 100; /* Ensure it is on top of other content */

    overflow-y: auto;

    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */

  }



 .myheader .mymenu.show {

    right: 0; /* Slide into view */    

  }

  .myheader .mymenu li {

    width: 100%; /* Full width for each menu item */

    text-align: center; /* Centers the text in each menu item */

}

  .myheader .mymenu ul {

    flex-direction: column;
    padding: 20px;

  }



  .myheader .mymenu ul > li {

    margin-bottom: 10px;

  }



  .myheader .mymenu ul > li > a {

    display: block;
    padding: 10px;
    font-size: 18px;
    color: var(--foreground);
    text-decoration: none;    
  }

  .mydropdown .dropdown-toggle {
                color: yellow !important;
            }

  .myheader .mymenu .mydropdown > a::after {    
    content: "\f107"; 
    font-family: 'FontAwesome';
    position: absolute;
    font-size: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }

  .myheader .mymenu .mydropdown.active > a::after {

    transform: translateY(-50%) rotate(180deg); /* Rotate arrow for active dropdown */

}

  .myheader .mymenu .mysub-menu {

    display: none; /* Keep this to initially hide the submenu */

    position: relative; /* Change position to relative */

    width: 100%; /* Optional: ensure it takes full width */

    background-color: var(--submenu); /* Ensure it has a background if needed */

    box-shadow: none; /* Optional: Adjust or remove box-shadow if it was designed to float */

}

.myheader .mymenu .mydropdown {

  position: static; /* This should be static or relative, not absolute, if you want the menu to expand */
  right: 25px !important;

}

.mydropdown {
  z-index: 9999 !important;
}

  .myheader .mymenu .mydropdown.active > .mysub-menu {

    display: block;

  }



  .myheader .mymenu li:hover > .mysub-menu {

    opacity: 1;

    transform: none;

    visibility: visible;

    transition: all 0.5s ease;

  }

  .myheader .mysub-menu {

    display: none; /* Ensure submenus are not visible initially */

    list-style-type: none; /* No bullets */

    padding-left: 20px; /* Indent submenu items for better visibility */

  }

  .myheader .mymenu .mydropdown > a {

    position: relative; /* Ensure the link is positioned relatively */

    padding-right: 25px; /* Add padding to accommodate the icon */

}



  .myheader .mydropdown > a::after {    

      float: right;

      margin-right: 10px;

  }



  .myheader .mymenu li:hover > .mysub-menu,

  .myheader .mymenu .mydropdown.active > .mysub-menu {

      display: block; /* Show submenu on hover or active */

  }



  .myheader .mydropdown.active .mysub-menu {

      display: block; /* Display submenu when parent is active */

  }



    .myuser{

      display: none;

    }    

    .myheader .mymenu .mysub-menu a {

      display: block; /* Ensures links in submenu take full width */

      padding: 10px 20px; /* Adjust padding to match the main menu style */

      color: var(--foreground); /* Adjust text color as needed */

      text-decoration: none; /* Removes underline */

    }

}





footer { 

  position: fixed;

  background-color: var(--background);

  height: 27px;

  width: 100%;

  padding: 0;

  bottom: 0;

  left: 0;    

  }

  footer .content {

    /* max-width: 1250px; */

    margin: auto;

    padding: 0;     

    top:-20px;

    box-sizing: border-box;

  }

footer .content .top{

    display: flex;

    align-items: end;

    justify-content: space-between;

}

footer .mylogo-details {

  color: var(--foreground);

  font-size: 20px;

}

footer .copyright span{

    color: var(--foreground);

    text-align: center;

}

footer .media-icons {

  display: flex; 

}

footer .media-icons a {

  margin: 0 8px;

  text-align: center;

  color: var(--foreground);

  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;

}



.menu-list {

  z-index: 1;

}



.#product-table tr:nth-child(even) {

  background-color: #2e0505; /* Warna latar belakang untuk baris genap */

}



.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;



}

.mydropdown{

  z-index: 100;

}

  .search-box {   

    position: fixed;

    top: 48px !important;

    right: 10px;

    height: 28px;                 

    width: 200px;

    display: flex;

    border:1px solid silver;

    align-items: center;

    background-color: #fafafa;

    padding: 0px 8px;

    border-radius: 1px;    

  }  



  .search-box .search-icon{

    font-size: 3rem;

    color: black;

  }

  .search-box .search-input{

    width: 100%;

    transition: .5s;    

    overflow: hidden;    

    font-family: 'Open Sans Condensed',sans-serif;    

  }



  .search-input .input{    

  border: none;

  outline: none;

  background-color: unset;

  padding-bottom: 2px;  

  }

 

  .search-box:hover .search-input {

    

  }



  .divider {

    display: block;    

    text-align: center;

    overflow: hidden;

    white-space: nowrap;

    margin: 1rem 0;

    color: var(--foreground);

  }

  

  

  .divider .divider-text {

    font-family: 'Roboto',sans-serif;

    position: relative;

    display: inline-block;

    font-size: 1.5rem;

    padding: 0 1rem;

    color: var(--foreground);

  }



  /* warna label dll */

  a,p,label,td,span,h3,h1 {

    color:var(--foreground);

  } 



.container p {

  color:var(--foreground);

}



.login-form label {

  color:black;

}



  .type a,.type span {

    color:var(--foreground);

  }

   .strike-custom {
    text-decoration: line-through;
    text-decoration-color: var(--warnacanvas);    ; 
}
  .instockred {
    color: var(--warnacanvas);
    text-decoration-color: var(--warnacanvas);    

  }
.canvasstock {
  background-color: var(--warnacanvas);
  
}
.canvasstockdetail {
  background-color: #179950;
  
}
  .instockgreen {

    color:var(--warnainstock);

  }

  .instockgreendetail {

    color:#179950;

  }


  .divider .divider-text h4 {

    font-family: 'Roboto',sans-serif;

    position: relative;

    display: inline-block;

    /* font-size: 1.5rem; */

    padding: 0 1rem;

    color: var(--foreground);

  }



  .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: 0px solid var(--clr-menu-aktif);

  }

  

  .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;

  }

  .productCard {
/* 
    width: 100%; 

    height: 300px; 

    position: relative;

    overflow: hidden; */

}



  .productCard img:hover {

    filter: opacity(0.9);

    transform: scale(1.2);

    transition: transform 0.5s ease-in-out;   

  }

  .productCard img {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    display: block;

    margin: 0 auto; /* Pusatkan gambar secara horizontal jika diperlukan */

}

.productCard img.licard-img-top {

  height: 100%; 

  width: auto; 

  object-fit: contain; 
  cursor: default;

}

  .warnandiscount{

    color: var(--clr-discount);

  }



  .grid-item {

    height: 350px;  

    width: 100%;

    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));

    gap: 0px;

    padding: 0px;

}



  .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;

      grid-row: span 2;

    }

  

    .tall {

      grid-row: span 2;

    }

  }

/*   

  #theme-switcher {

    position: fixed;

    top: 13px; 

    left: 15px; 

    width: 79px;

    padding:0px;

    font-family: 'Poppins', sans-serif;

    font-size: 8px;

    font-style: inherit; 

    font-weight: 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;

    text-align: center;    

} */



  /* #theme-switcher:hover {

    background-color: #b6b9bc7a;

  } */

    

  #language {

    position: fixed;

    top: 150px; /* position the button 20px from the top edge of the viewport */

    left: 120px;     

  }    



  #language span {

    color:black;

    font-family:'Oswald',sans-serif;

  }