.fo-home {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;

  .login {
    width: 100%;
    height: 100%;
    max-width: 500px;
    z-index: 100;
    margin: auto;
    text-align: center;
    color: rgb(44, 62, 80) !important;

    .header {
      width: 100%;
      margin: auto;
      padding: 30px 30px 10px 30px;
      text-align: center;

      .social {
        padding: 10px;

        .box {
          display: inline-block;
          width: 40px;
          height: 40px;
          cursor: pointer;
          text-align: center;
          padding: 10px;
          margin: 10px;
          border-radius: 50%;
          border: 1px solid grey;

          &:hover {
            background-color: rgba(52, 247, 152, 0.5);
            transition: 0.2s ease-in-out;
          }
        }
      }
    }

    .body {
      width: 100%;
      padding: 10px 20px 30px 20px;
      position: relative;

      .form-error {
        input {
          border: 2px solid $color-error !important;
        }
      }

      input {
        margin-top: 20px;
        border: 2px solid gainsboro;
        height: 55px;
        font-size: 17px;
        font-weight: 500;
        outline: none;
        padding: 15px;
        border-radius: 5px;
        width: 100%;

        &:focus {
          border: 2px solid $color-theme;
        }
      }

      .password {
        text-align: left !important;

        span {
          margin: 10px;
          color: #0293d1;
        }
      }
    }

    .footer {
      padding-bottom: 30px;

      a {
        text-decoration: none;
        color: black;
      }
    }
  }
}
