#main .runner_name {
    font-size: var(--size-md);
}
#main .runner_extra_details {
    font-size: var(--size-xs);
}
#main .market_extra_details {
    font-size: var(--size-sm);
}
#main .prev_prof .fa {
    margin-right: 3px;
}

/* Submit Button */
#app input[type='submit'] {
    background-color: var(--blue-light);
    color: var(--gray-light);
    border-radius: 1px;
    margin-right: 3px;
    min-width: 69px;
    border: 3px solid var(--gray-dark);
    line-height: 21px;
    font-weight: 500;
    font-size: var(--size-md);
    width: 100%;
    margin: 0;
    line-height: 30px;
    margin: 0 4px;
}

#app input[type='submit']:hover {
    color: var(--gray-dark);
    cursor: pointer;
}

#app input[type='submit']:disabled {
    background-color: var(--gray-mid);
    color: var(--gray-light);
    opacity: 0.7;
    cursor: auto;
}

/* Date Picker */
#main #race_day_picker {
    width: calc(100% - 24px);
    margin: 3px 1px 2px 1px;
    line-height: var(--size-xl4);
}
#main .cards_settings_block {
    font-size: var(--size-md);
    /* margin: 5px 0; */
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#main .cards_settings_block input[type='checkbox'] {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    margin: 8px 5px 0 0;
}
#main .cards_settings_block select {
    padding: 5px 2px;
    width: 100%;
    /* margin: 3px 0 5px 0; */
}
#main #view_runners {
    display: flex;
    flex: 1 1 auto;
    overflow: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0; 
}
#main .race_table_container {
    container-type: inline-size;
    container-name: race-table-scroll;
    overflow: auto;
    min-width: 0;
}
#app table .td_chart {
    position: relative;
    padding: 0;
    vertical-align: middle;
}
#app table .td_chart .chart_cell,
#app table .td_chart .chart {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #fff;
}
#app table .td_chart .chart_cell canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
#app table tr.best_market_selected td.market_venue {
  font-style:italic;
  font-weight: 700;
}
#app table .hidden_col {
    display: none !important;
}

/* not sure what this is */
#app table .fa.fa-toggle-off {
    font-size: var(--size-xl); 
    color: var(--red-dark);
    line-height: 15px;
    padding: 0 1px;
}

/* race card Quals column */
#app table .systems_col_container {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    align-items: center;
    position: relative;
}
#app table .systems_col_container .projects_ratio_row {
    line-height: 1.15;
}
#app table .systems_col_container .projects_ratio {
    /* font-size: var(--size-xs); */
    /* font-weight: 600; */
}
#app table .systems_col_container .projects_ratio_qual {
    color: #1b7f3d;
    font-weight: 700;
}
#app table .systems_col_container .projects_ratio_potential {
    color: #eb822c;
}
#app table .systems_col_container .projects_ratio_zero {
    color: #878787;
    opacity: 0.6;
}
#app table .systems_col_container .runner_qual_icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 1.4em;
}
#app table .systems_col_container .runner_qual_icons_dual {
    flex-direction: row;
    gap: 8px;
}
#app table .systems_col_container .runner_qual_icon_stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 1.2em;
}
#app table .systems_col_container .runner_qual_count {
    font-size: 0.75em;
    line-height: 1;
    font-weight: 700;
    color: #444;
}
#app table .systems_col_container .runner_qual_icon {
    font-size: var(--size-xl);
    line-height: 1;
}
#app table .systems_col_container .runner_qual_actual {
    color: #1b7f3d;
}
#app table .systems_col_container .runner_qual_potential {
    color: #eb822c;
}
#app table .systems_col_container .runner_qual_none {
    color: #878787;
    opacity: 0.55;
    font-size: var(--size-sm);
}
#app table .systems_col_container .runner_qual_list {
    width: 100%;
    max-height: 3.75em;
    overflow: hidden;
    text-align: left;
    font-size: var(--size-xs);
    line-height: 1.25;
    align-self: stretch;
}
#app table .systems_col_container .runner_qual_list_empty {
    text-align: center;
    color: #878787;
    opacity: 0.6;
}
#app table .systems_col_container .runner_qual_list_line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#app table .systems_col_container .runner_qual_list_line.runner_qual_list_actual {
    color: #1b7f3d;
    font-weight: 600;
}
#app table .systems_col_container .runner_qual_list_line.runner_qual_list_potential {
    color: #eb822c;
    font-weight: 600;
}
#app table .systems_col_container .runner_qual_list_more {
    color: #666;
    font-size: 0.9em;
    line-height: 1.1;
}
#app table .systems_col_container.hp_qual_tip_host .hp_qual_tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 1000;
    min-width: 140px;
    max-width: 280px;
    max-height: 240px;
    overflow: auto;
    padding: 6px 8px;
    background: #1a2330;
    color: #e6edf3;
    border: 1px solid #2b3a4d;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    font-size: var(--size-xs);
    line-height: 1.3;
    text-align: left;
    pointer-events: none;
    white-space: normal;
}
#app table .systems_col_container.hp_qual_tip_host:hover .hp_qual_tooltip {
    display: block;
}
#app table .systems_col_container .hp_qual_tooltip_head {
    font-weight: 700;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #2b3a4d;
}
#app table .systems_col_container .hp_qual_tooltip_line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#app table .systems_col_container .hp_qual_tooltip_line.hp_qual_tooltip_actual {
    color: #7dcea0;
}
#app table .systems_col_container .hp_qual_tooltip_line.hp_qual_tooltip_potential {
    color: #f0b27a;
}
#app table .systems_col_container.hp_qual_list_mode {
    align-items: stretch;
}
#app table .systems_col_container .runner_qual_inactive,
.runner_projects_nav_icons .runner_qual_inactive {
    color: #878787;
    opacity: 0.65;
}
.race_project_inactive_wrap {
    display: flex;
    flex-direction: column;
}
.race_project_inactive_subtitle {
    font-weight: 600;
    padding: 6px 1px;
}
.race_project_inactive_hint {
    color: #666;
    font-size: var(--size-sm);
    margin-bottom: var(--size-sm);
}

