/* Base styles for transparent OBS source */
body {
  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  /* overflow-y: auto; */
  --background_green: #007749;
  --background_yellow: #ebe710;
  --background_orange: #d6753c;
  --background_brown: #e25a24;
  --background_purple: #d149bf;

  --background_black_trans: #000000a1;

  --background_red: #f36f76;
  --background_light_red: #ec4d4d6e;
  --background_red_trans: #e74e4e67;

  --background_sky: #3d85af;
  --background_sky_trans: #00a2ff80;
  --background_sky_trans_lighter: #00a2ff18;

  --background_white: #f0f0f0;
  --background_white_trans: #f0f0f0c2;
  --background_gray: #9c9c9c;
  --background_gray_trans: #9c9c9c21;
  --background_cream: #e6e6e6;
  --background_blue: #194b6d;
  --background_black: #000000;
  --background_blue_trans: #1f608baf;
  --background_blue_hover: #005f9e;
  --text_color: #777777;
  --text_white: #ffffff;
  --text_white_trans: #ffffffb7;
  --text_sky: #41b9ff;
  --text_green: #5cd498;
  --text_orange: #e9a251;
  --text_brown: #ad5938;
  --text_purple: #d149bf;
  --text_blue: #14708c;
  --text_black: #111111;
  --text_red: #db464e;
  --text_reddish: #ee5d5d;
  --text_gray: #9c9c9c;
  --text_gray_trans: #00000046;
  --transparent: transparent;

  --app_bg: #f4f7fb;
  --app_text: #222222;
  --surface: #ffffff;
  --surface_light: #fafafa;
  --surface_alt: #eef3ff;
  --brand: #3c8bd6;
  --brand_text: #ffffff;
  --button_brand: #3798da;
  --border_muted: #e1e5eb;
  --border_divider: #dddddd;
  --text_muted: #4b4b4b;
  --text_muted_strong: #444444;

  /* Letter coded colors */

  --A: #55c4648c;
  /* Green */
  --B: #007bff8c;
  /* Blue */
  --C: #dc35458c;
  /* Red */
  --D: #ffc1078c;
  /* Yellow */
  --E: #28a7458c;
  /* Darker Green */
  --F: #6c757d8c;
  /* Gray */
  --G: #17a2b88c;
  /* Cyan */
  --H: #fd7e148c;
  /* Orange */
  --I: #5c35a38c;
  /* Purple */
  --J: #ffa4678c;
  /* Pink */
  --K: #00c8518c;
  /* Emerald Green */
  --L: #ee965c8c;
  /* Darker Blue */
  --M: #36c4f08c;
  /* Burgundy */
  --N: #ee9b4d8c;
  /* Dark Orange */
  --O: #8000808c;
  /* Purple */
  --P: #ff69b48c;
  /* Hot Pink */
  --Q: #0080808c;
  /* Teal */
  --R: #45accc8c;
  /* Brown */
  --S: #43a17a8c;
  /* Indigo */
  --T: #d2691e8c;
  /* Chocolate */
  --U: #008b8b8c;
  /* Dark Cyan */
  --V: #dd2f2f8c;
  /* Dark Red */
  --W: #0000808c;
  /* Navy */
  --X: #8080008c;
  /* Olive */
  --Y: #8080808c;
  /* Gray */
  --Z: #c454638c;
  /* Black */

  --border: 0.5px solid #ddd;
  --border_bold: 2px solid #c5c5c5;
  --border_blue: 2px solid var(--background_blue);
  --border_sky: 0.5px solid var(--background_sky);
  --border_dashed_sky: 2px dashed var(--background_sky);
  --border_red: 1px solid var(--background_red);
  --border_white: 2px solid var(--text_white);
  --border_thin_white: 0.2px solid #ffffffcb;
  --shadow: -2px 2px 10px rgba(0, 0, 0, 0.164);

  --today_cell: 3;
  background-color: var(--background_white);
  margin: 0;
  padding: 0;

  --sunday_color: #e94f4f33;
  --saturday_color: #eb8f8f25;
}

