@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;box-sizing:border-box}:root{--FONT_FAMILY: "Poppins", sans-serif;--FONT_SIZE: clamp(14px, 2vw + 1rem, 18px)}body{display:flex;justify-content:center;align-items:center;position:relative}.container{position:relative;width:min(1000px,100vw);height:100vh}.transaction-container{display:flex;flex-direction:column;background-color:#281d60;overflow-y:scroll;color:#eae7f6}.header{height:10vh;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 5vw;font-size:var(--FONT_SIZE);font-family:var(--FONT_FAMILY)}.header .history-btn,.history-header button{background:transparent;border:none;color:#eae7f6;font-size:var(--FONT_SIZE)}.history-container{position:absolute;top:0;left:0;height:100vh;width:50%;margin-left:10px;background-color:#281d60;color:#eae7f6;overflow-y:scroll}.history-container::-webkit-scrollbar{display:none}.history-header{display:flex;height:10vh;width:100%;justify-content:space-around;align-items:center}div[class$=history]>label{height:5vh;width:100%;display:flex;justify-content:center;align-items:center}div[class$=history]>ul{display:flex;justify-content:space-around;align-items:center;list-style-type:square}li[id$=income]::marker{color:#14a44d;font-size:1.2rem}li[id$=expense]::marker{color:#dc4c64;font-size:1.2rem}.with-history{display:block}.without-history{display:none}.header h1{font-size:var(--FONT_SIZE);padding-right:35%}.money-details{display:flex;flex-direction:column;height:max(130px,15vh);margin:auto 20px}.money-details .money-balance{display:flex;flex-direction:row;height:50%;background-color:#329cf680;justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px;border-radius:10px;font-size:var(--FONT_SIZE);font-family:var(--FONT_FAMILY)}.money-income-expenses{display:flex;flex-direction:row;width:100%;height:50%;margin-top:10px}.money-income,.money-expenses{border-radius:10px;display:flex;justify-content:space-evenly;flex-direction:column;align-items:center;width:50%}.money-income{background-color:#fe983880;margin-right:5px;font-size:var(--FONT_SIZE);font-family:var(--FONT_FAMILY)}.money-expenses{background-color:#edb7cd80;margin-left:5px;font-size:var(--FONT_SIZE);font-family:var(--FONT_FAMILY)}.transactions{display:flex;flex-direction:column;width:calc(100% - 40px);margin:20px;height:25vh;background-color:transparent;padding-left:10px;padding-right:10px;border-radius:10px;overflow-y:auto;white-space:nowrap}.transactions::-webkit-scrollbar{display:none}.transactions ul{list-style-type:none;padding:0}.transactions li{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 10px;height:35px;background-color:#3e3470;font-family:monospace,serif;font-size:20px;margin:15px 0;border-radius:10px}.transactions li>label{color:#eae7f6}.new-transction{width:calc(100% - 40px);margin:20px;height:280px;font-size:var(--FONT_SIZE);font-family:var(--FONT_FAMILY)}.new-transction label{color:#eae7f6;padding-left:10px}.new-transction h1{font-size:20px;margin:10px auto;padding-left:10px;text-align:start;background-color:transparent;color:#eae7f6;border-radius:10px}.new-transction form{height:230px;display:flex;flex-direction:column;background-color:transparent;justify-content:space-between;color:#021814;border-radius:10px}.new-transction input{border-radius:10px;height:30px;margin:auto 10px;padding-left:10px;border:none;background-color:#3e3470}.new-transction button{border-radius:10px;height:30px;background-color:#fffefd;color:#281d60;border:none;margin:10px}.option-btn ul{height:35px;list-style-type:none;display:flex;justify-content:space-around;align-items:center;margin:10px;background-color:#3e3470;padding:5px;border-radius:10px}.option-btn li{width:50%;text-align:center;color:#e6deda}.hover-income-btn,.hover-expense-btn{background-color:#38c1fe}.option-btn ul li:first-child{border-radius:5px;margin:5px}.option-btn ul li:first-child:hover{color:#2e2e2d}.option-btn ul li:last-child{border-radius:5px;margin:5px}.option-btn ul li:last-child:hover{color:#2e2e2d}.description{display:flex;justify-content:center;align-items:center;width:calc(100% - 40px);height:25vh}div[class^=body]{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#281d60}section[class$=page]{display:flex;flex-direction:column;height:max(fit-content,450px);width:max(350px,30vw);margin:20px;align-self:center;align-items:center;justify-items:space-between;justify-self:center;background-color:#322867;color:#eff2ef;padding:20px;border-radius:20px;font-family:Poppins,sans-serif}section[class$=page]>*{padding:5px}[id^=header]{font-size:25px;font-weight:700}form[id~=validation]{width:100%}form[id~=validation] *{padding:5px 0}form[id~=validation] input{display:block;border:none;padding:10px;border-bottom:2px solid #fff;width:100%;margin:5px 0;outline:none;background-color:transparent}form[id~=validation] div[class$=message]{color:#e4a11b;font-size:smaller}form[id~=validation] button{padding:10px;width:100%;background-color:#0d6efd;outline:none;border:none;border-radius:10px;color:#f0f8ff;font-size:20px;transition:.2s}form[id~=validation] button:hover{background-color:#036efd99;cursor:pointer}div[id^=optional]{font-size:12px}@media (min-width:768px){.header .history-btn,.history-header button{display:none}.transaction-container{position:absolute;top:0;left:50%;right:0;bottom:0}.history-container{display:block;margin:0;position:absolute;left:0;top:0;right:50%}.header{display:flex;justify-content:center;align-items:center}}