@charset "UTF-8";
/* Local Intro font declarations. Files are in src/fonts/ */
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Thin%20Alt.woff2") format("woff2"), url("../fonts/Intro Thin Alt.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Light%20Alt.woff2") format("woff2"), url("../fonts/Intro Light Alt.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Book%20Alt.woff2") format("woff2"), url("../fonts/Intro Book Alt.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Regular%20Alt.woff2") format("woff2"), url("../fonts/Intro Regular Alt.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Bold%20Alt.woff2") format("woff2"), url("../fonts/Intro Bold Alt.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntroLocal";
  src: url("../fonts/Intro%20Black%20Alt.woff2") format("woff2"), url("../fonts/Intro Black Alt.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Use the local Intro family as first choice */
body {
  font-family: "IntroLocal", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme=light] {
  --header-footer: linear-gradient(90deg, #9B7CE4 0%, #7C67FF 100%);
  --Unchangeable-Yellow: #FFFD53;
  --Unchangeable-White: #FFF;
  --Unchangeable-Purple: #8C69FF;
  --Unchangeable-Text: #525252;
  --Background-Background: #F1F1F1;
  --Text-Main: #525252;
  --Text-Potscription: #A2A2A2;
  --Text-On-button: #8C69FF;
  --Card-Card-fill: #FFF;
  --Card-Card-stroke: #F2F0FF;
  --Text_Green: #55AD0D;
  --Text-Red: #DC4B2E;
  --Text-Coefficent: #8C69FF;
  --Coefficent-Coefficent-stroke: #8C69FF;
  --Coefficent-Coefficent-fill: #F2F0FF;
  --News-Home-Both: #EAE4FF;
  --Overlay: rgba(255, 255, 255, 0.6);
  --Shadow: linear-gradient(180deg, rgba(241, 241, 241, 0.00) 0%, #F1F1F1 100%);
  --Shadow-2: 0 0 6.4px 3px rgba(127, 115, 167, 0.16);
  --Shadow-mob: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
}

[data-theme=dark] {
  --header-footer: linear-gradient(90deg, #9B7CE4 0%, #7C67FF 100%);
  --Unchangeable-Yellow: #FFFD53;
  --Unchangeable-White: #FFF;
  --Unchangeable-Purple: #8C69FF;
  --Unchangeable-Text: #525252;
  --Background-Background: #2A2A2A;
  --Text-Main: #FFF;
  --Text-Potscription: #949494;
  --Text-On-button: #B6AAFF;
  --Card-Card-fill: #404040;
  --Card-Card-stroke: #636366;
  --Text_Green: #80D63A;
  --Text-Red: #FF5C3B;
  --Text-Coefficent: #FFF;
  --Coefficent-Coefficent-stroke: #FFF;
  --Coefficent-Coefficent-fill: #5C529A;
  --News-Home-Both: #EAE4FF;
  --Shadow: linear-gradient(180deg, rgba(42, 42, 42, 0.00) 0%, #2A2A2A 100%);
  --Shadow-mob: linear-gradient(180deg, rgba(64, 64, 64, 0.00) 0%, #404040 100%);
  --Overlay: rgba(73, 73, 73, 0.60);
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
}

body {
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  -webkit-text-size-adjust: none;
  margin: 0;
  overflow-x: hidden;
  background: var(--Background-Background);
  color: var(--Text-Main, );
  scroll-behavior: smooth;
  padding-top: 68px;
  padding-bottom: 68px;
}

main {
  position: relative;
  padding: 0;
  display: flex;
  padding-top: 18px;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

input, textarea, select, button {
  font-family: inherit;
  outline: none;
  background: transparent;
  border: none;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, textarea::-webkit-outer-spin-button, textarea::-webkit-inner-spin-button, select::-webkit-outer-spin-button, select::-webkit-inner-spin-button, button::-webkit-outer-spin-button, button::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration, textarea::-webkit-search-decoration, textarea::-webkit-search-cancel-button, textarea::-webkit-search-results-button, textarea::-webkit-search-results-decoration, select::-webkit-search-decoration, select::-webkit-search-cancel-button, select::-webkit-search-results-button, select::-webkit-search-results-decoration, button::-webkit-search-decoration, button::-webkit-search-cancel-button, button::-webkit-search-results-button, button::-webkit-search-results-decoration {
  display: none;
}

input:focus::placeholder, textarea:focus::placeholder, select:focus::placeholder, button:focus::placeholder {
  visibility: hidden;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

.main-width {
  width: 100%;
  max-width: 1800px;
  padding: 0 20px;
  margin: 0 auto;
}

.btn {
  display: flex;
  padding: 8px 16px;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(--main-100, #008AFF);
  color: var(--white-100);
  font-weight: 500;
}

h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.main-container {
  display: flex;
  align-items: flex-start;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
  padding: 18px 16px 40px 20px;
}
@media (max-width: 1440px) {
  .content {
    max-width: 67%;
  }
}
@media (max-width: 1440px) and (max-width: 1320px) {
  .content {
    max-width: 64%;
  }
}

.container {
  border-radius: 24px;
  background: var(--white-60, rgba(255, 255, 255, 0.6));
  padding: 8px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--Overlay);
  z-index: 50;
  display: none;
}
.overlay.active {
  display: block;
}

.matches-loading {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.matches-loading--active {
  display: flex;
}

.matches-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
}

.matches-loading__animation {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matches-loading__animation svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
  max-height: 220px;
}

.matches-loading__text {
  font-size: 14px;
  font-weight: 500;
}

header {
  background: var(--header-footer);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  z-index: 99;
}
header .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
header .header__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  gap: 6px;
  font-family: "IntroLocal", sans-serif;
  color: var(--Unchangeable-Yellow);
  font-size: 22px;
  font-weight: 700;
}
header .header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
header .header__nav-item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-family: Archivo, sans-serif;
  font-size: 22px;
  font-weight: 500;
}
header .header__nav-item:first-child a {
  color: var(--Unchangeable-Yellow);
}
header .header__nav-item:last-child a {
  color: var(--Unchangeable-White);
}
header .header__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 32px;
}
header .header__settings-icon {
  cursor: pointer;
}
header .header__settings-icon-img {
  width: 28px;
  height: 28px;
}
header .header__settings-icon-img--close {
  display: none;
  width: 28px;
  height: 28px;
}
header .header__settings-icon.active .header__settings-icon-img {
  display: none;
}
header .header__settings-icon.active .header__settings-icon-img--close {
  display: block;
}
header .header__search-icon {
  cursor: pointer;
}
header .header__search-icon-img {
  width: 28px;
  height: 28px;
}
header .header__search-icon-img--close {
  display: none;
  width: 28px;
  height: 28px;
}
header .header__search-icon.active .header__search-icon-img {
  display: none;
}
header .header__search-icon.active .header__search-icon-img--close {
  display: block;
}
header .header__navbar-icon {
  cursor: pointer;
  display: none;
}
@media (max-width: 767px) {
  header .header__navbar-icon {
    display: flex;
  }
}
header .header__navbar-icon-img {
  width: 28px;
  height: 28px;
}
header .header__navbar-icon-img--close {
  display: none;
  width: 28px;
  height: 28px;
}
header .header__navbar-icon.active .header__navbar-icon-img {
  display: none;
}
header .header__navbar-icon.active .header__navbar-icon-img--close {
  display: block;
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: fixed;
  top: 68px;
  bottom: 68px;
  right: -100vw;
  padding: 40px 80px 40px 40px;
  z-index: 99;
  border-radius: 20px 0 0 0;
  background: var(--Card-Card-fill);
  box-shadow: 0 0 6.4px 3px rgba(127, 115, 167, 0.16);
  width: 654px;
  transition: right 0.3s ease;
}
.settings.active {
  right: 0;
}
.settings__dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 50px;
  background: var(--Background-Background);
  padding: 16px 24px;
  transition: border-radius 0.3s ease 0.3s;
}
.settings__dropdown.open {
  border-radius: 20px;
  transition: border-radius 0s ease 0s;
}
.settings__dropdown.open i {
  transform: rotate(180deg);
}
.settings__button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--Text-Potscription);
  padding: 0;
}
.settings__button i {
  height: 20px;
}
.settings__themes-current, .settings__langs-current {
  color: var(--Text-On-button);
  margin-left: auto;
}
.settings__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  max-height: 0px;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease;
}
.settings__list.open {
  opacity: 1;
  visibility: visible;
  max-height: 600px;
  padding-top: 14px;
}
.settings__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  color: var(--Text-Main);
}
.settings .settings__lang--active, .settings .settings__theme-icon--active {
  display: none;
}

.search {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: fixed;
  top: 68px;
  bottom: 68px;
  right: -100vw;
  padding: 40px 80px 40px 40px;
  z-index: 99;
  border-radius: 20px 0 0 0;
  background: var(--Card-Card-fill);
  box-shadow: 0 0 6.4px 3px rgba(127, 115, 167, 0.16);
  width: 654px;
  transition: right 0.3s ease;
}
.search.active {
  right: 0;
}
.search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  background: var(--Background-Background);
  padding: 12px 24px;
}
.search__input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
}
.search__input::placeholder {
  color: var(--Text-Potscription);
  opacity: 1;
}
.search__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.search___title {
  color: var(--Text-Potscription);
  font-size: 18px;
  font-weight: 500;
}
.search__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.search__item--football svg {
  fill: none;
}
.search__item--football svg path {
  stroke: var(--Text-Main);
}
.search__item--tennis svg {
  fill: none;
}
.search__item--tennis svg path {
  fill: var(--Text-Main);
}
.search__item--cricket svg {
  fill: none;
}
.search__item--cricket svg path {
  fill: var(--Text-Main);
}

