body {
       margin: 0px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }

   .container {
       display: flex;
   }

   .left-panel {
       flex: 1;
       background: #f5f6fa;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 40px;
       max-width: 50%;
   }

   .right-panel {
       flex: 1;
       position: relative;
   }

   .right-panel img {
       width: 100%;
       height: 100vh;
       object-fit: cover;
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
   }

   .logo img {
       width: 140px;
       height: 80px;
   }

   .logo h1 {
       font-size: 22px;
       color: #4a833c;
       margin: 0;
   }

   h2 {
       font-size: 22px;
       color: #222;
       margin: 0 0 10px 0;
   }

   p {
       margin: 10px 0 20px;
       color: #444;
   }

   form {
       display: flex;
       flex-direction: column;
   }

   .input-group {
       margin-bottom: 16px;
   }

   .input-group label {
       display: block;
       font-size: 14px;
       margin-bottom: 5px;
       color: #333;
   }

   .input-field {
       display: flex;
       align-items: center;
       border: 1px solid #ccc;
       border-radius: 4px;
       padding: 10px;
       background: #fff;
   }

   .input-field span {
       margin-right: 8px;
       color: #999;
   }

   .input-field input {
       border: none;
       outline: none;
       width: 100%;
       font-size: 14px;
   }

   .options {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       font-size: 13px;
   }

   .options input {
       margin-right: 5px;
   }

   .options a {
       text-decoration: none;
       color: #4a833c;
   }

   .btn {
       padding: 12px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
       font-weight: bold;
   }

   .login-btn {
       background: #4a833c;
       color: white;
       margin-bottom: 15px;
   }

   .login-btn:hover {
       background: #37692a;
   }

   .social-buttons {
       display: flex;
       gap: 10px;
       margin-bottom: 20px;
   }

   .facebook {
       background: #3b5998;
       color: white;
       flex: 1;
   }

   .google {
       background: #db4437;
       color: white;
       flex: 1;
   }

   .create-link {
       text-align: center;
       font-size: 13px;
   }

   .create-link a {
       color: #4a833c;
       text-decoration: none;
   }

   .create-link a:hover {
       text-decoration: underline;
   }

   .left_wrap {
       max-width: 50%;
       width: 100%;
       margin: 0 auto;
   }

   .login-error {
       background: #f8d7da;
       color: #721c24;
       padding: 10px;
       border-radius: 4px;
       margin-bottom: 15px;
       border: 1px solid #f5c6cb;
   }

   .login-message {
       margin-top: 15px;
   }

   .login-message.success {
       background: #d4edda;
       color: #155724;
       padding: 10px;
       border-radius: 4px;
       border: 1px solid #c3e6cb;
   }

   .login-message.error {
       background: #f8d7da;
       color: #721c24;
       padding: 10px;
       border-radius: 4px;
       border: 1px solid #f5c6cb;
   }

   @media only screen and (max-width: 1024px) {
       .left_wrap {
           max-width: 100%;
       }
   }

   @media only screen and (max-width: 768px) {
       .left-panel {
           width: 100%;
           max-width: 100%;
           height: calc(100vh - 80px);
       }

       .left_wrap {
           max-width: 100%;
       }

       .right-panel {
           display: none;
       }
   }

   .shake-animation {
       animation: shake 0.5s;
   }

   @keyframes shake {

       0%,
       20%,
       40%,
       60%,
       80% {
           transform: translateX(0);
       }

       10%,
       30%,
       50%,
       70%,
       90% {
           transform: translateX(-5px);
       }

       15%,
       35%,
       55%,
       75%,
       95% {
           transform: translateX(5px);
       }
   }

   .form-loading {
       opacity: 0.7;
       pointer-events: none;
   }

   .login-message {
       display: none;
       font-size: 14px;
   }

   .login-message.error,
   .login-message.success {
       display: block;
   }

   /* social Icon */
   div.nsl-container .nsl-button-default div.nsl-button-label-container {
       margin: 0 0px 0 -20px !important;
   }