/* STYLES GERANT L'AFFICHAGE DE L'ALERTE "COOKIE POLICY" DU SITE EUROPARL */
/* Composant "COOKIES ALERT" */
/* Copyright : European Parliament */
	
	/* ========================================================================================================================================================================== */
	/* == STYLES GENERIQUES A TOUS LES BREAKPOINTS ============================================================================================================================== */
	/* ========================================================================================================================================================================== */
		
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* STYLE GENERIQUES : Conteneurs principaux */

			 #cookie-policy.epjs_cookiepolicy{
				position: 						fixed;
				display: 						block;
				z-index: 						5000;
				overflow: 						hidden;
				bottom: 						0;
				left: 							0;
				width: 							100%;
				height: 						auto;
				margin: 						0;
				padding: 						5px 0 0 0;
				font-family: 					Helvetica, Arial, sans-serif;
				font-size: 						1em;
				text-align: 					center;
				letter-spacing: 				normal;
				white-space: 					normal;
				color: 							inherit;
			}

			 #cookie-policy.epjs_cookiepolicy > div{
				position: 						relative;
				display: 						block;
				bottom: 						0;
				left: 							0;
				width: 							100%;
				margin: 						0;
				padding: 						20px 0 10px 0;
				transform:						translate(0, 110%);
				-webkit-transform:				translate(0, 110%);
				transition:						transform 0.5s ease-out 0s;
				background-color: 				rgba(51, 51, 51, 0.95);
				color: 							#fff;
			}
			 #cookie-policy.epjs_cookiepolicy.epjs_displayed > div{
				transform:						translate(0, 0);
				-webkit-transform:				translate(0, 0);
				transition:						transform 1s ease-out 0s;
				-webkit-transition:				-webkit-transform 1s ease-out 0s;
			}

		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* STYLE GENERIQUES : Textes */

			 #cookie-policy.epjs_cookiepolicy > div .epjs_title{
				position: 						static;
				display: 						block;
				margin: 						0;
				padding: 						0 10px 14px 10px;
				font-family: 					Georgia, Garamond, serif, Palatino;
				font-size: 						1.6em;
				font-weight: 					lighter;
				color: 							inherit;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_text{
				position: 						static;
				display: 						block;
				margin: 						0;
				padding: 						0 10px 14px 10px;
				font-size: 						1.2em;
				font-weight: 					lighter;
				color: 							inherit;
			}

		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* STYLE GENERIQUES : Liens */

			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons{
				position: 						static;
				display: 						block;
				margin: 						0;
				padding: 						0;
				text-align: 					center;
				letter-spacing: 				-0.3em;
				color: 							inherit;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:link,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:visited,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button{
				position: 						static;
				display: 						inline-block;
				width: 							auto;
				margin: 						0 10px 10px 10px;
				padding: 						0 10px;
				background: 					#fff;
				border:							1px solid #fff;
				outline: 						none;
				cursor: 						pointer;
				font-family: 					Helvetica, Arial, sans-serif;
				font-size: 						1.2em;
				text-align: 					center;
				letter-spacing: 				-0.3em;
				white-space: 					nowrap;
				vertical-align: 				middle;
				color: 							#505154;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:before,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button:before,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a 		span,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button span{
				position: 						static;
				display: 						inline-block;
				width: 							auto;
				margin: 						0;
				padding: 						0;
				cursor: 						pointer;
				font-size: 						1em;
				text-align: 					center;
				letter-spacing: 				normal;
				vertical-align: 				middle;
				color: 							inherit;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:before,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button:before{
				overflow: 						hidden;
				width: 							0;
				height: 						25px;
				text-indent: 					10px;
				content: 						" ";
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:hover,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:focus,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons a:active,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button:hover,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button:focus,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button:active{
				background: 					#1093CF;
				border-color:					#1093CF;
				color: 							#fff;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button.epjs_agree{
				background: 					#326AAB;
				border-color:					#326AAB;
				color: 							#fff;
			}
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button.epjs_agree:hover,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button.epjs_agree:focus,
			 #cookie-policy.epjs_cookiepolicy > div .epjs_buttons button.epjs_agree:active{
				background: 					#fff;
				border-color:					#b1b3b5;
				color: 							#1093CF;
			}









/* CSS Document pour les pages de la galaxie Europarl [createur Pascal Bagnasco] */
/* CSS permettant la suppression des valeurs par defaut imposees par les navigateur pour toutes les balises */

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

/* Reinitialisation de toutes les balises generiques */
html, body, applet, object, iframe,
div, span, p, blockquote, img, hr,
h1, h2, h3, h4, h5, h6,
pre, a, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ul, li,
fieldset, form, label, legend, textarea, input, button,
table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 					0;
	padding: 					0;
	border: 					0;
	font-weight: 				inherit;
	font-style: 				inherit;
	font-family: 				inherit;
	vertical-align: 			baseline;
}
/* Reinitialisation des balises de liste */
ul{	list-style: 				none;	}
ol{
	border: 					0;
	font-weight: 				inherit;
	font-style: 				inherit;
	font-family: 				inherit;
	vertical-align: 			baseline;
}
/* Reinitialisation des balises d'abbreviation */
acronym, abbr{
	cursor:						help;
	speak:						spell-out;
	margin: 					0;
	padding: 					0;
	font-weight: 				inherit;
	font-style: 				inherit;
	font-family: 				inherit;
	vertical-align: 			baseline;
}
a acronym, a abbr{
	border: 					0;
	cursor:						pointer;
}
/* Reinitialisation des balises de formatage texte */
h1, h2, h3, h4, h5, h6{
	font-size:					1em;
	font-weight: 				normal;
}
em{
	margin: 					0;
	padding: 					0;
	border: 					0;
	outline: 					0;
	font-weight: 				inherit;
	font-family: 				inherit;
	vertical-align: 			baseline;
}
strong{
	margin: 					0;
	padding: 					0;
	border: 					0;
	outline: 					0;
	font-style: 				inherit;
	font-family: 				inherit;
	vertical-align: 			baseline;
}
/* Reinitialisation des balises pour les tableaux */
table{
	speak-header:				always;
	border-spacing: 			0;
	border-collapse: 			separate;
}
caption, th, td{
	font-family: 				inherit;
	font-style: 				inherit;
	font-weight: 				normal;
	text-align: 				left;
}
/* Reinitialisation des balises de citation */
blockquote:before, blockquote:after, q:before, q:after{
	content: 					"";
}
blockquote, q{	quotes:			"" "";	}

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

/* Parametrage du corps de la page */
body{
	background: 				#FFFFFF;
	font-family: 				Arial, Helvetica, sans-serif;
	font-size: 					62.5%;  /* Code permettant l'equilavance em/px >> "1.1em=11px;" & "1.2em=12px;" */
	line-height: 				inherit;
	color: 						#363636;
}

/**
SEE CustomComponents.css for class like
searchpanel, checkbox
 */
.columncontainer {
	display: flex;
	flex-direction: column;
}

label.checkbox {
	width: 150px;
	font-size: 13px;
	font-weight: bold;
	color: white;
	padding-bottom: 10px;
	cursor: pointer;
}

label.checkbox:hover {
	color: lightgrey;
}

label.checkbox.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.checkbox input[type="checkbox"] {
	position: relative;
	top: -1px;
	vertical-align: middle;
	margin-right: 5px;
	height: 15px;
	width: 15px;
}

/*
SEARCH BAR CSS
 */
.searchpanel {
	display: flex;
	flex-direction: column;
	margin: 30px 20px 10px 42px;
}

.searchpanel .searchSection {
	display: flex;
	height: 35px;
}

.searchpanel input {
	border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border: none;
	padding: 5px 15px;
	font-size: 18px;
	width: 360px;
}

.searchpanel input:focus {
	outline: none;
}

.searchpanel button {
	font-size: 22px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	cursor: pointer;
	/* background-color: #fffb01;*/
	border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
}

.searchpanel button:focus {
	outline: none;
}

.searchpanel button:hover {
	background-color: #fffb01;
}

.searchpanel button i {
	display: flex;
}

.searchpanel p {
	color: red;
	font-weight: bold;
	font-size: 14px;
	margin-top: 5px;
	margin-left: 2px;
}

.select-base {
	width: 195px;
	height: 30px;
	font-size: 13px;
	font-weight: bold;
	outline: none;
	background-color: #363636;
	color: white;
	border: none;
	padding: 2px 2px 2px 2px;
	cursor: pointer;
	margin-bottom: 10px;
}

.option-base {
	font-size: 13px;
	font-weight: bold;
}

.search h1 {
	padding-left: 320px;
	position: absolute;
	top: 22px;
	width: 600px;
	z-index: 10;
	display: block;
	margin-left: 7px;
}

.search #search {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: 45px;
	padding-right: 20px;
	min-height: 95vh;
	margin-left: 7px;
}

.search #mainView {
	display: flex;
	margin: 0;
}

.search #menuLeft {
	display: flex;
	flex-direction: column;
	flex: 0 0 320px;
	width: 320px;
}

.search #search .searchpanel {
	display: flex;
	flex-direction: column;
	margin: 0 0 30px 0;
}

.search #menuLeft .areas {
	width: 60%;
	margin-top: 10%;
	padding-left: 10px;
}

.search #menuLeft .firstArea {
	width: 60%;
	margin-top: 15px;
	padding-left: 10px;
}

.search #menuLeft .status {
	width: 60%;
	margin-top: 10%;
	padding-left: 10px;
}

.left10 {
	padding-left: 10px;
}

.top80 {
	margin-top: 80px;
}

body.search {
	padding-top: 0;
}

body.search .navigationTimeline {
	display: none;
}

.search #search h3 {
	font-size: 22px;
	font-weight: bold;
	color: white;
	padding-bottom: 42px;
	padding-top: 42px;
	padding-right: 250px;
	display: inline-block;
	background-position: 0 35px;
}

