#main,
#main .label,
#main label,
#main select,
#main .select option,
#main select option,
#main button,
#main input[type='number'],
#main input[type='submit'],
#main input[type='date'],
#main table,
#main table tr,
#main table tr td,
#main table tr th {
   font-family: var(--font);
   font-size: var(--size-md);
   font-weight: 500;
}

#main a {
   text-decoration: none;
}

#main input[type='date'] {
    text-transform: uppercase !important
}

.dialog 
.dialog .label,
.dialog label,
.dialog select,
.dialog .select option,
.dialog select option,
.dialog button,
.dialog input[type='number'],
.dialog input[type='submit'],
.dialog input[type='date'],
.dialog table,
.dialog table tr,
.dialog table tr td,
.dialog table tr th {
   font-family: var(--font);
   font-size: var(--size-md);
   font-weight: 500;
}


#title_block .burgermenu {
    font-size: 21px;
}
#title_block .fa.burgermenu {
     background: var(--gray-lightest);
     padding: 0px 7px;
     border: 1px solid var(--gray-dark);
     border-radius: 3px;
     margin: 2px 2px 0px -1px;
     margin: 0;
     line-height: 19px;
     vertical-align: text-top;
}
#title_block .burgermenu.fa-bars {margin-left: 2px;}

#main .bigheader.off {
    display: none;
}

#main input[type='submit'], #main #order_hedge_bet {
    font-size: var(--size-sm);
}

#main table thead tr th {
    font-size: var(--size-md);
}

#main table tr td {
  font-weight: 500;
}

#main table tr .center {
    text-align:center;
    position: relative;
}

#main .fa {
    font-size: var(--size-xl);
    cursor: pointer;
    /* margin: 0px 5px 0px 5px; */
    /* color: var(--gray-dark); */
}

#main .fa.fa-trash {
    margin: 0 5px 0 0;
}

#main table tr td.neg, #main table tr td div.neg {
    color: red;
}

/* DIALOGS */

#bet_diagnostic_dialog  {
    overflow: hidden;
    min-width: 50%;
}

#bet_diagnostic_dialog .bet_diagnostic_editor {
    display: flex;
    flex-direction: column;
    /* gap: 1px; */
    max-height: 88vh;
}

#bet_diagnostic_dialog .bet_diagnostic_editor_container {
    flex: 1;
    overflow: auto;
    /* max-height: 100px; */
}

.dialog {
    font-family: var(--font);
    font-weight: 500;
    font-size: var(--size-lg);
    min-width: 300px;
    position: relative;
    user-select: none;
    padding: 6px;
}

.dialog .dash_btn {
    border-radius: 4px;
    border: 1px solid var(--gray-light);
    font-size: var(--size-md);
    text-transform: uppercase;
    font-weight: 600;
    /* border-radius: 3px; */
    cursor: pointer
}

.dialog .title_header_small {
    font-size: var(--size-lg);
    font-weight: 600;
    display: flex;
    gap: 5px;
    align-items: center;
    position: sticky;
    z-index: 1000;
    top: -6px;
    padding: 6px;
    background: var(--gray-lighter);
}

/* Tables General */

#main table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
}

#main .table_container {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    flex: 1 1 auto;
    min-width: 0;
}
 
#main table thead tr th {
    background-color: var(--blue-dark);
    color: var(--gray-lightest);
    text-transform: uppercase;
    padding: 3px 1px 3px 1px;
    font-size: var(--size-md);
    /* height: 23px; */
    /* line-height: 22px; */
    text-align: center;
    letter-spacing: -0.5px;
    vertical-align: middle;
} 

#main table thead tr td {
    background-color: var(--gray-lightest);
    color: var(--black);
    font-weight: 600;
    text-align: center;
    padding: 0 1px 0 1px;
    line-height: 18px;
    height: 20px;
    position: relative;
    text-transform: uppercase;
}

#main table tr, #main table tr td, #main table tr th {
    /* padding: 4px 1px; */
    white-space: nowrap;
    text-transform: uppercase;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray-light);
    color: var(--black);
    font-variant: tabular-nums;
    /* letter-spacing: -0.5px; */
    font-size: var(--size-md2);
}

#main table thead tr .sort_th {
    cursor: pointer;
}
#main .child_row  {
    background: var(--gray-light);
}
#main table tr.even td {
    background: #f0f0f0;
}
#main table tr.odd td {
    background: var(--white);
}
#main table > tbody > tr.runner_row:hover > td {
    background: var(--green-lightest);
}
#main .b2l_details_table > tbody > tr:hover > td {
    background: var(--green-light);
}
/* #main .b2l_mtp_odds_table > tbody > tr:hover > td {
    background: var(--green-light);
} */
#main #betting_systems_table > tbody > tr:hover > td {
    background: var(--green-lightest);
}
#main #history_tbl > tbody > tr:hover > td {
    background: var(--green-light);
}

#shortlist_form select.stats_weeks {
    margin: 0 0 2px 5px;
    float: right;
    width: 100%;
    width: var(--size-60);
}

/* Stats Period Picker - Custom Dropdown */
.stats_period_container {
    display: flex;
    margin: 0 3px 0 1px;
    align-items: center;
    justify-content: center;
}
.stats_period_picker {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    gap: 3px;
    border: 1px solid var(--blue-mid);
    background: #f1f1f1;
    border-radius: 1px;
    line-height: var(--size-sm);
    padding: 1px 2px;
}
.stats_period_display {
    cursor: pointer;
}
#main .fa.stats_period_trigger {
    cursor: pointer;
    font-size: 10px;
    font-size: var(--base-size);
    transition: opacity 0.2s ease;
    /* color: var(--white); */
}
.stats_period_picker:hover .stats_period_trigger {
    opacity: 1;
}
.stats_period_options {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 2px;
    padding: 0px 0;
    z-index: 1100;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 50px;
    color: #000;
}
.stats_period_picker.active .stats_period_options {
    display: block;
}
.stats_period_options span {
    display: block;
    padding: 6px 11px;
    cursor: pointer;
    /* font-size: 11px; */
    text-align: center;
    transition: background 0.15s ease;
}
.stats_period_options span:hover {
    background: var(--hover-bg, #f0f0f0);
}
.stats_period_options span.active {
    background: var(--green-light, #e8f5e9);
    /* font-weight: bold; */
}

/* Base table setup */
#main .b2l_mtp_odds_table {
    position: relative;
    border-collapse: collapse;
}


#main .b2l_mtp_odds_table > tbody > tr:hover > td, /* row hover */
#main .b2l_mtp_odds_table td.column-hover { /* column hover */
    background: var(--green-light);
}
#main .b2l_mtp_odds_table > tbody > tr:hover > td.column-hover { /* intersection cell */
    background: var(--green-light);
}

#main .race_details_tabs {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#main .race_details {
    margin: 1px 0px 2px 2px;
    display: flex;
    gap: 3px;
}
#main .race_detail {
    padding: 0px 0px 0 2px;
    line-height: var(--size-lg);
    border-radius: 2px;
    display: inline-block;
    /* background: var(--gray-mid); */
    text-align: center;
    border: 1px solid var(--gray-dark);
    font-size: var(--size-md);  /* was 13px */
    flex-direction: column;
    min-width: var(--size-70);
}
#main .race_display_key, #main .race_display_value {
  display: inline-block;
  /* margin-right: 3px; */
  white-space: nowrap;
}
#main .race_display_value {
  font-weight: 600;
}

