:root{
    --pairDoneColor:#333;
}
.finalBracket{
    position:relative;
    display:flex;
    font-size:14px;
    transform-origin: top left;
}
.finalRounds{
    display:flex;
    position:relative;
    flex:1;
}
.finalRacer .racerData{
    flex:1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
#bracketPreparation .finalRacer #racerFullName,
#bracketPreparation .finalRacer #carBrandAndModel{
    width:unset;
    max-width:unset;
}
.finalRacer #runResult{
    padding-right:4px;
    text-align: right;
}
.finalRacer #runResult #spd{
    font-size:10px;
}
.finalRound{
    padding-top:4px;
    display:flex;
    flex-direction:column;
    height:100%;
    width:320px;
    min-width:320px;
    position:relative;
    justify-content: center;
}
.finalRound.optional:not(.notempty){
    opacity: 0.25;
}
.roundCaption{
    text-align:center;
    position:absolute;
    top:0;
    width:100%;
}
.finalPair{
    display:flex;
    flex-direction:column;
    flex:1;
    justify-content:center;
    padding-right:32px;
    padding-left:32px;
    box-sizing: border-box;
}
.pairContent{
    background-color:rgba(0,0,0,0.6);
    z-index:2;
    position:relative;
}
.finalPair.done .pairContent{
    background-color: var(--pairDoneColor);
}
.pairContent:after{
    content: '';
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border: 1px solid var(--accentColor);
    pointer-events: none;
}
.pairContent #startNum{
    width:32px;
    text-align: center;
    /*background-color:#66cdaa;*/
    box-sizing: border-box;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
}
.pairContent #startNum:after{
    content:'';
    pointer-events: none;
    border-right: 1px solid var(--accentColor);
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.pairContent #carBrandAndModel{
    font-size:10px;
}
.pairCaption{
    text-align:center;
    display: flex;
    position: relative;
}
.pairCaption:after{
    content:'';
    pointer-events: none;
    border-bottom: 1px solid var(--accentColor);
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.finalRacer{
    display:flex;
    position:relative;
    height:30px;
}
/*
.finalRacer.winner{
    z-index:1;
    box-shadow:black 0 0 4px 0;
}*/
.pairContent .finalRacer.winner #startNum{
    background-color:gold;
    color:black;
}
.pairContent .finalRacer.looser #startNum{
    background-color:red;
}

.finalPair.done .finalRacer.looser,
.finalPair.isCurrent .finalRacer.looser{
    background-color: var(--racerLoseColor);
}

.finalRacer:after{
    content:'';
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    border-bottom: 1px solid var(--accentColor);
}
.finalRacer > *{
    
}
.finalRacer > div{
    padding-left:2px;
}
.finalRacer .placeHolder{
    color:#ccc;
}
.pairCaption .pairNum{
    width:32px;
    text-align:center;
    box-sizing: border-box;
}
.pairCaption .runName{
    flex:1;
}
.q1,.q2{
    --lineColor:var(--accentColor);
    --lineDirection:right;
    z-index: 1;
}
.q1.loser,q2.loser{
    --lineColor:#ccc;
    --lineDirection:right;
}
.q1.backward, q2.backward{
    --lineDirection:left;
}
.q1,.q2{
    position:absolute;
    background: linear-gradient(to top var(--lineDirection),
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.5px),
             var(--lineColor) calc(50% - 0.3px),
             var(--lineColor) calc(50% + 0.3px),
             rgba(0,0,0,0) calc(50% + 0.5px),
             rgba(0,0,0,0) 100%)
}
.q1.streight,.q2.streight{
    background: unset;
    border-top: 1px solid var(--lineColor);
}
.q1.streight{
    border-top-right-radius: unset;
}
.q2{
    border-top: 1px solid var(--lineColor);
}
#bracketPreparation{
    user-select:none;
}
#bracketPreparation .caption{
    background-color: #888;
    color:white;
    padding-left:4px;
    position:relative;
    line-height:24px;
}
#bracketPreparation .caption .rowmenuitem{
    display: block;
}
#bracketPreparation .caption:hover .rowmenuBlock{
    display:flex;
}
#bracketPreparation #competitorsList{
    position:relative;
}

#bracketPreparation #competitorsList #updownMenuBlock{
    position:fixed;
    display: none;
    margin:auto;
    z-index:1;
}
#bracketPreparation .sourcePilots{
    width:100%;
}
#bracketPreparation #pos{
    width:32px;
    text-align: right;
    padding-right:4px;
    box-sizing: border-box;
}
#bracketPreparation #pilotsList #startNum{
    width:48px;
    text-align: center;

}
#bracketPreparation #pilotsList .tablerow:not(.selected) #startNum{
    background-color: #66cdaa;
}
#bracketPreparation #racerFullName,
#bracketPreparation #carBrandAndModel{
    padding-left:4px;
    width:150px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    box-sizing: border-box;
}
#bracketPreparation #qualResult{
    width: 64px;
    text-align: right;
    padding-right:4px;
}
#bracketPreparation .tablerow.inbracket{
    background-color: #00ffff;
}
#bracketPreparation .tablerow.inbracket:hover .rowmenublock{
    display: flex;
}
.rowmenublock .rowmenuitem{
    display:block;
}
#bracketPreparation .tablerow:not(.empty) .rowmenublock #addButton{
    display:none;
}

.floatingmenubutton{
    width:24px;
    height:24px;
    cursor: pointer;
}
#bracketDisplay{
    flex:1;
    overflow:auto;
    padding-top:4px;
}

.bracketCaption{
    text-align:center;
    height:24px;
    border-bottom:1px solid var(--accentColor);
}

#pairContextMenuBackground{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:10;
}
#pairContextMenu{
    position:fixed;
    background-color:white;
    border:1px solid var(--accentColor);
    box-shadow:black 0 0 4px 0px;
    user-select:none;
}
#pairContextMenu .menuitem{
    padding: 0px 4px 0px 4px;
    border-bottom:1px solid var(--accentColor);
}
#pairContextMenu .menuitem:hover{
    background-color:var(--hoverColor);
}
.finalPair.isCurrent .pairContent{
    background-color: var(--currentRunColor);
    box-shadow:green 0 0 4px 4px;
}
.tabbutton.finalsTabs.isCurrent:not(.active){
    background-color:var(--additionalButtonBkColor);
    color:black;
}
#pairWinnerSelector{
    background-color:white;
    border:1px solid var(--accentColor);
    padding:8px;
}
#pairWinnerSelector input{
    margin:4px 0 4px 0;
}
#pairWinnerSelector .caption{
    border-bottom: 1px solid var(--accentColor);
    margin-bottom: 8px;
}
#pairWinnerSelector label{
    padding-left: 8px;
}
.bracketCaptionHeader{
    display:none;
}