@font-face {
  font-family: 'Montserrat';
  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  font-display: swap;
}

:root {
  /* Typography */
  --tg-fnt-family-default: 'Montserrat', Arial, sans-serif;
  --tg-fnt-family-header: 'Roboto', Arial, sans-serif;
  --tg-fnt-size-5: 2.5rem;
  --tg-fnt-size-4: 2rem;
  --tg-fnt-size-3: 1.5rem;
  --tg-fnt-size-2: 1.25rem;
  --tg-fnt-size-1: 1.125rem;
  --tg-fnt-size-0: 1rem;
  --tg-fnt-size--1: .875rem;
  --tg-fnt-size--2: .75rem;
  --tg-lh-2: 2.25;
  --tg-lh-1: 2;
  --tg-lh-0: 1.875;
  --tg-lh--1: 1.625;
  --tg-lh--2: 1.5;
  --tg-lh--3: 1.125;

  /* Colors */
  --tg-clr-primary: #ab1254;
  --tg-clr-secondary: #0c7890;
  --tg-clr-black: #000;
  --tg-clr-darkest-gray: #292929;
  --tg-clr-dark-gray: #4b4b4b;
  --tg-clr-gray: #959595;
  --tg-clr-light-gray: #dfdfdf;
  --tg-clr-lightest-gray: #e6e6e6;
  --tg-clr-white: #fff;

  /* Layout */
  --tg-max-content-width: 87.5rem;
  --tg-section-padding-top: 2.125rem;
  --tg-size-6: 2.5rem;
  --tg-size-5: 2rem;
  --tg-size-4: 1.875rem;
  --tg-size-3: 1.5rem;
  --tg-size-2: 1.25rem;
  --tg-size-1: 1.125rem;
  --tg-size-0: 1rem;
  --tg-size--1: .75rem;
  --tg-size--2: .625rem;
  --tg-size--3: .5rem;
  --tg-size--4: .375rem;
  --tg-size--5: .3125rem;
  --tg-size--6: .25rem;
  --tg-size--7: .125rem;
  --tg-spacing-hor: var(--tg-size-4);
  --tg-spacing-ver: var(--tg-size-2);
  --tg-logo-height: 8.4375rem;
  --tg-main-nav-min-height: calc(var(--tg-size-2) * 2 + var(--tg-lh-0) * 1em);
  --tg-main-nav-border-width: var(--tg-size--2);
  --tg-main-nav-height: var(--tg-main-nav-min-height);
  --tg-dropdown-padding: var(--tg-size-2);
  --tg-anchor-nav-height: 0px;
  --tg-anchor-nav-top: var(--tg-main-nav-height, var(--tg-main-nav-min-height));
  --tg-content-max-width: calc(75vw - 2 * var(--tg-spacing-hor));
  --tg-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
  --tg-checker-size: var(--tg-size-3);


  @media (min-width: 87.5rem) {
    --tg-content-max-width: calc(75% - 2 * var(--tg-spacing-hor));
  }

  @media (min-width: 91.25rem) {
    --tg-content-max-width: calc(75% - var(--tg-spacing-hor));
  }

  /* Timers */
  --tg-tmr-fast: .125s;
  --tg-tmr-medium: .25s;
  --tg-tmr-slow: .5s;
  --tg-collapse-duration: var(--tg-tmr-fast);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

svg {
  &.is-symbol {
    display: none;
  }
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: var(--tg-lh--3);
  color: inherit;
  margin: 0;
}

p {
  margin: 0 0 var(--tg-lh-0);
}

a {
  color: var(--tg-clr-secondary);
  text-decoration: underline;

  &:focus,
  &:hover {
    color: var(--tg-clr-primary);
  }

  &:focus-visible {
    outline: var(--tg-size--7) solid var(--tg-clr-secondary);
    outline-offset: var(--tg-size--7);
  }
}

.form-field {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: var(--tg-size--5);
  margin: 0;

  input,
  select,
  textarea {
    align-self: stretch;
  }

  input {
    &[type="checkbox"],
    &[type="radio"] {
      align-self: flex-start;
      width: var(--tg-checker-size);
      aspect-ratio: 1;
      margin: 0;
    }
  }
}

label {
  font: normal 500 var(--tg-fnt-size-0) / var(--tg-lh-0) var(--tg-fnt-family-header);
  color: var(--tg-clr-black);
}

input,
select,
textarea {
  accent-color: var(--tg-clr-secondary);
  font: inherit;
  color: var(--tg-clr-dark-gray);
  padding: var(--tg-size--3) var(--tg-size--2);
  border: 1px solid var(--tg-clr-light-gray);
  border-radius: var(--tg-size--6);

  &::placeholder {
    color: var(--tg-clr-gray);
  }

  &:focus-visible {
    outline: var(--tg-size--7) solid var(--tg-clr-secondary);
    outline-offset: -.0625rem;
  }

  &:disabled {
    color: var(--tg-clr-light-gray);
    background-color: color-mix(in oklab, var(--tg-clr-lightest-gray), var(--tg-clr-white));
    border-color: var(--tg-clr-light-gray);
    cursor: not-allowed;

    &::placeholder {
      color: color-mix(in oklab, var(--tg-clr-light-gray), var(--tg-clr-gray));
    }
  }
}

.buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--tg-size--5);
  margin-top: var(--tg-size--2);
}

