:root {
    --A-color: orange;
    --B-color: rgb(205, 92, 92); /* indianred */
    /*
var(--A-color)
    */    
    /*
var(--B-color)
    */
}

@keyframes shadowPulse {
    0% {
        -webkit-box-shadow: inset 0px 0px 15px 0px rgba(205, 92, 92, 1);
        box-shadow: inset 0px 0px 15px 0px rgba(205, 92, 92, 1);
    }

    100% {
        -webkit-box-shadow: inset 0px 0px 15px 0px rgba(205, 92, 92, 0);
        box-shadow: inset 0px 0px 15px 0px rgba(205, 92, 92, 0);
    }
}

.shadow-pulse {
    -webkit-animation-name: shadowPulse;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
	animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
}
.shadow-pulse::placeholder {
    color: indianred;
}


* {
    margin: 0px;
    padding: 0px;
    vertical-align:top;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    transition-delay: 0s;

}
td, th {
    vertical-align:middle;
}
body {
    margin: 0px;
    color: grey;
    font-family: arial;
    background-color: white;

}
h1 {
    //color:indianred;
}

h2 {
	color: indianred;
    font-size:20px;
    text-decoration: none;
    font-weight: 100;
    line-height:2.5em;
}

h3 {
    color: darkgrey;
    text-decoration: none;
	text-align: center;
    font-weight: 100;
    font-size:16px;
    line-height:2em;
}
a { 
    
    color: grey;
    font-weight: bold;
    text-decoration: underline;
}
a:hover {
    color: indianred;
}
/* 1. FORM INPUTS */
.mainloginform {
    text-align: center;

}
input, .inputborder {
    display:inline-block;
    appearance: none;
    border: 1px solid indianred;
    background-color: white;
    border-radius: 5px;
    margin: 1em 0px;
    height: 40px;
    
    min-width: 250px;
    width:100%;
    font-size: 16px;
    color: grey;
    padding-left: 1em;
    outline-color: indianred;
  

}


input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color:indianred;
    color:white;
    outline:none;
    padding:0;
    
}
input::placeholder {
    color: lightgrey;
}
input[type="submit"]:active {
	
	color:white;
    background-color: rgba(205, 92, 92, 0.8);
    box-shadow: inset 0px 0px 0.6em 0.3em rgba(205, 92, 92, 1) ;
}


.recaptchaholder div {
    display:block;
    margin:0 auto;
}

#selectinputborder {
    display: inline-block;
    padding: 0 0;
    border: 1px solid indianred;
    width: 100%;
    height: 40px;
    text-align: left;
    border-radius: 5px;
    box-sizing: border-box;
	//margin:1em 0;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline-color: indianred;
    margin: 0px;
    padding: 0px;
    padding-left: 1em;
    height: 38px;
	width:100%;
    box-sizing: border-box;
    border:0px solid indianred;
    border-radius: 3px;
    background-color: white;
    font-family: arial;
    font-size: 16px;
    color: grey;
}


input[type="checkbox"] {
    height: 15px;
    width: 15px;
    min-width: 15px;
    margin: 10px;
    box-sizing: border-box;
    box-shadow: none;
}
td input[type="checkbox"] {
    margin: 10px 0;
}
#stayloggedin {
    position: relative;
    text-align: left;
    box-sizing: border-box;
    line-height: 35px;
    width:100%;
    font-size: 14px;
}
/*
#submit {
    border-radius: 5px;
    color: white!important;
    border: 0px solid indianred;
    background-color: indianred;
    opacity: 1;
    font-style: bold;
    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    -o-transition: background-color 300ms;
    transition: background-color 300ms;
    padding-right: 1em;
}
#submit:active {
    border: 2px solid orange;
    outline-color: orange;
    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    -o-transition: background-color 300ms;
    transition: background-color 300ms;
    background-color: orange;
}
*/

.special-content-container {
    text-align: left!important;
    -webkit-display:flex;
    -webkit-flex:1;
    flex:1;
	-webkit-align-self: flex-start; 
	align-self: flex-start; 
    max-width:310px;
    display:inline-block;
    margin:10px;
    background-color:white;
}

.maincontentcontainer {
    text-align: left!important;
    -webkit-display:flex;
    -webkit-flex:1;
    flex:1;
	-webkit-align-self: flex-start; 
	align-self: flex-start; 
    min-width:280px;
    max-width:600px;
    display:inline-block;
    padding: 10px;
    margin:10px;
    background-color:white;
}
.maincontentcontainer.tactics {
    position:relative;
    max-width:310px;
}
.maincontentcontainer table {
    width:100%;
}
/* 2. LEAGUE TABLE */
#mainleaguetable {}
table {
    border-collapse: collapse;
    border-radius: 5px;
}
tbody,
td,
tr {
    text-align: left;
    padding: 5px;
    color: grey;
    font-family: arial;
}
tr {
    font-size: 12px;
    height: 36px;
    border-bottom: 1px solid indianred;
    //background-color: #ebebeb;
}
tr:nth-child(even) {
    //background-color: #d9d8d8;
    border-bottom: 1px solid orange;
}
tr .playerobject {
    //margin:.3em;
    background-color: indianred;
}
tr:nth-child(even) .playerobject {
    background-color: orange;
}
th {
    padding: 5px;
    //font-size:12px;
    background-color: white;
    border-bottom: 1px solid indianred;
    border-top: 1px solid lightgrey;
    text-align: left;
    font-weight: bold;
}
.tablePostion {
    width: 50px;
}
.tablePlayer {
    width: 225px;
}
.table_squadNo {
    text-align: center;
}
.table_Games_Played {
    //width:75px;
    text-align: right;
}
.tablePoints {
    //width:75px;
    text-align: right;
}
.tablePPG {
    text-align: right;
    width: 50px;
}
.table_squadNo > .playerobject {
    font-size: 1em;
    line-height: 2em;
}


