STY - Flickr Photo Page Comments Reverse Order + Counter v.2

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("flickr.com") {

/* ===== FLICKR - PHOTO PAGE COMMENTS - REVERSE ORDER + COUNTER  V2(new2) -
(flex-direction: row-reverse;)
INFOS : http://css-tricks.com/snippets/css/a-guide-to-flexbox/
DEMO : http://codepen.io/HugoGiraudel/pen/LklCv
=========
#invites-and-comments
#photo-activity
#comments
=== */
/* (new2) COMMENTS CONTAINER - === */
#photo-activity  {
/* position: relative !important; */
/* width: 100% ! important; */
/* left: 50px ! important; */
/* flex-direction: column-reverse ! important; */
/* justify-content: flex-start; */
/* align-items: flex-start ; */

    display: flex ! important;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
}

/*(new2) COMMENTS ITEMS - === */
#comments .comment-block {
    height: 58px ! important;
    margin-right: 15px ! important;
    margin-left: 15px ! important;
    margin-bottom: 3px ! important;
    flex-basis: 250px; /* default auto */
    flex-grow: 2 ! important;
    overflow: hidden ! important;
    overflow-y: auto ! important;
    border: 1px solid gray ! important;
}

/* (new2) COUNTER COMMENTS ITEMS - ===  */
#photo-activity{
    counter-increment: myIndex ! important;
}
#comments #comments-list .comment-block:before {
    counter-increment: myIndex ! important;
    content: counter(myIndex, decimal-leading-zero);
    position: absolute ! important;
    width: 15px ! important;
    min-width: 17px !important;
    margin-left: 1px ! important;
    margin-top: -5px ! important;
    background: none repeat scroll 0 0 rgba(62, 59, 59, 0.6) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
    font-size: 10px ! important;
    text-align: center ! important;
    color: white ! important;
    z-index: 10 !important;
}

/* ===== END ======  */

}