[type="button"],
[type="submit"],
[type="reset"],
.btn,
.btn-close {
  display: flex;
  justify-content: center;
  align-items: center;
  font: normal 500 var(--tg-fnt-size-0) / var(--tg-lh-0) var(--tg-fnt-family-header);
  border-width: var(--tg-size--7);
  border-style: solid;
  border-radius: var(--tg-size--6);
  padding: var(--tg-size--5) var(--tg-size--3);
  cursor: pointer;
  transition: background-color var(--tg-tmr-fast) ease-in-out,
              border-color var(--tg-tmr-fast) ease-in-out,
              color var(--tg-tmr-fast) ease-in-out;

  &:focus-visible {
    outline: none;
  }

  &:disabled {
    &,
    &:focus,
    &:focus-visible,
    &:hover {
      color: color-mix(in oklab, var(--tg-clr-light-gray), var(--tg-clr-gray));
      background-color: color-mix(in oklab, var(--tg-clr-lightest-gray), var(--tg-clr-white));
      border-color: var(--tg-clr-light-gray);
      cursor: not-allowed;
    }
  }

  &.btn-icon {
    aspect-ratio: 1;
  }
}

[type="button"],
.btn {
  color: var(--tg-clr-secondary);
  background-color: var(--tg-clr-white);
  border-color: var(--tg-clr-secondary);

  &:focus,
  &:focus-visible,
  &:hover {
    background-color: var(--tg-clr-secondary);
    color: var(--tg-clr-white);
  }

  &.btn-close {
    font-weight: 600;
    background-color: transparent;
    border-color: transparent;

    &:focus,
    &:focus-visible,
    &:hover {
      color: var(--tg-clr-secondary);
      background-color: transparent;
      border-color: var(--tg-clr-secondary);
    }
  }
}

[type='submit'] {
  color: var(--tg-clr-white);
  background-color: var(--tg-clr-secondary);
  border-color: var(--tg-clr-secondary);

  &:focus,
  &:focus-visible,
  &:hover {
    background-color: var(--tg-clr-white);
    color: var(--tg-clr-secondary);
  }
}

[type="reset"],
.btn-danger {
  color: var(--tg-clr-primary);
  background-color: var(--tg-clr-white);
  border-color: var(--tg-clr-primary);

  &:focus,
  &:focus-visible,
  &:hover {
    background-color: var(--tg-clr-primary);
    color: var(--tg-clr-white);
  }
}

.btn-danger {
  display: inline-flex;
  text-decoration: none;
  padding-inline: var(--tg-size-0);
}

.btn {
  text-decoration: none;
}

dialog {
  --tg-dialog-width: 50rem;
  --tg-dialog-max-width: 90vw;
  --tg-dialog-min-height: 25vh;
  --tg-dialog-max-height: 90vh;
  position: fixed;
  top: calc((100vh - var(--tg-dialog-max-height)) / 2);
  left: calc((100vw - min(var(--tg-dialog-width), var(--tg-dialog-max-width))) / 2);
  z-index: 1;
  flex-flow: column nowrap;
  width: var(--tg-dialog-width);
  max-width: var(--tg-dialog-max-width);
  min-height: var(--tg-dialog-min-height);
  max-height: var(--tg-dialog-max-height);
  margin: 0;
  padding: 0;
  overflow: auto;
  border: none;
  border-radius: var(--tg-size--6);
  box-shadow: var(--tg-box-shadow);

  &::backdrop {
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity var(--tg-tmr-fast) ease-in-out allow-discreet;

  }

  &:open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--tg-tmr-medium) ease-out, transform var(--tg-tmr-medium) ease-out;

    @starting-style {
      opacity: 0;
      transform: translateY(-100%);
    }

    &::backdrop {
      opacity: 1;
    }
  }

  &:focus-visible {
    outline: var(--tg-size--7) solid var(--tg-clr-white);
    outline-offset: var(--tg-size--7);
  }

  .dialog-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    color: var(--tg-clr-white);
    padding: var(--tg-size--3) var(--tg-spacing-hor);
    background-color: var(--tg-clr-primary);

    &:has(> .btn-close-popup) {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      gap: var(--tg-spacing-hor);
    }

    h3,
    h4 {
      font-size: var(--tg-fnt-size-0);
      font-weight: 600;
      color: inherit !important;
      padding: .8125rem 0;
    }

    .btn-close-popup {
      color: var(--tg-clr-white);

      &:focus,
      &:focus-visible,
      &:hover {
        color: var(--tg-clr-white);
        border-color: var(--tg-clr-white);
      }
    }

    + .dialog-content {
      padding-top: 0;
    }
  }

  .dialog-content {
    padding: calc(var(--tg-spacing-ver) * 2) var(--tg-spacing-hor);

    &:not(:last-child) {
      flex: auto;
      padding-bottom: 0;
    }
  }

  .delete-name {
    font-weight: 500;
  }

  .dialog-footer {
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 .5rem;
    padding: 0 calc(var(--tg-spacing-ver) * 2) var(--tg-spacing-hor);

    .btn-close {
      font-weight: 500;
    }
  }
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-flow: column nowrap;
  font: normal var(--tg-fnt-size-0) / var(--tg-lh-0) var(--tg-fnt-family-default);
  color: var(--tg-clr-black);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-y: scroll;
  background-color: var(--tg-clr-white);

  &:has(dialog:open) {
    height: 100vh;
    padding-right: 15px;
    overflow-y: hidden;
  }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.content-wrapper {
  width: 100%;
  max-width: var(--tg-max-content-width);
  margin: 0 auto;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  a {
    color: inherit;
    text-decoration: none;

    &:focus,
    &:hover {
      color: inherit;
      text-decoration: underline;
    }

    &:focus-visible {
      text-decoration: none;
    }
  }
}

