[data-viewtype="source-file"] .requirement__link:hover {
  text-decoration: none;
}

svg {
  /* Disable shrinking of icons in flex strings */
  flex-shrink: 0;
}

/* typography */

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

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

/* a */

a {
  /* Disabled link styles */
  text-decoration: none;
  color: gray;
  transition: color .2s ease;
}

a:link,
a:visited,
a[href] { /* or a[href] */
  /* Enabled link styles */
  text-decoration: none;
  color: var(--color-link);
}

a:hover {
  /* color: blueviolet; */
  color: var(--color-hover);
}

a[aria-disabled="true"] {
  /* color: currentColor; */
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

/* misc */

code {
  position: relative;
  padding: 0 4px;
  font-style: normal;
  font-family: var(--code-font-family);
  font-size: var(--code-font-size);
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 4px;

  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* action_button */

.actions_group {
  display: flex;
  /* header context: */
  column-gap: calc(var(--base-rhythm)/2);
  margin-left: auto;
}

.action_button,
a.action_button,
a.action_button:link,
a.action_button:visited {
  font-size:var(--font-size-xsm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  display: inline-flex;

  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  border-radius: 6px;
  border: 1px solid transparent;
  backface-visibility: hidden;
  user-select: none;
  cursor: pointer;
  appearance: none;

  /* 1.5 column-gap is compensated by SVG negative margin */
  column-gap: calc(var(--base-rhythm)*1.5);
  padding-left: calc(var(--base-rhythm)*1.5);
  padding-right: calc(var(--base-rhythm)*1.5);
  min-height: calc(var(--base-rhythm)*4);
  max-width: 100%;

  /* box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px; */
  color: var(--color-action);
  background-color: rgb(255, 255, 255);
  border-color: rgba(0, 0, 0, 0.05);
  background-clip: padding-box;

  transition: 0.2s;
}

.action_button:hover,
a.action_button:hover {
  box-shadow: rgb(0 0 0 / 10%) 0px 2px var(--base-rhythm) 0px;
  color: var(--color-hover);
  z-index: 6;
}

.action_button:disabled,
.action_button:disabled:hover,
.action_button[aria-disabled="true"],
.action_button[aria-disabled="true"]:hover {
  color: var(--color-action);
  opacity: .4;
  cursor: default;
}

.action_button svg {
  /*
    action_button 1.5 column-gap
    is compensated by SVG negative margin
  */
  margin-left: calc(var(--base-rhythm)*(-.5));
  margin-right: calc(var(--base-rhythm)*(-.5));
}

[data-action-type="submit"],
.action_button[type=submit] {
  color: var(--color-submit);
}

[data-action-type="action"],
[data-action-type="confirm_delete"] {
  color: var(--color-action) !important;
  border-color: var(--color-action) !important;
}

[data-action-type="delete"],
[data-action-type="confirm_delete"] {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

[data-action-type="confirm_delete"]:hover {
  color: var(--color-bg-contrast) !important;
  background: var(--color-danger) !important;
}

[data-action-type="cancel"],
.action_button[href*="cancel"] {
  color: var(--color-cancel) !important;
}

.action_icon,
a.action_icon,
a.action_icon:link,
a.action_icon:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  backface-visibility: hidden;
  user-select: none;
  cursor: pointer;
  appearance: none;
  border: none;
  border-color: transparent;
  background-color: rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  box-shadow: none;
  background-clip: padding-box;

  color: var(--color-action);
  transition: 0.2s;
  padding: calc(var(--base-rhythm)*.5);
  z-index: 2;
}

.action_icon.secondary,
a.action_icon.secondary,
a.action_icon.secondary:link,
a.action_icon.secondary:visited {
  color: var(--color-link);
}

.action_icon.secondary:hover,
a.action_icon.secondary:hover,
.action_icon:hover,
a.action_icon:hover {
  color: var(--color-hover);
  z-index: 6;
}

.action_button.compact {
  column-gap: 0;
  padding-left: calc(var(--base-rhythm)* 0.75);
  padding-right: calc(var(--base-rhythm)* 0.75);
  min-height: calc(var(--base-rhythm)*3);
}

.action_button.compact .action_button_compact__arising {
  overflow: hidden;

  max-width: 0;
  margin-left: 0;

  transition-property: max-width, margin;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
}

.action_button.compact:hover > .action_button_compact__arising {
  max-width: 200px;
  margin-left: var(--base-rhythm);

  transition-property: max-width, margin;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0;
}

/* TODO */
sdoc-node-controls .action_button {
  /* depends on sdoc-node-controls: */
  /*
  width: calc(var(--base-rhythm)*4);
  height: calc(var(--base-rhythm)*4);
  */
  padding: 0 !important;
  width: unset;
  height: unset;
  min-height: calc(var(--base-rhythm)*3) !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: 20% !important;

  vertical-align: top;
}

/* field_action */
/* TODO: optimize code with .action_icon & .action_button */

.field_action {  /* button */
  font-size:var(--font-size-xsm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;

  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  backface-visibility: hidden;
  user-select: none;
  cursor: pointer;
  appearance: none;
  border: none;
  border-color: transparent;
  background-color: rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  box-shadow: none;
  background-clip: padding-box;

  color: var(--color-action);
  transition: 0.2s;
  padding: calc(var(--base-rhythm)*.5);
  z-index: 2;
}

.field_action:hover,
a.field_action:hover {
  color: var(--color-hover);
  z-index: 6;
}

.field_action::before {
  content: '';
  position: absolute;
  /* The element is expected to be placed in a context
     that defines the top and bottom boundaries.

     The width of the element must be enough
     to cover the entire available context,
     and will be cut off by the parent element via overflow.
  */
  top: calc(var(--base-rhythm)*(-3)); /* -2 */
  bottom: calc(var(--base-rhythm)*(-1)); /* -2 */
  left: -100vw;
  right: -100vw;
  z-index: 0;
  pointer-events: none;
  /* Determines the shade of the color through the opacity of the element.
     The color is passed from the parent.
  */
  transition: background-color 0.3s;
  background-color: transparent;
  opacity: .1; /* Defines the color shade. */
}

.field_action:hover::before {
  background: currentcolor;
}

/* ***
  USED BY copy_to_clipboard controller
  */

sdoc-field {
  display: flex;
  /* it is assumed that it will automatically stretch, as a block element,
     to the entire field space, and the elements in the service area will be
     positioned relative to it:
  */
  position: relative;
  flex-grow: 1;
  width: 100%; /* holds within the width of the parent */
}

sdoc-field-content {
  flex-grow: 1;
  width: 100%; /* holds within the width of the parent */
}

.copy_to_clipboard-cover {
  position: absolute;
  z-index: 98;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;

  border-top-right-radius: 6px; /* TODO 4 + in button*/
  background-color: rgba(242, 100, 42, 0);
  transition: .5s ease-out;
}

.copy_to_clipboard-cover:hover {
  background-color: rgba(242, 100, 42, 0.05);
  transition: .5s ease-out;
}

/* Fix: Prevent .copy_to_clipboard-button from receiving hover when covered by dropdown menu */
sdoc-field > sdoc-field-service .copy_to_clipboard-button {
  visibility: hidden;
}

sdoc-field:hover > sdoc-field-service .copy_to_clipboard-button {
  visibility: visible;
}

/* button overrides */
.copy_to_clipboard-button.action_button {
  height: calc(var(--base-rhythm)*3);
  width: calc(var(--base-rhythm)*3);
  min-height: unset;
  padding: var(--base-rhythm);
  position: absolute;
  right: 0;
  pointer-events: auto;

  max-height: 100%; /* for meta row: to keep the copy button from expanding out of the content line */
}

/* button behavior */
sdoc-field .copy_to_clipboard-button {
  transition: .5s ease-out;
  opacity: 0;
}

sdoc-field:hover .copy_to_clipboard-button {
  opacity: 1;
}

/* ***
  USED BY copy_stable_link controller
  inside sdoc-node
  */

.copy_stable_link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--base-rhythm);

  position: absolute;
  left: 0;
  top: 0;

  cursor: pointer;
  transition: .5s ease-out;
  opacity: 0;
}

.copy_stable_link-button:hover {
  color: var(--color-action);
}

sdoc-node:hover .copy_stable_link-button {
  opacity: 1;
}

/* ANCHOR */

sdoc-anchor {
  /* for Fixed Headers + Section Anchors */
  /* calc(var(--base-gap) + var(--base-padding)); */
  scroll-snap-margin-top: var(--base-gap);
  scroll-margin-top:      var(--base-gap);
}

sdoc-node > sdoc-anchor {
  scroll-snap-margin-top: unset; /** top: 0; */
  scroll-margin-top:      unset; /** top: 0; */

  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
}

sdoc-anchor:target + sdoc-node-content sdoc-node-title,
sdoc-anchor:target + sdoc-section sdoc-section-title,
sdoc-anchor:target + .requirement__title {
  background-color: var(--color-highlight);
}

/*
  This code is triggered when
  export/html/_static/controllers/anchor_controller.js adds
  the [visible] attribute to the sdoc-anchor:
*/
sdoc-anchor[visible] {
  position: absolute;
  z-index: 2;
  left: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  transition: opacity 0.5s;
  opacity: 0;
}

sdoc-node:hover sdoc-anchor[visible] {
  opacity: 1;
}

sdoc-anchor[visible].anchor_has_links {
  opacity: 1;
}

sdoc-anchor[visible]:hover {
  z-index: 10;
}

sdoc-anchor[visible] .anchor_block {
  position: absolute;
  top: 0;
  left: calc(-4 * var(--base-rhythm) - 3px);

  border-radius: 6px;
  transition: opacity 0.2s;
  opacity: .6;
}

sdoc-anchor[visible]:hover .anchor_block {
  background-color: rgb(255, 255, 255);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: rgb(0 0 0 / 10%) 0px 2px var(--base-rhythm) 0px;
  opacity: 1;
}

sdoc-anchor[visible] .anchor_button {
  cursor: pointer;
  font-size:var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  border-radius: 6px;
  border: 1px solid transparent;
  background-clip: padding-box;

  /* 1.5 column-gap is compensated by SVG negative margin */
  column-gap: calc(var(--base-rhythm)*1.5);
  padding-left: calc(var(--base-rhythm)*1.5);
  padding-right: calc(var(--base-rhythm)*1.5);
  min-height: calc(var(--base-rhythm)*4);
  min-width: calc(var(--base-rhythm)*4);

  /* box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px; */
  /* color: var(--color-action); */

  overflow: hidden;

  transition: opacity 0.2s;
  opacity: .6;
}

sdoc-anchor[visible] .anchor_button:hover {
  color: var(--color-hover);
  z-index: 6;

  opacity: 1;
}

sdoc-anchor[visible] .anchor_button svg {
  color: var(--color-fg-secondary);
  margin-left: calc(var(--base-rhythm)*(-.5));
  margin-right: calc(var(--base-rhythm)*(-.5));
}

sdoc-anchor[visible].anchor_has_links .anchor_button svg {
  color: black;
  opacity: 1;
}

sdoc-anchor[visible] .anchor_button:hover svg {
  color: var(--color-action) !important;
}

sdoc-anchor[visible] .anchor_button_text {
  font-size: var(--font-size-sm);
  font-weight: bolder;

  display: none;
}

sdoc-anchor[visible]:hover .anchor_button_text {
  display: block;
}

sdoc-anchor[visible] .anchor_back_links {
  min-width: 300px;
  padding-left: calc(var(--base-rhythm)*4);
  padding-right: var(--base-rhythm);
  padding-top: var(--base-rhythm);
  padding-bottom: calc(var(--base-rhythm)*1);

  display: none;
}

sdoc-anchor[visible]:hover .anchor_back_links {
  display: block;
}

sdoc-anchor[visible] .anchor_back_links a {
  display: list-item;
}
sdoc-anchor[visible] .anchor_back_links a::marker {
  content: '⇠  ';
  width: calc(var(--base-rhythm)*4);
}

sdoc-anchor[visible] .anchor_back_links_number {
  color: var(--color-fg-accent);
  position: absolute;
  width: calc(var(--base-rhythm)*4);
  text-align: center;
  top: calc(var(--base-rhythm)*3);
  left: 0;
  font-weight: bold;
}

sdoc-anchor[visible]:hover .anchor_back_links_number {
  top: calc(var(--base-rhythm)*5);
}

/* nav */

.nav {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-flow: column nowrap;
  background-color: var(--color-bg-ui);
  width: var(--base-gap);
  height: 100%;
}

.nav_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav_list li {
  margin-bottom: var(--base-rhythm);
}

.nav_list__link {
  display: flex;
  column-gap: var(--base-rhythm);
}

/* nav_button */

.nav_button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  text-decoration: none;

  height: var(--base-gap);
  width: var(--base-gap);
  transition: 0.3s;

  color: var(--color-fg-secondary);
}

.nav_button:hover {
  color: var(--color-fg-contrast);
}

.nav .nav_button {
  color: var(--color-fg-secondary-invert);
  background-color: transparent;
  border-left: 2px solid transparent;
}

.nav .nav_button:hover {
  color: var(--color-bg-contrast);
  border-color: var(--color-bg-contrast);
}

/* should be like .nav .nav_button:hover */
[data-viewtype="document-tree"] [data-link="index"],
[data-viewtype="search"] [data-link="search"],
[data-viewtype="diff"] [data-link="diff"],
[data-viewtype="requirements-coverage"] [data-link="requirements_coverage"],
[data-viewtype="traceability-matrix"] [data-link="traceability-matrix"],
[data-viewtype="coverage-tree"] [data-link="source_coverage"] {
  color: var(--color-bg-contrast);
  border-color: var(--color-bg-contrast);
  cursor: default;
}

/* sdoc tabs (page nav) */

.sdoc-tabs {
  border-bottom: 1px solid var(--color-border);
}

.sdoc-tab-list {
  display: flex;
  overflow: auto;
  margin-bottom: -1px;
}

.sdoc-tab {
  padding: var(--base-rhythm) calc(2 * var(--base-rhythm));
  font-size: var(--font-size-xsm);
  font-weight: 600;
  line-height: 1;
  color: var(--color-link);
  text-decoration: none;
  background-color: transparent;
  border-width: 1px 1px 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-image: initial;
  border-bottom-style: initial;
  border-bottom-color: initial;

  color: var(--color-fg-contrast);
}

.sdoc-tab:hover {
  color: var(--color-hover);
}

.sdoc-tab[active] {
  color: var(--color-fg-contrast);
  border-color: var(--color-border);
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: var(--color-bg-main);
}

/* tags */

.tags {
  padding-bottom: var(--base-gap);
}

.tag {
  display: inline-flex;
    align-items: center;
  background-color: rgba(0,0,0,0.1);
  border: 2px solid rgba(0,0,0,0.05);
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  margin: 2px 0px;
  padding-left: 8px;
  border-radius: 2em;
}

.tag_badge {
  display: inline-flex;
    justify-content: center;
    align-items: center;
  font-size: var(--font-size-xxsm);
  background-color: rgba(255, 255, 255, 0.75);
  border: 4px solid transparent;
  min-width: 18px;
  height: 18px;
  border-radius: 2em;
  margin-left: 4px;
}

/* coverage */

.value-bar {
  display: flex;
  height: 1rem;
  align-items: center;
  gap: 4px;
}

.value-bar_bar {
  width: 3rem;
  border-radius: .5rem;

  /* box-shadow: inset 0px 2px 2px 0px #ccc; */
  border: 1px solid rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;

  height: 0.75rem;

  background-color: rgba(255, 255, 255, 0.2);
}

.value-bar_bar[data-value] {
  border: 1px solid rgb(80, 240, 40);
  background-color: rgba(255, 255, 255, 1);
}

.value-bar_filler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgb(80, 240, 40);
}

