th {
    cursor: pointer;
}

:root {
    --status-indicator-size: 10px;
    --status-indicator-animation-duration: 2s;
  
    --status-indicator-color: rgb(216, 226, 233);
    --status-indicator-color-semi: rgba(216, 226, 233, .5);
    --status-indicator-color-transparent: rgba(216, 226, 233, 0);
  
    --status-indicator-color-active: rgb(0, 149, 255);
    --status-indicator-color-active-semi: rgba(0, 149, 255, .5);
    --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
  
    --status-indicator-color-positive: rgb(75, 210, 143);
    --status-indicator-color-positive-semi: rgba(75, 210, 143, .5);
    --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
  
    --status-indicator-color-intermediary: rgb(255, 170, 0);
    --status-indicator-color-intermediary-semi: rgba(255, 170, 0, .5);
    --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
  
    --status-indicator-color-negative: rgb(255, 77, 77);
    --status-indicator-color-negative-semi: rgba(255, 77, 77, .5);
    --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
  }
 
  status-indicator {
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    width: var(--status-indicator-size);
    height: var(--status-indicator-size);
    background-color: var(--status-indicator-color);
  }

  status-indicator[active] {
    background-color: var(--status-indicator-color-active);
  }
  
  status-indicator[positive] {
    background-color: var(--status-indicator-color-positive);
    animation-name: status-indicator-pulse-positive;
  }
  
  status-indicator[intermediary] {
    background-color: var(--status-indicator-color-intermediary);
  }
  
  status-indicator[negative] {
    background-color: var(--status-indicator-color-negative);
    animation-name: status-indicator-pulse-negative;
  }

  .metadata {
    color: #51cbce;
    font-weight: bold;
    margin-bottom: 10px;
  }