.race_project_inactive_bulk {
    display: flex;
    gap: 8px;
    margin-bottom: var(--size-sm);
}
.race_project_inactive_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow: auto;
    margin-bottom: var(--size-sm);
}
.race_project_inactive_row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.race_sl_count_wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#main .race .fa.race_sl_portfolio_dot {
    font-size: var(--size-md) !important;
    line-height: 1;
    color: #878787;
    opacity: 0.95;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    margin: 0 4px 0 0;
}
.race_sl_portfolio_dot.on {
    color: #1b7f3d !important;
    opacity: 1;
}
.race_project_inactive_row .race_sl_portfolio_dot {
    flex-shrink: 0;
}
.race_project_inactive_actions {
    display: flex;
    justify-content: flex-end;
}
.race_project_inactive_btn.has_inactive {
    color: #878787;
}
.runner_projects_nav_icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.runner_projects_nav_icons .runner_qual_icon {
    font-size: var(--size-md);
}
.runner_qual_none_inline {
    color: #878787;
}
.runner_projects_breakdown_summary .projects_ratio_zero_inline {
    color: #878787 !important;
}
.runner_projects_breakdown_wrap {
    min-width: min(720px, 92vw);
    max-width: 92vw;
}
.runner_projects_breakdown_subtitle {
    font-weight: 600;
    /* padding: 0 0 var(--size-xs); */
    padding: 11px 1px;
}
.runner_projects_breakdown_summary {
    font-size: var(--size-sm);
    padding-bottom: var(--size-xs);
}
.runner_projects_breakdown_summary .projects_ratio_qual_inline {
    color: #1b7f3d;
    font-weight: 600;
}
.runner_projects_breakdown_summary .projects_ratio_pot_inline {
    color: #c05600;
    font-weight: 600;
}
.runner_projects_breakdown_y_hint {
    font-size: var(--size-xs);
    color: var(--gray-dark);
    padding-top: 6px;
    line-height: 1.35;
}
.runner_projects_breakdown_layout {
    display: flex;
    flex-direction: row;
    gap: var(--size-sm);
    min-height: 220px;
    max-height: min(420px, 55vh);
}
.runner_projects_breakdown_sidebar {
    flex: 0 0 212px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--gray-mid);
    padding-right: var(--size-xs);
}
.runner_projects_breakdown_sidebar_label {
    font-size: var(--size-xs);
    color: var(--gray-dark);
    margin-bottom: 4px;
}
.runner_projects_shortlist_nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex: 1;
}
.runner_projects_nav_btn {
    text-align: left;
    padding: 6px 8px;
    border: 1px solid var(--gray-mid);
    /* background: var(--gray-light); */
    border-radius: 2px;
    cursor: pointer;
    font-size: var(--size-sm);
    display: flex;
    justify-content: space-between;
    /* flex-direction: column; */
    align-items: center;
    gap: 4px;
}
.runner_projects_nav_title {
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}
.runner_projects_nav_ratios {
    font-size: calc(var(--size-sm) - 1px);
    white-space: nowrap;
    letter-spacing: -0.02em;
}
.runner_projects_nav_ratio_qual {
    color: #1b7f3d;
    font-weight: 600;
}
.runner_projects_nav_ratio_pot {
    color: #c05600;
    font-weight: 600;
}
.runner_projects_nav_ratio_qual.projects_ratio_zero,
.runner_projects_nav_ratio_pot.projects_ratio_zero {
    color: #878787;
    font-weight: 500;
}
.runner_projects_nav_btn.selected {
    border-color: var(--green-darker);
    background: var(--green-lightest);
}
.runner_projects_nav_btn:hover {
    filter: brightness(0.98);
}
.runner_projects_breakdown_empty {
    font-size: var(--size-sm);
    color: var(--gray-dark);
    padding: 4px 0;
}
.runner_projects_breakdown_cols {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-sm);
    min-width: 0;
    overflow: hidden;
}
.runner_projects_breakdown_col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.runner_projects_breakdown_col_label {
    font-size: var(--size-xs);
    font-weight: 600;
    margin-bottom: 4px;
}
.runner_projects_breakdown_col_label.projects_ratio_qual {
    color: #1b7f3d;
}
.runner_projects_breakdown_col_label.projects_ratio_potential {
    color: #c05600;
}
ul.runner_projects_detail_list {
    list-style: none;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    flex: 1;
    font-size: var(--size-sm);
    border: 1px solid var(--gray-mid);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.03);
}
ul.runner_projects_detail_list li {
    padding: 2px 0;
}
ul.runner_projects_detail_list li.projects_breakdown_none {
    color: var(--gray-dark);
    font-style: italic;
}

