:root{--color-primary: #3A4450;--main-background: #f0f0f0;--color-danger: #f44336;--sidebar-width: 240px;--border-color: "#aaa";--mobile-breakpoint: 768px}html,body{margin:0;padding:0}*{box-sizing:border-box}body{background:var(--main-background)}.textarea textarea{resize:both}.d-none{display:none}.align-and-justify{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}@media screen and (min-width: 768px){.align-and-justify{flex-wrap:nowrap}}.flex-direction-column{display:flex;flex-direction:column;justify-content:space-between}.capitalize{text-transform:capitalize}.justify-end{display:flex;align-items:center;justify-content:end;gap:1rem}.text-right{text-align:right}main.login{font-family:roboto;font-weight:400;display:grid;place-items:center;padding:1rem;height:100vh}main.login form{background-color:#fefefe;border:1px solid white;box-shadow:0 .1rem .3rem #0000004d;padding:2rem;border-radius:.2rem;text-align:center;width:100%;max-width:24rem}main.login form header{padding-bottom:2rem}main.login label{padding:1rem 0;display:flex}main.login label span{font-size:14px;color:#555}main.login label.form-text{flex-direction:column;position:relative}main.login label.form-text span.name{position:absolute;top:.5rem;left:.5rem;background-color:#fff;display:inline-block;padding:0 .5rem}main.login label.form-text span.error{margin-top:.5rem;text-align:left}main.login label.form-checkbox{align-items:center;gap:.5rem}main.login label.form-checkbox input{accent-color:var(--color-primary);width:1.2rem;height:1.2rem}main.login label.error span{color:var(--color-danger)}main.login label.error input{border-color:var(--color-danger)}main.login .alert-error{border:1px solid var(--color-danger);padding:.75rem;border-radius:.2rem;color:var(--color-danger)}main.login input[type=email],main.login input[type=password]{accent-color:var(--color-primary);outline:none;border:2px solid #ddd;border-radius:.2rem;padding:1rem;transition:.1s all ease-in-out;font-size:16px}main.login input[type=email]:hover,main.login input[type=password]:hover{border:2px solid #aaa}main.login input[type=email]:focus,main.login input[type=password]:focus{border-color:var(--color-primary)}main.login input[type=submit]{background-color:var(--color-primary);color:#fff;text-transform:uppercase;font-size:14px;font-weight:500;padding:.7rem 1.5rem;border:none;border-radius:.2rem;margin-top:1rem}main.login input[type=submit]:disabled{opacity:.6}
