@golstats/gsc-top-player 1.0.0

package/src/components/comparative/gsc-row.vue

@@ -0,0 +1,1810 @@
+<template>
+  <div
+    ref="myDivRef2"
+    style="
+      border-left: rgba(13, 29, 41, 0.7) 1px solid;
+      border-right: rgba(13, 29, 41, 0.7) 1px solid;
+    "
+  >
+    <div v-if="type == 0" :class="rowwPlayerClass" id="container-row-player">
+      <!-- jugador -->
+      <div :class="containerLeftClass" id="container-left">
+        <div :class="positionContainerClass">
+          <div :class="$style.numberPosition">{{ data.position }}</div>
+        </div>
+        <div :class="playerContainerClass">
+          <img :class="imgPlayerIconClass" :src="data.player_photo" />
+          <div :class="manchesterUnitedClass">
+            <template v-if="elementSize.width <= 420">{{ data.player_short }}</template>
+            <template v-else>{{ data.player_name }}</template>
+          </div>
+          <img
+            :class="$style.chivasIcon"
+            v-if="elementSize.width <= 420"
+            alt=""
+            :src="data.team_logo"
+          />
+        </div>
+      </div>
+      <div :class="containerRightClass" id="container-right">
+        <div :class="$style.block01">
+          <div :class="$style.nameTeamGames" v-if="elementSize.width > 420">
+            <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
+            <div :class="$style.teamName" v-if="elementSize.width > 540">{{ data.team_abrev }}</div>
+          </div>
+          <div :class="$style.position" v-if="elementSize.width > 730">
+            <span :class="$style.dfC">{{ data.player_position }}</span>
+          </div>
+          <div :class="$style.age" v-if="elementSize.width > 960">{{ data.player_age }}</div>
+          <div :class="$style.country" v-if="elementSize.width > 960">
+            <img :class="$style.manchesterUnitedIcon" alt="" :src="data.player_country_flag" />
+          </div>
+          <div :class="$style.playedGames" v-if="elementSize.width > 540">
+            {{ data.player_games }}
+          </div>
+          <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
+            {{ data.player_min }}
+          </div>
+        </div>
+        <div :class="block02Class">
+          <div :class="$style.containesOptions">
+            <div :class="$style.leagueName" v-if="elementSize.width > 960">{{ data.total }}</div>
+            <div :class="containerBtnVideosClass">
+              <template
+                v-if="canPlayVideos || (game.awayTeam.team_id == teamWidget && typeData != 1)"
+              >
+                <GSCButton
+                  :icon="iconVideos"
+                  :icon-size="iconSize"
+                  :icon-position="iconPosition"
+                  :width="buttonWidth"
+                  :height="buttonHeight"
+                  :border-radius="buttonRadius"
+                  :border-width="buttonBorderWidth"
+                  :background-color="buttonBackground"
+                  :font-family="buttonfontFamily"
+                  :border-color="buttonBorderColor"
+                  :text-value="buttonTextValue"
+                  :font-size="buttonFontSize"
+                  @click="emitEventMedia(data)"
+                  v-if="elementSize.width > 635"
+                />
+                <GSCButton
+                  :mini="true"
+                  :icon="iconVideos"
+                  :icon-size="iconSizeMini"
+                  :icon-position="iconPosition"
+                  :width="buttonWidthMini"
+                  :height="buttonHeightMini"
+                  :border-radius="buttonRadius"
+                  :border-width="buttonBorderWidth"
+                  :background-color="buttonBackground"
+                  :font-family="buttonfontFamily"
+                  :border-color="buttonBorderColor"
+                  :font-size="buttonFontSize"
+                  @click="emitEventMedia(data)"
+                  v-else
+                />
+              </template>
+              <div :class="numberOfVideosClass" v-if="elementSize.width <= 635">
+                {{ data.total }}
+              </div>
+            </div>
+          </div>
+          <svg
+            v-if="arrow"
+            :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+            width="12"
+            height="8"
+            viewBox="0 0 12 8"
+            :fill="colorArrow"
+            xmlns="http://www.w3.org/2000/svg"
+            @click="clickExpand(data.id)"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
+              :fill="colorArrow"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="type == 1"
+      :class="rowTeamClass"
+      :style="elementSize.width > 540 ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)' : ''"
+      id="container-row-player"
+    >
+      <!-- equipo -->
+      <div :class="containerLeftType1Class" id="container-left">
+        <div :class="positionContainertype1Class">
+          <div :class="$style.numberPositionType1">{{ data.position }}</div>
+          <div :class="iconFavoritesType1Class">
+            <img :class="$style.shapeIconType1" alt="" :src="data.team_logo" />
+          </div>
+        </div>
+        <div :class="playerContainerType1Class">
+          <div :class="typeView == 0 ? $style.tijuanaWrapperType1 : $style.tijuanaWrapperType1NoBg">
+            <img :class="$style.tijuanaIconType1" alt="" :src="data.team_logo" />
+          </div>
+          <div :class="manchesterUnitedType1Class">{{ data.team_abrev }}</div>
+        </div>
+      </div>
+      <div :class="containerRightType1Class" id="container-right">
+        <div :class="$style.block01TitlesType1">
+          <div :class="teamNameWrapperType1Class" v-if="elementSize.width > 540">
+            <div :class="$style.teamNameType1">
+              C/{{ data.frequency }} <template v-if="data.category != 2">min</template
+              ><template v-else>segs</template>
+            </div>
+          </div>
+          <div :class="ageWrapperType1Class" v-if="elementSize.width > 960">
+            <div :class="ageType1Class">{{ data.promthistournament }}</div>
+          </div>
+          <div :class="playedGamesWrapperType1Class" v-if="elementSize.width > 1086">
+            <div :class="playedGamesType1Class">{{ data.promlasttournament }}</div>
+          </div>
+          <div :class="playedMinutesWrapperType1Class" v-if="elementSize.width > 770">
+            <div :class="playedMinutesType1Class">{{ data.team_games }}</div>
+          </div>
+        </div>
+        <div :class="block02Type1Class">
+          <div :class="$style.containesOptionsType1Games">
+            <div :class="leagueNameWrapperType1Class">
+              <div :class="leagueNameType1Class">{{ data.total }}</div>
+            </div>
+            <div :class="$style.containerBtnVideosType1Games">
+              <GSCButton
+                :icon="iconVideos"
+                :icon-size="iconSize"
+                :icon-position="iconPosition"
+                :width="buttonWidth"
+                :height="buttonHeight"
+                :border-radius="buttonRadius"
+                :border-width="buttonBorderWidth"
+                :background-color="buttonBackground"
+                :font-family="buttonfontFamily"
+                :border-color="buttonBorderColor"
+                :text-value="buttonTextValue"
+                :font-size="buttonFontSize"
+                @click="emitEventMedia(data)"
+                v-if="elementSize.width > 679 && canPlayVideos"
+              />
+              <GSCButton
+                :mini="true"
+                :icon="iconVideos"
+                :icon-size="iconSizeMini"
+                :icon-position="iconPosition"
+                :width="buttonWidthMini"
+                :height="buttonHeightMini"
+                :border-radius="buttonRadius"
+                :border-width="buttonBorderWidth"
+                :background-color="buttonBackground"
+                :font-family="buttonfontFamily"
+                :border-color="buttonBorderColor"
+                :font-size="buttonFontSize"
+                @click="emitEventMedia(data)"
+                v-else
+              />
+              <div :class="numberOfVideosType1Class">{{ data.total }}</div>
+            </div>
+          </div>
+          <svg
+            v-if="arrow"
+            :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+            width="12"
+            height="8"
+            viewBox="0 0 12 8"
+            :fill="colorArrow"
+            xmlns="http://www.w3.org/2000/svg"
+            @click="clickExpand(data.id)"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
+              :fill="colorArrow"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div v-if="type == 2" :class="rowwPlayerClass" id="container-row-player">
+      <!-- scouting -->
+      <div :class="containerLeftClass" id="container-left">
+        <div :class="positionContainerClass">
+          <div :class="$style.numberPosition">{{ data.position }}</div>
+        </div>
+        <div :class="playerContainerClass">
+          <img :class="imgPlayerIconClass" :src="data.player_photo" />
+          <div :class="manchesterUnitedClass">
+            {{ data.player_name }}
+          </div>
+          <img
+            :class="$style.chivasIcon"
+            v-if="elementSize.width <= 420"
+            alt=""
+            :src="data.team_logo"
+          />
+        </div>
+      </div>
+      <div :class="containerRightClass" id="container-right">
+        <div :class="$style.block01">
+          <div :class="$style.nameTeamGames" v-if="elementSize.width > 420">
+            <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
+            <div :class="$style.teamName" v-if="elementSize.width > 540">{{ data.team_abrev }}</div>
+          </div>
+          <div :class="$style.position" v-if="elementSize.width > 730">
+            <span :class="$style.dfC">{{ data.player_position }}</span>
+          </div>
+          <div :class="$style.age" v-if="elementSize.width > 960">{{ data.player_age }}</div>
+          <div :class="$style.country" v-if="elementSize.width > 960">
+            <img :class="$style.manchesterUnitedIcon" alt="" :src="data.player_country_flag" />
+          </div>
+          <div :class="$style.playedGames" v-if="elementSize.width > 540">
+            {{ data.player_games }}
+          </div>
+          <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
+            {{ data.player_min }}
+          </div>
+          <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
+            {{ data.league_name }}
+          </div>
+        </div>
+        <div :class="block02Class">
+          <div :class="$style.containesOptions">
+            <div :class="containerBtnVideosClass">
+              <GSCButton
+                v-if="canPlayVideos"
+                :icon="iconVideos"
+                :icon-size="iconSize"
+                :icon-position="iconPosition"
+                :width="elementSize.width <= 680 ? '83px' : buttonWidth"
+                :height="buttonHeight"
+                :border-radius="buttonRadius"
+                :border-width="buttonBorderWidth"
+                :background-color="buttonBackground"
+                :font-family="buttonfontFamily"
+                :border-color="buttonBorderColor"
+                :text-value="buttonTextValue"
+                :font-size="buttonFontSize"
+                @click="emitEventMedia(data)"
+                :style="
+                  elementSize.width <= 680
+                    ? elementSize.width <= 420
+                      ? 'margin-right: 35px;'
+                      : 'margin-right: 0px;'
+                    : ''
+                "
+              />
+              <!-- <GSCButton
+                :mini="true"
+                :icon="iconVideos"
+                :icon-size="iconSizeMini"
+                :icon-position="iconPosition"
+                :width="buttonWidthMini"
+                :height="buttonHeightMini"
+                :border-radius="buttonRadius"
+                :border-width="buttonBorderWidth"
+                :background-color="buttonBackground"
+                :font-family="buttonfontFamily"
+                :border-color="buttonBorderColor"
+                :font-size="buttonFontSize"
+                :style="
+                  elementSize.width <= 680
+                    ? elementSize.width <= 420
+                      ? 'margin-left: 15px;'
+                      : 'margin-left: 35px;'
+                    : ''
+                "
+                @click="emitEventMedia(data)"
+                v-else
+              />-->
+            </div>
+          </div>
+          <svg
+            :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
+            width="12"
+            height="8"
+            viewBox="0 0 12 8"
+            :fill="colorArrow"
+            xmlns="http://www.w3.org/2000/svg"
+            @click="clickExpand(data.id)"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
+              :fill="colorArrow"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import GSCButton from './gsc-button.vue'
+import { ref } from 'vue'
+import useElementSize from './useElementSize'
+export default {
+  components: {
+    GSCButton,
+  },
+  computed: {
+    manchesterUnitedType1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.manchesterUnitedType1320
+      } else if (width <= 460) {
+        return this.$style.manchesterUnitedType1460
+      } else {
+        return this.$style.manchesterUnitedType1
+      }
+    },
+    containerRightType1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.containerRightType1320Games
+      } else if (width <= 420) {
+        return this.$style.containerRightType1420Games
+      } else {
+        return this.$style.containerRightType1Games
+      }
+    },
+    teamNameWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.teamNameWrapperType1960
+      } else if (width <= 1086) {
+        return this.$style.teamNameWrapperType11086
+      } else {
+        return this.$style.teamNameWrapperType1
+      }
+    },
+    ageWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.ageWrapperType1680
+      } else if (width <= 1086) {
+        return this.$style.ageWrapperType11086
+      } else {
+        return this.$style.ageWrapperType1
+      }
+    },
+    ageType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.ageType1960
+      } else {
+        return this.$style.ageType1
+      }
+    },
+    playedGamesWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.playedGamesWrapperType1680
+      } else if (width <= 960) {
+        return this.$style.playedGamesWrapperType1960
+      } else {
+        return this.$style.playedGamesWrapperType1
+      }
+    },
+    playedGamesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 540) {
+        return this.$style.playedGamesType1540
+      } else if (width <= 960) {
+        return this.$style.playedGamesType1960
+      } else if (width <= 1086) {
+        return this.$style.playedGamesType11086
+      } else {
+        return this.$style.playedGamesType1
+      }
+    },
+    playedMinutesWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 1086) {
+        return this.$style.playedMinutesWrapperType11086
+      } else {
+        return this.$style.playedMinutesWrapperType1
+      }
+    },
+    playedMinutesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.playedMinutesType1680
+      } else {
+        return this.$style.playedMinutesType1
+      }
+    },
+    block02Type1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.block02Type1320Games
+      } else if (width <= 350) {
+        return this.$style.block02Type1350Games
+      } else if (width <= 680) {
+        return this.$style.block02Type1680Games
+      } else {
+        return this.$style.block02Type1Games
+      }
+    },
+    leagueNameWrapperType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.leagueNameWrapperType1680
+      } else if (width <= 960) {
+        return this.$style.leagueNameWrapperType1960
+      } else {
+        return this.$style.leagueNameWrapperType1
+      }
+    },
+    leagueNameType1Class() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.leagueNameType1960
+      } else {
+        return this.$style.leagueNameType1
+      }
+    },
+    numberOfVideosType1Class() {
+      const width = this.elementSize.width
+      if (width <= 680) {
+        return this.$style.numberOfVideosType1680
+      } else if (width <= 1232) {
+        return this.$style.numberOfVideosType11232
+      } else {
+        return this.$style.numberOfVideosType1
+      }
+    },
+    containerLeftType1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.containerLeftType1320
+      } else if (width <= 350) {
+        return this.$style.containerLeftType1350
+      } else if (width <= 680) {
+        return this.$style.containerLeftType1680
+      } else {
+        return this.$style.containerLeftType1
+      }
+    },
+    positionContainertype1Class() {
+      const width = this.elementSize.width
+      if (width <= 380) {
+        return this.$style.positionContainertype1380
+      } else if (width <= 420) {
+        return this.$style.positionContainertype1420
+      } else if (width <= 680) {
+        return this.$style.positionContainertype1680
+      } else {
+        return this.$style.positionContainertype1
+      }
+    },
+    rowTeamClass() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.rowTeam320
+      } else if (width <= 350) {
+        return this.$style.rowTeam350
+      } else if (width <= 420) {
+        return this.$style.rowTeam420
+      } else if (width <= 460) {
+        return this.$style.rowTeam460
+      } else {
+        return this.$style.rowTeam
+      }
+    },
+    containerBtnVideosClass() {
+      return this.$style.containerBtnVideosGames
+    },
+    numberOfVideosClass() {
+      const width = this.elementSize.width
+      if (width <= 620) {
+        return this.$style.numberOfVideos620
+      } else {
+        return this.$style.numberOfVideos
+      }
+    },
+    block02Class() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.block02420Games
+      } else if (width <= 620) {
+        return this.$style.block02620Games
+      } else if (width <= 960) {
+        return this.$style.block02960Games
+      } else {
+        return this.$style.block02Games
+      }
+    },
+    imgPlayerIconClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.imgPlayerIcon420
+      } else if (width <= 460) {
+        return this.$style.imgPlayerIcon460
+      } else {
+        return this.$style.imgPlayerIcon
+      }
+    },
+    manchesterUnitedClass() {
+      const width = this.elementSize.width
+      if (width <= 360) {
+        return this.$style.manchesterUnited360Games
+      } else if (width <= 420) {
+        return this.$style.manchesterUnited420Games
+      } else if (width <= 460) {
+        return this.$style.manchesterUnited460Games
+      } else {
+        return this.$style.manchesterUnitedGames
+      }
+    },
+    containerRightClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerRight420Games
+      } else if (width <= 960) {
+        return this.$style.containerRight960Games
+      } else {
+        return this.$style.containerRightGames
+      }
+    },
+    playerContainerType1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.playerContainerType1320Games
+      } else if (width <= 460) {
+        return this.$style.playerContainerType1460Games
+      } else {
+        return this.$style.playerContainerType1Games
+      }
+    },
+    playerContainerClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.playerContainer420Games
+      } else if (width <= 460) {
+        return this.$style.playerContainer460Games
+      } else {
+        return this.$style.playerContainerGames
+      }
+    },
+    iconFavoritesClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.iconFavorites420
+      } else {
+        return this.$style.iconFavorites
+      }
+    },
+    iconFavoritesType1Class() {
+      const width = this.elementSize.width
+      if (width <= 320) {
+        return this.$style.iconFavoritesType1320
+      } else {
+        return this.$style.iconFavoritesType1
+      }
+    },
+    containerLeftClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.containerLeft420Games
+      } else if (width <= 620) {
+        return this.$style.containerLeft620Games
+      } else {
+        return this.$style.containerLeftGames
+      }
+    },
+    positionContainerClass() {
+      const width = this.elementSize.width
+      if (width <= 620) {
+        return this.$style.positionContainer620
+      } else {
+        return this.$style.positionContainer
+      }
+    },
+    rowwPlayerClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.rowwPlayer420Games
+      } else if (width <= 460) {
+        return this.$style.rowwPlayer460Games
+      } else if (width <= 960) {
+        return this.$style.rowwPlayer960Games
+      } else {
+        return this.$style.rowwPlayerGames
+      }
+    },
+  },
+  setup() {
+    const myDivRef2 = ref('myDivRef2')
+    const { elementSize } = useElementSize(myDivRef2)
+    return {
+      myDivRef2,
+      elementSize,
+    }
+  },
+  props: {
+    typeData: {
+      type: Number,
+      default: 1,
+    },
+    canPlayVideos: {
+      type: Boolean,
+      default: false,
+    },
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+    teamWidget: {
+      type: Number,
+      default: 0,
+    },
+    type: { type: Number, default: 0 },
+    typeView: { type: Number, default: 0 },
+    isExpanded: { type: Boolean, default: false },
+    background: { type: String, default: '#172531' },
+    height: { type: String, default: '35px' },
+    fontColor: { type: String, default: '#F4F4F4' },
+    fontSize: { type: String, default: '12px' },
+    fontFamily: { type: String, default: 'Poppins-Regular' },
+    data: { type: Object, default: () => {} },
+    game: { type: Object, default: () => {} },
+    colorArrow: { type: String, default: '#D9D9D9' },
+    buttonTextValue: { type: String, default: 'Ver videos' },
+    iconVideos: {
+      type: String,
+      default: 'https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png',
+    },
+    iconSize: { type: String, default: '13px' },
+    iconSizeMini: { type: String, default: '13px' },
+    iconPosition: { type: String, default: 'left' },
+    buttonWidth: { type: String, default: '93px' },
+    buttonWidthMini: { type: String, default: '24px' },
+    buttonHeightMini: { type: String, default: '24px' },
+    buttonHeight: { type: String, default: '30px' },
+    buttonRadius: { type: String, default: '30px' },
+    buttonBorderWidth: { type: Number, default: 1 },
+    buttonBackground: { type: String, default: '#ffffff1a' },
+    buttonfontFamily: { type: String, default: 'Poppins-Regular' },
+    buttonBorderColor: { type: String, default: '#55636e' },
+    buttonFontSize: { type: String, default: '10px' },
+  },
+  data: () => ({
+    expand: false,
+  }),
+  methods: {
+    clickExpand(id_player) {
+      //      this.expand = !this.expand
+      this.$emit('expand', { expand: !this.isExpanded, id: id_player })
+    },
+    emitEventMedia(data) {
+      this.$emit('mediadata', data)
+    },
+  },
+}
+</script>
+<style module>
+@import '/css/fonts.css';
+.rotate {
+  transform: rotate(180deg);
+}
+:root {
+  /* fonts */
+
+  /* font sizes */
+  --font-size-3xsrow: 14px;
+  --font-size-xsrow: 12px;
+  --font-size-2xsrow: 11px;
+  --color-darkslategray-100row: #183143;
+
+  /* Colors */
+  --color-gray-100row: #172531;
+  --color-gray-200row: rgba(255, 255, 255, 0.16);
+  --color-gray-300row: rgba(255, 255, 255, 0.08);
+
+  --color-whitesmokerow: #f4f4f4;
+  --color-darkslategrayrow: #183143;
+
+  /* Gaps */
+  --gap-13xlrow: 32px;
+  --gap-0row: 0px;
+  --gap-5xlrow: 24px;
+  --gap-baserow: 16px;
+  --gap-19xlrow: 38px;
+  --gap-3xsrow: 10px;
+  --gap-6xsrow: 7px;
+  --gap-9xlrow: 28px;
+  --gap-xsrow: 12px;
+  --gap-midrow: 17px;
+
+  /* Paddings */
+  --padding-xlrow: 0px;
+  --padding-lgrow: 18px;
+  --padding-9xlrow: 28px;
+  --padding-xsrow: 12px;
+  --padding-9xsrow: 4px;
+  --padding-4xsrow: 9px;
+  --padding-baserow: 16px;
+
+  /* Border radiuses */
+  --br-45xlrow: 64px;
+}
+/* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
+/* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
+/* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
+.positionContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.positionContainer620 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-xsrow);
+}
+.rowwPlayerGames {
+  align-self: stretch;
+  display: flex;
+  height: v-bind(height) !important;
+  flex-direction: row;
+  padding: var(--padding-xlrow) var(--padding-lgrow) var(--padding-xlrow) var(--padding-lgrow);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-13xlrow);
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.rowwPlayer960Games {
+  align-self: stretch;
+  display: flex;
+  height: v-bind(height) !important;
+  flex-direction: row;
+  padding: var(--padding-xlrow) var(--padding-lgrow) var(--padding-xlrow) var(--padding-9xlrow);
+  align-items: center;
+  justify-content: flex-start;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-0row);
+}
+.rowwPlayer420Games {
+  align-self: stretch;
+  display: flex;
+  height: v-bind(height) !important;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-0row);
+  padding: 0 13px;
+  box-sizing: border-box;
+}
+.rowwPlayer460Games {
+  align-self: stretch;
+  display: flex;
+  height: v-bind(height) !important;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-0row);
+  padding-left: var(--padding-xsrow);
+  padding-right: var(--padding-xsrow);
+  box-sizing: border-box;
+}
+.containerLeftGames {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  width: 272px;
+}
+.containerLeft420Games {
+  width: 130px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+}
+.containerLeft620Games {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.iconFavoritesType1 {
+  width: 20px;
+  height: 20px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.iconFavoritesType1320 {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+.iconFavorites {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.iconFavorites420 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.playerContainerGames {
+  position: relative;
+  width: 233px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-midrow);
+  text-align: left;
+  margin-left: 0px;
+  font-family: v-bind(fontFamily);
+}
+.playerContainer420Games {
+  position: relative;
+  width: 189px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  margin-left: 14px;
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-xsrow);
+}
+.playerContainer460Games {
+  position: relative;
+  width: 180px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  margin-left: 25px;
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-xsrow);
+}
+.playerContainerType1Games {
+  width: 200px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 17px;
+  text-align: left;
+  font-family: var(--font-poppins);
+}
+.playerContainerType1320Games {
+  width: 80px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  font-family: var(--font-poppins);
+  gap: var(--gap-xsrow);
+}
+.playerContainerType1460Games {
+  width: 169px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  font-family: var(--font-poppins);
+  gap: var(--gap-xsrow);
+}
+.imgPlayerIcon {
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  margin-left: 7px;
+  object-fit: cover;
+  border-radius: 60px;
+  object-position: top;
+  background: #ffffff;
+}
+.imgPlayerIcon460 {
+  position: absolute;
+  width: 30px;
+  object-fit: cover;
+  border-radius: 60px;
+  height: 30px;
+  margin-left: 0px;
+  object-position: top;
+  background: #ffffff;
+}
+.imgPlayerIcon420 {
+  position: absolute;
+  width: 24px;
+  object-fit: cover;
+  border-radius: 60px;
+  height: 24px;
+  margin-left: 0px;
+  object-position: top;
+  background: #ffffff;
+}
+.manchesterUnitedGames {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  left: 60px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 130px;
+  white-space: nowrap;
+}
+.manchesterUnited360Games {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 20px;
+  font-weight: 500;
+  left: 47px;
+  width: 120px;
+}
+.manchesterUnited420Games {
+  position: relative;
+  letter-spacing: 0.2px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 20px;
+  font-weight: 500;
+  left: 47px;
+  width: 120px;
+}
+.manchesterUnited460Games {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 130px;
+  white-space: nowrap;
+  left: 40px;
+  font-size: var(--font-size-2xsrow);
+}
+.containerRightGames {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-family: var(--font-poppins);
+}
+.containerRight960Games {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-family: var(--font-poppins);
+  gap: var(--gap-0row);
+}
+.containerRight420Games {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-family: var(--font-poppins);
+  width: auto;
+  align-self: unset;
+}
+.numberOfVideos {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+.numberOfVideos620 {
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+  display: flex;
+}
+.block02Games {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-5xlrow);
+  text-align: left;
+  width: 190px;
+}
+
+.block02960Games {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-5xlrow);
+  text-align: left;
+}
+
+.block02620Games {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: var(--gap-baserow);
+}
+.block02420Games {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  justify-content: flex-end;
+  gap: var(--gap-0row);
+}
+.verVideos {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+.verVideos620 {
+  display: none;
+}
+.numberPosition {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.shapeIcon {
+  position: relative;
+  width: 17px;
+  height: 16.46px;
+}
+.chivasIcon {
+  position: absolute;
+  margin: 0 !important;
+  top: 8px;
+  left: 17px;
+  width: 17px;
+  height: 17px;
+  object-fit: cover;
+  z-index: 2;
+}
+
+.imgTeamIcon {
+  position: relative;
+  height: 28px;
+  object-fit: cover;
+}
+.teamName {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.nameTeamGames {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-3xsrow);
+  text-align: left;
+}
+.dfC {
+  text-decoration: underline;
+}
+.position {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.age {
+  flex: 1;
+  position: relative;
+  text-decoration: underline;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.manchesterUnitedIcon {
+  position: relative;
+  width: 21px;
+  height: 21px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.country {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.playedGames {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.playedMinutes {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.block01 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.leagueName {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.roleCharacterIcon {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.btnVideosGames {
+  border-radius: var(--br-45xlrow);
+  background-color: var(--color-gray-300row);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--color-gray-200row);
+  box-sizing: border-box;
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  padding: var(--padding-9xsrow) var(--padding-4xsrow);
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-6xsrow);
+}
+
+.containerBtnVideosGames {
+  width: 90px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-3xsrow);
+  font-size: var(--font-size-3xsrow);
+  color: v-bind(fontColor);
+}
+.containerBtnVideos620Games {
+  width: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-3xsrow);
+  color: v-bind(fontColor);
+}
+.containesOptions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlrow);
+}
+.arrowExpandIcon {
+  position: relative;
+  width: 12px;
+  height: 8px;
+}
+.arrowExpandIcon:hover {
+  opacity: 0.5;
+  cursor: pointer;
+}
+.rowTeam {
+  align-self: stretch;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-xl);
+  z-index: 1;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  /*  border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
+}
+.rowTeam420 {
+  align-self: stretch;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+
+  z-index: 1;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-0row);
+}
+.rowTeam320 {
+  align-self: stretch;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 1;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+
+  padding-left: var(--padding-xsrow);
+  padding-right: var(--padding-xsrow);
+  box-sizing: border-box;
+  gap: var(--gap-0row);
+}
+.rowTeam460 {
+  align-self: stretch;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 1;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+
+  padding-left: var(--padding-xsrow);
+  padding-right: var(--padding-xsrow);
+  box-sizing: border-box;
+  gap: var(--gap-0row);
+}
+.rowTeam350 {
+  align-self: stretch;
+  height: 72px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 1;
+  text-align: right;
+  background-color: v-bind(background);
+  font-size: v-bind(fontSize);
+  color: v-bind(fontColor);
+  font-family: v-bind(fontFamily);
+  gap: var(--gap-0row);
+  padding-left: var(--padding-xsrow);
+  padding-right: var(--padding-xsrow);
+  box-sizing: border-box;
+}
+.containerLeftType1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.containerLeftType1680 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.containerLeftType1320 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 130px;
+  gap: var(--gap-baserow);
+}
+.containerLeftType1350 {
+  gap: var(--gap-xsrow);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.positionContainertype1 {
+  width: 34px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.positionContainertype1380 {
+  width: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.positionContainertype1680 {
+  width: 34px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-xsrow);
+}
+.positionContainertype1420 {
+  width: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-baserow);
+}
+.manchesterUnitedType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.manchesterUnitedType1460 {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  font-size: var(--font-size-2xsrow);
+}
+.manchesterUnitedType1320 {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  width: 30px;
+}
+.containerRightType1Games {
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0px;
+  text-align: center;
+  font-family: var(--font-poppins);
+}
+.containerRightType1420Games {
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-family: var(--font-poppins);
+  gap: var(--gap-0row);
+}
+.containerRightType1320Games {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  font-family: var(--font-poppins);
+  width: auto;
+  align-self: unset;
+}
+.teamNameWrapperType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.teamNameWrapperType1960 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.teamNameWrapperType11086 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ageWrapperType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ageWrapperType1680 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  display: none;
+}
+.ageWrapperType11086 {
+  flex: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.ageType1 {
+  flex: 1;
+  position: relative;
+  text-decoration: underline;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.ageType1960 {
+  display: none;
+}
+.playedGamesWrapperType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.playedGamesWrapperType1680 {
+  display: none;
+}
+.playedGamesWrapperType1960 {
+  display: none;
+}
+.playedGamesType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.playedGamesType1540 {
+  text-align: center;
+  display: none;
+}
+.playedGamesType1960 {
+  display: none;
+}
+.playedGamesType11086 {
+  display: none;
+}
+.playedMinutesWrapperType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.playedMinutesWrapperType11086 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+}
+.playedMinutesType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.playedMinutesType1680 {
+  display: none;
+}
+.block02Type1Games {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-5xlrow);
+}
+.block02Type1680Games {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-0row);
+}
+.block02Type1320Games {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-0row);
+}
+
+.block02Type1350Games {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-0row);
+}
+.leagueNameWrapperType1 {
+  align-self: stretch;
+  background-color: var(--color-darkslategray-100row);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.leagueNameWrapperType1680 {
+  display: none;
+}
+.leagueNameWrapperType1960 {
+  align-self: stretch;
+  background-color: var(--color-darkslategray-100row);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.leagueNameType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+  display: inline-block;
+  width: 64px;
+  flex-shrink: 0;
+}
+
+.leagueNameType1960 {
+  display: flex;
+  position: relative;
+  letter-spacing: 0.2px;
+  justify-content: center;
+  line-height: 20px;
+  font-weight: 500;
+  width: 64px;
+  flex-shrink: 0;
+}
+.numberOfVideosType1 {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+  display: none;
+}
+.numberOfVideosType1680 {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+  display: flex;
+}
+.numberOfVideosType11232 {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+  display: none;
+}
+.vectorIconType1 {
+  position: absolute;
+  margin: 0 !important;
+  height: 12.57%;
+  width: 1.1%;
+  top: 71.71%;
+  right: 92.27%;
+  bottom: 15.71%;
+  left: 6.62%;
+  max-width: 100%;
+  overflow: hidden;
+  max-height: 100%;
+  display: none;
+  opacity: 0.3;
+  z-index: 2;
+}
+
+.block01TitlesType1 {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.numberPositionType1 {
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.shapeIconType1 {
+  position: relative;
+  width: 17px;
+  height: 16.46px;
+}
+
+.tijuanaIconType1 {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  object-fit: cover;
+}
+.tijuanaWrapperType1 {
+  width: 32px;
+  height: 32px;
+  background: #ffffff;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.tijuanaWrapperType1NoBg {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.teamNameType1 {
+  flex: 1;
+  position: relative;
+  letter-spacing: 0.2px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.roleCharacterIconType1 {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.verVideosType1 {
+  position: relative;
+  letter-spacing: -0.03em;
+  line-height: 120%;
+  font-weight: 500;
+}
+.btnVideosType1Games {
+  border-radius: 64px;
+  background-color: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  box-sizing: border-box;
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  padding: 4px 9px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+
+.containerBtnVideosType1Games {
+  width: 90px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: left;
+  font-size: var(--font-size-3xsrow);
+  color: var(--color-white);
+}
+.containesOptionsType1Games {
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--gap-19xlrow);
+}
+.arrowExpandIconType1 {
+  position: relative;
+  width: 10px;
+  height: 5px;
+}
+
+.templateTablaProductividadType1 {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  font-size: var(--font-size-xsrow);
+  color: var(--color-white);
+  font-family: var(--font-poppins);
+}
+.verVideosType11232 {
+  display: flex;
+}
+
+.templateTablaProductividadType1320 {
+  min-width: 320px;
+}
+
+.verVideosType1680 {
+  display: none;
+}
+</style>