.bracket-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    max-width: 1800px;
    max-height: 1000px;
    overflow-x: auto;
    overflow-y: auto;
}

.bracket-main {
    display: flex;
    flex: 0 0 100%;
    flex-basis: auto;
    flex-direction: row;
    line-height: 1.4em;
    overflow-x: auto;
    overflow-y: auto;
}
.bracket-main .round {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 340px;
    padding: 0;
    list-style: none;
    overflow: visible;
}
.bracket-main .round.losers-bracket {
    position: relative;
    padding-top: 16px;
    border-top: 1px dashed #aaa;
    overflow: visible;
}
.bracket-main .round.losers-bracket:first-of-type::after {
    content: "Loser's Bracket";
    position: absolute;
    display: block;
    top: 8px;
    left: 16px;
    font-weight: 600;
    color: #aaa;
}
.bracket-main .round .spacer {
    flex-grow: 1;
}
.bracket-main .round .spacer:first-child,
.bracket-main .round .spacer:last-child {
    flex-grow: 0.5;
}
.bracket-main .round .game-spacer {
    flex-grow: 1;
}
.bracket-main li.game {
    padding-left: 20px;
}
.bracket-main li.game.bye {
    opacity: 0;
}
.bracket-main .inflated li.game.bye {
    padding-top: 20px;
    padding-bottom: 20px;
}
.bracket-main li.game.winner {
    font-weight: bold;
}
.bracket-main li.game span {
    float: right;
    margin-right: 5px;
}
.bracket-main li.game span.label {
    float: none;
}
.bracket-main li.game span.date-start,
.bracket-main li.game span.venue-title,
.bracket-main li.game span.venue-field-title {
    display: inline;
    float: none;
    margin-right: 0;
}
.bracket-main li.game-top {
    border-bottom: 1px solid #aaa;
}
.bracket-main li.game-spacer { 
    border-right: 1px solid #aaa;
    min-height: 40px;
}
.bracket-main ul li.game-spacer:not(.bye) {
    padding-top: 8px;
    padding-bottom: 8px;
}
.bracket-main li.location {
    display: flex;
    align-items: center;
}
.bracket-main li.game-bottom { 
    border-top: 1px solid #aaa;
}
.bracket-main li.game.final,
.bracket-main li.game.champion {
    position: relative;
    border-bottom: 1px solid #aaa;
    text-align: center;
}
.bracket-main li.game.champion::after {
    content: "Champion";
    position: absolute;
    left: calc(50% - 14px);
    bottom: -24px;
    font-size: 12px;
}
.bracket-main ul.round.final {
    border-right: 1px solid #aaa;
}
.bracket-main ul.round.final::after {
    content: " ";
    position: absolute;
    width: 1px;
    height: calc(50% + 17px);
    background-color: #FFF;
    top: 0;
    right: -1px;
}
.bracket-main ul.round.losers-bracket.final::after {
    top: auto;
    bottom: 0;
    height: calc(50% - 26px);
}
.bracket-main .team-logo {
    display: inline-block;
    vertical-align: middle;
    max-width: 27px;
    max-height: 27px;
    margin: 4px 0;
    outline: 1px solid #888;
}
.bracket-main .team-logo .secondary-shape {
    width: 4px;
    height: 27px;
    left: 6px;
}
.bracket-main .game-top .team-logo {
    vertical-align: middle;
}
.bracket-main .game span.team {
    display: inline-block;
    vertical-align: middle;
    float: none;
    padding-left: 8px;
}
.bracket-main .game span.score {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    right: 16px;
    margin-top: 6px;
}
.bracket-main ul.round.final li.final-venue {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-right: 0;
    background-color: #FFF;
}
.bracket-main ul.round.if-necessary::before {
    content: "";
    width: 100%;
    height: 70%;
}
.bracket-main ul.round.if-necessary li.game-spacer:not(.bye) {
    padding-top: 16px;
    padding-bottom: 16px;
}
.bracket-main ul.round.if-necessary li.location span > strong::after {
    content: " (If Necessary)";
    font-weight: 400;
    font-style: italic;
}
.bracket-main ul.round.if-necessary li.game-bottom {
    position: relative;
    border-top: 1px dashed #aaa;
}
.bracket-main ul.round.if-necessary li.game-bottom::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 20px;
    height: 2px;
    background-color: #FFF;
}
.bracket-main li.game-top.empty {
    min-height: 36px;
}

.bracket-main ul.round.losers-bracket[data-num-teams="7"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="6"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="5"]:last-child::after {
    bottom: 0;
    height: calc(50% + 34px);
}
.bracket-main ul.round.losers-bracket[data-num-teams="7"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="6"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="5"]:last-child li.game {
    margin-bottom: 120px;
}

.bracket-main ul.round.losers-bracket[data-num-teams="12"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="11"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="10"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="9"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="8"]:last-child::after {
    bottom: 0;
    height: calc(50% + 94px);
}
.bracket-main ul.round.losers-bracket[data-num-teams="12"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="11"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="10"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="9"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="8"]:last-child li.game {
    margin-bottom: 240px;
}

.bracket-main ul.round.losers-bracket[data-num-teams="16"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="15"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="14"]:last-child::after,
.bracket-main ul.round.losers-bracket[data-num-teams="13"]:last-child::after {
    bottom: 0;
    height: calc(50% + 174px);
}
.bracket-main ul.round.losers-bracket[data-num-teams="16"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="15"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="14"]:last-child li.game,
.bracket-main ul.round.losers-bracket[data-num-teams="13"]:last-child li.game {
    margin-bottom: 400px;
}

.bracket-main ul.round.losers-bracket.round-5[data-num-teams="16"],
.bracket-main ul.round.losers-bracket.round-5[data-num-teams="15"],
.bracket-main ul.round.losers-bracket.round-5[data-num-teams="14"],
.bracket-main ul.round.losers-bracket.round-5[data-num-teams="13"],
.bracket-main ul.round.losers-bracket.round-4[data-num-teams="12"],
.bracket-main ul.round.losers-bracket.round-4[data-num-teams="11"] {
    margin-bottom: 115px;
}

.bracket-main select,
.bracket-main input {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}
.bracket-main select {
    max-width: 150px;
    padding: 4px;
}
.bracket-main input {
    max-width: 56px;
    padding: 4px;
    text-align: center;
}
.bracket-main input.short {
    max-width: 40px;
}
.bracket-main .game-top select,
.bracket-main .game-top input {
    vertical-align: bottom;
    margin-bottom: 4px;
    margin-top: 0;
}

@media print {

    @page {
        margin: 0mm;
    }

    body {
        zoom: 82%;
    }

    .bracket-container {
        max-width: none;
        max-height: none;
        width: 100% !important;
        overflow-x: hidden;
    }
    .bracket-main .team-logo {
        display: none !important;
    }
    .bracket-main .game {
        padding: 8px 0;
    }
    .bracket-main .round {
        width: 270px;
    }

}