.swal-button--confirm {
  background-color: #12263f;
}

.bg-ph-primary {
  background-color: #fd8d25;
}

#progressbar {
  overflow: hidden;
  color: lightgrey;
  padding-left: 0;
}

#progressbar .active {
  color: #42ba96;
}

#progressbar .inactive {
  color: #e74357;
}

#progressbar li {
  list-style-type: none;
  font-size: 15px;
  width: 33%;
  float: left;
  position: relative;
  font-weight: 400;
  text-align: center;
}

#progressbar #ship_from:before {
  font-family: Feather;
  content: "\e979";
  font-size: 30px;
}

#progressbar #driver:before {
  font-family: Feather;
  content: "\e925";
  font-size: 30px;
}

#progressbar #ship_to:before {
  font-family: Feather;
  content: "\e967";
  font-size: 30px;
}

#progressbar li:before {
  width: 60px;
  height: 60px;
  line-height: 35px;
  display: block;
  font-size: 15px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px;
  display: grid;
  place-items: center;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: 1;
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #000000;
}

#progressbar li.inactive:before,
#progressbar li.inactive:after {
  background: #e74357;
}

.timeline_success.active {
  border-top: 3px dotted green !important;
}

.timeline_success {
  border-top: 3px solid !important;
}

.timeline_progress {
  border-top: 3px solid !important;
}

#service_delivery_date {
  border: transparent;
  border-radius: 5px;
  outline: transparent;
  background: transparent;
  width: 0px;
  cursor: pointer;
  caret-color: transparent;
  padding: 0;
  text-align: center;
}

#service_delivery_date::placeholder {
  color: #ffffff;
}

#service_delivery_date:focus::placeholder {
  color: #ffffff;
}

.service_delivery_date_label {
  padding: 8px 20px;
  cursor: pointer;
}

.service_delivery_date_label-1 {
  padding: 8px 20px;
  margin: -22px 0px 0px 0px;
  cursor: pointer;
}

.dropdown-menu {
  max-height: 25rem;
  overflow-y: scroll;
}

.badge-bg-purple {
  background-color: #dacbff;
  color: #824df3;
}

.text-purple {
  color: #ffffff;
  background-color: #a379fd;
}

.btn-purple {
  color: #fff;
  background-color: #824df3;
  border-color: #824df3;
}

.btn-purple:hover {
  background-color: #a379fd;
  border-color: #a379fd;
}

.btn-purple-soft {
  background-color: #dacbff;
  color: #824df3;
  border: #824df3;
}

.btn-purple-soft:hover {
  background-color: #bfa5ff;
  color: #824df3;
  border-color: #824df3;
}

.bg-purple {
  color: #ffffff;
  background-color: #a379fd;
}

.bg-purple-soft {
  background-color: #dacbff;
  color: #824df3;
}

.btn-warning-soft {
  background-color: #ffeab5;
  color: #ffb700;
  border: #ffeab5;
}

.btn-warning-soft:hover {
  background-color: #ffd260;
  color: #d19703;
}

.Method-options-icon {
  height: 200px;
  width: 250px;
}

.phox-icon {
  height: 40px;
  margin-left: 0px;
  cursor: pointer;
}

.phox-icon:hover {
  transform: scale(1.1);
}

.usps-icon {
  height: 43px;
  cursor: pointer;
}