#app table tr.child-row > td {
    padding: 0;
    position: relative;
}

#app table .runner_detail_inline {
    /* height: 350px; */
    /* max-height: 461px; */
    flex-direction: column;
    padding-bottom: 1px;
    display: none;
    position: sticky;
    left: 0;
    z-index: 5;
    width: 100cqw !important;
    max-width: 100cqw !important;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    /* border-bottom: 2px solid var(--gray-mid); */
}

#app table .runner_detail_inline .panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 136px;
    box-sizing: border-box;
}

#app table .runner_detail_inline .panel[panel="previous"],
#app table .runner_detail_inline .panel[panel="details"] {
    overflow: hidden;
}

#app table .runner_detail_inline .panel[panel="mtp_odds"] {
    overflow: auto;
}

#app table .runner_detail_inline .panel[panel="previous"] .b2l_details_table_scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#app table .runner_detail_inline .b2l_details_table_scroll .b2l_details_table thead,
#app table .runner_detail_inline .panel[panel="mtp_odds"] .b2l_mtp_odds_table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

#app table .runner_detail_inline .b2l_details_table_scroll .b2l_details_table thead th,
#app table .runner_detail_inline .panel[panel="mtp_odds"] .b2l_mtp_odds_table thead th {
    background: var(--blue-mid);
}

#runner_details_dialog .runner_detail_inline,
#runner_details_dialog_body.runner_detail_inline,
#main #race_mobile .runner_detail_inline,
#main #race_mobile .runner_detail_inline_mobile {
    width: 100%;
    max-width: 100%;
    position: static;
    left: auto;
}

/* RUNNER ROW */

#app table th.race_th_auto {
    width: auto;
    min-width: auto;
    max-width: auto;
    position: relative;
    cursor: pointer;
}


#app table th.race_th_22 {
    width: var(--size-22);
    min-width: var(--size-22);
    max-width: var(--size-22);
    position: relative;
    cursor: pointer;
}

#app table th.race_th_28 {
    width: var(--size-28);
    min-width: var(--size-28);
    max-width: var(--size-28);
    position: relative;
    cursor: pointer;
}
#app table th.race_th_40 {
    width: var(--size-40);
    min-width: var(--size-40);
    max-width: var(--size-40);
    position: relative;
    cursor: pointer;
}

#app table th.race_th_50 {
    width: var(--size-50);
    min-width: var(--size-50);
    max-width: var(--size-50);
    position: relative;
    cursor: pointer;
}

#app table th.race_th_60 {
    width: var(--size-60);
    min-width: var(--size-60);
    max-width: var(--size-60);
    position: relative;
    cursor: pointer;
}

#app table th.race_th_70 {
    width: var(--size-70);
    min-width: var(--size-70);
    max-width: var(--size-70);
    position: relative;
    cursor: pointer;
}

#app table th.race_th_80 {
    width: var(--size-80);
    min-width: var(--size-80);
    max-width: var(--size-80);
    position: relative;
    cursor: pointer;
}

#app table tr.runner_row {
     height: var(--size-xl14);
}

#app table tfoot tr {
  opacity: 0.5;
  background: white;
}
#app table tr.runner_row.runner_row_hide td:nth-child(-n+4) div, 
#main #race_tbl_b2l.with_charts tr.child-row.runner_row_hide td:nth-child(-n+4) div  {
    visibility:visible;
    display: block;
}
#app table tr .horse_col {
    overflow: hidden;
}
#app table tr.runner_row .runner_bets {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
}
#app table tr.runner_row .runner_bets div {
    /* color: var(--gray-dark); */
    border: 1px solid;
    border-radius: 2px;
    padding: 3px 2px 3px 2px;
    font-size: var(--size-sm);
    font-weight: 600;
    line-height: 9px;
}
#app table tr.runner_row .runner_bets .B,
#app table tr.runner_row .runner_bets .B2L,
#app table tr.runner_row .runner_bets .S_B,
#app table tr.runner_row .runner_bets .S_B2L {
    background: var(--blue-lighter);
}
#app table tr.runner_row .runner_bets .L,
#app table tr.runner_row .runner_bets .L2B,
#app table tr.runner_row .runner_bets .S_L,
#app table tr.runner_row .runner_bets .S_L2B {
    background: var(--red-lighter);
}
#app table tr.child-row td {
    border: none;
}

/*
 * Race table cell gutters  -  match portfolio-style even spacing.
 * app.css applies border + padding to every tr and td. Each runner row is
 * followed by a collapsed child-row tr (inline detail panel); that empty tr
 * still picked up tr borders and read as extra vertical gap between rows.
 */
#main #race_tbl {
    border-collapse: separate;
    border-spacing: 1.5px 1px;
}

#main #race_tbl tr {
    border: none;
    padding: 0;
}

/* Separate layout: names the race the rows below it belong to. The caption is
   stuck to the left edge so it stays readable while the table scrolls across. */
