/* ::-webkit-scrollbar, */
.main-panel ::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}

/* ::-webkit-scrollbar-track, */
.main-panel ::-webkit-scrollbar-track {
  background: #121c5066;
  border-radius: 10px;
}

/* ::-webkit-scrollbar-track:hover, */
.main-panel ::-webkit-scrollbar-track:hover {
  background: #121c5066;
}

/* ::-webkit-scrollbar-thumb, */
.main-panel ::-webkit-scrollbar-thumb {
  background: #121c5066;
  border-radius: 10px;
}

/* ::-webkit-scrollbar-thumb:hover, */
.main-panel ::-webkit-scrollbar-thumb {
  background: #49A7C9;
}

/* smooth-scroll */
.modal-dialog .smooth-scroll::-webkit-scrollbar,
.main-panel .smooth-scroll::-webkit-scrollbar {
  width: 4px !important;
}

.modal-dialog .smooth-scroll::-webkit-scrollbar-track,
.modal-dialog .smooth-scroll::-webkit-scrollbar-track:hover,
.main-panel .smooth-scroll::-webkit-scrollbar-track,
.main-panel .smooth-scroll::-webkit-scrollbar-track:hover {
  background: #e6e8ea;
}

.modal-dialog .smooth-scroll::-webkit-scrollbar-thumb,
.modal-dialog .smooth-scroll::-webkit-scrollbar-thumb:hover,
.main-panel .smooth-scroll::-webkit-scrollbar-thumb,
.main-panel .smooth-scroll::-webkit-scrollbar-thumb:hover {
  background: #b4b9c0 !important;
}

button:disabled {
  opacity: 0.4 !important;
}

p {
  line-height: unset !important;
}

body {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;

}

.main-panel {
  height: 100vh;
  /* padding-inline-start: 57px; */
  background-color: #fafafa;
  /* background-image: url('/assets/img/background.png');
  background-position: center; */
}

.trips-imnformation {
  background-color: #fff;
  box-shadow: 0px 1px 4px #0b1e3829;
  left: 56px;
}

.main-panel.side-opened .navbar {
  left: 240px;
}

.main-panel.side-opened .side-menu {
  width: 240px;
  /* left: -260px; */
}

/* .main-panel.side-opened .side-menu {
  text-align: center;
} */
/* .main-panel.side-opened .side-menu .nav-item .nav-link{
  justify-content: center;
} */
.nav-content,
.side-fotter-content {
  opacity: 0;
  flex: none;
  display: none;
}

.img-user {
  padding: 4px;
}

.main-panel.side-opened .side-menu .img-user {
  padding: 0px;
}

.main-panel.side-opened .side-menu .user-menu-info {
  padding: 8px;
}

.main-panel.side-opened .side-menu .nav-content,
.main-panel.side-opened .side-menu .side-fotter-content {
  /* display: block; */
  /* visibility: visible; */
  opacity: 1;
  display: block;
  font-size: 14px;
  margin-inline-start: 8px !important;
}

.side-menu .side-list {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.main-panel.side-opened .side-menu .side-list {
  padding-left: 8 !important;
  padding-right: 8 !important;
}

.side-menu .nav-item.first-level {
  border-radius: 6px;
}

.main-panel.side-opened .side-menu .nav-item.first-level {
  border-radius: 0;
}

/* .main-panel.side-opened .side-menu:hover{
  width: 255px;
} */
.side-menu,
.navbar,
.main-panel {
  transition: all 0.01s ease-in-out;
}

.main-panel.side-opened .side-menu {
  left: 0px !important;
}

.main-panel.side-opened .side-menu:hover .nav-item .nav-link.has-sub::after,
.main-panel.side-opened .side-menu .nav-item .nav-link.has-sub::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: auto;
  content: "";
  background-image: url(/assets/icon/angle-down-white.svg);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in;
  /* display: none; */
}

/* .main-panel:not(.side-opened) .accordion-collapse.collapse {
  display: none;
} */

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-link {
  padding: 0.375rem 1rem;
  color: #112a4e !important;
  font-weight: bold;
}

.loader.progress {
  margin-bottom: unset !important;
}

.main-page {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  /* direction: rtl !important; */
}

.page {
  padding: 1rem;
  height: 100%;
  flex: 1 1 auto;
}

.page-content,
.page-content>.card:nth-of-type(1) {
  height: 100%;
}

.side-opened .side-menu .side-header .side-logo {
  height: 20px;
  display: block !important;
}

.side-opened .side-menu .side-header .logo-litter {
  display: none;
  height: 20px;
}

.main-page .main-content {
  margin-top: 101px;
  width: 100%;
  flex: 1 1 auto;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0px 1px 1px #002c4d1a;
  border: none;
}

.create-padding {
  max-width: 1096px;
  width: 100%;
  margin-inline: auto;
}

.tab-container .card {
  /* height: 100%; */
  box-shadow: none;
}

.tab-container .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.number-of-trip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-header {
  padding: 12px 16px;
  background-color: #fff;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  border: none;
}

.card-footer {
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 0.5rem 0.5rem 0 0;
}

.card-content,
.page-card-content,
.page-header {
  padding: 8px 0px;
}

.modal-body .card-content {
  max-height: calc(100vh - 230px);
}

.card-title {
  margin-bottom: 0;
  font-size: 16px;
  color: #000f1a;
  font-family: "AMPLESOFTPRO-bold", "CAIRO-bold";
  white-space: nowrap;
}

.card-subtitle {
  font-size: 14px;
  color: #112a4e;
  font-weight: bold;
}

.card-request,
.card-request-mobile,
.card-trip {
  padding: 12px;
  background-color: #f2f2f2;
  border-radius: 8px;
  flex: none;
  width: 200px;
}

.card-request-mobile {
  width: 100%;
}

.card-request .request-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #cccfd1;
  margin-inline-end: 8px;
}

.card-request .request-trangle {
  width: 72px;
  height: 8px;
  background-color: #cccfd1;
  margin-bottom: 6px;
  border-radius: 4px;
  margin-top: 6px;
}

.card-request .request-trangle2 {
  width: 48px;
  height: 8px;
  background-color: #cccfd1;
  margin-bottom: 8px;
  border-radius: 4px;
}

.card-request .button-number-order {
  padding: 8px;
  background-color: #ffffff;
  box-shadow: 0px 1px 1px #1d1d1d1a;
}

