/* asp:CheckBox */
span.custom-checkbox {
    display: flex;
    padding: 0;
    margin: 0;
}

    span.custom-checkbox li {
        margin-bottom: 10px;
    }

    span.custom-checkbox input[type="checkbox"] {
        /* Hide the default checkbox */
        opacity: 0;
        position: absolute;
        cursor: pointer;
    }

    span.custom-checkbox label {
        position: relative;
        padding-left: 30px; /* Space for custom checkbox */
        cursor: pointer;
        display: inline-block;
        color: #333;
    }

        span.custom-checkbox label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            background-color: #fff;
            border-radius: 4px;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

    span.custom-checkbox input[type="checkbox"]:checked + label::before {
        background-color: #007bff; /* Color when checked */
        border-color: #007bff;
    }

    span.custom-checkbox label::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 13px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        display: none; /* Hide the checkmark by default */
    }

    span.custom-checkbox input[type="checkbox"]:checked + label::after {
        display: block; /* Show the checkmark when checked */
    }


/* asp:CheckBoxList */
.modern-checkbox-list {
    list-style: none; /* Removes default bullet points */
    padding: 0;
    margin: 0;
}

    .modern-checkbox-list li {
        margin-bottom: 10px;
    }

    .modern-checkbox-list input[type="checkbox"] {
        /* Hide the default checkbox */
        opacity: 0;
        position: absolute;
        cursor: pointer;
    }

    .modern-checkbox-list label {
        position: relative;
        padding-left: 30px; /* Space for custom checkbox */
        cursor: pointer;
        display: inline-block;
        color: #333;
    }

        .modern-checkbox-list label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            background-color: #fff;
            border-radius: 4px;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

    .modern-checkbox-list input[type="checkbox"]:checked + label::before {
        background-color: #007bff; /* Color when checked */
        border-color: #007bff;
    }

    .modern-checkbox-list label::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 13px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        display: none; /* Hide the checkmark by default */
    }

    .modern-checkbox-list input[type="checkbox"]:checked + label::after {
        display: block; /* Show the checkmark when checked */
    }