.value-bar_text {
  width: 2.5rem;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
}

ol.arabic {
    list-style: decimal;
}

ol.loweralpha {
    list-style: lower-alpha;
}

ol.upperalpha {
    list-style: upper-alpha;
}

ol.lowerroman {
    list-style: lower-roman;
}

ol.upperroman {
    list-style: upper-roman;
}

/* svg icon */

svg.svg_icon polyline,
svg.svg_icon line,
svg.svg_icon circle,
svg.svg_icon rect,
svg.svg_icon path {
  fill: none;
  fill-rule: evenodd;
  stroke-width: 1.5;
  /* stroke: #000; */
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* transition: 0.2s; */
}

svg.svg_icon {
  width: calc(var(--base-rhythm)*2);
  height: calc(var(--base-rhythm)*2);
  flex: 0 0 auto;
  background: transparent;
  /* color: rgb(246, 153, 13); */
}

.svg_icon_hover_visible {
  display: none;
}
.anchor_button:hover .svg_icon_hover_visible,
svg:hover .svg_icon_hover_visible {
  display: inline;
}
.svg_icon_not_hover_visible {
  display: inline;
}
.anchor_button:hover .svg_icon_not_hover_visible,
svg:hover .svg_icon_not_hover_visible {
  display: none;
}

/* .header */

