/* Animations */

@keyframes modal-top-income {
    0% {
        transform: translateY(-120%);
    }
    25% {
        transform: translateY(8%);
    }
    50% {
        transform: translateY(22%);
    }
    75% {
        transform: translateY(8%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes modal-top-outcome {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(8%);
    }
    50% {
        transform: translateY(32%);
    }
    100% {
        transform: translateY(-120%);
    }
}

@keyframes btn-loader-rotation {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    25% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    75% {
        transform: translate(-50%, -50%) rotate(270deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulceBounce {
    0% {
        transform: scale(1);
    }
    65% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes zoomFadeIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomFadeOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes slideDownFadeIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownFadeOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* /Animations */

.zoomFadeIn {
    animation: zoomFadeIn 0.3s ease-in;
}

.zoomFadeOut {
    animation: zoomFadeOut 0.3s ease-in;
}

.slideDownFadeIn {
    animation: slideDownFadeIn 0.3s ease-in;
}

.slideDownFadeOut {
    animation: slideDownFadeOut 0.3s ease-in;
}


/*svg animation icons*/

svg.animated-success-svg {
    width: 100px;
    height: 100px;
    animation: animated-svg-zoom 0.5s 2s ease;
}

svg.animated-success-svg path {
    fill: var(--bs-success);
    stroke: var(--bs-success);
    stroke-width: 200;
    stroke-dasharray: 20000;
    stroke-dashoffset: 5000;
    animation: animated-svg-stroke 1.6s ease, animated-svg-fill 1s 1s ease;
}

svg.animated-success-svg polyline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 200;
    stroke-dasharray: 3000;
    stroke-dashoffset: 6000;
    animation: animated-svg-draw 1s 1s ease;
}

svg.animated-warning-svg {
    width: 100px;
    height: 100px;
    animation: animated-svg-zoom 0.5s 1.5s ease;
}

svg.animated-warning-svg path.svg-warning-triangle {
    fill: transparent;
    stroke: var(--bs-danger);
    stroke-width: 200;
    animation: animated-svg-stroke 3s ease;
}

svg.animated-warning-svg path.svg-warning-line {
    opacity: 1;
    fill: var(--bs-danger);
    animation: animated-svg-fade 2s ease;
}

svg.animated-warning-svg path.svg-warning-round {
    opacity: 1;
    fill: var(--bs-danger);
    animation: animated-svg-fade 2s ease;
}


svg.animated-warning-svg.yell path.svg-warning-triangle {
    stroke: var(--bs-orange);
}

svg.animated-warning-svg.yell path.svg-warning-line {
    fill: var(--bs-orange);
}

svg.animated-warning-svg.yell path.svg-warning-round {
    fill: var(--bs-orange);
}

@keyframes animated-svg-stroke {
    from {
        stroke-dasharray: 5000;
        fill: transparent;
    }
    to {
        stroke-dasharray: 20000;
        fill: transparent;
    }
}

@keyframes animated-svg-fill {
    from {
        fill: transparent;
    }
    to {
        fill: var(--bs-success);
    }
}

@keyframes animated-svg-draw {
    from {
        stroke-dashoffset: 3000;
    }
    to {
        stroke-dashoffset: 6000;
    }
}

@keyframes animated-svg-zoom {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes animated-svg-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*/svg animation icons*/