@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Poppins:wght@300;400;500;600&display=swap');

/* ---- Common css ------- */

 :root {
    --bs-theme: #0b1d3b;
    --theme-color: #121111;
    --bs-blue: #1c1b2d;
    --red-color: #f00;
    --green-color: rgb(4, 187, 50);
    --bs-primary: #0b1d3b;
    --bs-primary-hover: #21314c;
    --bs-secondary: #21314c;
    --bs-secondary-hover: #0b1d3b;
    --bs-blue-light: #1c4385;
    --bs-hover: #14356d;
    --bs-btn-hover: #14bdb9;
    /* --bs-btn-hover: #1f4c97; */
    --bs-white: #fff;
    --bs-gray: #666666;
    --bs-black: #000000;
    --bs-light: #999999;
    --bs-sky: #F6FDFF;
    --bs-light-hover: #a19292;
    --bs-gradiand-theme: linear-gradient(45deg, #3c5680, #0d6d9b);
    --bs-gradiand-hover: linear-gradient(45deg, #0d6d9b, #3c5680);
}
/* -------- loader css ----------- */
#loading {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    /* opacity: 0.8; */
    background: #0b1d3bfb;
    z-index: 9999;
}

.middle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jumpy-bars {
    display: flex;
    justify-content: space-evenly;
    width: 4.5em;
    height: 3.5em;
    gap: 0.45em;
}

#bar1 {
    animation-delay: 0.2s;
}

#bar2 {
    animation-delay: 0.4s;
}

#bar3 {
    animation-delay: 0.6s;
}

#bar4 {
    animation-delay: 0.8s;
}

#bar5 {
    animation-delay: 1s;
}

#bar6 {
    animation-delay: 1.2s;
}

#bar7 {
    animation-delay: 1.5s;
}

.bar {
    width: 1em;
    height: auto;
    opacity: 0;
    background: linear-gradient(45deg, cyan, #15be8e);
    border-radius: 100%;
    animation: jumping-bars 1s linear infinite alternate-reverse;
}

@keyframes jumping-bars {
    0% {
        opacity: 1;
        transform: scaleY(0);
    }

    50% {
        opacity: 1;
        transform: scaleY(0.5);
    }

    100% {
        opacity: 1;
        transform: scaleY(1.8);
    }
}

/* .wave {
    width: 8px;
    height: 50px;
    background: linear-gradient(45deg, cyan, #15be8e);
    margin: 5px;
    animation: wave 1s linear infinite;
    border-radius: 20px;
}

.wave:nth-child(2) {
    animation-delay: 0.1s;
}

.wave:nth-child(3) {
    animation-delay: 0.2s;
}

.wave:nth-child(4) {
    animation-delay: 0.3s;
}

.wave:nth-child(5) {
    animation-delay: 0.4s;
}

.wave:nth-child(6) {
    animation-delay: 0.5s;
}

.wave:nth-child(7) {
    animation-delay: 0.6s;
}

.wave:nth-child(8) {
    animation-delay: 0.7s;
}

.wave:nth-child(9) {
    animation-delay: 0.8s;
}

.wave:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

.middle img {
    border: 2px solid #14bdb9;
    border-radius: 25px;
    width: 180px;
} */
h1,
h2,
h3,
h4,
h5,
h6,
.font-primary {
    font-weight: 500;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
}

.btn-primary {
    background-color: var(--bs-theme);
    border-color: var(--bs-theme);
    color: var(--bs-white);
    padding: 10px 30px;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--bs-btn-hover);
    border-color: var(--bs-btn-hover);
}

.btn-primary2 {
    background: var(--bs-btn-hover);
    border-color: var(--bs-btn-hover);
    color: var(--bs-white);
    padding: 10px 30px;
    font-weight: 600;
}

.btn-primary2:hover {
    background-color: var(--bs-theme);
    border-color: var(--bs-theme);
    color: var(--bs-white);
}

.btn-secondary {
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    color: var(--bs-light-gray);
    padding: 10px 30px;
    font-weight: 600;
}

.btn-danger {
    padding: 10px 30px;
    font-weight: 600;
}

.sb-topnav {
    height: 70px;
}

.navbar-brand img {
    height: 50px;
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    top: 70px;
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
    top: 40px;
    padding-bottom: 40px;
}

