@import './../../styles/variables/index.scss';

.container {
  display: flex;
  justify-content: center;
  max-width: 856px;
  padding: 0 16px;
  margin: 0 auto 80px;

  @media (min-width: 560px) {
    padding: 0 32px;
  }

  @media (min-width: 900px) {
    padding: 0 43px;
    margin: 0 auto 164px;
  }

  .formContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    width: 100%;

    @media (min-width: 560px) {
      max-width: 576px;
      align-self: center;
    }

    @media (min-width: 900px) {
      max-width: 100%;
    }

    .h4_italic {
      margin-bottom: 40px;
    }

    .form_control {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      /* padding-bottom: 16px; */
      margin-bottom: 16px;

      @media (min-width: 560px) {
        margin-bottom: 6px;
        flex-direction: row;
        align-items: center;
      }

      .containerLine {
        overflow: hidden;
        width: 100%;
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        height: 2px;
        svg {
          min-width: 768px;
        }
      }

      label {
        min-width: 23%;
        width: 100%;
        @media (min-width: 560px) {
          width: auto;
        }
      }

      .filled {
        color: #9f9dc8;
      }

      &.error {
        label,
        input,
        input::placeholder {
          color: $red;
        }
        .containerLineError {
          line {
            stroke: red;
          }
        }
      }

      input {
        width: 100%;
        border: none;
        outline: none;
        color: $main-blue;
        padding: 8px 0 16px;

        @media (min-width: 560px) {
          padding: 18px 16px;
        }
      }

      input::placeholder {
        opacity: 40%;
      }

      .detectClick {
        display: block;
      }

      .errorImage {
        display: none;
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0;
      }

      .showErrorImage {
        display: block;
      }

      .dropdownContainer {
        position: relative;
        display: flex;
        flex: 1;
        width: 100%;
        align-self: flex-end;

        @media (min-width: 560px) {
          margin-left: 20px;
        }

        .dropdown {
          width: 100%;
          position: relative;
          cursor: pointer;
          padding: 18px 0;

          > div {
            height: 27px;
            min-width: 90px;
          }

          > img {
            display: block;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            height: 27px;
          }
        }
      }

      .placeholder {
        opacity: 40%;
      }
    }

    .optionsContainer {
      position: absolute;
      left: 0;
      top: calc(100% - 2px);
      z-index: 120;
      display: flex;
      flex-flow: column wrap;
      align-content: flex-end;
      width: 100%;

      .options {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid $main-blue;
        background-color: $white;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16.5px 24.5px;

        .option {
          display: flex;
          flex-flow: column wrap;
          width: 100%;
          cursor: pointer;

          .text_4 {
            transition: color 0.3s;
            &:hover {
              color: $medium-blue;
            }
          }
        }
      }
    }

    form {
      width: 100%;
    }

    button {
      float: right;
      margin-top: 32px;
      outline: none;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      .h5 {
        color: $medium-blue;
      }

      > div {
        > span {
          > span {
            &:first-child {
              line-height: 13px;
            }
            &:last-child {
              background: $white;
              z-index: 111;
              position: relative;
            }
          }
        }
      }
    }
  }
}