@import '@clinic/clinic-common/styles/styles.css';
@import '@clinic/clinic-common/spinner/style.css';
@import '@clinic/clinic-common/icons/style.css';
@import './draw/frames.css';
@import './draw/banner.css';
@import './draw/header.css';

html {
  /* Define colors */
  --main-bg-color: rgb(27, 30, 39);
  --main-bg-translucent: rgba(27, 30, 39, 0.94);
  --overlay-bg-color: rgba(55, 61, 79, 0.94);

  --banner-bg-color: rgb(41, 45, 57);
  --nc-colour-header-background: rgb(41, 45, 57);

  --spinner-border-color: var(--cyan-highlight);

  --icon-color:var(--max-contrast);

  /* Matches --banner-bg-color when overlaid over --main-bg-color */
  --node-background: rgba(212, 224, 255, 0.08);
  --highlight-bg-color: rgba(212, 224, 255, 0.3);

  --nearform-color: rgb(237,24,40);

  --primary-grey: rgb(121,122,124);
  --grey-highlight: rgb(191,192,194);

  --max-contrast: rgb(255, 255, 255);
  --reverse-contrast: rgb(0, 0, 0);
  --translucent-reverse: rgba(0, 0, 0, 0.86);

  --cyan-strong: rgb(166, 228, 255);
  --cyan-highlight: rgb(96, 147, 208);
  --cyan: rgb(63, 125, 198);
  --heading-on-cyan: rgb(255, 255, 255);

  --party-colour-1: var(--max-contrast);
  --party-colour-2: var(--cyan);
  --party-colour-3: var(--primary-grey);

  --type-colour-1: rgb(173, 91, 35); /* Rusty orange */
  --type-colour-2: rgb(20, 255, 195); /* Pale green */
  --type-colour-3: rgb(255, 152, 253); /* Pinkish lilac */
  --type-colour-4: rgb(89, 0, 208); /* Deep violet */
  --type-colour-5: rgb(255, 242, 0); /* Rich yellow */

  --shortcut-stroke: transparent;

  /* Define text sizes */
  --main-text-size: 10pt;

  /* Define element sizes used in calculations by other elements or related to fixed JS variables */
  --banner-height: 65px;
  --footer-height: 65px;
  --header-height: 65px;
  --eye-icon-total-width: 27px;

  /* !important is needed on applying these to override the stroke-width style set from js line width settings */
  --highlighted-type-width: 6px;
  --type-width: 4px;
  --highlighted-party-width: 4px;
  --party-width: 2px;

  /* Define animation variables */
  --transition-duration: 0.8s;

  /* stroke-dasharray properties; used in monochrome mode */
  --dasharray-solid: none;
  --dasharray-dashed: 1.3 0.7;
}

html.light-theme {
  --main-bg-color: rgb(239, 239, 239);
  --main-bg-translucent: rgba(239, 239, 239, 0.94);
  --overlay-bg-color: rgba(209, 211, 218, 0.94);

  --banner-bg-color: rgb(65, 69, 85);
  --nc-colour-header-background: rgb(65, 69, 85);

  --node-background: rgb(255, 255, 255);
  --highlight-bg-color: rgba(0, 0, 0, 0.3);

  --max-contrast: rgb(0, 0, 0);
  --reverse-contrast: rgb(255, 255, 255);
  --translucent-reverse: rgba(255, 255, 255, 0.86);

  --primary-grey: rgb(114,114,114);
  --grey-highlight: rgb(64,65,61);

  --cyan-strong: rgb(0, 27, 74);

  --shortcut-stroke: var(--primary-grey);

  --small-chevron: var(--down-cyan-chevron-arrow);
  --icon-color:var(--cyan);
}

/* Main layout */

html, body {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  background: var(--main-bg-color);
  /* To resolve inconsistent browser issues:
   * - Chrome flashes an empty y scrollbar inconstently on some events in sublayouts
   * - Firefox adds an empty x scrollbar to sublayouts */
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 100vh;
}

