@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: #02201a;--clr-primar-light: #473b33;--clr-secondary: #000000;--clr-white: #fff;--clr-black: #000;--clr-pumpkin: #098321;--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: #2f372e;--clr-peach: #473b33;--font-family-bai: "Bai Jamjuree", sans-serif;--transition-default: all .3s ease-in-out}body{font-family:var(--font-family-bai)}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}.news-feed-title{color:#048e59;size:15px;font:bold}.text-white{color:var(--clr-white)}.text-silver-v1{color:var(--clr-silver-v1)}.text-scarlet,.text-earnings{color:#88f1f4}.text-green{color:var(--clr-green)}.bg-jet{background:var(--clr-jet)}.text-sm{font-size:14px}.app{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}@media screen and (max-width: 1400px){.grid-common{padding:16px}body{font-size:14px!important}}.sidebar{background-color:var(--clr-primary);width:260px;padding:36px 20px;transition:var(--transition-default)}.user-info{display:flex;justify-content:flex-start;align-items:center;column-gap:16px}.info-name{font-weight:500}.info-img{width:48px;height:48px;overflow:hidden;border-radius:100%;box-shadow:#01010159 0 5px 15px}.info-name{font-size:20px;color:var(--clr-white);text-transform:uppercase}.navigation{margin-top:28px;height:600px;overflow-y:scroll}.navigation::-webkit-scrollbar{width:4px}.navigation::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #0000004d;border-radius:18px}.navigation::-webkit-scrollbar-thumb{background-color:var(--clr-pumpkin);border-radius:18px}.sidebar-change{margin-left:-260px}.nav-item{margin-bottom:10px;margin-right:4px}.nav-link{display:block;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:flex;padding:6px 14px;column-gap:12px;letter-spacing:.03em;border:1px solid transparent;transition:var(--transition-default)}.nav-link:hover{border:1px solid var(--clr-primar-light)}.nav-link.active{background-color:var(--clr-pumpkin);box-shadow:#0000001a 0 20px 25px -5px,#0000000a 0 10px 10px -5px}.nav-link-icon{width:22px}.nav-link-text{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-change{margin-left:-72px}.info-name{display:none}.nav-item{display:flex;justify-content:center;margin-bottom:18px}.nav-link{padding:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.nav-link.active,.nav-link:hover{border-radius:100%}.nav-link-text{display:none}}@media screen and (max-width: 420px){.sidebar{margin-left:-72px}.sidebar-change{margin-left:0}}.main-content{background-color:var(--clr-secondary);flex:1;padding:32px}@media screen and (max-width: 1400px){.main-content{padding-left:20px;padding-right:20px}}@media screen and (max-width: 1200px){.main-content{padding-right:16px;padding-left:16px}}.main-content-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.sidebar-toggler{display:flex;align-items:center;margin-right:12px}.sidebar-toggler img{width:20px}.content-top-title{color:var(--clr-white);font-size:20px;font-weight:600}.content-top-btn{margin-left:18px}.content-top-btn img{width:24px}.content-top-btn img:hover{filter:brightness(0) invert(1)}.content-top-left{display:flex;align-items:center}.main-content-holder{display:grid;row-gap:20px}.content-grid-one,.content-grid-two{display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px}.subgrid-two{display:grid;row-gap:20px;height:100%}@media screen and (max-width: 1200px){.content-grid-one,.content-grid-two{column-gap:12px}.main-content-holder,.subgrid-two{row-gap:12px}}@media screen and (max-width: 992px){.content-grid-one{grid-template-columns:repeat(2,1fr);row-gap:12px}.content-grid-two{grid-template-columns:repeat(2,1fr)}.content-grid-two .grid-two-item:nth-child(3){grid-column-start:1;grid-column-end:3}.content-grid-two .grid-two-item:nth-child(3) .subgrid-two{grid-template-columns:repeat(2,1fr);height:220px;column-gap:12px}.content-grid-two{row-gap:12px}}@media screen and (max-width: 768px){.content-grid-one,.content-grid-two{grid-template-columns:repeat(1,1fr);column-gap:0}.content-grid-two .grid-two-item:nth-child(1){grid-column-start:1;grid-column-end:3}.content-grid-two .grid-two-item:nth-child(3) .subgrid-two{grid-template-columns:repeat(1,1fr);height:auto}.content-grid-two .grid-two-item:nth-child(3) .subgrid-two .subgrid-two-item{height:220px}}.grid-c1{display:flex;flex-direction:column}.grid-c1-content{background:linear-gradient(114.07deg,rgba(66,59,55,.6) 3.49%,rgba(66,59,55,0) 34.7%),linear-gradient(138.58deg,rgba(59,43,30,.37) 43.56%,#959595 112.68%);flex:1;border-radius:10px;padding:16px}.grid-c1-content .lg-value{margin-top:8px;margin-bottom:16px;color:#c7c4c6}.grid-c1-content .expiry-text{margin-bottom:6px}.grid-c1-content .card-wrapper{display:flex}.grid-c1-content .card-pin-hidden{font-size:32px;margin-right:8px}.grid-c1-content span{color:#8a8587}.grid-c1 .card-logo-wrapper{display:flex;justify-content:space-between;align-items:center}.grid-c1 .card-logo{display:flex}.grid-c1 .logo-shape1,.grid-c1 .logo-shape2{width:36px;height:36px;border-radius:100%}.grid-c1 .logo-shape1{background-color:var(--clr-scarlet-v1);margin-right:-15px;z-index:0}.grid-c1 .logo-shape2{background-color:var(--clr-yellow)}@media screen and (max-width: 768px){.grid-c1{grid-column-start:1;grid-column-end:3}}.grid-c2 .grid-item{display:flex}.grid-c2 .grid-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.grid-c2 .grid-item:last-child{margin-bottom:0}.grid-c2 .grid-item p{color:var(--clr-silver-v1)}.grid-c2 .grid-item-l .avatar{width:40px;height:40px;border-radius:100%;overflow:hidden}.grid-c2 .grid-item-l{display:flex;align-items:center;column-gap:10px}.grid-c2 .grid-item-l .text{font-weight:600}.grid-c2 .grid-item-l span{display:block;font-weight:400;margin-top:4px;font-size:15px;color:#8a8587}.grid-c2 .grid-item-r span{font-weight:500}.grid-c3{display:flex;flex-direction:column}.grid-c3-content{flex:1}.grid-chart{display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;height:100%}.chart-vert-value{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:28px}.grid-chart-bar{display:flex;flex-direction:column;text-align:center}.grid-chart-bar .bar-wrapper{flex:1;width:32px;margin-right:auto;margin-left:auto;border-radius:10px;background-color:var(--clr-primar-light);position:relative;overflow:hidden}.grid-chart-bar .grid-hortz-value{margin-top:12px}.grid-chart-bar .bar-item1{position:absolute;bottom:0;left:0;width:100%;background-color:var(--clr-pumpkin);border-radius:10px}.grid-chart-bar .bar-item2{position:absolute;bottom:0;left:0;width:100%;height:0;background-color:var(--clr-peach);border-radius:10px}.grid-chart-bar:nth-child(3) .bar-wrapper .bar-item1{z-index:1}@media screen and (max-width: 992px){.grid-c3{grid-column-start:1;grid-column-end:3;height:240px}}.grid-c4 .grid-c-top{display:flex;align-items:center;justify-content:space-between}.grid-c4-content{margin-top:20px;border-radius:16px}.grid-c4 .grid-c4-content{padding:12px}.grid-c4 .grid-item{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.grid-c4 .grid-item-l{display:flex;align-items:flex-start;column-gap:16px}.grid-c4 .grid-item-l .icon{display:flex;align-items:flex-start;justify-content:center}.grid-c4 .grid-item-l .icon img{width:20px}.grid-c4 .grid-item-l .text{font-weight:600}.grid-c4 .grid-item-l .text span{font-weight:300;font-size:15px;display:block;margin-top:5px;opacity:.9}.grid-c5 .grid-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.grid-c5 .grid-item:last-child{margin-bottom:0}.grid-c5 .grid-item-l{display:flex;align-items:center;column-gap:10px}.grid-c5 .grid-item-l .icon{background-color:#04040463;width:32px;height:32px;border-radius:100%;display:flex;align-items:center;justify-content:center;border:solid;border-width:.1mm;border-color:#027628bc}.grid-c5 .grid-item-l .icon img{width:28px}.grid-c5 .grid-item-l .text{color:var(--clr-silver-v1)}.grid-c5 .grid-item-l .text span{color:#8a8587;font-size:15px}.grid-c5 .grid-item-r span{font-weight:600}.apy-text{color:#88f1f4;font-size:15px}.grid-c6 .grid-item .avatar{width:40px;height:40px;overflow:hidden;border-radius:100%}.grid-c6 .grid-item-top-l{display:flex;align-items:center;column-gap:10px}.grid-c6 .grid-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.grid-c6 .grid-item-top-r{font-weight:600}.grid-c6 .grid-item-badges{display:flex;flex-wrap:wrap}.grid-c6 .grid-item-badge{color:#8a8587;background-color:var(--clr-jet);display:inline-block;border-radius:16px;padding:4px 6px;margin-top:5px;margin-bottom:5px;font-size:14px;margin-right:6px}.grid-c6 .grid-item-progress{background-color:var(--clr-primar-light);height:10px;border-radius:100vh;margin-top:8px}.grid-c6 .grid-item-fill{width:60%;height:10px;background-color:var(--clr-pumpkin);border-radius:100vh}.grid-c7-content{margin-top:-42px;margin-bottom:-128px}.progress-bar{display:flex;align-items:center;justify-content:center}.progress-bar .percent{position:relative}.progress-bar svg{position:relative;width:210px;height:210px;transform:rotate(-90deg)}.progress-bar svg circle{width:100%;height:100%;fill:none;stroke:var(--clr-jet);stroke-width:20;stroke-linecap:round}.progress-bar svg circle:last-of-type{stroke-dasharray:625px;stroke-dashoffset:calc(625px - (625px * var(--percent)) / 168);stroke:var(--clr-pumpkin)}.progress-bar .number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.progress-bar .number h3{font-weight:200;font-size:20px;font-weight:500}.progress-bar .number h3 span{font-size:14px}.grid-c7-content{display:flex;align-items:center;justify-content:flex-start}.grid-c7-content .progress-bar{margin-left:-46px}.grid-c7-content .data-list{margin-left:-20px}.grid-c7-content .data-item{margin-bottom:20px}.grid-c7-content .data-item-value{margin-top:8px;display:block;font-weight:600}