/* Google Font Link */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


  .container .forms {
      height: 100%;
      width: 100%;
      background: #fff;
  }

  .container .form-content {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .form-content .login-form,
  .form-content .signup-form {
      width: 60%;
  }

  .forms .form-content .title {
      position: relative;
      font-size: 24px;
      font-weight: 500;
      color: #333;
  }

  .forms .form-content .title:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 115px;
      background: #003378;
  }

  .forms .signup-form .title:before {
      width: 145px;
  }

  .forms .form-content .input-boxes {
      margin-top: 30px;
  }

  .forms .form-content .input-box {
      display: flex;
      align-items: center;
      height: 50px;
      width: 100%;
      margin: 10px 0;
      position: relative;
  }

  .form-content .input-box input {
      height: 100%;
      width: 100%;
      outline: none;
      border: none;
      padding: 0 10px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 2px solid rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
  }

  .form-content .login-form .input-box input {
      padding: 0 30px;
  }

  .form-content .input-box input:focus{
      border-color: #003378;
  }

  .form-content .input-box i {
      position: absolute;
      color: #003378;
      font-size: 17px;
  }

  .forms .form-content .text {
      font-size: 14px;
      font-weight: 500;
      color: #333;
  }

  .forms .form-content .text a {
      text-decoration: none;
  }

  .forms .form-content .text a:hover {
      text-decoration: underline;
  }

  .forms .form-content .button {
      color: #fff;
      margin-top: 40px;
  }

  .forms .form-content .button input {
      color: #fff;
      background: #003378;
      border-radius: 6px;
      padding: 0;
      cursor: pointer;
      transition: all 0.4s ease;
  }

  .forms .form-content .button input:hover {
      background: #04295a;
  }

  .forms .form-content a {
      color: #003378;
      cursor: pointer;
  }

  .forms .form-content a:hover {
      text-decoration: underline;
  }

  .forms .form-content .login-text,
  .forms .form-content .sign-up-text {
      text-align: center;
      margin-top: 25px;
  }

  .container #flip {
      display: none;
  }

  @media (max-width: 730px) {

      .form-content .login-form,
      .form-content .signup-form {
          width: 100%;
      }

      .form-content .signup-form {
          display: none;
      }

      .container #flip:checked~.forms .signup-form {
          display: block;
      }

      .container #flip:checked~.forms .login-form {
          display: none;
      }
  }