.sb-sidenav-dark {
    background: #000;
}

.sb-topnav.navbar.navbar-expand.navbar-dark.bg-light {
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6;
}

#layoutSidenav {
    background: var(--bs-sky);
}

.sb-topnav {
    color: var(--bs-white);
}

.sb-topnav.navbar-dark #sidebarToggle {
    margin-left: 15px;
}

.sb-topnav.navbar-dark #sidebarToggle .bi {
    color: var(--bs-blue-light);
    font-size: 30px;
}

.HeaderRigth a,
.HeaderRigth a .bi {
    color: var(--bs-blue-light);
}

.HeaderRigth .dropdown-toggle::after {
    border-top: 0.3em solid var(--bs-blue-light);
}

.navbar-expand .HeaderRigth .dropdown-menu {
    top: 52px;
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    padding-top: 30px;
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link {
    padding: 15px 10px;
    border-bottom: 1px solid #2b384d;
    text-transform: capitalize;
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link .svg-inline--fa {
    color: #e1e1e1;
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link .bi,
.sb-sidenav .sb-sidenav-menu .nav .nav-link {
    color: var(--bs-white);
    font-size: 16px;
    transition: all 0.8s;
}

.sb-sidenav .sb-sidenav-menu .nav li.active>.nav-link,
.sb-sidenav .sb-sidenav-menu .nav .nav-link:hover {
    color: var(--bs-white);
    background: #fd0d00;
}


/* .sb-sidenav .sb-sidenav-menu .nav .nav-link:hover::after, */

.sb-sidenav .sb-sidenav-menu .nav li.active>.nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 13px;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid var(--bs-sky);
    transition: all 0.8s;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
    margin-left: 0;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested ul {
    padding-left: 0;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested ul li {
    padding-left: 0px;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested ul li a {
    padding-left: 35px;
    position: relative;
}

.sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested ul li a::before {
    position: relative;
    width: 8px;
    height: 8px;
    content: '';
    border: 1px solid var(--bs-white);
    border-radius: 50%;
    left: -9px;
    background: var(--bs-btn-hover);
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-sidenav-collapse-arrow {
    margin-right: 10px;
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgb(2, 77, 156) !important;
    opacity: 0;
    right: -5px;
}

.mCustomScrollBox:hover .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    opacity: 1;
}

.mCSB_scrollTools .mCSB_draggerRail {
    position: absolute;
    top: 0;
    right: 0px;
}

.mCSB_inside>.mCSB_container {
    margin-right: 0;
}

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
    background: none;
}


/* ---------- Login css --------- */

.login {
    padding: 40px;
    width: 100%;
    text-align: center;
}

.login .form-group {
    text-align: left;
}

.LoginRow .navbar-brand img {
   /* height: 100px;*/
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    line-height: 1;
    vertical-align: top;
    margin-bottom: .5rem;
}

.LoginForm a {
    font-weight: bold;
    color: #1f4c97;
    text-decoration: none;
}

.app {
    position: relative;
}

.app-wrap {
    min-height: 100vh;
    position: relative;
}

.bg-white {
    background-color: #fff !important;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.bg-gradient {
    background: #0b1d3b;
    background: -moz-linear-gradient(left, #2c4e7d 0, #4776e6 100%)!important;
    background: -webkit-linear-gradient(left, #2c4e7d 0, #4776e6 100%)!important;
    background: -o-linear-gradient(left, #2c4e7d 0, #4776e6 100%)!important;
    background: -ms-linear-gradient(left, #2c4e7d 0, #4776e6 100%)!important;
    background: linear-gradient(to right, #2c4e7d 0, #4776e6 100%) !important;
    background: -webkit-gradient(linear, left, right, color-stop(0, #2c4e7d), color-stop(100%, #4776e6))!important;
}

.Forget .bg-gradient {
    background: #4776e6;
    background: -moz-linear-gradient(left, #54d4e9 0, #4776e6 100%)!important;
    background: -webkit-linear-gradient(left, #54d4e9 0, #4776e6 100%)!important;
    background: -o-linear-gradient(left, #54d4e9 0, #4776e6 100%)!important;
    background: -ms-linear-gradient(left, #54d4e9 0, #4776e6 100%)!important;
    background: linear-gradient(to right, #54d4e9 0, #4776e6 100%)!important;
    background: -webkit-gradient(linear, left, right, color-stop(0, #54d4e9), color-stop(100%, #4776e6))!important;
}

#pass-status {
    position: absolute;
    right: 15px;
    bottom: 12px;
    z-index: 9;
    cursor: pointer;
}

.main-panel {
    width: 100% !important;
}

.LoginRow {
    height: 100vh;
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-search__field,
.typeahead,
.tt-query,
.tt-hint {
    border-radius: 5px;
}

.btn-check:focus+.btn-primary,
.btn-primary:focus,
.form-control:focus {
    box-shadow: 0 0 0 5px var(--bs-sky);
}

.login .form-control {
    border-left: 4px solid var(--bs-theme);
    height: 50px;
}

.login h1 {
    font-size: 1.875rem;
    margin: 20px 0;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}


/* ---- Dashboard ---- */

.IconBox {
    border-radius: 10px;
}

.IconBox .card-body {
    font-size: 30px;
}

.IconBox .bi {
    font-size: 60px;
    float: right;
    opacity: 0.4;
    position: absolute;
    right: 15px;
    top: 0;
}

.IconBox a {
    text-decoration: none;
    font-weight: 600;
}

.IconBox strong {
    display: block;
}

.IconBox strong small {
    font-size: 20px;
    font-weight: normal;
}

.Bg-primary {
    background: #224d95;
}

.Bg-warning {
    background: #0275d8;
}

.Bg-success {
    background: #15be8e;
}

.Bg-danger {
    background: #15beba;
}

.NotificationList {
    width: 350px;
    transition: all 0.8s;
    padding: 0;
    margin: 0;
}

.NotificationList li {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    transition: all 0.8s;
}

.NotificationList li:hover {
    background-color: var(--bs-sky);
}

.NotificationList li:last-child {
    border-bottom: none;
}

.NotificationList a {
    text-decoration: none;
}

.NotificationList img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}


/* ---- Users List---- */

.tableWrapper {
    min-width: 100%;
    overflow: auto;
}

.tableWrapper .datatable-wrapper {
    min-width: 900px;
}

.datatable-container {
    margin-left: 10px;
    margin-right: 10px;
}

.tableWrapper tbody tr td {
    border-bottom: 1px solid #ccc;
    border-right: 1px dashed #cccc;
}

.tableWrapper tbody tr:last-child td {
    border-bottom: none;
}

.tableWrapper tbody tr:last-child td:last-child {
    border-right: none;
    white-space: nowrap;
    white-space: nowrap;
}

.tableWrapper tbody tr:nth-child(even) td {
    background: var(--bs-sky);
}

.tableWrapper thead tr th {
    background: var(--bs-primary);
    color: #fff;
    white-space: nowrap;
}

.datatable-table {
    border: 1px solid #ccc;
    border-bottom: 0;
}

.datatable-sorter::before {
    border-top: 6px solid #fff;
}

.datatable-sorter::after {
    border-bottom: 6px solid #fff;
}

.datatable-sorter::before,
.datatable-sorter::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.5;
}

.datatable-ascending .datatable-sorter::after,
.datatable-descending .datatable-sorter::before,
.datatable-ascending .datatable-filter::after,
.datatable-descending .datatable-filter::before {
    opacity: 1;
}

.datatable-input {
    border: 1px solid #ccc;
    border-radius: 30px;
    background: #f6fdff;
    margin-bottom: 10px;
}

.datatable-selector {
    background: #f6fdff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-right: 5px;
}

.datatable-pagination a {
    margin-left: 0;
    color: var(--theme-color);
    cursor: pointer;
    border: 1px solid #ccc;
    border-right: none;
}

.datatable-pagination a:hover {
    background-color: #f6fdff;
}

.datatable-pagination li:first-child a {
    border-radius: 5px 0 0 5px;
}

.datatable-pagination li:last-child a {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 5px 0;
}

.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active a:focus,
.datatable-pagination .datatable-active a:hover {
    background-color: var(--bs-btn-hover);
    color: var(--bs-white);
}

.datatable-pagination li.datatable-hidden {
    visibility: visible;
    cursor: no-drop;
}

.StatusBox {
    color: var(--bs-white);
    border-radius: 2px;
    width: 150px;
    padding: 5px;
    display: inline-block;
    font-weight: 600;
}

.StatusBox.text-warning {
    color: #e67f25 !important;
}

.AdminPic img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bs-btn-hover);
}

.notificationIcon .bi {
    font-size: 30px;
}

.notificationIcon span {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--red-color);
    position: absolute;
    margin-top: 0px;
    right: -8px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: 600;
    border: 2px solid #f8f9fa;
}

.notificationIcon a::after,
.AdminPic::after {
    display: none;
}

.datatable-table th a {
    margin-right: 10px;
    text-transform: capitalize;
}

.notificationIcon a {
    color: var(--theme-color);
}

.notificationIcon h5 {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--bs-primary);
}

.AddMore .bi {
    font-size: 25px;
}

.btn-primary.AddMore {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-left: 5px;
}

.AddMore .bi {
    font-size: 20px;
    margin-right: 10px;
}

.AddMore .bi.bi-filetype-csv,
.AddMore .bi.bi-file-earmark-pdf,
.AddMore .bi.bi-printer {
    font-size: 16px;
}

.ActionBtn {
    display: inline-block;
    background: var(--bs-btn-hover);
    color: var(--bs-white);
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    padding: 0 8px;
    text-decoration: none;
}

.ActionBtn .bi {
    font-size: 14px;
}

.ActionBtn:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.OrderDetailList {
    margin: 0;
    padding: 0;
    column-count: 2;
}

.OrderDetailList li {
    list-style-type: none;
    padding: 10px 20px;
    font-weight: 600;
    display: flex;
}

.OrderDetailList li:nth-child(odd) {
    background: var(--bs-sky);
}

.OrderDetailList li span {
    display: inline-block;
    width: 160px;
    padding-right: 10px;
    font-weight: normal;
    color: #133164;
    font-weight: 17px;
    display: flex;
}

.OrderDetailList li span .bi {
    margin-right: 10px;
}

.dropdown-menu.dropdown-menu-end.show {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 10px;
}

.AddPrice span {
    display: inline-block;
    width: 40px;
    text-align: center;
    background: #133164;
    color: var(--bs-white);
    line-height: 40px;
    border-radius: 5px 0 0 5px;
    margin-right: -6px;
    position: relative;
    font-weight: 600;
}

.AddPrice .form-control {
    padding-left: 15px;
}

.InvList {
    text-decoration: none;
    color: var(--bs-blue-light);
}

.UserList {
    text-decoration: none;
    color: var(--theme-color);
}

.invoice-payment-details>li span {
    float: right;
}

.ProfilePicbox img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--bs-primary);
}

.UploadPic label {
    display: block;
    background-color: var(--bs-primary);
    color: white;
    padding: 10px;
    height: 40px;
    width: 100%;
    text-align: center;
    border-radius: 0.3rem;
    cursor: pointer;
}

.selectedZipcode {
    padding: 0.375rem 5px;
}

.selectedZipcode,
.form-control:disabled,
.dataTable-input:disabled,
.form-control[readonly],
[readonly].dataTable-input {
    background-color: #fbfbfb;
    opacity: 1;
    border: 1px solid transparent;
    border-bottom: 1px solid #f2f2f2;
    font-weight: 600;
}

.form-group.disabled,
.btn.btn-primary[disabled] {
    display: none;
}

.OrderStatus .card-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.8s;
}

.OrderStatus {
    background: var(--bs-gradiand-theme);
    transition: all 0.8s;
    border-radius: 10px;
    /* background: linear-gradient(45deg, red 0 50%, blue 50% 100%); */
}

.OrderStatus:hover {
    background: var(--bs-gradiand-hover);
}

.OrderStatus .card-body {
    font-size: 30px;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
}

.OrderStatus a {
    text-decoration: none;
    font-size: 18px;
    padding: 8px 15px;
    display: block;
}

.OrderStatus:hover .card-footer {
    background: var(--bs-btn-hover);
}

.OrderStatus a svg {
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.OrderStatus .card-body img,
.OrderStatus .bi {
    font-size: 50px;
    float: right;
    opacity: 0.8;
    position: absolute;
    right: 15px;
    top: 0;
}

.OrderStatus .card-body img {
    top: auto;
    width: 60px;
}


/* .RightSpace svg {
    padding-right: 10px;
} */

.ServWrapp .OrderDetailList,
#Asigndriver .OrderDetailList,
#AsignBag .OrderDetailList {
    column-count: 1;
}

.ServWrapp .OrderDetailList .pricing-page-price {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 500;
    width: 300px;
    text-align: right;
    display: block;
}

.QtyBox {
    width: 70px;
    margin-left: 10px;
}

.ServWrapp .OrderDetailList small {
    display: inline-block;
    width: 30%;
}

#Asigndriver .OrderDetailList li {
    display: flex;
    align-items: center;
    font-size: 20px;
}

#Asigndriver .OrderDetailList li img,
#AsignBag .OrderDetailList li img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 2px solid var(--bs-btn-hover);
    background-color: var(--bs-white);
    margin-right: 15px;
}


/* custome Checkbox */

.CustomBox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.CustomBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.CustomBox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border: 1px solid var(--bs-gray);
    border-radius: 5px;
}

.CustomBox:hover input~.checkmark {
    background-color: #ccc;
}

.CustomBox input:checked~.checkmark {
    background-color: var(--green-color);
}

.CustomBox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.CustomBox input:checked~.checkmark:after {
    display: block;
}

.CustomBox .checkmark:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.Rspace .bi {
    margin-right: 10px;
}

.QtyBox:focus-visible {
    /* border: 2px solid var(--bs-btn-hover) !important; */
    box-shadow: 0 0 5px var(--bs-btn-hover) !important;
    outline: 1px solid transparent !important;
}

.ProfilePicbox img {
    background: var(--bs-theme);
}

.formWrapper {
    width: 60%;
    margin: 20px auto;
}

.TotalPrice {
    margin: 0 10px;
    padding: 0 !important;
    font-size: 19px;
    white-space: nowrap;
    width: 110px !important;
    display: block !important;
}

.TotalPrice small {
    padding-right: 45px;
}

.form-control,
.dataTable-input {
    appearance: auto;
}

.PriceBox input {
    width: 80%;
    margin-right: 10px;
}

.PriceBox .CustomBox {
    font-size: 16px;
}

.multi-select-container {
    display: block;
    width: 100%;
    position: relative;
}

.multi-select-menu {
    position: absolute;
    left: 0;
    border-radius: 5px;
    top: 21px;
    z-index: 1;
    float: left;
    min-width: 100%;
    background: #fff;
    margin: 1em 0;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: auto !important;
}

.multi-select-menuitem {
    display: block;
    padding: 0.6em 1em 0.6em 30px;
    white-space: nowrap;
}

.multi-select-menuitem--titled:before {
    display: block;
    font-weight: bold;
    content: attr(data-group-title);
    margin: 0 0 0.25em -20px;
}

.multi-select-menuitem--titledsr:before {
    display: block;
    font-weight: bold;
    content: attr(data-group-title);
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.multi-select-menuitem+.multi-select-menuitem {
    padding-top: 0;
}

.multi-select-presets {
    border-bottom: 1px solid #ced4da;
}

.multi-select-menuitem input {
    position: absolute;
    margin-top: 0.25em;
    margin-left: -20px;
}

.multi-select-button {
    display: block;
    padding: 0.375rem 5px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    cursor: default;
}

.multi-select-button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0.4em 0 0.4em;
    border-color: #999 transparent transparent transparent;
    margin-left: 0.4em;
    vertical-align: 0.1em;
    position: absolute;
    right: 7px;
    top: 15px;
}

.multi-select-container--open .multi-select-menu {
    display: block;
}

.multi-select-container--open .multi-select-button:after {
    border-width: 0 0.4em 0.4em 0.4em;
    border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
    /* Avoid border/padding on menu messing with JavaScript width calculation */
    box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
    /* Allow labels to line wrap when menu is artificially narrowed */
    white-space: normal;
}

.nav-tabs.SettingTab {
    border-bottom: none;
    margin-bottom: -1px;
    position: relative;
    z-index: 9;
}

.SettingTab button.nav-link {
    color: var(--bs-btn-hover);
    font-size: 18px;
    font-weight: 500;
}

.SettingTab button.nav-link:hover {
    border-color: transparent;
}

.SettingTab button.nav-link.active:hover {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom: transparent;
}

.table-responsive .row {
    margin-left: 0;
    margin-right: 0;
}

.btn:focus {
    box-shadow: none;
}

.WashList {
    margin: 0;
    padding: 0 0 30px 0px;
    list-style-type: none;
}

.WashList li {
    padding: 7px 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 5px;
}

.WashList li span {
    display: inline-block;
    min-width: 200px;
}

.PripList {
    margin: 0;
    padding: 0 0 0px 18px;
}

.PripList li {
    padding: 7px 0;
}

.PripList li::marker {
    left: 0;
}

.BtnClose {
    background: var(--red-color);
    border: none;
    color: #fff;
    height: 46px;
    margin-left: 10px;
    width: 40px;
    border-radius: 3px;
    font-size: 25px;
}

.tableWrapper tbody tr td:last-child {
    white-space: nowrap;
}

.datatable-table th a {
    margin-right: 20px;
    text-transform: capitalize;
}

select.btn-primary.AddMore {
    text-align: left;
    padding-left: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.RemainingAmount {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.RemainingAmount span {
    font-weight: 500;
    font-size: 20px;
    display: inline-block;
}

.RemainingAmount strong {
    font-weight: 500;
    font-size: 25px;
    margin-left: 10px;
    padding: 5px 20px;
    border-radius: 5px;
    display: inline-block;
    background: #f9f9f9;
    margin-right: 20px;
}

.CustomTitle span {
    margin: 0 10px;
}

.CustomTitle label {
    padding-right: 10px;
}

.CustomTitle input {
    padding: 7px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.LaundraPic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.Receiver {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.Receiver span {
    display: inline-block;
    width: 120px;
}

.list-unstyled li {
    padding-bottom: 5px;
}

.CommisionBox {
    display: flex;
    align-items: center;
}

.CommisionBox span {
    margin: 0 20px 0 5px;
}

.btn.btn-primary.AddMore .bi-printer {
    font-size: 20px;
}

.CommisionBox {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 0.25rem 5px;
}

.CommisionBox .form-check {
    cursor: pointer;
}

.CommisionBox .form-check label,
.CommisionBox .form-check input {
    cursor: pointer;
}

.CommisionBox .form-check .form-check-input {
    width: 18px;
    height: 18px;
}

.CommisionBox .form-check .form-check-input:focus {
    box-shadow: none;
}

.CommisionBox .form-check label {
    margin-bottom: 0;
    margin-top: 4px;
    margin-left: 3px;
}

.CommisionBox .form-check-input:checked {
    background-color: #075bd7;
    border-color: #075bd7;
}

.formWrapper.DataNotFound ul {
    border: 1px solid #dfdfdf;
    margin: 0;
    padding: 0;
}

.formWrapper.DataNotFound ul li {
    border-bottom: 1px solid #dfdfdf;
    list-style-type: none;
}

.formWrapper.DataNotFound ul li:last-child {
    border-bottom: none;
}

.formWrapper.DataNotFound ul li a {
    text-decoration: none;
    color: var(--bs-black);
    display: block;
    padding: 10px;
    transition: all 0.5s;
}

.formWrapper.DataNotFound ul li a:hover {
    background: var(--bs-btn-hover);
    color: var(--bs-white);
}


/* -------- Blocked Laundromats --------- */

.BlockedLaundromat .bg-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.BlockedLaundromat {
    height: 100vh;
    overflow: hidden;
}

.BlockedLNDwrapp {
    position: relative;
    top: 25%;
    text-align: center;
    width: 60%;
}

.BlockedLND {
    position: absolute;
    background: rgb(255, 255, 255, 0.9);
    text-align: center;
    width: 70%;
    padding: 25px;
    left: 15%;
    border-radius: 25px;
}

.LaundPic {
    height: 100vh;
    text-align: center;
}
.AssignDriver .OrderDetailList {
    column-count: 1;
}
.AssignDriver .OrderDetailList li {
    display: flex;
    align-items: center;
    font-size: 20px;
}

.AssignDriver .OrderDetailList li img,
.AssignDriver .OrderDetailList li img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: 2px solid var(--bs-btn-hover);
    background-color: var(--bs-white);
    margin-right: 15px;
}

/* .tableWrapper .datatable-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
} */

.ServicesBox {
    box-shadow: 0 0 10px #efecec;
    border-radius: 10px;
    padding: 0px;
    margin-bottom: 20PX;
}
.DeliverServoices {
    column-count: 1;
}
.tableWrapper thead tr th {
    background: var(--bs-primary);
    color: #fff;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
}
.ChargeList{padding-left: 0;padding-right: 0;}
.ChargeList li span{
    width: 150px;
}
.ChargeList li strong{
    display: inline-block;
    width: calc(100% - 150px);
    text-align: right;
    padding-right: 10px;
}
/* .SelectLaundromats {
    width: 350px;
    align-items: center;
    position: absolute;
    left: 38%;
    top: 25px;
} */
.SelectLaundromats select {
    width: calc(100% - 150px);
    background: #f6fdff;
}
.SelectLaundromats span {
    white-space: nowrap;
    padding-right: 15px;
}
.LaundromatsList .datatable-top{display: none !important;}
.SelectLaundromats {
    width: 350px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: right;
    }
/* ------- Chat css ------- */
#container {
    width: 100%;
    /* height: 85vh;
    overflow: hidden; */
    background: #eff3f7;
    margin: 20px auto;
    font-size: 0;
    border-radius: 5px;
    display: flex;
}
.ChatLeftTop {
    display: flex;
    padding: 20px 10px 19px;
    background: #0b1d3b;
}
.ChatLeftTop .btn-primary{
    padding: 10px 15px;
    border-radius: 0 5px 5px 0;
    background: #fff;
    margin-top: -1px;
}
.ChatLeftTop .btn-primary .bi{
    color: #0b1d3b;
    font-size: 20px;
}
#container aside {
    width: 300px;
    height: 90%;
    background-color: #3b3e49;
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
}
.ChatList {    
    width: calc(100% - 300px);
    height: 100%;
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
}
#container aside header {
    padding: 30px 20px;
}
#container aside input {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    background-color: #fff;
    border: none;
    border-radius: 5px 0 0 5px;
    color: #0b1d3b;   
    background-repeat: no-repeat;
    background-position: 170px;
    background-size: 40px;
}
#container aside input::placeholder {
    color: #0b1d3b;
}
#container aside ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: scroll;
    height: calc(100vh - 230px);
}
#container aside li {
    padding: 10px 0;
    transition: all 0.8s;
    border-top: 1px solid #494b53;
}
#container aside li:last-child {
    border-bottom: 1px solid #494b53;
}
#container aside li a {
    display: block;
    text-decoration: none;
}
#container aside li.active,
#container aside li:hover {
    background-color: #0b1d3b;
}

