.auth-arabic-layout { min-height: 100vh; background: radial-gradient(circle at 20% 20%, rgba(0, 169, 196, .2), transparent 40%), radial-gradient(circle at 80% 80%, rgba(73, 87, 214, .15), transparent 42%), #edf2f7; } .auth-flow-card { border-radius: 1.2rem; overflow: hidden; background: #fff; } .auth-flow-form { background: #f8fafc; height: 100%; } .auth-flow-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: #eef4fb; border: 1px solid #d8e2ef; color: #37506b; font-weight: 600; font-size: .85rem; } .auth-flow-cover { background: linear-gradient(160deg, #00a9c4, #4957d6); color: #fff; align-items: center; padding: 2.5rem; min-height: 560px; } .auth-flow-cover-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; } .auth-flow-cover-logos { display: flex; align-items: center; justify-content: center; gap: 1.1rem; } .auth-flow-logo-main { width: min(290px, 24vw); max-width: 100%; height: auto; } .auth-flow-logo-original { width: min(120px, 10vw); height: min(120px, 10vw); object-fit: contain; border-radius: 50%; background: rgba(255, 255, 255, .95); padding: .6rem; border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 24px rgba(18, 33, 58, .28); } .auth-flow-form .input-group-text { background: #eef4fb; border-color: #d8e2ef; } .auth-flow-form .form-control { border-color: #d8e2ef; } .auth-flow-form .form-control:focus { border-color: #00a9c4; box-shadow: 0 0 0 .2rem rgba(0, 169, 196, .15); } .app-skin-dark .auth-arabic-layout { background: radial-gradient(circle at 20% 20%, rgba(40, 200, 222, .22), transparent 40%), radial-gradient(circle at 80% 80%, rgba(127, 141, 255, .2), transparent 46%), #0e1523; } .app-skin-dark .auth-flow-card { background: #1b2436; box-shadow: 0 18px 50px rgba(3, 9, 19, .45) !important; } .app-skin-dark .auth-flow-form { background: #202c40; color: #edf3ff; } .app-skin-dark .auth-flow-form .text-muted, .app-skin-dark .auth-flow-form .form-check-label { color: #9cb0c8 !important; } .app-skin-dark .auth-flow-badge { background: #25344d; border-color: #2e3d56; color: #d8e6fb; } .app-skin-dark .auth-flow-form .input-group-text, .app-skin-dark .auth-flow-form .form-control { background: #1b2436; border-color: #2e3d56; color: #edf3ff; } .app-skin-dark .auth-flow-form .form-control::placeholder { color: #9cb0c8; } .app-skin-dark .auth-flow-form .form-control:focus { border-color: #28c8de; box-shadow: 0 0 0 .2rem rgba(40, 200, 222, .22); } @media (max-width: 991.98px) { .auth-flow-card { border-radius: 1rem; } }