@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
    margin: 0;
    padding: 0;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-image: url('/img/bg.webp');
    background-size: cover;
}
h2 { text-align: center; padding: 0 0 2rem; }
.loginData{
    margin-top: 5%;
}






.loginMain {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px) brightness(0.6) saturate(0.3);
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}
.loginContent { background-color: #fff; min-width: 300px; min-height: 300px; box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.4); border-radius: 5px; width: 100%; max-width: 1200px; max-height: 800px; display: grid; grid-template-columns: 30% 1fr; overflow: hidden; }
.loginLogoCD { width: 100%; background: #000; display: flex; justify-content: center; align-items: center; }
.loginLogoCD svg { fill:#fff; width: 60%; }
label { border: solid 1px #000; width: 90%; margin: 1.5rem auto; border-radius: 17px; display: flex; align-items: center; padding: .2rem; }
label svg { width: 25px; height: 25px; margin: 1px 5px; }
label input{ flex-grow: 1; outline: 2px solid transparent; outline-offset: 2px; border:none; padding:0; font-size: 1.2rem; }
label.email svg {stroke:#939393;}
label.password svg {fill:#939393;}
.logoAppenda{ width: 32%; margin: auto; padding: 4rem 0; }
.loginSend { text-align: center; padding: 0 0 2rem; }

input[type="submit"] { 
    cursor: pointer; 
    border: none; 
    background-color: #000; 
    color: #fff; 
    padding: 1rem 3rem; 
    border-radius: 25px; 
    font-size: 1rem; 
    &:hover{
        background-color: #4a4a4b;
    }
}




.loginReset { text-align: center; padding: 0 0 5rem; }
.error { background: #ffe6a2; color: #cf0000; padding: 1rem; text-align: center; font-weight: 600; }
.center{text-align: center;}
.send {
    text-align: center;
    padding: 0 0 5rem;
}
.restoreName {
    text-align: center;
    font-weight: 700;
    font-size: 1.6rem;
    padding: 0 0 1rem;
}
.loginSend.restore{ padding-bottom: 5rem;}
a{color:#336699;}