label {
  font-weight : bold;
}

.fa,.far,.fas {
	font-size : 2em;
	color:#212529;
	margin:2px;
}

.fa:hover {
	text-decoration:none;
}

.disabled {
	background-color : #AAA;
}

.displayNone {
	display:none;
}

.visibilityHidden {
	visibility:hidden;
}

.tableTab {
	border:1px solid grey;
	background-color : #bbb;
	padding : 3px;
	cursor:pointer;
}
.selectedTableTab {
	background-color : #fff;
}

.fa {
}

.draggableContainer {
  height:200px; /* height of viewport in your case 100% */
  overflow:hidden;
  margin:10px 0 0 0;
  border:1px solid #777;
  /*position:fixed;*/
}

.draggableImage, .draggableImage2 {
  position:relative; /* what #map img is relative to */
  cursor:e-resize;
}

.draggableImage img{
  position:absolute; /* need this to make dragging easy */
  top:0;
  left:0;
  border:0 none transparent;
}	

.row {
	margin-bottom:10px;
}
label {
	margin-top:7px;
}

#playButton {
	left:50%;
	transform: translateY(-10%) translateX(-50%);
}
#stopButton {
	left:50%;
	transform: translateY(-10%) translateX(-50%);
	display:none;
}
#leftButton {
	left:45%;
	transform: translateY(-10%) translateX(-50%);
}
#rightButton {
	left:55%;
	transform: translateY(-10%) translateX(-50%);
}

.playerButton:hover {
	color:#fff;
}
.playerButton {
	font-size:2em;
	color:#fff;
	z-index:100;
	position:absolute;
	-webkit-text-stroke: 3px black;
	bottom:0%;
	opacity:0.7;
	/*display:none;		*/
}
	
#colorbox,#cboxLoadedContent {
    background-color: #000; /* Add a color of your choice */
}
#cboxTitle {
	font-size:2em;
}
.btn-primary {
	background-color:#aaa;
}


/* Implémenté par Antoine */