@mixin auth-sign-in-theme() {
  app-auth-sign-in {
    .signIn {
      width: 100%;
      height: 100%;
      padding: 40px 0;
      background-color: $off-white;
      background: url("../../../assets/images/auth-back.jpg") no-repeat center
        center;
      background-size: cover;
      position: relative;
      overflow: hidden;
      &__logo {
        padding: 0 3rem;
      }
    }

    .form {
      width: 30%;
      background: $white-color 0% 0% no-repeat padding-box;
      border-radius: 12px;
      padding: 40px;
      margin: 0 auto;
      margin-top: 10%;
      @media (max-width: 767px) {
        width: 95%;
      }
      main {
        text-align: center;
        margin-bottom: 2rem;
        h1 {
          color: $main-color;
          font-size: 25px;
        }
        span {
          font-size: 17px;
          color: $main-color;
          font-weight: 200;
          font-family: "Roboto";
        }
      }

      p {
        font-size: 15px;
        font-family: "Roboto";
        color: #009fe3;
        cursor: pointer;
        margin-top: 10px;
        transition: all 0.5s;
        &:hover {
          color: $main-color;
        }
        a {
          text-decoration: underline;
        }
      }

      .label {
        font-size: 10px;
        font-weight: 200;
        font-family: "Roboto";
        font-size: 17px;
        color: $main-color;
        margin-bottom: 0.4rem;
      }

      input {
        padding: 15px;
        border-radius: 10px;
        border: 1px solid $main-color;
        background-color: $white-color;
        box-shadow: 0px 5px 6px #2f2c8324;
        background-color: $white-color;
        outline: none;
        font-size: 15px;
      }
      button[type="submit"] {
        background-color: $light-blue;
        border: 1px solid $light-blue;
        font-size: 16px;
        color: $white-color;
        border-radius: 10px;
        padding: 10px 20px;
        margin-top: 30px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          background-color: $white-blue;
        }
      }

      h5 {
        text-align: center;
        font-family: "Roboto";
        font-size: 14px;
        color: $white-blue;
        font-weight: 400;
        span {
          color: $main-color;
          transition: all 0.5s;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            color: $white-blue;
          }
        }
      }
    }
  }
}
