@import url("/apps/global/public/fonts/Ubuntu/ubuntu.css");
@import url("/apps/global/public/fonts/Bebas_Neue/bebas.css");
@import url("/apps/global/public/fonts/BurbankBigCondensedBlack/font.css");

:root {
  --rounded-corners: calc(var(--gap) * 1.5);
  --primary-font: "Ubuntu", sans-serif;
  --primary-color: #472257;
  --feed-header-background-color: rgb(207, 217, 222);
  --feed-header-background-image: url("/app/tournament/public/img/app/hero.png");
  --primary-font-bold: "Ubuntu Bold", sans-serif;
  --secondary-font: "Bebas Neue Regular", sans-serif;
  --third-font: "Burbank Big Condensed Black", sans-serif;
  --default-background: #fff;
  --default-text-color: #000;
  --body-background: #f2f4f7;
  --tab-bar-shadow: 3px -3px 8px rgba(0, 0, 0, 0.1);
  --header-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --tournament-skeleton-color: rgb(207, 217, 222);
  --feed-option-background-color: rgb(237, 237, 237);
  --tournament-item-size: 128px;
  --rounded-corners: calc(var(--gap) * 1.5);
  --match-team-size: 128px;
  --wrap-background: #d6d6d6;
  --color-1: #472257;
  --color-2: #e9633a;
  --player-image-size: 72px;
  --feed-landing-background-image: url("/app/tournament/public/img/app/wallpaper.png");
  --link-active-color-parent: var(--primary-color);
  --default-item-background: #f7f8fa;
  --loading-color: var(--color-2);
}

html,
body,
.body.app {
  background-color: var(--default-background, #fff);
  color: var(--default-text-color, #000);
}

.font2,
[font2],
[font="2"] {
  font-family: var(--secondary-font);
}

.font3,
[font3],
[font="3"] {
  font-family: var(--third-font);
}

.app_title {
  font-family: var(--third-font);
}

.color-1,
[color-1] {
  color: var(--color-1);
}

.color-2,
[color-2] {
  color: var(--color-2);
}

.app.body > main,
.app.body > .main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  flex: auto;
}

app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--default-background);
  box-shadow: var(--header-box-shadow);
  position: sticky;
  top: 0;
  z-index: 11;
  font-size: 150%;
}

app-header > :is(.left, .right) {
  width: 25%;
}

app-header > :is(.center) {
  width: 75%;
}

app-header > :is(.right) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}

app-header > :is(.center) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

app-header > :is(.left, .center, .right) > .button {
  display: inline-flex;
  padding: calc(var(--gap) * 1);
  cursor: pointer;
  font-size: 150%;
  align-self: stretch;
}

app-header > :is(.left, .center, .right) > .button:active {
  background-color: var(--border-color);
}

app-header .app-name {
  font-size: 150%;
  font-weight: bold;
  line-height: 1;
}

.aside-options {
  --link-active-color: var(--primary-color);
  --link-active-color-parent: var(--primary-color);
  --link-active-background: var(--default-item-background, #f2f2f2);
  font-size: 120%;
  position: fixed;
  max-height: calc(100dvh - var(--footer-height, 56px));
  overflow: hidden;
  overflow-y: auto;
}

.aside-options .go-option:hover {
  color: var(--link-hover-color, var(--primary-color));
  transform: scale(1.1);
}

.aside-options .go-option {
  transition: all 0.3s ease-in-out;
  padding: var(--gap) calc(var(--gap) * 2) var(--gap) var(--gap);
  transform: scale(1);
}

.aside-options .go-option:last-child {
  margin-bottom: calc(var(--footer-height, 56px) + var(--gap));
}

.app-name go-icon,
.menu.aside go-view-title go-icon {
  font-size: clamp(2.5rem, 2.5rem, 2.5rem);
}

.app-name go-icon {
  margin: 0 calc(var(--gap) * 0.5) 0 0;
  overflow: hidden;
}

.app-name go-icon,
.app-name go-icon img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

app-body,
.app-body {
  display: flex;
  gap: calc(var(--gap) * 1);
  flex: auto;
  width: 100%;
}

app-aside,
.app-aside {
  display: none;
  flex-direction: column;
  flex: 30%;
  align-items: flex-end;
  border-right: solid 1px var(--border-color);
  overflow: hidden;
  transition: width 0.3s ease-in-out;
  overflow-y: auto;
  position: sticky;
  top: var(--header-height, 56px);
}

app-feed,
.app-feed {
  display: flex;
  flex-direction: column;
  flex: 70%;
}

app-feed > .feed-content,
.app-feed > .feed-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: calc(var(--gap) * 1);
  flex: auto;
}

.feedItems {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1);
}

.feed-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 200px;
  background-color: var(--feed-header-background-color);
  background-image: var(--feed-header-background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: var(--rounded-corners, 1rem);
}

.feed-header + .skeleton,
.feed-header + * .skeleton {
  margin: calc(var(--gap) * 1) 0 0 0;
}

.View.view go-view-title img,
.View.view go-view-title [img] {
  border-radius: 50%;
}

.form.default {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
}

.form.default [name="name"] {
  font-size: 120%;
  font-weight: bold;
}

.teamItem.itemSkeleton,
.tournament-item.itemSkeleton {
  color: rgba(0, 0, 0, 0);
}

.itemSkeleton .picture {
  background-color: var(--border-color);
}

.itemSkeleton img {
  opacity: 0;
}

.ditem,
.teamItem,
.tournament-item {
  display: flex;
  gap: calc(var(--gap));
  background-color: var(--feed-header-background-color);
  overflow: hidden;
  overflow: hidden;
  border-radius: var(--rounded-corners, 1rem);
  padding: calc(var(--gap));
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: solid 1px var(--border-color);
}

.teamItem .picture,
.tournament-item .picture {
  border-radius: var(--rounded-corners, 1rem);
  aspect-ratio: 1/1;
  overflow: hidden;
  max-width: calc(var(--tournament-item-size) * 0.75);
  min-width: calc(var(--tournament-item-size) * 0.75);
}

.teamItem .picture img,
.tournament-item .picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}

.teamItem .name,
.tournament-item .name {
  line-height: 1.1;
  font-weight: 900;
  font-family: var(--third-font);
}

.teamItem .details,
.tournament-item .details {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.teamItem .details .options,
.tournament-item .details .options {
  margin: auto 0 0 0;
  text-align: left;
}

.tournament-item .details .startDate {
  line-height: 1;
}

.matchesList,
.tournaments-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
}

