/* Background */
.bgr-grey {
	background-color: #607d8b !important;
	color: #fff !important;
}
.bgr-grey-200 {
	background-color: #b0bec5 !important;
	color: #fff !important;
}
.bgr-brown {
	background-color: #795548 !important;
	color: #fff !important;
}
.bgr-orange {
	background-color: #ff9800 !important;
	color: #fff !important;
}
.bgr-yellow {
	background-color: #ffeb3b !important;
	color: rgba(0,0,0, 1) !important;
}
.bgr-green {
	background-color: #4caf50 !important;
	color: #fff !important;
}
.bgr-lime {
	background-color: #d4e157 !important;
	color: rgba(0,0,0, 0.6) !important;
}
.bgr-teal {
	background-color: #009688 !important;
	color: #fff !important;
}
.bgr-blue {
	background-color: #2196f3 !important;
	color: #fff !important;
}
.bgr-cyan {
	background-color: #00bcd4 !important;
	color: #fff !important;
}
.bgr-purple {
	background-color: #9c27b0 !important;
	color: #fff !important;
}
.bgr-indigo {
	background-color: #3f51b5 !important;
	color: #fff !important;
}
.bgr-red {
	background-color: #f44336 !important;
	color: #fff !important;
}
.bgr-pink {
	background-color: #e91e63 !important;
	color: #fff !important;
}
.bgr-white {
	background-color: #fff !important;
	color: #000 !important;
}



/* Color */
.fnt-white {
	color: #fff !important;
}
.fnt-grey {
	color: #607d8b !important;
}
.fnt-brown {
	color: #795548 !important;
}
.fnt-orange {
	color: #ff9800 !important;
}
.fnt-yellow {
	color: #ffeb3b !important;
}
.fnt-green {
	color: #4caf50 !important;
}
.fnt-lime {
	color: #d4e157 !important;
}
.fnt-teal {
	color: #009688 !important;
}
.fnt-blue {
	color: #2196f3 !important;
}
.fnt-cyan {
	color: #00bcd4 !important;
}
.fnt-purple {
	color: #9c27b0 !important;
}
.fnt-indigo {
	color: #3f51b5 !important;
}
.fnt-red {
	color: #f44336 !important;
}
.fnt-pink {
	color: #e91e63 !important;
}
.fnt-black {
	color: #000 !important;
}




/* Shadow */
.shadow1 {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}




/* Radius */
.r-10 {
	border-radius: 10px;
}



/* Posisi */