.search #search h2 {
	margin-top: 10px;
	margin-bottom: 20px;
}

.search #search h3>span, .search #search h2>span {
	position: relative;
}

.search a.open_help_popup_link, .search a.parliament_logo_link {
	display: none;
}

/**
close button zone
 */
.search .closeButton {
	display: block;
	border: 1px solid #fefa00;
	z-index: 15;
}

.search .openTrack {
	top: 0;
	bottom: 0;
	background-position: 230px 0;
	background-repeat: repeat-y;
	background-image: url('../images/trackview/statictrack.gif');
}

#search .content {
	text-transform: none;
}

body.search .content {
	font-size: 20px;
	margin-right: 15%;
}

#search .contentContainer {
	display: inline;
}

#search .contentContainer {
	margin-top: 20px;
}

/*
THEME part
*/
#searchResultMainContainer {
	margin-bottom: 30px;
}

#searchResultMainContainer .titleContainer {
	display: flex;
	width: 100%;
}

#searchResultMainContainer .resultTitle {
	font-size: 1.3em;
	flex-basis: 100%;
}

#searchResultMainContainer .resultCount {
	font-size: 1.3em;
}

#searchResultMainContainer .noResultFound {
	font-size: 1.3em;
}

#searchResultMainContainer ul {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

#searchResultMainContainer ul>li {
	display: flex;
	min-height: 50px;
	align-items: center;
	background-color: #202122;
	margin-bottom: 1px;
}

#searchResultMainContainer ul>li>a {
	display: flex;
	min-height: 50px;
	align-items: center;
	width: 100%;
	margin: 5px 0 5px 0;
}

#searchResultMainContainer ul>a {
	align-self: flex-end;
	margin-top: 5px;
	cursor: pointer;
	font-size: 13px;
	color: #fcff07;
}

#searchResultMainContainer .resultTextContainer {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	border-left: 1px solid #3a3a3a;
	width: 95%;
	padding: 5px 0;
}

.resultTextContainer b {
	color: #f6f6f6;
}

#searchResultMainContainer .resultTextContainer .resultText {
	color: #8d8d8d;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
}

#searchResultMainContainer .resultTextContainer .foundIn {
	display: flex;
	text-transform: none;
	font-weight: bold;
	margin-left: 10px;
}

#searchResultMainContainer .resultTextContainer .resultLink {
	color: #fcff07;
	margin-left: 10px;
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 14px;
	font-weight: bold;
}

#searchResultMainContainer .resultTextContainer .resultLink b {
	color: #fcff07;
}

#searchResultMainContainer .resultTextContainer .resultLink:hover {
	color: #ffe654;
}

#searchResultMainContainer .resultTextContainer .resultLink:hover b {
	color: #ffe654;
}

#searchResultMainContainer .resultTextContainer .resultTextContent {
	margin-left: 10px;
	margin-right: 10px;
	text-transform: none;
	font-size: 17px;
	color: #CCC;
}

#searchResultMainContainer .resultTextContainer .resultTitleContent {
	font-size: 15px;
	font-weight: bold;
}

#searchResultMainContainer .areaTypeContainer {
	min-width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#searchResultMainContainer .areaTypeContainer .themeNumber {
	font-size: 18px;
	color: #fcff07;
}

#menuLeft button {
	color: white;
	background: black;
	background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%,
		rgba(67, 67, 68, 1) 100%);
	margin: 80px 0 10px 10px;
	width: 90px;
	height: 30px;
	font-size: 13px;
	font-weight: bold;
	border: 1px solid rgba(67, 67, 68, 1);
	border-radius: 5px 5px;
	-webkit-border-radius: 5px 5px;
}

#menuLeft button:hover {
	color: white;
	background: black;
	cursor: pointer;
}/**
SEE CustomComponents.css for class like
searchpanel, checkbox
 */

.columncontainer{
    display: flex;
    flex-direction: column;
}

label.checkbox {
    width: 150px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    padding-bottom: 10px;
    cursor: pointer;
}

label.checkbox:hover{
    color:lightgrey;
}

label.checkbox.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.checkbox input[type="checkbox"]{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
    height: 15px;
    width: 15px;
}


/*
SEARCH BAR CSS
 */

.searchpanel {
    display: flex;
    flex-direction: column;
    margin: 30px 20px 10px 42px;
}

.searchpanel .searchSection {
    display: flex;
    height: 35px;
}

.searchpanel input{
    border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    width: 360px;
}

.searchpanel input:focus {
    outline: none;
}

.searchpanel button {
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    cursor: pointer;
    /* background-color: #fffb01;*/
    border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
}

.searchpanel button:focus {
    outline: none;
}

.searchpanel button:hover {
    background-color: #fffb01;
}

.searchpanel button i {
    display: flex;
}

.searchpanel p {
    color: red;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 2px;
}

.select-base {
    width: 195px;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
    outline: none;
    background-color: #363636;
    color: white;
    border: none;
    padding: 2px 2px 2px 2px;
    cursor: pointer;
    margin-bottom: 10px;
}

.option-base {
    font-size: 13px;
    font-weight: bold;
}


.search h1 {
    padding-left: 320px;
    position: absolute;
    top: 22px;
    width: 600px;
    z-index: 10;
    display: block;
    margin-left: 7px;
}

.search #search {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 45px;
    padding-right: 20px;
    min-height: 95vh;
    margin-left: 7px;
}

.search #mainView {
    display: flex;
    margin: 0;
}

.search #menuLeft {
    display: flex;
    flex-direction: column;
    flex: 0 0 320px;
    width: 320px;
}

.search #search .searchpanel {
    display: flex;
    flex-direction: column;
    margin: 0 0 30px 0;
}

.search #menuLeft .areas {
    width: 60%;
    margin-top: 10%;
    padding-left: 10px;
}

.search #menuLeft .firstArea {
    width: 60%;
    margin-top: 15px;
    padding-left: 10px;
}

.search #menuLeft .status {
    width: 60%;
    margin-top: 10%;
    padding-left: 10px;
}

.left10 {
    padding-left: 10px;
}

.top80 {
    margin-top: 80px;
}

body.search {
    padding-top: 0;
}

body.search .navigationTimeline {
    display: none;
}

.search #search h3 {
    font-size: 22px;
    font-weight: bold;
    color: white;
    padding-bottom: 42px;
    padding-top: 42px;
    padding-right: 250px;
    display: inline-block;
    background-position: 0 35px;
}

.search #search h2 {
    margin-top: 10px;
    margin-bottom: 20px;
}

.search #search h3 > span, .search #search h2 > span {
    position: relative;
}

.search a.open_help_popup_link, .search a.parliament_logo_link {
    display: none;
}

/**
close button zone
 */

.search .closeButton {
    display: block;
    border: 1px solid #fefa00;
    z-index: 15;
}

.search .openTrack {
    top: 0;
    bottom: 0;
    background-position: 230px 0;
    background-repeat: repeat-y;
    background-image: url('../images/trackview/statictrack.gif');
}

#search .content {
    text-transform: none;
}

body.search .content {
    font-size: 20px;
    margin-right: 15%;

}

#search .contentContainer {
    display: inline;
}

#search .contentContainer {
    margin-top: 20px;
}

/*
THEME part
*/

#searchResultMainContainer {
    margin-bottom: 30px;
}

#searchResultMainContainer .titleContainer {
    display: flex;
    width: 100%;
}

#searchResultMainContainer .resultTitle {
    font-size: 1.3em;
    flex-basis: 100%;
}

#searchResultMainContainer .resultCount {
    font-size: 1.3em;
}

#searchResultMainContainer .noResultFound {
    font-size: 1.3em;
}

#searchResultMainContainer ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

#searchResultMainContainer ul > li {
    display: flex;
    min-height: 50px;
    align-items: center;
    background-color: #202122;
    margin-bottom: 1px;
}

#searchResultMainContainer ul > li > a {
    display: flex;
    min-height: 50px;
    align-items: center;
    width: 100%;
    margin : 5px 0 5px 0;
}

#searchResultMainContainer ul > a {
    align-self: flex-end;
    margin-top: 5px;
    cursor: pointer;
    font-size: 13px;
    color: #fcff07;
}


#searchResultMainContainer .resultTextContainer {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    border-left: 1px solid #3a3a3a;
    width: 95%;
	padding: 8px 0 8px 0;
}

.resultTextContainer b {
    color: #f6f6f6;
}

#searchResultMainContainer .resultTextContainer .foundIn {
    display: flex;
    text-transform: none;
    font-weight: bold;
    margin-left: 10px;
}

#searchResultMainContainer .resultTextContainer .resultLink {
    color: #fcff07;
    margin-left: 10px;
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 14px;
    font-weight: bold;
}

#searchResultMainContainer .resultRapporteur{
	margin: 10px 0 0 10px;
    text-transform: none;
	font-size: 15px;
}

#searchResultMainContainer .resultRapporteur .raptitle{
    font-weight: bold;
	font-size: 15px;
    color: #8d8d8d;
}

#searchResultMainContainer .resultTextContainer .resultLink b {
    color: #fcff07;
}

#searchResultMainContainer .resultTextContainer .resultLink:hover {
    color: #ffe654;
}

#searchResultMainContainer .resultTextContainer .resultLink:hover b {
    color: #ffe654;
}

#searchResultMainContainer .areaTypeContainer {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#searchResultMainContainer .areaTypeContainer .themeNumber {
    font-size: 18px;
    color: #fcff07;
}

#menuLeft button{
    color: white;
    background: black;
    background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(67,67,68,1) 100%);
    margin: 80px 0 10px 10px;
    width: 90px;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid rgba(67,67,68,1);
    border-radius: 5px 5px;
    -webkit-border-radius: 5px 5px;
}

#menuLeft button:hover {
    color: white;
    background: black;
    cursor:pointer;
}




