:root {
  --asp-body-cr: #0e1019;
  --asp-white: #fff;
  --asp-gray-fc: #f8f9fc;
  --asp-gray-f0: #e3e5f0;
  --asp-gray-0d: #e3e5f0;
  --asp-gray-f1: #f1f1f1;
  --asp-gray-f8: #f1f2f8;
  --asp-gray-63: #445463;
  --asp-gray-fc2: var(--asp-gray-fc);
  --asp-card-bg: #fff;
  --asp-card-cr: #0e1019;
  --asp-main: #16ae94;
  --asp-card-cr2: #445463;
  --asp-card-cr3: #5b5353;
  --asp-fill: #777;
  --asp-placeholder: #8a8f9e;
  --asp-bg: #f1f2f8;
  --asp-bg-2: #f1f2f8;
  --asp-cr-l: #fff;
  --asp-loser: var(--asp-placeholder);
  --asp-cr-d: var(--asp-card-cr);
  --asp-bg-d: #f1f1f1;
  --asp-hov-bg: var(--asp-card-cr);
  --asp-gradient: linear-gradient(#F8F9FC, #E3E5F0)
}

html.dark {
  --asp-body-cr: #bfc3d4;
  --asp-white: #191d2d;
  --asp-main: #39dbbf;
  --asp-hov-bg: #8b5cf6;
  --asp-gray-fc: #0e1019;
  --asp-gray-fc2: var(--asp-white);
  --asp-card-bg: #151825;
  --asp-gray-0d: var(--asp-white);
  --asp-gray-f8: #191D2D;
  --asp-gray-63: #bfc3d4;
  --asp-card-cr: #bfc3d4;
  --asp-card-cr2: #445463;
  --asp-card-cr3: #5b5353;
  --asp-fill: #777;
  --asp-placeholder: #BFC3D4;
  --asp-bg-2: var(--asp-gray-fc2);
  --asp-bg: #151825;
  --asp-cr-l: #131521;
  --asp-loser: rgba(255, 255, 255, 0.5);
  --asp-cr-d: #fff;
  --asp-bg-d: var(--asp-card-bg);
  --asp-gradient: linear-gradient(#0E1019, #191D2D)
}

*,
::after,
::before {
  box-sizing: border-box
}

@media(prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: smooth
  }
}

body {
  margin: 0;
  font-family: "Frutiger";
  line-height: 1.5;
  color: var(--asp-body-cr);
  background-color: var(--asp-gray-fc);
  overflow-x: hidden;
  font-weight: 700;
  font-size: 14px
}

h3,
h4,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2
}

h3 {
  font-size: calc(1.3rem + .6vw)
}

@media(min-width: 1200px) {
  h3 {
    font-size: 1.75rem
  }
}

h4 {
  font-size: calc(1.275rem + .3vw)
}

@media(min-width: 1200px) {
  h4 {
    font-size: 1.5rem
  }
}

h6 {
  font-size: 1rem
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

ul {
  padding-right: 2rem
}

ul {
  margin-top: 0;
  margin-bottom: 1rem
}

b {
  font-weight: bolder
}

a {
  color: #0d6efd;
  text-decoration: underline
}

a:hover {
  color: var(--asp-main);
}

.mdn-content a:hover {
  color: var(--asp-card-cr);
}

img,
svg {
  vertical-align: middle
}

svg {
  color: #707488
}

img,
figure,
iframe {
  max-width: 100%
}

img {
  height: auto;
  font-size: 0
}

/* Utility classes to mimic `dark:invert-0 invert` behavior */
.invert {
  filter: invert(1);
}

/* In dark mode, cancel inversion (equivalent to `dark:invert-0`) */
html.dark .dark\:invert-0 {
  filter: invert(0);
}

label {
  display: inline-block
}

input {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

[hidden] {
  display: none !important
}

.says,
.screen-reader {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden
}

.container {
  width: 1224px;
  max-width: 100%;
  padding: 20px 25px 0;
  margin: 0 auto
}

.post-content {
  margin-top: 15px;
}

.post-thumbnail {
  border-bottom: 1px solid var(--asp-gray-f8);
}

.post-thumbnail img {
  display: block;
  width: 524px;
  height: 370px;
  margin: 0 auto;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 5%;
}

.row {
  --bs-gutter-x: 1.3rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(- 1*var(--bs-gutter-y));
  margin-left: calc(- .5*var(--bs-gutter-x));
  margin-right: calc(- .5*var(--bs-gutter-x))
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--bs-gutter-x)*.5);
  padding-right: calc(var(--bs-gutter-x)*.5);
  margin-top: var(--bs-gutter-y)
}

.col {
  flex: 1 0 0%
}

.col-12 {
  flex: 0 0 auto;
  width: 100%
}

.col-6 {
  flex: 0 0 auto;
  width: 50%
}

@media(min-width: 576px) {

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
}

@media(min-width: 768px) {
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
}

@media(min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
}

.d-fxac {
  display: flex;
  align-items: center
}

.d-fxjc {
  display: flex;
  justify-content: center;
}

