#timeline button.btn-light{
	border-color: lightgray;
}

.scrollBtn{
	user-select: none;
	cursor: pointer;
}

.verification-code-digit-input{
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-size: 1.5rem;
  margin-right: 0.25rem;
}

#mapVenue{
	height: 50vh;
}

.display-none{
	display:none;
}

.entry-comment{
    font-style: italic;
    font-weight: bold;
}

#checkinParticipantModal{
	overflow-y: auto;
}

.increase-relay-leg, .decrease-relay-leg{
	cursor: pointer;
	border-radius: .3em;
	text-align: center;
	background-color: cornflowerblue;
}

.increase-relay-leg i, .decrease-relay-leg i{
	padding: .15em;
}


.preserve-linebreaks{
	white-space: pre-wrap;
}

.table-first-column-sticky th:first-child, .table-first-column-sticky td:first-child{
	position:sticky;
	left:0px;
	background-color: ghostwhite;
	vertical-align: middle;
	font-weight: bold;
}

.table-timetable{
	line-height: 1em;
}

table.lock-first-column th:first-child, table.lock-first-column td:first-child {
	z-index: 2;
	box-shadow: inset 1px 0 0 black, inset -1px 0 0 black;
	border-left: none;
	border-right: none;
	padding: 0 0.3em 0 0.3em;
}

table.lock-first-column th:nth-child(2), table.lock-first-column td:nth-child(2) {
	border-left: none;
}

.table-bordered th, .table-bordered td {
	border: 1px solid black;
	text-align: center;
	white-space: nowrap;
	padding: 0 0.1em 0 0.1em;
	font-size: 9pt;
	letter-spacing: -.05em;
}

.table-timetable .scheduleStatus-1{
	text-decoration: line-through;
}


table.lock-first-column th:first-child, table.lock-first-column td:first-child
{
  position:sticky;
  left:0px;
  background-color: white;
}

#tbodyEntries td.class{
	min-width: 5em;
}

#tbodyEntries td.event{
	min-width: 5em;
}

/* Custom color definition */
.btn-info-old-style {
	--bs-btn-color: #fff;
	--bs-btn-bg: #17a2b8;
	--bs-btn-border-color: #17a2b8;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #138496;
	--bs-btn-hover-border-color: #117a8b;
	--bs-btn-focus-shadow-rgb: 159,96,185;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #117a8b;
	--bs-btn-active-border-color: #10707f;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #17a2b8;
	--bs-btn-disabled-border-color: #17a2b8;
}

.btn-group-xs > .btn, .btn-xs, a.btn-xs, button.btn-xs{
	padding: .25rem .4rem;
	font-size: .725rem;
	line-height: 1.5;
	border-radius: .2rem;
}

.wrc{
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
	color: royalblue;
	letter-spacing: -.5px;
	font-stretch: condensed;
	font-size: medium;
	font-weight: bold;
}

tr.entry-disallowed{
	border: 3px solid red;
}

table .badge{
	margin: 1px 2px;
}

.italic{
	font-style: italic;
}

.table-block{
	display: block;
    overflow-x: auto;
}

button.btn-checkout-order{
	margin: .5em 0;
}

.jst-hours{
	display: none;
}

h5.timer{
	display: inline-block;
}

.inactive{
	opacity: 0.5;
}