/* Animation */
@keyframes fadeInLight {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes flip {
    0% {
        transform: perspective(30px) rotateX(0deg);
    }
    30% {
        transform: perspective(30px) rotateX(90deg) translateY(-10px);

    }

    80% {
        transform: perspective(30px) rotateX(0deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn50 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }
}

@keyframes blinkX {
    0% {
        opacity: 1;
    }
    20% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes wipeFromTop {
    0% {
        opacity: 0;
        transform: translatey(-7px);
    }
    20% {
        opacity: .2;
        transform: translatey(-7px);
    }
    100% {
        opacity: 1;
        transform: translatey(0px);
    }
}

body {
    overflow-y: scroll;
}

.lineBreak {
    display: block;
}

.closeButton {
    display: none;
}

.fiche .closeButton {
    border:1px solid #fefa00;
}

.fiche .closeButton, .about_popup_div .closeButton {
    display: block;
}

.about_popup_div .closeButton .label {
    display: none;
}

/* RICH TEXT */
.contentContainer table {
    width: 100%;
    border: 1px solid white;
    border-bottom: none;
    border-left: none;
}

.contentContainer p, .contentContainer li {
    margin-bottom: 10px;
}

.contentContainer td, .contentContainer th {
    padding: 5px;
}

.contentContainer td, .contentContainer th {
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}

.contentContainer th {
    background: black;
}

.contentContainer ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 15px;
}

.contentContainer ol {
    list-style-type: decimal;
    list-style-position: inside;
}

.contentContainer a {
    text-decoration: underline;

}

.contentContainer a:hover {
    color: rgb(255, 251, 1);
}

/*COMMON */

footer {
    display: none;
    text-align: right;
    bottom: 0;
    text-transform: none;
    color: #7b7b7b;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    padding-right: 42px;
    margin-bottom: 42px;
}

body.fiche footer, body.tableView footer, body.trackView footer, body.flipboard footer {
    display: block;
}

footer span a {
    text-decoration: underline;
    color: #7b7b7b;
}

footer span {
    position: relative;
    top: -2px;
}

body footer img.logo {
    position: relative;
    margin-left: 10px;
    display: inline-block;
}

body.trackView footer {
    /* display: none; */
    /* position: absolute; */
    /* bottom: 0; */
}

.trackView #footer footer {
    display: block;
}

.notReady footer {
    display: none !important;
}

.trackView #footer {
    position: relative;
    margin-bottom: 12px;
}

html {
    height: 100%;
    position: relative;

}

body {
    min-height: 100%;
}

.visible {
    display: block !important;
}

body {
    background-color: #3a3a3a;
    position: relative;
    text-transform: uppercase;
    color: white;
    padding: 42px 0 0 0;
    font-family: 'Open Sans Condensed', sans-serif;
}

body img.logo {
    display: none;
}

body.flipboard img.logo, body.tableView img.logo {
    position: absolute;
    z-index: 1;
    margin-top: -20px;
    margin-left: 42px;
    display: block;
    right:42px;
}


body.flipboard footer img.logo {
    display: none;
}
h2 {
    font-size: 30px;
    margin-bottom: 50px;
    line-height: 30px;
}
a {
    color: white;
    text-decoration: none;
    outline: 0;
    transition: color .1s;
}

a:hover, a:focus {
    color: #adadad;
}

h1 {
    color: white;
    margin: 0 41px 0 42px;
    font-size: 40px;
    line-height: 40px;
    margin-top: -5px;
    font-weight: bold;
    animation: fadeIn 1s 0;
    display: none;
}

h1 a {
    position: absolute;
    cursor: pointer;
    margin: 2px 0 0 25px;
}

h1 a:hover svg .background path, h1 a:focus svg .background path {
    fill: white;

}

#div_title_app a:hover svg .background path, #div_title_app a:focus svg .background path {
    fill: white;

}

h1 a:focus, .button:focus {
    outline: none;
}

h1 a:hover svg .sign path, h1 a:focus svg .sign path {
    fill: #8E8D8D;
}

#div_title_app a:hover svg .sign path, #div_title_app a:focus svg .sign path {
    fill: #8E8D8D;
}

u {
    text-decoration: underline;
}

span.stateReason {
    position: relative;
    display: inline-block;
}

span.stateReason svg {

    display: block;
}

#legends span.stateReason svg {
    height: 18px;
    width: 18px;
}

.tableView h1, .trackView h1, .xtableView a.open_help_popup_link, .trackView a.open_help_popup_link, .xtableView a.parliament_logo_link, .trackView a.parliament_logo_link {
    display: none;
}

.greyText {
    color: #8d8d8d;
}

.title {
    color: #fffb01;
    text-transform: uppercase;
    border-bottom: 3px solid #fffb01;
    margin-bottom: 12px;
    font-size: 1.1em;
    font-family: 'Oswald', sans-serif;
    padding: 0 0 .6em 0;

}

.navigationTimeline .title {
    height: 16px;
}

div.figures {
    background-color: #202122;
}

.figures > span {
    position: relative;
    cursor: default;
    font-size: 29px;
    background-image: url(../images/background/figuresbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: center;
    font-family: 'Economica', sans-serif;
}

.optionalInfo .costOption {
    color: #464c58;
    padding-right: 5px;
}

li, th.destination {
    position: relative;

}

#themeDisplay th.destination.body_text {
    display: flex;
    flex: 1;
}

canvas.carriageIcon {
    height: 15px;
    width: 25px;
}

canvas.testCanvas {
    background: yellow;
}

.button {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    color: grey;
    box-sizing: border-box;
    opacity: .5;
    pointer-events: none;
    background-repeat: no-repeat;
}
.button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.button.enabled {
    color: black;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}

.hide {
    display:none;
}

#mainView {
    position: relative;
    margin: 0 0 20px 0;
}

.tooltip {
    color: white;
    background-color: #191a1e;
    position: absolute;
    z-index: 1000;
}

body.fiche .navigationTimeline {
    display: none;
}

.navigationTimeline {
    padding: 30px 42px 0 42px;
    animation: wipeFromTop .5s ease-out;
    margin: 0 0 0 0;
    position: relative;
    height: 184px;
    box-sizing: border-box;
    display: flex;
}

.button.enabled:hover:before,
.button.enabled:focus:before {
    opacity: 0.1;
    background: white;
    animation: fadeInLight .2s;
}
.button.enabled:active:before {
    background:black !important;
}
#legends span.stateReason {
    position: relative;
    width: 23px;
    height: 18px;
}

ul#legislationTable span.stateReason {
    width: auto;
    height: 14px;
    display: inline-block;
    box-sizing: border-box;
}
ul#legislationTable span.stateReason svg {
    position: relative;
    top: 1px;
}
body.tableView {
    /* padding-top: 0; */
}

.tableView .navigationTimeline {
    margin-top: 0;
}

.flipboard .navigationTimeline .optional, .tableView .navigationTimeline .button.optional {
    display: none;
}

.flipboard h1, .tableView h1 {
    display: block;
    margin-left: 42px;
}

.navigationTimeline .navigationBox {
    position: relative;
    min-width: 30px;
    padding-left: 9px;
}

.flipboard .navigationTimeline .navigationBox.navYearBox, .navigationTimeline > .navigationBox:first-child {
    padding-left: 0;
}

.navigationTimeline .navigationBox.navYearBox .spinner {
    left: 3px;
    top: 3px;
    position: absolute;

}

.navigationTimeline .navigationBox.navYearBox .figures {
    margin-left: 32px;
}

.flipboard .navigationTimeline {
    border-bottom: none;
}

.navigationTimeline:after {
    content: "";
    display: block;
    clear: both;
}

.navigationTimeline .destinationTitle {
    font-size: 1.7em;
    background-color: darkgrey;
    height: 30px;
    padding-left: 12px;
    line-height: 30px;
    background: linear-gradient(to bottom, #29292e, #313036, #39383f);
}

.navigationTimeline .navigationBox .display {
    white-space: nowrap;
    position: relative;
    color: white;
    background-color: #18181c;
    padding: 3px;
    /* overflow: hidden; */
}

.navigationTimeline .navigationBox .figures {
    display: inline-block;
    /* overflow: hidden; */
}
.navigationTimeline .figures > span {
    width: 30px;
    height: 51px;
    line-height: 51px;
}

.navigationTimeline .navigationBox.navDestinationBox {
    float: none;
    height: 150px;
    flex-grow: 1;
}

.navigationTimeline .navigationBox.navDestinationBox .display ul {

}
.button:before {
    content:"";
}

.navigationTimeline .button  {
    vertical-align: top;
    width: 51px;
    height: 51px;
    background-image: url(../images/background/big_btn_bg.png);
}

.navigationTimeline .back .button svg {
    margin-top: 13px;
    margin-left: 11px;
}

.navigationTimeline .switchToTrack .button svg {
    margin-top: 10px;
    margin-left: 16px;
}

.trackView .navigationTimeline .navigationBox.switchToTrack {
    display: none;
}

.tableView .navigationTimeline .navigationBox.switchToTable {
    display: none;
}

.trackView .navigationTimeline, .trackView .navigationTimeline {
    padding: 11px 11px 11px 11px;
    /* padding: 0; */
    top: 0;
    /* position: absolute; */
    height: 122px;
}

.spinner {
    position: relative;
    white-space: normal;
    background-color: black;
    width: 32px;
    height: 51px;
    vertical-align: top;
    display: inline-block;
}

.navigationBox  .play a.button {
    background-image: url(../images/background/play_bg_btn.png);
}
.spinner a.button {
    margin: 0;
    position: absolute;
    font-size: 10px;
    width: 100%;
    height: 25px;
}

.spinner a.button:first-child {
    background-image: url(../images/background/small_btn_up_bg.png);
}

.spinner a.button:last-child {
    top: 25px;
    height: 26px;
    background-image: url(../images/background/small_btn_down_bg.png);
}

a.button.play {
    background-position: center;
}

a.button.half {
    width: 26px;

}
a.button.half.next {
    background-position: right;
}

a.button.half.next svg {
    transform: rotate(180deg);

}

.navDestinationBox .display li a:hover {
    overflow: visible;
    width:auto;
    height:auto;
}

table#themeDisplay .iconContainer, .navDestinationBox .display li a {
    width:20px;
    height:20px;
    overflow: hidden;
}