.d-in-fxc {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.d-infx {
  display: inline-flex;
  align-items: center
}

.d-fxc {
  display: flex;
  align-items: center;
  justify-content: center
}

.d-flex {
  display: flex !important
}

.d-in-fx {
  display: inline-flex !important
}

.d-none {
  display: none !important
}

.jfy-cen {
  justify-content: center !important
}

.pt-2 {
  padding-top: .5rem !important
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-family: "Frutiger";
  font-weight: 700
}

button {
  outline: 0
}

.padding-0 {
  padding: 0 !important
}

ul {
  padding: 0;
  margin: 0;
  list-style: none
}

a {
  text-decoration: none !important
}

.big_container {
  width: 1200px;
  max-width: 100%;
  padding: 0 25px;
  margin: 0 auto
}

@media(max-width: 640px) {
  .big_container {
    width: 1224px;
    max-width: 100%;
    padding: 5px 5px 0;
    margin: 0 auto
  }
}

.asp-btn {
  --btn-cr: var(--asp-body-cr);
  --btn-bg: var(--asp-bg-2);
  --btn-br: transparent;
  --btn-hv-cr: var(--asp-cr-l);
  --btn-hv-bg: var(--asp-bg-2);
  --btn-hv-br: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  border: 1px solid var(--btn-br);
  background-color: var(--btn-bg);
  color: var(--btn-cr);
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  cursor: pointer
}

.asp-btn:hover {
  color: var(--btn-hv-cr);
  background-color: var(--btn-hv-bg);
  border-color: var(--btn-hv-br)
}

.asp-btn-prand {
  --btn-cr: var(--asp-cr-l);
  --btn-bg: var(--asp-main)
}

header {
  padding: 15px 0;
  background: var(--asp-card-bg);
  margin-bottom: 30px;
  border-bottom: 1px solid var(--asp-gray-f8);
  box-shadow: 0 4px 4px 0 rgb(0 0 0 / .02)
}

.asp-header {
  display: flex;
  align-content: center
}

.asp-header .logo {
  flex: 0 0 auto
}

.asp-header .SiteName {
  font-weight: 700;
  font-size: 27px;
  color: var(--asp-main)
}

.asp-header .main-menu {
  margin: 10px auto 0
}

.menu-ul {
  display: flex;
  align-content: center
}

.menu-ul li {
  margin-left: 36px
}

.menu-ul li:last-child {
  margin: 0
}

.menu-ul li a {
  font-size: 14px;
  color: var(--asp-body-cr)
}

.drop-toggle,
.close-dropdown,
.svg-btn {
  cursor: pointer
}

.menu-ul li a:hover,
.menu-ul li.current-menu a,
.drop-toggle.active svg,
.svg-btn.active svg {
  color: var(--asp-main) !important
}

.header-items-wrap {
  display: flex;
  align-items: center
}

.header-items-wrap .setting-wrap {
  margin: 0 10px
}

.asp-search {
  position: relative
}

.asp-search .search-form {
  position: relative;
  overflow: hidden;
  width: 210px
}

.asp-search .search-form input {
  width: 100%;
  background: var(--asp-bg-2);
  border-radius: 30px;
  padding: 9px 20px;
  padding-right: 52px;
  outline: none !important;
  box-shadow: none !important;
  transition: all .3s;
  border: 1px solid #fff0;
  height: 40px;
  color: var(--asp-body-cr)
}

.asp-search .search-form input:focus {
  border-color: #303651
}

.search-form input::placeholder,
.search-form input::-webkit-input-placeholder,
.search-form input::-moz-placeholder,
.search-form input:-ms-input-placeholder,
.search-form input::-ms-input-placeholder {
  color: #707488
}

.asp-search .search-form svg {
  position: absolute;
  right: 20px;
  top: 50%;
  color: #707488;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.search-form input {
  padding-left: 45px
}

.drop-item {
  position: relative
}

.drop-item-wrap,
.asp-drop-wrap {
  position: absolute;
  border-radius: 10px;
  background: var(--asp-white);
  -webkit-transition: all .3s;
  transition: all .3s;
  margin-top: -5px;
  z-index: -10;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 5px 20px rgb(0 0 0 / .03);
  padding: 25px 18px 8px;
  top: calc(100% + 4px);
  right: -235%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  width: 323px
}

.drop-item-wrap.active,
.asp-drop-wrap.active {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
  z-index: 50
}

.set-btn {
  /* --btn-bg: #7B5EA7; */
  --btn-cr: #fff;
  /* --btn-bg: #e3e5f0; */
  width: 48px;
  height: 38px;
  border-radius: 50px
}

.set-btn svg {
  color: var(--asp-card-cr)
}

.remove-champ svg,
.reorder-champ svg {
  color: #000;
  margin-left: 5px;
  width: 18px;
  height: 18px
}

.set-btn.active,
.set-btn:hover {
  /* background: #fff */
}



.set-item {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid #303651
}

.set-item:last-child {
  border: 0;
  padding: 0
}

.set-item .title {
  font-size: 12px;
  color: #707488;
  margin-bottom: 18px
}

.set-item .title a {
  font-size: 12px;
  color: #707488;
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-item .title a svg {
  margin-left: 8px
}

.set-item .title a path {
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-item .title a:hover {
  color: var(--asp-main)
}

.set-item .title a:hover path {
  fill: var(--asp-main)
}

.set-chbx {
  position: relative;
  margin-bottom: 10px
}

.set-chbx input {
  position: absolute;
  z-index: -100;
  opacity: 0;
  visibility: hidden
}

.set-chbx label {
  cursor: pointer;
  display: flex;
  align-items: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 14px;
  font-weight: 700;
  color: var(--asp-card-cr);
  padding: 14px 20px 12px;
  border-radius: 10px;
  background: var(--asp-card-bg);
  border: 1px solid var(--asp-gray-f8)
}

.set-chbx label span {
  color: inherit;
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-chbx label b {
  font-weight: 700;
  margin-right: auto;
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-chbx input:checked+label {
  background: rgb(57 219 191 / .3);
  border-color: var(--asp-main)
}

.set-chbx input:checked+label span {
  color: var(--asp-main)
}

.set-chbx input:checked+label b {
  color: #fff
}

.set-link {
  display: flex;
  align-items: center;
  margin-bottom: 12px
}

.set-link h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--asp-card-cr);
  margin: 0;
  padding: 0;
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-link .action {
  margin-right: auto
}

.set-link .action span {
  margin-left: 16px;
  font-size: 14px;
  color: var(--asp-main);
  font-weight: 400
}

.set-link .action svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.set-link .action path {
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-link:hover h6 {
  color: var(--asp-main)
}

.set-item .set-link:last-child {
  margin: 0
}

.set-field {
  display: flex;
  align-items: center
}

.set-field h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--asp-card-cr);
  margin: 0;
  padding: 0
}

.set-field input {
  position: absolute;
  z-index: -100;
  opacity: 0;
  visibility: hidden
}

.set-field .inpTlabel {
  margin-right: auto;
  position: relative;
  width: 38px;
  height: 15px;
  border-radius: 10px;
  background: #e3e5f0;
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer
}

.set-field .inpTlabel:before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 100%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #bfc3d4;
  -webkit-transition: all .3s;
  transition: all .3s
}

.set-field input:checked+label {
  background: rgb(57 219 191 / .4)
}

.set-field input:checked+label:before {
  margin-left: 19px;
  background: var(--asp-main)
}

.radius-btn {
  height: 38px;
  border-radius: 50px;
  outline: none !important;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all .3s;
  transition: all .3s
}

.drop-item-wrap.submenu {
  top: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  width: 157px;
  padding: 10px 20px
}

.drop-item-wrap.submenu li {
  margin: 18px 0
}

.drop-item-wrap.submenu li a {
  color: var(--asp-card-cr) !important
}

.drop-item-wrap.submenu li a:hover {
  color: var(--asp-main) !important
}

.asp-plyr-itm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: var(--asp-card-bg);
  border: 1px solid var(--asp-bg-d);
  margin-bottom: 10px;
  padding: 12px 16px;
  position: relative
}

.asp-plyr-itm .player-avatar-wrapper {
  flex-shrink: 0;
  margin-left: 5px;
}

.asp-plyr-itm .player-avatar-wrapper .player-avatar {
  width: 36px;
  height: 36px;
}

/* Hide substitute avatars on small screens */
@media (max-width: 640px) {
  .asp-plyr-itm .player-avatar-wrapper {
    display: none;
  }
}

.asp-plyr-itm .player {
  display: flex;
  align-items: center;
  gap: 10px
}

.asp-plyr-itm .player .number {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--asp-card-bg);
  border: 1px solid #707488;
  padding: 7px;
  color: var(--asp-placeholder);
  font-size: 13px;
  text-align: center
}

