.dark
{
    --background: #000d1a;/*#001A37;*/
    --foreground: #FFFFFF;
    /*--colorLink: #00FFFF;*/
    --colorLink: #00CCFF;
    --colorActive: #FFFFFF;
    --colorInactive: #AAAAAA;
    --colorDisabled: #444444;
    --colorHover: #888;
    --colorTabActive: #466F98;
    --tr-even: #001934;
    --tr-odd: #00264C;
    --th-background: #004080;
    --th-break: #001A37;
    --colorFootnote: #AAAAAA;
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    background-color: var(--background);
    color: var(--foreground);

    /*disable text seletion */
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}
  
/* Hide scrollbar for Chrome, Safari and Opera  */
body::-webkit-scrollbar-track
{
    display: none;
}

.hide
{
    display: none !important;
}


.banner
{
    display: flex;
    margin-bottom: 1px;
}

.title
{
    margin: auto;
    white-space: nowrap;
    overflow: auto;
}

.centered
{
    display: flex;
    align-items: center;
    justify-content: center;
}

#compName
{
    font-weight:bold;
}

#compHost,
#compLocation,
#compDates
{
    font-size: .9rem;
}

a
{
    cursor: pointer;
}

.searchBox
{
    max-width: 150px;
    margin-bottom: 4px;
}

.filterBar
{
    overflow: auto;
    max-width: 99vw;
}

.filters
{
    display: inline-flex;
    color: var(--colorActive);
    font-weight: bold;
    margin-bottom: 10px;
    /*margin-right: 4px;*/
}

.filters a.active
{    
    color: var(--colorActive);
    border-bottom: 2px var(--colorActive) solid;
}

.filters a
{
    color: var(--colorInactive);
    border-bottom: 2px color(--background) solid;
    margin-right: 8px;
}

.space
{
    width: 5px;
}

/* fix this -- bracket*/
.spacer 
{
    width: 8px;
}

.hidden
{
    visibility: hidden;
}

