@media (prefers-reduced-motion: reduce) {
  html {
    transition: none;
  }
}

:root {
  interpolate-size: allow-keywords;
  /* Color scheme (inspired from https://colorpalettes.net/color-palette-4621/) */
  --color-map-bg: #E8E6E2;  /* map background (map is slightly transparent) */
  --color-map-alt-bg: #EEECE8;
  --color-map-water: #678;
  --color-menu-sel-bg: #030C13;  /* main menu selected entry or hovered non-selected or non selectable */
  --color-menu-sel-fg: #EEE6DB; /*#AEB1B5;*/  /* contrasting with menu */
  --color-menu-unsel-bg: #AEB1B5E0;  /* main menu unselected, unhovered */
  --color-menu-unsel-fg: #EFE9E1;
  --color-submenu-bg: #4B5862;  /* submenu are only visible when menu is selected so no need for a sel/unsel distinction */
  --color-submenu-fg: #AEB1B5;
  --color-item-sel-bg: #DBD3C8;  /* vivid color of a selected item in a set */
  --color-item-sel-fg: #030C13;
  --color-item-unsel-fg: #EFE9E1;
  --color-danger-bg: #DB644F;  /* evocative of danger but outside the vivid color range used for data */
  --color-danger-fg: #DBD3C8;
  --color-danger-sel-bg: #EB6C57;
  --color-info-bg: #4E76CD;  /* comfortable color also away from data range */
  --color-info-fg: #EEE6DB;
  /* Some special colors for related functions: */
  --color-special-play-bg: #ECECEC;  /* play/pause/progressbar */
  --color-special-play-fg: #B33933;
  --color-special-now: orange;
  --color-special-info-fg: orange;
  /* BGP events */
  --color-bgp-initial: grey;
  --color-bgp-announce: green;
  --color-bgp-reannounce: darkgreen;
  --color-bgp-change: yellow;
  --color-bgp-withdrawal: red;
  /* Others */
  --calendar-height: 52px;
  --traceroute-height: 185px; /* looks good */
  --details-max-height: 200px;
  --anim-speed: 150ms;
  --anim-speed-slow: 500ms;
  --color-link: #485fc7;
  --color-link-hover: #4870dd;
  --color-link-on-dark: #55d;
  --color-link-on-dark-hover: #48c7bd; /* Like Bulma link blue but brighter */
  --color-selection-src: yellow;
  --color-selection-dst: orange;
  --radius-locked-node: 10;
  /* BEWARE: those need th e`px` unit for the animation to be smooth with chrome! */
  --width-locked-path: 7px;  /* for node/path in the traceroute window */
  --width-locked-path-large: 12px; /* for src/dst selection */
  --small-text-height: 16px;
}

@property --blink-danger {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@keyframes heartbeat {
  0% { --blink-danger: var(--color-menu-sel-fg); }
  10% { --blink-danger: var(--color-danger-bg); }
  18% { --blink-danger: color-mix(in srgb, var(--color-menu-sel-fg) 70%, var(--color-danger-bg)); }
  28% { --blink-danger: var(--color-danger-bg); }
  40% { --blink-danger: var(--color-menu-sel-fg); }
  100% { --blink-danger: var(--color-menu-sel-fg); }
}

html {
  font-size: 65%;
}

/* Override Bulma's settings: */

.notification > .delete {
  top: 0.3rem !important;
  right: 0.3rem !important;
}

/* Since we do not allow scrolling the screen, make the drop down menus scrollable: */

div.navbar-dropdown {
  overflow: scroll;
  max-height: 90vh;
}

/* For table columns to be as narrow as possible */
.col-shrink {
  width: 1%;
  white-space: nowrap;
}

.col-right {
  text-align: right !important;
}

.dashtile {
  /* Makes the enclosing div a positioned element for the button absolute
     positioning below: */
  position: relative;
  padding-top: 0.5em;
  /* Occupy all the surrounding tile div: */
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dashtile-head {
  position: absolute;
  top: -1.5em;
  left: -1.5em;
}

.dashtile-name {
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}

.dashtile-menu {
  position: absolute;
  z-index: 1; /* draw over the map */
  width: 100%;
  background: rgb(200 200 200 / 80%);
  color: black;
  overflow: auto;
}

.operation-bullet {
  width: 2em;
  padding-top: 6px;
}

.sublabel {
  width: 4em;
  text-align: right;
  margin-right: 1em;
  margin-left: 0.5em;
  padding-top: 6px;
}

.slide-in {
  translate: -100vw 0; /* start offscreen on the left*/
  animation: slide-in 0.75s ease-out forwards;
}
@keyframes slide-in {
  to { translate: 0 0; }
}

.notif-start-del {
  transform-origin: top;
  max-height: 300px; /* must over-estimate and overridden in the elmt style */
  min-height: 0;  /* override grid's auto */
  overflow: hidden;
  animation: collapse 0.5s ease-out forwards;
}
@keyframes collapse {
  to {
    transform: scale(1, 0);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    min-height: 0;
  }
}

.countdown-wrapper {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-block;
}
.countdown-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  z-index: 1;
}
.countdown-circle {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-opacity: 0.5;
  stroke-dasharray: 50.27;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: countdown-stroke 3s linear forwards;
}
@keyframes countdown-stroke {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 50.27; } /* 2πr = 2π×8 ≈ 50.27 */
}