#messageBox {
    top: 0px;
    right: 0px;
    background-color: white;
    margin: 10px;
    padding: 10px;
    display: none;
    border: 1px solid;
    border-radius: 3px;
    position: fixed;
    z-index:999999;
}
[id^="contentcontainer"] {
    padding: 30px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    border: 1px solid lightgrey;
    border-radius: 3px;
    margin:10px;
}

.maincontainer {
    margin:0;
    text-align: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    box-sizing: content-box;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-display:flex;
    display:flex;
    padding: 0px;
    margin: 10px;
    width: calc(100% - 20px);
}
.accounteditcontainer {
    text-align:left;
    min-width:260px;
}
.accounteditcontainer form {
    text-align:center;
}
.accounteditcontainer > input {
    margin:20px 0px;

}

#squadmanagementform input[type="text"] {
    display:inline-block;
    height: 25px;
    padding: 5px;
    margin: 0;
	min-width:115px;
    width: 75%;
    font-size: inherit;
    text-overflow: ellipsis;
}
#contentcontainer1 {
    min-width:500px;
    
}
#squadmanagementform input[type="submit"] {
    display:inline-block;
    position:relative;
    height: 25px;
    padding:2px;
    
    margin:0 ;
    margin-left:9px;
    min-width:30px;
    width: 20%;
    font-size: 8px;
    
}
td .playerobject {
    position:relative;
    display:inline-block;
    height: 2em;
    width: 2em;
    line-height: 2em;
    font-size: 1em;
    padding: 0;
}
#squadmanagementform tbody,
td,
tr,
th {
    padding: 0 1em;
}
#squadmanagementform tr {
    //background-color: #ebebeb;
    border-top: 1px solid white;
}
/* END OF LEAGUE TABLE*/

td > .playerobject {
    box-shadow: 0px 5px 7px lightgrey,  0px -3px 7px lightgrey;
    margin: .3em;
}

