:root {
  --background: #eaeaea;
  --primaryAccent: #622567;
  --secondaryAccent: #d55c19;
  --tertiaryAccent: #adadad;
  --textColor: #000000;

  --headerColor: #000000;
  --logoFillColor:#ffffff;

  --infoMessageColor: #bed600;
  --alertMessageColor: #d55c19;
  --warningMessageColor: #f3d311;
}

/* @media (prefers-color-scheme: dark) {
  :root {
      --background: #333333;
      --primaryAccent: #0065bd;
      --secondaryAccent: #d55c19;
      --tertiaryAccent: #622567;
      --textColor: #adadad;

      --headerColor: #000000;
      --logoFillColor:#ffffff;

      --infoMessageColor: #58a618;
      --alertMessageColor: #622567;
      --warningMessageColor: #d55c19;
  }
} */

body {
  font-family: akzidenz-grotesk, sans-serif;
  background-color: var(--background);
  color: var(--textColor);
  margin: 0px;
  padding: 0px;
}

a {
  font-weight: 600;
}

a:link {
  color: var(--primaryAccent);
}

a:visited {
  color: var(--secondaryAccent);
}

.crumbs {
  height: 25px;
  line-height: 25px;
  background-color: var(--tertiaryAccent);
  /*font-weight: bold;*/
}

.crumb {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

.page-header {
  height: 100px;
  width: 100%;
  display: block;
  background-color: var(--headerColor);
  margin: 0px;
  padding: 0px;
  /* padding-top: 10px; */
}

.main-nav__svg {
  fill: var(--logoFillColor);
}

header {
  color: var(--primaryAccent);
  font-weight: 700;
  font-size: 200%;
  max-width: 90%;
  margin: auto;
}

h1 {
  color: var(--textColor);
  margin-bottom: 0px;
}

h1::after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, var(--primaryAccent)), to(var(--secondaryAccent)));
  background-image: linear-gradient(90deg, var(--primaryAccent) 0, var(--secondaryAccent));
  content: "";
  height: 5px;
  display: block;
  margin-top: 20px;
}

h2 {
  padding-top: 1.2em;
  color: var(--textColor) !important;
  font-size: x-large;
}

h2::after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, var(--primaryAccent)), to(var(--secondaryAccent)));
  background-image: linear-gradient(90deg, var(--primaryAccent) 0, var(--secondaryAccent));
  content: "";
  width: 20%;
  height: 5px;
  display: block;
  margin-top: 20px;
}

h3 {
  color: var(--primaryAccent);
  font-size: large;
}

.error-message {
  display: none;
}

header {
  max-width: 640px;
}

.page-body {
  max-width: 90%;
  margin: auto;
  margin-bottom: 100px;
}



footer {
  margin: auto;
  text-align: center;
}

.aware {
  background-color: #ffdddd;
  border: 1px solid #ff8888;
  border-radius: 5px;
  padding: 10px;
}
.advisory {
  background-color: #ddd;
  border: 1px solid #888;
  border-radius: 5px;
  padding: 10px;
}


a.button {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  background-color: var(--primaryAccent) ;
  color: var(--logoFillColor);
  border:none;
  cursor: pointer;
  vertical-align: middle;
}

.sx-sp-messagebox {
  padding: 10px;
  margin: 10px;
  border-radius: 0.3em;
  width: 95%
}

.sx-sp-info {
  background-color: var(--infoMessageColor);
}

.sx-sp-warn {
  background-color: var(--warningMessageColor);

}

.sx-sp-alert {
  background-color: var(--alertMessageColor);
}

.pre {
  vertical-align: middle !important;
  line-height: 2em !important;
}
table {
  min-width: 100%;
}
thead {
  background-color: var(--primaryAccent);
  color: var(--logoFillColor);
  line-height: 3em;
  height: 3em;
  border: 0px;
  padding: 0px;
  font-size: 12px;
  font-weight: 400;

}
td {
  text-align: center;
  height: 2em;
}
tr:nth-child(odd) td{
  background-color: var(--background);
}
tr:nth-child(even) td{
  background-color: var(--tertiaryAccent);
}


.impersonate-notification{
  margin: 5px;
  margin-top: 20px;
  padding: 20px;
  border: var(--headerColor);
  border-width: 2px;
  border-style: solid;
  background-color: var(--warningMessageColor);
  text-align: center;
}
.impersonate-notification em{
  font-weight: bolder;
}