.form {
  margin: 20px 0;
}

label {
  color: var(--main_theme_clr);
}

@keyframes rotation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

label.outside_lable {
  margin: 5px auto !important;
  width: fit-content !important;
  display: block !important;
}

.input_wrapper {
  margin-block: 10px;
  position: relative;
  .validationErr {
    color: #ff5252;
    position: absolute;
    font-size: 13px;
  }
  &.picker,
  &.select {
    position: relative;
    .closeIcon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      display: none;
      &.show {
        display: block;
      }
    }
    .spinnerIcon {
      position: absolute;
      transform: translateY(-50%);
      top: 17%;
      left: 43px;
      animation: rotation 1.5s linear infinite;
    }
  }
}

.v-input {
  padding: 0 !important;
  margin: 0 !important;
  &.v-input--switch {
    .v-input__slot {
      background-color: unset !important;
      border: unset !important;
      justify-content: center;
    }
  }
  .v-input__control {
    .v-input__slot {
      margin: 0;
      margin-bottom: 5px;
      padding: 10px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      transition: all 0.4s ease-in-out;
      &::after,
      &::before {
        display: none;
      }
      .v-text-field__slot {
        .v-label {
          top: 6px;
          color: var(--light_gray_clr);
          transition: all 0.4s ease-in-out;
          &.v-label--active,
          &.primary--text {
            padding-inline: 5px;
            top: 0;
            background-color: var(--white_clr) !important;
          }
        }
        input {
          opacity: 0;
          color: var(--theme_text_clr);
        }
      }
      .v-select__slot {
        .v-label {
          top: 6px;
          color: var(--main_theme_clr);
          transition: all 0.4s ease-in-out;
          &.v-label--active,
          &.primary--text {
            padding-inline: 5px;
            top: 0;
            background-color: var(--white_clr) !important;
          }
        }
        .v-select__selections {
          margin-top: 5px;
          .v-chip--select {
            background: var(--main_theme_clr) !important;
            color: var(--white_clr) !important;
            .v-chip__content {
              .v-icon {
                color: var(--white_clr) !important;
              }
            }
          }
          input {
            padding: 0;
            opacity: 0;
            color: var(--theme_text_clr);
          }
        }
      }
    }
    .v-text-field__details {
      display: none;
    }
    .v-input__append-inner {
      padding: 0;
      margin-top: 5px;
    }
  }
  &.v-input--has-state {
    &.error--text {
      .v-input__control {
        .v-input__slot {
          border: 1px solid #ff5252;
          input {
            opacity: 1;
          }
        }
      }
    }
  }
  &.v-input--is-label-active {
    .v-input__control {
      .v-input__slot {
        .v-text-field__slot {
          .v-label {
            color: var(--main_theme_clr);
            font-family: $medium_font;
          }
          input {
            opacity: 1;
          }
        }
        .v-select__slot {
          .v-label {
            color: var(--main_theme_clr);
            font-family: $medium_font;
          }
          .v-select__selections {
            input {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  &.v-input--is-focused {
    .v-input__control {
      .v-input__slot {
        .v-text-field__slot {
          .v-label {
            &.primary--text {
              color: var(--main_theme_clr) !important;
            }
            font-family: $medium_font;
          }
          input {
            opacity: 1;
          }
        }
        .v-input__append-inner {
          .v-input__icon {
            .v-icon {
              color: var(--main_theme_clr) !important;
            }
          }
        }
        .v-select__slot {
          .v-label {
            color: var(--main_theme_clr);
            font-family: $medium_font;
          }
          .v-select__selections {
            input {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  &.v-file-input {
    .v-input__control {
      .v-input__slot {
        .v-input__append-inner {
          .v-input__icon {
            .v-icon {
              font-size: 17px;
              margin-top: 4px;
              &::before {
                color: #ff5252;
              }
            }
          }
        }
      }
    }
  }
  &.v-input--radio-group--column,
  &.v-input--checkbox {
    .v-input__slot {
      background: transparent;
      border: unset;
    }
  }
}

.v-input--radio-group--row {
  .v-input__slot {
    background: transparent !important;
    border: none !important;
  }
}

.otp_wrapper {
  border: none;
  margin-block: 40px !important;
  .v-otp-input {
    column-gap: 10px;
    justify-content: center;
    column-gap: 15px;
    .v-input {
      padding: 0;
      flex: 0;
      .v-input__control {
        @include flexCenterAlignment;
        width: 70px;
        height: 70px;
        .v-input__slot {
          padding: 0;
          background: var(--white_clr) !important;
          border: none !important;
          width: 70px;
          height: 70px;
          fieldset {
            // padding-right: 0 !important;
            // color: var(--border_clr) !important;
            // background: var(--white_clr);
            // border: none !important;
            // transition: all 0.4s linear;
            // display: none;
            top: 0;
            border: 1px solid var(--border_clr) !important;
            width: 70px;
            height: 70px;
          }
          .v-text-field__slot {
            input {
              color: var(--theme_text_clr);
            }
          }
        }
      }
      &.v-input--is-focused {
        .v-input__control {
          .v-input__slot {
            // border: 1px solid var(--main_theme_clr) !important;
            fieldset {
              border: 1px solid var(--main_theme_clr) !important;
            }
          }
        }
      }
    }
  }
}

.input_wrapper {
  margin-block: 10px;
  &.color_picker {
    position: relative;
    margin: 0;
    padding: 21px 10px 8px;
    background-color: var(--inputBg);
    border: 1px solid var(--inputBg);
    border-radius: 10px;
    .custom_color_preview {
      display: block;
      padding-block: 10px;
      width: 100%;
      border-radius: 10px;
    }
    .custom_input_label {
      position: absolute;
      top: 3px;
      right: 12px;
      color: var(--main_theme_clr);
      font-size: 12px;
      line-height: 12px;
      font-family: $medium_font;
    }
    input[type='color'] {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      width: 100%;
      max-height: 0;
    }
  }
  &.text_editor {
    position: relative;
    margin: 0;
    padding: 21px 0 0;
    background-color: var(--inputBg);
    border: 1px solid var(--inputBg);
    border-radius: 10px;
    overflow: hidden;
    .custom_input_label {
      position: absolute;
      top: 7px;
      right: 12px;
      color: var(--main_theme_clr);
      font-size: 12px;
      line-height: 12px;
      font-family: $medium_font;
    }
    .cke {
      border: none !important;
      .cke_inner {
        .cke_top {
          border-bottom: 1px solid var(--border_clr);
          background: transparent;
          padding: 5px 2px;
        }
        .cke_bottom {
          border-top: 1px solid var(--border_clr);
          background: transparent;
        }
      }
    }
  }
}

.v-menu__content {
  &.v-autocomplete__content {
    background-color: var(--inputBg) !important;
    border-radius: 10px !important;
    @include simpleShadow;
    .v-list {
      .v-list-item {
        .v-list-item__content {
          .v-list-item__title {
            color: var(--theme_text_clr) !important;
          }
        }
      }
    }
  }
}

.v-dialog__content {
  .v-dialog {
    .v-picker {
      .v-picker__title {
        width: 100%;
        &.primary {
          background-color: var(--main_theme_clr) !important;
          border-color: var(--main_theme_clr) !important;
        }
      }
      .v-picker__body {
        background: var(--lightBg) !important;
        width: 100%;
        & > div {
          .v-date-picker-header {
            .v-date-picker-header__value {
              .accent--text {
                button {
                  color: var(--theme_text_clr) !important;
                }
              }
            }
            .v-btn {
              .v-btn__content {
                .v-icon {
                  color: var(--theme_text_clr) !important;
                }
              }
            }
          }
          .v-date-picker-table {
            table {
              thead {
                tr {
                  th {
                    color: var(--main_theme_clr);
                  }
                }
              }
              tbody {
                tr {
                  td {
                    .v-btn {
                      .v-btn__content {
                        color: var(--theme_text_clr);
                      }
                      &.v-date-picker-table__current {
                        &.accent--text {
                          color: var(--main_theme_clr) !important;
                          caret-color: var(--main_theme_clr) !important;
                          .v-btn__content {
                            color: var(--main_theme_clr) !important;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .v-time-picker-clock__container {
          .v-time-picker-clock__ampm {
            &.primary--text {
              color: var(--main_theme_clr) !important;
              caret-color: var(--main_theme_clr) !important;
            }
          }
          .v-time-picker-clock {
            background-color: var(--mainBg);
            .v-time-picker-clock__inner {
              .v-time-picker-clock__hand {
                background-color: var(--lightBg) !important;
                &::after {
                  border-color: var(--lightBg) !important;
                }
                &.accent {
                  background-color: var(--main_theme_clr) !important;
                  border-color: var(--main_theme_clr) !important;
                  &::after {
                    border-color: var(--main_theme_clr) !important;
                  }
                }
              }
              .v-time-picker-clock__item {
                span {
                  color: var(--theme_text_clr);
                }
                &.v-time-picker-clock__item--active {
                  background-color: var(--lightBg) !important;
                  &.accent {
                    background-color: var(--main_theme_clr) !important;
                    border-color: var(--main_theme_clr) !important;
                    span {
                      color: var(--white_clr);
                    }
                  }
                }
              }
            }
          }
        }
      }
      .v-picker__actions {
        padding: 0 !important;
        background: var(--main_theme_clr);
        button {
          &.primary--text {
            color: var(--white_clr) !important;
          }
        }
      }
    }
  }
}

.flagged_phone_content_wrapper {
  @include flexStartAlignment;
  column-gap: 8px;
  .selected_flag_wrapper {
    @include flexCenterAlignment;
    flex-direction: row-reverse;
    column-gap: 5px;
    width: 70px;
    height: 100%;
    padding: 15px 5px;
    margin-bottom: 5px;
    background-color: var(--white_clr);
    border: 1px solid var(--border_clr);
    border-radius: 10px;
    .selected_country_key {
      direction: ltr;
      color: var(--light_gray_clr);
      font-size: 15px;
      font-family: $medium_font;
    }
    .selected_country_flg {
      border-radius: 4px;
      object-fit: cover;
    }
  }
  .keys_and_flags_list {
    position: absolute;
    top: 110%;
    left: 0;
    direction: ltr;
    width: 70px;
    background-color: var(--white_clr);
    border: 1px solid var(--border_clr);
    border-radius: 6px;
    @include simpleShadow;
    overflow: hidden;
    z-index: 10;
    max-height: 300px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
    .list_item {
      @include flexCenterAlignment;
      column-gap: 5px;
      padding: 10px 6px;
      transition: all 0.4s linear;
      &:hover {
        cursor: pointer;
        background-color: var(--soft_main_theme_clr);
      }
      .country_key {
        direction: ltr;
        color: var(--lightGray);
        font-size: 12px;
        font-family: $medium_font;
      }
      .country_flg {
        border-radius: 4px;
        object-fit: cover;
      }
    }
  }
  .input_wrapper {
    width: calc(100% - 70px);
  }
}

.theme--light {
  .v-icon {
    color: var(--main_theme_clr);
  }
}

.input-title {
  h4 {
    font-size: 15px;
    color: var(--theme_text_clr);
    margin-top: 10px;
    margin-bottom: 5px;
  }
}

.v-input--radio-group.v-input--radio-group--row .v-radio {
  margin-right: 0;
}

.v-input--checkbox.v-input .v-input__control .v-input__slot,
.v-input--radio-group.v-input .v-input__control .v-input__slot {
  padding: 15px 0px 2px;
}

.v-input--selection-controls .v-input__slot > .v-label,
.v-input--selection-controls .v-radio > .v-label {
  margin-left: 20px;
}

.rtl {
  .v-input,
  .v-select {
    .v-input__control {
      .v-input__slot {
        .v-text-field__slot {
          .v-label {
            left: auto !important;
            right: 0 !important;
            &.v-label--active {
              left: auto !important;
              right: -20px !important;
            }
          }
        }
        .v-select__slot {
          .v-label {
            left: auto !important;
            right: 0 !important;
            &.v-label--active {
              left: auto !important;
              right: -20px !important;
            }
          }
        }
      }
    }
  }
}
.single_image_input_wrapper {
  @include flexCenterAlignment;

  .wrapper {
    position: relative;
    width: 160px;
    height: 160px;

    label {
      cursor: pointer;
      position: absolute;
      inset: 0;
      background-color: transparent;
      @include borderRadius(50%);
      @include flexCenterAlignment;
      z-index: 2;

      svg,
      i {
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        @include flexCenterAlignment;
        width: 50px;
        height: 50px;
        background-color: var(--border_clr);
        color: var(--theme_text_clr);
        font-size: 22px;
        @include borderRadius(50%);
      }
    }

    .image_uploaded {
      position: absolute;
      inset: 0;
      width: 160px;
      height: 160px;
      object-fit: cover;
      @include borderRadius(20px);
      z-index: 1;
    }

    input[type='file'] {
      display: none;
    }
  }
}

.v-tabs {
  // width: 100% !important;
  // overflow-x: hidden !important;
  .v-tabs-bar {
    height: 40px !important;
  }
  .v-tabs-slider {
    display: none !important;
  }
  .v-tab {
    border-radius: 5px;
    transition: all 0.5s !important;
    text-transform: none !important;
    // padd
    // font-weight: bold;
  }
  .v-tab.v-tab--active {
    background: var(--main_theme_clr);
    color: white !important;
  }
}
.v-input--is-disabled {
  opacity: 0.4 !important;
}