/* Register css */
    |

    /* Style dasar */
    body {
        font-family: Arial, sans-serif;
        background-color: #ffffff;
        color: #ffffff;
        margin: 0;
        padding: 20px;
        text-align: center;
    }

    .panel-heading {
        background-color: #0049d1;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 15px;
    }

    .panel-heading h3 {
        color: #ffffff;
        font-weight: bold;
        margin: 0;
    }

    /* Form styling */
    form {
        padding: 20px;
        border-radius: 5px;
    }

    .form-group {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .control-label {
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 0;
    }

    .form-control {
        border-radius: 4px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ddd;
        width: 100%;
        transition: border 0.3s ease;
    }

    .form-control:focus {
        border-color: #f7941d;
        outline: none;
        box-shadow: 0 0 8px rgba(247, 148, 29, 0.2);
    }

    .input-group-addon {
        padding: 10px; /* Sesuaikan padding agar proporsional */
        font-size: 18px; /* Perbesar ukuran font */
        cursor: pointer; /* Untuk memastikan span dapat diklik */
        line-height: 1;
    }

/* Jika elemen spesifik */
    .span_sh_password {
        padding: 10px; /* Sesuaikan ukuran padding */
        display: flex; /* Agar elemen di dalamnya dapat sejajar vertikal */
        align-items: center; /* Sejajarkan ikon di tengah */
        justify-content: center; /* Posisikan ikon di tengah */
        font-size: 18px; /* Sesuaikan ukuran ikon */
        background-color: #585858;
    }

    .input-group-addon i {
        font-size: 18px;
    }

    .select {
        background-color: #fff;
    }

    textarea:focus,
    select:focus {
        border-color: #f0f71d;
    }

    /* .uppercase {
        text-transform: uppercase;
    } */

    /* Button */
    button.proses {
        position: relative; /* Agar top dan left bisa diterapkan */
        left: 45%; /* Posisi default horizontal untuk desktop */
        background-color: #FFE401;
        color: black;
        padding: 12px 20px;
        border: none;
        font-size: 18px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        box-shadow:
            0px 4px 4px 0px rgba(0, 0, 0, 0.25),
            inset 0px -8px 8px 0px rgba(252, 192, 0, 255),
            inset 0px 8px 8px 0px rgba(252, 192, 0, 255);
    }

    button.proses span {
        display: inline-block;
        transition: transform 0.3s;
    }

    button.proses:hover span {
        transform: translateY(-2px);
    }

    /* Validasi dan pesan error */
    span[id$="_invalid"] {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    /* Teks informasi */
    .secret_answer_ipt span {
        font-size: 12px;
        color: #888;
        display: block;
        margin-top: 5px;
    }

    /* Responsif */


    .slick-eye, .slick-eye-slash {
        font-size: 1.2em; /* Ukuran ikon default */
        cursor: pointer;
        vertical-align: middle; /* Sejajarkan ikon dengan teks/input */
    }
    
    /* Ikon Mata (Eye) */
    .slick-eye:before {
        content: '👁'; /* Gunakan simbol Unicode atau ikon font */
        font-size: 25px; /* Sesuaikan ukuran */
        color: rgb(0, 15, 221); /* Warna ikon */
        display: inline-block;
    }
    
    /* Ikon Mata Tertutup (Eye Slash) */
    .slick-eye-slash:before {
        content: '🚫'; /* Simbol Unicode atau font ikon */
        font-size: 18px; /* Konsistensi ukuran */
        color: red; /* Warna ikon, dapat disesuaikan */
        display: inline-block;
    }
    
    .ri-refresh-line:before {
        font-family: 'RemixIcon'; /* Pastikan ini adalah font yang Anda gunakan */
        font-size: 35px; /* Ukuran font */
        color: #e4c201; /* Warna ikon */
        display: inline-block; /* Tampilan inline block */
        line-height: 1; /* Line height */
        font-weight: bold; /* Ketebalan font */
    }

    .slick-search:before {
        content: '🔍'; /* Simbol Unicode untuk ikon pencarian */
        font-size: 20px; /* Ukuran ikon */
        color: #555; /* Warna ikon pencarian */
        display: inline-block;
        vertical-align: middle; /* Menyelaraskan ikon dengan teks */
    }
    

    .form-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 65vh;
    }
    
    /* Form styling tetap */
    .sgn_frm {
        width: 100%;
        max-width: 700px;
        
    }

    .peach {
        font-size: 30px;
    }

    .input-lg { 
        font-size: 12px !important;
    }

    select.input-lg {
        padding: 0px 12px;
    }

    .form-horizontal .control-label {
        text-align: left !important;
    }

    #agree_status {
        border: 2px solid #ffd900;
        padding: 5px;
        margin-right: 10px;
    }

    label[for="agree_status"] {
        border: 2px dashed #ffd900;
        padding: 5px;
        display: inline-block;
    }

    .captcha-container {
        display: flex; /* Membuat elemen di dalamnya sejajar secara horizontal */
        position: relative; /* Agar left dan top bekerja dengan baik */
        left: 352px; /* Memindahkan kontainer ke kanan sebesar 55px */
        top: -62px; /* Tambahkan posisi vertikal sesuai kebutuhan */
        max-width: 20%;
    }
    
    .captcha-container img {
        position: absolute;
        top: 47%; /* Posisikan di tengah vertikal */
        left: -148px; /* Atur jarak kiri sesuai kebutuhan */
        transform: translateY(-50%); /* Sejajarkan vertikal tepat di tengah */
        height: auto;
        max-height: 50px;
        cursor: pointer;
    }
    
    .captcha-container i {
        font-size: 20px; /* Ukuran ikon */
        cursor: pointer;
        top: 50%; /* Posisikan di tengah vertikal */
        left: 10px; /* Atur jarak kiri sesuai kebutuhan */
    }

    div.agree-container {
        position: relative; /* Agar top dan left dapat bekerja */
        top: -37px; /* Default posisi vertikal */
        left: 1px; /* Default posisi horizontal */
        display: flex; /* Tetap menjaga flexbox layout */
        align-items: center; /* Sejajarkan secara vertikal */
    }

    @media (max-width: 768px) and (min-width: 50px) {

        .form-group {
            display: block;
        }

        .control-label {
            margin-bottom: 5px;
        }

        button.proses {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
            left: 0%;
        }        
    
        .form-group > div {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    
        .captcha-container {
            left: 147px; /* Pindahkan container ke kanan pada layar kecil */
            top: -25px;  /* Tambahkan jarak vertikal pada layar kecil */
            max-width: 10%;
        }
    
        .captcha-container img#captcha_image {
            width: 145px; /* Sesuaikan ukuran gambar pada layar kecil */
            height: auto;
            margin-right: 10px;
        }
    
        .captcha-container .slick-refresh {
            font-size: 20px; /* Sesuaikan ukuran ikon refresh */
        }

        .captcha-input {
            position: relative; /* Tetap relative agar top dan left bekerja */
            left: -1px; /* Jarak kiri pada layar kecil */
            top: -23px; /* Jarak atas pada layar kecil */
            width: 100%; /* Input memanfaatkan lebar penuh pada layar kecil */
        }

        .form-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 85vh;
            padding: 11px 0px 0 0 !important;

        }
    }