.sidebar{flex:1;border-right:.5px solid rgb(230,227,227);min-height:100vh;background-color:#fff}.sidebar .top{height:50px;display:flex;align-items:center;justify-content:center}.sidebar .top .logo{font-size:20px;font-weight:700;color:#6439ff}.sidebar hr{height:0;border:.5px solid rgb(230,227,227)}.sidebar .center{padding-left:10px}.sidebar .center ul{list-style:none;margin:0;padding:0}.sidebar .center ul .title{font-size:10px;font-weight:700;color:#999;margin-top:15px;margin-bottom:5px}.sidebar .center ul li{display:flex;align-items:center;padding:5px;cursor:pointer}.sidebar .center ul li:hover{background-color:#ece8ff}.sidebar .center ul li .icon{font-size:18px;color:#7451f8}.sidebar .center ul li span{font-size:13px;font-weight:600;color:#888;margin-left:10px}.sidebar .bottom{display:flex;align-items:center;margin:10px}.sidebar .bottom .colorOption{width:20px;height:20px;border-radius:5px;border:1px solid #7451f8;cursor:pointer;margin:5px}.sidebar .bottom .colorOption:nth-child(1){background-color:#f5f5f5}.sidebar .bottom .colorOption:nth-child(2){background-color:#333}.sidebar .bottom .colorOption:nth-child(3){background-color:#00008b}.navbar{height:50px;border-bottom:.5px solid rgb(231,228,228);display:flex;align-items:center;font-size:14px;color:#555}.navbar .wrapper{width:100%;padding:20px;display:flex;align-items:center;justify-content:space-between}.navbar .wrapper .search{display:flex;align-items:center;border:.5px solid lightgray;padding:3px}.navbar .wrapper .search input{border:none;outline:none;background:transparent}.navbar .wrapper .search input::-moz-placeholder{font-size:12px}.navbar .wrapper .search input::placeholder{font-size:12px}.navbar .wrapper .items{display:flex;align-items:center}.navbar .wrapper .items .item{display:flex;align-items:center;margin-right:20px;position:relative}.navbar .wrapper .items .item .icon{font-size:20px}.navbar .wrapper .items .item .avatar{width:30px;height:30px;border-radius:50%}.navbar .wrapper .items .item .counter{width:15px;height:15px;background-color:red;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;position:absolute;top:-5px;right:-5px}.home{display:flex}.home .homeContainer{flex:6}.home .homeContainer .widgets,.home .homeContainer .charts{display:flex;padding:20px;gap:20px}.home .homeContainer .charts{padding:5px 20px}.home .homeContainer .listContainer{box-shadow:2px 4px 10px 1px #c9c9c978;padding:20px;margin:20px}.home .homeContainer .listContainer .listTitle{font-weight:500;color:gray;margin-bottom:15px}.widget{display:flex;justify-content:space-between;flex:1;padding:10px;box-shadow:2px 4px 10px 1px #c9c9c978;border-radius:10px;height:100px}.widget .left,.widget .right{display:flex;flex-direction:column;justify-content:space-between}.widget .left .title,.widget .right .title{font-weight:700;font-size:14px;color:#a0a0a0}.widget .left .counter,.widget .right .counter{font-size:28px;font-weight:300}.widget .left .link,.widget .right .link{width:-moz-max-content;width:max-content;font-size:12px;border-bottom:1px solid gray}.widget .left .percentage,.widget .right .percentage{display:flex;align-items:center;font-size:14px}.widget .left .percentage.positive,.widget .right .percentage.positive{color:green}.widget .left .percentage.negative,.widget .right .percentage.negative{color:red}.widget .left .icon,.widget .right .icon{font-size:18px;padding:5px;border-radius:5px;align-self:flex-end}.featured{flex:2;box-shadow:2px 4px 10px 1px #c9c9c978;padding:10px}.featured .top{display:flex;align-items:center;justify-content:space-between;color:gray}.featured .top .title{font-size:16px;font-weight:500}.featured .bottom{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.featured .bottom .featuredChart{width:100px;height:100px}.featured .bottom .title{font-weight:500;color:gray}.featured .bottom .amount{font-size:30px}.featured .bottom .desc{font-weight:300;font-size:12px;color:gray;text-align:center}.featured .bottom .summary{width:100%;display:flex;align-items:center;justify-content:space-between}.featured .bottom .summary .item{text-align:center}.featured .bottom .summary .item .itemTitle{font-size:14px;color:gray}.featured .bottom .summary .item .itemResult{display:flex;align-items:center;margin-top:10px;font-size:14px}.featured .bottom .summary .item .itemResult.positive{color:green}.featured .bottom .summary .item .itemResult.negative{color:red}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}.chart{flex:4;box-shadow:2px 4px 10px 1px #c9c9c978;padding:10px;color:gray}.chart .title{margin-bottom:20px}.chart .chartGrid{stroke:#e4e1e1}.table .cellWrapper{display:flex;align-items:center}.table .cellWrapper .image{width:32px;height:32px;border-radius:50%;margin-right:10px;-o-object-fit:cover;object-fit:cover}.table .status{padding:5px;border-radius:5px}.table .status.Approved{color:green;background-color:#00800027}.table .status.Pending{color:#daa520;background-color:#bdbd031a}.badge{font-size:.875rem;padding:.5rem;border-radius:.25rem}.bg-green-100{background-color:#0c8266}.text-green-800{color:#aafce3}.bg-yellow-100{background-color:#fefcbf}.text-yellow-800{color:#9f863c}.bg-gray-100{background-color:#f3f4f6}.text-gray-800{color:#4b5563}.datatable{height:600px;padding:20px}.datatable .datatableTitle{width:100%;font-size:24px;color:gray;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}.datatable .datatableTitle .link{text-decoration:none;color:green;font-size:16px;font-weight:400;border:1px solid green;padding:5px;border-radius:5px;cursor:pointer}.datatable .cellWithImg{display:flex;align-items:center}.datatable .cellWithImg .cellImg{width:32px;height:32px;border-radius:50%;-o-object-fit:cover;object-fit:cover;margin-right:20px}.datatable .cellWithStatus{padding:5px;border-radius:5px}.datatable .cellWithStatus.active{background-color:#0080000d;color:green}.datatable .cellWithStatus.pending{background-color:#ffd9000d;color:#daa520}.datatable .cellWithStatus.passive{background-color:#ff00000d;color:#dc143c}.datatable .cellAction{display:flex;align-items:center;gap:15px}.datatable .cellAction .viewButton{padding:2px 5px;border-radius:5px;color:#00008b;border:1px dotted rgba(0,0,139,.596);cursor:pointer}.datatable .cellAction .deleteButton{padding:2px 5px;border-radius:5px;color:#dc143c;border:1px dotted rgba(220,20,60,.6);cursor:pointer}.single{display:flex;width:100%}.single .singleContainer{flex:6}.single .singleContainer .top{padding:20px;display:flex;gap:20px}.single .singleContainer .top .left{flex:1;box-shadow:2px 4px 10px 1px #c9c9c978;padding:20px;position:relative}.single .singleContainer .top .left .editButton{position:absolute;top:0;right:0;padding:5px;font-size:12px;color:#7451f8;background-color:#7551f818;cursor:pointer;border-radius:0 0 0 5px}.single .singleContainer .top .left .item{display:flex;gap:20px}.single .singleContainer .top .left .item .itemImg{width:100px;height:100px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.single .singleContainer .top .left .item .details .itemTitle{margin-bottom:10px;color:#555}.single .singleContainer .top .left .item .details .detailItem{margin-bottom:10px;font-size:14px}.single .singleContainer .top .left .item .details .detailItem .itemKey{font-weight:700;color:gray;margin-right:5px}.single .singleContainer .top .left .item .details .detailItem .itemValue{font-weight:300}.single .singleContainer .top .right{flex:2}.single .singleContainer .bottom{box-shadow:2px 4px 10px 1px #c9c9c978;padding:20px;margin:10px 20px}.single .singleContainer .title{font-size:16px;color:#d3d3d3;margin-bottom:20px}.new{width:100%;display:flex}.new .newContainer{flex:6}.new .newContainer .top,.new .newContainer .bottom{box-shadow:2px 4px 10px 1px #c9c9c978;padding:10px;margin:20px;display:flex}.new .newContainer .top h1,.new .newContainer .bottom h1{color:#d3d3d3;font-size:20px}.new .newContainer .top .left,.new .newContainer .bottom .left{flex:1;text-align:center}.new .newContainer .top .left img,.new .newContainer .bottom .left img{width:100px;height:100px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.new .newContainer .top .right,.new .newContainer .bottom .right{flex:2}.new .newContainer .top .right form,.new .newContainer .bottom .right form{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-around}.new .newContainer .top .right form .formInput,.new .newContainer .bottom .right form .formInput{width:40%}.new .newContainer .top .right form .formInput label,.new .newContainer .bottom .right form .formInput label{display:flex;align-items:center;gap:10px}.new .newContainer .top .right form .formInput label .icon,.new .newContainer .bottom .right form .formInput label .icon{cursor:pointer}.new .newContainer .top .right form .formInput input,.new .newContainer .bottom .right form .formInput input{width:100%;padding:5px;border:none;border-bottom:1px solid gray}.new .newContainer .top .right form button,.new .newContainer .bottom .right form button{width:150px;padding:10px;border:none;background-color:teal;color:#fff;font-weight:700;cursor:pointer;margin-top:10px}.app.dark{background-color:#111;color:#9c9c9c}.app.dark .chartGrid{stroke:#e4e4e438}.app.dark .table{background-color:#111}.app.dark .table .tableCell{color:gray}.app.dark .navbar{color:#999;border-color:#333}.app.dark .navbar .search{border-color:gray}.app.dark .sidebar{background-color:#111;border-color:#333}.app.dark .sidebar .top .logo{color:#999}.app.dark .sidebar hr{border-color:#333}.app.dark .sidebar ul li:hover{background-color:#333}.app.dark .sidebar ul li .icon{color:#999}.app.dark .datatable .datagrid,.app.dark .datatable .datagrid .viewButton,.app.dark .datatable .datagrid .deleteButton,.app.dark .datatable .datagrid .cellWithStatus{color:gray;border:none}.app.dark input{background-color:transparent}.productsTable{height:600px;padding:20px}.productsTable .datatableTitle{width:100%;font-size:24px;color:gray;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}.productsTable .datatableTitle .link{text-decoration:none;color:green;font-size:16px;font-weight:400;border:1px solid green;padding:5px;border-radius:5px;cursor:pointer}.productsTable .cellWithImg{display:flex;align-items:center}.productsTable .cellWithImg .cellImg{width:32px;height:32px;border-radius:50%;-o-object-fit:cover;object-fit:cover;margin-right:20px}.productsTable .cellWithStatus{padding:5px;border-radius:5px}.productsTable .cellWithStatus.active{background-color:#0080000d;color:green}.productsTable .cellWithStatus.pending{background-color:#ffd9000d;color:#daa520}.productsTable .cellWithStatus.passive{background-color:#ff00000d;color:#dc143c}.productsTable .cellAction{display:flex;align-items:center;gap:15px}.productsTable .cellAction .editButton{padding:2px 5px;border-radius:5px;color:#00008b;border:1px dotted rgba(0,0,139,.596);cursor:pointer}.productsTable .cellAction .deleteButton{padding:2px 5px;border-radius:5px;color:#dc143c;border:1px dotted rgba(220,20,60,.6);cursor:pointer}.productsTable .modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006;display:flex;align-items:center;justify-content:center}.productsTable .modal .modalContent{background-color:#fefefe;padding:20px;border:1px solid #888;width:80%;max-width:500px;text-align:center;border-radius:10px;position:relative}.productsTable .modal .modalContent .closeButton{color:#aaa;float:right;font-size:28px;font-weight:700;position:absolute;top:10px;right:20px;cursor:pointer}.productsTable .modal .modalContent .closeButton:hover,.productsTable .modal .modalContent .closeButton:focus{color:#000;text-decoration:none;cursor:pointer}.productsTable .modal .modalContent .modalImage{width:100%;height:auto;max-height:80vh;border-radius:10px}.create-services-container{max-width:600px;margin:20px auto;padding:20px;transition:border-color .3s ease}.create-services-container h2,.create-services-container .form-group{margin-bottom:20px}.create-services-container .form-group label{display:block;margin-bottom:8px;font-weight:700}.create-services-container .form-group input[type=text],.create-services-container .form-group input[type=number],.create-services-container .form-group textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;margin-bottom:12px;transition:border-color .3s ease;font-size:14px}.create-services-container .form-group textarea{resize:vertical;min-height:100px}.create-services-container .form-group .image-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #ccc;padding:15px;border-radius:8px;cursor:pointer;text-align:center;transition:border-color .3s ease}.create-services-container .form-group .image-upload .upload-icon{font-size:36px;margin-bottom:10px}.create-services-container .form-group .image-upload input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.create-services-container .form-group .image-upload:hover{border-color:#007bff}.create-services-container .form-group .image-preview{margin-top:10px;position:relative;width:100%;max-height:250px;overflow:hidden;border-radius:4px;box-shadow:0 2px 4px #0000001a}.create-services-container .form-group .image-preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.create-services-container .form-group .image-preview .preview-actions{position:absolute;top:10px;right:10px}.create-services-container .form-group .image-preview .preview-actions .close-preview{background:#00000080;padding:5px;border-radius:50%;cursor:pointer}.create-services-container .error-message{color:red;margin-top:10px;font-size:14px}.create-services-container button[type=submit]{margin-top:20px;background-color:#007bff;color:#fff;padding:12px 24px;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s ease}.create-services-container button[type=submit]:hover{background-color:#0056b3}.create-services-container button[type=submit]:disabled{background-color:#ccc;cursor:not-allowed}.create-services-container.dragging{border-color:#007bff}.list{display:flex;width:100%}.list .listContainer{flex:6}.ordersTable{margin:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a}.ordersTable .MuiTableContainer-root{max-height:600px}.ordersTable .MuiTableCell-root{font-weight:500;color:#333}.ordersTable .tableCell{padding:16px;text-align:left;border-bottom:1px solid #ddd}.ordersTable .tableCell:first-of-type{width:120px}.ordersTable .tableCell:last-of-type{width:100px}.ordersTable .cellWrapper{display:flex;align-items:center;gap:10px}.ordersTable .cellWrapper .image{width:50px;height:50px;-o-object-fit:cover;object-fit:cover;cursor:pointer;border-radius:4px;transition:transform .3s ease}.ordersTable .cellWrapper .image:hover{transform:scale(1.1)}.ordersTable .modalContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:600px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000004d;text-align:center}.ordersTable .modalContent .modalImage{width:100%;height:auto;border-radius:8px;-o-object-fit:cover;object-fit:cover}