@charset "utf-8";
@import '~hds-core/lib/base.min.css';
@import '~hds-core/lib/components/all.min.css';
@import '~hds-core/lib/icons/icon.min.css';
@import '~hds-core/lib/icons/icons.min.css';
@import '~hds-design-tokens/lib/all.scss';
@import 'utils.scss';

:root {
  --page-border-color: var(--color-black-20);
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/565d73a693abe0776c801607ac28f0bf.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/20d494430c87e15e194932b729d48270.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
}

@font-face {
  font-family: HelsinkiGrotesk;
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  text-rendering: optimizelegibility;
  word-wrap: break-word;
}

.page-header-title {
  align-items: center;
  display: flex;
  margin-right: var(--spacing-2-xs);

  & > div:first-of-type {
    margin-right: var(--spacing-s);
  }

  @include small-screen {
    font-size: var(--fontsize-body-s);

    & > div:first-of-type {
      margin-right: var(--spacing-2-xs);
    }
  }
}

.page-header-title-badge {
  align-items: center;
  display: flex;
}

.page-heading-1 {
  margin: 0 0 var(--spacing-m) 0;
}

.page-heading-2 {
  margin: var(--spacing-l) 0 var(--spacing-s) 0;
}

.page-heading-3 {
  margin: var(--spacing-l) 0 var(--spacing-xs) 0;
}

.page-heading-4 {
  margin: var(--spacing-l) 0 var(--spacing-2-xs) 0;
}

.page-heading-5 {
  margin: var(--spacing-l) 0 var(--spacing-3-xs) 0;
}

.page-heading-6 {
  margin: var(--spacing-l) 0 var(--spacing-3-xs) 0;
}

.front-page-link-list {
  box-sizing: border-box;
  margin: var(--spacing-layout-m) 0 var(--spacing-layout-xl) 0;
  padding: 0 2px;

  @include x-large-and-above-screen {
    padding: 0 var(--spacing-layout-xs);
  }
}

.front-page-hero-button {
  --background-color: var(--color-white) !important;
  --background-color-hover: var(--color-bus-light) !important;
  --background-color-focus: var(--color-bus-light) !important;
  --background-color-hover-focus: var(--color-bus-light) !important;
  --border-color: var(--color-white) !important;
  --border-color-hover: var(--color-white) !important;
  --border-color-focus: var(--color-white) !important;
  --border-color-hover-focus: var(--color-white) !important;
  --color: var(--color-bus-dark) !important;
  --color-hover: var(--color-bus-dark) !important;
  --color-focus: var(--color-bus-dark) !important;
  --color-hover-focus: var(--color-bus-dark) !important;
  --focus-outline-color: var(--color-bus-dark) !important;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  --side-content-min-width: 230px;

  box-sizing: border-box;
  flex: 1;
  margin: 0 auto;
  padding: var(--spacing-layout-xs) var(--spacing-layout-2-xs);
  width: 100%;

  @include medium-and-above-screen {
    padding-left: var(--spacing-layout-xs);
    padding-right: var(--spacing-layout-xs);
  }

  @include x-large-and-above-screen {
    max-width: var(--container-width-xl);
    padding-left: 0;
    padding-right: 0;
  }
}

.side-content {
  margin-bottom: var(--spacing-layout-xs);
  min-width: var(--side-content-min-width);

  @include x-large-and-above-screen {
    margin-bottom: auto;
  }
}

.main-content {
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
}

@media screen and (min-width: $breakpoint-m) {
  .page-content {
    display: flex;
  }

  .side-content {
    margin-bottom: auto;
    padding: var(--spacing-s) 0;
    width: 230px;
  }

  .main-content {
    flex: 1;
    padding: 0 0 var(--spacing-m);
  }

  .side-content + .main-content {
    border-left: 1px solid var(--page-border-color);
    max-width: calc(100% - var(--side-content-min-width));
    padding: 0 var(--spacing-m) var(--spacing-m);
  }
}

.page-footer {
  /* ensure footer stays on bottom of the page */
  margin-top: auto;
}

.doc-table {
  margin: var(--spacing-l) 0;
}

.hds-anchor-icon {
  visibility: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  &:hover {
    .hds-anchor-icon {
      visibility: visible;
    }
  }

  & a {
    color: var(--color-black-90);
    outline: none;
    text-decoration: none;

    & .anchor-link {
      color: var(--color-black-50);
      display: inline-block;
      height: var(--fontsize-heading-m);
      margin-left: var(--spacing-2-xs);
      vertical-align: middle;

      & .hds-anchor-icon {
        height: var(--fontsize-heading-m);
        vertical-align: top;
        width: var(--fontsize-heading-m);
      }
    }

    &:focus {
      & .anchor-link {
        outline: 3px solid var(--color-focus-outline);
      }

      & .hds-anchor-icon {
        visibility: visible;
      }
    }
  }
}

.header-anchor {
  font-size: 0;
  margin-left: var(--spacing-2-xs);
  padding-left: 0 !important;
  vertical-align: middle;

  &:focus {
    .hds-anchor-icon {
      visibility: visible;
    }
  }
}

code {
  background-color: var(--color-black-5);
  box-decoration-break: clone;
  font-family: courier, monospace;
  padding: var(--spacing-4-xs) var(--spacing-3-xs);
  word-wrap: break-word;
}

.container-for-table-10-30-50-10 table {
  table-layout: fixed;

  td:first-of-type {
    width: 10%;
  }

  td:nth-of-type(2) {
    width: 30%;
  }

  td:nth-of-type(3) {
    width: 50%;
  }

  td:nth-of-type(4) {
    width: 10%;
  }
}

.container-for-table-10-50-30-10 table {
  table-layout: fixed;

  td:first-of-type {
    width: 10%;
  }

  td:nth-of-type(2) {
    width: 50%;
  }

  td:nth-of-type(3) {
    width: 30%;
  }

  td:nth-of-type(4) {
    width: 10%;
  }
}
