.p-recovery-inner {
  padding: 5rem 0;
  .rel-block {
    max-height: unset;
  }
}

.p-recovery-title {
  align-items: center;
  button {
    padding: 2.1rem 3rem;
    max-width: 26.2rem;
    cursor: pointer;
    max-height: 6rem;
  }
  h2 {
    font-size: 2.2rem;
  }
}

.input-block-outer {
  max-width: 34rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  span {
    color: red;
  }
}

.sign-form {
  .input-block-outer {
    max-width: unset;

    .input-block {
      position: relative;
      height: 8.8rem;
    }
  }
}

.rel-block {
  position: relative;
  max-height: 7.8rem;
  input {
    background: #f2f2f2;
    padding-right: 5rem;
    width: 100%;
  }
  .rel-img {
    position: absolute;
    left: calc(100% - 4rem);
    top: 50%;
    transform: translateY(50%);
    cursor: pointer;
  }
}

.sp-outer {
  gap: 2rem;
  max-width: unset;
}

.p-input-img {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 60%;
  left: calc(100% - 3rem);
  z-index: 5;
}

.p-recovery-content {
  display: flex;
  gap: 2rem;
  padding: 5rem 0;
  .input-block {
    max-width: 34rem;
    width: 100%;
  }
}

.p-recovery {
  h2 {
    padding: 3rem 0;
    font-weight: normal;
    font-size: 2.2rem;
  }

  .spinner {
    width: 6rem;
    height: 6rem;
  }
  .container {
    position: relative;
  }
  .loader {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.success {
  h1 {
    color: $base-green;
    font-size: 2.2rem;
  }

  &.error {
    .wrapper {
      animation: fade-in 2s ease;
      width: 9.6rem;
      height: 9.6rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h1 {
      color: rgb(222, 41, 38);
    }
  }
}

// ANIMO
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}

// MEDIA

@media screen and (max-width: 800px) {
  .p-recovery-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .sign-form {
    .p-input-img {
      left: calc(100% - 6rem);
    }
  }
  .p-recovery-content {
    display: grid;
    grid-template-columns: 1fr;

    .input-block,
    .input-block-outer {
      max-width: unset;
    }
  }

  .rel-block {
    margin-bottom: 1rem;
    max-height: unset;
  }
}
