/****** CSS Tournament Bracket A PEN BY Brandon Semilla https://codepen.io/semibran/pen/VjmPJd ******/

/*@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,700';*/

/*
html {
    font-size: 1rem;
}

body {
    background: #f0f2f2;
}
*/

/*
* {
    box-sizing: border-box;
    border: 1px solid black;
}
*/

a.navlink, /* Styles for all anchors = with and without href */
a.navlink:link, /* Styles for anchors with href only, from here down*/
a.navlink:visited,
a.navlink:hover,
a.navlink:active {
    text-decoration: none;
}

/*this does not work, the next one does*/
/*a.navlink:hover {
    background-color: lightsteelblue !important;
}*/

.participant:hover { /*added by Tavo*/
    background-color: lightsteelblue !important;
}

.bracket {
    display: inline-block;
    position: relative;
    /*left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    white-space: nowrap;
    /*font-size: 0rem;*/
}

    .bracket .round {
        display: inline-block;
        vertical-align: middle;
    }

        .bracket .round .winners > div {
            display: inline-block;
            vertical-align: middle;
        }

            .bracket .round .winners > div.matchups .matchup:last-child {
                margin-bottom: 0 !important;
            }

            .bracket .round .winners > div.matchups .matchup .participants {
                border-radius: 0.25rem;
                overflow: hidden;
            }

                .bracket .round .winners > div.matchups .matchup .participants .participant {
                    box-sizing: border-box;
                    color: #858585; /*original color: #858585;*/
                    border-left: 0.25rem solid #858585;
                    background: lightgray;
                    width: 10rem;
                    height: 3rem;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12); /*does not do anything*/
                    /*text-align: center;*/ /*I added this; without it, text is centered*/
                    /*vertical-align: middle;*/ /*does not do anything*/
                }

                    .bracket .round .winners > div.matchups .matchup .participants .participant.winner {
                        color: black; /*original color: #60c645 | this definition does not work after I added the table inside this div*/
                        border-color: mediumseagreen; /*original color: #60c645*/
                    }

                    .bracket .round .winners > div.matchups .matchup .participants .participant.loser {
                        color: #dc563f;
                        border-color: #dc563f;
                    }

                    .bracket .round .winners > div.matchups .matchup .participants .participant:not(:last-child) {
                        border-bottom: thin solid #f0f2f2;
                    }

                    /*I created this for the table with scores
                      Had to create a table, to align the scores inside the <span> element - tried, but could not do it any other way*/
                    .bracket .round .winners > div.matchups .matchup .participants .participant table {
                        width: 100%;
                        padding: 0px;
                        border-collapse: collapse;
                        border-spacing: 0px;
                        color: #858585;
                    }
                        /*I had to create winner and loser classes for table, becuase the element will not take the color from .participant.winner .participant.loser*/
                        .bracket .round .winners > div.matchups .matchup .participants .participant table.winner {
                            color: black;
                        }

                        .bracket .round .winners > div.matchups .matchup .participants .participant table.loser {
                            color: #dc563f;
                        }

                        .bracket .round .winners > div.matchups .matchup .participants .participant table td {
                            padding: 0px; /*this needs to be defined, if not, there is padding*/
                            /*width: 75%;*/ /*I tinker with this for alignment, but it is no longer needed*/
                        }

                    .bracket .round .winners > div.matchups .matchup .participants .participant span {
                        /*color: #858585;*/
                        margin: 0 0.75rem; /*1st number top & bottom, 2nd number right & left*/
                        line-height: 3;
                        font-size: 1rem;
                        /*color: red;*/
                        /*font-family: "Roboto Slab";*/
                    }

                /*added this for the Title Boxes*/
                .bracket .round .winners > div.matchups .matchup .participants .participant2 {
                    box-sizing: border-box;
                    color: black;
                    border-left: 0.25rem solid #858585;
                    background-color: lightsteelblue; /*previously lightslategray*/
                    width: 10rem;
                    height: 3rem;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
                    text-align: center;
                }

                    .bracket .round .winners > div.matchups .matchup .participants .participant2.winner {
                        color: black; /*original color: #60c645*/
                        border-color: mediumseagreen; /*original color: #60c645*/
                    }

                    .bracket .round .winners > div.matchups .matchup .participants .participant2:not(:last-child) {
                        border-bottom: thin solid #f0f2f2;
                    }

                    .bracket .round .winners > div.matchups .matchup .participants .participant2 span {
                        margin: 0 1.25rem;
                        line-height: 3;
                        font-size: 1rem;
                        /*font-family: "Roboto Slab";*/
                    }
                /*end of addition*/

                /*added this for the 3rd Place Boxes*/
                .bracket .round .winners > div.matchups .matchup .participants .participant3 {
                    box-sizing: border-box;
                    color: black;
                    border-left: 0.25rem solid white;
                    background-color: white;
                    width: 10rem;
                    height: 3rem;
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
                    text-align: center;
                }

                    .bracket .round .winners > div.matchups .matchup .participants .participant2:not(:last-child) {
                        border-bottom: thin solid #f0f2f2;
                    }

                    .bracket .round .winners > div.matchups .matchup .participants .participant3 span {
                        margin: 0 1.25rem;
                        line-height: 3;
                        font-size: 1rem;
                        /*font-family: "Roboto Slab";*/
                    }
                /*end of addition*/

            .bracket .round .winners > div.connector.filled .line, .bracket .round .winners > div.connector.filled.bottom .merger:after, .bracket .round .winners > div.connector.filled.top .merger:before {
                border-color: #60c645;
            }

            .bracket .round .winners > div.connector .line, .bracket .round .winners > div.connector .merger {
                box-sizing: border-box;
                width: 2rem;
                display: inline-block;
                vertical-align: top; /*changed from top to middle*/
            }

            .bracket .round .winners > div.connector .line {
                /*this changes the properties of the horizontal connecting line (right of the bracket)*/
                border-bottom: thin solid #c0c0c8;
                height: 4rem; /*changed from 4 to half of .merger height = 4.33rem*/
            }

            .bracket .round .winners > div.connector .merger {
                position: relative;
                height: 8.7rem; /*changed from 8 to 8.67 to account for matchup-titles that I added (font size is 0.67rem)*/
            }

                .bracket .round .winners > div.connector .merger:before, .bracket .round .winners > div.connector .merger:after {
                    /*this changes the properties of the vertical line and the 2 horizontal connecting lines (left of bracket)*/
                    content: "";
                    display: block;
                    box-sizing: border-box;
                    width: 100%;
                    height: 50%;
                    border: 0 solid;
                    border-color: #c0c0c8;
                }

            .bracket .round .winners > div.connector .merger:before {
                border-right-width: thin;
                border-top-width: thin;
            }

            .bracket .round .winners > div.connector .merger:after {
                border-right-width: thin;
                border-bottom-width: thin;
            }

            /*  added by Tavo to create a connector line with white color for it not to be seen
                Had to do it here in CSS because I could not override the color of the line in HTML
                for the vertical line and the 2 horizontal connecting lines (left of bracket),
                the one defined by the connector class.
                I was able to override the color of the line class in html using style="border-color: red;",
                but since I had to do this, then I am establishing the color for that line here and not in html
            */

            .bracket .round .winners > div.connector2 .line, .bracket .round .winners > div.connector2 .merger {
                box-sizing: border-box;
                width: 2rem;
                display: inline-block;
                vertical-align: top;
            }

            .bracket .round .winners > div.connector2 .line {
                /*this changes the properties of the horizontal connecting line (right of the bracket)*/
                border-bottom: thin solid white; /*changed to white*/
                height: 4rem;
            }

            .bracket .round .winners > div.connector2 .merger {
                position: relative;
                height: 8rem;
            }

                .bracket .round .winners > div.connector2 .merger:before, .bracket .round .winners > div.connector2 .merger:after {
                    /*this changes the properties of the vertical line and the 2 horizontal connecting lines (left of bracket)*/
                    content: "";
                    display: block;
                    box-sizing: border-box;
                    width: 100%;
                    height: 50%;
                    border: 0 solid;
                    border-color: white; /*changed to white*/
                }

                .bracket .round .winners > div.connector2 .merger:before {
                    border-right-width: thin;
                    border-top-width: thin;
                }

                .bracket .round .winners > div.connector2 .merger:after {
                    border-right-width: thin;
                    border-bottom-width: thin;
                }
            /*end of addition*/

        .bracket .round.quarterfinals .winners:not(:last-child) {
            margin-bottom: 2rem;
        }

        .bracket .round.quarterfinals .winners .matchups .matchup:not(:last-child) {
            margin-bottom: 2rem;
        }

        .bracket .round.semifinals .winners .matchups .matchup:not(:last-child) {
            margin-bottom: 10rem;
        }

        .bracket .round.semifinals .winners .connector .merger {
            height: 17.34rem; /*changed from 16 to 17.34 to account for matchup-titles that I added (font size = 0.67rem)*/
        }

        .bracket .round.semifinals .winners .connector .line {
            height: 8.67rem; /*half of semifinals merger height*/
        }

        .bracket .round.finals .winners .connector .merger {
            height: 3rem;
        }

        .bracket .round.finals .winners .connector .line {
            height: 1.5rem;
        }