* {
	text-decoration: none !important;
}

body {
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
	border-color: rgba(170, 116, 9, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
		0 0 8px rgba(170, 116, 9, 0.6);
	outline: 0 none;
}

/* Preload */

.loader-mask {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	background-color: #fff;
	z-index: 99999;
}

.loader {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: 50px;
	block-size: 50px;
	font-size: 0;
	color: #493306;
	display: inline-block;
	margin: -25px 0 0 -25px;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
.lead {
	font-size: 13px;
}
.loader div {
	background-color: #997735;
	display: inline-block;
	float: none;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 50px;
	block-size: 50px;
	opacity: 0.5;
	border-radius: 50%;
	-webkit-animation: ballPulseDouble 2s ease-in-out infinite;
	animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {
	0%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes ballPulseDouble {
	0%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/* Preload End */

/* Navbar */

.navbar {
	inline-size: 100%;
	block-size: 50px !important;
}

.navbar-logo img {
	inline-size: 100px;
	block-size: auto;
}

.bg-body-custom {
	background-color: #e0e9e4;
}

.bi-house-fill,
.bi-heart-fill,
.bi-envelope-fill,
.bi-people-fill,
.bi-person-fill {
	color: #9a7937;
	font-size: 16px;
	margin-inline-end: 30px;
}

.bi-telephone-fill,
.bi-envelope-at-fill {
	margin-inline-end: 30px;
}

@media only screen and (max-width: 600px) {
	.navbar {
		inline-size: 100%;
		block-size: 50px !important;
	}

	.bi-heart-fill {
		font-size: 13px !important;
	}

	.bi-house-fill,
	.bi-envelope-fill,
	.bi-people-fill,
	.bi-person-fill {
		color: #9a7937;
		font-size: 14px !important;
		margin-inline-end: 20px;
	}
}

/* Navbar End */

/* Hero */

@media only screen and (max-inline-size: 600px) {
	.bi-person-fill {
		color: #9a7937;
		font-size: 16px;
		margin-inline-end: 0 !important;
	}
}

/* Hero End */

/* Layanan */

#layanan {
	margin-block-start: 70px;
	text-align: center;
	display: flex;
	align-items: center;
}

.icon-row-1 {
	margin-block-start: 60px;
}

.icon-row-2 {
	margin-block-start: 10px;
}

#layanan h2 {
	font-size: 42px;
	font-weight: 700;
	color: #83510b;
}

.card {
	border: none;
}

.card h5 {
	font-weight: 600;
	color: #0c0b0b;
}

.card img {
	inline-size: 100px;
	block-size: 100px;
}

@media only screen and (max-inline-size: 600px) {
	#layanan {
		margin-block-start: 40px;
	}
	#layanan h2 {
		font-size: 30px;
		font-weight: 700;
		color: #83510b;
	}
	.icon-row-1 {
		margin-block-start: 30px;
	}
}

/* Layanan End */

/* Carousel */

.carousel {
	margin-block-start: 70px;
}

#carousel h2 {
	font-size: 42px;
	font-weight: 700;
	color: #83510b;
}

.profilPelayananSwiper {
	inline-size: 100%;
	block-size: 100%;
}

.profil-pelayanan-publik {
	inline-size: 100%;
	block-size: 100%;
}

.profilPelayananSwiper,
.profil-pelayanan-publik {
	width: 100%;
	height: auto;
}

.profil-pelayanan-publik-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.profil-pelayanan-publik-slide img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	object-fit: cover; /* atau 'contain' sesuai preferensi */
	max-height: 80vh; /* biar gak kepanjangan di layar kecil */
}

.profil-pelayanan-pagination .swiper-pagination-bullet {
	inline-size: 12px;
	block-size: 12px;
	background-color: #ccc;
	border-radius: 6px;
}

.profil-pelayanan-pagination .swiper-pagination-bullet-active {
	inline-size: 40px;
	background-color: #9a7937;
	transition: all 0.4s ease-in-out;
}

.swiper {
	inline-size: 100%;
	block-size: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 400px !important;
	border-radius: 20px !important;
	object-fit: contain !important;
}

