/* Generated by tools/export.py in saturday-racing-redesign from its src/css/ - do not edit here. */
html.px-on {
--px-navy: #0f2d4f;
--px-navy-2: #17406b;
--px-ground: #050c16;
--px-header-night: #070910;
--px-header-night-rgb: 7 9 16;
--px-header-sunset-rgb: 214 118 40;
--px-header-gold-rgb: 212 175 55;
--px-canvas: #f6f4ef;
--px-tint: #efece4;
--px-tint-2: #e0dbd1;
--px-rule: #e6e1d7;
--px-paper: #f7f4ec;
--px-surface: #fcfbf8;
--px-line: #ece7dc;
--px-hair: #e3dccb;
--px-strong: #d6ccb6;
--px-lift-line: #dcd2be;
--px-pill: #ebe6da;
--px-pill-ink: #3a3f4b;
--px-lead: #33404d;
--px-ink-2: #4c5a68;
--px-ink-3: #66645c;
--px-mute: #6e7883;
--px-icon: #8a857a;
--px-quiet: #a39e92;
--px-on-dark: #c7d0d9;
--px-on-ink: #f5ead5;
--px-on-ink-2: rgb(245 234 213 / 66%);
--px-gold: #c9a227;
--px-gold-ink: #6e530b;
--px-gold-bg: #f7edcc;
--px-gold-fill: linear-gradient(180deg, #f0d57f 0%, #d4af37 55%, #b8921d 100%);
--px-green: #1e6b4e;
--px-green-bg: #e4f0e9;
--px-claret: #9a3340;
--px-claret-bg: #f7e5e7;
--px-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--px-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--px-comment:
'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
--px-fs-2xs: 11px;
--px-fs-xs: 12px;
--px-fs-sm: 13px;
--px-fs-base: 14px;
--px-fs-md: 15px;
--px-fs-lg: 16px;
--px-fs-xl: 18px;
--px-fs-2xl: 20px;
--px-fs-3xl: 22px;
--px-fs-4xl: 24px;
--px-fs-5xl: 28px;
--px-fs-6xl: 32px;
--px-fs-7xl: 40px;
--px-radius-hair: 2px;
--px-radius-sm: 6px;
--px-radius-md: 10px;
--px-radius-lg: 16px;
--px-radius-xl: 24px;
--px-radius-pill: 999px;
--px-content-max: 1400px;
--px-content-gutter: clamp(16px, 4vw, 32px);
--px-content-inset: 10px;
--px-shadow-rest: 0 1px 2px rgb(20 22 31 / 5%);
--px-shadow-lift: 0 1px 2px rgb(20 22 31 / 5%), 0 18px 36px -22px rgb(20 22 31 / 35%);
--px-shadow-price: 0 1px 2px rgb(15 45 79 / 22%);
--px-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--px-focus-width: 2px;
--px-focus-offset: 2px;
--px-focus-color: var(--px-navy);
}
html.px-on {
--px-m-caret-up-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M184.49%2C167.51a12%2C12%2C0%2C0%2C1%2C0%2C17l-48%2C48a12%2C12%2C0%2C0%2C1-17%2C0l-48-48a12%2C12%2C0%2C0%2C1%2C17-17L128%2C207l39.51-39.52A12%2C12%2C0%2C0%2C1%2C184.49%2C167.51Zm-96-79L128%2C49l39.51%2C39.52a12%2C12%2C0%2C0%2C0%2C17-17l-48-48a12%2C12%2C0%2C0%2C0-17%2C0l-48%2C48a12%2C12%2C0%2C0%2C0%2C17%2C17Z%22%2F%3E%3C%2Fsvg%3E");
--px-m-caret-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M216.49%2C168.49a12%2C12%2C0%2C0%2C1-17%2C0L128%2C97%2C56.49%2C168.49a12%2C12%2C0%2C0%2C1-17-17l80-80a12%2C12%2C0%2C0%2C1%2C17%2C0l80%2C80A12%2C12%2C0%2C0%2C1%2C216.49%2C168.49Z%22%2F%3E%3C%2Fsvg%3E");
--px-m-caret-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M216.49%2C104.49l-80%2C80a12%2C12%2C0%2C0%2C1-17%2C0l-80-80a12%2C12%2C0%2C0%2C1%2C17-17L128%2C159l71.51-71.52a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22%2F%3E%3C%2Fsvg%3E");
--px-m-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M234.29%2C114.85l-45%2C38.83L203%2C211.75a16.4%2C16.4%2C0%2C0%2C1-24.5%2C17.82L128%2C198.49%2C77.47%2C229.57A16.4%2C16.4%2C0%2C0%2C1%2C53%2C211.75l13.76-58.07-45-38.83A16.46%2C16.46%2C0%2C0%2C1%2C31.08%2C86l59-4.76%2C22.76-55.08a16.36%2C16.36%2C0%2C0%2C1%2C30.27%2C0l22.75%2C55.08%2C59%2C4.76a16.46%2C16.46%2C0%2C0%2C1%2C9.37%2C28.86Z%22%2F%3E%3C%2Fsvg%3E");
--px-m-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M228%2C128a12%2C12%2C0%2C0%2C1-12%2C12H140v76a12%2C12%2C0%2C0%2C1-24%2C0V140H40a12%2C12%2C0%2C0%2C1%2C0-24h76V40a12%2C12%2C0%2C0%2C1%2C24%2C0v76h76A12%2C12%2C0%2C0%2C1%2C228%2C128Z%22%2F%3E%3C%2Fsvg%3E");
--px-m-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22%2F%3E%3C%2Fsvg%3E");
}
.px-i,
.px-count,
.px-sub,
.px-sub-inline,
.px-tier,
.px-tags,
.px-note,
.px-verdict,
.px-key,
.px-footnote,
.px-notes-toggle,
.px-stats {
display: none;
}
html.px-on .racecard .px-i {
display: inline-block;
flex: none;
width: 1em;
height: 1em;
fill: currentcolor;
vertical-align: -0.14em;
}
html.px-on .px-orig-glyph {
display: none !important;
}
html.px-on .racecard {
--rc-paper: var(--px-canvas);
--rc-card: #fff;
--rc-card-warm: var(--px-surface);
--rc-row-hover: var(--px-surface);
--rc-ink: var(--px-navy);
--rc-ink-80: #3d4753;
--rc-ink-70: var(--px-ink-2);
--rc-ink-40: var(--px-ink-3);
--rc-rule: var(--px-rule);
--rc-rule-strong: var(--px-tint-2);
--rc-gold: var(--px-tint-2);
--rc-gold-ink: var(--px-ink-2);
--rc-gold-bright: var(--px-tint-2);
--rc-gold-wash: var(--px-tint);
--rc-red: var(--px-navy);
--rc-emerald: var(--px-navy);
--rc-emerald-soft: var(--px-surface);
--hp-card: #fff;
--hp-card-warm: var(--px-surface);
--hp-ink: var(--px-navy);
--hp-ink-70: var(--px-ink-2);
--hp-ink-40: var(--px-ink-3);
--hp-rule: var(--px-rule);
--hp-gold-ink: var(--px-ink-2);
--font-body: var(--px-font);
--font-display: var(--px-display);
background: var(--px-canvas);
border-top: 1px solid var(--px-tint-2);
color: var(--px-navy);
font-family: var(--px-font);
font-size: var(--px-fs-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.px-on .racecard__strip-metric strong,
html.px-on .racecard__number,
html.px-on .racecard__odds,
html.px-on .racecard__odds-trail,
html.px-on .racecard__odds-forecast-val,
html.px-on .racecard .rcf,
html.px-on .racecard .racecard__sr,
html.px-on .racecard__cell--age,
html.px-on .racecard__cell--wgt,
html.px-on .racecard .px-sub,
html.px-on .racecard .px-count,
html.px-on .racecard .rc-rate,
html.px-on .racecard__votes,
html.px-on .racecard__prices-num,
html.px-on .racecard__prices-frac,
html.px-on .racecard .best-price,
html.px-on .racecard-guest-bar__odds,
html.px-on .rc-stat-tile__value {
font-variant-numeric: tabular-nums;
}
html.px-on .racecard > .racecard__strip,
html.px-on .racecard > .racecard__filters,
html.px-on .racecard > .px-key,
html.px-on .racecard > .racecard__grid,
html.px-on .racecard > .racecard__prices {
max-width: var(--px-content-max);
margin-left: auto;
margin-right: auto;
}
html.px-on .racecard__strip {
gap: 18px;
margin-bottom: 18px;
padding: 10px 14px 10px var(--px-content-inset);
background: #fff;
border: 1px solid var(--px-rule);
border-radius: var(--px-radius-lg);
box-shadow: var(--px-shadow-rest);
font-size: var(--px-fs-sm);
color: var(--px-ink-2);
}
html.px-on .racecard__strip-state {
gap: 7px;
padding: 6px 13px 6px 10px;
border-radius: var(--px-radius-pill);
background: var(--px-tint);
border: 1px solid transparent;
color: var(--px-navy);
font-size: var(--px-fs-xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
}
html.px-on .racecard__strip-state .px-i {
width: 16px;
height: 16px;
color: var(--px-mute);
}
html.px-on .racecard__strip-state:has(.px-i) .racecard__strip-state-dot {
display: none;
}
html.px-on .racecard__strip-state-dot {
background: var(--px-mute);
}
html.px-on .racecard__strip--open .racecard__strip-state {
background: var(--px-navy);
color: #fff;
}
html.px-on .racecard__strip--open .racecard__strip-state-dot {
background: #fff;
animation: none;
}
html.px-on .racecard__strip--abandoned .racecard__strip-state {
background: var(--px-surface);
border-color: var(--px-rule);
color: var(--px-ink-3);
}
html.px-on .racecard__strip-metrics {
gap: 22px;
}
html.px-on .racecard__strip-metric {
align-items: center;
gap: 6px;
}
html.px-on .racecard__strip-metric .px-i {
width: 17px;
height: 17px;
margin-right: 1px;
color: var(--px-mute);
}
html.px-on .racecard__strip-metric strong {
font-family: var(--px-font);
font-size: var(--px-fs-lg);
font-weight: 700;
line-height: 1;
color: var(--px-navy);
}
html.px-on .racecard__strip-metric-label {
font-size: var(--px-fs-sm);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--px-ink-2);
}
html.px-on .racecard__strip-draw {
gap: 7px;
padding: 6px 13px 6px 11px;
border-radius: var(--px-radius-pill);
background: #fff;
border: 1px solid var(--px-tint-2);
color: var(--px-navy);
font-size: var(--px-fs-xs);
font-weight: 700;
letter-spacing: 0.01em;
}
html.px-on .racecard__strip-draw-label {
text-transform: none;
}
html.px-on .racecard__strip-draw .px-i {
width: 16px;
height: 16px;
color: var(--px-mute);
}
html.px-on .racecard__strip-draw .px-i--arrow {
width: 13px;
height: 13px;
transition: transform 0.18s ease;
}
html.px-on .racecard__strip-draw:hover {
background: #fff;
border-color: var(--px-ink-3);
}
html.px-on .racecard__strip-draw:hover .px-i--arrow {
transform: translateX(3px);
}
html.px-on .racecard__strip-updated {
gap: 6px;
font-size: var(--px-fs-xs);
font-style: normal;
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .racecard__strip-updated .px-i {
width: 14px;
height: 14px;
color: var(--px-mute);
}
html.px-on .racecard__strip-tool {
gap: 6px;
padding: 6px 13px;
background: #fff;
border: 1px solid var(--px-tint-2);
border-radius: var(--px-radius-pill);
color: var(--px-navy);
font-size: var(--px-fs-xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
}
html.px-on .racecard__strip-tool .px-i {
width: 14px;
height: 14px;
color: var(--px-mute);
}
html.px-on .racecard__strip-tool:hover {
background: var(--px-tint);
border-color: var(--px-ink-3);
color: var(--px-navy);
}
html.px-on .racecard__filters {
gap: 2px;
margin-bottom: 14px;
padding-bottom: 0;
border-bottom: 1px solid var(--px-tint-2);
}
html.px-on .racecard__filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px 11px;
border-bottom: 2px solid transparent;
border-radius: 0;
font-size: var(--px-fs-base);
font-weight: 600;
letter-spacing: 0;
color: var(--px-ink-2);
}
html.px-on .racecard__filter .px-i {
width: 16px;
height: 16px;
color: var(--px-mute);
}
html.px-on .racecard__filter:hover {
color: var(--px-navy);
}
html.px-on .racecard__filter.is-active {
color: var(--px-navy);
font-weight: 700;
border-bottom-color: var(--px-navy);
}
html.px-on .racecard__filter:focus-visible {
outline: var(--px-focus-width) solid var(--px-focus-color);
outline-offset: -2px;
}
html.px-on .racecard .px-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 21px;
height: 19px;
padding: 0 7px;
border-radius: var(--px-radius-pill);
background: var(--px-tint);
color: var(--px-ink-3);
font-size: var(--px-fs-2xs);
font-weight: 700;
}
html.px-on .racecard .px-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin-bottom: 14px;
padding: 0 4px;
font-size: var(--px-fs-xs);
color: var(--px-ink-2);
}
html.px-on .racecard.racecard--prices-active .px-key {
display: none;
}
html.px-on .racecard .px-key__t {
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .racecard .px-key__i {
display: inline-flex;
align-items: center;
gap: 6px;
}
html.px-on .racecard .px-key__i .rcf {
margin: 0;
min-width: 20px;
height: 20px;
font-size: var(--px-fs-2xs);
}
html.px-on .racecard .px-key__i .racecard__sr {
font-size: var(--px-fs-xs);
padding: 2px 7px;
min-width: 0;
}
html.px-on .racecard .px-key__sep {
width: 1px;
height: 16px;
background: var(--px-tint-2);
}
html.px-on .racecard__columns {
padding: 10px 18px 9px;
background: var(--px-tint);
border: 1px solid var(--px-rule);
border-radius: var(--px-radius-md);
box-shadow: none;
font-family: var(--px-font);
font-weight: 700;
font-size: var(--px-fs-2xs);
letter-spacing: 0.12em;
color: var(--px-ink-3);
}
html.px-on .racecard__col .px-i {
width: 13px;
height: 13px;
color: var(--px-mute);
}
html.px-on .racecard__col[data-sortable]:hover {
color: var(--px-navy);
}
html.px-on .racecard__col[aria-sort='ascending'],
html.px-on .racecard__col[aria-sort='descending'] {
color: var(--px-navy);
font-weight: 700;
}
html.px-on .racecard__col[aria-sort='ascending']::after,
html.px-on .racecard__col[aria-sort='descending']::after {
bottom: -6px;
background: var(--px-navy);
}
html.px-on .racecard__col .racecard__col-icon {
display: inline-block;
flex: none;
width: 8px;
height: 10px;
font-size: 0;
color: inherit;
background: currentcolor;
opacity: 0.45;
-webkit-mask: var(--px-m-caret-up-down) center / contain no-repeat;
mask: var(--px-m-caret-up-down) center / contain no-repeat;
transition: opacity 0.15s;
}
html.px-on .racecard__col .racecard__col-icon::before {
content: none;
}
html.px-on .racecard__col[data-sortable]:hover .racecard__col-icon {
opacity: 0.9;
}
html.px-on .racecard__col[aria-sort='ascending'] .racecard__col-icon {
opacity: 1;
-webkit-mask-image: var(--px-m-caret-up);
mask-image: var(--px-m-caret-up);
}
html.px-on .racecard__col[aria-sort='descending'] .racecard__col-icon {
opacity: 1;
-webkit-mask-image: var(--px-m-caret-down);
mask-image: var(--px-m-caret-down);
}
html.px-on .racecard__col-help {
flex: none;
width: 15px;
height: 15px;
margin-left: 3px;
background: #fff;
border: 1px solid var(--px-tint-2);
color: var(--px-ink-2);
font-size: var(--px-fs-2xs);
font-weight: 700;
}
html.px-on .racecard__col-help:hover {
background: var(--px-tint-2);
border-color: var(--px-ink-3);
color: var(--px-navy);
}
html.px-on .racecard__col {
gap: 3px;
}
@media (width > 1330px) {
html.px-on .racecard__col--votes .px-i {
display: none;
}
}
@media (width > 640px) and (width <= 1100px) {
html.px-on
:is(
.racecard__col--number,
.racecard__col--or,
.racecard__col--sr,
.racecard__col--rpr
)[aria-sort='none']
.racecard__col-icon {
display: none;
}
}
html.px-on .racecard__runners {
gap: 12px;
padding-top: 12px;
}
html.px-on .racecard__runner {
padding: 14px 18px;
background: #fff;
border: 1px solid var(--px-tint-2);
border-radius: var(--px-radius-lg);
box-shadow: var(--px-shadow-rest);
transition:
transform 0.2s var(--px-ease),
box-shadow 0.2s var(--px-ease),
border-color 0.2s var(--px-ease);
}
@media (hover: hover) {
html.px-on .racecard__runner:hover {
transform: translateY(-2px);
border-color: var(--px-lift-line);
box-shadow: var(--px-shadow-lift);
}
}
html.px-on .racecard__runner:active {
transform: translateY(-2px);
box-shadow: var(--px-shadow-lift);
}
html.px-on .racecard__runner--guest-pick,
html.px-on .racecard__runner--voted {
background: var(--px-surface);
border-color: var(--px-tint-2);
box-shadow:
inset 3px 0 0 var(--px-navy),
var(--px-shadow-rest);
}
html.px-on .racecard__runner--leader {
box-shadow:
inset 3px 0 0 var(--px-ink-3),
var(--px-shadow-rest);
}
@media (hover: hover) {
html.px-on .racecard__runner--guest-pick:hover,
html.px-on .racecard__runner--voted:hover {
box-shadow:
inset 3px 0 0 var(--px-navy),
var(--px-shadow-lift);
}
html.px-on .racecard__runner--leader:hover {
box-shadow:
inset 3px 0 0 var(--px-ink-3),
var(--px-shadow-lift);
}
}
html.px-on .racecard__runner--featured {
background: var(--px-surface);
border-color: var(--px-tint-2);
}
html.px-on .racecard__runner--nr {
background: var(--px-surface);
color: var(--px-ink-3);
}
html.px-on .racecard__badge--fav,
html.px-on .racecard__badge--big-race {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
html.px-on .racecard__badge--nr,
html.px-on .racecard__badge--result {
background: var(--px-tint);
border-color: var(--px-tint-2);
color: var(--px-navy);
}
html.px-on .racecard__badge--7day {
background: #fff;
border-color: var(--px-tint-2);
color: var(--px-ink-2);
}
html.px-on .vote-score-pill--won {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
box-shadow: none;
}
html.px-on .vote-score-pill--placed {
background: var(--px-tint);
border-color: var(--px-tint-2);
color: var(--px-navy);
}
html.px-on .vote-score-pill--unplaced,
html.px-on .vote-score-pill--pending,
html.px-on .vote-score-pill--abandoned {
background: var(--px-surface);
border-color: var(--px-rule);
color: var(--px-ink-3);
}
html.px-on .vote-score-pill__bonus {
background: var(--px-ink-2);
}
html.px-on .racecard__runner--nr .racecard__name,
html.px-on .racecard__runner--nr .racecard__number {
text-decoration-color: var(--px-ink-3);
}
html.px-on .racecard__number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 29px;
height: 29px;
padding: 0 4px;
border-radius: var(--px-radius-sm);
background: #fff;
box-shadow: inset 0 0 0 1px var(--px-tint-2);
font-family: var(--px-display);
font-size: var(--px-fs-lg);
font-weight: 700;
color: var(--px-navy);
}
html.px-on .racecard__silk--img {
background: var(--px-surface);
border-radius: var(--px-radius-sm);
filter: none;
}
html.px-on .racecard__name {
display: inline-block;
max-width: 100%;
vertical-align: bottom;
font-family: var(--px-display);
font-size: var(--px-fs-xl);
font-weight: 700;
letter-spacing: 0;
color: var(--px-navy);
border-bottom: 0;
}
html.px-on a.racecard__name:hover {
color: var(--px-navy);
text-decoration: underline;
text-underline-offset: 3px;
}
html.px-on .racecard__name-meta {
font-size: var(--px-fs-xs);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .racecard .px-sub-inline {
display: inline;
}
html.px-on .racecard .px-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 5px;
}
html.px-on .racecard .px-mk {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px 2px 7px;
border-radius: var(--px-radius-pill);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.45;
white-space: nowrap;
cursor: help;
}
html.px-on .racecard .px-mk .px-i {
width: 12px;
height: 12px;
color: var(--px-mute);
}
html.px-on .racecard__cell--odds .runner-market-chip {
display: none;
}
html.px-on .racecard .racecard__form {
font-family: var(--px-font);
}
html.px-on .racecard .rcf {
position: relative;
min-width: 21px;
height: 23px;
margin-right: 3px;
padding: 0 5px;
border-radius: var(--px-radius-sm);
font-family: var(--px-font);
font-size: var(--px-fs-xs);
font-weight: 700;
cursor: help;
}
html.px-on .racecard .rcf--win {
background: var(--px-gold-fill);
color: #33260a;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 55%),
0 1px 2px rgb(110 83 11 / 35%);
}
html.px-on .racecard .rcf--dnf {
outline-offset: -1px;
background: var(--px-claret-bg);
color: var(--px-claret);
box-shadow: inset 0 0 0 1px rgb(154 51 64 / 35%);
outline: 0;
}
html.px-on .racecard .rcf--sep {
width: 8px;
min-width: 0;
padding: 0;
background: transparent;
box-shadow: none;
color: var(--px-ink-3);
cursor: default;
}
html.px-on .racecard__jockey {
gap: 7px;
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
color: var(--px-navy);
}
html.px-on .racecard__jockey .racecard__jockey-name {
font-weight: 600;
}
html.px-on .racecard__trainer {
gap: 7px;
margin-top: 4px;
font-family: var(--px-font);
font-size: var(--px-fs-xs);
font-style: normal;
font-weight: 500;
color: var(--px-ink-2);
}
html.px-on .racecard__jockey::before,
html.px-on .racecard__trainer::before {
width: 17px;
height: 17px;
border-radius: var(--px-radius-sm);
background: var(--px-tint);
color: var(--px-ink-2);
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
}
html.px-on .racecard__jockey .connection-link:hover,
html.px-on .racecard__trainer .connection-link:hover,
html.px-on .racecard__jockey .connection-link:focus-visible,
html.px-on .racecard__trainer .connection-link:focus-visible {
color: var(--px-navy);
outline-color: var(--px-navy);
}
html.px-on .racecard .rc-rate {
padding: 2px 6px;
border-radius: var(--px-radius-pill);
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
line-height: 1.25;
}
html.px-on .racecard .rc-rate__num small {
font-size: 1em;
font-weight: 600;
}
html.px-on .racecard .rc-rate--hot {
background: var(--px-tint-2);
border-color: var(--px-ink-3);
color: var(--px-navy);
box-shadow: none;
}
html.px-on .racecard .rc-rate--warm {
background: var(--px-tint);
border-color: var(--px-tint-2);
color: var(--px-navy);
box-shadow: none;
}
html.px-on .racecard .rc-rate--neutral {
background: #fff;
border-color: var(--px-rule);
color: var(--px-ink-2);
}
html.px-on .racecard .rc-rate--cold {
background: transparent;
border-color: var(--px-rule);
color: var(--px-ink-3);
}
html.px-on .racecard__cell--or .racecard__sr,
html.px-on .racecard__cell--sr .racecard__sr,
html.px-on .racecard__cell--rpr .racecard__sr,
html.px-on .racecard .px-key .racecard__sr {
min-width: 38px;
padding: 4px 7px;
background: transparent;
border: 0;
border-radius: var(--px-radius-sm);
font-family: var(--px-font);
font-size: var(--px-fs-base);
font-weight: 700;
color: var(--px-navy);
}
html.px-on .racecard__cell--sr .racecard__sr {
background: #fff;
box-shadow: inset 0 0 0 1px var(--px-rule);
}
html.px-on .racecard .racecard__sr.px-top {
cursor: help;
}
html.px-on .racecard .px-key .racecard__sr.px-top {
min-width: 0;
padding: 2px 7px;
box-shadow: none;
font-size: var(--px-fs-xs);
}
html.px-on .racecard__sr-tag {
background: var(--px-tint);
color: var(--px-navy);
}
html.px-on .racecard__cell--age,
html.px-on .racecard__cell--wgt {
font-family: var(--px-font);
font-size: var(--px-fs-base);
font-weight: 600;
line-height: 1.2;
color: var(--px-navy);
}
html.px-on .racecard .px-sub {
display: block;
margin-top: 3px;
font-size: var(--px-fs-2xs);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--px-ink-3);
white-space: nowrap;
}
html.px-on .racecard__stars {
display: inline-flex;
gap: 2px;
font-size: 0;
letter-spacing: 0;
vertical-align: middle;
}
html.px-on .racecard__stars-on,
html.px-on .racecard__stars-off {
display: inline-block;
width: 13px;
height: 13px;
font-size: 0;
-webkit-mask: var(--px-m-star) center / contain no-repeat;
mask: var(--px-m-star) center / contain no-repeat;
}
html.px-on .racecard .px-tier {
display: block;
margin-top: 5px;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--px-ink-3);
}
html.px-on .racecard .px-tier--strong,
html.px-on .racecard .px-tier--solid {
color: var(--px-navy);
}
html.px-on .racecard__votes {
border-radius: var(--px-radius-sm);
background: #fff;
border: 1px solid var(--px-rule);
color: var(--px-ink-3);
font-family: var(--px-font);
}
html.px-on .racecard__runner--leader .racecard__votes {
background: var(--px-tint-2);
border-color: var(--px-ink-3);
color: var(--px-navy);
}
html.px-on .racecard__odds:hover {
border-color: var(--px-ink-3);
transform: none;
background: var(--px-navy-2);
box-shadow: var(--px-shadow-price);
}
html.px-on .racecard__odds--fav {
animation: none;
background: var(--px-gold);
color: #2a1f06;
border: 0;
box-shadow: var(--px-shadow-price);
}
html.px-on .racecard__odds--outsider {
box-shadow: none;
background: var(--px-navy);
color: #fff;
border: 0;
}
html.px-on .racecard__odds--winner {
animation: none;
background: var(--px-gold);
color: #2a1f06;
border: 0;
}
html.px-on .racecard__odds-flag {
width: 16px;
height: 16px;
font-size: 0;
background: var(--px-navy);
filter: none;
-webkit-mask: var(--px-m-check) center / 70% no-repeat;
mask: var(--px-m-check) center / 70% no-repeat;
}
html.px-on .racecard__odds-trail {
gap: 4px;
padding: 3px 6px;
border-radius: var(--px-radius-pill);
background: var(--px-surface);
border: 1px solid var(--px-line);
color: var(--px-ink-3);
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 600;
margin-top: 7px;
}
html.px-on .racecard__odds-trail::before {
content: 'Open';
margin-right: 1px;
font-weight: 500;
color: var(--px-icon);
}
html.px-on .racecard__odds-trail > .px-i--steam,
html.px-on .racecard__odds-trail > .px-i--drift,
html.px-on .racecard__odds-trail > .px-i--arrow {
display: none;
}
html.px-on .racecard__odds-trail .racecard__odds-trail-step--current {
font-weight: 700;
color: var(--px-ink-3);
}
html.px-on .racecard__odds-trail .px-i {
width: 11px;
height: 11px;
}
html.px-on .racecard__odds-trail .racecard__odds-trail-step--opening {
color: var(--px-ink-3);
text-decoration-color: var(--px-ink-3);
}
html.px-on .racecard__odds-trail .racecard__odds-trail-arrow,
html.px-on .racecard__odds-trail .px-i--arrow {
color: var(--px-icon);
}
html.px-on .racecard__odds-forecast {
margin-top: 6px;
border-radius: var(--px-radius-pill);
background: var(--px-surface);
border-color: var(--px-tint-2);
color: var(--px-ink-2);
font-family: var(--px-font);
}
html.px-on .racecard__odds-forecast-lbl {
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--px-ink-3);
}
html.px-on .racecard__odds-forecast-val {
color: var(--px-navy);
}
html.px-on .racecard__pick {
gap: 6px;
padding: 9px 15px 9px 13px;
border: 1.5px solid var(--px-navy);
border-radius: var(--px-radius-pill);
background: #fff;
box-shadow: 0 1px 2px rgb(15 45 79 / 8%);
color: var(--px-navy);
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 700;
letter-spacing: 0.02em;
transition:
background 0.15s ease,
color 0.15s ease;
}
html.px-on .racecard__pick::before {
content: '';
width: 12px;
height: 12px;
background: currentcolor;
-webkit-mask: var(--px-m-plus) center / contain no-repeat;
mask: var(--px-m-plus) center / contain no-repeat;
}
html.px-on .racecard__pick:hover {
box-shadow: none;
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
html.px-on .racecard__pick:focus-visible {
outline: var(--px-focus-width) solid var(--px-focus-color);
outline-offset: var(--px-focus-offset);
}
html.px-on .racecard__pick--guest.is-selected::before,
html.px-on .racecard__pick--active::before {
-webkit-mask-image: var(--px-m-check);
mask-image: var(--px-m-check);
}
html.px-on .racecard .px-notes-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
grid-column: 1 / -1;
justify-self: start;
min-height: 32px;
margin: 0;
padding: 0 13px 0 11px;
background: #fff;
border: 1px solid var(--px-tint-2);
border-radius: var(--px-radius-pill);
box-shadow: 0 1px 2px rgb(20 22 31 / 5%);
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
letter-spacing: 0;
line-height: 1;
color: var(--px-navy);
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
html.px-on .racecard .px-notes-toggle .px-i {
width: 15px;
height: 15px;
color: var(--px-mute);
}
html.px-on .racecard .px-notes-toggle .px-notes-toggle__chev {
width: 12px;
height: 12px;
margin-left: 3px;
color: var(--px-navy);
transition: transform 0.2s ease;
}
html.px-on .racecard .px-open .px-notes-toggle__chev {
transform: rotate(180deg);
}
html.px-on .racecard .px-notes-toggle:hover {
background: var(--px-surface);
border-color: var(--px-ink-3);
}
html.px-on .racecard .px-notes-toggle:focus-visible {
outline: var(--px-focus-width) solid var(--px-focus-color);
outline-offset: var(--px-focus-offset);
}
html.px-on .racecard__runner:not(.px-open) > .racecard__cell--comment > :not(.px-notes-toggle) {
display: none !important;
}
html.px-on .racecard .px-hn {
font-weight: 700;
color: var(--px-navy);
}
@media (width > 640px) {
html.px-on .racecard__col--comment {
display: none;
}
html.px-on .racecard__cell--comment {
grid-column: 3 / -1;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline;
gap: 8px 16px;
margin: 10px 0 0;
padding: 0;
background: none;
border: 0;
border-radius: var(--px-radius-md);
box-shadow: none;
}
html.px-on .racecard__runner.px-open > .racecard__cell--comment {
padding: 10px 18px 14px 10px;
background: var(--px-surface);
box-shadow: inset 0 0 0 1px var(--px-rule);
}
html.px-on .racecard__runner.px-open > .racecard__cell--comment > .px-notes-toggle {
margin-bottom: 4px;
}
html.px-on .racecard__comment {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
font-family: var(--px-comment);
font-size: var(--px-fs-base);
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
color: var(--px-lead);
}
html.px-on .racecard .px-note {
display: inline-flex;
align-items: center;
gap: 6px;
padding-left: 4px;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
white-space: nowrap;
}
html.px-on .racecard .px-note .px-i {
width: 16px;
height: 16px;
vertical-align: -0.25em;
}
html.px-on .racecard .px-verdict {
display: block;
font-size: var(--px-fs-sm);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on
.racecard__cell--comment:has(> .px-notes-toggle > .px-i--sparkle)
> .racecard__comment {
font-family: var(--px-font);
font-size: var(--px-fs-sm);
color: var(--px-ink-2);
}
html.px-on .racecard__runner,
html.px-on .racecard__columns {
column-gap: 8px;
}
}
@media (width > 1330px) {
html.px-on .racecard__grid {
--rc-cols: 34px 44px minmax(128px, 1fr) 146px minmax(196px, 1.45fr) 44px 50px 56px 38px 58px
84px 56px 94px 86px;
}
}
@media (width > 1330px) and (width <= 1440px) {
html.px-on .racecard {
padding-left: 24px;
padding-right: 24px;
}
}
@media (width > 640px) and (width <= 1330px) {
html.px-on .racecard {
padding-left: 16px;
padding-right: 16px;
}
html.px-on .racecard__col--age,
html.px-on .racecard__cell--age,
html.px-on .racecard__col--wgt,
html.px-on .racecard__cell--wgt {
display: none;
}
html.px-on .racecard__name-meta {
display: block;
margin-top: 3px;
}
html.px-on .racecard .rcf {
min-width: 20px;
margin-right: 2px;
padding: 0 4px;
}
}
@media (width > 1100px) and (width <= 1330px) {
html.px-on .racecard__col--votes,
html.px-on .racecard__cell--votes {
display: none;
}
html.px-on .racecard__grid {
--rc-cols: 32px 42px minmax(128px, 1fr) 132px minmax(196px, 1.45fr) 40px 48px 56px 80px 90px
82px;
}
}
@media (width > 640px) and (width <= 1100px) {
html.px-on .racecard__grid .racecard__runner,
html.px-on .racecard__grid .racecard__columns {
grid-template-columns: 30px 40px minmax(0, 1.4fr) 48px 48px 54px minmax(92px, 1fr) 92px 84px;
grid-template-areas:
'num  silk horse conn conn conn conn odds  pick'
'form form form  or   sr   rpr  ai   votes .';
gap: 12px 8px;
}
html.px-on .racecard__grid .racecard__columns {
row-gap: 10px;
}
html.px-on .racecard__cell--number,
html.px-on .racecard__col--number {
grid-area: num;
}
html.px-on .racecard__cell--silk,
html.px-on .racecard__col--silk {
grid-area: silk;
}
html.px-on .racecard__cell--horse,
html.px-on .racecard__col--horse {
grid-area: horse;
}
html.px-on .racecard__cell--conn,
html.px-on .racecard__col--conn {
grid-area: conn;
}
html.px-on .racecard__cell--odds,
html.px-on .racecard__col--odds {
grid-area: odds;
}
html.px-on .racecard__cell--pick,
html.px-on .racecard__col--pick {
grid-area: pick;
}
html.px-on .racecard__cell--form,
html.px-on .racecard__col--form {
grid-area: form;
}
html.px-on .racecard__cell--or,
html.px-on .racecard__col--or {
grid-area: or;
}
html.px-on .racecard__cell--sr,
html.px-on .racecard__col--sr {
grid-area: sr;
}
html.px-on .racecard__cell--rpr,
html.px-on .racecard__col--rpr {
grid-area: rpr;
}
html.px-on .racecard__cell--ai,
html.px-on .racecard__col--ai {
grid-area: ai;
}
html.px-on .racecard__cell--votes,
html.px-on .racecard__col--votes {
grid-area: votes;
}
html.px-on .racecard__col--form,
html.px-on .racecard__col--rpr,
html.px-on .racecard__col--ai {
display: flex;
}
html.px-on .racecard__cell--form,
html.px-on .racecard__cell--rpr,
html.px-on .racecard__cell--ai {
display: block;
}
html.px-on .racecard__cell--comment {
grid-column: 1 / -1;
grid-row: 3;
}
html.px-on .racecard__runner {
padding: 14px;
}
html.px-on .racecard__cell--conn {
align-items: stretch;
}
}
@media (width > 640px) and (width < 900px) {
html.px-on .racecard__grid .racecard__runner,
html.px-on .racecard__grid .racecard__columns {
grid-template-columns: 26px 36px minmax(0, 1.6fr) 40px 40px 44px minmax(74px, 1fr) 88px 70px;
column-gap: 6px;
}
html.px-on .racecard__pick {
padding: 8px 11px 8px 10px;
}
html.px-on .racecard__odds-trail {
gap: 3px;
padding: 2px 6px;
font-size: var(--px-fs-2xs);
letter-spacing: 0;
}
}
@media (width > 640px) and (width < 768px) {
html.px-on .racecard__cell--conn .rc-rate {
display: none;
}
html.px-on .racecard__name,
html.px-on .racecard__jockey-name,
html.px-on .racecard__trainer-name {
white-space: normal;
text-overflow: clip;
}
html.px-on .racecard__name {
font-size: var(--px-fs-lg);
line-height: 1.15;
}
}
@media (width > 640px) {
html.px-on .racecard .rc-ribbon,
html.px-on .racecard .rc-mob-compact,
html.px-on .racecard .rc-mob-filterbar,
html.px-on .rc-mob-snackbar,
html.px-on .rc-mob-picks-counter {
display: none;
}
}
html.px-on .racecard__prices-tablewrap {
background: #fff;
border: 1px solid var(--px-rule);
border-radius: var(--px-radius-lg);
box-shadow: var(--px-shadow-rest);
}
html.px-on .racecard__prices-table {
font-family: var(--px-font);
color: var(--px-navy);
}
html.px-on .racecard__prices-th {
padding: 11px 12px;
background: var(--px-tint);
border-bottom: 1px solid var(--px-rule);
color: var(--px-ink-2);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.12em;
}
html.px-on .racecard__prices-th--best {
color: var(--px-navy);
}
html.px-on .racecard__prices-row:hover {
background: var(--px-surface);
}
html.px-on .racecard__prices-row + .racecard__prices-row {
border-top-color: var(--px-rule);
}
html.px-on .racecard__prices-horse {
display: table-cell;
vertical-align: middle;
text-align: left;
white-space: nowrap;
}
html.px-on .racecard__prices-num {
margin-right: 10px;
border-radius: var(--px-radius-sm);
background: #fff;
border-color: var(--px-tint-2);
color: var(--px-navy);
font-weight: 700;
vertical-align: middle;
}
html.px-on .racecard__prices-name,
html.px-on .racecard__prices-frac {
color: var(--px-navy);
}
html.px-on .racecard .movement-chip {
gap: 3px;
background: transparent;
font-family: var(--px-font);
font-weight: 700;
}
html.px-on .racecard .movement-chip .px-i {
width: 12px;
height: 12px;
}
html.px-on .racecard .movement-chip--in {
background: var(--px-tint);
color: var(--px-navy);
}
html.px-on .racecard .movement-chip--out {
background: transparent;
color: var(--px-ink-3);
box-shadow: inset 0 0 0 1px var(--px-tint-2);
}
html.px-on .racecard .movement-chip--flat {
color: var(--px-ink-3);
}
html.px-on .racecard .movement-chip--new {
color: var(--px-ink-2);
}
html.px-on .racecard .since-open {
font-size: var(--px-fs-2xs);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .racecard__prices-cell--best {
background: var(--px-surface);
border-left-color: var(--px-rule);
}
html.px-on .racecard .best-price {
border-radius: var(--px-radius-sm);
background: #fff;
border-color: var(--px-ink-3);
color: var(--px-navy);
}
html.px-on .racecard .best-price strong {
font-weight: 700;
color: var(--px-navy);
}
html.px-on .racecard .best-price__book {
color: var(--px-ink-3);
}
html.px-on .racecard__prices-footnote.px-orig-block,
html.px-on .racecard__comment.px-orig-block {
display: none;
}
html.px-on .racecard .px-footnote {
display: block;
margin: 12px 4px 0;
font-size: var(--px-fs-xs);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on .racecard .px-footnote .movement-chip {
vertical-align: 1px;
}
html.px-on .racecard__toast {
background: var(--px-navy);
border-color: var(--px-navy);
font-family: var(--px-font);
}
html.px-on .racecard-guest-bar {
background: var(--px-navy);
border-top: 1px solid rgb(255 255 255 / 18%);
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-family: var(--px-font);
}
html.px-on .racecard-guest-bar__label {
color: var(--px-on-dark);
}
html.px-on .racecard-guest-bar__silk {
background: rgb(255 255 255 / 16%) !important;
border-radius: var(--px-radius-md);
font-family: var(--px-font);
}
html.px-on .racecard-guest-bar__silk[data-px-num] {
font-size: 0;
}
html.px-on .racecard-guest-bar__silk[data-px-num]::before {
content: attr(data-px-num);
font-size: var(--px-fs-md);
font-weight: 700;
}
html.px-on .racecard-guest-bar__odds {
background: rgb(255 255 255 / 14%);
border-color: rgb(255 255 255 / 30%);
border-radius: var(--px-radius-pill);
color: #fff;
}
html.px-on .racecard-guest-bar__cta {
background: #fff;
border-color: #fff;
border-radius: var(--px-radius-pill);
color: var(--px-navy);
}
html.px-on .racecard-guest-bar__cta:hover {
background: var(--px-tint);
}
html.px-on .racecard-guest-bar__clear {
border-radius: var(--px-radius-pill);
}
html.px-on .racecard-guest-bar__clear:hover {
background: rgb(255 255 255 / 10%);
border-color: rgb(255 255 255 / 45%);
color: #fff;
}
@media (width <= 560px) {
html.px-on .racecard-guest-bar__inner {
gap: 10px;
padding: 10px 12px;
}
html.px-on .racecard-guest-bar__silk {
display: none;
}
html.px-on .racecard-guest-bar__left {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: 'label odds' 'horse horse';
align-items: center;
gap: 3px 8px;
flex: 1 1 auto;
min-width: 0;
}
html.px-on .racecard-guest-bar__text {
display: contents;
}
html.px-on .racecard-guest-bar__label {
grid-area: label;
line-height: 1.2;
}
html.px-on .racecard-guest-bar__odds {
grid-area: odds;
justify-self: start;
padding: 1px 8px;
font-size: var(--px-fs-xs);
line-height: 1.35;
}
html.px-on .racecard-guest-bar__horse {
grid-area: horse;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--px-fs-md);
line-height: 1.25;
}
html.px-on .racecard-guest-bar__cta {
flex: none;
gap: 0;
min-height: 40px;
padding: 0 15px;
font-size: 0;
}
html.px-on .racecard-guest-bar__cta::after {
content: 'Join free \2192';
font-size: var(--px-fs-sm);
}
html.px-on .racecard-guest-bar__clear {
flex: none;
width: 40px;
height: 40px;
}
}
@media (height <= 500px) {
html.px-on .racecard-guest-bar__inner {
padding-top: 6px;
padding-bottom: 6px;
}
html.px-on .race-toolbar {
position: relative;
top: auto;
}
}
@media (width <= 640px) {
html.px-on .racecard__grid .racecard__runner {
grid-template-columns: 34px 40px minmax(0, 1fr) auto;
grid-template-rows: none;
grid-template-areas:
'num  silk horse odds'
'conn conn conn  pick'
'stat stat stat  stat'
'note note note  note';
gap: 12px 10px;
padding: 14px;
}
html.px-on .racecard__runner[data-rc-expanded='true'] {
box-shadow: var(--px-shadow-rest);
}
html.px-on .racecard__runner--guest-pick,
html.px-on .racecard__runner--voted {
box-shadow:
inset 3px 0 0 var(--px-navy),
var(--px-shadow-rest);
}
html.px-on .racecard__runner .rc-mob,
html.px-on .racecard__runner .rc-spotlight,
html.px-on .racecard__runner .rc-mob-compact,
html.px-on .racecard__runner .rc-ribbon {
display: none !important;
}
html.px-on .racecard__runner > .racecard__cell--number {
grid-area: num;
}
html.px-on .racecard__runner > .racecard__cell--silk {
grid-area: silk;
}
html.px-on .racecard__runner > .racecard__cell--horse {
grid-area: horse;
}
html.px-on .racecard__runner > .racecard__cell--odds {
grid-area: odds;
}
html.px-on .racecard__runner > .racecard__cell--conn {
grid-area: conn;
}
html.px-on .racecard__runner > .racecard__cell--pick {
grid-area: pick;
display: flex !important;
align-self: center;
justify-content: flex-end;
margin: 0;
padding: 0;
}
html.px-on .racecard__runner > .px-stats {
grid-area: stat;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
padding-top: 12px;
border-top: 1px solid var(--px-rule);
}
html.px-on .racecard__runner > .racecard__cell--comment {
grid-area: note;
display: grid !important;
gap: 8px;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: var(--px-radius-md);
box-shadow: none;
}
html.px-on .racecard__cell--number {
width: 34px;
height: 34px;
border-radius: var(--px-radius-md);
background: #fff;
box-shadow: inset 0 0 0 1px var(--px-tint-2);
}
html.px-on .racecard__cell--number .racecard__number {
min-width: 0;
height: auto;
padding: 0;
background: none;
box-shadow: none;
font-family: var(--px-display);
font-size: var(--px-fs-lg);
font-weight: 700;
}
html.px-on .racecard__cell--horse .racecard__name {
font-family: var(--px-display) !important;
font-size: clamp(18px, 5.2vw, 22px) !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: break-word;
line-height: 1.12;
}
html.px-on .racecard__cell--horse .racecard__name-meta {
display: block;
margin-top: 1px;
font-size: var(--px-fs-xs);
}
html.px-on .racecard .px-tags {
margin-top: 2px;
}
html.px-on .racecard__cell--odds .racecard__odds {
font-family: var(--px-display);
width: auto;
min-width: 60px;
height: 42px;
padding: 0 13px;
border: 0;
border-radius: var(--px-radius-pill);
background: var(--px-navy) !important;
box-shadow: var(--px-shadow-price) !important;
color: #fff;
font-size: var(--px-fs-xl);
font-weight: 700;
}
html.px-on .racecard__cell--odds .racecard__odds--fav {
border: 2px solid var(--px-navy);
background: var(--px-gold) !important;
color: #2a1f06;
}
html.px-on .racecard__cell--odds .racecard__odds-forecast {
color: var(--px-ink-3);
}
html.px-on .racecard__odds-forecast-lbl {
font-size: var(--px-fs-2xs);
}
html.px-on .racecard__cell--odds .racecard__odds-trail {
margin-top: 2px;
}
html.px-on .racecard__cell--conn .racecard__jockey-name::before,
html.px-on .racecard__cell--conn .racecard__trainer-name::before {
content: none;
}
html.px-on .racecard__cell--conn .racecard__jockey-name,
html.px-on .racecard__cell--conn .racecard__trainer-name {
font-style: normal;
}
html.px-on .racecard__cell--conn .connection-rate {
background: var(--px-tint);
color: var(--px-navy);
}
html.px-on .racecard__runner .racecard__cell--pick .racecard__pick,
html.px-on .racecard__runner[data-rc-expanded='true'] .racecard__cell--pick .racecard__pick {
display: inline-flex !important;
align-items: center;
width: auto !important;
padding: 10px 15px 10px 13px !important;
border-radius: var(--px-radius-pill) !important;
box-shadow: none !important;
font-family: var(--px-font);
font-size: var(--px-fs-sm) !important;
font-weight: 700;
background: #fff !important;
border: 1.5px solid var(--px-navy) !important;
color: var(--px-navy) !important;
}
html.px-on
.racecard__runner[data-rc-expanded='true']
.racecard__cell--pick
.racecard__pick::before {
content: '';
width: 12px;
height: 12px;
font-size: 0;
color: inherit !important;
background: currentcolor;
-webkit-mask: var(--px-m-plus) center / contain no-repeat;
mask: var(--px-m-plus) center / contain no-repeat;
}
html.px-on
.racecard__runner[data-rc-expanded='true']
.racecard__cell--pick
.racecard__pick::after {
content: none !important;
}
html.px-on .racecard__runner .racecard__cell--pick .racecard__pick--active::before,
html.px-on .racecard__runner .racecard__cell--pick .racecard__pick.is-selected::before {
content: '';
-webkit-mask-image: var(--px-m-check);
mask-image: var(--px-m-check);
}
html.px-on .racecard .px-stat {
display: inline-flex;
align-items: center;
gap: 6px;
}
html.px-on .racecard .px-stat__k {
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--px-ink-3);
}
html.px-on .racecard .px-stat .racecard__form {
display: inline-flex;
}
html.px-on .racecard .px-stat .racecard__sr {
display: inline-block;
min-width: 34px;
padding: 5px 6px;
border-radius: var(--px-radius-hair);
background: #fff;
box-shadow: inset 0 0 0 1px var(--px-rule);
font-family: var(--px-font);
font-size: var(--px-fs-base);
font-weight: 700;
line-height: 1;
text-align: center;
color: var(--px-navy);
}
html.px-on .racecard .px-stat .racecard__sr.px-top {
box-shadow: inset 0 0 0 1px var(--px-ink-3);
}
html.px-on .racecard .px-stat__v {
display: inline-flex;
align-items: center;
gap: 8px;
}
html.px-on .racecard .px-stat .px-tier {
display: inline;
margin: 0;
}
html.px-on .racecard .px-notes-toggle {
width: 100%;
min-height: 40px;
padding: 0 12px;
}
html.px-on .racecard .px-notes-toggle .px-notes-toggle__chev {
margin-left: auto;
}
html.px-on .racecard__runner.px-open > .racecard__cell--comment {
padding: 10px 12px 14px;
background: var(--px-surface);
box-shadow: inset 0 0 0 1px var(--px-rule);
}
html.px-on .racecard__cell--comment .px-note {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .racecard__cell--comment .px-note .px-i {
width: 15px;
height: 15px;
}
html.px-on .racecard__cell--comment .racecard__comment {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
font-family: var(--px-comment);
font-size: var(--px-fs-md);
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
color: var(--px-lead);
}
html.px-on .racecard__cell--comment .px-verdict {
display: block;
font-size: var(--px-fs-base);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on
.racecard__cell--comment:has(> .px-notes-toggle > .px-i--sparkle)
> .racecard__comment {
font-family: var(--px-font);
font-size: var(--px-fs-base);
color: var(--px-ink-2);
}
html.px-on .rc-mob-filterbar__pill {
gap: 6px;
border-color: var(--px-tint-2);
color: var(--px-ink-2);
font-family: var(--px-font);
}
html.px-on .rc-mob-filterbar__pill .px-i {
width: 14px;
height: 14px;
}
html.px-on .rc-mob-filterbar__pill:hover {
border-color: var(--px-ink-3);
}
html.px-on .rc-mob-filterbar__pill.is-active {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
html.px-on .rc-mob-snackbar {
background: var(--px-navy);
font-family: var(--px-font);
}
html.px-on .rc-mob-snackbar__undo {
color: var(--px-on-dark);
}
html.px-on .rc-mob-picks-counter {
border-color: var(--px-tint-2);
color: var(--px-navy);
font-family: var(--px-font);
}
html.px-on .rc-mob-picks-counter__count {
background: var(--px-navy);
color: #fff;
}
html.px-on .rc-mob-picks-counter__label {
color: var(--px-ink-2);
}
html.px-on .racecard__runner--fox {
border-color: var(--px-navy) !important;
box-shadow: 0 0 0 3px rgb(15 45 79 / 8%) !important;
}
html.px-on .racecard__runner--fox::before {
content: 'FOX';
background: var(--px-navy);
color: #fff;
font-family: var(--px-font);
}
html.px-on .racecard .px-key {
display: none;
}
html.px-on .racecard__strip-draw,
html.px-on .racecard__strip-tool,
html.px-on .rc-mob-filterbar__pill {
min-height: 40px;
}
html.px-on .racecard__cell--horse a.racecard__name {
padding-block: 11px;
margin-block: -11px;
}
html.px-on .racecard > .racecard__strip {
margin-left: 10px;
margin-right: 10px;
gap: 8px 12px;
padding: 8px 10px;
}
html.px-on .racecard__strip-metrics {
gap: 16px;
}
html.px-on .racecard__strip-state {
padding-top: 5px;
padding-bottom: 5px;
}
html.px-on .racecard__strip-draw {
gap: 7px;
padding: 0 14px 0 12px;
}
html.px-on .racecard__strip-draw-label {
display: inline;
}
html.px-on .racecard__strip-tool {
padding: 0 14px;
}
html.px-on .racecard__filters {
padding-left: 10px;
padding-right: 10px;
scroll-padding-inline: 10px;
}
html.px-on .rc-mob-filterbar {
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
scroll-padding-inline: 10px;
background: linear-gradient(180deg, rgb(246 244 239 / 98%) 70%, rgb(246 244 239 / 0%));
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (width <= 560px) {
html.px-on .racecard__filters {
gap: 0;
}
html.px-on .racecard__filter {
gap: 5px;
padding: 12px 8px 13px;
font-size: var(--px-fs-sm);
}
html.px-on .racecard__filter .px-i {
display: none;
}
html.px-on .racecard .racecard__filter .px-count {
min-width: 17px;
height: 17px;
padding: 0 5px;
font-size: var(--px-fs-2xs);
}
}
@media (width < 560px) {
html.px-on .rc-mob-filterbar {
padding-right: 36px;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
}
@media (width < 390px) {
html.px-on .racecard__filters {
padding-right: 36px;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
}
@media (width <= 360px) {
html.px-on .racecard__grid .racecard__runner {
grid-template-columns: 30px 34px minmax(0, 1fr) auto;
column-gap: 8px;
padding-left: 12px;
padding-right: 12px;
}
html.px-on .racecard__cell--number {
width: 30px;
height: 30px;
}
html.px-on .racecard__cell--number .racecard__number {
font-size: var(--px-fs-md);
}
html.px-on .racecard__cell--silk .racecard__silk {
width: 34px;
}
html.px-on .racecard__cell--odds .racecard__odds-trail {
gap: 3px;
padding: 2px 6px;
font-size: var(--px-fs-2xs);
letter-spacing: 0;
}
html.px-on .racecard__cell--horse .racecard__name {
font-size: var(--px-fs-lg) !important;
}
html.px-on .racecard .px-stats {
gap: 10px 12px;
}
}
@media (width < 360px) {
html.px-on .racecard__name-meta .px-sub-inline {
display: none;
}
html.px-on .racecard__cell--odds .racecard__odds-trail::before {
content: none;
}
html.px-on .racecard__cell--odds .racecard__odds-trail > .px-i--arrow {
display: inline-block;
}
html.px-on .racecard__strip-metric .px-i {
display: none;
}
}
@media (width <= 1100px) {
html.px-on .racecard .px-key__sep {
display: none;
}
}
@media (width > 640px) and (width <= 1100px) {
html.px-on .racecard__strip {
column-gap: 14px;
}
html.px-on .racecard__strip-updated .px-i {
display: none;
}
html.px-on .racecard__strip-updated,
html.px-on .racecard__strip-tool {
margin-left: auto;
}
}
@media (pointer: coarse) {
html.px-on .racecard__strip-draw,
html.px-on .racecard__strip-tool,
html.px-on .racecard .px-notes-toggle,
html.px-on .racecard__pick {
min-height: 40px;
}
html.px-on a.racecard__name {
padding-block: 11px;
margin-block: -11px;
}
html.px-on .racecard__col-help {
position: relative;
}
html.px-on .racecard__col-help::after {
content: '';
position: absolute;
inset: -13px -6px;
}
}
@media (prefers-reduced-motion: reduce) {
html.px-on .racecard__runner {
transition: none;
}
html.px-on .racecard__runner:hover,
html.px-on .racecard__runner:active {
transform: none;
}
html.px-on .racecard .px-notes-toggle__chev {
transition: none;
}
html.px-on .racecard__runner,
html.px-on .racecard__strip-draw .px-i--arrow {
transition: none;
}
html.px-on .racecard__runner:hover {
transform: none;
}
html.px-on .racecard__odds--fav,
html.px-on .racecard__strip--open .racecard__strip-state-dot {
animation: none;
}
}
html.px-on body {
text-rendering: optimizelegibility;
font-kerning: normal;
font-optical-sizing: auto;
}
html.px-on .racecard .rcf--silver {
background: linear-gradient(180deg, #f6f8fa 0%, #cdd4db 100%);
color: #22303f;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 85%),
inset 0 0 0 1px #bac3cc;
}
html.px-on .racecard .rcf--bronze {
background: linear-gradient(180deg, #f2d6bc 0%, #cb8e5c 100%);
color: #3e200a;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 50%),
inset 0 0 0 1px #b7794a;
}
html.px-on .racecard .rcf--loss {
background: #fff;
color: #77746b;
box-shadow: inset 0 0 0 1px var(--px-tint-2);
font-weight: 700;
}
html.px-on .racecard .px-stat .racecard__form {
overflow: visible;
}
html.px-on .racecard .racecard__form .rcf:not(.rcf--sep):last-child::after,
html.px-on .racecard .px-key .px-latest::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: -5px;
height: 2px;
border-radius: var(--px-radius-hair);
background: var(--px-navy);
}
@media (width >= 900px) {
html.px-on .racecard__stars-on,
html.px-on .racecard__stars-off {
width: 14px;
height: 14px;
}
}
html.px-on .racecard__stars-on {
background: var(--px-gold-fill);
}
html.px-on .racecard__stars-off {
background: #e2dbcb;
}
html.px-on .racecard .px-tier--strong {
color: var(--px-green);
}
html.px-on .racecard .px-tier--watch {
color: var(--px-gold-ink);
}
html.px-on .racecard .racecard__sr.px-top,
html.px-on .racecard .px-stat .racecard__sr.px-top {
background: var(--px-gold-bg);
box-shadow: inset 0 0 0 1px rgb(201 162 39 / 60%);
color: #4f3b06;
font-weight: 700;
}
html.px-on .racecard__odds,
html.px-on .racecard__odds--round {
width: auto;
min-width: 66px;
height: 40px;
padding: 0 14px;
border: 0;
border-radius: var(--px-radius-pill);
background: var(--px-navy);
box-shadow: var(--px-shadow-price);
color: #fff;
font-family: var(--px-display);
font-size: var(--px-fs-xl);
font-weight: 700;
letter-spacing: 0;
}
html.px-on .racecard__odds .racecard__odds-val {
color: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
html.px-on .racecard__odds--fav:hover,
html.px-on .racecard__odds--winner:hover {
background: #bf9920;
}
html.px-on .racecard__odds--outsider:hover {
background: var(--px-navy-2);
}
html.px-on .racecard .px-mk--in {
background: var(--px-green-bg);
color: var(--px-green);
box-shadow: inset 0 0 0 1px rgb(30 107 78 / 28%);
}
html.px-on .racecard .px-mk--in .px-i {
color: var(--px-green);
}
html.px-on .racecard .px-mk--out {
background: var(--px-claret-bg);
color: var(--px-claret);
box-shadow: inset 0 0 0 1px rgb(154 51 64 / 24%);
}
html.px-on .racecard .px-mk--out .px-i {
color: var(--px-claret);
}
html.px-on .racecard__prices .movement-chip--in {
background: var(--px-green-bg);
border-color: rgb(30 107 78 / 30%);
color: var(--px-green);
}
html.px-on .racecard__prices .movement-chip--out {
background: var(--px-claret-bg);
border-color: rgb(154 51 64 / 26%);
color: var(--px-claret);
}
html.px-on .racecard__pick--guest.is-selected,
html.px-on .racecard__pick--active {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
@media (width >= 768px) {
html.px-on .racecard__name {
font-size: var(--px-fs-xl);
letter-spacing: -0.01em;
}
}
html.px-on .racecard .racecard__filter.is-active .px-count {
background: var(--px-navy);
color: #fff;
}
@media (width <= 640px) {
html.px-on .racecard__cell--odds .racecard__odds--outsider {
background: var(--px-navy) !important;
color: #fff;
}
html.px-on .racecard__runner .racecard__cell--pick .racecard__pick--active,
html.px-on .racecard__runner .racecard__cell--pick .racecard__pick.is-selected,
html.px-on
.racecard__runner[data-rc-expanded='true']
.racecard__cell--pick
.racecard__pick--active,
html.px-on
.racecard__runner[data-rc-expanded='true']
.racecard__cell--pick
.racecard__pick.is-selected {
background: var(--px-navy) !important;
color: #fff !important;
}
}
@media (hover: none) {
html.px-on .racecard__strip-tool {
display: none;
}
}
@media (width < 360px) {
html.px-on .racecard__cell--conn .racecard__jockey-name,
html.px-on .racecard__cell--conn .racecard__trainer-name,
html.px-on .racecard__cell--conn .connection-link {
overflow: visible;
text-overflow: clip;
white-space: normal;
}
}
html.px-on .re-hero {
--px-header-photo: url("../../../public/v2/img/hero-fold-bg.737bf8cd5b2e.webp");
}
@supports (background-image: image-set('x.avif' type('image/avif'))) {
html.px-on .re-hero {
--px-header-photo: image-set(
url("../img/header-dusk.3d2af66a8ed3.avif") type('image/avif'),
url("../../../public/v2/img/hero-fold-bg.737bf8cd5b2e.webp") type('image/webp')
);
}
}
@media (width > 900px) {
html.px-on .re-hero__inner.gn-container,
html.px-on .race-toolbar__inner.gn-container {
box-sizing: border-box;
width: min(var(--px-content-max), 100% - 2 * var(--px-content-gutter));
max-width: none;
margin-inline: auto;
padding-inline: var(--px-content-inset);
}
html.px-on .re-hero__inner.gn-container {
justify-content: space-between;
}
}
html.px-on .re-hero__bg {
background:
radial-gradient(40% 80% at 14% 30%, rgb(var(--px-header-gold-rgb) / 7%), transparent 66%),
var(--px-header-night);
}
html.px-on .re-hero__bg::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(44%, 780px, calc((50% - 430px) * 3.1));
background:
radial-gradient(90% 55% at 62% 108%, rgb(var(--px-header-sunset-rgb) / 34%), transparent 72%),
linear-gradient(
90deg,
rgb(var(--px-header-night-rgb) / 8%) 0%,
rgb(var(--px-header-night-rgb) / 16%) 70%,
rgb(var(--px-header-night-rgb) / 55%) 100%
),
var(--px-header-photo) 72% 30% / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 55%) 24%, #000 48%);
mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 55%) 24%, #000 48%);
pointer-events: none;
}
html.px-on .re-hero .re-fence-post {
border-left-color: rgb(var(--px-header-gold-rgb) / 5%);
}
html.px-on .re-hero__vignette {
background: linear-gradient(
to bottom,
rgb(var(--px-header-night-rgb) / 35%) 0%,
transparent 26%,
transparent 62%,
rgb(var(--px-header-night-rgb) / 92%) 100%
);
}
@media (width <= 1100px) {
html.px-on .re-hero__bg::after {
width: 66%;
background:
radial-gradient(90% 50% at 62% 108%, rgb(var(--px-header-sunset-rgb) / 30%), transparent 72%),
linear-gradient(
90deg,
rgb(var(--px-header-night-rgb) / 64%) 0%,
rgb(var(--px-header-night-rgb) / 56%) 60%,
rgb(var(--px-header-night-rgb) / 70%) 100%
),
var(--px-header-photo) 72% 30% / cover no-repeat;
}
}
@media (width <= 640px) {
html.px-on .re-hero__bg::after {
width: 100%;
background:
linear-gradient(
90deg,
rgb(var(--px-header-night-rgb) / 84%) 0%,
rgb(var(--px-header-night-rgb) / 58%) 40%,
rgb(var(--px-header-night-rgb) / 16%) 70%,
rgb(var(--px-header-night-rgb) / 26%) 100%
),
radial-gradient(70% 45% at 78% 100%, rgb(var(--px-header-sunset-rgb) / 22%), transparent 70%),
var(--px-header-photo) 60% 50% / auto max(138%, 105vw) no-repeat,
var(--px-header-night);
-webkit-mask-image: none;
mask-image: none;
}
html.px-on .re-hero__vignette {
background: linear-gradient(
to bottom,
rgb(var(--px-header-night-rgb) / 30%) 0%,
transparent 24%,
transparent 72%,
rgb(var(--px-header-night-rgb) / 72%) 100%
);
}
html.px-on .re-hero .re-hero__main {
text-shadow:
0 1px 2px rgb(var(--px-header-night-rgb) / 70%),
0 4px 18px rgb(var(--px-header-night-rgb) / 75%);
}
}
.px-rp-sub,
.px-race-meta,
.px-race-no,
.px-rp-rail,
.px-subtitle {
display: none;
}
html.px-on .re-subtitle.px-subtitle {
display: block;
}
html.px-on .re-subtitle:not(.px-subtitle):has(+ .px-subtitle) {
display: none;
}
html:not(.px-on) .px-trip,
html.px-on .px-orig-trip {
display: none;
}
html.px-on .px-i {
display: inline-block;
flex: none;
width: 1em;
height: 1em;
fill: currentcolor;
vertical-align: -0.14em;
}
html.px-on .px-hn {
font-weight: 700;
}
html.px-on
:where(
#main-content
:is(
a,
button,
summary,
select,
input,
[role='button'],
[role='tab'],
[tabindex]:not([tabindex='-1'])
)
):focus-visible {
outline: var(--px-focus-width) solid var(--px-focus-color);
outline-offset: var(--px-focus-offset);
}
html.px-on :is(.re-hero, .race-toolbar, .racecard-guest-bar) {
--px-focus-color: var(--px-on-ink);
}
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 112px;
}
@media (width > 1100px) and (width <= 1330px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 117px;
}
}
@media (width > 640px) and (width <= 1100px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 180px;
}
}
@media (width > 640px) and (width < 768px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 175px;
}
}
@media (width <= 640px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 272px;
}
}
@media (width > 560px) and (width <= 640px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 242px;
}
}
@media (width < 360px) {
html.px-on .racecard__runner:not(.racecard__runner--fox) {
contain-intrinsic-size: auto 294px;
}
}
html.px-on:is(.px-sheet-open, :has(:is(#rpOpenBtn, #rpPickerBtn):active))
.racecard__runner:not(.racecard__runner--fox) {
content-visibility: auto;
}
@media (hover: hover) and (pointer: fine) {
html.px-on:has(:is(#rpOpenBtn, #rpPickerBtn):hover)
.racecard__runner:not(.racecard__runner--fox) {
content-visibility: auto;
}
}
html.px-on.px-sheet-open
:is(
.gcf-pulse-dot,
.site-nav__notif-dot,
.mob-drawer__notif-dot,
.mob-drawer__race-dot,
.racecard__strip-state-dot
) {
animation-play-state: paused;
}
html.px-on #main-content :not(em, i, cite) {
font-style: normal !important;
}