.navDestinationBox .display li a {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
}

.navigationTimeline .navDestinationBox .display {
    height: 51px;
}

.navigationTimeline .navDestinationBox .display ul {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 5px 0 0 0;
    margin: 0 20px 0 10px;
    height: 5px;
    border-bottom: 1px solid #5c5c5c;
}

.flipboard .navigationTimeline .display ul {
    margin-top: 14px;
}

.navDestinationBox .display li .dotButton {
    background-color: #5c5c5c;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: block;
    -webkit-transition: background-color .5s 0s;
    transition: background-color .5s 0s;
}

.navDestinationBox .display li a:focus {
    outline-width: 0;
}

.navDestinationBox .display li a:focus .tooltip,
.navDestinationBox .display li a:hover .tooltip {
    z-index: 1000;
}

.navDestinationBox .display li a:hover .dotButton,
.navDestinationBox .display li a:focus .dotButton {
    background-color: #ffffff;

}

.navDestinationBox .display li.selected a .dotButton {
    background-color: #fffa00;
}



.navDestinationBox .display li a:hover .dotButton:after,
.navDestinationBox .display li a:focus .dotButton:after {
    content: "\00a0";
    width: 20px;
    position: absolute;
    height: 10px;
    top: 15px;
    left: -4px;
    background: url(data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjExLjA2MXB4IiB2aWV3Qm94PSIwIDAgMjIgMTEuMDYxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMiAxMS4wNjEiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9IiMxOTFCMUUiIHN0cm9rZT0iIzNDNDA0OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iLTAuNjE4LDEzLjA3NSAxMSwxLjQ1OSAyMi42MTcsMTMuMDc1IA0KCSIvPg0KPC9zdmc+);
    background-repeat: no-repeat;
    background-position: center;
}

.navDestinationBox .display .tooltip {
    overflow: hidden;
    margin-top: 12px;
    z-index: 1;
    text-align: center;
    padding: 5px 0 10px 0;
    /* border: 1px solid #555; */
    width: auto;
    left: -50%;
    margin-left: 12px;
    font-family: 'Open Sans Condensed', sans-serif;
}

body.fiche .tooltip, table#themeDisplay .tooltip, .navigationTimeline .tooltip, .navDestinationBox .display li a .dotButton:after {
    transform: translatey(-15px);
    opacity: 0;
    transition: transform .3s 0s, opacity .3s 0s;
}

table#themeDisplay .iconContainer:hover .tooltip,
.nonEUCost:hover .tooltip,
.nonEUCost:focus .tooltip,
.navDestinationBox .display li a:hover .tooltip,
.navDestinationBox .display li a:focus .tooltip,
.navDestinationBox .display li a:hover .dotButton:after,
.navDestinationBox .display li a:focus .dotButton:after {
    transform: translatey(0);
    opacity: 1;
}

.flipboard .navDestinationBox {
    padding-right: 0;
}

.navigationBox.play {
    padding-left: 0;

}

.navigationBox.play .display {
    margin-left: 9px;
}

.flipboard .navDestinationBox .display li a:hover .dotButton:after,
.flipboard .navDestinationBox .display li a:focus .dotButton:after {
    top: 27px;
}

.flipboard .navigationTimeline .display li .tooltip {
    margin-top: 25px;

}

table#themeDisplay .tooltipContainer {

    position: absolute;
}

table#themeDisplay span.iconContainer span.tooltip {

    margin-top: 35px;
    left: calc(-50% - 16px);
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;
    white-space: normal;
    height:0;
    box-sizing: border-box;
    padding:0;
    overflow:hidden;
    text-align: left;
    text-transform: none;
}

table#themeDisplay .iconContainer:hover .tooltip,
.navDestinationBox .display li a:hover .tooltip,
.navDestinationBox .display li a:focus .tooltip {
    margin-right: 0;
    display: block;
    height: auto;
    position: relative;
    overflow: visible;
}
table#themeDisplay .iconContainer:hover:before {
    content:'';
    display: block;
    width:300px;
    position:absolute;
    height:20px;
}
table#themeDisplay .iconContainer:hover .tooltip {
    width:300px;
    padding:20px;
}

.navDestinationBox .display li .tooltip .figures {
    box-sizing: border-box;
    background: #2f2f33;
    padding: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

.navDestinationBox .display li .tooltip .figures span {
    font-size: 16px;
    line-height: 22px;
    height: 22px;
    width: 12px;
    display: inline-block;
    box-sizing: border-box;
    border-left: 1px solid #2f2f33;
    background-image: url(../images/background/small_fig_bg.png);
}

.navDestinationBox .display li .tooltip .figures:first-child {
    margin-left: 9px;
}

.navDestinationBox .display li .tooltip .label {
    font-size: 20px;
    position: relative;
    top: 5px;
    padding: 0 12px 0 5px;
}

#selectionField {
    text-align: right;

}

#selectionField .date span {
    background: grey;
    margin: 3px;
}

#selectionField .label {
    color: white;
}

/* END NAVIGATION TIMELINE */

/* Theme display */

table#themeDisplay {
    border-spacing: 7px 2px;
    padding-left: 35px;
    padding-right: 35px;
    width: 100%;
    table-layout: fixed;
    animation: wipeFromTop .5s ease-out;
}

table#themeDisplay .title {
    font-size: 0.9em;
    display: block;
}

table#themeDisplay thead th {
    white-space: nowrap;
    height: 27px;
    vertical-align: bottom;
    text-align: center;
}

table#themeDisplay thead th:first-child > .container {
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

table#themeDisplay thead th:first-child {
    width: auto;
}

table#themeDisplay thead th:first-child .infoIcon {
    margin: 0 7px 0 4px;
    position: relative;
    width: 16px;
    height: 16px;
    top: 4px;
}

table#themeDisplay thead th:first-child .title:first-child {
    flex: 1 1 100%;
}

table#themeDisplay thead th:first-child .title.nonEuCost {

    flex: 0 0 150px;
    text-align: right;

}

table#themeDisplay td, table#themeDisplay tbody th {
    background-color: #202122;
}

table#themeDisplay tbody th .destinationItem {
    display: flex;
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
}

table#themeDisplay td, table#themeDisplay tbody th span {
    line-height: 42px;
}

table#themeDisplay tbody th span.reference {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #fcff07;
    border-right: solid 2px #2f3138;
    display: block;
    text-align: center;
}

table#themeDisplay td, table#themeDisplay tbody th span.label {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 42px;
    padding-left: 12px;
}

table#themeDisplay tbody th .child  {
    padding-left:46px;
}

table#themeDisplay td {
    position: relative;
}

table#themeDisplay .destination {
}

table#themeDisplay thead th, table#themeDisplay tbody td {
    width: 48px;
    max-width: 48px;
    min-width: 48px;
}

table#themeDisplay tbody tr > * > * {
    line-height: 36px;
}

table#themeDisplay td span {
    height: 36px;
    width: 21px;
    position: absolute;
    top: 3px;
    left: 2px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

table#themeDisplay .figures span {
    font-size: 22px;
}

table#themeDisplay td span:last-child {
    left: 24px;
}

table#themeDisplay td.departures {
    color: #ffffff;
}

table#themeDisplay td.onHold {
    color: #bebfc0;
}

table#themeDisplay td.arrived {
    color: #44ce29;
}

table#themeDisplay td.cancelled {
    color: #eb3f32;
}

table#themeDisplay .destinationItem {
    font-size: 22px;
    flex:1;
}

table#themeDisplay th .optionalInfo {
    line-height: 42px;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
    flex: 1 0 auto;
    text-align: right;

}

ul#legislationTable a span.label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

table#themeDisplay span.infoButton .infoIcon {
    position: relative;

    padding: 0 12px 0 12px;
    top: 3px;
}

table#themeDisplay .infoIcon {
    cursor: pointer;
}

table#themeDisplay .infoIcon:hover .background {
    fill: white;

}

table#themeDisplay .infoIcon:hover .icon {
    fill: #212121;
}

/* legislationTable */
ul#legislationTable {
    color: white;
    margin: -14px 35px 0 35px;
    padding-left: 7px;
    padding-right: 7px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);
    position: relative;
}

ul#legislationTable > li {
    margin-top: 20px;
    padding-left: 35px;
}

ul#legislationTable > li .title {
    margin: 6px 0 10px 0;
}

ul#legislationTable ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0; /* Chrome, Safari, Opera */
    -moz-column-gap: 0; /* Firefox */
    column-gap: 0;
    overflow: hidden;

    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);

}

ul#legislationTable ul > li {
    margin-bottom: 2px;
    background-color: #202122;
    border-left: 2px solid #3a3a3a;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    height: 36px;

}

ul#legislationTable ul > li:first-child {

}

ul#legislationTable ul > li * {
    line-height: 34px;
}

ul#legislationTable ul > li .iconContainer {
    position: relative;
    height: 36px;
    width: 36px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #3a3a3a;
    margin: 0 3px 0 0;
}

li .iconContainer canvas {
    position: relative;
    top: 2px;
    margin: 0 5px 0 5px;
}

ul#legislationTable > li {
    background-repeat: no-repeat;
    background-position: -6px -5px;
}

ul#legislationTable > li.departures {
    background-image: url(../images/icon/departures.png);
}

ul#legislationTable > li.departure_demands {
    background-image: url(../images/icon/departure_demands.png);
}

ul#legislationTable > li.arrived {
    background-image: url(../images/icon/arrived.png);
}

ul#legislationTable > li.expected_arrivals {
    background-image: url(../images/icon/expected_arrivals.png);
}

