*{text-decoration:none;list-style:none;margin:0%;padding:0%;color:#000;font-family:sans-serif;box-sizing:border-box}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:#191bb3ab;position:relative}#login-containter{display:flex;align-items:center;flex-direction:column;background-color:#ffffff7e;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:10px;padding:1%}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}.content-header{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:30px 0 20px;gap:10px;position:relative}.content-header h1{font-size:1.5rem;font-weight:700}#login-logo{height:10vh;display:flex;align-items:center;justify-content:center;gap:10px}#login-logo h2{font-family:cursive}#login-logo img{height:100%}form{position:relative;margin:20px;gap:10px;width:310px}input{font-size:1rem;height:34px}#forgot-pass{align-self:end;margin:5px 0;cursor:pointer}#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:#4c4ecf;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:#4c4ecf;border:2px solid #4C4ECF}.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){.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:650px){.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}}@media (max-width:550px){form{width:280px}}.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}