.tabs {
			display: flex;
			margin-bottom: 20px;
			max-width: 550px; /* Batasi lebar kontainer */
			margin: 0 auto; /* Posisikan di tengah */
		}

		.tabs h2 {
			padding: 2px;
			flex: 1;
			cursor: pointer;
			text-align: center;
			font-weight: bold; /* Membuat teks menjadi bold */
			font-size: 18px; /* Sesuaikan ukuran font agar proporsional dengan kontainer 400px */
			color: #555;
			border-bottom: 2px solid transparent;
			margin: 0;
		}

		.tabs h2.active {
			color: #2a3dfc;
			border-bottom: 2px solid #2a3dfc; /* Garis bawah sebagai penanda tab aktif */
		}
		
		.tab {
            display: none; /* Sembunyikan semua tab secara default */
			font-family: Poppins, sans-serif;
        }

        .tab.active {
            display: block; /* Tampilkan tab yang aktif */
			font-family: Poppins, sans-serif;
        }
		
		.form-grid {
			display: grid;
			grid-template-columns: 1fr 1fr; /* Dua kolom dengan lebar sama */
			gap: 20px; /* Jarak antar kolom */
			max-width: 600px; /* Batasi lebar maksimum kontainer */
			margin: 0 auto; /* Pusatkan form di halaman */
		}

		.form-group {
			display: flex;
			flex-direction: column;
		}
		
		.form-group input[type="date"] {
			background-color: #f9f9f9;
			border: 1px solid #ddd;
			padding: 8px;
			font-size: 16px;
			border-radius: 5px;
			transition: border-color 0.3s, box-shadow 0.3s;
			width: 100%;
		}

		button[type="submit"] {
			grid-column: span 2; /* Buat tombol submit memenuhi lebar kontainer */
			padding: 10px;
			font-size: 16px;
			cursor: pointer;
		}

		@media (max-width: 600px) {
			.form-grid {
				grid-template-columns: 1fr; /* Ubah menjadi satu kolom pada layar kecil */
			}
		}
	
        body {
/*
			background-image: url('../img/bg.png');
			background-position: top right;
			background-repeat: no-repeat;
			background-attachment: fixed;
*/
            font-family: Poppins, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
			overflow: hidden;
        }

		.container {
			position: absolute;
			left: 150px; /* Geser 50px dari kiri */
			background: linear-gradient(135deg, #ffffff, #f8f9fa);
			padding: 20px;
			border-radius: 12px;
			box-shadow: 7px 12px 20px rgba(0, 0, 0, 0.15);
			width: 100%;
			height: 500px;
			max-width: 550px;
			overflow-y: auto;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #45a049;
        }
		
		.downloadButton {
			display: inline-flex; /* Pastikan tombol hanya selebar kontennya */
			align-items: center;
			gap: 8px; /* Jarak antara logo dan teks */
			padding: 10px 20px;
			font-size: 16px;
			font-weight: bold;
			color: white;
			background-color: #007BFF;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			white-space: nowrap; /* Hindari teks turun ke baris baru */
			width: auto; /* Pastikan tombol hanya selebar konten */
		}

		.downloadButton .drive-logo, .mega-logo, .mf-logo {
			width: 20px; /* Atur ukuran logo */
			height: 20px;
		}

		.downloadButton:hover {
			background-color: #0056b3;
			box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
			transform: translateY(-2px);
		}

		.downloadButton:active {
			background-color: #003d80;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			transform: translateY(1px);
		}

        .error {
            color: red;
            margin-bottom: 10px;
        }
        .success {
            color: green;
            margin-bottom: 10px;
        }
        .captcha {
            background-color: #f8f9fa;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }
		
		.selector {
			display: flex;
			gap: 10px;
		}

		.selector input[type="radio"] {
			display: none; /* Sembunyikan tombol radio asli */
		}

		.selector label {
			padding: 10px 20px;
			cursor: pointer;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #f0f0f0;
			text-align: center;
		}

		.selector input[type="radio"]:checked + label {
			background-color: #2a3dfc; /* Warna latar belakang saat dipilih */
			color: #fff;
			border-color: #2a3dfc;
		}

		.button-container {
			text-align: center;
		}
		
		
		/* Milestone CSS */
		.progress-container {
			position: relative;
			width: 100%;
			height: 20px;
			background-color: #ddd;
			border-radius: 10px;
			overflow: hidden;
			margin: 20px 0;
		}

		.progress-bar {
			height: 100%;
			width: <?php echo $progress_percentage; ?>%;
			background-color: #4caf50; /* Warna hijau untuk progress */
			transition: width 0.4s ease;
		}

		.milestone-dot {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #aaa; /* Warna abu-abu untuk milestone yang belum tercapai */
		}

		.milestone-dot.completed {
			background-color: #4caf50; /* Warna hijau untuk milestone yang tercapai */
		}

		.milestone-labels {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			margin-top: 10px;
		}
		
		.info-card {
			margin-top: 20px;
			padding: 15px;
			border-radius: 10px;
			background-color: #f9f9f9;
			border: 1px solid #ddd;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			text-align: center;
			font-size: 16px;
			color: #333;
		}

		.info-card .highlight {
			font-weight: bold;
			color: #4caf50;
		}
		
		.info-item {
			flex: 1;
			text-align: center;
		}
		
		/* Scrollbar pada seluruh halaman */
		::-webkit-scrollbar {
			width: 2px; /* Lebar scrollbar vertikal */
			height: 2px; /* Tinggi scrollbar horizontal */
		}

		/* Track (latar belakang scrollbar) */
		::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 0px;
		}

		/* Thumb (bagian yang bisa digeser, berbentuk titik bulat) */
		::-webkit-scrollbar-thumb {
			background: #888;
			border-radius: 10%; /* Bentuk bulat sempurna */
			width: 5px;
			height: 5px;
			margin: 5px; /* Memberikan sedikit jarak dari track */
			box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); /* Memberikan efek lingkaran kecil */
		}

		/* Hover effect pada thumb */
		::-webkit-scrollbar-thumb:hover {
			background: #555;
			box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3); /* Efek lingkaran lebih besar saat dihover */
		}