.scoreScroller {
    max-width: 100vw;
    max-height: calc(100vh - 75px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0px 8px;
}
/*
@media (hover: none)
{
    .scoreScroller {
	max-height: calc(100vh - 250px);
	background: red !important;
    }
}
*/
.scoreScroller.preview {
    max-height: auto;
    overflow: visible
}

.scoreTable21 {
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0px;
}

.scoreTable21 th,
.scoreTable21 td {    
    padding: 4px 4px;
}

.scoreTable21 th
{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: var(--background);
  color: var(--foreground);
  z-index: 2;
}

.scoreTable21 th:nth-child(1),
.scoreTable21 td:nth-child(1)
{
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    text-align: left;
    min-width:30px;
}

/* name scroll hack */
.scoreTable21 th:nth-child(2),
.scoreTable21 td:nth-child(2)
{
    position: -webkit-sticky;
    position: sticky;
    left: 40px;
    text-align: left;
}

/* name scroll hack */
.scoreTable21 th:nth-child(4),
.scoreTable21 td:nth-child(4)
{
    position: -webkit-sticky;
    position: sticky;
    left: 120px;
    text-align: left;
}

.scoreTable21 th,
.scoreTable21 td
{
    position: -webkit-sticky;
    position: sticky;
    left: 125px;
}

.scoreTable21 th[data-key='name2'],
.scoreTable21 td[data-key='name2'] 
{
    display: none;
}

.scoreTable21 td[data-key='name'] div:nth-child(2),
.scoreTable21 td[data-key='name'] div:nth-child(3),
.scoreTable21 td[data-key='name2'] div:nth-child(2),
.scoreTable21 td[data-key='name2'] div:nth-child(3)
{
    font-style: italic;
    font-size: .8rem;
}

/*.clip .scoreTable21 td[data-key='name']*/
.clip .scoreTable21 td:nth-child(4)
{
    border-left: 3px solid #555;
}

.scoreTable21 tr.break td
{
    color: var(--foreground);
    background-color: var(--background) !important;
    text-align: center;
    font-size: .9rem;
    font-weight: bold;
    padding: 2px;    
}

.scoreTable21 td.crp
{
    text-align: right;
}

.scoreSpeed td[data-key='nameSO'] div:nth-child(2),
.scoreSpeed td[data-key='nameSO'] div:nth-child(3)
{
    font-size: .8rem;
}

.scoreTable21 tr:nth-child(odd) td,
.notifyTable tr:nth-child(odd) td
{
    background-color: var(--tr-odd); 
}

.scoreTable21 tr:nth-child(even) td,
.notifyTable tr:nth-child(even) td
{
    background-color: var(--tr-even);
}

.scoreTable21 tbody tr:last-child td
{
    border-bottom: 5px solid #aaa;
}

.scorePreview tbody tr:last-child td
{
    border-bottom: 0px !important;
}				  

.scoreTable21 td:nth-child(3) div:nth-child(1)
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.collapse-qual [data-group="qual"]
{
    display: none;
}


xtr.scratch td,
xtd.scratch
{
    /*
    background-color: rgba(0, 0, 0, 1) !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGklEQVQYV2NkwAIYsQr+////P7oEdpXYtAMA8rIEAsyHsIsAAAAASUVORK5CYII=');
    background-repeat: repeat-x;
    background-position: 50% 50%;
    background-blend-mode: lighten;
    /*    opacity: .7;*/
    z-index: 4;
}

tr.scratch td,
td.scratch
{
    color: #888;
    background-color: black !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAABlJREFUGFdjZMACGLEK/v//vwFdArtKbNoB1W0Dg6ReNQgAAAAASUVORK5CYII=');
    background-repeat: repeat-x;
    background-position: 50% 50%;
    z-index: 4;
}

tr.scratch td:nth-child(n+4)
{
    display: none;
}
	  
td div.brush {
    font-style: italic;
    font-weight: bold;
    color: yellow;
    margin-top: -15px;
}

.boulderGlyph .fill
{
    background-color: green;
}

.boulderGlyph .fill.lowzX
{
    background: #005800;
    color: #aaa;
    font-style: italic;
}

.font9
{
    font-size: 1rem;
}

.tiny
{
    font-size: .8rem;
    font-style: italic;
}

.boulderGlyph
{
    font-size: .9rem;
    color: #ddd;
    padding: 4px !important;
}

.boulderGlyph div
{
    background-color: #888;
    border: 1px solid #AAA;
    border-radius: 1px;
    text-align: center;
    max-width: 22px;
    margin: 0px auto;
}

.boulderGlyph .fa-circle
{
    font-size: .6rem;
}


th[data-key="pts1"],
th[data-key="pts2"],
th[data-key="pts3"]
{
    padding-left: 20px;
}

.boulderGlyph .nobox
{
    background-color: transparent;
    border: 0px solid #AAA;
}

.scoreBoulder th
{
    padding-top: 12px;
    padding-bottom: 12px;
}

.scoreLeadTR th
{
    padding-bottom: 1px;
}

.scoreLeadTR tr:nth-child(2) th
{
    height: 15px;
    overflow: hidden;
    padding: 0px 0px 8px 0px;
    background-color: var(--th-background);
}

.scoreLeadTR td[data-key="hold"]
{
    text-align: center;
}

.scoreLeadTR th.rt,
.scoreLeadTR td[data-key="rankpts"],
.scoreLeadTR td[data-key="hold"],
.scoreLeadTR td[data-key="so"]
{
    text-align: right;
}
    
.vbreak
{
    border-left: 3px solid #666;
    padding-left: 10px;
}

.text-center
{
    text-align: center;
}

.scoreSpeed th:nth-child(4), /*best*/
.scoreSpeed th:nth-child(5), /*route1*/
.scoreSpeed th:nth-child(6)  /*route2*/
{
    text-align: left;
    padding-right: 20px;
}

.scoreSpeed td[data-key="nameSO"] div
{
    padding-right: 5px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

td.teamPts
{
    color: var(--colorActive);
    cursor: pointer;
    text-align: right;
}

.isoScroller
{
    max-height: calc(100vh - 10px);
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    margin: 8px;
}

.isoTable td:nth-child(2) div:nth-child(2)
{
    font-size: 1rem;
}

.disabled
{
    color: #444;
}

.disabled2
{
    color: #CCC !important;
}

.fa-marker
{
    float: right;
    color: #888;
}

.TextMeasureDiv
{
/*    font-family: Arial,Helvetica,sans-serif;*/
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
}

th .fa-sort,
th .fa-sort-down,
th .fa-caret-right,
th .fa-caret-down
{
    margin: 0px 4px;
    color: var(--colorActive);
    cursor: pointer 
}

.fa-video
{
    font-size: 1.3rem;
    /*color: var(--colorLink);*/
    color: #00a3cc;
    cursor: pointer;
    margin-right: 4px;
}

.fa-image
{
    font-size: 1.7rem;
    /*color: #0083F5;*/
    color: var(--colorLink);
    cursor: pointer;
}

.fa-times
{
    color: var(--colorLink);
    font-size: 2rem;
}

.scoreTeam .fa-window-close
{
    color: var(--colorLink);
    font-size: 2rem;
    cursor: pointer;
}

.videoPlayer .fa-window-close
{    
    position: absolute;
    top: 0px;
    left: 0px;
}

.videoPlayer 
{
    margin: 30px 30px 0px 30px;
    position: relative;
}
.videoPlayer iframe
{
    padding-bottom: 20px;
}

.videoTitle
{
    color: yellow;
    background-color: rgba(0,0,0,.3);
    z-index: 100;
    position: absolute;
    text-align: center;
}

.videoTitle.focus
{
    border: 2px solid red;
}

.videoSpot
{
    /*https://stackoverflow.com/questions/53507529/spotlight-element-with-css  */
  background: radial-gradient(circle at 65px calc(100% - 65px), transparent 60px, rgba(0, 0, 0, 0.5) 65px);
  height: 100%;
  pointer-events: none;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 100000000;
  bottom: 0px;
}

.mapBar
{
    display: inline-flex;
}

.mapBar .fas
{
    padding: 0px 4px;
}

.routeMap {
    position: absolute; 
    top:50px; 
    left:0px; 
    width: 100vw;
    height: calc(100vh - 50px);
    overflow: hidden;
    z-index: -1;
}

.deadline
{
    font-style: italic;
    color: yellow;
}

.tabTeams,
{
    margin-top: 4px;
    color: var(--colorLink) !important;
}

.scorePreview
{
    position: absolute;
    border: 1px solid #888;
    z-index: 100;
}

.highlight td,
.highlight span
{
    color: yellow !important;
}

/*
.scoreTeam th
{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: var(--background);
  color: var(--foreground);
  z-index: 7;
}

.scoreTeam th:nth-child(1),
.scoreTeam td:nth-child(1)
{
  position: -webkit-sticky;
  position: sticky;
  left: 0px;
  z-index-5;
}

.scoreTeam th:nth-child(1)
{
  background-color: var(--background);
}
*/
.scoreTeam:not([data-disc="overall"]) th[data-disc],
.scoreTeam:not([data-disc="overall"]) td[data-disc]	      
{
    display: none;
}

.scoreTeam[data-disc="overall"] th[data-cat]
{
    display: none;
}

.warning
{
    font-size: 2rem;
    font-weight: bold;
    color: yellow;
}

.timer
{
    position: fixed;
    right: 5px;
    bottom: 0px;
    border: 0px;
}

.fa-ellipsis-v
{
    cursor: pointer;
    padding: 5px;
    color: var(--colorActive)
}

.sysmenu
{
    position: absolute;
    top: 40px;
    right: 5px;
    display: inline-block;
    border: 2px solid #888;
    border-radius: 5px;
    z-index: 15;
}

.sysmenu a {
    display: flex;
    padding: 6px 6px;
    text-decoration: none;
    cursor: pointer;
    z-index: 16;
    color: black;
    background-color: white;
}

.sysmenu .fas
{
    margin-right: 8px;
}

.sysmenu .fas
{
    margin-right: 8px;
}

td.fakezero
{
    font-size: .9rem;
    font-style: italic;
}

.category
{
    padding-top:10px;
}

.filters.category a
{
    margin-right: 0px;
}

.appeals
{
    color: red;
    margin: 2px;
}

.deadlines
{
    color: yellow;
    margin: 2px;
}

.scoreLeadTR.onelead th[data-key="pts"],
.scoreLeadTR.onelead td[data-val="pts"]
{
    display: none;
}

/* status indicators */
.red
{
    color: #F00;
}

.green
{
    color: #0F0;
}

.yellow
{
    color: #FF0;
}

.blue
{
    color: #08f;
}

.AR
{
    color: red;
}

.category tr:nth-child(2) td,
.category tr:nth-child(3) td
{
    font-size: .85rem;
    text-align: center;
}

.category .fa-check
{
    transform: scale(.6,1.5);
}

.category .fa-check.double2
{
    transform: scale(.6,1.5) translate(-7px,0px);
}

.isoView
{
    position: absolute;
    background-color:white;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 9;
}    

.scoreInvites th
{
    text-align: left;
}

.scoreInvites td:nth-child(1)
{
    text-align: center;
}

.scoreInvites th[data-key='name'],
.scoreInvites td[data-key='name']
{
    left: 75px;
}

.scoreInvites th:last-child,
.scoreInvites td:last-child
{
    padding-right: 20px;
}

.scoreInvites .fa-check
{
    color: #00FF00;
}

.scoreInvites a
{
    color: var(--colorLink);
}

.busy
{
    font-size: 3rem;
}

sub
{
    font-style: italic;
}

.QO
{
    color: var(--colorLink);
    cursor: pointer;
}

tbody:not(.active) .QO
{
    display: none;
}

.isLink
{
    color: var(--colorLink) !important;
}

.footnotes
{
    position: fixed;
    left: 5px;
    bottom: 0px;
    padding: 5px;
    min-width: 100vw;
    background-color: var(--background);
    font-size: .8rem;
}

.footnote
{
    padding: 5px;
}

.tooltip
{
    color: var(--colorLink);
    cursor: pointer;
    font-size: .8rem;
}

.skTooltip p
{ 
    text-indent: 4rem; 
}

.skTooltip
{
    position: absolute;
    max-width: 600px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: var(--background);
    padding: 10px;
    z-index: 20;
}

/* hack to print brackets */
@media print {
    /*
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari *
    color-adjust: exact !important;  /*Firefox*
}
*/
body.dark {
    background-color: white !important;
    color: black !important;
}
a.active {
    color: black !important;
}

.bracket {
    background-color: white !imporant;
    color: black !important;
}


}

#btnSysMenu,
#btnNotify
{
    cursor: pointer;
    font-size: 1.3rem;
    padding: 5px 5px 0px 5px;
}

/* rank math equation */
td[data-key='rankMath'] span
{
    display: inline-block;
}

td[data-key='rankMath'] hr
{
    width: calc(100% - .9em);
    margin-left: 1.4em;
    margin-top: -1.4em;
    border-color: white;
    border-width: .5px;
}

td[data-key='rankMath'] .nroot
{
    font-size: .7em;
    display: inline-block;
    transform: translate(-.8em, -.9em);
}

.scoreTable21.hide-math th[data-key="rankMath"],
.scoreTable21.hide-math td[data-key="rankMath"]
{
    display: none;
}

body.hide-notify .fa-bell
{
    display: none;
}

body.hide-ondeck .od
{
    display: none;
}

.scoreTable21 tbody.hideQueues th .od,
.scoreTable21 tbody.hideQueues td .od
{
    display: none;
}

tr .od
{
    font-size: .8rem;
    font-style: italic;
    color: #00DD00;
}

.scoreLeadTR th a
{
    color: var(--colorLink);
}

.scoreLeadTR .fa-caret-left,
.scoreLeadTR .fa-caret-right,
.scoreLeadTR .fa-sort,
.scoreLeadTR .fa-sort-down,
.scoreLeadTR .fa-sort-up
{
    color: var(--colorLink);
}

/* OnDeck and notify */
.notifyMenu
{
    position: absolute;
    top: 40px;
    right: 5px;
    display: inline-block;
    border: 2px solid #888;
    border-radius: 5px;
    z-index: 15;
    background: #001A37; /*#004080;*/
}

.notifyMenu .header
{
    display: flex;
    justify-content: space-between;
}

.notifyMenu .header .fas,
.notifyMenu .header .far
{
    margin: 6px;
    font-size: 1.2rem;
    cursor: pointer;
}

.notifyMenu .settings
{
    margin: 8px;
    border: 1px solid gray;
    border-radius: 5px;
}

.notifyMenu .settings div
{
    padding: 3px 3px;
}

.notifyTable
{
    white-space: nowrap;
    max-width: 250px;
    border-collapse: collapse;
    cursor: pointer;
    margin: 8px;
}

.notifyTable tr:nth-child(odd) td
{
    background-color: var(--tr-odd); 
}

.notifyTable tr:nth-child(even) td
{
    background-color: var(--tr-even);
}

.notifyTable th
{
    white-space: normal;
    text-align: left;
    background-color: var(--tr-odd);
    padding: 5px;
}

.notifyTable td
{
    padding-right: 10px;
}
 
.notifyMenu .fas.enabled
{
    color: #00ff00;
    font-size: 2rem;
}

.notifyTable tr.hover th,
.notifyTable tr.hover td
{
    background: green;
}

.notifyMenu .fa-trash-alt.hover
{
    color: #ff0000;
    font-size: 2rem;
}

.notifyTable .fa-bell,
.scoreTable21 .fa-bell:not(.disabled)
{
    color: green;
}

.fa-bell.ring
{
    animation-name: ring;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    color: #00FF00 !important;
}

.fa-bell
{
    cursor: pointer;
}

@keyframes ring
{
    25% {
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
    }
    50% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
    }
    75% {
	-webkit-transform: rotate(20deg);
	transform:rotate(20deg);
    }
    100% {
	-webkit-transform: rotate(0deg);
	transform:rotate(0deg);
    }        
}

.popup
{
    position: absolute;
    max-width: calc(100vw - 50px);
    max-height: calc(100vh - 50px);
    top: 45px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    padding: 5px;
    z-index: 100;
    color: black;
}

.popup .titlebar
{
    background-color: #E8E8E8;
    display: flex;
    cursor: move;
    padding: 4px;
}

.popup .title
{
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
}

.popup .title labelx
{
    width: 200px;
    align-text: center;
}

.popup .title .fas
{
    font-size: 2rem;
    cursor: pointer;
}
    
.popup .content
{
/*    max-width: 800px;*/
/*    max-height: 800px;*/
}

.popup .disabled
{
    color: grey;
}

.popup .logo
{
    position: absolute;
    top: 35px;
    z-index: 1000;
}