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

::selection {
  background-color: var(--hds-color-bg-selected, #007cbc);
  color: var(--hds-color-fg);
}

:focus-visible {
  outline: none !important;
}

[hidden],
.hidden {
  display: none !important;
}

[invisible] {
  visibility: hidden;
}

html {
  height: 100%;
  box-sizing: border-box;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

body {
  height: 100%;
  font-family: var(--hds-font-application-fontFamily);
  font-weight: var(--hds-font-application-weight-default);
  color: var(--hds-color-fg);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(---hds-font-application-fontFamily);
  font-weight: var(--hds-font-application-heading-weight);
  color: var(--hds-color-fg);
}

h1,
h2,
h3 {
  margin: var(--hds-space-8x) 0 var(--hds-space-10x) 0;
}

h4,
h5,
h6 {
  margin: var(--hds-space-6x) 0 var(--hds-space-4x) 0;
}

h1 {
  font-size: var(--hds-font-size-heading-1);
}

h2 {
  font-size: var(--hds-font-size-heading-2);
  border-bottom: solid var(--docs-border-width) var(--docs-border-color);
}

h3 {
  font-size: var(--hds-font-size-heading-3);
}

h4 {
  font-size: var(--hds-font-size-heading-4);
}

h5 {
  font-size: var(--hds-font-size-heading-5);
}

h6 {
  font-size: var(--hds-font-size-heading-6);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

p {
  margin-block-end: var(--hds-space-2x);
}

a {
  color: var(--hds-color-link);
}

a:hover {
  color: var(--hds-color-link-hover);
}

abbr[title] {
  text-decoration: none;
  border-bottom: dashed 1px var(--hds-color-link);
  cursor: help;
}

em {
  font-style: italic;
}

strong {
  font-weight: var(--hds-font-weight-Medium);
}

code {
  font-family: var(--sl-font-mono);
  font-size: 0.9125em;
  background-color: rgba(0 0 0 / 0.025);
  background-blend-mode: darken;
  border-radius: var(--sl-border-radius-medium);
  padding: 0.125em 0.25em;
}

kbd {
  background: var(--sl-color-neutral-100);
  border: solid 1px var(--sl-color-neutral-200);
  box-shadow:
    inset 0 1px 0 0 var(--sl-color-neutral-0),
    inset 0 -1px 0 0 var(--sl-color-neutral-200);
  font-family: var(--sl-font-mono);
  font-size: 0.9125em;
  border-radius: var(--sl-border-radius-medium);
  color: var(--sl-color-neutral-800);
  padding: 0.125em 0.4em;
}

ins,
del {
  border-radius: var(--sl-border-radius-medium);
  text-decoration: none;
  padding: 0.125em 0.25em;
}

ins {
  background-color: var(--sl-color-green-200);
  color: var(--sl-color-green-900);
}

del {
  background-color: var(--sl-color-red-200);
  color: var(--sl-color-red-900);
}

mark {
  background-color: var(--sl-color-yellow-200);
  border-radius: var(--sl-border-radius-medium);
  padding: 0.125em 0.25em;
}

hr {
  border: none;
  border-bottom: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
  margin: var(--sl-spacing-small) 0;
}

blockquote {
  position: relative;
  font-family: var(--sl-font-serif);
  font-size: 1.33rem;
  font-style: italic;
  color: var(--sl-color-neutral-700);
  background-color: var(--sl-color-neutral-100);
  border-radius: var(--sl-border-radius-medium);
  border-left: solid 6px var(--sl-color-neutral-300);
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

ul,
ol {
  padding: 0;
  margin: 0 0 var(--sl-spacing-small) 2rem;
}

ul {
  list-style: disc;
}

li {
  padding: 0;
  margin: 0 0 0.25rem 0;
}

li ul,
li ol {
  margin-top: 0.25rem;
}

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

@media screen and (max-width: 575px) {
  .hidden-xs {
    display: none !important;
  }

  .visible-xs {
    display: block !important;
  }
}

@media screen and (max-width: 989px) {
  .hidden-sm {
    display: none !important;
  }
  .visible-sm {
    display: block !important;
  }
}

@media screen and (max-width: 1439px) {
  .hidden-md {
    display: none !important;
  }
  .visible-md {
    display: block !important;
  }
}

@media screen and (max-width: 1989px) {
  .hidden-lg {
    display: none !important;
  }
  .visible-lg {
    display: block !important;
  }
}