body { padding: 1px; }
.datablock {
	padding: 10px;
}

.block {
	border:1px solid #cccccc; border-radius: 6px;
	margin:10px 6px 10px 6px;
	padding:20px 12px 20px 12px;
}
.centered { text-align: center; }
h3 { padding: 6px; margin:4px; text-align: center; }
ul { list-style-type: none; }
a {color: #545488; cursor:pointer; }
.smaller { font-size: 16px; }

.eventinfo { cursor: pointer; padding: 4px; }
.eventinfo:focus { text-decoration: underline; outline: none; } 

.fixpanel {
	z-index: 1;
	background-color: white;
	text-align: center;
	vertical-align: middle;
	height:36px;
	width:100%;
	position: fixed;
	display: table;
	left: 0px;
}

#trackName {
	display: block;
	white-space: nowrap;
	width: 364px;
	overflow: hidden;
	position: absolute;
	left: 36px;
	top: 0px;
	text-align: left;
	font-weight: bold;
	float: left
}

.fixpanel2 {
	text-align: center;
	vertical-align: middle;
	line-height: 36px;
	position: relative;
}

.pageMsg {
	font-size:14px;
	text-align:center;
}

.eventAdminLabel {
	position:fixed;
	bottom:3px;
	left:3px;
	z-index:100;
	background-color:red;
	color:white;
}

.inverted {
	background-color:black;color:white;
	padding-left:4px;
	padding-right:4px;
}

