:root {
    --light: #E9E7EF;

    --caution-color: #c85252;
    --caution-hover: #8c3939;

    --three: #5EBC41;
    --one: #e6ac00;
    --none: #BB2828;
}

::selection {
    background-color: var(--highlight-color);
}
::-moz-selection {
    background-color: var(--highlight-color);
}

input[type=number] {
    -moz-appearance: textfield;
}

.tablet, .web {
    display: none !important;
}
.mobile {display: inline-block !important;}

.hidden {
    display: none;
}

.visable {
    display: block;
}

p {
    font-size: 16px;
}

a, input[type=submit] {
    background-color: var(--button-color);
    color: #e9e7ef;
    cursor: pointer;
    display: block;
    font-size: 18px;
    line-height: 40px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
}

a:hover, input[type=submit]:hover {
    background-color: var(--button-hover);
}

a.double, input[type=submit].double {
    height: 60px;
    line-height: 60px;
}

a.text {
    background-color: transparent;
    color: var(--button-color);
    display: inline-block;
    font-weight: 600;
}

a.text:hover {
    color: var(--button-hover);
    text-decoration: underline;
    text-decoration-color: var(--button-hover);
    text-decoration-thickness: 5px;
}

a.delete {
    background-color: transparent;
    color: var(--caution-color);
    float: right;
    font-size: 14px;
}

a.delete:hover {
    color: var(--caution-hover);
}

a.pl {background-color: var(--pl-color);}
a.pl:hover {background-color: var(--pl-hover);}

a.eu {background-color: var(--eu-color);}
a.eu:hover {background-color: var(--eu-hover);}

.warning a, a.caution {
    background-color: var(--caution-color);
}

.warning a:hover, a.caution:hover {
    background-color: var(--caution-hover);
}

.warning input[type=submit] {
    background-color: var(--caution-color);
}

.warning input[type=submit]:hover {
    background-color: var(--caution-hover);
}

input[type=submit] {
    border: 0;
    width: 100%;
}

.three {
    background-color: var(--three) !important;
}

.one {
    background-color: var(--one) !important;
}

.none {
    background-color: var(--none) !important;
}

body {
    background-color: var(--light);
    color: var(--bg-color);
    font-family: 'Sora', sans-serif;
    font-size: 16px;
}

header, main {
    width: 100%;
}

nav {
    width: 100%;
}

main {
    padding: 10px;
}

#wide, #half {
    margin-bottom: 10px;
}

/* HEADER */

header { 
    background: var(--header-color);
}

header h1, header nav {
    vertical-align: top;
}

header h1 a {
    background-color: transparent;
    color: var(--light) !important;
    font-size: 22px;
    font-weight: 600;
    line-height: 60px;
    padding-left: 10px;
    text-align: left;
    width: calc(100% - 60px);
}

header h1 a:hover {
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--button-hover);
    text-decoration-thickness: 5px;
}

header nav {
    float: right;
}

a#menu-icon, a#league-icon {
    background-color: var(--button-color);
    display: inline-block;
    font-family: 'Segoe UI Symbol' !important; 
    font-size: 32px;
    line-height: 60px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 60px;
}

ul#nav-menu, ul#league-menu {
    display: none;
    font-size: 0;
}

ul#nav-menu li:not(:first-child) a, ul#league-menu li:not(:first-child) a {
    border-top: 1px solid var(--button-hover);
}

.failure, .success {
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#matches .failure, #matches .success {
    margin: 0;
}

.failure {
    background-color: #f4cccc;
    border: 1px solid #800000;
}

.success {
    background-color: #cff4cc;
    border: 1px solid #008000;
}

/* MATCHES */

#matches {
    background-color: #fff;
    border: 1px solid var(--header-color);
}

#gameweek-header {
    background-color: var(--header-color);
    color: var(--light);
    font-size: 0;
}

.gameweek-details, .gameweek-prev, .gameweek-next {
    display: inline-block;
    vertical-align: top;
}

.gameweek-prev, .gameweek-next {
    width: 50%;
}

.gameweek-prev {
    padding: 10px 5px 10px 10px;
}

.gameweek-next {
    padding: 10px 10px 10px 5px;
}

