body {font-family:Abel;line-height:1.2;}

* {box-sizing: border-box;}

table {
 width: 100%;
 table-layout: auto;
 border-collapse: separate;
}

tr:hover {
 background: #ffaf44 !important;
}

th {
 white-space: nowrap;
 background-color: black; 
 color: white;
 position: sticky;
 top: 0;
 text-align: center;
 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
 z-index: 2;
 padding:0 4px 0 4px;
 border:1px solid white;
}

.th2 {
 white-space: nowrap;
 background-color: black; 
 color: white;
 position: sticky;
 top: 22px;
 text-align: center;
 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
 z-index: 2;
 padding:0 4px 0 4px;
 border:1px solid white;
}

tfoot {
 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
 background-color: #a4a4a4;
 position:sticky;
 bottom:0;
}


td {
  white-space: nowrap;
  border-radius: 4px;
  padding:4px;
  border: 1px solid #ccc;
  line-height:1;
}

form {
  display: none;
  margin-bottom: 2px;
}

label {
  display: inline-block;
  margin-top: 4px;
}

.kanan {
  display: inline;
  float:right;
  margin-left:-10rem;
}
.total {
  border-radius: 2px;
  padding: 0 5px;
  background-color: black;
  color: yellow;
}

.tombol{
	color: #ccc;
}

.tombol:hover {
	color: dodgerblue;
	font-weight:bold;
	cursor: pointer;
}

.tiny {padding:0px;border:none;overflow:hidden;}
.narrow {padding:0 6px 0 6px;border:0px;overflow:hidden;}

.kat {
  padding: 0px 2px;
  color: white;
  border-radius: 2px;
  margin-right: 1px;
  font-family: "Barlow Condensed";
}

.daftar {
  border: none;
  background: none;
  min-width: 100%;
}