.sidebar {
  position: sticky;
  top: 68px;
  display: flex;
  padding: 18px 24px 28px 0;
  width: 277px;
  max-width: 15vw;
  min-width: 210px;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  align-self: stretch;
  height: fit-content;
}
.sidebar .header__nav {
  display: none;
}
.sidebar__title {
  color: var(--Text-Potscription);
  font-size: 18px;
  font-weight: 500;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar__nav-item {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 500;
  color: var(--Text-Main);
  cursor: pointer;
  position: relative;
}
.sidebar__nav-item a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar__nav-item a svg {
  fill: var(--Text-Main);
}
.sidebar__nav-item a:hover {
  color: var(--Text-On-button);
}
.sidebar__nav-item a:hover svg {
  fill: var(--Text-On-button);
}
.sidebar__nav-item--active:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 15px;
  background: var(--Shadow);
}
.sidebar__nav-item--disabled {
  cursor: default;
  opacity: 0.7;
}
.sidebar__nav-item--disabled a {
  pointer-events: none;
  opacity: 0.85;
}
.sidebar__nav-item:first-child ul li a svg {
  fill: none;
}
.sidebar__nav-item:first-child ul li a svg path {
  stroke: var(--Text-Main);
}
.sidebar__nav-item:first-child ul li a:hover svg path {
  stroke: var(--Text-On-button);
}
.sidebar__nav-item:first-child ul li:nth-child(4) a svg path, .sidebar__nav-item:first-child ul li:nth-child(5) a svg path {
  stroke: none;
  fill: var(--Text-Main);
}
.sidebar__nav-item:first-child ul li:nth-child(4) a:hover svg path, .sidebar__nav-item:first-child ul li:nth-child(5) a:hover svg path {
  fill: var(--Text-On-button);
}
.sidebar__nav-item:nth-child(2) > a svg {
  fill: none;
}
.sidebar__nav-item:nth-child(2) > a svg path {
  stroke: var(--Text-Main);
}
.sidebar__nav-item:nth-child(2):hover > a svg path {
  stroke: var(--Text-On-button);
}
.sidebar__nav-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 18px;
  font-weight: 400;
  max-height: 0;
  overflow: hidden;
}
.sidebar__nav-nav--active {
  max-height: 190px;
  transition: max-height 0.3s ease-in;
  padding-bottom: 20px;
  margin-top: 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #8C69FF transparent;
}
.sidebar__nav-nav--active::-webkit-scrollbar {
  width: 8px;
}
.sidebar__nav-nav--active ::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar__nav-nav--active ::-webkit-scrollbar-thumb {
  background: var(--Text-On-button);
  border-radius: 10px;
}