.gameweek-details {
    padding-top: 10px;
    text-align: center;
    width: 100%;
}

.gameweek-details h1, .gameweek-details h2  {
    font-size: 20px;
    line-height: 30px;
}

.gameweek-details h1 {
    font-weight: 600;
}

.gameweek-details h2 span {
    background-color: #BB2828;
    padding: 0 10px;
    margin-right: 5px;
}

#fixtures ul li, #results ul li {
    font-size: 0;
    padding: 10px 0;
    position: relative;
    width: 100%;
}

#fixtures ul li:not(:last-child), #results ul li:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

span.day, span.time, span.live {
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    position: absolute;
}

span.day {
    color: #aaa;
    padding-left: 10px;
}

span.time {
    color: #aaa;
    padding-right: 10px;
    right: 0;
}

span.live {
    color: #BB2828;
    padding-right: 10px;
    right: 0;
}

#fixtures ul li.header, #results ul li.header {
    background-color: var(--header-color);
    color: var(--light);
    font-weight: 600;
}

li.header h3 {
    color: var(--light);
    display: block;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.home-team, .away-team, .score {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
}

.home-team, .away-team {
    height: 40px;
    line-height: 40px;
    width: calc(50% - 35px);
}

.home-team p {
    vertical-align: top;
}

.edit-fixture .home-team, .edit-fixture .away-team {
    width: calc(30% - 15px);
}

.score {
    margin: 0 5px;
    text-align: center;
    vertical-align: top;
    width: 60px;
}

.edit-fixture .score {
    width: 30px;
}

.edit-fixture .time input[type="text"] {
    width: 130px;
}

#results .score {
    background-color: rgba(0,0,0,0.1);
}

.header .score {
    background-color: rgba(255,255,255,0.1);
}

.result {
    color: #000;
    line-height: 40px;
}

.predicted, .actual {
    line-height: 20px;
}

.logged-out-actual {
    line-height: 40px;
}

.header .predicted p, .header .actual p {
    font-size: 8px;
    font-weight: 400;
}

.header .predicted {
    border-bottom: 1px solid var(--header-color);
}

.predicted p, .actual p, .logged-out-actual p {
    font-size: 14px;
    font-weight: 500;
}

.three p, .one p, .none p {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.three-points {
    color: var(--three);
}

.one-points {
    color: var(--one);
}

.predicted {
    border-bottom: 1px solid #fff;
    height: 20px;

}
.home-team {
    text-align: right;
}

form input[type=number] {
    border: 1px solid #888;
    display: inline-block !important;
    font-size: 18px;
    height: 30px;
    margin-top: 5px;
    text-align: center;
    vertical-align: top;
    width: 30px;
}

.spacer {
    display: inline-block;
    line-height: 40px;
    text-align: center;
    width: 20px;
}

.prediction .score {
    background-color: transparent;
}

/* BADGES */

.badge {
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    margin-top: 5px;
    vertical-align: top;
    width: 30px;
}

.pl .badge {
    background-image: url(../img/badge/spritesheet_pl_2024.png);
    background-size: 600px 30px;
}

.eu .badge {
    background-image: url(../img/badge/spritesheet-eu.png);
    background-size: 750px 30px;
}

.home-team .badge {
    margin-left: 5px;
}

.away-team .badge {
    margin-right: 5px;
}

.ARS {background-position-x: 0;}
.AVL {background-position-x: -30px;}
.BHA {background-position-x: -60px;}
.BOU {background-position-x: -90px;}
.BRE {background-position-x: -120px;}
.CHE {background-position-x: -150px;}
.CRY {background-position-x: -180px;}
.EVE {background-position-x: -210px;}
.FUL {background-position-x: -240px;}
.IPS {background-position-x: -270px;}
.LEI {background-position-x: -300px;}
.LIV {background-position-x: -330px;}
.MCI {background-position-x: -360px;}
.MUN {background-position-x: -390px;}
.NEW {background-position-x: -420px;}
.NFO {background-position-x: -450px;}
.SOU {background-position-x: -480px;}
.TOT {background-position-x: -510px;}
.WHU {background-position-x: -540px;}
.WOL {background-position-x: -570px;}

.ALB {background-position-x: 0;}
.AUT {background-position-x: -30px;}
.BEL {background-position-x: -60px;}
.CRO {background-position-x: -90px;}
.CZE {background-position-x: -120px;}
.DEN {background-position-x: -150px;}
.ENG {background-position-x: -180px;}
.ESP {background-position-x: -210px;}
.FRA {background-position-x: -240px;}
.GEO {background-position-x: -270px;}
.GER {background-position-x: -300px;}
.HUN {background-position-x: -330px;}
.ITA {background-position-x: -360px;}
.POL {background-position-x: -390px;}
.NED {background-position-x: -420px;}
.POR {background-position-x: -450px;}
.SCO {background-position-x: -480px;}
.SUI {background-position-x: -510px;}
.ROU {background-position-x: -540px;}
.SVK {background-position-x: -570px;}
.SVN {background-position-x: -600px;}
.SRB {background-position-x: -630px;}
.TUR {background-position-x: -660px;}
.UKR {background-position-x: -690px;}
.TBA {background-position-x: -720px;}

/* LEADERBOARD */
#leagues {
    position: relative;
}

