/* form */
.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: var(--spacing-sm);
  z-index: 0;
}

.flex-form-group-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.flex-form-group-container .form-group {
  width: 100%;
}

.form-container-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-big);
}

.reminder {
  font-size: 14px;
  color: var(--grey-500);
  margin-top: -10px;
  font-weight: 400;
  /* padding-left: var(--spacing-sm); */
}

.form-button-set {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  margin-top: var(--spacing-xxx-big);
}

.form-button-set a,
.form-button-set button {
  width: 100%;
}

.cancel-btn {
  order: 2;
}

.cancel-btn::before {
  content: "";
  right: 1rem;
  top: 14px;
  display: inline-block;
  width: 14px;
  height: 14px;
  pointer-events: none;
  mask: url(/images/icons/arrow-left.svg) no-repeat;
  background-color: var(--grey-500);
  mask-size: cover;
  transition: 0.3s transform;
}

.cancel-btn:hover:before {
  transform: translateX(-3px);
  transition: 0.3s transform;
}

.save-btn {
  order: 1;
}

/* .save-btn::after {
  content: "";
  right: 1rem;
  top: 14px;
  display: inline-block;
  width: 14px;
  height: 14px;
  pointer-events: none;
  mask: url(/images/icons/arrow-right.svg) no-repeat;
  background-color: var(--grey-white);
  mask-size: cover;
  transition: 0.3s transform;
}

.save-btn:hover:after {
  transform: translateX(3px);
  transition: 0.3s transform;
} */

label {
  color: var(--text-label-body);
  display: flex;
  gap: var(--spacing-xx-sm);
}

label.with-reminder {
  display: flex;
  align-items: end;
  gap: 5px;
}

label.with-reminder .reminder {
  color: var(--text-label-body);
}

label.required::after {
  content: "*";
  color: var(--danger-active);
}

/* text */
select,
.date-input,
.text-input {
  width: 100%;
  min-height: 48px;
  max-height: 48px;
  border-radius: 6px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--grey-300);
  color: var(--text-label-body);
  font-size: 14px;
  z-index: 1;
}

.text-area {
  width: 100%;
  border-radius: 6px;
  padding: var(--spacing-sm);
  border: 1px solid var(--grey-300);
  color: var(--text-label-body);
  font-size: 14px;
  z-index: 1;
}

.select2-selection__placeholder,
.select2-selection::placeholder,
select::placeholder,
.text-area::placeholder,
.date-input::placeholder,
.text-input::placeholder {
  color: var(--grey-400) !important;
}

select:hover,
.text-area:hover,
.date-input:hover,
.text-input:hover {
  border: 1px solid var(--grey-400);
  background-color: var(--grey-white);
  transition: 0.3s ease all;
}

select:focus,
.text-area:focus,
.date-input:focus,
.text-input:focus {
  box-shadow: var(--shadow-select-click);
  border: 1px solid var(--primary-active);
  outline: none;
  transition: 0.3s ease all;
}

select:read-only,
.text-area:read-only,
.text-input:read-only {
  background-color: var(--grey-100);
  border: none;
  cursor: not-allowed;
}

select:read-only:focus,
.text-area:read-only:focus,
.text-input:read-only:focus {
  border: none;
  box-shadow: none;
}

/* select */

.select2 {
  width: 100% !important;
}

.select2-container .select2-selection {
  display: flex;
  align-items: center;
  min-height: 48px;
  max-height: 48px;
}

.select2-container .select2-selection {
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid var(--grey-300);
  appearance: none;
  --form-select-bg-img: url("/images/input/down.svg");
  display: block;
  width: 100%;
  font-size: 14px;
  color: var(--text-label-body);
  background-color: var(--grey-white);
  background-image: var(--form-select-bg-img),
    var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  border-radius: 6px !important;
  padding: 0 var(--spacing-sm);
}

.select2-selection__rendered {
  height: 100%;
  padding: 0 !important;
  display: flex !important;
  color: var(--text-label-body) !important;
  align-items: center;
}

.select2-selection__arrow {
  display: none;
}

.select2-selection:hover {
  border: 1px solid var(--grey-400);
  background-color: var(--grey-white);
  transition: 0.3s ease all;
}

.select2-container--focus .select2-selection {
  box-shadow: var(--shadow-select-click);
  border: 1px solid var(--primary-active);
  outline: none;
  transition: 0.3s ease all;
}

.select2-dropdown {
  border: none;
  box-shadow: var(--shadow-dropdown);
  color: var(--text-label-body);
  font-size: 14px;
}

.select2-results {
  padding: 8px 0;
}

.select2-results__options {
  border-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: #f1f1f4 transparent;
}

.select2-results__options li {
  padding: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--grey-100);
  color: var(--primary-active);
}

.select2-container--default .select2-results__option--selected::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  mask: url(/images/input/check.svg) no-repeat;
  background-color: var(--primary-active);
  mask-size: cover;
}

/* date picker */
.date-input::-webkit-inner-spin-button,
.date-input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.date-picker-container {
  position: relative;
}

