.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, .loadingBar {
    position: relative;
    
    --durationModifier: 0s;
}
    .ego_animated_progressBar::after,
    .loadingBar::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;
}

.quickHighlightBg {
    animation-name: quickHighlightPuls;
    animation-duration: 325ms;
    animation-iteration-count: 3;
}

.lessQuickHighlightBg {
    animation-name: quickHighlightPuls;
    animation-duration: 600ms;
    animation-iteration-count: 6;
}

@keyframes quickHighlightPuls {
    0% {
        background: radial-gradient(ellipse 35% 0%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 0px var(--accentThemeD1);
        transform: scale(0.99);
    }

    5% {
        background: radial-gradient(ellipse 40% 0%, transparent, var(--accentThemeD1));
    }

    10% {
        background: radial-gradient(ellipse 45% 5%, transparent, var(--accentThemeD1));
    }

    15% {
        background: radial-gradient(ellipse 50% 10%, transparent, var(--accentThemeD1));
    }

    20% {
        background: radial-gradient(ellipse 55% 15%, transparent, var(--accentThemeD1));
    }

    25% {
        background: radial-gradient(ellipse 60% 20%, transparent, var(--accentThemeD1));
    }

    30% {
        background: radial-gradient(ellipse 65% 25%, transparent, var(--accentThemeD1));
    }

    35% {
        background: radial-gradient(ellipse 70% 30%, transparent, var(--accentThemeD1));
    }

    40% {
        background: radial-gradient(ellipse 75% 35%, transparent, var(--accentThemeD1));
    }

    45% {
        background: radial-gradient(ellipse 80% 40%, transparent, var(--accentThemeD1));
    }

    50% {
        background: radial-gradient(ellipse 85% 45%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 1px var(--accentThemeD1);
    }

    55% {
        background: radial-gradient(ellipse 90% 50%, transparent, var(--accentThemeD1));
    }

    60% {
        background: radial-gradient(ellipse 95% 55%, transparent, var(--accentThemeD1));
    }

    65% {
        background: radial-gradient(ellipse 100% 60%, transparent, var(--accentThemeD1));
    }

    70% {
        background: radial-gradient(ellipse 100% 65%, transparent, var(--accentThemeD1));
    }

    75% {
        background: radial-gradient(ellipse 100% 70%, transparent, var(--accentThemeD1));
    }

    80% {
        background: radial-gradient(ellipse 100% 75%, transparent, var(--accentThemeD1));
    }

    85% {
        background: radial-gradient(ellipse 100% 80%, transparent, var(--accentThemeD1));
    }

    90% {
        background: radial-gradient(ellipse 100% 85%, transparent, var(--accentThemeD1));
    }

    95% {
        background: radial-gradient(ellipse 100% 90%, transparent, var(--accentThemeD1));
    }

    100% {
        background: radial-gradient(ellipse 100% 95%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 2px var(--accentThemeD1);
        transform: scale(1);
    }
}
   

.shrinkingBar {
    --startProgress: 100%;
    --animationDuration: 4s;
    --progressBarColor: var(--primary);
    position: relative;
    width: 100%;
    min-height: 0px;
    height:100%;
}
    .shrinkingBar::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        animation: shrinkingLR var(--animationDuration) ease-out;
        animation-iteration-count:1;
        animation-play-state: running;
        height: 100%;
        min-height:1px;
        background-color:var(--progressBarColor, var(--primary))
    }


@keyframes shrinkingLR {
    from {
        left:calc(100% - var(--startProgress, 100%));
    }

    to {
        left: 100%;
    }
}