/* ************************************* */
/*             CSS Reset                 */
/* ************************************* */
h1,
h2,
div,
p,
span,
ol,
ul,
li,
a,
button,
svg,
strong,
kbd,
code {
  all: unset;
  box-sizing: border-box !important;
}

div {
  display: block;
}

*::before,
*:before,
*::after,
*:after {
  all: unset;
}

/* ************************************* */
/*      Base styling of Tippy.js         */
/* ************************************* */
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

@media (forced-colors: active) {
  [data-tippy-root] {
    border: 2px solid transparent;
    border-radius: 5px;
  }
}
.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  right: -7px;
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  z-index: 1;
  padding: 5px 9px;
}

/* ************************************* */
/*        Custom theme for Sa11y         */
/* ************************************* */
.tippy-box[data-theme~=sa11y-theme][role=tooltip] {
  box-sizing: border-box !important;
}
.tippy-box[data-theme~=sa11y-theme][role=tooltip][data-animation=fade][data-state=hidden] {
  opacity: 0;
}
.tippy-box[data-theme~=sa11y-theme][role=tooltip][data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

[role=dialog] {
  min-width: 300px;
  text-align: start;
  word-wrap: break-word;
}

[role=tooltip] {
  min-width: 185px;
  text-align: center;
}

/* More visible panel tooltips. */
.tippy-box[data-theme~=sa11y-panel] {
  border: 1px solid var(--sa11y-panel-bg-splitter);
  box-shadow: var(--sa11y-box-shadow);
}

/* Annotation tooltip boxshadows. */
.tippy-box[data-theme~=sa11y-theme]:not([data-theme~=sa11y-panel]) {
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15) !important;
}

/* Tooltip content */
.tippy-box[data-theme~=sa11y-theme] {
  position: relative;
  display: block;
  padding: 8px;
  font-family: var(--sa11y-font-face);
  font-size: var(--sa11y-normal-text);
  font-weight: normal;
  line-height: 22px;
  color: var(--sa11y-panel-primary);
  letter-spacing: normal;
  background-color: var(--sa11y-panel-bg);
  border-radius: 4px;
  outline: 0;
  transition-property: transform, visibility, opacity;
  -webkit-font-smoothing: auto;
  /* Dismiss buttons */
  /* APCA table */
  /* ************************************* */
  /*                Arrows                 */
  /* ************************************* */
}
.tippy-box[data-theme~=sa11y-theme] code {
  font-family: monospace;
  font-size: calc(var(--sa11y-normal-text) - 1px);
  font-weight: 500;
}
.tippy-box[data-theme~=sa11y-theme] code,
.tippy-box[data-theme~=sa11y-theme] kbd {
  padding: 1.6px 4.8px;
  line-height: 22px;
  color: var(--sa11y-panel-primary);
  letter-spacing: normal;
  background-color: var(--sa11y-panel-badge);
  border-radius: 3.2px;
  -webkit-font-smoothing: auto;
}
.tippy-box[data-theme~=sa11y-theme] .tippy-content {
  padding: 5px 9px;
}
.tippy-box[data-theme~=sa11y-theme] sub,
.tippy-box[data-theme~=sa11y-theme] sup {
  font-size: var(--sa11y-small-text);
}
.tippy-box[data-theme~=sa11y-theme] ul {
  position: relative;
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}
.tippy-box[data-theme~=sa11y-theme] li {
  display: list-item;
  padding-bottom: 5px;
  margin: 5px 10px 0 20px;
}
.tippy-box[data-theme~=sa11y-theme] a {
  font-weight: 500;
  color: var(--sa11y-hyperlink);
  text-decoration: underline;
  cursor: pointer;
}
.tippy-box[data-theme~=sa11y-theme] a:hover, .tippy-box[data-theme~=sa11y-theme] a:focus {
  text-decoration: none;
}
.tippy-box[data-theme~=sa11y-theme] strong {
  font-weight: 600;
}
.tippy-box[data-theme~=sa11y-theme] hr {
  height: 1px;
  padding: 0;
  margin: 10px 0;
  background: var(--sa11y-panel-bg-splitter);
  border: none;
  opacity: 1;
}
.tippy-box[data-theme~=sa11y-theme] button.close-btn {
  margin: 0;
}
.tippy-box[data-theme~=sa11y-theme] .dismiss-group {
  margin-top: 5px;
}
.tippy-box[data-theme~=sa11y-theme] .dismiss-group button {
  display: inline-block;
  padding: 4px 8px;
  margin: 10px 5px 5px 0;
  margin-inline-end: 15px;
  color: var(--sa11y-panel-primary);
  cursor: pointer;
  background: var(--sa11y-panel-bg-secondary);
  border: 2px solid var(--sa11y-button-outline);
  border-radius: 5px;
}
.tippy-box[data-theme~=sa11y-theme] .dismiss-group button:hover, .tippy-box[data-theme~=sa11y-theme] .dismiss-group button:focus {
  background: var(--sa11y-shortcut-hover);
}
.tippy-box[data-theme~=sa11y-theme] .good-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-bottom: -2.5px;
  background: var(--sa11y-good-text);
  -webkit-mask: var(--sa11y-good-svg) center no-repeat;
          mask: var(--sa11y-good-svg) center no-repeat;
}
.tippy-box[data-theme~=sa11y-theme] .link-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-bottom: -3.5px;
  background: var(--sa11y-panel-primary);
  -webkit-mask: var(--sa11y-link-icon-svg) center no-repeat;
          mask: var(--sa11y-link-icon-svg) center no-repeat;
}
.tippy-box[data-theme~=sa11y-theme] .error .badge {
  color: var(--sa11y-error-text);
  background: var(--sa11y-error);
}
.tippy-box[data-theme~=sa11y-theme] .error .colour {
  color: var(--sa11y-red-text);
}
.tippy-box[data-theme~=sa11y-theme] .error .link-icon {
  background: var(--sa11y-error-text);
}
.tippy-box[data-theme~=sa11y-theme] .warning .badge {
  color: var(--sa11y-panel-bg);
  background: var(--sa11y-yellow-text);
}
.tippy-box[data-theme~=sa11y-theme] .warning .colour {
  color: var(--sa11y-yellow-text);
}
.tippy-box[data-theme~=sa11y-theme] .warning .link-icon {
  background: var(--sa11y-panel-bg);
}
.tippy-box[data-theme~=sa11y-theme] #apca-table {
  width: 100%;
}
.tippy-box[data-theme~=sa11y-theme] #apca-table .row {
  display: flex;
  margin-top: 10px;
}
.tippy-box[data-theme~=sa11y-theme] #apca-table .cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 1px;
}
.tippy-box[data-theme~=sa11y-theme] #apca-table .font-weight {
  font-size: calc(var(--sa11y-normal-text) - 2px);
  font-weight: bold;
}
.tippy-box[data-theme~=sa11y-theme][data-placement^=top] > .tippy-arrow::before {
  border-top-color: var(--sa11y-panel-bg);
}
.tippy-box[data-theme~=sa11y-theme][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: var(--sa11y-panel-bg);
}
.tippy-box[data-theme~=sa11y-theme][data-placement^=left] > .tippy-arrow::before {
  border-left-color: var(--sa11y-panel-bg);
}
.tippy-box[data-theme~=sa11y-theme][data-placement^=right] > .tippy-arrow::before {
  border-right-color: var(--sa11y-panel-bg);
}
@media (forced-colors: active) {
  .tippy-box[data-theme~=sa11y-theme][data-placement^=top] > .tippy-arrow::before, .tippy-box[data-theme~=sa11y-theme][data-placement^=bottom] > .tippy-arrow::before, .tippy-box[data-theme~=sa11y-theme][data-placement^=left] > .tippy-arrow::before, .tippy-box[data-theme~=sa11y-theme][data-placement^=right] > .tippy-arrow::before {
    forced-color-adjust: none;
  }
  .tippy-box[data-theme~=sa11y-theme] .tippy-arrow {
    z-index: -1;
  }
}

