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

#section-signin {
  font-family: 'NunitoSans';
  border-radius: 0px 0px 7px 7px;
  height: 100%;
  position: relative;
  width: 328px;
  margin: auto;

  .signin-welcome {
    height: 45%;
    width: 100%;
    text-align: center;

    .logo {
      align-items: flex-end;
      display: flex;
      height: 60%;

      .icon {
        height: 51px;
        width: 57px;
        margin: 0 auto;
        position: relative;
        background: url('./../images/logo-2-copy@2x.png') no-repeat center
          center;
        background-size: 100%;
      }
    }

    .text {
      color: #ffffff;
      font-size: 20px;
      margin-top: 10px;
      position: relative;
      top: 5px;
    }
  }

  .signin-form {
    height: 20%;
    width: 67%;
    margin: 0 auto;
    position: relative;

    form {
      position: relative;

      input {
        background: transparent;
        width: 100%;
        border: 0px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.19);
        color: #ffffff;
        font-size: 13px;
        font-weight: 300;
        text-indent: 7px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
          opacity: 1;
        }

        &:focus {
          outline: none;
          border-bottom: solid 1px #fff;
        }
      }

      .error-message {
        position: absolute;
        font-size: 12px;
        color: #000;
        left: 0px;
        position: absolute;
        top: 24px;
      }

      .buttons {
        bottom: 0;
        margin: 16% 0% 0% 0%;
        padding: 0px;
        width: 100%;
      }
    }
  }

  .signin-footer {
    height: 25%;
    color: #ffffff;
    font-size: 13px;

    .signup-message {
      position: relative;
      top: 8%;
      text-align: center;

      span {
        font-weight: 200;
        strong {
          font-weight: 400;
          cursor: pointer;
        }
      }
    }
  }
}