ul#legislationTable > li.on_hold {
    background-image: url(../images/icon/on_hold.png);
}

ul#legislationTable > li.cancelled {
    background-image: url(../images/icon/cancelled.png);
}

ul#legislationTable .title {
    width: 100%;
    display: block;
}

ul#legislationTable .title > .fileCount {
    position: absolute;
    top: 0;
    right: 0;
}

ul#legislationTable ul > li, #legends > .legendContainer > ul, #legends > .legendContainer > * > ul,
#legends > .rapporteurs > .legendContainer > ul{
    font-size: 1.5em;
}

ul#legislationTable ul > li a {
    display: flex;
}

ul#legislationTable span.stateReasonStickers {
    display: inline-block;
    vertical-align: middle;
    top: -2px;
    position: relative;
    border-left: 1px solid #3a3a3a;
}

ul#legislationTable span.stateReasonStickers {
    margin-left: 6px;
}

ul#legislationTable span.stateReasonStickers span.stateReason svg:last-of-type {
    margin-right: 6px;
}

ul#legislationTable span.stateReasonStickers span.stateReason svg:first-of-type {
    margin-left: 6px;
}

ul#legislationTable span.nonEUCost:last-child {
    margin-right: 0;
}

ul#legislationTable .stateReasonLabel {
    display: none;
}

a.pdf {
    margin: 12px 0 12px 35px;
    font-size: 1.5em;
    line-height: 20px;
    display: inline-block;
    height: 20px;
}

a.pdf * {
    vertical-align: middle;
}

a.pdf img {
    margin-right: 6px;
    margin-top: -4px;
}

#fiche a.pdf {
    margin: 0 0 10px 0;
    font-weight: bold;
    text-transform: none;
    display: block;

}

/* Legends */

#legends .carriageIcon {
    width: 20px;
    height: 14px;
    position: relative;
    top: 2px;
    margin-right: 5px;
    margin-left: 1px;
}

#legends {
    letter-spacing: -0.3em;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 32px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

#legends .legendContainer {
    display: inline-block;
    vertical-align: top;
    position: relative;
    letter-spacing: normal;
}

#legends .legendContainer div.legendBlock {
    margin-bottom: 32px;
}

#legends .legendContainer div.legendBlock.themes {
    white-space: normal;

}

#legends .legendContainer:last-child {
    flex: 0 0 25%;
    padding-left: 6px;
}

#legends .legendContainer:first-child {
    flex-grow: 1;
}

#legends > div {
    display: inline-block;
}

.legendContainer .title {
    display: block;
}

.legendContainer .joinDeclarationShort{
    font-weight: bold;
    margin-right: 15px;
    font-size: 12px;
}

.legendContainer .joinDeclarationText{
    font-size: 1.5em;
}

div#packageLegend .packageContainer {
    position: relative;
    vertical-align: top;
}

div#packageLegend > ul > li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display: table;
    white-space: normal;
}

div#packageLegend .notOrphan .iconContainer {
    position: absolute;
    left: 10px;
}

div#packageLegend ul ul li {
    padding-left: 37px;
}

div#packageLegend ul li {
    vertical-align: middle;
}

#legends div#packageLegend > ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

div#packageLegend .packageGradient {
    height: 100%;
    position: absolute;
    width: 3px;
    overflow: hidden;
    left: 1px;
    top: 4px;
}

div#packageLegend .packageGradient span {
    display: block;
    position: relative;
    top: -6px;
    height: 100%;
    margin-bottom: 20px;
}

#stickersLegend li {
    line-height: 1.8em;
}

#fiche span.stateReason svg {
    position: relative;
    top: 1px;
}
#stickersLegend span.stateReason {

    margin-right: 10px;
    position: relative;
    top: 3px;
}

/*  detail fiche */

.fiche #mainView {
    padding: 0 7px 0 7px;
}

#fiche {
    position: static;
}

.fiche h1 {
    display: block;
    margin-left: 7px;
}

.fiche #fiche h3 {
    font-size: 22px;
    font-weight: bold;
    color: white;
    padding-bottom: 42px;
    padding-top: 42px;
    padding-right: 250px;
    display: inline-block;
    background-position: 0 35px;
}

.fiche #fiche h2 {
    margin-top: 10px;
}

.fiche #fiche h3 > span, .fiche #fiche h2 > span {
    position: relative;
}

.fiche #fiche h3 span > span.text, .fiche #fiche h2 span > span.text.available {
    border-bottom: 3px solid red;
}

.fiche #fiche h3 > span:first-child {
    border-bottom: 3px solid #fffb01;
}

.fiche #fiche h3 > span.departureDate span, .fiche #fiche h2 > span.departureDate span {
    border-color: #adadad;
}

.fiche #fiche h3 > span.departureDate, .fiche #fiche h2 > span.departureDate {
    color: #adadad;
}

.fiche #fiche h3 > span.nonEUCost span, .fiche #fiche h2 > span.nonEUCost span.available {
    border-color: #7f7f7f;
}

.fiche #fiche h3 > span.nonEUCost, .fiche #fiche h2 > span.nonEUCost {
    color: #7f7f7f;
}

#fiche .content {
    text-transform: none;
}

body.fiche .content {

    font-size: 20px;
    margin-right: 15%;

}

#fiche .contentContainer {
    display: inline;
}

#fiche .optionalInfo, #legends .optionalInfo {
    position: relative;
}

.fiche.theme h2 {
    padding-bottom: 8px;
    display: inline-block;
}

.fiche #legends {
    display: flex;
    flex-direction: column;
    padding-left: 0
}

.fiche #legends .rapporteursContainer {
    display: flex;
    letter-spacing: normal;
}

.rapporteursContainer .title {
    display: block;
}

.fiche #legends .rapporteursContainer .rapporteurs {
    flex: 1;
}

.fiche #legends .rapporteursContainer .rapporteurs:last-child {
    padding-left: 6px;
}

.fiche #legends .rapporteursContainer .rapporteursColumn {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    font-size: 1.5em;
}

.rapporteursColumn ul li {
    display: inline-block;
}

.fiche.legFile h3 {
    background-repeat: no-repeat;
    background-size: 57px 57px;
    padding-top: 7px;
}

#fiche .contentContainer {
    margin-top: 20px;
}

#fiche .stateReasonStickers > span > span {
    margin-top: 6px;
    padding-right: 6px;
}

.fiche #fiche {
    padding-left: 320px;
    width: 1000px;

}

#fiche .tooltipContainer {
    position: absolute !important;
    left: 50%;
}

#fiche .tooltip {
    visibility: hidden;
    height: 0;
    display: block;
    position: relative;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: normal;
    width: 300px;
    padding: 20px;
    font-size: 16px;
    left: -50%;
    top: 50px;
}

#fiche .nonEUCost:focus {
    outline: none;
}

#fiche .nonEUCost:focus .tooltip,
#fiche .nonEUCost:hover .tooltip {
    height: auto;
    visibility: visible;
}

#fiche .tooltip:before {
    width: 100%;
    position: absolute;
    left: 0;
    top: -10px;
}

#fiche span.nonEUCost:focus span.available,
#fiche span.nonEUCost:hover span.available {
    color: white;
}

.rapporteursBox {
    margin-top: 12px;
    width: 225px;
}

.rapporteursBox img {
    width: 72px;
    height: auto;
}

.rapporteursBox {
    text-transform: none;
}

.closeButton {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 11;
}

.closeButton span.label {
    font-size: 17px;
    line-height: 32px;
    font-weight: bold;
    padding: 0 7px 0 39px;
}

.closeButton span.crossButton {
    position: absolute;
    height: 32px;
    width: 32px;
    background-image: url(../images/icon/close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fffb01;
    display: block;
}

.historyAnimation a.button:hover,
.historyAnimation a.button:focus,
.closeButton:hover span.crossButton,
.closeButton:focus span.crossButton {
    background-color: white;
}

.fiche #legislativeTrain {
    display: flex;
    flex: 0 0 320px;
    animation: fadeIn 1s;
}

.fiche #legislativeTrain > * {
    display: flex;
}

.figures span.flip {
    animation: flip .24s infinite;
}

.figures span.noflip {
    animation: none;
}

li.fileCount {
    pointer-events: none;
}

/*start about pop up code*/
.tab_contents p {
    font-size: 180%;
    margin-bottom: 25px;
    text-transform: none;
}

.train_stations_explanation_div {
    margin-bottom: 5px;
    display: flex;
}

.side_div {
    width: 40px;
}

.tutorial_images {
    margin: 0 auto 25px auto;
    display: block;
}

#about_ul li.cms_selected span {
    color: white;
}

div.about_popup_div div.popup_div {
    border: black solid 8px;
    box-shadow: -1px 2px 10px 3px black inset;
    background-color: #3a3a3a;
    z-index: 90;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    box-sizing: border-box;
    opacity: 1;
    width: 100%;
    padding: 25px 25px 25px 25px;
}

div.about_popup_div div.popup_div:focus {
    border: black solid 8px;
    outline: none;
}

div.about_popup_div img {
    max-width: 100%;
}

#tutorial_div h2 {
    color: yellow;
    border-bottom: yellow solid 3px;
    width: 100%;
    font-weight: bold;
    font-size: 1vw;
    margin-bottom: 15px;
}

#tutorial_v2_div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 100%;
}

#tutorial_v2_div > div {
    display: flex;
    flex-basis: calc(50% - 40px);
    margin: 5px;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 1.0em;
}

#tutorial_v2_div > div video {
    border: 1px solid grey;
}

div.about_popup_div ul#about_ul {
    list-style-type: none;
    margin: 15px 15px 15px 15px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

div.about_popup_div ul#about_ul li {
    display: inline;
    cursor: pointer;
    width: 20%;
    border-bottom: white solid 3px;
    margin-right: 4px;
    color: grey;
    height: 100%;
    font-weight: bold;
}

div.about_popup_div ul#about_ul li a {
    color: grey;
}

