@charset "UTF-8";
* {
  min-width: 0; }

body > header {
  background-image: linear-gradient(62deg, var(--blue-dark-static) 9%, #236fac 91%); }

body > header *:not(.nav-card *, .languages *, .tab-item *) {
  color: white; }

body > header path {
  fill: #fff; }

body > header .search path {
  fill: #000; }

iframe {
  border: none; }

p {
  margin: 0;
  margin-bottom: 20px; }

ul {
  margin-bottom: 20px; }

p:last-child, ul:last-child {
  margin-bottom: 0; }

body > header .title-content {
  padding-top: 20px;
  padding-bottom: 70px; }

body > header .title-content:has(> div > .button):has(> .headerimage) > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px; }

body > header h1 {
  font-size: 38px;
  line-height: 1.4;
  letter-spacing: 0.79px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  max-width: var(--width-normal);
  text-wrap: balance; }

body > header .title-content .subtitle {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: bold; }
  body > header .title-content .subtitle:not(:hover), body > header .title-content .subtitle a:not(:hover) {
    text-decoration: none; }

body > header .article-meta {
  --background-card: rgba(255,255,255,.3);
  width: max-content;
  justify-content: center;
  max-width: 100%;
  padding: .5rem 1.5rem !important; }

.toolbar-content, .header-content, .title-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px; }

.logo a {
  font-weight: 600; }
  .logo a:not(:has(img, svg)) {
    transform: translateY(-4px); }
    .logo a:not(:has(img, svg)):hover {
      text-decoration: underline;
      text-decoration-thickness: .12em; }

a {
  text-decoration: underline;
  text-decoration-thickness: .12em;
  color: var(--blue); }

a:has(:where(h1,h2,h3,h4,h5)),
article header a,
:where(h1,h2,h3,h4,h5,footer,nav,.nav-item) a {
  text-decoration: none; }

a:not(.card) {
  font-weight: 600; }

a:visited {
  color: var(--blue); }

a:hover {
  color: var(--blue-dark); }

a.disabled {
  color: var(--text-tertiary) !important;
  pointer-events: none; }

h1, .h1 {
  font-weight: bold;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0.79px;
  margin-top: 40px;
  margin-bottom: 16px;
  padding: 0;
  -webkit-transition: color 100ms;
  transition: color 100ms;
  clear: left; }

h1 a, h2 a, h3 a, h4 a {
  color: inherit !important;
  font-weight: 700 !important; }

h2, .h2 {
  font-weight: bold;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.67px;
  clear: left; }

a:not(.card) > :is(h2,h3,h4,h5,h6)::after,
:is(h2,h3,h4,h5,h6) > a::after {
  content: "\203A";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(1em - .15em);
  padding-bottom: .15em;
  padding-left: .05em;
  width: calc(1em - .05em);
  color: var(--card-color);
  border-radius: 50%;
  margin-left: .1em;
  transition: all .2s; }

a:not(.card) > :is(h2,h3,h4,h5,h6):hover::after,
:is(h2,h3,h4,h5,h6) > a:hover::after {
  color: white;
  background-color: var(--card-color); }

main > article > :is(p:not([class*=flex-]),ul,ol,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,> blockquote,> hr) {
  margin: 0 auto;
  margin-bottom: 20px;
  max-width: var(--width-normal); }

h2 a {
  color: inherit !important; }

h3, .h3 {
  font-weight: bold;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: 0.58px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 0;
  transition: color 100ms;
  clear: left; }

h3 a {
  color: inherit !important; }

h4, .h4 {
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-black);
  clear: left; }

h4 a {
  color: inherit !important; }

h5, .h5 {
  color: var(--blue-dark);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  font-weight: bold;
  font-size: 16px;
  clear: left; }

h5 a {
  color: inherit !important; }

h6 a {
  color: inherit !important; }

#menu li {
  display: inline; }

.post-list {
  margin: 40px auto;
  display: flex;
  flex-direction: column; }
  .post-list > li {
    list-style: none !important; }

pre {
  margin: 2em 0; }

ul {
  padding-left: 0; }

ul li {
  list-style: none; }

article ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px; }

article ul ul {
  padding-left: 40px; }

article li ul {
  margin: 20px 0 !important; }

ul[class*="flex-"] {
  padding-left: 0 !important; }

article ul li {
  list-style: "\203A\20"; }

article ul li::marker {
  color: var(--blue);
  font-size: 1.8rem;
  line-height: 0; }

article ol {
  padding-left: 1.5em;
  list-style: none; }

article ol li {
  position: relative;
  padding-left: .75em;
  padding-bottom: .75em; }

article ol li::before {
  content: counter(list-item) " ";
  /*Instead of ". " */
  border-radius: 50%;
  border: 0.15em solid var(--blue);
  position: absolute;
  width: 1.4em;
  height: 1.4em;
  color: var(--blue);
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  left: -1.6em;
  top: .1em; }

.author-profile-pic {
  border-radius: 50%;
  background-color: var(--blue-light);
  overflow: hidden;
  flex-shrink: 0; }

nav ul {
  display: flex;
  flex-wrap: wrap;
  font-weight: 600;
  padding-left: 0; }

header nav ul > li > :is(a,.nav-trigger) {
  display: block;
  padding: 18px; }

nav li img {
  width: 32px; }

img {
  max-width: 100%;
  object-fit: contain; }

details {
  border-radius: 7px;
  background-color: var(--background-card);
  /*border: 3px solid var(--card-color-light);*/
  border: 3px solid var(--background-tertiary);
  /* overflow: hidden; */
  /* breaks focus indicators */
  margin-bottom: 20px;
  clear: right; }

details summary {
  cursor: pointer;
  padding: 20px; }
  details summary:hover, details summary:active {
    background-color: var(--bg-gray); }

details > *:not(summary) {
  animation: fade .5s;
  padding-left: 108px;
  padding-right: 20px; }
  details > *:not(summary):nth-child(2) {
    padding-top: 20px;
    border-top: 2px solid var(--background-tertiary); }
  details > *:not(summary):last-child {
    padding-bottom: 20px; }

@keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

details summary::-webkit-details-marker {
  display: none; }

details > summary::after {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  width: 1em;
  height: 1em;
  line-height: 0;
  margin-top: 1em;
  margin-left: auto;
  content: url(/images/icons/plus.svg);
  font-weight: bolder;
  color: var(--card-color-light);
  border: 2px solid var(--card-color-light);
  border-radius: 50%;
  transition: all .2s ease-in-out;
  flex-shrink: 0; }

details:hover summary::after {
  color: var(--card-color);
  border-color: var(--card-color); }

details[open] > summary::after {
  transform: rotate(45deg); }

.versionnumber {
  font-size: 35px;
  color: var(--red);
  line-height: 1;
  text-align: right; }

ul.history-timeline {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2em;
  position: relative;
  margin: 30px auto;
  --center-width: 35px;
  --indicator-offset: 0em;
  --indicator-height: .25em;
  --indicator-spacing: 0.3892em; }
  ul.history-timeline::after {
    content: "";
    position: absolute;
    z-index: -1;
    display: block;
    height: 100%;
    width: var(--center-width);
    top: var(--indicator-offset);
    bottom: 0;
    left: calc(50% - .5 * var(--center-width));
    background: repeating-linear-gradient(180deg, var(--background-tertiary), var(--background-tertiary) var(--indicator-height), rgba(0, 0, 0, 0) var(--indicator-height), rgba(0, 0, 0, 0) calc(var(--indicator-spacing) * 2)); }
  ul.history-timeline li {
    display: flex;
    align-items: center;
    gap: 30px;
    font-weight: bold;
    line-height: 1.4;
    width: calc(50% + .5 * var(--center-width)); }
    ul.history-timeline li .date {
      color: var(--blue); }
    ul.history-timeline li::after, ul.history-timeline li::before {
      width: calc(var(--center-width) * 3);
      height: var(--indicator-height);
      border-radius: calc(var(--indicator-height) * .5);
      background-color: var(--blue-light);
      flex-shrink: 0;
      flex-grow: 0;
      z-index: 10; }
  ul.history-timeline li:nth-child(odd) {
    margin-right: auto;
    text-align: right;
    justify-content: flex-end; }
    ul.history-timeline li:nth-child(odd)::after {
      content: ""; }
  ul.history-timeline li:nth-child(even) {
    margin-left: auto;
    text-align: left;
    justify-content: flex-start; }
    ul.history-timeline li:nth-child(even)::before {
      content: ""; }

main {
  max-width: 1120px;
  padding: 0 20px;
  margin: 40px auto;
  min-height: 25vh; }

article {
  position: relative; }

article.card:has(.article-card-image-container) {
  padding: 0;
  overflow: hidden; }

article.card:has(.article-card-image-container) div.flex-column {
  padding: 27px; }

.article-card-image-container {
  flex: 5 1 0;
  min-width: 200px;
  max-width: max-content; }

.article-card-image-container img {
  height: 100%;
  object-fit: cover;
  object-position: center; }

fieldset {
  border: none;
  padding: 0;
  margin: 1em 0; }

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number] {
  padding: 6px 50px 6px 12px;
  font-size: 15px;
  color: var(--blue-dark);
  background-color: var(--background);
  font-weight: 600;
  border-radius: 5px;
  border: solid 1px #cbced3;
  height: auto;
  line-height: 1.2;
  width: 100%; }