body.dark-mode {
  --background_black_trans: #ffffffa6;

  --background_green: #256c47;
  --background_orange: #b86c1c;
  --background_brown: #ca4a23;
  --background_purple: #702c69;

  --background_white: #1d1d1d;
  --background_white_trans: #000000a6;
  --background_gray: #606060;
  --background_gray_trans: #44444463;
  --background_cream: #353535;
  --background_blue: #102f44;
  --background_blue_trans: #1f608b4b;
  --background_blue_hover: #007acc;

  --text_color: #cccccc;
  --text_white: #ffffff;
  --text_sky: #6dc1f3;
  --text_green: #5cd498;
  --text_orange: #e9a251;
  --text_brown: #ad5938;
  --text_purple: #d149bf;
  --text_blue: #5ca7e5;
  --text_black: #f0f0f0;

  --text_gray: #aaaaaa;
  --text_gray_trans: #aaaaaa42;
  --transparent: transparent;

  /* Letter coded colors stay mostly the same, or slightly dimmed if you want */

  --border: 0.5px solid #555;
  --border_bold: 2px solid #777;
  --border_blue: 2px solid var(--background_blue);
  --border_sky: 2px solid var(--background_sky);
  --border_red: 1px solid var(--background_red);
  --border_white: 0.5px solid #555;
  --border_thin_white: 0.2px solid #ffffff10;
  --app_bg: #1e1e1f;
  --app_text: #e4e1e1;
  --surface: #222;
  --surface_light: #333;
  --surface_alt: #2a2a2a;
  --brand: #1a4a8a;
  --brand_text: #ffffff;
  --button_brand: #1e5f99;
  --border_muted: #444;
  --border_divider: #666;
  --text_muted: #7c7c7c;
  --text_muted_strong: #cccccc;
  --today_cell: 3;
  background-color: var(--background_white);
  color: var(--text_color);
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--app_bg);
  color: var(--app_text);
  display: flex;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  /* overflow: hidden; */
}

a {
  text-decoration: none;
  color: var(--text_color);
  margin: 0;
}

p {
  margin: 0;
}

.header_main {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--background_cream);
  color: var(--brand_text);
  padding: 0 20px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
}

header h1 {
  margin: 0;
  font-size: 1.6rem;
  padding: 0;
}

.sidebar_menu {
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border_muted);
  padding: 20px 0;
  overflow-y: auto;
  position: fixed;
  top: 90px;
  bottom: 0;
  left: 0;
}

.nav-container {
  /* background-color: #55f; */
  overflow-y: auto;
  padding: 0 20px;
}

/* Scrollbar styling */
select,
body,
.sidebar_menu,
.main_content {
  scrollbar-width: thin;
  scrollbar-color: var(--background_cream) rgba(0, 0, 0, 0.08);
}

select::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar_menu::-webkit-scrollbar,
.main_content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

select::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar_menu::-webkit-scrollbar-track,
.main_content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

select::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar_menu::-webkit-scrollbar-thumb,
.main_content::-webkit-scrollbar-thumb {
  background: var(--background_cream);
  border-radius: 10px;
}

select::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar_menu::-webkit-scrollbar-thumb:hover,
.main_content::-webkit-scrollbar-thumb:hover {
  background: var(--background_cream);
}

.logo_header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* background-color: turquoise; */
  padding-left: 10px;
}

.logo_header img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.logo_header h1 {
  font-weight: normal;
}

ins {
  font-size: xx-small;
  text-decoration: none;
  color: var(--text_muted);
}

.logo_header a {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  text-decoration: none;
  color: var(--brand_text);
}

.menu_toggle_btn {
  /* background-color: #007749; */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* display: none; Hidden by default, shown on mobile via media query */
}

.main_content {
  flex: 1;
  margin-left: 320px;
  margin-top: 90px;
  padding: 20px;
  width: calc(70% - 370px);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: var(--background_white);
  width: 60%;
  padding: 2px 20px;
  border-radius: 20px;
  margin: 10px;
  margin-right: 20%;
  /* margin-bottom: 20px; */
  padding-right: 0;
  position: relative;
}

.topbar select,
.topbar input,
.topbar button {
  padding: 5px 12px;
  border: none;
  outline: none;
  border-radius: 20px;
  font-size: 0.7rem;
  /* box-shadow: var(--shadow); */
  background-color: transparent;

  color: var(--text_color);
}

