html,
body {
  color: var(--theme-color-neutral-900);
  font-family: var(--font-primary);
}

* {
  font-family: inherit;
}

body {
  margin: 0;
  background-image: url('../img/background.png');
  background-position: center center !important;
  background-position-y: calc(50% + 32px) !important;
  background-repeat: no-repeat;
  background-color: var(--theme-color-neutral-50);
  height: auto;
  min-height: 100vh;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 8px 40px;
  z-index: 10;
}

.logo {
  max-height: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
}

.footer {
  min-height: 48px;
  width: 100%;
  padding: 0 80px;
}

.lnk-primary {
  color: var(--primary-500);
  font-size: 12px;
  line-height: 18px;
  display: flex;
}

.lnk-secondary {
  color: var(--theme-color-neutral-500);
  font-size: 12px;
  line-height: 18px;
  text-decoration: underline;
  display: flex;
}

.lnk-tertiary {
  color: var(--theme-color-neutral-700);
  font-size: 12px;
  line-height: 18px;
  text-decoration: underline;
  font-weight: 700;
  display: flex;
}

.copyright {
  font-size: 12px;
  line-height: 18px;
  color: var(--theme-color-neutral-500);
  font-weight: 700;
}

.upper {
  text-transform: uppercase;
}

/* POPUPS */

.theme-emerald .overlay {
  background-color: #465b5799;
}

.theme-amber .overlay {
  background-color: #3c342499;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.close-button {
  width: 48px;
  height: 48px;
  color: var(--primary-500);
  border-radius: 50%;
  position: relative;
  right: -8px;
}

.close-button:hover {
  background-color: var(--primary-50);
}

.close-button .icon {
  display: flex;
  font-size: 48px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: var(--primary-700);
}

.close-button:focus {
  outline: none;
}

.text-container p {
  margin-bottom: 8px;
}

.text-container ol {
  list-style-type: decimal;
  margin: 1em 0;
  padding-left: 40px;
}

.text-container ul {
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 40px;
}

.text-container li {
  margin-bottom: 8px;
}



/* SCROLLBARS */
::-webkit-scrollbar {
  width: var(--scrollbar-thumb-width);
  height: var(--scrollbar-thumb-height);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--theme-color-neutral-300);
}

.v-scrollable-max-h-600 {
  overflow: scroll;
  max-height: 600px;
  margin-right: var(--scrollbar-hoffset);
}


/* MATERIAL DESIGN COMPONENT OVERRIDES */
md-outlined-text-field {
  background-color: var(--theme-color-neutral-50);
  border-radius: 8px;
}

md-outlined-button.secondary {
  --md-outlined-button-hover-state-layer-color: var(--theme-color-neutral-500);
  --md-outlined-button-hover-label-text-color: var(--theme-color-accent-500);
  --md-outlined-button-label-text-color: var(--theme-color-accent-500);
  --md-outlined-button-outline-color: var(--theme-color-accent-500);
  --md-outlined-button-pressed-label-text-color: var(--theme-color-accent-700);
  --md-outlined-button-pressed-outline-color: var(--theme-color-accent-700);
  --md-outlined-button-pressed-state-layer-color: var(--theme-color-accent-700);
  --md-outlined-button-focus-icon-color: var(--theme-color-accent-700);
  --md-outlined-button-focus-label-text-color: var(--theme-color-accent-700);
}

md-outlined-button.default {
  --md-outlined-button-hover-state-layer-color: var(--theme-color-neutral-700);
  --md-outlined-button-hover-label-text-color: var(--theme-color-neutral-500);
  --md-outlined-button-label-text-color: var(--theme-color-neutral-500);
  --md-outlined-button-outline-color: var(--theme-color-neutral-500);
  --md-outlined-button-pressed-label-text-color: var(--theme-color-neultral-700);
  --md-outlined-button-pressed-outline-color: var(--theme-color-neutral-700);
  --md-outlined-button-pressed-state-layer-color: var(--theme-color-neutral-700);
  --md-outlined-button-focus-icon-color: var(--theme-color-neutral-700);
  --md-outlined-button-focus-label-text-color: var(--theme-color-neutral-700);
}

md-text-button .label {
  display: flex;
  align-items: center;
}

md-text-button,
md-outlined-button {
  max-height: 52px;
}


/* MEDIA QUERIES */
@media (max-width: 679px) {
  .footer {
    padding: 0 20px;
  }
}

@media (min-width: 1440px) {
  body {
    background-position: center top;
    background-position-y: -44px;
  }
}