@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/google-sans');

* {
    /*font-family: 'Poppins', sans-serif;*/
    font-family: 'Product Sans', sans-serif;
}
/* S:INDEX */

body {
    background-color:#f1f4f9 !important;
}

.boxlogin {
    background-color:white;
}

.loginformtext {
    background-color:#00a0e4;
    font-weight:500;
    letter-spacing:0.2rem;
}

.text-content-cms {
    color: #00a0e4;
    font-size:1.4rem;
}

.logohome {
    box-shadow:none !important;
    margin-left:0px !important;
    padding:5px 5px;
}

/*
.headerbawah {
    background-color:#00a0e4;
    height:5px;
    width:100%;
}

.headeratas {
    background-color:#004c6c;
    height:40px;
    width:100%;
}
*/

.submitbuttonhome {
    background-color:#00a0e4;
    padding:10px 30px;
    border:0px;
    border-radius:5px;
    font-size:0.8rem;
    color:#FFF;
}

.submitbuttonhome:hover {
    background-color:#0488b5;
}

.footer-home-text {
    font-size:0.8rem;
}

/* Custom CSS untuk Toggle Switch Status Pengguna */

/* Gaya untuk kondisi TIDAK AKTIF (unchecked) - Warna Merah */
.custom-control.custom-switch .custom-control-input ~ .custom-control-label::before {
  background-color: #dc3545 !important; /* Warna merah Bootstrap (danger) */
  border-color: #dc3545 !important;
  /* Transisi untuk perubahan warna yang lebih halus (opsional) */
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Gaya untuk kondisi AKTIF (checked) - Warna Hijau */
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28a745 !important; /* Warna hijau Bootstrap (success) */
  border-color: #28a745 !important;
}

/* Opsional: Jika Anda ingin warna 'thumb' (bulatan kecil di switch) juga berubah.
   Biasanya thumb tetap berwarna putih, tapi Anda bisa menyesuaikannya jika mau.
*/
/*
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #ffffff; // Warna thumb saat aktif (misalnya tetap putih)
}

.custom-control.custom-switch .custom-control-input ~ .custom-control-label::after {
  background-color: #ffffff; // Warna thumb saat tidak aktif (misalnya tetap putih)
}
*/

/* Mengatur tinggi MINIMUM untuk semua CKEditor di halaman */
.ck-editor__editable_inline {
    min-height: 250px; /* Atur tinggi minimum yang Anda inginkan, misalnya 250px */
}

/* Ini adalah container atau 'lintasan' dari progress bar */
.custom-progress-container {
    width: 100%;
    height: 20px; /* Buat sedikit lebih tebal agar teks terlihat */
    background-color: #e9ecef; /* Warna abu-abu terang untuk latar belakang */
    border-radius: 0.25rem;
    overflow: hidden; /* Penting agar bar tidak keluar dari container */
}

/* Ini adalah bar yang bergerak di dalam container */
.custom-progress-bar {
    width: 0%; /* Mulai dari 0% */
    height: 100%;
    background-color: #17a2b8; /* Warna awal (biru info) */
    
    /* Efek transisi agar pergerakan lebar & warna terlihat mulus */
    transition: width 0.4s ease, background-color 0.4s ease;

    /* Gunakan flexbox untuk menengahkan teks persentase */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style untuk teks persentase (misal: "50%") */
.custom-progress-text {
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}