.app-header {
  .content-wrapper {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 2 * var(--tg-spacing-hor));
    margin-left: var(--tg-spacing-hor);
    margin-right: var(--tg-spacing-hor);
    padding: var(--tg-spacing-ver) 0;

    @media (min-width: 91.5rem) {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .app-logo {
    margin: 0;

    a {
      display: block;
      aspect-ratio: 2481 / 2482;
      height: var(--tg-logo-height);
      border-radius: 50%;

      &:focus-visible {
        outline: var(--tg-size--7) solid var(--tg-clr-secondary);
        outline-offset: var(--tg-size--7);
      }
    }

    img {
      display: block;
      height: var(--tg-logo-height);
    }
  }

  .top-nav {
    --tg-top-nav-gap: var(--tg-size-0);

    ul {
      display: flex;
      gap: var(--tg-top-nav-gap);
      font-weight: 500;
    }

    .user-name {
      display: flex;
      gap: var(--tg-top-nav-gap);

      &::before {
        content: '|';
        position: relative;
        top: -.0625em;
        color: color-mix(in oklab, var(--tg-clr-light-gray), var(--tg-clr-gray));
      }
    }

    a {
      &:focus,
      &:hover {
        color: var(--tg-clr-secondary);
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: var(--tg-fnt-family-default);
  font-weight: 600;
  color: var(--tg-clr-white);
  min-height: var(--tg-main-nav-min-height);
  margin: 0;
  box-sizing: content-box;
  background-color: var(--tg-clr-primary);
  border-bottom: var(--tg-main-nav-border-width) solid var(--tg-clr-white);

  &:has(~ main .anchor-nav) {
    border-bottom: none;
  }

  .content-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding-left: var(--tg-spacing-hor);

    > ul {
      display: flex;
      justify-content: left;
      gap: var(--tg-size-2);
      min-width: var(--tg-content-max-width);
      margin-right: var(--tg-spacing-hor);

      @media (min-width: 91.25rem) {
        margin-right: 0;
      }

      > li {
        position: relative;
        display: flex;

        &::before,
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          display: block;
          height: var(--tg-size--2);
          background-color: var(--tg-clr-white);
          pointer-events: none;
          opacity: 0;
          transition: opacity var(--tg-tmr-fast) ease-in-out;
        }

        &::before {
          top: 0;
        }

        &::after {
          bottom: 0;
        }

        &.selected,
        &:focus-within,
        &:hover {
          &::after {
            z-index: 1;
            opacity: 1;
          }
        }

        &:focus-within {
          &:not(:has(ul:focus-within)) {
            &::before {
              opacity: 1;
            }
          }
        }
      }

      > .has-children {
        > ul {
          /* The pseudo-element merely serves to make interacting with the drop down easier */
          &::before {
            content: '';
            position: absolute;
            left: 0;
            right: 33%;
            bottom: 100%;
            display: block;
            height: var(--tg-size-0);
          }
        }
      }
    }
  }

  ul {
    .has-children {
      position: relative;

      &:focus-within,
      &:hover {
        ul {
          display: block;
        }
      }

      ul {
        display: none;
        position: absolute;
        top: 100%;
        left: calc(var(--tg-size-2) * -1);
        z-index: 1;
        min-width: 100%;
        margin: 0;
        padding: var(--tg-dropdown-padding);
        background-color: var(--tg-clr-white);
        box-shadow: var(--tg-box-shadow);

        li {
          display: flex;
          flex-flow: column nowrap;

          &.selected,
          &:focus-within,
          &:hover {
            &::after {
              content: none;
            }
          }
        }

        a,
        .no-link-label {
          font-weight: 500;
          color: var(--tg-clr-black);
          white-space: nowrap;
          padding: 0;

          &:focus,
          &:hover {
            color: var(--tg-clr-secondary);
          }

          &:hover {
            text-decoration: underline;
          }

          &:focus-visible {
            text-decoration: underline;

            &::before,
            &::after {
              content: none;
            }
          }
        }

        ul {
          display: block;
          position: static;
          padding: 0 0 0 var(--tg-dropdown-padding);
          background-color: transparent;
          box-shadow: none;
        }
      }
    }

    a,
    .no-link-label {
      flex: auto;
      padding: var(--tg-size-2) 0;

      &:focus,
      &:hover {
        text-decoration: none;
      }

      &:focus-visible {
        outline: none;
      }
    }
  }
}

main {
  --tg-total-main-nav-height: calc(var(--tg-main-nav-height) + var(--tg-main-nav-border-width));
  --tg-total-nav-bars-height: var(--tg-total-main-nav-height);
  --tg-scroll-margin-top: calc(var(--tg-total-nav-bars-height) + var(--tg-size-1));
  --tg-sidebar-max-width: 21.875rem;
  flex: auto;
  display: flex;
  flex-flow: column nowrap;

  &:has(.anchor-nav) {
    --tg-total-nav-bars-height: calc(var(--tg-total-main-nav-height) + var(--tg-anchor-nav-height, 0px));
  }

  .anchor-nav {
    --tg-icon-height: 1.25em;
    position: sticky;
    top: var(--tg-anchor-nav-top);
    z-index: 1;
    background-color: var(--tg-clr-white);
    border-bottom: var(--tg-main-nav-border-width) solid var(--tg-clr-white);

    &:not(:has(li)) {
      &::after {
        content: none
      }

      .content-wrapper {
        display: none;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      height: var(--tg-size--7);
      background-color: var(--tg-clr-secondary);
    }

    .content-wrapper {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: var(--tg-size--2) var(--tg-spacing-hor) var(--tg-size--1);
      box-sizing: border-box;
    }

    ul {
      --tg-anchor-nav-min-width: 100%;
      --tg-anchor-nav-gap: var(--tg-size-6);
      --tg-anchor-nav-column-width: calc(
        var(--tg-anchor-nav-min-width) - (var(--tg-anchor-nav-gap) * (var(--tg-anchor-nav-column-count, 1) - 1))
      );
      display: flex;
      justify-content: center;
      column-count: var(--tg-anchor-nav-column-count, auto);
      column-width: var(--tg-anchor-nav-column-width, auto);
      gap: var(--tg-anchor-nav-gap);
      min-width: var(--tg-anchor-nav-min-width);
      margin: 0;

      &:has(li:nth-of-type(n + 5)) {
        --tg-anchor-nav-gap: var(--tg-size-2);
        --tg-anchor-nav-column-count: 4;
        display: block;
      }

      &:has(li:nth-of-type(5n):last-of-type),
      &:has(li:nth-of-type(6n):last-of-type),
      &:has(li:nth-of-type(9n):last-of-type) {
        --tg-anchor-nav-column-count: 3;
      }
    }

    li {
      break-inside: avoid;
    }

    a {
      color: var(--tg-clr-secondary);

      &:has(svg) {
        position: relative;
        display: inline-flex;
        gap: .25em;
        padding-left: 1.25em;
      }

      svg {
        position: absolute;
        top: .3125em;
        left: -.25em;
        fill: currentColor;
        height: var(--tg-icon-height);
      }
    }

    @media (min-width: 87.5rem) {
      ul {
        --tg-anchor-nav-min-width: calc(100% - max(var(--tg-sidebar-max-width), 25%));
      }
    }

    @media (min-width: 91.25rem) {
      .content-wrapper {
        padding-left: 0;
        padding-right: 0;
      }

      ul {
        --tg-anchor-nav-min-width: var(--tg-content-max-width);
      }
    }
  }

  .anchor {
    scroll-margin-top: var(--tg-scroll-margin-top);
  }

  .content-wrapper {
    flex: auto;
    display: flex;
    gap: 0 var(--tg-spacing-hor);

    > section {
      flex: auto;
      width: 100%;
      max-width: var(--tg-content-max-width);
      padding: var(--tg-section-padding-top) 0 calc(2 * var(--tg-size-3));

      header {
        margin: 0 0 var(--tg-size-4);

        &.audit-header {
          --tg-icon-height: 1em;
          --tg-buttons-margin-hor: var(--tg-size-2);
          --tg-buttons-margin-ver: var(--tg-size--1);
          --tg-button-padding-hor: calc((var(--tg-size--7) + var(--tg-size--3)) * 2);
          --tg-button-height: calc(var(--tg-lh-0) * 1em + (var(--tg-size--7) + var(--tg-size--5)) * 2);
          position: relative;

          /* Make space for buttons */
          &:has(> .buttons > button) {
            &::before {
              content: '';
              display: block;
              float: right;
              width: calc(
                var(--tg-button-popup-width, 0px)
                + var(--tg-buttons-gap, 0px)
                + var(--tg-button-print-width, 0px)
                + var(--tg-buttons-margin-hor)
              );
              height: calc(var(--tg-button-height) + var(--tg-buttons-margin-ver));
            }
          }

          &:has(> .buttons > *:nth-child(n + 2)) {
            --tg-buttons-gap: var(--tg-size--3);
          }

          &:has(> .buttons > .btn-popup) {
            --tg-button-popup-width: calc(10.3125em + var(--tg-button-padding-hor));
          }

          &:has(> .buttons > .btn-print-audit-phase) {
            --tg-button-print-width: calc(1.5em + var(--tg-button-padding-hor));
          }

          > *:not(dialog, .buttons) {
            &:nth-child(n + 2) {
              margin-top: var(--tg-size--1);
            }

            h3,
            h4,
            p {
              flex: none;
              order: 1;
              width: 100%;
            }
          }

          h3 {
            font-size: var(--tg-fnt-size-3);
          }

          h4 {
            &[data-phase] {
              font-size: var(--tg-fnt-size-0);
              font-weight: 600;
              font-style: italic;
              color: var(--tg-clr-secondary);
            }
          }

          .buttons {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            align-items: stretch;
            gap: var(--tg-buttons-gap);

            button,
            .btn {
              height: var(--tg-button-height);
            }

            svg {
              fill: currentColor;
              height: var(--tg-icon-height);
              margin: 0 var(--tg-size--6);
            }
          }
        }

        > :where(h1, h2, h3, h4, h5, h6) {
          color: var(--tg-clr-secondary);

          ~ :where(h1, h2, h3, h4, h5, h6) {
            color: var(--tg-clr-primary );
          }
        }

        p {
          font-weight: 600;

          &:nth-child(n + 2) {
            margin-top: var(--tg-size-1);
          }
        }
      }

      h2 {
        font-size: var(--tg-fnt-size-4);
        font-weight: 600;
      }

      h3 {
        font-size: var(--tg-fnt-size-2);
        font-weight: 600;
      }

      h4 {
        font-size: var(--tg-fnt-size-0);
        font-weight: 600;
      }

      h5 {
        font-size: var(--tg-fnt-size-0);
        font-weight: 500;
      }

      p {
        margin: 0 0 calc(var(--tg-lh-0) * 1em);

        /* Make it look more like a h4 header */
        &:has(> strong:only-child) {
          strong {
            font-weight: 600;
          }
        }
      }
    }

    .update-process {
      p {
        margin: var(--tg-spacing-ver) 0 0;

        strong {
          display: inline-block;
          margin: var(--tg-size--3) 0 0;
        }
      }

      ul {
        margin: var(--tg-size--3) 0 0;
        padding: 0;
        list-style-position: inside;
      }
    }

    .audit-log {
      margin: 0 0 var(--tg-spacing-ver);

      div {
        margin: 1rem 0;
        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      .label-inline {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0 1rem;
        margin: 0;

        dt {
          width: 7rem;
        }

        dd {
          flex: auto;
        }
      }

      dt {
        font-weight: 600;
      }

      dd {
        margin: 0;
      }
    }
  }

  .sidebar:has(nav) {
    background-image: none;
  }

  .sidebar {
    order: -1;
    position: relative;
    font-weight: 500;
    color: var(--tg-clr-secondary);
    width: 25%;
    max-width: var(--tg-sidebar-max-width);
    padding: var(--tg-size-5) var(--tg-spacing-hor) calc(2 * var(--tg-size-6));
    background: url('/images/leaf-topggz.svg') 25% 200px / 175% auto repeat scroll var(--tg-clr-light-gray);

    @media (min-width: 87.5rem) {
      flex: auto;
    }

    .section-nav {
      --tg-id-padding: 2.25rem;

      ul {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        gap: .25rem;
        line-height: var(--tg-lh--3);

        ul {
          margin: var(--tg-size--1) 0 calc(var(--tg-size--4) * -1);
        }
      }

      .audit-title {
        > a {
          font-size: var(--tg-fnt-size-2);
          font-weight: 600;
          color: var(--tg-clr-primary);

          &[data-phase] {
            position: relative;
            padding-left: var(--tg-id-padding);

            &::before {
              content: 'F' attr(data-phase);
              position: absolute;
              top: 0;
              left: 0;
              font-size: .8em;
              font-weight: 500;
              line-height: calc(var(--tg-lh--3) * var(--tg-fnt-size-2));
              color: var(--tg-clr-black);
            }
          }
        }
      }

      li {
        padding: var(--tg-size--4) 0;
      }

      .active {
        a {
          color: var(--tg-clr-primary);
        }
      }

      a,
      .no-link-label {
        display: inline-block;
        color: var(--tg-clr-secondary);

        &[data-criterium-id] {
          &:not([data-criterium-id="EVAL" i], [data-criterium-id="HERS" i]) {
            position: relative;
            padding-left: var(--tg-id-padding);

            &::before {
              content: attr(data-criterium-id);
              position: absolute;
              top: 0;
              left: 0;
              color: var(--tg-clr-black);
            }
          }
        }

        &:focus,
        &:hover {
          &[data-criterium-id] {
            &:not([data-criterium-id="EVAL" i], [data-criterium-id="HERS" i]) {
              &::before {
                color: inherit;
              }
            }
          }
        }
      }
    }

    .hallmark {
      --tg-hallmark-width: 5.25rem;
      position: absolute;
      bottom: calc((var(--tg-hallmark-width) + .5rem) / -2);
      left: calc((100% - var(--tg-hallmark-width)) / 2);
      display: block;
      width: var(--tg-hallmark-width);
      aspect-ratio: 1;
    }
  }
}

.credentials-form {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: var(--tg-size-4) var(--tg-spacing-hor);
  border: 1px solid var(--tg-clr-light-gray);
  border-radius: var(--tg-size--6);

  form {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--tg-size--2);
    width: 25rem;
    max-width: 100%;
  }
}

.filter-form {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  width: 100%;
  margin-top: var(--tg-size-4);

  .filter-input {
    flex: auto;
    width: 100%;
    min-width: 0;
  }

  .filter-clear {
    color: var(--tg-clr-secondary);
    background-color: var(--tg-clr-white);
    border-color: var(--tg-clr-secondary);

    &:focus,
    &:focus-visible,
    &:hover {
      background-color: var(--tg-clr-secondary);
      color: var(--tg-clr-white);
    }
  }
}

.audit-overview,
.audit-log-overview,
.audit-log-files {
  --tg-icon-height: 1em;
  width: 100%;
  border-collapse: collapse;

  tr {
    border-bottom: 1px solid var(--tg-clr-light-gray);
  }

  th {
    font-size: 1em;
    text-align: left;
  }

  th,
  td {
    vertical-align: top;
    padding: var(--tg-size--4) 0;
  }

  thead th:nth-of-type(n + 2),
  td {
    padding-left: var(--tg-size-0);
  }

  svg {
    position: relative;
    top: .125em;
    height: var(--tg-icon-height);
  }

  a {
    color: var(--tg-clr-secondary);
    text-decoration: none;

    &:focus,
    &:hover {
      text-decoration: underline;

      svg {
        fill: currentColor;
      }
    }
  }

  .action,
  .actions {
    --tg-action-icon-width: var(--tg-icon-height);
    width: var(--tg-action-icon-width);
    padding-right: var(--tg-size--3);

    a {
      display: flex;
      align-items: center;
      color: inherit;
      height: calc(var(--tg-lh-0) * 1em);

      &:focus,
      &:hover {
        color: var(--tg-clr-primary);
      }
    }

    svg {
      position: static;
      fill: currentColor;
    }
  }

  tbody {
    tr {
      &.organisation {
        th {
          font-size: var(--tg-fnt-size-1);
          font-weight: 700;
          color: var(--tg-clr-primary);
          padding-top: var(--tg-size-0);
        }
      }

      &:not(.organisation) {
        &:focus-within,
        &:hover {
          background-color: color-mix(in oklab, var(--tg-clr-lightest-gray) 33.3333%, var(--tg-clr-white));
        }

        th {
          svg {
            margin-right: var(--tg-size--3);
          }
        }
      }

      &.department {
        th {
          svg {
            margin-right: var(--tg-size--6);
          }
        }
      }
    }

    th {
      font-weight: 400;
      padding-left: var(--tg-size--3);

      svg {
        fill: var(--tg-clr-black);
      }
    }
  }

  .buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0;
    margin: 0;

    a {
      width: auto;
      padding-inline: .25rem;
      background-color: transparent;
      border-style: none;
    }
  }
}

.audit-log-overview,
.audit-log-files {
  margin-bottom: calc(var(--tg-lh-0) * 1em);

  thead {
    th {
      color: var(--tg-clr-primary);
    }
  }
}

.audit-log-edit {
  form {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--tg-spacing-ver);
    margin: 0 0 var(--tg-spacing-ver);
  }

  .audit-log-files {
    a {
      width: auto;
      padding-inline: .25rem;
      background-color: transparent;
      border-style: none;
    }
  }
}

.contacts {
  margin: 0 0 calc(var(--tg-lh-0) * 1em);

  > div {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--tg-size-2);
    margin: var(--tg-spacing-ver) 0 0;

    h4 {
      font-weight: 600;
      color: var(--tg-clr-primary);
      margin: 0 0 var(--tg-size--3);
    }

    article {
      width: 100%;
    }

    @media (min-width: 57.5rem) {
      flex-flow: row wrap;

      /* Make sure that department contacts are placed side by side */
      &:has(article:nth-of-type(4)) {
        article {
          &:nth-of-type(n + 2) {
            order: 2;
          }

          &.contact-person-topggz {
            &:nth-of-type(4) {
              order: 1
            }
          }
        }
      }

      article {
        width: calc((100% - var(--tg-size-2)) / 2);
      }
    }
  }

  dl {
    --tg-dt-width: 4.625em;
    margin: 0;

    > div {
      display: flex;
      gap: var(--tg-size-2);
    }

    dt {
      font-weight: 500;
      width: var(--tg-dt-width);

      &&:after {
        content: ':';
      }
    }

    dd {
      width: calc(100% - var(--tg-dt-width) - var(--tg-size-2));
      margin: 0;
    }
  }
}

