.zForm-wrap {
  position: relative;
}
.zForm-label {
  margin-bottom: toRem(11);
  font-size: toRem(14);
  font-weight: $fw_medium;
  line-height: toRem(17);
  color: $text-black;
}
.zForm-control {
  display: block;
  width: 100%;
  padding: toRem(10.5) toRem(16);
  font-size: toRem(14);
  font-weight: $fw_regular;
  line-height: toRem(17);
  color: $para-text;
  background-color: $input-color;
  background-clip: padding-box;
  border: toRem(1) solid $stroke-color;
  border-radius: toRem(8);
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  &:focus,
  &:hover {
    border: toRem(1) solid $main-color;
    color: $para-text !important;
    background-color: $input-color !important;
    box-shadow: 0 0 0 rgb(0 0 0 / 0);
  }
  &::placeholder {
    font-size: toRem(12);
    font-weight: $fw_regular;
    color: $para-text;
  }
  // &:invalid {
  //   border-color: $red;
  // }
}
textarea {
  &.zForm-control {
    resize: none;
  }
}
.zForm-password {
  .icon {
    display: none;
  }
}
// input[type="date"],
// input[type="month"],
// input[type="week"] {
//   &::-webkit-calendar-picker-indicator {
//     background-image: url(../images/icon/calendar-icon.svg);
//   }
// }
// // File Browser
// .ct-form-control-file[type="file"] {
//   display: block;
//   width: 100%;
//   font-size: 13px;
//   font-weight: $fw_regular;
//   line-height: 21px;
//   color: $para-text;
//   background-color: #fff;
//   background-clip: padding-box;
//   border: 1px solid $stroke-color;
//   appearance: none;
//   border-radius: 10px;
//   box-shadow: 0 0 0 rgb(0 0 0/0);
//   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
//   &::-webkit-file-upload-button {
//     padding: 14px 22px 13px;
//     margin-right: 20px;
//     font-size: 13px;
//     font-weight: $fw_Medium;
//     line-height: 16px;
//     color: $para-text;
//     background-color: $color-2;
//     border-right: 1px solid $color-2;
//     border-radius: 10px 0 0 10px;
//   }
//   &:hover {
//     &::-webkit-file-upload-button {
//       background-color: $color-2 !important;
//     }
//   }
//   &.ct-form-control-file-lg {
//     &::-webkit-file-upload-button {
//       padding: 19px 22px 18px;
//       font-size: 14px;
//     }
//   }
//   &.ct-form-control-file-sm {
//     &::-webkit-file-upload-button {
//       padding: 9px 22px 8px;
//       font-size: 10px;
//     }
//   }
// }
// // Switch
// .ct-switches {
//   .form-switch {
//     input.form-check-input {
//       width: 34px;
//       height: 18px;
//       margin-top: 0.35em;
//       box-shadow: 0 0 0 rgba(0, 0, 0, 0);
//       border: 1px solid $stroke-color;
//       border-radius: 10px;
//       background-color: #fff;
//       background-image: url(../images/icon/switch-default.svg);
//       background-size: 12px;
//       background-position-x: 4px;
//       &:checked {
//         background-color: $white;
//         border-color: $main-color;
//         background-image: url(../images/icon/switch-default-check.svg);
//         background-size: 12px;
//         background-position-x: 16px;
//       }
//       // &.form-switch-medium {
//       //   height: 16px;
//       // }
//       // &.form-switch-large {
//       //   width: 35px;
//       //   height: 18px;
//       // }
//     }
//   }
//   label {
//     font-size: 13px;
//     font-weight: $fw_Medium;
//     line-height: 16px;
//     color: $para-text;
//   }
// }
// // Radio
// .ct-radios {
//   .form-check {
//     &.eForm-radio {
//       padding-left: 0;
//       .row {
//         gap: 8px;
//       }
//     }
//   }
//   input.form-check-input {
//     width: 20px;
//     height: 20px;
//     vertical-align: middle;
//     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
//     border: 1px solid $stroke-color;
//     margin-right: 10px;
//     &:checked {
//       background-color: $white;
//       border-color: $main-color;
//       background-image: url(../images/icon/switch-default-check.svg);
//       background-size: 12px;
//     }
//     // &.ct-radioPrimary {
//     //   &:checked {
//     //     background-color: $eColor_Blue;
//     //     border-color: $eColor_Blue;
//     //   }
//     // }
//     // &.ct-radioSuccess {
//     //   &:checked {
//     //     background-color: $success;
//     //     border-color: $success;
//     //   }
//     // }
//     // &.ct-radioInfo {
//     //   &:checked {
//     //     background-color: $info;
//     //     border-color: $info;
//     //   }
//     // }
//     // &.ct-radioWarning {
//     //   &:checked {
//     //     background-color: $warning;
//     //     border-color: $warning;
//     //   }
//     // }
//     // &.ct-radioDanger {
//     //   &:checked {
//     //     background-color: #F1B44C;
//     //     border-color: #F1B44C;
//     //   }
//     // }
//     &.ct-radioOutlinePrimary {
//       &:checked {
//         background-color: transparent;
//         border-color: $main-color;
//         background-image: none;
//         position: relative;
//         &::before {
//           content: "";
//           position: absolute;
//           top: 50%;
//           left: 50%;
//           transform: translate(-50%, -50%);
//           width: 12px;
//           height: 12px;
//           background-color: $main-color;
//           border-radius: 50%;
//         }
//       }
//     }
//     &.ct-radioOutlineSuccess {
//       &:checked {
//         background-color: transparent;
//         border-color: $green-color;
//         background-image: none;
//         position: relative;
//         &::before {
//           content: "";
//           position: absolute;
//           top: 50%;
//           left: 50%;
//           transform: translate(-50%, -50%);
//           width: 12px;
//           height: 12px;
//           background-color: $green-color;
//           border-radius: 50%;
//         }
//       }
//     }
//     &.ct-radioOutlineInfo {
//       &:checked {
//         background-color: transparent;
//         border-color: #556ee6;
//         background-image: none;
//         position: relative;
//         &::before {
//           content: "";
//           position: absolute;
//           top: 50%;
//           left: 50%;
//           transform: translate(-50%, -50%);
//           width: 12px;
//           height: 12px;
//           background-color: #556ee6;
//           border-radius: 50%;
//         }
//       }
//     }
//     &.ct-radioOutlineWarning {
//       &:checked {
//         background-color: transparent;
//         border-color: #f1b44c;
//         background-image: none;
//         position: relative;
//         &::before {
//           content: "";
//           position: absolute;
//           top: 50%;
//           left: 50%;
//           transform: translate(-50%, -50%);
//           width: 12px;
//           height: 12px;
//           background-color: #f1b44c;
//           border-radius: 50%;
//         }
//       }
//     }
//     &.ct-radioOutlineDanger {
//       &:checked {
//         background-color: transparent;
//         border-color: #f65e5e;
//         background-image: none;
//         position: relative;
//         &::before {
//           content: "";
//           position: absolute;
//           top: 50%;
//           left: 50%;
//           transform: translate(-50%, -50%);
//           width: 12px;
//           height: 12px;
//           background-color: #f65e5e;
//           border-radius: 50%;
//         }
//       }
//     }
//   }
//   label {
//     font-size: 13px;
//     font-weight: $fw_Medium;
//     line-height: 16px;
//     color: $para-text;
//   }
// }
// // Checkbox
// .zForm-wrap-checkbox {
//   display: flex;
//   align-items: center;
//   gap: toRem(6);
//   input {
//     &.form-check-input {
//       margin-top: 0;
//       box-shadow: 0 0 0 rgba(0, 0, 0, 0);
//       border: 1px solid $main-color;
//       border-radius: toRem(3);
//       background-color: transparent;
//       &:checked {
//         background-color: $main-color;
//         border-color: $main-color;
//         // background-image: url(../../images/icon/check.svg);
//       }
//     }
//   }
//   label {
//     @include fontFamily(14, $fw_regular, 17, $para-text);
//   }
// }

.under-border-one {
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: $stroke-color;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
