/*flexbox shortcut*/
.fl-row{display: flex; flex-direction: row;}
.fl-col{display: flex; flex-direction: column;}
.fl-row.cen, .fl-col.cen {
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.fl-row.st, .fl-col.st { justify-content: flex-start; }
.fl-row.en, .fl-col.en { justify-content: flex-end; }
.fl-row.sb, .fl-col.sb { justify-content: space-between; }
.fl-row.se, .fl-col.se { justify-content: space-evenly; }
.fl-row.wr, .fl-col.wr { flex-wrap: wrap; }
.fl-1{flex: 1} .fl-2{flex: 2} .fl-3{flex: 3} .fl-4{flex: 4}

body {
	background-color: lightblue;
}

.kepala {
	background-color: black;
	border: 5px solid white;
	padding: 20px;
	margin: 5px auto;
	width: 70%;
/*	height: 150px;*/
/*	line-height: 150px;*/
	text-align: center;
}

h1 {
	color: white;
	font-weight: bolder;
/*	text-align: center;*/
}

.kepala a {
	color: yellow;
	text-decoration: none;
	font-style: italic;
	font-size: 18px;
	font-weight: bold;
}

.badan {
	border: 5px solid white;
	background-color: lightgray;
	padding: 20px 10px;
	overflow-x: auto;
}

.badan a {
	color: darkblue;
	text-decoration: none;
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
}

.opsi1, .opsi2, .opsi3 {
	border: 3px solid yellow;
	border-radius: 25%;
	width: 250px;
	height: 80px;
	padding: 10 px;
	margin: 5px;
	text-align: center;
	line-height: 80px;
	float: left;
}

div.opsi1 a, div.opsi2 a, div.opsi3 a {
	color: white;
	text-decoration: none;
	font-style: italic;
	font-size: 18px;
	font-weight: 700;
}

.opsi1{
	background-color: darkblue;
}

.opsi2{
	background-color: darkred;
}

.opsi3{
	background-color: darkgreen;
}

div.badan .tblmerah {
	background-color: salmon;
	border: 1px black solid;
	border-radius: 25%;
	padding: 2px 5px;
	color: blue;
}

div.badan .tblbiru {
	background-color: darkblue;
	border: 1px black solid;
	border-radius: 25%;
	padding: 2px 5px;
	display: inline-block;
	color: white;
	margin-bottom: 2px;
}

div.badan .tblhijau {
	background-color: darkgreen;
	border: 1px black solid;
	border-radius: 25%;
	padding: 2px 5px;
	color: white;
	display: inline-block;
	margin-bottom: 2px;
}

div.badan .tblkuning {
	background-color: yellow;
	border: 1px black solid;
	border-radius: 25%;
	padding: 2px 5px;
	color: darkblue;
	display: inline-block;
	margin-bottom: 2px;
}

.clear {
	clear: left;
}

.kaki {
	background-color: white;
	border: 2px solid black;
	height: 100px;
	padding: 40px 15px;
	box-sizing: border-box;
/*	line-height: 50px;*/
	text-align: center;
	font-weight: bold;
	font-style: arial;
	margin-top: 5px;
}

.kesimpulan{
	border: 1px solid black;
	background-color: lightyellow;
	width: 750px;
	margin: 15px 10px;
	padding: 20px;
}

.tabelStokObat, .tabelUbahObat,
.tabelTambahStok, .tabelTambahStok2,
.tabelKurangiStok, .tabelTambahObat,
.tabelOrderObat, .tabelPresensi {
 	
 	background-color: lightyellow;

}

.login {
	display: block;
}

.selamatDatang {
	color: white;
}

.tombolAbsen button {
	margin-top: 10px;
}

div.setting-page{
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.setting-page div.section {
	margin-bottom: 25px;
	margin-top: 10px;
}

div.section {
	display: block;
	box-sizing: border-box;
	background-color: lightblue;
	border: 3px solid black;
	border-radius: 10px;
	width: 93%;
/*	padding: 5px 10px 5px 10px;*/
	padding: 15px 10px 25px 10px;
}

.fotosect {
	box-sizing: border-box;
/*	background-color: salmon;*/
	float: left;
	width: 30%;
	height: 125px;
	border-right: 2px whitesmoke solid ;
}

.fotosect img {
	border: 1px black solid;
	width: 55%;
	border-radius: 50%;
	margin-left: 25%;

}

.keteranganprofil {
	box-sizing: border-box;
/*	background-color: salmon;*/
	float: left;
	width: 70%;
	height: 125px;
/*	border-left: 2px black solid;*/
	line-height: 8px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-size: 18px;
}

.keteranganprofil p:nth-child(1){
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}

.keteranganprofil a {
	color: yellow;
	text-decoration: underline;
	text-transform: uppercase;
	background-color: darkblue;
}

div.my-profile, div.ubah-password {
	display: flex;
	flex-direction: column;
	align-items: center;
}
div.my-profile table {
	width: 95%;
	box-sizing: border-box;
	line-height: 35px;
}
div.ubah-password table {
	width: 45%;
	box-sizing: border-box;
	line-height: 35px;
}
div.ubah-password span {
	text-transform: uppercase;
	font-weight: bold;
}
div.my-profile input, div.ubah-password input {
	display: block;
	box-sizing: border-box;
	width: 100%;
}
input#username, input#namadepan {
	display: block;
	box-sizing: border-box;
	width: 93%;
}

div.kunjungan {
	background-color: white;
	border: 1px black solid;
	box-sizing: border-box;
	width: 300px;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.kunjungan input, div.kunjungan button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

div.kunjungan2 td.imgkunjungan img{
/*	width: 70px;*/
	height: 70px;
	object-fit: cover;
	align-content: center;
	object-position: center;
	transition: transform ease-in-out 0.5s;
}
div.kunjungan2 div#fullpage {
	display: none;
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-size: contain;
	background-repeat: no-repeat no-repeat;
	background-position: center center;
	background-color: black;
}

div.absensi-karyawan {
	background-color: darkgrey;
	border: 1px black solid;
	box-sizing: border-box;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 15px;
}