/*SUCCESS START*/
svg.ok path:first-child, /* TODO: remove */
svg.success path:first-child {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ok-dash 5s linear forwards;
}

svg.ok path:last-child, /* TODO: remove */
svg.success path:last-child {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ok-dash 5s linear forwards;
    animation-delay: .5s;
}

@keyframes ok-dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
/*SUCCESS END*/

/*FAIL START*/
svg.failed path:first-child {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: failed-dash 5s linear forwards;
}

svg.failed path:nth-child(2) {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: failed-dash 5s linear forwards;
    animation-delay: .4s;
}

svg.failed path:last-child {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: failed-dash 5s linear forwards;
    animation-delay: .6s;
}

@keyframes failed-dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
/*FAIL END*/