.usps-icon:hover {
  transform: scale(1.1);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.badge-red {
  background-color: #e1445a;
  color: white;
  padding: 0.5em 1.1em;
}

.badge-blue {
  background-color: #1a8ae1;
  color: white;
  padding: 0.5em 1.1em;
}

.badge-gray {
  background-color: #88939f;
  color: white;
  padding: 0.5em 1.1em;
}

.search-bar .form-control {
  padding-left: 2rem;
}

.search-bar .form-control-search {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
  transform: scale(1.1);
}

.main-card-container {
  min-height: 100vh;
  background-color: #023047;
  /* background-image: linear-gradient(
    to right bottom,
    #27405f,
    #233753,
    #1e2f48,
    #1a273d,
    #151f32
  ); */
  overflow-y: hidden;
}

.card-header-logo {
  width: 140px;
}

.login-card-container {
  max-width: 450px;
  border-radius: 30px;
}

.bg-color-password {
  background-image: linear-gradient(to right bottom,
      #141e30,
      #19273c,
      #1f3049,
      #233956,
      #284363);
}

.signin-button {
  color: #fd8d25;
}

.forgot-pw-content {
  border-radius: 25px;
}

.validate_address_btn {
  padding-left: "0px" !important;
}

.imgUploadDiv {
  height: 150px;
  width: 350px;
  border: 0.8px gray dotted;
  border-radius: 10px;
}

.cursor-pointer {
  cursor: pointer !important;
}

.product_image {
  height: 70px;
}

.img-wrap {
  position: relative;
  display: inline-block;
  font-size: 0;
}

.img-wrap .close {
  position: absolute;
  top: 3px;
  right: 2px;
  z-index: 100;
  background-color: #fff;
  padding: 5px 4px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.2;
  /* text-align: center; */
  font-size: 22px;
  line-height: 10px;
  border-radius: 50%;
}

.img-wrap:hover .close {
  opacity: 1;
  background-color: #e63757;
}

@font-face {
  font-family: "Cerebri Sans";
  src: url("../fonts/cerebrisans/cerebrisans-regular.eot");
  src: url("../fonts/cerebrisans/cerebrisans-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/cerebrisans/cerebrisans-regular.woff") format("woff"),
    url("../fonts/cerebrisans/cerebrisans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

.pac-logo::after {
  /* display: none !important; */
  background-image: none !important;
  margin: 0 !important;
}

.form-date {
  top: 2%;
  width: 100%;
  height: 100%;
}

/* input.form-control.custom.flatpickr-input {
  opacity: 0;
  height: 40px;
} */

/* .flatpickr-calendar.arrowTop:before {
  display: none !important;
}

.flatpickr-calendar.arrowTop:after {
  display: none !important;
} */

.maplibregl-popup-content.mapboxgl-popup-content {
  padding: 0px;
}

.mapboxgl-popup-close-button,
.maplibregl-popup-close-button {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 3px 0 0 !important;
  cursor: pointer !important;
  position: absolute !important;
  top: -5px !important;
  right: 0 !important;
  font-size: 20px !important;
  padding: 5px !important;
}

.phox-font {
  font-family: "Cerebri Sans" !important;
}

.daterangepicker.ltr.show-ranges.show-calendar.opensleft {
  font-family: "Cerebri Sans" !important;
}

.text-dark-muted {
  color: #6f6f6f;
  font-weight: 600;
  font-size: 14px;
}

.main-switch {
  width: 60px;
  padding: 2px;
}

.btn-white:not(:disabled):not(.disabled):active,
.btn-white:not(:disabled):not(.disabled).active,
.btn-check:checked+.btn-white {
  background-color: #023047;
  border-color: #023047;
  box-shadow: none;
  color: #fff;
}

.maximise-btn {
  display: flex;
  justify-content: end;
}

/* -----------------------------------VERY VERY IMP------------------------------------------------- */
.map-container {
  width: calc(100% - 100vw);
  margin-left: calc(100% - 100vw);
}

/* ---------------------------------------------------------------------------------------------------- */

@keyframes markerBlink {
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0px white, 0 0 0 4px rgba(253, 168, 128, 0.377);
    transform: scale(1);
  }
}

.pulsing-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fd843e;
  /* Adjust the color value to your preference */
  box-shadow: 0 0 0 2px white;
  animation: markerBlink 2s infinite;
  transform-origin: center;
}

.pulsing-dot span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-family: "Cerebri Sans";
  font-weight: bold;
  color: white;
  /* Adjust the color of the initial letter */
}

/* .pulsing-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2c7be5;
  animation: markerBlink 2s infinite;
  transform-origin: center;
} */

/* .pulsing-dot img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.phox-map-first {
  margin-left: 250px !important;
}

@media only screen and (min-width: 1440px) {
  .phox-map-rest {
    margin-left: 0px !important;
  }
}

@media only screen and (max-width: 1023px) {
  .phox-map-rest {
    margin-left: 250px !important;
  }
}

@media only screen and (max-width: 425px) {
  .phox-map-rest {
    margin-left: 0px !important;
  }

  .phox-map-first {
    margin-left: 0px !important;
  }

  .star-responsive {
    width: 20px;
  }

  .number-rating {
    flex-wrap: wrap;
  }

  .number-rating-one {
    margin-bottom: 8px;
  }
}

.driverImage {
  height: 21px;
  width: 21px;
  border-radius: 50%;
}

.marker-wrapper {
  position: relative;
}

.shipment-count {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

/* feedback */
.bg-pink-light {
  background-color: #ecf3fd;
}

.feedback-heading {
  color: #031320;
  font-size: 2em;
  font-weight: 800;
}

.next-btn {
  padding: 15px 90px;
}

.emoji-icons {
  width: 130px;
  margin: 0px auto;
}

.luminosity {
  mix-blend-mode: luminosity;
}

.bg-yellow {
  fill: yellow;
}

.prev-fb-btn {
  color: #000 !important;
}

.border-fb-red {
  border: 1px solid red;
  border-radius: 3px;
}

.selected {
  background-color: #f00;
  color: #fff;
}

.rating {
  display: grid;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 3px;
}

.rating-red-border {
  border: 1px solid #f71c24;
}

.rating-red {
  background-color: #f71c24;
}

.rating-orange-border {
  border: 1px solid #ff931e;
}

.rating-orange {
  background-color: #ff931e;
}

.rating-green-border {
  border: 1px solid #009245;
}

.rating-green {
  background-color: #009245;
}

.rating-red-soft {
  background-color: #fdecef;
}

.rating-orange-soft {
  background-color: #fff4d6;
}

.rating-green-soft {
  background-color: #c1ebe3;
}

.rating-soft {
  background-color: #ecf3fd;
}

.btn-next {
  width: fit-content;
  padding: 15px 18%;
}

.rating-mute-color {
  color: #646b7b;
}

/* 404 page  */

.page_404 {
  padding: 40px 0;
  background: #fff;
  font-family: "Arvo", serif;
}

.page_404 img {
  width: 100%;
}

.four_zero_four_bg {
  background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
  height: 400px;
  background-position: center;
}

.four_zero_four_bg h1 {
  font-size: 80px;
}

.four_zero_four_bg h3 {
  font-size: 80px;
}

.link_404 {
  color: #fff !important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;
}

.contant_box_404 {
  margin-top: -50px;
}

.celebration-lottie {
  display: flex !important;
}

.absolute_progress {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  width: 100%;
  gap: 60px;
  z-index: -1;
  padding: 2px;
}

.circle_progress {
  z-index: -1;
}

.circle-layout {
  height: 60px;
  width: 60px;
}

.border_progress_danger {
  height: 2px;
  background-image: linear-gradient(90deg,
      #dd3030,
      #dd3030,
      75%,
      transparent 75%,
      transparent 100%);
  background-size: 20px 1px;
  border: none;
  height: 2px;
}

.border_progress_active {
  height: 2px;
  background-image: linear-gradient(90deg,
      #12263f,
      #12263f,
      75%,
      transparent 75%,
      transparent 100%);
  background-size: 20px 1px;
  border: none;
  height: 2px;
}

.border_progress_active {
  height: 2px;
  background-image: linear-gradient(90deg,
      #12263f,
      #12263f,
      75%,
      transparent 75%,
      transparent 100%);
  background-size: 20px 1px;
  border: none;
  height: 2px;
}

.border_progress {
  height: 2px;
  background-image: linear-gradient(90deg,
      #cecece,
      #cecece,
      75%,
      transparent 100%);
  background-size: 20px 1px;
  border: none;
  height: 2px;
}

.circle_content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(206, 206, 206);
  font-size: 30px;
  background: #efefef;
}

