.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%;
 }