.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 15vw;
  min-width: 210px;
  width: 277px;
  padding-top: 18px;
}

.filters {
  display: flex;
  flex-direction: column;
  position: relative;
}
.filters__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filters__btn {
  display: flex;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  background: var(--Unchangeable-Purple);
  color: var(--Unchangeable-White);
  font-size: 20px;
  font-weight: 500;
}
.filters__date-picker {
  display: flex;
  padding: 12px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-radius: 50px;
  background: var(--Card-Card-fill);
  width: 275px;
  cursor: pointer;
}
.filters__date-picker button {
  height: 20px;
  padding: 0;
  cursor: pointer;
}
.filters__date-picker svg path {
  fill: var(--Text-On-button);
}
.filters__date {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--Text-On-button);
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.filters__date button {
  color: var(--Text-On-button);
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.filters__calendar {
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 10;
}
.filters__calendar .flatpickr-calendar {
  right: 0 !important;
  left: auto !important;
  border-radius: 20px;
  background: var(--Card-Card-fill);
  box-shadow: 0 0 6.4px 3px rgba(127, 115, 167, 0.16);
}
.filters__content {
  border-radius: 20px;
  background: var(--Card-Card-fill);
  box-shadow: var(--Shadow-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: absolute;
  top: 58px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 52;
}
.filters__content--active {
  opacity: 1;
  visibility: visible;
}
.filters__title {
  color: var(--Text-Potscription);
  font-size: 18px;
  font-weight: 500;
}
.filters__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filters__block-title {
  font-size: 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--Card-Card-stroke, #F2F0FF);
  padding-bottom: 16px;
}
.filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.filters__item input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.filters__item input:checked + span {
  border: 1px solid var(--Text-On-button);
}
.filters__item input:checked + span::before {
  background: var(--Text-On-button) url("data:image/svg+xml;utf8,                    <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>                    <path d='M7.16264 11.3625L13.5189 5.00625C13.6689 4.85625 13.8439 4.78125 14.0439 4.78125C14.2439 4.78125 14.4189 4.85625 14.5689 5.00625C14.7189 5.15625 14.7939 5.3345 14.7939 5.541C14.7939 5.7475 14.7189 5.9255 14.5689 6.075L7.68764 12.975C7.53764 13.125 7.36264 13.2 7.16264 13.2C6.96264 13.2 6.78764 13.125 6.63764 12.975L3.41264 9.75C3.26264 9.6 3.19064 9.422 3.19664 9.216C3.20264 9.01 3.28089 8.83175 3.43139 8.68125C3.58189 8.53075 3.76014 8.45575 3.96614 8.45625C4.17214 8.45675 4.35014 8.53175 4.50014 8.68125L7.16264 11.3625Z' fill='white'/>                    </svg>") center/contain no-repeat;
}
.filters__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid var(--Card-Card-stroke);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.filters__item span::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--Card-Card-stroke);
  transition: all 0.3s ease;
}
.filters__item span:hover::before {
  border: 1px solid var(--Text-On-button, );
}
.filters__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--Coefficent-Coefficent-fill, #5C529A);
  cursor: pointer;
}
.filters__close svg path {
  stroke: var(--Coefficent-Coefficent-stroke, #FFF);
}

#calendarContainer .flatpickr-day.selected, #calendarContainer .flatpickr-day.startRange, #calendarContainer .flatpickr-day.endRange, #calendarContainer .flatpickr-day.selected.inRange, #calendarContainer .flatpickr-day.startRange.inRange, #calendarContainer .flatpickr-day.endRange.inRange, #calendarContainer .flatpickr-day.selected:focus, #calendarContainer .flatpickr-day.startRange:focus, #calendarContainer .flatpickr-day.endRange:focus, #calendarContainer .flatpickr-day.selected:hover, #calendarContainer .flatpickr-day.startRange:hover, #calendarContainer .flatpickr-day.endRange:hover, #calendarContainer .flatpickr-day.selected.prevMonthDay, #calendarContainer .flatpickr-day.startRange.prevMonthDay, #calendarContainer .flatpickr-day.endRange.prevMonthDay, #calendarContainer .flatpickr-day.selected.nextMonthDay, #calendarContainer .flatpickr-day.startRange.nextMonthDay, #calendarContainer .flatpickr-day.endRange.nextMonthDay,
#calendarContainer .flatpickr-day.inRange, #calendarContainer .flatpickr-day.prevMonthDay.inRange, #calendarContainer .flatpickr-day.nextMonthDay.inRange, #calendarContainer .flatpickr-day.today.inRange, #calendarContainer .flatpickr-day.prevMonthDay.today.inRange, #calendarContainer .flatpickr-day.nextMonthDay.today.inRange, #calendarContainer .flatpickr-day:hover, #calendarContainer .flatpickr-day.prevMonthDay:hover, #calendarContainer .flatpickr-day.nextMonthDay:hover, #calendarContainer .flatpickr-day:focus, #calendarContainer .flatpickr-day.prevMonthDay:focus, #calendarContainer .flatpickr-day.nextMonthDay:focus {
  background: var(--Unchangeable-Purple);
  border-color: var(--Unchangeable-Purple);
  color: var(--Unchangeable-White);
}
#calendarContainer .flatpickr-months .flatpickr-month, #calendarContainer span.flatpickr-weekday, #calendarContainer .flatpickr-day {
  font-family: "Archivo", sans-serif;
  color: var(--Text-Main);
}
#calendarContainer .flatpickr-months .flatpickr-prev-month svg, #calendarContainer .flatpickr-months .flatpickr-next-month svg {
  fill: var(--Text-Main);
}
#calendarContainer .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  color: var(--Text-Main);
  background: var(--Card-Card-fill);
}
#calendarContainer .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover {
  background: var(--Unchangeable-Purple);
  color: var(--Unchangeable-White);
}

