.barChartBox{width:100%;height:100%}.barChartBox h1{font-size:20px;margin-bottom:20px}.bigChartBox{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between}.chart{width:100%;height:300px}.chartBox{display:flex;height:100%}.boxInfo{flex:3;display:flex;flex-direction:column;justify-content:space-between}.numbers{margin-bottom:0}.chartBox .boxInfo .title{display:flex;align-items:center;gap:10px}.chartInfo{flex:2;display:flex;flex-direction:column;justify-content:space-between}.chartBox .chartInfo .chart{display:block;width:100%;height:100%}.texts{display:flex;flex-direction:column;text-align:right}.percentage{font-weight:700;font-size:20px}.duration{font-size:14px}.pieChartBox{height:100%;display:flex;flex-direction:column;justify-content:space-between}.chart{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.options{display:flex;justify-content:space-between;gap:10px;font-size:14px}.option{display:flex;flex-direction:column;gap:10px;align-items:center}.title{display:flex;gap:10px;align-items:center}.dot{width:10px;height:10px;border-radius:50%}.topBox .list .listItem{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.topBox h1{margin-bottom:5px}.topBox .list .listItem .user{display:flex;gap:20px}.topBox .list .listItem .user img{width:40px;height:40px;border-radius:50%;object-fit:cover}.topBox .list .listItem .user .userTexts{display:flex;flex-direction:column;gap:5px}.topBox .list .listItem .user .userTexts .username{font-size:14px;font-weight:500}.topBox .list .listItem .user .userTexts .email{font-size:12px}.topBox .list .listItem .amount{font-weight:500}@media (min-width: 1024px) and (max-width:1279px){.topBox h1{font-size:24px}}.home{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(4,1fr));grid-auto-rows:minmax(180px,auto);grid-auto-flow:dense}.home .box{padding:20px;border-radius:10px;border:2px solid var(--secondary-color)}.home .box1,.home .box4{grid-column:span 1;grid-row:span 3}.home .box7{grid-column:span 2;grid-row:span 2}@media (min-width: 1200px){.home{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px) and (max-width:1279px){.home{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px) and (max-width:1023px){.home{grid-template-columns:repeat(1,1fr)}.home .box7{display:none}}@media (min-width: 320px) and (max-width:767px){.home{grid-template-columns:repeat(120px,1fr)}.home .box7{display:none}}.dataTable img{width:32px;height:32px;border-radius:50%;object-fit:cover}.dataGrid{background:#fff;padding:20px}.MuiDataGrid-toolbarContainer{flex-direction:row-reverse}.action{display:flex;gap:15px}.action img{width:20px;height:20px;cursor:pointer}@media (min-width: 1024px) and (max-width:1440px){.dataTable{width:80vw}}@media (min-width: 601px) and (max-width:1023px){.dataTable{width:83vw}}@media (min-width: 427px) and (max-width:600px){.dataTable{width:80vw}}@media (min-width: 374px) and (max-width:426px){.dataTable{width:86vw}}@media (min-width: 320px) and (max-width:374px){.dataTable{width:90vw}}@media (max-width: 320px){.dataTable{width:101vw}}.users .info{display:flex;align-items:center;gap:20px;margin-bottom:20px}.users .info h1{margin-bottom:0}.MuiDataGrid-cell{display:flex;align-items:center}.users .info .btn{border-radius:10px;padding:10px;cursor:pointer;background-color:#0ff;color:#000;outline:none;border:2px solid darkcyan;font-weight:600;transition:background-color .3s,color .3s;box-shadow:0 4px 6px #0000001a}.users .info .btn:hover{background-color:#008b8b;color:#fff}.add{width:100vw;height:100vh;position:absolute;top:0;left:0;background-color:#000000b9;display:flex;align-items:center;justify-content:center}.modal{padding:50px;border-radius:10px;background-color:var(--primary-color);position:relative}h1{margin-bottom:40px;font-weight:800;font-size:24px;color:var(--text-color)}.close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:20px;margin-right:10px}form{display:flex;flex-wrap:wrap;max-width:500px;justify-content:space-between}.item{width:40%;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}label{font-size:14px;text-transform:capitalize}.datain{padding:10px;background-color:transparent;color:var(--text-color);outline:none;border:1px solid var(--text-color);border-radius:5px;text-transform:capitalize}.sendbtn{width:100%;padding:10px;cursor:pointer;border:1px solid var(--text-color);border-radius:10px;transition:all .3s ease;font-weight:800}.sendbtn:hover{background-color:var(--text-color);color:var(--primary-color)}.products .info{display:flex;align-items:center;gap:20px;margin-bottom:20px}.proheading{margin-bottom:0}.products .info button{border-radius:10px;padding:10px;cursor:pointer;background-color:#0ff;color:#000;outline:none;border:2px solid darkcyan;font-weight:600;transition:background-color .3s,color .3s;box-shadow:0 4px 6px #0000001a}.products .info button:hover{background-color:#008b8b;color:#fff}.navbar{width:100%;padding:20px;display:flex;align-items:center;justify-content:space-between}.navbar .logo{display:flex;align-items:center;font-weight:700;gap:10px}.icons{display:flex;align-items:center;gap:20px;cursor:pointer}.notification{position:relative}.notification span{background-color:red;color:#fff;width:16px;height:16px;border-radius:50%;position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;font-size:12px}.username{display:flex;align-items:center;gap:10px}.username img{width:26px;height:26px;border-radius:50%;object-fit:cover}.footer{display:flex;align-items:center;justify-content:space-between;padding:30px;border-top:1px solid var(--secondary-color);min-height:95px;margin-top:15px}.footer span:first-child{font-weight:700}.footer span:last-child{font-size:14px}.menu .item{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.title{font-size:12px;font-weight:200;color:var(--text-color);text-transform:uppercase}.listItem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:5px;transition:all .2s ease}.listItem:hover{color:#0ff}@media (min-width: 768px) and (max-width:1023px){.listItemTitle,.title{display:none}.listItem:hover{color:#fff;text-shadow:0px 0px 0px #64787800}}@media (min-width: 320px) and (max-width:767px){.listItemTitle,.title{display:none}.listItem:hover{color:#fff;text-shadow:0px 0px 0px #64787800}}:root{--primary-color: #040037;--secondary-color: #3f3f3f;--background-color: #000d0f;--text-color: #ffffff}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}.main{font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--text-color);min-height:100vh;height:auto}.container{display:flex}.menuContainer{width:250px;padding:5px 20px;border-right:2px solid var(--secondary-color)}.contentContainer{padding:5px 20px;width:100%}@media (min-width: 768px) and (max-width:1023px){.menuContainer{width:max-content}}@media (min-width: 320px) and (max-width:767px){.menuContainer{width:max-content}}.single{display:flex}.single .view{flex:1}.single .view .info .topInfo{display:flex;align-items:center;gap:20px}.single .view .info .topInfo img{width:100px;height:100px;border-radius:20px;object-fit:cover}.single .view .info .topInfo h1{font-weight:500}.single .view .info .details{font-size:18px}.single .view .info .details .item{margin:30px 0}.single .view .info .details .item .itemTitle{font-weight:600;margin-right:10px;text-transform:capitalize}.single .view hr{width:90%;height:0;border:.5px solid gray;margin:20px 0}.single .view .chart{margin-top:50px;width:80%;height:400px}#itemvalue{margin:30px 0}.single .activities{flex:1}.single .activities h2{margin-bottom:20px}.single .activities ul li{list-style-type:none;position:relative;width:1px;padding-top:50px;background-color:#f45b69}.single .activities ul li:after{content:"";position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;background-color:#f45b69;transform:translate(-50%)}.single .activities ul li div{min-width:480px;padding:15px;background-color:#f45b6810}.single .activities ul li div p{margin-bottom:5px}.single .activities ul li div time{font-size:12px}.namehead{margin-bottom:0}.btn{border-radius:10px;padding:10px;cursor:pointer;background-color:var(--secondary-color);color:var(--text-color);outline:none;border:2px solid;font-weight:600;transition:background-color .3s,color .3s;box-shadow:0 4px 6px #0000001a}.btn:hover{background-color:var(--primary-color);color:#fff}@media (min-width: 1024px) and (max-width:1279px){.single{flex-direction:column;gap:50px}.single .view hr{display:none}.activities ul li div{min-width:250px}}@media (min-width: 768px) and (max-width:1023px){.single{flex-direction:column;gap:50px}.single .view hr{display:none}.single .activities ul li div{min-width:250px}}@media (min-width: 320px) and (max-width:767px){.single{flex-direction:column;gap:50px}.single .view hr{display:none}.single .activities ul li div{min-width:250px}}