#main #cards_settings {
    /* padding: 5px; */
    /* margin: 1px; */
    /* border: #828282 4px solid; */
    /* display: none; */
    /* position: absolute; */
    z-index: 1000;
    /* background: #d6d6d6; */
    left: 0px;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#main #landing {
    padding: 3px 2px;
    background: var(--blue-light);
    margin: 2px 2px 0 2px;
    text-transform: uppercase;
    font-size: var(--size-md2);;
    letter-spacing: 0.5px;
    cursor: pointer;
}
#main #landing a {
    color: var(--gray-light);
}

#main #races {
    width: 100%;
    /* min-width: 200px; */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
     /* IE11 Fix */
    overflow: hidden;
    gap: 1.5px;
    margin: 1px 0 0 0;
}

#races_meeting_filter {
    margin: 2px 2px;
    padding: 2px 0;
    box-sizing: border-box;
}

#main #races .races_races .race.race_meeting_filtered_out {
    display: none !important;
}

#main #races .races_block {
    min-height: 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

#main #races .races_shortlists {
    max-height: 50%; 
}

#main #races .races_races {
    flex: 1;
}

/* width */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: var(--gray-light);
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 1px;
    /*margin-top: 20px*/
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--blue-dark);
    border-radius: 1px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-mid); 
}

#main .race {
    background: var(--gray-lighter);
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 0px 5px 3px;
    display: flex;
    font-variant: tabular-nums;
    align-items: center;
}
#main .race:hover {
    background: var(--blue-mid);
    color: var(--gray-lightest);
}
#main .race:hover .race_link a {
    color: var(--gray-lightest);
}
#main .race.selected, #main .race.race_link_shortlist.selected {
    background: var(--blue-dark);
}
#main .race.selected .race_link a, #main .race.selected .nu_of_sl,  #main .race.selected .fa {
   color: var(--white);
   display: table-cell
}
#main .race_link {
    max-width: 230px;
    overflow: hidden;
}
#app .race_link a {
    overflow: hidden;
    color: var(--black);
}

#main .race.race_link_shortlist {background: var(--gray-mid);color: #fff;}
#main .race.race_link_shortlist:hover {background: var(--blue-mid);}
#main .race.race_link_shortlist.selected:hover {background: var(--blue-light);}

#main .race.race_link_shortlist  a {color: #ffffff;}

#main .race.race_link_shortlist .nu_of_sl {
    margin: 0 1px 0 0;
    color: #ffffff;
}

#main #races .races_block .race .nu_of_sl {
    padding: 0 2px;
   border-radius: 5px;
}

#main #races .nu_of_sl.nu_of_sl_changed {
    animation: nu_of_sl_pulse 0.45s ease-out;
}

@keyframes nu_of_sl_pulse {
    0% {
        transform: scale(1);
        background-color: transparent;
    }
    40% {
        transform: scale(1.5);
        background-color: var(--yellow-light);
        border-radius: 2px;
    }
    100% {
        transform: scale(1);
        background-color: transparent;
    }
}
#main #races .abandoned {
  opacity: 0.5;
}
#main .abandoned.race .race_link a {
  cursor: default;
  color: var(--gray-dark);
}
#main .abandoned.race:hover {
    background: var(--gray-mid);
    color: var(--gray-dark);
}

input[type="checkbox"].sl_include {
    width: var(--size-xl);
    height: var(--size-xl);
    vertical-align: text-top;
    margin: 0 4px 0 0;
    border: 1px solid var(--gray-light);
    outline: 1px solid var(--gray-light);
}

#main .race .fa-link, #main .race .stars,  #main .race .edit {
  font-size: var(--size-lg);
  /* float: right; */
  margin: 0px 3px 0 3px;
}
#main .race .stars {
    font-size: var(--size-md);
    margin-top: 1px;
    border: 1px solid var(--gray-dark);
    border-radius: 2px;
    padding: 0 4px;
    background: var(--gray-mid);
}
#main .race.selected .fa-link:hover, #main .race .fa-link:hover {
  color: var(--gray-light)
}
#main .race_child {
  display: none;
  display: table-cell;
  width: 168px;
  padding: 0px 2px;
  border-radius: 2px;
  background: var(--gray-dark);
  color: var(--gray-light);
  font-weight: 400;
}

/* SHORTLIST CONTROL */

#app-modal-shortlist-settings .sl_options_wrapper {
    flex: 1;
    width: 266px;
    width: 100%;
    max-height: 100%;
    min-height: 0;
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    /* border: 2px solid #666; */
    /* border-radius: 2px; */
    padding: 3px 0;
}

#shortlist_form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#app-modal-shortlist-settings .sl_right_wrapper {
    flex: 1;
    overflow: hidden auto;
    /* margin: 2px 3px 2px 279px; */
    /* padding: 4px 4px; */
    /* border: 2px solid #666; */
    /* border-radius: 2px; */
}

#app-modal-shortlist-settings .sl_main_options,
#sl_main_options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 2px 1px 2px 3px;
  border-radius: 2px;
}

#app-modal-shortlist-settings .sl_race_options {
    /* border: 2px solid #666; */
    margin: 1px 3px 3px 3px;
    border-radius: 2px;
}

#app-modal-shortlist-settings .sl_settings_block {
  border: 2px solid var(--gray-dark);
  /* border-top: none; */
  margin: 10px 1px 2px 0px;
  border-radius: 2px;
 }

#app-modal-shortlist-settings .sl_settings_block:first-child {margin: 0px 1px 2px 0px;}

#app-modal-shortlist-settings .sl_settings_block_title  {
    line-height: 24px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0px;
    background: white;
    margin-left: -2px;
    margin-right: -2px;  /* -2px padding - 1px block margin */
    padding-left: 3px;
    padding-right: 3px;
    padding: 2px 2px 0 2px;
    width: calc(100% + 4px);
    background: white;
    z-index: 1;
    border-bottom: 2px solid var(--gray-dark);
    border-top: 2px solid var(--gray-dark);
    background: var(--blue-lightest);
}
#app-modal-shortlist-settings .sl_settings_block_title span  {
 letter-spacing: 0px; 
}
#app-modal-shortlist-settings .sl_settings_block_title span {
  text-transform: uppercase;
  font-size: var(--size-lg);
  margin: 0;
}

#app-modal-shortlist-settings .sl_settings_block_title span.settings_level_label {
    font-size: var(--size-md);
    text-align: right;
    display: none;
}

#main .fa.settings_guide_link {
    color: #217f21ad;
    margin: 0 4px 0 0;
}

