@import"https://use.fontawesome.com/releases/v5.11.0/css/all.css";@import"https://fonts.googleapis.com/css?family=Play";@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";@import"https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--main-color: var(--blue2);--bg-color: var(--platinum);--second-bg-color: #131313;--text-color: white;--primary: red;--primary-alt: #22c55e;--dark: #1e293b;--dark-alt: #334155;--light: #f1f5f9;--main: #ededed;--sidebar-width: 300px;--columns-4: repeat(4, minmax(0, 1fr));--columns-5: repeat(5, minmax(0, 1fr));--light-grey: #d3d3d3;--grey: #808080;--pewter: #899499;--plumbeous1: #64748b;--plumbeous2: #5a7585;--plumbeous3: #698291;--plumbeous4: #798f9c;--plumbeous5: #899ca8;--plumbeous6: #99aab4;--plumbeous7: #aab8c0;--plumbeous8: #bac6cd;--plumbeous9: #cbd4d9;--plumbeous10: #dce2e6;--plumbeous11: #edf0f2;--plumbeous12: #4d6573;--plumbeous13: #415561;--plumbeous14: #354650;--plumbeous15: #293740;--plumbeous16: #1e2930;--plumbeous17: #131c21;--plumbeous18: #090f13;--plumbeous19: #030506;--plumbeous20: #000101;--blue-grey-gradient: linear-gradient( 80deg, var(--blue2), var(--plumbeous8), var(--blue2) );--blue-grey-gradient2: linear-gradient( 80deg, var(--plumbeous8), var(--blue2), var(--plumbeous8) );--silver: #c0c0c0;--platinum: #e5e4e2;--smoke: #848884;--gunmetal-grey: #818589;--steel-grey: #71797e;--charcoal: #36454f;--unavailable: #36454f;--red1: #fe1e00;--red2: rgb(254, 30, 0, .79);--red3: #a6281c;--red4: #b00000;--green1: #1ca676;--clr-green: #00fe93;--motherboard-green: #115d33;--dark-blue: #000033;--blue1: #0c2233;--blue2: #065471;--blue3: #0a91ab;--blue4: #1296e0;--blue5: #abd9ff;--blue6: #00ffee;--blue7: #00cfc1;--yellow1: #ffc045;--purple1: #570099;--clr-primary: #29221d;--clr-primar-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-yellow: #fec80a;--clr-jet: #302924;--clr-peach: #ffc397;--font-family-bai: "Bai Jamjuree", sans-serif;--transition-default: all .3s ease-in-out;--width: 768px;--plumbeous-gradient1: linear-gradient( 50deg, var(--plumbeous16), var(--plumbeous16), var(--gunmetal-grey), var(--platinum), var(--gunmetal-grey), var(--plumbeous16), var(--plumbeous16), var(--plumbeous16) );--grey-gradient: linear-gradient( 50deg, var(--charcoal), var(--charcoal), var(--gunmetal-grey), var(--platinum), var(--gunmetal-grey), var(--charcoal), var(--charcoal), var(--charcoal) );--grey-gradient2: linear-gradient( 90deg, var(--charcoal), var(--charcoal), var(--gunmetal-grey), var(--platinum), var(--gunmetal-grey), var(--charcoal), var(--charcoal), var(--charcoal) );--grey2: linear-gradient( 45deg, var(--charcoal), var(--silver), var(--platinum), var(--gunmetal-grey) );--darker-grey-gradient: linear-gradient( 90deg, var(--charcoal), var(--pewter), var(--pewter), var(--charcoal) );--lighter-grey-gradient: linear-gradient( 45deg, var(--platinum), var(--silver), var(--silver), var(--platinum) );--gradient: linear-gradient( 45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871 );--gradient2: linear-gradient( 45deg, var(--red4), var(--purple1), var(--blue2) );--gradient3: linear-gradient( 180deg, var(--blue2), var(--purple1), var(--red4) );--gradient4: linear-gradient( to bottom right, var(--blue2), var(--purple1), var(--red4) )}@mixin mobile{@media (max-width: #{--width}) {@content;}}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto Slab,serif;font-optical-sizing:auto;scroll-behavior:smooth}body{background:var(--bg-color);font-family:var(--font-family-bai)}.app{display:flex;position:relative}html{scroll-behavior:smooth}@media (max-width: 1285px){html{font-size:55%}}@media (max-width: 52.5rem){section{padding:10rem 3% 2rem!important}h2{font-size:7rem!important}}button{cursor:pointer}button:disabled{opacity:.5}h1{font-size:10rem}h2{font-size:7rem}h3{font-size:6rem}h4{font-size:5rem}h5{font-size:4rem}h6{font-size:2.5rem}p{color:#000}ul{list-style-type:none}a{text-decoration:none}.img-fit-cover img{width:100%;height:100%;object-fit:cover}.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{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:#00000059 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,#423b3799 3.49%,#423b3700 34.7%),linear-gradient(138.58deg,#3b2b1e5e 43.56%,#fea767 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:#fe1e0026;width:32px;height:32px;border-radius:100%;display:flex;align-items:center;justify-content:center}.grid-c5 .grid-item-l .icon img{width:16px}.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}.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}