/* Play down bracket styles
----------------------------------------------------------*/
:root {
    --bracket-bkg: #fcfcfb;
    --bracket-guide: 1px dotted lightgrey;
    --bracket-cell: 0.1em solid Black;
    --bracket-fg: #0f1155;
    --bracketline-fg: darkbrown;
    --bracketlabel-fg: #f5f5dc;
    --bracketmt-fg: #1e8605;
    --bracketst-fg: red;
    --bracketend-fg: darkgreen;
    --bracketrun-fg: darkblue;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}
div.BracketContainer {
    width: 100%;
}

img.HeadToHead {
    width: 10%;
    height: auto;
    cursor: pointer;
}

table.Bracket {
    width: 100%;
    background-color: var(--bracket-bkg);
    table-layout: auto;
    font-family: Arial;
}
table.Bracket tr {
    color: var(--bracket-fg);
    background-color: var(--bracket-bkg);
    height: 30px;
}
/*
	table.Bracket tbody {
		display: block;
		overflow: auto;
		height: 1000px;
		width: 100%;
	}
table.Bracket thead {
	width:100%;
	height:auto;
}
table.Bracket thead tr {
	display: table-header-group;
	height: auto;
}
table.Bracket tfoot tr {
	display: table-header-group;
	height: auto;
}
*/

    table.Bracket tr.Header {
        background-color: beige;
        border: var(--bracket-cell);
        vertical-align: top;
    }

    table.Bracket th.Header {
        color: darkblue;
        font-weight: bold;
        border: 1px solid sandybrown;
        text-align: center;
    }

    table.Bracket th.HeaderCenter {
        color: darkblue;
        font-weight: bold;
        border-left: 1px solid sandybrown;
        text-align: center;
    }


    table.Bracket tr.RoundRobin {
        color: #0f1155;
        background-color: #f9fbfb;
        border: var(--bracket-cell);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    table.Bracket td.RoundRobin {
        color: #0f1155;
        background-color: #f9fbfb;
        border: var(--bracket-cell);
        padding: 2px 0 2px 0;
        margin: 0;
        line-height: 10px;
    }

    table.Bracket td.RoundRobin div {
        color: #0f1155;
        background-color: #f9fbfb;
        padding: 2px 0 2px 0;
        text-align: center;
        line-height: 10px;
        clear: both;
    }
    table.Bracket td.RoundRobin div.BracketRRGroup {
        color: #0f1155;
        background-color: #f9fbfb;
        text-align: center;
        line-height: 10px;
        clear: both;
    }
    table.Bracket td.RoundRobin div.BracketLine {
        padding: 2px 0 2px 0;
        margin:10px 2px 1px 2px;
    }
    table.Bracket td.RoundRobin div.ScoreLine {
        padding: 2px 0 2px 0;
    }

    table.Bracket td {
        padding-left: 5px;
    }

        table.Bracket td.Player {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-right: var(--bracket-guide);
            vertical-align: bottom;
        }

        table.Bracket td.LoserPlayer {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-left: var(--bracket-guide);
            vertical-align: bottom;
        }

        table.Bracket td.S0Player {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-left: var(--bracket-guide);
            border-right: var(--bracket-guide);
            vertical-align: bottom;
        }

        table.Bracket td.PlayerBottom {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-left: var(--bracket-cell);
            border-right: var(--bracket-cell);
            vertical-align: bottom;
        }

        table.Bracket td.PlayerBottomRight {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-right: var(--bracket-cell);
            vertical-align: bottom;
        }

        table.Bracket td.PlayerBottomLeft {
            font-weight: bold;
            border-bottom: var(--bracket-cell);
            border-left: var(--bracket-cell);
            vertical-align: bottom;
        }

    table.Bracket td.Fill {
        width: 40px;
    }

    table.Bracket td.Spacer {
        border-bottom: var(--bracket-cell);
        width: 1.0em;
    }

    table.Bracket td.TableInfo {
        font: Arial narrow;
        font-weight: bold;
        font-size: 8px;
    }

    table.Bracket td.Center {
        border-left: var(--bracket-cell);
        border-right: var(--bracket-cell);
        font: Arial;
        font-size: 1.0em;
        text-align: center;
        vertical-align: text-top;
    }

    table.Bracket td.Left {
       border-left: var(--bracket-cell);
    }

    table.Bracket td.EmptyLeft {
        border-left: var(--bracket-guide);
    }

    table.Bracket td.EmptyRight {
        border-right: var(--bracket-guide);
    }

    table.Bracket td.EmptyCenter {
        border-left: var(--bracket-guide);
        border-right: var(--bracket-guide);
    }

    table.Bracket td.Right {
        border-right: var(--bracket-cell);
        height: 15px;
        text-align: center;
    }

    table.Bracket td.LoserLabel {
        font: Arial;
        color: green;
        font-size: 0.9em;
        font-weight: bold;
        border-left: var(--bracket-guide);
    }

    table.Bracket td.MatchHiLite {
        background-color: lightgreen;
    }
    table.Bracket td.HighlightMatch {
        background-color: lightgray;
        color: black;
    }
    table.Bracket .BracketLine {
        font-size: 0.7em;
        font-style: italic;
        color: var(--bracketline-fg);
    }

    table.Bracket td div.BracketLine {
        font-size: 0.8em;
        font-style: italic;
        color: var(--bracketline-fg);
    }

    table.Bracket td div.BracketLineRun {
        font-size: 0.9em;
        font-style: italic;
        color: var(--bracketrun-fg);
    }

    table.Bracket td div.BracketLineEnd {
        font-size: 0.8em;
        color: var(--bracketend-fg);
    }

    table.Bracket td span.StartTime,
    table.Bracket td div.MatchTime,
    table.Bracket td.StartTime {
        font-size: 1.0em;
        font-weight: bold;
        color: var(--bracketst-fg);
        text-align: center;
    }

    table.Bracket td span.MatchTime,
    table.Bracket td div.MatchTime,
    table.Bracket td.MatchTime {
        font-size: 1.0em;
        font-weight: bold;
        color: var(--bracketmt-fg);
        text-align: center;
    }