﻿.MFA-card-container {
    margin-top: 2em;
    max-width: 90%;
    min-width: 290px;
}

.MFA-card {
    display: grid;
    padding: 1em 1em;
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    grid-template-columns: auto 4fr auto;
    margin-bottom: 1rem;
    /*Make text not selectable*/
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

    .MFA-card:hover {
        background-color: #def4ff;
        transition: 0.5s;
        cursor: pointer;
        color: #2f5b88;
        border: 1px solid #2f5b88;
    }

        .MFA-card:hover .MFA-icon,
        .MFA-card:hover .MFA-card-content h4 {
            color: #2f5b88;
        }

.MFA-icon {
    color: #4a5560;
    margin: auto;
    width: 48px;
    height: 14px;
    padding: 0px 16px;
}

.MFA-card-content h4 {
    text-align: left !important;
    color: #333d46;
    margin-bottom: 2px;
    margin-top: 1rem;
    font-size: 12px;
}

.MFA-card-content p {
    margin-bottom: 1rem !important;
    font-size: 12px;
}

.MFA-btn-back-img {
    height: 10px;
    margin-top: 6px;
}

.MFA-btn-back {
    display: flex;
    margin: 0px;
    margin-left: 4px;
    font-size: 10pt;
}

    .MFA-btn-back:hover {
        cursor: pointer;
        color: #000099;
    }

.MFA-card-description {
    font-size: 14px;
}

.MFA-card-title {
    font-size: 24px !important;
    margin: 0%;
}

.MFA-method-button {
    color: #333d46;
    background-color: transparent;
}

    .MFA-method-button:hover {
        color: #333d46;
        background-color: transparent;
    }

.text-align-left {
    text-align: left;
}

@media screen and (max-width: 767px) {
    .MFA-card-container {
        width: 100%;
    }
}

.send-new-code {
    color: #2f5b88;
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 2rem;
}

.MFA-button-primary {
    margin: 1px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1rem 2rem 1.0625rem;
    font-size: 1rem;
    background-color: #008cba;
    border-color: #007095;
    color: #fff;
    transition: background-color 300ms ease-out;
    /*border-radius: 8px;
    border: 1px solid #d4d4d4;
    padding: 4px;
    margin-left: 12px;
    display: flex;
    justify-content: center;*/ /* Centrar horizontalmente */
    /*align-items: center;*/ /* Centrar verticalmente */
    /*text-align: center;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;*/
}

    .MFA-button-primary:hover {
        /* background-color: #def4ff;
        transition: 0.5s;
        cursor: pointer;
        color: #2f5b88;
        border: 1px solid #2f5b88;*/
        background-color: #007095;
    }

.MFA-button-primary-disabled {
    /*display: grid;
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    padding: 4px;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;*/
    margin: 1px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1rem 2rem 1.0625rem;
    font-size: 1rem;
    transition: background-color 300ms ease-out;
    background-color: #008cba;
    border-color: #007095;
    color: #fff;
    box-shadow: none;
    cursor: default;
    opacity: .7;
}

.mfa-footer-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.MFA-color-warning {
    color: #2f5b88;
    font-size: 14px;
}

.MFA-color-warning img {
    width: 16px;
    height: auto;
}

.small-icon {
    width: 16px;
    height: auto;
}

.error {
    border: 2px solid red!important; 
  }