.pointer-transp {
  pointer-events: none;
}

/*
 * External links opening in another window:
 */

a[target="_blank"]::after {
  content: "□↗";
  font-size: 0.8em;
  vertical-align: super;
  margin-right: 0.3em;
  letter-spacing: -0.5em;
}

/*
 * Main map
 */

svg.ospamap {
  background-color: var(--color-map-bg);
  width: 100%;
  height: 100vh;
}

svg.ospamap > g {
  pointer-events: none;
}

svg.ospamap path {
  shape-rendering: optimizespeed;
}

svg.ospamap .mouse-track {
  /*pointer-events: bounding-box; Not supported by FF */
  pointer-events: fill;
}

svg.ospamap .river {
  fill: none;
  stroke: var(--color-map-water);
  stroke-width: 0.8px;
}

svg.ospamap .coast {
  fill: none;
  stroke: var(--color-map-water);
  stroke-width: 2px;
}

svg.ospamap .lake {
  fill: var(--color-map-bg);
  stroke : var(--color-map-water);
  stroke-width: 1.0px;
}

svg.ospamap :is(.border0, .border1) {
  fill: none;
  stroke: var(--color-submenu-fg);
  stroke-width: 2px;
  stroke-dasharray: 3 2;
}

svg.ospamap .border2 {
  fill: none;
  stroke: var(--color-submenu-fg);
  stroke-width: 3px;
  stroke-dasharray: 4 3;
}

svg.ospamap .border3 {
  fill: none;
  stroke: var(--color-submenu-fg);
  stroke-width: 3px;
  stroke-dasharray: 5 6;
}

svg.ospamap .border4 {
  fill: none;
  stroke: var(--color-submenu-fg);
  stroke-width: 4px;
  stroke-dasharray: 6 7;
}

svg.ospamap .urban {
  fill: var(--color-item-sel-bg);
}

svg.ospamap .tz {
  stroke: #111;
  stroke-width: 0.5;
}

svg.ospamap .tz-even {
  fill: none;
}

svg.ospamap .tz-odd {
  fill: var(--color-map-alt-bg);
}

svg.ospamap .tz-frac {
  fill: #ebe9e7;
}

