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

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

@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*/