:root {
    --popper-font-size: 0.8em;
    --popper-border-color: #212121fa;
    --popper-border-width: 1px;
    --popper-arrow-width: 0.7em;
    --popper-color: #1a1a1a;
    --popper-content-color: #fff;
    --popper-header-color: #1a1a1a;
    --popper-header-content-color: #fff;
    --popper-body-color: #1a1a1a;
    --popper-body-content-color: #fff;
    --popper-footer-color: #1a1a1a;
    --popper-footer-content-color: #fff;
    --math-sqrt-2: 1.414213562373095;
}


[data-popper-arrow] {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
    overflow: hidden;
}

[data-popper-arrow]::before {
    border-width: var(--popper-border-width) var(--popper-border-width) 0px 0px;
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
    width: calc(var(--popper-arrow-width) + var(--popper-border-width));
    height: calc(var(--popper-arrow-width) + var(--popper-border-width));
    background-color: var(--popper-content-color);
    box-shadow: 0px 0px 4px -2px var(--popper-content-color);
}
/*top*/
[data-popper-placement^="top"] {
    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}

[data-popper-placement^="top"] [data-popper-arrow] {
    bottom: 0;
    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    /* left: 50% !important; */
    /* transform: translate(-50%, 0); */
}

[data-popper-placement^="top"] [data-popper-arrow]::before {
    bottom: 0;
    left: 50%;
    transform: rotate(
            225deg
    ) translate(0, 100%);
    transform-origin: 0 100%;
    border-left-color: var(
            --popper-border-color);
    border-top-color: var(
            --popper-border-color);
    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}
/*right*/
[data-popper-placement^="right"] {
    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}

[data-popper-placement^="right"] [data-popper-arrow] {
    left: 0;
    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    top: 50% !important;
    transform: translate(0px, -50%) !important;
}

[data-popper-placement^="right"] [data-popper-arrow]::before {
    left: 0px;
    top: 50%;
    transform: rotate(
            225deg
    ) translate(25%, -50%);
    transform-origin: 75% 0;
    border-right-color: var(
            --popper-border-color);
    border-top-color: var(
            --popper-border-color);
}
/*bottom*/
[data-popper-placement^="bottom"] {
    padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}

[data-popper-placement^="bottom"] [data-popper-arrow] {
    top: 0;
    width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    /*left: 50% !important;*/
    /*transform: translate(-50%, 0);*/
}

[data-popper-placement^="bottom"] [data-popper-arrow]::before {
    top: 0;
    left: 50%;
    transform: rotate(
            45deg
    ) translate(0, 0);
    transform-origin: 0 0;
    border-left-color: var(
            --popper-border-color);
    border-top-color: var(
            --popper-border-color);
    border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}

/*left*/
[data-popper-placement^="left"] {
    padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}

[data-popper-placement^="left"] [data-popper-arrow] {
    right: 0;
    width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
    top: 50% !important;
    transform: translate(0px, -50%) !important;
}

[data-popper-placement^="left"] [data-popper-arrow]::before {
    right: 0;
    top: 50%;
    transform: rotate(
            45deg
    ) translate(-25%, -50%);
    transform-origin: 25% 0;
    border-right-color: var(
            --popper-border-color);
    border-top-color: var(
            --popper-border-color);
}