@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(40vh);
  }
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

#body-container {
  overflow-x: unset !important;
}

.ffb-de-formular {
  margin-bottom: 2.25rem;
  max-width: 100vw;
  width: 100%;
  padding: 0 2rem;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .formular-anchors {
    display: flex;
    align-self: stretch;
    margin: -2rem auto 0 auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding: 2rem 1rem 4rem;
    border-top: 0.0625rem solid #dcdee1;

    &.is-stuck {
      max-width: 100vw;
      border-top: none;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding-left: calc(50vw - 50% + 1rem);
      padding-right: calc(50vw - 50% + 1rem);

      & > ul {
        width: 100%;
      }
    }

    &:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 3rem;
      height: 0.0625rem;
      background-color: #dcdee1;
    }

    & > ul {
      display: flex;
      justify-content: flex-start;
      gap: 0 0.75rem;
      flex-wrap: wrap;
      margin: 0 auto;
      max-width: 75rem;

      li {
        border: 0.0625rem solid #f5f0ea;
        border-radius: 22px;
        padding: 0;
        transition: background-color 0.3s ease;
        a {
          font-size: 1rem;
          line-height: 1.5rem;
          color: #121e5b;
          text-decoration: none !important;
          cursor: pointer;
          padding: 0.5rem 1rem;
          display: inline-block;
        }

        &:before {
          display: none;
        }

        &:hover {
          background-color: #121e5b;
          a {
            color: #fff;
          }
        }
      }
    }
  }

  .sr-only {
    position: absolute;
    left: -9999rem;
    z-index: -999;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .table_heading {
    padding-top: 1.25rem;
  }

  .ffb-formulare-table {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    border-collapse: collapse;
    margin-bottom: 2rem;

    thead tr {
      th {
        padding: 0.75rem 1rem;
        font-weight: 700;
        text-align: left;
        background-color: #eeeff0;

        &:last-child {
          white-space: nowrap;
          width: 9rem;
          text-align: right;
        }
      }
    }

    tbody tr {
      &:nth-child(even) {
        background-color: #f7f7f8;
      }

      td {
        padding: 0.75rem 1rem;
        vertical-align: middle;

        a {
          text-decoration: none;
          font-size: 1rem;
          position: relative;
          line-height: 1.5rem;
          display: inline-flex;
          align-items: center;
          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0yLjUgNi41VjZIMlY2LjVIMi41Wk02LjUgNi41VjZINlY2LjVINi41Wk02LjUgMTAuNUg2VjExSDYuNVYxMC41Wk0xMy41IDMuNUgxNFYzLjI5Mjg5TDEzLjg1MzYgMy4xNDY0NUwxMy41IDMuNVpNMTAuNSAwLjVMMTAuODUzNiAwLjE0NjQ0N0wxMC43MDcxIDBIMTAuNVYwLjVaTTIuNSA3SDMuNVY2SDIuNVY3Wk0zIDExVjguNUgyVjExSDNaTTMgOC41VjYuNUgyVjguNUgzWk0zLjUgOEgyLjVWOUgzLjVWOFpNNCA3LjVDNCA3Ljc3NjE0IDMuNzc2MTQgOCAzLjUgOFY5QzQuMzI4NDMgOSA1IDguMzI4NDMgNSA3LjVINFpNMy41IDdDMy43NzYxNCA3IDQgNy4yMjM4NiA0IDcuNUg1QzUgNi42NzE1NyA0LjMyODQzIDYgMy41IDZWN1pNNiA2LjVWMTAuNUg3VjYuNUg2Wk02LjUgMTFINy41VjEwSDYuNVYxMVpNOSA5LjVWNy41SDhWOS41SDlaTTcuNSA2SDYuNVY3SDcuNVY2Wk05IDcuNUM5IDYuNjcxNTcgOC4zMjg0MyA2IDcuNSA2VjdDNy43NzYxNCA3IDggNy4yMjM4NiA4IDcuNUg5Wk03LjUgMTFDOC4zMjg0MyAxMSA5IDEwLjMyODQgOSA5LjVIOEM4IDkuNzc2MTQgNy43NzYxNCAxMCA3LjUgMTBWMTFaTTEwIDZWMTFIMTFWNkgxMFpNMTAuNSA3SDEzVjZIMTAuNVY3Wk0xMC41IDlIMTJWOEgxMC41VjlaTTIgNVYxLjVIMVY1SDJaTTEzIDMuNVY1SDE0VjMuNUgxM1pNMi41IDFIMTAuNVYwSDIuNVYxWk0xMC4xNDY0IDAuODUzNTUzTDEzLjE0NjQgMy44NTM1NUwxMy44NTM2IDMuMTQ2NDVMMTAuODUzNiAwLjE0NjQ0N0wxMC4xNDY0IDAuODUzNTUzWk0yIDEuNUMyIDEuMjIzODYgMi4yMjM4NiAxIDIuNSAxVjBDMS42NzE1NyAwIDEgMC42NzE1NzMgMSAxLjVIMlpNMSAxMlYxMy41SDJWMTJIMVpNMi41IDE1SDEyLjVWMTRIMi41VjE1Wk0xNCAxMy41VjEySDEzVjEzLjVIMTRaTTEyLjUgMTVDMTMuMzI4NCAxNSAxNCAxNC4zMjg0IDE0IDEzLjVIMTNDMTMgMTMuNzc2MSAxMi43NzYxIDE0IDEyLjUgMTRWMTVaTTEgMTMuNUMxIDE0LjMyODQgMS42NzE1NyAxNSAyLjUgMTVWMTRDMi4yMjM4NiAxNCAyIDEzLjc3NjEgMiAxMy41SDFaIiBmaWxsPSIjMDAwMDAwIi8+Cjwvc3ZnPg==);
          background-position: left center;
          padding-left: 1.5rem;
          background-repeat: no-repeat;
          background-size: 1.125rem;

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

      .date-cell {
        white-space: nowrap;
        text-align: right;
      }
    }
  }
}

@media (max-width: 48rem) {
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(7rem);
    }
  }

  .ffb-de-formular {
    padding: 0 1rem;

    .formular-anchors {
      padding: 1rem 1rem 3rem;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: 100vw;
      margin-left: -1rem;
      width: calc(100% + 2rem);

    &.is-stuck {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

      &:after {
        display: none;
      }

      &::-webkit-scrollbar {
        display: none;
      }

      & > ul {
        flex-wrap: nowrap;
        gap: 0 0.5rem;
        min-width: max-content;
        position: relative;

        &:after {
          content: "";
          display: block;
          position: absolute;
          left: -1.5rem;
          border-bottom: 1px solid #dcdee1;
          width: calc(100% + 3rem);
          top: 3.625rem;
        }

        li {
          flex-shrink: 0;
          padding: 0;
          margin-bottom: 0;

          a {
            font-size: 0.875rem;
            white-space: nowrap;
          }
        }
      }
    }

    .ffb-formulare-table {
      font-size: 0.875rem;

      thead tr th {
        padding: 0.5rem 0.75rem;

        &:last-child {
          width: 6rem;
        }
      }

      tbody tr td {
        padding: 0.5rem 0.75rem;

        &:first-child {
          word-break: break-word;
        }

        a {
          word-break: break-word;
        }
      }
    }
  }
}

@media (max-width: 30rem) {
  .ffb-de-formular {
    padding: 0 1rem;

    .ffb-formulare-table {
      font-size: 0.875rem;

      thead tr th {
        padding: 0.5rem;

        &:last-child {
          width: 5rem;
          font-size: 0.75rem;
        }
      }

      tbody tr td {
        padding: 0.5rem;
      }

      .date-cell {
        font-size: 0.875rem;
      }
    }
  }
}