.NoAside {
    font-size: 5em;
    line-height: 0.35em; //74px;
}
/*.AddGamesWindow */
.tacticsmenuoption {
    height: 37em;
    width: 29em;
    display: none;
    position: absolute;
    z-index: 400;
    background-color: darkgreen;
    border: .1em solid white;
    box-sizing: border-box;
    padding: .5em .4em;
    font-size: 1em;
    text-align: center;
    overflow-y: auto;

}
.TitleGameWinner {
    display: inline-block;
    margin: 0 auto;
    padding: 0 10px 0 0;
    width: 34px;
    color: white;
    text-shadow: 2px 2px 13px rgba(0, 0, 0, .6);
    font-size: 50px;
    line-height: 48px;
}
.GameWinnerLabel {
    width: 152px;
    display: inline-block;
    vertical-align: top;
    margin: 0 0px 0 10px;
    padding: 0 0 0 0;
    border-radius: 5px;
    box-shadow: 4px 3px 13px 1px rgba(0, 0, 0, 0.3), -4px -3px 13px 1px rgba(0, 0, 0, 0.3);
}
.GWLabelContainer {
    display: inline-block;
    height: 48px;

    //width: 22emm;
    padding: 10px 20px;
    text-align: center;
}
input[type='date'] { 
    /* This  .  shouldn't do anything ? ? ? */
    color:grey;
	font-family: arial;
    display: inline-block;
    vertical-align: middle;
}
.ContainerGameWinnerPLusMinus {
    display: inline-block;
    min-width: 6em;
}
.GameWinnerPLusMinusButton {
    display: inline-block;
    border: 2px solid indianred;
    box-sizing:border-box;
    border-radius: 5px;
    height: 1em;
    width: 1em;
    font-size: 4em;
    line-height: calc(1em - 1px);
    text-align: center;
    color: indianred;
    vertical-align: top;
    margin: 10px 20px;
    box-shadow: 4px 3px 13px 1px rgba(205, 92, 92, 0.2), -4px -3px 13px 1px rgba(205, 92, 92, 0.2);
    text-shadow: 2px 2px 13px rgba(205, 92, 92, .3);
    cursor: pointer;
}
.GameWinnerPLusMinusButton:active {
    box-shadow: 4px 3px 13px 1px rgba(205, 92, 92, 0.3), -4px -3px 13px 1px rgba(205, 92, 92, 0.3), inset 4px 3px 13px 1px rgba(205, 92, 92, 0.3), inset -4px -3px 13px 1px rgba(205, 92, 92, 0.3);
        text-shadow: 2px 2px 13px rgba(205, 92, 92, 0);

}
.GameWinnerTakeAwayButton {
    line-height: 34px;
}
.textlabeladdGames {
    //border: 2px solid pink;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    height: calc(3em + 4px);
    //margin: 10px 0px;
    //top:1em;
    width: calc(100% - 8em - 89px);
    //font-size: 1.5em;
    line-height: calc(3em + 4px);
    text-align: center;
    color: indianred;
}
label[name^="GameWinner"] {
    font-family: arial;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 44px;
    line-height: 44px;
    font-size: 3em;
    text-align: center;
}
label[class^="smallx"] {
    width: 60px;
    vertical-align: top;
    font-size: 1.4em;
}
.teampick {
    color: grey;
}
.nostate {
    color: white;
    background-color: white;
    border: solid 1px white;
}
.smallx {
    background-color: white;
    border: solid 2px white;
    border: solid 2px white;
    color: grey;
    font-size: 5px;
    //line-height:2em;
    //width:5.5em;
}
.smallx.nostate {
    color: white;
    border-top: solid 2px white;
    border-bottom: solid 2px white;
}
.Astate {
    color: orange;
    border: solid 2px orange;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.Bstate {
    color: indianred;
    border: solid 2px indianred;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.Astate.selected {
    background-color: orange;
}
.Bstate.selected {
    background-color: indianred;
}
.selected {
    color: white;
}
input[name^="GameWinner"][type="radio"] {
    visibility: hidden;
    display: none;
}
input[type="radio"] {
    display:inline-block;
    //border: 1px solid red;
    //background-color:red;
    width:2em;
    height:2em;
}
.AddPlayer {
    width: 180px;
    background-color: darkgreen;
    padding: 10px;
    
    font-size: 2em;
}

.altOptionButtons {
    display: block;
	position: relative;
    background-color: lightgrey;
    border-radius: 5px;
    height: 1em;
    width: 180px;
    padding: 10px;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    color: white;
    vertical-align: top;
    margin: 0.5em auto;
    box-shadow: 4px 3px 13px 1px rgba(100, 92, 92, 0.3), -4px -3px 13px 1px rgba(100, 92, 92, 0.3);
    text-shadow: 2px 2px 13px rgba(0, 0, 0, .6);
    cursor: pointer;	
}
.altOptionButtons:active {
    box-shadow: 4px 3px 13px 1px rgba(100, 92, 92 , 0.3), -4px -3px 13px 1px rgba(100, 92, 92, 0.3), inset 4px 3px 13px 1px rgba(100, 92, 92, 0.3), inset -4px -3px 13px 1px rgba(100, 92, 92, 0.3);
    text-shadow: 2px 2px 13px rgba(0, 0, 0, .6);
}

.OptionButtons {
    display: block;
	position: relative;
    background-color: indianred;
    border-radius: 5px;
    height: 1em;
    width: 180px;
    padding: 10px;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    color: white;
    vertical-align: top;
    margin: 0.5em auto;
    box-shadow: 4px 3px 13px 1px rgba(205, 92, 92, 0.3), -4px -3px 13px 1px rgba(205, 92, 92, 0.3);
    text-shadow: 2px 2px 13px rgba(0, 0, 0, .6);
    cursor: pointer;
    //text-align: center;
}
.OptionButtons:active {
    box-shadow: 4px 3px 13px 1px rgba(100, 92, 92 , 0.3), -4px -3px 13px 1px rgba(100, 92, 92, 0.3), inset 4px 3px 13px 1px rgba(100, 92, 92, 0.3), inset -4px -3px 13px 1px rgba(100, 92, 92, 0.3);
    text-shadow: 2px 2px 13px rgba(0, 0, 0, .6);
}
.optionsInputs {
    display: block;
    margin: 10px auto;
    padding: 18px 10px;
    width: 204px;
    height: 1.6em;
    font-size: 1.6em;
    //line-height: 1.6em;
    color: slategrey;
    border-radius: 5px;
    border: 2px solid grey;
    outline-style: none;
    box-shadow: 4px 3px 13px 1px rgba(0, 0, 0, 0.3), -4px -3px 13px 1px rgba(0, 0, 0, 0.3);
}


.tacticsmenuoption {
    height: 37em;
    width: 29em;
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: space-between;
    position: absolute;
    z-index: 1001;
    background-color: darkgreen;
    border: .1em solid white;
    box-sizing: border-box;
    padding: .5em .4em;
    font-size: 1em;
    text-align: center;
    overflow-y: scroll;
}




/* MENU BAR SECTION */
/* Items are ordered and indented in  hirearchicaly */




.menubarcontainer {
    position:relative;
    background-color: white;
    //text-align: center;
    top:0px;
    left:0px;
    width:100%;
    min-height: 80px;
    line-height:80px;
    -moz-box-shadow: 0px 3px 3px indianred;
    -webkit-box-shadow: 0px 1px 3px indianred;
    box-shadow: 0px 1px 3px indianred;
    z-index:999999;
    overflow:hidden;

    
}
    .menubarlogoholder {
        height:80px;
        position:relative;
		display:inline-block;
		top:0px;
		left:0px;
        margin: 0 0 0 20px;
        font-size: calc( 12px + 0.8vw);        
        color: indianred;

        
    }
    .menubarlinkscontainer {
        display: inline-block;
        width:60%;
        box-sizing:border-box;
        //white-space: nowrap;
        max-height:60px;
        font-size:14px;
        line-height: 40px;
        margin-top: 18px ;
		margin-left:40px;
        text-transform:uppercase;
        z-index:9999;
        -webkit-transition: max-height 1s; 
        -moz-transition: max-height 1s; 
        -ms-transition: max-height 1s; 
        -o-transition: max-height 1s; 
        transition: max-height 1s;
    }
        .menuitem {
            display: inline-block;
            position:relative;
            padding: 0px 2%;
            color:orange;
            line-height:40px;
            border: 2px solid white;
        }
        .menuitem:hover {
            color:indianred;
            text-decoration: underline;
        }        
        .specialmenuitem {

            padding: 0 15px 0 ;
            border-radius: 3px;
            border: 2px solid orange;  
            text-decoration: none;
            
        }
        a > .specialmenuitem{
            position:absolute;
            top: 18px;
            right:30px;
            display: inline-block;
            color:orange;
            text-decoration: none;
            text-align: center;
        }
        a.menu.link div {
            text-decoration: none;
        }
        .specialmenuitem:hover, .specialmenuitem:hover > a {
            background-color:orange;
            color:white!important;
        }
.validationmessage {
    text-align:center;
}
.validationmessage a .specialmenuitem {
    position:relative;
    display:block;
    right:0px;
}
.validationmessage a {
    text-decoration: none;
    
}
.validationmessage a:hover {
    text-decoration: none;
    
}
.burgerholder {
    position:relative;
    right:0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    -webkit-transition: background-color  0.5s; 
    -moz-transition: background-color  0.5s; 
    -ms-transition: background-color  0.5s; 
    -o-transition: background-color 0.5s; 
    transition: background-color 0.5s; 
}
    .menubarline {
        display:block;
        position:absolute;
        top:10px;
        left:10px;
        height:2px;
        width:30px;
        background-color: indianred;
        opacity:1;
        -webkit-transition: opacity 1s; 
        -moz-transition: opacity 1s; 
        -ms-transition: opacity 1s; 
        -o-transition: opacity 1s; 
        transition: opacity 1s; 
    }
    
    .menubarline:nth-of-type(2) {
        top:24px;
    }
    .menubarline:nth-of-type(3) {
        top:38px;
    }
    .menubartextname {
        width:100%;
        height:35px;
        position:absolute;
        border-radius:25%;
        //border:1px solid rgba(255,255,255,0.8);
        padding: 0em 0;
        text-align: center;
        font-family:sans-serif;
        font-size:58px;
        font-weight:100;
        color:white;
        //line-height:40px;
        opacity:1;
        -webkit-transition: opacity 1s; 
        -moz-transition: opacity 1s; 
        -ms-transition: opacity 1s; 
        -o-transition: opacity 1s; 
        transition: opacity 1s; 
    }
.menubartextname .spanlineone {
    font-size:36px;
    line-height:0.8em;
    text-shadow: 0px 0px 10px rgba(0,0,0,1);
}
.menubartextname .spanlinetwo {
    font-size:10px;
    line-height:1.4em;
    
    
}
    .menubarclose {
        width:100%;
        position:absolute;
        text-align: center;
        font-family:sans-serif;
        font-size:58px;
        font-weight:100;
        color:grey;
        line-height:40px;
        opacity:0;
        -webkit-transition: opacity 1s; 
        -moz-transition: opacity 1s; 
        -ms-transition: opacity 1s; 
        -o-transition: opacity 1s; 
        transition: opacity 1s; 
        
    }
#tacticsmenuholder.burgerholder .menubarclose {
    left:0px
}
.burgermenucheckbox {
display:none;
}
.burgermenucheckbox:checked ~ label .menubarline, .burgermenucheckbox:checked ~ label .menubartextname  {
    opacity:0;
    -webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
}
.burgermenucheckbox:checked ~ label .menubarclose {
    opacity:1;
    -webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
}
.menubarcontainer .burgerholder:active {
    background-color:orange;
    -webkit-transition: background-color  0.5s; 
    -moz-transition: background-color  0.5s; 
    -ms-transition: background-color  0.5s; 
    -o-transition: background-color 0.5s; 
    transition: background-color 0.5s; 
}
.menubarcontainer .burgerholder:active .menubarline {
    background-color:white;
    -webkit-transition: background-color  0.5s; 
    -moz-transition: background-color  0.5s; 
    -ms-transition: background-color  0.5s; 
    -o-transition: background-color 0.5s; 
    transition: background-color 0.5s; 
}
.menubarcontainer .burgerholder:active .menubarclose {
    color:white;
    -webkit-transition:color 0.5s; 
    -moz-transition: color 0.5s; 
    -ms-transition:  color 0.5s; 
    -o-transition:  color 0.5s; 
    transition: color 0.5s; 
}
#hamburgermenu {
    display:none;
}
#burgerbuttonholdermenubar {
    position: absolute;
    margin-top:15px;
    margin-right:15px;
}
#tacticscontainer {
    //display:block;
    //position: relative;
    width: 310px;
    //margin: auto auto;
    font-size: 10px;
    
    
}
    #tacticscontainer .burgerholder {
            position: absolute;
            margin-left:0em;
            left: calc( 50% - 2.5em);
            top:0.4em;

        }
        #tacticscontainer .menubarline {
            background-color: white;
        }
        #tacticscontainer .menubarclose {
            color: white;
        }