p > .button, p > .button:hover {
  display: block;
  width: max-content;
  margin: 0 auto; }

.entry-content > *:last-child {
  margin-bottom: 0; }

.article-content {
  width: 100%;
  hyphens: auto; }
  .article-content .subtitle {
    font-size: 20px; }
    .article-content .subtitle:empty {
      display: none; }
    .article-content .subtitle:not(:hover), .article-content .subtitle a:not(:hover) {
      text-decoration: none; }

.article-newsletters img {
  max-width: Min(100%, 500px); }

.article-newsletters div:has(> time) {
  text-align: center; }

.article-newsletters :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5) {
  text-align: center; }

nav.pagination {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 30px auto;
  max-width: var(--width-normal);
  overflow-x: auto; }
  nav.pagination a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--blue);
    border-radius: 100px;
    line-height: 26px;
    width: 30px;
    height: 30px;
    font-weight: bold;
    transition: color .3s, background .3s, border .3s;
    white-space: nowrap; }
    nav.pagination a.next, nav.pagination a.prev {
      font-size: 1.5em;
      padding-bottom: 4px;
      padding-left: 3px;
      border-color: transparent; }
    nav.pagination a.active, nav.pagination a:hover {
      background-color: var(--blue);
      border-color: var(--blue);
      color: #f0f3f8; }
  nav.pagination > * {
    flex-shrink: 0; }

@media print {
  .toolbar,
  .headerimage,
  nav,
  .slider_nav,
  .slider-container,
  footer,
  button {
    display: none !important; }
  * {
    box-shadow: none !important;
    opacity: 1 !important; }
  .card:not(.plain) {
    border: 2px solid black; } }

@font-face {
  font-family: OpenSans;
  src: local(OpenSans-Regular), url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap; }

@font-face {
  font-family: OpenSans;
  src: local(OpenSans-SemiBoldItalic), url("../fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-stretch: normal;
  font-display: swap; }

@font-face {
  font-family: OpenSans;
  src: local(OpenSans-SemiBold), url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  font-display: swap; }

@font-face {
  font-family: OpenSans;
  src: local(OpenSans-Bold), url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  font-display: swap; }

body {
  font-family: OpenSans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight: 400; }

input, select, button {
  font-family: OpenSans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }

address {
  font-style: normal; }

:root {
  --text-color: black;
  --text-secondary: #4a4a4a;
  --text-tertiary: #a1a1a1;
  --background: white;
  --background-secondary: var(--bg-gray);
  --background-tertiary: #e7ebf3;
  --background-footer: white;
  --background-card: white;
  --blue-dark-static: #133170;
  --blue-light: #5291c3;
  --blue: #3a77a8;
  --blue-dark: #133170;
  --red: #ac485a;
  --red-light: #c8596d;
  --red-dark: #aa4658;
  --green: #228255;
  --green-light: #48ac7d;
  --green-dark: #266a4a;
  --yellow-light: rgb(245,195,67);
  --yellow-dark: rgb(185, 133, 0);
  --yellow: rgb(224, 161, 0);
  --orange-light: rgb(245, 156, 67);
  --orange-dark: rgb(192, 112, 0);
  --orange: rgb(224, 131, 0);
  --teal-light: #52aec3;
  --teal-dark: #2f7a8d;
  --teal: #3a92a8;
  --purple-light: #914191;
  --purple-dark: #542554;
  --purple: #723372;
  --gray-light: #949bb5;
  --gray-dark: #3b3e48;
  --gray: #686d7f;
  --bg-gray: #f0f3f8;
  --text-black: black;
  --footer-link-color: rgb(74, 74, 74);
  --width-large: 1120px;
  --width-normal: 920px;
  --width-small: 735px;
  --global-margin: 30px;
  --global-margin-small: 20px;
  --gutter-width: 40px
; }

html {
  scroll-behavior: smooth; }

body {
  background-color: var(--bg-gray);
  color: var(--text-black);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.23px;
  margin: 0;
  overflow-wrap: break-word; }

* {
  box-sizing: border-box; }

blockquote {
  font-style: italic;
  font-weight: bold; }

button#totop {
  background-color: var(--green);
  border-radius: 50%;
  height: 45px;
  width: 45px;
  z-index: 100;
  position: sticky;
  margin-bottom: 30px;
  bottom: 30px;
  left: calc(100% - 45px - 30px); }
  button#totop svg {
    transform: rotate(-90deg);
    fill: white; }

p:empty {
  display: none; }

table {
  border-collapse: collapse;
  background-color: var(--background);
  width: 100%;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 var(--blue-dark-static);
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 30px; }

table a {
  font-weight: inherit; }

table thead tr {
  background-color: var(--thead-color); }

table thead tr th {
  color: #fff;
  font-weight: bold;
  padding-top: 22px; }

table tbody tr {
  background: var(--background); }

table tbody tr:nth-child(even) {
  background: var(--bg-gray); }

table tr th,
table tr td {
  padding: 16px 32px;
  max-width: 569px; }

table .text-small {
  display: block; }

table, table.darkblue {
  --thead-color: var(--blue-dark); }

table.darkgray {
  --thead-color: var(--gray-dark); }

table.blue {
  --thead-color: var(--blue); }

table.green {
  --thead-color: var(--green-dark); }

table.red {
  --thead-color: var(--red-dark); }

table.yellow {
  --thead-color: var(--yellow-dark); }

table.teal {
  --thead-color: var(--teal-dark); }

table.purple {
  --thead-color: var(--purple-dark); }

kbd {
  display: inline-block;
  border-radius: .3em;
  padding: 0 .3em;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  white-space: nowrap;
  background-color: var(--background-tertiary);
  border: 1px solid var(--text-tertiary);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  cursor: default; }

dialog {
  position: fixed !important;
  border: none;
  background: none;
  overflow: hidden; }
  dialog > .container.card {
    max-height: calc(100vh - 2*var(--global-margin));
    overflow-y: auto; }

dialog::backdrop {
  background-color: #0009;
  backdrop-filter: blur(5px); }

dialog, [popover] {
  color: var(--text-color);
  animation: fadeOut 0.5s forwards; }
  dialog::backdrop, [popover]::backdrop {
    animation: backdropFadeOut 0.5s forwards; }
  dialog:popover-open, dialog[open], [popover]:popover-open, [popover][open] {
    animation: fadeIn 0.5s forwards; }
    dialog:popover-open::backdrop, dialog[open]::backdrop, [popover]:popover-open::backdrop, [popover][open]::backdrop {
      animation: backdropFadeIn 0.5s forwards; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Keyframes for the backdrop pseudo-element */
@keyframes backdropFadeIn {
  from {
    background: #0000;
    backdrop-filter: blur(0); }
  to {
    background: #0009;
    backdrop-filter: blur(5px); } }

@keyframes backdropFadeOut {
  from {
    background: #0009;
    backdrop-filter: blur(5px); }
  to {
    background: #0000;
    backdrop-filter: blur(0); } }

dialog#consent-manager {
  background: var(--background-secondary);
  padding: var(--global-margin);
  max-width: none;
  width: 100%;
  margin-bottom: 0; }
  dialog#consent-manager > * {
    width: var(--width-normal);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; }
  dialog#consent-manager p {
    width: var(--width-normal);
    max-width: 100%; }

[class*="flex-"] {
  align-items: center;
  display: flex;
  gap: 40px; }

.gap-small {
  gap: 20px; }

.nogap {
  gap: 0; }

.flex-row-dynamic, .container.image-right, .container.image-left, .container.row > .container-content, .flex-row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap; }

.flex-column {
  flex-direction: column;
  justify-content: center; }

.flex-wrap {
  flex-wrap: wrap; }

.space-between {
  justify-content: space-between; }

.align-start {
  align-items: flex-start; }

.align-center {
  align-items: center; }

.align-stretch {
  align-items: stretch; }

.justify-center {
  justify-content: center; }

.justify-start {
  justify-content: flex-start; }

.container.justify-start .container-content {
  justify-content: flex-start !important; }
  .container.justify-start .container-content .card {
    margin-left: 0;
    margin-right: 0; }

.justify-stretch {
  justify-content: stretch; }

.p0 {
  padding: 0; }

.my {
  margin-top: 30px;
  margin-bottom: 30px; }

.mb {
  margin-bottom: 30px; }

.mb-0 {
  margin-bottom: 0 !important; }

.mbs {
  margin-bottom: 20px !important; }

.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mts {
  margin-top: 20px; }

.mt {
  margin-top: 30px; }

.strong {
  font-weight: bold; }

.spacer {
  flex-grow: 100; }

.qf-spacer {
  height: 30px;
  flex: 1 0 240px; }

.qf-spacer.small {
  height: 20px; }

.no-bullet {
  list-style: none !important; }

.text-center {
  text-align: center; }

.container {
  clear: both;
  margin: 20px auto;
  max-width: var(--width-normal); }

.container:has(> .card), .container.card {
  margin-bottom: 60px; }
  .container:has(> .card):not(.offset), .container.card:not(.offset) {
    margin-top: 60px; }

