/* login.css
* Site Build for ImpactBenefit
* Dec 2020
*/

*,::before,::after {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
}
body {
  /* background-size: contain; */
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  background-color: #0083BB;
  background-image: url("/assets/images/loginBgTile.jpg?v=08231804");
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height:100VH;
  justify-content: center;
}
body .hide {
  display:none !important;
}
#blue-box {
  /* background-color:#0298D0; */
  height:35VW;
  min-height: 375px;
  width:100%;
}
.form_wrapper {
  /* background-color: rgba(255, 255, 255, 0.75); */
  /* width: 360px; */
  margin: auto;
  height:100%;
  display:flex;
  /* padding-top: max(0px, calc((100vh - 285px) / 2)); */
  /* min-height: 100vh; */
  color:white;
}
.login_form,
.login_error {
  width: 100%;
  margin: auto;
  text-align: center;
}
.login_error {
  border: 2px solid red;
  background-color: pink;
  padding: 1em 0.5em;
  max-width: 360px;
  color:black;
}
.login-heading {
  font-family: 'Berlin Sans FB Bold';
  font-size:2.5em;
}
input {
  width: 12em;
  font-size: 14pt;
  padding: 0.25em;
  margin: 1em auto;
  line-height:2;
}
input[type="submit"] {
  cursor: pointer;
  border: 1px solid black;
  color:black;
  background-color: white;
  /* border-radius: 10px; */
  padding:0 1em;
  margin:0.5em auto;
  width:auto;
}
input[type="submit"]:disabled {
  cursor:not-allowed;
}
input.bg-aqua {
  background-color: #BFF4F8;
}
.input-row {
  margin: 0.5em auto;
  position: relative;
  width:12em;
  color:black;
}
.input-row label {
  /* display: block;
  font-size:0.8em;
  margin-bottom:0.25em; */
  z-index:2;
  position: absolute;
  width:100%;
  top:0.35em;
  left:0;
  font-size:150%;
  /* color:rgba(0,0,0,0.5); */
  color:black;
  transition: all 0.2s ease-in-out;
}
input.has-value + label,
input:focus + label {
  font-size:90%;
  top:-1.1em;
  color:white;
}
.input-row input {
  margin:0;
  border-radius: 8px;
  border:1px solid black;
  padding:0.25em 0.75em;
}
.input-row,
.input-row input {
  font-size:16pt;
}
.not .input-row input::placeholder {
  color:transparent;
}
.input-row input:focus {
  /* border:1px solid black; */
  outline:0px;
}

.mt-0 {
  margin-top: 0px;
}
.mb-0 {
  margin-bottom: 0px;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.bold {
  font-weight: bold;
}
.support-link {
  font-size:0.75em;
  margin-top:2em;
}
.support-link a:link,
.support-link a:visited,
.support-link a:hover,
.support-link a:active {
  color:white;
  text-decoration: none;
}
@media (max-width: 768px) {
  .not body {
    background-size: cover;
  }
  .form_wrapper {
    width: 100%;
  }
}

/* script source: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7 */
@keyframes onAutoFillStart {  from {/**/}  to {/**/}}
@keyframes onAutoFillCancel {  from {/**/}  to {/**/}}

input:-webkit-autofill {
    /* Expose a hook for JavaScript when autofill is shown
    /* JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillStart;
    
    /* Make the background color become yellow really slowly */
    transition: background-color 50000s ease-in-out 0s;
}

input:not(:-webkit-autofill) {
    /* Expose a hook for JS onAutoFillCancel
    /* JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillCancel;
}