body {
		margin: 0;
		padding: 0;
		background-image: url('https://loket.pln-up3bulungan.com/images/bg-blue.gif');
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		font-family: 'Open Sans', sans-serif;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
}
.page-content-main {
		padding: 20px;
		position: relative;
		z-index: 1;
}
.fixed-bottom-image {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
}
.centered-buttons {
		position: absolute;
		transform: translate(-50%, -80%);
		text-align: center;
}
.centered-buttons .btn2 {
		display: flex;
		justify-content: center;
}
.centered-buttons .btn2 .btn {
		margin: 5vh;
		border-radius: 100px;
		background-color: #53b8f7;
		background-image: linear-gradient(#00A2B9 20%, #00A2B9 80%, #035B71 100%);
		border: 5px solid white;
		color: white;
		font-size: 2.5rem;
		width: 50vh;
		height: 10vh;
		padding: 20px;
		font-weight: 700;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		text-decoration: none;
}
.centered-buttons h1 {
		font-size: 4rem;
		font-weight: 800;
		color: #294d7d;
}
.centered-buttons .btn2 {
		margin-top: 10vh;
}
.logo-left{
		position: absolute;
		top: 5vh;
		width: auto;
		height: 11vh;
}
.logo-right {
		position: absolute;
		top: 5vh;
		width: auto;
		height: 13vh;
}
.logo-left {
		left: 5vh;
}
.logo-right {
		right: 5vh;
}
.logo-left img{
		height: 12vh;
}
.logo-right img {
		height: 12vh;
}
.modal-content {
		width: 100%;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.8);
		/* background: rgba(77,171,233, 0.7); */
}

.modal-body .container {
		display: flex;
		justify-content: center;
}

.button-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
}

.button-grid .btn {
		width: 100%;
		text-align: center;
		border-radius: 70px;
		background-color: #53b8f7;
		background-image: linear-gradient(#00A2B9 20%, #00A2B9 80%, #035B71 100%);
		border: 5px solid white;
		color: white;
		font-size: 1rem;
		padding: 20px;
		font-weight: 700;
		text-decoration: none;
}
.modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
}
.modal-header .modal-title {
		flex: 1;
		text-align: center;
		font-weight: 700;
		font-size: 3vh;
		color: #294d7d;
}
.modal-header .close {
		position: absolute;
		right: 20px;
}
.btn-secondary:hover {
		color: #fff;
		border-color: #155d73;
}
.close {
	font-size: 2rem;
}

.custom-checkbox {
position: relative;
padding-left: 35px;
cursor: pointer;
user-select: none;
display: inline-block;
font-size: 18px;
}

.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.custom-checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border: 1px solid #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
background-color: red;
border-color: red;
}

.custom-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}

.checkbox-columns {
            display: flex;
            justify-content: space-between;
        }

        .column {
            flex: 0 0 48%; /* Adjust width as needed */
        }
@media print {
	body {
		 font-family: 'Myriad Pro Semibold', Arial, sans-serif;
	}
	/* #print-layout {
		 display: block !important;
	} */
	#print-header-image {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			z-index: -1;
			page-break-before: always;
	}
	.content {
			width: 100%; /* Ensures the content div takes up full width */
			padding-left:100px; /* Adjust margin as needed */
			padding-right:100px; /* Adjust margin as needed */
	}
	.content table {
			width: 100%;
			border-collapse: collapse;
			font-family: 'Myriad Pro Regular', Arial, sans-serif;
			font-size: 20px;
	}
	.content th, .content td {
			padding: 5px;
			border: none;
	}
	#print-documents {
			list-style: none; /* Remove default bullets */
			padding: 0;
	}

	#print-documents li {
			position: relative;
			padding-left: 25px; /* Space for the icon */
			margin-bottom: 10px; /* Spacing between items */
	}

	#print-documents li::before {
			content: "\2610";
			position: absolute;
			left: 0;
			top: 0;
			color: #000;
			font-size: 20px;
	}
}