.playerItemContainer .picture,
.teamItem.itemSkeleton .picture,
.tournament-item.itemSkeleton .picture {
  background-color: var(--tournament-skeleton-color, #fff);
}

.itemSkeleton .noSkeleton,
.teamItem.itemSkeleton .picture img,
.tournament-item.itemSkeleton .picture img {
  opacity: 0;
}

.tournament-item:hover .primary-button {
  background-color: var(--color-1, var(--primary-color));
  border-color: var(--color-1, var(--primary-color));
}

.feed-content go-options {
  overflow: hidden;
  border-radius: var(--rounded-corners, 1rem);
  border: solid 1px var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.feed-content go-options .go-option {
  background-color: var(--feed-option-background-color, #fff);
}

.View.view.menu.aside go-view-body {
  --link-active-color: var(--primary-color);
  --link-active-color-parent: var(--primary-color);
  font-size: 120%;
}

.alertBody,
.confirmWin > div:first-child {
  font-size: 120%;
  font-weight: 500;
}

.teamItem .picture {
  max-width: calc(var(--tournament-item-size) * 0.75);
  min-width: calc(var(--tournament-item-size) * 0.75);
}

.teamsList {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
}

.table.tournamentInfo tr td:not(:first-child) {
  text-align: right;
  padding: 0 0 0 calc(var(--gap) * 1);
}

.table.tournamentInfo tr td:is(:last-child) {
  font-weight: bold;
}

body [tag],
body .primary-button,
body .secondary-button {
  --link-active-border-radius: 2pc;
  border-color: var(--link-active-background);
}

body .primary-button {
  --link-active-background: var(--primary-color);
  --link-active-color: var(--primary-button-text-color, #fff);
}

.nextMatchDate .date {
  font-weight: bold;
}

.back-button,
.glass-button {
  background-color: var(--back-button-background-color, #ffffffd0);
  color: var(--primary-color);
  backdrop-filter: blur(10px);
}

.back-button {
  margin: calc(var(--gap) * 0.5);
}

.matchVS :is(.team1, .team2) .vs,
.matchVS :is(.team1, .team2) .teamName {
  font-size: 120%;
  font-weight: 900;
}

.tournamentLabel {
  color: var(--primary-color);
  font-weight: bold;
}

.matchesList {
  margin: calc(var(--gap) * 1) 0 0 0;
}

.matchItem {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap));
  width: 100%;
  overflow: hidden;
  flex: auto;
}

.matchesList .matchItem,
today-matches .matchItem,
.clientMatches .matchItem,
.homeLatestMatches .matchItem,
.clientTeamItems .matchItem {
  border: solid 2px var(--color-1);
}

.cardItem,
.matchItem {
  border: solid 1px var(--border-color);
  padding: calc(var(--gap) * 1);
  border-radius: var(--rounded-corners, 1rem);
  background-color: var(--default-item-background);
  box-shadow: var(--header-box-shadow);
}

.app-feed .feed-today-body {
  padding-top: calc(var(--gap) * 1);
}

.details .options:empty {
  display: none;
}

.matchItem .details {
  flex: auto;
  display: flex;
  gap: calc(var(--gap) * 1);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.matchItem .options {
  align-self: flex-end;
  margin: 0 0 0 auto;
}

.playerItemContainer.itemSkeleton > * div,
.matchItem.itemSkeleton match-vs,
.matchItem.itemSkeleton > * > div {
  background-color: var(--tournament-skeleton-color, #d4d4d4);
  color: rgba(0, 0, 0, 0);
  border-radius: var(--rounded-corners, 1rem);
}

.matchItem.itemSkeleton :not(div):not(match-vs) {
  opacity: 0;
}

.matchItem.itemSkeleton img {
  opacity: 0;
}

.matchItem match-vs,
.matchItem .details {
  width: 100%;
}

.matchItem match-vs {
  display: flex;
  flex: 50%;
  flex-direction: column;
}

.matchItem match-vs img {
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  width: var(--match-team-size);
  mix-blend-mode: multiply;
}

match-vs .notch-info {
  display: flex;
  justify-content: center;
}

match-vs .notch-info .label {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
  display: inline-flex;
  font-size: 90%;
  padding: calc(var(--gap) * 0.25) var(--gap);
  border-radius: 2pc;
}

.teamsListContainer {
  margin: calc(var(--gap) * 1) 0 0 0;
  display: flex;
  flex-direction: column;
}

.matchItem match-vs .vs {
  font-size: 150%;
  font-weight: 900;
  opacity: 0.5;
}

.matchItem :is(.date, .time) {
  font-size: 110%;
  font-weight: 900;
  line-height: 1.1;
}

.matchItem :is(.team, .team) :is(.name) {
  font-weight: bolder;
  color: var(--team-text-color, #444);
  font-family: var(--third-font);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #ffffff);
  font-size: 150%;
}

.card-gradient,
.matchItem .dateMatch {
  text-shadow: var 1px 1px 1px #000 (--hero-text-shadow, 1px 1px 1px #000);
}

.matchItem .dateMatch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--gap) * 1);
  flex: auto;
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
  padding: calc(var(--gap) * 0.75);
  border-radius: var(--rounded-corners, 1rem);
  width: 100%;
}

.matchItem .dateMatch .time {
  font-size: 120%;
}

.matchItem .score {
  font-size: 180%;
  font-weight: 900;
}

.matchStatus {
  font-size: 80%;
  color: var(--primary-color);
}

.feedHeroDetails {
  margin: auto auto 0 0;
  padding: calc(var(--gap) * 1);
  font-family: var(--secondary-font);
  color: var(--hero-text-color, #fff);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.feedHeroDetails .tournamentTitle {
  font-size: clamp(2rem, 3rem, 2.5rem);
  line-height: 1;
}

.feedHeroDetails .tournamentName {
  font-size: clamp(2.5rem, 3rem, 4rem);
  line-height: 1;
}

go-button.app-name go-label {
  display: none;
}

go-view-header-right [role="close"] go-icon {
  background-color: var(--wrap-background);
  aspect-ratio: 1 / 1;
  padding: calc(var(--gap) * 0.5);
  border-radius: 50%;
  transform: scale(1.2);
}

.searchTeamView go-items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1);
  padding: var(--gap) calc(var(--gap) * 1) calc(var(--gap) * 2) calc(var(--gap) * 1);
}

.teamItem .name {
  font-family: var(--third-font);
  font-size: 180%;
  letter-spacing: 0.3rem;
  line-height: 1;
  text-transform: uppercase;
}

.teamItem .teamGroupName {
  font-family: var(--third-font);
  color: var(--color-2);
  font-size: 130%;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.tournamentName .name {
  font-family: var(--third-font);
  opacity: 0.7;
}

.stat {
  text-align: center;
  padding: calc(var(--gap) * 0.5) calc(var(--gap) * 1);
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: #fff;
  border-radius: var(--rounded-corners, 1rem);
}

.matchesHeaderStats {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--gap) * 1);
}

.stat .count {
  font-size: 150%;
  font-weight: 900;
}

.stat .title {
  line-height: 1;
}

.matchesHeaderStats .stat {
  flex: auto;
}

.clientTeamFilters .button:not(.active) {
  background-color: #ffffff;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.clientTeamFilters .button:is(.active) {
  background-color: var(--color-2);
  border-color: var(--color-2);
}

.clientTeamFilters {
  width: 100%;
}

.clientTeamFilters .contain {
  --flex-wrap: nowrap;
}

.clientTeamFilters .button {
  width: 50%;
}

.card,
.go-list-message {
  background-color: var(--feed-header-background-color) rgb(207, 217, 222);
  border-radius: var(--rounded-corners, 1rem);
  overflow: hidden;
}

.go-list-message {
  background-color: var(--list-message-background-color, #cbe0ff);
  border: solid 1px var(--primary-color, var(--border-color));
  padding: calc(var(--gap) * 1);
}

.playerItemContainer {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--gap) * 1);
  background-color: var(--feed-header-background-color) rgb(207, 217, 222);
  border-radius: var(--rounded-corners, 1rem);
  overflow: hidden;
}