.subtitle { padding-left:36px;margin-top:-7px;padding-bottom:4px;font-size:14px;font-weight:bold;background-color:white; } 
.record { width: 100%; border-bottom: 1px solid #cccccc; table-layout: fixed; position:relative; font:12px sans-serif; cursor:pointer; }
.highlighted {
	background-color: #ffff64;
	transition: all 2s ease;
}
.nohighlighted {
	background-color: transparent;
	transition: all 4s ease;
}
.record div {
	overflow:hidden;
}

.estimation {
	background-color:#aaffff;
	color: blue;
}

.tracelistmsg { padding-top: 32px; font-size: 16px; font-style: italic;text-align:center; }

.record .centerCell { font-size:14px; overflow:hidden; white-space:nowrap; width: 100%; }
.record .traceIdCell { width: 44px; text-align:center; font-size:14px; display:inline-block;}
.rightDiv { position:absolute;right:2px;top:2px;font-size:12px;text-align:right; }
.rdi1 { display:inline-block;width:28px;background-color:black;color:white;text-align:center;margin-left:5px; }
.rdi2 { display:inline-block;width:80px;background-color:#aaffff;text-align:right;margin-left:0px; }
.stopper { width:12px;height:14px;position:relative;top:1px; }

.cpstat {
	font:12px sans-serif;
	text-align: center;
	margin-bottom: 20px;
}
.cpstat .row1 .colA { font-weight:bold; font-size:16px;}
.cpstat .row2 { font-size:16px;}
table.cpstats,table.txptable {
	margin: auto;
	width: 90%;
	margin-top: 7px;
	margin-bottom: 7px;
	border: 1px solid #cccccc;
	border-radius: 6px;
}

.phantom {
	color: red;
	font-weight: bold;
}
.cpstats th,.txptable th {
	background-color: #eeeeee;
}
.cpstats td, .txptable td {
	text-align: center;
	padding: 3px;
	border-bottom: 1px solid #eeeeee;
}
table.cpstats tr.footer, table.cpstats tr.footer th, table.cpstats tr.footer td {
	font-weight: bold;
	background-color: #eeeeee;
	border-bottom: 1px solid #cccccc;
}

.headicon2 { cursor:pointer; float:left; height:16px; padding:10px; }
.container { display:flex;flex-flow:row;align-content:stretch;justify-content:space-around }
.container .centerPanel {flex:1;flex-basis:300px;max-width:400px;}

.colContainer { font-size:0px; }
.bold { font-weight:bold; }

#searchDiv { display:flex; }
#searchDiv input:focus {outline: none; }
#searchDiv span:focus-within { outline: 1px auto; outline-offset: 4px; outline-color: black; }
.fas { color: #777777; }
.pure-button .fas { color: white; }
.flexer { display: flex; }

.fixedheader { width:100%;flex: 1;flex-basis: 300px;max-width: 400px; position:fixed;top:36px;z-index:1; }

.trace.record.header { width:100%;background-color: #eeeeee; cursor:default; }
.trace.record.header .colCD { padding-left: 8px; }
.trace.record.header .colC { flex: 0 0 10px; }
.trace.record .extColumn { display:inline-block;padding-left:5px;overflow:clip; }


.trace .colContainer { display:flex; }
.trace .colB { flex: 0 0 30px;text-align:center;font-size:12px;order:1;white-space:nowrap; } /* rank */
.trace .colC { flex: 0 0 70px;font-size:12px;order:2; } /* category */
.trace .colCD { font-size:12px;white-space:nowrap;overflow:hidden;flex: 1 1 100px;order:2;} /* name */
.trace .colE { flex: 0 0 30px;text-align:center;font-size:12px;font-style:italic;float:right;order:3; } /* traceId */
.trace .colE2 { flex: 1 0 1px;order:4;font-size:12px;padding-left:5px; } /* placeHolder */
.trace .colD { font-size:12px;white-space:nowrap;overflow:hidden;padding-left:4px;padding-right:4px;order:3; } /* distTitle */ 
.trace .colF { flex: 0 0 110px;text-align:right;font-size:12px;float:right;order:5; } /* raceTimeStr/status, time */

.tracedetails.header { width:100%;margin-bottom:4px;font:16px sans-serif;background-color: #eeeeee; }
.tracedetails.header .fieldname { display:inline-block;min-width:140px;padding:1px;padding-inline-end:8px; } 

.cphit { cursor:auto; } 
.cphit.record .row1 .colA { padding-left:2px;}
.cphit.record .row2 .colA { padding-left:20px; }
.cphit.record .colB { width:38px;float:right;text-align:right;padding: 0px 2px 0px 1px; }
.cphit.record .colC { width:58px;float:right;text-align:right;padding: 0px 2px 0px 1px; }
.cphit.record .colD { width:66px;float:right;text-align:right;padding: 0px 2px 0px 1px; }
.cphit.record .row1 .colD { font-weight:bold; }
.cphit.record.header .colB { width:78px; }
.cphit.record .normalRow { line-height:28px }
.cphit.record .normalCol { width:90px;display:inline-block;text-align:right }
.cphit.record.header .normalRow { line-height:18px; }

.sectionInfo { color: #777777; }
.hiddenCP { color: #999999; }

.eventDetails { padding:2px;text-align: center; }
input[type=radio] { margin: 6px 0px 6px 0px; white-space:nowrap; }
.rblablel { margin-right: 10px; margin-left:4px; }
.radiobutton1 { white-space:nowrap; } 

.button-success:focus { outline: 1px auto; outline-offset: 0px; outline-color: black; }
.button-secondary:focus { outline: 1px auto; outline-offset: 0px; outline-color: black; }
.button-success, .button-error, .button-warning, .button-secondary {
	color: white;
	border-radius: 6px;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.button-success { background: rgb(136, 172, 46); }
.button-error { background: rgb(202, 60, 60); }
.button-warning { background: rgb(223, 117, 20); }
.button-secondary { background: rgb(66, 184, 221); }

.chipcontrol {
	font-size: 34px;
	text-align:center;
}

.admblock {
	padding: 3px;
	margin: 3px;
	border: 1px solid #dddddd;
}

.admfield {
	padding: 3px;
}

.admlabel {
	display:inline-block;width:90px;margin:5px;font-weight: bold;
}

.admvalue {
	display:inline-block;width:230px;
}

.txpinput {
	border:1px solid #cccccc;
	border-radius:6px;
	padding:6px 8px 6px 8px;
	box-sizing: border-box;
	background-color: white; /* needed for mobile, otherwise it's grey */
}

.datatable td {
	padding: 3px;
}

/* Progress Bar https://codepen.io/holdencreative/pen/vEVbwv */
.progress {
	position: relative;
	height: 2px;
	display: block;
	width: 100%;
	background-color: #acece6;
	background-clip: padding-box;
	margin: 0;
	overflow: hidden;
}

.progress .basic {
	background-color: #26a69a;	
}

.progress .determinate {
	  position: absolute;
	  background-color: inherit;
	  top: 0;
	  bottom: 0;
	  background-color: #26a69a;
	  transition: width .3s linear;
}

.progress .indeterminate { background-color: #26a69a; }
.progress .indeterminate:before {
		content: '';
		position: absolute;
		background-color: inherit;
		top: 0;
		left: 0;
		bottom: 0;
		will-change: left, right;
		-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
				animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
 .progress .indeterminate:after {
		content: '';
		position: absolute;
		background-color: inherit;
		top: 0;
		left: 0;
		bottom: 0;
		will-change: left, right;
		-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
				animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
		-webkit-animation-delay: 1.15s;
				animation-delay: 1.15s;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	z-index: 1000; /* Make it appear on top */
  }

.modal {
	z-index:1001;
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 3px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
  
  @-webkit-keyframes indeterminate {
	0% {
	  left: -35%;
	  right: 100%; }
	60% {
	  left: 100%;
	  right: -90%; }
	100% {
	  left: 100%;
	  right: -90%; } }
  @keyframes indeterminate {
	0% {
	  left: -35%;
	  right: 100%; }
	60% {
	  left: 100%;
	  right: -90%; }
	100% {
	  left: 100%;
	  right: -90%; } }
  @-webkit-keyframes indeterminate-short {
	0% {
	  left: -200%;
	  right: 100%; }
	60% {
	  left: 107%;
	  right: -8%; }
	100% {
	  left: 107%;
	  right: -8%; } }
  @keyframes indeterminate-short {
	0% {
	  left: -200%;
	  right: 100%; }
	60% {
	  left: 107%;
	  right: -8%; }
	100% {
	  left: 107%;
	  right: -8%; }
}

@media print {
	.fixpanel,.fixedheader {
		position: static !important;
	}
	.podiumForTrack:not(:nth-of-type(1)) {
		break-before: page;
    	page-break-before: always;
	}
	.podiumSection,table {
		page-break-inside: avoid;
		break-inside: avoid;
  	}

}

[v-cloak] { display: none; }