article > .container.card, article > .container:has(.card) {
  margin-bottom: 60px; }
  article > .container.card:not(.offset), article > .container:has(.card):not(.offset) {
    margin-top: 60px; }

.container .container.card, li > .container {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

body:not(:has(.tablist)) .container.offset {
  margin-top: -75px !important; }

.container {
  display: flex !important;
  flex-direction: column;
  gap: 30px; }
  .container > * {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1; }
  .container > .container-image {
    flex-grow: 0;
    min-width: 36px;
    min-height: 36px;
    /* Make sure the image will never be larger than 300px and no larger than it's natural size*/
    max-width: max-content;
    object-fit: scale-down; }
  .container > img.container-image[src$=".svg"] {
    /* SVGs without intrinsic size have a max-content of 0.*/
    max-width: 100%; }

.container.ribbon {
  padding: 40px;
  margin-bottom: 90px;
  margin-top: 90px;
  max-width: none !important; }
  .container.ribbon > .container-content {
    max-width: var(--width-large);
    width: 100%;
    margin: 0 auto; }
  .container.ribbon .container {
    margin-top: 0;
    margin-bottom: 0; }

.container.ribbon:has(+ .container.ribbon) {
  margin-bottom: 0; }

.container.ribbon + .container.ribbon {
  margin-top: 0; }

.container.ribbon:not(.alternative) {
  color: white;
  background-color: var(--blue-dark);
  background-image: linear-gradient(81deg, #133170 11%, #236fac 89%); }
  .container.ribbon:not(.alternative) .container-content > * {
    color: white; }
    .container.ribbon:not(.alternative) .container-content > * > a, .container.ribbon:not(.alternative) .container-content > * > p > a, .container.ribbon:not(.alternative) .container-content > * > strong > a, .container.ribbon:not(.alternative) .container-content > * > em > a {
      color: white; }

.container.ribbon .container-content > *:not(.width-wide):not(.width-normal) {
  max-width: var(--width-small);
  margin-left: auto;
  margin-right: auto; }

.container.wide, .container.width-wide {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto; }

.container:not(.ribbon).normal, .container:not(.ribbon).width-normal {
  max-width: var(--width-normal);
  margin-left: auto;
  margin-right: auto; }

.container.thin, .container.width-thin {
  max-width: 775px;
  margin-left: auto;
  margin-right: auto; }

.container.width-full {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }

.container:not(.row) > .container-content > :first-child {
  margin-top: 0; }

.container:not(.row) > .container-content > :last-child {
  margin-bottom: 0; }

.container.row > .container-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 40px; }
  .container.row > .container-content > .container, .container.row > .container-content .card, .container.row > .container-content > div:has(.card), .container.row > .container-content > div > a.card {
    flex: 1 0 240px; }

.container.row.width-wide > .container-content {
  gap: 20px; }

.container.row > .container-content > .button-wrapper {
  /* make sure buttons in a row have the same width */
  flex-basis: 346px;
  /* Just right to get two items next to each other */
  flex-grow: 1; }

.container.row > .container-content > .container.image-top > .container-image {
  /* Top images in a row should all have the same size */
  height: 100px; }

.container.row > .container-content > p {
  margin: 0;
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center; }

.container.row > .container-content .three-in-a-row,
.container.row.three-in-a-row > .container-content .container {
  flex-basis: 241px !important;
  max-width: 333.333px; }

.container.row.width-wide > .container-content .three-in-a-row,
.container.row.width-wide.three-in-a-row > .container-content .container {
  flex-basis: 265px !important;
  max-width: 347px; }

.ribbon {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  display: flex;
  justify-content: center; }
  .ribbon .ribbon-content {
    width: 100%;
    padding: 20px; }
  .ribbon.alternative {
    background-color: var(--background); }

.container.centered {
  text-align: center; }

.container:not(.imgfill) .container-image {
  align-self: center; }

.container:not(.imgfill) .container-image:not([src$='.svg']) {
  border-radius: 5px; }

.card.imgfill {
  overflow: hidden; }

.card.imgfill .container-image {
  margin: -27px;
  border-radius: 0 !important;
  object-fit: cover;
  align-self: stretch;
  max-width: none;
  flex-grow: 1;
  background-color: var(--card-color); }

.card.imgfill.image-left .container-image {
  margin-right: 0; }

.card.imgfill.image-right .container-image {
  margin-left: 0; }

.card.imgfill.image-top .container-image {
  margin-bottom: 0; }

p:has(> .container-image) {
  display: contents; }

.container.image-right, .container.image-left {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: center; }
  .container.image-right > .container-content, .container.image-left > .container-content {
    flex: 1 0 150px; }
  .container.image-right img.container-image, .container.image-left img.container-image {
    flex: 0 1 300px; }

.container.image-top img.container-image {
  max-width: 100%; }

.container.image-right {
  flex-direction: row-reverse; }

.container-title {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 38px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 20px; }

.container-icon, .accordion-icon {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0; }

.accordion-icon {
  height: auto;
  width: auto;
  min-width: 48px;
  max-width: 150px; }

.container-title:not(:has(> .container-title-text)) {
  float: right;
  margin-left: .5rem;
  margin-bottom: .5rem; }
  .container-title:not(:has(> .container-title-text)) .container-icon {
    height: 75px; }
  .container-title:not(:has(> .container-title-text)) + * {
    margin-top: 0; }

.nav-card {
  display: block;
  max-width: var(--width-normal);
  box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.1);
  transition: width .3s, height .3s, color .3s;
  padding: 40px 32px 27px;
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--background);
  position: relative; }

.nav-card-title {
  min-height: 38px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--blue-dark-static);
  margin-bottom: 20px; }

.nav-card a {
  color: var(--text-black); }

.nav-card {
  box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.1);
  transition: width .3s, height .3s, color .3s;
  padding: 40px 32px 27px;
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--background); }

.nav-card a {
  text-decoration: underline;
  text-decoration-thickness: .12em; }

.nav-card::before {
  content: "";
  background-color: var(--blue);
  position: absolute;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  top: -7px;
  left: 0;
  right: 0;
  height: calc(5px + 7px); }

.nav-card:is(.red, .green, .blue)::before {
  background-color: var(--card-color);
  filter: brightness(1.3); }

.nav-card > .nav-item:first-child > a {
  margin-top: 7px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

@media only screen and (min-width: 751px) {
  .nav-card.red .nav-item.child.special a {
    background-color: var(--red); }
    .nav-card.red .nav-item.child.special a:hover {
      background-color: var(--red-light); }
  .nav-card.blue .nav-item.child.special a {
    background-color: var(--blue); }
    .nav-card.blue .nav-item.child.special a:hover {
      background-color: var(--blue-light); }
  .nav-card.green .nav-item.child.special a {
    background-color: var(--green); }
    .nav-card.green .nav-item.child.special a:hover {
      background-color: var(--green-light); } }

.nav-card > .nav-item:first-child > a {
  margin-top: 7px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

#nav-toggle {
  display: none;
  box-shadow: none !important; }

nav .title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.39;
  letter-spacing: 0.38px; }

nav .subtitle {
  padding-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.25px;
  color: var(--text-secondary); }

nav .sublist {
  background-color: var(--blue-dark);
  min-width: 350px;
  display: none;
  flex-direction: column;
  position: absolute;
  padding: 0;
  top: 100%;
  left: -100%;
  z-index: 50; }

.sublist:is(.red, .green, .blue) {
  background-color: var(--card-color-light); }

.sublist a {
  color: var(--blue-dark);
  text-decoration: none; }

.sublist .nav-item a {
  background-color: var(--bg-gray); }

.sublist .sublist {
  display: flex;
  position: relative;
  border: none;
  top: auto;
  left: auto; }

.sublist .sublist a {
  background-color: var(--background-tertiary);
  padding-left: 20px; }

ul.list {
  align-items: center;
  justify-content: flex-end;
  flex-grow: 1; }

.nav-item {
  position: relative; }

.nav-trigger {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.23px;
  overflow-wrap: break-word;
  background: none;
  box-shadow: none !important; }

#nav-toggle {
  background: none;
  padding: 0;
  box-shadow: none !important; }

@media only screen and (min-width: 751px) {
  .nav-item.parent.special :is(a,.nav-trigger) {
    display: flex;
    align-items: center;
    border: 2px #fff solid;
    border-radius: 28px;
    padding: 5px 15px 6px 24px;
    margin-left: 16px; }
  .nav-item.parent.special :is(a,.nav-trigger):hover {
    background-color: white;
    color: var(--blue-dark-static);
    text-decoration: none; }
    .nav-item.parent.special :is(a,.nav-trigger):hover * {
      fill: var(--blue-dark-static); } }

.nav-item.child {
  background-color: transparent; }

.nav-item.child a {
  padding: 14px 32px; }

.nav-item.child a:hover {
  background-color: var(--background); }

@media only screen and (min-width: 751px) {
  .nav-item.child.special a {
    background-color: var(--blue-dark-static);
    color: white;
    padding: 32px; }
  .nav-item.child.special a * {
    color: white !important; } }

.nav-item.parent > :is(a,.nav-trigger):hover {
  text-decoration: underline;
  text-decoration-thickness: .12em; }