.imgLogo{
	width:auto;
	max-width: 100%;
	max-height: 30em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#msg-good, #msg-info, #msg-warning #msg-bad{
	text-align:center;
}
#msg-good{
	background:#e9ffd9 no-repeat 10px 50%;
	border:1px solid #a6ca8a;
}
#msg-info, #msg-warning{
	background:#e3f7fc no-repeat 10px 50%;
	border:1px solid #8ed9f6;
	font-size:.8em;
	padding:5px;
	margin:5px;
}
#msg-bad{
	background: #ffecec no-repeat 10px 50%;
	border: 1px solid #f5aca6;
	font-size:1em;
	padding:10px;
	margin:10px;
}
#msg-warning, #msg-bad{
	z-index: 20;
	color:#555;
	border-radius:10px;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	left: 50%;
}
#msg-good, #msg-info{
	z-index: 10;
	color:#555;
	font-weight:bold;	
	border-radius:10px;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:0.8em;
	padding:10px;
	margin:10px;
	position:fixed;
	left: 50%;
	transform: translateX(-50%);
	
	/*Hide messages after 5 seconds*/
	-moz-animation: cssAnimation 2s ease-in 5s forwards;
	/* Firefox */
	-webkit-animation: cssAnimation 2s ease-in 5s forwards;
	/* Safari and Chrome */
	-o-animation: cssAnimation 2s ease-in 5s forwards;
	/* Opera */
	animation: cssAnimation 2s ease-in 5s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@keyframes cssAnimation {
	0%{opacity: 1; visibility: visible;}
	100%{opacity: 0; visibility: hidden;}
}

@-webkit-keyframes cssAnimation {
	0%{opacity: 1; visibility: visible;}
	100%{opacity: 0; visibility: hidden;}
}

#participantEvents div.alert-info{
	border: grey solid 1px;
	border-radius: .5em;
	padding: .5em;
}

.points-wrapper{
	align-self: flex-start;
}

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

.text-align-left{
	text-align: right;
}


.table-startlist td, .table-startlist th{
	padding: 0 .5em;
}

button.checkedIn-btn{
	vertical-align: top;
	margin-left: 1em;
}

.check-in-input-SbPb{
	width: 5.5em;
	background-color: lavender;
	border: thin groove lavender;
}

.check-in-input-eventInCE-SbPb{
	width: 4em;
	background-color: lavender;
	border: thin groove lavender;
}

.table-eventInCE-SBPB th, .table-eventInCE-SBPB td{
	padding: .45rem;
}

.signature-pad{
	border-bottom: black solid thin;
}

#clublist{
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

#table-drag-and-drop{
	width: max-content;
	border-collapse: collapse;
}

#table-drag-and-drop tr{
	height: 1.35em;
}

#table-drag-and-drop th{
	padding: 0.1em;
}

#table-drag-and-drop td{
	padding: 0;
	text-align: center;
}

.competition.h5{
	margin-bottom: 0;
}

.nobr{
	white-space:nowrap;
}

.tfix{
	position: fixed;
}

.btn{
	margin: 0.1rem;
}

.sticky{
	position: -webkit-sticky;
	position: sticky;
}

/* The cookies message box */
.cookies {
    padding: 5px;
	text-align: center;
	font-size: 12px;
    background-color: #e9ecef; /* Grey */
    color: black;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    color: black;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.5s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: white;
}

#popup-eic-overview-popup{
	max-width: 90%!important;
	overflow-x: scroll;
}

#changelog-popup{
	max-width: 80%!important;
	max-height: 50%!important;
	overflow-y: scroll;
}

.ui-field-contain>label~[class*=ui-]{
	margin: .5em 0;
}

.table-bordered td, .table-bordered th{
	border:1px solid #ddd;
	text-align: center;
	white-space: nowrap;
}

.table-timetable-by-club td, .table-timetable-by-club th{
	border:1px solid #938e8e;
	text-align: start;
	font-size: small;
	padding: 0 .5em;
}

.color-positive{
	background-color: lightgreen!important;
}

.ui-table{
	overflow: auto;
}

.warningText{
	color: red;
	font-weight: thick;
}

.roundDone{
	font-size:12pt;
	font-weight:bold;
	text-align:center;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	background:#e3f7fc no-repeat 10px 50%;
	border:1px solid #8ed9f6;
	z-index: 10;
	color:#555;
	border-radius:10px;
	padding:0.2em;
	margin:0.1em;
	left: 50%;
}

div.ui-page{
	overflow-x: visible!important;
}