#main #race_tbl tr.race_group_row > td {
    background: none;
    border: none;
    padding: 0;
}

#main #race_tbl .race_group_caption {
    position: sticky;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding: 8px 4px 2px;
    font-size: var(--size-xl);
    position: relative;
}

/* Same blobs as the race details strip, sized down to sit on the caption line. */
#main #race_tbl .race_group_detail {
    min-width: 0;
    padding: 1px 2px;
    font-size: var(--size-sm);
    font-weight: 400;
    line-height: var(--size-sm);
    white-space: nowrap;
    display: flex;
    border: 1px solid var(--gray-light);
}

/* No font-weight here: Font Awesome picks the solid face by weight, so anything
   other than its own 900 renders the glyph blank. */
#main #race_tbl .race_group_action {
    cursor: pointer;
    font-size: var(--size-lg);
    opacity: 0.9;
}

#main #race_tbl .race_group_action:hover {
    opacity: 1;
}

#main #race_tbl .race_group_action.fa-spin {
    cursor: default;
    opacity: 1;
}

#main #race_tbl .race_group_project_toggle.is_paused {
    color: #878787;
}

#main #race_tbl .race_group_project_toggle.is_disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Always in the DOM; Vue only adds .on, so the look is tunable from devtools.
   Anchored to the sticky caption rather than the full-width cell so the spinner
   rides over the title and stays put when the table scrolls sideways. */
#main #race_tbl .race_group_loading {
    display: none;
    position: absolute;
    top: 33px;
    left: 5px;
    right: 5px;
    /* height: 60px; */
    /* inset: 0; */
    align-items: center;
    justify-content: center;
    background: #cccccc00;
}

#main #race_tbl .race_group_loading.on {
    display: flex;
}

#main #race_tbl .race_group_loading .fa-spinner {
    color: var(--yellow-mid);
    font-size: 30px;
    /* margin: 40px; */
}

#app table tr.child-row {
    border: none;
    padding: 0;
}

#app table tr.child-row:not(:has(.runner_detail_inline[style*="display: flex"])) > td {
    height: 0;
    /* line-height: 0; */
    padding: 0;
    border: none;
    overflow: hidden;
}

#app table tr.runner_bets.stripes.X {
    border: 3px solid var(--red-dark);
    top: 9px
}
#main .runner_name {
    font-weight: 600;
}
#main .runner_details {
    font-size: calc(var(--base-size) * 1.54);
    color: var(--black);
}
#main .qual {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 1px 0px -1px 0px;
    gap: 4px;
    font-variant: tabular-nums;
}
#main .qual_system {
    flex: 1;
    line-height: var(--base-size);
}
#main .qual_sets {
    margin-left: 4px;
    font-size: var(--size-xs);
    color: var(--grey);
    cursor: help;
}
#main .qual .runner_details {
    font-size: var(--size-sm);
}
#main .runner_details.qual_ok {
    color: var(--green-mid);
    margin: 0;
    font-size: 9px;
}
#main .runner_details.qual_pre {
    color: var(--orange-light);
    margin: 0;
    font-size: 9px;
}
#main .runner_details.qual_static {
    color: var(--red-mid); margin: 0;  font-size: 9px;
}
#main .runner_details.fa-search {
    color: var(--gray-mid);
    margin: 0;
    /* font-size: 9px; */
}
#main .runner_view .runner_details {
    font-size: 17px;
}
#main #race_tbl .runner_details:hover  {
    cursor: pointer;
    /* color: var(--gray-dark); */
}

/*
 * Sticky header gaps. The table is border-collapse: separate, so a 1px
 * border-spacing gap sits between the two header rows and between each header
 * cell. A sticky thead only carries its cells along in Chrome, not the section
 * box, so a background on thead or tr stays behind and the scrolling body shows
 * through those gaps. Each cell paints its own 1px surround instead.
 */
#main #race_tbl thead th,
#main #race_tbl thead td {
    box-shadow: 0 0 0 1px var(--white);
}

/* Separator between column blocks - dynamic class added by JS to first visible col of each block */
/* Block spacer columns - inserted dynamically by JS between column blocks */
#main #race_tbl th.block-spacer,
#main #race_tbl td.block-spacer {
    width: 2px;
    min-width: 2px;
    max-width: 2px;
    padding: 0;
    background: var(--white);
    border: none;
    border-bottom: none;
    border-top: none;
}


