st-arrow-box .st-arrow-box {
  display: var(--st-arrow-box-display, block);
  position: relative;
  background: var(--st-arrow-box-background, #fff);
  border: var(--st-arrow-box-border, 2px solid #dcdcdc);
  border-color: var(--st-arrow-box-border-color, #dcdcdc);
  padding: var(--st-arrow-box-padding, 10px);
  margin: var(--st-arrow-box-margin, 0 0 10px 0);
  border-radius: var(--st-arrow-box-border-radius, 4px);
  text-align: var(--st-arrow-box-text-align, left); }

st-arrow-box .st-arrow-box:after, st-arrow-box .st-arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

st-arrow-box .st-arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: var(--st-arrow-box-background, #fff);
  border-width: 5px;
  margin-top: -5px; }

st-arrow-box .st-arrow-box:before {
  border-color: rgba(220, 220, 220, 0);
  border-right-color: var(--st-arrow-box-border-color, #dcdcdc);
  border-width: 8px;
  margin-top: -8px; }

st-arrow-box .st-arrow-box-right:after {
  left: 100%;
  border-right-color: rgba(255, 255, 255, 0);
  border-left-color: var(--st-arrow-box-background, #fff);
  width: 1px; }

st-arrow-box .st-arrow-box-right:before {
  left: 100%;
  border-right-color: rgba(255, 255, 255, 0);
  border-left-color: var(--st-arrow-box-border-color, #dcdcdc);
  width: 1px; }