@font-face {
  font-family: OpenSans;
  src: url(/kwantify_theme/static/src/fonts/OpenSans-Regular.ttf)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { 
  background: url('/kwantify_theme/static/src/img/_MG_8938 aa.jpg') no-repeat fixed right;
  background-size: 70%;
}

.card { 
  background: #108fbb;
  border: 0;
}

.card, .navbar, .pagination .page-item.active .page-link { box-shadow: none; }
.navbar-light { background: transparent !important;}
.collapse.navbar-collapse { visibility: hidden;}

.md-form label {color:  white; transform: translateX(40px) translateY(5px);}
.md-form label.reg { color: white; transform: none;}
.md-form label.reg.active { transform: translateY(-20px) scale(0.9);}

.md-form label.active { transform: translateY(-20px) translateX(40px) scale(0.9);}
.md-form input[type="text"]:not(.browser-default):focus:not([readonly]) { 
  color: white;
  border-bottom: 1px solid #fff;
  box-shadow: 0 1px 0 0 #fff;;
}
.md-form input[type="text"].otptext { color: #000;}
.md-form input[type="text"].otptext:not(.browser-default):focus:not([readonly]) { 
  color: #000;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: 0 1px 0 0 #d8d8d8;
}
.md-form input[type="password"]:not(.browser-default):focus:not([readonly]) { 
  color: white;
  border-bottom: 1px solid #fff;
  box-shadow: 0 1px 0 0 #fff;;
}
.md-form input[type="text"]:not(.browser-default):focus:not([readonly]) + label { 
  color: #fff;
}
.md-form input[type="password"]:not(.browser-default):focus:not([readonly]) + label { 
  color: #fff;
}
.md-form input { color: #fff;}
.md-form.input-group .input-group-text.md-addon { font-weight: 700;}
/*.row.align-items-center { height: calc(100vh - 252px);}*/
.col-sm-6.col-sm-offset-6.col-md-7 { max-width: 550px; }
.loginButton { padding: 0.74rem 2.14rem; font-weight: 700;}
input::placeholder { color: #fff;} 
.sign_in_section {padding-left: 2rem !important;}
.reset_password_section{ margin-top: 1rem !important; text-align: center;}
.pull-left.pl-5 { padding-left: 2rem !important;}
.pull-right.pr-5 { padding-right: 2rem !important;}
.job_apply .md-form label{transform: translateX(20px) translateY(5px);}
.job_apply .md-form label.active {transform: translateY(-20px) translateX(20px) scale(0.9);}
.cb{clear: both;}
@media (min-width: 1600px){
  .container{max-width: 85%; } 
  .row.align-items-center{ margin-top: 120px;}

} 
@media (min-width: 1280px){
  body { background-size: 60%;}
  .row.align-items-center{ margin-top: 120px;}

  .container{max-width: 85%;}
} 

@media (min-width: 1024px){

  .container{max-width: 85%;}
  .row.align-items-center{ margin-top: 120px;}
  body{overflow-y: auto;}
} 

@media (min-width: 768px){
    .container{max-width: 85%;}
    .row.align-items-center{ margin-top: 100px;}
    body{overflow-y: auto;}

}
@media (min-width: 414px) and (max-width: 736px)
{
  .row.align-items-center{ margin-top: 100px;}
  body{overflow-y: auto;}

}
@media (min-width: 411px) and (max-width: 731px)
{
  .row.align-items-center{ margin-top: 100px;}
  body{overflow-y: auto;}

}
@media (min-width: 375px) and (max-width: 812px)
{
  body { background-size: auto; overflow-y: auto;}
  .navbar-toggler-icon { display: none;}
  .copyright-text { color: #fff;}
  .copyright-text a { color: #fff;}
  .loginButton {
    font-weight: 700;
    
  }
}
@media (min-width: 360px) and (max-width: 640px)
{
  .row.align-items-center{ margin-top: 100px;}
  body{overflow-y: auto; background-size: 250%;}

  .copyright-text {color: #fff;}
  .copyright-text a { color: #fff;}
}
@media (min-width: 320px) and (max-width: 568px)
{
  .card.py-4.pl-4.pr-4{ padding-left: 0.5rem !important; padding-right: 0.5rem !important;}
  .navbar-toggler-icon{display: none;}
  .row.align-items-center{ margin-top: 80px;}
  body{overflow-y: auto; background-size: 250%;}
  .sign_in_section{ padding-left: 14px !important;}
  /* body { background-size: 250%;} */
  .copyright-text {color: #fff;}
  .copyright-text a { color: #fff;}
}

@media (max-width: 812px) and (min-width: 375px)
  {
    body{overflow-y: auto;}
    .row.align-items-center{ margin-top: 100px;}
  .copyright-text {color: #fff;}
  .copyright-text a { color: #fff;}
}