#main .all_runner_details {
    font-size: var(--size-lg);  /* was 15px */
    padding: 1px 0 0 0;
    color: var(--gray-lightest);
    cursor: pointer;
}
#main .all_runner_details:hover  {
    cursor: pointer;
    opacity: 0.8
}
#main .runner_details_target {
    line-height: var(--size-xs); /* 11px */
    font-size: var(--size-md);  /* was 13px */
}
#main .double_line {
    font-size: var(--size-md);  /* was 13px */
    /* line-height: var(--size-xl); */
    vertical-align: middle;
    position: relative;
    height: var(--size-xl18);
}
#main .runner_name {
    display: inline;
    font-size: var(--size-md);
    flex: 1;
}
#main .tracked, #main .dash_tracked  {
    font-size: var(--size-lg); 
    margin-right: 3px;
    cursor: pointer;
    color: var(--gray-light);
}
#main .tracked.off, #main .dash_tracked.off {
    color: var(--gray-mid);
}
#main .tracked.on, #main .dash_tracked.on {
    color: var(--yellow-mid)
}
#main .fa-spin:hover {
    cursor: default;
}
#main .tracked:hover, #main .dash_tracked:hover {
    opacity: 0.7;
}
#main .runner_extra_details {
    font-size: var(--size-xs);
    font-weight: 500;
    overflow: hidden;
    max-width: 200px;
    /* margin: 1px 0 0 3px; */
    /* display: none; */
}
#main .market_col {
  cursor: pointer
}
#main .market_extra_details {
    font-size: var(--size-sm);
    font-weight: 500;
}
#main .market_extra_details .race_cc {
    width: 17px;
    height: 12px;
    line-height: 9px;
    border: 1px solid var(--gray-mid);
    background: var(--gray-mid);
    text-align: center;
    display: inline-block !important;
    margin-left: 2px;
    margin-top: 2px;
    border-radius: 2px;
    position: relative;
    color: var(--gray-dark);
    font-style: normal;
}
#main .tc {
    text-align: center;
    font-weight: 500;
    line-height: var(--size-lg);
    overflow: hidden;
}
#main .stats_row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 0px;
}

/*
 * A row is as tall as its tallest cell. Stat and price cells cap their block at
 * one row's worth and centre it, so they keep a sensible height instead of
 * stretching. On a normal row the cap is never reached and nothing changes.
 */
:root {
    --runner-cell-row: 37px;
}

#main #race_tbl .stats_row {
    max-height: var(--runner-cell-row);
    margin: auto 0;
}

#main #race_tbl td.runner_prices_back,
#main #race_tbl td.runner_prices_lay {
    background: none;
    padding: 0;
    position: relative;
    /* A table cell height is a floor, so this holds the row up now that the
       coloured block is taken out of flow. */
    height: var(--runner-cell-row);
}

#main #race_tbl td.runner_prices_back .cell_flex,
#main #race_tbl td.runner_prices_lay .cell_flex {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    max-height: var(--runner-cell-row);
    margin: auto 0;
    background: var(--blue-lighter);
    border-radius: 0px;
    gap: 2px;
}

#main #race_tbl td.runner_prices_lay .cell_flex {
    background: var(--red-lighter);
}

#main .stats_row div {
    /* flex: 1; */
    align-content: center;
    letter-spacing: -1px;
}
#main .stats_row div.stats_top { 
font-weight:600
}
#main .stats_bottom {
    /* border-top: 1px dashed #b7b7b7; */
}
#main .cd {
    color: #1b7f3d;
    font-size: var(--size-xl);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#main .cd .fa-check {
    color: #1b7f3d;
}
#main .runner_row .rating {
    text-align: center;
    background: var(--gray-mid);
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 33px;
    height: 33px;
    margin: 0px auto;
    border-radius: 2px;
    border: 1px solid var(--gray-mid);
    font-weight: 600;
}
#main .runner_row .rating:hover {
    opacity: 0.9;
}
#main .ip_profit {
    text-align: center;
    background: var(--green-light);
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 33px;
    border-radius: 2px;
    border: 1px solid var(--gray-mid);
    font-weight: 600;
}
#app table tr td.runner_prices_back, #app table tr td.runner_prices_lay {
    text-align: center;
    background: var(--blue-lighter);
    line-height: var(--size-lg);
    padding: 2px 0px;
    font-weight: 600;
    cursor: pointer;
}
#app table tr td.runner_prices_lay {
    background: var(--red-lighter);
}
#main .runner_prices_back:hover, #main .runner_prices_lay:hover {
    opacity: 0.8;
}
#main .runner_row .pace_score {
    text-align: center
}
#main .runner_row .pace_note {
      letter-spacing: -1px;
}
#app table .col_hide, #app table .no_b4y  {
    display: none;
}
#app table .silks {
    background: #fff;
    padding: 3px 2px;
    margin: 1px;
    border-radius: 3px;
    border: 1px solid #b5b5b5;
    /* display: inline-block; */
    line-height: 0;
    cursor: default;
}

#app table .silks img {
    width: 28px;
    height: auto;
    display: block;
}

#silk_hover_preview {
    position: fixed;
    z-index: 10000;
    display: none;
    pointer-events: none;
    background: #fff;
    border: 1px solid var(--gray-mid);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#silk_hover_preview.visible {
    display: block;
}

#silk_hover_preview img {
    display: block;
    width: 68px;
    height: auto;
}

.silks img {
    width: 100%;
}
.silks.big img {
    width: 54px;
    height: 40px;
    /* position: absolute; */
    left: -6px;
    top: -2px;
    max-width: 100px;
}

/* paging_filters is justify-content: flex-end, so push everything else right. */
#main .paging_filters .paging_filter_layout {
    margin-right: auto;
    margin-left: 7px;
}

/* #race is a flex column, so parking the filters above the cards is just a
   reorder: the message and race details keep their places at the top. */
#main #race.filters_top .race_message {
    order: -3;
}

#main #race.filters_top .race_details_tabs {
    order: -2;
}

#main #race.filters_top #runner_filters {
    order: -1;
}