svg.ospamap .sun ellipse {
  fill: url(#sunGrad);
}

svg.ospamap .sun polygon {
  opacity: 0.07;
}

/*
 * Notfications
 */

.ui-notifs {
  position: fixed;
  left: 0;
  top: 4em; /* leave some room for the search box */
  opacity: 80%;
  z-index: 40; /* Bulma's navbar uses 30 for some reason */
  display: grid;
  justify-items: start;
  pointer-events: none;
}

.ui-notif {
  display: inline-block;
  overflow: hidden;
  box-shadow: 2px 5px 4px 2px #0005;
}

/*
 * The Windy-inspired UI on top of the map
 */

.ui {
  position: fixed;
  top: 7em;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  color: var(--color-menu-fg);
  user-select: none;
  pointer-events: none;
}

.ui [data-tooltip] {
  pointer-events: auto;
}

.ui a {
  pointer-events: auto;
}

.ui a.is-selected:hover {
  cursor: default;
}

svg.ui-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
svg.ui-icon path {
  stroke: var(--color-menu-unsel-fg);
}
a.is-selected svg.ui-icon path {
  stroke: var(--color-item-sel-fg);
}

/* Top-Left UI over the map: */

.tlui {
  pointer-events: auto;
  position: fixed;
  left: 0;
  top: 0;
}

.tlui-header {
  display: flex;
  align-items: flex-start;
  padding: 10px 10px 0px 10px;
}

.tlui .field {
  margin-bottom: 0 !important;
}

#search {
  max-width: 6rem;
  transition: max-width var(--anim-speed) ease-in-out;
  anchor-name: --search;
}

#search:focus {
  max-width: max-content;
}

.tlui button.close-search {
  padding-left: 0.5em;
  padding-right: 0.2em;
}

.tlui .dropdown-menu {
  width: anchor-size(--search width);
  position: absolute;
}

.tlui .dropdown-item {
  line-height: 0.8em;
  font-size: 11px;
  margin-left: 1em;
  width: inherit;
}

.tlui-icon {
  display: block;
  width: 36px;
  text-align: center;
  object-fit: cover;
  background-color: white; /*var(--color-menu-unsel-bg);*/
  height: 2.4rem;
  margin-left: 0.5rem;
  padding: 6px 2px;
  border-radius: 20%;
  box-shadow: 1px 2px 4px 1px #0005;
  filter: grayscale(50%) opacity(0.4);
  transition: filter var(--anim-speed) ease;
}

.tlui-icon:hover,
.tlui-icon:focus,
.tlui-icon.selected {
  cursor: pointer;
  filter: grayscale(0%) opacity(1);
}

.tlui-icon.selected {
  background-color: white; /*var(--color-menu-sel-bg);*/
  border-radius: 20% 20% 0 0;
  border-bottom-color: white; /*var(--color-menu-sel-bg);*/
}

.tlui-table {
  display: block;
  font-size: 0.8rem;
  line-height: 9px;
  min-width: 10rem;
  max-height: 40vh;
  overflow-y: auto;
  box-shadow: 1px 2px 10px 3px #0005;
}

.tlui-table thead > tr > th {
  border-width: 0 1px;
  padding-top: 0;
  padding-bottom: 0;
}

.tlui-table thead > tr:first-child > th {
  text-align: center;
  padding-top: 3px;
  padding-bottom: 5px;
}

/* Improve inline editor layout:
 * 1. Narrower layout */

.tlui-table .inline-editor {
  gap: 0 !important;
}
.tlui-table .inline-editor .control .input,
.tlui-table .inline-editor .control .icon { /* for the has-icon-right */
  font-size: 0.7rem;
}
.tlui-table .inline-editor .control .icon {
  width: 1rem;
  margin: 0 3px;
  padding-top: 2px;
}

/* 2. Make help div (with validator) a pop-up */

.tlui-table .autoscroll .table {
  padding-bottom: 1.5rem;
}
.tlui-table .inline-editor .field {
  position: relative;
}
.tlui-table .inline-editor .help {
  position: absolute;
}

/* Right-hand side panel over the map: */

.rhui {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rhui-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--color-menu-unsel-bg);
  color: var(--color-menu-unsel-fg);
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  padding: 0 0.2em 0 0.5em;
  margin-top: 1em;
  box-shadow: 0 3px 5px 2px #000b;
}

.rhui-item.has-text-grey-lighter {
  color: var(--color-menu-unsel-fg) !important;
}

.rhui-item.is-selected, .rhui-item:hover {
  background-color: var(--color-menu-sel-bg);
  color: var(--color-menu-sel-fg);
  transition:
    background-color var(--anim-speed),
    color var(--anim-speed);
}

