/* Custom colors */
:root {
	--bs-putih: #fff;
	--bs-hitam: #000;
	--bs-hijau: #5bda78;
	--bs-hijau-hover: #4c9c5f;
	--bs-merah: #ff6878;
	--bs-merah-hover: #da4f5d;
	--bs-kuning: #fff43a;
	--bs-kuning-hover: #edbe33;
	--bs-biru: #4ad5eb;
	--bs-biru-hover: #3f99a7;
	--bs-ungu: #9f75f4;
	--bs-orange: #fd7e14;
	--bs-lightblue: #86bad8;
	--bs-navy: #002c59;
	--bs-olive: #74c8a3;
	--bs-lime: #67ffa9;
	--bs-fuchsia: #f672d8;
	--bs-maroon: #ed6c9b;
}

body {font-family:'Fira Sans Condensed',sans-serif; background-image:linear-gradient(to bottom right, #faf5ea, #e2c483); background-size:cover; background-attachment:fixed;}

.text-hijau{color:var(--bs-hijau)!important}a.text-hijau:focus,a.text-hijau:hover{color:var(--bs-hijau-hover)!important}
.text-merah{color:var(--bs-merah)!important}a.text-merah:focus,a.text-merah:hover{color:var(--bs-merah-hover)!important}
.text-kuning{color:var(--bs-kuning)!important}a.text-kuning:focus,a.text-kuning:hover{color:var(--bs-kuning-hover)!important}
.text-biru{color:var(--bs-biru)!important}a.text-info:focus,a.text-biru:hover{color:var(--bs-biru-hover)!important}
.text-ungu{color:var(--bs-ungu)!important}
.text-orange{color:var(--bs-orange)!important}
.text-red{color:var(--bs-merah)!important}
.text-green{color:var(--bs-hijau)!important}
.text-putih{color:var(--bs-putih)!important}
.text-orange {color:#fd7e14}
.btn-orange {color:#fff;background-color:#fd7e14}

.birth {margin-top: 50px;}
/* Content wrapper */
#content {
	/*margin-left: 250px;*/
	padding: 20px;
	margin-bottom: 50px;
	transition: margin-left 0.3s;
}
#content.collapsed {margin-left: 80px;}

.form-signin {
	width: 100%;
	padding: 15px;
	margin: auto;
  }
  
  .form-signin .form-group {
	margin-bottom: 15px; /* Space between inputs */
  }
  
  .form-signin label {
	margin-bottom: 5px;
	display: block; /* Ensures the label is above the input */
  }
  
  .form-signin input {
	width: 100%;
	padding: 10px; /* Adjust padding if needed */
	border: 1px solid #ccc; /* Border adjustment */
	border-radius: 5px; /* Make it more visually appealing */
  }
  
  .form-signin .form-floating:focus-within {
	z-index: 2;
  }
  
  
.profile-pic {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}
.edit-mode {display: none;}
.edit-btn {float: right; margin-top: 10px;}

/* Style for sidebar */
.sidebar {
	height: 100vh;
	width: 250px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #343a40;
	padding-top: 60px; /* Space for topbar */
	transition: width 0.3s;
}
.sidebar.collapsed {width: 80px;}
.sidebar a {
	padding: 15px;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	transition: all 0.3s;
}
.sidebar.collapsed a {
	padding: 15px 10px;
	font-size: 14px;
}
.sidebar.collapsed a span {display: none;}
  
/* Sidebar toggle button */
.sidebar-toggle {
	position: fixed;
	top: 55px;
	left: 260px;
	z-index: 1000;
	cursor: pointer;
	font-size: 24px;
	color: white;
	background-color: #343a40;
	border: none;
	padding: 5px 10px;
}
  
.collapsed-toggle {left: 90px;}
  
/* Media query for auto-collapse on mobile */
@media (max-width: 768px) {
	.sidebar {width: 80px;}
	#content {margin-left: 80px;}
	.sidebar-toggle {left: 90px;}
}
@media (max-width: 576px) {
	.sidebar {display: none;}
	#content {margin-left: 0;}
	.sidebar-toggle {left: 15px;}
}

.card-stat { padding: 20px; }
.dashboard-title { margin-bottom: 20px; }