#app-modal-shortlist-settings .sl_settings_block_toggle {
    font-size: var(--size-xl);
    color: var(--gray-dark);
    margin-right: 3px;
    display: none;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 2px;
    padding: 4px 4px;
    background: var(--gray-lightest, #f5f5f5);
    border: 1px solid #c8c8c8;
    border-radius: 2px;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table {
    width: 100%;
    border-collapse: collapse;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table th,
#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table td {
    font-size: var(--size-sm);
    padding: 2px 2px;
    text-align: right;
    border-bottom: 1px solid #ddd;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table th:first-child,
#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table td:first-child {
    text-align: left;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table tbody tr {
    cursor: pointer;
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table tbody tr:hover {
    background: rgba(33, 127, 33, 0.08);
}

#app-modal-shortlist-settings .systems_agreement_breakdown_panel .systems_breakdown_table tbody tr.systems_breakdown_row_selected {
    background: rgba(33, 127, 33, 0.16);
    font-weight: 600;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 2px;
    padding: 4px 4px;
    background: var(--gray-lightest, #f5f5f5);
    border: 1px solid #c8c8c8;
    border-radius: 2px;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table {
    width: 100%;
    border-collapse: collapse;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table th,
#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table td {
    font-size: var(--size-sm);
    padding: 2px 2px;
    text-align: right;
    border-bottom: 1px solid #ddd;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table th:first-child,
#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table td:first-child {
    text-align: left;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table tbody tr {
    cursor: pointer;
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table tbody tr:hover {
    background: rgba(33, 127, 33, 0.08);
}

#app-modal-shortlist-settings .stake_behaviour_breakdown_panel .stake_behaviour_breakdown_table tbody tr.stake_behaviour_row_selected {
    background: rgba(33, 127, 33, 0.16);
    font-weight: 600;
}

#shortlist_form .settings_inputs_container.stake_behaviour_with_toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

#shortlist_form .stake_behaviour_table_toggle {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #242424;
    font-size: 16px;
    line-height: 1;
}

#shortlist_form .stake_behaviour_table_toggle:hover {
    color: #217f21;
}

#shortlist_form .settings_inputs_container.min_agreeing_systems_with_toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Project BOOK COVERED: cap + sort on one row (options.bkc only) */
#shortlist_form .sl_iw[filter_type='options.bkc'] .settings_inputs_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#shortlist_form .sl_iw[filter_type='options.bkc'] select {
    width: auto;
    min-width: 86px;
    max-width: 120px;
    flex: 0 1 auto;
}

#shortlist_form .systems_agreement_table_toggle {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #242424;
    font-size: 16px;
    line-height: 1;
}

#shortlist_form .systems_agreement_table_toggle:hover {
    color: #217f21;
}

#app-modal-shortlist-settings label, .sl_iw {
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  margin: 0px 0;
  /* padding: 1px 1px; */
  gap: 1px;
}


#app-modal-shortlist-settings .sl_main_options label {line-height: var(--size-22);}

.sl_iw {
   line-height: var(--size-22);
   border-bottom: 1px solid var(--gray-light);
}

.sl_iw:last-child, .bar_full_width  {
   border-bottom: none;
}

.sl_iw:last-child {
   /* margin: 3px 0 1px 0; */
}

#shortlist_form select, #shortlist_form .select {
  width: 176px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #242424;
  border-radius: 2px;
  padding: 2px 0 2px 0;
  margin: 2px 0 2px 0;
  background: white;
  text-transform: uppercase;
  /* min-height: 22px; */
}

 #shortlist_form .select {
    width: 100%
 }

#shortlist_form .select[disabled] {
  background: var(--gray-mid);
  overflow: hidden;
}




#system_status_filter {
    padding: 2px 0px;
}

#app-modal-shortlist-settings #shortlist_to_update, #system_status_filter, #app-modal-shortlist-settings  #shortlist_child {
    /* margin: 0px 4px 0 2px; */
    line-height: 22px;
    /* height: 25px; */
    border: 2px solid var(--gray-dark);
    font-weight: 700;
    max-width: calc(100% - 52px);
    flex: 1;
}

#app-modal-shortlist-settings input[type='text'] {
    width: 100%;
    font-weight: 600;
}

#app-modal-shortlist-settings .sl_iw input[type='checkbox'] {
    margin: 2px 1px 0 0;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
}

#app-modal-shortlist-settings span, .sl_iw span,
#app-modal-shortlist-settings .span, .sl_iw .span {
  flex:1;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--size-md);
  letter-spacing: -0.5px;
}

/* Filter row labels: do not equal-squeeze label + spacer (keeps rail usable) */
#app-modal-shortlist-settings .sl_iw > span:first-child {
  flex: 0 1 auto;
  min-width: 0;
}
#app-modal-shortlist-settings .sl_iw > span:nth-child(2):empty {
  flex: 1 1 0%;
  min-width: 0;
}

#view_query .report_filters_entity_refresh {
    cursor: pointer;
    color: #37393b;
    font-size: 13px;
    margin-left: 6px;
}

#view_query .report_filters_entity_refresh:hover {
    color: #000;
}

.race_day_refresh_menu {
    position: fixed;
    z-index: 10050;
    min-width: 196px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #c8ccd0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.race_day_refresh_menu_item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: #222;
    cursor: pointer;
}

.race_day_refresh_menu_item:hover,
.race_day_refresh_menu_item:focus {
    background: #eef3f8;
    outline: none;
}

.settings_level_title {
    /* flex: 0; */
    width: 50px;
    /* text-transform: uppercase; */
}

#app-modal-shortlist-settings .span {
    display: flex;
    flex-direction:column;
    gap: 10px;
    align-items: center;
}

#app-modal-shortlist-settings .fa:hover {
    opacity:0.5
}

#app-modal-shortlist-settings .sl_iw span[filter_type] {
    flex:0;
    white-space: nowrap;
    padding: 2px 3px 2px 1px;
    border-radius: 2px;
}

.sl_settings_block {
    flex-direction: column;
    /* gap: 2px; */
    padding: 0px 2px 0px 2px;
}


#main #app.show_all_filters .sl_settings_block, 
#main #app.show_all_filters .sl_settings_sub_block,
#main #app.show_all_filters .sl_settings_block_options,
#main #app.show_all_filters .sl_settings_block,
#main #app.show_all_filters .sl_settings_block .sl_iw[filter_type],
#main #app.show_all_filters .sl_settings_block .show_on_show {
  display: flex;
}

#main #app .sl_settings_block .show_on_show {
  display: none;
  flex: 1;
  width: 100%;
}

#main #app.show_all_filters .sl_settings_block_options,
#main #app.show_all_filters .sl_settings_block .inc_exc,
#main #app.show_all_filters .sl_settings_block .select,
#main #app.show_all_filters .sl_settings_block select,
#main #app.show_all_filters .sl_settings_block .settings_inputs_container,
#main #app.show_all_filters .report_filters_apply_row input[type="checkbox"],
#main #app.show_all_filters .report_filters_entity_refresh {
  display: none;
}

#main .sl_iw[filter_type].on, 
#main #app.show_all_filters .sl_iw[filter_type] {
    display: flex;
    align-items: center;
    /* padding: 2px 0 2px 0; */
    background: #fff;
    /* border-bottom: 1px solid; */
}

#main .sl_iw[filter_type].on {
     /* border-bottom: 1px solid; */
}

#main #app.show_all_filters .sl_iw[filter_type].bar_full_width {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid;
}

#main #app .sl_iw[filter_type].bar_full_width {
    flex-direction: column;
}

#main #app .sl_iw[filter_type].bar_full_width select,
#main #app .sl_iw[filter_type].bar_full_width .select {
    width: 100%
}

#main #app .tipster_select_helpers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px;
    width: 100%;
}

