.clublist li,
.nationlist li {
    width: 300px;
    padding: 2px 2px 2px 6px;
    margin-bottom: 2px;
}


.pitch {
    background-image: url('https://ftwag.co.uk/wp-content/uploads/2022/09/pitch.png');
    background-position: left;
    background-size: 560px;
    background-repeat: no-repeat;
    /*margin: 30px;*/
    width: 680px;
    height: 676px;
    background-color: green;
}

h1 {
    font-size: 28px;
}

.bench {
    height: 676px;
    position: absolute;
    margin-left: 590px;
    margin-top: -706px;
    background-color: grey;
    width: 120px;
}

ul.nav {
    display: inline;
    margin-left: -40px;
    margin-bottom: 20px;
}

h1, h2, p, a, li {
    font-family: 'Bahnschrift';
}

.hidden {
    display: none;
}

.left {
    width: 720px;
    display: inline-block;
}

.clear {
    clear: both;

}

ol.fixtures {
    column-count: 2;
    width: 510px;
}

p.blurb {
    margin-top: 0px;
    max-width: 550px;
}

h2#selectedmatch {
    margin-bottom: 0px;
    margin-top: 40px;
    font-size: 20px;
}

ol.fixtures li {
    list-style-type: none;
    line-height: 14px !important;
    font-size: 14px !important;
    margin-bottom: 3px;
    margin-left: -40px;
    cursor: pointer;
    background-color: #dd0000;
    width: 250px;
    color: white;
    padding: 3px 5px 3px 5px;
    -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

}

ol.fixtures li a,
ul.nav li a {
    color: white;
    text-decoration: none;
}

ul.nav li {
    list-style-type: none;
    line-height: 14px !important;
    font-size: 14px !important;
    margin-bottom: 3px;
    background-color: #dd0000;
    display: inline;
    color: white;
    padding: 3px 5px 3px 5px;
}

li.fixture a {
   color: white;

}

/*ol.fixtures li.fixture--selected {
    color: #dd0000 !important;
    background-color: silver !important;
}

ol.fixtures li.fixture--selected a {
    color: #dd0000 !important;
}*/

.player {
    height: 109px;
    width: 78px;
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 30px;
    position: absolute;
    color: #dd0000;
    text-align: center;
}

.changed {
    background-color: #dd0000 !important;
    color: white !important;
}

.player p {
    margin-top: 85px;
    width: 76px;
    font-size: 12px;
    text-transform: uppercase;
    background-color: white;
    padding: 1px;
    font-weight: bold;
    height: 14px;

}

.player p.noname {
    display: none;
}

#player-1 {
    background-image: url('images/red01.png');
}

#player-2 {
    background-image: url('images/red02.png');
}

#player-3 {
    background-image: url('images/red03.png');
}

#player-4 {
    background-image: url('images/red04.png');
}

#player-5 {
    background-image: url('images/red05.png');
}

#player-6 {
    background-image: url('images/red06.png');
}

#player-7 {
    background-image: url('images/red07.png');
}

#player-8 {
    background-image: url('images/red08.png');
}

#player-9 {
    background-image: url('images/red09.png');
}

#player-10 {
    background-image: url('images/red10.png');
}

#player-11 {
    background-image: url('images/red11.png');
}

#player-12 {
    background-image: url('images/red12.png');
}

#player-13 {
    background-image: url('images/red13.png');
}

#player-14 {
    background-image: url('images/red14.png');
}

#player-15 {
    background-image: url('images/red15.png');
}

#player-16 {
    background-image: url('images/red16.png');
}

.away {
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -ms-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}

#player-1.away {
    background-image: url('images/grey01.png');
}

#player-2.away {
    background-image: url('images/grey02.png');
}

#player-3.away {
    background-image: url('images/grey03.png');
}

#player-4.away {
    background-image: url('images/grey04.png');
}

#player-5.away {
    background-image: url('images/grey05.png');
}

#player-6.away {
    background-image: url('images/grey06.png');
}

#player-7.away {
    background-image: url('images/grey07.png');
}

#player-8.away {
    background-image: url('images/grey08.png');
}

#player-9.away {
    background-image: url('images/grey09.png');
}

#player-10.away {
    background-image: url('images/grey10.png');
}

#player-11.away {
    background-image: url('images/grey11.png');
}

