.page{
    width:100%;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.page h1{
    color:rgb(169, 169, 169);
    font-family: Montserrat;
    font-size:32px;
    margin-top:48px;
    text-align: center;
    display: flex;
    align-items: center;
    gap:10px;
    font-weight: 500;
} 

.page h1 a{
    color:var(--cloudy-white);
    text-decoration: none;
    font-weight: 600;
}

.pfp-box{
    width: 48px;
    height: 48px;
    border-radius: 100%;
}

.pfp-box img{
    width: 48px;
    height: 48px;
}

.content{
    display:flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 50rem;
    width:clamp(30rem, 90%, 1600px);
    font-family: Montserrat;
}

.completed_tournaments-wrapper{
    position: relative;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    gap:42px;
    width: 100%;
}

#b2p{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:3px;
    color: #a0a0a0;
    position: absolute;
    right:0;
    top:-69px;
    font-size:14px;
    text-decoration: none;
    font-weight: 400;
    transition: filter 150ms ease-in-out;
}

#b2p img{
    height: 16px;
    filter:brightness(.5)
}

#b2p:hover{
    filter:brightness(1.5);
}

.tournaments-table{
    position: relative;
    width: 100%;
}

.tournaments-table table{
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

.tournaments-table table thead{
    background-color: var(--dark-gunmetal);
    color: var(--cloudy-white);
    border:1px solid var(--slate-steel);
}

.tournaments-table table th{
    font-weight: 400;
    font-size:14px;
    padding: 4px 4px 4px 10px;
}




.tournaments-table table tbody tr:nth-child(even){
    background-color: var(--deep-steel);
    border:1px solid var(--slate-steel);
}

.tournaments-table table tbody tr:nth-child(odd) {
    background-color: var(--graphite);
    border:1px solid var(--slate-steel);
}

.tournaments-table table tbody tr td{
    padding: 12px 5px 12px 10px;
    color:white;
}

.tournaments-table table a{
    color:white;
    text-decoration: none;
    font-weight: 600;
}

.tourney-name-row{
    display:flex;
    align-items: center;
    gap:8px;
}

.trn-info{
    display:flex;
    flex-direction: column;
}

.trn_name{
    color:var(--cloudy-white);
}

.trn_date{
    color:#888889;
    font-weight: 500;
    font-size:12px;
    display:flex;
    align-items: center;
    gap:5px;
}

.privateTrn{
    height: 13px !important;
    width: 13px !important;
}


.tourney-name-row img{
    height: 42px;
    width: 42px;
    border-radius: 4px;
}

.tournaments-table h2{
    color: white;
    font-weight: 500;
    font-size:20px;
    margin: 0px 0px 3px 0px;
}

.tournaments-table hr{
    width:100%;
    border:none;
    background-color: #4c4c57;
    height: 2px;
    border-radius: 2px;
    margin:0 0 0 0;
}

.game_row{
    display:table-cell;
    text-align: center;
}

.game_row img{
    max-height: 24px;
    max-width: 100px;
}

.ranktd img{
    height: 32px;
}



/* Filters styling */

.filters{
    color:white;
    font-family: Montserrat;
    display:flex;
}

/* Hide the default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: var(--custom-pointer);
    height: 0;
    width: 0;
  }
  
  .container {
    position: relative;
    cursor: var(--custom-pointer);
    font-size: 15px;
    user-select: none;
    overflow: hidden;
    margin-bottom:6px;
  }

  .container label{
    cursor: var(--custom-pointer);
  }

  
  /* Create a custom checkbox */
  .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: .8em;
    width: .8em;
    border: 1px solid var(--slate-steel);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  
  /* When the checkbox is checked */
  .container input:checked ~ .checkmark {
    border-image: linear-gradient(-45deg, #29f84b 0%, #cbff0f 100% );
    border-image-slice: 1;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 0.22em;
    top: -2em;
    width: 0.25em;
    height: 0.5em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .container .checkmark::before {
    left: 0.45em;
    top: 2em;
    width: 0.25em;
    height: 0.5em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    top: 0;
  }

  .dateRange{
    display:flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap:5px;
}

.data_input-wrapper{
    display:flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.dateRange input[type="date"]{
    outline:none;
    color-scheme: dark;
    border:1px solid var(--slate-steel);
    height: 22px;
    background: #16171b;
    font-family: Montserrat;
    font-weight: 400;
    width: 125px;
    text-align: center;
}

.data_input-wrapper img{
    width: 18px;
    margin-left:1px;
}

.filter-name{
    display:flex;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    color:var(--cloudy-white);
    gap:5px;
    margin-bottom:5px;
}

.filter-name img{
    height:20px;
    width: 20px;
 }

.filters-box{
    border-radius: 4px;
    min-width:174px;
    margin:0 !important;
}

.filters-box hr, .filters-box-mobile hr{
    background-color: var(--slate-steel);
    border:none;
    height: 1px;
    width:100%;
    border-radius: 4px;
    margin:8px 0 4px 0;
}

#searchbox{
    display:flex;
    justify-content: start;
    flex-direction: column;
    gap:10px;
    align-items: center;
    margin-right:0;
}

#searchbox input{
    width:100%;
    height: 28px;
    border:1px solid var(--slate-steel);
    border-radius: 5px;
    text-indent: 8px;
    font-family: Montserrat;
    font-weight: 500;
    background-color: #1d1f24;
    color:white;
    outline:none;
}

#searchbox{
    position: relative;
}

#gameResults, #mgameResults {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 73px;
    max-height: 200px;
    width:100%;
    overflow: hidden;
    background-color: var(--deep-steel);
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    overflow-x: hidden;
}

#mgameResults{
    left: 5px;
    top: 74px;
}