div.about_popup_div ul#about_ul li.cms_selected a {
    color: white;
}

div.about_popup_div ul#about_ul li.pagination_li span {
    margin: 0;
}

div.about_popup_div ul#about_ul li.pagination_li a {
    color: grey;
}

div.about_popup_div ul#about_ul li.pagination_li span.cms_selected a {
    color: white;
}

div.about_popup_div ul#about_ul li.pagination_li span.cms_selected {
    margin: 0;
    color: white;
}

div.about_popup_div ul#about_ul li:focus {
    border-bottom: white solid 5px;
    outline: none;
}

div.about_popup_div ul#about_ul li span {
    margin-bottom: 2%;
    font-size: 1vw;
}

div.train_stations_explanation_div p {
    vertical-align: middle;
    margin-bottom: 10px;
}

div.about_popup_div .train_stations_explanation_div img.train_icons {
    margin-right: 15px;
    margin-left: 15px;
    display: inline;
    height: 100%;
    margin-bottom: auto;
    vertical-align: middle;
}

div.about_popup_div .train_stations_explanation_div img.train_icons.departedIcon {
    margin: 0;
    position: relative;
    top: 4px;
}

div.tab_content {
    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
}

div.popup_div div.footer span {
    cursor: pointer;
}

div.right_side_div span, div.left_side_div span {
    cursor: pointer;
}

/*end about pop up code*/
/* start css for 404 */
.span_404 {
    font-size: 15vw;
    font-weight: bold;
}

.div_404_error {
    border-bottom: yellow solid 5px;
}

.span_error {
    font-size: 5vw;
}

.div_application_title {
    border-bottom: yellow solid 5px;
    font-size: 2.8vw;
    font-weight: bold;
}

.page_404 .error_message {
    font-size: 1.6vw;
}

.page_404 a.homepage_link {
    color: yellow;
}

img.logo {
    position: absolute;
    z-index: 1;
    margin-top: -20px;
    margin-left: 42px;
    display: block;
}

/*end css for 404*/
/* start css for accessibility */
a.content_access_button {
    display: block;
    width: 0;
    height: 0;
    background-color: black;
    border: none;
    position: absolute;
    left: -2000px;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 150px 20px 30px;
}

a.content_access_button:focus {
    width: 20%;
    height: auto;
    padding: 15px 32px;
    margin-top: 20px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
}

a.parliament_logo_link:focus img, a.logo_europarl_link:focus img, a.parliament_logo_link_not_found:focus img {
    border: 1px solid rgb(142, 141, 141);
}

a.parliament_logo_link img, a.parliament_logo_link_not_found img {
    border: 1px solid #3a3a3a;
}

a.theme_information_link:focus svg circle {
    fill: rgb(255, 255, 255);
}

a.theme_information_link:focus svg path {
    fill: #8E8D8D;
}

body.flipboard footer a.logo_europarl_link, body.tableView footer a.logo_europarl_link {
    display: none;
}

div.about_popup_div ul#about_ul li a:focus {
    color: white;
}
a.homepage_link:focus {
    border: 1px solid rgb(255, 255, 255);
}

a.homepage_link:hover {
    border: 1px solid rgb(255, 255, 255);
}

span.train_hidden_text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
}

span.train_hidden_text.inline {
    display: inline;
}

.fiche a.open_help_popup_link, .fiche a.parliament_logo_link {
    display: none;
}

@media aural, speech {
    .legendContainer, a.disabled, .fileCount, .navigationBox.switchToTrack {
        speak: none;
    }
}

img.arrow_buttons {
    background-color: #fffb01;
}

a:focus img.arrow_buttons, a:hover img.arrow_buttons {
    background-color: white;
}

a.arrow_buttons_links:focus, a.arrow_buttons_links:hover {
    border: 0 !important;
    outline: none !important;
}

th.destination span.optionalInfo {
    font-size: 22px;
}

.navigationTimeline > time {
    display: flex;

}

.popupContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%;
    height:80%;
}

.about_popup_div {
    height: 100%;
    align-items: center;
    position: absolute;
    justify-content: center;
    left: 0;
    z-index: 150;
    overflow: hidden;
    display: flex;
    top: 0;
    width: 100%;
    background-color: rgba(10, 10, 10, 0.87);
    outline: none;
}


/**
 * CSS for package see Jira TRAIN-2249
 */

#package_fiches_main {
    display: flex;
    flex-direction: column;
    margin-right: 6px;
}

#package_fiches_main .title {
    margin-bottom: 15px;
}

#package_fiches_main .file {
   height: 30px;
    font-size: 1.5em;
}

	.currentEnv {
		font-family: 'Open Sans', sans-serif, arial;
		font-size: 20px; 
		font-weight: bold;
	    color: red;
	    margin-left: 10px;
	}

/*a:focus{
    background-color: red;
    border: 1px solid red;
}*/

/* end css for accessibility */




@keyframes trainArrives {
    0% {
        transform: translate(0, 1000px);
    }

    100% {
        transform: translate(0, 0);

    }

}

@keyframes trainLeaves {
    0% {
        transform: translate(0, 0);
    }
    99% {
        visibility: hidden;
    }

    100% {
        visibility: hidden;
        transform: translate(0, -4000px);
    }
}

.legislativeTrain {
    position: relative;
    display: flex;
}


.trackView .legislativeTrain {
    min-width: 1370px;
}

.legislativeTrain a:focus {
    outline: none;
}

.legislativeTrain a:focus .tooltip {
    border: 1px solid black;
}

.legislativeTrain > li {
    width: 25%;
    padding-left: 0;
    min-width: 200px;
    background-repeat: no-repeat, repeat-y;
    background-position: right 0, 135px 0;
    position: relative;
    display: block;
}

.legislativeTrain li.rolling {
    width: 25%;
}



body.trackView {
    padding: 0;
}

.legislativeTrain > li.paused {
    background-position: 146px 0, 148px 0 !important;
}

.legislativeTrain > li.stopped {
    background-position: 108px 0, 135px 0;
}

.legislativeTrain .trackHead {
    position: relative;
    width: 370px;
    padding-top: 75px;
    text-align: center;
    z-index: 4;
    background-position: 100px 0;
    background-repeat: no-repeat;
}

.legislativeTrain > li.stopped .trackHead {
    width: 286px;
    left: 0;
    text-align: center;
}

.stageDiff {
    position: absolute;
    padding: 9px;
    display: inline-block;
    background-color: #26292f;
    width: auto;
    z-index: 10;
    right: 11px;
    margin-top: 5px;
    overflow: hidden;
    opacity:1;
    transition:height 1s, opacity .5s;

}

#mainView.hideLog .stageDiff {
    height:0;
    opacity:0;
}

.stageDiff .spinner {
    position: absolute;
    right: 9px;
}

.stageDiff .border {
    position: absolute;
}

.stageDiff .border.bottom {
    width: 100%;
    height: 5px;
    bottom: -5px;
    left: 0;
    overflow: hidden;
    border-right: 5px solid black;
}

.stageDiff .border.bottom:before {
    content: ' ';
    display: block;
    position: absolute;
    background-color: black;
    width: 1000px;
    height: 1000px;
    transform-origin: 0 0;
    transform: rotate(-45deg);
}

.stageDiff .border.right {
    height: 100%;
    width: 5px;
    top: 0;
    right: -5px;
    overflow: hidden;
}

.stageDiff .border.right:before {
    content: ' ';
    display: block;
    position: absolute;
    background-color: black;
    width: 1000px;
    height: 1000px;
    transform-origin: 0 0;
    transform: rotate(45deg);
}

.stageDiff .spinner {
    float: right;
}

.stageDiff ul {
    height: 53px;
    overflow: hidden;
    transition: height 0.3s, padding .1s;
    padding-right: 37px;
    width: 510px;
    box-sizing: border-box;

}

.stageDiff li {
    display: flex;
    width: 100%;

}

.stageDiff li.stateIcon {

}

.stageDiff .moreButton {
    width: 100%;
    height: auto;
    background-color: #3a3a3a;
    margin-top: 3px;
    padding: 3px 0 0 3px;
    text-align: center;
}

.stageDiff.open .moreButton svg {
    transition: rotation .1s;
}

.stageDiff.open .moreButton svg {
    transform: rotate(180deg);
}

.stageDiff.disableNav .spinner {
    display: none;
}

.stageDiff.disableNav .moreButton {
    display: none;
}

.stageDiff li {
    height: 53px;
    display: flex;
    position: relative;
    background-color: #3a3a3a;
    margin-bottom: 3px;
    font-size: 1.6em;
    transition: margin-top 0.3s;
}

.stageDiff li span.label {
    text-align: center;
    line-height: 53px;
    flex: 1 0 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stageDiff .stateIcon {
    display: inline-block;
    flex: 0 0 45px;
    height: 41px;
    background-position: 5px 5px;
    background-repeat: no-repeat;
}

.stageDiff .stateIcon.departure_demands {
    background-image: url('../images/icon/departure_demands.png');
}

.stageDiff .stateIcon.departures {
    background-image: url('../images/icon/departures.png');
}

.stageDiff .stateIcon.on_hold {
    background-image: url('../images/icon/on_hold.png');
}

.stageDiff .stateIcon.arrived {
    background-image: url('../images/icon/arrived.png');
}

.stageDiff .stateIcon.expected_arrivals {
    background-image: url('../images/icon/expected_arrivals.png');
}

.stageDiff .stateIcon.cancelled {
    background-image: url('../images/icon/cancelled.png');
}

.stageDiff.open .spinner {
    display: none;
}

.stageDiff.open ul, .stageDiff.disableNav ul {
    padding-right: 0;
}

.legislativeTrain > li {
    position: relative;
}

.legislativeTrain > li.rolling.paused > ul.carCollection {
    position: relative;
    overflow-y: visible;
    padding-bottom: 30px;
    margin-bottom: 100px;
}

.legislativeTrain > li.rolling.paused > ul.carCollection:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100%;
    display: block;
    background-image: url('../images/trackview/stop_pane_horiz.png');
    background-position: 125px 0;
    background-repeat: no-repeat;
}

