html,
body {
  height: 100%;
  font-family: Segoe UI, Roboto, sans-serif;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-size: cover;
  background-color: #18427d;
  margin: 0;
  padding: 0;
}

body.has-footer { 
  padding-bottom: 120px;
}

.form-signin {
  padding: 60px;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.8);
  border-radius: 10px;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  background-color: white;
  color: #444;
  border: none;
  outline: none;
}
.form-signin .form-control:focus {
  z-index: 2;
  background-color: white !important;
}
.form-signin input[type="text"] {
  margin-bottom: 5px;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
}
.form-signin .form-div{
  padding: 0px;
  border-radius: 0px;
}
.form-signin .form-other-summary {
  color: #069;
  cursor: pointer;
}
.form-signin .form-other-summary:hover{
  text-decoration:underline;
}
.form-signin .form-other-details{
  padding: 10px;
  border-radius: 10px;
}
.form-submit-btn {
  color: white;
  background-color: #003478;
  margin-top: 5px;
}

.form-signout-btn {
  background-color: rgba(255,255,255,0.8);
  border: 1px solid transparent;
  color: #444;
  border-radius: 3px;
  padding: 5px 8px;
}

.form-signout {
  position: fixed; 
  top: 0;
  right: 0;
  margin: 0; 
  padding: 5px;
}

.form-img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
footer {
  background-color: rgba(255,255,255,0.6);
  padding: 0px 0px;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.hidden {
  display: none;
}

.address span,
.contact span,
.social span {
  color: #003478;
  font-weight: 700;
  padding: 10px 0px;
  display: block;
  text-transform: uppercase;
  font-size: 16px;
}

.address li,
.contact li,
.social li {
  padding: 5px 0px;
  list-style: none;
}

.address li p,
.contact li p,
.social li a {
  color: #003478;
}

.social li {
  float: middle;
}

.social .icon {
  fill: #003478;
  color: #003478;
  margin-right: 10px;
  font-size: 22px;
}

header {
  padding: 30px 0px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

.header-imgbox{
  display: block;

  margin-top: 0px;
  margin-bottom: 30px;
  width: 561px;
  height: 64px;
}

.header-img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.password-field {
  position: relative;
}

#show-password {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: url("/static/webportal/icons/ic_visible.svg");
  opacity: 0.3;
  cursor: pointer;
}

#show-password.hidden_icon {
  background: url("/static/webportal/icons/ic_hidden.svg");
}

/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
/* Prevents highlighting of text when quickly pressing show password button */
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;/* HACK */
}

.text-danger { white-space: pre-line }

@media only screen and (max-width: 800px) {
  body {
    flex-wrap: wrap;
  }
  footer {
    position: unset;
  }
  .header-imgbox{
    width: unset;
  }
  .form-signin {
    padding: 1rem;
    margin: 1rem;
  }
}

.error_box {
  padding: 60px;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.8);
  border-radius: 10px;
  color: #a94442;
}