div.playoff-tree {
    display: flex;
    flex-direction: row;
}

div.playoff-tree > div {
    flex: 1;
    display: flex;
    flex-flow: column;
    width: 0px;
}

/* SECOND, THIRD, NTH ROUND PADDING */
div.playoff-tree > div + div {
    padding-left: 20px;
}

.right-menu-playoffs > div.playoff-tree.r4 > div + div {
    padding-left: 15px;
}

div.playoff-tree.upper-bracket {
    margin-bottom: 3%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket {
    margin-bottom: 7%;
}

div.playoff-tree > div > div {
    position: relative;
}

div.playoff-tree.lower-bracket > div:first-child > div {
    margin-top: 45px;
}

/* DOUBLE-ELIMINATION VERTICAL LINE */
div.playoff-tree.upper-bracket > div > div:after,
div.playoff-tree.lower-bracket > div > div:after {
    content: "";
    position: absolute;
    width: 1px;
    background-color: #333;
}

div.playoff-tree.r3 > div > div:after {
    right: -3.5%;
}

.right-menu-playoffs > div.playoff-tree.r3 > div > div:after {
    right: -15.5%;
}


div.playoff-tree.r4 > div > div:after {
    right: -5%;
}


/* HORIZONTAL LINE */
div.playoff-tree > div > div > ul:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background-color: #333;
    z-index: 1;
}

div.playoff-tree.r3 > div:not(:first-child) > div > ul:after {
    left: -4.5%;
}
div.playoff-tree.r3 > div:not(:last-child) > div > ul:after {
    left: -3.5%;
    right: -3.5%;
}
div.playoff-tree.r3 > div:first-child > div > ul:after {
    left: 0%;
    right: -3%;
}
div.playoff-tree.r3 > div:last-child > div > ul:after {
    left: -4%;
}
    

.right-menu-playoffs > div.playoff-tree.r3 > div:not(:first-child) > div > ul:after {
    left: -14%;
}  
.right-menu-playoffs > div.playoff-tree.r3 > div:not(:last-child) > div > ul:after {
    right: -17%;
}
.right-menu-playoffs > div.playoff-tree.r3 > div:first-child > div > ul:after {
    right: -14%;
} 


div.playoff-tree.r4 > div:not(:first-child) > div > ul:after {
    left: -5%;
}
div.playoff-tree.r4 > div:not(:last-child) > div > ul:after {
    right: -5%;
}
div.playoff-tree.r4 > div:first-child > div > ul:after {
    right: -4%;
}

.right-menu-playoffs > div.playoff-tree.r4 > div:not(:first-child) > div > ul:after {
    left: -16%;
}
.right-menu-playoffs > div.playoff-tree.r4 > div:not(:last-child) > div > ul:after {
    right: -18%;
}
.right-menu-playoffs > div.playoff-tree.r4 > div:first-child > div > ul:after {
    right: -14%;
}

div.playoff-tree.r3 > div > div > ul:after {
    left: -3.5%;
    right: -3.5%;
}
    
div.playoff-tree.upper-bracket > div:last-child > div > ul:after {
    top: 100%;
}

div.playoff-tree.lower-bracket > div:last-child > div > ul:after {
    height: 0px;
}


div.playoff-tree > div:first-child > div > ul:after {
    left: 0;
    right: -9px;
}

div.playoff-tree > div:last-child > div > ul:after {
    right: 0;
    height: 1px;
    z-index: 1;
}

div.playoff-tree.r4 > div:last-child > div > ul:after {
    left: -4.5%;
}

div.playoff-tree > div > div.bronze > ul:after {
    left: 0;
    width: 100%;
    
}

