/* Login, Register Page Classes */
#page{
    /*height: 100%;*/
}

html{
  height: 100%;

}
body{
  height: auto !important;
  overflow: hidden;
  overflow-y: auto;
}
section#footer{
  height: 53px;
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 769px) {
  section.pagewrap{
    margin-bottom: 20px;
  }
  section#footer{
    position: absolute;
    bottom: 0px;
    width: 100%;

  }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 767px) {
  section.pagewrap{
    min-height: 750px;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 768px){
  section.pagewrap{
    min-height: 780px;
  }
}


#page.pg_intro{ background-repeat:repeat}
#page.pg_intro #footer{ min-height:inherit}

#header .hdrlogo{ text-align:center; padding:10px 0px 25px 0; margin:0 auto}
.pagewrap .wrapbox{ 
margin:0 auto 50px; 
max-width:500px; 
background:#ffffff; 
color:#333333;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;

-moz-box-shadow: -1px -1px #3c5a96;
-webkit-box-shadow: -1px -1px #3c5a96;
box-shadow: -1px -1px #ffffff;
border-style: solid;
border-width: 1px;
border-color: #eee;
}

.pagewrap .wrapbox a:hover{ color:#a0d6c6;
-webkit-transition: color 0.4s ease 0s;
transition: color 0.4s ease 0s;
text-decoration: none;}

.pagewrap .wrapbox .row{ padding:0; margin:0}
.pagewrap .wrapbox.login_wrap{ padding:30px 10px 10px}
.pagewrap .wrapbox.register_wrap{ padding:30px 10px 10px}

.pagewrap .wrapbox .welcome{ font:normal 18px/140% Arial, Helvetica, sans-serif; text-align:center; margin:0 auto 25px}
.pagewrap .wrapbox .notification{ font:normal 12px/140% Arial, Helvetica, sans-serif; text-align:center; margin:10px auto 25px; color:#888888}

.wrapbox .row.outlogin{ margin:0 auto; text-align:center;}
.outlogin .grdsprate{ background:url(../image/grd_separate.gif) center center no-repeat; padding:8px 0; margin:30px auto 0;
position:relative}
.outlogin .grdsprate > i{ font-size:15px; line-height:100%; position:absolute; left:0; right:0; top:-5px; bottom:0; margin:auto; font-style:normal;
background:#ffffff; padding:5px 0; max-width:10%;}

.outlogin .btn{ padding:15px 15px 0; margin:0 5px; height:48px; width:100%; max-width:210px; display:inline-block; color:#fcfcfc;
font:bold 14px/100% Arial, Helvetica, sans-serif; vertical-align:middle;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;}
.outlogin .btn:hover{ color:#ffffff !important}
.outlogin .btn .fa{ font-size:20px; vertical-align:middle; display:inline-block; margin:-2px 8px 0 0;}

.outlogin .btn.btn_fcbook{ border:1px solid #2e4982;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#687fad+0,4a6396+40,2e4982+100 */
background: rgb(104,127,173); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(104,127,173,1) 0%, rgba(74,99,150,1) 40%, rgba(46,73,130,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(104,127,173,1) 0%,rgba(74,99,150,1) 40%,rgba(46,73,130,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(104,127,173,1) 0%,rgba(74,99,150,1) 40%,rgba(46,73,130,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#687fad', endColorstr='#2e4982',GradientType=0 ); /* IE6-9 */

-moz-box-shadow: inset -1px -1px #3c5a96;
-webkit-box-shadow: inset -1px -1px #3c5a96;
box-shadow: inset -1px -1px #3c5a96;
}

.outlogin .btn.btn_google{ border:1px solid #f50000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7c67+0,f64323+40,f52002+100 */
background: rgb(255,124,103); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,124,103,1) 0%, rgba(246,67,35,1) 40%, rgba(245,32,2,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,124,103,1) 0%,rgba(246,67,35,1) 40%,rgba(245,32,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,124,103,1) 0%,rgba(246,67,35,1) 40%,rgba(245,32,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7c67', endColorstr='#f52002',GradientType=0 ); /* IE6-9 */

-moz-box-shadow: inset -1px -1px #fe725e;
-webkit-box-shadow: inset -1px -1px #fe725e;
box-shadow: inset -1px -1px #fe725e;
}

.wrapbox .row.formbbox{ 
  padding:25px 15px 0;
  margin:0 auto;
  max-width:80%;
}

.formbbox a{ color:#2e4982}

.formbbox .checkbox{ margin-bottom:40px; padding:0 0 0 20px;}
.formbbox .radio label, .formbbox .checkbox label{ vertical-align:middle}
.formbbox .radio input[type="radio"], .formbbox .checkbox input[type="checkbox"]{ float:left; margin:4px 0 0 -20px}

.formbbox label{ font-weight:normal}
.formbbox input.form-control{ height:40px; width:100%; border:1px solid #cccccc;
-webkit-border-radius:3px;
padding-left: 3px;
padding-right: 3px;
-moz-border-radius:3px;
border-radius:3px;}

.formbbox .form-group {
  margin-bottom: 15px;
}

.formbbox .form-control {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.formbbox select.form-control {
  display: inline-block;
  width: auto;
  margin-right: 0;
}

.input-group {
  align-items: center;
  justify-content: space-between;
}

.input-group select.form-control {
  width: 25%;
}

.input-group input.form-control {
  flex-grow: 1;
}

.input-group button {
  padding: 0 15px;
}

#countryCode {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#inputUserName {
  width: 100%;
  border-radius: 0 3px 3px 0;
  border: 1px solid #ccc;
}

#selectedCountryCode {
  color: var(--brand-primary, #FF3F98);
  width: 20%;
  height: 40px;
  border-radius: 3px 0 0 3px;
  border-right: none;
  text-align: center;
  display: none;
  direction: ltr !important;
  border-left: 1px solid #ccc;
}

.country-list-container {
  position: absolute;
  width: 100%;
  z-index: 999;
}

.country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  display: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 100%;
  left: 0;
}

.country-item {
  padding: 10px;
  cursor: pointer;
}

.country-item:hover {
  background-color: #f0f0f0;
}


.formbbox .btn{ background:#f4f1ea; border-color:#dcd7cb; font-weight:bold; font-size:15px; margin:0 10px 0 0}
.center {
  text-align: center;
}
.verify-label-head {
  margin-bottom: 30px;
}
.verify-label-head .bold {
  margin-bottom: 4px;
}
.verify-label-head .bold,
.resend-btn-box .bold {
  font-weight: bold!important;
}
#verification-code-input {
  display: flex;
  gap: 15px;
  justify-content: center;
  direction: ltr;
}
.digit-input {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  text-align: center;
}
.resend-btn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
#resend-code-btn {
  border: 0;
    background: transparent;
    color: #3866df;
    font-weight: bold;
    cursor: pointer;
    display: none;
    font-family: 'Cairo', sans-serif;
}
.verification-container {
  padding-bottom: 15px;
}
.verify-label-head p {
  margin: 0;
}
.bold {
  font-weight: bold;
}
.login-divider{    height: 44px; text-align:center;
    margin-bottom: -18px;
    background: -webkit-linear-gradient(to bottom,rgba(0,0,0,.11),rgba(0,0,0,.03) 2px,transparent);
    background: linear-gradient(to bottom,rgba(0,0,0,.14),rgba(0,0,0,.03) 3px,transparent);
    z-index: 0;
    zoom: 1;}


/* #Media Queries
================================================== */
/* Chrome Hack */
@media screen and (-webkit-min-device-pixel-ratio:0){}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px){
	#header .hdrlogo{ padding:15px 0}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px){}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px){
	.wrapbox .row.formbbox{ max-width:88%}
	.outlogin .btn{ display:block; margin:0 auto 15px; text-align:center}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px){}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px){}

/* Screen size between 480 to standard 960 (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 959px){}
/* /Login, Register Page Classes */


.apple-container {
  display: flex;
  justify-content: center;
}

.signin-button {
  align-self: center;
  max-width: 225px;
  min-width: 225px;
  height: 40px;
}

.loginBtn {
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: start;
  line-height: 34px;
  border-radius: 0.2em;
  font-size: 14px;
  color: #FFF;
  max-width: 225px;
  min-width: 225px;
}
.loginBtn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  max-width: 34px;
  min-width: 34px;
  height: 100%;
}

.loginBtn--facebook {
  background-color: #4C69BA;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('/image/data/icons/icon_facebook.png') 6px 6px no-repeat;
}

.loginBtn--google {
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('/image/data/icons/icon_google.png') 6px 6px no-repeat;
}

.form-group {
  position: relative;
}
.form-group > label {
  margin: 5px 0;
  display: block;
}
.form-group > input {
  box-sizing: border-box;
}
#showPassword {
  position:absolute; 
  top:36px; 
  cursor:pointer; 
  font-size:15px
}
[dir="rtl"] #showPassword {
  top: 42px;
}
.show-en {
  right:11px; 
}
.show-ar {
  left:11px; 
}
#register-form > .form-group > input {
  padding: 0 10px;
}
.error {
  margin: 7px 0 10px;
}
.mo {
  display: none;
}
@media (max-width: 767px) {
  .wrapbox .row.formbbox {
    max-width: 100%;
  }
  .mo {
    display: block;
  }
}