.asp-plyr-itm .player h5 {
  color: var(--asp-body-cr);
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  transition: all .3s
}

.asp-plyr-itm .player span {
  color: #707488;
  font-size: 11px;
  font-weight: 400
}

footer {
  padding: 50px 0;
  margin-top: 40px
}

.footer-about {
  margin-bottom: 40px;
  width: 480px;
  max-width: 100%
}

.footer-about .footer-logo {
  margin-bottom: 24px;
  display: inline-block
}

.footer-about p {
  font-size: 12px;
  line-height: 24px;
  margin-bottom: 24px;
  font-weight: 300;
  color: var(--asp-card-cr)
}

.footer-menu {
  margin-bottom: 30px
}

.footer-menu h3 {
  margin-top: 0;
  padding: 0;
  margin-bottom: 20px;
  color: var(--asp-main);
  font-size: 16px;
  font-weight: 700
}

.footer-menu li {
  margin-bottom: 12px
}

.footer-menu li:last-child {
  margin: 0
}

.footer-menu li a {
  line-height: 27px;
  color: var(--asp-card-cr);
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: 400
}

.footer-menu li a:hover {
  color: var(--asp-main)
}

.footer-bottom {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--asp-gray-0d)
}

.footer-bottom .social-media {
  margin-right: auto
}

.footer-bottom .copyrights a {
  color: var(--asp-main);
  font-size: 15px
}

.social-media a {
  margin-left: 24px
}

.social-media a:last-child {
  margin: 0
}

.social-media a path,
.social-media a rect {
  -webkit-transition: all .3s;
  transition: all .3s
}

.social-media a:hover path,
.social-media a:hover rect {
  fill: var(--asp-main)
}

.remove-hidden {
  color: var(--asp-main) !important;
  font-size: 12px;
  transition: all .3s
}

.remove-hidden svg {
  margin-left: 10px
}

.champ-settings-dropdown-wrap {
  margin-right: 24px
}

.champ-set-btn rect {
  -webkit-transition: all .3s;
  transition: all .3s
}

.champ-set-btn.active rect {
  fill: var(--asp-main)
}

.chmp-settings {
  top: 20px;
  /* left: -20px; */
  min-width: 180px;
  padding: 5px 15px;
  background: var(--asp-gray-0d);
  width: auto;
}

.chmp-settings div {
  padding: 7px 0;
  border-bottom: 1px solid #2d3450
}

.chmp-settings div:last-child {
  border: 0
}

.chmp-settings a {
  display: block;
  padding: 6px 0;
  font-size: 12px;
  -webkit-transition: all .3s;
  transition: all .3s;
  color: var(--asp-card-cr)
}

.chmp-settings a:hover {
  color: var(--asp-main)
}

/* Competitions grid (standings entry page) */
.competitions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

@media(min-width: 768px) {
  .competitions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(min-width: 1200px) {
  .competitions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Card list layout on small screens */
@media(max-width: 640px) {
  .competitions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .competition-card__inner {
    flex-direction: row;
    justify-content: flex-start;
    text-align: right;
    padding: 16px;
    min-height: auto;
    gap: 14px;
  }

  .competition-card__logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .competition-card__title {
    font-size: 15px;
    text-align: right;
  }
}

.competition-card {
  display: block;
  background: var(--asp-white);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.competition-card:hover {
  transform: translateY(-2px);
  border-color: var(--asp-main);
}

.competition-card__inner {
  padding: 12px 14px;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: right;
}

.competition-card__logo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.competition-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .18s ease;
}

.competition-card:hover .competition-card__logo img {
  transform: scale(1.08);
}

.competition-card__title {
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  color: var(--asp-cr-d);
}

/* Desktop layout: square cards with centered logo and title */
@media(min-width: 641px) {
  .standings-archive .competitions-grid .competition-card__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 16px;
    gap: 10px;
  }

  .standings-archive .competitions-grid .competition-card__logo {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
  }

  .standings-archive .competitions-grid .competition-card__title {
    font-size: 15px;
  }
}

/* .chmp-settings a.remove-champ {
    color: #fc4d4d
} */

.drop-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px
}

