/* -------------------------------------------------------------------------- */
/*                           Transition For All Layouts                       */
/* -------------------------------------------------------------------------- */
.layout-enter-active,
.layout-leave-active {
    transition: all 0.4s;
}

.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

/* -------------------------------------------------------------------------- */
/*                           Transition For All Pages                          */
/* -------------------------------------------------------------------------- */
/* Page Out */
.page-leave-active {
    transition: all 0.5s;
}

.page-leave-to {
    opacity: 0;
    filter: blur(.05rem);
    /* transform: translateY(5rem); */
}

/* Page IN */
.page-enter-active {
    transition: all 0.5s;
}

.page-enter-from {
    opacity: 0;
    /* filter: blur(.2rem); */
    /* transform: translateY(-5rem); */
}

/* -------------------------------------------------------------------------- */
/*                     <Transition>  v-if   </Transition>                     */
/* -------------------------------------------------------------------------- */
.hide-leave-active {
    transition: all 0.5s ease-out;
}

.hide-leave-to {
    opacity: 0;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }

    to {
        opacity: var(--opa, 0);
        transform: translateX(var(--x, 0px)) translateY(var(--y, 20px));
    }
}

.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* -------------------------------------------------------------------------- */
/*                                 For Globall                                */
/* -------------------------------------------------------------------------- */
@keyframes fadeUp {
    from {
        opacity: var(--opa, 0);
        transform: translateX(var(--x, 0px)) translateY(var(--y, 20px));
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Example usage on an element */
.fadeUp {
    animation: fadeUp var(--dur, 0.3s) ease-out;
}

.fadeUp-3ms {
    animation: fadeUp var(--dur, 0.3s) ease-out;
}

.fadeUp-4ms {
    animation: fadeUp var(--dur, 0.4s) ease-out;
}

.fadeUp-5ms {
    animation: fadeUp var(--dur, 0.5s) ease-out;
}

.fadeUp-6ms {
    animation: fadeUp var(--dur, 0.6s) ease-out;
}

.fadeUp-7ms {
    animation: fadeUp var(--dur, 0.7s) ease-out;
}

.fadeUp-8ms {
    animation: fadeUp var(--d, 0.8s) ease-out;
}

.fadeUp-9ms {
    animation: fadeUp var(--d, 0.9s) ease-out;
}


/* -------------------------------------------------------------------------- */
/*                                   bounce                                   */
/* -------------------------------------------------------------------------- */
.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

.blinking-border {
    border: 1px solid var(--bbColor, rgb(241, 206, 3));
    animation: blinkBorder 1s infinite;
}

@keyframes blinkBorder {
    0% {
        border-color: var(--bbColor, rgb(241, 206, 3));
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: var(--bbColor, rgb(241, 206, 3));
    }
}

/* -------------------------------------------------------------------------- */
/*                    Background Loading Animation Anywhere                   */
/* -------------------------------------------------------------------------- */

.bg_animation {
    --bcolor: #00fa602a;
    --bspeed: 3s;
}
.bg_animation {   
    background: linear-gradient(to right, var(--bgac, transparent) 0%, var(--bcolor) 25%, var(--bgac, transparent) 50%);
    background-size: 200% 300vh;    
    animation: shimmerEffect var(--bspeed, 3s) linear infinite;  
} 
@keyframes shimmerEffect {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@-webkit-keyframes shimmerEffect {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}





@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }
    
    20%{
        transform: translateY(var(--y, -5px));
    }
    
    
    80% {
        transform: translateY(5px);
    }
}
    
.shake {
    animation: shake 0.4s ease-in 1;
}   


.settinglist-enter-active,
.settinglist-leave-active {
  transition: all 0.5s ease;
}
.settinglist-enter-from,
.settinglist-leave-to {
  opacity: 0;
  transform: translateY(-40px);
}


.drop-here-text::after{
    animation: drop-shake 1s ease-in infinite;
}

@keyframes drop-shake {

    0%,
    100% {
        transform: translate(-50%, 0);
    } 
    
    50% {
        transform: translate(-50%, 5px);
    }
}