/* Keep the SVG network for unavailable WebGL, context loss and print. */
.point-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.point-cloud-ready .point-network-canvas {
  visibility: visible;
}

.point-cloud-ready .network-art::before,
.point-cloud-ready .network-plane,
.point-cloud-ready .network-wires,
.point-cloud-ready .network-file,
.point-cloud-ready .network-satellite,
.point-cloud-ready .network-person {
  visibility: hidden;
}

.point-cloud-ready .network-front {
  transform: none!important;
  transition: none;
}

.point-cloud-ready .network-recipient {
  left: var(--point-label-x);
  top: var(--point-label-y);
  display: block;
  max-width: none;
  transform: translate(-50%,0);
  transition: none;
}

.point-cloud-ready .network-recipient .network-person {
  display: none;
}

.point-cloud-ready .network-label {
  display: block;
  padding: 0 4px;
  background: transparent;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-shadow: 0 1px 9px #0c1c32,0 0 18px #0c1c32;
  line-height: 1.5;
}

@media (max-width:480px) {
  .point-cloud-ready .network-label {
    font-size: .875rem;
  }
}

@media print {
  .point-network-canvas {
    display: none!important;
  }

  .point-cloud-ready .network-plane,
  .point-cloud-ready .network-wires,
  .point-cloud-ready .network-file,
  .point-cloud-ready .network-satellite,
  .point-cloud-ready .network-person {
    visibility: visible;
  }

  .point-cloud-ready .network-recipient {
    left: var(--node-x);
    top: var(--node-y);
    display: flex;
    transform: translate(-50%,calc(var(--person-size)/-2));
  }

  .point-cloud-ready .network-recipient .network-person {
    display: grid;
  }

  .point-cloud-ready .network-label {
    color: var(--color-text);
    text-shadow: none;
  }
}