body {
       background: #eef4f8;
       font-family: 'Inter', sans-serif;
   }

   .login-page {
       overflow: hidden;
   }

   .login-page .remember-wrapper {
       width: 100%;
       margin: 0;
   }

   .login-page .remember-content {
       display: flex;
       align-items: center;
   }

   /* Hide real checkbox */
   .login-page #remember {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
       pointer-events: none;
   }

   /* Label */
   .login-page .remember-content label {
       display: inline-flex !important;
       align-items: center !important;
       gap: 8px;
       margin: 0 !important;
       padding: 0 !important;
       cursor: pointer;
       font-size: 14px;
       line-height: 18px;
       font-weight: 400;
   }

   /* Custom checkbox */
   .login-page .remember-checkbox {
       display: inline-block;
       width: 17px;
       height: 17px;
       min-width: 17px;
       border: 1px solid #ced4da;
       border-radius: 4px;
       background: #fff;
       position: relative;
       transition: all 0.15s ease;
   }

   /* Checked */
   .login-page #remember:checked+label .remember-checkbox {
       background: #198754;
       border-color: #198754;
   }

   /* Check mark */
   .login-page #remember:checked+label .remember-checkbox::after {
       content: "";
       position: absolute;
       left: 5px;
       top: 1px;
       width: 5px;
       height: 10px;
       border: solid #fff;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg);
   }

   /* Keyboard focus */
   .login-page #remember:focus+label .remember-checkbox {
       box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15);
   }

   /* Validation error */
   .login-page #remember-error {
       display: block !important;
       margin-top: 6px !important;
       color: #dc3545 !important;
       font-size: 13px !important;
       line-height: 1.4 !important;
   }

   .login-page .field-wrapper {
       margin-bottom: 1.5rem;
   }

   .login-page .custom-input {
       margin-bottom: 0 !important;
   }

   .login-page .custom-input .form-control.is-invalid {
       border-color: #dc3545 !important;
   }

   .login-page .custom-input .form-control:focus {
       box-shadow: none;
   }

   /* JsValidator generated error */
   .login-page .custom-input+.invalid-feedback,
   .login-page .custom-input+label.error,
   .login-page .field-error {
       display: block !important;
       width: 100% !important;
       margin-top: 6px !important;
       color: #dc3545 !important;
       font-size: 13px !important;
       line-height: 1.4 !important;
   }

   .left-panel {
       /* background: linear-gradient(135deg, #0f9d58, #198754, #157347); */
       background: linear-gradient(135deg, #17491d, #3a8f42);
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       padding: 50px 60px;
   }

   .left-content {
       position: relative;
       z-index: 5;
       max-width: 520px;
       width: 100%;
       animation: fadeLeft .8s ease;
   }

   .company-logo {
       width: 90px;
       filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .25));
       animation: floatLogo 5s ease-in-out infinite;
   }

   .logo-box {
       margin-bottom: 45px;
       text-align: center;
   }

   .subtitle {
       font-size: 15px;
   }

   .feature-card {
       display: flex;
       align-items: flex-start;
       gap: 18px;
       margin-bottom: 10px;
       background: rgba(255, 255, 255, .10);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, .18);
       border-radius: 18px;
       padding: 10px;
       transition: .35s;
   }

   .feature-card:hover {
       transform: translateX(8px);
       background: rgba(255, 255, 255, .18);
   }

   .feature-icon {
       width: 55px;
       height: 55px;
       border-radius: 15px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, .20);
       color: #fff;
       font-size: 22px;
       flex-shrink: 0;
   }

   .feature-card h6 {
       color: #fff;
       font-weight: 700;
       margin-bottom: 0px;
   }

   .feature-card p {
       margin: 0;
       color: rgba(255, 255, 255, .75);
       font-size: 14px;
       line-height: 1.6;
   }

   .login-wrapper {
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 50px 60px;
       background: #f8fbfd;
   }

   .login-card {
       width: 100%;
       max-width: 500px;
       background: #fff;
       border-radius: 26px;
       padding: 50px;
       box-shadow: 0 30px 70px rgba(0, 0, 0, .08);
       animation: fadeUp .8s ease;
   }

   .custom-input {
       border-radius: 14px;
       overflow: hidden;
       transition: .3s;
   }

   .custom-input .input-group-text {
       border: none;
       background: #f4f7fa;
       color: #198754;
       width: 55px;
       justify-content: center;
   }

   .custom-input .form-control {
       border: none;
       background: #f4f7fa;
       height: 56px;
       box-shadow: none;
       font-size: 15px;
   }

   .custom-input .btn {
       border: none;
       background: #f4f7fa;
   }

   .custom-input:focus-within {
       box-shadow: 0 0 0 4px rgba(25, 135, 84, .12);
   }

   .password-group {
       position: relative;
   }

   .password-group .form-control {
       padding-right: 52px;
   }

   .password-toggle-btn {
       position: absolute;
       top: 0;
       right: 0;
       height: 56px;
       width: 52px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: transparent;
       border: none;
       color: #8a9490;
       font-size: 16px;
       z-index: 5;
       cursor: pointer;
       border-radius: 0 14px 14px 0;
       transition: .25s;
   }

   .password-toggle-btn:hover {
       color: #198754;
       background: rgba(25, 135, 84, .08);
   }

   .password-toggle-btn:focus {
       outline: none;
       box-shadow: 0 0 0 3px rgba(25, 135, 84, .15);
   }

   .password-toggle-btn i {
       pointer-events: none;
   }

   .btn-login {
       height: 56px;
       border-radius: 14px;
       font-weight: 600;
       font-size: 16px;
       letter-spacing: .4px;
       transition: .35s;
       background: linear-gradient(135deg, #198754, #20c997);
       border: none;
   }

   .btn-login:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 30px rgba(25, 135, 84, .30);
   }

   .btn-login:active {
       transform: scale(.98);
   }

   .login-footer {
       text-align: center;
       margin-top: 35px;
       color: #777;
       font-size: 14px;
   }

   .mobile-logo {
       width: 90px;
   }

   .blob {
       position: absolute;
       border-radius: 50%;
       background: rgba(255, 255, 255, .08);
       animation: blobFloat 8s ease-in-out infinite;
   }

   .blob-1 {
       width: 250px;
       height: 250px;
       top: -60px;
       left: -80px;
   }

   .blob-2 {
       width: 180px;
       height: 180px;
       right: -40px;
       top: 120px;
       animation-delay: 2s;
   }

   .blob-3 {
       width: 320px;
       height: 320px;
       bottom: -140px;
       left: 40px;
       animation-delay: 4s;
   }

   .blob-4 {
       width: 120px;
       height: 120px;
       right: 80px;
       bottom: 100px;
       animation-delay: 1s;
   }

   @keyframes blobFloat {

       0%,
       100% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-25px);
       }
   }

   @keyframes floatLogo {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-10px);
       }
   }

   @keyframes fadeLeft {
       from {
           opacity: 0;
           transform: translateX(-60px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(40px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media(max-width:991px) {
       .login-wrapper {
           padding: 25px;
       }

       .login-card {
           padding: 35px 28px;
       }
   }

   @media(max-width:576px) {
       .login-card {
           border-radius: 18px;
           padding: 28px 22px;
       }

       .btn-login {
           height: 52px;
       }
   }

   .btn-login {
       position: relative;
       overflow: hidden;
   }

   .ripple {
       position: absolute;
       border-radius: 50%;
       transform: scale(0);
       animation: ripple .6s linear;
       background: rgba(255, 255, 255, .45);
       pointer-events: none;
   }

   @keyframes ripple {
       to {
           transform: scale(4);
           opacity: 0;
       }
   }