.topbar input {
  width: 70%;
  padding: 10px 20;
  font-size: 0.9rem;
  background-color: transparent;
}

.topbar button {
  /* background-color: var(--background_white); */
  border-radius: 0;
  /* background: var(--surface); */
  /* background: var(--background_cream); */
  color: var(--brand_text);
  border-color: transparent;
  cursor: pointer;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-section h3 {
  margin: 0 0 12px 0;
  font-size: 0.7rem;
  color: var(--text_sky);
  border-bottom: var(--border);
  padding-bottom: 5px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin-bottom: 8px;
}

.nav-list a {
  color: var(--text_muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  transition: background 0.15s;
  font-size: small;
}

.nav-list a:hover {
  background: var(--surface_alt);
  color: var(--brand);
}

.nav-list img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 8px;
}

.filter_fixtures {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
  background-color: var(--background_white);
  padding: 10px 20px;
  position: sticky;
  top: 60px;
  /* border-radius: 14px; */
  z-index: 999;
}

.filter_buttons {
  display: flex;
  gap: 10px;
  /* margin-bottom: 20px; */
}

.filter_fixtures select,
.filter_fixtures input,
.filter_fixtures button {
  padding: 5px 12px;
  border: none;
  outline: none;
  border-radius: 20px;
  font-size: 0.7rem;
  box-shadow: var(--shadow);
  background-color: var(--background_white);
  color: var(--text_color);
  max-width: 150px;
}

.filter_buttons button {
  padding: 5px 16px;
  border: none;
  outline: none;
  border-radius: 20px;
  font-size: 0.7rem;
  box-shadow: var(--shadow);
  background-color: var(--background_cream);
  color: var(--text_color);
  cursor: pointer;
  transition: background 0.15s;
}

.filter_buttons button:hover {
  background-color: var(--background_gray_trans);
  /* color: var(--text_white); */
  /* color: var(--brand); */
}

.filter_buttons #liveFixtures {
  background-color: var(--background_red_trans);
  color: var(--text_white);
}

.fixtures {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 20px;
  padding: 0;
}

.league-section {
  /* background: var(--surface); */
  border-bottom: var(--border);
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 14px;
}

.league-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: var(--background_cream);
  border-radius: 8px;
  /* margin-bottom: 12px; */
  /* border-left: 4px solid var(--brand); */
}

.league-flag {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 12px;
  padding: 16px;
  background: var(--background_cream);
  border-radius: 8px;
  /* margin-bottom: 12px; */
  /* border-left: 4px solid var(--brand); */
}

.league-actions button {
  padding: 5px 12px;
  border: none;
  outline: none;
  border-radius: 20px;
  font-size: 0.7rem;
  box-shadow: var(--shadow);
  background-color: var(--background_white);
  box-shadow: var(--shadow);
  color: var(--text_color);
  cursor: pointer;
  transition: background 0.15s;
}

.league-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 4px;
}

.league-info h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--app_text);
  cursor: pointer;
}

.league-info p {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: var(--text_muted);
  cursor: pointer;
}

.league-fixtures {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

.fixture-card {
  background: var(--surface);

  border-radius: 14px;
  /* box-shadow: -5px 2px 10px rgba(0, 0, 0, 0.178); */
  /* border: var(--border); */
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  /* padding-top: 5px; */
  margin: 0 auto;

  margin-bottom: 20px;
  width: 90%;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
  border: 1px solid transparent;
}

.fixture-card:hover,
.fixture-card.is-selected {
  border: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fixture-card.is-selected {
  transform: translateY(-1px);
}

.fixture-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  padding: 20px 0;
}

.team-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  /* background-color: #005f9e; */
  border-radius: 8px;
  padding: 5px 10px;
  transition: background-color 0.5s ease;
  width: 30%;
}

.team-block img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface_light);
  border: 1px solid var(--border_divider);
  padding: 5px;
}

.team-block:hover {
  background-color: var(--background_blue_trans);
}

.team-name {
  font-weight: 700;
  line-height: 1.1;
  font-size: 1rem;
  color: var(--text_color);
  text-overflow: ellipsis;
}

.team-name p {
  color: var(--text_color);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  text-wrap: wrap;
}

