*{text-decoration:none;list-style:none;margin:0%;padding:0%;color:#000;font-family:sans-serif;box-sizing:border-box}:root{--primary-color: #595bee;--secondary-color: #f0f1ff}body{background-repeat:no-repeat;background-size:cover}main{display:flex;align-items:center;justify-content:center;height:calc(100vh - 190px);width:100%;background-color:#0004f55d;position:relative}.login-container{display:flex;background-color:#fff;box-shadow:0 5px 8px #bbbbbb6b;flex-direction:column;border-radius:20px;width:100%;max-width:500px;gap:10px;overflow:hidden;margin:0 20px}.login-logo-design{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:70px}#login-logo{aspect-ratio:1/1;max-width:120px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:100%}#login-logo img{height:100%}.login-inputs{background-color:#fff;padding:10px 30px;gap:20px;display:flex;flex-direction:column}header{height:190px;display:flex;flex-direction:column}.design-part{height:150px;display:flex;background-repeat:no-repeat;background-size:cover;overflow:hidden}.school-container{position:relative;transform:skew(-20deg);border:solid 50px #4C4ECF;border-top:0;border-bottom:0;width:30%;overflow:hidden;box-shadow:20px 0 15px #0008;background-position-y:bottom;left:-25px}.school-container img{aspect-ratio:16/9;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(20deg);background-position-y:bottom}.design{transform:skew(-20deg);border-left:solid 40px #FFD215;height:120px;align-self:end;box-shadow:10px 0 15px #0008}.design2{transform:skew(-20deg);border-left:solid 40px #FFD215;height:90px;margin-left:40px;margin-right:10px;box-shadow:10px 0 15px #0008}.school-name-logo{flex-grow:1;background-color:#ffd215;clip-path:polygon(45px 0,100% 0,100% 100%,0 100%);padding:20px 30px;display:flex;gap:10px;justify-content:start;align-items:center}.school-name-logo img{width:110px;height:110px;margin-left:20px}.school-name{font-family:sans-serif;font-weight:300}.school-name h1{font-weight:400;margin:0;font-size:2rem}.school-name span{font-size:1.25rem}.bottom-part{background-color:#4c4ecf;flex-grow:1;display:flex}.bottom-part form{flex-grow:1;display:flex;align-items:center;justify-content:end;padding:0 20px}.bottom-part form button{background-color:#4c4ecf;color:#fff;font-size:1rem;border:unset;font-weight:600;padding:5px 10px;border:2px solid #4C4ECF;transition:all .3s ease;border-radius:5px;cursor:pointer}.bottom-part form button:hover{border:2px solid white}.login-logo-info{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex-grow:1}.login-logo-info h1{font-weight:600;font-size:2rem}.login-logo-info p{font-size:1rem;max-width:90%}.form-field input{border-radius:5px!important}form{position:relative;margin:20px;gap:10px;flex-grow:1;display:flex;flex-direction:column}input{font-size:1rem;height:34px}#forgot-pass{align-self:end;margin-left:auto;margin-top:10px;cursor:pointer;color:#007bff}#forgot-pass:hover{text-decoration:underline;color:#007bff}#login-btn{cursor:pointer;margin-top:20px;font-weight:700;padding:7px;font-size:1rem;border-radius:10px;background-color:var(--primary-color);color:#fff;border:2px solid rgba(255,255,255,0);width:100%;transition:color,background-color ease .3s}#login-btn:hover{background-color:#fff;color:var(--primary-color);border:2px solid var(--primary-color)}.password-container{position:relative}.password-container .seepass{position:absolute;top:48%;right:17px;cursor:pointer;z-index:2;border:none;background-color:#fff;outline:none;box-sizing:none}.password-container .seepass img{width:18px;height:18px}.go-back-login{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;color:#000;cursor:pointer;transition:all .3s ease;font-weight:700}.go-back-login img{width:30px;height:30px}.go-back-login:hover{color:#4c4ecf}.go-back-login:hover img{filter:brightness(0) saturate(100%) invert(57%) sepia(87%) saturate(7056%) hue-rotate(232deg) brightness(85%) contrast(88%)}@media (max-width:1000px){.login-container{transform:scale(1)}.school-name h1{font-size:1.5rem}.school-name span{font-size:1rem}.school-name-logo img{width:90px;height:90px}.design,.design2{display:none}.school-container{width:40%;border:solid 20px #4C4ECF;border-bottom:50px;border-top:50px}}@media (max-width:850px){.login-container{gap:0px}.login-logo-design{padding:40px 40px 10px}.login-logo-design h1{font-size:1.25rem;font-weight:600}.login-inputs{background-color:#fff;padding:40px 20px}form{margin:10px}}@media (max-width:680px){.school-name{margin-left:35px}.school-name h1{font-size:1.25rem}.school-name span{font-size:14px}.school-name-logo img{display:none}.school-name-logo{flex-grow:1;background-color:#ffd215;clip-path:polygon(45px 0,100% 0,100% 100%,0 100%);padding:5px 10px;display:flex;gap:10px;justify-content:start;align-items:center}header{display:none}main{height:100vh}.login-container{flex-direction:column}.login-inputs{flex-grow:4;display:flex;flex-direction:column;border-radius:20px 20px 0 0;padding-top:10px}form{flex-grow:1;width:unset}.login-logo-info h1{font-size:1.5rem}}@media (max-width:460px){.login-container{flex-direction:column;margin:20px;border-radius:15px}}.login-logo-design{padding:20px 30px 10px;border-radius:unset;gap:10px}#login-logo{border:unset;padding:unset}.alert{padding:15px;margin:10px 0;border-radius:4px;position:fixed;top:20px;right:20px;z-index:1000;min-width:300px;animation:slideIn .5s ease-in-out}.alert.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.alert{opacity:1;transition:opacity .5s ease-in-out}.alert.hide{opacity:0}.login-error-message{margin:10px 0;padding:8px 12px;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:5px;text-align:center}.login-error-message .error_input{color:#721c24;font-weight:500;margin:0}