Login to Rregister

Username:
Password:

Forgot Password Sign in with UAE PASS

:root { --bg-light: #F4F7FC; /* Main background - very light blue/gray */ --surface-light: #FFFFFF; /* Form area background - white */ --sidebar-bg: #E9F1FA; /* Sidebar - light, calm blue */ --primary-accent: #007BFF; /* Professional Blue */ --secondary-accent: #5C6BC0; /* A slightly deeper blue for contrast */ --text-dark: #212529; /* Main text color */ --text-muted: #6C757D; /* Muted text */ --input-bg: #FFFFFF; --input-border: #CED4DA; --input-focus-border: var(--primary-accent); --button-bg: var(--primary-accent); --button-hover-bg: #0056b3; /* Darker blue for hover */ --tab-active-bg: var(--primary-accent); --tab-active-text: #FFFFFF; --tab-inactive-bg: transparent; --tab-inactive-text: var(--text-muted); --tab-hover-bg: #E9ECEF; --success-color: #28A745; /* Green for success/valid states */ --danger-color: #DC3545; /* Red for errors/invalid states */ } body{ font-family: 'Open Sans', 'Tajawal', sans-serif; margin: 0; padding: 0; color: var(--text-dark); display: flex; /* For centering the container */ justify-content: center; /* For centering the container */ align-items: center; /* For centering the container */ /*min-height: 100vh;*/ /*animation: backgroundAnimation 30s ease infinite alternate;*/ background: linear-gradient(#008080, #E9F1FA, #007bff); /* Adjust colors as needed */ background-attachment: fixed; /* Keep the gradient fixed during scroll */ background-size: 300% 300%; /* Adjust size for desired movement scale */ animation: animatedGradient 15s ease infinite alternate; /* Adjust duration (15s) and timing */ padding: 20px; /* Add padding to body for spacing when container is smaller */ } @keyframes backgroundAnimation { 0% { background-color: #008080; } 25% { background-color: #E6D4B5; } 50% { background-color: #008080; } 75% { background-color: #002B45; } 100% { background-color: #007BFF; } } @keyframes animatedGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body#welcome #page { /*min-height: 100vh;*/ padding-top: 5%; } body#welcome #page header.navbar{ display:none; } body#welcome #main #content{ margin: 0 !important; padding: 0; background: transparent; } body#welcome #main #content main{ padding: 0; } body#welcome #main #content main .breadcrumb{ display:none !important; } body#welcome #main #content main #welcome{ margin: 0 !important; padding: 0; width: 100%; max-width: 100%; } body#welcome #main .viewForm-body-content { display: flex; max-width: 1200px; /* Slightly wider for more breathing room */ width: 100%; background-color: var(--surface-light); border-radius: 15px; /* Standard rounded corners */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Softer shadow */ overflow: hidden; } .form-section.no_label, .subform-section.no_label { padding-top: 0; } #content.page_content{ min-height: auto; } .viewForm-body-content { padding: 0 !important; position: relative; } #registration-wrapper { padding-top: 0; padding-bottom: 0; min-height:80vh; } .form-cell.customHtml.no_label.sidebar_left{ padding:0 !important; } .sidebar_left .form-cell-value.form-cell-full{ padding:0 !important; } .viewForm-body-content #section-actions { border-top: 1px solid var(--field-border-color); display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; padding: 0; border: unset; position: absolute; right: 2%; bottom: 2%; } footer{ display:none !important; } .print-button{ display:none !important; } .sidebar_left .form-cell, .subform-cell{ padding: 0; } .info-sidebar { background-color: var(--sidebar-bg); color: var(--text-dark); /* Darker text on light bg */ padding: 50px 40px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #DEE2E6; /* Subtle separator */ min-height:80vh; } .info-sidebar .logo-container { margin-bottom: 35px; text-align: center; /* Center logo */ } .info-sidebar .logo { font-size: 2rem; font-weight: 700; color: var(--primary-accent); /* Logo in accent color */ display: inline-flex; /* For centering */ align-items: center; } .info-sidebar .logo i { margin-right: 10px; font-size: 1.5rem; } .info-sidebar .logo img { max-width: 180px; height: auto; } .info-sidebar h1.main-title { font-family: 'Lato', sans-serif; /* Different font for title */ font-weight: 700; margin-bottom: 20px; font-size: 2.2rem; line-height: 1.3; color: #343A40; /* Slightly darker title */ text-align: center; } .info-sidebar .info-list { list-style: none; padding: 0; margin-bottom: 30px; } .info-sidebar .info-list-item { display: flex; align-items: center; margin-bottom: 20px; color: var(--text-muted); } .info-sidebar .info-list-item i { font-size: 1.5rem; /* Slightly larger icons */ color: var(--secondary-accent); /* Use secondary accent */ margin-right: 18px; width: 28px; text-align: center; } .info-sidebar .info-list-item div h6 { color: var(--text-dark); font-weight: 600; font-size: 1rem; margin-bottom: 4px; } .info-sidebar .info-list-item div p { font-size: 0.88rem; margin-bottom: 0; line-height: 1.6; } .info-sidebar .terms-link { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; display: block; margin-top: 30px; text-align: center; } .info-sidebar .terms-link:hover { color: var(--primary-accent); text-decoration: underline; } .form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; /* Increased margin */ border-bottom: 1px solid #E9ECEF; /* Subtle bottom border */ padding-top: 10px; padding-bottom: 20px; } .form-title { color: var(--text-dark); font-weight: 700; font-size: 1.8rem !important; margin: 0; } .nav-pills-custom { padding: 0; } .nav-pills-custom .nav-link { background-color: var(--tab-inactive-bg); color: var(--tab-inactive-text); border-radius: 8px; padding: 10px 20px; /* Increased padding */ font-size: 1rem !important; font-weight: 500; /* Slightly less bold */ margin-left: 10px; border: 1px solid var(--input-border); /* Border for inactive tabs */ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .nav-pills-custom .nav-link.active { background-color: var(--tab-active-bg); color: var(--tab-active-text); border-color: var(--tab-active-bg); box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25); /* Subtle shadow for active tab */ } .nav-pills-custom .nav-link:hover:not(.active) { background-color: var(--tab-hover-bg); color: var(--primary-accent); border-color: #ADB5BD; } .form-message.form-errors{ margin-bottom: 0; } .form-cell > label.label, .subform-cell > label.label{ width: 100%; } .form-cell > label.label + *:not(.ui-screen-hidden), .subform-cell > label.label + *:not(.ui-screen-hidden), .form-cell > label.label + .ui-screen-hidden + *, .subform-cell > label.label + .ui-screen-hidden + *{ width: 100%; max-width: 100%; font-weight: 600; color: #343A40; } .form-section-title, .subform-section-title{ margin-bottom:0px !important; } input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], select, textarea, .ql-container.ql-bubble { padding: 5px 10px; color: var(--primary-text-color); background-color: #fff; border: 1.5px solid transparent; border-bottom: 1.5px solid var(--field-border-color); border-radius: 0px; min-height: 46px; } input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, select:focus, textarea:focus, .chosen-container-multi .chosen-choices:focus, .selector_element:focus, .ui-timepicker-div select:focus, .ui-timepicker-div input:focus { border: 1.5px solid transparent !important; border-bottom: 1.5px solid var(--button-background) !important; outline-color: var(--button-background) !important; box-shadow: 4px 4px 24px 5px #0B79DE0D; } input:not([type]):focus-visible, input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=email]:focus-visible, input[type=url]:focus-visible, input[type=time]:focus-visible, input[type=date]:focus-visible, input[type=datetime]:focus-visible, input[type=datetime-local]:focus-visible, input[type=tel]:focus-visible, input[type=number]:focus-visible, input[type=search]:focus-visible, select:focus-visible, textarea:focus-visible, .chosen-container-multi .chosen-choices:focus-visible, .selector_element:focus-visible, .ui-timepicker-div select:focus-visible, .ui-timepicker-div input:focus-visible { border: unset !important; border-bottom: unset !important; outline-color: var(--button-background) !important; /*box-shadow: 4px 4px 24px 5px #0B79DE0D;*/ } @media (max-width: 767.98px) { body{ display:block; } .info-list{ display:none; } .info-sidebar { min-height:auto; } #registration-wrapper { padding-top: 20; min-height:auto; } .tnc{ display:none; } .info-sidebar .logo img { max-width: 80px; height: auto; } .info-sidebar .logo-container { margin-bottom: 5px; text-align: center; } .info-sidebar h1.main-title { margin-bottom: 0px; } .form-header { display: block; } .form-title { font-size: 0.8rem !important; margin: 0 0 10px; text-align: center; } .nav-pills-custom .nav-link{ border-radius: 5px; padding: 5px 10px; font-size: 0.7rem !important; font-weight: 500; margin-left: 10px; } .viewForm-body-content #section-actions{ padding: 0 0 10px; border: unset; position: relative; } .nav-pills-custom { justify-content: center; } }