.swiper-pagination-bullet {
	inline-size: 10px;
	block-size: 10px;
	border-radius: 5px;
}

.swiper-pagination-bullet-active {
	transition: all 0.6s ease-in-out;
	inline-size: 50px;
	block-size: 10px;
	background-color: #9a7937;
}

@media only screen and (max-width: 600px) {
	.swiper-slide img {
		display: block;
		width: 100%;
		height: 500px;
		object-fit: cover;
		border-radius: 20px;
	}
	#carousel h2 {
		font-size: 42px;
		font-weight: 700;
		color: #83510b;
	}
}

@media only screen and (max-width: 900px) {
	.swiper-slide img {
		display: block;
		width: 100%;
		height: 400px;
		object-fit: cover;
		border-radius: 20px;
	}
	#carousel h2 {
		font-size: 42px;
		font-weight: 700;
		color: #83510b;
	}
}

/* Carousel End */

/* Penilaian RS */

#penilaian {
	margin-block-start: 70px;
	text-align: center;
	display: flex;
	align-items: center;
}

#penilaian h3 {
	font-size: 42px;
	margin-bottom: 0;
	font-weight: 700;
	color: #83510b;
}

#penilaian h2 {
	font-size: 42px;
	margin-bottom: 0;
	font-weight: 700;
	color: #83510b;
}

#penilaian img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 900px) {
	#penilaian h2 {
		font-size: 32px;
		margin-bottom: 0;
		font-weight: 700;
		color: #83510b;
	}
}

/* Maps */

#maps {
	margin-block-start: 70px;
	text-align: center;
	display: flex;
	align-items: center;
}

#maps h3 {
	font-size: 42px;
	font-weight: 700;
	color: #83510b;
}

.google-maps {
	margin-block-start: 30px;
	border-radius: 20px;
}

/* Maps End */

/* Footer */

footer {
	display: flex;
	flex-direction: row;
	margin-block-start: 40px;
	inline-size: 100%;
	block-size: 60px;
	background-color: #e0e9e4;
}

footer p {
	font-size: 16px;
	font-weight: 600;
	color: #0c0b0b;
}

@media only screen and (max-width: 900px) {
	footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-block-start: 20px;
		inline-size: 100%;
		block-size: 60px;
		background-color: #e0e9e4;
		height: 100%;
		padding: 20px 0;
	}

	footer p {
		font-size: 16px;
		font-weight: 600;
		color: #0c0b0b;
	}

	footer a {
		margin: 20px 0 0 0;
		text-align: center;
	}
}

@media only screen and (max-width: 600px) {
	footer {
		display: flex;
		flex-direction: column;
		margin-block-start: 40px;
		inline-size: 100%;
		block-size: 60px;
		background-color: #e0e9e4;
		height: 100%;
		padding: 20px 0;
	}

	footer p {
		font-size: 16px;
		font-weight: 600;
		color: #0c0b0b;
	}

	footer a {
		margin: 20px 0 0 0;
		text-align: center;
	}
}

/* Footer End */

/* Login Page */

#loginContent {
	position: relative;
	inline-size: 100%;
	block-size: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(#00000076, #00000076),
		url("../img/login-bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.login-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.login-card {
	inline-size: 485px;
	block-size: 600px;
	border-radius: 15px;
	margin: 40px 0 0 0;
}

.login-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.login-card-body h3 {
	font-size: 32px;
	font-weight: 600;
	margin-block-end: 20px;
}

.login-card-body p {
	font-size: 16px;
	font-weight: 400;
}

.login-logo {
	inline-size: 170px !important;
	block-size: 37px !important;
	margin-block-end: 20px;
}

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

.login-btn-primary {
	margin-block-start: 20px;
	background-color: #aa7409;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.login-btn-primary:hover {
	transition: all 0.5s ease-in-out;
	margin-block-start: 20px;
	background-color: #825b0b;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.login-btn-danger {
	background-color: #8d2008;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.login-btn-danger:hover {
	transition: all 0.5s ease-in-out;
	margin-block-start: 20px;
	background-color: #6f1a07;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.login-form-control {
	inline-size: 371px;
	block-size: auto;
}

.password-container {
	position: relative;
}

.password-check {
	position: absolute;
	inset-block-start: 30px;
	inset-inline-end: 5px;
}

.password-check:active,
.password-check:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: #fff !important;
}