.right-menu-playoffs > div.playoff-tree.upper-bracket.r3 > div > div:after,
.right-menu-playoffs > div.playoff-tree.lower-bracket.r3 > div > div:after {
    right: -16%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket.r4 > div > div:after,
.right-menu-playoffs > div.playoff-tree.lower-bracket.r4 > div > div:after {
    right: -16%;
}

/* VERTICAL LINE */
div.playoff-tree > div:not(:last-child) > div:after {
    content: "";
    position: absolute;
    bottom: 49%;
    right: -10px;
    width: 1px;
    height: 101%;
    background-color: #333;
}

div.playoff-tree.lower-bracket > div:first-child > div:after {
    height: 52%;
}


/* TOTAL 4 ROUNDS */

/* SE R1 */

div.playoff-tree.single.r4 > div:first-child > div {
    padding-top: 12% !important;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:first-child > div {
    padding-top: 25% !important;
}

div.playoff-tree.single.r4 > div:first-child > div > ul:after {
    right: -4%;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:first-child > div > ul:after {
    right: -14%;
}   

div.playoff-tree.single > div.r1-4 > div:after {
    top: 50%;
    height: 18% !important;
}

.right-menu-playoffs > div.playoff-tree.single > div.r1-4 > div:after {
    height: 13.5% !important;
    right: -17%;
}

/* SE R2 */

div.playoff-tree.single.r4 > div:not(:first-child) > div > ul::after {
    left: -5%;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:not(:first-child) > div > ul::after {
    left: -13.5%;
}

div.playoff-tree.single.r4 > div:not(:last-child) > div > ul::after {
    right: -4.5%;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:nth-of-type(1) > div > ul::after {
    right: -14.5%;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:not(:nth-of-type(1)) > div > ul::after {
    right: -21.5%;
}

div.playoff-tree.single.r4 > div:first-child > div > ul::after {
    right: -4%;
}

div.playoff-tree.single.r4 > div:not(:last-child) > div:nth-of-type(1)::after,
div.playoff-tree.single.r4 > div:not(:last-child) > div:nth-of-type(3)::after {
    height: 50%;
    bottom: 0%;
}

div.playoff-tree.single.r4 > div:not(:last-child) > div:nth-of-type(2)::after,
div.playoff-tree.single.r4 > div:not(:last-child) > div:nth-of-type(4)::after {
    height: 51%;
    bottom: 49%;
}

/* DE R1 */
div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(1) {
    margin-top: 12%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(1) {
    margin-top: 35%;
    padding-top: 0%;
}

div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(1):after {
    bottom: 42%;
    height: 41%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(1):after {
    top: 25%;
    height: 27%;
}

div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(2):after {
    top: 58%;
    height: 41%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r1-4 > div:nth-of-type(2):after {
    top: 62%;
    height: 24%;
}

div.playoff-tree.lower-bracket > div.r1-4 > div {
    margin-top: 0px;
}

div.playoff-tree.lower-bracket > div.r1-4 > div:nth-of-type(1) {
    padding-top: 0%;
}

div.playoff-tree.lower-bracket > div.r1-4 > div:nth-of-type(1):after {
    top: 50%;
    height: 60%;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r1-4 > div:nth-of-type(1):after {
    height: 67%;
}

div.playoff-tree.lower-bracket > div.r1-4 > div:nth-of-type(2):after {
    bottom: 42%;
    height: 50%;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r1-4 > div:nth-of-type(2):after {
    bottom: 38%;
}


/* DE R2 */
div.playoff-tree.upper-bracket > div.r2-4 > div:nth-of-type(2) {
    top: 18%;
}

div.playoff-tree.upper-bracket > div.r2-4 > div:nth-of-type(1):after {
    top: 50%;
    height: 75%;
}

div.playoff-tree.upper-bracket > div.r2-4 > div:nth-of-type(2):after {
    bottom: 49%;
    height: 75%;
}

div.playoff-tree.lower-bracket > div.r2-4 > div:after {
    bottom: 50%;
    height: 26% !important;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r2-4 > div:after {
    bottom: 49%;
    height: 19% !important;
}

/* DE R3 */
div.playoff-tree.upper-bracket > div.r3-4 > div {
    top: 9%;
}

div.playoff-tree.upper-bracket > div.r3-4 > div:after {
    right: -5%;
    top: 50%;
    height: 55%;
}

div.playoff-tree.lower-bracket > div.r3-4 > div {
    margin-top: 0px !important;
    bottom: 18%;
}

div.playoff-tree.lower-bracket > div.r3-4 > div:after {
    right: -5%;
    height: 74%;
    bottom: 49%;
}


/* DE R4 */
div.playoff-tree.upper-bracket > div.r4-4 > div {
    top: 12%;
    align-content: end;
}

div.playoff-tree.lower-bracket > div.r4-4 > div {
    top: -3%;
    align-content: baseline;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r4-4 > div {
    top: 0%;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r4-4 > div {
    top: -20%;
}

/* TOTAL 3 ROUNDS */

/* SE R1 */

div.playoff-tree.single.r3 > div.r1-3 > div:nth-of-type(1) {
    padding-top: 0%;
}

div.playoff-tree.single.r3 > div > div:not(:nth-of-type(1)) {
    padding-top: 4%;
}

div.playoff-tree.single.r3.m2 > div.r1-3 > div:nth-of-type(2) {
    margin-top: 25%;
}

div.playoff-tree.single > div.r1-3 > div:nth-of-type(1):after {
    top: 50%;
    height: 63.5%;
}

div.playoff-tree.single > div.r1-3 > div:nth-of-type(2):after {
    bottom: 40%;
    height: 50%;
}

div.playoff-tree.single > div.r1-3 > div:nth-of-type(3):after {
    top: 60%;
    height: 51.5%;
}

div.playoff-tree.single > div.r1-3 > div:nth-of-type(4):after {
    top: 10%;
    height: 50%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r1-3 > div:nth-of-type(3):after {
    top: 54%;
}

.right-menu-playoffs > div.playoff-tree.single.r3.m2 > div.r1-3 > div:nth-of-type(2) {
    margin-top: 81%;
}

.right-menu-playoffs > div.playoff-tree.single.r3.m2 > div.r1-3 > div:nth-of-type(1)::after {
    height: 55%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r1-3 > div:nth-of-type(4):after {
    top: 5%;
}


/* SE R2 */
div.playoff-tree.single > div.r2-3 > div:nth-of-type(1):after {
    top: 50%;
    height: 56%;
}

div.playoff-tree.single.r3.m2 > div.r2-3 > div:nth-of-type(1) {
    top: 5%;
}

div.playoff-tree.single.r3.m2 > div.r2-3 > div:nth-of-type(2) {
    bottom: 5%;
}

div.playoff-tree.single.r3.m2 > div.r2-3 > div:nth-of-type(2):after {
    top: 6%;
}

.right-menu-playoffs > div.playoff-tree.single.r3.m2 > div.r2-3 > div:nth-of-type(2):after {
    top: 4%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r2-3 > div:nth-of-type(1):after {
    height: 52.5%;
}    

div.playoff-tree.single > div.r2-3 > div:nth-of-type(2):after {
    top: 5%;
    height: 50%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r2-3 > div:nth-of-type(2):after {
    top: 2%;
    height: 50.5%;
}


/* DE R1 */

div.playoff-tree.upper-bracket.r3 > div.r1-3 > div:nth-of-type(1),
div.playoff-tree.lower-bracket.r3 > div.r1-3 > div:nth-of-type(1) {
    padding-top: 0%;
}

div.playoff-tree.upper-bracket > div.r1-3 > div:nth-of-type(1):after {
    top: 50%;
    height: 63%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r1-3 > div:nth-of-type(1):after {
    height: 72%;
}

div.playoff-tree.upper-bracket > div.r1-3 > div:nth-of-type(2):after {
    top: 10%;
    height: 51%;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r1-3 > div:nth-of-type(2):after {
    top: 15%;
    height: 51%;
}

div.playoff-tree.lower-bracket > div.r1-3 > div {
    margin-top: 8.5%;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r1-3 > div {
    margin-top: 29%;
}

div.playoff-tree.lower-bracket > div.r1-3 > div:after {
    bottom: 48%;
    height: 52%;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r1-3 > div:after {
    height: 50%;
}

/* DE R2 */

div.playoff-tree.lower-bracket > div.r2-3 > div {
    align-content: baseline;
}

div.playoff-tree.upper-bracket > div.r2-3 > div:after {
    top: 50%;
    height: 76%;
}

div.playoff-tree.lower-bracket > div.r2-3 > div:after {
    top: -65%;
    height: 100%;
}

/* DE R3 */
div.playoff-tree.upper-bracket > div.r3-3 > div {
    top: 18%;
    align-content: end;
}

div.playoff-tree.lower-bracket > div.r3-3 > div {
    align-content: baseline;
}

.right-menu-playoffs > div.playoff-tree.upper-bracket > div.r3-3 > div {
    top: 0%;
    align-content: end;
}

.right-menu-playoffs > div.playoff-tree.lower-bracket > div.r3-3 > div {
    bottom: 27%;
    align-content: baseline;
}


/* TOTAL 2 ROUNDS */

/* SE R1 */

div.playoff-tree.single.r2 > div.r1-2 > div:nth-of-type(1) {
    padding-top: 0%;
}

div.playoff-tree.single.r2 > div > div:not(:nth-of-type(1)) {
    padding-top: 4%;
}

div.playoff-tree.single > div.r1-2 > div:nth-of-type(1):after {
    top: 50%;
    height: 68.5%;
}

div.playoff-tree.single > div.r1-2 > div:nth-of-type(2):after {
    bottom: 36%;
    height: 50%;
}

div.playoff-tree.single > div.r1-2 > div:nth-of-type(3):after {
    top: 60%;
    height: 51.5%;
}

div.playoff-tree.single > div.r1-2 > div:nth-of-type(4):after {
    top: 10%;
    height: 50%;
}


div.playoff-tree.single.r2 > div:not(:first-child) > div > ul::after {
    left: -2.5%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r1-2 > div:nth-of-type(3):after {
    top: 54%;
}

.right-menu-playoffs > div.playoff-tree.single.r2.m2 > div.r1-2 > div:nth-of-type(1)::after {
    height: 55%;
}

.right-menu-playoffs > div.playoff-tree.single > div.r1-2 > div:nth-of-type(4):after {
    top: 5%;
}

.right-menu-playoffs > div.playoff-tree.single.r2 > div:not(:first-child) > div > ul::after {
    left: -9.5%;
}


/* GENERAL */

div.playoff-tree > div:first-child > div {
    padding-top: 4%;
}

.right-menu-playoffs > div.playoff-tree.single.r4 > div:last-child > div > ul:after {
    right: 0%;
}

.right-menu-playoffs > div.playoff-tree > div:first-child > div {
    padding-top: 25%;
}

div.playoff-tree > div + div > div {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
}

div.playoff-tree > div:first-child > div:not(:nth-of-type(2)) + div:after {
    height: 100%;
    bottom: 40%;
}

.right-menu-playoffs > div.playoff-tree > div:first-child > div:not(:nth-of-type(2)) + div:after {
    bottom: 45%;
}

div.playoff-tree > div:first-child > div:nth-of-type(2) + div:after {
    height: 0px;
}

div.playoff-tree > div > div > ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #333;
    width: 100%;
}

div.playoff-tree.upper-bracket > div:last-child > div > ul {
    border-bottom: 0px;
}

div.playoff-tree.lower-bracket > div:last-child > div > ul {
    border-top: 0px;
}

div.playoff-tree > div > div > ul > li {
    font-size: 15px;
    line-height: 1em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 5px;
    background-color: #d9e0e6;
    min-height: 1em;
}

.right-menu-playoffs > div.playoff-tree > div > div > ul > li {
    font-size: 11px;
    padding: 3px;
}

div.playoff-tree > div > div > ul > li > div {
    display: flex;
    justify-content: space-between;
    min-height: 14.5px;
}

.right-menu-playoffs > div.playoff-tree > div > div > ul > li > div > div > a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-menu-playoffs > div.playoff-tree.r3 > div > div > ul > li > div > div > a {
    max-width: 46px;
}

.right-menu-playoffs > div.playoff-tree.r4 > div > div > ul > li > div > div > a {
    max-width: 26px;
}

div.playoff-tree .score {
    padding: 0 5px;
    background-color: inherit;
    font-weight: bold;
}

div.playoff-tree div.score.win {
    color: #50b649;
}

div.playoff-tree div.score.loss {
    color: #e61a1a;
}

div.playoff-tree div.score.group {
    font-size: 10px;
    color: #98A6B3;
}