@animTime: 0.6s;
@w01: 100%;
@w02: 95%;
@w03: 90%;


.cardOrders {
    width: @w01;
    border-radius: 18px;
    padding: 1rem 4rem 0.5rem 4rem;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.cardOrders01 {
    .cardOrders;
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, rgba(145,215,55,1), rgba(145,215,55,50%));
    z-index: 10;
}

.cardOrders02 {
    .cardOrders;
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, rgba(245,115,15,1), rgba(245,115,15,50%));
    z-index: 20;
}

.cardOrders03 {
    .cardOrders;
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, rgba(35,245,135,1), rgba(35,245,135,50%));
    z-index: 30;
}


.wRed01 {
    width: @w02;
    margin-bottom: -1.5rem;
    animation-name: shrink01;
    animation-duration: @animTime;
    background-color: #696969;
    background-image: none;
}

.wRed02 {
    width: @w03;
    margin-bottom: -1.5rem;
    animation-name: shrink02;
    animation-duration: @animTime;
    background-color: #333333;
    background-image: none;
    color: white;
}

@keyframes shrink01 {
    0% {
        width: @w01;
        background-image: linear-gradient(to bottom, rgba(145,215,55,1), rgba(145,215,55,50%));
    }

    99% {
        width: @w02;
        background-color: #696969;
        background-image: linear-gradient(to bottom, rgba(145,215,55,100%), rgba(145,215,55,50%));
    }

    100% {
        width: @w02;
        background-color: #696969;
    }
}
@keyframes shrink02 {
    from {
        width: @w02;
        background-color: #696969;
    }

    to {
        width: @w03;
        color: white;
        background-color: #333333;
    }
}