#player-12.away {
    background-image: url('images/grey12.png');
}

#player-13.away {
    background-image: url('images/grey13.png');
}

#player-14.away {
    background-image: url('images/grey14.png');
}

#player-15.away {
    background-image: url('images/grey15.png');
}

#player-16.away {
    background-image: url('images/grey16.png');
}

.player.toLB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 49px !important;
    margin-top: 420px !important;
}

.player.toLWB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 19px !important;
    margin-top: 330px !important;
}

.player.toLM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 49px !important;
    margin-top: 260px !important;
}

.player.toLF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 40px !important;
    margin-left: 49px !important;
}

.player.toLCM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 177px !important;
    margin-top: 260px !important;
}

.player.toRCM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 305px !important;
    margin-top: 260px !important;
}

.player.toLCF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 177px !important;
    margin-top: 40px !important;
}

.player.toLSS {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 177px !important;
    margin-top: 90px !important;
}

.player.toCCF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 40px !important;
}

.player.toRCF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 305px !important;
    margin-top: 40px !important;
}

.player.toRSS {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 305px !important;
    margin-top: 90px !important;
}

.player.toGK {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 560px !important;
}

.player.toRM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 260px !important;
    margin-left: 433px !important;
}

.player.toRF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 40px !important;
    margin-left: 433px !important;
}

.player.toRWB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 330px !important;
    margin-left: 463px !important;
}

.player.toLCB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 177px !important;
    margin-top: 420px !important;
}

.player.toLLCB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 103px !important;
    margin-top: 420px !important;
}

.player.toCCB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 420px !important;
}

.player.toLLCM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 103px !important;
    margin-top: 260px !important;
}

.player.toLLCF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 103px !important;
    margin-top: 40px !important;
}

.player.toAM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 140px !important;
}

.player.toLW {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 39px !important;
    margin-top: 140px !important;
}

.player.toRW {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 443px !important;
    margin-top: 140px !important;
}

.player.toCCM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 260px !important;
}

.player.toSW {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 450px !important;
}

.player.toDM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 241px !important;
    margin-top: 330px !important;
}

.player.toRRCM {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 260px !important;
    margin-left: 379px !important;
}

.player.toRRCF {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 40px !important;
    margin-left: 379px !important;
}

.player.toRRCB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 420px !important;
    margin-left: 379px !important;
}

.player.toRCB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 420px !important;
    margin-left: 305px !important;
}

.player.toRB {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 420px !important;
    margin-left: 433px !important;
}

.player.tosub1 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 55px !important;
    margin-left: 580px !important;
}

.player.tosub2 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 165px !important;
    margin-left: 580px !important;
}

.player.tosub3 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 275px !important;
    margin-left: 580px !important;
}

.player.tosub4 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 385px !important;
    margin-left: 580px !important;
}

.player.tosub5 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 495px !important;
    margin-left: 580px !important;
}

.player.to12 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 235px !important;
    margin-left: 580px !important;
}

.player.to14 {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-top: 345px !important;
    margin-left: 580px !important;
}

.player.to1start {
    margin-top: 710px !important;
    margin-left: 525px !important;
}

.player.to2start {
    margin-top: 710px !important;
    margin-left: 600px !important;
}

.player.to3start {
    margin-top: 810px !important;
    margin-left: 525px !important;
}
.player.to4start {
    margin-top: 810px !important;
    margin-left: 600px !important;
}

.player.to5start {
    margin-top: 910px !important;
    margin-left: 525px !important;
}

.player.to6start {
    margin-top: 910px !important;
    margin-left: 600px !important;
}

.player.to7start {
    margin-top: 1010px !important;
    margin-left: 525px !important;
}

.player.to8start {
    margin-top: 1010px !important;
    margin-left: 600px !important;
}

.player.to9start {
    margin-top: 1110px !important;
    margin-left: 525px !important;
}

.player.to10start {
    margin-top: 1110px !important;
    margin-left: 600px !important;
}

.player.to11start {
    margin-top: 1210px !important;
    margin-left: 525px !important;
}

.player.to12start {
    margin-top: 1210px !important;
    margin-left: 600px !important;
}

.player.to13start {
    margin-top: 1310px !important;
    margin-left: 525px !important;
}

.player.to14start {
    margin-top: 1310px !important;
    margin-left: 600px !important;
}