#container aside li img {
    border-radius: 50%;
    margin-left: 20px;
    margin-right: 8px;
    width: 40px;
    height: 40px;
}

#container aside li div {
    display: inline-block;
    vertical-align: top;
}
#container aside li h2 {
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    margin-bottom: 5px;
}
#container aside li h3 {
    font-size: 12px;
    color: #7e818a;
    font-weight: normal;
    margin-bottom: 0;
}
.status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
}
.status img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #cbd0d5;
}
#chat .you h2 {
    margin-left: 30px;
}
#chat .me h2 {
    margin-right: 5px;
}
.green {
    background-color: #58b666;
    margin-left: -18px;
}
.orange {
    background-color: #ff725d;
    margin-left: -18px;
}
.blue {
    background-color: #6fbced;
    margin-right: 0;
    margin-left: 7px;
}
.ChatList header {
    padding: 15px 20px;
    background: #0b1d3b;
}
.ChatList header>* {
    display: inline-block;
    vertical-align: top;
}
.ChatList header img:first-child {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid #cbd0d5;
}
.ChatList header img:last-child {
    width: 24px;
    margin-top: 8px;
}
.ChatList header div {
    margin-left: 10px;
    margin-right: 145px;
}
.ChatList header h2 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
}
.ChatList header h3 {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
}
#chat {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: scroll;
    height: calc(100vh - 303px);
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
#chat li {
    padding: 5px 20px 5px 30px;
}
#chat h2,
#chat h3 {
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
}
#chat h3 {
    color: #959595;
}
#chat .entete {
    margin-bottom: 18px;
}
#chat .me .entete {
    margin-right: 25px;
}
#chat .message {
    padding: 8px 15px;
    color: #fff;
    line-height: 25px;
    max-width: 90%;
    display: inline-block;
    text-align: left;
    border-radius: 5px;
}
#chat .me {
    text-align: right;
}
#chat .you .message {
    background-color: #58b666;
}
#chat .me .message {
    background-color: #6fbced;
}
#chat .you .message,
#chat .me .message {
    position: relative;
}
#chat .you .message::before {
    position: absolute;
    content: '';
    top: -10px;
    left: 10px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #58b666 transparent;
}
#chat .me .message::after {
    position: absolute;
    content: '';
    top: -10px;
    right: 10px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #6fbced transparent;
}
.MsgSendor {
    height: 100px;
    padding: 20px 15px 10px 20px;
    display: flex;
}
.MsgSendor textarea {
    resize: none;
    border: none;
    display: block;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 13px;
    border: 1px solid #ccc;
}
.MsgSendor button{
    display: inline-block;
    background: var(--bs-btn-hover);
    color: var(--bs-white);
    height: 50px;
    text-align: center;
    border-radius: 5px;
    padding: 0 17px;
    text-decoration: none;
    border: none;
    margin-left: 10px;
    margin-top: 5px;
}
.MsgSendor button .bi{
    font-size: 22px;
    color: var(--bs-white);
    }