.kladblok {
  .collapsible-toggle {
      color: var(--tg-clr-primary);
      font-weight: 600;
      text-decoration: underline;
  }
}

.file-overview,
.criterium-formats {
  --tg-icon-height: 1.25em;
  margin: 0 0 calc(var(--tg-lh-0) * 1em);

  h3 {
    margin: 0 0 var(--tg-size--3);
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  span {
    color: var(--tg-clr-primary);
    font-weight: 600;
    text-decoration: underline;
  }

  a {
    --tg-icon-height: 1em;

    &:focus,
    &:hover {
      svg {
        fill: currentColor;
      }
    }

    svg {
      position: relative;
      top: .25em;
      margin-right: var(--tg-size--3);
      translate: 0;
    }
  }

  svg {
    fill: var(--tg-clr-black);
    height: var(--tg-icon-height);
    translate: -.25em .125em;
  }
}

.documents-overview {
  --tg-icon-height: 1em;
  width: 100%;
  border-collapse: collapse;

  tr {
    border-bottom: 1px solid var(--tg-clr-light-gray);
  }

  th {
    font-size: 1em;
  }

  th,
  td {
    text-align: left;
    vertical-align: top;
    padding: var(--tg-size--4) var(--tg-size--3);
  }

  thead {
    th {
      &:first-of-type {
        padding-left: 0;
      }
    }
  }

  svg {
    position: relative;
    top: .125em;
    height: var(--tg-icon-height);
  }

  a {
    color: var(--tg-clr-secondary);
    text-decoration: none;

    &:focus,
    &:hover {
      text-decoration: underline;

      svg {
        fill: currentColor;
      }
    }
  }

  tbody {
    tr {
      &:focus-within,
      &:hover {
        background-color: color-mix(in oklab, var(--tg-clr-lightest-gray) 33.3333%, var(--tg-clr-white));
      }

      th {
        svg {
          margin-right: var(--tg-size--3);
        }
      }
    }

    th {
      font-weight: 400;
      padding-left: var(--tg-size--3);

      svg {
        fill: var(--tg-clr-black);
      }
    }
  }

  .doc-icon {
    width: var(--tg-size-4);
    padding-right: 0;
  }
}

[data-phase] {
  &:not(.collapsible) {
    .anchor-label {
      position: relative;
      font-size: var(--tg-fnt-size-0);
      font-weight: 600;
      line-height: var(--tg-lh--2);
      width: 100%;
      margin: 0 0 1em;
      padding: .1875em 0;
      cursor: default;

      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        top: calc(50% + 1px);
        z-index: -1;
        width: 100%;
        height: 1px;
        background-color: var(--tg-clr-secondary);
        transition: top var(--tg-tmr-fast) ease-in-out;
      }

      .non-toggle {
        padding: 0 .375em 0 0;
        background-color: var(--tg-clr-white);
      }
    }
  }

  fieldset {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;

    legend {
      &:not(.collapsible-label) {
        display: none;
      }
    }
  }
}