#tacticsmenucheckbox:checked ~ .tacticsmenuoption {
    display:inline-block;
    -webkit-display: flex;
    display: flex;
}

#tacticsswitchlabel {
    position: absolute;
    left:0.7em;
    top:0.7em;
    font-size: 1.5em;
    padding:0 0 0 0;
}
#tacticsswitchlabel .switchbutton {
    top:0.5em;
    font-size:0.4em;
    height:5.2em;
    width:5.2em;
    line-height:5.1em;
    left:-2.1em;
}
#tacticseditcheckbox:checked ~ #tacticsswitchlabel .switchbutton {
    left:2.2em;
    -webkit-transition: left .3s, background-color .5s;
    transition: left .3s, background-color .5s;
    color: white;
    background-color: darkgreen;
    
}
#tacticseditcheckbox:checked ~ .pitchandsubs {
    left:0;
}

.FormationChoices {
    height: 37em;
    width: 29em;
    margin-left:0;
    margin-right:1em;
    position:relative;
    display:inline-block;
    -webkit-display:inline-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    display:inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    justify-content: space-around;
    background-color: rgba(0, 100, 0, 1);
    border: .1em solid white;
    box-sizing: border-box;
    padding: .5em .4em;
    font-size: 1em;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: inset 0 0 10px black;
    text-align: left;
}
    .FormationSelection {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        display: inline-block;
        position: relative;
        background-color: rgba(0, 100, 0, 1);

        padding: 0px;
        margin: 2px;
        margin-bottom: 7px;
        height: 7.4em; //74px;
        width: 5.8em; //58px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 4px 3px 3px 2px rgba(0, 0, 0, .3);
        text-align: center;
        color: rgba(255, 255, 255, 0.2);
}
    .FormationSelection:hover {
        box-shadow: 4px 3px 7px 5px rgba(0, 100, 0, 1);
        border: 1px solid rgba(255, 255, 255, 1);
}
    .formationsCountHeader {
        border-bottom: 1px solid white;
        width: calc(100% - .5em);
        padding: 0 0em;
        margin-bottom: 1em;
        font-size: 1em;
        color: white;
    }
    .formationsCountHeaderSpan {
        font-size: 3em;
        line-height: .8em; //74px;
}
    .FormationSelectionSpacer {
        width: calc(5.8em + 2px);
        padding: 0px;
        margin: 2px;
}
    .FormationChoices .FormationPlayers {
            border: none;
}
        .formationplrobj {
            width: 5em;
            height: 4.3em;
            box-sizing: border-box;
            position: absolute;
            text-align: center;
            font-size: .2em;
            color: white;
            line-height: 12px;
            padding: 0px;
            margin: 0px;
        }

