.egoAnimated_fadingHourglassOverlay {
    position:relative;
}
/* in Tabellenspalten deaktivieren*/
td.egoAnimated_fadingHourglassOverlay {
    position: unset;
    background-color: var(--mediumTransparent);
}
    td.egoAnimated_fadingHourglassOverlay::before {
        position: unset;
    }
td.egoAnimated_fadingHourglassOverlay::after{
    position:unset;
    background-color:unset;
}

.egoAnimatedPadding {
    transition-property: padding;
    transition-duration: var(--w3AnimationDuration);
}

.egoAnimated_fadingHourglassOverlay::after {
    position: absolute;
    transform: translateY(-50%);
    text-align: center;
    /*pointer-events: none;*/
    user-select: none;
    cursor: progress;
    font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
    font-weight: bold;
    top: 50%;
    left: 0;
    width: 100%;
    content: '\f252'; /* Hourglass half*/
    font-size: 1.75em;
    animation-name: opacityBounce;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}

.egoAnimated_fadingHourglassOverlay::before {
    position: absolute;
    /*pointer-events: none;*/
    user-select: none;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    content: ''; /* Hourglass half*/
    background-color: var(--mediumTransparent);
    border-radius: inherit;
    backdrop-filter:blur(2px);
}

@keyframes opacityBounce {
    from {
        opacity: 0.3
    }

    to {
        opacity: 1
    }
}

.ego_animated_progressBar {
    position: relative;
    --durationModifier: 0s;
}
.ego_animated_progressBar::after {
    content: '';
    position: absolute;
    border-radius:inherit;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 100%;
    background-color: var(--primary);
    animation-name: progressBar;
    animation-duration: calc(2s + var(--durationModifier));
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


@keyframes progressBar {
    0% {
        opacity: 1;
        width: 0;
    }

    60% {
        opacity: 1;
    }

    90% {
        opacity: 0;
        width: 100%;
    }
    100%{
        opacity:0;
    }
}

.fadeOpacity {
    transition-duration: calc(2 * var(--transitionDurationLong));
    transition-property: opacity;
    opacity: 1;
}

    .fadeOpacity.delay {
        transition-delay: calc(2 * var(--transitionDurationLong));
       
    }

    .fadeOpacity.slow.delay {
        transition-delay: calc(4 * var(--transitionDurationLong));
    }

    .fadeOpacity.slow {
        transition-duration: calc(3 * var(--transitionDurationLong));
    }

    .fadeOpacity.fast {
        transition-duration: var(--transitionDurationLong);
    }

    .fadeOpacity.transparent,
    .fadeOpacity.hide,
    .fadeOpacity.hidden {
        opacity: 0;
    }

    /* SHRINK */
    /* zum animieren einfach mittels element.style.setProperty() den --sizeFactor auf gewünschten Wert stellen*/
.animatedShrink {
    --sizeFactor: 1;
    transform: scale(var(--sizeFactor), var(--sizeFactor));
    transition-duration: var(--transitionDurationLong);
    transition-property: transform;
}