@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap";.App{display:flex;justify-content:space-between;align-items:center}.section-balance h2{font-weight:var(--weight7);font-size:var(--size3)}.div-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.div-top .filter-buttons{display:flex;gap:15px}.div-top .filter-buttons button{height:40px;background-color:var(--grey3)}.div-top .filter-buttons button:hover{background-color:#cfcfcf}.div-top .filter-buttons .emphasis{background-color:var(--brand1);color:var(--white)}.div-top .filter-buttons .emphasis:hover{background-color:var(--brand2)}.section-balance p{font-weight:var(--weight7);font-size:var(--size2);color:var(--grey1);margin-bottom:25px}.section-balance>img{width:100%}.section-balance ul{width:100%;max-height:390px;overflow:auto;display:flex;flex-direction:column;gap:20px}@media (max-width: 1100px){.div-top{display:unset}.div-top .filter-buttons{margin-top:15px;margin-bottom:20px}}.balance-card{width:100%;background-color:var(--grey4);display:flex;border-radius:8px}.balance-card span{width:5px;height:auto;display:inline-block;border-radius:8px 0 0 8px}.balance-card .income-color{background-color:var(--brand3)}.balance-card .debit-color{background-color:var(--brand2)}.balance-card>div{width:100%;display:flex;justify-content:space-between;align-items:baseline;padding:15px}.balance-card div h2{margin-bottom:20px}.balance-card div small{font-weight:var(--weight4);font-size:var(--size4)}.balance-card div button{background-color:var(--grey3);border-radius:4px;padding:8px;margin-left:40px}.balance-card div button:hover{background-color:#e2e2e2}.balance-card div button img{height:16px}.layout .section-form{max-width:365px}@media (max-width: 860px){.layout .section-form{width:280px}.section-form .form div .value-label{right:-80px}}.form{width:100%;padding:25px 20px;border:1px solid var(--grey3);border-radius:4px}.form label{font-weight:var(--weight4);font-size:var(--size4);display:block;margin-bottom:12px}.form input{padding:15px;background-color:var(--grey4);border-radius:8px}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.form>input{width:100%}.form small{display:block;margin-top:8px;margin-bottom:20px;color:#868e96;font-weight:var(--weight4);font-size:var(--size5)}.form>div{display:flex;justify-content:space-between;gap:15px}.form div>div{width:140px}.form div div input{width:100%}.form div div select{width:100%;padding:15px;border-radius:8px;background-color:var(--grey4);outline:none}.form div .value-label{margin-bottom:0;width:20px;position:relative;top:-34px;right:-106px}.form button{height:50px;width:100%;background-color:var(--brand1);color:var(--white)}.form button:hover{background-color:var(--brand2)}.bg-white{background-color:#fff;height:100vh}.header{background-color:var(--grey4);box-shadow:0 4px 32px -12px #00000040;width:100%;margin-bottom:40px}.header div{display:flex;justify-content:space-between;align-items:center}.header div h1{font-size:var(--size2);font-weight:var(--weight8)}.header div h1 span{color:var(--brand1)}.header div button{background-color:var(--grey3);padding:12px 16px;font-weight:var(--weight6);font-size:var(--size4);color:var(--size2);margin:20px 0}.header div button:hover{background-color:#cfcfcf}.total-value{margin-top:16px;padding:20px;border:1px solid #E9ECEF;border-radius:4px}.total-value div{display:flex;justify-content:space-between;margin-bottom:20px}.total-value div h2{font-weight:var(--weight7);font-size:var(--size4)}.total-value div span{color:var(--brand1);font-weight:var(--weight8);font-size:var(--size4)}.total-value p{font-weight:var(--weight4);font-size:var(--size5)}.figure{margin-top:40px;width:60%;min-width:390px}.figure img{width:100%;height:550px}.figure .secondary-img{display:none}@media (max-width: 860px){.container{width:90%!important}}@media (max-width: 730px){.container{width:95%!important}}.bg-dark{background-color:#242424;width:100vw;height:100vh}.section{max-width:350px}.section h1{font-size:var(--size2);font-weight:var(--weight8);color:var(--white);margin-bottom:25px}.section h1 span{color:var(--brand1)}.section p{color:var(--white);font-weight:var(--weight8);font-size:38px;line-height:48px;margin-bottom:20px}.section p+p{font-size:var(--size4);font-weight:var(--weight4)}.section button{color:var(--white);background-color:var(--brand1);padding:14px 90px;font-weight:var(--weight5);font-size:var(--size4)}.section button:hover{background-color:var(--brand2)}@media (max-width: 680px){.section{margin-top:50px}.figure{width:50%;min-width:200px}.figure img{display:none}.figure .secondary-img{display:unset;height:unset;width:100%}.section{max-width:none}}@media (max-width: 520px){.figure{display:none}}@media (max-width: 360px){.section{display:flex;flex-direction:column;justify-content:center}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button,input,select,textarea{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;line-height:1;box-sizing:border-box;text-decoration:none;list-style:none;font-family:Nunito,sans-serif}button{border-radius:8px;padding:.6em 1.2em;font-size:1em;font-weight:500;cursor:pointer}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--brand1: #FD377E;--brand2: #E34981;--brand3: #03B898;--grey1: #212529;--grey2: #868E96;--grey3: #E9ECEF;--grey4: #F8F9FA;--white: #ffffff;--size1: 1.75rem;--size2: 1.5rem;--size3: 1.25rem;--size4: 1rem;--size5: .875rem;--weight8: 800;--weight7: 700;--weight6: 600;--weight5: 500;--weight4: 400}.container{width:80%;max-width:1200px;margin:0 auto;padding:0 1rem}.layout{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}@media (max-width: 725px){.layout{flex-direction:column}.layout .section-form{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;width:100%;max-width:none}.total-value{margin-top:0}.total-value div{flex-direction:column;gap:12px}.section-balance{margin-bottom:30px;width:100%}}@media (max-width: 565px){.layout .section-form{flex-direction:column}.form div>div{width:50%}.total-value{width:100%}.total-value div{flex-direction:row}.total-value div h2,.total-value div span{font-size:20px}}