/* login.css
* Site Build for NetPass Support Site
* Jun 2025
*/

*,::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: white;
  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;
}
.pe-none {
  pointer-events: none;
}
.login-logo {
    display:block;
    max-width: min(315px,80%);
    margin:20px auto;
}
.form_wrapper {
  /* background-color: rgba(255, 255, 255, 0.75); */
  /* width: 360px; */
  margin: auto;
  /* height:35VW; /* explain basis for this factor */
  /* min-height: 375px; */
  width:100%;
  display:flex;
  flex-direction:column;
  /* padding-top: max(0px, calc((100vh - 285px) / 2)); */
  /* min-height: 100vh; */
  /* color:white; */
}
.portal-id {
  color:#074873;
  padding-bottom:25px;
  font-size:30px;
}
.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_error:not(.show),
.login-note:not(.show) {
  display:none;
}
.login-note {
  border:2px solid blue;
  background-color:white;
  position:absolute;
  left:50%;
  transform:translate(-50%,-100%);
  padding:1em 0.5em;
  width:auto;
  color:black;
  font-size:0.9rem;
  user-select:none;
}
@media only screen and (max-width:425px) {
  .login-note {
    width:100%;
  }
}
.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.bg-white {
  background-color: white;
}
.input-row {
  margin: 0.5em auto;
  position: relative;
  width:360px;
  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:2px solid #3A7A95;
  padding:0.25em 0.75em;
  line-height: 1.5;
}
.input-row,
.input-row input,
.input-row select {
  font-size:16pt;
}
.input-row input,
.input-row select {
  width:100%;
}
.input-row select {
  color:white;
  background-color:#068CC1;
  border:none;
  padding:0.25em 0.75em;
}
#action_choice:disabled {
  background-color:darkgray;
}
.not .input-row input::placeholder {
  color:transparent;
}
.action-choice-entry {
  margin-top:20px;
}
#action_choice.shining {
	box-shadow: 0px 0px 4px 4px #068CC1;
	border: 1px solid white;
}
.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;
}
.centered {
  text-align: center;
}

.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:#D96361;
}

.create-account {
  margin-top:1em;
}
.create-account a:link,
.create-account a:visited,
.create-account a:hover,
.create-account a:active {
  color:#D37300;
  font-weight: bold;
}

@media (max-width: 768px) {
  .not body {
    background-size: cover;
  }
  .form_wrapper {
    width: 100%;
  }
}

.forgot_password {
  cursor:pointer;
  text-decoration: underline;
}

/* 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;
}