#subsswitchlabel {
    position: absolute;
    right:0.7em;
    top:0.7em;
    font-size: 1.5em;
    padding:0 0 0 0;
}
    .enableeditswitch {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    height: 2.4em;
    line-height: 2.4em;
    width: 4.2em;
    border-radius: .3em;
    background-color: white;
}
    .switchbutton {
        display: inline-block;
        position: relative;
        top: .4em;
        left: 1.85em;
        font-size: .5em;
        line-height: 4.1em;
        background-color: white;
        border-radius: .3em;
        height: 4em;
        width: 4em;
        color: darkgreen;
        border:.1em solid darkgreen;
        box-sizing: border-box;
        -webkit-transition: left .3s, background-color .5s, color .5s;
        transition: left .3s, background-color .5s, color .5s;
    }
#subseditcheckbox {
    display: none;
}
#subseditcheckbox:checked ~ #subsswitchlabel .switchbutton {
    -webkit-transition: left .3s, background-color .5s;
    transition: left .3s, background-color .5s;
    color: white;
    left: -1.8em;
    background-color: darkgreen;
}
#subseditcheckbox:checked ~ .pitchandsubs > .pitchbox {
    width:18.6em; //184px
    -webkit-transition: width 0.5s;
    transition: width 0.5s;

}
#subseditcheckbox:checked ~ .pitchandsubs > .subsbench > .plrobj {
    visibility:visible;
    opacity:1;
}
#subseditcheckbox:checked ~ .pitchandsubs > .subsbench {
    margin-left:-0.3em;
    -webkit-transition: margin 0s;
    transition: margin 0s;
}

.innershadow {
    box-shadow: inset 4px 3px 3px 1px rgba(0, 0, 0, 0.3), inset -4px -3px 13px 1px rgba(0, 0, 0, 0.3);
}
.shadow {
    -moz-box-shadow: 0 0 6px grey;
    -webkit-box-shadow: 0 0 6px grey;
    box-shadow: 0 0 6px grey;
} 
.sidelines {
    display:block;
    position:relative;
    border-radius: 5px;
    padding: 1em; 
    padding-top:5.5em;
    background-color: rgba(0, 100, 0, 1);
    //height: 41.8em; //370px;
    width: 29em;//29em; //290px;
    box-shadow: 4px 3px 30px 10px rgba(0, 0, 0, 0.3);
    font-size: inherit;
    //transform: perspective(300px) rotateX(2deg);
    overflow: hidden;

}

.results-sidelines {
    border-radius: 5px;
    padding: 1em; 
    
    //padding-top:5.5em;
    background-color: rgba(0, 100, 0, 1);
    //height: 41.8em; //370px;
    width: 29em;//29em; //290px;
    //box-shadow: 4px 3px 30px 10px rgba(0, 0, 0, 0.3);
    font-size: 8.5px;
    //transform: perspective(300px) rotateX(2deg);
    overflow: hidden;
}

/* START OF PITCH */
.pitchandsubs {
    display:inline-block;
    position:relative;
    left:-30.3em;
    height: 37em;
    width:72.4em;
    margin:0;
    padding:0;
    //border:1px solid red;
    box-sizing:border-box;
    -webkit-transition: left 0.8s;
    transition: left 0.8s;
}
    .pitchbox {
    position: relative;
    display: inline-block;
    //float:left;
    background-color: rgba(0, 100, 0, 1);
    border: 0.1em solid white;
    border-radius:3px;
    height: 37em;
    width: 29em;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    margin: 0;
    box-sizing: border-box;
    box-shadow: inset 4px 3px 3px 1px rgba(0, 80, 0,  1), inset  -4px -3px 13px 1px rgba(0, 80, 0,  1);
    font-size: inherit;
}

        .goalbox {
            box-sizing: border-box;
            position: absolute;
            border: 1px white solid;
            width: 40%;
            height: 20%;

            left: 30%;
            opacity: 0.5;
    }