.leagues {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.league {
  display: flex;
  padding: 24px 24px 18px 24px;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  border-radius: 20px;
  background: var(--Card-Card-fill, #FFF);
  transition: gap 0.3s ease;
}
.league--open .league__header {
  margin-bottom: 24px;
}
.league--open .league__toggle {
  transform: rotate(0deg);
}
.league--open .league__matches {
  max-height: 1000px;
}
.league__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 0;
  transition: all 0.3s ease;
}
.league__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 500;
}
.league__icon {
  width: 24px;
  height: 24px;
}
.league__toggle {
  margin-left: auto;
  transform: rotate(180deg);
  transition: all 0.3s ease;
  cursor: pointer;
}
.league__description {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--Text-Potscription);
  font-size: 16px;
  text-transform: capitalize;
}
.league__matches {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.league__matches .match {
  display: flex;
  align-items: center;
  gap: 14px;
}
.league__matches .match__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 70px;
  border-right: 1px solid var(--Card-Card-stroke);
  font-size: 16px;
}
.league__matches .match__time {
  color: var(--Text-Potscription);
}
.league__matches .match__timing {
  color: var(--Text-Potscription);
}
.league__matches .match__timing--active {
  color: var(--Text-green);
}
.league__matches .match__timing--finished {
  color: var(--Text-red);
}
.league__matches .match__teams {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 30%;
  min-width: 30%;
}
.league__matches .match__teams span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league__matches .match__team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.league__matches .match__team-logo {
  width: 18px;
  height: 18px;
}
.league__matches .match__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: auto;
}
.league__matches .match__score--acive {
  color: var(--Text-Green);
}
.league__matches .match__score--finished {
  color: var(--Text-Red);
}
.league__matches .match__digits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 230px;
}
.league__matches .match__digits .digits {
  display: flex;
  align-items: center;
  gap: 14px;
}
.league__matches .match__digit {
  display: flex;
  width: 110px;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 360px;
  background: var(--Coefficent-Coefficent-fill);
  color: var(--Text-Coefficent);
}
.league__matches .match__banner {
  display: flex;
  padding: 4px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  background: var(--Unchangeable-Yellow, #FFFD53);
  color: var(--Unchangeable-Text);
}
.league__matches .match__banner + .digits .match__digit {
  border: 1px solid var(--Coefficent-Coefficent-stroke);
}

.inner-banner--laptop {
  display: none;
}
@media screen and (max-width: 1024px) {
  .inner-banner--laptop {
    display: flex;
  }
  .inner-banner--desktop {
    display: none;
  }
}

.news {
  overflow-x: auto; /* или overflow-x: scroll; */
  width: calc(70vw - 60px);
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.news::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.news__list {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.news__item {
  display: flex;
  flex-direction: column;
  min-width: 540px;
  border-radius: 20px;
}
.news__image {
  border-radius: 20px 20px 0 0;
  height: 149px;
  overflow: hidden;
}
.news__image img {
  height: 149px;
  object-fit: cover;
  object-position: left center;
}
.news__content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 16px;
  align-self: stretch;
  background: var(--News-Home-Both);
  border-radius: 0 0 20px 20px;
  color: var(--Unchangeable-Text);
}
.news__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  display: box;
  box-orient: vertical;
  line-clamp: 2;
}
.news__text {
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  display: box;
  box-orient: vertical;
  line-clamp: 2;
  line-height: 1.6;
}

footer {
  background: var(--header-footer, linear-gradient(90deg, #9B7CE4 0%, #7C67FF 100%));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 68px;
  z-index: 51;
}
footer .footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 68px;
}
footer .footer__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  gap: 6px;
  font-family: "IntroLocal", sans-serif;
  color: var(--Unchangeable-Yellow);
  font-size: 22px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .main-width {
    max-width: 950px;
  }
  .content {
    gap: 16px;
    max-width: 58%;
  }
  .settings, .search {
    width: 410px;
  }
  .sidebar {
    min-width: 21%;
  }
  .right-sidebar {
    min-width: 21%;
  }
  .filters__btn {
    font-size: 16px;
    padding: 8px 12px;
  }
  .filters__btn svg {
    width: 16px;
    height: 16px;
  }
  .filters__date-picker {
    padding: 8px 12px;
    width: auto;
  }
  .filters__content {
    top: 50px;
  }
  .league {
    padding: 24px 16px;
  }
  .league .league__name {
    font-size: 18px;
  }
  .league__matches .match {
    flex-wrap: wrap;
  }
  .league__matches .match__score {
    align-items: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
  .league__matches .match__digits {
    min-width: 100%;
    align-items: flex-start;
  }
  .news {
    width: calc(810px - 30vw);
    max-width: 100%;
  }
  .news__item {
    min-width: 327px;
  }
  .news__image {
    height: 120px;
  }
  .news__content {
    padding: 14px 16px;
  }
  .news__title {
    font-size: 18px;
  }
  .news__text {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .main-width {
    padding: 0 8px;
  }
  .right-sidebar {
    display: none;
  }
  .search, .settings {
    width: 90vw;
    padding: 24px 16px;
  }
  .content {
    max-width: 100%;
    padding: 16px 8px;
  }
  header .header__logo {
    width: auto;
  }
  header .header__nav {
    display: none;
  }
  .sidebar {
    position: fixed;
    top: 68px;
    bottom: 68px;
    right: -100vw;
    padding: 40px 80px 40px 40px;
    z-index: 99;
    border-radius: 20px 0 0 0;
    background: var(--Card-Card-fill);
    box-shadow: 0 0 6.4px 3px rgba(127, 115, 167, 0.16);
    width: 654px;
    transition: right 0.3s ease;
    width: 90vw;
    max-width: 90vw;
    height: auto;
  }
  .sidebar.active {
    right: 0;
  }
  .sidebar__nav-item--active:after {
    background: var(--Shadow-mob);
  }
  .sidebar__nav {
    gap: 32px;
  }
  .sidebar .header__nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-size: 18px;
    margin-bottom: 16px;
  }
  .sidebar .header__nav-item a {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sidebar .header__nav-item a svg path {
    stroke: var(--Text-Main);
  }
  .sidebar .header__nav-item:first-child a {
    color: var(--Text-On-button);
  }
  .sidebar .header__nav-item:first-child a svg path {
    stroke: var(--Text-On-button);
  }
}

/*# sourceMappingURL=styles.css.map */