/* Tooltip focus styles */
.tippy-box[data-theme~=sa11y-theme] a:focus,
.tippy-box[data-theme~=sa11y-theme] input:focus,
.tippy-box[data-theme~=sa11y-theme] button:focus,
.tippy-box[data-theme~=sa11y-theme] button:active,
.tippy-box[data-theme~=sa11y-theme] [tabindex="-1"]:focus {
  outline: 0;
  box-shadow: 0 0 0 5px var(--sa11y-focus-color);
}

.tippy-box[data-theme~=sa11y-theme] input:focus:not(:focus-visible),
.tippy-box[data-theme~=sa11y-theme] a:focus:not(:focus-visible),
.tippy-box[data-theme~=sa11y-theme] button:focus:not(:focus-visible),
.tippy-box[data-theme~=sa11y-theme] [tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.tippy-box[data-theme~=sa11y-theme] a:focus-visible,
.tippy-box[data-theme~=sa11y-theme] button:focus-visible,
.tippy-box[data-theme~=sa11y-theme] input:focus-visible,
.tippy-box[data-theme~=sa11y-theme] [tabindex="-1"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 5px var(--sa11y-focus-color);
}

@media screen and (forced-colors: active) {
  .tippy-box[data-theme~=sa11y-theme] .error-icon,
  .tippy-box[data-theme~=sa11y-theme] .link-icon,
  .tippy-box[data-theme~=sa11y-theme] .hidden-icon {
    filter: invert(1);
  }
  .tippy-box[data-theme~=sa11y-theme] a:focus,
  .tippy-box[data-theme~=sa11y-theme] button:focus,
  .tippy-box[data-theme~=sa11y-theme] [tabindex="-1"]:focus {
    outline: transparent solid 3px !important;
  }
}