.drop-header h6 {
  font-size: 18px;
  font-weight: 700;
  color: var(--asp-card-cr);
  margin: 0;
  padding: 0
}

.drop-header .close-dropdown {
  margin-right: auto;
  margin-left: 8px
}

.drop-header .close-dropdown path {
  -webkit-transition: all .3s;
  transition: all .3s
}

.filter-item-wrap {
  margin-bottom: 20px
}

.filter-item-wrap .title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--asp-card-cr)
}

.filter-item-wrap .filter-group {
  display: flex;
  align-items: center
}

.ftr-rdio {
  position: relative;
  margin-left: 7px;
  flex: 1
}

.ftr-rdio:first-child {
  width: 78px;
  flex: 0 0 auto
}

.ftr-rdio:last-child {
  margin: 0
}

.ftr-rdio input {
  position: absolute;
  z-index: -100;
  opacity: 0;
  visibility: hidden
}

.ftr-rdio label {
  width: 100%;
  height: 40px;
  border-radius: 50px;
  background: var(--asp-bg-d);
  font-size: 14px;
  color: var(--asp-card-cr);
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.ftr-rdio input:checked+label {
  background: var(--asp-cr-d);
  color: var(--asp-cr-l)
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--asp-main);
  height: 48px;
  color: var(--asp-cr-l);
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 18px;
  padding-top: 4px;
  margin-top: 15px
}

.filter-button:hover {
  color: var(--asp-cr-l);
  background: var(--asp-hov-bg)
}

.page-breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb {
  background: var(--asp-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.2s ease;
}

.breadcrumb:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.post-title,
.breadcrumb h1 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--asp-main);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-only {
  display: none;
}

.post-meta {
  color: #707488;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-path {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  color: #707488;
}

.breadcrumb-path a {
  color: #707488;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-path a:hover {
  color: var(--asp-main);
}

.breadcrumb-path i {
  font-style: normal;
  color: #a0a0a0;
  margin: 0 8px;
  font-size: 11px;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .breadcrumb {
    padding: 16px 18px;
    border-radius: 0 0 12px 12px;
    border-bottom: 1px solid var(--asp-main);
  }

  .breadcrumb h1 {
    font-size: 19px;
    margin-bottom: 10px;
  }

  .breadcrumb-path {
    font-size: 12px;
  }

  .breadcrumb-path i {
    margin: 0 6px;
  }
}

.inner-news-content {
  background: var(--asp-white);
  border: 1px solid var(--asp-gray-f8);
  border-radius: 25px;
  padding: 27px 24px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.mach-tabs {
  display: flex;
  align-items: center;
  justify-content: center
}

.mach-tabs a {
  margin: 0 18px;
  transition: all .3s;
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: var(--asp-placeholder);
  padding-bottom: 20px
}

.mach-tabs a:hover {
  color: var(--asp-main)
}

.mach-tabs a:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  border-radius: 5px;
  background: var(--asp-main);
  transition: all .3s
}

.mach-tabs a.active {
  color: var(--asp-main)
}

.mach-tabs a.active:before {
  width: 100%
}


.block-title {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--asp-card-cr)
}

.pd-15-row {
  margin: 0 -7.5px
}

.pd-15-row>div {
  padding: 0 0 0 7.5px;
  margin-bottom: 15px
}

.news-item {
  background: var(--asp-gray-0d);
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 146px;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--asp-card-bg);
  color: var(--asp-card-cr);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--asp-gray-f8);
}

.pagination a:hover {
  background: var(--asp-main);
  color: var(--asp-cr-l);
  border-color: var(--asp-main);
}

.pagination .current {
  background: var(--asp-main);
  color: var(--asp-cr-l);
  border-color: var(--asp-main);
}

.lg-news .news-item {
  background: var(--asp-gradient)
}

.news-item .news-img {
  overflow: hidden;
  height: 180px
}

.news-item img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform .35s ease-out;
}

.news-item:hover img {
  transform: scale(1.12);
}

.news-item h3 {
  margin: 0;
  font-weight: 700;
  color: #0d6efd;
  transition: all .3s;
  font-size: 13px;
  line-height: 26px
}

.news-item .news-date {
  padding: 0 8px;
  color: #707488;
  font-size: 10px;
  font-weight: 700;
  margin-top: 8px
}

.news-item .news-date svg {
  margin-left: 11px
}

/* .news-item:hover h3 {
  color: var(--asp-gray-63)
} */

.lg-news .news-img {
  width: 36%;
  height: 146px
}

.lg-news .news-img,
.lg-news .news-img img {
  margin: 0;
  border-radius: 0 10px 10px 0
}

.lg-news .mdn-content {
  padding: 20px 24px;
  width: 64%
}

.lg-news .news-item h3 {
  font-size: 14px
}

.md-news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 15px;
}

.md-news .news-item {
  display: block !important;
  width: 100%;
  height: 320px;
  /* background: var(--asp-gradient); */
}

.md-news .news-img {
  border-radius: 10px 10px 0 0
}

.md-news .mdn-content {
  padding: 20px;
  height: 90px
}

.md-news .mdn-content {
  padding: 10px;
  height: 90px;
}

.md-news .news-content {
  line-height: 27px !important;
  font-size: 13px !important;
}

