/* Base styles and typography */

:root {
  /* --font-primary: 'Poppins', sans-serif;

  --font-secondary: 'Nunito', sans-serif; */

  --font-size-base: clamp(0.7rem, 0.7vw + 0.3rem, 0.8rem);

  --line-height-base: 1.5;

  --font-weight-normal: 400;

  --font-weight-bold: 500;
}

body {
  font-size: var(--font-size-base);

  line-height: var(--line-height-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);

  line-height: 1.2;
}

h1 {
  font-size: clamp(1.5rem, 3vw + 0.6rem, 2rem);
}

h2 {
  font-size: clamp(1.3rem, 2.5vw + 0.5rem, 1.8rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw + 0.4rem, 1.6rem);
}

h4 {
  font-size: clamp(1rem, 1.5vw + 0.3rem, 1.4rem);
}

h5 {
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1.2rem);
}

h6 {
  font-size: clamp(0.8rem, 0.8vw + 0.2rem, 1rem);
}

/* Theme */

:root {
  --color-bg: #040b23;

  --color-text: #2c3e50;

  --color-primary: #5d6d7e;

  --color-secondary: #8ea4b8;

  --color-accent: #a9cce3;

  --color-link: #4a5e74;

  --color-link-hover: #34495e;

  --color-table-text: #2c3e50;
}

.dark-mode {
  --color-bg: #2c3e50;

  --color-text: #f4f7f5;

  --color-primary: #8ea4b8;

  --color-secondary: #a9cce3;

  --color-accent: #5d6d7e;

  --color-link: #b3c6d9;

  --color-link-hover: #d0dce6;

  --color-table-text: #f4f7f5;
}

.bg-primary,
.bg-secondary,
.bg-accent {
  color: var(--color-bg) !important;
}

@media (min-width: 576px) {
  .container {
    max-width: 90%;

    padding-left: 15px;

    padding-right: 15px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 90%;

    padding-left: 15px;

    padding-right: 15px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 90%;

    padding-left: 15px;

    padding-right: 15px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1320px;

    padding-left: 15px;

    padding-right: 15px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1440px;

    padding-left: 20px;

    padding-right: 20px;
  }
}

/* Apply theme colors */

body {
  background-color: #0f2027;

  color: var(--color-text);
}

.navbar,
.jumbotron,
.footer {
  color: #fff !important;

  background: linear-gradient(
    90deg,
    rgba(4, 11, 35, 1) 0%,
    rgba(15, 58, 27, 0.55) 48%,
    rgba(5, 12, 36, 0.1) 100%
  );
}

.btn-primary {
  background-color: var(--color-primary);

  border-color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-secondary);

  border-color: var(--color-secondary);
}

/* Shared Styles */

a {
  color: var(--color-link);

  text-decoration: none;

  background-color: transparent;

  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-link-hover);

  text-decoration: underline;
}

.navbar {
  margin-bottom: 0;
}

.jumbotron {
  margin-bottom: 0;
}

.footer {
  padding: 1rem 0;
}

/* START: main-page */

.page_bars {
  position: relative;
}

.main-page {
  border-radius: 7px;

  background-size: 100%;

  margin-bottom: 16px;
}

.main-page .sports-bars {
  /* border-bottom: 1px solid #ffffff17; */

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 15px 20px 0;

  overflow: hidden;

  white-space: nowrap;

  flex-wrap: nowrap;

  margin-bottom: 0;

  position: relative;
}

.basketball-tab,
.tennis-tab,
.badminton-tab,
.volleyball-tab {
  background-color: #162832;

  border: 1px solid #182c37;

  border-radius: 12px;

  padding: 10px 15px !important;
}

.main-page .sports-bars ul {
  list-style: none;

  width: 100%;

  display: flex;

  gap: 10px;

  margin: 0;

  padding: 0;

  flex: 0 0 calc(100% - 145px);

  padding-right: 6px;

  border-bottom: none;
}

.main-page .sports-bars ul li {
  position: relative;
}

.main-page .sports-bars ul li:last-child::after {
  width: 0;
}

.main-page .sports-bars ul li button {
  background: #13262d;

  border: 1px solid transparent;

  color: rgba(255, 255, 255, 0.5);

  text-shadow: 0px 0.92px 3.678px rgba(0, 0, 0, 0.24);

  display: flex;

  align-items: center;

  justify-content: center;

  text-transform: uppercase;

  gap: 5px;

  font-weight: 600;

  /* min-width: 125px; */

  /* height: 39px; */

  outline: 0;

  border-radius: 6px;

  padding: 15px;

  &:hover {
    border: 1px solid transparent;
  }
}

.main-page .sports-bars ul li button span {
  line-height: 0;
  color: #ffffff80;
}

.main-page .sports-bars ul li button:hover span,
.main-page .sports-bars ul li button.active span,
.main-page .sports-bars ul li button:focus span {
  color: #fff;
}

.main-page .sports-bars ul li button:hover,
.main-page .sports-bars ul li button.active,
.main-page .sports-bars ul li button:focus {
  color: #ffffff;

  background: linear-gradient(180deg, #1f3644, #00411d);

  position: relative;

  border: 1px solid rgba(1, 211, 92, 1);

  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.main-page .sports-bars ul li button.active path,
.main-page .sports-bars ul li button:focus path {
  fill: #00fffd;

  transition: fill 0.3s ease;
}

/* Common styles for all nav-links */

.nav-link {
  position: relative;

  border-radius: 6px;

  transition: background 0.3s ease, border 0.3s ease;
}

.nav-link::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 6px;

  padding: 1px;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;

  transition: background 0.3s ease;
}

/* Specific gradient backgrounds */

#basketball-tab::before {
  background: linear-gradient(
    180deg,
    rgb(31 36 58 / 50%),
    rgb(246 104 45 / 50%)
  );
}

