.mfa-mgmt-section {
    margin: 0px 55px;
}

.phone-card, .device-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--Color-Surface-Container-Blue, #E9EFF3);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 400px;
    max-width: 400px;
    flex: 0 0 auto;
    color: var(--color-text-icons-on-neutral-default, #1F1F20);
    font-family: var(--Font-Family-Roboto, Roboto);
    font-size: var(--Font-Body-Size, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Font-Body-LineHeight, 24px); /* 150% */
}

.phone-card-left, .device-card-left {
    display: flex;
    flex-direction: column;
}

.phone-card-left span{
    margin-top:10px;
    margin-bottom:10px;
}

.phone-card-right, .device-card-right {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.phone-number-text {
    font-weight: 600;
    font-size: 15px;
}

.badge-default {
    font-weight: 500;
    line-height: var(--Font-Body-LineHeight, 24px); /* 150% */
    padding: 12px;
}

.link-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 12px;
    text-decoration: none;
    color: var(--color-text-icons-on-neutral-primary-default, #235D89);
    font-size: var(--Font-Button-Label-Size, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Font-Button-Label-LineHeight, 16px); /* 114.286% */
}

    .link-btn:hover {
        color: #1a3e54;
        text-decoration: underline;
    }

.cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.add-phone-card {
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 16px 20px;
    min-width: 260px;
    max-width: 340px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .add-phone-card:hover {
    }

    .add-phone-card a {
        color: #2c5f7c;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
    }

        .add-phone-card a:hover {
            text-decoration: underline;
        }

.device-heading {
    color: var(--color-text-icons-on-neutral-default, #1F1F20);
    font-weight: 700;
    line-height: var(--Font-Body-LineHeight, 24px); /* 150% */
}

.device-detail {
    color: var(--color-text-icons-on-neutral-default, #1F1F20);
    /* Body-sm/Body-sm (R) */
    font-family: var(--Font-Family-Roboto, Roboto);
    font-size: var(--Font-Body-sm-Size, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-sm-LineHeight, 16px);
    padding: 4px 0px;
}

.section-heading {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.ocsoverlay .modal-header {
    border-bottom: none;
}

.ocsoverlay .modal-footer {
    border-top: none;
    padding-bottom: 40px;
}

/* ===== Overlay enrol modal styles ===== */
#enrolPhoneModal .modal-dialog {
    max-width: 800px;
}

#enrolPhoneModal .modal-body {
    padding: 0px 40px;
}

#enrolPhoneModal .ocslogo {
    margin-left: -10px;
    margin-bottom: 24px;
}

#enrolPhoneModal .mfa-header {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: 16px;
}

#enrolPhoneModal .header-middle {
    margin-bottom: 20px;
}

#enrolPhoneModal .form-row.stackonmobile {
    display: flex;
    gap: 16px;
}

#enrolPhoneModal .radio-group {
    margin-bottom: 12px;
}

    #enrolPhoneModal .radio-group label.radio {
/*        display: block;*/
      /*  margin-bottom: 8px;*/
    }

#enrolPhoneModal .note {
    font-size: 13px;
    color: var(--color-text-icons-on-neutral-default, #1F1F20);
    margin-bottom: 16px;
}

#enrolPhoneModal .step2middle .form-group label {
    display: block;
}

/*#enrolPhoneModal .timer-warning {
    color: #dc3545;
}*/

@media (max-width: 767px) {
    #enrolPhoneModal .modal-body {
        padding: 0px 25px;
    }
    .mfa-mgmt-section {
        margin: 0px 20px;
    }

    .cards-row {
        flex-direction: column;
    }


    .phone-card, .device-card, .add-phone-card {
        max-width: 100%;
        min-width: 100%;
    }

    .phone-card-right, .device-card-right {
        flex-direction: column;
    }

    .link-btn {
        padding: 0px;
    }

    #enrolPhoneModal .form-row.stackonmobile {
        flex-direction: column;
    }
    .add-phone-card {
        padding: 16px 2px;
    }
}