:root {
    --cor-1: #E4153B;
    --cor-2: #7e7e7e;
    --cor-3: #ffffff;
    --cor-4: #3d3d3d;
    --cor-erro: #e83c2c;
}

.login-center{
    height: 70%;
    min-width: 200px;
    max-width: 400px;
    padding: 40px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.logo-topo{
    margin-top: 8%;
}

@media (min-width: 768px) {
    .col-login{
        padding: 6% 34%;
        /* border-right: 1px solid var(--cor-2); */
    }
}

@media (max-width: 767px) {
    .col-login{
        padding: 6%;
        /* border-bottom: 1px solid var(--cor-1); */
    }
}

.input-login{
    background: none; 
    border: none;
    border-bottom: 2px solid var(--cor-2);
    outline: none;
    color: var(--cor-4);
    box-shadow: none;
    border-radius: 0;
}

.input-login:focus{
    border: none;
    border-bottom: 2px solid var(--cor-4);
    box-shadow: none;
    -webkit-box-shadow: none;  
}
  
.input-login::placeholder{
    color: var(--cor-2);
}

.input-login:-webkit-autofill {    
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--cor-4) !important;  
}

@keyframes fadeItBorder {
    0%   { border-bottom-color: var(--cor-2); } 
    50%  { border-bottom-color: var(--cor-erro) }
    100% { border-bottom-color: var(--cor-2); }
}

.input-login-erro {  
    animation: fadeItBorder 800ms ease-in-out; 
    animation-iteration-count: 2;
}

.container-img-link-cadastro{    
    padding: 9% 1%;
    cursor: pointer;
}