#main .paging_filters .paging_filters_move_btn {
    cursor: pointer;
    font-size: var(--size-lg);
    padding: 0 6px;
    opacity: 0.7;
}

#main .paging_filters .paging_filters_move_btn:hover {
    opacity: 1;
}

#main .paging_filters .paging_filter_from_now label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* PACE TABLE */
#app div.prev_prof {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
}
#main .prev_pace_run_style {
    clear: both;
    font-size: var(--size-sm); 
    font-weight: 500;
    letter-spacing: -0.5px;
    color: var(--gray-dark);
    font-style: normal;
    line-height: 10px;
    display: flex;
    justify-content: space-between;
}
#main .prev_pace_run_style span {
    position: relative;
}
#main .prev_pace_blobs .fa-stack {
    width: 16px;
    height: 20px;
    font-size: var(--size-lg); 
    line-height: 20px;
    margin-left: 1px;
}
#app table tr .pace_field {
    padding: 0;
    color: var(--gray-dark);
    position: relative;
    border: none;
}
#app table tr .pace_field span {
    font-size: var(--size-xs);
    line-height: 10px;
    vertical-align: top;
    display: none;
}
#app table .pace_field div {
    text-align: center;
    background: transparent;
    font-weight: 600;
    letter-spacing: -0.5px;
    font-size: var(--size-md);  
}
#app table .pace_field .pace_top_left {
    background: transparent;
    line-height: 11px;
    font-size: var(--size-xs); 
    margin-top: -1px;
    margin-bottom: -1px;
}
#app table .pace_field .pace_wins:after {
    position: absolute;
    left: 0;
    right: 0;
    margin: 1px 0;
}
#main #race_tbl_b2l .pace_tr_sml {
    text-align: center;
}
#main #race_tbl_b2l .pace_field_val {
    width: 100%;
    height: 35px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-top: 1px solid var(--gray-dark);
    border-bottom: 1px solid var(--gray-dark);
    border-left: 1px solid var(--gray-dark);
}
#main #race_tbl_b2l .pace_field_runs {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 1px solid var(--gray-dark);
}
#main #race_tbl_b2l .pace_field_profit {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid var(--gray-dark);
    border-right: 1px solid var(--gray-dark);
}
#main #race_tbl_b2l .pace_field_profit_td {
    padding-right: 1px;
}
#main #race_tbl_b2l.with_charts .child-row {
    display: table-row;
    height: 19px;
}
#main #race_tbl_b2l.with_charts .child-row.no_pace {
    display: none;
}
#main #race_tbl_b2l.with_charts .child-row td {
    height: 12px;
    line-height: 12px;
}
#main #race_tbl_b2l.with_charts .runner_extra_details {
    position: absolute;
    top: 19px;
}
#main #race_tbl_b2l.with_charts .pace_chart_container {
    padding: 1px 1px 1px 1px;
}
#main #race_tbl_b2l.with_charts .pace_chart_container .chart {
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray-mid);
}
#main #race_tbl_b2l.with_charts .pace_field_val {
    height: 19px;
    line-height: 19px;
}
#main #race_tbl_b2l.with_charts .runner_prices_back {
    text-align: center;
    background: var(--blue-light);
    padding: 3px 0px;
    font-weight: 600;
    position: absolute;
    top: 2px;
    bottom: -17px;
    left: 2px;
    right: 2px;
}
#main #race_tbl_b2l.with_charts .runner_row .pace_hpr {
    position: relative;
    top: 0;
}
#main #race_tbl_b2l.with_charts .runner_row .ps {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
}
#main #race_tbl_b2l.with_charts .top_padd.runner_view .runner_details_target {
    position: absolute;
    text-align: center;
    width: 100%;
    line-height: 11px;
}
#main #race_tbl_b2l.with_charts .top_padd.runner_view {
    top: 3px;
    position: relative;
    padding: 0;
}
#main #race_tbl_b2l.with_charts tr.runner_row {
    height: 21px;
    line-height: 0px;
}
#main #race_tbl_b2l.with_charts .top_padd {
    position: relative;
    top: 10px;
}
#main #race_tbl_b2l.with_charts .runner_name {
    position: absolute;
    top: 5px;
}
#main #race_tbl_b2l.with_charts .borderless {
    border-bottom-color: var(--gray-light);
    position: relative;
}
#main #race_tbl_b2l .zero .pace_field_val  {
    color: var(--gray-mid);
    border-color: var(--gray-mid);
    font-weight: 400;
}
#main #race_tbl_b2l.with_charts .zero .chart  {
    border: none
}

#main .cell_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Runner Details Panel Styles */
#app .runner_details_panel {
    padding: 6px;
    gap: 12px;
    flex-wrap: wrap;
    overflow-y: auto;
    /* background: var(--gray-lightest); */
}

#app .runner_details_container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
}

#app table .runner_detail_inline .runner_details_container {
    width: 100%;
    max-width: 100%;
}

#app table .runner_detail_inline .runner_details_panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    background: #fff;
}

#app .runner_details_panel .details_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

#app .runner_details_panel .details_section {
    background: var(--white);
    border-radius: 4px;
    padding: 8px 10px;
    min-width: 200px;
    flex: 1;
    border: 1px solid var(--gray-mid);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#app .runner_details_panel .details_section_wide {
    min-width: 400px;
    flex: 2;
}

