/* corner_modern.css — modern re-skin for the match-detail (corner_stats) page.
   Scoped under .cs-modern. KEEPS the existing structure / data placement;
   only applies the prototype's polished design language (grey page, white
   cards with clean headers, tidy tables, clean bars, badges, good spacing).
   v8 */

html,
body,
#content_container{
  background:#eef1f5 !important;
}
body:has(.cs-modern){
  min-width:0 !important;
}

.cs-modern{
  --bg:#eef1f5; --card:#fff; --bd:#e5e8ee; --bd2:#eef0f4;
  --tx:#16203a; --tx2:#475069; --mut:#8b93a6;
  --brand:#2f5fc9; --brand-d:#244fa8; --brand-s:#eef3fb;
  --over:#15a05a; --over-s:#e7f6ee; --under:#e0533d; --under-s:#fdecea;
  --draw:#c79a3a; --orange:#e2640f; --r:10px;
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  padding:4px 12px 10px !important;
}

/* ---------- generic card: panels + the facts container ---------- */
.cs-modern .panel,
.cs-modern #match_facts_container,
.cs-modern .cs-block{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  margin-bottom:14px;
  overflow:hidden;
}
/* card-ify EVERY top-level section in the main column (any row with an alert header) */
.cs-modern .cs-block,
.cs-modern .col-md-9 > .row:has(> .alert-info){ padding:0 0 14px; }
.cs-modern .col-md-9 > .row:has(> .alert-info){
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:14px; overflow:hidden;
}
.cs-modern .cs-block > .alert-info,
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--card) !important; border:0; border-bottom:1px solid var(--bd2) !important;
  border-radius:0; color:var(--tx) !important; font-weight:700; font-size:14px;
  padding:13px 16px; margin:0 0 12px; text-align:left !important; position:relative;
}
.cs-modern .col-md-9 > .row:has(> .alert-info + .col-xs-12 > table.background_table) > .alert-info{
  margin-bottom:0;
}
.cs-modern .cs-block > .alert-info:before,
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info:before,
.cs-modern .panel-heading:before,
.cs-modern #match_facts_container .alert-info:before{
  content:"";
  width:3px;
  height:16px;
  flex:0 0 3px;
  border-radius:3px;
  background:var(--brand);
}
.cs-modern .cs-block > div:not(.alert-info):not([class*="col-"]),
.cs-modern .col-md-9 > .row:has(> .alert-info) > div:not(.alert-info):not([class*="col-"]){ padding-left:16px; padding-right:16px; }
.cs-modern .cs-block > .alert-info:has(.btn-group){
  justify-content:space-between;
}
.cs-modern .cs-block > .alert-info:has(.btn-group) .btn-group{
  position:static !important;
  right:auto !important;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
}
.cs-modern .cs-block > .alert-info:has(.btn-group) .btn{
  border-color:#cbd5e1 !important;
  color:var(--tx2) !important;
  font-weight:700;
  min-width:64px;
  padding:5px 13px !important;
  margin:0 !important;
  box-shadow:none !important;
}
.cs-modern .cs-block > .alert-info:has(.btn-group) .btn + .btn{
  margin-left:-1px !important;
}
.cs-modern .cs-block > .alert-info:has(.btn-group) .btn-primary{
  position:relative;
  z-index:1;
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}
.cs-modern .cs-history-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px 9px;
  padding:0 16px 2px;
  margin:-1px 0 12px;
  color:var(--tx2);
  font-size:12px;
  font-weight:600;
}
.cs-modern .cs-history-controls select{
  min-width:58px;
  height:30px;
  padding:3px 22px 3px 9px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  color:var(--tx);
  font-weight:700;
}
.cs-modern .cs-history-controls input[type="checkbox"]{
  margin:0 0 0 4px !important;
  vertical-align:-2px;
}
.cs-modern .cs-history-controls label{
  margin:0;
  color:var(--tx2);
  font-weight:700 !important;
}
.cs-modern .cs-history-controls span:not(.cs-history-label){
  color:var(--mut);
  font-weight:600;
}
.cs-modern .panel-heading,
.cs-modern #match_facts_container .alert-info{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--card) !important;
  border:0;
  border-bottom:1px solid var(--bd2);
  border-radius:0;
  color:var(--tx);
  font-size:14px;
  font-weight:700;
  text-align:left !important;
  padding:13px 16px;
  margin:0;
}
.cs-modern #match_facts_container{ padding:0; }
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info > strong,
.cs-modern #match_facts_container .alert-info > strong,
.cs-modern .panel-heading > strong{ line-height:1.25; }
.cs-modern .cs-section-heading{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.cs-modern .cs-line-pill{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 9px;
  border:1px solid #cfddf6;
  border-radius:999px;
  background:var(--brand-s);
  color:var(--brand-d);
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info > .btn-group,
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info > a{
  margin-left:auto;
}
.cs-modern .col-md-9 > .row:has(> .alert-info) > .alert-info > a .btn{
  position:static !important;
}
.cs-modern #match_facts_container > .row,
.cs-modern .match-facts-history{ padding-left:16px; padding-right:16px; }
.cs-modern .cs-facts-body{
  width:100%;
  margin:0;
  padding:0 18px;
}
.cs-modern .match-facts-history{
  background:transparent; border:0; padding-top:12px;
  color:var(--tx2); font-size:13px; margin-bottom:6px;
}
.cs-modern .match-facts-history h2{ font-size:14px; font-weight:800; color:var(--tx); margin:0 0 4px; }
.cs-modern .cs-team-summary{
  padding:0;
  margin:0 0 10px;
  color:var(--tx2);
  font-size:12px;
  line-height:1.5;
}
.cs-modern .cs-team-summary p{ margin:0; }
.cs-modern span.factValue{ color:var(--orange); font-weight:800; }
.cs-modern .match-facts-pred{
  margin:12px 0 10px;
  padding:10px 12px;
  border:1px solid var(--bd2);
  border-radius:8px;
  background:#fafbfd;
  color:var(--tx2);
}
.cs-modern .match-facts-pred p,
.cs-modern .match-facts-pred h2{
  margin:0 !important;
  color:var(--tx2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.5;
}
.cs-modern .match-facts-pred h2 small,
.cs-modern .match-facts-pred small{
  display:inline;
  color:var(--mut) !important;
  font-size:11px;
  font-weight:600;
}
.cs-modern .match-facts-pred span:first-child{
  color:var(--tx);
  font-weight:800;
}
.cs-modern .match_facts{
  margin:8px 0 0;
  padding:10px 14px 2px 30px;
  border-top:1px solid var(--bd2);
  color:var(--tx2);
  font-size:12.5px;
  line-height:1.55;
}
.cs-modern .match_facts li{
  padding:2px 0 6px;
}

/* ---------- tables: clean, hairline rows ---------- */
.cs-modern table.stats_table,
.cs-modern table.table-condensed-2,
.cs-modern .table-bordered{
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--bd); border-radius:0;
  background:var(--card); width:100%; margin-bottom:12px;
  float:none !important;   /* kill the legacy pull-left that was escaping / overlapping */
}
.cs-modern table th,
.cs-modern table td{
  border:0 !important; border-bottom:1px solid var(--bd2) !important;
  padding:8px 11px !important; vertical-align:middle;
}
/* wide 9-col stats tables: natural column widths (like the original) + tight
   cells so headers show in full and the table still fits the half column */
.cs-modern table.stats_table th,
.cs-modern table.stats_table td{ padding:6px 6px !important; font-size:13px; text-align:center; }
.cs-modern table.stats_table td{ white-space:nowrap; }
.cs-modern table.stats_table th{ white-space:normal !important; }   /* wrap headers so the table fits the column — no scrollbar */
.cs-modern table.stats_table td:first-child{ text-align:center; white-space:nowrap; }
.cs-modern table.stats_table thead th,
.cs-modern table.stats_table tr.no_bold th{ font-size:12px; letter-spacing:0; line-height:1.2; text-align:center; text-transform:capitalize !important; }
/* half tables are JS-generated and lack the home/away class, so give ALL stats
   column-headers one consistent tint (full & half match); only the team-name
   row (colspan, full tables only) carries the home=blue / away=cream identity. */
.cs-modern .stats_table thead th,
.cs-modern .stats_table tr.no_bold th{ background:#eef2f7 !important; color:var(--tx) !important; }
.cs-modern .home_stats_table thead th[colspan]{ background:#d8e6f3 !important; }
.cs-modern .away_stats_table thead th[colspan]{ background:#f5ecc9 !important; }
.cs-modern .away_stats_table tbody td{ background:transparent !important; }
.cs-modern table .fa-lock{
  color:#6f7b8d;
  opacity:.82;
  font-size:12px;
}
.cs-modern table thead th{
  background:#f7f9fc; color:var(--tx2);
  font-weight:700; font-size:12.5px; letter-spacing:0; white-space:nowrap;
  text-transform:none !important;
}
.cs-modern table tbody tr:last-child td{ border-bottom:0 !important; }
.cs-modern table tbody tr:hover td{ background:#f9fbfe; }
.cs-modern table.table-vertical-center{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cs-modern #head_to_head_history_table,
.cs-modern #home_history_table,
.cs-modern #away_history_table{
  display:table !important;
  width:100%;
  max-width:100%;
  table-layout:auto;
  overflow:visible;
}
.cs-modern #head_to_head_history_table th,
.cs-modern #head_to_head_history_table td,
.cs-modern #home_history_table th,
.cs-modern #home_history_table td,
.cs-modern #away_history_table th,
.cs-modern #away_history_table td{
  padding:5px 4px !important;
  line-height:1.25;
}
.cs-modern #head_to_head_history_table thead tr:nth-child(2) th,
.cs-modern #home_history_table thead tr:nth-child(2) th,
.cs-modern #away_history_table thead tr:nth-child(2) th{
  white-space:normal !important;
}
.cs-modern #head_to_head_history_table td,
.cs-modern #home_history_table td,
.cs-modern #away_history_table td{
  white-space:nowrap;
}
.cs-modern #head_to_head_history_table .td_league,
.cs-modern #home_history_table .td_league,
.cs-modern #away_history_table .td_league,
.cs-modern #head_to_head_history_table .td_home,
.cs-modern #head_to_head_history_table .td_away,
.cs-modern #home_history_table .td_home,
.cs-modern #home_history_table .td_away,
.cs-modern #away_history_table .td_home,
.cs-modern #away_history_table .td_away{
  white-space:normal;
}
/* team-name / section header rows: clean bold (no colour bar) */
.cs-modern th.lite_blue_back,
.cs-modern table thead tr:first-child th[colspan],
.cs-modern table tbody tr th[colspan]{
  background:#f4f6fa; color:var(--tx);
  font-weight:800; font-size:13px; text-align:center; letter-spacing:0;
}
.cs-modern td.percentage{ text-align:center; font-weight:700; }
.cs-modern td.win, .cs-modern td.draw, .cs-modern td.lose{ text-align:center; }
.cs-modern .win{ color:var(--over); font-weight:700; }
.cs-modern .lose{ color:var(--under); font-weight:700; }
.cs-modern td.italic{ background:#f7f9fc !important; color:var(--tx2); font-style:normal; font-weight:700; }
.cs-modern .clickable{ cursor:pointer; font-weight:600; transition:background .12s; }
.cs-modern .clickable:hover{ background:var(--brand-s) !important; color:var(--brand-d); }

/* ---------- performance bars (W/D/L · O/U distribution) ---------- */
.cs-modern .score-bar-item{
  background:#fafbfd; border:0; border-radius:8px;
  padding:10px 12px; margin-bottom:10px;
}
.cs-modern .score-bar-item-title{ display:block; font-size:12px; font-weight:700; color:var(--tx); margin-bottom:7px; }
.cs-modern .score-bar-item .columns{ font-size:11.5px; color:var(--tx2); padding:0 2px; }
.cs-modern .score-bar-item .small-2{ color:var(--tx); }
.cs-modern .score-bar-item .columns span{ color:var(--tx2); font-weight:700; }
.cs-modern .app_progress{
  position:relative; background:var(--bd2); border:0; border-radius:5px; height:7px; overflow:hidden; padding:0; margin:8px 0 0;
}
.cs-modern .meter{ height:100%; }
.cs-modern .meter, .cs-modern .meter.home, .cs-modern .meter.over{ background:var(--brand); }
.cs-modern .app_progress .meter{ position:absolute; top:0; left:0; }
.cs-modern .app_progress .meter.home{ left:0; }
.cs-modern .app_progress .meter.away{ left:auto; right:0; background:#6fa8ff; }
.cs-modern .meter.draw{ background:#bcc4d4; }

/* ---------- buttons / VIP / badges ---------- */
.cs-modern .btn-default{
  border:1px solid var(--bd); background:var(--card); border-radius:8px; color:var(--tx2); font-weight:600;
  transition:background .12s,border-color .12s;
}
.cs-modern .btn-default:hover{ background:#f6f8fb; border-color:#dadfe8; }
.cs-modern .btn-default.selected,
.cs-modern #bet_div .selected{ background:var(--brand); border-color:var(--brand); color:#fff; }
.cs-modern #bet_div .bet_panel > .panel-heading{
  display:block;
  padding:10px 12px;
}
.cs-modern #bet_div .bet_panel > .panel-heading:before{
  display:none;
}
.cs-modern .cs-publish-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.cs-modern .cs-publish-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--tx);
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.cs-modern .cs-publish-title:before{
  content:"";
  width:3px;
  height:16px;
  border-radius:3px;
  background:var(--brand);
  flex:0 0 3px;
}
.cs-modern .cs-publish-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:1px solid var(--bd2);
  border-radius:50%;
  background:#fff;
  color:var(--mut);
  text-decoration:none;
  flex:0 0 auto;
}
.cs-modern .cs-publish-help:hover,
.cs-modern .cs-publish-help:focus{
  color:var(--brand-d);
  border-color:#cfddf6;
  background:var(--brand-s);
  text-decoration:none;
}
.cs-modern .cs-publish-tabs{
  display:flex;
  justify-content:flex-end;
  flex:0 0 auto;
}
.cs-modern .cs-publish-tabs .btn-group{
  display:inline-flex;
}
.cs-modern .cs-publish-tabs .btn{
  padding:3px 8px;
  line-height:1.25;
}
.cs-modern #place_bet_div > table.table-condensed-2{
  width:100% !important;
  box-sizing:border-box;
  margin:0 0 8px;
  padding:4px;
  border:1px solid var(--bd2);
  border-radius:8px;
  border-collapse:separate !important;
  border-spacing:4px;
  background:#f4f6fa;
  table-layout:auto;
}
.cs-modern #place_bet_div > table.table-condensed-2 th{
  padding:5px 6px 7px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--tx);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  text-align:left;
}
.cs-modern #place_bet_div > table.table-condensed-2 td{
  padding:6px 3px !important;
  border:1px solid transparent !important;
  border-radius:6px;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}