/* Atas Tengah*/
.tc {
	display: flex;
	justify-content: center;
}
/* Atas Kanan */
.tr {
	display: flex;
	justify-content: flex-end;
}
/* Tengah Kiri */
.cl {
	display: flex;
	align-items: center;
}
/* Tengah Tengah */
.cc {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Tengah Kanan */
.cr {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
/* Bawah Kiri */
.bl {
	display: flex;
	align-items: flex-end;
}
/* Bawah Tengah */
.bc {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* Bawah Kanan */
.br {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}








.master {
	display: flex;
	justify-content: center;
}
.master-item {
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	cursor: pointer;
	width: 90%;
	margin-bottom: 35px;
}
.master-item:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.master .icon {
	font-size: 6.5em;
	display: flex;
	justify-content: center;
	padding: 15px 0;
}
.master .title {
	display: flex;
	justify-content: center;
	padding: 0 15px 15px 15px;
	font-size: 1.3em;
}



.header-data {
	height: 50px;
	background-color: #F9F9F9;
	padding: 0 15px;
	display: flex;
	align-items: center;
}
.header-data .action {
	display: flex;
	align-items: center;
	height: 50px;
}
.header-data .action button {
	display: flex;
	align-items: center;
}
.header-data .action button i {
	margin-right: 5px;
}
.header-data .filter {
	display: flex;
	align-items: center;
	height: 50px;
	margin-left:  20px;
}
.header-data .search {
	width: 270px;
	display: flex;
	align-items: center;
	height: 50px;
	margin-left: auto;
}



.content-data {
	height: calc(100vh - 51px - 50px - 45px);
	overflow-x: auto;
	overflow-y: auto;
}
.table-data {
	min-width: 100%;
	font-size: 1em;
}
.table-data table, td, th {
	border: 0.5px solid rgba(0,0,0,0.3);
	padding: 3px 10px;
	white-space: nowrap;
}
.table-data .tbl-header {
	font-weight: bold;
	background-color: #78909c;
	color:#fff;
}
.table-data .tbl-row {
	cursor: pointer;
}
.table-data .tbl-row:hover {
	background-color: #e3f2fd;
}
.table-data .tbl-row .foto-user {
	height: 25px;
	width: 25px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 50%;
}
.dropdown-item {
	font-size: 1.1em;
}
.dropdown-item i {
	margin-right: 5px;
}

/* Rincian Service */
.rincian-service {
	margin-top: 20px;
}
.tbl-no-border, .tbl-no-border tr, .tbl-no-border td {
	border: none !important;
}



/* Produk */
.foto-produk {
	margin-top: 15px;
}
.foto-produk .add {
	font-size: 4em;
	cursor: pointer;
}
.foto-produk .foto-content {
	height: 95px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center;
  	padding: 3px;
}
.foto-produk .foto-content i {
	cursor: pointer;
}

.modal-produk {
	width: 90vw;
	margin: 5vh 5vw 5vh 5vw;
}
.modal-produk .modal-body {
	padding: 0;
}
.modal-produk .modal-body .tab-kategori {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 20px;
}
.modal-produk .modal-body .tab-kategori .pencarian {
	width: 290px;
	margin-left: auto;
}
.grid-produk {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 0;
	height: calc(100vh - 50px - 52px - 10vh);
	grid-auto-rows: min-content;
	overflow-y: auto;
	padding: 10px 0;
}
.produk {
	height: 152px;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.produk .produk-item {
	width: 80%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  	border-radius: 10px;
  	cursor: pointer;
  	padding: 7px 10px;
}
.produk .produk-item:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.produk .produk-item .img {
	height: 90px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.produk .produk-item .info {
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.produk .produk-item .info .nama {
	font-weight: bold;
	font-size: 1.1em;
	padding: 5px 0;
}



/* Footer Data */
.footer-data {
	height: 45px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	font-weight: bold;
	background-color: #F9F9F9;
}
.footer-data .informasi {
	height: 45px;
	display: flex;
	align-items: center;
}
.footer-data .action {
	height: 45px;
	display: flex;
	align-items: center;
	margin-left: auto;
}
.footer-data .action button {
	display: flex;
	align-items: center;
}
.footer-data .action button i {
	margin-right: 5px;
}
.footer-data .laba-rugi {
	margin-right: 30px;
	display: flex;
	align-items: center;
}
.footer-data .laba-rugi strong {
	margin-left: 10px;
	font-size: 1.3em;
}






/* Tracking */
.tracking {
	padding-left: 20px;
}
.tracking div:last-child {
	border-bottom: 0;
}
.tracking-item {
	border-bottom: 0px solid rgba(0,0,0,0.3);
	border-left: 2px solid #ff9800;
	padding: 5px 0 5px 20px;
	height: 60px;
	position: relative;
	z-index: 1;
}
.tracking-item i {
	position: absolute;
	color: #ff9800;
	font-size: 30px;
	left: -16px;
	top: 10px;
	z-index: 999;
}
.tracking-ket {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tracking-waktu {

}










/* JADWAL KURSUS */
.paket-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.paket-card {
	border-radius: 12px;
	overflow: hidden;
}
.paket-card:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.paket-head {
	padding: 15px 15px 5px 15px;
	border-bottom: 1px solid rgb(0 0 0 / 15%);
}
.paket-list {
	margin-bottom: 15px;
}
.paket-item {
	padding: 10px 15px;
	cursor: pointer;
}
.paket-item:hover, .paket-item:hover h4, .paket-item:hover small {
	background-color: #2196f3;
	color: #fff !important;
}
.paket-desc h4 {
	margin: 0;
}
.paket-desc b {
	font-size: 1.4em;
}
.paket-detail {
	display: flex;
}
.paket-detail span {
	margin-left: auto;
}

.date-tgl {
	display: grid;
}
.date-tgl div:first-child {
	width: 85px;
}
.date-tgl div {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.5px solid rgba(0,0,0,0.3);
}
.date-grid {
	display: grid;
	border: 1px solid rgba(0,0,0,0.3);
}
.set-jadwal {
	cursor: pointer;
}
.set-jadwal:hover {
	background-color: #2196f3;
	color: #fff !important;
}