.playerItemContainer .left {
  flex: auto;
  display: flex;
  gap: calc(var(--gap) * 1);
  align-items: center;
}

.playerItemContainer .left .picture,
.playerItemContainer .left .picture img {
  width: var(--player-image-size, 72px);
  height: var(--player-image-size, 72px);
  min-width: var(--player-image-size, 72px);
  min-height: var(--player-image-size, 72px);
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

.playerItemContainer .left .picture image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.players-list {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  gap: calc(var(--gap) * 1);
}

app-player-item {
  display: block;
}

app-player-item .options {
  display: inline-flex;
  font-weight: 900;
  margin: 0 0 0 auto;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.playerItemContainer {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: #fff;
  border-radius: var(--rounded-corners, 1rem);
  padding: calc(var(--gap) * 1);
  cursor: pointer;
}

.playerItemContainer:hover {
  background-image: linear-gradient(125deg, var(--color-2, #fff), var(--color-1, #fff));
}

.playerItemContainer .name {
  font-size: 120%;
  font-weight: 700;
  margin: 0 0 calc(var(--gap) * 0.5) 0;
  line-height: 1;
}

.playerItemContainer .age {
  margin: calc(var(--gap) * 0.5) 0 0 0;
}

.playerItemContainer .info {
  display: flex;
  gap: var(--gap);
  line-height: 1.1;
}

.playerItemContainer .info img {
  aspect-ratio: 1/1;
  max-width: 100%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  background-color: var(--default-background);
}

.playerItemContainer .info .team {
  border: solid 1px var(--border-color);
  padding: calc(var(--gap) * 0.25) calc(var(--gap) * 0.5);
  border-radius: 2pc;
}

.playerItemContainer:hover .info .team {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-2, #fff), var(--color-1, #fff));
  color: #fff;
}

app-feed {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

swiper-container {
  max-width: calc(var(--feed-width) + calc(var(--gap) * 2));
  width: 100%;
}

.swiperSlide {
  --swiper-pagination-color: rgba(255, 255, 255, 0);
  --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0);
  --swiper-pagination-bullet-opacity: 0;
}

match-vs .team .name {
  margin: calc(var(--gap) * 1) 0 0 0;
}

.searchMatchView go-items {
  display: flex;
  flex-direction: column;
  padding: calc(var(--gap) * 1);
}

.goalListItem {
  padding: calc(var(--gap) * 1);
  border: solid 1px var(--border-color);
  overflow: hidden;
  border-radius: var(--rounded-corners, 1rem);
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 1);
}

.goalListItem .name {
  font-size: 120%;
  font-weight: 700;
}

.goalListItem picture {
  display: inline-flex;
  max-width: var(--player-image-size, 72px);
  max-height: var(--player-image-size, 72px);
  min-width: var(--player-image-size, 72px);
  min-height: var(--player-image-size, 72px);
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background-color: var(--feed-header-background-color);
}

.goalListItem picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-gradient {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
}

.homeCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--gap) * 1);
  margin: var(--gap) 0 0 0;
}

.homeCards .homeCard {
  --link-active-color: #fff;
  position: relative;
  aspect-ratio: 1/1.1;
  border-radius: var(--rounded-corners, 1rem);
  font-family: var(--secondary-font);
  font-size: 250%;
  padding: calc(var(--gap) * 1);
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.homeCards .homeCard:hover {
  color: var(--link-active-color, #fff);
}

.homeCards .homeCard .label {
  line-height: 1;
}

.homeCards .homeCard .icon {
  margin: auto 0 0 auto;
  font-size: clamp(72px, 94px, 120px);
  opacity: 0.5 !important;
  position: absolute;
  bottom: var(--gap);
  right: var(--gap);
}

.app-feed .section,
.app-feed .latestGoals,
.app-feed .latestMatches {
  margin: calc(var(--gap) * 2) 0 0 0;
}

.app-feed .section .header,
.app-feed .latestGoals .header,
.app-feed .latestMatches .header {
  line-height: 1;
  font-family: var(--secondary-font);
  font-size: clamp(1rem, 2rem, 2.5rem);
}

.app-feed .section .header {
  margin: 0 0 calc(var(--gap) * 1) 0;
}

.app-feed .section .header .title,
.app-feed .latestGoals .header .title,
.app-feed .latestMatches .header .title {
  display: inline-block;
  position: relative;
}

app-footer {
  display: flex;
  width: 100%;
  border-top: solid 1px var(--border-color);
  margin: auto 0 0 0;
  position: relative;
  background-color: var(--default-background);
}

app-footer .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--gap) * 1);
  position: relative;
  width: 100%;
  gap: calc(var(--gap) * 1);
}

.View.view.loader .ViewBody go-icon {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--default-background);
}

.scoreContainer {
  font-family: var(--secondary-font);
  font-size: 120%;
  justify-content: space-between;
}

match-vs[past="true"] .notch-info .label,
match-vs[past="true"] + .details .dateMatch,
match-vs[past="true"] + * > div .dateMatch {
  background-image: none;
}

match-vs[future="true"] .score {
  opacity: 0;
}

match-vs[playing="true"] .notch-info .label,
match-vs[playing="true"] + .details .dateMatch {
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
}

.clientTeamBody {
  margin: calc(var(--gap) * 1) 0 0 0;
  display: inline-flex;
  width: 100%;
}