.md-news .mdn-content h3 {
  line-height: 20px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .md-news {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 15px !important;
  }

  .md-news .mdn-content {
    width: 66% !important;
    padding: 0px 5px !important;
    height: auto !important;
  }

  .md-news .news-item {
    gap: 10px !important;
    height: 133px !important;
    display: flex !important;
  }

  .md-news .news-item h3 {
    font-weight: 600 !important;
    line-height: 18px !important;
    padding-top: 10px !important;
  }

  .md-news .news-content {
    line-height: 22px !important;
    font-size: 13px !important;
  }

  .md-news .news-date {
    padding: 0 !important;
    width: 100% !important;
    font-weight: 400 !important;
    margin-top: 5px !important;
  }

  .md-news .news-img {
    width: 166px !important;
    height: 133px !important;
    border-radius: 0 10px 10px 0 !important
  }

  .md-news .news-img img {
    display: block;
  }

  /* border-radius: 0 10px 0 10px !important; */


  .md-news .news-img img {
    height: 100% !important;
  }
}

.champs-item-wrap {
  margin-bottom: 30px
}

.tab-content-item {
  display: none
}

.tab-content-item.active {
  display: initial
}

.single-image {
  width: 100%;
  border-radius: 12px 12px 0 0
}

.news-meta {
  display: flex;
  align-items: center;
  margin-bottom: 28px
}

.news-meta .news-date {
  color: #707488;
  font-size: 12px
}

.news-meta .news-date svg {
  margin-left: 10px
}

.news-content {
  color: var(--asp-card-cr);
  font-weight: 400;
  font-size: 13px;
  line-height: 25px;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-content {
  color: var(--asp-card-cr);
  font-weight: 400;
  font-size: 13px;
  line-height: 25px;
  margin-bottom: 15px;
}

.news-content iframe {
  max-width: 100%;
  display: table;
  margin-top: 12px;
  border-radius: 8px;
  background: var(--asp-gray-0d)
}

.video-serv {
  margin-top: 15px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 5px;
  clear: both;
  display: flex;
  justify-content: space-between
}

.video-serv a,
.video-serv>span {
  cursor: pointer;
  background: var(--asp-main);
  border-radius: 4px;
  color: #fff !important;
  font-weight: 700;
  padding: 5px 15px;
  font-size: 16px;
  flex: 1;
  text-align: center;
  margin: 3px
}

.video-serv a:focus,
.video-serv a:hover,
.video-serv>span:hover {
  color: #fff;
  background: var(--asp-hov-bg)
}

.server-body {
  margin-bottom: 11px;
  width: 100%;
  overflow: hidden
}

.server-body iframe {
  max-width: 100%;
  width: 100%
}

.news-content blockquote {
  padding: 30px 24px 18px;
  border-radius: 10px;
  background: var(--asp-gray-0d);
  margin: 18px 0;
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: var(--asp-card-cr)
}

.news-content blockquote svg {
  position: absolute;
  right: 24px;
  top: -6px;
  z-index: 5
}

.news-content blockquote span {
  font-weight: 400;
  color: #707488;
  font-size: 10px;
  margin-top: 10px;
  display: block;
  line-height: initial
}

.news-content img {
  max-width: 95%
}

.related-news {
  margin-bottom: 30px
}

.related-news .block-title {
  color: var(--asp-main)
}

.inline-matches .block-title {
  color: var(--asp-main)
}

.pf-hd-wrap {
  border-radius: 30px;
  margin-bottom: 35px;
  position: relative;
  min-height: 300px;
  padding: 30px 60px 0 30px;
  overflow: hidden
}

.pf-hd-wrap.club,
.pf-hd-wrap.match {
  display: flex;
  padding: 0 10px;
  align-items: flex-end;
  justify-content: center
}

.club-logo {
  text-align: center
}

.club-logo h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  color: var(--asp-cr-d)
}

.inline-tabs-wrapper {
  display: flex;
  justify-content: center
}

.inlin-tb-items {
  margin-bottom: 20px;
  background: var(--asp-gray-0d);
  border-radius: 50px
}

.inlin-tb-items .in-tb-itm {
  height: 38px;
  padding: 0 22px;
  border-radius: 50px;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 14px;
  font-weight: 700;
  color: #707488;
  min-width: 130px;
  flex: 0 0 auto
}

.inlin-tb-items .in-tb-itm:hover {
  color: var(--asp-card-cr)
}

.inlin-tb-items .in-tb-itm.active {
  color: var(--asp-cr-l);
  background: var(--asp-main)
}

.mtop-title {
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--asp-main);
  margin: auto
}

.week-title {
  background: rgb(90 131 255 / .15);
  border-radius: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #5a83ff;
  text-align: center;
  margin: 10px 0
}

.match-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 44px
}

.match-card .team-item {
  text-align: center;
  position: relative
}

.match-card .team-item h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--asp-cr-d);
  padding: 0;
  margin-top: 0;
  margin-bottom: 20px
}

.match-card .team-item h3 svg {
  margin-left: 6px;
  margin-top: -2px
}

.match-card .team-item .img {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto
}

.match-card .team-item .img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.match-card .team-item:before {
  display: none;
  content: "";
  position: absolute;
  bottom: -42px;
  width: 72px;
  height: 4px;
  background: #000;
  opacity: .5;
  -webkit-filter: blur(4px);
  filter: blur(4px);
  right: 50%;
  -webkit-transform: translate(50%);
  transform: translate(50%)
}

.match-details {
  text-align: center;
  margin: 20px 40px 0;
  flex: 0 0 auto
}

.match-details .time {
  font-size: 15px;
  font-weight: 400;
  color: var(--asp-cr-d)
}

.match-details .timer {
  color: var(--asp-cr-d);
  width: 100px;
  margin-top: 6px;
  font-size: 12px;
  height: 18px;
  overflow: hidden
}

.full-match .match-details {
  margin: 40px 30px 0
}

.full-match .match-details span {
  color: var(--asp-cr-d);
  width: 76px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: #fff0;
  font-size: 13px;
  margin: 0 auto;
  padding-top: 2px;
  flex: 0 0 auto
}

.full-match .main-result {
  display: flex;
  align-items: center;
  width: 142px
}