.fixture-meta {
  /* margin-bottom: 14px; */
  display: flex;
  justify-content: space-around;
  align-items: end;

  gap: 10px;
  font-size: 0.95rem;
  color: var(--text_muted);
  background-color: var(--background_white_trans);
  padding: 5px 20px;
  border-bottom: 0.5px solid var(--border_muted);
  width: 100%;
}

.fixture-meta p {
  font-size: small;
  padding: 0;
  margin: 0;
}

.tournament-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tournament-info img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.empty-state {
  margin: 30px 0;
  padding: 30px;
  background: var(--surface);
  border-radius: 14px;
  text-align: center;
  color: var(--text_muted_strong);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface_alt);
  color: var(--brand);
  font-size: 0.85rem;
}

.search_container {
  position: relative;
  width: 80%;
}

.search_container input {
  border-radius: 0;
}

.search_box_suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--surface);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  /* border: var(--border); */
  z-index: 30;
  display: none;
}

.suggestion-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--app_text);
  transition: background 0.15s ease;
}

.suggestion-item:hover,
.suggestion-item:focus {
  background: var(--surface_alt);
}

/* .suggestion-item + .suggestion-item {
  border-top: 1px solid var(--border_divider);
} */

.suggestion-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
  flex-shrink: 0;
}

.suggestion-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-label {
  font-weight: 600;
  color: var(--text_black);
}

.suggestion-type {
  font-size: 0.82rem;
  color: var(--text_muted);
  text-transform: capitalize;
}

.select_wrapper {
  display: none;
}

.score_time_elapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--app_text);
  position: relative;
  border-radius: 12px;
  background-color: var(--background_white);
  border: var(--border_thin_white);
  padding: 4px 30px;
}

.live-time {
  font-size: 0.8rem;
  color: var(--text_red);
  margin-top: 4px;
  position: absolute;
  bottom: calc(100% + 2px);
  /* Adjust position slightly */
  text-align: center;
}

.active {
  background: var(--background_sky);
}

.black_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  /* Hidden by default */
  z-index: 999;
}

.close_button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.close_button button {
  font-size: 1.5rem;
  background: transparent;
  color: var(--text_white);
  border: none;
  cursor: pointer;
}

.advert_home {
  width: 28%;
  height: 85vh;
  /* background-color: var(--background_cream); */
  position: absolute;
  right: 10px;
  top: 110px;
  border-radius: 12px;
}