.other {background-color: #e7e7e7; color: black;}
.men {background-color: #2A55FF !important;} 
.ladies {background-color: #FF55AA !important;} 
.lds {background-color: #FF55AA !important;} 
.kids {background-color: #CF81DE !important;} 
.bags {background-color: #CA6F1E !important;} 
.acc {background-color: #b4cb16 !important;} 
.aksesories {background-color: #b4cb16 !important;} 
.bahan {background-color: #adb5bd !important;} 
.bhn {background-color: #adb5bd !important;} 
.model {background-color: #BC8F8F !important;} 

.fs {font-size:smaller;}
.fxs {font-size:x-small;}
.flg {font-size:larger;}
.fxl {font-size:x-large;}
.fr {float:right;margin:0 2px}
.bn {border:none;}
.tr {text-align: right;}
.tl {text-align: left;}
.tc {text-align: center;}

.men[title]:hover::after{content:"MEN";}
.ladies[title]:hover::after{content:"LADIES";}
.lds[title]:hover::after{content:"LADIES";}
.kids[title]:hover::after{content:"KIDS";}
.bags[title]:hover::after{content:"BAGS";}
.model[title]:hover::after{content:"MODEL";}
.acc[title]:hover::after{content:"AKSESORIES";}
.all { background-color: #343a40;}
.all[title]:hover::after{content:"SEMUA KATEGORI";}

.all { background-color: #343a40;}
.other {background-color: #e7e7e7; color: black;}
.men {background-color: #2A55FF !important;} 
.ladies {background-color: #FF55AA !important;} 
.lds {background-color: #FF55AA !important;} 
.kids {background-color: #CF81DE !important;} 
.bags {background-color: #CA6F1E !important;} 
.acc {background-color: #b4cb16 !important;} 
.aksesories {background-color: #b4cb16 !important;} 
.bahan {background-color: #adb5bd !important;} 
.bhn {background-color: #adb5bd !important;} 
.model {background-color: #BC8F8F !important;} 

.btn-outline-all:hover,.btn-check:active+.btn-outline-all,.btn-check:checked+.btn-outline-all,.btn-outline-all.active,.btn-outline-all.dropdown-toggle.show,.btn-outline-all:active{color:#fff;background-color: #343a40 !important;} 
.btn-outline-men:hover,.btn-check:active+.btn-outline-men,.btn-check:checked+.btn-outline-men,.btn-outline-men.active,.btn-outline-men.dropdown-toggle.show,.btn-outline-men:active{color:#fff;background-color: #2A55FF !important;} 
.btn-outline-ladies:hover,.btn-check:active+.btn-outline-ladies,.btn-check:checked+.btn-outline-ladies,.btn-outline-ladies.active,.btn-outline-ladies.dropdown-toggle.show,.btn-outline-ladies:active {color:#fff;background-color: #FF55AA !important;} 
.btn-outline-lds:hover,.btn-check:active+.btn-outline-lds,.btn-check:checked+.btn-outline-lds,.btn-outline-lds.active,.btn-outline-lds.dropdown-toggle.show,.btn-outline-lds:active {color:#fff;background-color: #FF55AA !important;} 
.btn-outline-kids:hover,.btn-check:active+.btn-outline-kids,.btn-check:checked+.btn-outline-kids,.btn-outline-kids.active,.btn-outline-kids.dropdown-toggle.show,.btn-outline-kids:active {color:#fff;background-color: #CF81DE !important;} 
.btn-outline-bags:hover,.btn-check:active+.btn-outline-bags,.btn-check:checked+.btn-outline-bags,.btn-outline-bags.active,.btn-outline-bags.dropdown-toggle.show,.btn-outline-bags:active {color:#fff;background-color: #CA6F1E !important;} 
.btn-outline-acc:hover,.btn-check:active+.btn-outline-acc,.btn-check:checked+.btn-outline-acc,.btn-outline-acc.active,.btn-outline-acc.dropdown-toggle.show,.btn-outline-acc:active {color:#fff;background-color: #b4cb16 !important;} 
.btn-outline-aksesories:hover {color:#fff;background-color: #b4cb16 !important;} 

.btn-outline-all {color:#343a40;border:1px solid #343a40 !important;}
.btn-outline-men {color:#2A55FF;border:1px solid #2A55FF !important;} 
.btn-outline-ladies {color:#FF55AA;border:1px solid #FF55AA !important;} 
.btn-outline-lds {color:#FF55AA;border:1px solid #FF55AA !important;} 
.btn-outline-kids {color:#CF81DE;border:1px solid #CF81DE !important;} 
.btn-outline-bags {color:#CA6F1E;border:1px solid #CA6F1E !important;} 
.btn-outline-acc {color:#b4cb16;border:1px solid #b4cb16 !important;} 
.btn-outline-aksesories {color:#b4cb16;border:1px solid #b4cb16 !important;} 

.bg-yellow{background: yellow !important;}

.fs {font-size:smaller;}
.fxs {font-size:x-small;}
.fl {font-size:larger;}
.fx {font-size:x-large;}
.fr {float:right;}
.fl {float:left;}

.bd-grey {border:1px solid #ccc};
.bd-blue {border:1px solid royalblue};
.round2{border-radius:2px;}
.round4{border-radius:4px;}

.al{text-align:left;}
.ac{text-align:center;}
.ar{text-align:right;}


.w20{width:20px !important;}
.w30{width:30px !important;}
.w40{width:40px !important;}
.w50{width:50px !important;}
.w60{width:60px !important;}
.w70{width:70px !important;}
.w80{width:80px !important;}
.w90{width:90px !important;}
.w100{width:100px !important;}
.w120{width:120px !important;}
.w150{width:150px !important;}
.w175{width:175px !important;}
.w200{width:200px !important;}

.mw20{max-width:20px !important;}
.mw30{max-width:30px !important;}
.mw40{max-width:40px !important;}
.mw50{max-width:50px !important;}
.mw60{max-width:60px !important;}
.mw70{max-width:70px !important;}
.mw80{max-width:70px !important;}
.mw90{max-width:70px !important;}
.mw100{max-width:100px !important;}
.mw120{max-width:120px !important;}
.mw150{max-width:150px !important;}
.mw175{max-width:175px !important;}
.mw200{max-width:200px !important;}

.lbl {
  width: 52px;
  font-size: 0.9em;
  padding: 0 4px;
  margin-right: 3px;
  font-family: 'Barlow Condensed';
}

.input-container {
  padding: 4px;
  z-index: 1;
  border-bottom: 1px solid #ccc;
  display: flex;
  overflow-x: hidden;
  align-items: center;
  flex-wrap: nowrap;
}

.form-control, .form-select {line-height:1 !important;font-size:1em !important;}
.input-group-text{line-height:1 !important;font-size:1em !important;}
.gold {color: gold;font-family:"Barlow Condensed"} 
.dark {color: gainsboro;font-family:"Barlow Condensed"}     
.modal-title {
  font-size: 15px;
  color: dodgerblue;
}

.modal-header, .modal-footer {
  padding: 6px 10px;
  font-size: 14px;
  color:dodgerblue;
}

.btn {
  padding:2px 4px;
  font-size: inherit;
  margin-right:1px;
}

.spinner-border {
  -webkit-animation: 0.5s linear infinite spinner-border;
  animation: 0.5s linear infinite spinner-border;
}

.summary {
  text-align: center;
  color: white;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  font-size: smaller;
  font-family: Calibri;
  margin-bottom: 4px;
}

.btn-close {
  padding: 0px 6px !important;
  margin: auto;
  top: unset !important;
}

.alert {
  margin: 0px;
  padding: 4px;
  border-radius: 0px;
  display: flex;
  color:white;
  line-height: 1;
  align-items: center;
}

.msg-icon {
  font-size: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
}

.accordion-button {
  padding:6px;
  white-space: nowrap;
  font-family: Barlow Condensed;
  font-size: 14px;
}
.accordion-body {
  padding:2px;
}

.wh {
  filter: grayscale(100) invert(100) brightness(100);
}

.sub {
  background: #ccc !important;
  color:black;
}

.grand {
  background: #646464 !important;
  color:yellow;
}


.loader-sm {
  background-image: url("img/loader.gif");
  background-size: 100px;
  position: static;
  min-height: 100px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  margin: auto;
}
.loader-xl {
  background-image: url("img/loader.gif");
  background-size: 150px;
  position: static;
  min-height: 150px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  margin: auto;
}
.loader-sv {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-sv::after {
  content: "MOHON TUNGGU SEDANG MENYIMPAN DATA...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}
.loader-src {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-src::after {
  content: "MOHON TUNGGU SEDANG MENCARI DATA...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}
.loader-prs {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-prs::after {
  content: "MOHON TUNGGU SEDANG MEMPROSES DATA...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}
.loader-dl {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-dl::after {
  content: "MOHON TUNGGU SEDANG MENDOWNLOAD DATA...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}
.loader-up {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-up::after {
  content: "MOHON TUNGGU SEDANG MENGUPLOAD DATA...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}
.loader-sync {
  background-image: url("img/loader.gif");
  background-repeat: no-repeat;
  background-size: 40px;
  width: 100%;
  height: 34px;
  margin: 0 30%;
}
.loader-sync::after {
  content: "MOHON TUNGGU SEDANG SINKRONISASI...";
  position: relative;
  left: 45px;
  top: 30%;
  color: dodgerblue;
}


.nodata {
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto';
  font-size: 12px;
}

.nodata-child {
  text-align: center;
  padding: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto';
  font-size: 12px;
}

.vh-95 {height: 95vh !important;}
.vh-90 {height: 90vh !important;}
.vh-85 {height: 85vh !important;}
.vh-80 {height: 80vh !important;}
.vh-75 {height: 75vh !important;}