.rhui-item :is(a, a:hover) {
  color: var(--color-menu-unsel-fg);
  transition: color var(--anim-speed);
}
.rhui-item :is(a.is-selected, a.is-selected:hover) {
  color: var(--color-menu-sel-fg);
  transition: color var(--anim-speed);
}

.rhui-label {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rhui-subitem {
  font-size: .7rem;
  font-weight: 500;
  text-align: right;
}

.rhui-filters {
  display: inline-block;
  background-color: var(--color-submenu-bg);
  color: var(--color-submenu-fg);
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  box-shadow: 0 3px 5px 2px #000b;
}

.rhui-filters .ui-filter {
  margin-right: 0.6em;
}

.ui-choice, ui-choice-title {
  white-space: nowrap;
  padding: 0.2em 0.4em;
  display: inline-block;
  border-radius: 1em;
  color: hsl(221, 14%, 86%);  /* equivalent of bulma has-text-grey-lighter */
}

.ui-choice:hover {
  background-color: var(--color-menu-sel-bg);
  color: var(--color-menu-sel-fg);
  transition:
    background-color var(--anim-speed),
    color var(--anim-speed);
}

.ui-choice.is-selected {
  background-color: var(--color-item-sel-bg);
  color: var(--color-item-sel-fg);
  box-shadow: 0 0 4px #000;
}

.ui-choice-title {
  font-weight: bold;
  padding-left: 0.6em;
}

.ui-choice-title.abs-time {
  width: 7rem;
  text-align: left;
  white-space: nowrap;
}

/* Right-hand side at the bottom: */

.rhbui {
  width: 320px;
  margin-right: 8px;
}

.rhbui :is(a, a:hover) {
  color: var(--color-item-unsel-fg);
  transition: color var(--anim-speed);
}
.rhbui :is(a.is-selected, a.is-selected:hover)  {
  color: var(--color-item-sel-fg);
  transition: color var(--anim-speed);
}

.rhbui-item {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
  text-align: center;
  text-overflow: ellipsis;
  background-color: var(--color-menu-sel-bg);
  color: var(--color-menu-sel-fg);
  border-radius: 1em;
  font-size: 13px;
  margin-bottom: 10px;
  box-shadow: 0 3px 5px 2px #000b;
}

.rhbui-legend {
  width: 100%;
  height: 22px;
  border-radius: 1em;
  padding: 1px;
  /* positioned for the rhbui-legend-current absolute */
  position: relative;
}

.rhbui-legend-scale {
  font-size: 12px;
  text-shadow: 0 0 4px #000;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.rhbui-legend-current {
  position: absolute;
  background-color: #0004;
  min-width: 3em;
  border-radius: 1em;
  border: 1px solid black;
  box-shadow: 0 0 1px #000;
  transition: left var(--anim-speed-slow);
}

.rhbui-legend-placeholder {
  height: 24px; /* account for the 1px padding */
  margin-bottom: 10px;
}

/* Bottom UI elements: play/pause button and timeline */

.bui {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 360px 0 30px; /* Cf .rbhui.width */
  margin: 0;
  display: flex;
  flex-direction: row;
}

.bui-play-pause {
  background-color: var(--color-special-play-bg);
  color: var(--color-special-play-fg);
  box-shadow: 0 3px 5px 1px #0008;
  font-size: 22px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 30px;
  margin-right: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bui-timeline {
  flex: 1;
  min-width: 0;
  pointer-events: auto;
}

/* The background over which the progress bar progresses: */
.bui-progressbar {
  height: 6px;
  width: 100%;
  background-color: var(--color-menu-sel-bg);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  /* Make it positioned for the bui-progressbar-past absolute */
  position: relative;
  /* Make it easier to grab that bar: */
  padding-bottom: 1em;
  cursor: all-scroll;
}

/* The "past" for the animation: */
.bui-progressbar-past {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background-color: var(--color-special-play-bg);
  border-top-left-radius: 6px;
  border-top: 1px solid #0008;
  border-left: 1px solid #0008;
}

/* The marker for the present time: */
.bui-progressbar-now {
  position: absolute;
  top: 0;
  height: 6px;
  width: 5px;
  background-color: var(--color-special-now);
}

.bui-progressbar-time {
  position: absolute;
  margin-left: -25px;
  font-size: 13px;
  top: -2.4em;
  background-color: var(--color-item-sel-bg);
  color: var(--color-item-sel-fg);
  height: 1.8em;
  padding: 0 0.8em;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  border-radius: 0.5em;
  box-shadow: 0 2px 4px 1px #000b;
  text-wrap-mode: nowrap;
}
.bui-progressbar-time::before {
  top: 100%;
  left: 2em;
  border: solid;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  border-top-color: var(--color-item-sel-bg);
  border-width: 0.5em;
  margin-left: -0.5em;
  color: transparent;
}

.bui-data {
  background-color: var(--color-menu-sel-bg);
  box-shadow: 0 10px 12px 4px #000b;
}

.bui-calendar {
  width: 100%;
  height: var(--calendar-height);
  /* Like the progress bar, make it positioned for the bui-calendar-box and bui-calendar .delete */
  position: relative;
}

.bui-calendar-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-right: 1px solid #ffffff18;
}

.bui-calendar > div {
  pointer-events: none;
}

.bui-calendar > svg {
  cursor: grab;
  width: 100%;
  height: 100%;
}

.bui-calendar > svg .is-dragging,
.bui-calendar > svg .is-dragging * {
  cursor: grabbing !important;
}

.bui-calendar > svg .mark {
  cursor: pointer;
  stroke: var(--color-special-now);
  stroke-width: 2px;
}

.bui-calendar > svg .invis-mark {
  cursor: pointer;
  stroke: transparent;
  stroke-width: 6px;
  pointer-events: stroke;
}

.bui-calendar > svg .bgp-initial > .mark {
  stroke: var(--color-bgp-initial);
  stroke-opacity: 0.8;
}
.bui-calendar > svg .bgp-announce > .mark {
  stroke: var(--color-bgp-announce);
  stroke-opacity: 0.8;
}
.bui-calendar > svg .bgp-reannounce > .mark {
  stroke: var(--color-bgp-reannounce);
  stroke-width: 1px;
  stroke-opacity: 0.7;
}
.bui-calendar > svg .bgp-change > .mark {
  stroke: var(--color-bgp-change);
  stroke-opacity: 0.9;
}
.bui-calendar > svg .bgp-withdrawal > .mark {
  stroke: var(--color-bgp-withdrawal);
  stroke-opacity: 0.9;
}

.bui-calendar > svg text.no-data {
  font-size: 0.3px;
  font-style: italic;
  fill: var(--color-item-unsel-fg);
}

/* Color of the X axis for Up/down charts: */
.bui-calendar > svg #fadeSideToSide stop {
  stop-color: var(--color-item-sel-bg);
}