.clientTeamBody > go-items {
  width: 100%;
}

.searchMatchView match-vs > * {
  pointer-events: none;
}

.feed-landing {
  flex: auto;
  background-color: var(--feed-header-background-color);
  background-image: var(--feed-landing-background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: var(--rounded-corners, 1rem);
  border: solid 1px var(--border-color, var(--color-1));
  color: var(--hero-text-color, #fff);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
  padding: calc(var(--gap) * 1);
}

.feed-landing,
.tournaments-list,
.tournamentInfo {
  margin: var(--gap) 0 0 0;
}

.landingTitle {
  line-height: 1;
}

.teamStats {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: #fff;
  padding: calc(var(--gap) * 0.5);
  border-radius: calc(var(--rounded-corners, 1rem) / 2);
}

.pointsItem:hover {
  color: var(--primary-color, var(--color-1));
}

.teamPoints {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.teamPoints .points {
  padding: 0 0 calc(var(--gap) * 0.5) 0;
  border-bottom: solid 4px var(--border-color);
}

.teamPoints .wins {
  padding: calc(var(--gap) * 0.5) 0 0 0;
}

.teamPoints .value {
  font-family: var(--secondary-font);
  font-size: 150%;
  margin: calc(var(--gap) * 0.5) 0 0 0;
}

.teamPoints .label {
  font-size: 85%;
}

.teamItem:active > * {
  opacity: 0.5;
}

.View.view.team .ViewHeader,
.View.view.team .ViewContent {
  background-color: var(--default-background, #fff);
}

.player_goals_icon,
.player_shirt_icon {
  --icon-size: 44px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.player_goals_icon .num,
.player_shirt_icon .num {
  position: absolute;
  z-index: 1;
  margin: calc(var(--gap) * 0.5) 0 0 0;
}

.player_goals_icon .goals,
.player_shirt_icon .shirt {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  font-size: var(--icon-size);
}

.player_goals_icon svg,
.player_shirt_icon svg {
  width: 1em;
  height: 1em;
}

app-player-item .options .figure {
  display: inline-flex;
}

.tournamentName > div:first-child {
  margin: 0 0 calc(var(--gap) * 0.35) 0;
}

.tournamentName .name {
  line-height: 1;
}

.View.view.tournament go-options .go-option:active {
  background-color: #ecececb0;
}

.matchVS {
  line-height: 1;
}

.View.view.welcome .picture {
  display: flex;
  justify-content: center;
}

.View.view.welcome .picture img {
  max-width: 100%;
  margin: auto;
  opacity: 0;
}

.View.view.welcome .messageBody {
  margin: 0 0 calc(var(--gap) * 1) 0;
}

.View.view.welcome .ViewContent {
  background-image: var(--picture);
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
}

.View.view.welcome .ViewHeader {
  background-color: transparent;
}

.View.view.welcome .ViewHeader go-view-title {
  color: var(--welcome-view-header-color, #fff);
  text-shadow: var(--welcome-view-header-text-shadow, 1px 1px 1px #000);
}

.View.view.welcome .welcomeMessageBody {
  margin: calc(var(--gap));
  border: solid 1px var(--border-color);
  border-radius: var(--rounded-corners, 1rem);
  padding: calc(var(--gap) * 1);
  background-color: var(--default-background, #fff);
  line-height: 1.1;
  text-align: center;
}

.View.view.welcome .welcomeMessageBody .startDate {
  margin: calc(var(--gap) * 0.5) 0;
}

.View.view.welcome .welcomeMessageBody .message {
  margin: calc(var(--gap) * 1) 0;
}

.View.view.welcome .welcomeMessageBody .options {
  margin: calc(var(--gap) * 2) 0 calc(var(--gap) * 1) 0;
}

.View.view.welcome .icon-wrapper {
  margin-top: calc(0px - var(--gap) * 3);
}

.View.view.welcome .icon-wrapper .icon {
  font-size: calc(var(--gap) * 4);
  background-color: var(--default-background, #fff);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  padding: calc(var(--gap) * 0.5);
}

.View.view.welcome .ViewBackground {
  background-color: rgba(0, 0, 0, 0.8);
}

body .primary-button,
body .secondary-button {
  padding: calc(var(--gap) * 0.55) calc(var(--gap) * 1);
  font-size: 90%;
}

body {
  zoom: 0.85;
  font-size: 85%;
}

.View.view go-view-content :last-child:is(go-confirm) {
  background-color: var(--default-background, #fff);
  display: flex;
  margin: auto 0 0 0;
  border-radius: var(--rounded-corners);
}

.feedFilter {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0 0 calc(var(--gap) * 1) 0;
  gap: calc(var(--gap) * 1);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
}

.feedFilter > * {
  flex: auto;
}

.feedFilter .primary-button,
.feedFilter .secondary-button {
  padding: calc(var(--gap) * 0.75) calc(var(--gap) * 1);
}

.feedFilter .secondary-button {
  background-color: var(--default-background, #fff);
  color: var(--primary-color);
}

.yellow-card,
.red-card {
  aspect-ratio: 1/1.1;
  max-width: var(--tournament-item-size);
  min-width: var(--tournament-item-size);
}

.cardSelector .contain > .tag {
  display: flex;
  flex-direction: column;
}

.yellow-card {
  background-color: #ffeb3b;
}

.red-card {
  background-color: #f44336;
}

.item-player-img {
  max-width: calc(var(--tournament-item-size) * 0.5);
  min-width: calc(var(--tournament-item-size) * 0.5);
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}

.cardItem {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--gap) * 1);
  align-items: center;
}

.cardItem .left {
  display: flex;
  gap: calc(var(--gap) * 1);
  align-items: center;
}

.cardItem .name {
  font-size: 120%;
  font-weight: bolder;
  line-height: 1.1;
}

.cardsCount {
  display: flex;
  gap: calc(var(--gap) * 1);
  align-items: center;
}

.cardsCount .block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cardsCount .block go-icon {
  font-size: 280%;
}

.cardsCount .matchCard go-icon {
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.25));
}

.cardsCount .matchCard.yellow go-icon {
  color: var(--yellow-card-color, #ffe715);
}

.cardsCount .matchCard.red go-icon {
  color: var(--red-card-color, #f44336);
}

.cardsCount .num {
  font-weight: 900;
}

.View.aside .ViewMenuBody .options {
  padding: calc(var(--gap) * 1) 0;
}

.matchVsContent .team,
.matchVsContent .scoreContainer {
  flex: 33.33%;
}

.matchVsContent .team {
  cursor: pointer;
}

.matchVsContent .team:active {
  opacity: 0.5;
}

.matchVS .title1 {
  display: inline-flex;
  align-items: center;
}

.matchVS :is(.team1, .team2) {
  background-color: var(--default-background, #fff);
  border: solid 1px var(--border-color);
  padding: calc(var(--gap) * 1);
  border-radius: var(--rounded-corners, 1rem);
}

.circle {
  aspect-ratio: 1/1;
}

.dateAvailableItem {
  font-family: var(--secondary-font);
  font-size: 120%;
  letter-spacing: 1.5px;
  cursor: pointer;
}

.dateAvailableItem matchdatenumber {
  display: inline-flex;
  aspect-ratio: 1/1;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  border-radius: 50%;
  min-width: calc(var(--gap) * 2.5);
  min-height: calc(var(--gap) * 2.5);
  width: calc(var(--gap) * 2.5);
}

.dateAvailableItem:active,
.dateAvailableItem[current="true"] {
  background-color: var(--primary-color);
  color: var(--default-background, #fff);
}

.teamContext img {
  mix-blend-mode: multiply;
}

.strong {
  font-size: 130%;
  font-weight: 900;
}

.post {
  position: relative;
}

.post .picture img {
  max-width: 100%;
  border: solid 1px var(--border-color);
  border-radius: var(--rounded-corners, 1rem);
  display: flex;
}

.post .title {
  font-family: var(--third-font);
  font-size: 180%;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #ffffff);
  line-height: 1.1;
}

.post .head {
  margin: 0 0 calc(var(--gap) * 1) 0;
}

go-button.app-name go-label {
  font-family: var(--third-font);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #ffffff);
  font-size: 150%;
  font-style: italic;
}

.menu.aside .ViewHeader go-button {
  color: var(--primary-color);
}

.ads-items .post {
  margin: calc(var(--gap) * 1) 0 0 0;
}

.ads-items .post:not(:last-child) {
  border-bottom: solid 1px var(--border-color);
  padding: 0 0 calc(var(--gap) * 1) 0;
}

ads-block {
  display: flex;
  flex-direction: column;
  margin: calc(var(--gap) * 1) 0 0 0;
}

ads-block img {
  max-width: 100%;
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}

ads-block .swiper-item {
  height: 300px;
  background-color: var(--border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: var(--rounded-corners, 1rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  border: solid 2px var(--primary-color);
}

ads-block .swiper-item .title {
  padding: calc(var(--gap) * 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
  font-weight: bold;
  font-size: 120%;
  line-height: 1.1;
  display: none;
}

.View.player {
  padding: calc(var(--gap) * 0.5);
}

.View.contextMenu .ViewContent,
.View.player.contextView .ViewContent,
.View.view.contextMenu:not(.transparent) go-view-header-right [role="close"] go-icon,
.View.view.player.contextView:not(.transparent) go-view-header-right [role="close"] go-icon {
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: #fff;
}

.View.view.contextMenu:not(.transparent) go-view-header-right [role="close"] go-icon,
.View.view.player.contextView:not(.transparent) go-view-header-right [role="close"] go-icon {
  border: solid 1px #fff;
}

.View.view.contextMenu:not(.transparent) .ViewHeader,
.View.view.player.contextView:not(.transparent) .ViewHeader {
  background-color: rgba(0, 0, 0, 0);
  font-family: var(--third-font);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.View.player.contextView .ViewBody {
  min-height: calc(100% - var(--header-height));
  display: flex;
  flex-direction: column;
}

.View.player.contextView .playerDetails {
  margin: auto 0 0 0;
  padding: calc(var(--gap) * 1);
  font-family: var(--third-font);
  font-size: 200%;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
  display: flex;
  gap: calc(var(--gap) * 1);
  align-items: center;
  position: sticky;
  bottom: 0;
}

.View.player.contextView .picture {
  margin: auto;
  max-width: 100%;
}

.View.player.contextView .picture img {
  border-radius: var(--rounded-corners, 1rem);
  mask-image: linear-gradient(var(--primary-color) 80%, transparent);
  width: 100%;
  object-fit: contain;
}

.View.player.contextView .playerDetails .teamPicture {
  max-width: 44px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: solid 1px var(--border-color);
}

.View.player.contextView .playerName {
  text-align: center;
  font-family: var(--third-font);
  font-size: 200%;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.View.player.contextView .playerDescription {
  text-align: center;
}

.View.player.contextView {
  --view-background: rgb(0, 0, 0, 70%);
}

.View.player.contextView .playerDetails .options {
  align-self: stretch;
  font-size: 100%;
  display: flex;
  margin: 0 0 0 auto;
}

.View.player.contextView .playerDetails .options go-button {
  font-size: 75%;
}

.View.contextMenu {
  font-size: 130%;
  --view-background: rgb(0, 0, 0, 40%);
}

.View.contextMenu,
.playerItemContainer .name {
  font-family: var(--third-font);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.playerItemContainer .name {
  font-size: 160%;
}

.clientHero .search {
  position: absolute;
  right: 0;
  padding: calc(var(--gap) * 0.5);
}

.clientHero .search .input {
  background-color: var(--back-button-background-color, #ffffffd0);
  border-radius: 2pc;
  backdrop-filter: blur(10px);
  --webkit-backdrop-filter: blur(10px);
}

.View.search .go-input .contain.__icon input,
.View.search go-input .contain.__icon input {
  padding: calc(var(--gap) * 1) calc(var(--gap) * 1) calc(var(--gap) * 1) 2.5rem;
  border-radius: 2pc;
}

go-items.searchPlayerView {
  padding: calc(var(--gap) * 1);
}

.table tr td {
  padding: calc(var(--gap) * 0.5) 0;
}

.table tr td {
  padding: calc(var(--gap) * 0.5) 0;
  vertical-align: text-top;
}

.table tr td:last-child {
  padding: calc(var(--gap) * 0.5) 0 calc(var(--gap) * 0.5) calc(var(--gap) * 1);
  font-weight: 900;
  font-size: 110%;
  text-align: right;
}

.table tr:first-child td {
  padding: calc(var(--gap) * 0.5);
  text-align: center;
}

.clientTeam,
.serverTeam,
.playersItems,
.goalsItems,
.feedItems,
.cardsFeedBody,
.playersFilter {
  margin: var(--gap) 0 0 0;
}

.playersFilter {
  margin: var(--gap) 0;
}

team-alignment {
  position: relative;
  display: block;
  gap: calc(var(--gap) * 1);
  width: 100%;
}

.team-alignment {
  padding: var(--gap);
  margin-inline-start: 200px;
  width: 100%;
  flex: auto;
}

.pitch {
  position: relative;
  background-color: #087a17;
  border-radius: var(--rounded-corners, 1rem);
  background-image: url("/app/tournament/public/img/app/pitch.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  margin: 0;
  display: flex;
  gap: calc(var(--gap) * 3);
  border: solid 2px var(--color-1);
  overflow: hidden;
  padding: 0;
  line-height: 0;
}

.pitch .field {
  flex: auto;
  width: 50%;
  height: 100%;
}

.pitch .teamField {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}

.pitch .team2 .teamField {
  flex-direction: row-reverse;
}

.pitch .teamField .line {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.pitch .teamField .player {
  display: inline-flex;
  width: calc(var(--gap) * 1.2);
  height: calc(var(--gap) * 1.2);
  border-radius: 50%;
  border: solid 2px var(--border-color);
  background-color: var(--pitch-player-background-color, #ffffff);
}

.alignment-pitch-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: calc(var(--gap) * 0.25) calc(var(--gap) * 1);
  color: var(--pitch-labels-color, #ffffff);
  font-size: 90%;
}

.feed-content go-options {
  margin: var(--gap) 0 0 0;
}

.groupsItems {
  margin: var(--gap) 0 0 0;
}

.groupItem {
  border-radius: var(--rounded-corners, 1rem);
  border: solid 2px var(--primary-color);
  overflow: hidden;
}

.groupTitle {
  padding: var(--gap);
  font-family: var(--third-font);
  font-size: 150%;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.groupTeamsItems .rankingTable {
  margin: 0;
  border-radius: 0;
  border: none;
}

.groupTeamsItems .rankingTable .go-list-message {
  margin: var(--gap);
  max-width: calc(100% - var(--gap) * 2);
}

.groupTeamItem {
  position: relative;
  text-align: center;
  border-radius: calc(var(--gap));
  line-height: 1.1;
  cursor: pointer;
}

.groupTeamItem .name {
  font-family: var(--third-font);
  font-size: 130%;
  margin: calc(var(--gap) * 0.5) 0 0 0;
  opacity: 0.75;
}

.groupTeamItem .picture {
  position: relative;
}

.groupTeamItem .picture img {
  aspect-ratio: 1 / 1;
  max-width: 100%;
  object-fit: cover;
  border-radius: calc(var(--gap));
  transition: all 0.2s ease-in-out;
}

.groupTeamItem:hover img {
  transform: scale(1.1);
}

*.gap-export {
  padding: 2rem !important;
}

*.gap-export .primary-circle,
*.gap-export .secondary-circle {
  display: none;
}

app-bracket.gap-export .bracket {
  --bracket-key-size: calc(calc(var(--feed-width) - calc(var(--gap) * 7.5)) / 10);
}

client-home app-nav {
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  max-width: var(--feed-width, 100%);
}

app-nav go-options {
  display: flex;
  gap: calc(var(--gap) * 1);
  border: none !important;
  justify-content: space-evenly;
  flex: auto;
}

app-nav go-options .go-option {
  border-radius: var(--rounded-corners, 1rem);
  flex: auto;
  text-align: center;
  justify-content: center;
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
  flex-direction: column;
  min-width: 28%;
}

.homeCards .homeCard.card-gradient:hover,
app-nav go-options .go-option:hover {
  color: var(--card-gradient-color, #fff);
  background-image: linear-gradient(125deg, var(--color-2, #fff), var(--color-1, #fff));
}

app-nav go-options .go-option go-icon {
  font-size: 200%;
}

.goalsFilter {
  margin: var(--gap) 0;
}

.bracket {
  display: flex;
  gap: calc(var(--gap) * 0.5);
  justify-content: space-between;
  margin: var(--gap) 0 0 0;
  --bracket-key-size: calc(calc(var(--feed-width) - calc(var(--gap) * 7)) / 8);
}

.bracket .column {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1);
  justify-content: space-around;
  align-items: center;
}

.bracket .key {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  background-color: var(--border-color);
  width: var(--bracket-key-size);
  border-radius: calc(var(--rounded-corners, 1rem) / 2);
  border: solid 2px var(--color-1);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.bracket .key:hover img {
  transform: scale(1.1);
}

.bracket .key.active {
  border: none;
}

.bracket .key.active img {
  border: solid 2px var(--color-1);
  transition: all 0.25s ease-in-out;
}

.bracket .key img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: calc(var(--rounded-corners, 1rem) / 2);
  height: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.View.bracketView .team {
  max-width: 50%;
  margin: auto;
}

.View.bracketView .team img {
  max-width: 100%;
  border-radius: var(--rounded-corners, 1rem);
}

.feed-title {
  margin: calc(var(--gap) * 1) 0 0 0;
  text-align: center;
  border: solid 2px var(--color-2);
  padding: calc(var(--gap) * 0.5);
  border-radius: var(--rounded-corners, 1rem);
  font-family: var(--third-font);
  font-size: 150%;
  background: var(--color-1, #fff);
  background-image: linear-gradient(125deg, var(--color-1, #fff), var(--color-2, #fff));
  color: var(--card-gradient-color, #fff);
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.bracketTeamName {
  font-size: 150%;
}

.bracket .key {
  --line-width: calc(var(--bracket-key-size) / 6);
  --line-height: calc(var(--bracket-key-size) / 1.6);
}

.bracket .key .line {
  position: absolute;
  color: var(--color-1);
}

.bracket .key .finalLabel {
  position: absolute;
  width: calc(var(--bracket-key-size) * 2 + var(--gap));
  left: calc(0px - calc(calc(var(--bracket-key-size) * 2) - calc(var(--gap) / 2.1)));
  top: calc(0px - calc(var(--bracket-key-size) * 1.5));
  text-align: center;
  z-index: 2;
  font-size: 150%;
  color: initial;
  pointer-events: none;
}

.bracket .key:not(.active)::after {
  content: "";
  position: absolute;
  background-color: var(--border-color);
  border-radius: calc(var(--rounded-corners, 1rem) / 2);
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Left */
.bracket .column1 .key:nth-child(2n) .line,
.bracket .column1 .key:nth-child(2n + 1) .line,
.bracket .column2 .key:nth-child(2n) .line,
.bracket .column2 .key:nth-child(2n + 1) .line,
.bracket .column3 .key:nth-child(2n) .line,
.bracket .column3 .key:nth-child(2n + 1) .line {
  width: var(--line-width);
  height: var(--line-height);
  left: 100%;
}

.bracket .column1 .key:nth-child(2n) .line,
.bracket .column1 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 1.1);
}

.bracket .column2 .key:nth-child(2n) .line,
.bracket .column2 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 2.2);
}

.bracket .column3 .key:nth-child(2n) .line,
.bracket .column3 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 4.5);
}

.bracket .column1 .key:nth-child(2n + 1) .line,
.bracket .column2 .key:nth-child(2n + 1) .line,
.bracket .column3 .key:nth-child(2n + 1) .line {
  top: 50%;
  border-top: solid 2px;
  border-right: solid 2px;
}

.bracket .column1 .key:nth-child(2n) .line,
.bracket .column2 .key:nth-child(2n) .line,
.bracket .column3 .key:nth-child(2n) .line {
  bottom: 50%;
  border-bottom: solid 2px;
  border-right: solid 2px;
}

.bracket .column1 .key:nth-child(2n + 1) .line:before,
.bracket .column2 .key:nth-child(2n + 1) .line:before,
.bracket .column3 .key:nth-child(2n + 1) .line:before {
  content: "";
  position: absolute;
  left: calc(100%);
  bottom: -2px;
  width: calc(var(--line-width) * 2);
  height: 2px;
  border-bottom: solid 2px;
}
/* Left */

/* Right */
.bracket .column6 .key:nth-child(2n) .line,
.bracket .column6 .key:nth-child(2n + 1) .line,
.bracket .column7 .key:nth-child(2n) .line,
.bracket .column7 .key:nth-child(2n + 1) .line,
.bracket .column8 .key:nth-child(2n) .line,
.bracket .column8 .key:nth-child(2n + 1) .line {
  width: var(--line-width);
  height: var(--line-height);
  right: 100%;
}

.bracket .column6 .key:nth-child(2n) .line,
.bracket .column6 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 4.5);
}

.bracket .column7 .key:nth-child(2n) .line,
.bracket .column7 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 2.2);
}

.bracket .column8 .key:nth-child(2n) .line,
.bracket .column8 .key:nth-child(2n + 1) .line {
  height: calc(var(--line-height) * 1.1);
}

.bracket .column6 .key:nth-child(2n + 1) .line,
.bracket .column7 .key:nth-child(2n + 1) .line,
.bracket .column8 .key:nth-child(2n + 1) .line {
  top: 50%;
  border-top: solid 2px;
  border-left: solid 2px;
}

.bracket .column6 .key:nth-child(2n) .line,
.bracket .column7 .key:nth-child(2n) .line,
.bracket .column8 .key:nth-child(2n) .line {
  bottom: 50%;
  border-bottom: solid 2px;
  border-left: solid 2px;
}

.bracket .column6 .key:nth-child(2n + 1) .line:before,
.bracket .column7 .key:nth-child(2n + 1) .line:before,
.bracket .column8 .key:nth-child(2n + 1) .line:before {
  content: "";
  position: absolute;
  right: calc(100%);
  bottom: -2px;
  width: calc(var(--line-width) * 2);
  height: 2px;
  border-bottom: solid 2px;
}
/* Right */

/* Ranking */
.feed-ranking {
  --team-name-width: 80px;
  --table-item-gap: calc(var(--gap) * 1);
  --rang-head-background: #d6d6d6;
  --rank-item-padding: calc(var(--gap) * 0.5);
  --team-image-size: calc(var(--gap) * 2.5);
}

.rankingTable {
  border: solid 2px var(--color-1);
  margin: var(--gap) 0 0 0;
  overflow: hidden;
  border-radius: calc(var(--rounded-corners, 1rem) / 2);
}

.feed-ranking .rankingHeader {
  display: flex;
  justify-content: space-between;
  gap: var(--table-item-gap);
  background-color: var(--rang-head-background);
  align-items: center;
  padding: var(--rank-item-padding);
}

.feed-ranking .rankingHeader .th.teamName,
.feed-ranking .rankingTeams .td.teamName {
  width: var(--team-name-width);
  min-width: var(--team-name-width);
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.feed-ranking .rankingTeams .td.teamName {
  cursor: pointer;
}

.feed-ranking .rankingHeader .th.teamName .name,
.feed-ranking .rankingTeams .td.teamName .name {
  margin: calc(var(--gap) * 0.5) 0 0 0;
  font-weight: bold;
}

.feed-ranking .rankingHeader .th:last-child,
.feed-ranking .rankingTeams .td:last-child {
  position: relative;
}

.feed-ranking .rankingHeader .th:not(.teamName),
.feed-ranking .rankingTeams .td:not(.teamName) {
  width: calc(calc(100% - var(--team-name-width)) / 8);
}

.feed-ranking .rankingTeams .go-list-item {
  display: flex;
  gap: var(--table-item-gap);
  padding: calc(var(--rank-item-padding) * 2) var(--rank-item-padding);
  align-items: center;
}

.feed-ranking .rankingTeams .go-list-item.odd {
  background-color: #f2f2f2;
}

.feed-ranking .rankingTeams .td img,
.feed-ranking .rankingTeams .td img {
  max-width: 100%;
  border-radius: var(--rounded-corners, 1rem);
  width: var(--team-image-size);
  aspect-ratio: 1/1;
}

.feed-ranking .rankingTeams .td {
  font-weight: bold;
}
/* Ranking */

.feed-content .pointsTable {
  overflow: hidden;
  border: solid 2px var(--primary-color);
  border-radius: var(--rounded-corners, 1rem);
}

.feed-content .pointsTable .go-list-message {
  margin: calc(var(--gap) * 1);
  max-width: calc(100% - calc(var(--gap) * 2));
}

go-input .tag {
  border: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

go-input .tag:not(.active) {
  background-color: rgba(232, 240, 254, 0.3);
}

.orderList {
  display: flex;
  flex-direction: column;
}

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

#view-appPrincipalMenu .app_title {
  font-style: italic;
  text-shadow: var(--hero-text-shadow, 1px 1px 1px #000);
}

.View#view-appPrincipalMenu .ViewContent {
  max-width: 80%;
}

.View#view-appPrincipalMenu .ViewHeader {
  background-image: var(--feed-header-background-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--rounded-corners, 1rem);
  border: solid 2px var(--theme-background);
}

.View.view.menu.aside:not(.transparent) .ViewHeader {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
}

.View#view-appPrincipalMenu .ViewContent .ViewBody {
  background-color: var(--theme-background);
  border-radius: var(--rounded-corners, 1rem);
}

app-bracket.loading::after {
  position: fixed;
}

body .header .icon-bars,
body .app-header .icon-bars {
  transform: scale(0.9);
}

body .header .icon-bars,
body .header .icon-bars .line,
body .app-header .icon-bars,
body .app-header .icon-bars .line {
  transition: all 0.25s ease-in-out;
}

body.menuOpen .header .icon-bars,
body.menuOpen .app-header .icon-bars {
  justify-content: center;
}

body.menuOpen .header .icon-bars .line,
body.menuOpen .app-header .icon-bars .line {
  display: none;
}

body.menuOpen .header .icon-bars,
body.menuOpen .app-header .icon-bars {
  border-top: solid var(--border-width);
  border-right: solid var(--border-width);
  transform: rotate(45deg) scale(0.8);
}

app-tab-bar,
.app-tab-bar {
  display: flex;
  width: 100%;
  padding: calc(var(--gap));
  position: sticky;
  bottom: 0;
  z-index: 4;
  justify-content: center;
  background-color: var(--default-background);
  box-shadow: var(--tab-bar-shadow);
  border-radius: var(--rounded-corners, 1.5rem) var(--rounded-corners, 1.5rem) 0 0;
}

app-tab-bar .tab-options,
.app-tab-bar .tab-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: calc(var(--gap) * 1);
}

app-tab-bar .tab-options *,
.app-tab-bar .tab-options * {
  transition: transform 0.25s ease-in-out;
}

app-tab-bar .tab-options .go-option,
.app-tab-bar .tab-options .go-option {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.25);
  font-weight: var(--van-link-font-weight, 500);
}

app-tab-bar .tab-options .go-option:hover,
.app-tab-bar .tab-options .go-option:hover,
app-tab-bar .tab-options .go-option:active,
.app-tab-bar .tab-options .go-option:active,
app-tab-bar .tab-options .go-option.active,
.app-tab-bar .tab-options .go-option.active {
  color: var(--primary-color, var(--color-1));
  font-weight: var(--van-link-font-weight, 500);
}

app-tab-bar .tab-options .go-option go-icon,
.app-tab-bar .tab-options .go-option go-icon {
  font-size: 260%;
}

app-tab-bar .tab-options .go-option:active go-icon,
.app-tab-bar .tab-options .go-option:active go-icon {
  transform: scale(1.5);
}

app-tab-bar .tab-options .go-option *,
.app-tab-bar .tab-options .go-option * {
  pointer-events: none;
}

@media (min-width: 590px) {
  body {
    zoom: 1;
    font-size: 100%;
  }

  app-header {
    font-size: 100%;
  }

  .bracket .column1 .key:nth-child(2n) .line,
  .bracket .column1 .key:nth-child(2n + 1) .line,
  .bracket .column8 .key:nth-child(2n) .line,
  .bracket .column8 .key:nth-child(2n + 1) .line {
    height: calc(var(--line-height) * 1);
  }

  .bracket .column2 .key:nth-child(2n) .line,
  .bracket .column2 .key:nth-child(2n + 1) .line,
  .bracket .column7 .key:nth-child(2n) .line,
  .bracket .column7 .key:nth-child(2n + 1) .line {
    height: calc(var(--line-height) * 2.1);
  }

  .bracket .column3 .key:nth-child(2n) .line,
  .bracket .column3 .key:nth-child(2n + 1) .line,
  .bracket .column6 .key:nth-child(2n) .line,
  .bracket .column6 .key:nth-child(2n + 1) .line {
    height: calc(var(--line-height) * 4.1);
  }

  .bracket .key .finalLabel {
    left: calc(0px - calc(calc(var(--bracket-key-size) * 2) - calc(var(--gap) / 1.5)));
    top: calc(0px - calc(var(--bracket-key-size) * 1.2));
  }

  .teamItem .picture,
  .tournament-item .picture {
    max-width: var(--tournament-item-size);
    min-width: var(--tournament-item-size);
  }

  body .primary-button,
  body .secondary-button {
    padding: calc(var(--gap) * 0.75) calc(var(--gap) * 2);
    font-size: 100%;
  }
}

@media (min-width: 768px) {
  app-header > :is(.left, .center, .right) {
    width: 33.33%;
  }

  app-tab-bar .tab-options,
  .app-tab-bar .tab-options {
    gap: calc(var(--gap) * 1.5);
  }

  .feed-ranking {
    --team-name-width: 100px;
  }

  .item-player-img {
    max-width: calc(var(--tournament-item-size) * 0.75);
    min-width: calc(var(--tournament-item-size) * 0.75);
  }

  .teamItem .picture,
  .tournament-item .picture {
    --tournament-item-size: 156px;
  }

  go-button.app-name go-label {
    display: flex;
  }

  .View.menu.left .ViewContent,
  .View.menu.right .ViewContent {
    max-width: calc(var(--mobile-s-width) * 1.5);
  }

  .matchesHeaderStats {
    grid-template-columns: repeat(4, 1fr);
  }

  .homeCards .homeCard {
    aspect-ratio: 1/0.8;
  }

  .tournament-item .details .startDate {
    font-size: 120%;
  }

  .pitch .teamField .player {
    width: calc(var(--gap) * 1.5);
    height: calc(var(--gap) * 1.5);
  }

  .pitch {
    gap: calc(var(--gap) * 4);
  }

  .bracket {
    gap: calc(var(--gap) * 1);
  }

  .feed-ranking {
    --team-name-width: 150px;
  }
}

@media (min-width: 1024px) {
  app-tab-bar,
  .app-tab-bar {
    display: none;
  }

  .View#view-appPrincipalMenu .ViewContent {
    max-width: 33%;
  }

  .teamItem .picture,
  .tournament-item .picture {
    --tournament-item-size: 200px;
  }

  app-aside,
  .app-aside {
    display: flex;
  }

  app-feed > .feed-content,
  .app-feed > .feed-content {
    max-width: calc(50% + calc(var(--gap) * 5));
    padding: calc(var(--gap) * 1) 0;
  }

  .matchItem :is(.options) {
    filter: grayscale(1);
    opacity: 0.5;
  }

  .matchItem:hover :is(.options) {
    filter: grayscale(0);
    opacity: 1;
  }

  .tournament-item .details .startDate {
    font-size: 150%;
  }

  app-header > :is(.center) {
    font-size: 120%;
  }

  .View.view.aside go-options .go-option:hover,
  .View.view.default go-options .go-option:hover,
  .View.view.tournament go-options .go-option:hover {
    background-color: #ecececb0;
  }

  .dateAvailableItem:hover {
    background-color: var(--primary-color);
    color: var(--default-background, #fff);
  }

  .teamItem {
    border: solid 2px var(--feed-header-background-color);
  }

  .teamItem:hover {
    border: solid 2px var(--primary-color);
  }

  .teamItem:hover .name {
    color: var(--primary-color);
  }

  ads-block .swiper-item {
    height: 320px;
  }

  .post .picture img {
    max-height: 50dvh;
  }
}