.league-name {
    padding-right: 60px;
    position: relative;
    text-align: center;
}

a.league-header {
    background-color: var(--header-color);
}

a.league-header h2 {
    color: var(--light);
    font-weight: 600;
    line-height: 60px;
}

a#league-icon:hover {
    background-color: var(--button-hover);
}

#league-menu li a {
    text-align: left;
}

.table {
    background-color: #fff;
    border: 1px solid var(--header-color);
    display: table;
}

.table-header, .table-row {
    display: table-row;
    font-size: 14px;
    text-align: left;
}

.table-header {
    background-color: var(--header-color);
    color: var(--light);
}

.table-row:not(:last-child) .table-cell {
    border-bottom: 1px solid #ccc;
}

.table-cell {
    display: table-cell;
    padding: 8px 5px;
    text-align: center;
}

.table-cell:nth-child(2) {
    text-align: left;
    width: 100%;
}

a.table-row {
    background-color: transparent;
    color: #000;
    line-height: 1;
    padding: 0;
}

.leaderboard-start {
    background-color: #fff;
    border: 1px solid var(--header-color);
    border-top: 0;
    padding: 10px;
    text-align: center;
    width: 100%;
}

a.highlight {
    background-color: #eee;
}

.leaderboard-nav {
    padding: 10px 0;
    width: 100%;
}

.leaderboard-page {
    display: inline-block;
    line-height: 50px;
    margin-right: 10px;
    text-align: center;
    width: calc(100% - 220px);
}

.leaderboard-prev, .leaderboard-next {
    display: inline-block;
    font-size: 22px;
    line-height: 30px;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    width: 100px;
}

.leaderboard-prev {
    margin-right: 10px;
}

/* SIGN IN */

.login, .join, .create, .your-leagues, .edit, .members {
    background-color: #fff;
    border: 1px solid var(--header-color);
}

.login h2, .join h2, .create h2, .your-leagues h2, .edit h2, .members h2 {
    background-color: var(--header-color);
    color: var(--light);
    font-size: 24px;
    line-height: 60px;
    text-align: center;
}


.login form, .join form, .create form, .edit form  {
    padding: 10px;
}

label {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    padding-left: 10px;
}

.login input[type=text], .login input[type=password], .login input[type=email], .login input[type=datetime-local],
.join input[type=text], .join input[type=password], .join input[type=email], .join input[type=datetime-local],
.create input[type=text], .create input[type=password], .create input[type=email], .create input[type=datetime-local],
.edit input[type=text], .members input[type=text]
#gameweek-details input[type=text] {
    background-color: transparent;
    border: 1px solid #888;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    width: 100%;
}

.account-options {
    display: block;
    margin-bottom: 20px;
}

.account-options a {
    background-color: transparent;
    color: var(--button-color);
    font-size: 16px;
    line-height: 1;
    padding: 0;
	text-decoration: underline;
}

.account-options a:hover {
    color: var(--button-hover);
}

.account-options a, .account-options label {
    display: inline-block !important;
}