#volleyball-tab::before {
  background: linear-gradient(
    180deg,
    rgba(31, 36, 58, 0.5) 0%,
    rgba(109, 83, 255, 0.5) 100%
  );
}

#tennis-tab::before,
#football-tab::before {
  background: linear-gradient(
    180deg,
    rgb(31 36 58 / 50%),
    rgb(84 169 78 / 50%)
  );
}

#badminton-tab::before {
  background: linear-gradient(
    180deg,
    rgb(31 36 58 / 50%),
    rgb(207 211 46 / 50%)
  );
}

#golf-tab::before {
  background: linear-gradient(
    180deg,
    rgb(31 36 58 / 50%),
    rgb(198 46 211 / 50%)
  );
}

/* Override styles if button is active */

.nav-link.active {
  background: linear-gradient(180deg, #1f3644, #00411d);

  border: 1px solid rgba(1, 211, 92, 1);
}

/* Hide background gradient when active */

.nav-link.active::before {
  display: none;
}

.football-tab {
  /* padding: 0 16px 12px 16px; */

  background-color: #162832;

  border: 1px solid #182c37;

  border-radius: 12px;

  padding: 10px 15px;
}

.main-page .list-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  gap: 10px;
  /* padding: 17px 6px; */
  padding: 0 6px;
  margin-bottom: 0;
}

/* .main-page .list-filter li a, */

.match__settings {
  position: relative;

  display: flex;

  justify-content: flex-end;
}

.match__settings::after {
  content: "";

  display: block;

  width: 25px;

  height: 25px;

  background: url(./images/tab-line.svg) no-repeat center center;

  position: absolute;

  left: 50px;

  top: 11px;
}

.match__settings button.settings-btn {
  border-radius: 6px;

  /* font-family: Raleway; */

  color: #fff;

  font-size: 13px;

  padding: 15px 20px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 7px;

  font-weight: 500;

  line-height: 18px;

  white-space: nowrap;

  border: 1px solid transparent;

  text-decoration: none;

  text-transform: uppercase;

  background-color: transparent;

  border-radius: 30px;

  outline: none;

  position: relative;
}

.match__settings button.settings-btn:hover::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 30px;

  padding: 1px;

  background: linear-gradient(360deg, #005624 2%, #006d2e 47%, #005e27 100%);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;
}

