/* Light */
@font-face { font-family: "JF Flat Light"; src: url("font/JF-Flat-light.eot"); src: url("font/JF-Flat-light.eot?#iefix") format("embedded-opentype"), url("font/JF-Flat-light.svg#JF Flat Light") format("svg"), url("font/JF-Flat-light.woff") format("woff"), url("font/JF-Flat-light.ttf") format("truetype"); font-weight: 300; font-style: normal; }

/* Regular */
@font-face { font-family: "JF Flat Regular"; src: url("font/JF-Flat-regular.eot"); src: url("font/JF-Flat-regular.eot?#iefix") format("embedded-opentype"), url("font/JF-Flat-regular.svg#JF Flat Regular") format("svg"), url("font/JF-Flat-regular.woff") format("woff"), url("font/JF-Flat-regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }

/* Medium */
@font-face { font-family: "JF Flat Medium"; src: url("font/JF-Flat-medium.eot"); src: url("font/JF-Flat-medium.eot?#iefix") format("embedded-opentype"), url("font/JF-Flat-medium.svg#JF Flat Medium") format("svg"), url("font/JF-Flat-medium.woff") format("woff"), url("font/JF-Flat-medium.ttf") format("truetype"); font-weight: 600; font-style: normal; }

.spinner { display: none; margin: 0 auto; width: 100%; height: 100%; text-align: center; font-size: 10px; position: absolute; top: 50%; right: 50%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); background: #ff1e43; }

.spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }

.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); }
  20% { -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4); }
  20% { transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

body { background: #f1f1f1; font-family: "JF Flat Light"; padding: 0; margin: 0; width: 100vw; height: 100vh; background-image: url("../img/assets/bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; }

.login-container { width: 100vw; height: 100vh; position: relative; }

.login-container .alert { display: none; }

.login-container .login-box { text-align: center; min-height: 512px; width: 410px; color: white; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); box-sizing: border-box; padding: 25px; position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -webkit-transition: all 0.3s; transition: all 0.3s; background-repeat: no-repeat; background-color: #448ccb; background-size: 100% 100%; }

.login-container .login-box:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.login-container .header { margin-bottom: 30px; }

.login-container .header h3 { font-size: 30px; font-weight: bold; position: relative; background: transparent; }

.login-container .header h3:after { content: ''; position: absolute; bottom: -25px; right: 50%; -webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%); width: 30%; height: 6px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; background-color: rgba(104, 149, 199, 0.48); }

.login-container .inputs { margin-top: 60px; }

.login-container .form-group { position: relative; overflow: hidden; }

.login-container .form-group img { position: absolute; top: 13px; right: 6%; }

.login-container .line { content: ''; width: 100%; height: 2px; position: absolute; top: 97%; right: 0; background: rgba(237, 237, 237, 0.8); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }

.login-container .login-input {
    direction: rtl;
    border-width: medium medium 1px;
    border-style: none none solid;
    border-color: -moz-use-text-color -moz-use-text-color rgba(237, 237, 237, 0.2);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    height: 46px;
    width: 100%;
    background: transparent none repeat scroll 0% 0%;
    padding: 5px 64px 5px 10px;
    position: relative;
    text-align: right;
}

.login-container .login-input:focus { outline: none !important; }

.login-container .login-input:focus ~ .line { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.8s ease; transition: all 0.8s ease; }

.login-container .login-input:focus ~ img { opacity: .5; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }

.login-container .login-btn { position: absolute; right: 0; bottom: 0; width: 100%; overflow: hidden; }

.login-container .login-btn a { line-height: 50px; font-size: 18px; display: inline-block; width: 100%; height: 50px; background: #ff1e43; color: white; padding: 0; outline: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

.login-container .login-btn a:hover, .login-container .login-btn a:focus { background: #aa011d; text-decoration: none; }

.login-container .forgot-form { cursor: pointer; color: rgba(255, 255, 255, 0.8); }

.login-container .forgot-form:hover { color: rgba(255, 255, 255, 0.6); }

.login-container .login-check { margin-top: 20px; }

.login-container .login-check label { margin-right: 15px; color: #f0f0f0; }

.login-container .login-check input[type=checkbox] { position: relative; margin-right: 15px; -webkit-appearance: none; width: 30px; height: 5px; background: rgba(128, 128, 128, 0.7); -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 5px; background-repeat: no-repeat; background-position: center center; }

.login-container .login-check input[type=checkbox]:after { content: ''; position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; border-radius: 20px; background: gray; -webkit-transition: all 0.3s; transition: all 0.3s; box-shadow: 0 1px 3px rgba(0, 0, 2, 0.12), 0 1px 2px rgba(0, 0, 2, 0.24); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.login-container .login-check input[type=checkbox]:hover { opacity: .9; }

.login-container .login-check input[type=checkbox]:checked { background: #50e395; }

.login-container .login-check input[type=checkbox]:checked:after { right: 15px; background: #1cb162; }

.login-container .login-check input[type=checkbox]:checked, .login-container .login-check input[type=checkbox]:focus { outline: none; }

.overlay { position: fixed; top: 0; bottom: 0; right: 0; left: 0; opacity: 0; background-color: rgba(185, 227, 255, 0.9); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; visibility: hidden; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -webkit-align-items-align-items: center; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.overlay .fpassword { height: 254px; max-width: 536px; width: 100%; background-color: #3369bb; box-shadow: 0 13px 17px 0 rgba(0, 0, 0, 0.45); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.overlay .fpassword .close-modal { position: absolute; top: 5px; right: 5px; width: 36px; height: 36px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 18px; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

.overlay .fpassword .close-modal:hover { color: rgba(255, 255, 255, 0.6); }

.overlay .fpassword p { font-size: 24px; color: #fff; position: absolute; top: 30px; right: 0; left: 0; text-align: center; }

.overlay .fpassword a { background-color: #01AA59; text-decoration: none; font-size: 18px; color: #fff; padding: 5px 15px; text-align: center; position: absolute; bottom: 0; right: 0; left: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.overlay .fpassword a:hover { background-color: rgba(1, 170, 89, 0.8); }

.overlay .fpassword a:focus { outline: none; }

.overlay .fpassword input[type=email] { background: transparent; width: 100%; border: none; border-bottom: 2px solid rgba(208, 208, 208, 0.42); position: relative; text-align: center; color: white; padding-bottom: 5px; }

.overlay .fpassword input[type=email]:focus { outline: none; }

.overlay .fpassword input[type=email]:focus + .line { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); }

.overlay .fpassword div { position: relative; width: 300px; }

.overlay .fpassword div .line { position: absolute; bottom: 0; background-color: rgba(236, 236, 236, 0.73); height: 2px; width: 100%; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.is-open { visibility: visible; opacity: 1; }

@media screen and (max-width: 410px) { body { height: 100vh; }
  .login-container { padding: 0; height: 100%; }
  .login-container .login-box { position: initial; overflow: hidden; width: 100%; padding: 15px; background-size: cover; min-height: 100%; height: 100vh; margin: 0; -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%);} }

.btnRemember { line-height: 50px; font-size: 18px; display: inline-block; width: 100%; height: 50px; background: #ff1e43; color: white; padding: 0; outline: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

.btnRemember:hover, .btnRemember:focus { background: #aa011d; text-decoration: none; }


/*	Added button Lang	*/
#lang  * {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

html, body {
  -webkit-font-smoothing: antialiased;
}

#lang .toggle, #lang .toggler {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}

#lang .toggler {
  color: #bfbfbf;
  transition: .2s;
  cursor:pointer;
}

#lang .toggler--is-active {
  color: #fff;
}

#lang .b {
  display: block;
}

#lang .toggle {
  width: 30px;
  height: 20px;
  border-radius: 100px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
}

#lang .check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  opacity: 0;
  z-index: 6;
}
#arabic{left:0;}
#english{left:auto;right:0;}

  #english:checked ~ .switch {
    right: 2px;
    left: 37.5%;
    transition: .25s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: left, right;
    transition-delay: .08s, 0s;
  }

#lang .switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 37.5%;
  background-color: #f7134e;
  border-radius: 36px;
  z-index: 1;
  transition: .25s cubic-bezier(0.785, 0.135, 0.150, 0.860);
  transition-property: left, right;
  transition-delay: 0s, .08s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#lang {
  position: relative;
  width:200px;
  margin:0 auto;
  /* transform: translate3d(-50%, -50%, 0); */
}