main#bubbleprof-main {
  /* MS Edge has a weird display problem where it sometimes resets the body background to white
   * particularly if dev tools or sometimes settings are open. Unrelated to light/dark theme.
   * Bug also affects main if no additional selector is provided. Very strange browser bug. */
  background: var(--main-bg-color);
}

/* Global Typography */

html * {
  box-sizing: border-box;
}

html #banner, html #header, html #node-link, html #side-bar, html #footer {
  /* Light text on dark background in the browser looks blocky. To make it smoother
     and clearer, we use antialiased font rendering in dark theme. More details,
     especially on why this is a bad idea for dark text on light backgrounds:
       http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.light-theme #header, html.light-theme #node-link, html.light-theme #side-bar {
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
}

.hidden {
  display: none;
}

.collapsed .collapsible-content-wrapper {
  display: none;
}

a.external-link:link,
a.external-link:visited {
  color: var(--cyan);
  text-decoration: none;
}

/* Header */
.is-loading-font .nc-header {
  opacity: 0;
}

.ncb-font-spinner-container {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

body[data-highlight-party='user'] #header .interactive-key.party-user,
body[data-highlight-party='external'] #header .interactive-key.party-external,
body[data-highlight-party='nodecore'] #header .interactive-key.party-nodecore,
body[data-highlight-type='files-streams'] #header .interactive-key.type-files-streams,
body[data-highlight-type='networks'] #header .interactive-key.type-networks,
body[data-highlight-type='crypto'] #header .interactive-key.type-crypto,
body[data-highlight-type='timing-promises'] #header .interactive-key.type-timing-promises,
body[data-highlight-type='other'] #header .interactive-key.type-other {
  border-bottom-color: var(--cyan);
}

body[data-highlight-party='user'] #header .interactive-key.party-user .party-icon,
body[data-highlight-party='external'] #header .interactive-key.party-external .party-icon,
body[data-highlight-party='nodecore'] #header .interactive-key.party-nodecore .party-icon {
  stroke-width: var(--highlighted-party-width) !important;
}
body[data-highlight-type='files-streams'] #header .interactive-key.type-files-streams .type-icon,
body[data-highlight-type='networks'] #header .interactive-key.type-networks .type-icon,
body[data-highlight-type='crypto'] #header .interactive-key.type-crypto .type-icon,
body[data-highlight-type='timing-promises'] #header .interactive-key.type-timing-promises .type-icon,
body[data-highlight-type='other'] #header .interactive-key.type-other .type-icon {
  stroke-width: var(--highlighted-type-width) !important;
}

/* Footer */
#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 12;
  display: flex;
  flex-direction: row-reverse;
}

#footer.collapsed {
  z-index: 2;
}

#footer .bar {
  width: 25%;
  background: var(--cyan);
}

#footer .bar {
  display: flex;
}

#side-bar .bar, /* #side-bar .bar is invisible unless in portrait view appears in footer */
#footer .bar {
  border-top: 1px solid var(--cyan-highlight);
  overflow: hidden;
  cursor: pointer;
  height: var(--footer-height);
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

#side-bar .bar .text,
#footer .bar .text {
  font-size: 14pt;
  font-variant: all-small-caps;
  font-weight: bold;
  color: var(--heading-on-cyan);
  align-items: center
}


#footer .bar .icon-img {
  transform: rotate(90deg)
}

#side-bar .bar .icon-img,
#footer .bar .icon-img {
  margin: 16px 10px;
  font-size: 32px;
  color: var(--heading-on-cyan);
}

#side-bar .collapse-control .icon-img{
  color: var(--icon-color);
}


#footer-inner {
  background: var(--overlay-bg-color);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 75%;
  overflow-y: auto;
  max-height: calc(50vh - var(--footer-height));
  padding: 8px 0;
}

