.signupDiv { font-size: 14px; } .customGrid { margin-bottom: 20px; } .gridBtn.active { background: var(--customnavy) !important; color: var(--light) !important; } .gridDiv { direction: rtl } .pageTitle { color: var(--dark); font-size: 23px; width: 100%; text-align: center; padding: 0px; margin: 0px; font-weight: bold; } .TxtPlace { margin: 0; padding: 40px 0 10px 0; text-align: center; } ion-item.item.item-block.item-md.item-input, ion-item.item.item-block.item-ios.item-input { padding: 0px; margin-bottom: 10px; } ion-col.colPad.col { padding-top: 20px; } img.centerDiv { width: 140px; height: 140px; contain: strict; min-width: 20px; min-height: 20px; display: block; background: var(--light); } .gridDiv { width: 100%; height: 40px; padding: 10px 15px; font-size: 14px; :root[dir="ltr"] { padding-left: 16px; padding-right: 0; } :root[dir="rtl"] { padding-right: 16px; padding-left: 0; // margin-bottom: 5px; } button { font-family: var(--fontFamilyLightEN) !important; min-width: auto; ion-app[dir="ltr"] { float: left; border-radius: 2px 0px 0px 2px; font-family: var(--fontFamilyBoldEN) !important; color: var(--customnavy); } ion-app[dir="rtl"] { float: right; border-radius: 0px 2px 2px 0px; color: var(--darkgray); } margin: 0px; padding: 10px; border: 1px solid var(--cusgray); box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; background: var(--light); width: 50%; } button.arTxt { font-family: var(--fontFamilyIOSAR) !important; :root[dir="rtl"] { float: right; color: var(--customnavy) !important; font-weight: bold; border-radius: 2px 0px 0px 2px !important; } :root[dir="ltr"] { float: left; color: var(--darkgray) !important; font-family: var(--fontFamilyIOSAR) !important; border-radius: 0px 2px 2px 0px !important; } } } .login-input { border: none; margin-right: 5px; font-family: 'Kufi'; } .item-input { --min-height: 1.5cm !important; --border-radius: 12px; --ion-color-base: white !important; // --background: color: var(--darkgray) !important; // background: #7f8c8d !important; border-radius: 33px; --border: solid #9999992b !important; border: solid #9999992b !important; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } .button-login { --background: var(--newgreen) !important; background: var(--newgreen) !important; white-space: normal; color: var(--light); text-transform: capitalize; min-height: 1.3cm; --border-radius: 33px !important; border-radius: 33px !important; --min-height: 1.6cm !important; width: 315px; } .button-digital-id { --background: white !important; background: white !important; white-space: normal; color: white; text-transform: capitalize; min-height: 1.0cm; --border-radius: 33px !important; border-radius: 33px !important; --min-height: 1.6cm !important; width: 315px; border: 1px solid black; } .content { width: 500px; margin-left: auto; margin-right: auto; } .first-circle { background: #024D71 !important; border-radius: 50%; height: 310px; width: 310px; float: left; margin-left: -55px; margin-top: -140px; } .middle-circle { position: relative; background: #44A7A1 !important; border-radius: 50%; height: 160px; width: 190px; margin: -115px 0px 0px 179px; } .last-circle { position: inherit; background: #D5E2E8 !important; border-radius: 50%; height: 166px; width: 140px; margin: -147px 0px 0px 274px; } .logoFotor { width: 45px !important; height: 45px !important; } .welcomeText { justify-content: center; align-items: center; text-align: left; font-size: 26px; font-weight: bold; color: #f2f2f2; margin-top: 178px; margin-left: 48px; } .forgetText { background: transparent; color: var(--darkblue) !important; } @media only screen and (max-width: 980px) { .content { width: 100%; } } .circle1 { width: 15%; padding-top: 15%; margin: 0 42%; background-color: black; border-radius: 50%; display: inline-block; } .circle2 { width: 15%; padding-top: 15%; margin-left: 20%; background-color: darkred; border-radius: 50%; display: inline-block; margin-top: 20px; } .circle3 { width: 15%; padding-top: 15%; margin-left: 26%; background-color: gold; border-radius: 50%; display: inline-block; margin-top: 20px; margin-right: 15%; } .digital-id-en { color: black; position: absolute; right: 20px; width: 10%; } .digital-id-ar { color: black; position: absolute; left: 20px; width: 10%; }