.cs-modern #place_bet_div > table.table-condensed-2 td.italic{
  width:34%;
  background:transparent !important;
  color:var(--mut);
  font-style:normal;
  font-weight:800;
  text-align:left;
  white-space:normal;
}
.cs-modern #place_bet_div > table.table-condensed-2 td.clickable{
  background:#fff;
  border-color:#dfe5ee !important;
  color:var(--tx2);
  font-size:10.5px;
  box-shadow:0 1px 1px rgba(16,24,40,.03);
}
.cs-modern #place_bet_div > table.table-condensed-2 td.clickable:hover{
  background:var(--brand-s) !important;
  border-color:#bfd1f3 !important;
  color:var(--brand-d);
}
.cs-modern #place_bet_div > table.table-condensed-2 td.clickable.selected,
.cs-modern #place_bet_div > table.table-condensed-2 td.clickable.selected:hover{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  box-shadow:none;
}
.cs-modern #place_bet_div > table.table-condensed-2 + table.table-condensed-2{
  margin-top:6px;
}
.cs-modern #place_bet_div > hr{
  margin:10px 0 !important;
  border-color:var(--bd2);
}
.cs-modern a[href="/user/topup"], .cs-modern a[href="/user/membership"]{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand-s); color:var(--brand-d); border:1px solid #cfddf6;
  font-weight:600; font-size:13px; text-decoration:none; padding:6px 15px; border-radius:999px;
}
.cs-modern a[href="/user/topup"]::before, .cs-modern a[href="/user/membership"]::before{ font-family:FontAwesome; content:"\f023"; font-size:11px; opacity:.85; }
.cs-modern a[href="/user/topup"]:hover, .cs-modern a[href="/user/membership"]:hover{ background:#dde9fb; border-color:#b9cef2; }
.cs-modern .cs-unlock-data{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:12px 10px 4px;
}
.cs-modern .alert-info{ background:var(--brand-s); border:1px solid #dce7f9; color:var(--brand-d); border-radius:8px; }

/* ---------- KPI overview ---------- */
.cs-modern .cs-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.cs-modern .cs-kpi{ background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:12px 15px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.cs-modern .cs-kpi .v{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
.cs-modern .cs-kpi .l{ font-size:11.5px; color:var(--mut); margin-top:3px; font-weight:600; }
.cs-modern .cs-pred-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:7px;
}
.cs-modern .cs-pred-head .cs-pred-h{
  font-size:13px;
  font-weight:800;
  color:var(--tx);
}
.cs-modern .cs-pred-head .cs-pred-note{
  font-size:11px;
  font-weight:600;
  color:var(--mut);
}
.cs-modern .cs-pred-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  max-width:460px;
  margin-bottom:14px;
}
.cs-modern .cs-pred-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:7px 9px;
}
.cs-modern .cs-pred-card .v{
  max-width:100%;
  color:var(--tx);
  font-size:15px;
  font-weight:800;
  line-height:1.15;
  margin-top:0;
  overflow-wrap:anywhere;
}
.cs-modern .cs-pred-card .v.is-over{ color:var(--over); }
.cs-modern .cs-pred-card .v.is-under{ color:var(--under); }
.cs-modern .cs-pred-card .v.is-asian{ color:var(--brand); }
.cs-modern .cs-pred-card .l{
  color:var(--mut);
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  margin-top:4px;
  text-align:center;
}

/* ---------- distribution bars (rebuilt performance_bar) ---------- */
.cs-modern .cs-dist-teams{ margin:8px -12px 0; }
.cs-modern .cs-dist-team-col{ padding-left:12px; padding-right:12px; }
.cs-modern .cs-dist-team-name{
  color:var(--tx);
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  margin:4px 0 8px;
}
.cs-modern .cs-dist{ padding:9px 0 11px; margin-bottom:2px; }
.cs-modern .cs-dist-t{ font-size:12px; font-weight:700; color:var(--tx); margin-bottom:6px; }
.cs-modern .cs-dist-legend{ display:flex; justify-content:space-between; font-size:11px; color:var(--tx2); margin-bottom:6px; gap:6px; }
.cs-modern .cs-dist-legend span{ white-space:nowrap; display:inline-flex; align-items:center; }
.cs-modern .cs-dist-legend b{ color:var(--tx); margin-left:3px; }
.cs-modern .cs-dist-legend small{ color:var(--tx2); margin-left:4px; font-size:10px; }
.cs-modern .cs-dist-legend i{ width:7px; height:7px; border-radius:2px; display:inline-block; margin-right:4px; flex:0 0 auto; }
.cs-modern .cs-dist-legend .d1{ background:var(--over); }
.cs-modern .cs-dist-legend .d2{ background:var(--draw); }
.cs-modern .cs-dist-legend .d3{ background:var(--under); }
.cs-modern .cs-dist-bar{ display:flex; height:7px; border-radius:4px; overflow:hidden; background:var(--bd2); }
.cs-modern .cs-dist-bar .s1{ background:var(--over); }
.cs-modern .cs-dist-bar .s2{ background:var(--draw); }
.cs-modern .cs-dist-bar .s3{ background:var(--under); }

/* ---------- page title (app-style match head) + page tabs ---------- */
.cs-modern .cs-hero{
  background:transparent; border:0; border-radius:0;
  box-shadow:none;
  padding:0; margin:0 0 70px; overflow:visible; position:relative;
}
.cs-modern .cs-hero #match_title_div{ float:none !important; padding:0 !important; width:100%; }
/* breadcrumb (now holds the only h1) stays small, grey */
.cs-modern .mh-breadcrumb{ font-size:12px; }
.cs-modern .mh-breadcrumb a{ color:var(--mut) !important; }
.cs-modern .mh-breadcrumb a:hover{ color:var(--brand-d) !important; }
.cs-modern .mh-breadcrumb h1{ font-size:12px !important; font-weight:600 !important; color:var(--tx2) !important; margin:0 !important; line-height:1.4 !important; }

/* brand-blue hero card */
.cs-modern .cs-matchhead{
  border-radius:12px;
  background:linear-gradient(135deg,#3463cf,#244fa8);
  color:#fff;
  padding:14px 16px 16px;
  box-shadow:0 2px 8px rgba(36,79,168,.18);
}
.cs-modern .cs-matchhead .cs-mh-top{ color:rgba(255,255,255,.82); }
.cs-modern .cs-matchhead .cs-mh-top a.cs-mh-league{ color:#fff !important; }
.cs-modern .cs-matchhead .cs-mh-team a{ color:#fff !important; }
.cs-modern .cs-matchhead .cs-mh-pos{ color:rgba(255,255,255,.7); }
.cs-modern .cs-matchhead .cs-mh-score,
.cs-modern .cs-matchhead .cs-mh-time{ color:#fff; font-size:24px; }
.cs-modern .cs-matchhead .cs-mh-countdown{ font-size:17px; }
.cs-modern .cs-matchhead .cs-mh-status{ color:rgba(255,255,255,.8); }
.cs-modern .cs-matchhead .cs-mh-tstats{ color:rgba(255,255,255,.9); }
.cs-modern .cs-matchhead .cs-mh-metrics{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  width:min(640px,100%);
  max-width:640px;
  margin:10px auto 0;
}
.cs-modern .cs-matchhead .cs-mh-metric{
  flex:1 1 148px;
  max-width:154px;
  min-width:0;
  padding:7px 10px;
  border:0;
  border-radius:8px;
  background:rgba(0,0,0,.10);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.cs-modern .cs-matchhead .cs-mh-metric span{
  display:block;
  width:100%;
  color:rgba(255,255,255,.62);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:2px;
  text-align:center;
}
.cs-modern .cs-matchhead .cs-mh-metric b{
  display:block;
  width:100%;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}
.cs-modern .cs-matchhead .cs-mh-odds-sep{
  display:inline-block;
  margin:0 5px;
  color:rgba(255,255,255,.58);
  font-size:.88em;
  font-style:normal;
  font-weight:600;
  line-height:1;
  transform:translateY(-1px);
}
.cs-modern .cs-matchhead .cs-mh-metric small{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cs-modern .cs-matchhead .cs-mh-note{
  margin:11px 0 0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cs-modern .cs-matchhead .cs-mh-note-label{
  color:rgba(255,255,255,.96);
}

/* rich head sections inside the blue hero (timeline / form / odds) */
.cs-modern .cs-matchhead .cs-mh-sec{ margin-top:11px; padding-top:0; border-top:0; }
.cs-modern .cs-matchhead .cs-mh-sec-t{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:7px; }
/* 3-col: home form | odds | away form */
.cs-modern .cs-matchhead .cs-mh-statrow{ display:flex; align-items:center; gap:10px; padding-top:15px; }
.cs-modern .cs-matchhead .cs-mh-side{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; }
.cs-modern .cs-matchhead .cs-mh-side-inner{ position:relative; display:inline-flex; flex-direction:column; }
.cs-modern .cs-matchhead .cs-mh-side-labels{ position:absolute; left:0; right:0; bottom:100%; margin-bottom:3px; display:flex; justify-content:space-between; font-size:9px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.55); padding:0 1px; }
.cs-modern .cs-matchhead .cs-mh-side-chips{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:3px; }
.cs-modern .cs-matchhead .cs-mh-form-chip{ width:18px; height:18px; border-radius:4px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; }
.cs-modern .cs-matchhead .cs-mh-form-W{ background:#1faa5e; }
.cs-modern .cs-matchhead .cs-mh-form-D{ background:rgba(255,255,255,.32); }
.cs-modern .cs-matchhead .cs-mh-form-L{ background:#e0533d; }
/* odds: dark inset table (AH / Goals / Corners × Open / Live) */
.cs-modern .cs-matchhead .cs-mh-mid{ flex:0 0 auto; }
.cs-modern .cs-matchhead .cs-mh-1x2{ display:flex; gap:5px; }
.cs-modern .cs-matchhead .cs-mh-1x2-i{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:44px; background:rgba(0,0,0,.16); border-radius:7px; padding:4px 8px; }
.cs-modern .cs-matchhead .cs-mh-1x2-i .k{ font-size:10px; font-weight:700; color:rgba(255,255,255,.62); }
.cs-modern .cs-matchhead .cs-mh-1x2-i b{ font-size:13px; font-weight:800; color:#fff; }
.cs-modern .cs-matchhead .cs-mh-timeline{
  margin:12px auto 0;
  max-width:640px;
  overflow:visible;
}
/* timeline (.cs-tl*) styles live in the reusable element match/match_timeline_modern.ctp */
/* event-list icons (live events) reuse the timeline glyphs */
.cs-modern .cs-ev-ico{ width:18px; height:18px; vertical-align:-4px; margin-right:6px; }
.cs-modern .cs-ev-ico.cs-ev-corner{ width:15px; height:18px; }
.cs-modern .cs-ev-ico.cs-ev-spacer{ display:inline-block; }
.cs-modern .cs-ev-ico.cs-ev-period{ width:20px; height:20px; vertical-align:-5px; margin-right:4px; }
.cs-modern .cs-events .list-group-item{ border:0; border-bottom:1px dashed var(--bd); background:transparent; }
.cs-modern .cs-events .list-group-item:last-child{ border-bottom:0; }
.cs-modern .cs-matchhead .cs-mh-ic-corner .cs-mh-pole{ fill:#fff; }
.cs-modern .cs-matchhead .cs-mh-flag-home{ fill:#ff5a5a; }
.cs-modern .cs-matchhead .cs-mh-flag-away{ fill:#6cc6ff; }
/* favorite/notes actions: compact SVG buttons, no sprite/font icon bleed */
.cs-modern .cs-matchhead .cs-mh-actions{
  top:10px;
  right:10px;
  gap:6px;
  z-index:4;
}
.cs-modern .cs-matchhead .cs-mh-action{
  width:24px !important;
  height:24px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.86) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(14,39,104,.10) !important;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.cs-modern .cs-matchhead .star_btn{
  background-image:none !important;
  position:relative;
}
.cs-modern .cs-matchhead .star_btn::before{
  content:none !important;
}
.cs-modern .cs-matchhead .cs-mh-action-ico{
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.cs-modern .cs-matchhead .cs-mh-action-star{
  fill:transparent;
}
.cs-modern .cs-matchhead .cs-mh-action:hover,
.cs-modern .cs-matchhead .cs-mh-action:focus{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#fff !important;
  text-decoration:none !important;
  outline:none !important;
  transform:translateY(-1px);
}
.cs-modern .cs-matchhead .cs-mh-action:active{
  transform:translateY(0);
  background:rgba(255,255,255,.18) !important;
}
.cs-modern .cs-matchhead .cs-mh-action:focus-visible{
  outline:2px solid rgba(255,255,255,.78) !important;
  outline-offset:2px;
}
.cs-modern #match_title_div.like .cs-matchhead .star_btn{
  color:#ffd95c !important;
  background:rgba(255,217,92,.10) !important;
  border-color:rgba(255,217,92,.32) !important;
}
.cs-modern #match_title_div.like .cs-matchhead .star_btn .cs-mh-action-star{
  fill:currentColor;
}
/* page tabs as a segmented control: white track on the grey page, brand-blue
   filled slider for the active tab, no per-item icons */
.cs-modern .cs-hero > .nav-pills{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  float:none !important;
  margin:0 auto !important;
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3px;
  width:max-content;
  max-width:100%;
  padding:3px;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:11px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.cs-modern .nav-pills > li{ float:none !important; }
.cs-modern .nav-pills > li > a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:30px;
  border-radius:7px !important;
  font-weight:800 !important;
  font-size:13.5px !important;
  color:var(--tx2) !important;
  background:transparent !important;
  border:0 !important;
  padding:6px 13px !important;
  margin:0 !important;
  box-shadow:none !important;
  white-space:nowrap;
}
.cs-modern .nav-pills > li > a:before{ display:none !important; }
.cs-modern .nav-pills > li > a:hover{
  background:#f1f4f8 !important;
  color:var(--tx) !important;
}
.cs-modern .nav-pills > li.active > a,
.cs-modern .nav-pills > li.active > a:hover,
.cs-modern .nav-pills > li.active > a:focus{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 1px 2px rgba(47,95,201,.25) !important;
}
.cs-modern .cs-match-tabs-hint{ display:none; }

/* title action buttons (favorite star + notes): keep them as one consistent
   square icon-button style. (.cs-modern .btn-default's `background:var(--card)`
   shorthand had wiped the star's background-image.) */
.cs-modern .star_btn:not(.cs-mh-action),
.cs-modern .btn_notes:not(.cs-mh-action){
  width:30px;
  height:30px;
  padding:0 !important;
  border:1px solid var(--bd) !important;
  background:var(--card) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.cs-modern .star_btn:not(.cs-mh-action){
  background:var(--card) url(/img/icons/empty_star.png) center / 16px 16px no-repeat !important;
}
.cs-modern .like .star_btn:not(.cs-mh-action){ background-image:url(/img/icons/gold_star.png) !important; }
.cs-modern .star_btn:not(.cs-mh-action):hover,
.cs-modern .btn_notes:not(.cs-mh-action):hover{ background-color:#f6f8fb !important; border-color:#dadfe8 !important; }

/* ---------- footer (modern pages only): kill the legacy 90px grey strip
   below the dark footer so it anchors to the page bottom ---------- */
#content_container:has(.cs-modern) ~ .footer{ margin-bottom:0 !important; }

/* ---------- live stats page ---------- */
.cs-modern.cs-live-page{
  max-width:1220px;
  margin:0 auto;
  padding-top:16px !important;
  padding-bottom:30px !important;
}
.cs-modern .cs-live-hero{
  margin-bottom:58px;
}
.cs-modern .cs-live-ad{
  margin-bottom:14px;
}
.cs-modern .cs-live-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.cs-modern .cs-live-chart-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--bd);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:12px 12px 8px;
}
.cs-modern .cs-live-chart-card-main{
  padding-top:14px;
}
.cs-modern .cs-live-chart{
  min-height:320px;
}
.cs-modern .cs-live-chart-card-main .cs-live-chart{
  min-height:390px;
}
.cs-modern .cs-live-chart .highcharts-container,
.cs-modern .cs-live-chart .highcharts-root{
  width:100% !important;
}
.cs-modern .cs-live-chart rect.highcharts-background{
  fill:#fff;
}
.cs-modern .cs-live-chart text.highcharts-title,
.cs-modern .cs-live-chart .highcharts-title tspan{
  color:var(--tx) !important;
  fill:var(--tx) !important;
  font-size:15px !important;
  font-weight:800 !important;
}
.cs-modern .cs-live-chart .highcharts-axis-title{
  color:var(--mut) !important;
  fill:var(--mut) !important;
  font-size:11px !important;
}
.cs-modern .cs-live-chart .highcharts-axis-labels text,
.cs-modern .cs-live-chart .highcharts-yaxis-labels text,
.cs-modern .cs-live-chart .highcharts-xaxis-labels text{
  color:var(--tx2) !important;
  fill:var(--tx2) !important;
  font-size:11px !important;
}
.cs-modern .cs-live-chart .highcharts-grid-line,
.cs-modern .cs-live-chart .highcharts-grid-line path{
  stroke:#edf0f5 !important;
}
.cs-modern .cs-live-chart .highcharts-axis-line{
  stroke:#d9dee7 !important;
}
.cs-modern .cs-live-chart .highcharts-legend-item text{
  color:var(--tx2) !important;
  fill:var(--tx2) !important;
  font-weight:700 !important;
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  .cs-modern{ font-size:13px; padding:10px 8px 24px !important; }
  .cs-modern .cs-kpis{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .cs-modern .cs-kpi{ padding:10px 11px; }
  .cs-modern .cs-pred-grid{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .cs-modern .cs-pred-card{ padding:6px 7px; }
  .cs-modern .cs-pred-card .v{ font-size:13.5px; }
  .cs-modern .cs-pred-card .l{ font-size:9.5px; }
  .cs-modern .cs-facts-body{ width:100%; padding:0 10px; }
  .cs-modern .cs-block > .alert-info:has(.btn-group){
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    padding-bottom:11px;
  }
  .cs-modern .cs-block > .alert-info:has(.btn-group) .btn-group{
    margin-left:0;
  }
  .cs-modern .cs-block > .alert-info:has(.btn-group) .btn{
    min-width:58px;
    padding:5px 10px !important;
  }
  .cs-modern .cs-history-controls{
    justify-content:flex-start;
    padding:0 12px 4px;
    margin:0 0 10px;
  }
  .cs-modern .cs-history-controls label{
    max-width:236px;
  }
  .cs-modern .cs-hero{ margin-bottom:14px; }
  .cs-modern .cs-hero > .nav-pills{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    max-width:none;
    transform:none;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:3px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:3px;
    margin:10px 0 0 !important;
    border-radius:12px;
    scroll-padding:3px;
  }
  .cs-modern .cs-hero > .nav-pills::-webkit-scrollbar{
    display:none;
  }
  .cs-modern .cs-match-tabs-hint{
    position:absolute;
    bottom:10px;
    z-index:3;
    width:34px;
    height:40px;
    pointer-events:none;
  }
  .cs-modern .cs-tabs-has-left .cs-match-tabs-hint-left,
  .cs-modern .cs-tabs-has-right .cs-match-tabs-hint-right{
    display:block;
  }
  .cs-modern .cs-match-tabs-hint-left{
    left:0;
    border-radius:12px 0 0 12px;
    background:linear-gradient(to left, rgba(255,255,255,0), var(--card) 62%);
  }
  .cs-modern .cs-match-tabs-hint-right{
    right:0;
    border-radius:0 12px 12px 0;
    background:linear-gradient(to right, rgba(255,255,255,0), var(--card) 62%);
  }
  .cs-modern .cs-match-tabs-hint:after{
    content:"";
    position:absolute;
    top:50%;
    width:6px;
    height:6px;
    border-top:1.5px solid #667085;
    border-right:1.5px solid #667085;
    opacity:.66;
  }
  .cs-modern .cs-match-tabs-hint-left:after{
    left:9px;
    transform:translateY(-50%) rotate(-135deg);
  }
  .cs-modern .cs-match-tabs-hint-right:after{
    right:9px;
    transform:translateY(-50%) rotate(45deg);
  }
  .cs-modern .cs-hero > .nav-pills:before,
  .cs-modern .cs-hero > .nav-pills:after{
    content:none !important;
    display:none !important;
  }
  .cs-modern .cs-live-hero > .nav-pills{
    display:flex;
  }
  .cs-modern .nav-pills > li{
    flex:0 0 auto;
  }
  .cs-modern .nav-pills > li > a{
    min-height:32px;
    min-width:0;
    padding:7px 8px !important;
    font-size:0 !important;
  }
  .cs-modern .nav-pills > li > a[data-mobile-label]:after{
    content:attr(data-mobile-label);
    font-size:12px;
    font-weight:800;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
  }
  .cs-modern.cs-live-page{
    padding-top:10px !important;
  }
  .cs-modern .cs-matchhead .cs-mh-team a{
    font-size:14px;
    line-height:1.18;
  }
  .cs-modern .cs-matchhead .cs-mh-metrics{
    width:100%;
    gap:7px;
    margin-top:9px;
  }
  .cs-modern .cs-matchhead .cs-mh-metric{
    flex:1 1 calc(50% - 7px);
    max-width:none;
    padding:6px 8px;
  }
  .cs-modern .cs-matchhead .cs-mh-metric b{
    font-size:13px;
  }
  .cs-modern .cs-matchhead .cs-mh-metric small{
    font-size:9.5px;
  }
  .cs-modern .cs-matchhead .cs-mh-statrow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
    padding-top:12px;
  }
  .cs-modern .cs-matchhead .cs-mh-mid{
    order:-1;
    grid-column:1 / -1;
    width:100%;
  }
  .cs-modern .cs-matchhead .cs-mh-1x2{
    justify-content:center;
  }
  .cs-modern .cs-matchhead .cs-mh-side{
    width:auto;
    min-width:0;
    align-items:stretch;
  }
  .cs-modern .cs-matchhead .cs-mh-side-inner{
    display:block;
    width:100%;
  }
  .cs-modern .cs-matchhead .cs-mh-side-labels{
    position:static;
    margin:0 0 4px;
    padding:0 2px;
  }
  .cs-modern .cs-matchhead .cs-mh-side-chips{
    justify-content:center;
    gap:3px;
  }
  .cs-modern .cs-matchhead .cs-mh-form-chip{
    width:20px;
    height:20px;
    border-radius:6px;
    font-size:11px;
  }
  .cs-modern .cs-live-chart-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:10px;
  }
  .cs-modern .cs-live-chart-card{
    padding:8px 6px 4px;
    border-radius:9px;
  }
  .cs-modern .cs-live-chart,
  .cs-modern .cs-live-chart-card-main .cs-live-chart{
    min-height:300px;
  }
  .cs-modern table th, .cs-modern table td{ padding:7px 9px !important; white-space:nowrap; }
  .cs-modern table.stats_table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cs-modern #corner_line_prob_table,
  .cs-modern #card_line_prob_table{
    display:table;
    table-layout:fixed;
    overflow:visible;
  }
  .cs-modern #corner_line_prob_table tr.no_bold th:first-child,
  .cs-modern #card_line_prob_table tr.no_bold th:first-child,
  .cs-modern #corner_line_prob_table td:first-child,
  .cs-modern #card_line_prob_table td:first-child{
    width:34%;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table){
    display:block !important;
    border:0;
    background:transparent;
    overflow:visible;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tfoot{
    display:block;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child{
    display:block;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child th{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px 8px;
    padding:10px !important;
    border:1px solid var(--bd) !important;
    border-radius:8px;
    text-align:left;
    white-space:normal !important;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child th span:first-child{
    flex:1 1 100%;
    margin-right:0 !important;
    font-size:13px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child select{
    height:28px;
    border:1px solid var(--bd);
    border-radius:7px;
    background:#fff;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child input[type="checkbox"]{
    margin-left:0 !important;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:first-child label{
    margin:0 6px 0 0;
    font-size:11px;
    color:var(--tx2);
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) #customize_view{
    margin-left:0 !important;
    height:28px;
    padding:4px 9px !important;
    border-radius:7px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) thead tr:nth-child(2){
    display:none;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody tr{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px 6px;
    margin:0 0 6px;
    padding:8px;
    border:1px solid var(--bd);
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.05);
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody td{
    display:flex;
    flex:0 1 auto;
    min-width:0 !important;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:4px 6px !important;
    border:0 !important;
    border-radius:7px;
    background:#f7f9fc;
    color:var(--tx);
    font-size:11.5px;
    line-height:1.2;
    text-align:right;
    white-space:normal !important;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody td:before{
    content:attr(data-label);
    flex:0 0 auto;
    color:var(--tx3);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody td a{
    min-width:0;
    color:inherit;
    overflow-wrap:anywhere;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_league,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_time,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_home,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_score,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_away{
    background:transparent;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_league:before,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_time:before,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_home:before,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_score:before,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_away:before{
    content:none;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_league{
    flex:1 1 calc(100% - 92px);
    order:1;
    justify-content:flex-start;
    padding:0 !important;
    color:var(--tx2);
    font-size:10.5px;
    text-align:left;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_time{
    flex:0 0 auto;
    order:2;
    justify-content:flex-end;
    padding:0 !important;
    color:var(--tx3);
    font-size:10.5px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_home,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_away{
    flex:1 1 calc((100% - 70px) / 2);
    order:3;
    padding:2px 0 !important;
    font-size:11.5px;
    font-weight:800;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_home{
    justify-content:flex-start;
    text-align:left;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_away{
    order:5;
    justify-content:flex-end;
    text-align:right;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_score{
    flex:0 0 58px;
    order:4;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    padding:3px 4px !important;
    background:#eef3fc;
    font-weight:850;
    text-align:center;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_score div:first-child{
    color:var(--tx3);
    font-size:9px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_score .red{
    font-size:12px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events{
    display:block;
    flex:1 1 100%;
    order:7;
    position:relative;
    padding:5px 6px 8px !important;
    text-align:left;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events:before{
    display:block;
    margin-bottom:4px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events .timeLine{
    display:block;
    top:0;
    width:calc(100% - 20px);
    margin:0;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events .dropdown{
    position:absolute;
    right:8px;
    bottom:8px;
    line-height:1;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events .history_dropdown{
    display:block;
    padding:0;
    line-height:1;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody .td_events:not(:has(.timeLine)){
    display:none;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody td:not(.td_league):not(.td_time):not(.td_home):not(.td_score):not(.td_away):not(.td_events){
    display:block;
    flex:1 1 calc(33.333% - 4px);
    order:6;
    min-height:32px;
    text-align:left;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tbody td:not(.td_league):not(.td_time):not(.td_home):not(.td_score):not(.td_away):not(.td_events):before{
    display:block;
    margin-bottom:2px;
    line-height:1;
    font-size:8.5px;
  }
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tfoot tr,
  .cs-modern :is(#head_to_head_history_table,#home_history_table,#away_history_table) tfoot td{
    display:block;
    width:100%;
    white-space:normal !important;
    text-align:left;
  }
}