/* The container */
.ob__container-radio {
    font-family: 'Ubuntu';
    font-weight: 400;
    display: flex;
    position: relative;
    padding-left: 0px;
    margin-bottom: 12px;
    cursor: pointer;
    gap: 6px;
    font-size: 16px;
    flex-direction: row-reverse;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    justify-content: left;
}

    /* Hide the browser's default radio button */
    .ob__container-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom radio button */
    .ob__container-radio .checkmark {
        /* position: absolute; */
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: transparent;
        border-radius: 50%;
        border: 2px solid #D1D4D7;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* On mouse-over, add a grey background color */
    .ob__container-radio:hover input ~ .checkmark {
        background-color: transparent;
        border: 2px solid #ADB0B2;
    }

    /* When the radio button is checked, add a blue background */
    .ob__container-radio input:checked ~ .checkmark, .ob__container-radio input:checked {
        border: 2px solid #008F91;
        background-color: #008F91;
        /* color:red; */
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .ob__container-radio .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .ob__container-radio input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .ob__container-radio .checkmark:after {
        /* top: 9px; */
        /* left: 9px; */
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

    .ob__container-radio span.checkmark:hover {
        border: 2px solid #ADB0B2;
        background: transparent;
    }

    .ob__container-radio:hover input:checked ~ .checkmark, .ob__container-radio:hover input:checked {
        border: 2px solid #004645;
        background: #004645;
    }

label.ob__container-radio input[type="radio"]:disabled ~ .checkmark, label.ob__container-radio input[type="checkbox"]:disabled ~ .checkmark {
    border-color: #D1D4D7;
    opacity: 0.4;
    cursor: auto;
}

label.ob__container-radio.invalid .checkmark {
    border-color: red;
}

.ob__container-radio.invalid input:checked ~ .checkmark, .ob__container-radio.invalid input:checked {
    border-color: #008F91;
}