#side-bar .close,
#footer .close {
  width: 24px;
  height: 24px;
  position: sticky;
  top: 0;
  float: right;
  display: block;
  line-height: 14px;
  font-size: 20px;
  cursor: pointer;
  color: var(--cyan-highlight);
}
@supports not (position: sticky) {
  #side-bar .close,
  #footer .close {
    position: relative;
  }
}

/* View modes: 'maximised', 'fit', 'scroll'; */

body[data-view-mode='fit'] #node-link {
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--banner-height) - var(--header-height));
  min-height: calc(100vh - var(--banner-height) - var(--header-height));
}
@supports not (position: sticky) {
  body[data-view-mode='fit'] #node-link {
    position: relative;
    top: 0;
  }
}

/* Node-link diagram and container */

svg.bubbleprof {
  min-width: 0;
}

svg.bubbleprof .line-segment {
  fill: none;
}

svg.bubbleprof .node-group {
  cursor: pointer;
}

svg.bubbleprof .outer-path {
  fill: var(--node-background);
  stroke-width: 0.5px;
  stroke: var(--shortcut-stroke);
  paint-order: stroke fill;
}

svg.bubbleprof .outer-path.selected-node {
  fill: var(--highlight-bg-color);
  stroke: none;
}

svg.bubbleprof .node-group .text-label {
  font-size: 10pt;
  dominant-baseline: middle;
  text-anchor: middle;
  font-weight: normal;
}

svg.bubbleprof .node-group .on-line-label {
  text-anchor: middle
}

svg.bubbleprof .node-group .endpoint-label {
  text-anchor: start;
  opacity: 0.8;
}

svg.bubbleprof .node-group .flipped-label {
  text-anchor: end;
}

svg.bubbleprof .node-group .smaller-label {
  font-size: 9pt;
  opacity: 0.6;
}

svg.bubbleprof .node-group .time-label {
  font-size: 8pt;
}

svg.bubbleprof .node-group .lower-label {
  /* On browsers without dominant-baseline, e.g. MS Edge, JS applies dy attr */
  dominant-baseline: text-before-edge;
}

svg.bubbleprof .node-group .upper-label {
  dominant-baseline: auto;
}

svg.bubbleprof .node-group.shortcut .outer-path {
  fill: var(--translucent-reverse);
}

svg.bubbleprof .node-group.shortcut .name-label {
  font-size: 9pt;
}

svg.bubbleprof .node-group .inner-circle {
  fill: var(--main-bg-color);
  stroke: none;
}

.pending-animation svg.bubbleprof {
  visibility: hidden;
}

svg.bubbleprof.fade-elements-in .outer-path,
svg.bubbleprof.fade-elements-in .text-label,
svg.bubbleprof.fade-elements-in .inner-circle,
svg.bubbleprof.complete-fade-in {
  animation-duration: var(--transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: transition-fade-in;
}

svg.bubbleprof.fade-elements-out .outer-path,
svg.bubbleprof.fade-elements-out .text-label,
svg.bubbleprof.fade-elements-out .inner-circle,
svg.bubbleprof.complete-fade-out {
  animation-duration: var(--transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: transition-fade-out;
}

@keyframes transition-fade-in {
  0% {
    opacity: 0;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes transition-fade-out {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#sublayout-svg {
  position: absolute;
  top: 0;
}

#node-link {
  position: relative;
  width: 75%;
  z-index: 10;
}

#node-link:hover, #node-link:focus {
  /* hover boxes above #header when focus on this */
  z-index: 11;
}

#node-link .sublayout {
  z-index: 11;
}

#node-link.redraw {
  z-index: 1;
}

#node-link .sublayout .close-btn {
  display: block;
  top: 8px;
  right: 8px;
  background: var(--reverse-contrast);
  color: var(--cyan);
  z-index: 20;
  position: absolute;
  padding: 6px;
  font-size: 28px;
  cursor: pointer;
}

