.page {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2%;
    flex-direction: column;
    text-align: center;
    position: relative;
}

@media screen and (max-width: 625px) {
    .page{
        padding-bottom:460px !important;
    }
}

.content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    color: white;
    gap:64px;
    flex-wrap: wrap;
    margin-bottom: 25%;
}


@media only screen and (max-width: 530px) {
    .tlHeader{
        flex-direction: column;
        height: fit-content !important;
        gap:10px;
    }
    .content{
      width:96%;
    }
    #leaderboard-ajax-table{
      overflow-x: auto;
      overflow-y: hidden;
      border:1px solid var(--slate-steel);
      border-radius: 0 0 12px 12px;
    }
    .table-wrapper table th{
      font-size:12px !important;
    }
    .table-wrapper table td{
      font-size:14px !important;
      padding:8px !important;
    }
    .table-wrapper .team-members a, .team-members span{
      font-size:12px !important;
    }
    .pfp img{
      width: 20px !important;
    }
    .table-right{
      justify-content: flex-end !important;
      width: 100%;
    }
    #scrollbar{
      display: block !important;
    }
    .team-header{
      min-width: 150px !important;
    }
    .chevron img{
      width: 18px !important;
    }
}

.team-header{
  text-align: start;
  min-width: 300px;
}

.points-header{
  width: 190px;
  min-width: 190px;
}

.adt-stats-td{
  width:1px;
  white-space: nowrap;
}


#scrollbar{
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  border-left:1px solid var(--slate-steel);
  border-right: 1px solid var(--slate-steel);
}

/* Wspólne style dla obu scrollbarów */
#scrollbar::-webkit-scrollbar, 
#leaderboard-ajax-table::-webkit-scrollbar {
  height: 12px;
}

#scrollbar::-webkit-scrollbar-track,
#leaderboard-ajax-table::-webkit-scrollbar-track {
  border-radius: 0;
  background: #2a2c33;
  scrollbar-width: 2px;
}

/* Handle */
#scrollbar::-webkit-scrollbar-thumb,
#leaderboard-ajax-table::-webkit-scrollbar-thumb {
  background: #33363d;
  border-radius: 0;
}

/* Handle on hover */
#scrollbar::-webkit-scrollbar-thumb:hover,
#leaderboard-ajax-table::-webkit-scrollbar-thumb:hover {
  background: #4a4e58;
}


.scroll-content{
  height: 1px;
  background-color: var(--slate-steel);
}


.table-div table{
    width: 100%;
}

.showDetails:hover{
    background-color: #1d1e24;
}


.teamMember{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap:4px;
}

.rank img{
    height: 28px;
    vertical-align: middle;
}

.firstPlace{
    color:#fdd064;
    font-weight: 700;
}

.secondPlace{
    color:#dfdfdf;
    font-weight: 600;
}

.thirdPlace{
    color:#e3b188;
    font-weight: 500;
}

.chevron {
    position: absolute;
    right: 12px;
    user-select: none;
    top:8px;
}

.chevron img {
    width: 24px;
    transition:transform 100ms ease-in-out;
}

.table-wrapper .team-members a, .team-members span{
    font-size:16px;
    align-items: center;
}

.team-members td{
  padding:7px !important;
}


.leaderboard-loading-wrapper{
    background-color: #16171b;
    padding:100px 0 80px 0;
    border:1px solid var(--slate-steel);
}

.loader {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    color: #acacac;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
  }
  
  @keyframes animloader {
    0% {
      box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    25% {
      box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
    }
    50% {
      box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
    }
    75% {
      box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    100% {
      box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
  }

  .br-adt-stats-box{
    background-color: #212229;
    border:1px solid var(--slate-steel);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    min-height: 32px;
    border-radius: 4px;
    padding:8px;
    gap:3px;
  }

  .br-adt-stats{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left:5px;
  }

  .br-adt-stats span{
    width: 100%;
    text-align: start;
  }

  .br-adt-header{
    color:#efefef !important;
    font-size:15px !important;
    width: 100% !important;
    margin-left:2px !important;
  }

  .br-adt-stat{
    color:rgb(169, 169, 169) !important;
    font-weight: 400 !important;
    font-size:12px  !important;
  }

  .br-adt-stat b{
    color:rgb(210, 210, 210);
    font-weight: 600;
  }

  .table-right{
    align-items: center !important;
  }

  #refresh-time{
    color:gray;
    font-size:12px;
    font-family: Montserrat;
    text-align: end;
}

#refresh-time span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:2px;
}

#refresh-time span img{
    height: 12px;
    width: 12px;;
}


#auto-refresh{
  display: none;
}

#auto-refresh-label{
  text-decoration: none;
  color:var(--cloudy-white);
  background-color: var(--translucid-dark);
  border:1px solid rgb(66, 66, 66);
  border-radius: 6px;
  padding:8px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
  display:flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  font-size:16px;
  font-weight: 400;
  user-select: none;
  cursor: var(--custom-pointer);
  font-family: Montserrat;
  position: relative;
}

#auto-refresh-label span{
  content:'';
  height: 2px;
  width: 0px;
  background-color: var(--main-green);
  position: absolute;
  left:1px;
  bottom:0;
  border-radius: 0 0 1px 1px;
}

#auto-refresh-label svg{
  height: 14px;
  width: 14px;
}

#auto-refresh:checked + #auto-refresh-label svg g{
  stroke:var(--main-green)
}

#auto-refresh:checked + #auto-refresh-label span{
  animation: auto-refresh-loader 60s linear infinite;
}

@keyframes auto-refresh-loader {
      from{
          width: 0;
      }
      to{
        width: 98.5%;
      }
}