:root {
  --background-color: #ECF2F6;
  --input-border-color: #2E77FF;
  --button-color: #212A4E;
  --circle-color-white: white;
  --circle-color-blue: #2E77FF;
  --circle-color-navy: #000E3C;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #ECF2F6; /* default IE fallback */
  background-color: var(--background-color);
}

header {
  flex: auto;
  min-height: 50px;
}

main {
  flex: auto;
}

#content {
  position: fixed;
  z-index: -1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#dvLogin {
  align-self: stretch;
  padding-bottom: 50px;
  width: 100%;
  text-align: center;
  /*top: calc(40% - 220px);*/
}

#loginLogo {
  right: 40px;
  height: 100px;
  width: auto;
  /*
  transition: margin-top ease-in-out $TIME_TransitionSpeed;

  &.small {
      margin-top: -20px;

      & ~ #dvResetPassword { // set reset password field to visible when #loginLogo has small class applied
          opacity: 1;
      }
  }*/
}

.dvlogoBestoutcome {
  position: absolute;
}
.dvlogoBestoutcome #logoBestoutcome {
  width: 220px;
}

input {
  filter: none; /*Removes yellow background in firefox*/
}

/*****************************/
/**** LOGIN TABLE ELEMENT ****/
/*****************************/
#dvLoginBox {
  margin-bottom: 10px;
  margin-top: 20px;
  /* Used in app_offline.htm */
}
#dvLoginBox input[type=text], #dvLoginBox input[type=password], #dvLoginBox input[type=email] {
  font-size: 12px;
  border: 1.2px solid white;
}
#dvLoginBox input:focus {
  outline: none;
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvLoginBox input:hover {
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvLoginBox input:focus:hover {
  outline: none;
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvLoginBox.offline {
  width: 560px;
  height: 140px;
  color: white;
  font-size: 2em;
  padding: 20px;
  padding-top: 80px;
  padding-bottom: 0px;
  cursor: default;
}
#dvLoginBox > .loginBox {
  position: relative;
  background: rgba(236, 242, 246, 0.8);
}
#dvLoginBox > .loginBox:before {
  content: "";
  position: absolute;
  right: calc(50% - 5px);
  bottom: 100%;
  width: 0;
  height: 0;
  /*border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;*/
}

#loginDetails {
  color: #ECF2F6; /* default IE fallback */
  color: var(--background-color);
  height: 100%;
}

.loginBox, #loginDetails {
  border-radius: 8px;
  width: 480px;
  height: 260px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
}
.loginBox .spacer, #loginDetails .spacer {
  flex: 0 0 33px;
}
.loginBox .loginRow, #loginDetails .loginRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.loginBox .loginRow .leftCol, #loginDetails .loginRow .leftCol {
  text-align: right;
  width: 20%;
  padding-right: 10px;
}
.loginBox .loginRow .midCol, #loginDetails .loginRow .midCol {
  text-align: left;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.loginBox .loginRow .rightCol, #loginDetails .loginRow .rightCol {
  text-align: left;
  width: 20%;
}
.loginBox .loginRow .loginLabel, #loginDetails .loginRow .loginLabel {
  line-height: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 0px;
  padding-left: 4px;
  color: black;
}

.errorBox {
  margin-top: 30px;
  margin-left: 15px;
  text-align: left;
  color: red;
}

.optionsRow {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333333;
}
.optionsRow .midCol {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.optionsRow .midCol .radioRow {
  flex: 1 1 auto;
  display: inline-block;
  text-align: left;
  color: black;
  /*label:hover {
      color: lighten($COLOUR_BrightBlue, 20%);
  }*/
}

label {
  color: black;
}

.midCol input[type=text],
.midCol input[type=password] {
  width: 98%;
}

.rightCol input[type=text],
.rightCol input[type=password] {
  width: 98%;
}

.rightCol .midCol input[type=button], input.importantButton {
  min-width: 100px;
  height: 30px;
  font-size: 10pt;
  border: none;
}

.loginButton {
  color: white !important;
  background-color: #212A4E !important; /* default IE fallback */
  background-color: var(--button-color) !important;
  width: 100% !important;
  height: 30px !important;
  cursor: pointer;
  width: 98%;
}
.loginButton:hover {
  border: none !important;
  background-color: var(--circle-color-blue) !important;
}
.loginButton:focus {
  background-color: var(--button-color) !important;
  outline: 2px solid var(--circle-color-blue) !important;
}

.loginButtonContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.loginButtonContainer .loginButton {
  flex: 1 1 100%;
  width: auto;
  box-sizing: border-box;
}
.loginButtonContainer .loginButton + .loginButton {
  margin-left: 10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: black;
  -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

/************************/
/**** MESSAGE STYLES ****/
/************************/
#dvLoadText {
  width: 100%;
  color: black;
  display: none;
  font-size: 20pt;
  line-height: 25px;
}
#dvLoadText::selection,
#dvLoadText *:not(input):not(textarea)::selection {
  background: transparent;
  color: none;
  outline: none;
}