.bi-eye-slash-fill,
.bi-eye-fill {
	font-size: 20px;
	color: #077c76;
}

.register-text {
	margin-block-start: 30px;
	font-size: 16px;
	font-weight: 400 !important;
	color: #464242 !important;
}

.regist-link {
	margin-block-start: 30px;
	font-size: 16px;
	font-weight: 400 !important;
}

.nav-link-registrasi.active {
	background-color: #aa7409 !important;
}

@media only screen and (max-inline-size: 600px) {
	.login-card {
		inline-size: 100%;
		block-size: 100%;
		border-radius: 15px;
	}
	.login-logo {
		inline-size: 100px !important;
		block-size: 30px !important;
	}
	.form {
		margin-block-start: 30px;
	}
	.login-form-control {
		inline-size: 300px;
		block-size: auto;
	}
}

/* Login Page End */

/* Register Page */

#registerContent {
	position: relative;
	inline-size: 100%;
	block-size: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(#00000076, #00000076),
		url("../img/login-bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.register-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 40px 0;
}

.register-card {
	inline-size: 100%;
	block-size: auto;
}

.nav-pills .nav-link {
	margin-inline-end: 20px; /* Sesuaikan nilai jarak yang diinginkan */
}

.nav-pills .nav-link {
	color: #0c0b0b;
}

.nav-pills .nav-link.active {
	background-color: #077c76;
	color: #e0e9e4;
}

.register-card {
	padding: 20px !important;
}

.regist-password-check {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: 10px;
}

.regist-password-check:active,
.regist-password-check:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: #fff !important;
}

