.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-timing-function:ease-in-out;
    transition-duration: var(--w3AnimationDuration);
}

.egoAnimated_fadingHourglassOverlay.fadeout::after,
.egoAnimated_fadingHourglassOverlay.fadeout::before {
    animation-name: opacityFadeout;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-duration: var(--transitionDurationLong);
    transition-duration: var(--transitionDurationLong);
    opacity: 0;
    pointer-events: none;
}

.egoAnimated_fadingHourglassOverlay::after {
    position: absolute;
    display:flex;
    z-index: 2;
    inset: 0;
    text-align: center;
    /*pointer-events: none;*/
    user-select: none;
    cursor: progress;
    font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
    font-weight: bold;
    content: '\f252' !important; /* 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;
    transition-property: opacity;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.egoAnimated_fadingHourglassOverlay::before {
    position: absolute;
    z-index:1;
    /*pointer-events: none;*/
    user-select: none;
    inset:0;
    content: ''; /* Hourglass half*/
    background-color: var(--mediumTransparent)!important;
    border-radius: inherit;
    backdrop-filter: blur(2px);
    transition-property: opacity;
}
 /* mds-Buttons bringen eigene befores und afters, das führt manchmal zu Konflikten*/
button.mds-button-base.egoAnimated_fadingHourglassOverlay::before{
    z-index:111;
    box-shadow: none;
    opacity: 1;
    backdrop-filter:none;
}
button.mds-button-base.egoAnimated_fadingHourglassOverlay:after {
    z-index: 112;
    box-shadow: none;
    background-color: var(--mediumTransparent) !important;
}
    .egoAnimated_OpacityBounce,
    .egoAnimated_OpacityBounde {
    animation-name: opacityBounce;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    transition-property: opacity;
}

@keyframes opacityBounce {
    from {
        opacity: 0.5
    }

    to {
        opacity: 1
    }
}
@keyframes opacityFadeout {
    from {
       opacity: 1;
    }

    to {
        opacity: 0
    }
}

.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-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;
    }
}
@keyframes progressBarEx {
    0% {
        opacity: 0;
        right: 100%;
        left:0;
        /*width:unset;*/ /* brauchts nicht - in Chrome führts sogar zu Anzeigefehlern!*/
    }

    30% {
        left: 0;   
        opacity:1;
    }

    50% {
        opacity: 1;
    }

    60% {
        right: 0;
        
    }

   

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

.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;
}

.animatedGrow {
    --sizeFactor: 0;
    transform: scale(var(--sizeFactor), var(--sizeFactor));
    transition-duration: max(var(--transitionDurationLong), 0.2s);
    transition-property: transform, filter;
    filter: blur(4px);
    transition-timing-function:ease-out;
}
    .animatedGrow.half {
        --sizeFactor: 0.5;
        opacity:0;
        transition-property: transform, filter, opacity;
    }
.animatedGrow.full {
    --sizeFactor: 1;
    filter: blur(0px);
    opacity:1;
}