.match__settings button.settings-btn:hover,
.match__settings button.settings-btn:focus {
  background: linear-gradient(180deg, #ffffff00 50%, #00411d 80%);
}

.main-page .list-filter li a {
  font-family: "Poppins";

  background: linear-gradient(
    180deg,
    rgb(0 31 59 / 0.7%) 0%,
    rgb(0 25 49 / 0.7%) 47%,
    rgb(26 31 43 / 0.7%) 100%
  );

  position: relative;

  z-index: 2;

  font-size: 12px;

  font-weight: 500;

  padding: 15px 15px;

  text-decoration: none;

  border-radius: 30px;

  line-height: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  color: #ffffff80;
}

.main-page .list-filter li a::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 30px;

  padding: 1px;

  background: linear-gradient(360deg, #005624 2%, #006d2e 60%, #005e27 100%);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;
}

.main-page .list-filter li a:hover {
  background: linear-gradient(180deg, #ffffff00 60%, #0b4129 80%);
  color: #fff;
}

.main-page .list-filter li a .num {
  background: #103b32;

  color: #ffffff;

  font-weight: 600;

  border-radius: 38px;

  width: 22px;

  height: 18px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  font-size: 11px;
}

/* .main-page .list-filter li a.now .num {
  background: #07eb66;

  color: #1a1f2b;
} */

.main-page .list-filter li a.active {
  color: #fff;

  background: linear-gradient(180deg, #ffffff00 50%, #00411d 80%);

  position: relative;

  border-radius: 38px;
}

.main-page .list-filter li a.active::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 38px;

  padding: 1px;

  background: #01d35c;

  -webkit-mask: #01d35c;

  mask: #01d35c;

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;

  transition: background 0.3s ease;
}

/* .main-page .list-filter li a.now{

  color: #fff;

  background: linear-gradient(180deg, #ffffff00 50%, #00411D 80%);

  position: relative;

  border-radius: 38px;

} */

.main-page .list-filter li a.now::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 38px;

  padding: 1px;

  background: linear-gradient(360deg, #005624 2%, #006d2e 47%, #005e27 100%);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;

  transition: background 0.3s ease;
}

@media (max-width: 1199px) {
  .main-page .list-filter li a {
    font-size: 11px;

    padding: 10px;
  }

  .match__settings button.settings-btn {
    font-size: 11px;

    padding: 10px;
  }

  .match__settings::after {
    left: 15px;

    top: 7px;
  }

  .main-page .list-filter li a .num {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  .main-page .list-filter {
    max-width: 100%;

    overflow-x: scroll;

    overflow-y: hidden;

    padding: 0 0 12px 0;

    margin-bottom: 12px;
  }
}

@media (max-width: 991px) {
  .match__settings {
    justify-content: flex-start;
  }

  .main-page .list-filter li a {
    min-width: 145px;

    font-size: 12px;

    padding: 7px;
  }

  .match__settings button.settings-btn {
    font-size: 11px;

    padding: 7px;
  }

  .match__settings::after {
    left: 15px;

    top: 7px;
  }
}

@media (max-width: 768px) {
  .main-page .sports-bars {
    padding: 12px 6px;

    margin-bottom: 12px;
  }

  .main-page .sports-bars ul li::after {
    right: -12px;
  }

  .main-page .list-filter li a {
    padding: 7px;
  }
}

@media (max-width: 576px) {
  .main-page .sports-bars ul li::after {
    right: -10px;
  }

  .main-page .sports-bars .btn-livescore {
    /* width: 115px; */

    font-size: 12px;
  }

  .main-page .sports-bars {
    display: grid;

    grid-template-columns: 1fr;
  }
}

@media (max-width: 437px) {
  .main-page .sports-bars ul li::after {
    right: -7px;

    display: none;
  }

  .main-page .sports-bars ul {
    gap: 0;

    padding-right: 0;
  }
}

@media (max-width: 424px) {
  .main-page .sports-bars ul {
    gap: 2px;
  }

  .main-page .sports-bars ul li::after {
    width: 0;
  }

  .main-page .sports-bars ul li button img {
    width: 20px;

    height: auto;
  }

  .main-page .sports-bars ul li button {
    width: 55px;

    padding: 6px;

    font-size: 8px;
  }
}

@media (max-width: 390px) {
  .main-page .sports-bars .btn-livescore {
    width: 110px;
  }

  /* .page_bars {

    background: url(./images/main-page-bg.svg) no-repeat center / cover;

  } */
}

@media (max-width: 360px) {
  .main-page .sports-bars .btn-livescore {
    font-size: 11px;
  }

  .main-page .sports-bars ul li button {
    font-size: 11px;
  }
}

/* END: main-page */

/* START: Grid Matches */

.data-team-50 {
  height: 50px !important;

  width: 50px;

  -o-object-fit: contain;

  object-fit: contain;

  padding: 2px;
}

.grid-matches_wrapper {
    margin-top: 15px;
}

.grid-matches {
  display: grid;
  gap: 15px 20px;
  grid-template-columns: repeat(2, 1fr);
}

.main-grid-match {
  /* background: linear-gradient(110deg, #0F2727 60%, #102731 100%); */

  background: linear-gradient(95.45deg, #0f2727 -11%, #102731 92%);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);

  border-radius: 11px;
}

.main-grid-match a {
  text-decoration: none;
}

.main-grid-match a.odds-comp img {
  width: 70px;

  height: auto;

  object-fit: contain;
}

#tennis a.odds-comp img {
  width: auto;

  max-width: 73px;
}

.gmd-tournament-header {
  align-items: center;

  color: #fff;

  display: grid;

  grid-template-columns: 1fr 110px 1fr;

  padding: 12px 15px 17px;

  text-align: center;
}

.gmd-match-league {
  text-align: left;

  color: #828b98;

  text-transform: uppercase;

  font-size: 11px;
}

.gmd-comp_logo {
  height: 14px;

  width: 14px;

  object-fit: contain;
}

.gmd-elapsed-time {
  text-align: center;
  width: max-content;
  margin: 0 auto;
}

.gmd-e_minutes {
  border-radius: 6px;

  font-size: 13px;

  line-height: 15px;

  font-weight: bold;

  padding: 5px 15px;

  background-color: #02ae4a;
}

p.gmd-e_minutes {
  margin-bottom: 0;
}

.gmd-match-date {
  text-align: right;

  color: #8cd5ff;

  font-family: "Roboto", sans-serif;
}

.gmd-match-date span {
  background: linear-gradient(360deg, #243f50 0%, #1b2e3c 100%);

  padding: 4.5px 10px;

  font-size: 12px;

  line-height: 20px;

  border-radius: 30px;

  margin-bottom: 0;

  /* box-shadow: inset 0px 0px 0 2px rgb(35 47 71 / 80%); */
}

.gmd-content_match {
  align-items: start;

  color: #fff;

  display: grid;

  grid-template-columns: 1fr 85px 1fr;

  padding: 0 0.5rem 0.8rem;

  text-align: center;

  align-items: center;
}

.gmd-home_team {
  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  gap: 11px;

  padding-right: 30px;

  p {
    margin-bottom: 0 !important;
  }
}

.gmd-team p {
  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  width: 120px;
}

.gmd-team .team-logo-group img {
  height: 50px;

  width: 50px;

  -o-object-fit: contain;

  object-fit: contain;

  padding: 2px;
}

.gmd-home_team .team-name-group {
  text-align: right;
}

.gmd-away_team .team-name-group {
  text-align: left;
}

.gmd-score-box {
  background: #0f2027;

  border: 1px solid #035325;

  border-radius: 100px;

  display: flex;

  font-size: clamp(1.1875rem, 2vw + 0.5rem, 1.1875rem);

  font-weight: 500;

  gap: 0.3rem;

  justify-content: space-evenly;

  padding: 5px;
}

.gmd-mid_score p {
  border-radius: 100px;

  margin-bottom: 0;

  /* border: 1px solid #01D35C; */

  position: relative;
}

.is-win p::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 100px;

  padding: 1px;

  background: #01d35c;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;
}

.gmd_away-score p {
  margin-bottom: 0;

  border-radius: 5.625px;

  padding: 2px 10px 0;
}

.gmd-away_team {
  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 11px;

  padding-left: 30px;

  p {
    margin-bottom: 0 !important;
  }
}

.gmd-match-footer-tennis {
  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px;

  gap: 12px;
}

.gmd-match-footer-tennis .t-incident-tennis {
  width: 200px;

  gap: 4px;
}

.gmd-match-footer-tennis .t-incident-tennis-5 {
  width: 260px;
}

.gmd-match-footer-tennis .t-incident-tennis .tib-row-head {
  display: none;
}

.gmd-match-footer-tennis .grid-pt {
  color: #b8d891;

  text-align: center;

  font-family: Roboto;

  font-size: 13px;

  font-style: normal;

  font-weight: 700;

  line-height: 20px;
}

.gmd-match-footer-tennis .grid-pt div {
  height: 24px;

  display: flex;

  align-items: center;
}

.gmd-match-footer-tennis .grid-pt .grid-pt-home {
  margin-bottom: 8px;
}

.gmd-match-footer {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  padding: 4px 10px;

  background: #0f2027;

  border-radius: 30px;

  margin: 0 1rem 10px 1rem;

  align-items: center;

  position: relative;
}

.gmd-match-footer::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 30px;

  padding: 1px;

  background: #00461d;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;
}

.gmd-match-footer__flag {
  position: relative;

  display: flex;

  justify-content: center;

  width: fit-content;

  border-radius: 38px;

  font-size: 11px;

  /* background: #122a33; */

  min-height: 22px;

  padding: 0 4px;

  gap: 4px;
}

.gmd-match-footer__flag > .d-flex .halfCourt {
  text-wrap: no-wrap;
}
.gmd-match-footer__flag > .d-flex {
  gap: 6px;
  border-radius: 38px;
  padding: 3px 8px;
  background: #122a33;
  width: max-content;
}

.gmd-match-footer__flag.flag-mobile {
  display: none;
}

.grid-match__h2h-vs {
  gap: 4px;

  align-items: center;

  color: #fff;
}

.grid-match__h2h-vs img {
  height: 14px;

  width: 14px;

  object-fit: contain;
}

@media screen and (max-width: 1200px) {
  .grid-match__h2h-vs img {
    height: 10px;

    width: 10px;
  }
}

@media (max-width: 575px) {
  .gmd-match-footer__flag {
    display: none;
  }

  .gmd-match-footer__flag.flag-mobile {
    display: flex;

    margin: 0 auto;

    gap: 8px;
  }
}

@media screen and (max-width: 430px) {
  .grid-match__h2h-vs {
    gap: 3px;
  }

  .grid-match__h2h-vs img {
    height: 11px;

    width: 11px;
  }
}

.gmd-match__goal-scoring {
  gap: 6px;

  color: #fff;

  padding: 3px 0 3px 6px;
}

span.gmd-match__corner-yellow {
  gap: 6px;

  padding: 3px 6px;

  color: #fff;
}

.gmd-ht {
  color: #00c44d;
}

span.gmd-match__corner-ball {
  gap: 6px;

  padding: 3px 6px;

  color: #fff;
}

.gmd-match-footer__streamer {
  display: flex;

  gap: 5px;

  align-items: center;

  color: #bbbbbb;

  justify-content: center;
}

.extra-info {
  display: none;

  flex-direction: column;

  gap: 5px;

  position: absolute;

  z-index: 998;

  top: 35px;

  background-color: #0f2027;

  padding: 6px;

  border: 1px solid #00461d;

  border-radius: 10px;
}

.toggle-btn {
  background: none;

  border: none;

  color: #bbbbbb;

  /* background-color: #122A33; */

  border: 1px solid transparent;

  border-radius: 38px;

  display: flex;

  align-items: center;

  gap: 5px;

  cursor: pointer;
}

.blv-count {
  display: flex;

  align-items: center;

  gap: 5px;
}

span.blv-arrow {
  color: #424242;
}

.gmd-match-footer__streamer.active span.blv-arrow {
  color: #bbbbbb;
}

.no-blv img {
  filter: grayscale(100%);
}

.no-blv .blv-count {
  display: none;
}

.toggle-btn:hover,
.gmd-match-footer__streamer.active .toggle-btn {
  border: 1px solid #00461d;

  background-color: #122a33;
}

.gmd-match-footer__streamer.active .toggle-btn.no-blv {
  border: 1px solid transparent;

  background-color: transparent;
}

button.toggle-btn span {
  font-size: 12px;
}

.toggle-btn:focus {
  outline: none;
}

.gmd-match-footer__streamer.active .extra-info {
  display: flex;

  align-items: flex-start;
}

/* .gmd-match-footer__streamer.active .toggle-btn span {

    display: none;

} */

.gmd-match-footer__odds {
  display: flex;

  gap: 10px;

  align-items: center;

  justify-content: flex-end;

  /* padding-right: 7px; */

  height: 32px;

  background-color: #12252c;

  width: max-content;
  margin-left: auto;
}

.gmd-match__odds {
  color: #8d92a2;

  font-family: "Roboto", sans-serif;

  font-size: 11px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px;

  position: relative;

  min-width: 90px;
}

.gmd-match__odds::before {
  content: "";

  position: absolute;

  left: 25px;

  top: 50%;

  transform: translateY(-50%);

  display: block;

  width: 1px;

  height: 24px;

  opacity: 0.3;

  background: linear-gradient(
    180deg,
    rgba(29, 38, 55, 0.5) 0%,
    #27334b 54.5%,
    rgba(29, 38, 55, 0.5) 100%
  );
}

.gmd-match__odds::after {
  content: "";

  position: absolute;

  right: 25px;

  top: 50%;

  transform: translateY(-50%);

  display: block;

  width: 1px;

  height: 24px;

  opacity: 0.3;

  background: linear-gradient(
    180deg,
    rgba(29, 38, 55, 0.5) 0%,
    #27334b 54.5%,
    rgba(29, 38, 55, 0.5) 100%
  );
}

.gmd-match__odds-item {
  display: flex;

  justify-content: space-between;

  line-height: 16px;

  gap: 6px;

  position: relative;
}

.gmd-match__odds-item p {
  margin-bottom: 0;
}

.gmd-match__odds-item .up {
  color: #0cc956;
}

.gmd-match__odds-item .down {
  color: #ff0000;
}

.gmd-match__odds-item .odds_neut {
  color: #1a83ff;
}

/* START: sports bars mobile */

.sports-bars-mobile {
  overflow-x: auto;

  white-space: nowrap;

  padding: 10px;

  background-color: #162832;
}

.sports-scroll {
  display: flex;

  align-items: center;

  justify-content: space-around;

  gap: 10px;
}

.sports-item {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #1f3644;

  color: #b0b0b0; /* Inactive text color */

  padding: 7px;

  border-radius: 6px;

  text-decoration: none;

  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;

  width: 70px;

  position: relative;

  &:hover {
    text-decoration: none;
  }
}

@media (max-width: 1300px) {
  .gmd-team p {
    width: 100px;
  }
}

@media (max-width: 1199px) {
  .gmd-match-footer__streamer {
    position: relative;

    justify-content: flex-start;
  }

  .gmd-match-footer {
    grid-template-columns: 85px 1fr 1fr;
  }

  .gmd-match-footer__streamer.active .extra-info {
    flex-direction: column;

    position: absolute;

    top: 100%;

    left: 0;

    width: 75px;

    background: #12252c;

    border-radius: 6px;

    padding: 5px 7px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

    z-index: 998;
  }

  .extra-info_one {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 3px;
  }

  .gmd-match-footer__flag,
  button.toggle-btn span {
    font-size: 11px;
  }
}

@media (max-width: 991px) {
  .grid-matches {
    grid-template-columns: 1fr;
  }

  .gmd-match-footer__flag,
  button.toggle-btn span {
    font-size: 12px;
  }

  .gmd-match-footer {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .main-page .sports-bars {
    display: inline;
  }
}

@media (max-width: 768px) {
  .grid-matches {
    grid-template-columns: 1fr;
  }

  .main-page .sports-bars {
    display: grid;

    grid-template-columns: 1fr;
  }

  .main-page .sports-bars ul {
    justify-content: space-evenly;
  }

  .main-page .sports-bars ul li {
    position: relative;
  }

  .main-page .sports-bars ul li::after {
    content: "";

    position: absolute;

    top: 10%;

    right: -25px;

    height: 80%;

    width: 1px;

    background: linear-gradient(
      360deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 48%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .sports-bars.d-none-mobile {
    border-radius: 12px;

    background: #152832;
  }

  .main-page .sports-bars ul li:last-child::after {
    display: none;
  }

  .main-page .sports-bars ul li button {
    flex-direction: column;

    gap: 15px;

    width: 70px;

    padding: 9px;

    font-size: 9px;

    font-family: "Source Sans Pro";
  }

  .gmd-match-footer__flag {
    justify-content: flex-end;
  }

  .gmd-match-footer__flag,
  button.toggle-btn span {
    font-size: 11px;
  }

  .gmd-match-footer {
    grid-template-columns: 85px 1fr 1fr;
  }

  .main-page .list-filter {
    gap: 5px;
  }

  .main-page .list-filter li a {
    min-width: 118px;

    font-size: 11px;

    padding: 7px;

    gap: 5px;
  }
}

@media (max-width: 576px) {
  .grid-match__status {
    transform: scale(0.85);
  }

  /*

  .gmd-team .team-logo-group img {

    height: 36px;

    width: 36px;

  }

  */

  .gmd-team .team-logo-group {
    flex-direction: column;

    min-width: 37px;
  }

  .gmd-team .team-logo-group .team-logo-1 {
    margin-left: 0;

    margin-top: -10px;
  }
}

@media (max-width: 499px) {
  .main-page .sports-bars ul li button {
    width: auto;

    padding: 8px 1px;
  }

  .main-page .sports-bars ul {
    justify-content: start;
  }

  .gmd-match__goal-scoring,
  span.gmd-match__corner-ball {
    background: none;
  }

  .gmd-match-footer__flag {
    gap: 0px;
  }

  .gmd-match__goal-scoring,
  span.gmd-match__corner-ball {
    padding: 3px 5px;
  }

  .gmd-match-footer__flag {
    background: #122a33;

    width: fit-content;

    border-radius: 38px;
  }

  .gmd-match-footer__flag {
    justify-content: center;

    margin-left: auto;
  }

  .main-page .sports-bars ul li::after {
    right: -15px;
  }
}

@media only screen and (max-width: 480px) {
  .gmd-match-league .text-ellipsis {
    width: 100px;
  }

  .gmd-match-footer {
    grid-template-columns: 80px 1fr 1fr;
  }

  .gmd-match-footer__flag {
    justify-content: center;
  }

  .gmd-match-footer {
    margin: 0.25rem 0.5rem 0.5rem 0.5rem;
  }

  .gmd-tournament-header {
    padding: 10px 10px;

    grid-template-columns: 1fr 1fr 1fr;

    display: flex;

    justify-content: space-between;
  }

  .gmd-elapsed-time {
    position: absolute;

    left: 50%;

    top: 2px;

    transform: translateX(-50%);

    z-index: 2;
  }

  .gmd-e_minutes {
    min-width: 85px;
  }

  .gmd-match__odds {
    font-size: 10px;

    min-width: 70px;
  }

  .gmd-away_team {
    padding-left: 15px;
  }

  .gmd-home_team {
    padding-right: 30px;
  }

  span.gmd-match__corner-ball {
    padding: 3px 5px 3px 0px;
  }

  .gmd-match__goal-scoring {
    padding: 3px 0 3px 5px;
  }

  .gmd-match__odds-item {
    gap: 5px;
  }

  .gmd-away_team,
  .gmd-home_team {
    p {
      margin-bottom: 0 !important;

      white-space: nowrap;

      overflow: hidden;

      width: 50px;
    }
  }
}

div#app {
  overflow-y: hidden;
}

@media only screen and (max-width: 375px) {
  .iphone-safari .matches__item {
    transform: scale(0.96);

    left: -8px;

    max-width: 358px;
  }

  .gmd-away_team,
  .gmd-home_team {
    p {
      margin-bottom: 0 !important;

      text-overflow: ellipsis;

      white-space: nowrap;

      overflow: hidden;

      width: 35px;
    }
  }

  .gmd-match-footer {
    margin: 0.25rem;
  }

  .gmd-tournament-header {
    padding: 5px;
  }

  .gmd-e_minutes {
    font-size: 11px;

    padding: 5px 10px;
  }

  .gmd-match-date span {
    font-size: 10px;

    padding: 7px 10px;
  }

  .gmd-match-footer {
    padding: 5px;
  }

  .gmd-away_team {
    padding-left: 5px;
  }

  .gmd-home_team {
    padding-right: 5px;
  }

  .main-page .sports-bars ul li button {
    width: auto;

    padding-inline: 3px;
  }
}

/* END: Grid Matches */

.redirectPopup {
  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 73%;

  z-index: 1;
}

.gmd-match-league {
  display: flex;

  gap: 6px;
}

.matches__item {
  position: relative;
  font-family: "Roboto", sans-serif;
}

.extra-info_one svg {
  width: 24px;

  height: 24px;
}

.extra-info_one span {
  color: white;

  font-size: 11px;
}

.grid-match--is-hot .gmd-score-box {
  background: linear-gradient(90deg, #d10000 0%, #2915a1 100%);
}

.grid-match--is-hot .gmd-match-footer {
  background: linear-gradient(
    80.02deg,
    rgb(251 2 2 / 40%) 46.01%,
    rgb(245 22 22 / 38%) 62.35%
  );
}

.grid-match--is-hot .gmd-match-footer::before {
  background: linear-gradient(
    180deg,
    rgba(35, 59, 83, 0.2) 46.01%,
    rgb(105 5 5) 62.35%
  );
}

/* LIVE TOP */

.teambox__status,
.team__name a {
  color: white;
}

/* HOT MATCH */

.matches__item--hot:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 11px;
    padding: 1px;
    background: linear-gradient(155deg, #FF0000 0%, #630606 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* FILTER ACTIVE */

.main-page .list-filter li a.active {
  background: linear-gradient(180deg, #1f3644 0%, #00411d 100%);
}

@media only screen and (max-width: 768px) {
  .gmd-match-footer__streamer.active .extra-info {
    align-items: flex-start;
  }
}

.gmd-match-league .text-ellipsis {
  color: #828b98;

  font-weight: 600;

  font-family: "Roboto", sans-serif;
}

#football .gmd_home-score p {
  aspect-ratio: 1;
  padding: 2px 10px 0px;
}

#basketball .gmd_home-score.is-win p,
#basketball .gmd_away-score.is-win p {
  padding: 2px 5px 0 !important;
}

.home-feature-match-info * {
  font-size: 15px !important;
}

@media only screen and (max-width: 768px) {
  /* matches mobiles */

  .grid-matches__item .gmd-content_match img {
    width: 40px;
  }

  .grid-matches__item .gmd-home_team p,
  .grid-matches__item .gmd-away_team p {
    font-size: 13px;
  }
}

/* Recent Changes */

.gmd_home-score p {
  border-radius: 5.625px;

  padding: 0 10px;

  margin-bottom: 0;

  /* border: 1px solid #00C8F4; */

  position: relative;
}

.gmd_away-score p {
  position: relative;

  margin-bottom: 0;

  border-radius: 5.625px;

  padding: 2px 10px 0;

  aspect-ratio: 1;
}

.gmd-content_match {
  align-items: start;

  color: #fff;

  display: flex;

  /* grid-template-columns: 1fr 85px 1fr; */

  padding: 0 0.5rem 25px;

  text-align: center;

  align-items: center;
}

.gmd-home_team {
  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  gap: 11px;

  flex: 1;
}

.gmd-away_team {
  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 11px;

  flex: 1;
}

.gmd-mid_score {
  width: max-content;
}

@media (max-width: 480px) {
  .gmd-content_match img.data-team-50 {
    width: 40px;

    height: 40px !important;
  }

  .gmd-home_team {
    padding-right: 5px;
  }

  .gmd-away_team {
    padding-left: 5px;
  }
}

.gmd-match__odds-item {
  display: flex;

  justify-content: space-around;

  line-height: 16px;

  gap: 6px;

  position: relative;

  text-align: center;
}

.gmd-match__odds-item p {
  margin-bottom: 0;

  flex: 1;
}

@media only screen and (max-width: 767px) {
  .gmd-away_team,
  .gmd-home_team {
    p {
      margin-bottom: 0 !important;

      white-space: nowrap;

      overflow: hidden;

      width: 95px;

      text-overflow: ellipsis;
    }
  }
}

@media only screen and (max-width: 480px) {
  .gmd-away_team,
  .gmd-home_team {
    p {
      width: 65px;
    }
  }
}

/* Dropdown */

.form-group.sl-leagues .form-control {
  border: none;

  border-radius: 30px;

  color: #fff;

  background: linear-gradient(
    360deg,
    rgba(0, 31, 59, 0.07),
    rgba(0, 25, 49, 0.07),
    rgba(26, 31, 43, 0.07)
  );

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  padding: 0.375rem 0.75rem;

  position: relative;

  z-index: 1;

  font-size: 13px;

  max-width: 100% !important;
}

.form-group.sl-leagues {
  position: relative;

  border-radius: 30px;

  padding: 6px 1px;

  background: linear-gradient(
    360deg,
    rgba(0, 31, 59, 0.07),
    rgba(0, 25, 49, 0.07),
    rgba(26, 31, 43, 0.07)
  );

  margin-bottom: 0;
}

.form-group.sl-leagues::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 30px;

  padding: 1px;

  background: linear-gradient(
    360deg,
    rgba(0, 86, 36, 1),
    rgba(0, 109, 46, 1),
    rgba(0, 94, 39, 1)
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;
}

.form-group.sl-leagues::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 15px;

  transform: translateY(-50%);

  width: 14px;

  height: 8px;

  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M12.4588 0.718764C12.87 0.29833 13.2811 0.289571 13.6923 0.692486C14.1035 1.0954 14.1035 1.48955 13.6923 1.87495L7.86123 7.34057C7.71171 7.51575 7.50613 7.60334 7.24448 7.60334C6.98283 7.60334 6.77725 7.51575 6.62773 7.34057L0.796657 1.87495C0.385489 1.48955 0.385489 1.0954 0.796657 0.692485C1.20783 0.28957 1.61899 0.298329 2.03015 0.718764L7.24448 5.55373L12.4588 0.718764Z' fill='%23919191'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: center;

  pointer-events: none;

  z-index: 2;
}

.form-group.sl-leagues .form-control::-ms-expand {
  display: none;
}

.form-group.sl-leagues option {
  /* background: linear-gradient(180deg, #232f47 2%, #232f47 47%, #1c222f 100%); */

  background-color: #212529;
}

@media (max-width: 576px) {
  .form-group.sl-leagues {
    width: 100%;
  }
}

.gmd-score-box.vs.t_vs_num {
  margin-inline: 0;
}

.gmd-score-box.vs {
  margin-inline: 20px;
}

.gmd-score-box.vs:not(.t_vs_num) {
  aspect-ratio: 1;
}

/* MOBILE SHORT LEAGUE */

.gmd-match-league .text-ellipsis {
  position: relative;

  display: inline-block;

  text-wrap: nowrap;

  white-space: nowrap;
}

.gmd-match-league .text-ellipsis::after {
  content: attr(data-attr);

  display: none;
}

@media (max-width: 767px) {
  .gmd-match-league .text-ellipsis {
    color: transparent;

    position: relative;
  }

  .gmd-match-league .text-ellipsis::after {
    display: inline;

    position: absolute;

    left: 0;

    top: 0;

    color: #fff;
  }
}

/* START: switch */
@media (max-width: 767px) {
  .main-page .sports-bars .btn-livescore {
    width: auto;
    font-size: 11px;
  }

  .switch-custom::before,
  .switch-custom::after {
    content: none;
  }
}

@media (max-width: 576px) {
  .main-page .sports-bars ul {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .main-page .sports-bars {
    display: grid;

    grid-template-columns: 1fr 70px;

    gap: 10px;

    padding: 6px;
  }

  .sports-bars button:before {
    content: none !important;
  }

  .sports-bars .nav-link.active::after {
    content: none;
  }

  .switch .txt {
    font-size: 10px;
  }
}

/* matches__filter-leagues */

.matches__filter--leagues .sl-leagues {
  position: relative;

  width: 100%;

  margin: 0;
}

.custom-dropdown-trigger {
  font-family: "Raleway", sans-serif;

  background-color: #2c2a2a;

  color: white;

  padding: 7px 20px 7px 10px;

  border-radius: 100px;

  font-size: 13px;

  cursor: pointer;

  border: none;

  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 700;
}

.custom-dropdown-trigger img {
  height: 16px;

  width: 16px;

  object-fit: contain;

  display: none;
}

.custom-dropdown-content {
  display: none;

  position: absolute;

  top: 38px;

  right: 0;

  min-width: 200px;

  width: max-content;

  z-index: 999;

  border-radius: 6px;

  background: #141516;

  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.5);

  border: 1px solid #ffffff1c;
}

.custom-dropdown-content .custom-dropdown-head {
  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid #ffffff1c;

  padding: 13px 15px;
}

.custom-dropdown-content .custom-dropdown-head span {
  color: #00ff4b;

  text-shadow: 0px 0.92px 3.678px rgba(0, 0, 0, 0.24);

  font-family: Oswald;

  font-size: 14px;

  font-style: normal;

  font-weight: 600;

  line-height: 20px;

  text-transform: uppercase;
}

.custom-dropdown-content .custom-dropdown-head .custom-dropdown-close {
  cursor: pointer;
}

.custom-dropdown-list {
  max-height: 450px;

  overflow: auto;
}

.show-dropdown {
  display: block;
}

.custom-dropdown-option {
  color: white;

  padding: 13px 15px;

  cursor: pointer;

  font-size: 13px;

  display: flex;

  gap: 10px;

  justify-content: space-between;

  align-items: center;

  border-top: 1px solid transparent;

  border-bottom: 1px solid #ffffff1c;
}

.custom-dropdown-option .league-name {
  display: flex;

  align-items: center;

  gap: 10px;
}

.custom-dropdown-option img {
  height: 16px;

  width: 16px;

  object-fit: contain;
}

.custom-dropdown-option .count {
  font-family: Roboto;

  font-weight: 700;

  font-size: 13px;

  display: flex;

  align-items: center;

  gap: 8px;
}

.custom-dropdown-option:hover,
.custom-dropdown-option.active {
  border-top: 1px solid #006590;

  border-bottom: 1px solid #006590;

  color: #00ff4b;

  background: linear-gradient(
    270deg,
    rgba(11, 13, 12, 0.32) 42.28%,
    rgba(22, 53, 89, 0.2) 50.82%
  );
}

.custom-dropdown-option:hover .count svg g,
.custom-dropdown-option.active .count svg g {
  opacity: 1;
}

.custom-dropdown-option:hover .count svg path,
.custom-dropdown-option.active .count svg path {
  fill: #00fffd;
}

.custom-dropdown-trigger::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 15px;

  width: 6px;

  height: 6px;

  border: solid #919191;

  border-width: 0 2px 2px 0;

  transform: translateY(-50%) rotate(45deg);

  pointer-events: none;
}

.custom-dropdown-trigger span {
  width: 120px;

  text-overflow: ellipsis;

  text-wrap: nowrap;

  overflow: hidden;

  white-space: nowrap;
}

@media (max-width: 576px) {
  .custom-dropdown-trigger {
    padding: 8px 20px;
  }

  .custom-dropdown-content {
    width: 100%;

    top: 45px;
  }
}

/* END: matches__filter-leagues */

.sport-loading {
  font-family: "Roboto";

  border-collapse: collapse;

  border: 1px solid #343940;

  width: 320px;

  text-align: center;

  padding: 12px;

  margin: 0 auto;

  color: white;

  right: -50%;

  position: relative;
}

@media (max-width: 767px) {
  .sport-loading {
    right: unset;

    position: static;
  }
}

.custom-dropdown-trigger {
  background-color: transparent;

  color: white;

  padding: 14px 15px;

  border-radius: 100px;

  font-size: 13px;

  cursor: pointer;

  border: none;

  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;
}

.custom-dropdown-trigger::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 38px;

  padding: 1px;

  background: linear-gradient(360deg, #005624 2%, #006d2e 47%, #005e27 100%);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask-composite: exclude;

  -webkit-mask-composite: xor;

  pointer-events: none;

  transition: background 0.3s ease;
}

.is-win {
  background: linear-gradient(180deg, #1f3644 0%, #00411d 100%);

  border-radius: 100px;
}

@media only screen and (max-width: 576px) {
  .main-grid-match a.odds-comp img {
    width: 55px !important;

    height: auto;

    object-fit: contain;
  }
}

@media only screen and (min-width: 480px) {
  .main-page .sports-bars ul li button {
    font-family: "Be Vietnam Pro", sans-serif;
  }
}

@media only screen and (max-width: 480px) {
  .gmd-match-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-match__status--normal text {
  color: #00ff4b;
}

.main-page .list-filter li a {
  font-family: "Raleway", sans-serif;
}

.main-page .list-filter li a .num {
  font-family: "Oswald", sans-serif;
}

.main-page .list-filter li a.active .num {
  background: #07eb66;
  color: #1a1f2b;
}
/* .gmd-match__odds {
  font-family: "Source Sans Pro";
} */
label.btn-livescore {
  border-radius: 25px;
  border: 1px solid #3a3a3a;
  background: #1b1d21;
  padding-inline: 15px;
  gap: 8px;
  width: auto !important;
  color: white;
}
label.btn-livescore.active span {
  color: #07eb66;
}
.main-page .sports-bars .btn-livescore {
  position: relative;
  width: 145px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
}
label.btn-livescore span {
  font-family: Raleway;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .gmd-match-footer.has-h2h_matches {
    grid-template-columns: 1fr 100px 1fr;
  }
  .gmd-match-date {
    margin-top: 4px;
  }
}