html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

#map {
	width: 100%;
	min-height: 100vh;
	z-index : 1;
}

#players {
	position : absolute;
	right : 20px;
	top : 20px;
	/*max-height : 60%;*/
	width : 300px;
	background-color : white;
	opacity : 0.9;
	z-index : 999;
	
}
#players-container {
	overflow-y : scroll;
	height : 350px;
}
#logo {
	position : absolute;
	top: 10px;
	left: 10px;
	z-index:999;
	background-image:url('https://upload.wikimedia.org/wikipedia/fr/archive/3/34/20120416121955%21Logo_SCO_Angers.svg');
	width: 200px;
	height: 200px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor : pointer;
}

#logocartosport {
	position : absolute;
	bottom: 5px;
	left: 5px;
	z-index:999;
	background-image:url('../images/logocartosport.jpg');
	width: 200px;
	height: 34px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor : pointer;
	opacity : 0.8;
	border-radius: 7px;
}

#search {
	padding : 5px 0 5px 22px;
	width : 100%;
	box-sizing : border-box;
	border-width : 0;
	background-color : #e0d8ad;
	font-style :italic;
    background-image: url(../images/search.png);
    background-position: 3px 5px;
    background-repeat: no-repeat;
	background-size : 15px;
}
#selection {
	font: bold 1.1em Roboto;
	color: rgba(209, 182, 42, 1);
	padding: 3px 17px 3px 3px;
	text-shadow : 1px 1px 0px #000000a3;
	line-height : 22px;
}
#reset {
	position : absolute;
	width : 15px;
	height : 15px;
	right  : 3px;
	top : 7px;
    background-image: url(../images/reset.png);
    background-repeat: no-repeat;
	background-size : 15px;
	cursor : pointer;
}
#reset2 {
	position : absolute;
	width : 15px;
	height : 15px;
	right  : 3px;
	top : 62px;
    background-image: url(../images/reset2.png);
    background-repeat: no-repeat;
	background-size : 15px;
	cursor : pointer;
}
#filters {
	display : flex;
	width : 100%;
	font: bold 0.9em Roboto;
	padding : 5px;
	box-sizing: border-box;	
}
#tri, #filtre {
	width : 50%;
	display :flex;
}
#tri div, #filtre div {
	padding-right : 5px;
}
#tri select {
    max-width: 110px;
}

.areaplayers{
	font: italic 0.8em Roboto;
}
.player {
	padding : 7px;
	font-family : Roboto;
	cursor : zoom-in;
	position : relative;	
}
.locmore {
	font-size : 12px;
}
.player:nth-child(even) {
	background-color : black;
	color : white;
}

.img-card{
	width : 25px;
	position :absolute;
	right : 10px;
	top : 22px;
	cursor : pointer;
}
.img-card:hover{
	filter : invert(50%)
}
.name {
	font-weight : 800;
}
.birthday, .city {
	font-size : 0.9em;
}
.italic {
	font-style : italic;
}
.hidearea {
	display : none;
}
.little {
	font-size: 12px;
}
.tooltip-country {
	text-align:center;
	font: bold 1.2em Roboto;
	color: rgba(209, 182, 42, 1);	
}
.tooltip-numb {
	text-align:center;
	font: italic 0.9em Roboto;
}

#draggable { 
	cursor : move;
	position: absolute;
	width: 750px; 
	height: 550px;
	border : 5px solid black;
	border-radius : 10px; 
	background-color : black;
	z-index:0; 
	top : 5px; 
	left : 25px;
	opacity : 0;
}

@keyframes slide {
	from  {left:-1200px; }
    to {left:20px;}
}

iframe {
	z-index: 500!important;
}
#closecard {
	position : absolute;
	width : 20px;
	height : 20px;
	right  : 3px;
	background-color : white;
	text-align : center;
	font : bold 1em Roboto;
	border-radius : 10px;
	cursor : pointer;
	border : 1px solid grey;
}
#closecard:hover {
	background-color : red;
	color : white;
}

@media screen and (max-width: 1279px) {
#draggable {
	width : 450px;
	left : 5px;
}
#closecard {
	right  : 0px;
}
}
@media screen and (max-width: 799px) {
#players-container {
	height : 140px;
}
#draggable {
	width : 100%;
	left : 0px;
	top : 0px;
	border-radius : 0;
}
#closecard {
	right  : 7px;
}
}