@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
    
    body {
        font-family:'Lato';
}

.form-content-login {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        padding: 10px 40px;

}
    
.form-content-login > form {
    width: 100%;
    text-align: center;
    font-size: 15px;
}
    
    .form-content-login input {
     font-family:'Lato';
}
    
   .input-group-text {
    position: relative;
    height: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
    
    
    .form-content-login label {
    font-weight: 600;
    color: #666;
}
    

a.button-recovery {
    display: block;
    width: 100%;
    max-width: 300px;
    text-align: center;
    text-decoration: none;
    margin-top: 20px;
    color: #8f8f8f;
    font-weight: 600;
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
}
    
.brand_logo_container {
    width: 100px;
    margin-bottom: 10px;
    margin-top: 0px;
}
    
    h1 {
    font-weight: 400;
    color: #333;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 7px;
    margin-bottom: 20px;
            text-align: center;
}
    
    h3 {
    font-size: 17px;
    font-weight: 600;
}
    
    
    
    p {
    text-align: center;
    margin-bottom: 20px;
    color: #666;
    line-height: 1.2em;
    font-size: 14px;
}
    
    
.red {
    color: #e71f63;
}
    
    .green {
    color: #79c142;
}
    

 .checkmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
 .checkmark{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    
    margin: 10px auto;

    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
    
.checkmark2 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    
    margin: 10px auto;

    box-shadow: inset 0px 0px 0px #e81e63;
    animation: fill2 .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
    
     .checkmark__circle2{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #e81e63;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
    
 .checkmark__check{
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
    
.box-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
} 
    


.red-bg {
    background: #01628c;
}
    
@keyframes stroke{
    100%{
        stroke-dashoffset: 0
    }
}
@keyframes scale{
    0%, 100%{
        transform: none
    }
    50%{
        transform: scale3d(1.1, 1.1, 1)
    }
}
@keyframes fill{
    100%{
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}
    
@keyframes fill2{
    100%{
        box-shadow: inset 0px 0px 0px 30px #e81e63
    }
}