:root {
  --black: #000;
  --white: #fff;
  --primary: #207fa1;
  --light-blue: #ebf3f6;
  --p: #5e5e60;
  --heading: #161515;
  --border: #e3e3e3;
  --gray: #9a9aa5;
  --light-gray: #fafafa;

  --regular: "FontspringDEMOceraproregular";
  --medium: "FontspringDEMOcerapromedium";
  --bold: "FontspringDEMOceraprobold";
  --black-f: "FontspringDEMOceraproblack";
  --light: "FontspringDEMOceraprolight";
}

.suspense-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
}

.suspense-loader .spinner-border {
  height: 50px;
  width: 50px;
}

.error-message {
  color: red;
  font-size: 12px;
}

.react-calendar-field .react-datepicker-wrapper {
  display: block;
}

.react-input.fild-with-icon button {
  right: 10px;
}

.fild-with-icon .clear-button svg {
  background: var(--primary);
  color: white;
  border-radius: 50%;
  padding: 3px;
  height: 21px;
  width: 21px;
  margin-bottom: 5px;
}

.react-datepicker__header {
  background-color: var(--primary) !important;
}
.react-datepicker__day-name,
.react-datepicker__current-month {
  color: #fff !important;
}

.react-datepicker__day--selected {
  border-radius: 50% !important;
}

.react-datepicker__day {
  margin: 0.266rem !important;
}

h2.react-datepicker__current-month.react-datepicker__current-month--hasYearDropdown.react-datepicker__current-month--hasMonthDropdown {
  display: none !important;
}
.react-datepicker__month-read-view,
.react-datepicker__year-read-view {
  font-size: 15px !important;
  color: white !important;
}

.react-datepicker__month-read-view,
.react-datepicker__year-read-view {
  visibility: visible !important;
}

.react-datepicker__day:hover {
  /* background-color: #58b0d2 !important; */
  /* color: white; */
  border-radius: 50% !important;
}

.react-datepicker__navigation--years::before {
  border-color: #666;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  left: 11px;
  position: absolute;
  width: 9px;
}

.react-datepicker__navigation--years-upcoming::before {
  top: 17px;
  transform: rotate(315deg);
}

.react-datepicker__navigation--years-previous::before {
  top: 6px;
  transform: rotate(135deg);
}
.hidden {
  visibility: hidden;
}

.employment-form-previewImage {
  height: 100px;
  width: 80%;
  object-fit: cover;
}

.select-file-box2 {
  position: relative;
  background: var(--light-gray);
  border: solid 1px var(--border);
  border-radius: 4px;
  padding: 25px 15px;
  text-align: center;
}

.select-file-box2 p {
  margin: 0;
  font-size: 14px;
  color: var(--heading);
}

.client-information-step .in-step-head-box li {
  cursor: pointer;
}

.react-datepicker-time__header {
  color: white !important;
}

.multi-select-list button.selected {
  background-color: var(--primary);
  color: #fff;
}

.clock-icon svg {
  font-weight: bolder;
}