@font-face {
font-family: 'DIN Next LT Arabic';
src: url('../fonts/DINNextLTArabic-Regular-2.ttf') format('truetype');
}
:root {
--PrimaryColor: #ffffff;
--ActiveColor: #ffffff;
}
* {
margin: 0;
padding: 0;
font-family: 'DIN Next LT Arabic';
}
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #279FD1;
}
/* Use flexbox to center content and avoid scrolling */
body {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
overflow: hidden; /* Hide any overflow to prevent scrolling */
}
/* Main container to hold your content */
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
/* background-image: url('data:image/svg+xml,')
, url('data:image/svg+xml,');
background-position: right top, left bottom;
background-repeat: no-repeat;*/
}
.container-Login {
justify-content: center;
align-items: center;
background: #279FD1;
display: grid;
width: 100%;
height: 100%;
}
.parent {
width: 100%; /* Full width */
overflow: auto; /* Ensure child elements are contained */
}
.main-box {
/* width: 784px;
height: 600px;*/
background: white;
box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.10);
border-radius: 15px;
/*position: relative;
z-index: 5;*/
/*Add New*/
width: auto;
max-width: 740px;
height: auto;
display: flex;
flex-direction: column;
/*margin-top: 31px;*/
z-index: 1;
}
.main-box-2 {
/* width: 784px;
height: 480px;*/
background: white;
box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.10);
border-radius: 15px;
/* position: relative;
z-index: 5;*/
/*Add New*/
width: auto;
height: auto;
display: flex;
flex-direction: column;
/* margin-top: 31px;*/
/*min-height: 510px;*/
min-width: 740px;
z-index:1;
}
.header-main-box {
/* width: 783px;
height: 80px;*/
background: white;
box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.10);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
/*Add New*/
width: auto;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
}
.header-main-box-2 {
/* width: 783px;
height: 64.5px;*/
background: white;
box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.10);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
/*Add New*/
width: auto;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
}
.close-icon-modal {
width: 35px;
height: 35px;
/* padding: 10px;*/
background: white;
box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
border-radius: 100px;
border: 2px var(--PrimaryColor) solid;
justify-content: center;
align-items: center;
gap: 10px;
display: inline-flex;
/* float: left;
margin-top: 14px;
margin-left: 21px;
margin-right: 15px;*/
}
.modal-header-button-icon {
fill: var(--PrimaryColor);
}
.close-icon-modal .modal-header-button-icon {
fill: var(--PrimaryColor);
}
.close-icon-modal:hover .modal-header-button-icon {
fill: var(--PrimaryColor);
}
.change-language-container {
/* margin: 23px 16px 0px;*/
padding-top: 3.20px;
padding-bottom: 3.20px;
padding-left: 7.98px;
padding-right: 27px;
background: white;
box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
border-radius: 5px;
border: 1px var(--PrimaryColor) solid;
justify-content: flex-start;
align-items: flex-start;
gap: 7.49px;
display: inline-flex;
direction: ltr;
/*float: left;*/
}
.change-language-btn {
display: contents;
}
.img-div {
width: 25.53px;
height: 25.60px;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.text-change-language-div {
color: #3B3B3C;
font-size: 10px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
margin-top: 2px;
}
.header-Login-Logo-Osool {
/* width: 105px;
display: inline;
justify-content: flex-end;
justify-items: center;
align-items: center;
margin-right: 20px;
float: right;
margin: 16px;*/
}
.header-Login-Logo-Osool-2 {
/* width: 105px;
display: inline;
justify-content: flex-end;
justify-items: center;
align-items: center;
margin-right: 20px;
float: right;
margin: 10px;
margin-right: 28px;*/
}
.header-button-ResetPassword {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.Login-content-box {
display: flex;
flex-direction: row-reverse; /* after add direction ltr*/
width: 100%;
padding: 30px 20px 40px 20px;
justify-content: center;
align-items: center;
}
.Login-Label-Div {
text-align: center;
color: var(--PrimaryColor);
font-size: 30px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
margin-top: 40px;
/* margin-left: 85px;*/
}
.Login-Label-Div-2 {
text-align: center;
color: var(--PrimaryColor);
font-size: 30px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
margin-top: 40px;
/* margin-left: 35px;*/
}
.Login-Label-Username {
/*text-align: right;*/
color: #3B3B3C;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
word-wrap: break-word;
margin-inline: 5px;
margin-top: 35px;
margin-bottom: 8px;
}
.Login-Label-Username-2 {
/* text-align: right;*/
color: #3B3B3C;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
word-wrap: break-word;
margin-inline: 5px;
margin-top: 43px;
margin-bottom: 8px;
}
.Login-Label-Email {
/*text-align: right;*/
color: #3B3B3C;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
word-wrap: break-word;
margin-inline: 5px;
margin-bottom: 8px;
margin-top: 20px;
}
.Login-Input-Div {
display: flex;
/*width: 330px;*/
width: 100%;
height: 40px;
padding: 12px 15px 15px 10px;
background: white;
box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
border-radius: 5px;
border: 2px #F5F6F7 solid;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: inline-flex;
/* margin-inline: 23px;
float: right;
margin-top: 18px;*/
font-size: 13px;
font-weight: 400;
text-indent: 24px;
background-image: url('../img/Icon_Person_LoginPage.svg') !important;
background-position: right 10px center !important;
background-repeat: no-repeat !important;
}
.login_svg {
fill: var(--PrimaryColor) !important;
}
.Image-Person-Login {
position: absolute;
/* float: right;*/
/* margin-inline: 35px;*/
margin-top: 26px;
right: 34px;
}
.tooltip, .custom-tooltip {
pointer-events: none !important;
}
.tooltip-inner {
background-color: #000; /* boxShadow */
border-radius: 5px !important;
color: #ffffff; /* titleColor*/
height: auto;
/* margin-top: 16px;
margin-bottom: 16px;*/
padding-inline: 10px;
font-family: 'DIN Next LT Arabic';
}
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: var(--BoxShadowColor) !important;
bottom: -5px !important;
border: 10px solid transparent;
margin: -2px -5px !important;
}
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: var(--BoxShadowColor) !important;
width: 0;
height: 0;
border: 10px solid transparent;
margin: -1px -4px !important;
}
/*.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
border-top-color: var(--BoxShadowColor) !important;
bottom: -1px !important;
border: 10px solid transparent;
margin: -2px -115px !important;
rotate: 270deg;
}*/
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
border-top-color: var(--BoxShadowColor) !important;
bottom: -1px !important;
border: 10px solid transparent;
margin: 7px -168px !important;
rotate: 90deg;
}
.Image-Person-ResetPassword {
position: absolute;
margin-top: 26px;
right: 45px
}
.Login-Input-Password-Div {
display: flex;
/*width: 330px;*/
width: 100%;
height: 40px;
padding: 12px 15px 15px 10px;
background: white;
box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
border-radius: 5px;
border: 2px #F5F6F7 solid;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: inline-flex;
/* margin-inline: 23px;
float: right;
margin-top: 18px;*/
font-size: 13px;
font-weight: 400;
text-indent: 24px;
background-image: url('../img/Icon_Key_LoginPage.svg') !important;
background-position: right 10px center !important;
background-repeat: no-repeat !important;
}
.Login-Input-Div:focus, .Login-Input-Password-Div:focus {
border-color: var(--PrimaryColor);
outline: none;
}
.Login-Input-Email-Div {
display: flex;
/*width: 330px;*/
width: 100%;
height: 40px;
padding: 12px 15px 15px 10px;
background: white;
box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.03);
border-radius: 5px;
border: 2px #F5F6F7 solid;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: inline-flex;
/* margin-inline: 23px;
float: right;
margin-top: 18px;*/
font-size: 11px;
font-weight: 400;
text-indent: 24px;
background-image: url('../Icon/Email-Icon.svg') !important;
background-position: right 10px center !important;
background-repeat: no-repeat !important;
}
.Login-Input-Div:focus, .Login-Input-Email-Div:focus {
border-color: var(--PrimaryColor);
outline: none;
}
.Image-Key-Login {
position: relative;
margin-inline: -75px;
margin-top: 69px;
float: right;
}
/* Reset Password Page */
.Image-Mail-Login {
position: relative;
margin-inline: -100px;
margin-top: 68px;
float: right;
}
.btns-div .btn-info {
background-color: #279FD1;
color: white;
padding: 10px;
width: 90px;
transition: 0.3s;
box-shadow: 0px 0px !important;
}
.button-modal {
width: 100px;
height: 40px;
background: var(--PrimaryColor);
border-radius: 5px;
border: 1px var(--PrimaryColor) solid;
justify-content: center;
align-items: center;
gap: 10px;
display: inline-flex;
margin-right: 9px;
padding: 0px 10px 5px;
}
.button-modal:first-child {
margin-right: 0px;
}
a.button-modal {
text-decoration: none;
}
.button-modal:focus-visible {
outline: none;
/* border: 3px var(--ActiveColor) solid;*/
/* background:;*/
}
.button-modal .text-button {
text-align: center;
color: white;
font-size: 16px;
font-family: DIN Next LT Arabic;
font-weight: 500;
line-height: 20px;
word-wrap: break-word;
}
/* End Reset Password Page */
.Login-Label-Password {
/* text-align: right;*/
color: #3B3B3C;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
word-wrap: break-word;
margin-inline: 5px;
margin-top: 20px;
margin-bottom: 8px;
display: inline-block;
}
.Login-Image {
/*margin: 32px;*/
display: inline-block;
margin-right: 30px;
width: calc(50% - 45px);
padding-top:30px;
}
.ResetPassword-Image {
/* display: inline-block;
margin-right: 0px;
margin-top: 33px;
margin-left: 42px;*/
display: inline-block;
margin-right: 30px;
width: calc(50% - 45px);
}
.LoginPageLabel {
margin-bottom: 25px;
color: #279FD1;
text-align: center;
font-family: DIN Next LT Arabic;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}
.Login-btn {
display: inline-block;
float: right;
/*margin-inline: 24px;*/
text-align: center;
margin-top: 30px;
width: 100%;
height: 37px;
padding-left: 10px;
padding-right: 10px;
/*padding-top: 6px;*/
padding-bottom: 6px;
background: #279FD1;
border-radius: 5px;
border: 1px #279FD1 solid;
}
.Login-btn-text {
color: white;
font-size: 16px;
font-family: DIN Next LT Arabic;
font-weight: 500;
line-height: 20px;
word-wrap: break-word
}
.Password-validation-span {
display: table;
margin-inline: 15px;
font-family: 'DIN Next LT Arabic';
margin-left: 54px;
font-size: 13px;
float: right;
}
.Email-validation-span {
display: table;
margin-inline: 15px;
font-family: 'DIN Next LT Arabic';
margin-left: 54px;
font-size: 13px;
float: right;
margin-right: 24px
}
.summary-validation {
display: flex;
float: right;
text-align: right;
margin-top:15px;
font-family: 'DIN Next LT Arabic';
font-size: 13px;
/* margin-inline: 83px;
margin-right: 25px;
margin-left: 50px;*/
}
.right-side {
width: calc(50% - 0px);
display: flex;
margin-left: 0px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.right-side-2 {
width: calc(50% - 0px);
display: flex;
margin-left: 0px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.RememberMe-Text {
float: right;
font-size: 14px;
}
.RememberMe-Switch {
display: inline-block;
float: right;
/* margin-top: 12px;
margin-right: 26px;*/
margin-left: 8px;
}
.Login-Forget-Password {
display: inline-block;
float: left;
margin-left: -20px;
/* margin-top: 10px;
margin-inline: 48px;*/
}
.Forget-Password-Lebel {
color: #3B3B3C;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 20px;
word-wrap: break-word
}
.Reset-Password-Link, .Reset-Password-Link:visited {
color: var(--PrimaryColor);
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
text-decoration: underline;
line-height: 20px;
word-wrap: break-word
}
.Reset-Password-Link:hover, .Reset-Password-Link:active {
color: var(--ActiveColor);
}
.switch-login:focus {
box-shadow: 0 0 0 .25rem rgba(13,95,124,.25);
}
.Login-Input-Div::placeholder {
font-size: 10px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
text-indent: 24px !important;
}
.Login-Input-Password-Div::placeholder {
font-size: 10px;
font-family: DIN Next LT Arabic;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
text-indent: 22px !important;
}
.footer-div {
color: white;
font-size: 14px;
font-family: DIN Next LT Arabic;
font-weight: 400;
word-wrap: break-word;
position: fixed;
bottom: 30px;
/*bottom: 7px;
left: 50%;
transform: translateX(-50%);*/
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
width: 64px;
height: 64px;
position: absolute;
top: 40%;
left: 50%;
}
.loading div {
width: 32px;
height: 32px;
position: absolute;
}
.l1 div, .l2 div, .l3 div, .l4 div {
width: 100%;
height: 100%;
background-color: #fff;
}
@keyframes l1-rise {
0% {
transform: translate(0px,0px);
}
30% {
transform: translate(-8px, -8px);
}
70% {
transform: translate(-8px, -8px);
}
100% {
transform: translate(0px, 0px);
}
}
@keyframes l2-rise {
0% {
transform: translate(0,32px);
}
30% {
transform: translate(-8px, 40px);
}
70% {
transform: translate(-8px, 40px);
}
100% {
transform: translate(0,32px);
}
}
@keyframes l3-rise {
0% {
transform: translate(32px, 0px);
}
30% {
transform: translate(40px, -8px);
}
70% {
transform: translate(40px, -8px);
}
100% {
transform: translate(32px, 0px);
}
}
@keyframes l4-rise {
0% {
transform: translate(0px,0px);
}
30% {
transform: translate(-8px, -8px);
}
70% {
transform: translate(-8px, -8px);
}
100% {
transform: translate(0px, 0px);
}
}
@keyframes color {
0% {
background-color: #ffffff;
}
50% {
background-color: #ffffff;
}
100% {
background-color: #ffffff;
}
}
.l1 {
animation: l1-rise 1s ease 0s infinite;
margin-right: 75px;
margin-top: 2px;
}
.l2 {
animation: l2-rise 1s ease 0s infinite;
margin-top: 45px;
margin-right: 80px;
}
.l3 {
animation: l3-rise 1s ease 0s infinite;
margin-right: 30px;
}
.l4 {
animation: l4-rise 1s ease 0s infinite;
margin: 30px;
width: 50px !important;
height: 50px !important;
}
.loading-container {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: var(--PrimaryColor);
}
.header-Language-Button-icon {
width: 18px;
height: 18px;
}
.header-Language-Button-icon-sub {
fill: var(--PrimaryColor);
}
.change-language-container:hover .header-Language-Button-icon-sub {
fill: var(--PrimaryColor);
}
.change-language-container:hover {
border-color: var(--PrimaryColor);
}
.change-language-container:hover #title {
color: var(--PrimaryColor);
}
.close-icon-modal:hover {
border-color: var(--PrimaryColor);
}
.input_required {
border: 1px solid rgb(207, 0, 0) !important;
background: rgb(255, 225, 225) none repeat scroll 0% 0%;
outline: none !important;
}
.input_required:focus {
outline: none !important;
border: 1px solid rgb(207, 0, 0) !important;
}
/*animation*/
/*.main-box.animate {
z-index: 0;
transform: scale(1);*/
/* you can change the 0.9s to change animation time */
/*animation: blowUpModal 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
opacity: 0;
visibility: hidden;
}
.main-box-2.animate {
z-index: 0;
transform: scale(1);*/
/* you can change the 0.9s to change animation time */
/*animation: blowUpModal 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
opacity: 0;
visibility: hidden;
}
@keyframes blowUpModal {
0% {
transform: scale(0);
opacity: 1;
visibility: visible;
}
100% {
transform: scale(1);
opacity: 1;
visibility: visible;
}
}*/
form {
width: 100%;
height: 100%;
}
.box-header {
width: 475px;
height: 245px;
opacity: 0.20;
position: absolute;
top: 0px;
right: 0;
z-index:0;
}
.box-footer {
width: 475px;
height: 0%;
transform: rotate(180deg);
transform-origin: 0 0;
opacity: 0.20;
left: 476px;
bottom: 0%;
position: absolute;
z-index: 0;
}
.label-validation {
min-height: 35px;
justify-content: center;
align-items: center;
display: flex;
}
.svg-PrimaryColor {
fill: var(--PrimaryColor);
}
.svg-PrimaryColor-stroke {
fill: white;
stroke: var(--PrimaryColor);
}
.svg-SecondaryColor {
fill: var(--ActiveColor);
}
.svg-ColorLight {
fill: color-mix(in srgb, var(--PrimaryColor), white 70%);
}
.svg-ColorLight50 {
fill: color-mix(in srgb, var(--PrimaryColor), white 50%);
}
.svg-ColorDark {
fill: color-mix(in srgb, var(--PrimaryColor), black 25%);
}
.svg-stop-colorprimary {
stop-color: var(--PrimaryColor);
}
.svg-stop-colorlight {
stop-color: color-mix(in srgb, var(--PrimaryColor), white 70%);
}
.ssoErrorMessage {
display: none;
color: red;
margin-top: 10px;
font-family: DIN Next LT Arabic;
text-align:center;
width:100% !important;
}