.circle_content_active {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(220, 213, 213);
  font-size: 30px;
  background: #111010;
}

.circle_content_danger {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(239, 236, 236);
  font-size: 30px;
  background: #dd3030;
}

.nps {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 75%, #fad7dd 0);
}

.nps-100 {
  font-size: 10px;
  background: radial-gradient(closest-side, white 79%, transparent 100% 100%),
    conic-gradient(#00d97e 100%, #ccf7e5 0);
}

.nps-90 {
  background: radial-gradient(closest-side, white 79%, transparent 90% 100%),
    conic-gradient(#00d97e 90%, #ccf7e5 0);
}

.nps-80 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#00d97e 80%, #ccf7e5 0);
}

.nps-70 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#f6c343 70%, #fdf3d9 0);
}

.nps-60 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#f6c343 60%, #fdf3d9 0);
}

.nps-50 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 50%, #fdf3d9 0);
}

.nps-40 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 40%, #fdf3d9 0);
}

.nps-30 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 30%, #fdf3d9 0);
}

.nps-20 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 20%, #fdf3d9 0);
}

.nps-10 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 10%, #fdf3d9 0);
}

.nps-0 {
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(#e63757 100%, #fdf3d9 0);
}

.nps-100::before {
  content: "100";
}

.nps-90::before {
  content: "90";
}

.nps-80::before {
  content: "80";
}

.nps-70::before {
  content: "70";
}

.nps-60::before {
  content: "60";
}

.nps-50::before {
  content: "50";
}

.nps-40::before {
  content: "40";
}

.nps-30::before {
  content: "30";
}

.nps-20::before {
  content: "20";
}

.nps-10::before {
  content: "10";
}

.nps-0::before {
  content: "0";
}

.display-flex-start {
  display: flex;
  justify-content: start;
  align-items: start;
}

.modal-title {
  margin-bottom: 0px !important;
  font-weight: bolder;
}

.phox-form-select:focus {
  border-color: #11101060 !important;
}

.flatpickr-calendar .flatpickr-months {
  padding-top: 0px !important;
  padding-bottom: 2px !important;
}

.react-tel-input .form-control {
  height: 40px !important;
  width: 100% !important;
  border: 1px solid #d2ddec !important;
}

.image-gallery-left-nav .image-gallery-svg,
.image-gallery-right-nav .image-gallery-svg {
  height: 120px;
  width: 17px !important;
}

.image-gallery-fullscreen-button,
.image-gallery-play-button {
  padding: 3px !important;
}

.image-gallery-fullscreen-button .image-gallery-svg,
.image-gallery-play-button .image-gallery-svg {
  width: 20px !important;
}

/*
.image-gallery-image {
  height: 250px !important;
} */

input.input-readonly.form-control[readonly] {
  background-color: white !important;
  color: black;
}

.autocomplete-item {
  background-color: white;
  border-bottom: 1px solid #edf2f9;
  cursor: pointer;
  padding: 0.5rem;
}

.autocomplete-item:hover {
  background-color: #f9fbfd;
}

.responsive-heading {
  font-weight: bold;
  font-size: 50px;
}

@media (max-width: 768px) {
  .responsive-heading {
    font-size: 24px;
    font-weight: bold;
  }

  .activity-alignment {
    width: 90%;
    text-align: end;
  }

  .activity-margin {
    margin-left: 20px;
  }
}


.hide-details-page {
  display: none !important;
}

.shipment-label {
  display: none;
}

.label-small-font {
  font-size: 12px !important;
}

.ship-header-font {
  font-size: 10px !important;
}

.hearder-date-font {
  font-size: 14px !important;
  font-weight: bolder !important;
}

@media print {
  body {
    visibility: hidden;
  }

  @page {
    width: 4in !important;
    height: 6in !important;
    margin: 0;
  }

  .hide-on-print,
  .footer,
  .navbar {
    display: none !important;
  }

  .dispatch_container {
    display: none !important;
  }

  .shipment-label {
    visibility: visible;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: 4in !important;
    max-height: 6in !important;
    margin: 0;
    padding: 10px;
  }

  .label-content {
    page-break-after: always;
  }

  .label-content:last-child {
    page-break-after: auto;
  }
}

.map-slider .image-gallery-image {
  height: 250px !important;
}

.phox-font {
  font-family: "Cerebri Sans" !important;
}

.phox-as-sm__value-container,
.phox-as-sm__indicator {
  padding: 0px 2px !important;
}

.green-phox-img {
  fill: var(--bs-navbar-color);
  transition: fill 0.3s ease;
}

.nav-link:hover .green-phox-img {
  fill: var(--bs-navbar-hover-color);
}

.green-phox-img-active {
  fill: var(--bs-navbar-hover-color);

}


.tracking-card-container {
  position: absolute;
  top: 40%;
  left: 34%;
  z-index: 99990;
  width: 100%;
}

.overlay-tracking {
  width: 100%;
  height: 100%;
  background-color: #023047d5;
  display: block;
  position: absolute;
  z-index: 9999;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.button-tooltip-text {
  visibility: hidden;
  font-size: .800rem;
  width: 260px !important;
  height: max-content !important;
  background-color: rgb(80, 77, 77);
  color: #e4e4e4;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 999999;
  bottom: 125%;
  /* Position above the button */
  left: 150%;
  top: 90%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-wrapper:hover .button-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.version-update-modal .modal-content {
  border-radius: 30px;
}

.clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}