﻿/* Container utama ASP.NET CheckBox */
.sliding-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    /*margin-right: 15px;*/
}

    /* Sembunyikan input checkbox asli */
    .sliding-switch input[type="checkbox"] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    /* Teks Label ASP.NET (Sekarang teks murni di luar oval) */
    .sliding-switch label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 13px;
        font-weight: normal;
        color: #555555;
    }

        /* KUNCI UTAMA: Membuat Oval Baru di SEBELAH KIRI Teks */
        .sliding-switch label::before {
            content: "";
            display: inline-block;
            width: 32px;
            height: 17px;
            background-color: #ccc;
            border-radius: 15px;
            margin-right: 5px; /* Jarak pasti antara luar oval dan teks */
            transition: background-color 0.3s ease;
        }

        /* KUNCI KEDUA: Membuat Tombol Bulat di dalam Oval */
        .sliding-switch label::after {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: white;
            top: 3px;
            left: 3px;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

    /* Efek Warna Oval saat Checked */
    .sliding-switch input[type="checkbox"]:checked + label::before {
        /*background-color: #4BD964;*/ /* Berubah hijau */
        background-color: #0088B4;
    }

    /* Efek Geser Tombol Bulat saat Checked */
    .sliding-switch input[type="checkbox"]:checked + label::after {
        transform: translateX(14px);
    }
    /* --- EFEK SAAT DISABLED --- */

    /* 1. Mengubah cursor pada container utama dan label */
    .sliding-switch input[type="checkbox"]:disabled,
    .sliding-switch input[type="checkbox"]:disabled + label {
        cursor: not-allowed;
    }

        /* 2. Menurunkan opacity oval dan tombol bulat, serta mengubah warna background agar terlihat tidak aktif */
        .sliding-switch input[type="checkbox"]:disabled + label::before,
        .sliding-switch input[type="checkbox"]:disabled + label::after {
            opacity: 0.5; /* Sesuai permintaan Anda (80%) */
            cursor: not-allowed;
        }

        /* Opsional: Membuat warna latar belakang oval lebih redup/abu-abu khas elemen disabled */
        .sliding-switch input[type="checkbox"]:disabled + label::before {
            /*background-color: #e6e6e6 !important;*/
        }

/* Kotak utama dropdown */
.chosen-title + .chosen-container-single .chosen-single {
    background: #FFB822 !important;
    color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #FFB822 !important;
}

/* List pilihan saat diklik */
.chosen-title + .chosen-container .chosen-drop {
    background: #34495e !important;
}

/* Teks di dalam list */
.chosen-title + .chosen-container .chosen-results {
    color: #ffffff !important;
}

    /* Warna saat pilihan disorot (hover) */
    .chosen-title + .chosen-container .chosen-results li.highlighted {
        background-color: #1abc9c !important;
        background-image: none !important;
    }