label.result-label{
	width: 15%;
	margin: .2em .2em .1em .1em;
}

/*Tooltip button*/
.ui-btn.my-tooltip-btn,
.ui-btn.my-tooltip-btn:hover,
.ui-btn.my-tooltip-btn:active {
	background: none!important;
	border: 0;
	margin: 0;
	padding:0;
}

/* Overview heading */
.sticky {
  position: fixed;
  top: 2.4em;
  width: 100%;
  z-index: 20;
}

/* Common editing */
.pull-right{float:right!important;}
.pull-left{float:left!important;}
.transparent{color: transparent!important;}
.strong{font-weight: bold!important;}
.vAlignMiddle{vertical-align: middle!important;}
.inline {display: inline !important;}
.pull-down{vertical-align:bottom !important;}
.p{
	font-weight: 300!important;
	font-size:10pt!important;
}
.small{
	font-weight: 300!important;
	font-size:8pt!important;
}

.fs-start-coordinator div .ui-radio .ui-first-child.ui-radio-on {
	background: green !important;
}

.fs-start-coordinator div .ui-radio .ui-last-child.ui-radio-on {
	background: red !important;
}

/*Table day-programme*/
#table-day-programme th, #table-day-programme td p{
	text-align: center;
	vertical-align: middle;
}

#table-day-programme td {
	overflow: hidden;
	white-space: nowrap;
}
#table-day-programme th, #table-day-programme td{
	border: 1px solid #ddd;
}

#table-day-programme td:hover {background-color: #ddd!important;}

/*Make an inputfield inline*/
.controlgroup-textinput{
	padding-top:.22em;
	padding-bottom:.22em;
}

.tableLiveResult .result{max-width:4em;}
.tableLiveResult td{padding: 0.3em;}

#participant-listbox ul li.ui-last-child a{
	border-width: 1px;
	border-color: #ddd;
	color: #38c;
	border-radius: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#club-listbox-popup ul li a.ui-btn, #participant-listbox-popup ul li a.ui-btn{
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

#tableOverview td:nth-child(1),#tableOverview th:nth-child(1) {display: none}

/* Custom indentations for flipswitch */
.flipswitch-participant-sex.ui-flipswitch .ui-btn.ui-flipswitch-on {text-indent: -3.7em;}
.flipswitch-participant-sex.ui-flipswitch .ui-flipswitch-off {text-indent: 1.0em;}

.flipswitch-participant-sex{margin: 0;}

/*Size of content*/
[data-role="content"] {
	overflow: visible;
}

/* The alert message box */
.alert{
	padding: 10px;
/*	background-color: #f44336; /* Red */
/*	color: white; */
	margin-bottom: 15px;
	transition: linear 0.3s;
}

/* Hidden elements (this allows for transitions, "display:none" does not) */
.hidden{
	height:0!important;
	padding:0!important;
	visibility:hidden!important;
	transition: linear 0.2s;
}

td.checked-in-online .badge{
	padding-left: .5em;
	padding-right: .5em;
}

.nl{display: none;}

td.checked-in-online, th.checked-in-online{
	text-align: center;
	vertical-align: middle;
}

/*Buttons in edit-eic*/
.ui-field-contain .ui-controlgroup-controls{width:100%;}

/* Setting minimum size of part result popups to make them not appear to un-centered on screen */
.popupPartResult{
	min-width:200px;
	min-height:500px;
}

#popupHeights{
	min-width:300px;	
}

/* Invalid field */
input.invalid{
	background-color: #f44336; /* Red */
	text-shadow:none;
}

/* stack all grids below 30em */
@media all and (max-width: 25em) {
	.ui-block-a,
	.ui-block-b,
	.ui-block-c,
	.ui-block-d,
	.ui-block-e {
		width: 100%;
		float: none;
	}
}