.header {
  height: calc(var(--base-rhythm)*6);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: calc(var(--base-rhythm)/2);
  padding-left: calc(var(--base-rhythm)*2);
  padding-right: var(--base-rhythm);
  border-bottom: var(--base-border);
  min-width: 0;
}

.header__document_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  font-weight: 700;

  flex-shrink: 0.1;
}

.header__project_name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  font-weight: 400;
  min-width: calc(var(--base-rhythm)*2.5);

  flex-shrink: 100;
}

/* .footer */

.footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: var(--base-rhythm) calc(var(--base-rhythm)*2);
  column-gap: calc(var(--base-rhythm)/2);
  background-color: var(--color-bg-ui);
  color: var(--color-fg-secondary-invert);
  font-size: .85rem;
}

a.strictdoc__link {
  color: var(--color-fg-accent);
  fill: var(--color-fg-accent);
}

a.strictdoc__version {
  color: var(--color-fg-secondary-invert);
  fill: var(--color-fg-secondary-invert);
  display: flex;
  column-gap: calc(var(--base-rhythm)/2);
  align-items: center;
}

a.strictdoc__link:hover,
a.strictdoc__version:hover {
  color: var(--color-bg-main);
  fill: var(--color-bg-main);
}

/* --md-source-version-icon: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/></svg>); */