.player.to15start {
    margin-top: 1410px !important;
    margin-left: 525px !important;
}

.player.to16start {
    margin-top: 1410px !important;
    margin-left: 600px !important;
}

.player.to17start {
    margin-top: 1510px !important;
    margin-left: 525px !important;
}
.player.to18start {
    margin-top: 1510px !important;
    margin-left: 600px !important;
}

.player.to19start {
    margin-top: 1610px !important;
    margin-left: 525px !important;
}

.player.to20start {
    margin-top: 1610px !important;
    margin-left: 600px !important;
}

.player.to21start {
    margin-top: 1710px !important;
    margin-left: 525px !important;
}

.player.to22start {
    margin-top: 1710px !important;
    margin-left: 600px !important;
}

.player.to23start {
    margin-top: 1810px !important;
    margin-left: 525px !important;
}

.player.to24start {
    margin-top: 1810px !important;
    margin-left: 600px !important;
}

.player.to25start {
    margin-top: 1910px !important;
    margin-left: 525px !important;
}

.player.to26start {
    margin-top: 1910px !important;
    margin-left: 600px !important;
}

.player.outOfSquad {
    display: none;
}



@media screen and (min-width: 1350px) {

    .left {
        float: left;
    }

    .middle {
        float: right;
        display: inline-block;
        width: 450px;
        margin-right: 50px;
    }

    .right {
        float: right;
        display: inline-block;
    }

    .player.to1start {
        margin-top: 710px !important;
        margin-left: 10px !important;
    }
    
    .player.to2start {
        margin-top: 710px !important;
        margin-left: 85px !important;
    }
    
    .player.to3start {
        margin-top: 710px !important;
        margin-left: 160px !important;
    }
    .player.to4start {
        margin-top: 710px !important;
        margin-left: 235px !important;
    }
    
    .player.to5start {
        margin-top: 710px !important;
        margin-left: 310px !important;
    }
    
    .player.to6start {
        margin-top: 710px !important;
        margin-left: 385px !important;
    }
    
    .player.to7start {
        margin-top: 710px !important;
        margin-left: 460px !important;
    }
    
    .player.to8start {
        margin-top: 710px !important;
        margin-left: 535px !important;
    }

    .player.to9start {
        -webkit-transition: 3s;
        -moz-transition: 3s;
        -ms-transition: 3s;
        -o-transition: 3s;
        transition: 3s;
        margin-top: 710px !important;
        margin-left: 610px !important;
    }

    .player.to10start {
        -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
        margin-top: 710px !important;
        margin-left: 685px !important;
    }
    
    .player.to11start {
        margin-top: 710px !important;
        margin-left: 760px !important;
    }
    
    .player.to12start {
        margin-top: 710px !important;
        margin-left: 835px !important;
    }
    
    .player.to13start {
        margin-top: 710px !important;
        margin-left: 910px !important;
    }
    
    .player.to14start {
        margin-top: 710px !important;
        margin-left: 985px !important;
    }
    
    .player.to15start {
        margin-top: 710px !important;
        margin-left: 1060px !important;
    }
    
    .player.to16start {
        margin-top: 710px !important;
        margin-left: 1135px !important;
    }
    
    .player.to17start {
        margin-top: 710px !important;
        margin-left: 1210px !important;
    }
    .player.to18start {
        margin-top: 710px !important;
        margin-left: 1285px !important;
    }
    
    .player.to19start {
        margin-top: 710px !important;
        margin-left: 1360px !important;
    }
    
    .player.to20start {
        margin-top: 710px !important;
        margin-left: 1435px !important;
    }
    
    .player.to21start {
        margin-top: 710px !important;
        margin-left: 1510px !important;
    }
    
    .player.to22start {
        margin-top: 710px !important;
        margin-left: 1585px !important;
    }
    
    .player.to23start {
        margin-top: 710px !important;
        margin-left: 1660px !important;
    }
    
    .player.to24start {
        margin-top: 710px !important;
        margin-left: 1735px !important;
    }
    
    .player.to25start {
        margin-top: 710px !important;
        margin-left: 1810px !important;
    }

    .player.to26start {
        margin-top: 710px !important;
        margin-left: 1885px !important;
    }

    .wrapper{ width: 360px; padding: 20px; }
}