cluster-helper {
    outline: none;
    display: block;
    border: 1px solid #222222cf;
    background-color: #333;
    position: absolute;
    padding: 5px;
    color: #eee;
    user-select: none;
    font-family: "Segoe UI", sans-serif;
    font-size:12px;
    box-shadow: 0px 0px 6px black;
    padding-top:2px;
    text-shadow: 0px 0px 2px #000000b0;
    z-index:21;
    min-width: 40px;
    min-height: 12px;
    max-width: 200px;
    max-height: 400px;
}

cluster-helper{
    
}

cluster-helper .title{
    font-size: 14px;
    padding-bottom: 4px;
    margin-bottom: 6px;
    height: 19px;
    display: block;
    border-bottom: 1px solid #0000004f;
}

cluster-helper .definition{
    width: calc(100% - 10px);
    height: 90px;
    overflow-y: auto;
    background-color: #ffffff0d;
    padding: 5;
}


cluster-helper[arrow-position|=top]:before,
cluster-helper[arrow-position|=left]:before,
cluster-helper[arrow-position|=bottom]:after,
cluster-helper[arrow-position|=right]:after
{
    --size: 12px;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
}
cluster-helper[arrow-position|=top]:before {
    top: calc(0px - var(--size));
    left: calc(var(--size) / 2);
    border-bottom: var(--size) solid #272727;
}

cluster-helper[arrow-position|=bottom]:after {
    bottom: -12px;
    left: 6px;
    border-top: var(--size) solid #272727;
}
cluster-helper[arrow-position|=left]:before{
  transform: rotate(90deg);
  left: calc(0px - var(--size) * 1.5);
  border-top: var(--size) solid #272727;
}
cluster-helper[arrow-position|=right]:after{
  transform: rotate(270deg);
  right: calc(0px - var(--size) * 1.5);
  border-top: var(--size) solid #272727;
}

cluster-helper[arrow-size=small]{
    --size: 6px;
}
cluster-helper[arrow-size=medium]{
    --size: 9px;
}
cluster-helper[arrow-size=big]{
    --size: 12px;
}

cluster-helper[arrow-position=top-center]:before{ left:calc(50% - var(--size) / 2); }
cluster-helper[arrow-position=top-left]:before{ left:calc(var(--size) / 2); }
cluster-helper[arrow-position=top-right]:before{ right: calc(var(--size) / 2); }
cluster-helper[arrow-position=bottom-center]:after{ left:calc(50% - var(--size)); }
cluster-helper[arrow-position=bottom-left]:after{ left:calc(var(--size) / 2); }

cluster-helper[arrow-position=left-top]:before{ top: var(--size); }
cluster-helper[arrow-position=left-center]:before{ top: calc(50% - var(--size) / 2); }
cluster-helper[arrow-position=left-bottom]:before{ bottom: var(--size); }
cluster-helper[arrow-position=right-top]:after{ top: var(--size); }
cluster-helper[arrow-position=right-center]:after{ top: calc(50% - var(--size) / 2); }
cluster-helper[arrow-position=right-bottom]:after{ bottom: var(--size); }

cluster-helper .definition::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
cluster-helper .definition::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
cluster-helper .definition::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}
cluster-helper .definition::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
cluster-helper .definition::-webkit-scrollbar-thumb:active {
  background: #666;
}
cluster-helper .definition::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
cluster-helper .definition::-webkit-scrollbar-track:hover {
  background: #666666;
}
cluster-helper .definition::-webkit-scrollbar-track:active {
  background: #fff;
}
cluster-helper .definition::-webkit-scrollbar-corner {
  background: transparent;
}