.error-highlight,
.has-error,
.error-highlight input,
.error-highlight .input-group-prepend {
  /* border: 1px solid #ce4040 !important;
  box-shadow: 0px 0px 4px 0px #dd6464 !important; */

  border-radius: 10px;
  border: 1px solid #FF3838 !important;
  background: #FFF;
  outline: 1px solid #8b2725 !important;
  box-shadow: 0 0 11px 0 rgba(255, 56, 56, 0.60) !important;
  /* box-shadow: 0 0 0 0.2rem rgb(243, 233, 223) !important;     */
  /* background-color: rgb(243, 233, 223) !important; */
}
.error-highlight input{
  border: 0 !important;
}.input-group.password-field.error-highlight .input-group-prepend.align-items-center {
    border: 0 !important;
    outline: 0 !important;
}
.input-group.password-field.error-highlight .input-group-prepend.align-items-center {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin-right: 0px;
}
.error-field {
  color: #ff2c2c !important;
  font-size: 12px;
  margin-top: 3px;
}

.success-field {
  border: 1px solid #84ce4078 !important;
  box-shadow: 0 0 0 0.2rem rgb(20 43 8 / 17%) !important;
}

.field-disabled {
  cursor: not-allowed;
  background-color: #d8d8d8;
}

/* Loader Css */
.loader,
.overlay_loader {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #dedede91;
  z-index: 100;
  display: none;
}

.overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 80px;
  height: 80px;
  display: inline-block;
  border-width: 4px;
  border-color: rgba(255, 255, 255, 0.33);
  /* border-top-color: #3f4d67; */
  border-top-color: #e0ac46c9;
  animation: spinspin 1s infinite linear;
  border-radius: 100%;
  border-style: solid;
}

@keyframes spinspin {
  100% {
    transform: rotate(360deg);
  }
}
.add-item-dot-loader {
  display: none;
  width: 30px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, #ffc107 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: dot 1s infinite linear;
  margin-left: auto !important;
  margin-right: auto !important;
}
@keyframes dot {
  33% {
    background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%
  }

  50% {
    background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%
  }

  66% {
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%
  }
}
/* --------------------------Auto populare subhauler list----------------------------------------- */

.autocomplete {
  position: relative;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 9;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}