#node-link .back-btn {
  display: flex;
  top: 8px;
  left: 30px;
  width: 40px;
  height: 40px;
  background: var(--reverse-contrast);
  z-index: 20;
  position: absolute;
  cursor: pointer;
  color: var(--cyan);
  align-items: center;
  justify-content: center;
}

#node-link .back-btn .icon-img {
  font-size: 28px;
}

#node-link .back-btn.hidden {
  display: none;
}

/* Sidebar */

#side-bar {
  width: 25%;
  margin: 16px 0 89px 0;
  padding: 0 24px 0 16px;
  border-left: 1px solid var(--cyan);
  font-size: var(--main-text-size);
  color: var(--primary-grey);
  position: relative;
}

.side-bar-drag {
  position: absolute;
  height: 100%;
  width: 6px;
  margin-left: calc(-16px - 3px);
  cursor: ew-resize;
}

#side-bar .collapse-control,
#footer .collapse-control,
#header .collapse-control{
  cursor: pointer;
  color: var(--max-contrast);
  border-bottom: 1px solid var(--cyan);
  position: relative;
  padding: 8px 16px 8px 8px;
  display: flex;
  justify-content: space-between;
}

#side-bar .bar.collapse-control,
#footer .bar.collapse-control {
  justify-content: flex-end;
}

.collapse-control .icon-img{
  font-size: 1.1em;
}

#header .collapse-control .icon-img {
  color: var(--icon-color);
}

.collapsed .collapse-control .icon-img {
  transform: scaleY(-1);
}

#footer.collapsed .bar .icon-img{
  transform: rotate(-90deg)
}

#side-bar .side-bar-item .collapsible-content-wrapper {
  margin-left: 8px;
}

#side-bar .key-bubble-sample {
  float: left;
  margin-right: 6px;
  margin-left: -12px;
  margin-bottom: 6px;
}

#side-bar .external-link {
  display: inline-flex;
}
#side-bar .external-link svg{
  margin-left: 0.3em;
}

#side-bar strong,
#side-bar h4 {
  color: var(--grey-highlight);
}

body.spiderweb-layout svg.bubbleprof .link-inner {
  /* TODO: visible only in spiderweb layout */
  stroke: var(--reverse-contrast);
  opacity: 0.5;
}

body[data-highlight-party='user'] #node-link svg:not(:hover) .party-user,
body[data-highlight-party='external'] #node-link svg:not(:hover) .party-external,
body[data-highlight-party='nodecore'] #node-link svg:not(:hover) .party-nodecore,
body[data-highlight-party='nodecore'] #node-link svg:not(:hover) .party-root {
  stroke-width: var(--highlighted-party-width) !important;
  stroke-linecap: round;
}

body[data-highlight-type='files-streams'] #node-link svg:not(:hover) .type-files-streams,
body[data-highlight-type='networks'] #node-link svg:not(:hover) .type-networks,
body[data-highlight-type='crypto'] #node-link svg:not(:hover) .type-crypto,
body[data-highlight-type='timing-promises'] #node-link svg:not(:hover) .type-timing-promises,
body[data-highlight-type='other'] #node-link svg:not(:hover) .type-other {
  stroke-width: var(--highlighted-type-width) !important;
  stroke-linecap: round;
}

/* Area chart */

.area-chart-svg {
  width: 100%;
  height: 70px;
  display: block;
  position: relative;
  mix-blend-mode: screen;
  z-index: 2;
}

.area-chart {
  position: relative;
  font-size: var(--main-text-size);
}

.area-chart .slice-highlight {
  background: var(--cyan-strong);
  opacity: 0.2;
  position: absolute;
  z-index: 1;
}

.area-chart .hover-box {
  width: 135px;
  color: var(--grey-highlight);
}

.area-chart .hover-box .title-block {
  padding: 12px 8px;
}

