(kein darin), Selektoren daher auf p statt p > span.
========================================================= */
.RRParticipantView .RRBox:has(.RRHTML) {
position: relative;
overflow: hidden;
padding: 26px 30px 28px !important;
background:
radial-gradient(circle at 18% 62%, rgba(246, 33, 33, 0.28), transparent 43%),
radial-gradient(circle at 89% 47%, rgba(246, 33, 33, 0.14), transparent 36%),
#0e0e0e !important;
}
.RRParticipantView .RRBox:has(.RRHTML)::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: rgba(255, 255, 255, 0.14);
}
.RRParticipantView .RRTopBar .Center {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
}
.RRParticipantView .RRTopBar .Center::before {
content: "";
display: block;
width: 130px;
height: 16px;
background-image: url('https://static.datasport.de/bilder/datasport.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.9;
}
.RRParticipantView .RRTopBar .Center {
justify-content: flex-start;
padding-left: 8px;
}
/* Der wirkliche Grid-Container: direktes Eltern-Div von .RRHTML.
.RRFlexBox (leer, display:none) zaehlt bei Grid-Auto-Placement
nicht mit, die zwei sichtbaren Kind-Divs (Name/Verein-Wrapper,
Ergebnis-Wrapper) werden automatisch Spalte 1 und 2. */
.RRParticipantView .RRBox:has(.RRHTML) > div {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(210px, 0.78fr) !important;
gap: 24px !important;
align-items: center !important;
}
.RRParticipantView .RRBox:has(.RRHTML) .RRHTML {
display: block !important;
color: #fff !important;
overflow: visible !important;
}
.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p {
margin: 0 !important;
}
.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p:first-child {
margin-bottom: 7px !important;
font-size: clamp(30px, 5.8vw, 46px) !important;
line-height: 1.02 !important;
text-transform: uppercase;
letter-spacing: -0.02em;
font-weight: 800;
}
.RRParticipantView .RRBox:has(.RRHTML) .RRHTML p:nth-child(2) {
font-size: 16px !important;
line-height: 1.3 !important;
color: rgba(255, 255, 255, 0.72) !important;
}
/* =========================================================
GESAMTZEIT-KARTE + MW-/AK-PLATZ-KARTE
Beides sind eigene .RRResults-Tabellen im 2. Spalten-Div
(Ergebnis-Wrapper). Erste Tabelle = Gesamtzeit (Wert + Label
als zwei Zeilen), zweite (in einem weiteren verschachtelten
Div) = MW-Platz + AK-Platz (je eine Zeile Fliesstext).
========================================================= */
/* Achtung: nth-child(3), NICHT (2) - das unsichtbare .RRFlexBox
(display:none, ungenutzt bei diesem Event) zaehlt bei :nth-child
trotzdem als Kind 1 mit; Kind 2 ist der Name/Verein-Wrapper,
Kind 3 erst der Ergebnis-Wrapper mit der Gesamtzeit-Karte. */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) {
overflow: hidden;
align-self: center;
border: 1px solid rgba(246, 33, 33, .55) !important;
border-radius: 20px;
background: #050505;
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.32),
0 0 25px rgba(246, 33, 33, 0.14);
}
/* Gesamtzeit: grosse Zahl auf rotem Verlauf */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child {
padding: 18px 12px 11px !important;
background: var(--dp-gradient) !important;
color: #fff !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:first-child td {
font-size: clamp(38px, 7vw, 58px) !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: -0.045em;
color: #fff !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:nth-child(2) td {
padding-top: 6px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.88) !important;
}
/* Pace (z.B. "4:04 min/km") - RaceResult liefert diese Zeile ohne
eigene Farbe, faellt daher sonst auf Schwarz zurueck statt das
vom .RRResults geerbte Weiss zu behalten. */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > .RRResults:first-child tr:nth-child(3) td {
padding-top: 2px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.88) !important;
}
/* MW-Platz / AK-Platz: zwei Zeilen Fliesstext darunter */
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div {
background: #050505 !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults {
padding: 11px 10px 13px !important;
color: #fff !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults tr td {
display: block !important;
padding: 3px 0 !important;
color: rgba(255, 255, 255, 0.86) !important;
font-size: 14px !important;
font-weight: 800 !important;
text-align: center !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div > div:nth-child(3) > div .RRResults tr:first-child td {
color: var(--dp-primary-light) !important;
font-size: 15px !important;
}
/* =========================================================
HOCHRECHNUNG / HINWEIS
========================================================= */
.RRParticipantView .RRElements > div:not(.RRBox) .RRText {
padding: 4px 20px !important;
color: rgba(255, 255, 255, 0.4) !important;
background: transparent !important;
font-size: 17px !important;
line-height: 1.4 !important;
text-align: center;
}
/* =========================================================
2. ZWISCHENZEITEN / TIMELINE
Spalten bei diesem Event: Brutto (tdSplitGun), Netto
(tdSplitChip), Abschnitt (tdSplitSector), Geschwindigkeit
(tdSplitSpeed), Gesamt (tdSplitRO). Kein AK-/MW-Platz je Zeile
(die stehen nur oben in der Kopf-Karte), daher andere Grid-
Aufteilung als bei der Staffel:
"name gun"
"speed sector"
"chip rg"
========================================================= */
.RRParticipantView .RRElements > div:has(.RRSplits) {
position: relative;
padding-top: 50px !important;
padding-right: 25px !important;
padding-bottom: 27px !important;
padding-left: 25px !important;
background:
linear-gradient(rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018)),
#0c0c0c !important;
}
/* Fortschrittsbalken ueber der Zwischenzeiten-Liste. Distanz-
unabhaengig: die Fuellbreite wird NICHT aus Kilometern berechnet
(die kennt CSS nicht), sondern aus dem Verhaeltnis "erledigte
Zwischenzeiten-Karten / Gesamtzahl Zwischenzeiten-Karten" fuer
GENAU DIESES Rennen - dynamisch per :has()-Tabelle weiter unten
ermittelt. Funktioniert dadurch automatisch bei jeder Distanz
(Viertel-/Halb-/Dreiviertel-/Marathon), ohne dass die Strecken-
laenge irgendwo hinterlegt werden muss.
top-Position ist zweigeteilt: manche Rennen/Feldkonfigurationen
zeigen ueber der Zwischenzeiten-Liste eine Ueberschrift (.RRBoxHead,
Kreis+Fahnen-Icon), andere (z.B. der Marathon selbst) gar keine -
der Balken haengt sich also selbst per :has(> .RRBoxHead) an die
jeweils passende Position. */
.RRParticipantView .RRElements > div:has(.RRSplits)::before {
content: "";
position: absolute;
left: 25px;
right: 25px;
top: 44px;
height: 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
z-index: 0;
}
.RRParticipantView .RRElements > div:has(.RRSplits)::after {
content: "";
position: absolute;
left: 25px;
top: 44px;
height: 6px;
width: 0%;
border-radius: 4px;
background: var(--dp-gradient);
box-shadow: 0 0 8px rgba(246, 33, 33, 0.5);
z-index: 0;
transition: width 0.5s ease;
}
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead)::before,
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead)::after {
top: 88px;
}
/* Platz vor der ersten Zwischenzeiten-Karte fuer den Balken reservieren -
ohne Ueberschrift direkt per margin-top auf .RRSplits, mit Ueberschrift
uebernimmt das schon deren eigener margin-bottom (siehe .RRBoxHead unten). */
.RRParticipantView .RRSplits {
margin-top: 12px !important;
}
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits {
margin-top: 0 !important;
}
/* Generischer Fallback, der OHNE die :has()-Tabelle unten und damit
fuer JEDE beliebige Anzahl Zwischenzeiten funktioniert: sobald
keine einzige .predicted-Zeile mehr existiert, ist das Ziel
erreicht -> Balken 100% voll, egal wie viele Punkte das Rennen hat. */
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .RRElements > div:has(.RRSplits)::after {
width: calc(100% - 50px) !important;
}
/* Im Ziel (keine .predicted-Zeile mehr uebrig) laeuft niemand mehr -
Jogger verschwindet, nur Start-/Ziel-Fahne bleiben stehen. */
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .RRSplits::before {
display: none !important;
}
/* Start-/Ziel-Icons an den Enden des Balkens + laufendes Läufer-Icon
an der aktuellen Position - ausdrückliche Ausnahme von der
"keine Jogger-Symbole"-Regel, NUR fuer diesen Fortschrittsbalken.
Beide Ebenen sitzen OBERHALB des Balkens (nicht mittig darauf).
Start/Ziel liegen als zwei Hintergrundbild-Ebenen auf EINEM
statischen Element (spannt die volle Balkenbreite). Das Läufer-
Icon sitzt auf einer zweiten Box, deren Breite ueber dieselbe
:has()-Tabelle wie der Fuellbalken berechnet wird - dadurch landet
das Icon (background-position-x:right) automatisch exakt am
aktuellen Ende des roten Balkens, unabhaengig von der Distanz. */
.RRParticipantView .RRSplits::after {
content: "";
position: absolute;
left: 25px;
right: 25px;
top: 8px;
height: 32px;
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: 26px 26px, 26px 26px;
pointer-events: none;
z-index: 2;
}
/* Laufendes Icon als 2-Bild-Sprite (zwei Lauf-Posen untereinander in
einer SVG). Die Umschaltung zwischen den Posen passiert ueber
background-position-Y (fixe Pixelwerte, unabhaengig von der
Balkenbreite) - waehrend background-position-X konstant auf
"right" steht und dadurch die Box IMMER an ihrem rechten Rand
zeigt, also exakt an der aktuellen (per :has()-Tabelle berechneten)
Fortschritts-Position, egal wie breit die Box gerade ist. So lassen
sich Position (X, distanzabhaengig) und Lauf-Animation (Y, fix)
unabhaengig voneinander steuern. */
.RRParticipantView .RRSplits::before {
content: "";
position: absolute;
left: 25px;
top: 8px;
height: 32px;
width: 0%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
background-size: 32px 64px;
pointer-events: none;
animation: rrJoggerRun 0.5s steps(1) infinite;
transition: width 0.5s ease;
z-index: 3;
}
@keyframes rrJoggerRun {
0%, 45% { background-position-y: 0px; }
50%, 95% { background-position-y: -32px; }
100% { background-position-y: 0px; }
}
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits::before,
.RRParticipantView .RRElements > div:has(.RRSplits):has(> .RRBoxHead) .RRSplits::after {
top: 52px;
}
.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead {
display: block !important;
position: relative;
margin: 0 0 34px 0 !important;
padding: 0 0 0 42px !important;
height: auto !important;
background: transparent !important;
color: #fff !important;
border: 0 !important;
font-size: 21px !important;
line-height: 30px !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.035em;
}
.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 28px;
height: 28px;
border: 3px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-sizing: border-box;
}
.RRParticipantView .RRElements > div:has(.RRSplits) > .RRBoxHead::after {
content: "";
position: absolute;
left: 12px;
top: 6px;
width: 3px;
height: 8px;
background: #fff;
border-radius: 2px;
box-shadow: 5px 8px 0 -1px #fff;
transform: rotate(-2deg);
transform-origin: bottom center;
}
.RRParticipantView .RRSplits { color: #fff !important; }
.RRParticipantView .RRSplits > div { position: relative; }
/* vertikale Linie - exakt mittig durch die 40px/48px-Kreise (Kreis-
Mittelpunkt liegt bei 32px, Linie ist 3px breit -> left:30px) */
.RRParticipantView .RRSplits > div::before {
content: "";
position: absolute;
left: 30px;
top: 17px;
bottom: 21px;
width: 3px;
border-radius: 3px;
background: var(--dp-primary);
opacity: 0.85;
}
/* Tabellenkopf (Brutto/Netto/... als eigene Kopfzeile) verstecken */
.RRParticipantView .RRSplits > div > div:first-child {
display: none !important;
}
/* Jede Zwischenzeit als eigene Karte mit Rahmen (wie bei der
Gruentenstafette) statt nur einer duennen Trennlinie. */
.RRParticipantView .RRSplits > div > div:not(:first-child) {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"name gun"
"speed sector"
"chip rg" !important;
/* align-content:start statt dem Grid-Standard "stretch" - sonst
verteilt der Browser die durch min-height entstehende Luft
gleichmaessig auf ALLE Zeilen (auch leere, z.B. Geschwindigkeit/
Abschnitt bei START), wodurch Laufzeit und Tageszeit unnoetig
weit auseinanderrutschen. */
align-content: start !important;
column-gap: 14px !important;
row-gap: 4px !important;
min-height: 78px;
margin: 0 0 12px 58px !important;
padding: 14px 20px 14px 24px !important;
box-sizing: border-box !important;
border: 1px solid rgba(246, 33, 33, .28) !important;
border-radius: 16px !important;
background: linear-gradient(90deg, rgba(28, 8, 8, .9), rgba(18, 5, 5, .92)) !important;
color: #fff !important;
transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child):hover {
border-color: rgba(246, 33, 33, .65) !important;
background: linear-gradient(90deg, rgba(246, 33, 33, .12), rgba(18, 5, 5, .92)) !important;
}
/* Zeitpunkt-Kreis, jetzt links AUSSERHALB der Karte auf der Linie
(schlicht, kein Icon/Symbol) */
.RRParticipantView .RRSplits > div > div:not(:first-child)::before {
content: "";
position: absolute;
z-index: 2;
left: -46px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
box-sizing: border-box;
border: 3px solid var(--dp-primary);
border-radius: 50%;
background: #0c0c0c;
box-shadow: 0 0 9px rgba(246, 33, 33, .5);
}
/* START/ZIEL etwas groesser hervorheben, weiterhin ohne Icon */
.RRParticipantView .RRSplits > div > div:nth-child(2)::before,
.RRParticipantView .RRSplits > div > div:last-child::before {
left: -50px;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: 3px solid var(--dp-primary);
background-color: #0c0c0c;
}
/* Start-Fahne (kein Lauf-/Rad-Icon, nur eine neutrale Start-Markierung) */
.RRParticipantView .RRSplits > div > div:nth-child(2)::before {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
/* Ziel-Fahne (Karo-Flagge) */
.RRParticipantView .RRSplits > div > div:last-child::before {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
/* Datasport-Icon (die runde "Play"-Marke aus dem Datasport-Logo,
aus dem offiziellen SVG herausgeschnitten) in bereits erledigten
Zwischenzeiten-Kreisen statt eines generischen Hakens (nicht Start/
Ziel, die haben ihre eigenen Fahnen-Icons oben; nicht .predicted,
die bleiben leer/gestrichelt bzw. pulsierend). */
.RRParticipantView .RRSplits > div > div:not(:first-child):not(.predicted):not(:nth-child(2)):not(:last-child)::before {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
}
/* Name/Distanzpunkt */
.RRParticipantView .RRSplits > div > div:not(:first-child) > div:first-child {
grid-area: name;
align-self: end;
min-width: 0;
color: #fff !important;
font-size: 16px !important;
line-height: 1.15 !important;
font-weight: 850 !important;
text-transform: uppercase;
letter-spacing: 0.015em;
overflow-wrap: anywhere;
}
/* Brutto */
.RRParticipantView .RRSplits .tdSplitGun {
grid-area: gun;
display: block !important;
align-self: end;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
font-variant-numeric: tabular-nums;
text-align: right !important;
}
/* Abschnitt */
.RRParticipantView .RRSplits .tdSplitSector {
grid-area: sector;
color: var(--dp-primary-light) !important;
font-size: 15px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums;
text-align: right !important;
}
/* Geschwindigkeit */
.RRParticipantView .RRSplits .tdSplitSpeed {
grid-area: speed;
display: block;
color: rgba(255, 255, 255, 0.68) !important;
font-size: 13px !important;
line-height: 1.25 !important;
text-align: left !important;
}
.RRParticipantView .RRSplits .tdSplitSpeed .rrSplitsLabel {
display: inline !important;
color: inherit !important;
}
/* Netto */
.RRParticipantView .RRSplits .tdSplitChip {
grid-area: chip;
display: block !important;
color: rgba(255, 255, 255, 0.55) !important;
font-size: 12px !important;
line-height: 1.25 !important;
text-align: left !important;
}
.RRParticipantView .RRSplits .tdSplitChip::before {
content: "Netto: ";
color: rgba(255, 255, 255, 0.3);
}
.RRParticipantView .RRSplits .tdSplitChip:empty {
display: none !important;
}
/* Gesamt */
.RRParticipantView .RRSplits .tdSplitRO {
grid-area: rg;
display: block !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 12px !important;
line-height: 1.25 !important;
text-align: right !important;
text-transform: none !important;
}
.RRParticipantView .RRSplits .tdSplitRO .rrSplitsLabel {
display: inline !important;
color: inherit !important;
}
/* =========================================================
ZWEITE SPALTEN-VARIANTE (andere Rennen desselben Events)
Nicht jedes Rennen im Regensburg Marathon ist gleich
konfiguriert: manche zeigen pro Zwischenzeit zusaetzlich die
Tageszeit (tdSplitTOD) sowie M/W-Platz (tdSplitRG) UND AK-Platz
(tdSplitRA) statt nur "Gesamt" (tdSplitRO). Live an zwei
verschiedenen Rennen desselben Events geprueft. Die Zeilen
erkennen sich selbst per :has() - keine Fallunterscheidung noetig.
========================================================= */
/* Tageszeit - dezent, zusammen mit Netto in einer Zeile, mit Label */
.RRParticipantView .RRSplits .tdSplitTOD {
grid-area: tod;
display: block !important;
color: rgba(255, 255, 255, 0.55) !important;
font-size: 13px !important;
line-height: 1.25 !important;
text-align: right !important;
}
.RRParticipantView .RRSplits .tdSplitTOD::before {
content: "Tageszeit ";
color: rgba(255, 255, 255, 0.35);
font-weight: 600;
}
/* M/W-Platz - unten LINKS, damit beide Platzierungen auf einer
Zeile nebeneinander stehen statt gestapelt zu werden */
.RRParticipantView .RRSplits .tdSplitRG {
grid-area: rg;
display: block !important;
color: var(--dp-primary-light) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
text-align: left !important;
}
/* RaceResult zeigt seit dem Plattform-Update dieses Label auf Englisch
("Gender: ") statt Deutsch an - Original ausblenden, deutsches
Label per ::before auf dem Eltern-Element einsetzen (gleiche
Technik wie bei der Gruentenstafette-Datei). */
.RRParticipantView.RRParticipantView .RRSplits.RRSplits .tdSplitRG .rrSplitsLabel {
display: none !important;
}
.RRParticipantView .tdSplitRG::before {
content: "M/W-Platz: ";
}
/* AK-Platz - unten LINKS, unter M/W-Platz */
.RRParticipantView .RRSplits .tdSplitRA {
grid-area: ra;
display: block !important;
color: rgba(255, 255, 255, 0.75) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
text-align: left !important;
}
/* "Age Group: " -> "AK-Platz: " (gleicher Grund wie oben bei tdSplitRG) */
.RRParticipantView.RRParticipantView .RRSplits.RRSplits .tdSplitRA .rrSplitsLabel {
display: none !important;
}
.RRParticipantView .tdSplitRA::before {
content: "AK-Platz: ";
}
/* Explizite Reihenfolge (Wunsch):
Links von oben nach unten: Distanz, Geschwindigkeit, M/W-Platz, AK-Platz
Rechts von oben nach unten: (Luecke), Abschnittszeit, Laufzeit, Tageszeit
Brutto (Gun) wird hier nicht mehr gebraucht - Netto (Laufzeit)
uebernimmt die Rolle der grossen Zeit.
Name-Zeile bekommt bewusst die VOLLE Breite (rechte Spalte leer) -
bei der pulsierenden "NEXT TIMING POINT"-Kachel bzw. bei "PROGNOSE"
ist dort ein Badge neben dem Namen, das sonst mit der Laufzeit-Zahl
ueberlappt hat. Laufzeit steht dafuer direkt ueber der Tageszeit. */
.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) {
grid-template-areas:
"name ."
"speed sector"
"rg chip"
"ra tod" !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitGun {
display: none !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitChip {
grid-area: chip !important;
display: block !important;
align-self: end !important;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
font-variant-numeric: tabular-nums;
text-align: right !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child):has(.tdSplitRA) .tdSplitChip::before {
content: "Laufzeit " !important;
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.4) !important;
}
/* =========================================================
PROGNOSEN (Live-Vorhersage fuer noch nicht erreichte Punkte)
========================================================= */
.RRParticipantView .RRSplits > div > .predicted {
opacity: 0.76;
}
.RRParticipantView .RRSplits > div > .predicted::before {
border-color: var(--dp-predicted) !important;
border-style: dashed !important;
box-shadow: 0 0 0 4px rgba(255, 143, 143, 0.1);
}
.RRParticipantView .RRSplits > div > .predicted > div:first-child {
color: #ffdada !important;
}
.RRParticipantView .RRSplits > div > .predicted > div:first-child::after {
content: " PROGNOSE";
display: inline-block;
margin-left: 7px;
padding: 3px 7px 2px;
vertical-align: 2px;
border-radius: 999px;
background: var(--dp-predicted);
color: #171717;
font-size: 9px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0.04em;
}
.RRParticipantView .RRSplits > div > .predicted .tdSplitSector {
color: var(--dp-predicted) !important;
}
/* Bei einer Prognose-Zeile sind Laufzeit/Netto und Tageszeit keine
echten gemessenen Werte, sondern Schaetzungen - Label entsprechend
umbenennen ("Erwartete ..."). Selektor bewusst genauso spezifisch
wie die Race-B-Variante oben (div:not(:first-child) + Klasse),
damit das hier IMMER gewinnt, unabhaengig davon welche Spalten-
Variante gerade aktiv ist. */
.RRParticipantView .RRSplits > div > div:not(:first-child).predicted .tdSplitChip::before {
content: "Erwartete Laufzeit " !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child).predicted .tdSplitTOD::before {
content: "Erwartete Tageszeit " !important;
}
/* =========================================================
NEXT TIMING POINT – pulsierende Kachel
Der naechste, noch nicht erreichte Checkpoint (die ERSTE
.predicted-Zeile) hebt sich zusaetzlich zur normalen Prognose-
Optik ab: pulsierender roter Rahmen + Badge "NEXT TIMING POINT"
statt "PROGNOSE". Alle weiteren, spaeteren Punkte bleiben bei
der normalen gestrichelten Prognose-Optik von oben.
========================================================= */
@keyframes rrNextPointPulse {
0%, 100% {
box-shadow: 0 0 4px rgba(246, 33, 33, .5), 0 0 10px rgba(246, 33, 33, .25);
}
50% {
box-shadow: 0 0 10px rgba(246, 33, 33, 1), 0 0 25px rgba(246, 33, 33, .8), 0 0 40px rgba(246, 33, 33, .4);
}
}
.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) {
opacity: 1 !important;
border: 2px solid var(--dp-primary) !important;
border-radius: 14px !important;
animation: rrNextPointPulse 1.6s ease-in-out infinite !important;
}
.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted)::before {
border-color: var(--dp-primary) !important;
border-style: solid !important;
animation: none !important;
box-shadow: none !important;
}
.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child {
color: #fff !important;
}
.RRParticipantView .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child::after {
content: " PROGNOSE · NEXT TIMING POINT" !important;
background: var(--dp-primary) !important;
color: #fff !important;
}
/* Bereits im Ziel (ZIEL hat eine echte Zeit, keine .predicted-Klasse
mehr) -> keine Pulsier-Kachel mehr zeigen, auch wenn wegen einer
fehlenden Zwischenmessung noch irgendwo eine .predicted-Klasse
haengt. Faellt zurueck auf die normale, ruhige Prognose-Optik. */
.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) {
border: 1px solid rgba(255, 255, 255, .16) !important;
animation: none !important;
}
.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted)::before {
border-color: var(--dp-predicted) !important;
border-style: dashed !important;
box-shadow: 0 0 0 4px rgba(255, 143, 143, 0.1);
}
.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child {
color: #ffdada !important;
}
.RRParticipantView .RRElements:has(.RRSplits > div > div:last-child:not(.predicted)) .RRSplits > div > .predicted:not(.predicted ~ .predicted) > div:first-child::after {
content: " PROGNOSE" !important;
background: var(--dp-predicted) !important;
color: #171717 !important;
}
/* Positioniert die HTML-Box mit dem Kuchendiagramm (egal wo sie im
Adminbereich in der Elemente-Liste einsortiert ist) ganz ans Ende
der Detailansicht, unterhalb aller anderen Boxen (Zwischenzeiten,
Urkunde, Links etc.) - per Flexbox-"order" statt echter DOM-
Verschiebung, damit im Adminbereich nichts umsortiert werden muss. */
.RRParticipantView .RRElements {
display: flex;
flex-direction: column;
}
.RRParticipantView .RRElements > div:has(.at-finish-segbar) {
order: 999;
}
/* =========================================================
ZIEL-KUCHENDIAGRAMM (statt Balken wie bei der Gruentenstafette)
Genau dieselbe Grundtechnik wie der Ziel-Balken bei der
Gruentenstafette: eine HTML-Box unter den Zwischenzeiten enthaelt
,
wobei RaceResult [Feldname]-Formeln direkt in die style="..."-
Werte einsetzt (kein JS noetig). Bei diesem Rennen sind es 10
Abschnitte (--p1 bis --p10) statt 6 - die Werte muessen sich NICHT
zu 100 addieren (koennen z.B. rohe Minutenwerte sein), deshalb wird
hier immer durch die tatsaechliche SUMME aller 10 Werte geteilt
statt direkt Prozentwerte anzunehmen.
conic-gradient() funktioniert genau wie linear-gradient(), nur im
Kreis statt in einer Linie - dieselbe Cascade von Hart-Kanten-
Farbstopps wie beim Balken, nur eben in Prozent des Vollkreises.
Zwei abwechselnde Rot-Toene (dunkel/hell), analog zur
Gruentenstafette-Loesung.
TRENNLINIEN: an jeder der 9 inneren Grenzen (c1-c9) wird zusaetzlich
ein duenner Hintergrundfarb-Sliver eingefuegt (SEP=0.5% auf jeder
Seite) - dadurch bleiben auch zwei direkt benachbarte Segmente
derselben Farbe (z.B. wenn ein Segment dazwischen fast 0 ist)
optisch als zwei getrennte Flaechen erkennbar. An der Nahtstelle
0%/100% selbst braucht es keinen Sliver, weil Segment 1 (dunkel)
und Segment 10 (hell) dort ohnehin unterschiedliche Farben haben.
LEGENDE statt Text-im-Kreis: eine
mit
10
Abschnittsname
(gleiche Reihenfolge wie --p1..--p10)
steht neben dem Kreis. Jedes
bekommt per ::before ein kleines
Farbfeld, abwechselnd dunkel/hell nach :nth-child(odd/even) -
exakt dieselbe Abwechslungs-Logik wie die Kuchenstuecke selbst,
dadurch immer synchron ohne dass Werte dafuer noetig sind (die
Farbreihenfolge haengt nur von der Position ab, nicht vom Wert).
Vermeidet das Ueberlappungs-Risiko von Text direkt im Kreis bei
sehr kleinen Segmenten. */
.RRParticipantView .at-finish-piebox {
/* Hier definiert (statt in .at-finish-segbar), weil .at-finish-piebox
der gemeinsame Elternknoten von Kreis UND Legende ist - CSS-Variablen
vererben sich nur nach unten im DOM, und die Legende ist ein
Geschwister-Element vom Kreis, kein Kind davon. */
--seg1: #f62121;
--seg2: #ff8c42;
--seg3: #ffd23f;
--seg4: #a8e063;
--seg5: #3ec1d3;
--seg6: #4d7cfe;
--seg7: #9b5de5;
--seg8: #f15bb5;
--seg9: #ff5a5a;
--seg10: #b81414;
display: none;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin: 28px auto 64px;
max-width: 480px;
}
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .at-finish-piebox {
display: flex;
}
.RRParticipantView .at-finish-legend {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 180px;
display: flex;
flex-direction: column;
gap: 7px;
}
.RRParticipantView .at-finish-legend li {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
.RRParticipantView .at-finish-legend li::before {
content: "";
flex: 0 0 auto;
width: 13px;
height: 13px;
border-radius: 4px;
box-shadow: 0 0 6px rgba(246, 33, 33, 0.35);
}
.RRParticipantView .at-finish-legend li:nth-child(1)::before { background: var(--seg1); }
.RRParticipantView .at-finish-legend li:nth-child(2)::before { background: var(--seg2); }
.RRParticipantView .at-finish-legend li:nth-child(3)::before { background: var(--seg3); }
.RRParticipantView .at-finish-legend li:nth-child(4)::before { background: var(--seg4); }
.RRParticipantView .at-finish-legend li:nth-child(5)::before { background: var(--seg5); }
.RRParticipantView .at-finish-legend li:nth-child(6)::before { background: var(--seg6); }
.RRParticipantView .at-finish-legend li:nth-child(7)::before { background: var(--seg7); }
.RRParticipantView .at-finish-legend li:nth-child(8)::before { background: var(--seg8); }
.RRParticipantView .at-finish-legend li:nth-child(9)::before { background: var(--seg9); }
.RRParticipantView .at-finish-legend li:nth-child(10)::before { background: var(--seg10); }
.RRParticipantView .at-finish-segbar {
/* --p1 bis --p10 sind die EINZELNEN (nicht kumulierten) Prozent-
bzw. Anteilswerte pro Segment - werden hier aufsummiert und durch
die Gesamtsumme geteilt, damit es auch bei Rundungsfehlern (Summe
nicht exakt 100) sauber funktioniert. */
--sum: calc(var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0) + var(--p9, 0) + var(--p10, 0));
--c1: calc(var(--p1, 0) / var(--sum) * 100%);
--c2: calc((var(--p1, 0) + var(--p2, 0)) / var(--sum) * 100%);
--c3: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0)) / var(--sum) * 100%);
--c4: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0)) / var(--sum) * 100%);
--c5: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0)) / var(--sum) * 100%);
--c6: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0)) / var(--sum) * 100%);
--c7: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0)) / var(--sum) * 100%);
--c8: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0)) / var(--sum) * 100%);
--c9: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0) + var(--p5, 0) + var(--p6, 0) + var(--p7, 0) + var(--p8, 0) + var(--p9, 0)) / var(--sum) * 100%);
flex: 0 0 auto;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(246, 33, 33, 0.18);
}
.RRParticipantView:not(:has(.RRSplits > div > .predicted)) .at-finish-segbar {
background: conic-gradient(
var(--seg1) 0%, var(--seg1) calc(var(--c1) - 0.5%),
var(--dp-bg) calc(var(--c1) - 0.5%), var(--dp-bg) calc(var(--c1) + 0.5%),
var(--seg2) calc(var(--c1) + 0.5%), var(--seg2) calc(var(--c2) - 0.5%),
var(--dp-bg) calc(var(--c2) - 0.5%), var(--dp-bg) calc(var(--c2) + 0.5%),
var(--seg3) calc(var(--c2) + 0.5%), var(--seg3) calc(var(--c3) - 0.5%),
var(--dp-bg) calc(var(--c3) - 0.5%), var(--dp-bg) calc(var(--c3) + 0.5%),
var(--seg4) calc(var(--c3) + 0.5%), var(--seg4) calc(var(--c4) - 0.5%),
var(--dp-bg) calc(var(--c4) - 0.5%), var(--dp-bg) calc(var(--c4) + 0.5%),
var(--seg5) calc(var(--c4) + 0.5%), var(--seg5) calc(var(--c5) - 0.5%),
var(--dp-bg) calc(var(--c5) - 0.5%), var(--dp-bg) calc(var(--c5) + 0.5%),
var(--seg6) calc(var(--c5) + 0.5%), var(--seg6) calc(var(--c6) - 0.5%),
var(--dp-bg) calc(var(--c6) - 0.5%), var(--dp-bg) calc(var(--c6) + 0.5%),
var(--seg7) calc(var(--c6) + 0.5%), var(--seg7) calc(var(--c7) - 0.5%),
var(--dp-bg) calc(var(--c7) - 0.5%), var(--dp-bg) calc(var(--c7) + 0.5%),
var(--seg8) calc(var(--c7) + 0.5%), var(--seg8) calc(var(--c8) - 0.5%),
var(--dp-bg) calc(var(--c8) - 0.5%), var(--dp-bg) calc(var(--c8) + 0.5%),
var(--seg9) calc(var(--c8) + 0.5%), var(--seg9) calc(var(--c9) - 0.5%),
var(--dp-bg) calc(var(--c9) - 0.5%), var(--dp-bg) calc(var(--c9) + 0.5%),
var(--seg10) calc(var(--c9) + 0.5%), var(--seg10) 100%
);
}
/* =========================================================
URKUNDEN (RRCertificates) + LINKS (RRLinks)
Zwei zusaetzliche Boxen am Ende, die es bei der Staffel nicht
gab - gleiche dunkle Karten-Optik wie der Rest.
========================================================= */
.RRParticipantView .RRBox:has(.RRCertificates),
.RRParticipantView .RRBox:has(.RRLinks) {
padding: 16px 25px 25px !important;
background: #09090c !important;
border-top: 1px solid var(--dp-line) !important;
}
.RRParticipantView .RRBox:has(.RRCertificates) > .RRBoxHead,
.RRParticipantView .RRBox:has(.RRLinks) > .RRBoxHead {
background: transparent !important;
color: rgba(255, 255, 255, 0.55) !important;
border: 0 !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-bottom: 10px !important;
}
.RRParticipantView .RRCertificates,
.RRParticipantView .RRLinks {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
.RRParticipantView .RRCertificates > div,
.RRParticipantView .RRLinks > div {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
width: 74px !important;
padding: 10px 6px !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: #111 !important;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 11px !important;
text-align: center !important;
cursor: pointer !important;
transition: border-color .15s ease, background .15s ease !important;
}
.RRParticipantView .RRCertificates > div:hover,
.RRParticipantView .RRLinks > div:hover {
border-color: rgba(246, 33, 33, 0.5) !important;
background: rgba(246, 33, 33, 0.1) !important;
}
.RRParticipantView .RRCertificates img,
.RRParticipantView .RRLinks img {
max-width: 32px !important;
max-height: 32px !important;
border-radius: 6px !important;
}
/* URKUNDEN - eigene, auffaelligere "Award"-Optik statt der schlichten
Link-Chips: groessere Vorschau der echten Urkunde wie ein kleines
Dokument mit Rahmen/Schatten, Siegel-Medaille oben rechts, Karte
hebt beim Hover leicht ab. Ueberschreibt bewusst die generische
Chip-Regel oben (gleiche Selektor-Spezifitaet, steht aber weiter
unten in der Datei) - .RRLinks bleibt unveraendert die schlichte
Chip-Optik. */
.RRParticipantView .RRCertificates > div {
position: relative !important;
width: 112px !important;
padding: 12px 12px 14px !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background: linear-gradient(165deg, #1c1414, #0a0a0a) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.RRParticipantView .RRCertificates > div:hover {
transform: translateY(-5px) rotate(-1deg) !important;
border-color: rgba(246, 33, 33, 0.55) !important;
background: linear-gradient(165deg, #241414, #0a0a0a) !important;
box-shadow:
0 18px 32px rgba(0, 0, 0, 0.45),
0 0 26px rgba(246, 33, 33, 0.3) !important;
}
.RRParticipantView .RRCertificates img {
display: block !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
/* Siegel-Medaille oben rechts auf der Vorschau (Kreis mit Stern) */
.RRParticipantView .RRCertificates > div::before {
content: "";
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--dp-gradient);
border: 2px solid #0a0a0a;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.RRParticipantView .RRCertificates > div::after {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
z-index: 3;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.Popup-Overlay { overflow: hidden !important; }
.RRParticipantView {
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.RRParticipantView .RRTopBar {
min-height: 56px !important;
padding: 4px 7px !important;
}
.RRParticipantView .RRBox:has(.RRHTML) > div {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.RRParticipantView .RRSplits .tdSplitTOD,
.RRParticipantView .RRSplits .tdSplitGun {
font-size: 15px !important;
}
.RRParticipantView .RRSplits .tdSplitSector {
font-size: 14px !important;
}
.RRParticipantView .RRSplits .tdSplitSpeed,
.RRParticipantView .RRSplits .tdSplitChip,
.RRParticipantView .RRSplits .tdSplitRO {
font-size: 11px !important;
}
/* Linie, Kreise und Karten in der Handyansicht weiter nach links -
auf Mobile ist der grosse Desktop-Gutter (Container-Padding 25px
+ Karten-margin-left 58px) reine Platzverschwendung, dadurch
wird die Kachel deutlich breiter. */
.RRParticipantView .RRElements > div:has(.RRSplits) {
padding-left: 14px !important;
padding-right: 18px !important;
}
.RRParticipantView .RRSplits > div::before {
left: 23px !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child) {
margin-left: 32px !important;
}
.RRParticipantView .RRSplits > div > div:not(:first-child)::before {
left: -25px !important;
width: 34px !important;
height: 34px !important;
}
.RRParticipantView .RRSplits > div > div:nth-child(2)::before,
.RRParticipantView .RRSplits > div > div:last-child::before {
left: -28px !important;
width: 40px !important;
height: 40px !important;
}
}
/* =========================================================
ERGEBNISLISTE (Menü + Kopfzeile) – dunkles Design.
table.MainTable (die Liste mit Platzierungen selbst) bewusst
NICHT gestylt, bleibt die normale weisse RaceResult-Liste.
========================================================= */
#divRRPublish.RRPublish {
background:
radial-gradient(circle at 13% 14%, rgba(246, 33, 33, 0.16), transparent 29%),
radial-gradient(circle at 90% 16%, rgba(246, 33, 33, 0.10), transparent 31%),
var(--dp-bg) !important;
color: #f7f7f5 !important;
border-radius: 16px !important;
overflow: hidden !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
padding: 4px !important;
font-family: "Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Arial,Helvetica,sans-serif !important;
}
.ListControl {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 18px !important;
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.ListBack {
order: 1 !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
cursor: pointer !important;
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 999px !important;
padding: 6px 16px 6px 14px !important;
transition: background .15s ease, border-color .15s ease !important;
}
.ListBack:hover {
color: #fff !important;
background: rgba(246,33,33,.22) !important;
border-color: var(--dp-primary-light) !important;
}
.ListBack::before {
content: "" !important;
display: inline-block !important;
width: 8px !important;
height: 13px !important;
border: 0 !important;
transform: none !important;
font-size: 0 !important;
flex-shrink: 0 !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.RRLiveUpdate {
order: 2 !important;
margin-left: auto !important;
color: var(--dp-primary-light) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
padding: 5px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(246,33,33,.5) !important;
background: rgba(246,33,33,.12) !important;
}
html body .ListControl .ListControlPDF {
display: flex !important;
order: 2 !important;
margin-left: auto !important;
align-items: center !important;
gap: 6px !important;
color: var(--dp-primary-light) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
padding: 5px 14px 5px 30px !important;
border-radius: 999px !important;
border: 1px solid rgba(246,33,33,.5) !important;
background-color: rgba(246,33,33,.12) !important;
background-position: 10px center !important;
background-repeat: no-repeat !important;
background-size: 14px auto !important;
cursor: pointer !important;
white-space: nowrap !important;
}
@media (max-width: 480px) {
html body .ListControl .ListControlPDF {
order: 4 !important;
margin-left: 0 !important;
flex: 1 1 100% !important;
justify-content: center !important;
padding: 7px 14px 7px 30px !important;
}
}
.ListControlSearch {
order: 3 !important;
flex: 1 1 100% !important;
width: 100% !important;
margin-left: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
.ListControlSearch input[type="text"] {
flex: 1 1 auto !important;
min-width: 0 !important;
background: #111 !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
color: #fff !important;
padding: 8px 14px !important;
}
.ListControlSearch input[type="text"]:focus {
outline: none !important;
border-color: var(--dp-primary-light) !important;
box-shadow: 0 0 0 3px rgba(246,33,33,.25) !important;
}
.ListControlSearch button {
flex: 0 0 auto !important;
white-space: nowrap !important;
background: var(--dp-primary) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.ListControlSearch button.btnClearSearch {
background: rgba(255,255,255,.1) !important;
padding: 8px 10px !important;
}
.ListControlSearch button.btnFavorites {
background: rgba(255,255,255,.1) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
width: 40px !important;
padding: 8px !important;
color: transparent !important;
position: relative !important;
}
.ListControlSearch button.btnFavorites::before {
content: "\2605" !important;
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-size: 15px !important;
}
.ListControlSearch button.btnFavorites:hover {
background: rgba(246,33,33,.25) !important;
border-color: var(--dp-primary-light) !important;
}
/* --- Menü ("Ergebnisliste ...") --- */
.Tiles { padding: 6px !important; display: flex !important; flex-wrap: wrap !important; gap: 14px !important; }
.Tile {
flex: 1 1 300px !important;
background: var(--dp-panel) !important;
border: 1px solid rgba(255,255,255,.32) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
table.TilesList { border: 0 !important; width: 100% !important; border-collapse: collapse !important; }
.TileHead {
background: var(--dp-gradient) !important;
padding: 14px 18px !important;
}
.TileHeadText {
color: #fff !important;
font-weight: 800 !important;
font-size: 16px !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
}
table.TilesList,
table.TilesList tbody,
table.TilesList tr,
table.TilesList tr.TilesList {
background: var(--dp-panel) !important;
}
table.TilesList tr.TilesList {
cursor: pointer !important;
transition: background .15s ease !important;
}
table.TilesList tr.TilesList td {
background: transparent !important;
color: #f0f0f0 !important;
padding: 17px 20px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
font-weight: 600 !important;
font-size: 15px !important;
}
table.TilesList tr.TilesList:last-child td {
border-bottom: 0 !important;
}
table.TilesList tr.TilesList:hover,
table.TilesList tr.TilesList:hover td {
background: rgba(246,33,33,.14) !important;
color: #fff !important;
}
table.TilesList tr.TilesList img {
filter: invert(1) !important;
}
/* "Powered by RaceResult"-Logo ausblenden */
div[style*="RR_PoweredBy"] {
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Nationenflaggen (Ergebnisliste, "Nat."-Spalte) rund statt eckig.
RaceResult liefert 4:3-rechteckige Flaggen-SVGs (Klasse "img16")
- auf ein Quadrat gezwungen + object-fit:cover, damit beim Runden
nichts verzerrt wird. */
img.img16 {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
object-fit: cover !important;
}
/* Nationenflagge im Teilnehmerkopf (neben "| M30 | Verein"), ebenfalls
rund - hat keine eigene Klasse (nur ein natives style="width:...px"
von RaceResult), deshalb ueber .RRHTML img angesprochen. Hoehe zum
Text daneben per vertical-align:middle ausgerichtet. */
.RRParticipantView .RRHTML img {
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
object-fit: cover !important;
vertical-align: middle !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
}
/* Seiten-Scrollbalken */
html {
scrollbar-width: thin;
scrollbar-color: rgba(246,33,33,.55) #0e0e0e;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0e0e0e; }
body::-webkit-scrollbar-thumb {
background: rgba(246,33,33,.55);
border-radius: 999px;
border: 2px solid #0e0e0e;
}
body::-webkit-scrollbar-thumb:hover { background: var(--dp-primary); }
@media (max-width: 620px) {
.ListControl { padding: 12px !important; gap: 10px !important; }
}
/* =========================================================
FORTSCHRITTSBALKEN - GENAUE FUELLBREITE
CSS kennt weder Kilometer noch Division. Um die Fuellbreite
trotzdem exakt (nicht geschaetzt) an die tatsaechliche Anzahl
Zwischenzeiten-Karten dieses konkreten Rennens anzupassen,
wird hier jede moegliche Kombination aus
N = Gesamtzahl Zwischenzeiten-Karten (Start...Ziel)
C = Anzahl bereits erledigter Karten (nicht .predicted)
als eigene Regel definiert (N von 4 bis 19 - deckt Viertel-,
Halb-, Dreiviertel- und Marathon ab, geprueft an echten Daten
mit N=12). Jede Regel erkennt sich selbst ueber :has() an der
Zwischenzeiten-Liste - keine manuelle Zuordnung noetig, das
passende Rennen greift automatisch die passende Regel.
========================================================= */
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(4):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(4)):not(:has(.RRSplits > div > div:nth-child(5))):has(.RRSplits > div > div:nth-child(4):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(5):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(5)):not(:has(.RRSplits > div > div:nth-child(6))):has(.RRSplits > div > div:nth-child(5):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(6):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(6)):not(:has(.RRSplits > div > div:nth-child(7))):has(.RRSplits > div > div:nth-child(6):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(7):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(7)):not(:has(.RRSplits > div > div:nth-child(8))):has(.RRSplits > div > div:nth-child(7):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(8):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(8)):not(:has(.RRSplits > div > div:nth-child(9))):has(.RRSplits > div > div:nth-child(8):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(9):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(9)):not(:has(.RRSplits > div > div:nth-child(10))):has(.RRSplits > div > div:nth-child(9):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(10):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(10)):not(:has(.RRSplits > div > div:nth-child(11))):has(.RRSplits > div > div:nth-child(10):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(11):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(11)):not(:has(.RRSplits > div > div:nth-child(12))):has(.RRSplits > div > div:nth-child(11):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0909) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1818) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2727) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3636) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4545) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5455) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6364) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7273) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8182) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9091) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(12):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(12)):not(:has(.RRSplits > div > div:nth-child(13))):has(.RRSplits > div > div:nth-child(12):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0833) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4167) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5833) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9167) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(13):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(13)):not(:has(.RRSplits > div > div:nth-child(14))):has(.RRSplits > div > div:nth-child(13):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0769) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1538) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2308) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3077) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3846) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4615) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5385) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6154) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6923) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7692) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8462) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9231) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(14):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(14)):not(:has(.RRSplits > div > div:nth-child(15))):has(.RRSplits > div > div:nth-child(14):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5714) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6429) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7143) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7857) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8571) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9286) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(15):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(15)):not(:has(.RRSplits > div > div:nth-child(16))):has(.RRSplits > div > div:nth-child(15):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(16):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(16)):not(:has(.RRSplits > div > div:nth-child(17))):has(.RRSplits > div > div:nth-child(16):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.25) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.625) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.75) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8125) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.875) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9375) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(17):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(17)):not(:has(.RRSplits > div > div:nth-child(18))):has(.RRSplits > div > div:nth-child(17):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0588) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1176) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1765) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2353) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2941) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3529) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4118) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4706) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5294) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5882) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6471) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7059) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7647) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8235) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8824) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9412) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(18):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(18)):not(:has(.RRSplits > div > div:nth-child(19))):has(.RRSplits > div > div:nth-child(18):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(2):not(.predicted)):has(.RRSplits > div > div:nth-child(3).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.0556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(3):not(.predicted)):has(.RRSplits > div > div:nth-child(4).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(4):not(.predicted)):has(.RRSplits > div > div:nth-child(5).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.1667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(5):not(.predicted)):has(.RRSplits > div > div:nth-child(6).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(6):not(.predicted)):has(.RRSplits > div > div:nth-child(7).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.2778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(7):not(.predicted)):has(.RRSplits > div > div:nth-child(8).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(8):not(.predicted)):has(.RRSplits > div > div:nth-child(9).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.3889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(9):not(.predicted)):has(.RRSplits > div > div:nth-child(10).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.4444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(10):not(.predicted)):has(.RRSplits > div > div:nth-child(11).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(11):not(.predicted)):has(.RRSplits > div > div:nth-child(12).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.5556) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(12):not(.predicted)):has(.RRSplits > div > div:nth-child(13).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6111) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(13):not(.predicted)):has(.RRSplits > div > div:nth-child(14).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.6667) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(14):not(.predicted)):has(.RRSplits > div > div:nth-child(15).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7222) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(15):not(.predicted)):has(.RRSplits > div > div:nth-child(16).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.7778) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(16):not(.predicted)):has(.RRSplits > div > div:nth-child(17).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8333) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(17):not(.predicted)):has(.RRSplits > div > div:nth-child(18).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.8889) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(18):not(.predicted)):has(.RRSplits > div > div:nth-child(19).predicted) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(18):not(.predicted)):has(.RRSplits > div > div:nth-child(19).predicted) .RRSplits::before { width: calc((100% - 50px) * 0.9444) !important; }
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(19):not(.predicted)) .RRElements > div:has(.RRSplits)::after,
.RRParticipantView:has(.RRSplits > div > div:nth-child(19)):not(:has(.RRSplits > div > div:nth-child(20))):has(.RRSplits > div > div:nth-child(19):not(.predicted)) .RRSplits::before { width: calc((100% - 50px) * 1) !important; }
/* =========================================================
POSITION-RINGE (Langsamer/Schneller-Donut, wie RaceResult-App)
-------------------------------------------------------------
Diese Datei ist ein ZUSATZ zu regensburg-marathon-style.css -
bitte den Inhalt unten an eure bestehende, funktionierende CSS
anhaengen (nicht ersetzen).
Braucht NUR zwei bereits vorhandene RaceResult-Felder:
AKPl - Platzierung in der Altersklasse (z.B. 3)
AKPl.max - Gesamtzahl Teilnehmer in der Altersklasse (z.B. 73)
Die Ring-Fuellung wird komplett per CSS calc() berechnet (kein
neues Formel-Feld noetig):
Schneller-Ring = (Platz - 1) / Gesamt -> Anteil der Leute vor dir
Langsamer-Ring = (Gesamt - Platz) / Gesamt -> Anteil der Leute hinter dir
Fuer die PROZENTZAHL IN DER MITTE der Ringe braucht es zusaetzlich
zwei RaceResult-Felder, die den fertigen Prozentwert als TEXT
ausgeben (CSS kann berechnete Zahlen nur als Ring-Fuellung
darstellen, nicht als Text):
T2100 - Schneller-Prozentsatz (schon vorhanden)
100-[T2100] - Langsamer-Prozentsatz (neues Formel-Feld)
========================================================= */
.RRParticipantView .at-position-box {
margin: 28px auto 40px;
max-width: 480px;
text-align: center;
}
.RRParticipantView .at-position-title {
font-size: 22px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--dp-text);
margin-bottom: 10px;
}
.RRParticipantView .at-position-subtitle {
font-size: 14px;
color: var(--dp-muted);
margin-bottom: 28px;
}
.RRParticipantView .at-position-subtitle strong {
color: var(--dp-primary-light);
}
.RRParticipantView .at-position-placement {
font-size: 13px;
font-weight: 700;
color: var(--dp-muted);
margin-bottom: 24px;
}
.RRParticipantView .at-position-placement strong {
color: var(--dp-text);
}
.RRParticipantView .at-position-rings {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 48px;
flex-wrap: wrap;
}
.RRParticipantView .at-position-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.RRParticipantView .at-position-ring {
--schneller: calc((var(--place, 1) - 1) / var(--total, 1) * 100%);
--langsamer: calc((var(--total, 1) - var(--place, 1)) / var(--total, 1) * 100%);
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.RRParticipantView .at-position-ring.is-schneller {
background: conic-gradient(var(--dp-primary-dark) var(--schneller), rgba(255, 255, 255, 0.08) 0);
}
.RRParticipantView .at-position-ring.is-langsamer {
background: conic-gradient(var(--dp-primary-dark) var(--langsamer), rgba(255, 255, 255, 0.08) 0);
}
.RRParticipantView .at-position-ring::before {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: var(--dp-bg);
}
.RRParticipantView .at-position-value {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 800;
color: var(--dp-text);
}
.RRParticipantView .at-position-label {
font-size: 13px;
font-weight: 700;
color: var(--dp-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.RRParticipantView .at-position-count {
font-size: 12px;
color: var(--dp-muted);
margin-top: -6px;
}
/* =========================================================
PACE-VERLAUF (Balkendiagramm pro Abschnitt, wie bei Strava)
-------------------------------------------------------------
Diese Datei ist ein ZUSATZ zur bestehenden CSS - bitte anhaengen,
nicht ersetzen.
Braucht PRO ABSCHNITT zwei RaceResult-Felder:
--pace = Pace als reine DEZIMALZAHL (Minuten/km, z.B. 3.83
fuer 3:50 min/km) - neues Formel-Feld, steuert nur
unsichtbar die Balkenhoehe
Text im = das schon vorhandene FORMATIERTE Pace-Feld
(z.B. "3:50"), wird 1:1 als Beschriftung angezeigt
Die Balkenhoehe wird automatisch relativ zur schnellsten/
langsamsten Pace DIESES Laeufers skaliert (CSS min()/max()) -
kein fester Wertebereich noetig, funktioniert fuer jeden Laeufer
unabhaengig von seinem Tempo.
Je LAENGER der Balken, desto LANGSAMER dieser Abschnitt (genau
wie bei Strava: kuerzerer Balken = weniger Zeit = schneller).
========================================================= */
.RRParticipantView .at-pace-box {
margin: 28px auto 40px;
max-width: 640px;
}
.RRParticipantView .at-pace-title {
font-size: 20px;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--dp-text);
text-align: center;
margin-bottom: 24px;
}
.RRParticipantView .at-pace-chart {
--min: min(var(--pace1, 5), var(--pace2, 5), var(--pace3, 5), var(--pace4, 5), var(--pace5, 5), var(--pace6, 5), var(--pace7, 5), var(--pace8, 5), var(--pace9, 5), var(--pace10, 5));
--max: max(var(--pace1, 5), var(--pace2, 5), var(--pace3, 5), var(--pace4, 5), var(--pace5, 5), var(--pace6, 5), var(--pace7, 5), var(--pace8, 5), var(--pace9, 5), var(--pace10, 5));
--range: calc(var(--max) - var(--min) + 0.001);
display: flex;
align-items: flex-end;
gap: 6px;
height: 160px;
padding: 0 4px;
border-bottom: 2px solid var(--dp-line);
}
.RRParticipantView .at-pace-bar {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
height: calc(20% + (var(--pace, var(--min)) - var(--min)) / var(--range) * 80%);
min-height: 20%;
background: linear-gradient(180deg, var(--dp-primary-light), var(--dp-primary-dark));
border-radius: 6px 6px 2px 2px;
position: relative;
padding-top: 6px;
}
.RRParticipantView .at-pace-value {
font-size: 11px;
font-weight: 700;
color: var(--dp-text);
white-space: nowrap;
}
.RRParticipantView .at-pace-labels {
display: flex;
gap: 6px;
padding: 8px 4px 0;
}
.RRParticipantView .at-pace-label {
flex: 1 1 0;
font-size: 10px;
color: var(--dp-muted);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}