a.corPrincipal {
    color: #Ff0d00;
}

a.btn.corPrincipal {
    color: white !important;
}

.btn.corPrincipal {
    background-color: #ff0d00;
    border-color: #ff0d00;
}

.background {
    background-image: url("../myforce-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-glass {
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: saturate(200%) blur(25px);
}

.confirm_phone .bg-glass {
    padding: 80px 20px;
    border-radius: 20px;
    max-width: 760px;
    width: 100%;
    /* margin: 0 20px; */
}

.confirm_phone .row {
    gap: 20px;
    margin: 20px 0 30px;
}

.confirm_phone .row > .col-12 {
    padding: 0;
}

.confirm_phone .row .input-wrapper {
    padding: 12.5px 30px;
    border: 1px solid #dddddd;
    border-radius: 20px;
    position: relative;
    transition: var(--app-transition);
}


.confirm_phone .row .input-wrapper input {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    display: block;
    resize: none;
    font-family: var(--app-font-family);
    transition: var(--app-transition);
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    width: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset; /* Altere "white" para a cor de fundo do seu input */
    box-shadow: 0 0 0 1000px white inset;
    color: inherit; /* Mantém a cor do texto como a definida */
}

.confirm_phone .row .input-wrapper label {
    position: absolute;
    left: 31px;
    top: 14px;
    transition: var(--app-transition);
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: left;
    color: #959595;
    opacity: 1;
    pointer-events: none;
    display: flex;
}


.confirm_phone .row input:focus+label, 
.confirm_phone .input-wrapper.filled label, 
.confirm_phone .row .input-wrapper.filled input:focus+label, 
.confirm_phone .row .input-wrapper.filled input:not(:focus)+label {
    top: -9px !important;
    left: 27px !important;
    font-size: 11px;
    color: #959595;
    font-weight: normal;
    border-radius: 20px;
    background-color: white;
    padding: 0px 2px;
    z-index: 2;
    font-size: 11px;
    opacity: 1;
}

.confirm_phone .input-wrapper label sup {
    font-weight: 300;
    color: #ff0d00;
    font-size: 10px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.5;
    letter-spacing: normal;
    text-align: left;
}

.confirm_phone input:focus+label sup, textarea:focus+label sup, 
.confirm_phone .input-wrapper.filled label sup, 
.confirm_phone .input-wrapper.filled input:focus+label sup, 
.confirm_phone .input-wrapper.filled input:not(:focus)+label sup {
    color: #959595;
    line-height: 2;
}

.confirm_phone .new_logo {
    max-width: 204px;
    display: block;
    margin: 0 auto;
}

.confirm_phone .card-body {
    padding: 45px 0 0 0;
    max-width: 450px;
    margin: 0 auto;
}

.confirm_phone .card-body .form.login-form{
    padding:0;
}

.confirm_phone .title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
}

.confirm_phone .description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #1a1a1a;
    margin-top: 30px;
}


.confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled).active:focus,
.confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled):active:focus,
.confirm_phone .btn.corPrincipal {
    background-color: #ff0d0000;
    border-color: #ff0d0000;
    position: relative;
    isolation: isolate;
    margin: 23px 0 0;
    box-shadow: none;
    font-weight: 600;
    padding: 7px 20px;
}

.confirm_phone .btn.corPrincipal::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #Ff0d00;
    border-color: #Ff0d00;
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: var(--app-transition);
}

.confirm_phone .btn.corPrincipal:hover::before {
    transform: scale(1.05);
}


@media (max-width: 768px) {

    .confirm_phone .bg-glass {
        padding: 40px 19px ;
    }

    .confirm_phone .card-body {
        padding: 28px 0 0 0;
    }

    .confirm_phone .new_logo {
        max-width: 112px;
    }
    
    .confirm_phone .title {
        font-size: 18px;
        line-height: 1.56;
    }
    .confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled).active:focus, 
    .confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled):active:focus, 
    .confirm_phone .btn.corPrincipal,
    .confirm_phone .description {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.71;
        margin-top: 12px;
    }

    .confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled).active:focus, 
    .confirm_phone .btn.corPrincipal:not(:disabled):not(.disabled):active:focus, 
    .confirm_phone .btn.corPrincipal {
        font-weight: 600;
        margin-top: 24px;
        padding: 3.5px 20px;
    }

    .confirm_phone .row .input-wrapper {
        border-radius: 10px;
        padding: 8.5px 21px;
    }

    .confirm_phone .row .input-wrapper label,
    .confirm_phone .row .input-wrapper input {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.71;
    }

    .confirm_phone .row .input-wrapper label {
        left: 21px;
        top: 10px;
    }

    .confirm_phone .row input:focus+label, .confirm_phone .input-wrapper.filled label, .confirm_phone .row .input-wrapper.filled input:focus+label, .confirm_phone .row .input-wrapper.filled input:not(:focus)+label {
        left: 19px !important;
    }

    .confirm_phone .row {
        margin: 20px 0;
    }
}