@import"https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";*{padding:0;margin:0;box-sizing:border-box}:root{--clr-primary: #29221d;--clr-primary-light: #473b33;--clr-secondary: #1e1611;--clr-white: #fff;--clr-black: #000;--clr-pumpkin: #fe6c00;--clr-silver: #a8a5a6;--clr-silver-v1: #bdbabb;--clr-scarlet: #fe1e00;--clr-scarlet-v1: rgb(254, 30, 0, .79);--clr-green: #00fe93;--clr-yellow: #fec80a;--clr-jet: #302924;--clr-peach: #ffc397;--font-family-bai: "Bai Jamjuree", sans-serif;--transition-default: all .3s ease-in-out;font-size:62.5%}body{font-family:var(--font-family-bai);font-size:1.6rem}ul{list-style-type:none}a{color:unset;text-decoration:none;color:var(--clr-white)}button{background-color:transparent;border:none;cursor:pointer}.img-fit-cover img{width:100%;height:100%;object-fit:cover}.text-white{color:var(--clr-white)}.text-silver-v1{color:var(--clr-silver-v1)}.text-scarlet{color:var(--clr-scarlet)}.text-green{color:var(--clr-green)}.bg-jet{background:var(--clr-jet)}.text-sm{font-size:14px}.app-wrapper{display:flex;min-height:100vh}.lg-value{font-size:24px;font-weight:600}.grid-common{background-color:var(--clr-primary);border-radius:12px;box-shadow:#0000000d 0 8px 24px;color:var(--clr-white);padding:24px}.grid-c-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.grid-c-title-text{font-weight:400;color:var(--clr-silver)}.grid-c-title-icon img{width:24px;transition:all .3s ease-in}.grid-c-title-icon img:hover{transform:scale(1.25);filter:brightness(0) invert(1)}@media screen and (max-width: 1400px){.grid-common{padding:16px}}.sidebar{background-color:var(--clr-primary);width:260px;width:20%;padding:36px 20px;transition:var(--transition-default);position:relative}.sidebar__close-btn{position:absolute;right:2rem;top:3.8rem;background-color:#fcfcfc;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:1.5rem;font-weight:500}.sidebar__user{display:flex;justify-content:flex-start;align-items:center;column-gap:16px}.sidebar__user-img{width:48px;height:48px;overflow:hidden;border-radius:100%;box-shadow:0 5px 15px #00000059;transition:var(--transition-default)}.sidebar__user-img:hover{transform:scale(1.03);cursor:pointer}.sidebar__user-name{font-size:20px;font-weight:500;color:var(--clr-white);text-transform:uppercase}.sidebar__navigation{margin-top:28px;height:500px;height:600px;overflow-y:scroll}.sidebar__navigation::-webkit-scrollbar{width:4px}.sidebar__navigation::-webkit-scrollbar-thumb{background-color:var(--clr-pumpkin);border-radius:18px}.sidebar__navigation::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #0000004d;border-radius:18px}.sidebar--toggle{margin-left:-20%}.sidebar__navigation__list-item{margin-bottom:10px;margin-right:4px}.sidebar__navigation__list-link{display:block;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:flex-start;column-gap:12px;padding:6px 14px;letter-spacing:.03em;border:1px solid transparent;transition:var(--transition-default)}.sidebar__navigation__list-link:hover{border:1px solid var(--clr-primary-light)}.sidebar__navigation__list-link.active{background-color:var(--clr-pumpkin);box-shadow:0 20px 25px 5px #0000001a,10px 10px -5px #0000000a}.sidebar__navigation__list-title{text-transform:capitalize}@media screen and (max-width: 1400px){.sidebar{padding:24px 16px}}@media screen and (max-width: 1200px){.sidebar{width:72px;padding-left:12px;padding-right:12px}.sidebar--toggle{margin-left:-72px}.sidebar__user-name{display:none}.sidebar__navigation__list-item{display:flex;justify-content:center;margin-bottom:18px}.sidebar__navigation__list-link{padding:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.sidebar__navigation__list-link.active,.sidebar__navigation__list-link:hover{border-radius:100%}.sidebar__navigation__list-title{display:none}}@media screen and (max-width: 420px){.sidebar{margin-left:-72px}.sidebar--toggle{margin-left:0}}.content-wrapp{background-color:var(--clr-secondary);flex:1;padding:32px}@media screen and (max-width: 1200px){.content-wrap{padding-left:20px;padding-right:20px}}.content-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.content-top__left{display:flex;align-items:center}.content-top__left__sidebar-toggle{display:flex;align-items:center;margin-right:12px}.content-top__left__sidebar-toggle img{width:20px}.content-top__title{color:var(--clr-white);font-size:20px;font-weight:600}.content-top__right__btn{margin-left:18px}.content-top__right__btn img{width:24px}.content-top__right__btn img:hover{filter:brightness(0) invert(1)}.main-content{display:grid;row-gap:20px}.main-content__grid-one,.main-content__grid-two{display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px}.main-content__grid-two__subgrid{display:grid;row-gap:20px;height:100%}@media screen and (max-width: 992px){.main-content__grid-one,.main-content__grid-two{grid-template-columns:repeat(2,1fr);row-gap:16px}.grid-two-item:nth-child(3){grid-column-start:1;grid-column-end:3}.grid-two-item:nth-child(3) .main-content__grid-two__subgrid{grid-template-columns:repeat(2,1fr);height:220px;column-gap:16px}}@media screen and (max-width: 768px){.main-content__grid-one,.main-content__grid-two{grid-template-columns:repeat(1,1fr)}.grid-one-item,.grid-two-item{grid-column-start:1;grid-column-end:3}.grid-two-item:nth-child(3) .main-content__grid-two__subgrid{grid-template-columns:repeat(1,1fr);height:auto}.grid-two-item:nth-child(3) .main-content__grid-two__subgrid__item{height:220px}}.grid-c1{display:flex;flex-direction:column}.grid-c1__content{background:linear-gradient(114.04deg,#423b3799 3.49%,#423b3700 34.7%),linear-gradient(138.58deg,#3b2b1e5e 43.56%,#fea767 112.68%);background-size:200% 200%;background-position:left top;background-position:right top;transition:background-position .5s ease;flex:1;border-radius:10px;padding:16px}.grid-c1__content:hover{background-position:right top;background-position:left top}.grid-c1__content .lg-value{margin-top:8px;margin-bottom:16px;color:#c7c4c6}.grid-c1__content__pin{display:flex}.grid-c1__content__pin-hidden{font-size:32px;margin-right:8px}.grid-c1__content__pin span:nth-child(2){color:#8a8587}.grid-c1__content__expiry{display:flex;justify-content:space-between;align-items:center}.grid-c1__content__expiry-text{margin-bottom:8px}.grid-c1__content__expiry-logo{display:flex;align-items:center}.logo-shape1,.logo-shape2{width:36px;height:36px;border-radius:100%;transition:transform .3s ease-in}.logo-shape1{background-color:var(--clr-scarlet-v1);margin-right:-15px;z-index:0}.logo-shape2{background-color:var(--clr-yellow)}.grid-c1__content__expiry-logo:hover .logo-shape1,.grid-c1__content__expiry-logo:hover .logo-shape2,.grid-c1__content:hover .logo-shape1,.grid-c1__content:hover .logo-shape2{transform:scale(1.1)}.grid-c2{display:flex;flex-direction:column}.grid-c2__content{flex:1}.grid-c2__content-boxes{display:flex;flex-direction:column;justify-content:space-between;row-gap:28px}.grid-c2__content-boxes__transaction{display:flex;flex-direction:row;justify-content:space-between;align-items:center;transition:transform .3s ease-in}.grid-c2__content-boxes__transaction:hover{transform:scale(1.01);cursor:pointer}.grid-c2__content-boxes__transaction-profile{display:flex;align-items:center;column-gap:10px}.grid-c2__content-boxes__transaction-profile .avatar{width:40px;height:40px;border-radius:100%;overflow:hidden}.grid-c2__content-boxes__transaction-profile .text{font-weight:600;color:var(--clr-silver-v1)}.grid-c2__content-boxes__transaction-profile .t-date{font-weight:400;margin-top:4px;font-size:15px;color:#8a8587}.grid-c2__content-boxes__transaction-amount p{font-weight:500}.grid-c3{display:flex;flex-direction:column}.grid-c3__content{flex:1}.grid-c3__content__chart{display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;height:100%}.grid-c3__content__chart-verti{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:28px}.grid-c3__content__chart-bar{display:flex;flex-direction:column;text-align:center}.grid-c3__content__chart-bar-wrap{background-color:var(--clr-primary-light);flex:1;width:32px;margin-right:auto;margin-left:auto;border-radius:10px;overflow:hidden;position:relative;transition:all .3s ease-in}.grid-c3__content__chart-bar-wrap:hover{transform:scale(1.02)}.grid-c3__content__chart-bar-wrap .bar-item1{position:absolute;bottom:0;left:0;width:100%;background-color:var(--clr-pumpkin);border-radius:10px}.grid-c3__content__chart-bar-wrap .bar-item2{position:absolute;bottom:0;left:0;width:100%;height:0;background-color:var(--clr-peach);border-radius:10px}.grid-c3__content__chart-bar.highlight .bar-item1{z-index:1}.grid-c3__content__chart-bar .horizontal{margin-top:12px}@media screen and (max-width: 992px){.grid-c3{height:250px;grid-column-start:1;grid-column-end:3}}.grid-c4-top{display:flex;justify-content:space-between;align-items:center}.grid-c4__content{margin-top:20px;border-radius:16px}.grid-c4__content__budgets{padding:12px}.grid-c4__content__budgets-box{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.grid-c4__content__budgets-box__left{display:flex;align-items:flex-start;column-gap:16px}.grid-c4__content__budgets-box__left .bb__icon{display:flex;align-items:flex-start;justify-content:center}.grid-c4__content__budgets-box__left .bb__icon img{width:20px}.grid-c4__content__budgets-box__left .bb__text{font-weight:600}.grid-c4__content__budgets-box__left .bb__text p:nth-child(2){font-weight:300;font-size:15px;margin-top:5px;opacity:.6}.grid-c5__content__subscriptions{display:flex;flex-direction:column;row-gap:16px}.grid-c5__content__subscriptions-box{display:flex;justify-content:space-between;align-items:center;transition:all .3s ease-in}.grid-c5__content__subscriptions-box:hover{transform:scale(1.01)}.grid-c5__content__subscriptions-box__text{display:flex;align-items:center;column-gap:10px}.grid-c5__content__subscriptions-box__text .icon{background-color:#fe1e0026;width:32px;height:32px;border-radius:100%;display:flex;align-items:center;justify-content:center}.grid-c5__content__subscriptions-box__text .icon img{width:16px}.grid-c5__content__subscriptions-box__text .text{color:var(--clr-silver-v1)}.grid-c5__content__subscriptions-box__text .text span{color:#8a8587;font-size:15px}.grid-c5__content__subscriptions-box__price{font-weight:600}.grid-c6__content__savings-box__profile{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;transition:all .3s ease-in}.grid-c6__content__savings-box__profile:hover{transform:scale(1.01)}.grid-c6__content__savings-box__profile-text{display:flex;align-items:center;column-gap:10px}.grid-c6__content__savings-box__profile-text .avatar{width:40px;height:40px;border-radius:50%;overflow:hidden}.grid-c6__content__savings-box__profile-text .text{color:var(--clr-silver-v1);font-weight:600}.grid-c6__content__savings-box__badges-box{display:flex;flex-wrap:wrap}.grid-c6__content__savings-box__badges-box span{color:#8a8587;background-color:var(--clr-jet);display:inline-block;border-radius:16px;padding:4px 6px;margin-top:5px;margin-bottom:5px;margin-right:6px;font-size:12px}.grid-c6__content__savings-box__badges-bar{background-color:var(--clr-primary-light);height:10px;border-radius:100vh;margin-top:8px}.grid-c6__content__savings-box__badges-bar-fill{background-color:var(--clr-pumpkin);width:60%;height:100%;border-radius:100vh}.grid-c7__content{margin-top:-42px;margin-bottom:-128px;display:flex;align-items:center;justify-self:flex-start}.grid-c7__content__progress-bar{display:flex;align-items:center;justify-content:center}.grid-c7__content__progress-bar__percent{position:relative}.grid-c7__content__progress-bar__percent svg{position:relative;width:210px;height:210px;transform:rotate(-90deg)}.grid-c7__content__progress-bar__percent svg circle{width:100%;height:100%;fill:none;stroke:var(--clr-jet);stroke-width:20;stroke-linecap:round}.grid-c7__content__progress-bar__percent svg circle:last-of-type{stroke-dasharray:600px;stroke-dashoffset:calc(625px - (600px * var(--percent)) / 168);stroke:var(--clr-pumpkin)}.grid-c7__content__progress-bar__number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.grid-c7__content__progress-bar__number h3{font-weight:200;font-size:20px;font-weight:500}.grid-c7__content__progress-bar__number h3 span{font-size:14px}.grid-c7__content__progress-bar{margin-left:-46px}.grid-c7__content__data-list{margin-left:-20px}.grid-c7__content__data-list-item{margin-bottom:20px}.data-list-item__value{margin-top:8px;display:block;font-weight:600}