/*----- Chat Scrollbar-------*/
#container aside ul::-webkit-scrollbar {
    width: 6px;
}

#container aside ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

#container aside ul::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--bs-btn-hover);
}

.ChatList #chat::-webkit-scrollbar {
    width: 6px;
}
.ChatList #chat::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}
.ChatList #chat::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #2b384d;
}
@-moz-document url-prefix() {
.ChatList #chat {
        overflow: scroll;
            scrollbar-color: var(--bs-btn-hover) #f5f5f5;
            scrollbar-width: thin;
    }
#container aside ul{
        overflow: scroll;
        scrollbar-color: var(--bs-btn-hover) #f5f5f5;
        scrollbar-width: thin;
    }
}
/* ----- 19-12-2023 ----- */
.datatable-table tfoot {
    display: none;
}
.InvoiceWrapp{
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 40px;
    border-radius: 5px;
}
.InvoiceWrapp img{
    width: 160px;
}
.InvoiceWrapp table th,
.InvoiceWrapp table td {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    padding: 10px;
}
.TotlePayable {
    margin: 20px 0 0 0;
}
.TotlePayable li{
    padding: 5px 0;
}
.TotlePayable li b{
    display: inline-block;
    width: 80px;
    white-space: nowrap;
    text-align: right;
}
/*--- Responsive css---- */

