.page-select {display: flex;
    position: relative;
    flex: 0 0 25px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: var(--page-head-bg-color);
    color: var(--odd-row-sel-color);}

#select-dropdown-toggle {display: none;}

#select-dropdown-toggle + label {display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;}

#select-dropdown-toggle + label::after {content: "▸";
    font-size: 150%;
    padding-left: .2em;
    text-shadow: 0 0 .3em white;}

#select-dropdown-toggle:checked + label::after {content: "▾";}

#select-dropdown-toggle:checked + label + #select-dropdown {display: flex;}

#select-dropdown {display: none;
    position: absolute;
    flex-direction: column;
    align-items: center;
    top: 30px;
    font-size: 18px;
    background-color: var(--page-head-bg-color);
    color: var(--odd-row-sel-color);
    overflow: auto;
    z-index: 3;}

#select-dropdown label {display: block;
    padding: 5px 20px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-size: inherit;}

#select-dropdown label::first-letter {text-transform: capitalize;}

#select-dropdown label:hover {background-color: var(--page-title-text-color);}

#select-dropdown label[data-hide] {display: none;}

#teams {display: none;}

/* .bracket-wrapper {width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--body-bg-color);
    overflow-y: auto;} */

.bracket {display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: inherit;
    margin-top: 10px;}

.bracket[data-hide] {display: none;}

.round {display: block;
    background-color: inherit;
    padding-bottom: 15px;}

.round-title {display: block;
    position: sticky;
    top: 0;
    text-align: center;
    width: 300px;
    background-color: var(--sub-head-row-bg-color);
    color: var(--head-text-color);
    /* line-height: 25px; */
    line-height: 2.08em;
    margin: 0 auto;}

.round-games {display: flex;
    flex-direction: column;
    /*justify-content: space-around;*/
    height: calc(100% - 25px);}

.game {display: flex;
    flex-direction: column;
    width: 300px;
    background-color: var(--head-row-bg-color);
    margin: 5px;
    border: 3px solid var(--head-row-bg-color);
	border-radius: 5px 5px 5px 5px;
	/* box-shadow: 0 0 10px var(--date-bg-color); */}

.game[data-hidden] {display: none;}

.game div {display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    padding-left: 3px;
    padding-right: 3px;}

.game-info {color: var(--head-text-color);
    /* height: 23px; */
    height: 1.92em}

.game-number {flex: 0 0 20%;
    color: var(--odd-row-sel-color);
    font-weight: bold;
    font-size: larger;}

.game-number[data-elimination]::after {content: "(e)";}

.game-time {flex: 0 0 60%;
    text-align: center;}

.game-location {flex: 0 0 20%;
    text-align: right;
    font-weight: bold;}

.game-note {color: burlywood;
    line-height: 1.3em;}

.note {text-align: center;
    width: 100%;}

.top-team {/* background-color: var(--odd-row-bg-color); */
    background-color: white;
    /* background-color: snow; */
    color: var(--font-color);
    /* height: 23px; */
    height: 1.92em;}

.bottom-team {/*background-color: var(--even-row-bg-color);*/
    /* background-color: var(--odd-row-bg-color); */
    background-color: white;
    /* background-color: snow; */
    color: var(--font-color);
    /* height: 23px; */
    height: 1.92em;}

.team-place {color: darkgreen;}

.team-place::after {content: ")";
    position: relative;
    top: -1px;}

.team-name {flex: 1 1 auto;
    white-space: nowrap;}

.team-score {color: var(--game-winner-color);}

.team-name[data-winner], .team-score[data-winner] {font-weight: 900;}

.bracket-winner {display: flex;
    width: 150px;
    background-color: var(--hover-color);
    margin: 5px;}

.game-foot {/* height: 19px; */
    height: 1.58em;}

.game-status {text-align: center;
    width: 100%;
    align-self: end;
    color: darksalmon;}

span {padding: 0 2px;}

.tooltip {position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */} 
  
.tooltip .tooltip-text {visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;}
  
.tooltip:hover .tooltip-text {visibility: visible;}

@media only screen and (min-width: 620px) and (max-width: 789px)
{
    .game[data-hidden] {display: flex;
        visibility: hidden;}
}

@media only screen and (min-width: 790px) {
    .bracket {font-size: 75%;}

    .round-title {width: 275px;}

    .game {width: 275px;}

    .game[data-hidden] {display: flex;
        visibility: hidden;}
}