.bui-calendar > svg .axis {
  stroke-width: 2px;
}

:root {
  --fade-width: 5%; /* Define the fade size once */
}

.bui-sel {
  margin-bottom: 5px; /* Some room for the underline decorations */
  line-height: var(--small-text-height);
  height: calc(2px + var(--small-text-height));
  font-size: 13px;
  color: var(--color-item-unsel-fg);
  overflow-x: auto;
  cursor: grab;
  /* Fade on the right to suggest scrolling: */
  mask-image: linear-gradient(to right,
    transparent 0%,
    black var(--fade-width),
    black calc(100% - var(--fade-width)),
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black var(--fade-width),
    black calc(100% - var(--fade-width)),
    transparent 100%);
  /* And add some right-padding there so we don't fad unless the text is long: */

  /* Hide the scrollbar: */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Even you, Webkit: */
.bui-sel::-webkit-scrollbar {
  display: none;
}

.bui-sel-draggable {
  display: inline-block;
  white-space: nowrap;
  padding-right: var(--fade-width);
  padding-left: var(--fade-width);
  user-select: none;
  will-change: transform;
}

.bui-sel-emph {
  font-weight: bold;
}

.bui-sel-item {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}
.bui-sel-item.is-src {
  text-decoration-color: var(--color-selection-src);
}
.bui-sel-item.is-dst {
  text-decoration-color: var(--color-selection-dst);
}
.bui-sel-item.pulse {
  animation: text-deco-pulse 0.75s ease-in-out infinite;
}
@keyframes text-deco-pulse {
  0%, 100% {
    text-decoration-thickness: 0.5px;
  }
  50% {
    text-decoration-thickness: 2.5px;
  }
}

.bgp-initial {
  font-weight: bold;
  color: var(--color-bgp-initial);
}
.bgp-announce {
  font-weight: bold;
  color: var(--color-bgp-announce);
}
.bgp-reannounce {
  font-weight: bold;
  color: var(--color-bgp-reannounce);
}
.bgp-change {
  font-weight: bold;
  color: var(--color-bgp-change);
}
.bgp-withdrawal {
  font-weight: bold;
  color: var(--color-bgp-withdrawal);
}
.bui-sel-draggable .bgp-what {
  font-size: 0.5rem;
  margin-left: 0.5rem;
}
.bui-sel-draggable .bgp-router {
  margin-left: 0.3rem;
}
.bui-sel-draggable .bgp-path {
  margin-left: 0.3rem;
}
.bgp-path-add {
  color: blue;
  font-weight: bold;
}
.bgp-path-del {
  color: red;
  text-decoration: line-through wavy 2px;
}
.bgp-community-warn {
  font-size: bold;
  color: red;
}
.bgp-flap {
  font-size: bold;
  color: orchid;
}

.bui-details {
  line-height: var(--small-text-height);
  font-size: 13px;
  color: var(--color-item-sel-fg);
  background-color: var(--color-item-sel-bg);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: auto;
  text-overflow: ellipsis;
  max-height: var(--details-max-height);
  cursor: auto;
}

.bui-details.hidden {
  height: 0px;
}

.bui-details.shown {
  height: auto;
  transition: height var(--anim-speed-slow);
}

.bui-details-latencies {
  height: var(--small-text-height);
  width: 100%;
}

.bui-details-latencies a line:hover {
  stroke-width: 4px;
}

.bui-traceroute {
  width: 100%;
  height: var(--traceroute-height);
  transition: height var(--anim-speed-slow);
  /* For the bui-traceroute .delete */
  position: relative;
}

.traceroute-infoline {
  height: 32px;
  font-weight: bold;
  font-size: 13px;
  color: var(--color-item-unsel-fg);
}

.traceroute-infoline p {
  line-height: var(--small-text-height);
}

.traceroute-infoline p a {
  font-variant: all-small-caps;
  padding: 2px 5px;
  color: var(--color-link-on-dark);
}
.traceroute-infoline p a:hover {
  color: var(--color-link-on-dark-hover);
}

.traceroute-infoline.is-empty {
  text-align: center;
}

.bui-traceroute svg {
  vector-effect: non-scaling-stroke;
}

/* Cursor of the selection on the main map */
.cursor-panel {
  stroke-opacity: 1;
  stroke-width: 2px;
}

.cursor-selected {
  fill: var(--color-menu-sel-bg);
  fill-opacity: 0.9;
  stroke: var(--color-menu-sel-bg);
}

.cursor-nearest {
  fill: #eee;
  fill-opacity: 0.75;
  stroke: #eee;
}

.cursor-panel text {
  fill-opacity: 1;
  font-family: sans;
  stroke-width: 0;
}
.cursor-selected text {
  fill: var(--color-item-unsel-fg);
}
.cursor-nearest text {
  fill: #000;
}

.cursor-nearest.cursor-panel :is(.reactive:hover, .reactive.is-selected) text {
  fill: var(--color-link-hover);
  font-weight: bold;
}

.cursor-panel .reactive {
  pointer-events: auto;
  cursor: pointer;
}
.cursor-selected.cursor-panel :is(.reactive:hover, .reactive.is-selected) text {
  fill: #fff;
  font-weight: bold;
}

.cursor-nearest text.is-clickable,
.cursor-nearest rect.is-clickable ~ text {
  fill: var(--color-link);
}
.cursor-nearest text.is-clickable:hover,
.cursor-nearest rect.is-clickable:hover ~ text {
  fill: var(--color-link-hover);
  text-shadow: 0 0 1px black;
}
.cursor-selected.cursor-panel text.is-clickable,
.cursor-selected.cursor-panel rect.is-clickable ~ text {
  fill: var(--color-link-on-dark);
}
.cursor-selected.cursor-panel text.is-clickable:hover,
.cursor-selected.cursor-panel rect.is-clickable:hover ~ text {
  fill: var(--color-link-on-dark-hover);
}

.no-cursor-circle {
  fill: none;  /* Since it's drawn as extra-svg above the target */
  stroke: none;
}

.cursor-stem {
  stroke: var(--color-menu-sel-bg);
  stroke-opacity: 1;
  stroke-width: 3px;
}

.cursor-selected rect.img-bg {
  fill: var(--color-map-alt-bg);
}

/* similar to .info-modal .modal-card-head .delete */
.cursor-panel g.info-delete circle {
  fill: var(--color-danger-bg);
  stroke: black;
  stroke-width: 0.7px;
  /* Note: stroke-width in pixels are OK thanks to the global
   * `vector-effect: non-scaling-stroke` but drop-shadow pixel sizes are going
   * to be transformed. */
  filter: drop-shadow(0px 0px 0.004px rgba(0, 0, 0, 0.6));
  pointer-events: auto;  /* Let them through to reach the <g> */
}
.cursor-panel g.info-delete:hover,
.bui-calendar button.delete:hover,
.bui-calendar button.detail:hover,
.bui-traceroute button.delete:hover {
  transform: scale(1.2);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform var(--anim-speed);
}
.cursor-panel g.info-delete:hover circle {
  fill: var(--color-danger-sel-bg);
  filter: drop-shadow(0px 0px 0.01px rgba(0, 0, 0, 0.7));
  transition: fill var(--anim-speed), filter var(--anim-speed);
}

.cursor-panel g.info-delete line {
  stroke: var(--color-danger-fg);
  stroke-width: 3px;
  pointer-events: auto;  /* Let them through to reach the <g> */
}

/* Pulsing animation on temporarily selected things that can be clicked on: */

svg g.locked > circle:first-child {
  r: var(--radius-locked-node);
}

svg g.pulse > circle:first-child {
  animation: npulse 0.75s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  r: var(--radius-locked-node);
}

@keyframes npulse {
  0%, 100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
}

svg g.locked > path:first-child {
  stroke-width: var(--width-locked-path);
}

svg g.pulse > path:first-child {
  animation: ppulse 0.75s ease-in-out infinite;
}

@keyframes ppulse {
  0%, 100% {
    stroke-width: calc(0.8 * var(--width-locked-path));
  }
  50% {
    stroke-width: calc(1.2 * var(--width-locked-path));
  }
}

svg :is(.locked.is-src, .locked.is-dst, .pulse.is-src, .pulse.is-dst) {
  stroke-width: var(--width-locked-path-large);
}

svg :is(.pulse.is-src, .pulse.is-dst) {
  animation: ppulse-large 0.75s ease-in-out infinite;
}

@keyframes ppulse-large {
  0%, 100% {
    stroke-width: calc(0.8 * var(--width-locked-path-large));
  }
  50% {
    stroke-width: calc(1.2 * var(--width-locked-path-large));
  }
}

/* Tweak the layout of bulma's modal-card: */

.info-modal .modal-card {
  /* Avoid resizing when changing tab: */
  height: 80%;
  overflow: visible;
}

.info-modal .modal-card-head {
  padding-bottom: 0;
  justify-content: center;
  background-color: var(--color-item-sel-bg);
}

.info-modal .modal-card-head .tabs {
  font-size: 1.3em;
}

.info-model .modal-card-head .tabs li.is-active {
  color: var(--color-info-bg);
  border-bottom-color: var(--color-info-bg);
}

.info-modal .modal-card-head .delete {
  font-size: 1.7em;
}

.bui-calendar button.delete,
.bui-calendar button.detail {
  font-size: 1.2em;
  z-index: 10;  /* get the mouse attention before the following elements */
}

.bui-traceroute button.delete {
  font-size: 1.2em;
}

.info-modal .modal-card-head .delete,
.bui-calendar button.delete,
.bui-traceroute button.delete {
  position: absolute;
  right: -1rem;
  top: -1rem;
  background-color: var(--color-danger-bg);
  color: var(--color-danger-fg);
  width: 1.5em;
  height: 1.5em;
  max-width: unset;
  max-height: unset;
  border: 1px solid black;
  box-shadow: -1px 1px 3px #0008;
}

.bui-calendar button.detail {
  position: absolute;
  top: -1rem;
  background-color: var(--color-special-play-bg);
  color: var(--color-menu-sel-bg);
  width: 1.5em;
  height: 1.5em;
  max-width: unset;
  max-height: unset;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: -1px 1px 3px #0008;
  padding: 0;
}
/* Fix and improve icon default style */
.bui-calendar button.detail .icon {
  margin: auto !important;
}
.bui-calendar button.detail {
  right: 1.5rem;
}
.bui-calendar button.detail.second {
  right: 4rem;
}

/* Icons can pulse to signal issues: */
.blinking {
  background-color: var(--blink-danger);
  animation: heartbeat 2.5s infinite;
}

.info-modal .modal-card-head .delete:hover,
.bui-calendar button.delete:hover,
.bui-calendar button.detail:hover,
.bui-traceroute button.delete:hover {
  box-shadow: -1px 1px 5px 4px #0008;
  transition: background-color var(--anim-speed), box-shadow var(--anim-speed);
}

.info-modal .modal-card-body {
  box-shadow: inset 0 5px 5px 0 #0004, inset 0 -5px 5px 0 #0004;
}

.info-modal .modal-card-foot {
  display: block;
  background-color: var(--color-item-sel-bg);
}

.info-modal .modal-card-foot p {
  font-style: italic;
  text-align: center;
}

/* trying to vertically align the long label with the combined input: */
.info-modal .modal-card-foot > .is-horizontal {
  padding-top: 0.3rem;
  align-items: center;
}
.info-modal .modal-card-foot .field-label {
  /*padding-top: 0;*/
  padding-bottom: 1rem; /* To match the p.help below the input */
}
.info-modal .modal-card-foot .field-body {
  padding-top: 6px;
}
.info-modal .modal-card-foot p.help {
  text-align: left;
  height: 1rem;
}
/* Fix button disapearing when the input is in focus or active, for some reason */
.info-modal .modal-card-foot .control {
  z-index: 4;
}
/* Fix that same button bad sizing */
.info-modal .modal-card-foot .control .button {
  height: 100%;
}
/* And also the icon within the input not centered: */
.info-modal .modal-card-foot .control.has-icons-right span.icon {
  bottom: 0;
  margin: auto 0;
}

.info-modal :is(h2, h3) {
  margin-top: 0.8em;
  font-family: ui-serif;
  font-variant: titling-caps;
  font-style: italic;
  text-align: center;
}

.info-modal h3 {
  font-size: 1.5rem;
}

.info-modal .content p {
  margin-left: 0.8em;
  margin-right: 0.8em;
  font-family: ui-serif;
}

/* And animate it */

.modal {
  display: flex;
  pointer-events: none;
}
.modal.is-active {
  pointer-events: auto;
}

.modal .modal-card {
  transform: translateY(100vh);
  opacity: 0;
  transition: transform 1s, opacity 1s;
}
.modal.is-active .modal-card {
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--anim-speed), opacity var(--anim-speed);
}

.modal .modal-background {
  background-color: #0A0A0A00;
  transition: background-color var(--anim-speed-slow);
}
.modal.is-active .modal-background {
  background-color: #0A0A0AD0;
  transition: background-color var(--anim-speed);
}