.account-options p span {
	background-color: transparent;
	float: right;
}

.account-options p span input[type=checkbox] {
    vertical-align: middle;
}

.g-recaptcha {
    margin-bottom: 20px;
}

/* ADMIN */

#banner {
    background-color: #f4cccc;
    border: 1px solid #800000;
    margin-bottom: 10px;
    padding: 20px 0;
    position: relative;
}

#banner h1 {
    font-size: 22px;
    line-height: 26px;
    text-align: center;
}

ul.menu li {
    margin-bottom: 10px;
}

.line {
    border-bottom: 1px solid var(--header-color);
    display: block;
    margin: 20px 0;
    width: 100%;
}

/* LEAGUES */

.your-leagues {
    border: 1px solid #888;
}

.league-list {
    padding: 10px;
}

.league-box {
    border: 1px solid #888;
    margin-bottom: 10px;
    width: 100%;
}

.league-details {
    padding: 10px;
}

.league-details p:not(:last-child) {
    margin-bottom: 10px;
}

.league-details p span {
    font-weight: 600;
}

.members li {
    border-bottom: 1px solid #ccc;
}

.members li p {
    line-height: 40px;
    padding-left: 10px;
}


@media only screen and (min-width : 768px) {
    .mobile, .web {
        display: none !important;
    }
    .tablet {display: inline-block !important;}

    header {
        padding: 20px 10px;
    }

    header ul#nav-menu li:not(:first-child) a, header ul#league-menu li:not(:first-child) a {
        border-top: 0;
    }

    main {
        font-size: 0;
        padding: 10px;
    }

    #wide, #thin, #half {
        display: inline-block;
        margin-bottom: 20px;
        vertical-align: top;
    }

    #wide {
        padding-right: 10px;
        width: 65%;
    }

    #thin {
        width: 35%;
    }

    #half {
        width: calc(50% - 5px);
    }

    #half:first-of-type {
        margin-right: 10px;
    }

    header h1 {
        display: inline-block;
    }

    header h1 a {
        font-size: 26px;
        line-height: 40px;
        padding: 0;
        width: auto;
    }

    header nav {
        display: inline-block;
        width: auto;
    }

    ul#nav-menu {
        display: block;
    }

    ul#nav-menu li {
        display: inline-block;
        padding-left: 10px;
    }

    ul#nav-menu li a {
        border: 0;
    }

    .gameweek-prev, .gameweek-next {
        padding: 20px;
        width: 100px;
    }

    .gameweek-prev a, .gameweek-next a {
        line-height: 60px;
    }

    .gameweek-details {
        padding: 20px 0;
        width: calc(100% - 200px);
    }

    span.day {
        padding-left: 20px;
    }

    span.time {
        padding-right: 20px;
    }

    span.live {
        padding-right: 20px;
    }

    .home-team, .away-team {
        width: calc(50% - 40px);
    }

    .score {
        margin: 0 10px;
    }

    .league-box {
        display: inline-block;
        width: calc(50% - 5px);
    }

    .league-box:nth-of-type(odd) {
        margin-right: 10px;
    }
}

@media only screen and (min-width : 1300px) {
    .mobile, .tablet {
        display: none !important;
    }
    .web {display: inline-block !important;}

    header, main {
        padding: 20px 10%;
    }

    #wide {
        padding-right: 20px;
    }

    header h1 a {
        font-size: 32px;
    }

    .gameweek-details h1, .gameweek-details h2  {
        font-size: 26px;
    }

    .prediction .home-team, .prediction .away-team {
        height: 40px;
        line-height: 40px;
        width: calc(50% - 50px);
    }
    
    .prediction .score {
        width: 80px;
    }

    .table-cell {
        padding: 8px 10px;
    }

    #half {
        width: calc(50% - 10px);
    }

    #half:first-of-type {
        margin-right: 20px;
    }

    #banner {
        margin-bottom: 20px;
    }

    .edit-fixture .home-team, .edit-fixture .away-team {
        width: calc(40% - 15px);
    }

    .league-box {
        display: inline-block;
        width: calc(25% - 7.5px);
    }

    .league-box:not(:nth-of-type(4n)) {
        margin-right: 10px;
    }
}