@clinic/clinic-common/base/element-highlighter.css

Shared parts between the Clinic.js suite

.nc-element-highlighter {
  display   : none;
  position  : relative;
  z-index   : 5;
}

.nc-element-highlighter.show {
  display   : block;
  transition: opacity 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.nc-element-highlighter-container{
  opacity: 0;
}

.nc-element-highlighter .nc-element-highlighter-panel {
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100vw;
  height          : 100vh;
  transition      : transform 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  background-color: #000;
}
.nc-element-highlighter-border {
  display: none;
  position: fixed;
  transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.nc-element-highlighter.show-border .nc-element-highlighter-border{
  display: block;
}

.nc-element-highlighter-border::before,
.nc-element-highlighter-border::after {
  content   : "";
  position  : absolute;
  width     : 10px;
  height    : 10px;
  color     : var(--nc-element-highlighter-theme, rgb(255, 170, 43));
}

.nc-element-highlighter-border::before {
  border-top : 3px solid;
  border-left: 3px solid;
  top        : -2px;
  left       : -2px;
}

.nc-element-highlighter-border::after {
  border-bottom: 3px solid;
  border-right : 3px solid;
  right        : -2px;
  bottom       : -2px;
}