@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed);margin:.75rem}.header__container{width:100%;height:var(--header-height);background-color:var(--body-color);box-shadow:0 2px 24px var(--shadow-color);display:flex;justify-content:space-between;align-items:center;padding-inline:1.5rem;border-radius:.25rem;transition:background-color .4s}.header__logo{display:inline-flex;align-items:center;column-gap:.25rem}.logo{font-size:1.5rem;color:var(--first-color)}.header__logo span{color:var(--title-color);font-weight:var(--font-semi-bold)}.header__toggle{font-size:1.5rem;color:var(--title-color);cursor:pointer;display:inline-flex;align-items:center}@media screen and (max-width: 360px){.header__container{padding-inline:1rem}}@media screen and (min-width: 1150px){.header{margin:1rem;padding-left:252px;transition:padding .4s}.header__container{height:calc(var(--header-height) + 2rem);padding-inline:2rem}.header__logo{order:1}.left-pd{padding-left:114px}}:root{--header-height: 3.5rem;--first-color: #8b5f88;--title-color: hsl(228, 18%, 16%);--text-color: hsl(228, 8%, 56%);--body-color: hsl(228, 100%, 99%);--shadow-color: hsla(228, 80%, 4%, .1);--body-font: "Nunito Sans", sans-serif;--normal-font-size: .938rem;--smaller-font-size: .75rem;--tiny-font-size: .75rem;--font-regular: 400;--font-semi-bold: 600;--z-tooltip: 10;--z-fixed: 100}@media screen and (min-width: 1150px){:root{--normal-font-size: 1rem;--smaller-font-size: .813rem}}*{box-sizing:border-box;padding:0;margin:0}body{font-family:var(--body-font);font-size:var(--normal-font-size);background-color:var(--body-color);color:var(--text-color);transition:background-color .4s}a{text-decoration:none}img{display:block;max-width:100%;height:auto}button{all:unset}.container{margin-inline:1.5rem}.main-content{padding-top:5rem;position:relative}@media screen and (min-width: 1150px){.main-content{padding-left:252px;padding-top:8rem;transition:padding .4s}.left-pd{padding-left:114px}}.sidebar{position:fixed;left:-120%;top:0;bottom:0;z-index:var(--z-fixed);width:228px;background-color:var(--body-color);box-shadow:2px 0 24px var(--shadow-color);padding-block:1.5rem;margin:.75rem;border-radius:4px;transition:left .5s,background-color 15s,width .5s}.sidebar__container,.sidebar__content{display:flex;flex-direction:column;row-gap:3rem}.sidebar__container{height:100%;overflow:hidden}.sidebar__user{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;column-gap:1rem;padding-left:2rem}.sidebar__img{position:relative;width:50px;height:50px;background-color:#9accbb;border-radius:50%;overflow:hidden;display:grid;justify-items:center}.sidebar__img img{position:absolute;width:36px;bottom:-1px}.sidebar__info h3{font-size:var(--normal-font-size);color:var(--title-color);transition:color .4s}.sidebar__info span{font-size:var(--smaller-font-size)}.sidebar__content::-webkit-scrollbar{width:.4rem;background-color:#d6d7dc}.sidebar__content::-webkit-scrollbar-thumb{background-color:#babcc4}.sidebar__title{width:max-content;font-size:var(--tiny-font-size);font-weight:var(--font-semi-bold);padding-left:2rem;margin-bottom:1.5rem}.sidebar__list,.sidebar__actions{display:grid;row-gap:1.5rem}.sidebar__link{position:relative;display:grid;grid-template-columns:repeat(2,max-content);align-items:center;column-gap:1rem;color:var(--text-color);padding-left:2rem;transition:color .4s,opacity .4s}.sidebar__link .icon{font-size:1.25rem}.sidebar__link span{font-weight:var(--font-semi-bold)}.sidebar__link:hover{color:var(--first-color)}.sidebar__actions{margin-top:auto}.sidebar__actions button{cursor:pointer}.sidebar__theme{width:100%;font-size:1.25rem}.sidebar__theme span{font-size:var(--normal-font-size);font-family:var(--body-font)}.show-sidebar{left:0}.active-link{color:var(--first-color)}.active-link:after{content:"";position:absolute;left:0;width:3px;height:20px;background-color:var(--first-color)}@media screen and (max-width: 360px){.sidebar{width:max-content}.sidebar__info,.sidebar__link span{display:none}.sidebar__user,.sidebar__list,.sidebar__actions{justify-content:center}.sidebar__user,.sidebar__link{grid-template-columns:max-content}.sidebar__user{padding:0}.sidebar__link{padding-inline:2rem}.sidebar__title{padding-inline:.5rem;margin-inline:auto}}@media screen and (min-width: 1150px){.sidebar{left:0;width:228px;margin:1rem}.sidebar__info,.sidebar__link span{transition:opacity .4s}.sidebar__user,.sidebar__title{transition:padding .4s}.show-sidebar{width:90px}.show-sidebar .sidebar__user{padding-left:1.25rem}.show-sidebar .sidebar__title{padding-left:0;margin-inline:auto}.show-sidebar .sidebar__info,.show-sidebar .sidebar__link span{opacity:0}}.button{--main-focus: #2d8cf0;--font-color: #323232;--bg-color-sub: #dedede;--bg-color: #eee;--main-color: #323232;position:fixed;bottom:5%;right:12%;width:150px;height:40px;cursor:pointer;display:flex;align-items:center;border:2px solid var(--main-color);box-shadow:4px 4px var(--main-color);background-color:var(--bg-color);border-radius:10px;overflow:hidden;z-index:999}.button,.button__icon,.button__text{transition:all .3s}.button .button__text{transform:translate(22px);color:var(--font-color);font-weight:600}.button .button__icon{position:absolute;transform:translate(109px);height:100%;width:39px;background-color:var(--bg-color-sub);display:flex;align-items:center;justify-content:center}.button .svg{width:20px;fill:var(--main-color)}.button:hover{background:var(--bg-color)}.button:hover .button__text{color:transparent}.button:hover .button__icon{width:148px;transform:translate(0)}.button:active{transform:translate(3px,3px);box-shadow:0 0 var(--main-color)}.card{background-color:#ffcce7;border-radius:8px;text-align:center;width:200px;height:120px}.card-header{background-color:#7a2946;border-radius:8px 8px 0 0;height:50%;display:flex;justify-content:center;align-items:center;padding:.25rem}.card-header h2{margin:0;color:#fff;font-size:1.2rem}.card-content{padding-block:1rem;display:flex;align-items:center;justify-content:center;gap:5px}.amount{display:block;font-size:1rem;font-weight:700}.green{background-color:#e3f1c5;color:#203422}.yellow{background-color:#ffec9e;color:#762806}.header-green{background-color:#72bf78;color:#fff}.header-yellow{background-color:#ffbb70;color:#fff}.header-blue{background-color:#8eaccd;color:#fff}.table-section{display:flex;flex-direction:column;gap:20px}.cards-budget-container{position:fixed;display:flex;flex-direction:column;gap:5px;background-color:#fff;box-shadow:2px 2px 24px var(--shadow-color);padding:10px;border-radius:5px}.budget-container{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:1rem;margin-bottom:2rem}@media (max-width: 768px){.budget-container{grid-template-columns:1fr}}.table-row{display:flex;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #ccc;align-items:center;position:relative}.table-cell{flex:1}.amount{text-align:right}.menu-button{cursor:pointer;padding:5px}.dropdown-menu{background-color:#fff;color:#868998;border-radius:8px;box-shadow:0 4px 8px #0000001a;z-index:1000;padding:10px;position:absolute;top:100%;left:0;transform:translate(-50%);white-space:nowrap}.dropdown-option{display:block;width:100%;padding:8px 10px;text-align:center;border:none;background-color:transparent;cursor:pointer;box-sizing:border-box;transition:background-color .2s ease}.dropdown-option:hover{background-color:#e0e0e0}.dropdown-option.close{color:#ff4d4d}.reusable-table{width:100%;border:1px solid #ddd;border-radius:5px;background-color:#f5f5f5;overflow:hidden;margin:0 auto;font-family:Arial,sans-serif;box-shadow:0 2px 4px #0004}.table-title{background-color:#8b5f88;color:#fff;text-align:center;padding:10px}.table-content{padding:10px}.scrollable-container{max-height:132px;overflow-y:auto;padding:10px}.scrollable-container::-webkit-scrollbar{width:.4rem;background-color:#d6d7dc}.table-header,.table-row{display:flex;justify-content:space-between;padding:8px;background-color:#fff;border-radius:5px;margin-bottom:8px;box-shadow:0 2px 4px #0000001a}.table-header{background-color:#b68fb3;color:#331f30}.table-footer{padding:10px;position:relative;z-index:1}.total-row{display:flex;justify-content:space-between;padding:10px;background-color:#b68fb3;color:#331f30;font-weight:700;border-radius:5px;margin-bottom:10px}.add-button{box-sizing:border-box;text-align:center;width:100%;font-size:18px;color:#fff;background-color:#8b5f88;border:none;border-radius:5px;padding:5px 15px;cursor:pointer}.add-button:hover{background-color:#a46aa0}.blue{background-color:#d2e0fb;color:#0a1c24}.red{background-color:#ffbddd;color:#39090a}.yellow{background-color:#ffd8a9;color:#441506}.back-yellow{background-color:#9b7144}.back-red{background-color:#8e3e63}.back-blue{background-color:#748ca7}.hover-yellow{background-color:#9b7144}.hover-yellow:hover{background-color:#d69c5e}.hover-red{background-color:#8e3e63}.hover-red:hover{background-color:#b95282}.hover-blue{background-color:#748ca7}.hover-blue:hover{background-color:#91adce}