#main #app .tipster_select_helper {
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid var(--gray-mid, #999);
    border-radius: 3px;
    background: var(--white, #fff);
    color: var(--gray-dark, #333);
}

#main #app .tipster_select_helper:hover {
    background: var(--blue-light, #e8f0fe);
}

/* Phase 6: compact multiselect (course, race classifications) */
#main #app .sl_multi_compact_field.on .sl_multi_compact,
#main #app.show_all_filters .sl_multi_compact_field .sl_multi_compact {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;
}

#main #app .sl_multi_compact_head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

#main #app .sl_multi_compact_toggle {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    border: 1px solid var(--gray-mid, #999);
    border-radius: 3px;
    background: var(--white, #fff);
    color: var(--gray-dark, #333);
}

#main #app .sl_multi_compact_toggle:hover {
    background: var(--blue-light, #e8f0fe);
}

#main #app .sl_multi_compact_chips {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    gap: 4px;
    margin: 0;
    padding: 3px 2px 3px 2px;
    border-radius: 2px;
    /* max-height: 84px; */
    /* overflow-y: auto; */
    width: 100%;
    /* border-bottom: 1px solid var(--gray-light); */
    background: #ccc;
}

#main #app .sl_multi_compact_chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 6px;
    border: 1px solid var(--gray-mid, #bbb);
    border-radius: 3px;
    background: var(--white, #fff);
}

#main #app .sl_multi_compact_chip_x {
    border: 0;
    background: transparent;
    color: var(--gray-mid, #666);
    cursor: pointer;
    font-size: var(--size-xl8);
    line-height: var(--size-md2);
    padding: 0 0px;
}

#main #app .sl_multi_compact_chip_x:hover {
    color: var(--red-mid, #c00);
}

#main #app .sl_multi_compact_picker {
    width: 100%;
}

#main #app .sl_multi_compact_field.on .sl_multi_compact_picker .select {
    /* max-height: 160px; */
}

#main #app .sl_iw[filter_type], 
#main #app .sl_settings_block,
#main #app .sl_settings_sub_block {
  display: none;
}

#main #app .sl_settings_block_options,
#main #app .sl_settings_block_options .sl_iw[filter_type] {
    display: flex;
    /* padding: 0px 1px 3px 1px; */
}

#main #app .sl_settings_block:has(div.on[filter_type]),
#main #app .sl_settings_sub_block:has(div.on[filter_type]),
#main #app .sl_settings_block:has(div.on[filter_type]) .sl_iw[filter_type].on
{
    display: flex;
    flex-wrap: wrap;
}

/* #main #app .sl_settings_block:has(div.on[filter_type]) .sl_settings_sub_block {
    display: flex;
} */

#main #app.show_all_filters .sl_settings_block_options:has(div.on[filter_type]) {
    display: none
}

#main #app .sl_settings_block .sl_settings_sub_block {
    background: var(--blue-mid);
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    margin: 3px 0px;
    border-radius: 2px;
}

#main #app .sl_settings_block .sl_settings_sub_block div[filter_type] {
    padding: 1px 1px;

}
#main #app .sl_settings_block .sl_settings_sub_block div[filter_type] .settings_inputs_container {
        display: flex;
        gap: 2px;
}
#main #app.show_all_filters .sl_settings_block .sl_settings_sub_block div[filter_type] .settings_inputs_container {
        display: none;
}

#main #shortlist_form .settings_inputs_container {
    display: flex;
    align-items: center;
    gap: 2px;
}

#main #shortlist_form .settings_inputs_container .inc_exc {
    flex: 0 0 auto;
    height: auto;
    margin: 0;
}


#main #app.show_all_filters div[filter_type].on {
    background: var(--green-light);
  }

#main #app .sl_settings_sub_block_title {
    color: var(--white)
}


#main .show_all_filters .sl_iw[filter_type] span:hover {
    cursor: pointer;
}
#main #toggle_shortlist_filters.editing {
    color: var(--red-mid);
    font-weight: 700;
}
#main #toggle_shortlist_filters:disabled,
#main #toggle_shortlist_filters.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#main .show_all_filters .sl_settings_block_options .sl_iw[filter_type] span,
#main .show_all_filters .sl_settings_block_options .sl_iw[filter_type] span :hover,
#main .show_all_filters .sl_settings_block_options .sl_iw.on[filter_type] span:hover,
#main .show_all_filters .sl_settings_block_options .sl_iw.on[filter_type],
#main .show_all_filters .sl_settings_block_options .sl_iw[filter_type].editing {
    background: transparent;
    color: var(--gray-dark);
    cursor: default;
}

#main #app.show_all_filters .sl_settings_block_title {
    cursor: pointer;
}

#main #app.show_all_filters .sl_settings_block_title a[href] {
    cursor: pointer;
}

#main #app.show_all_filters .sl_settings_sub_block_header {
    cursor: pointer;
}

#main #app.show_all_filters .sl_settings_block_toggle,
#main #app.show_all_filters .sl_settings_sub_block_toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    margin: 0 2px 0 0;
    color: #404040;
    font-size: var(--size-md);
}

#main #app.show_all_filters .sl_settings_sub_block_toggle {
 color: #fff;
}
#main #app.show_all_filters .sl_settings_block.collapsed > *:not(.sl_settings_block_title) {
    display: none !important;
}

#main #app.show_all_filters .sl_settings_sub_block.collapsed > *:not(.sl_settings_sub_block_header) {
    display: none !important;
}

#main #app.show_all_filters .sl_settings_block:not(.collapsed) > .sl_settings_block_title .sl_settings_block_toggle,
#main #app.show_all_filters .sl_settings_sub_block:not(.collapsed) > .sl_settings_sub_block_header .sl_settings_sub_block_toggle {
    transform: rotate(90deg);
}

#main #app.show_all_filters .sl_settings_block.collapsed:has(.sl_iw.on) > .sl_settings_block_title,
#main #app.show_all_filters .sl_settings_block.collapsed:has(div.on[filter_type]) > .sl_settings_block_title,
#main #app.show_all_filters .sl_settings_block.collapsed:has(.on) > .sl_settings_block_title {
    background: var(--green-light);
}

#main #app.show_all_filters .sl_settings_sub_block:has(.sl_iw.on) > .sl_settings_sub_block_header,
#main #app.show_all_filters .sl_settings_sub_block:has(div.on[filter_type]) > .sl_settings_sub_block_header,
#main #app.show_all_filters .sl_settings_sub_block:has(.on) > .sl_settings_sub_block_header {
    background: var(--green-light) !important;
    border-radius: 2px;
}

#main #app.show_all_filters .sl_settings_sub_block:has(.sl_iw.on) > .sl_settings_sub_block_header .sl_settings_sub_block_title,
#main #app.show_all_filters .sl_settings_sub_block:has(div.on[filter_type]) > .sl_settings_sub_block_header .sl_settings_sub_block_title,
#main #app.show_all_filters .sl_settings_sub_block:has(.on) > .sl_settings_sub_block_header .sl_settings_sub_block_title,
#main #app.show_all_filters .sl_settings_sub_block:has(.sl_iw.on) > .sl_settings_sub_block_header .sl_settings_sub_block_toggle,
#main #app.show_all_filters .sl_settings_sub_block:has(div.on[filter_type]) > .sl_settings_sub_block_header .sl_settings_sub_block_toggle,
#main #app.show_all_filters .sl_settings_sub_block:has(.on) > .sl_settings_sub_block_header .sl_settings_sub_block_toggle {
    color: var(--gray-dark) !important;
}

#main #app.show_all_filters .sl_settings_sub_block.collapsed:has(.sl_iw.on),
#main #app.show_all_filters .sl_settings_sub_block.collapsed:has(div.on[filter_type]),
#main #app.show_all_filters .sl_settings_sub_block.collapsed:has(.on) {
    background: var(--green-light) !important;
}

.sl_settings_sub_block_header {
    display: flex;
    align-items: center;
    width: 100%;
}