#app .runner_details_panel .details_section_title {
    font-weight: 600;
    font-size: var(--size-md);
    color: var(--gray-dark);
    border-bottom: 2px solid var(--blue-mid);
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#app .runner_details_panel .detail_row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid var(--gray-light);
}

#app .runner_details_panel .detail_row:last-child {
    border-bottom: none;
}

#app .runner_details_panel .detail_label {
    font-weight: 500;
    color: var(--gray-dark);
    font-size: var(--size-sm);
}

#app .runner_details_panel .detail_value {
    font-weight: 600;
    font-variant: tabular-nums;
    color: var(--black);
    font-size: var(--size-sm);
}

/* Stats Tables in Details Panel */
#app .runner_details_panel .details_stats_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-sm);
    /* margin-top: 4px; */
}

#app .runner_details_panel .details_stats_table thead {
    background: var(--gray-light);
}

#app .runner_details_panel .details_stats_table th {
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    font-size: var(--size-xs);
    text-transform: uppercase;
    color: var(--white);
    border-bottom: 2px solid var(--gray-mid);
}

#app .runner_details_panel .details_stats_table td {
    padding: 3px 3px;
    text-align: center;
    border-bottom: 1px solid var(--gray-light);
    font-variant: tabular-nums;
    width: 66px;
}

#app .runner_details_panel .details_stats_table td.metric_name {
    text-align: left;
    font-weight: 600;
    color: var(--gray-dark);
    width: auto;
}

#app .runner_details_panel .details_stats_table tbody tr:hover {
    background: var(--gray-lightest);
}

#app .runner_details_panel .details_stats_table tbody tr:last-child td {
    border-bottom: none;
}

#app .runner_details_panel .details_section_pm {
    min-width: 280px;
    flex: 1.5;
}

#app .runner_details_panel .details_stats_table_compact {
    font-size: var(--size-xs);
}

#app .runner_details_panel .details_stats_table_compact th,
#app .runner_details_panel .details_stats_table_compact td {
    padding: 3px 5px;
}

#app .runner_details_panel .details_stats_table th.bw_col {
    background: var(--orange-dark);
}

#app .runner_details_panel .details_stats_table td.bw_col {
    background: var(--orange-lightest);
}

#app .runner_details_panel .details_stats_table th.bw_col:first-of-type {
    /* border-left: 2px solid var(--gray-dark); */
}

#app .runner_details_panel .details_key {
    background: var(--white);
    border-radius: 4px;
    padding: 8px 12px;
    border: 1px solid var(--gray-mid);
    font-size: var(--size-xs);
    color: var(--gray-dark);
}

#app .runner_details_panel .details_key_item {
    line-height: 1.4;
}

#app .runner_details_panel .details_stats_table tr.stats_section_header td {
    background: var(--gray-mid);
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-xs);
    text-transform: uppercase;
    padding: 4px 8px;
    letter-spacing: 0.5px;
}

/* Stats Area with Tabs */
#app .runner_details_panel .details_stats_area {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    gap: 0;
    /* background: var(--white); */
    /* border: 1px solid var(--gray-mid); */
    /* border-radius: 4px; */
    overflow: hidden;
}

#app .runner_details_panel .details_stats_tabs {
    display: flex;
    flex-direction: column;
    /* background: var(--gray-light); */
    /* border-right: 1px solid var(--gray-mid); */
    min-width: 70px;
    gap: 3px;
}

#app .runner_details_panel .details_stats_tab {
    padding: 6px 6px;
    cursor: pointer;
    font-size: var(--size-sm);
    font-weight: 500;
    color: var(--gray-dark);
    text-align: center;
    border: 1px solid var(--gray-mid);
    transition: background 0.15s, color 0.15s;
}

#app .runner_details_panel .details_stats_tab:hover {
    /* background: var(--gray-mid); */
}

#app .runner_details_panel .details_stats_tab.active {
    background: var(--blue-mid);
    color: var(
    --white);
    font-weight: 600;
    /* border: 2px solid var(--white); */
    margin-right: -1px;
}

#app .runner_details_panel .details_stats_content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 0 10px;
    box-sizing: border-box;
}

#app .runner_details_panel .details_stats_panel {
    display: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#app .runner_details_panel .details_stats_panel.active {
    display: block;
}

#app .runner_details_panel .details_stats_panel .details_section_wide {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex: none;
    box-sizing: border-box;
}

#app .runner_details_panel .details_stats_panel .details_section {
    border: none;
    box-shadow: none;
    padding: 0;
}

#app .runner_details_panel .details_stats_panel .details_section_title {
    display: none;
}

#app .runner_details_panel .details_stats_panel[data-panel="entry"] .details_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#app .runner_details_panel .details_stats_panel[data-panel="entry"] .details_section {
    border: 1px solid var(--gray-mid);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 10px 12px;
    border-radius: 4px;
}

#app .runner_details_panel .details_stats_panel[data-panel="entry"] .details_section_title {
    display: block;
}

#app .runner_details_panel .details_key_content {
    padding: 12px;
}

