.text-line-separator {
    display: flex;
    align-items: center;
    text-align: center;
}

.text-line-separator::before,
.text-line-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}

.text-line-separator:not(:empty)::before {
    margin-right: .25em;
}

.text-line-separator:not(:empty)::after {
    margin-left: .25em;
}

.autogrow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}
.autogrow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}
.autogrow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}
.autogrow-wrap > textarea,
.autogrow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid black;
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}



.lds-grid {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
    top: 8px;
    left: 8px;
    animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
    top: 8px;
    left: 32px;
    animation-delay: -0.4s;
}
.grecaptcha-badge {
    visibility: hidden !important;
}

.lds-grid div:nth-child(3) {
    top: 8px;
    left: 56px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
    top: 32px;
    left: 8px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
    top: 32px;
    left: 32px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
    top: 32px;
    left: 56px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
    top: 56px;
    left: 8px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
    top: 56px;
    left: 32px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
    top: 56px;
    left: 56px;
    animation-delay: -1.6s;
}

@keyframes lds-grid {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.popper-tooltip {
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
}

.popper-tooltip {
    /* ... */
    /*display: none;*/
    visibility: hidden;
    z-index: 100;
}

    .popper-tooltip[data-show] {
        /*display: block;*/
        visibility: visible;
    }

    .popper-tooltip[data-popper-placement^='top'] > #popper-tooltip-arrow {
        bottom: -4px;
    }

    .popper-tooltip[data-popper-placement^='bottom'] > #popper-tooltip-arrow {
        top: -4px;
    }

    .popper-tooltip[data-popper-placement^='left'] > #popper-tooltip-arrow {
        right: -4px;
    }

    .popper-tooltip[data-popper-placement^='right'] > #popper-tooltip-arrow {
        left: -4px;
    }

#popper-tooltip-arrow,
#popper-tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#popper-tooltip-arrow {
    display: none;
}

    #popper-tooltip-arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
    }