.nav-item.grandchild a {
  padding: 10px 48px;
  padding-right: 10px; }

@media only screen and (min-width: 751px) {
  .list:not(:has([aria-expanded='true'])) .nav-item:hover .sublist {
    display: flex; } }

.nav-item:has([aria-expanded='true']) .sublist {
  display: flex; }

form.search {
  display: contents; }

.searchbox {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  max-width: 300px;
  background: white;
  border-radius: 14px;
  position: relative;
  padding-left: 26px;
  padding-right: 14px; }

.searchbox input {
  color: black !important;
  flex-grow: 1;
  padding: 0;
  height: 28px;
  width: 2.5rem;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  outline-offset: -2px;
  -webkit-appearance: none; }

.searchbox-icon, .searchbox-icon svg {
  height: 22px;
  width: 22px; }

header .toolbar {
  border-bottom: 1px solid #cbced3;
  margin-bottom: 16px; }

.toolbar-content {
  display: flex;
  align-items: center;
  height: 52px; }

.language {
  position: relative;
  left: -8px; }

.language button.current {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  position: relative;
  box-shadow: none !important; }

.language .current svg {
  transition: all .3s;
  transform: translateY(2px); }

.language.active .current svg {
  transform: rotate(180deg) translateY(-2px); }

.language ul.languages {
  margin: 0;
  position: absolute;
  display: none;
  z-index: 10;
  flex-direction: column;
  top: calc(100% + 4px);
  left: 7px;
  min-width: 180px;
  background-color: var(--background); }

.language.active ul.languages {
  display: flex; }

.language ul.languages a {
  display: block;
  text-decoration: none;
  padding: 8px 32px 8px 12px;
  color: var(--text-black); }

.language ul.languages a:hover {
  color: var(--blue); }

.language ul.languages a.active {
  background-color: var(--blue);
  color: white;
  padding: 8px 32px 8px 12px; }

ul.tablist {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(1180px + 16px);
  margin: 0 auto;
  padding: 0 30px; }

li.tab-item {
  display: contents; }

li.tab-item a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 1rem;
  line-height: 1;
  gap: 1rem;
  flex: 0 1 260px;
  background-color: #fffc;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 1.2rem;
  font-weight: 600;
  overflow: hidden;
  min-height: 70px; }

li.tab-item.current a, li.tab-item a:hover {
  box-shadow: 0 -6px 0 0 var(--blue-dark);
  background-color: var(--bg-gray); }

li.tab-item:not(.red, .green, .blue, .darkblue, .purple, .yellow, .teal):nth-child(1) {
  --card-color: var(--green);
  --card-color-light: var(--green-light); }

li.tab-item:not(.red, .green, .blue, .darkblue, .purple, .yellow, .teal):nth-child(2) {
  --card-color: var(--red);
  --card-color-light: var(--red-light); }

li.tab-item:not(.red, .green, .blue, .darkblue, .purple, .yellow, .teal):nth-child(3) {
  --card-color: var(--blue);
  --card-color-light: var(--blue-light); }

li.tab-item:not(.red, .green, .blue, .darkblue, .purple, .yellow, .teal):nth-child(4) {
  --card-color: var(--yellow);
  --card-color-light: var(--yellow-light); }

li.tab-item:not(.red, .green, .blue, .darkblue, .purple, .yellow, .teal):nth-child(5) {
  --card-color: var(--teal);
  --card-color-light: var(--teal-light); }

li.tab-item.current a,
li.tab-item a:hover {
  box-shadow: 0 -6px 0 0 var(--card-color-light); }

li.tab-item a, li.tab-item a:hover {
  color: #133170; }

li.tab-item a img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  /* otherwise some SVGs stay small */
  min-height: 40px;
  object-fit: contain; }

.title-content.has-headerbutton h1 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start; }

.title-content.has-headerimage {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap; }
  .title-content.has-headerimage h1 {
    max-width: 590px;
    margin: 0;
    text-align: left; }
  .title-content.has-headerimage .subtitle {
    text-align: left;
    max-width: Min(100%, 650px); }

.headerimage {
  max-width: 460px;
  min-width: 200px;
  flex: 1 1 200px;
  margin-bottom: -70px;
  margin-top: -25px;
  object-fit: contain;
  object-position: right; }
  .headerimage.has-mask {
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center; }

video.headerimage {
  pointer-events: none;
  /* stops video from interfering with mouseover menu */ }

.title-content.has-headerbutton .headerimage {
  max-height: 381px; }

body > footer {
  font-size: .95rem;
  background-color: var(--background-footer);
  padding: 110px 40px; }
  body > footer > * {
    max-width: 1120px;
    display: flex;
    gap: 45px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }
    body > footer > * > * {
      width: max-content; }
  body > footer a:not(:hover, :active) {
    color: var(--footer-link-color); }
  body > footer ul, body > footer li {
    margin: 0;
    padding: 0; }
  body > footer ul {
    display: flex;
    flex-direction: column; }
  body > footer h5 {
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 25px; }
  body > footer ul li {
    display: block;
    margin-bottom: 10px; }
  body > footer ul li:has(img) {
    /* equal visual height */
    margin-top: -3px;
    margin-bottom: 8.5px; }
  body > footer li a {
    font-weight: 550 !important;
    padding: 0;
    margin: 0; }
  body > footer li a:has(img) {
    display: flex;
    gap: 5px;
    align-items: center; }
  body > footer li img {
    flex-shrink: 0; }
  body > footer .company {
    font-size: 13px;
    font-weight: 600; }
    body > footer .company a {
      display: block; }
  body > footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
    font-weight: 600;
    color: var(--blue-dark); }

main:has(.article-content) {
  max-width: calc(var(--width-normal) + 2 * 45px); }

.card:has(.article-content), .card.article-content {
  padding: 45px !important;
  max-width: 100% !important; }

.article-blog + footer {
  margin-top: 30px; }

.article-blog + footer .related {
  margin: 0;
  padding: 0;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, max-content));
  grid-template-rows: auto; }
  .article-blog + footer .related li {
    list-style: none;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1; }

.article-content.card p, .article-content.card li, .article-content.card blockquote, .card .article-content p, .card .article-content li, .card .article-content blockquote {
  font-size: 1.2rem; }

.article-content.card a, .card .article-content a {
  font-weight: inherit; }

.article-content.card img, .card .article-content img {
  display: block;
  margin: 0 auto; }

.article-content.card code, .card .article-content code {
  font-size: 0.9em;
  background-color: var(--bg-gray);
  border-radius: 5px;
  padding: 2px 5px;
  word-wrap: break-word; }

.article-content.card pre code, .card .article-content pre code {
  padding: 0;
  background-color: none; }

.article-content.card pre, .card .article-content pre {
  margin-left: 0;
  line-height: 1.2;
  overflow-y: auto;
  background-color: var(--bg-gray);
  padding: 1rem;
  border-radius: 5px;
  max-width: var(--width-normal); }

.blog-card {
  height: 100%;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column; }
  .blog-card a {
    display: block; }
  .blog-card h3, .blog-card h2 {
    line-height: 1.2;
    font-size: 1rem; }
  .blog-card > *:not(a, img), .blog-card a h3, .blog-card a h2 {
    margin: 10px 15px; }
  .blog-card img {
    aspect-ratio: 16/9;
    object-fit: cover !important;
    width: 100%;
    height: auto;
    background-color: var(--background); }

figure {
  display: flex;
  flex-direction: column;
  gap: .75rem; }

figure:has(figcaption):not(:has(img.plain)) {
  margin: 0;
  margin-bottom: 30px;
  padding: 1rem;
  background-color: var(--bg-gray);
  border-radius: 5px; }

button:has(> figure) {
  display: block; }

p > figure, p > button:has(> figure) {
  margin-left: auto;
  margin-right: auto; }

figure img {
  border-radius: 3px; }

figure figcaption {
  max-width: 80ch;
  margin: 0 auto;
  text-align: center;
  color: var(--text-secondary); }

hr {
  height: 3px;
  background-color: var(--background-tertiary);
  border: none;
  margin: 60px; }

.news.hentry, .news.pentry {
  padding-bottom: 40px;
  margin: 0 auto;
  max-width: 920px;
  border-bottom: 1px solid #cbced3; }
  .news.hentry .entry-title, .news.pentry .entry-title {
    font-weight: 600;
    font-size: 20px;
    color: var(--blue-dark);
    line-height: 20px;
    letter-spacing: 0;
    margin-top: 16px;
    margin-bottom: 8px;
    margin-left: 0;
    padding: 0;
    -webkit-transition: color 100ms;
    transition: color 100ms; }
  .news.hentry time, .news.pentry time {
    font-size: 13px; }
  .news.hentry header, .news.pentry header {
    display: flex;
    justify-content: space-between;
    align-items: first baseline; }
  .news.hentry .entry-content > :last-child, .news.pentry .entry-content > :last-child {
    margin-bottom: 0; }
  .news.hentry .read-more, .news.pentry .read-more {
    font-weight: bold;
    display: flex;
    text-decoration: none;
    align-items: center;
    gap: 1em; }
    .news.hentry .read-more::after, .news.pentry .read-more::after {
      content: "\203A";
      font-size: 2em;
      font-weight: normal;
      margin-top: -.15em; }

li:last-child .news.hentry, li:last-child .news.pentry {
  border-bottom: none;
  padding-bottom: 0; }

ul.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 425px);
  grid-template-rows: auto;
  gap: 30px; }

