*{box-sizing:border-box;padding:0;margin:0;list-style:none;font-family:Nunito,sans-serif}body{background-color:#474e5a}.layout-container{display:grid;grid-template-columns:minmax(300px,15%) minmax(600px,auto);grid-template-rows:minmax(90px,10%) auto;height:100vh}.dashboard{grid-column-start:1;grid-column-end:1;grid-row-start:1;grid-row-end:3;background-color:#15191f;border-radius:10px;margin:1rem .5rem 1rem 1rem}.header{grid-column-start:2;grid-column-end:2;grid-row-start:1;grid-row-end:1;background-color:#15191f;border-radius:10px;margin:1rem 1rem .5rem .5rem;display:flex;justify-content:end;position:relative}.content{grid-column-start:2;grid-column-end:2;grid-row-start:2;grid-row-end:2;display:flex;border-radius:10px;background-color:#15191f;margin:.5rem 1rem 1rem .5rem}.expense-content-container{color:#f5f5f5;width:100%;display:flex}.expense-table-container{width:35%;margin:1rem;max-height:84vh;overflow-y:auto;scrollbar-width:none;border-radius:5px}.expense-table-headers{display:flex;justify-content:space-around}.expense-table-headers li{flex:1;border:1px solid gray;border-bottom:none;padding:.25rem;text-align:center}.expense-table-headers>:first-child{border-top-left-radius:5px;border-right:none}.expense-table-headers>:nth-child(2){border-right:none}.expense-table-headers>:last-child{border-top-right-radius:5px}.expense-row-container{display:flex;position:relative}.expense-row-container>:last-child{background-color:#d3d3d3;border-right:gray}.expense-row-inputs{display:flex;flex:1;border:1px black solid;border-bottom:none;align-items:center;justify-content:center;position:relative}.expense-row-container input[type=text],.expense-row-container input[type=number]{background-color:#d3d3d3;width:100%;height:100%;text-align:center;border:none;padding:.25rem;outline:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.expense-row-container>:first-child{border-left:none;border-right:none}.expense-row-container>:nth-child(2){border-left:1px solid black}.expense-row-container>:last-child{border-left:none}.monthly-total-container,.monthly-remaining-container{display:flex;flex-direction:column;border:1px gray solid;align-self:flex-start;margin:1rem;align-items:center;border-radius:5px;width:20%}.monthly-total-label,.monthly-remaining-label{padding:.25rem}.monthly-total-amount,.monthly-remaining-amount{width:100%;background-color:#d3d3d3;text-align:center;color:#000;padding:.25rem;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.delete-row{position:absolute;right:.5rem;font-size:x-small;visibility:hidden;opacity:0;transition:opacity .2s ease-in,visibility 0s linear .2s}.expense-row-container:hover .expense-row-inputs:last-of-type .delete-row{visibility:visible;opacity:1;transition-delay:0s;cursor:pointer}.add-row{display:inline-block;font-size:x-large;color:#d3d3d3;padding:.25rem}.add-row:hover{cursor:pointer;color:#fff}.signup-container{display:grid;grid-template-rows:10% 90%;height:100vh}.signup-header{color:#f5f5f5e8;background-color:#15191f;margin:1rem;border-radius:10px;display:flex;justify-content:center;align-items:center;letter-spacing:1px}.signup-content{background-color:#15191f;margin:0 1rem 1rem;border-radius:10px;display:flex;flex-direction:column;align-items:center}.signup-form{margin:2rem;color:#f5f5f5f3;width:100%;max-width:450px}.signup-form label{font-size:medium;font-weight:100}.signup-form div{margin-top:.25rem;margin-bottom:1.25rem}.signup-form input{width:100%;background-color:#d3d3d3e0;border:none;border-radius:8px;height:2.25rem;font-size:large;padding-left:.5rem;border:solid 1px lightgray}.signup-button-container{display:flex;justify-content:space-between}.signup-button{margin-top:1rem;font-size:large;font-weight:600;width:100%;border-radius:10px;padding:.65rem 4rem;background:linear-gradient(135deg,#16a050df,#79e835);border:none;color:#000000b7}.signup-button:hover{cursor:pointer}.signup-content p{color:#f5f5f5d9;font-size:large}a{color:#90ee90e3;text-decoration:none}.dashboard>h2{text-align:center;padding:1rem;color:#f5f5f5ce;font-weight:500}.header>h2{align-self:center;color:#f5f5f5d5;font-weight:500;position:absolute;left:50%;transform:translate(-50%)}.logged-in{display:flex;align-items:center;margin-right:.5rem;color:#f5f5f5d5}.welcome{margin:.5rem}.logout{padding:.5rem}.logout:hover{cursor:pointer;background-color:#d3d3d31b;border-radius:25px;color:#f5f5f5}