/* pagetype */

.pagetype {
  font-size: var(--font-size-xxsm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* viewtype */

.viewtype {
  position: relative;
  font-size: var(--font-size-xsm);
}

.viewtype__handler {
  font-weight: 500;
  color: var(--color-fg-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--base-rhythm)/2);
  user-select: none;
}

.viewtype__menu {
  position: absolute;
  z-index: 99;
  left: calc(var(--base-rhythm)*(-2));
  top: calc(var(--base-rhythm)*3);
  margin: 0;
  list-style: none;
  padding: var(--base-rhythm);
  background: var(--color-bg-contrast);
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  border-radius: var(--base-rhythm);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--base-rhythm)/2);
}

.viewtype__menu[aria-hidden="true"] {
  display: none;
}

.viewtype__menu[aria-hidden="false"] {
  display: flex;
}

.viewtype__menu_header {
  padding: var(--base-rhythm);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  font-weight: 700;
  font-size: var(--font-size-xxsm);
}

.viewtype__menu_item {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  display: block;
  padding: var(--base-rhythm);
  border-radius: calc(var(--base-rhythm)/2);
}

.viewtype__menu_item,
.viewtype__menu_item:link,
.viewtype__menu_item:visited {
  text-decoration: none;
  color: var(--color-fg-main);
}

