:root{
    --defaultTextColor: black;
    --defaultBkColor: white;
    --tabBkColor: #f0f0f0;
    --activeTabBkColor: green;
    --activeTabTextColor: white;
    --buttonBkColor: green;
    --cancelButtonBkColor: blue;
    --buttonTextColor: white;
    --additionalButtonBkColor: DarkOrange;
    --tableCellBkColor: #f0f0f0;
    --hoverColor:#e0e0e0;
    --rowHoverColor: #f0f0f0;
    --tableSelectedRowBkColor: green;
    --tableSelectedRowTextColor: white;
    --activeRaceBkColor: green;
    --activeRaceTextColor: white;
    --qualifyRunColor: #00ffff;
    --finalRunColor: #00bfff;
    --pairDoneColor: rgba(0,250,154,0.6);
    --racerLoseColor: #ffbdbd;
    --racerSelectLaneColor: #add3ff;
    --currentRunBkColor:#98fb98;
    --highlightColor:#98fb98;
    --defaultSearchDisplay:table-row;
    --defRunLogDisplay:table-row;
}
.runLogItem{
    display: var(--defaultSearchDisplay);
    position: relative;
}
.runLogPrintTicket{
    visibility: hidden;
}
.runLogItem:hover:not(.current) .runLogPrintTicket{
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    width:32px;
    height:32px;
    margin-top:18px;
    background: center / contain url("/images/printticket.png") no-repeat;
    background-color: white;
    cursor: pointer;
    visibility: visible;
}

.runLogItem[searchtextleft*=''],
.runLogItem[searchtextright*='']{
    display: var(--defRunLogDisplay);
}

@font-face {
   font-family: "monofont";
   src: url("fonts/Roboto-Regular.ttf");
}

body{
    font-family: 'monofont','sans','arial';
    font-size: 14px;
    position: relative;
    margin: 0;
    padding:8px;
    width:100%;
    height:100%;
    box-sizing: border-box;
    display: flex;
    flex-direction:column;
}
#raceControlPage{
    flex:1;
   /* overflow: hidden;*/
    position:relative;
}
body.grayed::after{
    content: "";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:black;
    opacity:0.75;
    z-index: 2;
}
.tabs{
    display: flex;
    flex-direction: row;
/*    height:32px;*/
    min-height:32px;
    align-items: center;
    padding-right: 16px;
    user-select: none;
    position:relative;
}
.tabs#raceControlTabs{
    height:32px;
}
.tabs:after{
    content:'';
    border-bottom: 1px solid black;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    pointer-events: none;
}
.tabbutton{
    cursor: pointer;
    min-width:140px;
    background-color:  var(--tabBkColor);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--defaultTextColor);
    padding-left:8px;
    padding-right:8px;
    white-space: nowrap;
    text-align:center;
}
.tabbutton:hover{
    background-color: var(--hoverColor);
    color: var(--defaultTextColor);
}
.tabbutton.active{
    background-color: var(--activeTabBkColor);
    color: var(--activeTabTextColor);
}

.tabContent{
    display: none;
    position: relative;
    /*overflow: auto;*/
}
.tabContent.active{
    display: flex;
    flex-direction: column;
    flex:1;
}
.tabContent.active#finalBracketsPage{
    display:flex;
    flex-direction: column;
}
.tabContent.active.finalsTabs{
    display:flex;
    flex-direction:column;
    flex:1;
}
.bold{
    font-weight: bold;
}
.button{
    height: 32px;
    min-height:32px;
    min-width: 80px;
    padding-left:4px;
    padding-right:4px;
    box-sizing: border-box;
    background-color: var(--buttonBkColor);
    color: var(--buttonTextColor);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.button.cancel{
    background-color: var(--cancelButtonBkColor);
    min-height: unset;
}
.button.additional{
    background-color: var(--additionalButtonBkColor);
}
.button.onlyHover{
    display: none;
}
.rdrcRaceRow{
    min-height: 32px;
}
.rdrcRaceRow *{
    margin: auto;
}
.rdrcRaceRow:hover .button.onlyHover{
    display: flex;
}
span.spdspan{
    color:#888;
}
span.faultspan{
    color:red;
}
span.penaltySpan{
    color:white;
    background-color:red;
}
#notification{
    opacity:0.8;
    background-color:green;
    color:white;
    border-radius:4px;
    display:none;
    align-items: center;
    justify-content:center;
    position:absolute;
    width:200px;
    height:80px;
    z-index:1000;
    padding:8px 8px;
    box-sizing: border-box;
    text-align: center;
}

