.ocl-popper {
  position: relative;
  background-color: #fff;
  padding: 12px;
  border-radius: 5px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
.ocl-popper[x-placement^=left] {
  margin-right: 13px;
}
.ocl-popper[x-placement^=right] {
  margin-left: 13px;
}
.ocl-popper[x-placement^=top] {
  margin-bottom: 13px;
}
.ocl-popper[x-placement^=bottom] {
  margin-top: 13px;
}
.ocl-popper.visible {
  opacity: 1;
  pointer-events: initial;
}
.ocl-popper[data-hatched] {
  padding-left: 24px;
}
.ocl-popper[data-hatched]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: repeating-linear-gradient(135deg, #78267b, #78267b 5px, rgba(120, 38, 123, 0.5) 5px, rgba(120, 38, 123, 0.5) 10px);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.ocl-popper .ocl-popper__dismiss {
  display: inline-block;
  position: absolute;
  padding: 3px;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 19px;
  cursor: pointer;
  color: #666666;
  transition: color 300ms;
}
.ocl-popper .ocl-popper__dismiss:hover {
  color: #000;
}
.ocl-popper .ocl-popper__dismiss svg {
  position: relative;
  top: -5px;
  width: 12px;
}
.ocl-popper .ocl-popper__arrow {
  position: absolute;
  height: 0;
  width: 0;
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  pointer-events: none;
}
.ocl-popper[x-placement^=left] .ocl-popper__arrow {
  left: 100%;
  border-left-color: #ffffff;
  border-width: 8px;
}
.ocl-popper[x-placement^=right] .ocl-popper__arrow {
  right: 100%;
  border-right-color: #ffffff;
  border-width: 8px;
}
.ocl-popper[x-placement^=bottom] .ocl-popper__arrow {
  bottom: 100%;
  border-bottom-color: #ffffff;
  border-width: 8px;
}
.ocl-popper[x-placement^=top] .ocl-popper__arrow {
  top: 100%;
  border-top-color: #ffffff;
  border-width: 8px;
}

/*# sourceMappingURL=ocl-popper.css.map */