.viewtype__menu_item:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-fg-accent);
}

[data-viewtype="document"] [data-viewtype_link="document"],
[data-viewtype="table"] [data-viewtype_link="table"],
[data-viewtype="traceability"] [data-viewtype_link="traceability"],
[data-viewtype="deep_traceability"] [data-viewtype_link="deep_traceability"],
[data-viewtype="standalone_document"] [data-viewtype_link="standalone_document"],
[data-viewtype="html2pdf"] [data-viewtype_link="html2pdf"],
.viewtype__menu_item.active {
  background-color: var(--color-bg-accent);
  color: var(--color-fg-accent);
  cursor: default;
}

/* sdoc-menu */

sdoc-menu menu {
  position: absolute;
  z-index: 99;
  right: 100%;
  top: 0;
  margin: 0;
  list-style: none;
  padding: var(--base-rhythm);
  background: var(--color-bg-contrast);
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  border-radius: var(--base-rhythm);
  font-weight: 500;

  display: flex;
  flex-direction: column;
  row-gap: calc(var(--base-rhythm)/2);

}

sdoc-menu.add_node menu {
  display: grid;
  grid-template-columns:  minmax(min-content, max-content)
                          minmax(min-content, max-content)
                          minmax(min-content, max-content)
                          minmax(min-content, max-content);
}