.register-btn-primary {
	margin-block-start: 20px;
	background-color: #aa7409;
	color: #e0e9e4;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.register-btn-primary:hover,
.register-btn-primary:active,
.register-btn-primary:focus {
	margin-block-start: 20px;
	background-color: #7a550c !important;
	color: #e0e9e4 !important;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.register-btn-danger {
	background-color: #8d2008;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

.register-btn-danger:hover {
	transition: all 0.5s ease-in-out;
	margin-block-start: 20px;
	background-color: #6f1a07;
	border: none;
	font-size: 16px;
	font-weight: 600;
}

/* Register Page End */

/* History Page */

.btn-log-view {
	background-color: #077c76;
	border-color: transparent;
}

.btn-log-view:hover {
	background-color: #045955;
	border-color: transparent;
}

.riwayat-cards {
	width: 100%;
	height: 60px !important;
	margin: 20px 0;
	background-color: #49330697;
}

.riwayat-image {
	display: block;
	margin: 0 auto;
	width: 400px;
	height: auto;
}

.no-history-text {
	font-size: 30px;
	font-weight: 600;
}

.btn-kembali-history {
	background-color: #8d2008;
	border: 1px solid #8d2008;
}

.detail-cards {
	background-color: #202f2e;
	border-radius: 10px;
	color: #ffffff;
}

.detail-cards .detail-title {
	margin-inline-start: 10px;
	margin-block-start: 9px;
	font-size: 20px;
	font-weight: 600;
}

.table {
	inline-size: 100%;
	table-layout: fixed;
}

.first {
	text-align: start;
	font-size: 16px !important;
	font-weight: 600;
	color: #4b4643 !important;
}

.last {
	text-align: start;
	font-size: 16px !important;
	font-weight: 400;
	color: #4b4643 !important;
}

.middle {
	text-align: center;
	inline-size: 25%;
}

.attention-warning {
	font-size: 18px;
	color: #d73c19;
	font-weight: bold;
}

.detail-button-primary {
	margin-block-start: 30px;
	background-color: #1b7369;
	border-color: transparent;
}

.detail-button-primary:hover,
.detail-button-primary:active,
.detail-button-primary:focus {
	transition: 0.5s ease-in-out;
	background-color: #045955 !important;
	border-color: transparent !important;
}

.detail-button-danger {
	background-color: #8d2008;
	border-color: transparent;
}

.detail-button-danger:hover,
.detail-button-danger:active,
.detail-button-danger:focus {
	background-color: #6f1a07 !important;
	border-color: transparent;
	transition: 0.5s ease-in-out;
}

@media only screen and (max-inline-size: 600px) {
	.detail-cards .detail-title {
		margin-inline-start: 10px;
		font-size: 18px;
		margin-block-start: 7px;
		font-weight: 600;
	}
}

/* History Page End */

/* Halaman Notifikasi */

.message-card {
	padding: 40px;
	border: 2px solid;
	border-radius: 10px;
}

.image-message {
	inline-size: 70px;
	block-size: 75px;
	overflow: hidden;
}

.image-message img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

.message-content h1 {
	font-size: 24px;
	font-weight: bold;
	line-height: 38px;
}

.message-content h5 {
	font-size: 20px;
	font-weight: 400;
	line-height: 38px;
	font-style: italic;
}

.message-content a {
	font-size: 18px;
	font-weight: 600;
}

.belum-ada-pesan-card {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #0d0902 !important;
}

.belum-ada-pesan-image {
	inline-size: 480px;
	block-size: 340px;
	display: block;
	margin: 0 auto;
}

.belum-ada-pesan-text {
	font-size: 40px;
	font-weight: 600;
	text-align: center;
	margin: 30px 0 0 0;
}

@media only screen and (max-inline-size: 600px) {
	.belum-ada-pesan-image {
		inline-size: 250px;
		block-size: 170px;
		display: block;
		margin: 0 auto;
	}

	.belum-ada-pesan-text {
		font-size: 24px;
		font-weight: 600;
		text-align: center;
		margin: 30px 0 0 0;
	}
}

.read-message h1 {
	color: #0d0902;
	font-size: 32px;
	font-weight: 600;
}

.tanggal-bayar h4 {
	color: #0d0902;
	font-size: 22px;
	font-weight: 400;
}

.isi-pesan h4 {
	color: #0d0902;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
}

/* Halaman Notifikasi End */

/* 404 Page */

.error-text {
	font-size: 36px;
	font-weight: 600;
	margin-block-start: 40px;
}

.btn-error-primary {
	background-color: #7f6b4e;
	border: 1px solid #7f6b4e;
	font-size: 16px;
	font-weight: 600;
}

.btn-error-primary:hover,
.btn-error-primary:active,
.btn-error-primary:focus {
	background-color: #614925 !important;
	border: 1px solid #614925 !important;
	transition: 0.5s ease-in-out;
}

/* 404 Page End */

/* Keterangan Kamar */

.keterangan-kamar {
	position: relative;
	inline-size: 100%;
	block-size: auto;
}

.keterangan-kamar .card {
	margin-block-start: 37px;
}

.keterangan-kamar .card {
	background-color: #493306;
	color: #fff;
}

.keterangan-kamar img {
	display: block;
	margin: 0 auto;
	margin-block-end: 20px;
	inline-size: 110px;
	block-size: auto;
}

.page-item.active .page-link {
	color: #fff !important;
	background-color: #614925 !important;
	border-color: #614925 !important;
}

.page-link {
	color: #614925 !important;
	background-color: #fff !important;
	border: 1px solid #dee2e6 !important;
}

.ket-kamar-title {
	text-transform: uppercase;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 30px;
}

.ketersediaan-kamar-cards {
	display: block;
	margin: 0 auto;
}

.btn-ket-kamar {
	background-color: #aa7409;
	border: 1px solid #aa7409;
	border-radius: 20px;
}

/* 

.keterangan-kamar .keterangan-cards {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 40px;
	inline-size: 267px;
	block-size: 144px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.keterangan-kamar .card-title {
	font-size: 16px;
	line-height: 26px;
	block-size: 65px;
}

.btn-keterangan-kamar {
	border-radius: 5px;
	background: rgba(154, 121, 56, 0.6);
	color: #ffffff;
	border: none;
	padding: 8px 40px;
} */

/* .ket-kamar-detail .card {
	background-color: #614925;
	color: #ffffff;
	inline-size: 100%;
	block-size: 55px;
}

.ket-kamar-detail .card h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 20px;
}

.btn-keterangan-kamar:hover,
.btn-keterangan-kamar:focus,
.btn-keterangan-kamar:active {
	transition: 0.5s ease-in-out;
	background: rgba(71, 52, 13, 0.87) !important;
} */

/* .ruangan-card {
	display: none;
	margin-block-end: 20px;
}

#loadMore,
#loadLess {
	padding: 10px 20px;
	margin: 10px 0;
	background-color: #007bff;
	color: #fff;
	border: none;
	cursor: pointer;
	display: inline-block;
}

#loadLess {
	display: none;
}

.btn-show-more,
.btn-show-less {
	background-color: #493306 !important;
} */

@media only screen and (max-inline-size: 600px) {
	.keterangan-kamar .card {
		inline-size: 100%;
		block-size: 100%;
	}
	.keterangan-kamar .card-title {
		font-size: 14px;
		line-height: 26px;
		block-size: 45px;
	}

	.btn-keterangan-kamar {
		border-radius: 5px;
		background: rgba(154, 121, 56, 0.6);
		border: none;
		padding: 8px 40px;
		font-size: 10px;
	}
}

/* Keterangan Kamar End */

/* Pendaftaran */

.pendaftaran-option img {
	width: 550px;
	height: 300px;
	object-fit: cover;
	border-radius: 10px;
}

.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;
}

#checkbox {
	margin-inline-end: 10px;
}

