.list{display:flex;width:100%}.list .listContainer{flex:6}.sidebar{flex:1;border-right:.5px solid rgb(230,227,227);min-height:100vh;background-color:#fff;max-width:140px}.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 .center ul li .menuButton{display:flex;align-items:center;width:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit}.sidebar .bottom{display:flex;align-items:center;margin:10px}.sidebar .bottom .colorOption{width:20px;height:20px;border-radius:5px;border:1px solid #7451f8;padding:0;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:0px solid lightgray;padding:3px}.navbar .wrapper .search input{border:none;outline:none;background:transparent}.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.languageSelector{gap:6px;margin-right:16px}.navbar .wrapper .items .item.languageSelector select{min-width:96px;height:30px;border:1px solid #d7d2f6;border-radius:6px;background-color:#fff;color:#555;font:inherit;padding:0 28px 0 8px;cursor:pointer}.navbar .wrapper .items .item .srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.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}.datatable{height:80%;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%;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{background:transparent;padding:2px 5px;border-radius:5px;color:#dc143c;border:1px dotted rgba(220,20,60,.6);cursor:pointer}.single{width:100%;display:flex}.single .singleContainer{flex:6}.single .singleContainer .top,.single .singleContainer .bottom{-webkit-box-shadow:2px 4px 10px 1px rgba(0,0,0,.47);box-shadow:2px 4px 10px 1px #c9c9c978;padding:10px;margin:20px;display:flex}.single .singleContainer .top h1,.single .singleContainer .bottom h1{color:#d3d3d3;font-size:20px}.single .singleContainer .top .left,.single .singleContainer .bottom .left{flex:1;text-align:center}.single .singleContainer .top .left img,.single .singleContainer .bottom .left img{width:100px;height:100px;border-radius:50%;object-fit:cover}.single .singleContainer .top .right,.single .singleContainer .bottom .right{flex:2}.single .singleContainer .top .right form,.single .singleContainer .bottom .right form{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-around}.single .singleContainer .top .right form .formInput,.single .singleContainer .bottom .right form .formInput{width:45%}.new{width:100%;display:flex}.new .newContainer{flex:6}.new .newContainer .top,.new .newContainer .bottom{-webkit-box-shadow:2px 4px 10px 1px rgba(0,0,0,.47);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%;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:45%}.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}.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 .navbar .languageSelector select{background-color:#111;border-color:#444;color:#999}.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}:root{--order-status-production-bg: #a4fb9c;--order-status-loaded-bg: #9bf1f7;--order-status-arrived-bg: #f3f99e}.production{background-color:var(--order-status-production-bg)}.loaded{background-color:var(--order-status-loaded-bg)}.arrived{background-color:var(--order-status-arrived-bg)}