@media all and (max-width: 25em) {
	.ui-grid-a .width-20{width:20%;}
	.ui-grid-a .width-80{width:80%;}
	.ui-block-a,
	.ui-block-b,
	.ui-block-c,
	.ui-block-d,
	.ui-block-e {
		width: 100%;
		float: none;
		}
}

/*I.e. heat comment*/
.ui-field-contain{
	margin-top: 0;
	margin-bottom: 0;
}

 /*For filterable select popup*/
.ui-selectmenu.ui-popup .ui-input-search {
	margin-left: .5em;
	margin-right: .5em;
}
.ui-selectmenu.ui-dialog .ui-content {
	padding-top: 0;
}
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
	margin-top: 0;
}
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
	border-top-width: 1px;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
	border-bottom-width: 1px;
}
.ui-selectmenu.ui-popup{
	max-height: 70vh;
	overflow:auto;
}

.ui-content{padding-top:0.1em}

/*Decrease margins and padding for small screens*/
@media (max-width: 800px){
	.ui-content{padding:0.1em}
	
	/*Left side menu*/
	.ui-panel .ui-panel-inner{padding:0.1em;}
	
	/*Margins and padding in tables*/
	.ui-table tbody tr p,.ui-table tbody tr .ui-checkbox,.ui-content p{margin-left:0.1em;margin-right:0.1em;}
	.ui-table tbody tr td{padding-left:0.1em;padding-right:0.1em;}	
	.ui-table tbody tr .ui-btn-icon-right{padding-left:0.1em;padding-right:1.5em;}
	.ui-btn-icon-right:after{right:0.1em;}
	.ui-table tbody tr .ui-btn-icon-left{padding-left:1.5em;padding-right:0.1em;}
	.ui-btn-icon-left:after{left:0.1em;}
}

/*Add horizontal scroll*/
.ui-content{overflow-x:auto;}

/*Header and footer when printing*/
div.header, div.footer {font-size:15px; text-align:center;}

@page {size: A4; margin: 11mm 17mm 17mm 17mm;}

@media print {
  div.leftHeader {position:fixed; top:0; left:0;}
  div.centerHeader {position:fixed; top:0; width:100%; text-align:center;}
  div.rightHeader {position: fixed; top: 0; right: 0;}
  div.leftFooter {position: fixed; bottom: 0; left: 0;}
  div.centerFooter {position: fixed; bottom: 0; width:100%; text-align:center;}
  div.rightFooter {position: fixed; bottom: 0; right: 0;}
  .ui-content, p { page-break-inside: avoid;}
  html, body {width: 210mm; height: 297mm;}
}

/*Decrease size of header*/
.ui-header .ui-title{padding-top:0.5em; padding-bottom:0.5em;}
.header-buttons{top:0.01em;}

.header-buttons > div {display:flex!important;}

.role-text{
	margin: auto;
	margin-left: 1.5em;
	font-weight: normal;
}

/*Hidden table cells*/
th.ui-table-cell-hidden,td.ui-table-cell-hidden{display: none;}

/*Left side menu*/
.ui-panel .ui-panel-inner h3{margin-top:0.0em;margin-bottom:0.2em;}
.ui-collapsible .ui-collapsible-heading .ui-collapsible-heading-toggle{padding-top:0.3em;padding-bottom:0.3em;	}

#popupSeeding-popup{
	left: 10% !important;
	top: 10% !important;
	right: auto !important;
	bottom: auto!important;
	max-width: 80%;
	max-height:80%;
	overflow: auto;
}

/*General classes*/
.width-10-percent{width:10% !important;}
.width-20-percent{width:20% !important;}
.width-30-percent{width:30% !important;}
.width-40-percent{width:40% !important;}
.width-50-percent{width:50% !important;}
.width-60-percent{width:60% !important;}
.width-70-percent{width:70% !important;}
.width-80-percent{width:80% !important;}
.width-90-percent{width:90% !important;}

.inherit-bg-color{background-color: inherit !important;}

