:root {
  --bg-primary: white;
  --bg-secondary: #f8faff;
  --bg-nav-primary: #0000C0;
  --bg-nav-secondary: #7d7dc0;
  --bg-nav-primary-selected: #8383a0;
  --bg-nav-primary-hover: #5a5a83;
  --icon-selected: #ffdb00;
  --fnt-primary: black;
  --fnt-secondary: #2c2c40;
  --btn-primary: 0, 0, 192;
  --btn-primary-hover: 90deg, #c0c0ff, #0066cc;
  --btn-primary-hover-red: 90deg, #ffcccc, #d34041;
  --btn-primary-hover-orange: 90deg, #ffcc99, #ff6600;
  --green: #1a8e0d;
  --fnt-family-primary: Tahoma;
  --fnt-family-header: Arial;
  --fnt-readonly-color: #c3c3c3;
  --container-box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
  --fnt-disclaimer: #929292;
  --fnt-disabled: #666;
  --bg-content-section: aliceblue;
  --bg-popup-content: #bfe0ffff;
  --bg-popup-header: #176bd1ff;
}

/* Style.css also styles h1, and loads after this file. Its font-family carries !important so it already
   won; the fixed 36pt here carried !important too, which beat Style.css's viewport-relative calc() and
   left headings unable to shrink on a narrow screen. Both !important flags are dropped so the later,
   responsive rule wins, and the family now names the display token rather than the body one. */
h1 {
  font-family: var(--fnt-family-header);
  font-size: 36pt;
}

.main-logo {
  position: absolute;
  right: 5px;
  top: 5px;
}

.custom-button-loading-spinner {
  border-radius: 50%;
  animation: dxLoadSpinSys 1s linear infinite;
  border: 4px solid #f1f1f1;
  border-top: 4px solid transparent;
}

/* .theme-background-content moved to Spa/styles/modal.css in the mobile pass, together with the two width
   queries that used to follow it - see that file for what the queries were doing and why they are gone.
   .theme-background-header below is dead by grep over Spa/, App.aspx and Reporting/, but it is outside that
   phase's claims and is left here. */
.theme-background-header {
  background: var(--bg-nav-primary) !important;
  color: white !important;
}

/*Password Eye Button*/
.eye-button {
  background: none;
}

  .eye-button > div {
    background: url('Images/eye-button.svg') no-repeat center;
    width: 18px;
    height: 12px;
    vertical-align: baseline;
    pointer-events: none;
    user-select: none;
  }

  .eye-button.show-password > div {
    background: url('Images/eye-button-hide.svg') no-repeat center;
  }

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
  display: none;
}

.password-validation-icon {
  width: 13px;
  height: 13px;
}


.inline-centered-flexbox {
  display: inline-flex;
}

  .inline-centered-flexbox * {
    margin: 0 3px;
    align-self: center;
  }

.password-validation-text {
  font-size:10pt;
}

.message-box {
  border-radius: 4px;
}

.no-margin {
  margin: 0 !important;
}

.custom-button-loading-panel {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.link {
  cursor: pointer;
  color: var(--btn-primary);
  font-size: 12pt;
  margin: 20px 5px;
  display: inline-block;
  user-select: none;
}

.link:hover, .back-link:hover {
  color: var(--btn-primary-hover) !important;
}

.display-block {
  display: block !important;
}

@keyframes ButtonFade {
  0% {
    background-color: #154005;
  }

  100% {
    background-color: var(--btn-primary);
  }
}

/* Footer */
.footer-wrapper {
  height: 46px; /* Footer Height */
  position: absolute;
  bottom: 0px;
  width: 100%
}

.footer {
  font-size: 13.5px;
  color: #e7e7e7;
}

.footer-link {
  color: #e7e7e7;
  border-right: 1px solid #bbbbbb;
  margin-right: 7px;
  padding-right: 10px;
  white-space: nowrap;
}

  .footer-link:last-child {
    border: none;
    margin: 0;
    padding: 0;
  }

.footer-left {
  float: left;
}

.footer-right {
  float: right;
  margin-right: 15px;
}

.footer-left,
.footer-right {
  padding: 16px 24px;
}

@media (max-width: 599px) {
  .footer-left,
  .footer-right {
    padding: 16px 4px;
  }
}