#semua {
	opacity: 1;
}

.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-back {
	border-radius: 100px;
}

.button-group-pills .btn {
	border-radius: 20px;
	line-height: 1.2;
	margin-block-end: 15px;
	margin-inline-start: 10px;
	inline-size: 260px;
	border-color: rgba(154, 121, 56, 0.4);
	background-color: rgba(154, 121, 56, 0.4);
	color: #0d0902;
}

.pendaftaran-mcu-paket-cards {
	background-color: #8a790b;
	inline-size: 100%;
	block-size: auto;
	padding: 10px;
}

.pendaftaran-mcu-paket-cards {
	color: #ffffff;
}

.btn-primary-mcu-paket {
	background-color: #9a7937;
	border: 1px solid #9a7937;
	border-radius: 100px;
}

.btn-primary-mcu-paket:hover,
.btn-primary-mcu-paket:active,
.btn-primary-mcu-paket:focus {
	transition: 0.5s ease-in-out;
	background-color: #493306 !important;
	border: 1px solid #493306 !important;
}

.btn-danger-mcu-paket {
	background-color: #aa2d11;
	border: none;
	border-radius: 100px;
}

.btn-danger-mcu-paket:hover,
.btn-danger-mcu-paket:active,
.btn-danger-mcu-paket:focus {
	background-color: #8d2008 !important;
	transition: 0.5s ease-in-out;
}

.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;
}

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

#thumbnail-container-satu .img-thumbnail::before,
#thumbnail-container-dua .img-thumbnail::before {
	background-color: #464242 !important;
}

#thumbnail-container-satu .img-thumbnail,
#thumbnail-container-dua .img-thumbnail {
	width: 300px !important;
	height: 300px !important;
	object-fit: cover;
}

.btn-simpan-raja:active,
.btn-simpan-raja:hover,
.btn-danger-mcu-paket:focus {
	transition: 0.5s ease-in-out;
	background-color: #493306 !important;
	border: 1px solid #493306 !important;
}

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

.btn-select-tanggal-raja {
	background-color: #bfa97f;
	border: transparent;
	width: 150px;
}

.btn-select-tanggal-raja:hover,
.btn-select-tanggal-raja:active,
.btn-select-tanggal-raja:focus {
	transition: 0.5s ease-in-out;
	background-color: #8d7955;
}

.cntr {
	margin: auto;
}

.btn-radio {
	cursor: pointer;
	display: inline-block;
	float: left;
	-webkit-user-select: none;
	user-select: none;
}

