/* Price transition */

.price-change{

    animation:
    priceFade .25s ease;

}



/* Price increase */

.card-up{

    animation:
    greenPulse 1s ease;

}


.card-down{

    animation:
    redPulse 1s ease;

}




@keyframes priceFade{

    from{

        opacity:.3;

    }

    to{

        opacity:1;

    }

}




@keyframes greenPulse{

    0%{

        border-color:#16a34a;
        box-shadow:0 0 12px rgba(22,163,74,.35);

    }


    100%{

        border-color:#e6e6ed;
        box-shadow:none;

    }

}





@keyframes redPulse{

    0%{

        border-color:#dc3545;
        box-shadow:0 0 12px rgba(220,53,69,.35);

    }


    100%{

        border-color:#e6e6ed;
        box-shadow:none;

    }

}

.card-up,
.card-down {
    border-radius: 16px !important;
    overflow: hidden;
}