* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #3214fe;
	font-family: "Poppins", sans-serif;
}

.tombol-primary {
	width: 100%;
	height: 46px;
	font-size: 20px;
	border: none;
	border-radius: 30px;
	background-color: #dfef1b;
	color: #160c5c;
	font-weight: 700;
}

.big-judul {
	font-size: 30px;
	font-weight: 700;
	color: white;
}

.top-bar-siswa {
	display: flex;
}

.top-bar-siswa h1 {
	font-size: 20px;
	color: white;
	font-weight: 700;
	align-self: center;
}

.navbar-siswa {
	background-color: white;
	position: fixed;
	bottom: 50px;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding: 20px;
	border-radius: 50px;
	z-index: 999;
}

.navbar-siswa a {
	margin: 0 30px;
	color: #160c5c;
	font-weight: 900;
	font-size: 35px;
	text-decoration: none;
}

.top-content h3 {
	color: white;
	font-weight: 700;
	margin-bottom: 4px;
}

.top-content p {
	font-size: 14px;
	color: rgb(251, 244, 244);
	font-weight: 500;
}

.body-content {
	overflow-x: hidden;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"] {
	height: 46px;
	border-radius: 30px;
}

.fw-500 {
	font-weight: 500;
}

@media (max-width: 700px) {
	.navbar-siswa {
		width: 90%;
		padding: 10px;
	}

	.navbar-siswa a {
		font-size: 25px;
	}

	.big-judul {
		font-size: 25px !important;
	}
}

/* map */
#map {
	width: 100%;
	height: 200px;
}

#coordinates,
#map-link,
#qr-reader,
#qr-result {
	margin-top: 10px;
}

#qr-reader {
	width: 100%;
}