@golstats/gsc-lineups-reports 1.0.1

package/src/components/gsc-header-postmatch-lineup.vue

@@ -0,0 +1,968 @@
+<template>
+    <div :class="$style.gscheaderlineup" >
+        <div :class="$style.headerSeccionAlineaciones">
+            <div :class="headerSeccionAlineaciones1Class" id="header-desktop">
+              <!-- alineaciones switch --> 
+            <div :class="$style.groupsLeagueParent">
+                <div :class="$style.groupsLeague">
+                <span>Las alineaciones de este partido </span>
+                <span :class="$style.anNoEstn">aún no están disponibles</span>
+                <span>. Por lo pronto puedes ver alineaciones:</span>
+                </div>
+                <div :class="$style.switchStatesBig" id="switch-lineup">
+               
+                    </div>
+            </div>
+            <!-- alineaciones switch --> 
+            <div :class="$style.matchContainer" id="match-container">
+                <div :class="$style.homeTeamContainer">
+                <div :class="$style.teamContainer">
+                    <div :class="$style.imgHomeTeamWrapper">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+                    />
+                    </div>
+                </div>
+                <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+                </div>
+                <div :class="$style.scoreContainerWrapper">
+                <div :class="$style.scoreContainer" v-if="!isLive">
+                    <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[0] }}</div>
+                    <div :class="$style.div">-</div>
+                    <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[1] }}</div>
+                </div>
+                <div :class="$style.titleSession">{{ gameInfo.season_name !== undefined ? gameInfo.season_name + '&nbsp; | &nbsp;' + remplazarMxJor(gameInfo.matchday_abbreviation) + '&nbsp; | &nbsp;' + gameInfo.home_team_abbreviation + ' - ' + gameInfo.away_team_abbreviation : '' }}</div>
+                </div>
+                <div :class="$style.awayTeamContainer">
+                <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+                <div :class="$style.teamContainer1">
+                    <div :class="$style.imgHomeTeamWrapper">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+                    />
+                    </div>
+                </div>
+                </div>
+            </div>
+            <div :class="$style.sliderMatches">
+            </div>
+            <div :class="$style.matchContainer1">
+                <div :class="$style.btnFilterParent">
+                <button :class="$style.btnFilter" id="btn-filters">
+                    <div :class="$style.sortParent">
+                    <img :class="$style.sortIcon" alt="" src="/icn-filter.svg" />
+                    <div :class="$style.filtros">Filtros</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/icn-expand-arrow.svg" />
+                </button>
+                <button :class="$style.btnFilter1" id="btn-filters">
+                    <div :class="$style.sortParent">
+                    <div :class="$style.filtros">Jornada</div>
+                    <div :class="$style.filtros">2</div>
+                    </div>
+                    <img :class="$style.shapeIcon" alt="" src="/icn-expand-arrow.svg" />
+                </button>
+                </div>
+                <div :class="$style.match">
+                <div :class="$style.homeTeam">
+                    <img :class="$style.backArrowIcon" alt="" src="/backarrow.svg" />
+                    <div :class="$style.teamContainer2">
+                    <div :class="$style.manchesterUnited">{{ gameInfo.home_team_abbreviation }}</div>
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+                    />
+                    </div>
+                </div>
+                <div :class="$style.scoreContainer1">
+                    <div :class="$style.finalScore" v-if="!isLive">
+                    <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[0] }}</div>
+                    <div :class="$style.div4">-</div>
+                    <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[1] }}</div>
+                    </div>
+                    <div :class="$style.manchesterUnited1">
+                      <template v-if="teamActive == 'home'">
+                        <template v-if="Object.home_match_result == 1">
+                          Ganado
+                        </template>
+                        <template v-if="Object.home_match_result == 2">
+                          Perdido
+                        </template>
+                        <template v-if="Object.home_match_result == 3">
+                          Empatado
+                        </template>
+                      </template>
+                      <template v-else>
+                        <template v-if="Object.visiting_match_result == 1">
+                          Ganado
+                        </template>
+                        <template v-if="Object.visiting_match_result == 2">
+                          Perdido
+                        </template>
+                        <template v-if="Object.visiting_match_result == 3">
+                          Empatado
+                        </template> 
+                      </template>
+                    </div>
+                </div>
+                <div :class="$style.homeTeam">
+                    <div :class="$style.teamContainer2">
+                    <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+                    />
+                    <div :class="$style.manchesterUnited">{{ gameInfo.away_team_abbreviation }}</div>
+                    </div>
+                    <img :class="$style.backArrowIcon" alt="" src="/nextarrow.svg" />
+                </div>
+                </div>
+                <div :class="$style.btnDetails">
+                <div :class="$style.manchesterUnited2">Ver detalles</div>
+                </div>
+            </div>
+            </div>
+            <div :class="headerSeccionAlineaciones2Class" id="header-mobile">
+            <div :class="$style.switchStatesBig1" id="switch-lineup">
+              
+            </div>
+            <div :class="$style.containerData">
+                <div :class="$style.manchesterUnited13">Alineación utilizada en:</div>
+                <div :class="$style.matchContainer2" id="match-container">
+                <div :class="$style.homeTeamContainer1">
+                    <div :class="$style.teamContainer">
+                    <div :class="$style.imgHomeTeamWrapper">
+                        <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
+                        />
+                    </div>
+                    </div>
+                    <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
+                </div>
+                <div :class="$style.scoreContainer2" v-if="!isLive">
+                    <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[0] }}</div>
+                    <div :class="$style.div">-</div>
+                    <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">{{ gameInfo.score[1] }}</div>
+                </div>
+                <div :class="$style.homeTeamContainer1">
+                    <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
+                    <div :class="$style.teamContainer1">
+                    <div :class="$style.imgHomeTeamWrapper">
+                        <img
+                        :class="$style.imgHomeTeamIcon"
+                        alt=""
+                        :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
+                        />
+                    </div>
+                    </div>
+                </div>
+                </div>
+                <div :class="$style.sliderMatches1">
+                  
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+    
+      
+    <script>
+    import '@@/@golstats/gsc-carousel/dist/style.css'
+    import { GSCCarousel } from '@golstats/gsc-carousel'
+    import { GscSwitchComponent } from '@golstats/gsc-switch-component'
+    import '@@/@golstats/gsc-switch-component/dist/style.css'
+    export default {
+        components: {GSCCarousel, GscSwitchComponent},
+        props: { 
+          optionSelected: {
+          type: String,
+          default: 'Historicos',
+        },
+          widthSize: {
+              type: Number,
+              default: 0
+          },
+          isLive: {
+              type: Boolean,
+              default: false
+          },
+          gameInfo: {
+              type: Object,
+              default: () => {},
+          },
+          teamActive: {
+              type: String,
+              default: 'home',
+          },
+          gameHistoric: {
+              type: Array,
+              default: () => [],
+          },
+        },
+        watch: {
+          gameInfo: {
+              immediate: true,
+              handler: async function (newValue) {
+                  try {
+                    this.$emit('input', { season_id: newValue.season_id, game_id: newValue.id });
+                  } catch (e) {
+                      throw new Error(e);
+                  }
+              },
+          },
+      },
+        data() {
+            return {
+              selectedOption: 0,
+              updateIndex: 0,
+              test:  [
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL 12 '`, icon: 'goal' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL  73'`, icon: 'goal' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL 53'`, icon: 'red-card' },
+                  { description: `Clausura 2018  I  JOR 5  I  CHI - ATL  123'`, icon: 'yellow-card' },
+              ],
+            }
+        },
+        computed: {
+          headerSeccionAlineaciones2Class(){
+            const width = this.widthSize;
+            if (width <= 540) {
+              return this.$style.headerSeccionAlineaciones2540;
+            } else if (width <= 1200) {
+              return this.$style.headerSeccionAlineaciones21200;
+            } else{
+              return this.$style.headerSeccionAlineaciones2;
+            }
+          },
+          headerSeccionAlineaciones1Class(){
+            const width = this.widthSize;
+            if (width <= 540) {
+              return this.$style.headerSeccionAlineaciones1540;
+            } else{
+              return this.$style.headerSeccionAlineaciones1;
+            }
+          },  
+        },
+        methods: {
+          remplazarMxJor(val){
+            return val.replace("M", "JOR ");
+          },
+          changeCarouselItem(val){
+            this.$emit('input', { season_id: val.selectedItem.season, game_id: val.selectedItem.game, ht_abrev: val.selectedItem.home_team_abbreviation, at_abrev: val.selectedItem.away_team_abbreviation });
+            this.selectedOption = val.selectedItemIndex;
+            this.updateIndex += 1;
+          },
+          clickOnSelectOption(val){
+        this.$emit('clickOnSelectOption', val);
+
+      }
+        }
+    };
+    </script>
+      
+    <style module>
+   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-poppinshi: Poppins;
+  --font-interhi: Inter;
+
+  /* font sizes */
+  --font-size-3xshi: 10px;
+  --font-size-xshi: 12px;
+  --font-size-smhi: 14px;
+  --font-size-2xshi: 11px;
+  --font-size-4xshi: 9px;
+  --font-size-base-2hi: 15.2px;
+
+  /* Colors */
+  --color-gray-100hi: #172632;
+  --color-gray-200hi: #172531;
+  --color-gray-300hi: rgba(255, 255, 255, 0.7);
+  --color-gray-400hi: rgba(255, 255, 255, 0.3);
+  --color-white: #fff;
+  --color-yellowgreen-100hi: #cbee6b;
+  --color-yellowgreen-200hi: #cbed6e;
+  --color-whitesmokehi: #f4f4f4;
+  --color-darkbluehi: #0234c5;
+  --color-darkslategrayhi: #1e2b36;
+  --color-goldenrodhi: #f7c330;
+  --color-redhi: #ff0000;
+  --color-slategrayhi: #56637b;
+  --color-gray-700hi: rgba(255, 255, 255, 0.7);
+  --color-gray-100re: #172632;
+  --color-gray-200re: #172531;
+  --color-gray-300re: rgba(255, 255, 255, 0.05);
+  --color-gray-400re: rgba(255, 255, 255, 0.2);
+  --color-gray-500: rgba(255, 255, 255, 0.3);
+  --color-gray-600: rgba(255, 255, 255, 0.1);
+  --color-gray-700re: rgba(255, 255, 255, 0.7);
+  --color-goldenrodre: #f7c330;
+  --color-redre: #ff0000;
+  --color-yellowgreen-100re: #cbed6e;
+  --color-yellowgreen-200re: #cbee6b;
+  --color-darkbluere: #0234c5;
+  --color-darkslategrayre: #1e2b36;
+  --color-slategrayre: #56637b;
+
+  /* Spacing */
+  --sizes-round-corner-round-corner-32hi: 32px;
+  --sizes-spacing-space-24hi: 24px;
+
+  /* Gaps */
+  --gap-basehi: 16px;
+  --gap-3xshi: 10px;
+  --gap-7xshi: 6px;
+  --gap-11xshi: 2px;
+  --gap-8xshi: 5px;
+  --gap-40xlhi: 59px;
+  --gap-4xshi: 9px;
+  --gap-11xlhi: 30px;
+
+  /* Paddings */
+  --padding-basehi: 16px;
+  --padding-5xlhi: 24px;
+  --padding-xshi: 12px;
+  --padding-7xshi: 6px;
+  --padding-11xshi: 2px;
+  --padding-3xshi: 10px;
+  --padding-29xlhi: 48px;
+  --padding-xlhi: 20px;
+  --padding-5xshi: 8px;
+
+  /* Border radiuses */
+  --br-9xshi: 4px;
+  --br-2xs-2hi: 10.2px;
+  --br-31xlhi: 50px;
+  --br-13xlhi: 32px;
+  --br-12xshi: 1px;
+  --br-12xsre: 1px;
+  --br-2xs-2re: 10.2px;
+  --br-mid-4: 17.4px;
+  --br-5xsre: 8px;
+  --br-31xlre: 50px;
+  --br-13xlre: 32px;
+  --br-3xs-6re: 9.6px;
+}
+.selectoritem{
+  width: 100%;
+  color: rgba(255, 255, 255, 0.70);
+  text-align: center;
+  font-family: Poppins, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 143.322%;
+  letter-spacing: -0.14px;
+}
+.selectoritem2{
+  width: 100%;
+  color: rgba(255, 255, 255, 0.70);
+  text-align: center;
+  font-family: Poppins, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 143.322%;
+  letter-spacing: -0.14px;
+}
+.gscheaderlineup{
+    width: 100%;
+    height: auto;
+    display: inline-block;
+    margin-bottom: 40px;
+}
+
+    .anNoEstn {
+    font-weight: 500;
+  }
+  .groupsLeague {
+    position: relative;
+    line-height: 20px;
+    display:none;
+  }
+  .jugadores {
+    position: relative;
+    line-height: 20px;
+    font-weight: 600;
+  }
+  .switchOption {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-darkslategrayhi);
+    border: 0.8px solid var(--color-yellowgreen-100hi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .jugadores1 {
+    position: relative;
+    line-height: 20px;
+    opacity: 0.6;
+  }
+  .switchOption1 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .switchStatesBig {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-gray-100hi);
+    border: 1px solid var(--color-gray-500);
+    display: none;
+    width: 320px;
+    font-size: var(--font-size-xshi);
+    color: var(--color-white);
+  }
+  .groupsLeagueParent {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 30px;
+    text-align: center;
+  }
+  .imgHomeTeamIcon {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    object-fit: cover;
+  }
+  .imgHomeTeamWrapper {
+    border-radius: var(--br-31xlhi);
+    background-color: var(--color-gray-200hi);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+    box-sizing: border-box;
+  }
+  .teamContainer {
+    border-radius: var(--br-31xlhi);
+    border: 1px solid var(--color-darkbluehi);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+  }
+  .name {
+    position: relative;
+    letter-spacing: 0.31px;
+    line-height: 30.87px;
+    font-weight: 500;
+  }
+  .homeTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategrayhi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 0px var(--padding-5xshi);
+    gap: var(--gap-3xshi);
+  }
+  .div {
+    position: relative;
+    font-weight: 600;
+  }
+  .titleSession {
+    font-family: var(--font-poppinshi);
+    font-size: 13px;
+    font-stretch: normal;
+    font-style: normal;
+    letter-spacing: -0.14px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 30px;
+  }
+  .scoreContainer {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-8xshi);
+  }
+  .scoreContainerWrapper {
+    align-self: stretch;
+    width: 323px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    font-size: 14px;
+    color: var(--color-white);
+    font-family: var(--font-interhi);
+  }
+  .teamContainer1 {
+    border-radius: var(--br-31xlhi);
+    border: 1px solid var(--color-yellowgreen-200hi);
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi);
+  }
+  .awayTeamContainer {
+    flex: 1;
+    border-bottom: 1px solid var(--color-slategrayhi);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px 0px var(--padding-5xshi);
+    gap: var(--gap-3xshi);
+  }
+  .matchContainer {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-xshi);
+    color: var(--color-whitesmokehi);
+  }
+  .sliderMatchesChild {
+    position: relative;
+    border-radius: 9.55px;
+    width: 7.02px;
+    height: 14.23px;
+  }
+  .manchesterUnited {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+  }
+  .sliderMatchesItem {
+    position: relative;
+    border-radius: 9.55px;
+    width: 7.02px;
+    height: 14.24px;
+  }
+  .sliderMatches {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-11xshi) var(--padding-basehi);
+    gap: var(--gap-3xshi);
+    text-align: center;
+    width: 350px;
+    margin: 0 auto;
+  }
+  .sortIcon {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .filtros {
+    position: relative;
+    font-size: var(--font-size-smhi);
+    line-height: 24px;
+    font-family: var(--font-poppinshi);
+    color: var(--color-white);
+    text-align: left;
+  }
+  .sortParent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-8xshi);
+  }
+  .shapeIcon {
+    position: relative;
+    width: 8px;
+    height: 4px;
+  }
+  .btnFilter {
+    cursor: pointer;
+    border: 1px solid var(--color-gray-400hi);
+    padding: var(--padding-5xshi) var(--padding-3xshi);
+    background-color: var(--color-gray-300hi);
+    border-radius: var(--br-5xs);
+    box-sizing: border-box;
+    width: 102px;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .btnFilter1 {
+    cursor: pointer;
+    border: 1px solid var(--color-gray-400hi);
+    padding: var(--padding-5xshi) var(--padding-3xshi);
+    background-color: var(--color-gray-300hi);
+    border-radius: var(--br-5xs);
+    box-sizing: border-box;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .btnFilterParent {
+    width: 225px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--gap-xs);
+  }
+  .backArrowIcon {
+    position: relative;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+  }
+  .teamContainer2 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-8xshi);
+  }
+  .homeTeam {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-mini);
+  }
+  .div4 {
+    flex: 1;
+    position: relative;
+    font-weight: 600;
+  }
+  .finalScore {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    border: 0.5px solid var(--color-yellowgreen-100hi);
+    box-sizing: border-box;
+    width: 70.73px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-4xshi);
+  }
+  .manchesterUnited1 {
+    position: relative;
+    font-size: var(--font-size-xshi);
+    font-weight: 500;
+    font-family: var(--font-poppinshi);
+    color: var(--color-gray-700hi);
+  }
+  .scoreContainer1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-4xshi);
+    text-align: center;
+    font-size: 15.22px;
+    color: var(--color-white);
+    font-family: var(--font-interhi);
+  }
+  .match {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 17px;
+  }
+  .manchesterUnited2 {
+    position: relative;
+    text-decoration: underline;
+    font-weight: 500;
+  }
+  .btnDetails {
+    width: 225px;
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    font-size: var(--font-size-xshi);
+  }
+  .matchContainer1 {
+    align-self: stretch;
+    display: none;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 4px 0px 0px;
+  }
+  .goalChild {
+    position: relative;
+    width: 8.03px;
+    height: 8.03px;
+  }
+  .goal {
+    width: 9px;
+    height: 9px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  .manchesterUnited3 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 19.5px;
+    text-transform: capitalize;
+    font-weight: 500;
+  }
+  .minuteEvent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-4xshi);
+  }
+  .yellowCard {
+    position: relative;
+    border-radius: var(--br-12xshi);
+    background-color: var(--color-goldenrodhi);
+    width: 4px;
+    height: 6px;
+  }
+  .awayTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .rectangle {
+    position: relative;
+    border-radius: var(--br-12xshi);
+    background-color: #ff0000;
+    width: 4px;
+    height: 6px;
+  }
+  .homeTeamEvents {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+    text-align: right;
+  }
+  .totalEvents {
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 59px;
+    font-size: var(--font-size-4xshi);
+  }
+  .headerSeccionAlineaciones1 {
+    background-color: var(--color-gray-200hi);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 48px;
+    box-sizing: border-box;
+    gap: var(--gap-basehi);
+  }
+  .switchOption3 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-darkslategrayhi);
+    border: 0.8px solid var(--color-yellowgreen-100hi);
+    box-sizing: border-box;
+    width: 74.8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+  }
+  .switchOption4 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    width: 74px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
+    box-sizing: border-box;
+  }
+  .switchStatesBig1 {
+    border-radius: var(--sizes-round-corner-round-corner-32hi);
+    background-color: var(--color-gray-100hi);
+    border: 1px solid var(--color-gray-500);
+    display: inline-block;
+    width: 280px;
+  }
+  .manchesterUnited13 {
+    position: relative;
+    font-size: 10px;
+    font-weight: 500;
+  }
+  .homeTeamContainer1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-3xshi);
+  }
+  .scoreContainer2 {
+    border-radius: var(--br-mid-4);
+    background-color: var(--color-gray-600);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6.524074554443359px 17.397533416748047px;
+    gap: var(--gap-4xshi);
+    text-align: center;
+    font-size: 15.22px;
+    color: var(--color-white);
+    font-family: var(--font-interhi);
+  }
+  .matchContainer2 {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 0px var(--padding-xshi);
+    text-align: left;
+    color: var(--color-whitesmokehi);
+  }
+  .manchesterUnited14 {
+    position: relative;
+    letter-spacing: -0.01em;
+    line-height: 20.07px;
+    font-weight: 500;
+    z-index: 0;
+  }
+  .sliderMatchesInner {
+    position: absolute;
+    margin: 0 !important;
+    top: 14.31px;
+    left: 261.07px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 1;
+  }
+  .rectangleIcon {
+    position: absolute;
+    margin: 0 !important;
+    top: 0.31px;
+    left: 6.41px;
+    border-radius: 10.21px;
+    width: 14.31px;
+    height: 6.41px;
+    z-index: 2;
+  }
+  .sliderMatches1 {
+    display: inline-block;
+    padding: 0px !important;
+    position: relative;
+    gap:0px !important;
+    width: 280px;
+    margin: 0 auto;
+  }
+  .containerData {
+    align-self: stretch;
+    border-radius: 9px;
+    background-color: #192632;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--padding-basehi) var(--padding-5xlhi) 32px;
+    gap: var(--gap-xs);
+    font-size: var(--font-size-smhi);
+    color: var(--color-gray-700hi);
+  }
+  .headerSeccionAlineaciones2 {
+    align-self: stretch;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-basehi);
+    text-align: center;
+    font-size: var(--font-size-2xshi);
+    color: var(--color-white);
+  }
+  .headerSeccionAlineaciones {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 132px;
+    text-align: left;
+    font-size: var(--font-size-smhi);
+    color: var(--color-gray-700hi);
+    font-family: var(--font-poppinshi); 
+  }
+  .headerSeccionAlineaciones21200 {
+      display: none;
+    }
+    .headerSeccionAlineaciones1540 {
+      display: none;
+    }
+
+    .headerSeccionAlineaciones2540 {
+      display: flex;
+      min-width: 300px;
+      align-self: stretch;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap-basehi);
+    text-align: center;
+    font-size: var(--font-size-2xshi);
+    color: var(--color-white);
+    }
+  
+    </style>
+