:root {
  --color-green: #67C23A;
  --color-blue: #409EFF;
  --color-cyan: #5CB3FF;
  --color-purple: #B37FEB;
  --color-pink: #F78FB3;
  --color-red: #F56C6C;
  --color-orange: #E6A23C;
  --color-light-grey: #EEEEEE;
  --color-grey: #AAAAAA;
}

.webspot-highlight-container {
  position: relative;
}

.webspot-highlight-container::before {
  background: transparent;
  /*cursor: pointer;*/
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.webspot-highlight-container:hover::before {
  opacity: 0.15;
}

.webspot-highlight-node {
  position: relative;
  display: block;
}

.webspot-highlight-node-color__blue::before {
  border: 1px solid var(--color-blue);
}

.webspot-highlight-node-color__blue:hover::before {
  background: var(--color-blue);
}

.webspot-highlight-node-color__orange::before {
  border: 1px solid var(--color-orange);
}

.webspot-highlight-node-color__orange:hover::before {
  background: var(--color-orange);
}

.webspot-highlight-node-color__green::before {
  border: 1px solid var(--color-green);
}

.webspot-highlight-node-color__green:hover::before {
  background: var(--color-green);
}

.webspot-highlight-node-color__cyan::before {
  border: 1px solid var(--color-cyan);
}

.webspot-highlight-node-color__cyan:hover::before {
  background: var(--color-cyan);
}

.webspot-highlight-node-color__purple::before {
  border: 1px solid var(--color-purple);
}

.webspot-highlight-node-color__purple:hover::before {
  background: var(--color-purple);
}

.webspot-highlight-node-color__pink::before {
  border: 1px solid var(--color-pink);
}

.webspot-highlight-node-color__pink:hover::before {
  background: var(--color-pink);
}

.webspot-highlight-node-color__red::before {
  border: 1px solid var(--color-red);
}

.webspot-highlight-node-color__red:hover::before {
  background: var(--color-red);
}

.webspot-highlight-node-color__grey::before {
  border: 1px solid var(--color-grey);
}

.webspot-highlight-node-color__grey:hover::before {
  background: var(--color-grey);
}

.webspot-highlight-node-level__1::before {
  z-index: 100;
}

.webspot-highlight-node-level__2::before {
  z-index: 200;
}

.webspot-highlight-node-level__3::before {
  z-index: 300;
}

.webspot-highlight-node-level__4::before {
  z-index: 400;
}

.webspot-highlight-node-level__5::before {
  z-index: 500;
}

.webspot-highlight-node-level__6::before {
  z-index: 600;
}

.webspot-highlight-node-level__7::before {
  z-index: 700;
}

.webspot-highlight-node-level__8::before {
  z-index: 800;
}

.webspot-highlight-node-level__9::before {
  z-index: 900;
}

.webspot-highlight-node-level__10::before {
  z-index: 1000;
}

.webspot-highlight-label {
  position: absolute;
  overflow: visible;
  top: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-light-grey);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
}

.webspot-highlight-label-primary {
  color: var(--color-blue);
}

.webspot-highlight-label-warning {
  color: var(--color-orange);
}

.webspot-highlight-label-success {
  color: var(--color-green);
}

.webspot-highlight-label-danger {
  color: var(--color-red);
}
