*{
	margin: 0;
	padding: 0;
	font-size: 13pt;
	color: #f2f2f2;
}

/* CSS ADMIN PAGE SHOP -------------- */
.box-sidebar-admin {
	position: fixed;
	z-index: 999;
	overflow-x: hidden;
	overflow-y: auto;
	background: #468763;
	top: 0;
	left: 0;
}
.box-sidebar-admin::-webkit-scrollbar {
  width: 5px;
}
.box-sidebar-admin::-webkit-scrollbar-track {
  background: transparent;        /* color of the tracking area */
}
.box-sidebar-admin::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #59bd85;  /* creates padding around scroll thumb */
}
.box-admin-title-toko {
	height: 50px;
	background: #317d53;
	box-shadow: #1d5737 0 2px 0 0;
	position: sticky;
	top: 0;
	overflow-x: hidden;
}

.box-primary-contents {
	margin-left: 250px;
	margin-bottom: 50px;
	top: 0;
}
.box-primary-header-contents {
	position: sticky;
	top: 0;
	z-index: 90;
	background: #317d53;
	box-shadow: #1d5737 0 2px 0 0;
}
.colmn-item-data {
	color: rgba(0,0,0,0.7);
	letter-spacing: 0.5px;
}
.btn-tambah-admin {
	border-radius: 5px 5px;
	background: #ffffff;
	color: rgba(0,0,0,0.5);

}
.box-page-form-tambah-admin {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
}
.moda-form-tambah-admin {
	border: 1px solid rgba(0,0,0,0.2); 
	border-radius: 7px 7px; 
	background: #fff; 
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.btn-save-data-admin {
	border-radius: 5px 5px;
	background: #97e8b3;
	color: rgba(0,0,0,0.6);
	border: 1px solid #46ab72;
}

.form-select-options {
	background: rgba(0,0,0,0.4);
	color: #fff;
}



/* SCAN QR CODE */
video, canvas {
	max-width: 100%;
	width: 400px;
	height: auto;
	margin: 10px 0;
	border-radius: 8px;
}
.btn-multi-access-scan-qrcode {
	margin: 10px;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 8px;
	background: #007bff;
	color: white;
	cursor: pointer;
}

button:disabled {
	background: #999;
	cursor: not-allowed;
}

.flash {
	animation: flash-bg 0.8s ease;
}

@keyframes flash-bg {
	0% { background: yellow; }
	100% { background: #eee; }
}

#simpan-barang-baru {
	background: #d9d9d9; 
	color: #fff; 
	border-radius: 4px 4px; 
	border: 2px solid #fff;
}

#form-tambah-stok-kode-barang::-webkit-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
#form-tambah-stok-kode-barang::-moz-placeholder {
  color: #555;
  opacity: 1;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
#form-tambah-stok-kode-barang:-ms-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
#form-tambah-stok-kode-barang::-ms-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}

.name-item-batang {
	color: rgba(0,0,0,0.7);
}
.element-upload-img-barang {
	aspect-ratio: 3/3; 
	background: #fff; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	border-radius: 4px 4px;
	border: 2px solid rgba(0,0,0,0.07);
}

.form-placeholder {
	color: rgba(0,0,0,0.8);
}
.form-placeholder::-webkit-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
.form-placeholder::-moz-placeholder {
  color: #555;
  opacity: 1;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
.form-placeholder:-ms-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}
.form-placeholder::-ms-input-placeholder {
  color: #555;
  font-weight: 400;
  color: rgba(0,0,0,0.4);
}

.button-change-barang {
	padding: 7px 10px;
	border-radius: 4px 4px;
	background: #a5f0bf;
	color: rgba(0,0,0,0.8);
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}