#app-modal-shortlist-settings label span.pace_score_span {
    display: flex;
    align-content: space-between;
    align-items: center;
}

/* System BOOK COVERED: cap + sort on one row, inputs right-aligned */
#shortlist_form .sl_iw[filter_type='rnr_stats.bkc'] .book_covered_settings_inputs_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

#shortlist_form .sl_iw[filter_type='rnr_stats.bkc'] select {
    width: auto;
    /* min-width: 86px; */
    width: 105px;
    flex: 0 1 auto;
    margin: 0;
}

#app-modal-shortlist-settings input[type='number']  {
  width: 58px;
  font-weight: 600;
  padding: 2px;
  margin: 2px 0 2px 0;
}

#app-modal-shortlist-settings label select  {
  /* width: 150px; */
  margin: 0 5px 0 5px;
}

#app-modal-shortlist-settings #sr_limit {
  width: 40px;
  margin: 0 4px;
}
#app-modal-shortlist-settings .sl_race_options_btns {
    display: flex;
    gap: 2px;
}
#app-modal-shortlist-settings .sl_race_options_btns button {
  padding: 2px;
  margin: 3px 0 0px 0px;
  border: 2px solid var(--blue-dark);
  flex: 1;
  letter-spacing: -0.5px;
  /* line-height: var(--size-md); */
}

#app-modal-shortlist-settings button:hover:not(:disabled) {
  /* background: var(--gray-mid); */
  /* border: 2px solid var(--blue-dark); */
  font-weight: 700;
  /* color: #fff; */
  cursor: pointer;
}

#app-modal-shortlist-settings button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: inherit;
  background: rgb(235, 235, 235);
}

.sl_export {
    display: flex;
    flex-direction: column;
}

.sl_export_type .fa {
    margin: 0 7px 0 0;
}

.sl_export_type .fa.fa-download{
    color: blue
}

.sl_export_label {
    width: 80px;
    flex: 1;
}

.sl_settings_display {
    text-transform: uppercase;
}

/* PANEL LEFT / SETTINGS */

#main .settings_block {
    position: relative;
    margin: 2px 0;
    border-bottom: 2px solid var(--gray-dark);
    background: var(--gray-mid);
}

#main .panel[panel="racelist"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* overflow: auto; */
}

#main .panel[panel="settings"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
#main .panel[panel="settings"].show { /* POPOUT */
      visibility: visible;
      position: fixed;
      top: 5%;
      max-height: 90%;
      left: 50%;
      width: 250px;
      margin-left: -125px;
      z-index: 1000;
      background: var(--gray-light);
      padding: 0 4px;
      border: 10px solid var(--gray-dark);
}


#main .settings_scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
#main #reset_settings, #main #save_settings, #main #close_settings, #main #modify_layout{
    text-transform: uppercase;
    margin: 2px;
    cursor: pointer;
    text-align: center;
    padding: 0;
    color: var(--gray-dark);
    background-color: var(--gray-mid);
    line-height: 25px;
    min-height: 25px;
    text-align: center;
    border: 2px solid var(--blue-dark);
    line-height: 21px;
    width: 100%;
}
#main #save_settings:hover, #main #close_settings:hover {
background-color: var(--gray-mid);
}
#main #close_settings {
  display: none
}

#main #modify_layout {
    flex: auto;
    min-width: 0;
    color: var(--gray-dark)
}
#main #modify_layout[action='save'] {
    color: var(--green-dark)
}

#main .settings_scroll input[type='number'] {
    /* font-weight: 700; */
    width: 45px;
    /* margin: 2px 6px; */
    /* line-height: 16px; */
    padding: 1px 0;
    /* font-size: var(--size-md); */
    /* line-height: 13px; */
    margin: 0px 0px 0px 0;
    font-weight: 600;
    letter-spacing: -0.5px;
    border: 1px solid var(--gray-mid);
}
#main .settings_scroll input[type='number'].target_profit, #main .settings_scroll select {
    line-height: 16px;
    /* margin-right: 1px; */
    text-transform: uppercase;
    font-weight: 600;
}
#main .b2l_same_similar_opts input[type='radio'] {
    margin:0 0 0 4px;
    vertical-align: middle;
}
#main .settings_scroll .setting {
    clear: both;
    width: 100%;
    text-transform: none;
    border-bottom: 1px solid var(--gray-mid);
    padding: 1px 2px 1px 2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    margin-bottom: -1px;
    margin-top: 1px;
}
#main .settings_scroll .setting.space {justify-content: space-between;}
#main .settings_scroll .setting.space label {width: 100%;}
#main .settings_scroll .setting span {margin-right: 2px;letter-spacing: -0.5px;}

#main .settings_scroll input[type='checkbox'] {vertical-align: top;margin: 3px 2px 0 0;}
#main .settings_scroll .b2l_same_similar_opts {
    margin-right: 2px;
    margin-top: 0px;
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    float: right;
}
#main .settings_scroll .b2l_similar_opts {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#main .settings_scroll .setting  .b2l_similar_opts label {
    padding: 0px;
    font-weight: 400;
    letter-spacing: -1px;
    width: 75px;
    margin-right: 0px;
}
#main .settings_scroll .setting .b2l_similar_opts label span {
    margin-right: 0px;
    font-size: var(--size-sm);
    font-weight: 600;
}

#main .settings_scroll .b2l_similar_opts input[type='number'] {
    width: 36px;
    margin: 0px 0px 0px 0;
    float: right;
    font-weight: 600;
    letter-spacing: -0.5px;
    border: 1px solid var(--gray-mid);
}

#main .settings_scroll .show_charts {
    font-size: 24px;
}

#main .summary_colour_key {
    margin: 2px 0;
    display: flex;
    align-items: center;
}

#main .settings_scroll input[type='number'].summary_colour_min {
    margin: 2px 2px 2px 4px;
    padding: 5px 6px 5px 0px;
    width: 63px;
}

#main .settings_scroll .setting .switch_label {
    margin-right: 0px;
    font-size: var(--size-sm);
    margin-top: -2px;
}

#main .settings_scroll .setting .within_explian {
    width: 100%;
    font-size: var(--size-sm);
    line-height: 10px;
    padding: 0px 1px 3px 1px;
    margin-bottom: 2px;
    border-radius: 2px;
    margin-top: 2px;
}

/* SETTINGS - FILTERS SETTTINGS */
#main .paging_filters {
  justify-content: flex-end;
  /* max-width: 100%; */
  flex-wrap: wrap;
  padding: 2px 2px 2px 2px;
  margin: 2px 5px 2px 1px;
  display: flex;
  /* align-self: end; */
  align-items: center;
  background: var(--gray-lightest);
  border-radius: 2px;
}
#main .paging_filter label {
    display: flex;
    /* flex-direction: column; */
    font-weight: 600;
    letter-spacing: -0.5px;
    gap: 4px;
    white-space: nowrap;
    align-items: center;
}

#main .paging_filter label.flexrow {align-items: center;}
#main .paging_filter label.flexrow .switch {margin: 1px 3px 2px -1px;}
#main .paging_filter input[type='number'] {
  width: 48px;
  font-weight: 600;
  padding: 4px;
  letter-spacing: -1px;
  margin: 0 3px;
}
#main .paging_filter input[type='checkbox'] {
    width: 16px;
    height: 16px;

}
#main .paging_filter .flexrow_page .shortlist_qualifiers_page_change {
    display: inline-block;
    padding: 3px 7px;
    font-weight: 400;
}

