body {
         font-family: 'Inter', sans-serif;
         background-color: #f8f9fa;
         }
         .auth-container {
         min-height: 100vh;
         }
         .bg-auth-left {
         background-color: #f0f4ff;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         padding: 2rem;
         }
         .bg-auth-right {
         background-color: #f999c7;
         background-image: url('/asset/img/lines.svg');
		 background-size: cover;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         padding: 3rem;
         text-align: center;
         }
         /* Abstract shapes */
         .blob-1 {
         position: absolute;
         width: 150%;
         height: 150%;
         background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
         top: -20%;
         left: -20%;
         border-radius: 40%;
         transform: rotate(-15deg);
         z-index: 0;
         }
         .login-card {
         }
		 .login-card > .inner{
		 background: white;
		 border-radius: 1.5rem;
         padding: 2.5rem;
         width: 540px;
         max-width: 640px;
         box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
         border: none;
         z-index: 10;
         
		 }
         .btn-black {
         background-color: #000;
         color: #fff;
         font-weight: 700;
         padding: 0.75rem;
         border-radius: 0.5rem;
         border: none;
         transition: background-color 0.2s;
         }
         .btn-black:hover {
         background-color: #222;
         color: #fff;
         }
         .btn-google {
         background: white;
         border: 1px solid #dee2e6;
         color: #212529;
         font-weight: 600;
         font-size: 0.875rem;
         padding: 0.75rem;
         border-radius: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.75rem;
         transition: background-color 0.2s;
         }
         .btn-google:hover {
         background-color: #f8f9fa;
         border-color: #ced4da;
         }
         .form-control {
         padding: 0.75rem 1rem;
         border-radius: 0.5rem;
         border: 1px solid #e9ecef;
         }
         .form-control:focus {
         box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.2);
         border-color: #7c4dff;
         }
         .back-button {
         position: absolute;
         top: 1.5rem;
         left: 1.5rem;
         background: rgba(0,0,0,0.8);
         color: white;
         width: 32px;
         height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 6px;
         border: none;
         cursor: pointer;
         z-index: 20;
         }
         .divider {
         position: relative;
         text-align: center;
         margin: 2rem 0;
         }
         .divider::before {
         content: "";
         position: absolute;
         top: 50%;
         left: 0;
         right: 0;
         height: 1px;
         background: #e9ecef;
         z-index: 1;
         }
         .divider span {
         position: relative;
         z-index: 2;
         background: white;
         padding: 0 1rem;
         color: #adb5bd;
         font-size: 0.75rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         }
         .hero-image-mask {
         width: 480px;
         height: 580px;
         }
         .hero-image-mask .portrait-wrap {
         position: relative;
         width: 100%;
         height: 100%;
         }
         .hero-image-mask img {
         width: 100%;
         }
         .hero-title {
         font-size: 2.25rem;
         font-weight: 800;
         color: #000;
         line-height: 1.2;
         margin-bottom: 2rem;
         max-width: 550px;
         z-index: 10;
         }
         .carousel-dots {
         display: flex;
         gap: 0.5rem;
         z-index: 10;
         }
         .dot {
         height: 6px;
         border-radius: 3px;
         background: rgba(0,0,0,0.3);
         }
         .dot.active {
         width: 32px;
         background: #000;
         }
         .dot:not(.active) {
         width: 12px;
         }
         .text-indigo {
         color: #4f46e5;
         text-decoration: none;
         }
         .text-indigo:hover {
         color: #4338ca;
         text-decoration: underline;
         }
         @media (max-width: 767.98px) {
         .bg-auth-right {
         display: none;
         }
         }
		 .bg-success {
		 background-color:#16A34A !important;
		 }
		 label.checkbox {
		 position: relative;
		 }
		 label.checkbox input[type="checkbox"] {
		 opacity: 0;
		 }
		 label.checkbox .checkmark {
		 width: 42px;
		 height: 26px;
		 display: inline-block;
		 position: absolute;
		 top: 0;
		 left: 0;
		 }
		 label.checkbox .checkmark::after {
		 content: '';
		 width: 26px;
		 height: 26px;
		 background: red;
		 display: inline-block;
		 border: 1px solid #C7D2FE;
		 background: transparent;
		 border-radius: 6px;
		 margin-right: 25px;
		 }
		 label.checkbox input:checked ~ .checkmark::after {
		 content: '\f00c';
		 font-family: "Font Awesome 7 Free";
		 font-weight: 900;
		 width: 26px;
		 height: 26px;
		 background: red;
		 display: inline-block;
		 border: 1px solid #C7D2FE;
		 background: transparent;
		 border-radius: 6px;
		 margin-right: 25px;
		 padding-left: 4px;
		 }
		 label.checkbox span.name {
		 padding-left: 12px;
		 }