.collapsible {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;

  &.collapsed {
    .collapsible-label {
      cursor: pointer;

      &::before {
        top: calc(50% + 1px);
      }

      .collapsible-toggle {
        background-color: var(--tg-clr-white);

        &::after {
          transform: rotate(-90deg);
        }
      }
    }

    .collapsible-content {
      display: none;
      max-height: 0;
      opacity: 0;
      transition: max-height var(--tg-collapse-duration) ease-in-out,
                  opacity var(--tg-collapse-duration) ease-in-out;
    }
  }

  &.transitioning {
    .collapsible-content {
      display: block;
      overflow: hidden;
    }
  }

  [data-phase] & {
    .collapsible-label {
      font-weight: 500;
      color: var(--tg-clr-secondary);

      &::before {
        background-color: color-mix(in oklab, var(--tg-clr-light-gray) 80%, var(--tg-clr-gray));
      }
    }
  }

  .collapsible-label {
    position: relative;
    font-size: var(--tg-fnt-size-0);
    font-weight: 600;
    line-height: var(--tg-lh--2);
    width: 100%;
    margin: 0 0 1em;
    padding: .1875em 0;
    cursor: default;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 100%;
      z-index: -1;
      width: 100%;
      height: 1px;
      background-color: var(--tg-clr-secondary);
      transition: top var(--tg-collapse-duration) ease-in-out;
    }

    .collapsible-toggle {
      --tg-icon-height: 1.25em;
      position: relative;
      display: inline-flex;
      flex-flow: row nowrap;
      margin: 0 var(--tg-size-5) 0 0;
      padding: 0 1.25em 0 0;
      background-color: transparent;
      transition: background-color var(--tg-collapse-duration) ease-in-out;
      cursor: pointer;

      &:focus-visible {
        outline: var(--tg-size--7) solid var(--tg-clr-secondary);
        outline-offset: var(--tg-size--7);
      }

      &::after {
        content: '';
        position: absolute;
        top: .625em;
        right: .25em;
        display: block;
        width: 0;
        height: 0;
        border-style: solid solid none;
        border-width: .375em .375em 0;
        border-color:  var(--tg-clr-primary) transparent transparent;
        transition-origin: center;
        transform: rotate(0deg);
        transition: transform var(--tg-collapse-duration);
      }

      svg {
        height: var(--tg-icon-height);
        translate: -.25em .125em;
      }
    }
  }

  .collapsible-content {
    max-height: 400vh;
    opacity: 1;
    transition: max-height var(--tg-collapse-duration) ease-out,
                opacity calc(var(--tg-collapse-duration) * 2) ease-in-out;

    > * {
      margin: 0 0 calc(var(--tg-lh-0) * 1em);
    }
  }
}