#errorMessage {
  color: red;
  margin: 0 auto;
  text-align: center;
  font-size: small;
}

#spForgot {
  font-size: 1.1em;
  cursor: pointer;
  display: inline-block;
  font-style: italic;
  color: #555555;
  text-align: right;
}
#spForgot:hover {
  text-decoration: underline;
}

/*******************************/
/**** FORGOT PASSWORD TABLE ****/
/*******************************/
#dvResetPassword {
  width: 100%;
  height: 40px;
  text-align: center;
  padding: 0px;
  margin: 0px;
}
#dvResetPassword .loginBox {
  /*background-image: simpleLinearGradient($COLOUR_BorderGrey, #BBBBBB, to bottom);*/
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
  border-radius: 8px;
  height: 220px;
}
#dvResetPassword .loginBox input {
  border: 1.2px solid white;
}
#dvResetPassword input:focus {
  outline: none;
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvResetPassword input:hover {
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvResetPassword input:focus:hover {
  outline: none;
  border: 1.2px solid #2E77FF; /* default IE fallback */
  border: 1.2px solid var(--input-border-color);
}
#dvResetPassword.active {
  height: auto;
}
#dvResetPassword.active .loginBox {
  opacity: 1;
}

#btnSubmitRecover {
  margin-top: 5px;
  height: 30px;
  font-size: 10pt;
  color: #555555;
}

#tdError {
  color: red;
  height: 0px;
  font-size: 10px;
}

#spnoscript {
  color: red;
  font-weight: bold;
}

/*******************************/
/**** FOOTER ****/
/*******************************/
footer {
  margin-top: auto;
}
footer #dvLicence {
  padding-top: 50px;
  margin-bottom: 8px;
  width: calc(100% - 10px);
  text-align: right;
  vertical-align: text-bottom;
  /*span {
      margin-left: 15px;
      margin-right: 15px;
  }*/
}
footer #dvLicence a {
  text-decoration: underline;
}
footer * {
  font-size: 11px;
}

.footer-sub {
  align-self: flex-end;
  width: 470px;
  margin: 0 auto 0 auto;
  height: 100px;
}
.footer-sub #dvFollowButtons {
  align-self: flex-end;
  right: 0px;
  padding-top: 30px;
  width: 100%;
  overflow: hidden;
  text-align: right;
}
.footer-sub #dvFollowButtons > *:not(script) {
  display: inline-block;
  vertical-align: top;
  opacity: 0.9;
  transition: opacity linear 0.1s;
  margin-right: 5px;
}
.footer-sub #dvFollowButtons > *:not(script):hover {
  opacity: 1;
}
.footer-sub .socialButtons {
  width: 30px;
  margin-left: -5px;
}

/*******************************/
/**** CIRCLES ****/
/*******************************/
.circles {
  position: absolute;
  overflow: hidden;
  background-color: #ECF2F6;
  min-height: 100%;
  width: 100%;
}

.circle-white {
  position: absolute;
  border: 0.3vw solid white; /* default IE fallback */
  border: 0.3vw solid var(--circle-color-white);
  border-radius: 100%;
  width: calc(30% - 100px);
  padding-top: calc(30% - 100px);
  transform: translate(20%, 50%);
  -ms-transform: translate(20%, 50%);
}

.circle-blue {
  position: absolute;
  border: 0.8vw solid #2E77FF; /* default IE fallback */
  border: 0.8vw solid var(--circle-color-blue);
  border-radius: 100%;
  width: calc(50% - 100px);
  padding-top: calc(50% - 100px);
  transform: translate(-30%, -60%);
  -ms-transform: translate(-30%, -60%);
}

.circle-navy {
  position: absolute;
  border: 0.6vw solid #000E3C; /* default IE fallback */
  border: 0.6vw solid var(--circle-color-navy);
  border-radius: 100%;
  width: calc(50% - 150px);
  padding-top: calc(50% - 150px);
  transform: translate(30%, 70%);
  -ms-transform: translate(30%, 70%);
}

.left {
  left: 0px;
}

.right {
  right: 0px;
}

.authenticate-button {
  height: 50px !important;
  font-size: 1.5em !important;
  width: 500px;
  margin-top: 10px;
}

.authspacer {
  height: 30px;
}