#racerResultsDiv{
   position: absolute;
   top:0;
   left:0;
   bottom: 0;
   right:0;
   display: flex;
   flex-direction: column;
}
#runsListContainer{
   flex-grow: 1;
   overflow-y:auto;
}
#otherTracksResults{
   min-height: 12em;
}
#otherTracksCaption{
   margin-top: 0.5em;
   background-color: var(--secondaryBackground);
   text-align: center;
}
#runsList,#otherTracksResultsList{
   display: table;
   table-layout: fixed;
   width: 100%;
}
.tableRow{
   display: table-row;
}
.hdrCell{
   display: table-cell;
   color:#aaa;
}
.hdrCell#runDate{
   padding-left:0.25em;
   width:7em;
   white-space:normal;
   word-wrap: break-word;
}
.hdrCell#runResult{
   width:7em;
}
.dataCell{
   display: table-cell;
   max-width: 0px;
   border-top:0.05em solid var(--brandColor);
   height: 3em;
}
.raceRow .dataCell{
   height:2em;
   vertical-align: middle;
}
.dataRow:hover{
   background-color: var(--secondaryBackground);
   cursor: pointer;
}
#otherTracksResults .dataCell{
   height:2em;
   line-height: 2em;
   vertical-align: middle;
}
.dataCell#runDate{
   padding-left:0.25em;
   color:var(--nameColor);
}

.dataCell#runResult #racePos,
.dataCell#runRaceName #raceName{
   color:var(--brandColor);
}
.dataCell #trackConfig{
   color:#aaa;
   font-size: 0.6em;
   overflow: hidden;
   white-space: nowrap;
}
.hdrCell#runResult,
.dataCell#runResult{
   text-align: right;
   padding-right: 0.25em;
}
#otherTracksResultsList #bestResult,
#otherTracksResultsList #runsCount{
   text-align: right;
}
#otherTracksResultsList #trackName{
   padding-left:0.25em;
}
#otherTracksResultsList .dataCell#trackName{
   color:var(--nameColor);
}
#otherTracksResultsList #bestResult{
   padding-right:0.25em;
}
.hdrCell#runsCount{
   width:5em;
}
.hdrCell#bestResult{
   width:6em;
}
#loadedArchiveContainer{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color: var(--backColor);
   display: none;
   flex-direction: column;
}
#loadedArchiveContainer.visible{
   display: flex;
}
#loadedArchiveCaption{
   display: flex;
   flex-direction: row;
   justify-content:  flex-end;
   width: 100%;
}
#loadedArchiveCaption #closeButton{
   height:1.5em;
   width: 1.5em;
   cursor: pointer;
   background: url("../images/close.svg");
   background-repeat: no-repeat;
   background-size: contain;
}
#applicationMainArea iframe#loadedArchive{
   position: unset;
   width: unset;
   height: unset;
   flex-grow: 1;
   border:none;
   z-index: 1;
   background-color: var(--backColor);
}
#raceSelectorButton{
  display: flex;
  flex-direction: row;
  align-items: center;
  position:relative;
  padding:0 1em;
}
input[id="raceSelectorInput"]{
  appearance:none;
  -webkit-appearance:none;
  display: inline-block;
  width:2em;
  height:0.5em;
  border-radius: 0.25em;
  border:none;
  background-color: var(--brandColor);
  padding: 0;
  margin:0;
  position: relative;
}
input[id="raceSelectorInput"]::after{
  content:"";
  width: 1em;
  height: 1em;
  border-radius: 1em;
  border: 0.1em solid var(--commonColor);
  background-color: var(--brandColor);
  position: absolute;
  top:-0.35em;
  left:-0.5em;
  right:unset;
  cursor: pointer;
}
#raceSelectorInput:checked::after{
  right:-0.5em;
  left:unset;
}