body, 
    html {
      height: 100%;
      margin: 0;
    }
    .form-section {
      background-color: #fff;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
    }
    .form-control:focus {
      box-shadow: none;
      border-color: #6c757d;
    }
    .btn-signup {
      /* background-color: #47672f;*/
      background-color: #500c0c;
      color: #fff;
    }
    .btn-signup:hover {
      /* background-color: #2f4e1f; */
      background-color: #842323;
      color: #fff;
    }
    :not(.btn-check)+.btn:active{
       background-color: #842323;
       color: #fff;
    }
    .divider {
      border-top: 1px solid #ddd;
      margin: 30px 0;
    }
    .auth-btn {
      border: 1px solid #ccc;
      width: 100%;
    }
    .auth-btn img {
      width: 20px;
      margin-right: 10px;
    }
    .left-image {
      background: url('../images/leftbg.jpg') center center/cover no-repeat;
      min-height: 100vh;
    }
    .right-image {
      background: url('../images/hero/mobile/signupImage.jpg') center center/cover no-repeat;
      min-height: 100vh;
    }
    .customForm{
      width:100%;
      display: flex;
      justify-content: center;
      padding: 22px;
      box-shadow: 0px 0px 10px 2px #b5b4b4;
    }
    .form-450{
      width: 450px;
    }
    .signUpLogo{
      width: 150px;
      margin: auto;
    }
    .toggle-password {
      position: absolute;
      right: 12px;
      top: 42px;
      cursor: pointer;
      color: #6c757d;
    }
    @media (max-width: 767px) {
      body, html {
        overflow: auto; /* allow scroll only on small screens */
      }
    }