.tacticscontainer .goalbox:nth-of-type(2), .TeamChoiceFormation .goalbox:nth-of-type(2) {
    bottom:-1px;
}
/*=====================================
TeamChoice table
=====================================*/
    .teamchoice {
        position:relative;
        display:inline-block;
        font-size:10px;
        width:280px;
        height:35em;
        border:1px solid lightgrey;
        padding:2em;
        border-radius:3px;
        margin:10px;
        background-color:white;
    }
    .teamchoicetable {
        width:100%;
        height:100%;
        vertical-align: bottom; 
    }
    .teamchoicetable td:nth-of-type(3) {
        width:33%;
    }
    .teamchoicetable td {
        border:1px solid lightgrey;
        text-align: center;   
    }
    .teamchoicetable h1, .teamchoicetable h2 {
        color:indianred;
    }
    .teamselectorinput {
        outline:none;
        width:100%;
        margin-top:0.5em;
        padding:0;
        background-color: indianred;
        color:white;
    }
    .teamselectorinput:active {
        background-color: white;
        color:indianred;
    }
    .teamchoicetable tr:first-of-type td, .teamchoicetable tr:last-of-type td {
        
        border-color:white;
    }
    .teamchoicetable tr:nth-of-type(2) td {
        border:none;
    }
    .teamchoicetable tr td {
        
        border-left:none;
        border-right:none;
    }
    .TeamChoiceSidelines {
        background-color: rgba(0, 100, 0, 1);
        padding: 5px;
        border-radius: 3px;
    }
    .TeamChoiceFormation {
        display: inline-block;
        position: relative;
        background-color: rgba(0, 100, 0, 1);
        font-size:30px;
        height: 7.4em; 
        width: 5.8em; 
        border: 1px solid rgba(255, 255, 255, 1);
        text-align: center;
        color: rgba(255, 255, 255, 0.2);
	}   
    .TeamChoiceFormation .playerobject {
        padding:0.7em;
        border:none;
        border:0.4em solid white;
    }
    .formationplrobj .playerobject {
        background-color: orange;
    }
    .formationplrobj:last-of-type .playerobject {
        background-color: indianred;
    }
    .teamchoicetable input {
        position:relative;
        display:inline-block;
        width:100%;
    }
    #createteamform input {
        margin: 0;
    }

/*=====================================*/

        .halfway {
            position: absolute;
            top: 50%;
            right: 0px;
            height: 1px;
            width: 100%;
            opacity: 0.5;
            background-color: white;
    }
        .centercircle {
            position: absolute;
            width: 30%;
            height: 24%;
            top: 38%;
            left: 35%;
            opacity: 0.5;
            border: solid 1px white;
            border-radius: 50%;
            box-sizing: border-box;
}
        .centercircle2 {
            position: absolute;
            width: 17px;
            height: 17px;
            top: calc(50% - 8px);
            left: calc(50% - 8px);
            opacity: 0.5;
            border: solid 1px white;
            border-radius: 50%;
            box-sizing: border-box;
}
        .centerdot {
            position: absolute;
            background-color: white;
            height: 9px;
            width: 9px;
            border-radius: 50%;
            left: calc(50% - 4px); //126px;
            top: 206px;
            box-sizing: border-box;
            opacity: 0.0;
}
    .subsbench {
    position: relative;
    display:inline-block;
   // background-color: rgba(0, 100, 0, 1);
    height: 37em;
    margin-left:1em;
    width: 10.4em;
    -webkit-transition: margin 0.5s;
    transition: margin 0.5s;
    box-sizing: border-box;
    border-top: 0.1em  solid white;
    border-bottom: 0.1em  solid white;
    border-right: 0.1em  solid white;
}

        .plrobj {
        width: 5em;
        height: 4.3em;
        box-sizing: border-box;
        text-align: center;
        font-size: inherit;
        color: white;
        line-height: 1.4em;
        padding: 0px;
        margin: 0px;
        cursor: all-scroll;

    }

	.playerobject {
        border: 2px solid white;
        border-radius: 50%;
        height: 2.8em; //28px;
        width: 2.8em; //28px;
        line-height: 0.2em;//1.95em; //28px;
        font-size: 1.4em; //14px;
        color: white;
        margin: 0 auto;
        vertical-align: top;
        text-align: center;
        background-color: darkgrey;
        box-sizing:content-box;
    }
    .ui-draggable-dragging > .playerobject {
        background-color:grey;
    }
            .pitchbox .plrobj .playerobject {
                
                box-shadow: -0.3em 0.2em 1em 0.2em rgba(0, 80, 0, 1), 0.3em 0.2em 1em 0.2em rgba(0, 80, 0, 1);
            }
            .pitchbox .plrobj:nth-child(even) > .playerobject , .formationselection .formationplrobj:nth-child(odd) > .playerobject {
                background-color:orange;
            }
            .pitchbox .plrobj:nth-child(odd) > .playerobject , .formationselection .formationplrobj:nth-child(even) > .playerobject {
                background-color:indianred;
            }
            .results-sidelines .pitchbox .plrobj:nth-child(even) > .playerobject {
                background-color:var(--B-color)
            }
            .results-sidelines .pitchbox .plrobj:nth-child(odd) > .playerobject {
                background-color:var(--A-color);
            }

        .playername {
            font-weight:500;
            font-size: 0.7em;
            line-height:2.5em;
        }
        .teamGreyedPlayer {
            background-color: lightgrey;

        }
        .teamFakePlayer {
            opacity:.5;
        }
            .pitchbox > .plrobj {
                position: absolute;
            }
            .subsbench > .plrobj {
        position: relative;
        display: inline-block;
        margin: .3em 0;
        opacity:1;
}
.injuredplayers{
    display:none;
    height: 9.6em;
    width: 29em;
    background-color:rgba(205,92,92, 1);
    border-radius:3px;
    margin-top:1em;
    overflow-y: scroll;
}
    .injuredplrobj {
        display:inline-block;
        width: 5em;
        height: 4.3em;
        box-sizing: border-box;
        text-align: center;
        font-size: inherit;
        color: white;
        line-height: 1.4em;
        opacity:0.5;
        padding: 0.2em 0;
        margin: 0px;

    }
/* END OF PITCH */