.createFinalBracketButton{
    width:150px;
}

.popupWindow{
    z-index:10;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    align-items:center;
    justify-content: center;
    background-color:rgba(0,0,0,0.75);
}
.dialog{
    z-index:12;
    background: var(--defaultBkColor);
    max-height: 90%;
    max-width:90%;
    padding:8px;
}
.tablerow:hover,
#bracketPreparation .tablerow.inbracket:hover{
    background-color: var(--hoverColor);
}
.tablerow.selected,
#bracketPreparation .tablerow.inbracket.selected{
    background-color:green;
}
#bracketPreparation .tablerow.inbracket.selected:hover{
    background-color:darkgreen;
}
.rowmenublock{
    display:none;
    position:absolute;
    right:0;
    top:0;
    height:100%;
}
.rowmenuitem{
    height:100%;
    width:24px;
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    cursor: pointer;
}

.topmenuBlock{
    display:flex;
}

.topmenublock .menubutton{
    width:64px;
    height:32px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    cursor:pointer;
}

#loginPage{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}
#loginForm{
    display:flex;
    flex-direction: column;    
    margin-top:16px;
}
#loginForm input[type='submit']{
    margin-top:8px;
}

.timeresult.deletable{
    position:relative;
}
.timeresult.deletable:hover .rowmenublock{
    display: inline-flex;
    position: absolute;
    right:0;
    top:0;
    height:100%;
}
body.readonly .timeresult.deletable:hover .rowmenublock{
    display: none;
}
.timeresult.deleted,
.timeresult.deleted *{
    color:#ccc;
    text-decoration: line-through black 2px;
}
.timeresult#bestResult[resultUuid][resultUuid='']{
    background-color:red;
}
#raceControlCenter legend,#raceInfoPage legend{
    color:blue;
}
#raceControlCenter .commonCaption{
    color:green;
}
.raceTabs fieldset,
.regTabs fieldset{
    max-width:300px;
}

#blockInterface:not(.hidden){
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background-color:rgba(0,0,0,0.75);
    color:white;
    font-size:64px;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index:10000;
}

.setPenaltyButton{
    display:none;
    position:absolute;
    right:0;
    top:0;
    height:16px;
    width:16px;
    background:center/contain no-repeat url("/images/error_icon.png");
    background-color:white;
    cursor:pointer;
}
#timePenaltyContainer{
    position:relative;
}
#timePenaltyContainer:hover .setPenaltyButton{
    display:block;
}
body.readonly #timePenaltyContainer:hover .setPenaltyButton{
    display:none;
}
body.readonly #editRace,body.readonly #createRace,
body.readonly .createFinalBracketButton,body.readonly .printButton{
    display: none;
}
.runKindsHeader{
    display: flex;
    justify-content: center;
}
.runKindsHeader .runKindPlaceHolder{
    border: 1px solid black;
    font-weight: normal;
    padding: 0 0.25em;
}
div[runKind='0']{
    background-color: #ddd;
}
div[runKind='1']{
    background-color: #7fe378;
}
div[runKind='2']{
    background-color: #c79cff;
}
.datacell.timeresult[resultIndex='1']{
    background-color: #c79cff;
}

@keyframes blinkgreen {
    from { background-color: green; }
}
@keyframes  blinkred {
    from { background-color: red;}
}
.blinkgreen {
    animation: blinkgreen 1.5s forwards; /* IE 10+ */
}
.blinkred {
    animation: blinkred 1.5s forwards;
}
 

#raceInfoPage .raceClassInfo td.classET{
    color:blue;
    text-align: right;
    margin-right: 0.25em;
    width:7em;
}
#raceInfoPage .raceClassInfo{
    border-collapse: collapse;
}
#raceInfoPage .raceClassInfo td{
    border-bottom: 1px solid black;
}

#downloadXLS{
    margin-left:1em;
}
#downloadXLS:hover{
    background-color: blue;
}