.full-match .match-details b {
  font-size: 24px;
  font-weight: 700;
  color: var(--asp-card-cr)
}

.full-match .match-details b.win {
  color: var(--asp-main)
}

.mach-tabs.tiny a .live {
  position: absolute;
  width: 26px;
  height: 12px;
  border-radius: 10px;
  background: #ff3131;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -6px;
  left: -20px;
  font-size: 10px;
  color: #fff;
  padding-top: 1px
}

.mach-tabs.tiny a {
  margin: 0 11.9px
}

.small-container {
  max-width: 100%;
  margin: 0 auto
}

.match-block {
  margin-bottom: 28px
}

.match-block .sec-title {
  font-size: 14px;
  margin-bottom: 14px;
  color: #707488;
  justify-content: center;
}

.mtinfo {
  display: flex;
  align-items: center;
  background: var(--asp-card-bg);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--asp-card-cr);
  margin-bottom: 7px
}

.mtinfo .title {
  width: 180px
}

.linup-pitem {
  text-align: center;
  width: 60px;
  white-space: nowrap
}

.pshert-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-block
}

.pshert-wrap .sphert {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.pshert-wrap .pnum {
  position: absolute;
  top: 14px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  font-size: 18px
}

.linup-pitem .pname h3 {
  font-size: 12px;
  color: #fff;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  background: #44546396;
  width: auto;
  padding: 2px 0px;
  width: fit-content;
  margin: .5rem auto;
  min-width: 58px;
}

.lineup-wrap {
  position: relative;
  margin-bottom: 32px
}

.lineup-wrap .lineup-bg {
  width: 100%
}

.lineup-wrapper {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 24px 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.lineup-row {
  width: 100%;
  padding: 10px 8%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center
}

.lineup-row.m-t-10 {
  margin-top: -10%
}

.lineup-row.s {
  top: 4%
}

.lineup-row.f {
  top: 19%
}

.mxw-25 {
  max-width: 25%
}

.lineup-row.m {
  top: 36%
}

.lineup-row.d {
  top: 57%
}

.lineup-row.g {
  bottom: 10%
}

.lineup-row.lineup-custom-row {
  bottom: 5%
}

.lineup-row .row {
  width: 95%;
}

.lineup-row .col-2-5 {
  width: 20%;
}

.player-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

@media (max-width: 640px) {
  .player-avatar {
    width: 44px;
    height: 44px;
  }

  .lineup-row .row {
    width: 86%;
  }
}

@media (max-width: 480px) {
  .player-avatar {
    width: 40px;
    height: 40px;
  }

  .lineup-row .row {
    width: 83%;
  }
}

.lineup-custom-row {
  display: flex;
  align-items: center;
  padding: 10px 16%
}

.lineup-custom-row .lineup-text {
  margin-right: auto;
  border-radius: 50px;
  background: #fff;
  padding: 0 18px;
  color: #131521;
  font-size: 18px;
  font-weight: 700;
  padding-top: 2px
}

.hint-item {
  display: flex;
  align-items: center;
  background: #9d0000;
  color: #fff;
  padding: 8px 12px 6px;
  border-radius: 4px;
  border: 1px solid #ff5a5a;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px
}

.hint-item:hover {
  background: maroon;
  color: #fff !important
}

.asp-popup {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -9999;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgb(19 21 33 / .9);
  overflow-y: auto;
  padding: 30px 20px
}

.popup-content {
  transition: all .5s;
  margin-top: 0;
  max-width: 100%;
  background: var(--asp-white);
  position: relative;
  border-radius: 10px;
  padding: 30px
}

.close-popup {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  top: 35px;
  left: 28px;
  text-align: center
}

.close-popup:hover path {
  fill: #fc4d4d
}

.asp-popup.active {
  opacity: 1;
  visibility: visible;
  z-index: 9999
}

.asp-popup.active .popup-content {
  margin-top: 0
}

.popup-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--asp-main)
}

.popup-body {
  max-height: 290px;
  padding-top: 30px
}

.popup-body>*:last-child {
  margin-bottom: 110px
}

.mobile-header {
  display: none;
  margin-bottom: 26px;
  padding: 20px 0 0
}

.mobile-header .mhead-wrap {
  display: flex;
  align-items: center
}

.inner-page-title {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--asp-card-cr)
}

.mobile-back {
  width: 30px;
  height: 30px;
  margin-left: 10px
}

.action-bar {
  position: fixed;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: var(--asp-white);
  align-items: center;
  justify-content: center;
  padding: 15px;
  z-index: 55
}

.action-bar .acbItem {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #707488;
  font-size: 10px;
  font-weight: 700;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 0 auto
}

.action-bar .acbItem .icon {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px
}

.action-bar .acbItem path {
  -webkit-transition: all .3s;
  transition: all .3s
}

.action-bar .acbItem.active,
.action-bar .acbItem:hover {
  color: var(--asp-main)
}

.action-bar .acbItem.active path,
.action-bar .acbItem:hover path {
  fill: var(--asp-main)
}

.champ-set-btn #COLOR_black {
  display: none
}

.single-title {
  color: var(--asp-card-cr);
  font-size: 18px;
  font-weight: 700;
  padding: 24px 20px;
  width: 100%;
  background: var(--asp-white);
  border-radius: 0 0 12px 12px;
  margin-bottom: 30px;
  line-height: 30px
}

.active-match .match-details {
  /* keep block for future overrides */
  margin-top: 0;
}

/* margin-top: 50px */

.active-match .match-details .main-result {
  display: flex;
  align-items: center
}

.active-match .match-details .main-result b {
  font-size: 24px;
  font-weight: 700;
  color: var(--asp-card-cr)
}

.active-match .match-details .main-result b.win {
  color: var(--asp-main)
}

.match-block .player-block-item .player h5 {
  font-size: 13px
}

.match-block .player-block-item .player span {
  font-size: 11px;
  display: block;
  margin-top: 5px
}