sdoc-menu menu[aria-hidden="true"] {
  display: none;
}

sdoc-menu menu[aria-hidden="false"] {
  display: flex;
}
sdoc-menu.add_node menu[aria-hidden="false"] {
  display: grid;
}

sdoc-menu header:first-child {
  /* "Add node" */
  grid-column: 1 / -1;
  border-bottom: var(--base-border);
}

sdoc-menu menu a {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  display: flex; /* affects the 'add node' buttons */
  padding: var(--base-rhythm);
  border-radius: calc(var(--base-rhythm)/2);
  font-size: var(--font-size-xsm);
}

sdoc-menu menu a,
sdoc-menu menu a:link,
sdoc-menu menu a:visited {
  text-decoration: none;
  color: var(--color-fg-main);
}

sdoc-menu menu a:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-fg-accent);
}

sdoc-menu menu header {
  padding: var(--base-rhythm);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  font-weight: 700;
  font-size: var(--font-size-xxsm);
}

/* plus to close */
sdoc-menu-handler[aria-expanded="true"] svg {
  transform: rotate(45deg);
  color: black;
}

/* affects other menus: */
[aria-expanded="true"] svg {
  color: black;
}

/* tree */

.tree {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--base-rhythm);
  margin-top: calc(var(--base-rhythm) * 2);
  margin-bottom: calc(var(--base-rhythm) * 8);
  padding-left: calc(var(--base-rhythm) * 2);
  padding-right: calc(var(--base-rhythm) * 2);
}

.tree_fragments { /* ul */
  margin-top: 0;
  margin-bottom: 0;
  padding-left: calc(var(--base-rhythm) * 2);
  padding-right: 0;
  list-style: none;
  width: 100%;
}

.tree_fragments li {
  list-style: none;
  width: 100%;
}

.tree_fragments,
.tree_fragments li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--base-rhythm);
}

.tree_folder {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--base-rhythm);
  min-width: 0;
  line-height: 1.5;
  width: 99%;
  padding-top: 8px;
  margin-top: 8px;
  opacity: 0.6;
  position: relative;
  border-top: var(--base-border);
}

.tree_folder:first-child {
  border-top: none;
}

.tree_folder_path {
  font-size: var(--font-size-xsm);
  font-weight: 400;
}

a.tree_item,
.tree_item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--base-rhythm);
  font-size: var(--font-size-sm);
  min-width: 0;
  line-height: 1.5;
  width: 99%; /* To calculate cite overflow  */
}

.tree_item[active] {
  color: var(--color-fg-contrast);
}

.document_title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  width: 99%; /* To calculate cite overflow  */
}

.document_title[data-file_name]::after {
  content: attr(data-file_name);
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 99%; /* To calculate cite overflow  */
  font-weight:400;
  opacity:0.6;
}

/** TOC **/

.toc,
.toc ul,
.toc li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc {
  margin-top: calc(var(--base-rhythm) * 2);
  padding-left: calc(var(--base-rhythm) * 2);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  padding-bottom: var(--base-gap);
}

.toc li {
  margin: 0;
  padding-left: var(--base-rhythm);
  position: relative;
}