@media (max-width: 600px) {   
    #mainsquadlist .squademailaddresscolumn {
        display: none;
    }
    #mainleaguetable .table_Games_Stats {
        display:none;
    }
    #contentcontainer1 {
        min-width:280px;
    }
}
@media (max-width: 980px) {
    /* RESPONSIVE MENU */
    .menubarlinkscontainer {
        
        position:relative;
        top:60px;
        padding-bottom:60px;
        box-sizing: border-box;
    }
    #burgermenucheckbox:checked ~ .menubarlinkscontainer {
        display:inline-block;
        max-height: 700px;
    }
    .menuitem {
        text-decoration: none;
        width:100%;
    }
    a > .menuitem {
        padding:0px 0px;
        font-size: 16px;
    }
   .menubarlinkscontainer a > .specialmenuitem {
        position:relative;
        top: 0px;
        right:0px;
        margin: 25px 0 20px 0;
    }
    .validationmessage a > .specialmenuitem {
        position:relative;
        display:inline-block;
        right:10px;
    }
    #hamburgermenu {
        /* label for input */
        display: inline-block;    
    }
}
    /* MENUBAR SECTION END */ 

.editableaccountitem {
    text-align:left;
    display:inline-block;
    //border: 1px solid black;
    vertical-align: bottom;
    margin:0.5em;
}
editableaccountitem h2 {
	line-height:3em;
}
.editableaccountheader {
    text-align:left;
//	border: 1px solid black;
}
.editableaccountheader p {
	margin-left:1.1em;
	display:inline-block;
}
.editableaccountheader input, .editableaccountheader .inputborder {
	margin-top:0;
	
}

.editableaccountitem select {
	position:relative;
    width: 100%;
}

.GameHistory {
            /* Same as Team Choice */
            position:relative;
            display:inline-block;
            font-size:10px;
            width:280px;
            //height:35em;
            border:1px solid lightgrey;
            padding:2em;
            border-radius:3px;
            margin:10px;
            background-color:white;
        }
        .flexspacer280 {
            position:relative;
            display:inline-block;
            font-size:10px;
            width:280px;
            //border:1px solid lightgrey;
            padding: 0 2em;
            border-radius:3px;
            margin:0px 10px;
        }
        .GameHistory .results-sidelines {
            margin: 0 auto;
        }
        .GameHistory table td h1{
            font-weight: 300;
           color: indianred;
        }
        .GameHistory table td h1 sup {
            font-size:0.5em;
        }
.GameHistory h2 {
    height: 1.5em;
    width: 1.5em;
    border-radius: 50%;
    margin:0;
    line-height:1.5em;
    color: white;
    font-weight:200;
}
        .GameHistory .teamA h2 {

            background-color:orange;

        }
        .GameHistory .teamB h2 {

            background-color:indianred;

        }
        .GameHistoryTable tr td {
             border-top:1px solid white;
             border-bottom:1px solid white;
    
        }
        .GameHistoryTable td {
            text-align: center;
            //border-top: 1px solid grey;
            //border-bottom: 1px solid grey;
            margin:0;
            padding:0;
            
        }
        .GameHistoryTable {
            width:calc(100% - 20px);
            box-sizing: padding-box;
            margin-left:10px;
            margin-right:10px;
        }
        .GameHistoryTable tr:nth-of-type(2) td {
            width:70px;
            
        }
        .GameHistoryTable tr:nth-of-type(2) td:nth-child(odd) {
            border-bottom:1px solid grey;
        }
        .GameHistoryTable tr:nth-of-type(2) td:nth-child(even) {
           
            width:40px;
            text-align:right;
            font-size:10px;
            line-height:22px;
        }
        .GameHistoryTable tr:nth-of-type(2) td:nth-of-type(2) {
            //border-bottom: 1px solid white;
        }
        .GameHistoryTable tr:nth-of-type(2) td:nth-of-type(3) {
            //border-left: 1px solid grey;
            border-bottom:1px solid white;
            
        }
        .GameHistoryTable .GameHistorySpacer {
            
        } 
        .GameHistorySpacer {
           // border-left:1px solid grey;
            
        }
        .GameHistoryTable tr:nth-of-type(2) td:nth-of-type(4) {
            border-left:none;
        }
        .GameHistoryTable tr:nth-of-type(2) td:last-of-type,
        .GameHistoryTable tr:nth-of-type(3) td:last-of-type {

            //border-right:1px solid grey;
        }
        .GameHistoryGameNo {
            display: inline-block;
            text-align:center;
            border-radius:50%;
            height:22px;
            width:22px;
            padding:0;
            margin:0;
            box-sizing: border-box;
            color:white;
            background-color:grey;
        }

.plrobjattendanceindicator {
    position:absolute;
    display:inline-block;
    height:0.5em;
    width:0.5em;
    border-radius:50%;
    //background-color:grey;
    Bottom:0.2em;
    right:0.2em;
    z-index:99;
    
}
.plrobjattendanceindicatorY {
    background-color:limegreen;
}
.plrobjattendanceindicatorO, .plrobjattendanceindicatorU {
    background-color:orange;
}
.plrobjattendanceindicatorN {
    background-color:indianred;
}

    .additionalplayersinsquad {
        display:inline-block;
		position: relative;
        right:0px;
        height:40px;
        width:40px;
        font-size: 2em;
        margin:0.5em 0;
        line-height:39px;
        border: 1px solid indianred;
        border-radius:50%;
        text-align:center;
        color:indianred;
        background-color: white;
        cursor:pointer;
		box-sizing: border-box;
    }
	.buttoncontaineradditionalplayers {
        text-align:right;
		padding:0;
		margin:0;
		display:inline-block;
		width:19%;
		box-sizing: border-box;
	}
    .additionalplayersinsquad:active {
        background-color: indianred;
        color:white;
    }
    .squadnewplayersinput {
        width:79%;
        min-width:100px;

    }


