.left-side,.right-side {
    height: 100%;
    padding: 0 15px;
    float: left;
}
.left-side {
    position: relative;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    color: #ffffff;
    width: 56%;
}
.left-side > img {
    display: block;
    position: relative;
    z-index: 2;
    margin: 40% auto 0;
}

.right-side {
    width: 44%;
    /* background: url(../images/icon-logo-new.png)no-repeat top right / 15% auto; */
}

.box-login input[type="text"], .box-login input[type="password"], .box-login input[type="email"], .box-register input[type="text"], .box-register input[type="password"], .box-register input[type="email"], .box-register input[type="NIK"], .box-forgot input[type="email"] {
    background-color: rgba(83, 81, 81, 0.5) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding-left: 50px !important;
    height: 45px;
}

input[type="text"]::placeholder {                    
    color: #ffffff;
} 

input[type="password"]::placeholder {                    
    color: #ffffff;
}

.btn-theme-primary {
    background: #EE2D24;
    color: #ffffff;
    padding: 12px 12px;
    border-radius: 15px;
}

@media screen and (max-width: 768px) {
    .left-side {display: none;}
    .right-side {
      float: none;
      width: 100%;
    }
}

@media screen and (min-width: 768px) {
  .login .box-login.clear,
  .login .box-forgot.clear,
  .login .box-register.clear {
      display: block;
      width: 400px;
      margin: 0 auto;
  }

}