.toc a {
  display: block;
  position: relative;
  padding-top: var(--base-rhythm);
  padding-bottom: var(--base-rhythm);
  padding-right: var(--base-rhythm);
}

.toc a,
.toc a:link,
.toc a:visited {
  text-decoration: none;
  color: var(--color-fg-secondary);
}
.toc a:hover {
  color: var(--color-fg-contrast);
}

.toc a:focus,
.toc a:active {
  background: transparent;
}

.toc-title-no-link {
  color: var(--color-fg-secondary);
  opacity: .6;
  display: block;
  padding-top: var(--base-rhythm);
  padding-bottom: var(--base-rhythm);
  padding-right: var(--base-rhythm);
}

/* TOC targeted */
.toc a[targeted]::before  {
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
  bottom: 0;
  right: 0;
  left: -200px; /* parent has overflow */
  background-color: var(--color-highlight);
}

/* TOC intersected */
.toc a::after {
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background-color: var(--color-bg-main);
}

.toc a[intersected]::after {
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background-color: var(--color-highlight);
}

/* TOC parented */
/* behavior depends on collapsible_list.js */
.toc [data-collapsible_list__branch="closed"] ~ a[parented]::after {
  background-color: var(--color-highlight);
}

/* pdf-toc */

.pdf-toc {
  display: table;
  width: 100%;
}
.pdf-toc-row {
  display: table-row;
}
.pdf-toc-cell {
  display: table-cell;
  padding-top: var(--base-rhythm);
  padding-right: var(--base-rhythm);
  font-size: 1em;
  line-height: 1.5;
}
.pdf-toc-cell[dotted] {
  position: relative;
  width: 100%; /* to get max */
}
.pdf-toc-cell[dotted] > * {
  background-color: white;
  display: inline;
  padding-right: 8px;
  position: relative;
}
.pdf-toc-cell[dotted]::before {
  content: '';
  position: absolute;
  border-bottom: dotted 2px rgba(0,0,0,.4);
  bottom: .4em;
  left: .8em;
  right: .8em;
}
.pdf-toc-cell:last-child { /* page number */
  vertical-align: bottom;
  padding-right: 0;
  text-align: right;
}

/* table_key_value component */

.sdoc-table_key_value {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) minmax(min-content, 1fr);
  place-items: stretch stretch;
  place-content: stretch stretch;
  position: relative;
  border: var(--base-border);
  border-radius: calc(var(--base-rhythm)*0.5);

  margin: var(--base-padding) 0;
  padding: calc(var(--base-rhythm)*0.5);
  gap: 2px;

  width: fit-content;
  max-width: 100%;
  /* overflow-x: auto; */
}

.sdoc-table_key_value-section,
.sdoc-table_key_value-key,
.sdoc-table_key_value-value {
  padding: var(--base-rhythm) calc(var(--base-rhythm)*2);
  background-color: var(--color-bg-secondary);
}

.sdoc-table_key_value-key {
  grid-column: 1 / 2;
  color: var(--color-fg-main);

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;

  position: relative;
  transition: 0.3s all;
}

a.sdoc-table_key_value-key {
  background-color: rgba(255,255,255,0.5);
  color: var(--color-fg-contrast);
  padding-right: calc(var(--base-rhythm)*5);
  align-items: center;
}

a.sdoc-table_key_value-key:hover {
  background-color: rgba(255,255,255,1);
  color: var(--color-fg-accent);
}

a.sdoc-table_key_value-key::after {
  content: "▸";
  position: absolute;
  right: calc(var(--base-rhythm)*2);
  color: var(--color-fg-accent);
  font-size: var(--font-size-sm);
}

.sdoc-table_key_value-value {
  grid-column: 2 / 3;
}

.sdoc-table_key_value-section {
  grid-column: 1 / -1;

  padding: calc(var(--base-rhythm)*2);
  padding-top: calc(var(--base-rhythm)*4);
  padding-bottom: calc(var(--base-rhythm)*1);
  font-family: var(--code-font-family);

  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  background-color: var(--color-bg-main);
}

/* badge */