.side_advert_home {
  width: 100%;
  /* background-color: var(--background_white); */
  height: 45%;
  box-shadow: -50px -5px -5px 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.advert_buttom_page {
  width: 100%;
  /* background-color: var(--background_cream); */
  border-radius: 12px;
  height: 200px;
}

.live_fixture,
.upcoming_fixture,
.past_fixtures {
  display: none;
}

.date_of_fixtures {
  padding-left: 20px;
}

.show_fixture_wrapper {
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .advert_home {
    display: none;
  }

  .main_content {
    width: calc(100% - 370px);
  }
}

@media screen and (max-width: 768px) {
  .sidebar_menu {
    position: fixed;
    top: 0;
    z-index: 1000;
  }

  .black_overlay {
    display: block;
  }

  body {
    min-height: unset;
    /* Allow body height to adjust */
  }

  .container {
    flex-direction: column;
    /* Stack main content and sidebar_menu (though sidebar_menu is hidden) */
  }

  .menu_toggle_btn {
    display: flex;
    /* Hidden by default, shown on mobile via media query */
  }

  .header_main {
    flex-direction: row;
    /* Keep it row, but adjust content */
    justify-content: flex-start;
    /* Keep space between */
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    /* Adjust padding */
    height: auto;
    /* Allow height to adjust */
    /* Keep position: fixed; top: 0; z-index: 10; */
    padding-bottom: 10px;
  }

  .nav-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .logo_header {
    height: 50px;
  }

  .logo_header a {
    gap: 8px;
  }

  .logo_header img {
    width: 35px;
    /* Smaller logo */
    height: 35px;
  }

  .logo_header h1 {
    font-size: 1.1rem;
    /* Smaller heading */
  }

  /* Hide the 'ins' element (small text) in the header on mobile */
  .logo_header ins {
    display: none;
  }

  .topbar {
    /* flex-direction: column; Stack topbar items */
    justify-content: center;
    width: 90%;
    /* Full width */
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 2px 10px;
    /* Add padding to topbar itself */
  }

  .topbar select,
  .topbar input,
  .topbar button {
    font-size: 0.8rem;
    /* Slightly larger font for readability */
    padding: 2px 12px;
  }

  .topbar button {
    /* background-color: #007acc; */
    width: auto;
  }

  .league-fixtures {
    gap: 10px;
  }

  .filter_fixtures {
    /* flex-direction: column; Stack filter buttons */
    padding: 10px;
    /* Adjust padding */
    gap: 10px;
    top: 90px;
  }

  .filter_buttons {
    /* flex-direction: column; Stack filter buttons */
    gap: 10px;
    width: 50%;
  }

  .filter_buttons button {
    width: 100%;
    /* Make buttons full width */
    font-size: 0.6rem;
    padding: 8px 8px;
  }

  .fixture-logo-row {
    /* flex-direction: column; Stack teams and score */
    width: 100%;
    /* Full width */
    padding: 10px 15px;
    /* Adjust padding */
    gap: 15px;
  }

  .main_content {
    margin: 0 auto;
    width: 99%;
    padding: 0;
    /* Adjust padding for smaller screens */
    margin-top: 120px;
    /* Adjust margin-top to account for potentially smaller fixed header */
  }

  .fixture-card {
    border-radius: 8px;
  }

  .team-block {
    display: flex;
    flex-direction: column;
    /* Keep image and name in a row */
    justify-content: center;
    /* Center content */
    text-align: left;
    /* Reset text align */
    gap: 8px;
    padding: 5px;
  }

  .home_team {
    flex-direction: column-reverse;
  }

  .team-block img {
    width: 25px;
    /* Smaller team logos */
    height: 25px;
  }

  .team-name {
    text-overflow: ellipsis;
  }

  .team-name p {
    font-size: 0.6rem;
    text-wrap: wrap;
  }

  .score_time_elapsed {
    font-size: 1rem;
    /* Smaller score font */
    padding: 3px 20px;
    /* Adjust padding */
  }

  .live-time {
    font-size: 0.7rem;
    /* Smaller live time font */
  }

  .date_of_fixtures {
    font-size: 0.8rem;
  }

  .fixture-meta {
    /* flex-direction: column; Stack meta info */
    gap: 8px;
    font-size: 0.5rem;
    padding: 2px 15px;
  }

  .fixture-meta p {
    font-size: 0.5rem;
  }

  .tournament-info img {
    width: 30px;
    /* Smaller tournament logo */
    height: 30px;
  }

  .search_container {
    width: 90%;
    /* Full width search container */
    /* background-color: #007749; */
  }

  .search_container input {
    width: 90%;
  }

  .league-header,
  .league-flag {
    /* flex-direction: column; */

    padding: 0;
    gap: 8px;
    margin-bottom: 5px;
  }

  .league-header {
    padding: 5px;
  }

  .league-logo {
    width: 30px;
    height: 30px;
    padding: 10px;
  }

  .league-info h3 {
    font-size: 0.8rem;
  }

  .league-info p {
    font-size: 0.7rem;
  }

  .league-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    /* background-color: #005f9e; */
  }

  .league-actions button {
    font-size: 0.7rem;
    padding: 8px 10px;
  }

  .league-section {
    margin-bottom: 10px;
    /* border-left: 2px solid var(--background_sky_trans); */
    padding: 10px 5px;
    border-radius: 14px;
  }

  .fixture-detail-panel {
    margin: 0 5px 24px;
    padding: 8px;
    padding-bottom: 0;
  }

  .fixture-detail-header {
    padding: 10px;
    padding-right: 46px;
  }

  .fixture-detail-logo-wrapper img {
    width: 44px;
    height: 44px;
  }

  .fixture-detail-header h2 {
    font-size: 0.8rem;
  }

  .fixture-detail-status {
    font-size: 0.6rem;
  }

  .fixture-detail-scoreboard {
    gap: 8px;
  }

  .fixture-detail-team img {
    width: 44px;
    height: 44px;
  }

  .fixture-detail-team h3 {
    font-size: 0.72rem;
  }

  .fixture-stat-row,
  .fixture-stat-teams {
    grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr) minmax(0, 1fr);
  }
}