/* Please change the scss file and recompile it to change the css file. Web Compiler works. */
/* ------------------------ Font Imports ------------------------- */
/* roboto-condensed-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/roboto-condensed/roboto-condensed-v25-latin_latin-ext-regular.woff2") format("woff2"), url("fonts/roboto-condensed/roboto-condensed-v25-latin_latin-ext-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ------------------------ Global ------------------------- */
html,
body {
  padding: 0;
  margin: 0;
  font-family: "Roboto Condensed", sans-serif;
}

/* ------------------------ Defaults ----------------------- */
.mainContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009946+0,1a75cf+100&0.44+0,0.44+100 */
  background: -moz-linear-gradient(-45deg, rgba(0, 153, 70, 0.44) 0%, rgba(26, 117, 207, 0.44) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(0, 153, 70, 0.44) 0%, rgba(26, 117, 207, 0.44) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(0, 153, 70, 0.44) 0%, rgba(26, 117, 207, 0.44) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70009946", endColorstr="#701a75cf", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.logoContainer {
  background-color: #343a40;
  padding: 0px 15px;
}
.logoContainer .logo {
  background-image: url(Logo_w.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  height: 62px;
}
.logoContainer .debugging {
  color: yellow;
}
.logoContainer .logoutButtonContainer {
  position: absolute;
  top: 4px;
  right: 4px;
}
.logoContainer .logoutButtonContainer a {
  color: #ccc;
}

.loginContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #555555;
  border: 1px inset rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  padding: 30px;
}
.loginContainer h1 {
  margin-top: 0;
  letter-spacing: 0.05em;
}
.loginContainer h1.smallTitle {
  font-size: 1.25em;
  margin-bottom: 1em;
}
.loginContainer label:has(+ input) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.loginContainer input:not([type=checkbox i]) {
  padding: 10px;
  font-size: 1em;
  border: 1px solid #848484;
  border-radius: 2px;
  width: 90%;
  margin-bottom: 13px;
}
.loginContainer .buttonContainer {
  margin-top: 15px;
}
.loginContainer .buttonContainer .btn {
  font-size: 1em;
  padding: 8px 12px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.loginContainer .buttonContainer .btn:hover, .loginContainer .buttonContainer .btn:focus {
  transform: scale(1.07);
}
.loginContainer .buttonContainer .btn-primary {
  background-color: #0B78D0;
  border: 2px solid #0B78D0;
  color: #ffffff;
}
.loginContainer .buttonContainer .btn-primary:hover, .loginContainer .buttonContainer .btn-primary:focus {
  background-color: #2383d0;
}
.loginContainer .buttonContainer .btn-primary:active {
  background-color: #0b61a6;
}
.loginContainer .buttonContainer .btn-default {
  color: #333;
  background-color: #fff;
  border: 2px solid #ccc;
}
.loginContainer .buttonContainer .btn-default:hover, .loginContainer .buttonContainer .btn-default:focus {
  background-color: #e6e6e6;
}
.loginContainer .buttonContainer .btn-default:active {
  background-color: #bbb;
}
.loginContainer .buttonContainer .btn-text {
  background: none;
  border: none;
}
.loginContainer .buttonContainer .btn-text:hover, .loginContainer .buttonContainer .btn-text:focus {
  transform: scale(1);
}
.loginContainer .buttonContainer .btn-warning {
  color: white;
  background-color: #f0ad4e;
  border: 2px solid #eea236;
}
.loginContainer .buttonContainer .btn-warning:hover, .loginContainer .buttonContainer .btn-warning:focus {
  background-color: #ec971f;
  border-color: #d58512;
}
.loginContainer .buttonContainer .btn-warning:active {
  background-color: #d58512;
}
.loginContainer a {
  color: #0B78D0;
}
.loginContainer a:hover, .loginContainer a:focus {
  transform: scale(1);
  color: #2383d0;
}
.loginContainer a:active {
  color: #0b61a6;
}
.loginContainer .message {
  font-style: italic;
}
.loginContainer .error {
  color: #E91C1C;
}

.error, .alert {
  margin-top: 8px;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
}

.flexibleContainer {
  display: flex;
  gap: 30px;
}
.flexibleContainer .primaryContent {
  flex: 7;
}
.flexibleContainer .secondaryContent {
  flex: 5;
}
@media (max-width: 1200px) {
  .flexibleContainer {
    flex-direction: column;
    gap: unset;
  }
}

iframe {
  border: none;
}

/* ------------------------ ADA ----------------------- */
@media (max-width: 640px) {
  .loginContainer {
    transform: translate(-50%, -40%);
    width: 420px;
  }
}
@media (max-width: 512px) {
  .mainContainer {
    position: static;
    padding: 0 0 10px 0;
  }
  .loginContainer {
    position: static;
    transform: unset;
    margin: 10px 0 0 10px;
  }
}
@media (max-width: 500px) {
  .loginContainer {
    width: 82%;
  }
  .loginContainer .buttonContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .loginContainer .buttonContainer {
    width: max-content;
  }
}
@media (max-width: 440px) {
  .loginContainer {
    width: 80%;
  }
}
@media (max-width: 390px) {
  .loginContainer {
    width: 75%;
  }
}
@media (max-width: 320px) {
  .loginContainer {
    width: 235px;
  }
}
@media (max-height: 415px) {
  .loginContainer {
    top: 215px;
  }
}
/* ------------------------ Insights ----------------------- */
.insights.loginPage .logoContainer {
  padding: 10px 15px;
}
.insights.loginPage .logoContainer .logo {
  background-image: url(Insights_Logo_w.png);
  height: 42px;
}

/* -------------------------- Menu -------------------------- */
.menu.loginPage .mainContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: url(spring_1.jpg);
  background-size: cover;
  background-position: bottom center;
}
.menu.loginPage .logoAndLoginContainer {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  background-color: rgba(0, 0, 0, 0.85);
  min-height: 200px;
}
.menu.loginPage .logoContainer {
  flex: 1 0 auto;
  background-color: unset;
  padding: 0;
}
.menu.loginPage .logoContainer .logo {
  background-color: unset;
  background-image: url(Menu_Logo_w.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  height: 120px;
  margin-left: 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.menu.loginPage .loginContainer {
  position: unset;
  transform: unset;
  align-self: center;
  color: #ffffff;
  padding: 5px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  left: unset;
}
.menu.loginPage .loginContainer h1 {
  display: none;
}
.menu.loginPage .loginContainer h1.smallTitle {
  display: block;
  margin-bottom: 0.2em;
}
.menu.loginPage .loginContainer a {
  color: #679ECF;
}
.menu.loginPage .loginContainer a:hover, .menu.loginPage .loginContainer a:focus {
  color: #74BC1F;
}
.menu.loginPage .loginContainer a:active {
  color: #0971CE;
}
.menu.loginPage .loginContainer input {
  padding: 10px;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 2px;
  margin-bottom: 7px;
}
.menu.loginPage .loginContainer .buttonContainer {
  margin-top: 7px;
}
.menu.loginPage .loginContainer .buttonContainer .btn {
  font-size: 1em;
  padding: 8px 12px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.menu.loginPage .loginContainer .buttonContainer .btn-primary {
  background-color: #0B78D0;
  border: none;
  color: #ffffff;
}
.menu.loginPage .loginContainer .buttonContainer .btn-text {
  background: none;
  border: none;
}
.menu.loginPage .loginContainer .message {
  font-style: italic;
  margin: 5px 0;
}
.menu.loginPage .loginContainer .error {
  color: #E91C1C;
  margin: 5px 0;
}

/* ------------------------ Utilities ------------------------*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}