/* The shared inline symbol uses the supplied arrow_right_alt.svg path.
   Inline references also work when a page is opened directly from disk. */
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.arrow-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
  pointer-events: none;
  transform: rotate(var(--arrow-angle, 0deg));
  transform-origin: center;
}
.arrow-icon--left { --arrow-angle: 180deg; }
.arrow-icon--up { --arrow-angle: -90deg; }
.arrow-icon--down { --arrow-angle: 90deg; }
.arrow-icon--up-right { --arrow-angle: -45deg; }
.arrow-icon--down-right { --arrow-angle: 45deg; }
.arrow-icon--up-left { --arrow-angle: -135deg; }
.arrow-icon--down-left { --arrow-angle: 135deg; }
:where(.arrow-slot) { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.arrow-slot > .arrow-icon { display: block; }
.scene-view b, .case-next-arrow, .viewer-direction, .back-top { padding: 0; }
.scene-view b > .arrow-icon, .case-next-arrow > .arrow-icon,
.viewer-direction .arrow-icon, .back-top > .arrow-icon { width: 75%; height: 75%; }
.viewer-direction > .arrow-slot { display: grid; place-items: center; width: 100%; height: 100%; }
.mobile-menu a > .arrow-icon { margin-left: auto; width: 24px; height: 24px; }
.project-scope > span, .footer-bottom > a, .case-footer > a:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 600px) {

  .project-scope > span { display: inline-flex; }
}