.btn-radio:not(:first-child) {
	margin-left: 20px;
}

.btn-tanggal-rencana-kunjungan {
	background-color: #7e590e;
	border: 1px solid #7e590e;
	font-weight: 800;
}

.btn-tanggal-rencana-kunjungan:active,
.btn-tanggal-rencana-kunjungan:focus,
.btn-tanggal-rencana-kunjungan:hover {
	transition: 0.5s ease-in-out;
	background-color: #493306 !important;
	border: 1px solid #493306 !important;
}

.pembayaran-text {
	font-size: 16px;
}

.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;
	}
}

@media screen and (max-width: 480px) {
	.btn-radio {
		display: block;
		float: none;
	}

	.btn-radio:not(:first-child) {
		margin-left: 0;
		margin-top: 15px;
	}
}

.btn-radio svg {
	fill: none;
	vertical-align: middle;
}

.btn-radio svg circle {
	stroke-width: 2;
	stroke: #c8ccd4;
}

.btn-radio svg path {
	stroke: #bfa97f;
}

.btn-radio svg path.inner {
	stroke-width: 15;
	stroke-dasharray: 19;
	stroke-dashoffset: 19;
}

.btn-radio svg path.outer {
	stroke-width: 2;
	stroke-dasharray: 57;
	stroke-dashoffset: 57;
}

.btn-radio input {
	display: none;
}

.btn-radio input:checked + svg path {
	transition: all 0.4s ease-in-out;
}

.btn-radio input:checked + svg path.inner {
	stroke-dashoffset: 38;
	transition-delay: 0.2s;
}

.btn-radio input:checked + svg path.outer {
	stroke-dashoffset: 0;
}

.btn-radio span {
	display: inline-block;
	vertical-align: middle;
}

.form-control-upload-file {
	width: 300px;
}

.pilih-tanggal-card {
	background-color: rgba(154, 121, 56, 0.4) !important;
}

.pilih-tanggal-card h5 {
	text-align: center;
	background-color: #202f2e;
	padding: 10px 0;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 4px;
}

.table-pilih-tanggal {
	margin-block-start: 30px;
}

.table-pilih-tanggal th,
.table-pilih-tanggal td {
	text-align: center;
	background-color: transparent !important;
	border-block-end: none;
}

.btn-tanggal-pendaftaran {
	padding: 7px 10px !important;
	background-color: rgba(154, 121, 56, 0.4) !important;
	border-radius: 5px;
	color: #ffffff;
	border-color: transparent;
	font-size: 14px;
}

.pilih-tanggal-bulan-card {
	background-color: #202f2e !important;
	color: #ffffff;
	font-size: 18px;
}

.btn-pilih-tanggal-mcu-next {
	background-color: #aa7409;
	border: transparent;
	border-radius: 100px;
}

.btn-pilih-tanggal-mcu-next:hover,
.btn-pilih-tanggal-mcu-next:active,
.btn-pilih-tanggal-mcu-next:focus {
	transition: 0.5s ease-in-out;
	background-color: #7c560a !important;
	border: transparent;
}

.btn-pilih-tanggal-mcu-back {
	background-color: #aa2d11;
	border: transparent;
	border-radius: 100px;
}

.btn-pilih-tanggal-mcu-back:hover,
.btn-pilih-tanggal-mcu-back:active,
.btn-pilih-tanggal-mcu-back:focus {
	border: transparent;
	background-color: #8d2008 !important;
	transition: 0.5s ease-in-out;
}

.btn-tanggal-pendaftaran:active {
	transition: 0.2s ease-in-out;
	background-color: rgba(79, 59, 20, 0.638);
}

.pembayaran-modal {
	position: relative;
	inline-size: 800px !important;
}

.pembayaran-modal h1 {
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 600;
}

.btn-pembayaran-selesai {
	background-color: #1b7369;
	border-color: #1b7369;
	padding: 5px 150px;
}

.btn-pembayaran-selesai:hover,
.btn-pembayaran-selesai:focus,
.btn-pembayaran-selesai:active {
	background-color: #045955 !important;
	border-color: #045955 !important;
}

