header{background:var(--accentColor);height:var(--headerHeight);display:flex;align-content:center;justify-content:space-between;padding:0 100px}header img{max-height:var(--headerHeight)}header nav{display:flex;align-items:center}header a{color:#fff;text-decoration:none;padding:10px;font-size:14pt}header a:hover{opacity:.6}header .user-links{display:flex;align-items:center}header .user-links>div{margin-left:20px}header .user-links :first-child{margin-left:0}header .user-links img{max-height:var(--headerIconHeight)}header .user-links #logout-btn:hover{cursor:pointer;opacity:.8}header .user-links a{display:flex;align-items:center}:root{--accentColor:#4e9f3d;--paleAccentColor:#c2cba8;--lightGray:#5a5c5a;--headerHeight:7vh;--headerIconHeight:5vh;--contentHeight:93vh}*{box-sizing:border-box}body,html{margin:0;padding:0}#app,body{background:#383838}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;height:var(--contentHeight)}#app .error{color:red}#app table{border-spacing:0}#app td,#app th{padding:0}#app td>*{height:30px;width:100%}button,h1,h2,h3,h4,label,td,th{color:#fff}button{background:var(--accentColor);padding:5px;border-radius:40px;border:1px solid transparent;min-width:100px;font-size:12pt}button:hover{cursor:pointer;opacity:.8}.big-button{min-width:150px;font-size:20pt;padding:20px}.disabled-button{background:var(--lightGray)}.summary-grid-wrapper{display:flex;flex-direction:column;align-items:center}td:first-child,th:first-child{text-align:left;margin-left:5px}td:nth-child(2),th:nth-child(2){text-align:right}.amount-adder-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:gray;padding:5%;display:flex;flex-direction:column;justify-content:center;align-items:center}.amount-adder-wrapper>div{margin:5px 0}.amount-adder-wrapper label{width:150px;display:inline-block;text-align:left}.amount-adder-wrapper input,.amount-adder-wrapper select{width:200px}.amount-adder-wrapper .close-button{position:absolute;top:5px;left:100%;transform:translate(-150%);font-size:20pt}.amount-adder-wrapper .close-button:hover{cursor:pointer}.amount-viewer-wrapper{display:grid;grid-template-columns:22.5% 22.5% 22.5% 22.5% 10%}.amount-viewer-wrapper h3{border:1px solid #000;margin:0}.section-toggler{display:flex;justify-content:space-between}.section-toggler:hover{cursor:pointer}.section-toggler:first-child{background:red}.section-toggler h1{width:50%;text-align:left;background-color:var(--lightGray);margin:0;padding:0 10px}.section-toggler .icon{text-align:right}.transaction-editor-wrapper{background:var(--paleAccentColor);position:absolute;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:50px;top:50%;left:50%;transform:translate(-50%,-50%)}.transactions-viewer-wrapper{max-height:50vh;overflow-y:auto}.transactions-viewer-wrapper .transactions-wrapper-absolute{background-color:gray;width:20vw;height:20vh;position:absolute;top:40vh;left:40vw;overflow:scroll;z-index:100}.transactions-viewer-wrapper .transactions-wrapper{border-collapse:collapse;width:100%}.transactions-viewer-wrapper .transactions-wrapper th{background:transparent}.transactions-viewer-wrapper .transactions-wrapper td{border:1px solid #000;background:#fff;color:#000}.transactions-viewer-wrapper .edit-btn{border-radius:0;color:#000;height:auto;padding:0}.loading{width:20vw;height:20vh;position:absolute;top:40vh;left:40vw;background:#7f7f7f}.loading .animation{margin-inline:auto}.page-adder-wrapper{position:absolute;top:50%;left:50%;background:gray;display:flex;flex-direction:column;transform:translate(-50%,-50%)}.page-adder-wrapper .page-adder-contour{position:relative;padding:30px}.page-adder-wrapper .page-adder-contour .input-wrapper{display:flex;justify-content:space-between;align-items:flex-end}.page-adder-wrapper .page-adder-contour .input-wrapper div{display:flex;flex-direction:column}.page-adder-wrapper .page-adder-contour .input-wrapper div .error{color:red}.page-adder-wrapper .page-adder-contour .top-corner-close{position:absolute;right:5px;top:0;font-weight:700;font-size:25px}.page-adder-wrapper .page-adder-contour .top-corner-close:hover{cursor:pointer}.page-selector-wrapper{display:flex;width:50%;overflow-x:scroll}.page-selector-wrapper button{background:red;border-radius:0;background:var(--lightGray);border-left:1px solid #fff}.page-selector-wrapper button:first-child{border-left:none}.transaction-adder-wrapper{display:grid;grid-template-columns:20% 20% 20% 20% 10%}.transaction-adder-wrapper>div{display:flex;flex-direction:column;justify-content:center}.transaction-adder-wrapper>div div,.transaction-adder-wrapper>div select{width:100%;height:100%}.transaction-adder-wrapper>div button{margin-left:20px}.expense-adder-wrapper{display:flex;flex-direction:column;align-items:center}.expense-adder-wrapper>div{width:80%;display:flex;margin:2px 0;justify-content:center}.expense-adder-wrapper>div:last-child{justify-content:center}.expense-adder-wrapper>div>label{width:30%}.expense-viewer-wrapper{display:flex;align-items:center}.expense-viewer-wrapper>div{justify-content:flex-end}#app .home-wrapper,.expense-viewer-wrapper>div{display:flex;flex-direction:column}#app .home-wrapper .budget-wrapper{display:flex;-moz-column-gap:3vw;column-gap:3vw}#app .home-wrapper .budget-wrapper>div:nth-child(3){width:20%}.expenses-viewers-wrapper{max-height:40vh;height:30vh;overflow-y:auto;overflow-x:initial}.redFont{color:red}.greenFont{color:green}.login-page-wrapper,.register-page-wrapper{height:var(--contentHeight);display:flex;flex-direction:column;justify-content:space-around;align-items:center}.login-page-wrapper h2,.register-page-wrapper h2{margin:0;width:25%}.login-page-wrapper form,.register-page-wrapper form{border:1px solid #fff;padding:100px}.login-page-wrapper form div,.register-page-wrapper form div{display:flex;flex-direction:column;align-items:flex-start;margin:15px 0}.login-page-wrapper form button,.register-page-wrapper form button{padding:10px}.login-page-wrapper form input,.register-page-wrapper form input{height:30px}.login-page-wrapper a,.register-page-wrapper a{color:#fff}#register-form{padding:50px 150px}.budget-viewer-wrapper{background:var(--paleAccentColor);width:100%;height:300px;border:5px solid transparent;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.budget-viewer-wrapper p{font-size:20pt}.budget-viewer-wrapper>div{height:50%;width:50%}.budget-viewer-wrapper>div img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.budget-viewer-wrapper:hover{cursor:pointer;border:5px solid var(--accentColor)}.budget-adder-wrapper>div{display:flex;flex-direction:column;align-items:start;width:50%;margin:5px 0}.budget-adder-wrapper>div>input{width:100%}.home-page-wrapper{display:flex}.home-page-wrapper .budget-viewers{width:50%;height:var(--contentHeight);display:grid;grid-template-columns:repeat(auto-fit,minmax(min-content,300px));grid-gap:20px;align-content:center;justify-content:center}.home-page-wrapper .budget-adder-wrapper{width:50%;height:var(--contentHeight);display:flex;flex-direction:column;justify-content:center;align-items:center}.graphs-wrapper{width:80vw;height:80vh;margin:10vh 0 0 10vw;display:grid;grid-template-columns:50% 50%;grid-template-rows:50% 50% 50%;row-gap:150;-moz-column-gap:150;column-gap:150}.graphs-wrapper>*{display:flex;justify-content:center;align-items:center}.chart-wrapper{width:100%;height:100%;display:flex}.chart-wrapper canvas{max-width:80%;background:#fff}.chart-wrapper .graph-filter-wrapper{display:flex;flex-direction:column;justify-content:center;width:20%}.chart-wrapper .graph-filter-wrapper>div{margin-bottom:10px}