.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; } .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; margin-top: 30px; background: var(--light); } .gridDiv { width: 100%; height: 40px; margin-top: 20px; // margin-bottom: 10px; 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 { :root[dir="rtl"] { float: right; color: var(--customnavy) !important; font-family: var(--fontFamilyIOSAR) !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; } .item-input{ --min-height: 1.0cm !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.0cm; --border-radius: 33px !important; border-radius: 33px !important; --min-height: 1.6cm !important; width: 315px; } .content { width: 500px; margin-left: auto; margin-right: auto; } .first-circle { background: var(--newgreen) !important; border-radius: 50%; height: 292px; width: 288px; float: left; margin-left: -55px; margin-top: -140px; } .middle-circle { position: relative; background:var(--darkblue) !important; border-radius: 50%; height: 160px; width: 170px; margin: -115px 0px 0px 179px; } .last-circle { position: inherit; background: var(--lightblue) !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%; }