#main .paging_filter .flexrow_page div {
display: inline-block;
         padding: 0px 3px;
}

#main .paging_filter .flexrow_page .sl_page_change {
  border: 2px solid var(--gray-dark);
  border-radius: 3px;
  background: var(--gray-mid);
  padding: 2px 9px;
  margin: 0 2px;
  line-height: 17px;
  opacity: 0.5;
}
#main .paging_filter .flexrow_page .sl_page_change.active {
  opacity: 1;
}
#main .paging_filter .flexrow_page .sl_page_change.active:hover {
      background: var(--gray-light);
  cursor: pointer;

}
/* SETTINGS ADD / REMOVE */

@-webkit-keyframes wiggle
{
    0%      {-webkit-transform: rotateZ( 7deg);}
    50%     {-webkit-transform: rotateZ(-7deg);}
    100%    {-webkit-transform: rotateZ( 7deg);}
}
@-moz-keyframes wiggle
{
    0%      {-moz-transform:    rotateZ( 7deg);}
    50%     {-moz-transform:    rotateZ(-7deg);}
    100%    {-moz-transform:    rotateZ( 7deg);}
}
@-o-keyframes wiggle
{
    0%      {-o-transform:      rotateZ( 7deg);}
    50%     {-o-transform:      rotateZ(-7deg);}
    100%    {-o-transform:      rotateZ( 7deg);}
}
@keyframes wiggle
{
    0%      {transform:         rotateZ( 7deg);}
    50%     {transform:         rotateZ(-7deg);}
    100%    {transform:         rotateZ( 7deg);}
}
#main .add_remove_setting {
    text-align: right;
    background: var(--gray-light);
    position: absolute;
    z-index: 1000;
    width: 27px;
    height: 20px;
    right: 0px;
    top: 1px;
    font-size: 19px;
    line-height: 20px;
    padding: 0 2px;
    display: none;
}
#main .add_remove_setting.add_remove_main {
  color: var(--green-dark);
  font-size: 21px;
  line-height: 19px;
}

#main .add_remove_setting:hover {
    background: var(--gray-mid);
}
#main .add_remove_setting.fa-toggle-off {
    color: var(--red-dark);
}
#main .add_remove_setting.fa-toggle-on {
    color: var(--green-dark);
}
#main .add_remove_setting.add_remove_main.fa-plus {
    line-height: 18px;
}

/* RACES TAB, PACE PANEL */
#main #race_tbl_b2l thead tr td, #main .th_prices_bsp, #main .th_prices_status, #main .th_prices_bsp_status {
    text-align: center;
}

/* MAIN TAB, BETS PANEL */
#main .details-toggle-wrapper {
    margin-left: 5px;
    font-weight: 600;
}

/* MAIN TAB, ODDS PANEL */
#main #race_tbl_odds select {
    font-size: var(--size-xs);
    padding: 0px;
    margin: 0px 0px 0px -1px;
    width: 90%;
    color: var(--gray-dark);
}
#main #race_tbl_odds .odds_col_odds {
    line-height: 27px;
    display: inline-block;
    text-align: center;
    width: 100%;
}
#main #race_tbl_odds .odds_col_moved {
    border-radius: 2px;
    border: 1px solid var(--gray-mid);
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-weight: 600;
    text-shadow: -1px -1px 0 var(--gray-mid), 1px -1px 0 var(--gray-mid), -1px 1px 0 var(--gray-mid), 1px 1px 0 var(--gray-mid);
}

/* MAIN TAB, HISTORY PANEL */
#main .history_period_container {
    position: relative;
    display: flex;
    gap: 5px;
    margin: 2px 2px 4px 2px;
    height: 220px;
}
#main .history_period_container .history_period_container_child_table {
    border: 2px solid var(--gray-mid);
    /* height: 100%; */
    overflow: auto;
    width: 500px;
}
#main #history_period_plot {
    width: 100%;
}

.history_frm {
    display: flex;
    gap: 3px;
    align-items: center;
}

#main .history_period_container .history_period_container_child_plot {
    flex: 1;
    /* margin-left: 5px; */
    border: 2px solid var(--gray-mid);
    display: flex;
}

#main .history_flex .lbl {
    /* font-style: italic; */
    cursor: pointer;
} 

#main .history_flex .lbl:hover {
    color: var(--gray-mid);
}
#main #history_period_frm label {
    margin: 0 4px 0 0;
}
#main #history_period_frm input[type='radio'] {
    margin: -3px 1px 0 1px;
    vertical-align: middle;
}
#main #history_period_frm {
    display: flex;
    align-items: center;
    /* width: 100%; */
}
#main #history_period_frm .history_period_actions {
    margin-left: 23px;
    display: flex;
    align-items: center;
    gap: 10px;
    border:  1px solid var(--gray-mid);
    padding: 2px 5px;
    border-radius: 2px;
    background: var(--gray-lightest);
    /* padding: 2px; */
    border: 1px solid var(
    --gray-mid);
    border-radius: 2px;
}
#main #history_period_frm .history_action_icon {
    cursor: pointer;
    font-size: var(--size-xl2);
    color: var(--gray-dark);
    background: #fff;
    padding: 2px;
    border:  1px solid var(--gray-mid);
    border-radius: 2px;
    margin: 0;
}
#main #history_period_frm .history_action_icon:hover {
    color: var(--gray-mid);
}
#main #history_period_frm .history_archive_open_icon {
    color: var(--blue-dark, #3a6ea5);
}
#main #history_period_frm .history_archive_open_icon:hover {
    color: var(--blue-mid, #4a6fa5);
}
#main #history_date {
    width: 81px;
    font-weight: 600;
}
#main .get_bets_history {
  text-decoration: underline;
}
#main .get_bets_history:hover {
  cursor: pointer;
  color: green
}

/* fixed-table */
#main section.tbl_fixed_section {
    width: 100%;
    position: relative;
    /* height: 100%; */
}
#main .tbl_fixed_container {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
    left: 0;
    right: 0;
    height: 100%;
}
/* end - fixed-table */


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 19px;
  margin: 0 1px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
#main .order_setting label.switch {
  width: 34px;
  /* text-align: center; */
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0px;
  bottom: 0;
  width: 36px;
  /* left: 0; */
  background-color: var(--gray-dark);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 2px;
}
.switch.both_on .slider {
    background-color: var(--blue-light);
}
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--green-dark);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--blue-light);
}
input:checked + .slider:before {
  -webkit-transform: translateX(36px);
  -ms-transform: translateX(36px);
  transform: translateX(13px);
}
/* Rounded sliders */
#main .settings_scroll .setting span.slider.round {
  border-radius: 2px;
  margin-right: 0;
}
.slider.round:before {
  border-radius: 1px;
}
.switch[for='chly'], .switch[for='cdfbtm'] {
  margin-left: auto;
  margin-right: 0
}

/*  Long slider*/

.long_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 2px; 
    background: var(--blue-dark);
    cursor: pointer;
}
.long_slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 2px; 
    background: var(--blue-dark);
    cursor: pointer;
}
/* RUNNER DEATILS (POPUP) */