@media screen and (max-width:1400px) {
    .IconBox .bi {
        font-size: 40px;
        right: 12px;
        top: 10px;
    }
    .IconBox .card-body {
        font-size: 20px;
    }
    .ServWrapp .OrderDetailList .pricing-page-price {
        width: 190px;
    }
    .BlockedLND {
        width: 100%;
        left: 0;
    }
    .BlockedLNDwrapp {
        width: 50%;
    }
    .LaundPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    .BlockedLNDwrapp {
        top: 20%;
    }
    .ChargeList li span {
        width: 100px;
    }

    .ChargeList li strong {
        width: calc(100% - 100px);
        padding-right: 0px;
    }
    .SelectLaundromats {
        left: 30%;
    }
}

@media screen and (max-width:1200px) {
    .BlockedLNDwrapp {
        width: 90%;
    }
 .SelectLaundromats {
     left: 270px;
     position: relative;
     top: 0;
     margin-bottom: -45px;
 }
}


/* @media screen and (max-width:1400px) {
    .IconBox .bi {
        font-size: 40px;
        right: 12px;
        top: 10px;
    }
    .IconBox .card-body {
        font-size: 26px;
    }
    .ServWrapp .OrderDetailList .pricing-page-price {
        width: 190px;
    }
    .BlockedLND {
        width: 100%;
        left: 0;
    }
    .BlockedLNDwrapp {
        width: 50%;
        top: 20%;
    }
    .LaundPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
}

@media screen and (max-width:1200px) {
    .BlockedLNDwrapp {
        width: 90%;
    }
} */