.area-chart .hover-box strong {
  color: var(--max-contrast);
}

.area-chart .hover-box .vertical-arrow {
  margin-left: 9px;
}

#node-link .area-chart .hover-box > .vertical-arrow {
  border-top-color: var(--main-bg-translucent);
}

#node-link .area-chart .hover-box {
  background: var(--main-bg-translucent);
  margin-top: -55px;
  margin-left: 6px;
}

#side-bar .area-chart .hover-box {
  margin-top: -32px;
}


/* Hover box */

.hover-box {
  position: absolute;
  width: 320px;
  background-color: var(--translucent-reverse);
  color: var(--primary-grey);
  margin-left: 6px;
  z-index: 25;
  margin-top: -26px;
}

.hover-box .block {
  padding: 14px;
}

.hover-box .block:not(:last-child) {
  border-bottom: 2px solid var(--main-bg-color);
}

.hover-box .title-block {
  position: relative;
}

@keyframes loading-bar {
  0% {
    transform: translate3d(0px, 0, 0) scale(0, 1);
  }

  50% {
    transform: translate3d(107px, 0, 0) scale(0.3333, 1);
  }

  100% {
    transform: translate3d(320px, 0, 0) scale(0, 1);
  }
}

.hover-box .title-block:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  height: 2px;
  width: 100%;
  background-color: var(--cyan);
  transform-origin: 0 50%;
  transform: translate3d(0, 0, 0) scale(0, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.hover-box.off-bottom .title-block:after {
  top: auto;
  bottom: 100%;
}

.hover-box .is-loading.title-block:after {
  animation-name: loading-bar;
}

.hover-box.horizontal-flip {
  margin-left: -6px;
}

.hover-box .title-block:before {
  content: "";
  display: block;
  position: absolute;
  border: 10px solid transparent;
}

.hover-box:not(.horizontal-flip) .title-block:before {
  border-right-color: var(--reverse-contrast);
  margin-left: -18px;
  left: 0;
}

.hover-box.horizontal-flip .title-block:before {
  border-left-color: var(--reverse-contrast);
  margin-right: -18px;
  right: 0;
}

.hover-box.off-bottom .time-block {
  bottom: 100%;
  position: absolute;
  background: var(--reverse-contrast);
  border-bottom: 2px solid var(--main-bg-color);
}

.hover-box.off-bottom .title-block {
  border-bottom: none;
}

.hover-box p {
  margin: 14px 0 0 0;
  font-size: var(--main-text-size)
}

.hover-box strong {
  font-weight: normal;
  color: var(--grey-highlight);
}

.hover-box h2 {
  margin: 0;
  font-size: 13pt;
  color: var(--max-contrast);
  font-weight: bold;
  word-break: break-all;
}

.hover-box .click-message {
  display: block;
  position: relative;
  color: var(--cyan);
  font-size: var(--main-text-size);
  font-weight: bold;
}

.hover-box .vertical-arrow {
  display: none;
  margin-left: 6px;
  cursor: pointer;
}

.hover-box.use-vertical-arrow {
  margin: 0;
}

.hover-box.use-vertical-arrow .title-block:before {
  display: none;
}

.hover-box.use-vertical-arrow .vertical-arrow {
  display: block;
  position: absolute;
  left: 6px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.hover-box.use-vertical-arrow:not(.off-bottom) > .vertical-arrow {
  border-bottom-color: var(--reverse-contrast);
  border-top: none;
  top: 0;
  margin-top: -9px;
}

.hover-box.use-vertical-arrow.off-bottom > .vertical-arrow {
  border-top-color: var(--reverse-contrast);
  border-bottom: none;
  bottom: 0;
  margin-bottom: -9px;
}

#node-link .hover-box .title-block {
  cursor: pointer;
}

/* Lookup box for text-based searches */

.lookup .collapsible-content-wrapper {
  position: relative;
}

.lookup .lookup-input {
  width: 100%;
  padding: 8px;
  margin: 12px 0 0 0;
  border: none;
  border-bottom: 2px solid var(--cyan);
}

.lookup .lookup-input.default-text {
  color: var(--primary-grey);
}

.lookup .lookup-suggestions {
  margin: 0;
  padding: 0;
  width: calc(100%);
  cursor: pointer;
  max-height: 50vh;
  overflow: auto;
  background-color: var(--banner-bg-color);
  position: absolute;
  z-index: 9;
}

.lookup .results-count {
  background: var(--overlay-bg-color);
  color: var(--max-contrast);
  padding: 8px 24px;
  list-style: none;
  font-size: var(--main-text-size);
}

.lookup .lookup-suggestions .suggestion {
  margin: 1px 0;
  padding: 8px 4px;
  background: var(--reverse-contrast);
  color: var(--cyan);
  list-style: none;
  font-size: 8pt;
  font-family: var(--nc-font-family-monospace);
  white-space: pre-wrap;
  word-break: break-all;
}

/* Global classes linking styles to data properties */

.party-user .party-icon,
.line-segment.party-user,
.by-variable.party-user {
  border-color: var(--party-colour-1);
  stroke: var(--party-colour-1);
  stroke-dasharray: var(--dasharray-solid)

}
.party-external .party-icon,
.line-segment.party-external,
.by-variable.party-external {
  border-color: var(--party-colour-2);
  stroke: var(--party-colour-2);
  stroke-dasharray: var(--dasharray-solid)
}

.party-root .party-icon,
.line-segment.party-root,
.by-variable.party-root,
.party-nodecore .party-icon,
.line-segment.party-nodecore,
.by-variable.party-nodecore {
  border-color: var(--party-colour-3);
  stroke: var(--party-colour-3);
  stroke-dasharray: var(--dasharray-dashed)
}

.party-user.text-label {
  fill: var(--party-colour-1);
}
.party-external.text-label {
  fill: var(--party-colour-2);
}
.party-root.text-label,
.party-nodecore.text-label {
  fill: var(--party-colour-3);
}

.type-files-streams,
.type-files-streams .by-variable {
  stroke: var(--type-colour-1);
  stroke-dasharray: var(--dasharray-dashed)
}
.type-files-streams.by-variable {
  border-color: var(--type-colour-1);
}
.type-networks,
.type-networks .by-variable {
  stroke: var(--type-colour-2);
  stroke-dasharray: var(--dasharray-solid)
}
.type-networks.by-variable {
  border-color: var(--type-colour-2);
}
.type-crypto,
.type-crypto .by-variable {
  stroke: var(--type-colour-3);
  stroke-dasharray: var(--dasharray-dashed)
}
.type-crypto.by-variable {
  border-color: var(--type-colour-3);
}
.type-timing-promises,
.type-timing-promises .by-variable {
  stroke: var(--type-colour-4);
  stroke-dasharray: var(--dasharray-solid)
}
.type-timing-promises.by-variable {
  border-color: var(--type-colour-4);
}
.type-other,
.type-other .by-variable {
  stroke: var(--type-colour-5);
  stroke-dasharray: var(--dasharray-dashed)
}
.type-other.by-variable {
  border-color: var(--type-colour-5);
}

.hover-box .area-chart {
  background: var(--reverse-contrast);
  opacity: 1;
}

.area-chart .x-axis .tick text {
  fill: var(--primary-grey);
}

.area-chart .x-axis .tick line {
  stroke: var(--primary-grey);
}

.hover-box .area-chart .x-axis .tick line {
  stroke: var(--main-bg-color);
}

.area-chart .x-axis .domain {
  display: none;
}

body:not(.initialized) {
  position: relative;
  z-index: 3;
}

@media only screen and (max-width: 910px){
  #header .highlight-bar *:not(.interactive-key) > label {
    display: none;
  }
  #header .panel {
    display: inline;
  }
  #header {
    display: block;
    margin: 0;
  }
  #header .hover-box {
    margin-left: 0;
  }
  #header .hover-box.use-vertical-arrow:not(.off-bottom) > .vertical-arrow {
    margin-top: -5px;
  }
  #header .hover-box.use-vertical-arrow .vertical-arrow {
    border-width: 6px;
  }
  #node-link .back-btn {
    left: 8px;
  }
}

