html {
  font-family: var(--lu-font-family);
}

a {
  background-color: transparent;
  color: var(--lu-color-primary, #1B2C56);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  font-family: var(--h1-font-family, "Roboto", sans-serif);
  font-size: var(--h1-font-size, 2.857em);
  font-weight: var(--h1-font-weight, 400);
  line-height: 1.5;
}

h2 {
  font-family: var(--h2-font-family, "Roboto", sans-serif);
  font-size: var(--h2-font-size, 2.286em);
  font-weight: var(--h2-font-weight, 400);
  line-height: 1.5;
}

h3 {
  font-family: var(--h3-font-family, "Roboto", sans-serif);
  font-size: var(--h3-font-size, 2em);
  font-weight: var(--h3-font-weight, 400);
  line-height: 1.5;
}

h4 {
  font-family: var(--h4-font-family, "Roboto", sans-serif);
  font-size: var(--h4-font-size, 1.714em);
  font-weight: var(--h4-font-weight, 400);
  line-height: 1.5;
}

h5 {
  font-family: var(--h5-font-family, "Roboto", sans-serif);
  font-size: var(--h5-font-size, 1.2em);
  font-weight: var(--h5-font-weight, 400);
  line-height: 1.5;
  text-transform: uppercase;
}

h6 {
  font-family: var(--h6-font-family, "Roboto", sans-serif);
  font-size: var(--h6-font-size, 1.2em);
  font-weight: var(--h6-font-weight, 500);
  line-height: 1.5;
}

p {
  margin: 0.6em 0 1em;
  font-family: var(--p-font-family, "Roboto", sans-serif);
  font-size: var(--p-font-size, 1em);
  font-weight: var(--p-font-weight, 400);
  line-height: 1.5;
}

small {
  font-size: 75%;
}

/**
* @prop --header-z-index: z-index of header. default is 8
*/
lu-header {
  display: block;
  font-size: 14px;
}

/**
* @prop --header-height: Height of the header
*/
:host .lu-header-outer {
  padding: 0.3em 1.5em;
  display: block;
  width: 100%;
  height: var(--header-height, 3.5em);
  font-size: 1em;
}

:host header {
  display: flex;
  position: relative;
  flex-flow: row;
  z-index: var(--header-z-index, 8);
}

/**
* @prop --pre-header-background-color: Background color of the pre-header
* @prop --pre-header-color: color of the pre-header text
*/
.pre-header-div {
  padding: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pre-header-background-color, purple);
  color: var(--pre-header-color, white);
}

/**
* @prop light: changes the background color to the lighter header
* @prop --header-light-background-color: Background color for the light header
* @prop --header-light-text-color: Text color of the light header
*/
lu-header[light] .lu-header-outer {
  border-bottom: 1px solid #C6C7C9;
  background-color: var(--header-light-background-color, #F1F1F1);
  color: var(--header-light-text-color, #222222);
}

:host(.pre-header) .lu-header-outer {
  padding: 0.3em;
}

:host(.lu-color) .lu-header-outer {
  border-bottom: 1px solid var(--lu-color-shade);
  background-color: var(--lu-color-base);
  color: var(--lu-color-contrast);
}

/**
* @prop --header-tall-background-color: The header tall background color
* @prop --header-tall-height: Height of the tall header
*/
:host[tall] .lu-header-outer {
  padding: 1.5em 6.25em;
  height: var(--header-tall-height, 15.75em);
  background-color: var(--header-tall-background-color, #1B2C56);
}

:not(lu-header[tall]) .lu-header-outer .lu-header-row--top,
:not(lu-header[tall]) .lu-header-outer .lu-header-row--bottom {
  display: none;
}

.lu-header-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.lu-header-row {
  display: flex;
  flex: 1;
  width: 100%;
}

.lu-header-row > div {
  display: flex;
  flex: 1;
}

::slotted(div) {
  width: 100%;
}

.lu-header-row > div:nth-child(2) {
  flex-grow: 2;
  justify-content: center;
  font-size: 1.2em;
  text-align: center;
}

.lu-header-row > div:nth-child(3) {
  justify-content: flex-end;
  text-align: right;
}

.lu-header-row--middle > div {
  align-items: center;
}

.lu-header-row--bottom > div {
  align-items: flex-end;
}