.navbar{width:100%;padding:20px;display:flex;align-items:center;justify-content:space-between;background-color:#2a3447;color:#fff}.navbar .logo{display:flex;align-items:center;justify-content:space-between;font-weight:700}.navbar .texts{display:flex;align-items:center;gap:14px}.navbar .texts span{font-size:14px}.navbar .texts span:hover{color:#efcece}.navbar .icons{display:flex;align-items:center;justify-content:space-between;gap:20px}.navbar .icons .notification{position:relative}.navbar .icons .notification span{height:18px;width:18px;position:absolute;top:-11px;right:-11px;background-color:red;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:50%}.navbar .icons .user{display:flex;align-items:center;gap:10px}.navbar .icons .user img{width:30px;height:30px;border-radius:50%;object-fit:cover}.areaChartBox{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%}.areaChartBox .sales{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:10px}.areaChartBox .sales h3{font-size:18px}.areaChartBox .sales .line{height:1px;background-color:#dedede;width:95%;margin:0 auto}.areaChartBox .schedule{display:flex;gap:10px;align-items:center;padding:0 10px;font-size:12px}.areaChartBox .schedule span:hover{cursor:pointer}.areaChartBox .schedule span{padding:4px 10px}.areaChartBox .schedule .decorated{background-color:#624fe1;padding:4px 10px;border-radius:10px;color:#fff}.areaChartBox .chartInfo{width:40%;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.areaChartBox .chartInfo .chart{width:100%;height:100%;margin:0 auto}.areaChartBox .summary{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.areaChartBox .summary .description{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.areaChartBox .summary .description .text{font-size:16px;color:#dedede;font-weight:700}.areaChartBox .summary .description .number{font-size:14px;color:#000;font-weight:700}.heroBox{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;max-width:1440px;background-color:#fff;margin:10px;border-radius:2px}.heroBox .searchItems{display:flex;justify-content:space-between;align-items:center}.inputContainer{display:flex;flex-direction:column;justify-content:center;gap:5px;width:160px;padding:8px 16px}.inputContainer input[type=text]{outline:none;padding:5px;border:none;background-color:#f1efef}.inputContainer input[type=text]::placeholder{font-size:12px}.inputContainer .text{font-size:14px;font-weight:700}.mainChartBox{display:flex;flex-direction:column;justify-content:space-between;gap:20px;height:100%}.mainChartBox .sales{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f8f8f8}.mainChartBox .sales h3{font-size:14px}.mainChartBox .sales .icons{display:flex;gap:10px}.mainChartBox .schedule{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.mainChartBox .schedule .date{font-size:16px;color:#dedede;font-weight:700}.mainChartBox .schedule .sort{display:flex;align-items:center;gap:15px;text-transform:capitalize;font-size:14px}.mainChartBox .schedule .sort span:hover{cursor:pointer}.mainChartBox .schedule .sort .decorated{background-color:#624fe1;padding:4px 6px;border-radius:10px;color:#fff}.mainChartBox .chartInfo{width:40%;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.mainChartBox .chartInfo .chart{width:100%;height:100%;margin:0 auto}.mainChartBox .summary{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.mainChartBox .summary .description{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.mainChartBox .summary .description .text{font-size:16px;color:#dedede;font-weight:700}.mainChartBox .summary .description .number{font-size:14px;color:#000;font-weight:700}.pieChartBox{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%}.pieChartBox .sales{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:10px}.pieChartBox .sales h3{font-size:18px}.pieChartBox .sales .line{height:1px;background-color:#dedede;width:95%;margin:0 auto}.pieChartBox .schedule{display:flex;gap:10px;align-items:center;padding:0 10px;font-size:12px}.pieChartBox .schedule span:hover{cursor:pointer}.pieChartBox .schedule span{padding:4px 10px}.pieChartBox .schedule .decorated{background-color:#624fe1;padding:4px 10px;border-radius:10px;color:#fff}.pieChartBox .chartInfo{width:40%;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.pieChartBox .chartInfo .chart{width:100%;height:100%;margin:0 auto}.pieChartBox .summary{display:flex;justify-content:space-between;align-items:center;padding:0 10px}.pieChartBox .summary .description{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.pieChartBox .summary .description .text{font-size:16px;color:#dedede;font-weight:700}.pieChartBox .summary .description .number{font-size:14px;color:#000;font-weight:700}.sentrixBox{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px}.sentrixBox .logo{font-size:16px;font-weight:700}.sentrixBox .logo span{font-size:19px;color:red}.sentrixBox .title{font-size:14px;font-weight:700}.sentrixBox .percentage{display:flex;align-items:center;gap:5px}.sentrixBox .percentage .box{width:100%;border:1px solid lightseagreen;border-radius:5px}.sentrixBox .percentage .box .dot{height:5px;background-color:#ff4500;width:62%;border-radius:5px}.sentrixBox .percentage .number{font-size:14px;font-weight:700}.sentrixBox .link{color:#ff4500;text-decoration:underline;cursor:pointer}.smallBox{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px}.smallBox .heading{display:flex;gap:5px;align-items:center}.smallBox .heading h3{font-size:16px;font-weight:700}.smallBox .heading span{font-size:12px}.smallBox .line{height:1px;background-color:#dedede;width:95%;margin:0 auto}.smallBox .price{font-size:17px;font-weight:700}.smallBox .text{margin-top:5px;display:flex;justify-content:space-between;align-items:flex-end;font-weight:700;font-size:12px}.table table{background-color:#f1efef}.table table tr{height:50px}.table table th{font-size:14px;font-weight:700;padding:5px 10px;background-color:#fff;margin:0 2px}.table table td{font-size:12px;font-weight:700;padding:5px 10px;background-color:#fff;color:#2f4f4f;margin:0 2px;max-width:100px;text-align:center}.table table .ticket,.table table .task{color:#87cefa}.table table .status span{background-color:orange;padding:8px 16px;border-radius:16px}.home{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(100px,auto);max-width:1440px;margin:0 10px}.home .box{background-color:#fff;padding:5px 10px}.home .box7{grid-column:span 2;grid-row:span 3}.home .box6{grid-column:span 1;grid-row:span 3}.home .box9{grid-column:span 2;grid-row:span 2}.home .box8{grid-column:span;grid-row:span 2}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}.main{font-family:Inter,sans-serif;background-color:#f1efef;color:#2a3447;min-height:100vh}.container{display:flex}.menuContainer{width:250px;padding:5px 20px;border-right:2px solid #384256}.contentContainer{width:100%;padding:5px 20px}