#main .rv_pace_comment {
    height: 22px;
    line-height: 22px;
    background: var(--blue-dark);
    border-radius: 2px;
    margin: 0 4px 2px 0;
    font-size: var(--size-md);
    padding: 0 0 0 5px;
    color: var(--gray-lightest);
    width: 100%;
    flex-shrink: 0;
    text-transform: capitalize;
}
#main .prices_panel[panel='previous'] {
    flex: 1;
    min-height: 0;
    max-height: 350px;
}
#main .b2l_details_table_scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
#main .b2l_details_table_scroll .b2l_details_table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--gray-light);
}
#main .runner_details_wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
}
#main .runner_details_wrapper table tr th, #main .runner_details_wrapper table tr td,
#main .runner_detail_inline table tr th, #main .runner_detail_inline table tr td {
    letter-spacing: -1px;
    position: relative;
    overflow:hidden;
    font-variant: tabular-nums;
}
#main .runner_detail_inline table tr th.runner_detail_inline_th_sml {
    /* max-width: 35px; */
    width: 42px;
}
#main .runner_detail_inline table tr td .fail:after, #main .runner_detail_inline table tr td .pass:after,
#main .runner_details_wrapper table tr td .fail:after, #main .runner_details_wrapper table tr td .pass:after {
    content: "";
    position: absolute;
    top: -5px;
    right: -8px;
    height: 12px;
    width: 19px;
    background: var(--green-mid);
    border: 0px solid black;
    transform: rotate(45deg);
}
#main .runner_details_wrapper table tr td .fail:after, #main .runner_detail_inline table tr td .fail:after {
  background: var(--red-mid);
  padding-left: 1px;
}
#main .runner_details_wrapper .prev_prof {
  display: flex;
  align-items: center;
  align-content: space-around;
}
#main .runner_details_wrapper .prev_prof span {
  flex: 1 1 auto;
  margin-right: 5px;
}
#main .runner_details_wrapper .prev_prof .fa {
  margin-right: 2px;
}
#main #runner_select {
    margin: 0px 0px 5px;
    font-size: var(--size-md2);;
    font-weight: 600;
    padding: 3px;
}
#main .runner_details_wrapper .submit_bet {
    float: right;
    margin-bottom: 5px;
    font-size: var(--size-md2);;
    font-weight: 600;
}
#main #prices_panels {
    display: flex;
    flex: 1 1 auto;
    margin-top: 5px;
}
#main #prices_panels .prices_panel {
    border: 2px solid var(--gray-mid);
    margin: 0 3px;
}
#main .runner_detaiils_chart_opts {
    margin-top: 4px;
    text-align: right;
}
#main .runner_detaiils_chart_opts label {
    letter-spacing: -1px;
}
#main .runner_detaiils_chart_opts input[type="checkbox"] {
    vertical-align: middle;
    margin-right:2px;
    margin-top: -3px;
}
#main #prices_hist_tabs {
    /* width: 400px; */
    height: 100%;
    padding: 0 2px;
    flex: 1;
    flex-direction: column;
}
#main #b2l_tabs {
    flex: 2;
}
#prices_hist_chart {
    /* height: 250px; */
    border: 2px solid var(--gray-dark);
    margin: 2px;
}
#main .runner_details_panel_wrapper {
    display: flex;
    flex: 1 1 auto;
}
#main .runner_details_wrapper .panel[tabsname='runner_details'] {
    flex-direction: row;
    display: flex;
    overflow: hidden;
    padding: 0 2px;
    flex-wrap: wrap;
}

#main .runner_details_wrapper .chart_conditions {
    height: 25%;
    width: 100%;
    display: flex;
}

#main .runner_details_wrapper .b2l_charts_container {
   height: 75%;
   width: 100%;
   display: flex;
   flex-direction: column;
}

#main .b2l_charts_container_filtered, #main .b2l_charts_container_unfiltered {
    display: flex;
    flex: 1;
}

#main .runner_details_wrapper .panel[tabsname='runner_details'] .chart_container, #main .runner_detail_inline .chart_container {
    border: 4px solid var(--gray-dark);
    margin: 0.25%;
    flex: 48%;
    display: flex;
    flex-direction: column;
}

#main .chart_conditions_container {
    border: 2px solid var(--gray-dark);
    margin: 0.25%;
    flex: 15%;
    display: flex;
    flex-direction: column;
}

#main .runner_details_wrapper .panel[tabsname='runner_details'] span {
    margin-left: 3px;
}

#main .runner_details_wrapper .panel[tabsname='runner_details'] .chart, #main .runner_detail_inline .chart {
    width: 100%;
    flex: 1;
}

#main .runner_details_wrapper .tabs_block {
    margin: 3px 0px 3px 0px;
    padding-left: 3px;
}

#main .runner_details_wrapper .tabs_block .tab {
    margin-right: 3px;
}

#main .prev_pace_blob {
    min-width: 15px;
    height: 20px;
    text-align: center;
    margin: 0px -1px 1px 0px;
    line-height: 19px;
    border-radius: 1px;
    display: inline-block;
    border: 1px solid var(--blue-mid);
    font-weight: 600;
    letter-spacing: -1px;
}

#main .prev_pace_blob_wide {
  width: 28px;
}

#main .prev_pace_blob:first-of-type {
  margin: 0px -1px 0px 1px;
}

#main .prev_pace_blobs .fa-stack {
    width: 16px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
}

#main .pace_past .fa-stack {
  width: 1.4em
}

#main .runner_details_wrapper .svg-inline--fa {
    float: right;
}

.b2l_non_match {
    opacity: 0.6;
}


#main table.b2l_details_table tr td {
    /* color: #454e5c; */
    padding: 0px 2px 0px 1px;
}

#main table.b2l_details_table tr.old_race td {color: var(--red-dark);}

/* BETS TAB */
#main .hide {
    display: none !important;
}
#main .bet-details .action_btn {
    width: 120px;
}
#main table tr.bet-agg {
    background: var(--yellow-mid);
}
#main .details_settings_tbl, #main .bet_details_table {
  margin: 0 0 2px 0;
  border: 0px solid var(--gray-mid);
}
#main .details_settings_tbl tr th, #main .bet_details_table tr th {
    line-height: 18px;
    height: 19px;
    background-color: var(--blue-mid);
}
#main .details_settings_tbl tr td, #main .bet_details_table tr td {
    background-color: var(--gray-light);
    padding: 0 0 0 2px;
    text-transform: uppercase;
}
#main .details_settings_tbl {
    table-layout: fixed;
}
#main .bets_table {
  margin: 0;
  table-layout: fixed;
}
#main #bets_tbl table.bets_table tr td {
  margin-bottom: 0;
  table-layout: fixed;
  font-weight: 700;
  padding: 0 0 0 2px;
}
.bet-details-wrapper {
  border: 2px solid var(--blue-dark);
  padding: 0 0px;
  margin: 2px 0 0 0;
}
#main #history_tbl button {
    border: 1px solid var(--gray-dark);
    font-size: var(--size-md);
    line-height: 15px;
    width: 100%;
    padding: 0px 1px;
    background: linear-gradient( var(--gray-light), var(--gray-mid));
    cursor: pointer;
}

#main .cards_btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

#main .cards_btns .fa {
    font-size: var(--size-xl4);
    /* margin: 0 5px 0 0; */
}

#main .cards_btns .fa.toggle_races {
    font-size: var(--size-xl5);
}

#main .col_editor {
    font-size: 19px;
}