#gameResults::-webkit-scrollbar, #mgameResults::-webkit-scrollbar {
    width: 4px;
    height: 5px;
}

/* Track */
#gameResults::-webkit-scrollbar-track, #mgameResults::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #333338;
}

/* Handle */
#gameResults::-webkit-scrollbar-thumb, #mgameResults::-webkit-scrollbar-thumb {
    background: #515157;
    border-radius: 10px;
}

/* Handle on hover */
#gameResults::-webkit-scrollbar-thumb:hover, #mgameResults::-webkit-scrollbar-thumb:hover {
    background: #505057;
}

#gameResults table, #mgameResults table {
    border-collapse: collapse;
    width: 100%;
}

#gameResults table tr, #mgameResults table tr{
    background-color: transparent;
}

#gameResults table td, #mgameResults table td {
    padding: 3px;
    transition:background-color 75ms ease-in-out;
}

#gameResults table td:hover, #mgameResults table td:hover {
    background-color: var(--translucid-light);
}

#gameResults button, #mgameResults button {
    font-size: 14px;
    color: var(--cloudy-white);
    border: none;
    font-family: Montserrat;
    font-weight: 500;
    cursor: var(--custom-pointer);
    margin: 0;
    width:100%;
    text-align: start;
    display: block;
    padding: 5px 6px;
    background-color: transparent;
}

#gameResults td, #mgameResults td {
    width: 300px;
    border-bottom: 1px solid #484c50;
    background-color: transparent;
}


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

.checkboxes-groups{
    display:flex;
    flex-direction: column;
    min-width: 32px;
    margin:0 !important;
}

.chkb-group{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap:5px;
    margin:0;
}

.checkboxes input{
    width:16px;
    height: 16px;
}

#appet{
    margin:0;
}

#appet button{
    font-family: Montserrat;
    font-weight: 600;
    width:100%;
    height: 32px;
    margin-top:5px;
    cursor: var(--custom-pointer);
    transition: all 150ms ease-in-out;
    border-radius:4px;
}

#submitBtn, #msubmitBtn{
    border:none;
    background-color: var(--main-green);
    margin-bottom:4px;
    color:var(--cloudy-white);
}

#submitBtn:hover, #msubmitBtn:hover {
    background-color: var(--main-green-hover);
}

#resetBtn, #mresetBtn{
    background-color: #16171b;
    border:1px solid var(--slate-steel);
    color:gray;
}

#resetBtn:hover, #mresetBtn:hover {
    border:1px solid #444652;
}

#submitBtn:active, #resetBtn:active, #msubmitBtn:active, #mresetBtn:active{
    transform:scale(.98);
}

/* Filters styling end */

.filters-box-mobile{
    font-family: Montserrat;
    font-weight: 500;
    color:white;
    font-size:14px;
}

.filters-box-mobile form{
    display:flex;
    gap:10px;
    flex-direction: column;
}

.filters-box-mobile .filter-name{
    font-size:20px;
    margin-bottom:8px;
}

.mobile-filters{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom:16px;
}
.mobile-filters button{
    background-color: transparent;
    border:none;
    cursor: var(--custom-pointer);
    display:flex;
    justify-content: center;
    align-items: center;
    gap:2px;
    flex-direction: column;
    color:white;
    font-family: Montserrat;
    font-weight: 600;
}

.mobile-filters button img{
    height: 24px;
}

.date-desktop{
    text-align: center;
}

.date-mobile{
    display:none;
}

.game-name{
    display:none;
}

.team ul{
    list-style: none;
    padding: 0 0 0 10px;
    margin: 0;
}

.team a{
    font-size:12px;
}

.team b{
    color: gold;
    display:flex;
    align-items: center;
    gap:5px;
}

.team img{
    height: 12px;
}


#filters{
    display:none;
    justify-content: center;
    align-items: center;
}

.table-header-mobile{
    display:none;
    color:white;
    font-family: Montserrat;
    width: 94%;
    background: #2e2e33;
    padding:10px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid grey;
    box-sizing: border-box;
    text-indent: .1rem;
    justify-content: flex-start;
    align-items: center;
    gap:8px;
    font-size:18px;
    font-weight: 600;
}

.table-header-mobile img{
    height: 15px;
}

@media screen and (max-width: 720px) {
    .filters{
        display:none;
    }
    .trnName{
        width:57vw !important;  
    }
    #filters{
        display:flex !important;
    }
    .mobile-filters{
        display:flex !important;
    }
    .completed_tournaments-wrapper{
        justify-content: center;
        flex-direction: column;
    }
    .completed_tournaments-wrapper table{
        margin-left:0 !important;
        width: 94%;
        border-radius: 0 0 8px 8px !important;
    }

    .completed_tournaments-wrapper table th{
        display:none;
    }
    .completed_tournaments-wrapper table td{
        display:block;
        padding: .2rem .5rem !important;
        font-size:15px;
    }
    .completed_tournaments-wrapper table tr{
        border-bottom: 1px solid #808080;
    }
    .completed_tournaments-wrapper table tr:last-child{
        border-bottom: 0px solid #808080;
    }
    .completed_tournaments-wrapper table td::before{
        content:attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
    .game-logo{
        display:none;
    }
    .game-name{
        display:inline !important;
    }
    .date-desktop{
        display:none;
    }
    .date-mobile{
        display:inline !important;
    }
    .content{
        width: 100%;
    }
    .table-header-mobile{
        display:flex !important;
    }

}

.mobile-filters{
    display:none;
}

.stars-wrapper{
    display: flex;
    height: 16px;
    padding:4px 0 4px 0;
    justify-content: center;
}

.stars-wrapper svg{
    height: 16px;
}