.date-picker-container::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  pointer-events: none;
  mask: url(/images/input/calendar.svg) no-repeat;
  background-color: var(--grey-500);
  mask-size: cover;
}

.date-input {
  padding-right: 40px;
}

.flatpickr-calendar {
  box-shadow: var(--shadow-dropdown);
  border: none;
  padding: 10px;
  width: max-content;
  border-radius: 16px;
}

.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
  display: none;
}

.flatpickr-day.today {
  background: var(--grey-100);
  border: none;
}

.flatpickr-day.today:hover {
  background: var(--grey-100);
  border: none;
  color: var(--text-label-body);
}

.flatpickr-day.selected {
  background-color: var(--primary-active) !important;
  border: none;
}

.flatpickr-day.selected:hover {
  background-color: var(--primary-dark);
}

.flatpickr-day {
  border-radius: 6px;
  border: none;
  color: var(--text-label-body);
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background-color: var(--primary-light);
}

.flatpickr-day:hover {
  background-color: var(--grey-100);
  color: var(--primary-active);
  border: none;
}

.flatpickr-weekday {
  color: var(--text-headline-title);
}

.flatpickr-next-month,
.flatpickr-prev-month {
  padding: 6px 10px !important;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
  width: fit-content;
  color: var(--text-headline-title) !important;
  font-weight: 500 !important;
}

.flatpickr-current-month .numInputWrapper {
  width: 9ch;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--primary-active);
}

.flatpickr-months {
  align-items: center;
  position: relative;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--grey-100);
  border-radius: 6px;
}

.flatpickr-current-month .numInputWrapper:hover {
  background: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 6px;
}

.flatpickr-current-month {
  font-size: 14px;
  padding: 0;
  top: 0;
  align-items: center;
  display: flex;
  justify-content: center;
}

.numInputWrapper span.arrowDown,
.numInputWrapper span.arrowUp {
  border: none;
}

.numInputWrapper span:hover {
  background: none;
}

.numInputWrapper span.arrowDown:hover {
  color: rgba(43, 43, 43, 0.9) !important;
}

.numInputWrapper .arrowUp:hover {
  color: rgba(43, 43, 43, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: currentColor;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: currentColor;
}

.numInputWrapper .numInput.cur-year {
  max-height: 26px;
  padding: 6px;
  color: var(--text-headline-title) !important;
  font-weight: 500 !important;
}

/* file */
.file-input {
  width: 0;
  height: 0;
  position: absolute;
}

.file-label {
  padding: var(--spacing-md);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 2px dashed var(--grey-300);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 260px;
  background-color: var(--grey-100);
  cursor: pointer;
  transition: 0.3s ease all;
}

.file-label:hover {
  border: 2px dashed var(--grey-400);
  transition: 0.3s ease all;
}

.file-reminder,
.file-small-text {
  font-size: 14px;
  color: var(--text-label-body-light);
  margin-top: var(--spacing-sm);
  font-weight: 400;
  text-align: center;
}

.uploaded-files-container {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-direction: column;
}

.uploaded-files-container .remove-btn {
  color: var(--text-label-body-light);
}

.file-size {
  color: var(--text-label-body-light);
  font-size: 14px;
}

.file-name {
  color: var(--grey-600);
  text-align: center;
  flex: 1;
  display: block;
  width: 100%;
  text-wrap: wrap;
  word-break: break-all;
  font-weight: 500;
  font-size: 14px;
}

.file-type-icon {
  width: 50px;
  height: auto;
}

.upload-file-icon::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  pointer-events: none;
  mask: url(/images/input/exit-up.svg) no-repeat;
  background-color: var(--text-label-body-light);
  mask-size: cover;
  transition: 0.3s transform;
}

/* switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--grey-300);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--primary-active);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* password */
.password-input-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container .svg-container {
  width: 22px;
  height: 22px;
  color: var(--grey-400);
  position: absolute;
  top: 12px;
  right: var(--spacing-sm);
  cursor: pointer;
  z-index: 1;
}

.password-input-container .svg-container:hover {
  color: var(--grey-600);
}

.eye-icon.active::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  mask: url(/images/password/eye.svg) no-repeat;
  background-color: var(--primary-active);
  mask-size: cover;
}

.eye-icon::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  mask: url(/images/password/eye-slash.svg) no-repeat;
  background-color: currentColor;
  mask-size: cover;
}

/* error */
.error {
  border: 1px solid var(--danger-active) !important;
}

.error-message {
  color: var(--danger-active);
  font-size: 15px;
  line-height: 125%;
  letter-spacing: 0.1px;
  font-weight: 500;
}

/* media queries */
@media (min-width: 576px) {
  .uploaded-files-container {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-direction: row;
  }

  .file-name {
    text-align: start;
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .form-button-set {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .form-button-set .my-btn {
    width: fit-content;
  }

  .cancel-btn {
    order: 1;
  }

  .save-btn {
    order: 2;
  }

  .flex-form-group-container {
    flex-direction: row;
  }

  .flex-form-group-container .form-group {
    width: 50%;
  }
}