:root {
    --radio-button-container-border-color: var(--blue-5);
    --radio-border-color: var(--blue-3);
    --radio-bg-color-active: var(--blue-1);
}
.id-method-container-offset {
    margin-left: -.5rem;
    margin-right: -.5rem;
    /* border: 3px dashed transparent; */
    /* border-radius: 8px; */
    /* transition: border-color 100ms ease-in; */
}
.id-method-container-offset:focus-within {
    border-color: var(--radio-button-container-border-color);
}
.id-method-container-offset > .id-method-container {
    margin-left: calc(.5rem - 3px);
    margin-right: calc(.5rem - 3px);
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.id-method-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.id-method-container > * + * {
    margin-top: 1rem;
}
.id-method-container .id-method-radio {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    padding: 0.8125rem 1rem;
    border-radius: 8px;
}
.id-method-container .id-method-radio.xs {
    font-size: 12px;
}
.id-method-container .id-method-radio :nth-child(2) {
    flex-grow: 1;
}
.id-method-container .id-method-radio.active {
    background-color: #F2F8FB;
    background-color: var(--radio-bg-color-active);
    position: relative;
    z-index: 1;
}
.id-method-container .id-method-radio.focused::after{
    content: "";
    position: absolute;
    z-index: -1;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border: 2px solid var(--yellow-1);
    border-radius: 10px;
}
.id-method-container .id-method-radio > * + * {
    margin-left: .5rem;
}
@media(min-width: 576px) {
    .id-method-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .id-method-container > * {
        margin-top: 0;
    }
    .id-method-container > :not(:nth-child(1)):not(:nth-child(2)) {
        margin-top: 1rem;
    }
    .id-method-container > * + *:nth-child(2n) {
        margin-left: 1rem;
    }
    .id-method-container .id-method-radio {
        width: calc(50% - .5rem);
    }
}

.id-method-container .id-method-radio {
    border: 1px solid #BFDDEA; /* Fallback */
    border: 1px solid var(--radio-border-color);
}
.id-method-container .id-method-radio:hover {
    transition: none;
    background-color: #F2F8FB;
}
.id-method-container .id-method-radio input {
    /* display: none; */
    opacity: 0;
}
.id-method-container .id-method-radio .radio-icon *,
.id-method-container .id-method-radio .radio-icon {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.id-method-container .id-method-radio .radio-icon {
    width: 20px;
    border: solid 2px #BFDDEA;
    height: 20px;
    position: relative;
    border-radius: 50%;
}
.id-method-container .id-method-radio .radio-icon::after {
    width: 8px;
    height: 8px;
    content: '';
    border-radius: 50%;
    background-color: #0077AD;
    position: absolute;
    z-index: 1;
    top: calc(50% - (8px / 2));      /* px value depends on height */
    left: calc(50% - (8px / 2));     /* px value depends on width */
    display: none;
}
.id-method-container .id-method-radio .radio-icon:hover::after,
.id-method-container .id-method-radio input:checked + .radio-icon::after {
    display: block;
}
.id-method-container .id-method-radio .radio-icon:hover,
.id-method-container .id-method-radio input:checked + .radio-icon {
    border-color: #0077AD;
}
.id-method-container .id-method-radio input:checked + .radio-icon::after {
    display: block;
}

.id-method-container .id-method-radio > div {
    font-weight: 700;
    color: #003765;
    font-size: 18px;
    line-height: 28px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: left
}