*{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;padding:2rem}nav{display:flex;justify-content:center;align-items:center;padding:0 2rem}.welcome{font-size:1.9rem;font-weight:500}.logo{height:5.25rem}.btn--sort:hover,.btn--sort:focus{outline:none;color:#777}.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;z-index:0}.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}.balance__left{font-size:1.4rem;display:flex}.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__row:hover{background-color:#f3f3f3;cursor:pointer}.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--income{background-image:linear-gradient(to top left,#39b385,#9be15d)}.movements__type--invest{background-image:linear-gradient(to top left,#ffb003,#ffcb03)}.movements__type--expense{background-image:linear-gradient(to top left,#e52a5a,#ff585f)}.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;white-space:nowrap}.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{color:#66c873}.summary__value--invest{color:#ffb003}.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 h2{text-transform:capitalize}.operation--invest{background-image:linear-gradient(to top left,#ffb003,#ffcb03)}.operation--income{background-image:linear-gradient(to top left,#39b385,#9be15d)}.operation--expense{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--invest,.form.form--income{grid-template-columns:2.5fr 1fr 2.5fr}.form__label--invest,.form__label--income{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}.dropdown{display:flex;align-items:end;justify-content:end;font-size:1.5rem!important}.popup-wrapper{position:fixed;width:100%;height:100%;top:0;left:0;background-color:#000000bf;z-index:1}.popup{position:fixed;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%)}.popup-content{width:320px;display:flex;flex-direction:column;align-items:center;background-color:#fff;color:#000;text-align:center;border-radius:20px;padding:30px 30px 70px}.popup-content button.close{width:30px;font-size:20px;color:#c0c5cb;align-self:flex-end;background-color:transparent;border:none;margin-bottom:10px;cursor:pointer}.popup-content p{margin-bottom:20px;font-size:18px}.popup-content .transaction{display:flex;justify-content:center;width:100%;margin-bottom:50px}.popup-content .transaction__type,.popup-content .transaction__amount{font-size:16px}.popup-content .buttons{display:flex;justify-content:space-around;width:100%}.popup-content button.refuse{background-color:#e17a6c;border:none;border-radius:5px;width:100px;padding:10px;font-size:16px;color:#fff;cursor:pointer}.popup-content button.refuse:hover{box-shadow:0 6px 18px -5px #ed6755}.popup-content button.accept{background-color:#bbb;border:none;border-radius:5px;width:100px;padding:10px;font-size:16px;color:#fff;cursor:pointer}.popup-content button.accept:hover{box-shadow:0 6px 18px -5px #bbb}