/* ============================================================
   CheckBoxList
   ============================================================ */

.myCheckBoxList {
    display: flex;
    gap: 8px;
}

    .myCheckBoxList.is-vertical {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .myCheckBoxList.is-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 14px;
        row-gap: 6px;
    }

    .myCheckBoxList .cbl-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 22px;
        cursor: pointer;
    }

    .myCheckBoxList .cbl-label {
        line-height: 22px;
        cursor: pointer;
        user-select: none;
    }

    .myCheckBoxList input[type="checkbox"] {
        cursor: pointer;
    }

    .myCheckBoxList.is-readonly .cbl-item,
    .myCheckBoxList.is-readonly .cbl-label,
    .myCheckBoxList.is-readonly input[type="checkbox"] {
        cursor: default;
    }

/* ============================================================
   RadioButtonList
   ============================================================ */

.myRadioButtonList {
    display: flex;
    gap: 8px;
}

    .myRadioButtonList.is-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .myRadioButtonList.is-vertical {
        flex-direction: column;
        align-items: flex-start;
    }

    .myRadioButtonList .rbl-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .myRadioButtonList .rbl-item.is-selected i,
        .myRadioButtonList .rbl-item.is-selected span {
            color: inherit;
        }

    .myRadioButtonList.is-readonly .rbl-item {
        cursor: default;
    }

        .myRadioButtonList.is-readonly .rbl-item:hover {
            filter: none;
        }

    /* Neutralisation hover en lecture */
    .myRadioButtonList.is-readonly .btn-primary:hover {
        background-color: rgb(15, 108, 189);
        border-color: rgb(15, 108, 189);
        color: #ffffff;
    }

    .myRadioButtonList.is-readonly .btn-secondary:hover {
        background-color: #ffffff;
        border-color: #c8c6c4;
        color: #323130;
    }