fieldset {
  &.active {
    appearance: none;
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    border: none;

    .anchor-label {
      position: relative;
      font-size: var(--tg-fnt-size-0);
      font-weight: 600;
      line-height: var(--tg-lh--2);
      color: var(--tg-clr-secondary);
      width: 100%;
      margin: 0 0 1em;
      padding: .1875em 0;

      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        z-index: -1;
        width: 100%;
        height: 1px;
        background-color: var(--tg-clr-primary);
        transition: top var(--tg-tmr-fast) ease-in-out;
      }
    }
  }
}

.collapsible > .collapsible-content,
.active > .fieldset-content {
  > * {
    margin: 0 0 calc(var(--tg-lh-0) * 1em);
  }

  h4 {
    margin-top: 1rem;
  }

  .form_static {
    margin: 0;

    p {
      &:last-child {
        margin: 0;
      }
    }
  }

  .bottom-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--tg-size-2);
    margin: 0 0 calc(var(--tg-lh-0) * 1em);
  }

  .buttons {
    --tg-icon-height: 1em;
    --tg-button-height: calc(var(--tg-lh-0) * 1em + (var(--tg-size--7) + var(--tg-size--5)) * 2);
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--tg-size--2);
    margin-left: auto;

    &:has(.btn-edit) {
      margin-bottom: calc(var(--tg-size--7) - var(--tg-size-0));
    }

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: var(--tg-button-height);
      margin: 0;
      padding: 0 var(--tg-size--3);

      &.btn-cancel {
        color: var(--tg-clr-primary);
        background-color: transparent;
        border-color: transparent;

        &:focus,
        &:focus-visible,
        &:hover {
          color: var(--tg-clr-primary);
          background-color: transparent;
          border-color: var(--tg-clr-primary);
        }
      }

      &.btn-edit {
        width: calc(1.5em + (var(--tg-size--7) + var(--tg-size--3)) * 2);
        padding: 0;
      }
    }

    svg {
      fill: currentColor;
      height: var(--tg-icon-height);
      margin: 0 var(--tg-size--6);
    }
  }
}