.btn-pembayaran-cancel {
	background-color: #8d2008;
	border-color: #8d2008;
	padding: 5px 150px;
}

.btn-pembayaran-cancel:hover,
.btn-pembayaran-cancel:focus,
.btn-pembayaran-cancel:active {
	background-color: #6f1a07 !important;
	border-color: #6f1a07 !important;
}

.pendaftaran-selesai-title {
	font-weight: 600;
	font-size: 32px;
}

.pendaftaran-selesai-content {
	background-color: rgba(154, 121, 56, 0.257);
	border-radius: 14px;
	padding: 30px;
}

.pendaftaran-selesai-content td {
	text-transform: uppercase;
	font-size: 16px !important;
}

.pendaftaran-selesai-content td,
.pendaftaran-selesai-content th {
	background-color: transparent !important;
	border-block-end: transparent !important;
}

.alert-pendaftaran-selesai {
	color: #ca0b0b;
	font-size: 16px;
	font-weight: 800;
	font-style: normal;
}

.copy-VA {
	font-size: 14px;
	font-weight: 800 !important;
	color: #aa7409;
}

.copy-VA:hover {
	color: #8b610c;
}

.btn-selesai-pendataran {
	background-color: #aa7409;
	border: 1px solid #aa7409;
}

.btn-selesai-pendataran:hover,
.btn-selesai-pendataran:active,
.btn-selesai-pendataran:focus {
	transition: 0.5s ease-in-out;
	background-color: #926408 !important;
	border: 1px solid #926408 !important;
}

/* Pendaftaran End */

/* Jadwal Dokter Option */

.dokter-option-card,
.dokter-option-card-container {
	position: relative;
	inline-size: 100%;
	block-size: auto;
}

.dokter-option-card img {
	inline-size: 100%;
	block-size: 300px;
	z-index: 1;
}

.sedang-libur-text {
	font-weight: 800;
	color: #a52508;
}

.hidden {
	display: none;
}

@media only screen and (max-width: 600px) {
	.dokter-option-card img {
		inline-size: 100% !important;
		block-size: 100%;
	}
	.btn-select-tanggal-raja {
		background-color: #bfa97f;
		border: transparent;
		width: 100%;
	}
}

/* Jadwal Dokter Option End */

/* Pasien */

.pasien-card h5 {
	border-radius: 4px;
	background-color: #d3b577 !important;
	color: #0c0b0b;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	align-items: center;
}

.pasien-card {
	inline-size: 253px !important;
	block-size: auto;
	border-radius: 4px;
	background-color: #d3b577 !important;
	color: #0c0b0b;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	align-items: center;
	border-radius: 100px;
}

.btn-pasien-tambah {
	background-color: #aa7409;
	border: 1px solid #aa7409;
}

.btn-pasien-tambah:active,
.btn-pasien-tambah:focus,
.btn-pasien-tambah:hover {
	background-color: #835906 !important;
	border: 1px solid #835906 !important;
}

.pasien-log-card {
	width: 16rem; /* sesuai kebutuhan */
	height: 80px; /* sesuai kebutuhan */
	background-color: #ffb520;
	color: #111010;
}

.pasien-log-card .card-body {
	display: flex; /* jadikan flex container */
	align-items: center; /* center vertikal */
	justify-content: center; /* center horizontal */
	height: 100%; /* fill parent .pasien-log-card */
	padding: 0; /* hilangkan padding default */
}

.pasien-log-card .card-title {
	font-size: 18px;
	margin: 0; /* hapus margin default <h5> */
	text-align: center; /* pastikan teks center */
}

.pasien-log-card:hover {
	transition: background-color 0.2s ease-in-out;
	background-color: #845a04;
}

@media only screen and (max-inline-size: 600px) {
	.pasien-card h5 {
		border-radius: 4px;
		background-color: #d3b577;
		color: #0c0b0b;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		align-items: center;
	}
	.pasien-card {
		inline-size: 100% !important;
		block-size: auto;
	}
}

