.SignIn{flex-direction:column;justify-content:center;align-items:center;height:70%;margin:8% auto;display:flex}.SignIn .SignIn-container{color:#2c3e50;background-color:#d5d5d5;border-radius:8px;flex-direction:column;align-items:center;gap:20px;width:50%;height:400px;margin:auto;padding:30px 10px;display:flex}.SignIn .SignIn-container .signIn-title{text-align:center;width:100%;margin:auto;font-size:22px}.SignIn .SignIn-container .signin-form{flex-direction:column;gap:10px;width:80%;display:flex}.SignIn .SignIn-container .signin-form .form-group{flex-direction:column;gap:5px;width:100%;display:flex}.SignIn .SignIn-container .signin-form .form-group .form-label{color:#2c3e50;width:80%;margin:auto;font-size:20px}.SignIn .SignIn-container .signin-form .form-group .form-input{border:1px solid #ccc;border-radius:5px;outline:none;width:80%;height:40px;margin:auto;padding:5px;font-size:14px;transition:all .2s ease-in-out}.SignIn .SignIn-container .signin-form .form-group .form-input:focus,.SignIn .SignIn-container .signin-form .form-group .form-input:hover{box-shadow:0 0 10px #2c3e5080}.SignIn .SignIn-container .signin-form .sign-in{color:#fff;cursor:pointer;background-color:#2c3e50;border:none;border-radius:5px;width:40%;height:50px;margin:30px auto 0;font-size:1.2rem}@media (max-width:768px){.signIn-title{text-align:center;width:90%;margin:auto;font-size:22px}.sign-in{width:60%!important}.SignIn-container{width:80%!important}.form-label{width:100%!important}}@media (max-width:320px){.signin-form{text-align:start;width:100%}.signin-form .form-group,.signin-form .form-group .form-input,.signin-form .form-group .form-label{width:100%}}