:root{
    --mdc-theme-primary: #ff0004;
    --mdc-theme-background: #2e2e2e;
}
body{
    margin: 0px;
    background-color: var(--mdc-theme-background);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
body.active{
    overflow-y: hidden;
}
.mdc-top-app-bar{
    background-color: var(--mdc-theme-primary);
}
.mdc-top-app-bar .mdc-top-app-bar__image{
    width: 30px;
}
.mdc-list-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mdc-list-item:nth-child(1){
    margin-top: 0px;
}
.mdc-list-item{
    margin-top: 16px;
}
.mdc-list-item span{
    padding-left: 10px;
}
.mdc-image-list--masonry{
    column-count: 2;
}
.mdc-image-list__item{
    margin-bottom: 1em;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
main .my-image-list{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
main .my-image-list .mdc-image-list__item{
    width: 45%;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.mdc-image-list__item .mdc-image-list__image{
    width: 80px;
    height: auto;
    object-fit: cover;
}
.mdc-image-list__item .mdc-image-list__paragraph{
    color: black;
    text-align: center;
}
.mdc-image-list__item svg{
    margin-bottom: 10px;
}
.hidden{
    display: none !important;
}
.sheet {
    position: absolute; 
    top: 0;
    width: 100vw;
    margin-left: 0;
    background-color: var(--mdc-theme-background); 
    transition: 0.3s ease;
}
.relative{
    position: relative;
}
.sheet-out-of-view {
    margin-left: -100%;
}
.main {
    height: 100%;
    overflow-y: auto;
}
.mdc-tab{
    background-color: white;
}
.mdc-tab .mdc-tab__text-label{
    color: red;
}
.competitie{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.leagueField{
    width: 50%;
    height: 40px;
    border-radius: 5px;
    font-size: 20px;
    padding-left: 10px;
    outline: 0px solid black;
}
.leagueSearch{
    width: 30%;
    height: 40px;
    color: white;
    background-color: #ff0004;
    border-radius: 5px;
    border: 1px solid #ff0004;
    margin-top: 20px;
    margin-bottom: 20px;
}
.main .stand .standings-table{
    width: 100%;
    border: 1px solid white;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}
.standings-table tr th, .standings-table tr td{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    border-bottom: 1px solid white;
}
.standings-table thead tr th{
    text-align: left;
}
.standings-table tr th:nth-child(1), .standings-table tr td:nth-child(1){
    padding-left: 10px;
}
.standings-table tr th:nth-child(2), .standings-table tr td:nth-child(2){
    padding-left: 10px;
}
.team-info{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.team-info p{
    font-family: Arial, Helvetica, sans-serif;
}
.team-info img{
    width: 40px;
}
.statistieken{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.statistieken .goals{
    order: 1;
}
.statistieken .assists{
    order: 2;
}
.statistieken .yellow{
    order: 3;
}
.statistieken .red{
    order: 4;
}
.statistieken .stats{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.statistieken .stats h2{
    text-align: center;
}
.table-item{
    width: 90%;
    margin: 16px;
    margin-left: 16px;
    margin-right: 16px;
    border: 1px solid white;
    border-collapse: collapse;
}
.table-item tr td:first-child{
    padding-left: 10px;
}
.table-item tr td{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    border-bottom: 1px solid white;
}
.table-item .player-info{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.table-item .player-info img{
    width: 40px;
    height: 40px;
}
.uitslagen, .stand{
    width: 90%;
}
.stand{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.speelronde, .groep{
    width: 100%;
    height: 40px;
}
.speelronde option{
    width: 10%;
}
.match{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.datePicker{
    width: 90%;
    height: 40px;
    font-size: 24px;
    border-radius: 5px;
}
.fixture-group, .standing-group{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fixture-group h2, .standing-group h2{
    width: 100%;
    text-align: center;
}
.fixture-group p{
    width: 100%;
    text-align: center;
}
.matchH2{
    text-align: center;
    font-size: 32px;
}
.match-table{
    width: 100%;
}
.match-table tr{
    width: 100%;
    display: flex;
    align-items: center;
    background-color: grey;
    margin-bottom: 20px;
    border-radius: 5px;
}
.match .match-table tr, .wedstrijden .match-table tr{
    width: 90%;
}
.match-table tbody{
    width: 100%;
}
.match-table tr:first-child{
    margin-top: 20px;
}
.match-table tr td:first-child{
    margin-left: 10px;
    width: 10%;
}
.match-table tr td:nth-child(2){
    margin-left: 20px;
    width: 50%;
}
.match-table tr td:nth-child(3){
    width: 20%;
}
.match-table tr td .scores{
    height: 100%;
}
.match-table tr td .scores p{
    height: 50%;
}
.wedstrijd{
    width: 90%;
    background-color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    border-radius: 5px;
}
main .gebeurtenissen, main .opstelling, main .bank, main .trainer, main .info{
    margin-top: 40px;
}
.matchEvent, .line-up, .bench, .coach, .wedstrijdInfo{
    width: 90%;
    background-color: grey;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
}
.wedstrijdInfo{
    flex-direction: column;
    margin-bottom: 20px;
}
.wedstrijd2{
    width: 100%;
    display: flex;
    justify-content: center;
}
.wedstrijd2 .team{
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wedstrijd2 .team img{
    width: 120px;
}
.wedstrijd2 .score{
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.gebeurtenis{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.home-event, .away-event{
    width: 48%;
    display: flex;
    flex-direction: column;
}
.home-event{
    align-items: flex-start;
}
.away-event{
    align-items: flex-end;
}
.event{
    width: 100%;
    display: flex;
    gap: 10px;
}
.away-event .event{
    flex-direction: row-reverse;
}
.matchEvent .away-event .event{
    flex-direction: row;
}
.home-event .event{
    margin-left: 10px;
}
.matchEvent .home-event .event, .matchEvent .away-event .event{
    display: flex;
    align-items: center;
}
.away-event .event{
    margin-right: 10px;
}
.event .time{
    color: #ff0004;
}
.material-symbols-outlined{
    width: 40px;
    margin-bottom: 10px;
}
.material-symbols-outlined:first-child{
    margin-top: 10px;
}
.eigen-goal{
    filter: invert(21%) sepia(87%) saturate(7491%) hue-rotate(340deg) brightness(94%) contrast(108%);
}
.playerDiv{
    width: 50%;
}
.line-up .home-line-up, .line-up .away-line-up, .bench .home-bench, .bench .away-bench, .coach .home-coach, .coach .away-coach{
    width: 50%;
    display: flex;
    flex-direction: column;
}
.home-line-up div, .away-line-up div, .home-bench div, .away-bench div{
    display: flex;
    gap: 10px;
}
.home-line-up, .home-bench, .home-coach{
    margin-left: 10px;
}
.away-line-up, .away-bench, .away-coach{
    margin-right: 10px;
}
.away-coach{
    align-items: flex-end;
}
.away-line-up div, .away-bench div{
    flex-direction: row-reverse;
}
.home-line-up div p:first-child, .away-line-up div p:first-child, .home-bench div p:first-child, .away-bench div p:first-child{
    color: #ff0004;
}
.competitieInfo, .stadionInfo, .abitrageInfo{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.competitieInfo p:first-child, .stadionInfo p:first-child, .abitrageInfo p:first-child{
    margin-left: 10px;
}
.competitieInfo a p, .stadionInfo p:nth-child(2), .abitrageInfo p:nth-child(2){
    margin-right: 10px;
}
.competitieInfo a{
    text-decoration: none;
    color: red;
    display: flex;
    gap: 10px;
}
.competitieInfo a img{
    width: 30px;
    object-fit: cover;
}
.competities{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wedstrijden{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.favorieten{
    font-size: 28px;
    text-align: center;
}
.mdc-drawer__content{
    background-color: var(--mdc-theme-background);
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--mdc-theme-primary);
}
footer .mdc-tab__icon {
    color: white !important;
}