/* --------- Login Field Styling Logic ---------*/
/* --- Static when page opens --- */
/* ---- On focus ---- */
/* --- When dirty ----*/
/* --- When dirty and not focussed --- */
/* 2FA page */
/* Set Password*/
/* --- text field colours --- */
/* --- list of fixed colours --- */
/*https://iconmonstr.com/license/*/
body {
  margin-top: 0px !important;
  background-color: #eff3f9 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

.arabic .text__landing {
  font-family: "Cairo Regular", sans-serif;
  color: black; }

.arabic .login_title {
  font-family: "Cairo Regular", sans-serif; }

.arabic .idp_title {
  font-family: "Cairo Regular", sans-serif; }

.arabic .login__button {
  font-family: "Cairo Regular", sans-serif; }

.arabic .centered {
  font-family: "Cairo Regular", sans-serif; }

.lithuanian .text__landing {
  font-family: "Open Sans", sans-serif;
  color: black; }

.lithuanian .login_title {
  font-family: "Open Sans", sans-serif; }

.lithuanian .idp_title {
  font-family: "Open Sans", sans-serif; }

.lithuanian .login__button {
  font-family: "Open Sans", sans-serif; }

.lithuanian .centered {
  font-family: "Open Sans", sans-serif; }

.login__uae_logo {
  position: absolute;
  bottom: 0px;
  left: 10px; }

.login__left {
  margin-left: 4.4rem; }

.login__title {
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 1rem;
  font-size: 1.17rem;
  color: #195EFF !important; }

.login__form {
  margin-top: 10px;
  width: 350px;
  display: inline-block; }

.login__field {
  display: block !important;
  color: #2B2B2B; }
  .login__field .mat-form-field-flex {
    background-color: rgba(255, 255, 255, 0.6) !important; }

.login__button {
  min-width: 160px !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  border: 2px solid #195EFF !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: none !important;
  height: 40px; }

.login__buttonfield {
  padding-top: 20px; }

.login__button_cursor {
  cursor: pointer; }

.default_cursor {
  cursor: default; }

.login__error {
  margin-top: 10px; }

.login__remember {
  color: black;
  text-align: left;
  padding-top: 10px; }

.login__description {
  font-size: 30px;
  line-height: 36px;
  padding-top: 86px; }

.login__username {
  width: 350px; }

.login__password {
  display: block;
  width: 350px;
  margin: 0 auto; }

.toggle_visibility_off {
  display: none; }

.login__forgotPassword {
  text-align: right !important; }
  .login__forgotPassword a {
    color: black !important;
    text-decoration: none; }

.mdl-textfield__label__icon {
  position: absolute;
  right: 0;
  top: 20px; }

.validInvalidIcon {
  position: absolute;
  right: -30px;
  top: 20px; }

/* --------- Login Field Styling Logic ---------*/
/* --- Static when page opens --- */
#loginUsernameInput {
  color: black; }

#loginPasswordInput {
  color: black; }

/* ---- On focus ---- */
#loginUsernameLabel.mdl-textfield__label {
  color: red; }

#loginUsernameInput.mdl-textfield__input {
  border-bottom: 1px solid;
  border-bottom-color: red; }

#loginPasswordLabel.mdl-textfield__label {
  color: red; }

#loginPasswordInput.mdl-textfield__input {
  border-bottom: 1px solid;
  border-bottom-color: red; }

/* --- When dirty ----*/
.mdl-textfield.is-focused #loginUsernameLabel {
  color: red; }

.mdl-textfield.is-focused #loginPasswordLabel {
  color: red; }

#loginUsernameLabel:after {
  background-color: red !important; }

#loginPasswordLabel:after {
  background-color: red !important; }

.mdl-textfield.is-focused.is-dirty #loginUsernameLabel {
  color: #195EFF !important; }
  .mdl-textfield.is-focused.is-dirty #loginUsernameLabel:after {
    background-color: #195EFF !important; }

.mdl-textfield.is-focused.is-dirty #loginPasswordLabel {
  color: #195EFF !important; }
  .mdl-textfield.is-focused.is-dirty #loginPasswordLabel:after {
    background-color: #195EFF !important; }

.mdl-textfield.is-dirty #loginUsernameLabel {
  color: rgba(0, 0, 0, 0.12) !important; }

.mdl-textfield.is-dirty #loginUsernameInput.mdl-textfield__input {
  border-bottom: 1px solid;
  border-bottom-color: rgba(0, 0, 0, 0.12); }

.mdl-textfield.is-dirty #loginPasswordLabel {
  color: rgba(0, 0, 0, 0.12) !important; }

.mdl-textfield.is-dirty #loginPasswordInput.mdl-textfield__input {
  border-bottom: 1px solid;
  border-bottom-color: rgba(0, 0, 0, 0.12); }

/* --- When dirty and not focussed --- */
/* 2FA page */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #eff3f9 !important;
  z-index: 3;
  border-radius: 5px;
  opacity: 0.95;
  padding: 10px; }

input#mfa_input_field {
  display: block;
  margin: 2em auto;
  border: none;
  padding: 0;
  width: 9ch;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/8.5ch 2px no-repeat;
  font: 5ch droid sans mono, consolas, monospace;
  letter-spacing: 0.5ch;
  margin-top: 20px;
  margin-bottom: 50px; }

input:focus#mfa_input_field {
  outline: none;
  color: #195EFF; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

.login__mfa_field {
  vertical-align: middle;
  padding-left: 1.5ch; }

.login__redirectLink {
  color: red !important; }

h1, small {
  opacity: 1.0 !important; }