#app .runner_details_panel .details_key_content h4 {
    margin: 0 0 8px 0;
    font-size: var(--size-md);
    color: var(--gray-dark);
    border-bottom: 1px solid var(--gray-mid);
    padding-bottom: 4px;
}

#app .runner_details_panel .details_key_content h4:not(:first-child) {
    margin-top: 16px;
}

#app .runner_details_panel .details_key_content p {
    margin: 4px 0;
    font-size: var(--size-sm);
    line-height: 1.4;
}

#app .runner_details_panel .details_stats_tab_key {
    margin-top: auto;
    /* border-top: 1px solid var(--gray-mid); */
    font-size: var(--size-xs);
    color: var(--gray-mid);
}

#app .runner_details_panel .details_stats_table tbody tr.pm_stats_row td {
    background: var(--teal-lightest);
}

#app .runner_details_panel .details_pm_tab .details_pm_empty {
    margin: 8px 0;
    color: var(--gray-mid);
    font-size: var(--size-sm);
}

#app .runner_details_panel .details_pm_summary {
    margin-bottom: 8px;
    font-size: var(--size-sm);
    font-weight: 600;
    color: var(--gray-dark, #333);
}

#app .runner_details_panel .details_pm_table {
    width: 100%;
    margin-top: 2px;
}

#app .runner_details_panel .details_pm_table td.details_pm_num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Entity stats: Table / Charts inner tabs */
#app .runner_details_panel .details_entity_view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#app .runner_details_panel .details_entity_view_tabs {
    display: flex;
    flex-direction: row;
    gap: 4px;
    border-bottom: 1px solid var(--gray-mid);
    padding-bottom: 4px;
}

#app .runner_details_panel .details_entity_view_tab {
    padding: 5px 12px;
    cursor: pointer;
    font-size: var(--size-sm);
    font-weight: 500;
    color: var(--gray-dark);
    border: 1px solid var(--gray-mid);
    border-radius: 3px 3px 0 0;
    background: var(--gray-light, #f5f5f5);
    margin-bottom: -1px;
}

#app .runner_details_panel .details_entity_view_tab:hover {
    background: #e8e8e8;
}

#app .runner_details_panel .details_entity_view_tab.active {
    background: var(--blue-mid);
    color: var(--white);
    font-weight: 600;
    border-color: var(--blue-mid);
}

#app .runner_details_panel .details_entity_view_content {
    flex: 1;
    min-width: 0;
}

#app .runner_details_panel .details_entity_view_panel {
    display: none;
}

#app .runner_details_panel .details_entity_view_panel.active {
    display: block;
}

#app .runner_details_panel .details_entity_view_panel[data-view="charts"] {
    padding-top: 4px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
}

/* Historical stats charts (runner details) */
#app .runner_details_panel .details_stats_charts {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#app .runner_details_panel .details_stats_charts .chart-stat-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 10px;
}

#app .runner_details_panel .details_stats_charts .chart-stat-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    padding: 3px 5px;
    /* background: #f0f0f0; */
    border-radius: 2px;
    font-size: var(--size-sm);
}

#app .runner_details_panel .details_stats_charts .chart-stat-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

#app .runner_details_panel .details_stats_charts .charts-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#app .runner_details_panel .details_stats_charts .chart-stat-wrapper {
    display: flex;
    flex-direction: column;
    /* 4 equal columns; gap is 10px so 3 gaps (30px) are removed across the row */
    flex: 0 0 calc((100% - 30px) / 4);
    max-width: calc((100% - 30px) / 4);
    min-width: 0;
    gap: 1px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 2px 0 2px;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 820px) {
    #app .runner_details_panel .details_stats_charts .chart-stat-wrapper {
        flex-basis: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
    }
}

@media (max-width: 560px) {
    #app .runner_details_panel .details_stats_charts .chart-stat-wrapper {
        flex-basis: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }
}

#app .runner_details_panel .details_stats_charts .chart-stat-title {
    font-weight: 600;
    font-size: 13px;
    color: #1474af;
}

#app .runner_details_panel .details_stats_charts .chart-stat-container {
    width: 100%;
    min-width: 0;
    position: relative;
    height: 140px;
}

#app .runner_details_panel .details_stats_charts .chart-stat-container canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

#app .runner_details_panel .details_stats_charts_loading,
#app .runner_details_panel .details_stats_charts_empty {
    text-align: center;
    padding: 12px;
    color: #666;
    font-size: var(--size-sm);
}

#app .runner_details_panel .details_stats_charts_loading {
    font-style: italic;
    background-color: #f8f8f8;
}

#app .runner_details_panel .details_stats_charts_empty {
    background-color: #f0f0f0;
}

#runner_details_dialog .runner_details_panel .details_entity_view {
    width: 100%;
}

/* Vue race list loading + count flash helpers */
#races .hp-race-list-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--size-xs);
  gap: var(--size-xs);
}
#races .hp-race-list-loading-msg {
  white-space: pre-line;
  line-height: 1.35;
}
#races .hp-race-list-loading-spin {
  width: auto;
  margin: 0;
  font-size: var(--size-xl2);
  color: #49647b;
  line-height: 1;
}

#race_day_selector_refresh.hp-pulse-once {
  animation: hp-race-day-refresh-pulse 0.5s ease;
}
@keyframes hp-race-day-refresh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}