.soccerfield-field {
	max-width: 60%;
	height: auto;
	float:left;
	position:relative
}

.soccerfield-benchplayers {
	max-width: 40%;
	height: auto;
	float: left;
	text-align: left;
	color: grey;
}

.soccerfield-benchplayers input {
	margin: 1px;
}

.soccerfield-fieldcontainer , .soccerfield-input-player-number, .soccerfield-input-player-name,
.soccerfield-input-player-time ,.soccerfield-input-benchplayer-name, .soccerfield-select-systemplay {
	color: white;
	text-transform: uppercase;
	font-size: .7rem;
	font-family: 'Nunito',sans-serif;
}	


/**********
player 
***********/

.soccerfield-player {
    display: block;
    position: absolute;
	text-align: center;
    z-index: 100;
	width: 15%;
}

.soccerfield-player span {
    display:block;
    z-index: 150;   
    padding: 5px;
    text-align: center;
}

div span.soccerfield-player-number {
	background-color: midnightblue;
    border-radius: 50%;
    display: inline-block;
    width: .9rem;
    height: .9rem;
    color: white;
    font-weight: bold;
    box-sizing: content-box;
}	

.soccerfield-player-name {
	padding : 5px;
}	

.soccerfield-input-player-number {
	margin : 3px;
	width : 1.5rem;	
	background-color: #343a40;
    border-color: #343a40;
    border: 1px solid transparent;
	background-clip: padding-box;
	border-radius: 50%;
	text-align: center;
}	

.soccerfield-input-player-time {
	margin : 3px;
	width : 1.5rem;	
	background-color: #343a40;
    border-color: #343a40;
    border: 1px solid transparent;
	background-clip: padding-box;
	text-align: center;
}	

.soccerfield-input-player-name {
	/* margin : 3px; */	
	background-color: #343a40;
    border-color: #343a40;
    border: 1px solid transparent;
	background-clip: padding-box;
	border-radius: .25rem;
	width: 85%
}	

/**********
system play
***********/
.soccerfield-select-systemplay {
	background-color: #343a40;
    border-color: #343a40;
    border: 1px solid transparent;
	background-clip: padding-box;
	border-radius: .25rem;
}	

/**********
bench
***********/
.soccerfield-benchplayers-title {
	padding: 5px;
	text-decoration: underline;
}	

.soccerfield-input-benchplayer-name {
	margin : 3px;	
	background-color: #343a40;
    border-color: #343a40;
    border: 1px solid transparent;
	background-clip: padding-box;
	border-radius: .25rem;
	width: 30%
}	

/**********
replaced
***********/
.soccerfield-replaced {
	padding-left : 5px;
}	

/**********
GoalKeeper
**********/
.soccerfield-player.posX-GK {
    left:5%;
}
/**********
Back
**********/
.soccerfield-player.posX-B {
    left: 20%;
}
/**********
Defending midfielder
**********/
.soccerfield-player.posX-DM {
    left: 35%;
}

/**********
Midfielder
**********/
.soccerfield-player.posX-M {
    left:50%;
}
/**********
Attacking midfielder
**********/
.soccerfield-player.posX-AM {
    left: 65%
}
/**********
Forward
**********/
.soccerfield-player.posX-F {
    left: 80%;
}
/**********
Left
**********/
.soccerfield-player.posY-L {
    top: 10%;
}
/**********
Left-mid
**********/
.soccerfield-player.posY-LM {
    top: 25%
}
/**********
Left-center
**********/
.soccerfield-player.posY-LC {
    top: 30%
}
/**********
Center
**********/
.soccerfield-player.posY-C {
    top:43%;
}    
/**********
Right-center
**********/
.soccerfield-player.posY-RC {
    top:55%; 
}
/**********
Right-mid
**********/
.soccerfield-player.posY-RM {
    top: 61%
}
/**********
Right
**********/
.soccerfield-player.posY-R {
    top:75%; 
}

/**********************
           576px
**************************/
@media (max-width: 640px) {
	
	.soccerfield-field {
		max-width: 100%;
		height: auto;
		float:left;
		position:relative
	}
	.soccerfield-benchplayers {
		max-width: 100%;
		height: auto;
		float:left
	}
	.soccerfield-player {
	    display: block;
	    position: absolute;
		text-align: center;
	    z-index: 100;
		width: 15%;
		height: 15%;
	}
	.soccerfield-input-player-number {
		width : 1rem;	
		background-color: #343a40;
	    border-color: #343a40;
	    border: 1px solid transparent;
		background-clip: padding-box;
		border-radius: 50%;
		text-align: center;
	}	
	.soccerfield-input-player-name {
		background-color: #343a40;
	    border-color: #343a40;
	    border: 1px solid transparent;
		background-clip: padding-box;
		border-radius: .25rem;
		width: 85%;
		height: 50%;
	}	
		
}