@media screen and (max-width: 600px) {
	.pasien-log-card {
		width: 21rem !important;
		height: auto !important;
		padding: 20px;
	}
}

/* Pasien End */

/* Privacy Policy */

.privacy-policy-container .card {
	position: relative;
	width: 100%;
	height: 280px;
	background-image: linear-gradient(#000000ac, #000000ac),
		url("../img/privacy-policy-hero.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.privacy-policy-container .card .card-body {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #fcfcfc;
	font-size: 48px;
	font-weight: 600;
}

.privacy-policy-head-container h1 {
	font-size: 40px;
	font-weight: 600;
}

.privacy-policy-head-container p {
	width: 614px;
	font-size: 16px;
	line-height: 34px;
	text-align: justify;
}

.privacy-policy-head-image {
	width: 450px;
	height: auto;
}

.privacy-policy-main-content p {
	font-size: 16px;
	line-height: 35px;
	text-align: justify;
}

@media only screen and (max-width: 600px) {
	.privacy-policy-container .card {
		position: relative;
		width: 100%;
		height: 150px;
	}
	.privacy-policy-container .card .card-body {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #fcfcfc;
		font-size: 24px;
		font-weight: 600;
	}
}

/* Privacy Policy End */

/* Maintenenace Page */

.maintenance-image {
	width: 584px;
	height: 370px;
}

.konsul-dokter-heading {
	margin: 20px 0 0 0;
	font-size: 40px;
	font-weight: 600;
}

.konsul-dokter-paragraph {
	font-size: 24px;
	width: 582px;
	margin: 20px 0 0 0;
}

@media only screen and (max-width: 900px) {
	.maintenance-image {
		width: 600px;
		height: 100%;
		margin: 120px 0 0 0;
	}
	.konsul-dokter-heading {
		margin: 30px 0 0 0; /* Lebih kecil margin untuk tablet */
		font-size: 36px; /* Sedikit lebih kecil untuk tablet */
		font-weight: 600;
	}
	.konsul-dokter-paragraph {
		font-size: 34px;
		width: 582px;
		margin: 30px 0 80px 0;
		text-align: justify;
	}
}

@media only screen and (max-width: 600px) {
	.maintenance-image {
		width: 300px;
		height: 100%;
		margin: 90px 0 0 0;
	}
	.konsul-dokter-heading {
		margin: 20px 0 0 0; /* Lebih kecil margin untuk mobile */
		font-size: 20px; /* Ukuran lebih kecil untuk mobile */
		font-weight: 600;
	}
	.konsul-dokter-paragraph {
		font-size: 18px;
		width: 320px;
		margin: 20px 0 0 0;
		line-height: 32px;
		text-align: justify;
	}
	.gambar-tutorial {
		align-self: flex-start;
		width: 100%;
		height: auto !important;
		object-fit: contain;
	}

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

.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;
}

/* Maintenenace Page End */

.select2-container--default .select2-selection--single {
	height: calc(2.3rem + 2px);
	padding: 0.5rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	font-size: 1rem;
	line-height: 1.5;
}

/* Posisi panah agar center */
.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 100%;
	top: 50%;
	transform: translateY(-50%);
}

/* Text align agar sejajar */
.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	line-height: normal;
	padding-left: 0;
}

.pseudo-disabled {
	background-color: #e9ecef; /* sama seperti disabled Bootstrap */
	cursor: not-allowed;
	pointer-events: none;
	color: #6c757d; /* warna font disabled */
}

.button-update-profile,
.button-update-profile:hover,
.button-update-profile:active,
.button-update-profile:focus,
.button-update-profile:focus-visible {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #9b7a44 !important; /* Warna dasar */
	color: #fcfcfc;
	font-weight: bold;
	border: none;
	border-radius: 20px;
	padding: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-bottom: 20px;
}

.button-log-out {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #b02018 !important; /* Warna dasar */
	color: #fcfcfc !important;
	font-weight: bold;
	border: none;
	border-radius: 20px;
	padding: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Standar Pelayanan */

#standarPelayanan h2 {
	font-size: 42px;
	font-weight: 700;
	color: #83510b;
}