/* FROM MATCHDAY COPIED IN */
#mainleaguetable h2 {
    display:inline-block;
    text-align: left;
    font-weight: 400;
}
		h2 {
			text-align: center;
			font-weight: 600;
		}

		.attendanceresponse {
			display: inline-block;
			margin: 0.2em .5em;
			height: 2em;
			width: 2em;
			border-radius: 50%;
			border: 2px solid;
		}
        table td, table th {
            padding:0.em;
        }

		.attendanceY {
			border-color: limegreen;
		}
		
		.attendanceU {
			border-color: orange;
		}
		
		.attendanceN {
			border-color: indianred;
		}
		
		.attendanceY.attendanceselected {
			background-color: limegreen;
		}
		
		.attendanceU.attendanceselected {
			background-color: orange;
		}
		
		.attendanceN.attendanceselected {
			background-color: indianred;
		}
		
		.invitesentdiv {
			display:block;
			margin: 0 auto;
			height: 1.5em;
			width: 1.5em;
			border-radius: 50%;
			opacity: 0.50;
		}
		.invitesentY {
			background-color: limegreen;

		}
		.invitesentN {
			background-color: indianred;

		}
		
		.tableresponsesInOut {
			//width: 150px;
			text-align: center;
            white-space:nowrap;
		}
		.tableresponsesSquadNo .playerobject {
			margin:0 auto;
		}
        .playerobject.hidden {
            display:none;
        }
		
		.tableresponsesSquadNo {
			text-align: center;
		}
        .gameschedulegenstyles label {
            border:0.1em solid indianred;
            text-align:center;
            box-sizing:border-box;
            position:relative;
            
            padding:0.5em 0;
            display:inline-block;
            font-size:0.8em;
            outline-color: indianred;
            border-radius:3px;
        }
        
        .recurringgamesamount label {
            margin:1em 0.5em;
            width:calc(25% - 1em);
            
        }
        .gameschedulegenstyles {
            text-align: center;
        }
        .gamedayofweek label {
            margin:1em 0.1em;
            padding:1em 0.1em;
            width:13%;
        }
        .gamedayofweek .spansubtext {
            font-size:6px;
            font-weight: 600;
            
        }
#schedulegameform label:hover {
    -moz-box-shadow: 0 0 6px rgba(205, 92, 92, 0.5);
    -webkit-box-shadow: 0 0 6px rgba(205, 92, 92, 0.5);
    box-shadow: 0 0 6px rgba(205, 92, 92, 0.5);
}
        .recurringgamesamount label .spanmainshedule, .gamedayofweek label .spanmainshedule {
            font-size: 1.6em;
            font-weight: 600;
            color:indianred;
            display:block;
        }
        .recurringgamesamount input[type="radio"], .gamedayofweek input[type="radio"] {
            display:none;
        }
        .recurringgamesamount label {

        }
        .recurringgamesamount .labelfocus, .recurringgamesamount .labelfocus .spanmainshedule, .gamedayofweek .labelfocus, .gamedayofweek .labelfocus .spanmainshedule {
            background-color:indianred;
            color: white;
        }
        .GameAvailabilityAttendanceUpdate {
            display:block;
            text-align:center;
            
        }
        .GameAvailabilityAttendanceUpdate .attendanceresponse {
            line-height:2em;
            color:white;
            
        }
        .deletebuttonX {
            height:2em;
            width:2em;
            text-align:center;
            border-radius:50%;
            background-color:white;
            line-height:2.2em;
            cursor: hand;
        }
        .deletebuttonX span {
            font-size:2em;
            color:lightgrey;
            font-weight:600;
        }
.deletebuttonX:hover {
    background-color:lightgrey;
}
.deletebuttonX:hover span {
    color:white;
}          

                

    .switchlabel {
        position:relative;
        display:inline-block;
        text-align: center;
        font-size:1em;
        height:2em;
        width:4em;
        padding:0.1em;
        background-color:lightgrey;
        border:0.1em solid indianred;
        border-radius:2em;
    }
    .switchlabel .newswitchbutton {
        position: absolute;
        text-align:center;
        color:indianred;
        top:0.1em;
        left:0.1em;
        height:2em;
        width:2em;
        line-height:1.8em;
        background-color:white;
        box-sizing:border-box;
        -webkit-transition: left 0.5s, background 0.5s, border 0.5s;
        transition: left 0.5s, background 0.5s, border 0.5s;
        border:0.1em solid white;
        border-radius:2em;
    }
    .switchspan {    
        font-family: arial;
        font-size:0.5em;
    }
    .switchinputcheckbox {
        display:none;
    }
    .switchinputcheckbox:checked + .switchlabel > .newswitchbutton {
        left:2.1em;
        background-color: indianred;border:0.1em solid indianred;
        color:white;
    }
    .newswitchholderoptions {
        display:inline-block;
        //box-sizing: border-box;
        //border:1px solid red;
        width:calc(50% - 0.15em);
        font-size: 15px;
        margin:1em 0;
        height:2.4em;
    }
        .spanswitchdescribe {
            display: inline-block;
            position:relative;
            margin:0.5em 0;
            font-size:0.8em;
            line-height:1em;
            padding-left:1em;
        }

/* END MATCHDAY */


.hidden {
    display: none;
}
.invalidinput {
    color: indianred!important  ;
}

.deleteitemoverlay {
	font-size:1.5em;
	display:block;
	position: absolute;
	height:100%;
	width:100%;
	background-color: rgba(255,255,255,0.8);
	z-index:999999;
	top:0px;
	left:0px;
	box-sizing: padding-box;
}
.deleteitemoverlay .OptionButtons {
	display:block;
	position:relative;
	//position: absolute;
    //top: 0; bottom: 0; left: 0; right: 0;
	//margin: auto auto;
	top:50%;
}

.deleteitemoverlay .altOptionButtons {
	display:block;
	position:relative;
	bottom:-52%;
}
#upcominggames {
	position:relative;
}

td.cancel {
	text-align:center;
	
}
td.cancel div {
	margin:0 0.5em;
	font-size:10px;
	position:relative;
	display:inline-block;
	box-shadow:none;
	text-align:center;
	width:35%;
}