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

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	width: 100%;
	height: auto !important;
}

/* Navbar Styles */

.bg-custom {
	background-color: #0d0c0c;
}

.logo-sitanala {
	width: 100%;
	height: 50px;
}

/* Card Styles */
.card {
	border: 0 !important;
	border-radius: 10px !important;
	position: relative;
}

.card1-img,
.card2-img {
	width: 100%;
	height: 350px;
	object-fit: cover;
}

/* Card Styles End */

/* Pasien */

.pasien-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 270px;
	padding: 10px;
	border-radius: 100px;
	background-color: #d3b577;
	color: #0c0b0b;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	cursor: pointer; /* Membuat seluruh kotak bisa diklik */
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover: Efek saat kursor di atas kotak */
.pasien-card:hover {
	background-color: #c9a865;
}

/* Sembunyikan checkbox asli */
.pasien-card input[type="checkbox"] {
	display: none;
}

/* Jika checkbox dicentang, ubah warna latar belakang */
.pasien-card input[type="checkbox"]:checked + span {
	font-weight: bold;
	color: #fff;
}

/* Jika checkbox dicentang, ubah warna latar belakang seluruh kartu */
.pasien-card input[type="checkbox"]:checked ~ .card-body {
	background-color: #835906; /* Warna coklat gelap */
	color: #fff;
	border-radius: 100px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-next {
	background-color: #aa7409 !important;
	border: 1px solid #aa7409 !important;
	border-radius: 100px;
}

.btn-next:active,
.btn-next:focus,
.btn-next:hover {
	background-color: #7a550c !important;
	border: 1px solid #7a550c !important;
	border-radius: 100px;
}

.btn-add-new {
	background-color: #3f55cc;
	border: 1px solid #3f55cc;
	border-radius: 100px;
}

.btn-add-new:active,
.btn-add-new:focus,
.btn-add-new:hover {
	background-color: #1c309f;
	border: 1px solid #1c309f;
	border-radius: 100px;
}

.hidden {
	display: none;
}

.btn-simpan-raja {
	background-color: #9a7937 !important;
	border: transparent;
	margin-top: 20px;
	height: 40px;
	font-size: 16px;
}

.btn-batal-raja {
	background-color: #aa2d11;
	border: transparent;
	height: 40px;
	font-size: 16px;
}

.form {
	margin-block-start: 50px;
}

@media only screen and (max-width: 900px) {
	.pasien-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px;
		border-radius: 100px;
		background-color: #d3b577;
		color: #0c0b0b;
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		cursor: pointer; /* Membuat seluruh kotak bisa diklik */
		transition: background-color 0.3s ease, color 0.3s ease;
	}
}

/* Pasien End */

/* MCU */

.pilih-tanggal-mcu-card {
	background-color: #9a7937 !important;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
}

.pilih-tanggal-mcu-card .card-body {
	margin-inline-start: 30px;
}

/* MCU End */

/* Rawat Jalan */

.gambar-tutorial {
	align-self: flex-start;
	width: 100%;
	height: 280px !important;
	object-fit: contain;
}

.gambar-tutorial1 {
	align-self: flex-end;
	width: 100%;
	height: 280px !important;
	object-fit: contain;
}

.cara-bayar-img {
	width: 100% !important;
	height: 150px !important;
	margin: 10px 0;
	cursor: pointer;
}

.radio-label.active .cara-bayar-img {
	border-radius: 14px;
	border: 6px solid #a37905 !important; /* Warna saat terpilih */
	background-color: #f1ffe7 !important; /* Contoh perubahan warna background */
}

@media screen and (max-width: 600px) {
	.cara-bayar-img {
		width: 100% !important;
		height: auto !important;
		margin: 10px 0;
		cursor: pointer;
	}
}

/* Rawat Jalan End */