.qf-video-embed {
  max-width: var(--width-small);
  margin: var(--global-margin) auto; }
  .qf-video-embed .iframe-container {
    display: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    height: auto;
    aspect-ratio: 16/9;
    background-color: var(--blue-light);
    background-size: 101%;
    /* avoid ugly 1px artifacts in YT thumbnails */
    background-position: center;
    background-repeat: no-repeat; }
    .qf-video-embed .iframe-container p, .qf-video-embed .iframe-container a {
      color: white; }
    .qf-video-embed .iframe-container p {
      font-size: 1.3rem;
      padding: 1rem;
      max-width: 50ch;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      border-radius: 5px;
      font-weight: bolder;
      text-align: center;
      justify-content: center;
      align-items: center; }
    .qf-video-embed .iframe-container button {
      background-color: transparent;
      transition: all .2s; }
      .qf-video-embed .iframe-container button:hover, .qf-video-embed .iframe-container button:active {
        transform: scale(1.1); }
    .qf-video-embed .iframe-container.inactive {
      display: flex; }
  .qf-video-embed .iframe-container.inactive + iframe {
    display: none; }
  .qf-video-embed iframe {
    display: block;
    background-color: var(--blue-light);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 16/9; }
  .qf-video-embed .play-button {
    box-shadow: none !important; }

.article-videos .related {
  margin: 0;
  padding: 0;
  align-items: stretch; }
  .article-videos .related li {
    list-style: none; }

.article-videos .qf-video-embed {
  display: contents; }
  .article-videos .qf-video-embed .iframe-container {
    margin: 0 auto;
    width: 100%; }
  .article-videos .qf-video-embed iframe {
    margin: 0 auto;
    width: 100%;
    height: auto; }

.videos-page > p {
  margin: 0; }

.card.video-card img.container-image {
  aspect-ratio: 16/9 !important;
  max-width: none;
  flex-grow: 0; }

.video-card-horizontal {
  align-items: flex-start;
  max-width: 870px;
  margin: 60px auto; }
  .video-card-horizontal > * {
    flex: 1 0 0; }
  .video-card-horizontal a.title {
    text-decoration: none; }
  .video-card-horizontal h3, .video-card-horizontal h2 {
    line-height: 1.2;
    font-size: 1.5rem; }
  .video-card-horizontal img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    height: auto;
    transform: scale(1.005);
    /* Avoid 1px artifacts around youtube thumbnails */ }
  .video-card-horizontal .entry-content p {
    margin-bottom: 5px; }
  .video-card-horizontal .entry-content ul {
    gap: 0; }

.video-card a, .video-card-horizontal a {
  position: relative; }

.video-card a:has(img), .video-card-horizontal a:has(img) {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px #00a1; }

.video-card a:has(img)::after, .video-card-horizontal a:has(img)::after {
  content: url(https://www.qftest.com/fileadmin/Resources/Public/Main/Icons/icon-play.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .3s; }

.video-card a:has(img):hover::after, .video-card-horizontal a:has(img):hover::after {
  opacity: 1; }

.button, .button.green {
  --button-color: var(--green); }
  .button:hover, .button:active, .button.green:hover, .button.green:active {
    --button-color: var(--green-dark); }

.button.blue {
  --button-color: var(--blue); }
  .button.blue:hover, .button.blue:active {
    --button-color: var(--blue-dark); }

.button.darkblue {
  --button-color: var(--blue-dark); }
  .button.darkblue:hover, .button.darkblue:active {
    --button-color: var(--blue-dark); }

.button.darkgray {
  --button-color: var(--gray-dark); }
  .button.darkgray:hover, .button.darkgray:active {
    --button-color: var(--gray-dark); }

.button.red {
  --button-color: var(--red) !important; }
  .button.red:hover, .button.red:active {
    --button-color: var(--red-dark); }

.button.yellow {
  --button-color: var(--yellow) !important; }
  .button.yellow:hover, .button.yellow:active {
    --button-color: var(--yellow-dark); }

.button.teal {
  --button-color: var(--teal) !important; }
  .button.teal:hover, .button.teal:active {
    --button-color: var(--teal-dark); }

.button.purple {
  --button-color: var(--purple) !important; }
  .button.purple:hover, .button.purple:active {
    --button-color: var(--purple-dark); }

.button, a.button {
  color: #fff;
  background-color: var(--button-color);
  border-radius: 100px;
  font-weight: 700 !important;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  text-align: center;
  display: block;
  line-height: 22px;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow .4s, background-color .2s, border-color .2s, color .2s;
  cursor: pointer; }
  .button svg, .button img, a.button svg, a.button img {
    vertical-align: middle;
    fill: white; }
  .button:hover, .button:active, a.button:hover, a.button:active {
    text-decoration: none;
    box-shadow: 2px 10px 15px #0003; }

button {
  border: none;
  cursor: pointer;
  transition: box-shadow .4s, background-color .2s, border-color .2s, color .2s; }
  button:hover, button:active {
    box-shadow: 2px 10px 15px #0003; }

button.plain {
  background: none;
  padding: 0;
  box-shadow: none !important; }

.button.back svg {
  display: inline-block;
  margin-left: -12px;
  transform: translateY(-1px) rotate(180deg); }

.button.pdf, .button.chevron {
  min-height: 2.5em;
  padding-right: 18px; }
  .button.pdf svg, .button.chevron svg {
    display: inline-block;
    height: 2em;
    margin: -.5em 0;
    margin-left: 5px; }

.button.chevron {
  padding-right: 10px; }

.button.pdf:not(.secondary, .tertiary) svg {
  filter: grayscale(1) invert(1) contrast(1.7); }

.button:has(svg) {
  display: inline-flex;
  align-items: center; }

.button.secondary, .button.secondary {
  background-color: transparent;
  color: var(--text-color);
  border: 2px solid var(--button-color);
  text-decoration: none; }
  .button.secondary:hover, .button.secondary:active, .button.secondary:hover, .button.secondary:active {
    text-decoration: none;
    background-color: var(--button-color);
    border: 2px solid var(--button-color);
    color: white; }
    .button.secondary:hover svg, .button.secondary:active svg, .button.secondary:hover svg, .button.secondary:active svg {
      fill: white; }

.button.tertiary, button.tertiary {
  background-color: transparent;
  line-height: 1;
  color: var(--text-color);
  border: 2px solid var(--button-color);
  padding: 4px 12px 6px 12px;
  margin: -6px 0 -8px -14px;
  /* visually align the button with surrounding text */
  text-transform: none;
  font-size: 1rem;
  text-align: center;
  width: max-content; }
  .button.tertiary:hover, .button.tertiary:active, button.tertiary:hover, button.tertiary:active {
    background-color: transparent;
    border: 2px solid var(--button-color);
    color: var(--button-color); }
    .button.tertiary:hover svg, .button.tertiary:active svg, button.tertiary:hover svg, button.tertiary:active svg {
      fill: var(--button-color); }
  .button.tertiary:has(svg), button.tertiary:has(svg) {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 2px;
    padding-top: 1px;
    margin-bottom: -6px; }

.button.tertiary svg, button.tertiary svg, .button.secondary svg, button.secondary svg {
  fill: var(--text-color);
  justify-self: flex-end; }

:root {
  --card-color: var(--blue);
  --card-color-light: var(--blue-light); }

.red {
  --card-color: var(--red);
  --card-color-light: var(--red-light); }

.green {
  --card-color: var(--green);
  --card-color-light: var(--green-light); }

.blue {
  --card-color: var(--blue);
  --card-color-light: var(--blue-light); }

.darkblue {
  --card-color: var(--blue-dark-static);
  --card-color-light: var(--blue); }

.darkgray {
  --card-color: var(--gray-dark);
  --card-color-light: var(--gray); }

.yellow {
  --card-color: var(--yellow);
  --card-color-light: var(--yellow-light); }

.purple {
  --card-color: var(--purple);
  --card-color-light: var(--purple-light); }

.orange {
  --card-color: var(--orange);
  --card-color-light: var(--orange-light); }

.teal {
  --card-color: var(--teal);
  --card-color-light: var(--teal-light); }

.card {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width-normal); }

/* Re-colorize single-color icons using CSS filters */
/* Uses some fancy scss logic to make this as painless to edit as possible */
.card.green > .container-content > .container-title img.container-icon,
.card.green .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.green summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.green summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.67) hue-rotate(100deg) saturate(300%) !important; }

summary.green::after,
summary.green .accordion-icon,
.icon-green {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.67) hue-rotate(100deg) saturate(300%) !important; }

.card.blue > .container-content > .container-title img.container-icon,
.card.blue .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.blue summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.blue summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.71) hue-rotate(166deg) saturate(270%) !important; }

summary.blue::after,
summary.blue .accordion-icon,
.icon-blue {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.71) hue-rotate(166deg) saturate(270%) !important; }

.card.red > .container-content > .container-title img.container-icon,
.card.red .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.red summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.red summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.61) hue-rotate(300deg) saturate(300%) !important; }