/*Margins and padding in tables*/
.ui-table tbody tr p,.ui-table tbody tr .ui-checkbox,.ui-content p{margin-top:0.2em;margin-bottom:0.2em;}
.ui-table tbody tr td{
	padding-top:0.05em;
	padding-bottom:0.05em;
	vertical-align:middle;	
}
.ui-table tbody tr .ui-btn-icon-right,.ui-table tbody tr .ui-btn-icon-left{
	padding-top:0.35em;
	padding-bottom:0.35em;
	vertical-align:middle;
}
.ui-table tbody tr .ui-input-text input, table tbody tr .ui-input-text input{min-height:1.2em;padding-top:0.1em;padding-bottom:0.1em;}



/*Division of heats*/
table tbody tr td .ui-select,table tbody tr td .ui-input-text,table tbody tr a[class^=delete]{
	margin-top:0.0em;
	margin-bottom:0.0em;
}
table tr td .ui-select div[id^=select]{padding-top:0.4em;padding-bottom:0.4em;}

/*Heading*/
h3.ui-bar{margin-top:0.1em;margin-bottom:0.1em;padding-top:0.3em;padding-bottom:0.3em;}

/*Adds center alignment*/
.center-button{text-align: center;}

/*Drop down lists*/
.ui-btn-icon-right{padding-top:0.3em;padding-bottom:0.3em;vertical-align:middle;}

/*Buttons*/
.ui-input-btn,.ui-btn-inline, .ui-btn-inherit{margin-top:0.2em;margin-bottom:0.2em;padding-top:0.4em;padding-bottom:0.4em;}

/*Sortable tablecolumns*/
.sortableTableCol {cursor: pointer;cursor: hand;}

/*Overview page*/
table tbody tr[class^=tr-round-status]{text-shadow:none;}

/*Gradient in status-column*/
table tbody tr[class^=tr-round-status] td:last-child {  
  background-image:linear-gradient(to right,  rgba(114,242,28,1) 0%, rgba(192,250,187,0.95) 100%);
  background-repeat: no-repeat;
}
table tbody .tr-round-status-0 td:last-child{
/*	background-color:#92a8d1; */
	background-size: 5% 100%;
}
table tbody .tr-round-status-5 td:last-child{
/*	background-color:#d5e1df; */
	background-size: 10% 100%;
}
table tbody .tr-round-status-10 td:last-child{
/*	background-color:#d6cbd3; */
	background-size: 30% 100%;
}
table tbody .tr-round-status-15 td:last-child{
/*	background-color:#d6cbd3; */
	background-size: 40% 100%;
}
table tbody .tr-round-status-20 td:last-child{
/*	background-color:#bdcebe; */
	background-size: 50% 100%;
}
table tbody .tr-round-status-25 td:last-child{
/*	background-color:#e3eaa7; */
	background-size: 70% 100%;
}
table tbody .tr-round-status-30 td:last-child{
/*	background-color:#b5e7a0; */
	background-size: 90% 100%;
}
/*Protest/review*/
table tbody .tr-round-status-35 td:last-child{
	background-color:#FFCC00;
	background-size: 0% 100%;
}
table tbody .tr-round-status-40 td:last-child{
	background-color:#72F21C;
	background-size: 0% 100%;
}
table tbody .tr-round-status--1 td:last-child{
/*	background-color:#c1946a; */
	background-size: 0% 100%;
}
table tbody .tr-round-status--2 td:last-child{
/*	background-color:#c1946a; */
	background-size: 0% 100%;
}

/*Custom sized flipswitches*/

/* Custom indentations are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
	text-indent: -5.9em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
	text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
	width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
	padding-left: 7em;
	width: 1.875em;
}
@media (min-width: 28em) {
    /*Repeated from rule .ui-flipswitch above*/
    .ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
		width: 1.875em;
    }
}