.badge {
  white-space: nowrap;
}

.badge::before {
  content: attr(text);
  padding: 0 calc(var(--base-rhythm)/2);
  border: 1px solid;
  border-radius: calc(var(--base-rhythm)/2);
  font-size: var(--font-size-xxsm);
  font-weight: 600;
  text-transform: uppercase;
}

.error {
  color: var(--color-danger);
}

/* tabs */

sdoc-tab-content {
  display: none;
}
sdoc-tab-content[active] {
  display: contents;
}

sdoc-tabs {
  grid-column: 1 / -1;

  /* compensate top padding for sdoc-form-grid: */
  /* margin-top: calc(var(--base-rhythm)*(-4)); */
  padding: calc(var(--base-rhythm)*(1)) calc(var(--base-rhythm)*(2)) 0;

  background-color: var(--color-bg-main);
  border-radius: 4px;

  display: flex;
}

sdoc-tab {
  font-size: var(--font-size-xsm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  display: inline-flex;

  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;

  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;

  user-select: none;
  cursor: pointer;
  appearance: none;

  /* 1.5 column-gap is compensated by SVG negative margin */
  /* column-gap: calc(var(--base-rhythm)*1.5); */

  min-height: calc(var(--base-rhythm)*4);
  padding-left: calc(var(--base-rhythm)*1.5);
  padding-right: calc(var(--base-rhythm)*1.5);

  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0);
  background-clip: padding-box;

  transition: 0.2s;
}

sdoc-tab:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

sdoc-tab[active] {
  color: var(--color-hover);
  background-color: rgba(255, 255, 255, 1);
  cursor: default;
}

sdoc-tab[data-errors] {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

sdoc-tab[data-errors]::after {
  content: attr(data-errors);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-danger);
  color: var(--color-bg-contrast);
  font-size: var(--font-size-xsm);
  height: calc(var(--font-size-xsm)*1.75);
  width: calc(var(--font-size-xsm)*1.75);
  aspect-ratio: 1;
  border-radius: 50%;

  /* parent column-gap == 0 */
  position: relative;
  right: calc(var(--base-rhythm)*(-1));
}

sdoc-tabs.in_aside_panel {
  background-color: var(--color-highlight-secondary);
  border-bottom: 4px solid var(--color-bg-main);
}

sdoc-tabs.in_aside_panel sdoc-tab:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

sdoc-tabs.in_aside_panel sdoc-tab[active] {
  background-color: var(--color-bg-main);
}

/* document_issues */

.document_issues-banner {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: var(--base-gap);
  font-size: var(--font-size-sm);
}

.document_issues-toggler {
  text-align: right;
}

.document_issues-banner_details {
  display: block;
  overflow: hidden;
  color: var(--color-danger);
  border: 1px solid;
  border-radius: var(--requirement-border-radius);
}

.document_issues-banner_summary {
  font-weight: 600;
  position: relative;
  color: var(--color-danger);
  padding-inline: calc(2 * var(--base-rhythm));
  padding-block: var(--base-rhythm);
  cursor: pointer;
  user-select: none;
  display: flex;
}

.document_issues-banner_summary::before {
  content: '▸';
  margin-right: var(--base-rhythm);
}

[open] > .document_issues-banner_summary::before {
  content: '▾';
}

.document_issues-banner_summary::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0.1;
}

.document_issues-banner_content {
  position: relative;
  color: var(--color-fg-contrast);
  padding-inline: calc(2 * var(--base-rhythm));
  padding-block: calc(1 * var(--base-rhythm));
}

.document_issues-banner ul {
  margin: 0;
  padding-inline-start: 20px;
}

.field_issue {
  grid-column: 1 / -1;
  position: relative;
  color: var(--color-danger);
  padding: var(--base-rhythm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.field_issue-ribbon {
  position: relative;
  padding: calc(.5 * var(--base-rhythm)) var(--base-rhythm);
  border-radius: calc(.5 * var(--base-rhythm));
  border: 2px solid;
}

.field_issue-ribbon::before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: var(--base-rhythm);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid currentColor;
}

.field_issue-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
}