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

html::-webkit-scrollbar {
 width: 12px;
}

html::-webkit-scrollbar-thumb {
 background: rgb(37, 37, 37);
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 transition: height 0.3s ease-in-out;
}

body::-webkit-scrollbar-track {
 background-color: #f1f1f1;
 border-radius: 8px;
}

body::-webkit-scrollbar-thumb {
 height: var(--thumb-height);
}

body {
 opacity: 0;
 transition: opacity 0.5s ease-out;
 scrollbar-width: none;
 -webkit-transition: opacity 0.5s ease-out;
 -moz-transition: opacity 0.5s ease-out;
 -ms-transition: opacity 0.5s ease-out;
 -o-transition: opacity 0.5s ease-out;
}

#suspendScreen {
 display: none;
 position: fixed;
 height: 100%;
 width: 100%;
 background-color: rgba(226, 223, 209, 0.144);
 z-index: 99;
 backdrop-filter: blur(1px);
}

body.show-body {
 opacity: 1;
}

body.hide-body {
 opacity: 0;
}

.hidden {
 display: none;
}

#notification-box {
 position: fixed;
 top: 20px;
 right: 15px;
 /* left: 15px; */
 padding: 10px;
 background-color: #f2f2f2;
 border: 1px solid #ddd;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 z-index: 100;
 /* animation: showNotification 0.5s ease forwards; */
}

.show-animation {
 animation: showNotification 0.5s ease forwards;
}

@keyframes showNotification {
 from {
     opacity: 0;
     transform: translateY(-20px);
 }
 to {
     opacity: 1;
     transform: translateY(0);
 }
}

@keyframes hideNotification {
 from {
     opacity: 1;
     transform: translateY(0);
 }
 to {
     opacity: 0;
     transform: translateY(-20px);
 }
}

#close-btn {
 background-color: #ccc;
 border: none;
 padding: 5px 10px;
 border-radius: 3px;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}

#close-btn:hover {
 background-color: #999;
}

#go-btn {
 color: #000000;
 background-color: #f7fc00;
 border: none;
 padding: 5px 10px;
 border-radius: 3px;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
}

#go-btn:hover {
 color: white;
 background-color: #000000;
}

.hide-animation {
 animation: hideNotification 0.5s ease forwards;
} 

/* Styles for the header */
header {
	background-color: #333;
	color: #fff;
	padding: 10px 0;
}

.container {
	min-height: 100vh;
}

/* nav ul {
	list-style-type: none;
	display: flex;
	justify-content: space-around;
}

nav a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	transition: color 0.3s ease-in-out;
}

nav a:hover {
	color: #ff6600;
} */

/* .navbar {
	background-color: #333;
	overflow: hidden;
	/* display: flex; */
	/* justify-content: space-between; */
/* }  */

/* .navbar a {
	float: left;
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
} */

.button-navbar-direct:hover {
 background-color: #ddd;
 color: black;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 -ms-border-radius: 15px;
 -o-border-radius: 15px;
}

/* Gaya CSS untuk Nama Akun dan Gambar */
/* .account {
	display: flex;
	align-items: center;
	float: right;
} */

/* .account img {
	height: 40px; /* Ubah tinggi gambar sesuai kebutuhan Anda */
	/* width: 40px; Ubah lebar gambar sesuai kebutuhan Anda */
	/* border-radius: 50%; Membuat gambar menjadi lingkaran */
	/* margin-right: 10px; Jarak antara gambar dan teks nama akun */
/* }  */

/* .account p	 {
	/* display: inline; */
	/* text-align: left; */
	/* text-align: center; */
	/* color: rgb(163, 161, 161); */
	/* margin-right: 10px; */
/* } */

.navbar {
	background-color: #333;
	overflow: hidden;
	/* display: flex; */
	/* justify-content: space-between; */
	/* align-items: center; */
}

.navbar a {
	color: white;
	text-decoration: none;
	padding: 10px 20px;
 transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
}

/* ... */
.account {
	display: flex;
	align-items: center;
	float: right;
	margin-right: 10px;
}

.account img {
	height: 50px;
	width: 50px;
	border-radius: 20%;
	margin-right: 10px;
}

.account-info {
	display: flex;
	flex-direction: column; /* Menyusun paragraf dalam kolom */
}

.account-info p {
	margin: 1px 0;
	color: rgb(163, 161, 161);
}

.selected {
 background-color: red;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 -ms-border-radius: 15px;
 -o-border-radius: 15px;
}

/* Tombol Responsif */
@media screen and (max-width: 1091px) {
	.navbar a, .account {
					float: none;
					display: block;
					text-align: left;
					width: 100%;
	}

	.account {
		border-top: 1px solid white; /* Menambahkan garis atas di bawah nama akun */
		padding: 10px 16px; /* Mengurangi padding untuk menyesuaikan garis */
	}

	.account p {
		text-align: left;
	}
}

@media screen and (max-width: 730px) {
 #notification-box {
  left: 15px;
 }
}

/* Styles for the main content */
main {
	padding: 20px;
	text-align: center;
}

h1 {
	font-size: 36px;
	margin-bottom: 10px;
	color: #333;
}

p {
	font-size: 18px;
	color: #666;
	margin-bottom: 20px;
}

.btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #ff6600;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	transition: background-color 0.3s ease-in-out;
}

.btn-logout {
	display: inline-block;
	background-color: #ff0000;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	transition: background-color 0.3s ease-in-out;
}

.btn-logout:hover {
	background-color: rgba(255, 0, 0, 0.651);
}

.btn:hover {
	background-color: #ff4d00;
}

/* Styles for the footer */
footer {
	background-color: #333;
	color: #fff;
	text-align: center;
	padding: 10px 0;
}