summary.red::after,
summary.red .accordion-icon,
.icon-red {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.61) hue-rotate(300deg) saturate(300%) !important; }

.card.yellow > .container-content > .container-title img.container-icon,
.card.yellow .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.yellow summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.yellow summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(1.03) hue-rotate(0deg) saturate(350%) !important; }

summary.yellow::after,
summary.yellow .accordion-icon,
.icon-yellow {
  filter: grayscale(1) contrast(0) sepia(1) brightness(1.03) hue-rotate(0deg) saturate(350%) !important; }

.card.purple > .container-content > .container-title img.container-icon,
.card.purple .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.purple summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.purple summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.65) hue-rotate(250deg) saturate(250%) !important; }

summary.purple::after,
summary.purple .accordion-icon,
.icon-purple {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.65) hue-rotate(250deg) saturate(250%) !important; }

.card.orange > .container-content > .container-title img.container-icon,
.card.orange .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.orange summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.orange summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(1.2) hue-rotate(345deg) saturate(430%) !important; }

summary.orange::after,
summary.orange .accordion-icon,
.icon-orange {
  filter: grayscale(1) contrast(0) sepia(1) brightness(1.2) hue-rotate(345deg) saturate(430%) !important; }

.card.teal > .container-content > .container-title img.container-icon,
.card.teal .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.teal summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.teal summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.85) hue-rotate(145deg) saturate(230%) !important; }

summary.teal::after,
summary.teal .accordion-icon,
.icon-teal {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.85) hue-rotate(145deg) saturate(230%) !important; }

.card.darkblue > .container-content > .container-title img.container-icon,
.card.darkblue .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.darkblue summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.darkblue summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.31) hue-rotate(180deg) saturate(520%) !important; }

summary.darkblue::after,
summary.darkblue .accordion-icon,
.icon-darkblue {
  filter: grayscale(1) contrast(0) sepia(1) brightness(0.31) hue-rotate(180deg) saturate(520%) !important; }

.card.darkgray > .container-content > .container-title img.container-icon,
.card.darkgray .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.darkgray summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.darkgray summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) brightness(0.31) !important; }

summary.darkgray::after,
summary.darkgray .accordion-icon,
.icon-darkgray {
  filter: grayscale(1) contrast(0) brightness(0.31) !important; }

.card.white > .container-content > .container-title img.container-icon,
.card.white .container:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) > .container-content > .container-title img.container-icon,
.card.white summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white)::after,
.card.white summary:not(.green, .blue, .red, .yellow, .purple, .orange, .teal, .darkblue, .darkgray, .white) .accordion-icon {
  filter: grayscale(1) contrast(0) brightness(100) !important; }

summary.white::after,
summary.white .accordion-icon,
.icon-white {
  filter: grayscale(1) contrast(0) brightness(100) !important; }

.flex-column.card, .flex-row-dynamic.card, .container.row > .card.container-content, .card.container.image-right, .card.container.image-left, .flex-row.card {
  display: flex; }

a.card {
  color: var(--text-black);
  text-decoration: none; }
  a.card:not(.image-left, .image-right) {
    padding-bottom: 45px !important; }

a.card::after {
  content: "\203A";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 30px;
  bottom: 30px;
  right: 30px;
  height: 30px;
  width: 39px;
  font-size: 35px;
  padding-bottom: 9px;
  color: var(--card-color);
  transition: all .2s; }

a.card:not(.plain):hover {
  box-shadow: 2px 4px 30px rgba(0, 0, 50, 0.4);
  border-top-color: var(--card-color); }

a.card:hover::after {
  color: white;
  background-color: var(--card-color); }

.card:not(.plain) {
  box-shadow: 2px 4px 15px rgba(0, 0, 50, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: all .3s;
  padding: 27px;
  background-color: var(--background-card);
  border-top: 5px solid var(--card-color-light); }

*:has(> .card:not(.plain)) {
  position: relative;
  z-index: 1; }

.card.clear {
  padding: 27px;
  border-top: none !important; }

body:not(:has(.tablist)) .card.offset {
  margin-top: -75px; }

.slider-container {
  margin: 60px 0; }

.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center; }

.slides {
  display: flex;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; }

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  transform-origin: center center;
  transform: scale(1);
  padding: 0 4px; }
  .slide figure {
    padding: 0;
    background-color: transparent; }

.slide a {
  border: none; }

.slide_prev, .slide_next {
  flex-shrink: 0;
  box-shadow: none !important;
  background: none;
  transform: scale(1.5); }
  .slide_prev svg, .slide_next svg {
    fill: var(--blue-dark); }

.slide_prev {
  transform: scale(1.5) rotate(180deg); }

.slider_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  justify-content: center; }

.slider_navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 2px solid var(--blue-dark);
  background-color: var(--background); }
  .slider_navlink.current {
    background-color: var(--blue-dark); }

.customer-slider {
  max-width: var(--width-wide);
  justify-content: space-between;
  margin-top: 90px;
  margin-bottom: 90px; }
  .customer-slider a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; }
  .customer-slider img {
    display: block;
    transition: all .3s;
    max-height: 50px;
    max-width: 160px; }
  .customer-slider img:not(:hover) {
    opacity: .7;
    filter: saturate(0);
    transform: scale(0.9); }

.container.ribbon:not(.alternative) .slide_prev svg,
.container.ribbon:not(.alternative) .slide_next svg {
  fill: var(--background); }

.container.ribbon:not(.alternative) .slider_navlink {
  border: 2px solid var(--background);
  background-color: var(--blue-dark); }
  .container.ribbon:not(.alternative) .slider_navlink.current {
    background-color: var(--background);
    border-color: var(--background); }

.quote-meta {
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  text-align: center; }

.quote-meta:has(.quote-image) {
  text-align: left; }

.quote-image {
  border-radius: 50%;
  height: 75px;
  width: 75px;
  object-fit: cover; }