/* Project breakdown (research)  -  same tables as stats metrics, horizontal scroll on narrow widths */
#view_query #project_level_breakdown_area {
    /* margin-bottom: 0.35rem; */
    min-width: 0;
    position: relative;
    z-index: 1;
}
#view_query #project_level_breakdown_area .project_level_breakdown_toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    /* margin-bottom: 0.35rem; */
    margin: 0.5rem;
    font-size: 12px;
    align-items: center;
    position: relative;
    z-index: 2;
}
#view_query #project_level_breakdown_area .project_breakdown_toggle_th {
    text-align: left !important;
    vertical-align: middle;
    white-space: nowrap;
}
#view_query .project_breakdown_switch_box {
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #c8ccd0;
    border-radius: 2px;
    padding: 1px 2px;
    margin: 0 3px 0 0;
    line-height: 0;
}
#view_query .project_breakdown_switch_box label.switch {
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    /* transform: scale(0.82); */
    transform-origin: center center;
    margin: 0;
    vertical-align: middle;
}
#view_query #project_level_breakdown_area .project_breakdown_th_label {
    vertical-align: middle;
    user-select: none;
}
#view_query #project_level_breakdown_area .project_breakdown_body {
    margin: 0;
}
#view_query #project_level_breakdown_area .project_level_breakdown_tb_item {
    display: flex;
    align-items: center;
    gap: 3px;
}
#view_query #project_level_breakdown_area .project_level_breakdown_tb_label {
    white-space: nowrap;
}
#view_query #project_level_breakdown_area .project_level_breakdown_toolbar label.switch {
    flex-shrink: 0;
    cursor: pointer;
}
#view_query #project_level_breakdown_area .project_breakdown_table_scroll {
    /* overflow-x: auto; */
    /* overflow-y: visible; */
    /* max-width: 100%; */
    /* min-width: 0; */
    -webkit-overflow-scrolling: touch;
    /* margin: 5px 0; */
}
#view_query #project_level_breakdown_area table.project_breakdown_data_table {
    font-size: 11px;
    white-space: nowrap;
}
#view_query #project_level_breakdown_area table.project_breakdown_data_table th,
#view_query #project_level_breakdown_area table.project_breakdown_data_table td {
    padding: 3px 5px;
    text-align: right;
}
#view_query #project_level_breakdown_area table.project_breakdown_data_table th:first-child,
#view_query #project_level_breakdown_area table.project_breakdown_data_table td:first-child {
    text-align: left;
}
#view_query #project_level_breakdown_area .systems_breakdown_table tbody tr,
#view_query #project_level_breakdown_area .stake_behaviour_breakdown_table tbody tr,
#view_query #project_level_breakdown_area .mtp_breakdown_table tbody tr,
#view_query #project_level_breakdown_area .book_covered_breakdown_table tbody tr,
#view_query #project_level_breakdown_area .ticks_breakdown_table tbody tr {
    cursor: pointer;
}
#view_query #project_level_breakdown_area .systems_breakdown_table tbody tr:hover,
#view_query #project_level_breakdown_area .stake_behaviour_breakdown_table tbody tr:hover,
#view_query #project_level_breakdown_area .mtp_breakdown_table tbody tr:hover,
#view_query #project_level_breakdown_area .book_covered_breakdown_table tbody tr:hover,
#view_query #project_level_breakdown_area .ticks_breakdown_table tbody tr:hover {
    background: rgba(33, 127, 33, 0.08);
}
#view_query #project_level_breakdown_area .breakdown_loading_cell {
    text-align: center;
    padding: 0.45rem 0.5rem;
    color: #666;
    font-size: 12px;
}
#view_query #project_level_breakdown_area .breakdown_loading_cell .fa-spinner {
    margin-right: 0.35rem;
}
#view_query #project_level_breakdown_area .breakdown_error_cell {
    color: #a94442;
}
#view_query #project_level_breakdown_area .systems_breakdown_table tbody tr.systems_breakdown_row_selected,
#view_query #project_level_breakdown_area .stake_behaviour_breakdown_table tbody tr.stake_behaviour_row_selected,
#view_query #project_level_breakdown_area .mtp_breakdown_table tbody tr.mtp_breakdown_row_selected,
#view_query #project_level_breakdown_area .book_covered_breakdown_table tbody tr.book_covered_row_selected,
#view_query #project_level_breakdown_area .ticks_breakdown_table tbody tr.ticks_breakdown_row_selected {
    background: rgba(33, 127, 33, 0.16);
    font-weight: 600;
}

#view_query #project_level_breakdown_area .systems_crossover_breakdown_panel {
    /* margin: 0.35rem 0.5rem 0.5rem; */
}

#view_query #project_level_breakdown_area .systems_crossover_note {
    font-size: 11px;
    color: #555;
    display: none;
    margin-bottom: 8px;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_corner .systems_crossover_refresh_btn {
    display: none;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #f4f7fa;
    cursor: pointer;
    vertical-align: middle;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_corner .systems_crossover_refresh_btn i {
    color: #fff
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_corner .systems_crossover_refresh_btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_corner .systems_crossover_refresh_btn:disabled {
    opacity: 0.45;
    cursor: default;
}

#view_query #project_level_breakdown_area .systems_crossover_grid {
    overflow: auto;
    max-height: min(72vh, 760px);
    border: 1px solid #c5cdd4;
    /* border-radius: 3px; */
}

#view_query #project_level_breakdown_area .systems_crossover_grid table {
    border-collapse: collapse;
    font-size: 11px;
}

#view_query #project_level_breakdown_area .systems_crossover_grid th,
#view_query #project_level_breakdown_area .systems_crossover_grid td {
    border: 1px solid #d4dbe1;
    padding: 5px 8px;
    text-align: center;
    min-width: 42px;
}

#view_query #project_level_breakdown_area .systems_crossover_grid tbody td {
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    width: 42px;
    padding: 5px 3px;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th {
    background: #3d4f5f;
    color: #f4f7fa;
    font-weight: 600;
    border-color: #2f3d4a;
    position: sticky;
    top: 0;
    z-index: 2;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_corner {
    width: auto;
    left: 0;
    z-index: 4;
    text-align: left;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_col_header {
    padding: 8px 6px;
    vertical-align: bottom;
    max-width: 42px;
    width: 42px;
}

#view_query #project_level_breakdown_area .systems_crossover_grid thead th.pa_col_header span {
    display: inline-block;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    white-space: nowrap;
    max-height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

#view_query #project_level_breakdown_area .systems_crossover_grid tbody th.pa_row_header {
    /* background: #eef2f5; */
    color: #1f2d3a;
    font-weight: 600;
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid #c5cdd4;
    height: var(--size-40);
}

#view_query #project_level_breakdown_area .systems_crossover_grid td.pa_diag {
    background: #f6f8fa;
    color: #8a96a3;
    font-weight: 600;
}

#view_query #project_level_breakdown_area .systems_crossover_grid td.pa_clash_same {
    background: #e6f4ea;
    color: #1e5c32;
    font-weight: 700;
}

/* Row + column crosshair highlight on hover (subtle, green-lightest) */
#view_query #project_level_breakdown_area .systems_crossover_grid tbody tr:hover > th.pa_row_header,
#view_query #project_level_breakdown_area .systems_crossover_grid tbody tr:hover > td,
#view_query #project_level_breakdown_area .systems_crossover_grid td.pa_col_hover {
    background: var(--green-lightest);
}

.diagnostic_detail_cell {
    padding: 10px;
}

.diagnostic_detail_container {
    /* margin-bottom: 10px; */
    /* border: 1px solid var(--border-color, #444); */
    padding: 5px;
    border-radius: 4px;
}