.inner-sec-title {
  margin-bottom: 12px;
  min-height: 24px;
  font-size: 18px;
  color: var(--asp-main);
  font-weight: 700
}

.dync-area-wrap {
  position: relative;
  min-height: 300px
}

.dync-area-wrap .pf-hd-wrap.match {
  background-size: cover;
  border-radius: 10px
}

.dync-area-wrap .small-container {
  width: 100%
}

.svg-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.small-container {
  position: relative;
  min-height: 300px
}

.result-status.live-match-status {
  top: auto;
  bottom: -18px;
  font-weight: 700
}

.match-card .result-status.live-match-status {
  bottom: -28px;
  font-size: 12px
}

.inline-loader {
  display: flex;
  align-items: center;
  justify-content: center
}

.inline-loader img {
  width: 60px;
  margin-bottom: 15px;
  height: auto
}

.pf-hd-wrap.mini {
  justify-content: initial;
  padding: 30px
}

.pf-hd-wrap.mini .club-logo {
  margin-bottom: 0;
  display: flex;
  align-items: center
}

.pf-hd-wrap.mini .club-logo img {
  margin-left: 24px;
  width: 60px;
  height: 60px;
  object-fit: cover
}

.pf-hd-wrap.mini {
  min-height: 116px
}

.pf-hd-wrap.mini .mach-tabs {
  position: absolute;
  bottom: 0;
  right: 96px
}

.hide-dark {
  display: none
}

.hide-light {
  display: initial
}

.select_row {
  background: rgb(57 219 191 / .3) !important;
  border-color: var(--asp-main) !important
}

ins.adsbygoogle a {
  display: none !important
}

ins.adsbygoogle[data-ad-status="unfilled"] a {
  display: block
}

.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important
}

.stat-goal {
  background-color: #ffb300;
  border-radius: 25%;
  padding: 5px 10px;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  text-align: center;
  min-width: 30px
}

.asp-scrx {
  overflow-x: auto;
  padding-top: 10px
}

.aspi_tabs_content {
  width: 100%
}

.champ-wrap {
  margin-bottom: 20px
}

.sec-title {
  padding: 0 15px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.sec-title h1,
h3 {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700
}

.sec-title .sec-action {
  flex: 0 0 auto
}

.sec-title .sec-action .remove:hover path {
  fill: #fc4d4d
}

.sec-title.tiny {
  padding: 0 8px;
  margin-bottom: 10px;
  margin-top: -4px
}

.sec-title.tiny h3 {
  font-size: 12px;
  color: #707488
}

.champ-wrap.hid-champs h3 {
  color: #707488
}

.champ-wrap.important-matches h1,
h3 {
  color: var(--asp-main)
}

.champ-wrap.title-area {
  margin: 0
}

.champ-wrap.title-area h3 {
  color: var(--asp-main)
}

.matches-wrap {
  margin-bottom: 10px
}

.matches-wrap .header {
  border-radius: 10px;
  background: var(--asp-gray-0d);
  padding: 9px 10px 7px 20px;
  margin-bottom: 3px;
  display: flex;
  align-items: center
}

.matches-wrap.wide .header {
  background: 0;
  padding: 0
}

.matches-wrap .header .champ-actions {
  margin-right: auto;
  display: flex;
  align-items: center
}

.matches-wrap .header .champ-title {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--asp-card-cr);
  transition: all .3s;
  gap: 10px
}

.matches-wrap .header .champ-title b {
  font-weight: 700
}

.matches-wrap .header .champ-title .img {
  width: 16px
}

.matches-wrap .header .champ-title:hover {
  color: var(--asp-main)
}

.chm-loop {
  display: flex;
  flex-direction: column
}

.chm-loop>.live-match {
  order: -1
}

.scrollable-matches {
  overflow: hidden
}

.inline-match {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-radius: 10px;
  background: var(--asp-card-bg);
  margin-bottom: 5px;
  justify-content: center;
  padding: 18px;
  position: relative;
  flex-wrap: wrap
}

.inline-match .match-col {
  flex: 1
}

.inline-match .mt-team {
  color: var(--asp-card-cr);
  font-size: 13px;
  display: inline-flex;
  gap: 10px;
  align-items: center
}

.mt-team b {
  font-weight: 700
}

.mt-team .img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  text-align: center
}

.mt-team img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.inline-match .teamA {
  text-align: left
}

.inline-match .result-wrap {
  width: 62px;
  height: 20px;
  border-radius: 50px;
  background: var(--asp-gray-fc2);
  font-size: 12px;
  font-weight: 700;
  color: var(--asp-card-cr) !important;
  margin: 0 15px;
  padding-top: 4px;
  position: relative
}

.inline-match .result-wrap b {
  font-weight: 700;
  display: flex;
  margin-bottom: 2px
}

.inline-match .result-wrap .live {
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  font-size: 10px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: calc(100% - 2px);
  background: #ff3131;
  color: #fff;
  font-weight: 400;
  height: 14px;
  border-radius: 10px
}

.inline-match .penalties-wrp {
  margin-top: 22px
}

.result-status {
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  top: -20px;
  font-size: 10px;
  font-weight: 400;
  color: var(--asp-card-cr);
  white-space: nowrap
}

.inline-match.with-result .result-wrap {
  font-size: 14px;
  font-weight: 700;
  align-items: center
}

.inline-match.with-result .result-wrap i {
  margin: 0 4px;
  font-style: normal;
  color: #445463
}

.inline-match.with-result .result-wrap .winner {
  color: var(--asp-main)
}

.inline-match.with-result .result-wrap .loser {
  color: var(--asp-loser)
}

