.loader-container{display:flex;justify-content:center;align-items:center;height:100%;width:100%;position:relative;margin:0!important}.loader-container .spinner{border:5px solid rgba(0,0,0,.1);border-top-color:#0088fe;border-radius:50%;animation:spin 1s linear infinite;margin:0!important}.loader-container .spinner.small{width:25px;height:25px}.loader-container .spinner.large{width:50px;height:50px}@keyframes spin{to{transform:rotate(360deg)}}.container{margin-top:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:0}.container .WelcomeComponent{width:70vw;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}.container .WelcomeComponent svg{font-size:120px;color:var(--primary)}.container .WelcomeComponent h2{font-size:46px;margin:20px 0 15px;font-weight:800}.container .WelcomeComponent p{font-size:18px;max-width:500px;min-width:300px;margin-bottom:15px}.container .WelcomeComponent .dots{display:flex;flex-direction:row}.container .WelcomeComponent .dots span{display:inline-block;margin-right:10px;border-radius:50%;width:10px;height:10px;cursor:pointer;background-color:#ddd;transition:all .4}.container .WelcomeComponent .dots span.active{background-color:var(--primary);width:40px;height:7px;border-radius:3px}@media(max-width:350px){.container .WelcomeComponent h2{font-size:40px}}@media(max-width:500px){.container .WelcomeComponent h2{font-size:40px}}.WelcomePage{position:relative;height:100vh;margin-bottom:0;display:flex;align-items:center}.WelcomePage .skip{text-decoration:none;color:var(--text);position:absolute;right:30px;top:50px}.WelcomePage .btnContainer{height:100%;display:flex;align-items:center;margin-bottom:0}.WelcomePage .btnContainer button,.WelcomePage .btnContainer a{text-decoration:none;display:flex;align-items:center;justify-content:center;padding:18px 0;width:200px;border-radius:10px;border:none;background-color:var(--primary);color:var(--background);cursor:pointer;font-size:18px;font-weight:600;text-align:center}.login{min-width:300px;margin:0 auto;margin-top:8vh;display:flex;flex-direction:column;background-color:#f4f4ff}.login .loginHeader{margin-bottom:20px}.login .loginHeader h2{font-weight:700;margin-bottom:5px;font-size:40px;letter-spacing:1px}.login .loginHeader p{color:var(--text);font-size:20px}.login div{display:flex;flex-direction:column;gap:5px;justify-content:start;margin-bottom:10px}.login div label{font-weight:600}.login div input{background-color:#f4f4ff;padding:10px 20px;border-radius:5px;border:1px solid var(--text-tint);font-size:16px}.login div input:focus{outline:3px solid var(--primary);outline-offset:1px}.login a{text-align:end;margin-bottom:15px;color:var(--primary)}.login .signupText{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:0}.login .signupText a{margin:0;text-decoration:none;color:var(--primary)}.login button{padding:18px 0;border-radius:10px;display:flex;gap:5px;align-items:center;align-self:center;justify-content:center;text-decoration:none;width:100%;border:none;background-color:var(--primary);color:var(--background);cursor:pointer;font-size:18px;font-weight:600;text-align:center}div{display:flex;flex-direction:column;gap:5px;justify-content:start;margin-bottom:10px}div label{font-weight:600}div input{padding:10px 20px;border-radius:5px;border:1px solid var(--text-tint);font-size:16px;background-color:#f4f4ff}div input:focus{outline:3px solid var(--primary);outline-offset:1px}.signupwith{margin-bottom:0}.signupwith .or{color:var(--text-tint);margin:15px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.signupwith .or p{min-width:fit-content}.signupwith .or span{display:inline-block;width:50%;height:.5px;background-color:var(--text-tint)}.signupwith .gmailBtn{margin-bottom:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;color:var(--text)}.signupwith .gmailBtn button{width:100%;font-weight:400;font-size:18px;padding:18px 0;border-radius:10px;border:1px solid var(--text-tint);background-color:var(--background);color:var(--text);cursor:pointer;background-color:#f4f4ff;transition:all .3s}.signupwith .gmailBtn button:hover{background-color:#fff}.trackly-toast{position:absolute;top:0;right:0;display:flex;align-items:center;flex-direction:row;gap:14px;background:#1e1e2f;color:#fff;padding:14px 18px;border-radius:14px;width:fit-content;box-shadow:0 12px 28px #00000040;animation:slideIn .25s ease forwards}.trackly-toast .icon{display:flex;align-items:center;justify-content:center}.trackly-toast .icon.success{color:#22c55e}.trackly-toast .icon.error{color:#ef4444}.trackly-toast .content{display:flex;flex-direction:column}.trackly-toast .content .title{font-size:14px;font-weight:600}.trackly-toast .content .message{font-size:13px;opacity:.8;margin-top:2px;text-transform:capitalize}@keyframes slideIn{0%{transform:translate(-50px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:700px){.trackly-toast{top:0;left:20%}}.btn{padding:18px 0;border-radius:10px;display:flex;gap:5px;align-items:center;align-self:center;justify-content:center;text-decoration:none;width:100%;border:none;background-color:var(--primary);color:var(--background);cursor:pointer;font-size:18px;font-weight:600;text-align:center}.signup{min-width:300px;margin:100px auto 0;display:flex;flex-direction:column;background-color:#f4f4ff}.signup .signHeader{margin-bottom:20px;text-align:start}.signup .signHeader h2{font-weight:700;margin-bottom:5px;font-size:40px;letter-spacing:1px}.signup .signHeader p{color:var(--text);font-size:16px}.signup .btn .btn{padding:18px 0;border-radius:10px;display:flex;gap:5px;align-items:center;align-self:center;justify-content:center;text-decoration:none;width:100%;border:none;background-color:var(--primary);color:var(--background);cursor:pointer;font-size:18px;font-weight:600;text-align:center}.signup .backToLogin{display:flex;flex-direction:row;align-items:center;gap:10px;justify-content:center;margin-bottom:0}.signup .backToLogin a{text-decoration:none;color:var(--primary)}@media(max-width:500px){.signup{margin-top:6vh}.signup .signHeader h2{font-size:30px}}@media(max-width:1280px){.signup{margin-top:4vh}.signup .signHeader h2{font-size:30px}}.layout{display:flex;flex-direction:row;margin-bottom:0;position:relative}.layout .app{width:85vw;margin-left:18vw;height:auto}.layout .nav{position:fixed;z-index:5;top:20px;right:0;display:none}.layout .nav .menuBtn{display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;width:40px;height:40px;background-color:var(--primary);border-radius:5px}.layout .nav .menuBtn svg{color:#fff;width:30px;height:30px}.layout aside{position:fixed;margin-top:40px;margin-right:20px;width:15vw;display:flex;flex-direction:column;gap:10px}.layout aside a:link,.layout aside a:visited{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--text);font-weight:500;border-radius:10px;padding:15px 0 15px 20px}.layout aside a:hover,.layout aside a:active{background-color:#11182708}.layout aside a:focus{color:var(--primary);background-color:#4e46e51b}.layout aside .logoBox{min-width:150px;padding-left:20px;display:flex;flex-direction:row;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--text-tint)}.layout aside .logoBox .logo{display:inline-block;background:var(--gradient);min-width:30px;min-height:30px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--background);border-radius:5px}.layout aside .logoBox div{justify-self:center;margin-bottom:0}.layout aside .logoBox div span{font-size:12px;color:var(--text-tint)}.layout aside .addTransaction{display:flex;align-items:center;gap:5px;justify-content:center;padding:15px;border-radius:10px;border:none;cursor:pointer;font-weight:600;background:var(--gradient);color:var(--background)}.layout aside .logout{background-color:#f4f4ff;display:flex;flex-direction:row;align-items:center;justify-content:start;gap:10px;border:none;border-radius:10px;padding:15px 0 15px 20px;transition:all .3s;cursor:pointer;font-size:16px;font-weight:500}.layout aside .logout:hover{background-color:var(--primary);color:#f9fafb}@media(max-width:740px){.layout .nav{display:block}.layout .app{margin:0 auto}.layout .app .dashboard{padding-left:0}}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000;height:100vh}.modal{width:500px;max-width:90vw;height:fit-content;overflow-y:scroll;background:#fff;border-radius:14px;box-shadow:0 20px 40px #0003;animation:scaleIn .2s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee}.modal-header h3{margin:0;font-size:18px}.close-btn{background:none;border:none;font-size:25px;cursor:pointer;color:#000}.modal-content{padding:20px}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.addExpense{background-color:#fff}.addExpense .type{background-color:#eee;display:flex;flex-direction:row;gap:10px;padding:3px;border-radius:10px}.addExpense .type span{display:block;width:50%;text-align:center;padding:15px;border-radius:10px;cursor:pointer}.addExpense .type span.active{background-color:#fff}.addExpense .amount{display:flex;align-items:center;margin:40px 0}.addExpense .amount .money{font-size:40px;font-weight:600}.addExpense .numsGrid,.addExpense ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:40px}.addExpense ul{list-style:none}.addExpense .payments{display:grid;grid-template-columns:1fr 1fr}.addExpense .dateBox{display:flex;flex-direction:column;justify-content:center}.addExpense .dateBox input,.addExpense .dateBox .note{border-radius:10px;border:1px solid #ccc;padding:10px;color:var(--text-tint)}.addExpense .dateBox textarea.note{outline:none;height:100px}.addExpense .btn{padding:18px 0;border-radius:10px;display:flex;gap:5px;align-items:center;align-self:center;justify-content:center;text-decoration:none;width:100%;border:none;background-color:var(--primary);color:var(--background);cursor:pointer;font-size:18px;font-weight:600;text-align:center}.num{border:none;padding:15px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.num:hover{background-color:#e3e1e1}.categoryItem{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;border:1px solid;border-radius:10px;list-style:none;padding:15px;border:1px solid #ccc;color:var(--text);min-width:100px}.categoryItem .icon{font-size:30px}.categoryItem span{display:block}.categoryItem svg{color:var(--primary)}.categoryItem:hover{background-color:#eef2ff;cursor:pointer}.categoryItem.active{background-color:#eef2ff;border:2px solid var(--primary)}.categoryItem.colorName{color:var(--primary);font-weight:600}.category{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.sideBar{position:fixed;margin-top:40px;margin-right:20px;width:15vw;display:flex;flex-direction:column;gap:10px}.sideBar a:link,.sideBar a:visited{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--text);font-weight:500;border-radius:10px;padding:15px 0 15px 20px}.sideBar a:hover,.sideBar a:active{background-color:#11182708}.sideBar a:focus{color:var(--primary);background-color:#4e46e51b}.sideBar .logoBox{min-width:150px;padding-left:20px;display:flex;flex-direction:row;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--text-tint)}.sideBar .logoBox .logo{display:inline-block;background:var(--gradient);min-width:30px;min-height:30px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--background);border-radius:5px}.sideBar .logoBox div{justify-self:center;margin-bottom:0}.sideBar .logoBox div span{font-size:12px;color:var(--text-tint)}.sideBar .addTransaction{display:flex;align-items:center;gap:5px;justify-content:center;padding:15px;border-radius:10px;border:none;cursor:pointer;font-weight:600;background:var(--gradient);color:var(--background)}.sideBar .logout{background-color:#f4f4ff;display:flex;flex-direction:row;align-items:center;justify-content:start;gap:10px;border:none;border-radius:10px;padding:15px 0 15px 20px;transition:all .3s;cursor:pointer;font-size:16px;font-weight:500}.sideBar .logout:hover{background-color:var(--primary);color:#f9fafb}@media(max-width:740px){.sideBar.large{display:none}}.mobileNav div{display:flex;flex-direction:column;justify-content:center;gap:20px}.mobileNav div a:link,.mobileNav div a:visited{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--text);font-weight:500;border-radius:10px;padding:15px 0 15px 20px}.mobileNav div a:hover,.mobileNav div a:active{background-color:#11182708}.mobileNav div a:focus{color:var(--primary);background-color:#4e46e51b}.mobileNav div .addTransaction,.mobileNav div .logout{display:flex;align-items:center;gap:5px;justify-content:center;padding:15px;border-radius:10px;border:none;cursor:pointer;font-weight:600;background:var(--gradient);color:var(--background)}.barChartItem{height:100%;display:flex;flex-direction:column;justify-content:flex-end;background-color:#fff;padding:20px 20px 40px;margin-bottom:0;border-radius:10px}.barChartItem .recharts-wrapper *:focus{outline:none}@media(max-width:1050px){.barBox{grid-column:span 2}.barBox .barChartItem{height:400px}}.overviewBox{margin-bottom:40px}.overviewBox .overview{color:var(--background);margin-bottom:0}.overviewBox .overview .text{margin-bottom:20px}.overviewBox .overview .text span{font-size:13px}.overviewBox .overview .text h2{font-size:30px}.overviewBox .overview .carousel{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.overviewBox .overview .carousel button{border:none;color:var(--background);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#cccbdf64}.overviewBox .overview .content{flex-direction:column;color:var(--text);background-color:var(--background);width:100%;border-radius:10px;height:auto;margin-bottom:0;padding:15px}.overviewBox .overview .content .title{display:flex;flex-direction:row;align-items:center;gap:5px;color:var(--text);margin-bottom:0}.overviewBox .overview .content .title svg{color:var(--primary)}.overviewBox .overview .content .title span{font-size:13px;columns:var(--text-tint)}.overviewBox .overview .content .money{font-size:40px;margin:10px 0;color:var(--text)}.overviewBox .overview .content .incomeExpensesBox{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:0}.overviewBox .overview .content .incomeExpensesBox .incomeBox,.overviewBox .overview .content .incomeExpensesBox .expenseBox{width:100%;background-color:#ddd;border-radius:10px;padding:15px;margin-bottom:0}.overviewBox .overview .content .incomeExpensesBox .incomeBox div,.overviewBox .overview .content .incomeExpensesBox .expenseBox div{display:flex;flex-direction:row;align-items:center;margin-bottom:5px}.overviewBox .overview .content .incomeExpensesBox .incomeBox{background-color:var(--success-tint)}.overviewBox .overview .content .incomeExpensesBox .incomeBox div span{font-size:13px}.overviewBox .overview .content .incomeExpensesBox .incomeBox div svg{color:var(--success)}.overviewBox .overview .content .incomeExpensesBox .incomeBox .incomeMoney{color:var(--success)}.overviewBox .overview .content .incomeExpensesBox .expenseBox{background-color:#ffe3e3}.overviewBox .overview .content .incomeExpensesBox .expenseBox div span{font-size:13px}.overviewBox .overview .content .incomeExpensesBox .expenseBox div svg{color:var(--danger)}.overviewBox .overview .content .incomeExpensesBox .expenseBox .expenseMoney{color:var(--danger)}.overviewBox .overview .content .incomeExpensesBox .expenseMoney,.overviewBox .overview .content .incomeExpensesBox .incomeMoney{font-weight:700;font-size:20px}@media(max-width:500px){.overviewBox .overview .content{height:auto}.overviewBox .overview .content .incomeExpensesBox{flex-direction:column}}.chartBullets{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:10px}.chartBullets .title{margin-bottom:0;display:flex;flex-direction:row;align-items:center}.chartBullets .title h4{color:var(--text-tint);font-weight:400}.chartBullets .title span{display:block;width:10px;height:10px;border-radius:50%}.pieChartItem{outline:none;display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:0;gap:0;background-color:#fff;padding:20px;border-radius:10px;height:auto}.pieChartItem .recharts-sector:focus{outline:none}.pieChartItem .recharts-wrapper *:focus{outline:none}.pieChartItem .chartBox{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:0}.pieChartItem .chartBox div{margin-bottom:0}.pieChartItem .pieChart,.pieChartItem .text{width:100%;margin-bottom:0}@media(max-width:780px){.pieChartItem{flex-direction:column}.pieChartItem .chartBox div{width:400px;height:400px}}.recentTrans{background-color:#fff;width:100%;border-radius:10px;margin-bottom:0;padding:20px}.recentTrans h2{font-size:20px;margin-bottom:20px}.recentTrans ul{list-style:none}.recentTrans ul li{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:20px}.recentTrans ul li div{justify-self:start;gap:10px;margin-bottom:0;display:flex;flex-direction:row;align-items:center}.recentTrans ul li div div{justify-self:start;margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start}.recentTrans ul li div div .date{font-size:14px;color:var(--text-tint)}.recentTrans ul li .price{display:flex;flex-direction:column;align-items:flex-start;width:100px}.recentTrans ul li .price .payment{font-size:14px;color:var(--text-tint)}@media(max-width:490px){.recentTrans ul li{font-size:14px;gap:10px}.recentTrans ul li div{flex-direction:column;align-items:start}.recentTrans ul li .price{align-items:end}}.nodata{padding:100px;font-size:18px;border-radius:10px;grid-column:span 2;background-color:#fff;text-align:center}.loaderBox{height:100vh;width:100%}.dashboard{width:100%;margin-bottom:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:15px;row-gap:0;padding-left:20px}.dashboard .overviewBox{background:var(--gradient);border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding:40px 30px}.dashboard .overviewBox,.dashboard .recentTransBox{grid-column:span 2}.dashboard .chartBox,.dashboard .barBox{width:100%}.dashboard .chartBox{display:flex;flex-direction:row}.dashboard .recentTransBox{grid-column:span 2}.centerLoader{display:flex;align-items:center;justify-content:center}@media(max-width:1050px){.dashboard .chartBox{grid-column:span 2}.dashboard .chartBox .pieChartItem{justify-content:space-between}.dashboard .chartBox .pieChartItem div{width:100%}}.expenseItem{list-style:none;padding:15px 20px;background-color:#fff;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-radius:10px;font-size:14px;margin-bottom:15px}.expenseItem div{justify-self:start;gap:10px;margin-bottom:0;display:flex;flex-direction:row;align-items:center}.expenseItem div svg{color:var(--primary)}.expenseItem div div{justify-self:start;margin-bottom:0;display:flex;flex-direction:column;align-items:flex-start}.expenseItem div div .desc{font-size:14px;color:var(--text-tint)}.expenseItem .price{display:flex;flex-direction:column;align-items:flex-end;width:100px}.expenseItem .price .box{display:flex;flex-direction:row;align-items:center;justify-content:end;justify-self:center}.expenseItem .price .payment{font-size:14px;color:var(--text-tint)}@media(max-width:490px){.expenseItem{padding:10px;margin-bottom:15px}.expenseItem .price{width:fit-content;justify-self:flex-end}.expenseItem .price .value{text-align:end;width:100%}}.deleteBtn{background:none;border:none}.deleteBtn svg{cursor:pointer;color:var(--danger)!important;width:30px;height:30px}.search{margin-top:40px;margin-left:30px;margin-bottom:20px;font-size:25px;width:calc(60% - 30px)}.search .searchBar{position:relative;color:#aaa;margin-bottom:0}.search .searchBar svg{position:absolute;top:20%;left:15px;color:#aaa}.search .searchBar input{border-radius:10px;color:#888;outline:none;padding:10px 0 10px 50px;border-color:#aaa}@media(max-width:490px){.search{margin:0;padding:10px;width:100%}}.filterBox{width:60%;margin-bottom:0}.filterBox button{margin-bottom:20px;margin-left:30px;width:fit-content;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;border:none;border-radius:10px;background-color:#f9fafb;padding:10px 20px;cursor:pointer;transition:.4s}.filterBox button:hover{background-color:#eee}.filterBox .filter{display:block;padding:20px;margin-left:30px;background-color:#f9fafb;border-radius:10px}.filterBox .filter h4{margin-bottom:10px}.filterBox .filter .type{display:flex;flex-direction:row;align-items:center;justify-content:start;margin:0;gap:15px;background-color:#f9fafb}.filterBox .filter .type button{background-color:#fff;border:1px solid #ddd;font-weight:700;padding:10px 20px;margin:0 0 10px}.filterBox .filter .type button.active{background-color:var(--primary);color:#fff}.filterBox .filter .dropdown{padding:10px 20px;border-radius:10px;font-size:18px;width:100%;outline-color:var(--primary)}@media(max-width:490px){.filterBox{width:100%}.filterBox button{margin:0 0 10px;align-self:center}.filterBox .filter{width:100%;margin:0}}.transaction{display:block;width:100%;padding-bottom:0;margin-bottom:0;background-color:#f4f4ff}.transaction .searchBox{background-color:#fff;width:100%;border-radius:10px}.transaction .searchBox .search{width:100%}.transaction .searchBox .incomeExpensesBox{display:flex;flex-direction:row;align-items:center;gap:10px;padding:0 30px;margin-bottom:0}.transaction .searchBox .incomeExpensesBox .incomeBox,.transaction .searchBox .incomeExpensesBox .expenseBox{width:100%;background-color:#ddd;border-radius:10px;padding:15px}.transaction .searchBox .incomeExpensesBox .incomeBox div,.transaction .searchBox .incomeExpensesBox .expenseBox div{display:flex;flex-direction:row;align-items:center;margin-bottom:5px}.transaction .searchBox .incomeExpensesBox .incomeBox{background-color:var(--success-tint)}.transaction .searchBox .incomeExpensesBox .incomeBox div span{font-size:13px}.transaction .searchBox .incomeExpensesBox .incomeBox div svg{color:var(--success)}.transaction .searchBox .incomeExpensesBox .incomeBox .incomeMoney{color:var(--success)}.transaction .searchBox .incomeExpensesBox .expenseBox{background-color:#ffe3e3}.transaction .searchBox .incomeExpensesBox .expenseBox div span{font-size:13px}.transaction .searchBox .incomeExpensesBox .expenseBox div svg{color:var(--danger)}.transaction .searchBox .incomeExpensesBox .expenseBox .expenseMoney{color:var(--danger)}.transaction .searchBox .incomeExpensesBox .expenseMoney,.transaction .searchBox .incomeExpensesBox .incomeMoney{font-weight:700;font-size:20px}.transaction .transactionList{padding-top:50px;list-style:none}.transaction .transactionList .loaderBox{width:100%;height:100%}@media(max-width:490px){.transaction .searchBox{width:100%}.transaction .searchBox .incomeExpensesBox{gap:4px;padding:0 5px 5px}.transaction .searchBox .incomeExpensesBox div{margin-bottom:0}.transaction .searchBox .search{width:100%}}.expenseBlock{margin-bottom:40px}.expenseBlock header{font-weight:500;padding-left:20px}.growthContainer{width:100%;margin-bottom:0}.growthContainer .box{width:100%;background:#e5e7eb;border-radius:10px;overflow:hidden;height:10px;margin-bottom:0}.growthContainer .box .growthBar{margin-bottom:0;height:100%;transition:width .4s ease}.growthContainer .box .normal{background:linear-gradient(to right,#22c55e,#16a34a)}.growthContainer .box .danger{background:linear-gradient(to right,#ff6b6b,#c92a2a)}.dangerMessage{background-color:#ffe3e3;text-align:start;padding:10px 20px;border-radius:10px;margin-top:10px;display:flex;flex-direction:row;align-items:center;gap:15px;color:#c92a2a;font-weight:300}.dangerMessage div{display:flex;flex-direction:row;align-items:center;margin-bottom:0}.dangerMessage .balance{font-weight:600}@media(max-width:490px){.dangerMessage{font-size:13px;padding:5px}}.budgetItem{padding:15px 30px;width:100%;background-color:#fff;border-radius:10px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.budgetItem .text{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:20px}.budgetItem .text .deleteBox{flex-direction:row;align-items:center}.budgetItem .text .iconNormal{color:#16a34a}.budgetItem .text .iconDanger{color:#c92a2a}.budgetItem .text .textBlock{margin-bottom:0;display:flex;flex-direction:row;align-items:center;gap:20px}.budgetItem .text .textBlock span{font-size:30px}.budgetItem .text .textBlock div{margin-bottom:0}.budgetItem .text .textBlock div h6{font-size:16px}.budgetItem .text .textBlock div p{color:var(--text-tint)}.budgetItem .stats{margin-top:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.budgetItem .stats .percent{color:var(--text-tint)}@media(max-width:490px){.budgetItem{padding:10px}}.createBudget{margin-bottom:0}.createBudget h4{margin-bottom:20px}.createBudget .category{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.createBudget .limit{position:relative}.createBudget .limit h4{margin-bottom:5px;margin-top:15px}.createBudget .limit input{padding:20px 0 20px 30px;font-size:20px;outline-offset:2px;outline-width:2px}.createBudget .limit span{position:absolute;top:63px;left:10px;font-size:20px;color:var(--text-tint)}.createBudget .buttons{display:flex;align-items:center;flex-direction:row;margin-bottom:0}.createBudget .buttons button{width:100%;padding:15px 20px;font-size:18px;font-weight:600;border:1px solid var(--text-tint);background-color:#fff;border-radius:10px}.createBudget .buttons .cancel{cursor:pointer}.createBudget .buttons .create{background-color:#d1d5dcd5;color:#fff;cursor:no-drop}.createBudget .buttons .create.active{background-color:var(--primary);color:#fff;border:none;cursor:pointer}.createBudget .buttons button:first-child:hover{background-color:#d1d5dc55}.loaderBox{display:flex;flex-direction:row;justify-content:center;align-items:center}.budget{background-color:#f4f4ff;width:100%}.budget .header{background-color:#fff;width:100%;padding-top:40px;padding-left:30px;padding-right:30px;border-radius:10px;box-shadow:0 2px 8px #0000001a}.budget .header h3{margin-bottom:10px}.budget .header .monthBudgets{width:100%;padding:20px 10px;background:linear-gradient(to bottom right,#5238f6,#9515fa);border-radius:10px;color:#fff}.budget .header .monthBudgets h3{font-size:16px;font-weight:400}.budget .header .monthBudgets p{font-weight:700;font-size:30px;margin-bottom:10px}.budget .header .monthBudgets .remain{font-weight:400;font-size:16px;padding-top:10px;margin-bottom:0}.budget .header h3{display:flex;font-size:25px;flex-direction:row;align-items:center;justify-content:space-between}.budget .header h3 button{width:40px;height:40px;cursor:pointer;border:none;background-color:none;border-radius:50%}.budget .header h3 button svg{border-radius:50%;width:100%;height:100%;color:#fff;background-color:var(--primary)}.budget .budgetList{width:100%}.loaderBox{display:flex;flex-direction:row;align-items:center;justify-content:center}.analytics{background-color:#f4f4ff;width:100%;height:fit-content;gap:10px}.analytics .header{background-color:#fff;padding-left:30px;padding-right:30px;padding-bottom:30px;border-radius:10px;margin-bottom:0;width:100%}.analytics .header .cardContainer{background-color:#fff;gap:20px;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}.analytics .header .cardContainer .card{flex-direction:column;justify-content:start;align-items:start}.analytics .header .cardContainer .card div{margin-bottom:0}.analytics .header h4{font-size:30px;margin-bottom:10px;margin-top:40px}.analytics .header div{display:flex;flex-direction:row;align-items:center;background-color:#f3f4f6;padding:5px;border-radius:10px;font-weight:500;width:300px}.analytics .header div button{font-size:16px;font-weight:600;width:100%;cursor:pointer;border:none;padding:15px 40px;border-radius:10px;background-color:#f3f4f6}.analytics .header div button.active{background-color:#fff}.analytics .body{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.analytics .body .chartAndBullet{width:100%;display:flex;flex-direction:row;align-items:center;margin-bottom:0;box-shadow:0 2px 8px #0000001a;border-radius:10px;background-color:#fff}.analytics .body .chartAndBullet .spendingChart{width:100%;margin-bottom:0;border-radius:10px}.analytics .body .chartAndBullet div.bulletBox{width:100%;margin-bottom:0;padding:20px;height:fit-content;background:#fff;border-radius:10px}.analytics .topSpending{width:100%;margin-bottom:0;background:linear-gradient(to bottom right,#9515fa,#5238f6);height:100%;padding:30px;border-radius:10px;color:#fff}.analytics .topSpending h6{font-size:14px;font-weight:400;display:flex;flex-direction:row;align-items:center;gap:5px}.analytics .topSpending h4{font-size:20px;margin-top:20px}.analytics .topSpending .box{margin-top:20px;display:flex;flex-direction:row;align-items:center;margin-bottom:0}.analytics .topSpending .box span{font-size:50px}.analytics .topSpending .box div{margin-bottom:0}@media(max-width:1270px){.analytics .header .cardContainer{flex-wrap:wrap;gap:30px}.analytics .header .cardContainer .card{margin-bottom:0}.analytics .body{width:100%}.analytics .body .chartAndBullet{grid-column:span 2;flex-direction:column;background-color:#fff}.analytics .body .topSpending{grid-column:span 2}}@media(max-width:890px){.analytics .header{display:flex;align-items:center;justify-content:center}.analytics .header .cardContainer{flex-wrap:wrap;align-items:center;justify-content:center}.analytics .header .cardContainer .card{margin-bottom:0}}@media(max-width:740px){.analytics .body .chartAndBullet{grid-column:span 2;flex-direction:column;padding:30px;border-radius:10px;background-color:#fff}.analytics .body .topSpending{grid-column:span 2}}@media(max-width:500px){.analytics{margin-bottom:30vh}.analytics .header{padding:0 10px}.analytics .header h4,.analytics .header div{width:100%}.analytics .header h4{text-align:center}}.card{width:100%;padding:20px;background-color:#fff;box-shadow:0 2px 8px #0000001a;border-radius:10px}.card div{display:flex;flex-direction:row;align-items:center;gap:10px}.card div .icon{padding:5px;border-radius:10px}.card p{font-weight:700;font-size:25px}.lineChartItem{width:100%;background-color:#fff;box-shadow:0 2px 8px #0000001a;padding:10px;height:400px;border-radius:10px;grid-column:span 2}.lineChartItem .recharts-wrapper *:focus{outline:none}.spendingChart{height:50vh;background-color:#fff;margin-bottom:0}.spendingChart h3{margin-top:20px;margin-left:20px;font-size:16px}.spendingChart div{margin-bottom:0}.spendingChart .recharts-sector:focus{outline:none}.spendingChart .recharts-wrapper *:focus{outline:none}.twoBarChart{height:400px;margin-top:50px;margin-bottom:0;background-color:#f9fafb;border-radius:10px;padding:20px;box-shadow:0 2px 8px #0000001a;grid-column:span 2}.twoBarChart .recharts-wrapper *:focus{outline:none}@media(max-width:500px){.analytics{margin-bottom:10vh}}.profile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh}*{box-sizing:border-box;margin:0;padding:0}#root{margin-bottom:0}body{margin:0 20px;background-color:var(--background);font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;color:var(--text);background-color:#f4f4ff;position:relative}:root{--primary: #4f46e5;--success: #22c55e;--success-tint: #22c55e24;--danger: #ef4444;--danger-tint: #ffe3e3;--background: #f9fafb;--background-hover: #4e46e51b;--text: #111827;--text-tint: #11182796;--headings: 600;--gradient: linear-gradient(90deg, #5738f7 0%, #9218fa 100%)}.refresh{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}