i{
  -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
padding:6px 8px 6px 0px;
}
#indexMainWrapper{
  width:100%;
  max-width: 1200px;
  margin:0 auto;
  margin-top:6px;
}
.playerleaderwrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: no-wrap;
  overflow-x: auto;
  gap:0.5%;
}
.leadercard{
  flex: 0 0 60%;
  background:white;
  border:1px solid #f0f0f5;
  margin-bottom:16px;
  >div:nth-child(1){
    padding:18px 8px;
    background-color: #09213b;
    color: #f9f9f9;
    font-size:13px;
    font-weight: bold;
  }
}
.playerleaderPrimary{
  background-color:#dedee6;
  background-image:url(/assets/images/players/sample.png);
  background-repeat: no-repeat;
  background-size:44%;
  background-position: right bottom;
  aspect-ratio: 300/160;
  position: relative;
  padding:0px 12px;
  >div:nth-child(1){
    position:absolute;
    top:12px;
    left:12px;
    font-size:14px;

    color:#222a41;
    margin-top: 12px;
    margin-bottom:12px;
    font-size:15px;
    >div:nth-child(1){
      font-weight: normal;
      color:#222!important;
    }
    >div:nth-child(2){
      font-weight: 400;
      margin:4px 0px;
      font-size:13px;
    }
    >div:nth-child(3){
      font-weight: bold;
    }
  }
  >div:nth-child(2){
    position:absolute;
    bottom:12px;
    left:12px;
    padding:6px 12px;
    font-size:14px;
    font-weight: bold;
    background-color:white;
    color:#222a41;
    display: inline-block;
  }
}
.playerleaderSecondary{
  display: flex;
  justify-content;
  margin: 12px 0px;
  padding:8px 8px;
  font-size:14px;
  >.image{
    flex: 0 0 42px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-image:url(/assets/images/players/sample.png);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
  }
  >div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap:4px;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 0;
    padding:0px 12px;
    >div:nth-child(1){
      font-weight: normal;
      color:#222!important;
    }
    >div:nth-child(2){
      font-weight: bold;
      margin:4px 0px;
      font-size:13px;
    }
  }
  >div:nth-child(3){
    flex: 0 0 52px;
    font-weight: bold;
    color: #052543;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

#indexMainWrapper>div:nth-child(1){
  flex: 1 1 0;
}

#indexMatchList{
  background: white;
  padding:12px;
  .indexMatchList_title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom:12px;
    padding:0px 0px;
  }
}
#indexMatchList .list{
  /* height: 100vh; */
  overflow-x: scroll;
  border-radius: 6px;
  /* padding:18px; */
  display: flex;
  gap: 18px;

  .indexMatchList_title>div:nth-child(1){
    font-weight: bold;
  }
  .indexMatchList_title>div:nth-child(2){
    color: #0268d6;
    font-size: 12px;
  }
  .gamecard{
    flex: 0 0 280px;
    margin-bottom:16px;
    border-radius: 6px;
    border:1px solid #aac;
    background-color:#fefefe;
    padding:12px;
    font-size: 13px;
    a{
      color:#334;
    }
    .action{
      text-align: center;
      margin-top:4px;
      display: block;
      cursor: pointer;
      color: #0268d6
    }
    .teamrow{
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .winner{

    }
    .loser{
      color:#444!important;
      font-weight: normal;
    }
    .gamenamerow{
      padding:6px 0px;
    }
    .gamedate{
      font-size:12px;
      color:#444;
      line-height: 24px;
    }
    .gamelocation{
      font-size:12px;
      color:#444;
      line-height: 20px;
    }
  }
}
#indexPageBanner{

  aspect-ratio:5/3;
  margin-bottom:32px;
  .banner{
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    width:100%;
    aspect-ratio:5/3;
    animation: scaleAnimation 6s;
    animation-fill-mode: forwards; /* Retains final state */
  }
  .bannermessage{
    color: white!important;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Stack title and content vertically */
    justify-content: center;
    align-items: center;
    top:0px;
    left:0px;
    padding: 10px; /* Add some padding */
    box-sizing: border-box; /* Include padding in width/height */
    text-align: center; /* Center text within each child div */
    white-space: pre-line; /* Respect <br> tags and newlines */
  }

  .bannerTitle{
    width: 100%;
  }

  .bannerContent{
    width: 100%;
  }

}
#indexNews .newslist{
  margin-top:12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .newscard{
    color: inherit;
    flex: 0 0 49%;
    border-radius: 4px;
    border:1px solid #ddd;
    gap:1%;
    margin-bottom: 24px;
    background: white;
    .newsimage{
      background-size: cover;
      width: 100%;
      aspect-ratio: 2/1.4;

    }
    .newsinfo{
      padding:12px;

    }
    .newstitle{
      font-weight: bold;
      margin-bottom:8px;
      font-size:14px;
      line-height: 16px;
      height: 32px;
      color: #222222;

    }
    .newsdate{
      font-size:13px;
      color:#223;
    }
  }
}
.subject {
    height: 82px;
    display: flex;
    align-items: center;
    border-left: 4px solid #ffdc11;
    padding: 0px 18px;
    background: white;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
}

.bannerReadMoreButton{
  padding:8px 24px;
  color:white;
  border:2px solid #fff;

}

#mainNews{
  display: flex;
  flex-direction: column;
  gap:15px;
  #indexNews{
    flex: 1 1 0;
  }
  #indexSIAnews{
    flex: 0 0 35%;
    .item{
      background: white;
      border-bottom:1px solid #f0f0f0;
      display: flex;
      .itemimage{
        flex: 0 0 32%;
        background-image:url(/assets/icons/player.png);
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 120px;
      }
      .itemcontent{
        flex: 1 1 0;
        padding:12px 8px;
        .title{
          margin-bottom:12px;
          font-weight: bold;
        }
        .description{
          p{
            font-size:14px;
            line-height: 1.4;
            margin:0;
          }
        }
      }
    }
  }
}
@keyframes scaleAnimation {
  0% { background-size: 110%; }
  100% { background-size: 114%; }
}
#ads{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:42px;
  margin:0 auto;
  max-width: 1200px;
  >div{
    aspect-ratio: 2/1.5;
    flex: 0 0 180px;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.todayhightlightedgame{
  border: 2px solid #ffdc11;
}
@media only screen and (min-width: 768px) {
  .leadercard{
    flex: 0 0 24.5%;
    }
#indexMainWrapper{

}
#mainNews{
  display: flex;
  flex-direction: row;

#indexMainWrapper>div:nth-child(2){
  /* background:green; */
  flex: 0 0 320px;
}

}