@media only screen and (max-width: 750px){
  #header .panel .interactive-key {
    font-size: 9pt;
    padding: 0;
  }

  .breadcrumb-bar {
    padding-left: 7px;
  }
  .type-icon {
    width: 7px;
    margin-right: 3px;
  }
}

@media only screen and (max-width: 635px){
  body {
    --header-height: 75px;
  }
  #header .help-link-block {
    top: 6px;
    right: -3px;
  }
  #header .help-link-block .help-link:before {
    content: 'Help';
  }
  #header .highlight-bar .panel:last-child {
    margin-right: 75px;
  }
}

@media only screen and (max-width: 515px){
  #header .panel,
  #header .panel.breadcrumbs-panel {
    margin: 0;
    display: block;
    white-space: nowrap;
  }
  #header .highlight-bar {
    display: block;
  }
  #header .help-link-block {
    top: 6px;
    right: 4px;
  }
}

@media screen and (orientation: landscape) {
  .portrait-only {
    display: none !important;
  }
}

@media screen and (orientation: portrait) {
  .portrait-collapsed .collapsible-content-wrapper {
    display: none;
  }

  .lookup .lookup-suggestions {
    max-height: 25vh;
  }

  #header {
    margin: 0;
  }

  #node-link {
    /* Override any resizes made in landscape mode.
     * By using !important here, we can also maintain the user's custom sizes if they go back into landscape. */
    width: 100% !important;
  }

  body[data-view-mode='fit'] #node-link {
    max-height: calc(100vh - var(--banner-height) - var(--footer-height) - var(--header-height));
    min-height: calc(100vh - var(--banner-height) - var(--footer-height) - var(--header-height));
  }

  #side-bar {
    position: fixed;
    bottom: 0;
    margin: 0;
    left: 0;
    z-index: 12;
    padding: 0;
    border: none;
  }

  #side-bar.portrait-collapsed {
    z-index: 2;
  }

  #footer {
    right: 0;
  }

  #footer .bar {
    /* !important to override resizes made in landscape mode */
    width: 100% !important;
  }

  #footer,
  #side-bar {
    /* !important to override resizes made in landscape mode */
    width: 50% !important;
    display: flex;
    flex-direction: column-reverse;
  }

  #side-bar .bar {
    height: var(--footer-height);
    display: flex;
    flex-direction: row-reverse;
    background: var(--cyan);
    border-right: 1px solid var(--main-bg-color);
  }

  #footer .bar .icon-img {
    transform: rotate(0deg);
  }

  #side-bar .bar .icon-img {
    color: var(--heading-on-cyan);
  }

  #footer.collapsed .bar .icon-img,
  #side-bar.portrait-collapsed .bar .icon-img {
    transform: rotate(180deg);
  }

  #footer-inner {
    position: relative;
    /* !important to override resizes made in landscape mode */
    width: 200% !important;
    left: -100%;
  }

  #side-bar-inner {
    max-height: calc(50vh - var(--footer-height));
    min-height: 35vh;
    overflow: auto;
    /* !important to override resizes made in landscape mode */
    width: 200% !important;
    padding: 8px 24px;
    border-top: 1px solid var(--cyan);
    background: var(--main-bg-translucent);
  }

  #side-bar .close {
    margin-right: -24px;
    overflow: hidden; /* ensure the text doesn't force a horizontal scrollbar */
  }

  .side-bar-item:first-of-type {
    margin-top: 12px;
  }
}