.legislativeTrain > li.openTrack:before, .legislativeTrain > li.rolling.paused .carCollection {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    /* left: 23px; */
    background-position: 151px 0;
    background-repeat: repeat-y;
    background-image: url('../images/trackview/statictrack.gif');
}

.legislativeTrain > li.rolling.paused:before {
    background-repeat: repeat-y;
    background-position: 136px 0, 136px 0 !important;
    top: 166px;
}

.legislativeTrain > li.expected_arrivals .trackHead {
    background-image: url('../images/icon/expected_arrivals_60.png');

}

.legislativeTrain > li.departures .trackHead {
    background-image: url('../images/icon/departures_60.png');
}

.legislativeTrain > li.departure_demands .trackHead {
    background-image: url('../images/icon/departure_demands_60.png');
}

.legislativeTrain > li.arrived .trackHead {
    background-image: url('../images/icon/arrived_60.png');
}

.legislativeTrain > li.on_hold .trackHead {
    background-image: url('../images/icon/on_hold_60.png');
}

.trackView .legislativeTrain > li.paused {
    margin-top: 149px;
}

.trackView .legislativeTrain > li.stopped {
    margin-top: 410px;
}

.legislativeTrain > li.stopped canvas {
    top: -18px;
}

.legislativeTrain > li.stopped canvas {
    transform: rotate(90deg);
    position: relative;
    top: -9px;
}

.legislativeTrain > li.stopped canvas {
    transform: rotate(90deg);
}

.legislativeTrain li.fileCount {
    z-index: 2;
}


.legislativeTrain li.cancelled.stopped .trackHead {
    background-image: url('../images/icon/cancelled_60.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
}


.legislativeTrain .rolling li.fileCount {
    height: 147px;
    background-image: url('../images/icon/locomotive.png');
    background-repeat: no-repeat;
    background-position: 0 bottom;
    margin-left: 5px;
    margin-bottom: -10px;
    left: 136px;
}


.legislativeTrain .paused li.fileCount {
    height: 98px;
    background-image: url('../images/trackview/stop_pane_horiz.png');
    background-repeat: no-repeat;
    background-position: 1px 11px;
    left: 119px;
}

.legislativeTrain ul > li {
    white-space: nowrap;
}

.trackView .legislativeTrain li.cancelled {
    right: 0;
}

.trackView .legislativeTrain li.stopped ul.carCollection {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.trackView li.departure_demands.stopped .iconContainer canvas {
    margin-left: 15px;

}

.trackView .legislativeTrain li.departure_demands.stopped:after {
    content: " ";
    position: relative;
    background-image: url('../images/trackview/left_roof_bottom.png');
    background-repeat: no-repeat;
    display: block;
    height: 400px;
    width: 100%;
}

.trackView .legislativeTrain li.departure_demands.stopped ul.carCollection {
    background-image: url('../images/trackview/left_roof_top.png');
    background-position: 0 0, 0 bottom;
    min-height: 150px;

    background-repeat: no-repeat;
    overflow-y: hidden;
}

.trackView .legislativeTrain li.departure_demands.stopped ul.carCollection:before {
    content: " ";
    background-image: url('../images/trackview/left_roof.png');
    background-repeat: repeat-y;
    position: absolute;
    top: 128px;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
}

.trackView .legislativeTrain li.cancelled.stopped {
    align-content: flex-end;
    margin-right: 0;
    background-position: 303px 0, 133px 0;
}

.trackView .legislativeTrain li.cancelled.stopped:after {
    content: " ";
    position: relative;
    background-image: url('../images/trackview/right_roof_bottom.png'), url('../images/trackview/tree.png');
    background-position: right 0, right 200px;
    background-repeat: no-repeat;
    display: block;
    height: 600px;
    width: 100%;
    pointer-events: none;

}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection {
    min-height: 150px;
    position: relative;
    left: auto;
    right: 0;

}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection li.carriage {
    width: 100%;
}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection li.carriage canvas {
    position: absolute;
    right: 0;
    left: auto;
}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection li .tooltip {
    position: absolute;
    right: 97px;
    left: auto;

}


.trackView .legislativeTrain li.cancelled.stopped .fileCount {
    margin-bottom: 25px;
    position: absolute;
    left: auto;
    right: 24px;
    margin-left: 0;
}

.trackView .legislativeTrain li.cancelled.stopped li.carriage {
    position: relative;
    top: 75px;
}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection {
    overflow: hidden;
    padding-bottom: 50px;

}

.trackView .legislativeTrain li.cancelled.stopped ul.carCollection:before {
    content: " ";
    background-image: url('../images/trackview/right_roof.png');
    background-repeat: repeat-y;
    background-position: right 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
}

.trackView .legislativeTrain li.cancelled.stopped li.carriage {
    width: 193px;
    height: 110px;
}

.trackView .legislativeTrain li.cancelled .tooltip {
    margin-left: -15px;
}

.trackView .legislativeTrain {
    background-image: url('../images/trackview/short_station_right.png'), url('../images/trackview/short_station_left.png'), url('../images/trackview/wall_bg.png'), url('../images/trackview/path.png'), url('../images/trackview/grass.png');
    background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat;
    background-position: right 0, 0 0, 0 0, 85px -100px, 0 0;
}

.legislativeTrain .stopped li.fileCount {
    height: 75px;
    width: 63px;
    background-image: url('../images/icon/stopped.png');
    background-repeat: no-repeat;
    background-position: 2px -7px;
    left: 151px;
    top: 7px;
    margin-left: -44px;
}

.trackView .legislativeTrain .stopped li.fileCount {
    margin-bottom: 130px;
}

.legislativeTrain .stopped li.fileCount span {
    margin-left: 13px;
    margin-top: -37px;
}

.legislativeTrain > li li.carriage {
    margin-top: -12px;
}

.legislativeTrain > li.stopped li.carriage {
    margin-top: -32px;
}

.trackView .legislativeTrain > li.departure_demands.stopped li.carriage {
    background-image: url('../images/trackview/stop_pane_vert.png');
    background-position: right 0;
    background-repeat: no-repeat;
    width: 276px;
}

.legislativeTrain > li li canvas {
    left: 136px;
}

.legislativeTrain li .tooltip {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    top: 18px;
    color: black;
    width: 130px;
    background: white;
    margin-left: 3px;
    height: 86px;
    white-space: normal;
    padding: 4px 4px 14px 4px;
}

.legislativeTrain li .tooltip .label {
    height: 100%;
    display: block;
    overflow: hidden;
    font-size: 1.1em;
    line-height: 1.2em;
}

.legislativeTrain li.stopped .tooltip {

    height: 72px;
}

.legislativeTrain li a.selected .tooltip {
    opacity: 1;
    transform: translate(0,-15px);
}

.legislativeTrain li .tooltip .optionalInfo {
    padding: 0;
    display: block;
    text-align: right;
}

.legislativeTrain li .tooltip .optionalInfo > span {
    font-weight: bold;
    padding: 0;
    color: #e14627;
}


.fiche h1 {
    padding-left: 320px;
    position: absolute;
    top: 174px;
    width: 600px;
    z-index: 10;
}

.fiche #fiche {
    padding-top: 200px;

}

.fiche #mainView {
    display: flex;
    position: relative;
}

.fiche .legislativeTrain {
    flex: 0 0 320px;
    width: 320px;
}

.fiche .legislativeTrain .tooltip {
    visibility: visible;
}

.fiche .legislativeTrain .tooltip {
    background: #626262;
}

.fiche .legislativeTrain > li.stopped li:nth-of-type(2) {
    margin-top:-10px;
}

.tooltip .departureDate {
    display: block;
}

.fiche .legislativeTrain li.selected .tooltip,
.fiche .legislativeTrain li a:hover .tooltip,
.fiche .legislativeTrain li a:focus .tooltip {
    background: white;
    transition: background 0.5s;
}

.fiche .legislativeTrain li.selected .tooltip {
    pointer-events: none;
}

.fiche .legislativeTrain > li.stopped canvas {
    left: 155px;
}

.fiche .legislativeTrain > li.rolling {
    margin-top: 20px;
    padding-bottom: 100px;
    margin-bottom: -122px;
}

.fiche .legislativeTrain > li.rolling:before {
    background-position: 152px 0;
}

.fiche .legislativeTrain > li.paused {
    /* background-position: 146px 20px; */
}

.fiche.legFile #fiche {
    padding-left: 0;
}

.fiche .legislativeTrain > li.paused:before {
    background-position: 135px 20px, 135px 20px;
}

.fiche .legislativeTrain > li:before {
    top: -20px;
}

.fiche .legislativeTrain li.cancelled.stopped .trackHead {
    background-position: 12px 17px;
    padding-top: 95px;
    left: 90px;
}

.fiche .legislativeTrain li.departure_demands.stopped {
    margin-top: 20px;
}

.fiche .legislativeTrain > li {
    min-width: 250px;
}

body.fiche {
    padding-top: 0;

}

/* Trackview animation */

#trackContainer {
    position: relative;
}

.navigationTimeline {
    background-color: #3a3a3a;
    transition: height .5s;
}

.trackView #trackContainer.transition {
    transition: top 4s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

.trackView .navigationTimeline {
    z-index: 11;
}

table#themeDisplay {
    z-index: 11;

}

.trackView #legends {
    position: relative;
}

.trackView #trackContainer > div {
    position: absolute;
    width: 100%;
}

.animating.trackView #trackContainer li.rolling {
    padding-bottom: 2000px;
}

body.animating a, body.animating .button {
    pointer-events: none;
}

.trackView div .rolling .carCollection {
    visibility: hidden;
}

