*{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%;box-sizing:border-box}body{font-family:Poppins,sans-serif;color:#444;background-color:#f3f3f3;height:100vh;margin:2rem}nav{display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.form-container{display:flex}.forgot-password{text-align:center;margin-top:10px}.forgot-password a{cursor:pointer}.form-outer-container{display:flex;justify-content:space-between;gap:5px}.form-container-small,.input-container-small{display:flex}.gap{gap:10px}.mb{margin-bottom:10px}.forgot-small{margin-top:10px;cursor:pointer}.welcome{font-size:1.9rem;font-weight:500;margin-bottom:20px;text-align:center}.reset-password-title{text-align:center}.new-pass{display:flex;flex-direction:column;text-align:center}.logo{height:5.25rem}.login__input{border:none;padding:.5rem 2rem;font-size:1.6rem;font-family:inherit;text-align:center;width:12rem;border-radius:10rem;margin-right:1rem;color:inherit;border:1px solid #fff;transition:all .3s}.login__input:focus{outline:none;border:1px solid #ccc}.login__input::placeholder{color:#bbb}.login__btn{border:none;background:none;font-size:2.2rem;color:inherit;cursor:pointer;transition:all .3s;max-height:35.6px}.login__btn:hover,.login__btn:focus,.btn--sort:hover,.btn--sort:focus{outline:none;color:#777}.registration{width:20rem}.center{display:flex;justify-content:center;align-items:center;height:calc(100vh - 73px)}.container-small{transform:translate(-52.5px);text-align:center}.reset-pass{margin-right:0}.register{transform:translate(-25%);display:flex;flex-direction:column;padding:30px;gap:20px;min-width:270px}.register-btn{margin:0 auto;transform:translate(-50%)}.spinner{display:flex;justify-content:center}.app{position:relative;max-width:100rem;margin:4rem auto;display:grid;grid-template-columns:4fr 3fr;grid-template-rows:auto repeat(3,15rem) auto;gap:2rem;opacity:0;transition:all 1s}.fade-in{opacity:1;transition:opacity 1s ease-in-out}.balance{grid-column:1 / span 2;display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem}.balance__label{font-size:2.2rem;font-weight:500;margin-bottom:-.2rem}.balance__date{font-size:1.4rem;color:#888}.balance__value{font-size:4.5rem;font-weight:400}.movements{grid-row:2 / span 3;background-color:#fff;border-radius:1rem;overflow:scroll}.movements__row{padding:2.25rem 4rem;display:flex;align-items:center;border-bottom:1px solid #eee}.movements__type{font-size:1.1rem;text-transform:uppercase;font-weight:500;color:#fff;padding:.1rem 1rem;border-radius:10rem;margin-right:2rem}.movements__date{font-size:1.1rem;text-transform:uppercase;font-weight:500;color:#666}.movements__type--deposit{background-image:linear-gradient(to top left,#39b385,#9be15d);min-width:94px;text-align:center}.movements__type--withdrawal{background-image:linear-gradient(to top left,#e52a5a,#ff585f);min-width:94px}.movements__value{font-size:1.7rem;margin-left:auto}.summary{grid-row:5 / 6;display:flex;align-items:baseline;padding:0 .3rem;margin-top:1rem}.summary__label{font-size:1.2rem;font-weight:500;text-transform:uppercase;margin-right:.8rem}.summary__value{font-size:2.2rem;margin-right:2.5rem}.summary__value--in,.summary__value--interest{color:#66c873}.summary__value--out{color:#f5465d}.btn--sort{margin-left:auto;border:none;background:none;font-size:1.3rem;font-weight:500;cursor:pointer}.operation{border-radius:1rem;padding:3rem 4rem;color:#333}.operation--transfer{background-image:linear-gradient(to top left,#ffb003,#ffcb03)}.operation--loan{background-image:linear-gradient(to top left,#39b385,#9be15d)}.operation--close{background-image:linear-gradient(to top left,#e52a5a,#ff585f)}h2{margin-bottom:1.5rem;font-size:1.7rem;font-weight:600;color:#333}.form{display:grid;grid-template-columns:2.5fr 2.5fr 1fr;grid-template-rows:auto auto;gap:.4rem 1rem}.form.form--loan{grid-template-columns:2.5fr 1fr 2.5fr}.form__label--loan{grid-row:2}.form__input{width:100%;border:none;background-color:#fff6;font-family:inherit;font-size:1.5rem;text-align:center;color:#333;padding:.3rem 1rem;border-radius:.7rem;transition:all .3s}.form__input:focus{outline:none;background-color:#fff9}.form__label{font-size:1.3rem;text-align:center}.form__btn{border:none;border-radius:.7rem;font-size:1.8rem;background-color:#fff;cursor:pointer;transition:all .3s}.form__btn:focus{outline:none;background-color:#fffc}.logout-timer{padding:0 .3rem;margin-top:1.9rem;text-align:right;font-size:1.25rem}.timer{font-weight:600}p a{cursor:pointer}.modal{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;margin:0 auto;min-width:250px;position:fixed;top:50%;border:1px solid gray;padding:20px 45px;border-radius:5px}.modal-content-container p{margin-bottom:15px;font-size:1.4rem}.modal-btn-container{display:flex;justify-content:center;gap:15px}.modal-btn{border:1px solid rgb(224,224,224);padding:10px 25px;border-radius:5px;cursor:pointer;outline:none}.modal-btn-container button:hover{transform:scale(1.1);transition:.5s ease}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}@media screen and (max-width: 768px){.container-small{text-align:center;transform:translate(0)}.welcome{display:none;margin-bottom:20px}.welcome.small{display:block}.forgot-password a{display:none}.form-outer-container{display:flex;justify-content:space-between}.form-container-small,.input-container-small{display:flex}.forgot-small{margin-top:10px;cursor:pointer}.login__input{display:none}.login__input.small{display:block}.login__btn{display:none}.login__btn.small{display:block}nav{justify-content:center;padding:0;align-items:center;margin-top:10px}.registration{display:block}.register{transform:translate(0)}.register-btn,.visible{display:block}.app{display:flex;justify-content:center;align-items:center;flex-direction:column;grid-template-columns:none;grid-template-rows:none}.balance{grid-column:1;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:2rem}.balance__value{font-size:2.5rem}.balance__date{text-align:center}.movements{grid-row:1;width:90%;background-color:#fff;border-radius:1rem;overflow:scroll}.movements__row{padding:2.25rem 4rem;display:flex;align-items:center;border-bottom:1px solid #eee}.movements__value{font-size:1.3rem;margin-left:auto}.movements__type{font-size:1.1rem;text-transform:uppercase;font-weight:500;color:#fff;padding:.1rem 1rem;border-radius:10rem;margin-right:2rem}.summary__value{font-size:1.2rem;margin-right:1rem;display:flex;flex-wrap:wrap}.logout{font-size:2rem;display:block;margin-left:auto;padding-right:5px}.operation{max-width:90%}nav form .spinner{display:none}.isLoadingLoginContainer{margin:0 auto}.reset-pass{display:flex}.reset-pass-btn{margin:0 auto}}