.codehilite .hll {
  background-color: #ffffcc; }

.codehilite .c {
  color: var(--text-tertiary);
  font-style: italic; }

/* Comment */
.codehilite .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* Error */
.codehilite .k {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword */
.codehilite .o {
  color: var(--text-color);
  font-weight: bold; }

/* Operator */
.codehilite .cm {
  color: #999988;
  font-style: italic; }

/* Comment.Multiline */
.codehilite .cp {
  color: var(text-tertiary);
  font-weight: bold;
  font-style: italic; }

/* Comment.Preproc */
.codehilite .c1 {
  color: #999988;
  font-style: italic; }

/* Comment.Single */
.codehilite .cs {
  color: var(text-tertiary);
  font-weight: bold;
  font-style: italic; }

/* Comment.Special */
.codehilite .gd {
  color: var(--text-color);
  background-color: #ffdddd; }

/* Generic.Deleted */
.codehilite .ge {
  color: var(--text-color);
  font-style: italic; }

/* Generic.Emph */
.codehilite .gr {
  color: #aa0000; }

/* Generic.Error */
.codehilite .gh {
  color: var(text-tertiary); }

/* Generic.Heading */
.codehilite .gi {
  color: var(--text-color);
  background-color: #ddffdd; }

/* Generic.Inserted */
.codehilite .go {
  color: #888888; }

/* Generic.Output */
.codehilite .gp {
  color: var(--text-secondary); }

/* Generic.Prompt */
.codehilite .gs {
  font-weight: bold; }

/* Generic.Strong */
.codehilite .gu {
  color: #aaaaaa; }

/* Generic.Subheading */
.codehilite .gt {
  color: #aa0000; }

/* Generic.Traceback */
.codehilite .kc {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword.Constant */
.codehilite .kd {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword.Declaration */
.codehilite .kn {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword.Namespace */
.codehilite .kp {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword.Pseudo */
.codehilite .kr {
  color: var(--text-color);
  font-weight: bold; }

/* Keyword.Reserved */
.codehilite .kt {
  color: #445588;
  font-weight: bold; }

/* Keyword.Type */
.codehilite .m {
  color: #009999; }

/* Literal.Number */
.codehilite .s {
  color: #d01040; }

/* Literal.String */
.codehilite .na {
  color: #008080; }

/* Name.Attribute */
.codehilite .nb {
  color: #0086B3; }

/* Name.Builtin */
.codehilite .nc {
  color: #445588;
  font-weight: bold; }

/* Name.Class */
.codehilite .no {
  color: #008080; }

/* Name.Constant */
.codehilite .nd {
  color: #3c5d5d;
  font-weight: bold; }

/* Name.Decorator */
.codehilite .ni {
  color: #800080; }

/* Name.Entity */
.codehilite .ne {
  color: #990000;
  font-weight: bold; }

/* Name.Exception */
.codehilite .nf {
  color: #990000;
  font-weight: bold; }

/* Name.Function */
.codehilite .nl {
  color: #990000;
  font-weight: bold; }

/* Name.Label */
.codehilite .nn {
  color: var(--text-secondary); }

/* Name.Namespace */
.codehilite .nt {
  color: #000080; }

/* Name.Tag */
.codehilite .nv {
  color: #008080; }

/* Name.Variable */
.codehilite .ow {
  color: var(--text-color);
  font-weight: bold; }

/* Operator.Word */
.codehilite .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.codehilite .mf {
  color: #009999; }

/* Literal.Number.Float */
.codehilite .mh {
  color: #009999; }

/* Literal.Number.Hex */
.codehilite .mi {
  color: #009999; }

/* Literal.Number.Integer */
.codehilite .mo {
  color: #009999; }

/* Literal.Number.Oct */
.codehilite .sb {
  color: #d01040; }

/* Literal.String.Backtick */
.codehilite .sc {
  color: #d01040; }

/* Literal.String.Char */
.codehilite .sd {
  color: #d01040; }

/* Literal.String.Doc */
.codehilite .s2 {
  color: #d01040; }

/* Literal.String.Double */
.codehilite .se {
  color: #d01040; }

/* Literal.String.Escape */
.codehilite .sh {
  color: #d01040; }

/* Literal.String.Heredoc */
.codehilite .si {
  color: #d01040; }

/* Literal.String.Interpol */
.codehilite .sx {
  color: #d01040; }

/* Literal.String.Other */
.codehilite .sr {
  color: #009926; }

/* Literal.String.Regex */
.codehilite .s1 {
  color: #d01040; }

/* Literal.String.Single */
.codehilite .ss {
  color: #990073; }

/* Literal.String.Symbol */
.codehilite .bp {
  color: var(text-tertiary); }

/* Name.Builtin.Pseudo */
.codehilite .vc {
  color: #008080; }

/* Name.Variable.Class */
.codehilite .vg {
  color: #008080; }

/* Name.Variable.Global */
.codehilite .vi {
  color: #008080; }

/* Name.Variable.Instance */
.codehilite .il {
  color: #009999; }

/* Literal.Number.Integer.Long */
.pricing-card-container {
  align-items: stretch;
  justify-content: center;
  gap: 15px;
  margin: 45px auto; }
  .pricing-card-container .pricing-card, .pricing-card-container > .card-label {
    flex: 1 0 227px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 12px;
    padding-top: 0 !important;
    padding-bottom: 25px;
    margin: 0; }
    .pricing-card-container .pricing-card p, .pricing-card-container .pricing-card ul, .pricing-card-container .pricing-card h3, .pricing-card-container .pricing-card h4, .pricing-card-container > .card-label p, .pricing-card-container > .card-label ul, .pricing-card-container > .card-label h3, .pricing-card-container > .card-label h4 {
      margin: 0; }
    .pricing-card-container .pricing-card header, .pricing-card-container > .card-label header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 0 -12px;
      margin-bottom: 5px;
      padding: 15px;
      padding-bottom: 15px;
      padding-top: 9px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: var(--card-color); }
      .pricing-card-container .pricing-card header h3, .pricing-card-container > .card-label header h3 {
        color: white;
        font-size: 1.1rem;
        font-weight: 500; }
      .pricing-card-container .pricing-card header img, .pricing-card-container > .card-label header img {
        height: 35px;
        width: 35px;
        margin-left: 5px;
        object-fit: contain;
        transform: translateY(5px);
        filter: contrast(0.5) brightness(1000); }
      .pricing-card-container .pricing-card header svg, .pricing-card-container > .card-label header svg {
        display: block;
        fill: white;
        height: 2.4rem;
        padding-bottom: 4px;
        width: auto; }
    .pricing-card-container .pricing-card > img, .pricing-card-container > .card-label > img {
      height: 40px;
      width: 40px;
      object-fit: contain;
      filter: brightness(0);
      margin: 0 auto;
      opacity: .6; }
    .pricing-card-container .pricing-card .technologies, .pricing-card-container > .card-label .technologies {
      flex-grow: 1; }
      .pricing-card-container .pricing-card .technologies ul, .pricing-card-container > .card-label .technologies ul {
        padding: 0; }
        .pricing-card-container .pricing-card .technologies ul li, .pricing-card-container > .card-label .technologies ul li {
          list-style: none !important;
          display: flex;
          gap: .5rem;
          align-items: center;
          font-weight: bold; }
          .pricing-card-container .pricing-card .technologies ul li::before, .pricing-card-container > .card-label .technologies ul li::before {
            content: "✓";
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: white;
            height: 1.4em;
            width: 1.4em;
            border-radius: 1.4em;
            background-color: var(--card-color); }
          .pricing-card-container .pricing-card .technologies ul li:empty::before, .pricing-card-container > .card-label .technologies ul li:empty::before {
            opacity: 0; }
    .pricing-card-container .pricing-card ul.features, .pricing-card-container > .card-label ul.features {
      display: block;
      padding: 0; }
      .pricing-card-container .pricing-card ul.features > *, .pricing-card-container .pricing-card ul.features button, .pricing-card-container > .card-label ul.features > *, .pricing-card-container > .card-label ul.features button {
        display: inline-block;
        font-size: .8rem;
        list-style: none; }
      .pricing-card-container .pricing-card ul.features button, .pricing-card-container > .card-label ul.features button {
        background-color: var(--background-tertiary);
        color: var(--blue-dark);
        padding: 4px 7px;
        margin-bottom: .35em;
        border-radius: 8px; }
    .pricing-card-container .pricing-card h4, .pricing-card-container > .card-label h4 {
      font-size: .9rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--text-secondary); }
    .pricing-card-container .pricing-card .price, .pricing-card-container > .card-label .price {
      text-align: center;
      font-weight: 700;
      font-size: 2rem; }
      .pricing-card-container .pricing-card .price .price-unit, .pricing-card-container .pricing-card .price .star, .pricing-card-container > .card-label .price .price-unit, .pricing-card-container > .card-label .price .star {
        font-size: 1rem;
        margin-left: .4rem;
        font-weight: normal; }
    .pricing-card-container .pricing-card .button, .pricing-card-container > .card-label .button {
      display: flex;
      align-items: center;
      background-color: var(--card-color);
      margin: 0 auto;
      padding: 0;
      padding-top: 5px;
      padding-bottom: 4px;
      padding-right: 5px;
      padding-left: 17px;
      margin-bottom: -25px; }
    .pricing-card-container .pricing-card a:not(.button), .pricing-card-container > .card-label a:not(.button) {
      color: var(--card-color); }
    .pricing-card-container .pricing-card ul, .pricing-card-container > .card-label ul {
      gap: 5px;
      font-size: .9rem; }
  .pricing-card-container .card-label {
    flex: 1 0 247px;
    background-color: var(--yellow-light);
    border-radius: 14px;
    padding: 10px;
    gap: 0; }
    .pricing-card-container .card-label .card {
      box-shadow: none !important; }
    .pricing-card-container .card-label > span {
      text-align: center;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-size: .8rem;
      font-weight: bold;
      color: black;
      margin-bottom: 5px;
      margin-top: 1px; }
  @media only screen and (min-width: 1100px) {
    .pricing-card-container .card-label {
      margin-top: calc(-10px - 1.1rem);
      margin-bottom: -10px; } }
.border-yellow::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  left: -30px;
  border: 10px solid var(--yellow-light);
  border-radius: 14px; }

.popovercontainer {
  position: relative; }

div[popover]:popover-open {
  background-color: var(--background);
  max-width: 300px;
  padding: 1rem;
  margin: 1rem;
  margin-top: 0rem;
  box-shadow: 0px 10px 20px #0006;
  border: 4px solid var(--bg-gray);
  border-radius: 15px;
  inset: unset;
  position: absolute;
  color: var(--text-color); }

button[popovertarget].infopopover {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--blue-dark);
  color: var(--background);
  font-style: italic;
  font-family: georgia;
  font-weight: bold; }

.table-of-contents {
  margin-bottom: 20px !important;
  max-height: Min(50vh, 350px);
  overflow-y: auto !important; }
  .table-of-contents .toc-heading {
    font-size: 1.2rem;
    margin: 0; }
  .table-of-contents ul {
    display: contents; }
  .table-of-contents li {
    --indent: 0px;
    margin: 0;
    margin-left: var(--indent);
    list-style: none;
    position: relative; }
  .table-of-contents a, .table-of-contents li {
    display: block;
    font-size: 1rem;
    font-weight: normal !important;
    z-index: 2; }
  .table-of-contents a {
    color: var(--text-color);
    padding: 7px 7px;
    border-radius: 7px;
    text-decoration: none; }
  .table-of-contents a:hover {
    background-color: var(--background-tertiary) !important; }
  .table-of-contents li.h1 a {
    font-weight: bolder !important; }
  .table-of-contents li.current::before {
    opacity: 1; }
  .table-of-contents li.current a {
    color: var(--text-color) !important;
    text-shadow: 0 0 1px black; }
  .table-of-contents li.h3 {
    --indent: 15px; }
  .table-of-contents li.h4 {
    --indent: 30px; }
  .table-of-contents li.h5 {
    --indent: 45px; }
  .table-of-contents li.h6 {
    --indent: 60px; }
  .table-of-contents li.h7 {
    --indent: 65px; }

main > .table-of-contents {
  display: none; }

@media screen and (min-width: 1000px) {
  main:has(> .table-of-contents) {
    display: flex;
    flex-direction: row-reverse;
    max-width: calc(1120px + 320px);
    gap: 2rem; }
    main:has(> .table-of-contents) .ribbon {
      position: relative;
      width: 100%;
      left: 0; }
    main:has(> .table-of-contents) .ribbon::before, main:has(> .table-of-contents) .ribbon::after {
      content: "";
      top: 0;
      bottom: 0;
      position: absolute; }
    main:has(> .table-of-contents) .ribbon::before {
      right: 100%;
      left: -2000px;
      background-color: #133170; }
    main:has(> .table-of-contents) .ribbon::after {
      left: 100%;
      right: -2000px;
      background-color: #236fac; }
    main:has(> .table-of-contents) .ribbon:not(.alternative) {
      /* Gradient needs to be straight if extended*/
      background-image: linear-gradient(90deg, #133170 11%, #236fac 89%); }
    main:has(> .table-of-contents) .ribbon.alternative::before, main:has(> .table-of-contents) .ribbon.alternative::after {
      background-color: var(--background); }
  main > .table-of-contents {
    display: block;
    max-width: 340px;
    min-width: 250px;
    max-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 2;
    padding-left: 2rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem; }
    main > .table-of-contents .toc-heading {
      font-size: 1.4em;
      margin-bottom: 10px; }
    main > .table-of-contents a:not(:hover, :active), main > .table-of-contents .toc-heading {
      color: var(--text-secondary);
      font-weight: bold; }
    main > .table-of-contents a, main > .table-of-contents li {
      font-size: .9rem;
      line-height: 1.4; }
    main > .table-of-contents li:before {
      content: " ";
      height: 100%;
      width: 3px;
      background-color: var(--blue-light) !important;
      display: block;
      position: absolute;
      left: calc(-.6rem - var(--indent));
      z-index: 1;
      opacity: 0.2;
      transition: opacity .2s; }
    main > .table-of-contents::before {
      content: "";
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--background-secondary);
      filter: blur(5px);
      margin: 10px;
      margin-top: 0;
      z-index: -1;
      border-bottom-left-radius: 28px;
      border-bottom-right-radius: 28px; } }

@keyframes popIn1 {
  0% {
    opacity: 0;
    transform: scale(1.1); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes popIn1small {
  0% {
    opacity: 0;
    transform: scale(1.01);
    filter: blur(50px); }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); } }

@keyframes popIn2 {
  0% {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(10px); }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); } }

@keyframes moveIn1 {
  0% {
    opacity: 0;
    transform: translateY(10px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.scroll-animated, .scroll-animated :is(.button, .container-icon) {
  opacity: 0;
  animation-fill-mode: both; }

.scroll-animated.scroll-visible {
  animation: popIn1 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.scroll-animated.scroll-visible.card:has(.article-content) {
  animation: popIn1small .4s ease-out forwards; }

.scroll-animated.scroll-visible :is(.button, .container-icon) {
  animation: popIn2 0.3s ease-out forwards;
  animation-delay: .3s; }

body > footer .scroll-animated {
  opacity: 1;
  animation: none !important; }

.browser {
  font-size: 18px;
  padding: 0;
  border-radius: 10px;
  background: white;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.25em 0.9em -0.1em rgba(0, 0, 0, 0.3);
  width: 100%;
  --height: 60vh;
  --multiplier: 1.0; }

.browser-container {
  transform: scale(var(--multiplier));
  transform-origin: 0 0;
  width: calc(100% * (1 / var(--multiplier)));
  height: calc(var(--height) * (1 / var(--multiplier)));
  margin-bottom: calc(-1 * var(--height) * ((1 / var(--multiplier)) - 1)); }

.browser-container iframe {
  height: calc(var(--height) * (1 / var(--multiplier))); }

.browser .browser-navigation-bar {
  display: flex;
  box-sizing: border-box;
  height: 50px;
  position: absolute;
  top: 0;
  padding: 0 20px;
  width: 100%;
  align-items: center;
  background: white;
  border-bottom: 1px solid #E2E2E2; }

.browser i {
  display: inline-block;
  height: 14px;
  width: 14px;
  border-radius: 7px;
  background-color: #eee;
  margin-right: 10px; }

.browser i:nth-child(1) {
  background-color: #ff564f; }

.browser i:nth-child(1):hover {
  background-color: #ff1419; }

.browser i:nth-child(2) {
  background-color: #ffb72a; }

.browser i:nth-child(2):hover {
  background-color: #e6af2a; }

.browser i:nth-child(3) {
  background-color: #25c63a; }

.browser i:nth-child(3):hover {
  background-color: #0ae10a; }

.browser input {
  font-size: 0.75em;
  text-align: center;
  vertical-align: top;
  display: block;
  height: 28px;
  max-width: 538px;
  color: #aaa;
  width: calc(100% - 6em);
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  background-color: white;
  margin: 0 auto;
  padding: 0 20px; }

.browser-container {
  margin-top: 50px;
  overflow-x: hidden;
  overflow-y: auto; }

@media only screen and (max-width: 1000px) {
  .browser {
    --multiplier: .75; } }

@media only screen and (max-width: 850px) {
  .browser {
    --multiplier: .5; } }

@media only screen and (max-width: 600px) {
  .browser {
    --multiplier: .25; } }

@media only screen and (max-width: 750px) {
  [class*="flex-"]:not(.nogap) {
    gap: 20px; }
  .logo svg {
    width: 90px;
    height: 30px; }
  main {
    padding: 0 10px;
    margin: 10px auto; }
  .nav-container {
    position: relative; }
  #nav-toggle {
    display: block; }
  header nav {
    position: relative; }
  .toolbar-content, .header-content, .title-content {
    padding: 0 15px; }
  header nav ul > li > :is(a,.nav-trigger) {
    padding: 0px; }
  .headerimage {
    margin-top: 0px; }
  nav .list {
    display: none;
    background-color: var(--background-secondary);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #cbced3;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 0;
    box-shadow: 2px 10px 10px rgba(0, 0, 50, 0.1);
    flex-direction: column;
    align-items: stretch; }
    nav .list a, nav .list .nav-trigger {
      display: flex !important;
      align-items: center;
      color: var(--text-color) !important;
      border-color: var(--text-color);
      min-height: 50px;
      padding: 0 30px !important; }
      nav .list a *, nav .list .nav-trigger * {
        font-size: 1rem !important;
        fill: var(--text-color); }
    nav .list .subtitle {
      display: none !important; }
  nav:has(#nav-toggle[aria-expanded="true"]) .list {
    display: flex; }
  .list > .nav-item {
    position: initial; }
  .list > .nav-item:not(:last-child) {
    border-bottom: 1px solid #cbced3; }
  nav .sublist {
    position: relative;
    padding-left: 20px;
    border-top: 1px solid #cbced3;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--background-tertiary) !important; }
    nav .sublist::before {
      display: none !important; }
    nav .sublist .nav-item a {
      background-color: var(--background-tertiary); }
  .nav-card > .nav-item:first-child > a {
    border-radius: 0 !important;
    margin-top: 0; }
  h1, .h1, body > header h1 {
    font-size: 1.4rem; }
  h2, .h2 {
    font-size: 1.2rem; }
  h3, .h3 {
    font-size: 1.1rem !important; }
  .news.hentry .entry-title, .news.pentry .entry-title {
    font-size: 1rem; }
  .card.clear {
    padding: 15px; }
  .card:not(.plain) {
    padding: 15px; }
  a.card {
    padding-bottom: 40px !important; }
  a.card::after {
    bottom: 15px; }
  .offset {
    margin-top: -25px !important; }
  .article-blog {
    padding: 20px !important; }
  ul.history-timeline {
    gap: 1em;
    margin: 20px auto;
    --center-width: 10px;
    --indicator-offset: 0em;
    --indicator-height: .25em;
    --indicator-spacing: 0.3892em; }
    ul.history-timeline::after {
      left: 0; }
    ul.history-timeline li, ul.history-timeline li:nth-child(odd), ul.history-timeline li:nth-child(even) {
      margin-left: 0;
      margin-right: 0;
      text-align: left;
      justify-content: flex-start;
      width: auto; }
      ul.history-timeline li::before, ul.history-timeline li:nth-child(odd)::before, ul.history-timeline li:nth-child(even)::before {
        content: ""; }
      ul.history-timeline li::after, ul.history-timeline li:nth-child(odd)::after, ul.history-timeline li:nth-child(even)::after {
        display: none; }
  body > footer {
    padding: 30px; }
  .pricing-card header {
    margin-left: -15px !important;
    /* undo card padding */
    margin-right: -15px !important; }
  .flex-row-dynamic, .container.row > .container-content, .container.image-right, .container.image-left {
    flex-direction: column; }
  .card .container-image {
    max-width: 100%;
    max-height: Min(50vh, 300px); }
  .card.imgfill {
    gap: 20px; }
  .card.imgfill .container-image {
    max-width: calc(100% + 30px);
    max-height: Min(50vh, 300px);
    margin: -15px !important;
    margin-bottom: 0 !important; }
  .container.row > .container-content > .card, .container.row > .container-content > div:has(.card), .container.row > .container-content > div > a.card {
    flex-basis: auto !important; }
  .container.row > .container-content .three-in-a-row,
  .container.row.three-in-a-row > .container-content .container {
    max-width: var(--width-normal); }
  .container.customer-slider .container-content {
    flex-direction: row; }
  ul.tablist {
    display: none; } }