.trackView div.trainArrives .rolling .carCollection, .trackView div .rolling.paused .carCollection, .trackView div.noIntro .rolling .carCollection {
    visibility: visible;
}

.trackView div.trainArrives .rolling .carCollection {
    animation: trainArrives 1.5s;
}

.trainLeaves .rolling .trackHead {
    animation: fadeOut 0.3s;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

.trainLeaves .rolling.paused .trackHead {
    animation: none !important;
}

div.trainLeaves .legislativeTrain .rolling .carCollection {
    animation: trainLeaves 2s cubic-bezier(0.825, 0.115, 0.945, 0.060);
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

.trackView .rolling.paused .carCollection {
    animation: none !important;
}

.rolling .trackHead {
    /* left: -1px; */
    background-repeat: no-repeat;
    background-position: 147px 0;
}

.trackView .hiddenStation li, .trackView .hiddenStation .carCollection {
    visibility: hidden !important;

}
ul.topMenu {
    display:flex;
    position:absolute;
    margin-top:44px;
    margin-bottom:90px;
    left: 320px;
}

.topMenu li {
    display:flex;
    font-size: 14px;
    padding-left:44px;
    line-height: 30px;
    margin-right: 28px;
    background-repeat: no-repeat;
    background-position: 0 -4px;
    font-weight: bold;
}
.topMenu li a.button {
    color:#fff;
    opacity:1;
    width:auto;
    height:auto;
}
.topMenu li a.button.enabled {
    width:auto;
    height:auto;
    color:#878787;
}
.topMenu li a.button:hover, .topMenu li a.button:focus {
    color:#fff;
}

.topMenu li a.button:hover:before {
    content:none;
}



.topMenu li.departures {
    background-image:url(../images/icon/departures.png);
}
.topMenu li.departure_demands {
    background-image:url(../images/icon/departure_demands.png);
}
.topMenu li.expected_arrivals {
    background-image:url(../images/icon/expected_arrivals.png);
}
.topMenu li.on_hold {
    background-image:url(../images/icon/on_hold.png);
}
.topMenu li.cancelled {
    background-image:url(../images/icon/cancelled.png);
}
.topMenu li.arrived {
    background-image:url(../images/icon/arrived.png);
}













body.trackView #mainView {
    /* height: 100%; */
}

body.trackView {
    overflow: hidden;
}

.animation .tracksLayer .track {
    background: url('../images/trackview/animatedtrack.gif');
    height: 100%;
    width: 70px;
}

.tracksLayer .track {
    background: url('../images/trackview/statictrack.gif');
    height: 100%;
    width: 70px;
    position: absolute;
}

.animBG {
    background:url('../images/trackview/left_bg.png'), url('../images/trackview/grass.png');

    background-repeat: repeat-y, repeat;
    background-position: 0 0, 1250px 0, 0 0;

    min-height: 100px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

#footer {
    /* display: none; */
}

.animationLayer>* {
    position: absolute;
    z-index: 6;
}

.animationLayer .tracksLayer {
    height: 100%;
}

body {
    height: 100%;
}
.animationStage  {
    overflow:hidden;
    position: relative;
}
.trackView .animationStage img {
    position: absolute;
}

.hidden {
    display: none;
}

*.jsTranslate {

    transition: 1s linear;
}

.trackView .animationLayer {
    /* height: 1000px; */
    width: 100%;
    z-index: 1;
    /* height: auto; */
}

.trackView .animationLayer.disabled:before {
    content: ' ';
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1500;
    opacity: .5;
    animation: fadeIn50 .5s;
}

.fileCount {
    z-index:100;

}

*.fileCount span {
    position: absolute;
    color: white;
    font-size: 30px;
    display: block;
    font-weight: bold;
    width: 40px;
    text-align: center;
    top: 40px;

}

.animationLayer .station {
     z-index:99;
}

.trackHead {
    background-repeat: no-repeat;
    background-position: 61px 0;
    width: 200px;
    height: auto;
    text-align: center;
    padding-top: 75px;
    z-index: 300;
}

.trackHead .title {
    color: #2c3031;
    border: 2px solid #2c3031;
    background-color: #dedad9;
    white-space: nowrap;
    padding: 5px;
    position: relative;
}



.legislativeTrain .rolling li.fileCount span {
     top: 79px;
 
     left: -1px;
}

.legislativeTrain .paused li.fileCount span {
    /* bottom: 24px; */
    left: 36px;
    top: 32px;
}

.legislativeTrain li.paused .trackHead {
    left: -1px;
}


.legislativeTrain .stopped li.fileCount {
    height: 75px;
    width: 63px;
    background-image: url('../images/icon/stopped.png');
    background-repeat: no-repeat;
    background-position: 2px -7px;
    left: 151px;
    top: 7px;
    margin-left: -44px;
}

.stopped.fileCount {
    height: 75px;
    width: 63px;
    background-image: url('../images/icon/stopped.png');
    background-repeat: no-repeat;
    background-position: 2px -7px;
    margin:0 0 0 -32px;
    z-index: 1200;
}

.stopped.fileCount span {
    left: 14px;
    margin:0;
    top: 2px;
}

.animationStage .tooltip.departure_demands {
    transform: translate(-34px,0);
}


.animationStage .tooltip {
    position: absolute;
    box-sizing: border-box;
    top: 18px;
    color: black;
    width: 119px;
    background: white;
    margin-left: 3px;
    height: 86px;
    white-space: normal;
    padding: 4px 4px 14px 4px;
    left:auto;
    z-index: 2000;
}
.animationStage.animation .tooltip {
    width:180px;
    font-size: 1.2em;
    transform: translateX(-60px);
}
.animationStage .tooltip .label {
    height: 100%;
    display: block;
    overflow: hidden;
    font-size: 1.1em;
    line-height: 1.2em;
}

.animationStage .tooltip {
    opacity: 1;
}

.animationStage  .tooltip .optionalInfo {
    padding: 0;
    position:absolute;
    display: block;
    bottom:0;
    right:4px;
    text-align: right;
}

.animationStage  .tooltip .optionalInfo > span {
    font-weight: bold;
    padding: 0;
    color: #e14627;
}

.fadeTooltips .tooltip {
    animation: fadeIn 1s;
}

.stationsLayer .trackHead {
    z-index: 2000;
}

.wall {
    pointer-events: none;
}

.trackHead.expected_arrivals {
    background-image: url('../images/icon/expected_arrivals_60.png');
}

.trackHead.departures {
    background-image: url('../images/icon/departures_60.png');
}

.trackHead.departure_demands {
    background-image: url('../images/icon/departure_demands_60.png');
}

.trackHead.arrived {
    background-image: url('../images/icon/arrived_60.png');
}

.trackHead.cancelled {
    background-image: url('../images/icon/cancelled_60.png');
}

.trackHead.on_hold {
    background-image: url('../images/icon/on_hold_60.png');
}


.splitBuilding {
    border:1px solid red;
    z-index: 400;

}

.trackView .animationLayer  a.tooltip:hover, .trackView .animationLayer a.tooltip:focus {
    color:white;
    background:black;
}











@keyframes itemAnimationX {

    0% {
        transform: translate(1000px, 0);
    }

    70% {
        transform: translate(150px, 0);
    }
    71% {
        transform: translate(150px, 0);
    }
    100% {
        transform: translate(-200px, 0);
    }

}

@keyFrames fadeInOutKF {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes backgroundanimated {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-533px, 0);
    }
    66% {
        transform: translate(-1066px, 0);
    }
    100% {
        transform: translate(-1600px, 0);
    }
}

@keyframes wipeFromLeftKF {
    0% {
        transform: translate(-200px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}


.historyAnimation .paused {
    animation-play-state: paused !important;
}

.historyAnimation {
    width: 800px;
    height: 124px;
    overflow: hidden;
    position: relative;
    margin-bottom:17px;
}

.historyAnimation .carriage {
    position: absolute;
    bottom: 26px;
}


.historyAnimation .carriageBottom {
    position: absolute;
    bottom: 26px;
}

.historyAnimation .foreGround {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.historyAnimation .navigationContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.historyAnimation .navigationContainer .button {
    position: absolute;
    background: #fefa01;
    top:auto;
    left:auto;
    right:0;
    bottom:0;
}
.historyAnimation.fadeInOut {
    animation:fadeInOutKF 1s;
}
.historyAnimation .navigationContainer .button.pause {

}
.historyAnimation .navigationContainer .button.pause svg.pause {
    display:none;

}
.historyAnimation .navigationContainer .button.pause.playing svg.pause {
    display:block;

}

.historyAnimation .navigationContainer .button.pause.playing  svg.play {
    display:none;
}


.historyAnimation .carriageContainer {
    position: absolute;
    display: block;
    height: 100%;
    top: 0;
    left: 200px;
}

.historyAnimation .button {
    opacity: 1;
    transition: opacity 1s;
}

.historyAnimation .hidden {
    display: none;
    opacity: 0;
}

.historyAnimation .station {
    position: absolute;
    top: 0;
    left: 0;
}

.historyAnimation .station.tunnel {
    position: absolute;
    top: auto;
    bottom: 22px;
}

.historyAnimation .station.departures {
    position: absolute;
    top: auto;
    bottom: 26px;
    left: -150px;

}
.historyAnimation .station.departures.above {
    z-index:100;
}

.historyAnimation .foreGround.track img {
    position: absolute;
    top: auto;
    bottom: 0;
}




#pointOfView li.tab_selected span {
    color: white;
}

#pointOfView {
    display: flex;
    padding:0 42px 25px 42px;
}

ul#pointOfView {
    list-style-type: none;
}

ul#pointOfView li {
    display: inline;
    cursor: pointer;
    width: 15%;
    border-bottom: white solid 3px;
    margin-right: 4px;
    color: grey;
    font-weight: bold;

}

ul#pointOfView li span {
    font-size: 25px;
}
/*# sourceMappingURL=bundle.css.map */