.textarea {
  width: 100%;
}

.ck-editor {
  --tg-ck-border-width: 1px;
  width: calc(100% - var(--tg-ck-border-width) * 2) !important;
  margin: 0 0 calc(var(--tg-fnt-size--1) * 1em) !important;

  .ck-editor__main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    align-items: stretch;
    min-height: 12.5rem;

    .ck-content {
      flex: auto;
      height: calc(100% - var(--tg-ck-border-width) * 2) !important;
    }
  }
}

.audit-update-state {
  h3 {
    font-size: var(--tg-fnt-size-3);
    margin-top: var(--tg-size--1);
  }

  form {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: .5rem;

    @media (min-width: 42.5rem) {
      flex-flow: row nowrap;
      align-items: center;
    }

    input {
      padding: .5rem .625rem;

      &[type="submit"] {
        padding-block: .4375rem;
      }
    }
  }
}

dialog {
  .audit-update-state &,
  &.success-dialog {
    --tg-dialog-width: 30rem;
    position: fixed;
    z-index: 2;

    .btn-close {
      position: relative;
    }
  }
}

.app-footer {
  margin: .5rem 0 0;

  .content-wrapper {
    display: flex;
    justify-content: flex-end;
    color: var(--tg-clr-white);
    height: 4rem;
    padding: var(--tg-spacing-ver) var(--tg-spacing-hor) var(--tg-spacing-ver) 12.5%;
    background-color: var(--tg-clr-secondary);
  }

  nav {
    ul {
      display: flex;
      gap: 1em;
    }

    a {
      &:focus-visible {
        text-decoration: none;
        outline: var(--tg-size--7) solid var(--tg-clr-white);
        outline-offset: var(--tg-size--7);
      }
    }
  }
}