.ui-state-error{
	border:1px solid #cd0a0a;
	background:#fef1ec url("images/ui-bg_glass_error.png") 50% 50% repeat-x;
	color:#cd0a0a
}

/* ===== Index page improvements ===== */

/* Hero jumbotron */
.index-hero {
	background: url('/img/track.jpg') center/cover no-repeat;
	position: relative;
	min-height: 140px;
}
.index-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(15,8,4,0.50) 100%);
}
.index-hero-text {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	padding-bottom: 0.75rem;
}
.index-hero-title {
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: rgba(255,248,238,0.95);
	text-shadow: 0 1px 3px rgba(0,0,0,0.30);
	margin-bottom: 0.15rem;
}
.index-hero-tagline {
	font-size: 0.875rem;
	font-weight: 400;
	color: rgba(255,248,238,0.72);
	text-shadow: 0 1px 3px rgba(0,0,0,0.30);
	margin: 0;
}

/* Stadia track icon */
.stadia-icon {
	height: 1em;
	width: auto;
	vertical-align: -0.125em;
}

/* WRC logo inline */
.wrc-logo-img {
	max-height: 22px;
	width: auto;
	vertical-align: middle;
}

/* Sticky filter/tab bar */
#sticky-controls {
	z-index: 1020;
}

/* Horizontally scrollable filter bar — no visible scrollbar, swipeable on mobile */
.filter-bar-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.filter-bar-scroll::-webkit-scrollbar {
	display: none;
}

#competition-search {
	width: 120px;
}

/* On small screens: date and type badge on the same line; smaller competition name */
@media (max-width: 767px) {
	.competition-wrapper .col-md-2 {
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
		flex-wrap: wrap;
	}
	.competition-wrapper .col-md-2 .mt-1 {
		margin-top: 0 !important;
	}
	.competition-wrapper .col-md-4.h5 {
		font-size: 0.95rem;
	}
}

/* Section header styling */
.competition-section h2,
.competition-section h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #495057;
	padding-bottom: 0.3rem;
	margin-bottom: 0.4rem;
	border-bottom: 1px solid #dee2e6;
}

/* Competition row hover effect */
.competition-wrapper {
	transition: background-color 0.15s ease;
}
.competition-wrapper:hover {
	background-color: #f0f4ff !important;
}

/* Section-based left border accent */
.section-today .competition-wrapper  { border-left: 4px solid #198754; }
.section-active .competition-wrapper { border-left: 4px solid #0d6efd; }
.section-results .competition-wrapper { border-left: 4px solid #6c757d; }
.section-live .competition-wrapper   { border-left: 4px solid #dc3545; }

/* Live now section background */
.section-live {
	background-color: #fff5f5;
	border-top: 2px solid #dc3545;
	border-bottom: 1px solid #f5c6cb;
}

/* Pulsing live indicator */
@keyframes live-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.3; }
}
.live-pulse {
	animation: live-pulse 1.4s ease-in-out infinite;
}

/* WRC gold badge */
.wrc-badge {
	background-color: #d4af37;
	color: #000;
	font-size: 0.65em;
	vertical-align: middle;
}

/* Bootstrap 5 lacks btn-xs — define it explicitly */
.btn-xs {
	padding: 0.1rem 0.4rem;
	font-size: 0.75rem;
	line-height: 1.4;
	border-radius: 0.2rem;
}

/* Competition type badges */
.comp-type-track { background-color: #0d6efd; color: #fff; font-size: 0.7em; }
.comp-type-road  { background-color: #198754; color: #fff; font-size: 0.7em; }
.comp-type-cross { background-color: #6f42c1; color: #fff; font-size: 0.7em; }
.comp-type-trail { background-color: #6d4c41; color: #fff; font-size: 0.7em; }
.comp-type-ocr   { background-color: #fd7e14; color: #fff; font-size: 0.7em; }
.comp-type-walk  { background-color: #0ac28c; color: #fff; font-size: 0.7em; }