/*
 *  Flex Layout Specifics
*/
/* main{
    display:flex;
    flex-direction:row;
} */
.hidden {
    display: none;
}
.round{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:200px;
    list-style:none;
    padding:0;
}
.round .spacer{ flex-grow:1; }
.round .spacer:first-child,
.round .spacer:last-child{ flex-grow:.5; }

.regions-bracket {
    display: flex;
    overflow: scroll;
}


.full-column-wrapper {
    width: 100%;
    text-align: left;
}
.full-column {
    width: 100%;
    display: inline-block;
    text-align: left;
}

/*
*  General Styles (LEFT)
*/
.left-column-wrapper {
    width: 50%;
    text-align: left;
}
.left-column {
    width: 80%;
    display: inline-block;
    text-align: left;
}
.region {
    width: 100%;
    max-height: 45%;
    text-align: left;
    display:flex;
    flex-direction:row;
}

.round .game-spacer{
    flex-grow:1;
}

li.game{
    padding-left:20px;
}

li.game.winner{
    font-weight:bold;
}
li.game span{
    float:left;
    margin-left:5px;
}

li.game-top{ border-bottom:1px solid #aaa; }

li.game-spacer{ 
    border-right:1px solid #aaa;
    min-height:40px;
}

li.game-bottom{ 
    border-top:1px solid #aaa;
}

/* 
*  General Styles (RIGHT)
*/

/* .regions-column-right {
    display: block;
    width: 40%;
    text-align: right;
    display: inline-block;
    flex-direction:row-reverse;
} */
.right-column-wrapper {
    width: 50%;
    text-align: right;
    right: 0px;
}
.right-column {
    display: inline-block;
    text-align: right;
    right: 0px;
    width: 80%;
}
.region-right {
    width: 100%;
    max-height: 45%;
    text-align: right;
    display:flex;
    flex-direction:row-reverse;
}

.round .game-right-spacer{
    flex-grow:1;
}

li.game-right{
    padding-right:20px;
}

li.game-right.winner{
    font-weight:bold;
}
li.game-right span{
    float:right;
    margin-right:5px;
}

li.game-right-top{ border-bottom:1px solid #aaa; }

li.game-right-spacer{ 
    border-left:1px solid #aaa;
    min-height:40px;
}

li.game-right-bottom{ 
    border-top:1px solid #aaa;
}

.bracket-header {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
}

.bracket-wrapper {
    display: block;
}

.final-four-wrapper {
    width: 48%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.champion-container {
    /* position: absolute; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    align-items: center;
    width: 34%;
}



.final-four-bracket {
    display: flex;
}

.left-final-four-column-wrapper {
    text-align: left;
    width: 33%;
}
.right-final-four-column-wrapper {
    text-align: right;
    right: 0px;
    width: 33%;
}

.left-final-four-column {
    width: 80%;
    display: inline-block;
    text-align: left;
}
.right-final-four-column {
    width: 80%;
    display: inline-block;
    text-align: right;
    right: 0px;
}