/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set background color and font for the entire page */
body {
    background-color: #f5f5f5;
    font-family: Arial;

}

/* Logo container styles */
.logo-container {
    text-align: left;
    padding: 20px;
    align-items: left; 
}

/* Logo styles */
.logo {
	text-align: right;
    width: 100px; /* Sesuaikan dengan lebar yang diinginkan */
    height: auto; /* Biarkan tinggi menyesuaikan agar aspek rasio tetap terjaga */
    align-items: left; 
}

/* Header styles */
h1 {
	text-align: center;
    font-size: 32px; /* Ukuran judul sesuai preferensi Anda */
    margin-bottom: 20px;
    background-color: #87ceeb; /* Warna biru */
    color: #fff; /* Warna teks putih untuk kontras yang baik */
    padding: 10px 20px; /* Atur padding agar latar belakang lebih terlihat */
    border-radius: 5px; /* Tambahkan sudut melengkung pada latar belakang */

}

h2 {
    font-size: 10px;
    margin-top: 5px;
}

h3 {
	text-align: center;
    font-size: 18px;
    margin-top: 10px;
}

h4 {
	text-align: left;
    font-size: 18px;
    margin-top: 10px;
}

/* Form styles */
form {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-top: 10px;
    font-weight: normal;
}

select, input[type="radio"], textarea {
    margin-top: 5px;
}

/* Radio button container styles */
.radio-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center; /* Tengahkan secara horizontal */
    align-items: center; /* Tengahkan secara vertikal */	
}

/* styles radio button horizontal.css */
.radio-container-nps {
    display: flex;
    gap: 20px; /* Jarak antara radio button */
}


.radio-label input[type="radio"]:checked + img {
    border: 2px solid blue; /* Ganti warna sesuai preferensi Anda */
    border-radius: 10px; /* Atur sudut melengkung untuk efek yang lebih baik */
    padding: 5px; /* Sesuaikan padding untuk efek yang diinginkan */
	gap: 5px;
}

.radio-image {
    width: 40px;
    height: 40px;
    margin-left: 5px;
	margin-right: 5px; /* Atur jarak antara gambar dan label */
	gap: 20px;
}

/* Gaya untuk radio button yang disembunyikan */
.radio-input {
    display: none;
	gap: 20px;
}

/* Gaya untuk label radio yang terlihat seperti gambar */
.radio-label {
	display: inline-flex;
    align-items: center;
    margin-top: 10px;
	position: relative;
	font-size: 10px; /* Ubah ukuran huruf sesuai keinginan Anda */
	font-weight: normal;
	cursor: pointer; /* Tambahkan kursor pointer untuk tampilan interaktif */
    /*display: inline-block;*/
    width: 50px; /* Sesuaikan ukuran dengan ukuran gambar Anda */
    height: 30px; /* Sesuaikan ukuran dengan ukuran gambar Anda */
    background: url('assets/puas_blue.png') no-repeat;
    margin-right: 40px; /* Sesuaikan jarak antara label radio */
	gap: 5px;
}



/* Gaya untuk label radio yang terlihat seperti gambar yang aktif */
.radio-input:checked + .radio-label::before {
	content: "";
	width: 100%;
	height: 100%;
    background: url('assets/puas_blue.png') no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}

.image-container {
    display: flex;
    justify-content: center; /* Memusatkan secara horizontal */
    align-items: center; /* Memusatkan secara vertikal */
    height: 80px; /* Atur tinggi kontainer */
    background-color: #fffff; /* Hanya untuk kejelasan tampilan */
	gap: 10px; /* Jarak antara gambar-gambar */
}

.image-container img {
    width: 40px; /* Atur ukuran gambar */
    height: 40px; /* Atur ukuran gambar */
    margin: 0 200px;  /* Menambahkan margin antara kedua gambar */
}

/*.image-image {
    width: 40px;
    height: 40px;
    margin-left: 5px;
	margin-right: 5px; /* Atur jarak antara gambar dan label */
/*	gap: 20px;
}
*/
.image-image {
    width: 40px;
    height: 40px; /* Pastikan untuk menambahkan 'px' di sini */
    margin-left: 5px;
    margin-right: 5px;
    gap: 20px;
}


.choice-image {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

/* Gaya untuk gambar pilihan aktif */
.choice-image.active {
    border: 2px solid blue; /* Ganti warna sesuai preferensi Anda */
    border-radius: 5px; /* Atur sudut melengkung untuk efek yang lebih baik */
    padding: 5px; /* Sesuaikan padding untuk efek yang diinginkan */
}

/* Submit button styles */
input[type="submit"] {
    background-color: #87ceeb;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: normal;
    margin-top: 20px;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Textarea styles */
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

.pagination {
    text-align: left; /* Mengatur teks pagination ke kiri */
}

.pagination a {
    display: inline-block;
    margin-right: 10px; /* Mengatur jarak antara tombol halaman */
    text-decoration: none;
    padding: 5px 10px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    color: #333;
}

.current-page {
    background-color: #333;
    color: #fff;
 }


/* Responsive breakpoints */
@media screen and (max-width: 768px) {
    form {
        width: 90%; /* Mengurangi lebar form pada layar sempit */
    }

    .radio-container-nps {
        flex-direction: column; /* Mengubah tampilan radio button menjadi tumpukan pada layar sempit */
		
    }
	
    .image-container {
        flex-direction: column; /* Tata letak vertikal saat layar lebih kecil */
        justify-content: space-between; /* Agar gambar terletak di atas dan bawah */
        height: auto; /* Atur ulang tinggi untuk menyesuaikan konten */
        padding: 5px; /* Padding untuk menjaga jarak dari tepi */
    }
	



}