.request-button,
.add-order {
  padding: 6px 12px;
  width: 100%;
  background-color: #ffe000;
  box-shadow: 0px 1px 1px #1d1d1d1a;
  border-radius: 6px;
  color: #000f1a !important;
  font-size: 14px;
  /* font-weight: bold; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-order {
  margin-top: 12px;
}

.request-button:hover,
.add-order:hover {
  background-color: #e6ca00;
  color: #000f1a;
}

.form-section {
  padding-bottom: 8px;
  border-bottom: 1.5px solid #8c6023;
}

.modal-header {
  padding: 8px 12px;
}

.c-black {
  color: #000f1a !important;
}

.btn {
  color: #fff;
}

.sm-btn {
  padding: 3px 8px 5px !important;
  font-size: 10px !important;
  border-radius: 12px !important;
}

.card-header .search-btn,
.add-btn,
.export-btn,
.btn-cancel,
.btn-confirm {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.attach-btn,
.model-btn,
.search-btn,
.add-btn,
.export-btn,
.btn-confirm,
.btn-cancel {
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

#lottie {
  width: auto;
  height: auto;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
  margin-top: -160px;
}

#lottie svg {
  width: 100%;
  height: 100%;
}

#lottie rect {
  fill: none;
}

.btn-confirm,
.add-btn {
  background-color: #005d8e;
}

.search-btn {
  background-color: #383838;
}

.cancel-btn {
  background: #ffffff;
  color: #999fa3;
  border-radius: 4px;
  font-size: 14px;
}

.cancel-btn:hover {
  background: #f3f4f4;
  color: #999fa3 !important;
  border-radius: 4px;
  font-size: 14px;
}

.attach-btn {
  padding-top: 0.25rem;
  padding-bottom: 0.4rem;
  background-color: #505050;
}

.model-btn {
  padding-top: 0.35rem;
  padding-bottom: 0.5rem;
  border: 1px solid;
  background-color: #fff;
  border-color: #ccc;
  color: #212529;
  border-radius: 4px;
}

.model-btn:hover,
.attach-btn:hover {
  background-color: #383838;
}

.export-btn {
  background-color: #734a11ee;
}

.export-btn:hover {
  background-color: #734a11;
}

.btn-link {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #707070;
  font-size: 15px;
  line-height: 0rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-cancel {
  background-color: #cc324c;
}

.btn-confirm,
.btn-cancel {
  min-width: 90px;
}

.btn-dropdown {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: #b2b2b260;
  display: flex;
  padding: 0;
}

.btn-dropdown:hover {
  background-color: #b2b2b2aa;
}

.confirm-message {
  font-size: 12px;
  margin-bottom: 1rem;
  font-weight: bold;
}

.form-group label span {
  margin-inline-start: 4px;
}

.form-group input::placeholder {
  font-size: 12px;
  color: #002c4d;
}

.form-check {
  display: flex;
  align-items: center;
  min-height: unset;
  margin-bottom: unset;
  padding-inline-start: unset;
}

.form-check-label {
  margin-bottom: 0 !important;
  margin-inline-start: 0.5rem;
}

.form-check .form-check-input {
  margin-inline-start: unset;
  margin-top: unset;
}

.p-select-store {
  min-width: 165px;
  max-height: 32px;
}

.form-control {
  padding: 8px 12px;
  color: #000f1a;
  font-size: 12px;
  height: 34px;
  line-height: unset;
}

.form-control label {
  font-size: 14px;
  color: #414651;
}

.input-group-text {
  padding: 0 0.25rem;
  background-color: #005d8e;
}

.modal-content {
  border: none;
}

.dropdown-menu {
  border: 1px solid #e6e7e8;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0px 1px 4px #000f1a1a, 0px 1px 1px #000f1a1a;
  padding: 4px;
  margin: 0.25rem 0 0 !important;
  min-width: 12rem;
}

.dropdown-item {
  color: #000f1a !important;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #e6e7e8;
}

.ng-touched.ng-invalid,
.ng-touched.ng-invalid~.input-group-text {
  border-color: #cc324c;
}

.validation-error-message {
  font-size: 12px;
  color: #cc324c;
}

.panel-footer {
  margin-top: auto;
}

.panel-footer .total-items p {
  font-size: 12px;
}

.loading-img {
  width: 100px;
  height: auto;
  margin: auto;
}

/*
.ng-select-disabled.ng-select {
  background-color: #e9ecef;
}

ng-select.form-control {
  padding: 0px 6px 2px !important;
}

.ng-select .ng-select-container {
  border-radius: unset !important;
  border: unset !important;
  background-color: transparent !important;
  align-items: center;
}

.ng-select .ng-select-container,
.ng-select-container {
  height: 28.5px !important;
  min-height: unset !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
.ng-select .ng-select-container {
  font-weight: bold;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
.ng-select .ng-select-container {
  color: #161616 !important;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container,
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
  align-items: center;
} */

/* .ng-select .ng-select-container .ng-value-container {
  padding-inline-start: unset !important;
  padding-inline-end: 10px !important;
} */

/* .ng-value-container .ng-value {
  transition: unset;
} */

/* .ng-select .ng-select-container .ng-value-container .ng-placeholder {
  font-size: 12px;
  color: #002c4d;
  font-weight: 100;
}

.ng-select .ng-has-value .ng-placeholder {
  display: none;
} */

/* .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  top: 5px;
} */

/* .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  left: unset !important;
  right: 0 !important;
  padding-left: 50px !important;
  padding-right: 10px !important;
} */
/* .ng-select .ng-arrow-wrapper {
  width: 25px;
  padding-inline-end: 5px;
} */
/* .ng-select.ng-select-opened>.ng-select-container .ng-arrow {
  top: -2px;
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
  margin-bottom: unset;
}

.ng-select .ng-arrow-wrapper .ng-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  margin-bottom: -2px;
  transition: unset;
}

.ng-dropdown-panel.ng-select-top {
  bottom: 100%;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-color: #e6e6e6;
  margin-bottom: -1px;
} */
/* .ng-dropdown-panel {
  z-index: 1060 !important;

} */
/*

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  background-color: #fff;
  padding: 8px 10px;
  color: #161616;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background-color: #f5faff;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
.ng-select .ng-select-container,
.bold {
  font-weight: bold;
} */

/* .ng-select .ng-arrow-wrapper .ng-arrow {
  font-family: "icomoon" !important;
  border-color: inherit !important;
  border-width: 0 !important;
  font-size: 16px;
  top: 0 !important;
  left: -3px;
  color: inherit;
  text-align: center;
  transform: rotate(0deg);
  transform-origin: 8px 12px;
  transition: transform 0.2s ease;
}
.ng-select .ng-arrow-wrapper .ng-arrow::before {
  content: "\eb3a";
}
.ng-select-opened .ng-arrow {
  transform: rotate(180deg);
} */
/* ////////////////////// */
.uploud-container {
  display: inline-block;
}

.uploud-container .uploud-container-header {
  font-size: 12px;
  color: #525252;
  font-weight: bold;
  margin-bottom: 6px;
}

.uploud-container .card {
  /* border: 1px solid #8c6023; */
  border-radius: 4px;
  background-color: #f4f4f5;
}

.uploud-img-box {
  padding: 0.5rem 1rem 0;
  padding: 4px;
}

.uploud-img-box img {
  width: 110px;
  height: 110px;
  border-radius: 8px;
}

.upload-footer {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: #005d8e;
}

.table .uploud-img-box img {
  width: 80px;
  height: 80px;
}

.table .upload-footer {
  padding: 0.125rem 1rem 0.5rem;
  background-color: #bdbdbd;
}

.highcharts-credits {
  display: none;
}

/* **************************Print**************************************** */

.print-only {
  display: none;
}

@media print {

  ng-progress,
  .navbar,
  .side-menu,
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  .main-content {
    margin-top: 0 !important;
  }

  .main-page {
    height: auto;
  }

  .table-scroll {
    max-height: unset;
    overflow-y: unset;
  }

  .table thead tr:last-child td,
  .table thead tr:last-child th {
    /* position: unset !important; */
    top: 0;
  }

  table {
    page-break-after: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  td {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-row-group;
  }

  tfoot {
    display: table-footer-group;
  }

  .p0-print {
    padding: 0 !important;
  }

  .main-panel {
    padding-inline-end: unset;
    padding-top: unset;
    /* overflow-y: unset; */
  }

  .wrapper-view {
    margin-top: unset !important;
  }

  .tab-container.m-3 {
    margin: unset !important;
  }
}

.print-describe-box {
  border: 1px dashed #918c8c;
  padding: 0px 4px 2px;
  border-radius: 3px;
}

.print-details {
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1.5px solid #005d8e;
}

.print-details p {
  font-size: 15px;
  font-weight: bold;
  border: 1px dashed #aaaaaa;
  border-radius: 4px;
  padding: 0 8px 4px;
  margin-bottom: 0;
}

.print-title {
  border: 1px solid #161616;
  padding: 1px 8px 5px;
  box-shadow: 0px 1px 5px 3px #734a1129;
}

.card-info {
  padding: 8px 16px;
  box-shadow: 0px 1px 2px #33333333;
}

.card-trip .delivery-man-status {
  padding: 2px 5px;
  font-size: 11px;
  border-radius: 4px;
  /* margin-bottom: 12px; */
}

.delivery-man-stats {
  margin-bottom: 12px;
}

.card-trip .customer-number {
  padding: 6px 12px;
  box-shadow: 0px 1px 1px #00000029;
  border-radius: 6px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6e7e8;
}

.card-trip .customer-number:not(:last-child) {
  margin-bottom: 4px;
}

/* .card-trip .order-numbers {
  max-height: 120px;
  overflow-y: auto;
} */
/* .card-trip .add-order {
  width: 100%;
  padding: 8px 0px;
  background: #f2f2f2;
  border: 1px solid #0066b3;
  border-radius: 6px;
  color: #0066b3;
  display: flex;
  align-items: center;
  justify-content: center;
} */
.pickup-bar {
  margin: -12px;
  padding: 8px 12px;
  background-color: #e6e7e8;
  border-radius: 8px 8px 0 0;
}

.pickup-number {
  padding: 5px 8px;
  background: #e6e7e8;
  margin-top: 8px;
  margin-inline-end: 8px;
  margin-inline-start: 8px;
  border-radius: 4px 4px 0px 0px;
}

.order-numbers {
  max-height: 164px !important;
  overflow-y: auto;
  /* margin-inline-end: -12px; */
}

.deliveryman-name {
  color: #0b1e28;
  line-height: 19px;
  font-weight: bold;
  font-size: 14px;
}

.deliveryman-mobile {
  margin: 0;
  line-height: 19px;
  color: #707070;
  font-weight: bold;
  font-size: 11px;
}

.icon-details {
  line-height: 17px;
  display: flex;
  align-items: center;
}

.icon-details .font-xs {
  font-size: 10px !important;
  color: #666f76;
}

.icon-details i {
  padding: 8px;
  border-radius: 100px;
  margin-inline-end: 10px;
  font-size: 1.25rem;
  margin-inline-end: 10px;
}

.icon-details .uil-map {
  color: #03a8ff;
  background-color: #d6edff;
}

.icon-details .uil-clock,
.icon-details .uil-mobile-android-alt,
.icon-details .uil-location-point,
.icon-details .uil-invoice {
  color: #32cc3e;
  background-color: #def7e0;
}

.icon-details .uil-apps,
.icon-details .uil-user {
  color: #ffc400;
  background-color: #fff5d6;
}

.icon-details .uil-user-location {
  color: #fb7d45;
  background-color: #fff1eb;
}

.icon-details .uil-notes {
  color: #03a8ff;
  background-color: #d6edff;
}

.icon-details .uil-map-marker-minus {
  color: #cc324c;
  background-color: #ffe5e5;
}

.icon-details .uil-tachometer-fast,
.icon-details .uil-ban {
  color: #cc324c;
  background-color: #cc324c1c;
}

.icon-details .uil-clock {
  color: #03a8ff;
  background-color: #03a8ff1c;
}

.icon-details .uil-store {
  color: #03a8ff;
  background-color: #03a8ff1c;
}

.icon-details .uil-sad-dizzy {
  color: #112a4e;
  background-color: #03a8ff1c;
}

.icon-details .icon-detail .font-normal {
  font-size: 14px;
}

.rate-status {
  padding: 2px 8px 3px;
  /* background-color: #009d48; */
  margin-inline-end: 10px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.page-header .rate-status {
  padding: 4px 8px;
  height: 24px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  border-radius: 4px;
}

.tarcking-container {
  position: relative;
  margin-inline-end: 35px;
  margin-top: 50px;
}

.trip-tracking .line,
.order-track {
  display: inline-block;
}

.trip-tracking img {
  width: 28px;
  padding: 6px;
  border-radius: 50%;
}

.trip-tracking i {
  padding: 7px 9px;
  border-radius: 50%;
  font-size: 12px;
}

.trip-tracking .uil-play {
  padding: 7px 9px;
  border-radius: 50%;
  font-size: 12px;
  padding: 7px 8px 7px 9px;
}

.trip-tracking .uil-plus-circle {
  border-radius: 50%;
  font-size: 12px;
  padding: 7px 8px 7px 9px;
  border: 1px solid #0083e6;
}

.trip-tracking .fa-motorcycle {
  padding: 7px;
}

.trip-tracking .uil-info-circle {
  padding: 3px;
  border: 1px solid #ffc400;
  color: #ffc400;
}

.tracking-container {
  position: relative;
  margin-inline-end: 35px;
  margin-top: 50px;
}

.track-icons {
  display: flex;
}

.trip-icon {
  position: absolute;
  top: -3px;
  background-color: #fff;
}

.trip-icon .time {
  position: absolute;
  top: -20px;
  /* left: -1px; */
  font-size: 9px;
  width: 50px;
  height: 15px;
}

.top-n31 {
  top: -31px !important;
}

.trip-tracking .line {
  height: 2px;
  vertical-align: middle;
}

.trip-tracking .trip-icon i:hover~.icon-hover,
.trip-tracking .icon-hover.active {
  opacity: 1;
}

.trip-icon .icon-hover {
  width: 110px;
  background-color: #fff;
  position: absolute;
  border-radius: 5px;
  box-shadow: -4px 0px 15px #0b1e3829;
  padding: 0 5px;
  opacity: 0;
  z-index: 1;
  top: 32px;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.trip-icon .icon-hover .font-normal {
  font-size: 10px;
}

.trip-icon .icon-hover .font-xs {
  line-height: 16px;
  font-size: 10px;
}

.point-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 5px;
}

.map {
  width: 100%;
  height: 580px;
  box-shadow: 0px 1px 4px #000f1a52;
  border: 2px solid #ffffff;
}

agm-map {
  width: 100%;
  height: 100%;
}

.arrow-sort {
  height: 7px;
  overflow: hidden;
}

.arrow-sort .sort-icon-des {
  position: relative;
  top: -7px;
}

.arrow-sort .sort-icon-ase {
  position: relative;
  top: -1px;
}

.line {
  height: 1px;
  background-color: #cccfd1;
  width: 100%;
}

.advanced-search {
  -webkit-transition: 6s all ease-in-out;
  -moz-transition: 6s all ease-in-out;
  -o-transition: 6s all ease-in-out;
  transition: 6s all ease-in-out;
}

.active-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #32cc3e;
  position: absolute;
}

.delivery-men .card {
  padding: 8px 0px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none;
  /* box-shadow: 2px 5px 5px 4px #112a4e38; */
}

.delivery-men .active-circle {
  right: 0;
  bottom: 0;
  position: absolute;
}

.delivery-men .queue {
  border: 1px solid #005d8e;
  border-radius: 4px;
  color: #005d8e;
  padding: 3px 5px;
  box-shadow: 0px 1px 3px 1px #0b1e3860;
  display: inline-block;
  min-width: 25px;
  line-height: 1;
  text-align: center;
}

.delivery-men .card-btn {
  font-size: 12px;
  width: 100%;
  height: 40px;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  -webkit-transition: all 5s ease-in-out;
  -moz-transition: all 5s ease-in-out;
  -o-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
}

/* --------progress bar circular---------- */
@keyframes growProgressBar {

  0%,
  33% {
    --pgPercentage: 0;
  }

  100% {
    --pgPercentage: var(--value);
  }
}

.brand-index div[role="progressbar"] {
  --size: 1.5rem;
  --fg: #1877f2;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
      white 80%,
      transparent 0 99.9%,
      white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0px;
  color: var(--fg);
}

.brand-index div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
}

.total-items {
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 13px;
}

.ngx-pagination {
  text-align: right;
  font-family: AMPLESOFTPRO-REGULAR;
  padding: 0;
  margin-bottom: 0 !important;
}

.ngx-pagination .pagination-previous a::before,
.ngx-pagination .pagination-previous.disabled::before {
  display: none !important;
}

.ngx-pagination .pagination-next a::after,
.ngx-pagination .pagination-next.disabled::after {
  display: none !important;
}

.ngx-pagination li {
  margin: 0;
  border: none;
  font-size: 12px !important;
  font-weight: 600;
  padding: 0.1875rem 0.25rem !important;
  text-align: center;
  min-width: 28px !important;
  color: #717680 !important;
}


.ngx-pagination li span {
  display: inline-block;
}

.ngx-pagination a,
.ngx-pagination button {
  padding: 0 !important;
}

.ngx-pagination li a:hover,
.ngx-pagination li span:hover {
  background-color: unset !important;
  color: unset !important;
}

/* .ngx-pagination li:hover {
  background-color: #004366 !important;
  color: #fff !important;
} */
.ngx-pagination .pagination-next,
.ngx-pagination .pagination-previous {
  width: 66px !important;
}

.ngx-pagination .pagination-next {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  margin-inline-start: 4px;
}

.ngx-pagination .pagination-previous {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  margin-inline-end: 4px;
}

.ngx-pagination li span,
.ngx-pagination .pagination-previous a,
.ngx-pagination .pagination-next a {
  padding-block: 1.2px !important;
}

.ngx-pagination .current {
  background-color: #F9F5FF !important;
  color: #7f56d9 !important;
}

.paggination nav {
  float: right;
  margin-top: 10px;
}

.paggination .page-item {
  margin: 0 4px;
  text-align: center;
}

.paggination .page-item a {
  background-color: unset;
}

.ngx-pagination .disabled {
  color: #112a4e !important;
}

.ngx-pagination .disabled:hover {
  color: #112a4e !important;
  background-color: unset !important;
}

.paggination .page-item a:hover {
  background-color: #54007a;
  color: #fff !important;
}

.paggination .pages {
  margin-top: 5px !important;
}

.pre-next {
  background-color: #004366;
}

.ngx-pagination li,
.paggination .page-item a {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.paggination nav {
  float: right;
  margin-top: 10px;
}

.paggination .page-item {
  margin: 0 4px;
  text-align: center;
}

.paggination .page-item a {
  background-color: unset;
}

.paggination .page-item a:hover {
  background-color: #0b1e38;
  color: #fff !important;
}

.paggination .pages {
  margin-top: 5px !important;
}

.pre-next {
  background-color: #f9f9f9;
}

.ngx-pagination li,
.paggination .page-item a .app-sidebar .navigation li,
.off-canvas-sidebar .navigation li {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.delivery-men .card-btn.break {
  height: auto !important;
  width: 70px !important;
  padding: 6px 3px;
  margin-top: 5px;
}

.profile-side img {
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.rewards .rank {
  background-color: #fb7d45;
  padding: 6px 10px;
  border-radius: 3px;
}

.rewards .months {
  padding: 6px 10px;
  border-radius: 3px;
  background-color: #f7f7f7;
  height: 45px;
}

.Wallet .info-box {
  width: 36px;
  height: 36px;
  display: flex;
  border-radius: 50%;
}

@media (min-width: 992px) and (max-width: 1080px) {
  .Wallet .font-11px {
    font-size: 10px;
  }
}

.rewards .months p {
  line-height: 2.4;
  font-size: 13px;
}

.performance .btn,
.dashborad-days.btn {
  border-radius: 20px;
  background-color: #ebecf0;
  color: #112a4e;
}

.custom-save.btn {
  border-radius: 12px;
  height: 28px;
  padding: 0;
  letter-spacing: 1.1px;
}

.profile-content .performance .btn.active,
.dashborad-days.btn.active {
  border-radius: 20px;
  background-color: #005d8e;
  color: #fff;
}

.profile-content .rate-box {
  border: 2px solid #ebecf0;
  border-radius: 8px;
}

.profile-content .progress-bar {
  background-color: #ebecf0;
  border-radius: 8px;
}

.height-27 {
  height: 27px;
}

.profile-content .progress {
  height: 12px;
  border-radius: 8px;
}

.profile-content .icon-details img {
  padding: 7px 10px;
}

.service-box {
  border: 1px solid #bfc4ce;
  border-radius: 5px;
  -webkit-transition: all 0.4s ease-in-out !important;
  -moz-transition: all 0.4s ease-in-out !important;
  -o-transition: all 0.4s ease-in-out !important;
  transition: all 0.4s ease-in-out !important;
}

.service-box.active {
  border: 1px solid #005d8e;
}

.service-box .fa-syringe,
.service-box img {
  background-color: #03a8ff20;
  border-radius: 50%;
  padding: 5px;
}

.service-box img {
  width: 35px;
  height: 35px;
}

.service-box.selected {
  background-color: #0b1e38 !important;
  color: #fff !important;
}

.service-box.choosed {
  box-shadow: 0px 0px 5px 1px #005d8ec7;
}

.qr-code {
  background-color: #f3f6f8;
  border-radius: 8px;
}

.qr-code .qr-img {
  background-color: #ffffff;
  border-radius: 4px;
  /* padding: 1px; */
}

.qr-code .qr-img img {
  width: 70px;
  height: 70px;
}

.print-qr-code .up-img {
  width: 140px;
  height: 140px;
  position: absolute;
  top: 670px;
  left: 1830px;
  background-color: #fff;
  border-radius: 23px;
  padding: 25px;
  z-index: 999;
}

.print-qr-code {
  border-top: 12px solid #ffc400;
  border-bottom: 12px solid #ffc400;
  background-color: #fff;
  /* width: 500px; */
  margin: auto;
}

.print-qr-code .qrcode {
  height: 900px;
  overflow: hidden;
  width: 900px;
  display: inline-block;
  direction: ltr;
}

.print-qr-code .qrcode img {
  height: 1050px;
  width: 1050px;
  margin-inline-start: -75px;
  margin-top: -75px;
}

.div-loading {
  position: absolute;
  top: calc(50% - 58px);
  left: calc(50% - 122px);
  width: auto;
}

.div-loading .loading {
  min-width: 180px;
  max-width: 220px;
  text-align: center;
}

.div-loading .card {
  box-shadow: 0px 12px 32px #000f1a26;
  border: 1px solid #e6e7e8;
  padding: 32px;
}

.active-point {
  height: 15px;
  width: 15px;
  background: rgb(5, 142, 63);
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 2px solid #fff;
}

.active-deliverymen {
  overflow-x: auto;
  padding-bottom: 16px;
  display: flex;
  align-items: flex-start;
}

.rate-badge {
  padding: 3px 5px;
  background-color: #40464d;
  box-shadow: 0px 1px 4px #15171a40;
  border: 1px solid #ffffff;
  border-radius: 4px;
  height: 20px;
  margin-bottom: -10px;
  width: 44px;
}

.pickup-card {
  background-color: #fff;
  margin-top: 1px;
  width: 100% !important;
  border: 1px solid #cdd1d5;
  transition: all 0.15s ease-in-out;
  z-index: 1021;
  user-select: none;
  box-shadow: 0px 1px 2px #15171a26;
  border: 1px solid #cdd1d5;
  border-radius: 4px;
}

.pickup-card .pickup-card_header {
  display: flex;
  align-items: center;
  padding: 4px 8px;
}

.pickup-card .pickup-card_body {
  padding: 8px;
}

.pickup-card .pickup-card_separate {
  margin: 0;
  /* margin-top: 4px;
  margin-bottom: 8px; */
  background-color: #cdd1d5;
}

.pickup-status {
  /* padding: 2px 4px; */
  display: flex;
  border-radius: 2px;
  /* min-width: 56px; */
}

.pickup-status_text {
  font-size: 11px;
  margin: auto;
}

.pickup-card.selected {
  border-color: #0005f1 !important;
  outline: 1px solid #0005f1;
}

.pickup-card.pause {
  background-color: #fffce5;
}

.active-pickup {
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.pickup-order {
  overflow-y: auto;
  max-height: 220px;
  margin-top: 8px;
}

.pickup-number {
  padding: 5px 8px;
  background: #e6e7e8;
  margin-top: 8px;
  margin-inline-end: 8px;
  margin-inline-start: 8px;
  border-radius: 4px 4px 0px 0px;
  display: flex;
  align-items: center;
}

.area-card {
  background-color: white;
  box-shadow: 0px 1px 4px #15171a40;
  border-radius: 8px;
  /* max-height: 260px; */
}

.area-card-header {
  display: flex;
  align-items: center;
  /* cursor: pointer; */
  border-radius: 8px 8px 0px 0px;
  padding: 8px;
}

.area-deliverymen:not(:last-child) {
  margin-inline-end: 16px;
}

.brand-table tr td {
  padding: 8px 12px;
}

.brand-table .brand-menu:hover {
  background: #f3f4f4;
  color: #000f1a;
}

.brand-table .brand-menu {
  color: #80878d;
  border-radius: 6px;
}

.brand-table .warning td:not(:first-child) {
  box-shadow: inset 1px 0px 0px #ffffff !important;
}

.brand-profile .img-side {
  padding: 40px 40px 24px;
}

.orders-quota .progress {
  background-color: #fff;
}

.brand-profile .map,
.create-store .map {
  height: 240px;
}

.hub-profile .map {
  height: 340px !important;
}

/* .assign-stores{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
} */
.store-sign {
  padding: 4px 12px 4px 4px;
  background: #e6e7e8;
  box-shadow: 0px 1px 2px #000f1a00;
  border-radius: 38px;
  color: #333f48;
  display: flex;
  align-items: center;
  border: 1px solid #e6e7e8;
}

.select-store {
  padding: 8px 12px;
  background: #e6e7e8;
  box-shadow: 0px 1px 2px #000f1a00;
  border-radius: 8px;
  color: #333f48;
  display: flex;
  align-items: center;
  border: 1px solid #e6e7e8;
}

.select-store.selected {
  border: 1px solid #1a9cff;
}

.store-sign .number-store {
  width: 24px;
  height: 24px;
  font-size: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  font-family: "AMPLESOFTPRO-REGULAR";
  color: #000f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 8px;
}

.select-store:hover {
  background: #ffffff;
  border: 1px solid #e6e7e8;
  box-shadow: 0px 1px 2px #000f1a26;
}

.assign-delivery {
  display: flex;
  align-items: center;
  border: 1px solid #e6e7e8;
  border-radius: 6px;
  padding: 8px 12px;
}

.assign-delivery:hover {
  box-shadow: 0px 1px 2px #000f1a26;
}

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

.login-photo {
  height: 28px;
}

.powered-by {
  padding: 6px 12px 5px;
  background: #e6e7e8;
  border-radius: 12px;
  margin-bottom: 12px;
}

.powered-by p {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #666f76;
  line-height: 1;
  text-transform: uppercase;
}

.trips-today {
  padding: 8px 16px;
}

.stat-block {
  padding: 8px 12px;
  border-radius: 6px;
  margin-inline-end: 8px;
}

.stat-label {
  width: 80px;
  max-width: 80px;
  margin-inline-end: 8px;
}

.stat-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 8px;
}

.stat-date {
  padding: 8px 12px;
  /* width: 104px;
  max-width: 104px; */
  margin-inline-end: 8px;
  border: 1px solid #cccfd1;
  border-radius: 16px;
}

.number-agent {
  padding: 1px 5px 1px 5px;
  background-color: #666f76;
  color: #fff;
  border-radius: 3px;
  margin-inline-start: 4px;
}

/* ///////////////// */
.list-450,
.list-400,
.list-300 {
  overflow-y: auto;
  overflow-x: hidden;
}

.list-400 {
  max-height: 400px;
  min-height: 200px;
}

.list-300 {
  max-height: 300px;
}

.list-450 {
  max-height: 450px;
  min-height: 300px;
}

.card-img-info {
  -webkit-transition: 0.3s all ease-in;
  -moz-transition: 0.3s all ease-in;
  -o-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}

.card-img-info {
  background-color: #fff;
  padding: 6px 10px;
  border: 1px solid #cdd1d5;
  border-radius: 6px;
  box-shadow: 0px 1px 0px #15171a26;
}

.card-img-info.active {
  border-color: #0f61fd;
  background-color: #0f61fd;
}

.card-img-info.selected {
  box-shadow: 0px 8px 10px #15171a26;
}

.card-img-info.active p {
  color: #ffffff !important;
}

.card-img-info.active img {
  outline: 2px solid #fff;
}

.card-img-info:hover {
  box-shadow: 0px 1px 1px #000f1a26;
}

.select-placeholder {
  background-color: #f0f1f2;
  box-shadow: 0px 1px 0px #15171a26;
  border: 1px solid #cdd1d5;
  border-radius: 6px;
  padding: 1rem;
}

.selected {
  border-color: #1a9cff !important;
}

.selection-date {
  padding: 4px;
  background-color: #e6e7e8;
  border-radius: 6px;
}

.selection-tabs {
  background-color: #ebeff2;
  border-radius: 20px;
}

.selection-tabs .btn-left,
.selection-tabs .btn-right,
.selection-tabs .btn-center {
  padding: 6px 12px;
  background-color: #ebeff2;
  color: #000f1a;
  font-size: 12px;
  line-height: 1;
}

.selection-tabs .btn-left {
  border-radius: 20px 0 0 20px;
}

.selection-tabs .btn-right {
  border-radius: 0 20px 20px 0;
}

.selection-tabs .btn-center {
  border-radius: 0 0 0 0;
  border-left: 1px solid #bec1c3;
  border-right: 1px solid #bec1c3;
}

.selection-tabs .btn-left:hover,
.selection-tabs .btn-right:hover,
.selection-tabs .btn-center:hover {
  color: #000f1a;
}

.reload-icon {
  border-radius: 4px;
  padding: 6px 6px 4px;
  background: #ebeff2;
}

.selection-tabs button.active {
  background-color: #0083e6;
  color: #ffffff !important;
}

.qrcode img {
  width: 280px;
  height: 280px;
}

.qr-code-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-selection {
  padding: 4px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
}

.date-selection .form-group {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 6px;
  /* height: 28px !important; */
  max-width: 157px;
  border: 1px solid #cdd1d5;
}

.date-selection .form-group label {
  line-height: 28px;
  margin-bottom: 0px;
  margin-inline-start: 8px;
}

.date-selection .form-group input {
  border: none;
  height: 28px;
  padding: 4px;
  padding-right: 8px;
  color: #0083e6;
}

.date-selection .form-group input::-webkit-input-placeholder {
  font-size: 12px !important;
  overflow: visible;
}

.tax-bill {
  background-color: #ffffff;
  line-height: 1.5;
  font-family: "CAIRO-MEDIUM" !important;
  max-width: 1024px;
  margin: auto;
}

.tax-header {
  padding: 16px 40px;
  /* background: #ffcb30; */
  display: flex;
  align-items: center;
}

.tax-header-logo {
  height: 72px;
}

.tax-body {
  padding: 12px 40px;
}

.tax-date {
  padding: 4px 12px;
  background-color: #ffffff;
  color: #000f1a;
  font-weight: bold;
  border-radius: 4px;
}

.table-stores {
  margin-top: 45px;
}

.table-stores-header {
  padding: 8px 24px;
  box-shadow: inset 0px -1px 0px #dadcde;
}

.print-only {
  display: none;
}

.sort-trip {
  display: flex;
  align-items: center;
  /* overflow-x: auto; */
}

.search-names {
  display: flex;
  align-items: center;
  overflow: auto;
}

.search-name {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 5px 8px;
  display: flex;
}

.search-name:not(:first-child) {
  margin-inline-start: 8px;
}

.search-name p {
  font-size: 10px;
  color: #333f48;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.search-name:hover {
  background-color: #ebeced;
}

.search-name:hover p {
  background-color: #ebeced;
}

.search-select {
  background-color: #e8f0fe;
}

.search-select p {
  color: #1967d2 !important;
}

.number-selection {
  background-color: #0066b3;
  border-radius: 50%;
  padding: 5px;
  color: #ffffff;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reset-button {
  color: #999fa3;
  padding: 8px 16px;
  box-shadow: -4px 0px 8px #000f1a26;
  background-color: #ffffff;
  min-height: 45px;
  height: 100%;
  border: none;
  z-index: 1;
}

.modal-header .btn-with-border-only {
  background-color: white;
  color: #15171a;
  padding: 6px 12px;
  font-size: 14px;
  height: 32px;
  line-height: 1;
  box-shadow: 0px 1px 2px #15171a26;
  border: 1px dashed #cdd1d5;
}

.modal-header .btn-with-border-only:hover {
  /* background-color: #e5f4ff !important; */
  color: #15171a;
}

.performance {
  padding: 2px 5px 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  /* display: inline-block; */
  text-align: center;
}

@media print {
  .no-print {
    display: none;
  }

  .print-only {
    display: block;
  }

  .qr-code-container {
    display: flex;
    height: 90vh;
    align-items: center;
    justify-content: center;
  }

  .qrcode img {
    width: calc(100vw - 100px) !important;
    height: auto !important;
  }

  table {
    page-break-after: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  td {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-row-group;
  }

  tfoot {
    display: table-footer-group;
  }

  .modal-backdrop,
  .modal {
    display: none !important;
  }

  .main-panel {
    overflow-x: unset !important;
    overflow-y: unset !important;
    padding: 0px !important;
  }

  .main-page {
    padding: 0 !important;
  }
}

.page-content.with-side,
.page-side {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-content.with-side {
  position: relative;
}

.config-page .page-side {
  padding-inline-start: 216px;
}

@media (max-width: 767.98px) {
  .config-page .page-side {
    padding-inline-start: unset;
  }
}

.page-side {
  padding-inline-start: 232px;
}

.first-tabs {
  width: 216px;
  position: fixed;
  top: 64px;
  /* right: 16px; */
  /* bottom: 0; */
  left: 72px;
  /* /* margin-inline-end: 1rem; */
}

.alert-popup {
  margin-top: 3rem;
}

.first-tabs .img-side {
  width: calc(75% - 16px);
  height: auto;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
}

.first-tabs .img-side .img {
  border-radius: 16px;
  width: 128px;
  height: 128px;
  margin: 0 auto;
}

.first-tabs .tabs-header {
  padding: 2rem 1rem;
  text-align: center;
}

.first-tabs .tabs-header p:first-childrb {
  font-size: 16px;
  color: #000f1a;
  font-family: "AMPLESOFTPRO-bold", "CAIRO-bold";
}

.first-tabs .tab {
  padding: 12px;
  box-shadow: none;
}

.first-tabs .tab i {
  line-height: 1;
  color: #666f76;
  margin-inline-end: 12px;
}

.first-tabs .tab.active i {
  color: #0f61fd;
}

/* .first-tabs .tab:hover {
  box-shadow: inset 3px 0px 0px #e6e7e8;
  background-color: #F5F5FE;
  border-radius: 6px !important;

} */

.first-tabs .tab.active {
  /* box-shadow: inset 3px 0px 0px #0F61FD !important; */
  background-color: #f5f5fe;
  border-radius: 6px !important;
}

.first-tabs .card {
  padding: 4px;
}

.first-tabs .scroll-container {
  max-height: calc(100vh - 76px);
  min-height: 380px;
}

.config-page .tab.active {
  background-color: #0f61fd !important;
  border-radius: 0px !important;
}

.config-page .tab.active i,
.config-page .tab.active p {
  color: #fff !important;
}

.config-page .accordion-collapse .tab.active {
  background-color: #ebf2ff !important;
}

.config-page .accordion-collapse .tab.active i,
.config-page .accordion-collapse .tab.active p {
  color: #0f61fd !important;
}

.layout-dropdown-menu .tab {
  box-shadow: none;
}

.config-page .layout-dropdown-menu .dropdown-menu .active {
  box-shadow: unset !important;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

.accordion-button:not(.collapsed) {
  color: #15171a;
  background-color: unset;
  box-shadow: unset;
  font-size: 14px;
}

.accordion-button {
  padding: 8px 12px;
}

.accordion-button::after,
.accordion-button::before {
  background-size: 18px;
  background-image: url("../../assets/image/angle-down.svg") !important;
  width: 18px;
  height: 18px;
  transform: unset !important;
}

.tab.active.accordion-button::after,
.tab.active.accordion-button::before {
  background-image: url("../../assets/image/angle-down-white.svg") !important;
  transform: rotate(-180deg) !important;
}

.accordion-button:focus {
  border-color: unset;
  outline: 0;
  box-shadow: unset;
}

.accordion-item .tab {
  padding: 6px 12px !important;
}

.accordion-item .tab a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: transparent;
  margin: 0 18px 0 5px;
}

.accordion-item .tab.active a:before {
  background-color: #0f61fd !important;
}

.accordion-item .tab:hover a:before {
  background-color: #6b7480;
}

.accordion-item .tab:hover {
  background: unset;
  box-shadow: unset;
}

.second-tabs-layout .card {
  border-radius: 0 0 0.5rem 0.5rem;
}

.second-tabs {
  padding: 1rem 2rem 0 2rem;
  background-color: #fafbfc;
  border-radius: 8px 8px 0px 0px;
  border-bottom: 1px solid #cccfd1;
}

.second-tabs .tabs-header {
  margin-bottom: 1rem;
}

.second-tabs .tabs-header i,
.second-tabs .tab i {
  margin-inline-end: 0.5rem;
}

.second-tabs .tabs-header p {
  font-size: 20px;
  color: #15171a;
  font-weight: bold;
}

.second-tabs .tab {
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  padding: 0.75rem 1rem;
  transition: 0.1s ease-in all;
  cursor: pointer;
}

.second-tabs .tab:hover {
  border-color: #b3b7ba;
}

.second-tabs .tab.active {
  border-bottom: 2px solid #0f61fd;
}

.first-tabs .tab,
.second-tabs .tabs-header,
.second-tabs .tab {
  display: flex;
  align-items: center;
  border-radius: 0% !important;
}

.first-tabs .tab p,
.second-tabs .tab p,
.accordion-item .tab p {
  font-size: 14px;
  color: #666f76;
}

.first-tabs .tab i,
.second-tabs .tab i {
  font-size: 16px;
  color: #666f76;
}

.first-tabs .tab:not(.active):hover i,
.first-tabs .tab:hover p,
.second-tabs .tab:hover p,
.second-tabs .tab:not(.active):hover i {
  color: #15171a;
}

.first-tabs .tab.active p,
.first-tabs .tab.active i,
.second-tabs .tab.active p,
.second-tabs .tab.active i {
  color: #0f61fd;
  font-family: "amplesoft-bold", "CAIRO-BOLD";
}

.second-tabs .tab p,
.second-tabs .tab {
  transition: 0.1s ease-in all;
}

.order-head {
  background-color: #ebecf0;
  border-radius: 16px 16px 0px 0px;
}

.order-items .left-img {
  background-color: #ebecf0;
  padding: 10px 13px;
  border-radius: 5px;
}

.user-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.btn-gray {
  border-radius: 20px;
  background-color: #ebecf0;
  color: #112a4e;
}

.ch-performance .perf:first-of-type {
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
}

.ch-performance {
  height: 40px;
  display: flex;
  align-items: center;
}

.ch-performance .perf {
  width: 25%;
  padding: 10px 0;
  border: 1px solid #005d8e;
  cursor: pointer;
  opacity: 0.8;
  -webkit-transition: all 0.6s ease-in-out !important;
  -moz-transition: all 0.6s ease-in-out !important;
  -o-transition: all 0.6s ease-in-out !important;
  transition: all 0.6s ease-in-out !important;
}

.ch-performance .perf:last-of-type {
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
}

.old-perf {
  background-color: #005d8e96;
}

.filter-search {
  padding: 0 12px;
  background-color: #ffffff;
  box-shadow: inset 0px -1px 0px #15171a1a;
  display: flex;
  align-items: center;
}

.filter-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.filter-sticky .form-control {
  background-color: #15171a1a;
}

.top-40 {
  top: 40px !important;
  z-index: 119 !important;
}

.top-20 {
  top: 20px !important;
  z-index: 119 !important;
}

.select-search {
  border-radius: 4px;
  border: none;
  max-width: 134px;
  min-width: 134px;
  font-size: 13px;
  color: #000f1a;
  background-color: #f0f1f2;
}

.select-search .ng-select.ng-select-single .ng-select-container {
  background-color: #f0f1f2 !important;
}

.trip-card {
  background: #f0f1f2;
  border-radius: 8px;
  padding-bottom: 8px;
  width: 230px;
  height: fit-content;
}

.trip-card:not(:last-child) {
  margin-inline-end: 12px;
}

.trip-card .delivered {
  background-color: #ffffff;
  margin-inline-start: auto;
  box-shadow: 0px 1px 1px #0b1e3829;
  border-radius: 4px;
  padding: 4px 7px;
}

.trip-header {
  padding: 8px;
  border-bottom: 1px solid #cdd1d5;
  border-radius: 8px 8px 0px 0px;
  background-color: #e6e8ea;
  display: flex;
  align-items: center;
}

.trip-header.sent {
  background-color: #fffce5;
  box-shadow: inset 0px -1px 0px #ccb400;
}

.trip-order-list {
  max-height: 245px;
}

.order-list {
  max-height: 511px;
}

.order-list .row {
  min-height: 32px;
}

.trip-order-list,
.order-list {
  overflow-y: auto;
  overflow-x: hidden;
}

.order-group {
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px #15171a26;
  border: 1px solid #cdd1d5;
  background-color: #f0f1f2;
}

/* .task-card {
  background-color: #FAFBFC;
  padding: 8px;
  border-radius: 4px;
  margin-top: 1px;
  width: 100% !important;
  box-shadow: 0px 1px 0px #15171A40;
  border: 1px solid #CDD1D5;
  transition: all 0.15s ease-in-out;
  z-index: 1021;
}

.task-card.selected {
  border-color: #0F61FD !important;
  outline: 1px solid #0F61FD;
  box-shadow: 0px 8px 10px #15171A26;
}

.task-card.pause {
  background-color: #FFFCE5;
  border-color: #CCB400 !important;
} */

.page-header {
  box-shadow: 0px 1px 4px #000f1a26;
  background-color: #fff;
}

.wrapper-view,
dispatch-index,
app-index {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.wrapper-view,
app-create,
app-forbidden,
dispatch-index {
  height: 100%;
}

loading {
  height: 100%;
}

app-forbidden {
  display: flex;
  align-items: center;
  justify-content: center;
}

dispatch-index .page-content {
  height: auto;
}

.single-store {
  height: calc(100% - 40px);
}

.single-store .dispatch-start-section {
  flex-direction: column;
  width: calc(100% - 380px);
}

.single-store .dispatch-end-section {
  flex-direction: column;
  margin-inline-start: 12px;
  max-width: 380px;
  min-width: 380px;
}

.single-store,
.single-store .dispatch-start-section,
.single-store .dispatch-end-section {
  flex: 1 1 auto;
  display: flex;
}

.single-store .order-list {
  max-height: unset;
  flex: 1 1;
}

.single-store .tab-filter-container .tab-content {
  border: 1px solid #cdd1d5;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  justify-content: center;
}

.single-store .tab-filter-container .tab-content .tab-text {
  font-size: 14px;
  margin-inline: 4px;
}

.single-store .tab-filter-container .tab-content .tab-icon {
  width: 16px;
  height: 16px;
}

.tracking-page .gm-style-iw-d {
  padding: 0px !important;
  overflow: unset !important;
  max-height: none !important;
}

.tracking-page .gm-style-iw-c {
  padding: 8px !important;
  padding-top: 24px !important;
  max-height: none !important;
  box-shadow: unset !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

.tracking-page .gm-style .gm-style-iw-tc::after {
  left: 6px !important;
  top: -9px !important;
}

.tracking-page .gm-ui-hover-effect {
  display: none !important;
}

.pulse {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  text-align: center !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
}

.pulse-available {
  animation: available 2s linear infinite !important;
  -webkit-animation: available 2s linear infinite !important;
}

.pulse-onDuty {
  animation: onDuty 2s linear infinite !important;
  -webkit-animation: onDuty 2s linear infinite !important;
}

@keyframes available {
  0% {
    box-shadow: 0 0 0 0 #00c853, 0 0 0 0 #00c853;
  }

  40% {
    box-shadow: 0 0 0 7px rgba(255, 0, 64, 0), 0 0 0 0 #00c853;
  }

  80% {
    box-shadow: 0 0 0 7px rgba(255, 0, 64, 0), 0 0 0 5px rgba(255, 0, 64, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 5px rgba(255, 0, 64, 0);
  }
}

@keyframes onDuty {
  0% {
    box-shadow: 0 0 0 0 rgb(3, 168, 255), 0 0 0 0 rgb(3, 168, 255);
  }

  40% {
    box-shadow: 0 0 0 7px rgba(255, 0, 64, 0), 0 0 0 0 rgb(3, 168, 255);
  }

  80% {
    box-shadow: 0 0 0 7px rgba(255, 0, 64, 0), 0 0 0 5px rgba(255, 0, 64, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 3px rgba(255, 0, 64, 0);
  }
}

.fast-action {
  width: 24px;
  height: 24px;
  font-size: 16px;
  margin-inline-start: 2px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 4px;
  margin: -4px;
}

.fast-action:hover {
  background-color: #e5e6ff;
}

.right {
  transform: rotateY(180deg) !important;
}

.note-p {
  background-color: #def2ff;
  color: #003455;
  padding: 3px 6px;
  border-radius: 2px;
}

.b-red {
  border: 1px solid #d50000;
}

.bg-secondary-md {
  height: 32px;
  font-size: 14px;
  padding: 6px 10px;
  font-size: 14px;
  background-color: #f0f1f2;
  color: #15171a;
}

.btn-group .active {
  background-color: #40464d !important;
  color: #ffffff !important;
}

.config .btn-group {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #cdd1d5;
  height: 32px;
  width: auto;
}

.config .btn-group .rb-btn {
  border-radius: unset;
  border: unset;
  box-shadow: unset;
  padding: 8px;
  width: 32px;
  height: 32px;
}

.config .btn-group .rb-btn:first-of-type {
  border-inline-end: 1px solid #cdd1d5;
}

.config .btn-group .rb-btn:last-of-type {
  border-inline-start: 1px solid #cdd1d5;
}

.config .btn-group .rb-btn:focus {
  border-color: #cdd1d5;
}

.config .btn-group .form-control {
  border-radius: unset;
  border: unset;
  text-align: center;
  height: 32px;
  width: 36px;
  padding-inline: 4px;
}

.config .btn-group .form-control:focus {
  border-color: usnet;
  outline-color: usnet;
}

.slider-handle {
  width: 14px !important;
  height: 14px !important;
}

/* .slider.slider-horizontal .slider-handle{
  margin-left: -14px !important;
} */
.slider.slider-horizontal {
  width: 130px !important;
  height: 14px !important;
}

.slider.slider-horizontal .slider-track {
  height: 4px !important;
  margin-top: -2px !important;
  border-radius: unset;
}

.slider-selection,
.slider-handle {
  background-color: #0f61fd !important;
  background-image: none !important;
  box-shadow: none;
}

.slider-track-high {
  background-color: #e6e8ea !important;
}

.radio-box {
  padding: 8px;
  border: 1px solid #cdd1d5;
  border-radius: 6px;
}

.radio-box.active {
  border-color: #0f61fd;
}

.radio-box:not(.active) label {
  color: #6b7480;
  font-family: "AMPLESOFTPRO-MEDIUM", "CAIRO-MEDIUM";
}

.skill-box {
  border: 1px solid #cdd1d5;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
}

.skill-box.active {
  box-shadow: 0px 4px 8px #15171a33;
  border-color: #0f61fd;
}

.skill-text {
  width: 72px;
  height: 28px;
}

#no-task.cdk-drop-list-dragging p {
  display: none;
}

.w-45 {
  width: 45px;
}

.duty {
  background-color: #009dff !important;
  color: white;
}

.penalized {
  background-color: #40464d !important;
  color: white;
}

.h-350 {
  height: 350px !important;
}

.card.card-role {
  box-shadow: 0px 0px 8px #15171a40;
  padding: 12px 16px;
}

.delivermen-list {
  position: absolute;
  top: 0;
  width: auto;
  bottom: 0;
  padding-block: 12px;
  overflow-y: auto;
  box-shadow: 1px 0px 2px #00000029;
  background-color: #ffffff;
}

.delivermen-list {
  width: 250px;
}

.delivermen-list::-webkit-scrollbar,
.order-list-incolapse::-webkit-scrollbar {
  width: 4px;
}

.delivery-box {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  /* margin-bottom: 8px; */
}

.delivery-box:hover {
  cursor: pointer;
  background-color: #f0f1f2;
}

.fast-task .form-control.disabled.bg-white {
  background-color: white !important;
  color: #000f1a !important;
}

.asolate {
  width: 1px;
  height: 18px;
  margin-inline: 12px;
  background-color: #cdd1d5;
}

.store-tracking-map {
  height: 560px;
}

.store-tracking-map .leaflet-popup-content-wrapper {
  margin: unset !important;
  padding: unset !important;
  text-align: unset !important;
}

.store-tracking-map .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: unset !important;
  width: 250px;
}

.store-tracking-map .leaflet-popup-content p {
  margin: unset !important;
}

.tab .tab-header .tab-title .title {
  text-transform: capitalize;
}

.overflow-visible {
  overflow: visible;
}

.btn-override {
  width: 171px !important;
  height: 59px !important;
  font-size: 22px !important;
}

.abused-pie-chart {
  gap: 40px;
}

.kpis-abused-dashboard-card {
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 14px 18px -10px rgba(13, 9, 9, 0.1);
  padding: 16px;
}

.abused-dashboard-card {
  min-width: 154px;
  min-height: 71px;
}

.kpis-abused-dashboard-card .header p {
  white-space: nowrap;
}

.abused-dashboard .divider {
  height: 49px !important;
  width: 1px;
  background: #c1c6ca;
}

.abused button:hover {
  transition: 0.2s;
  box-shadow: 0 0 0 0;
}

.charts {
  margin-top: 80px;
}

.live-dashboard .abused {
  box-shadow: 0px 1px 4px #0b1e3829;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

.tab-geo {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
}

.tab-geo .tab {
  flex: 0 0 49% !important;
  justify-content: center;
  background: #f0f1f2;
  border-radius: 8px !important;
}

.tab-geo-active {
  background: #0f61fd !important;
}

.tab-geo-active p {
  color: #fff !important;
}

.nearest-rider-tracking {
  box-shadow: 0px 2px 4px #23003333;
}

.nearest-rider-tracking .delivermen-list {
  width: 351px !important;
}

.collapse-config {
  background-color: #fafdff;
  border-bottom: 1px solid #cdd1d5;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.collapse-disabled {
  background-color: #fafbfc;
}

.table-row {
  border-bottom: 1px solid #e6e8ea !important;
}

.h-40 {
  height: 40px !important;
}

.tripTrackingLivetamplet .leaflet-popup-content-wrapper {
  margin: unset !important;
  padding: unset !important;
}

.tripTrackingLivetamplet .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: unset !important;
}

.tripTrackingLivetamplet .leaflet-popup-content p {
  margin: unset !important;
}

.order-info {
  background-color: #ffffff;
  width: 200px;
  max-width: 200px;
  border-radius: 8px !important;
}

.order-info {
  position: relative;
  overflow-x: hidden;
}

.order-info .order-address {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.modal-nearest-rider .delivermen-list {
  width: 351px !important;
  padding-block: 0 !important;
}

.leaflet-div-icon {
  background: unset !important;
  border: unset !important;
}

.ng-select.c-b500 .ng-value-container .ng-value {
  color: #0f61fd !important;
}

.config-page .page-content .first-tabs {
  top: 48px;
  left: 58px;
}

.home .tab.active {
  background-color: #101828 !important;
}

.rb-py-10 {
  padding-block: 10px !important;
}

.rb-py-5 {
  padding: 5px !important;
}

.rb-px-7 {
  padding-inline: 7px;
}

.rb-ps-27 {
  padding-inline-start: 27px !important;
}

.config-page .tab.active img {
  filter: brightness(0) invert(1);
}

.radius-28 {
  border-radius: 28px;
}

.rb-px-1 {
  padding: 1px;
}

.w-602 {
  width: 602px;
}

.w-438 {
  width: 438px;
}

.bl-g50 {
  border-inline-end: solid 2px #e6e8ea;
}

.home.tab.accordion-button::after,
.tab.accordion-button::before {
  width: 16px;
  height: 16px;
}

.mx-n16 {
  margin-inline: -16px;
}

.mw-315 {
  max-width: 315px;
}

.form-group .floating-placholder::after {
  color: #6b7480 !important;
}

.rb-ms-32 {
  margin-inline-start: 32px;
}

.penalized-img {
  width: 193px;
  height: 167px;
}

.filter-wh {
  filter: brightness(0) invert(1);
}

.delivered-order-index {
  z-index: 423 !important;
}

.customer-dilivred-marker-index {
  z-index: 422 !important;
}

.r-gap-6 {
  row-gap: 6px;
}

.r-gap-8 {
  row-gap: 8px;
}

.r-gap-16 {
  row-gap: 16px;
}

.r-gap-12 {
  row-gap: 12px;
}

.customer-dilivred-marker-index {
  z-index: 422 !important;
}

.r-gap-8 {
  row-gap: 8px;
}

.r-gap-16 {
  row-gap: 16px;
}

.r-gap-12 {
  row-gap: 12px;
}

.customer-dilivred-marker-index {
  z-index: 422 !important;
}

.bg-b-200 {
  background: #b9dcff;
}

.team-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.side-menu .tab.active {
  border-radius: 4px !important;
}

@media (max-width: 767px) {
  .team-profile {
    padding-inline-start: 0px;
  }
}

@media (min-width: 768px) {
  .team-profile {
    padding-inline-start: 216px;
  }
}

.map-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #b8bec9;
  border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
  overflow: hidden;
}

.shadow-none {
  box-shadow: unset;
}

.availability-actions {
  bottom: 40px;
  left: 0;
}

.form-control.time,
.rb-form-control.time {
  background-position: calc(100% - 12px);
  background-image: url(../rb-icon/planner/timer.svg);
  background-repeat: no-repeat;
  background-size: 16px;
}

.log-container {
  overflow-y: auto;
  height: 50vh;
}

.log.scroll-container {
  max-height: 83vh !important;
}

.extra-fees .header {
  gap: 8px;
}

.extra-fees .time-window {
  gap: 0 8px;
}

.extra-fees .time-window .delete {
  flex: unset;
}

@media (max-width: 768px) {
  .extra-fees .header>div {
    flex: 0 0 36%;
  }

  .extra-fees .time-window>div {
    flex: 0 0 36%;
  }
}

@media (min-width: 768.1px) {
  .extra-fees .header>div {
    flex: 0 0 14.28%;
  }

  .extra-fees .time-window>div {
    flex: 0 0 14.28%;
  }
}

.width-unset {
  width: unset !important;
}

.block-content {
  border-radius: 1px;
  border: 0.5px solid var(--C-G-50, #e6e8ea);
  padding: 2px 4px;
  display: flex;
  align-items: center;
}

.block-content .bg-g-fd {
  background: #fcfcfd;
}

.min-w-140 {
  min-width: 140px;
}

.min-w-160 {
  min-width: 160px;
}

.template-after-uploaded {
  position: relative;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #cdd1d5;
  width: 250px;
  height: 180px;
}

.template-after-uploaded .width-100 {
  width: 100%;
  height: 100%;
}