.inline-match.active-match .m-t-item {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.inline-match.active-match .m-t-item .mt-team,
.inline-match.active-match .m-t-item a {
  margin-left: 25px
}

.inline-match.active-match .m-t-item.teamB {
  justify-content: flex-start
}

.inline-match.active-match .m-t-item.teamB .mt-team,
.inline-match.active-match .m-t-item.teamB a {
  margin-right: 25px;
  margin-left: 0
}

.inline-match.active-match .m-t-item .mt-team {
  flex-wrap: wrap
}

.inline-match.active-match .m-t-item b {
  width: 100%;
  display: inline-block;
  text-align: center;
  order: 2;
  font-size: 10px
}

.inline-match.active-match .m-t-item .img {
  margin: 0 auto !important;
  width: 34px;
  height: 34px
}

.team-result {
  font-size: 20px;
  color: var(--asp-gray-63)
}

.team-result.loser {
  color: var(--asp-loser)
}

.team-result.winner {
  color: var(--asp-main)
}

.mt-filter {
  margin-right: 20px
}

.filter-toggle path {
  -webkit-transition: all .3s;
  transition: all .3s
}

.filter-toggle.active path {
  fill: var(--asp-main)
}

.mt-d-filter {
  display: flex;
  align-items: center
}

#asp-picker-toggle {
  margin-right: 10px
}

.asp-dftr .asp-nxpv {
  width: 24px;
  height: 24px;
  cursor: pointer
}

.asp-dftr .asp-nxpv svg {
  -webkit-transition: all .3s;
  transition: all .3s;
  color: var(--asp-card-cr)
}

.asp-dftr .asp-nxpv:hover svg {
  color: var(--asp-main)
}

.asp-dftr .asp-nxpv.next-date svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.mt-d-filter #asp_date_view {
  color: var(--asp-card-cr);
  font-size: 12px;
  margin: 0 4px;
  margin-top: 2px;
  min-width: 92px;
  text-align: center
}

.mt-f-dropdown {
  width: 375px;
  padding: 30px 20px 20px;
  top: calc(100% + 4px);
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%)
}

/* Responsive adjustments for calendar dropdown */
@media (max-width: 768px) {
  .mt-f-dropdown {
    width: calc(100vw - 30px);
    max-width: 375px;
    padding: 25px 15px 15px;
    right: 50%;
  }
}

@media (max-width: 576px) {
  .mt-f-dropdown {
    position: fixed !important;
    width: 100% !important;
    max-width: 100%;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0;
    padding: 20px 15px;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }

  .drop-item-wrap.by-date {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    border-radius: 0;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }
}

.more-matches {
  background: var(--asp-bg);
  border: 1px solid var(--asp-gray-fc2);
  height: 36px
}

.inline-match .result-wrap.center-result {
  margin-top: 15px
}

.inline-match .extra-time {
  bottom: -22px
}

.inline-match.active-match {
  padding: 22px 18px
}

.result-status.bottom {
  top: 23px
}

.inpTlabel.disabled {
  pointer-events: none
}

.penalties-wrp .teamA-shots,
.penalties-wrp .teamB-shots {
  flex: 0 0 auto;
  flex-wrap: wrap;
  width: 120px;
  display: inline-flex
}

.mt-pgs-wrp {
  position: relative;
  width: 50px;
  height: 50px
}

.mt-pgs-wrp:before {
  content: "";
  width: 3px;
  height: 7px;
  background: #fbcc33;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  top: -3px;
  border-radius: 5px;
  z-index: 5
}

.mt-pgs-wrp .percent {
  width: 50px;
  height: 50px
}

.mt-pgs-wrp svg {
  position: relative;
  width: 50px;
  height: 50px;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  border-radius: 100%;
  background: var(--asp-gray-fc2)
}

.mt-pgs-wrp circle {
  width: 100%;
  height: 100%;
  fill: #fff0;
  stroke-width: 3;
  stroke: #3a467599
}

.mt-pgs-wrp circle:nth-child(2) {
  stroke: var(--asp-main);
  stroke-dasharray: 440;
  stroke-dashoffset: calc(440 - 156*var(--num)/100)
}

.mt-pgs-wrp .number {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--asp-main);
  font-size: 12px;
  font-weight: 700;
  direction: ltr
}

.extra-time {
  color: #ff3131;
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
  display: inline-flex;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  bottom: -26px;
  white-space: nowrap
}

.extra-time i {
  font-style: normal;
  margin-right: 4px;
  color: var(--asp-card-cr)
}

.mt-pgs-wrp.half-time circle:nth-child(2),
.mt-pgs-wrp.stopped circle:nth-child(2) {
  stroke: #ffc420
}

.mt-pgs-wrp.half-time:after,
.mt-pgs-wrp.stopped:after {
  content: "";
  width: 3px;
  height: 7px;
  background: #fc4d4d;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  bottom: -3px;
  border-radius: 5px;
  z-index: 5
}

.mt-pgs-wrp.half-time .number,
.mt-pgs-wrp.stopped .number {
  color: var(--asp-card-cr)
}

@-webkit-keyframes fadeinout {

  0%,
  to {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  50% {
    opacity: 1
  }

  75% {
    opacity: 1
  }
}

@keyframes fadeinout {

  0%,
  to {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  50% {
    opacity: 1
  }

  75% {
    opacity: 1
  }
}

.match-progress {
  margin: 0 20px;
  position: relative
}

.match-progress .live {
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  font-size: 10px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: calc(100% + 10px);
  background: #ff3131;
  color: #fff;
  font-weight: 400;
  height: 15px;
  border-radius: 50px
}

.mt-pgs-wrp circle:nth-child(2) {
  stroke-dasharray: 440px;
  stroke-dashoffset: calc(440px - 156px*var(--num)/100)
}

.no-mt-wrap {
  flex-direction: column;
  padding: 80px 30px;
  border-radius: 10px;
  background: var(--asp-card-bg);
  border: 1px solid var(--asp-card-bg);
  color: #707488;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700
}

.no-mt-wrap svg {
  margin-bottom: 20px
}

.no-mt-wrap p {
  margin: 0
}