/* This is what was kept from the original timeline plugin css code, https://github.com/CodyHouse/vertical-timeline  */
.cd-timeline__block {
  position: relative;
  margin: 2em 0;
}

.cd-timeline__block:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

.cd-timeline__block:first-child {
  margin-top: 0;
}

.cd-timeline__block:last-child {
  margin-bottom: 0;
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.cd-timeline__content:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

@-webkit-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

/* EURLEXNEW-3284 - Revamp of procedures: Custom code added on top of the timeline plugin */
.cd-timeline {
  padding: 0 0 20px 0;
}
.cd-timeline__block {
	margin: 0 0 2em 0;
}
.cd-timeline__container {
  position: relative;
  width: auto;
  max-width: 1170px;
  margin: 0 6px;
  padding: 33px  0 0 0;
}
/* EURLEXNEW-3929: Media query specific for IE 9+ */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
	.cd-timeline__container {
	  position: relative;
	  width: auto;
	  max-width: 1170px;
	  margin: 0 1px;
	  padding: 33px  0 0 0;
	}
}
.cd-timeline__container::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  height: 100%;
  width: 2px;
  background: #FFF;
  z-index:1;
  background-image: linear-gradient(to top, transparent 50%, #C0C0C0 50%);
  background-size: 100% 15px;
}
.cd-timeline-group:last-of-type > .cd-timeline__block:last-of-type:before{
  content: '';
  position: absolute;
  top: 30px;
  left: 21px;
  height: 100%;
  width: 6px;
  background: #FFF;
  z-index:2;
}
.cd-timeline-group:last-of-type {
	overflow: hidden;
}
.cd-timeline__img {   
	/* arrow */
	width: 0px;
	height: 0px;
	float: left;
	position:absolute;
	left: 0px;
	z-index:2;
}
.cd-timeline__img.arrow-down {
	border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 40px solid #31708f;
	border-bottom: 0;
}
.cd-timeline__img.arrow-up {
	border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #31708f;
	border-top: 0;
}
/*EURLEXNEW-4474 Casefile*/
.cd-timeline__img.arrow-upOrange {
	border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #ff9933;
	border-top: 0;
	top: -7px;
}

.cd-timeline__img.arrow-upOrange.embeddedView {
    border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 40px solid #ee745c;
    	border-top: 0;
    	top: -7px;
}


.cd-timeline__img.arrow-down.noEvents{
	border-color: #C0C0C0 transparent transparent  transparent;
}
.cd-timeline__img.arrow-up.noEvents{
    border-color: transparent transparent #C0C0C0 transparent;	
}
/*EURLEXNEW-4474 Casefile*/
.cd-timeline__img.arrow-upOrange.noEvents{
    border-color: transparent transparent #C0C0C0 transparent;
}
.cd-timeline__img.timelineCircle {
	border-radius: 50%;
    border-color: #2e6a88;
    border-style: solid;
    /* EURLEXNEW-4855 - Match height with width at procedures timeline */
    height: 0;
    padding-bottom: 0.71em; 
}
/*EURLEXNEW-4474 casefile*/
.cd-timeline__img.timelineCircleOrange {
	border-radius: 50%;
    border-color: #ff9933;
    border-style: solid;
    /* EURLEXNEW-4855 - Match height with width at case file timeline */
    height: 0;
    padding-bottom: 0.71em;
}
/* EURLEXNEW-4855 - Add margin at the bottom of the timeline circle because the circle is hidden */
@media (max-width: 767px) or (max-width: 991px) {
    .cd-timeline__img.timelineCircle,
    .cd-timeline__img.timelineCircleOrange {
        margin-top: -0.8em;
    }
}
/* EURLEXNEW-4855 - Reduce width of the data and date columns */
.reduceDateWidthLeftPad {
    width: 21%; 
    padding-left:5px;
}
.reduceDataWidthRightPad {
    padding-right:0px;
}
/* EURLEXNEW-4855 - Fix static width of cells */
.caseFileRowContainer {
    width: 100%;
}

.cd-timeline__img.timelineCircleOrange.embeddedView {
    border-color: #ee745c;
}

.embeddedAppealContainer {
    margin-top: 1em;
    float: right;
    width: 72%;

}

.embeddedAppealContainer.open{
    border: 1px solid gray;
    padding: 10px;
}




@media (min-width: 991px) {
    div.cd-timeline_title > button .VMIMore,
    div.cd-timeline_title > button .VMILess {
        margin-top: -0.45em;
    }
}

.cd-timeline__img > span{
	color: #FFF;
	font-size: 14px;
	/* arrow */
	text-align: center;
    left: -47px;
    position: absolute;
    width: 93px;
    height: 93px;
    margin: 0px;	
}
.cd-timeline__img.arrow-down > span{
    top: -40px;
}
.cd-timeline__img.arrow-up > span{
	/* arrow */
    top: 15px;	
}
/*EURLEXNEW-4474 Casefile*/
.cd-timeline__img.arrow-upOrange > span{
	/* arrow */
    top: 15px;
}
.cd-timeline__img.arrow-down.timelineCircle > span{
	/* arrow */
    top: -35px;	
}
.cd-timeline__img.arrow-up.timelineCircle > span{
	/* arrow */
    top: 5px;	
}
/*EURLEXNEW-4474 Casefile*/
.cd-timeline__img.arrow-up.timelineCircleOrange > span{
	/* arrow */
    top: 5px;
}

.cd-timeline__content {
  position: relative;
  margin-left: 60px;
  border-radius: 0.25em;
  padding: 0;
  background: #FFF;
  z-index: 2;
}
.cd-timeline__content .cd-timeline_title {
	width:100%;
	display: inline-flex;
	margin-bottom: 20px;
}
.cd-timeline__content .cd-timeline_title h3 {
	font-size: 20px;	
	margin: 0 30px 0 0;
}
.cd-timeline-group + .cd-timeline-group {
	border-top: 1px solid #EEE;
	margin-top: 20px;
}
.cd-timeline-group > .col-md-3 {
	float: none;
	padding: 0;
}
.cd-timeline-group > .col-md-3 > h2 {
	text-transform: uppercase;
	color: #444;
	font-weight: bold;
	margin: 0 0 20px 70px;
	font-size: 16px;
	margin-top: 20px;
}
.mobilePhaseInst {
	display: none;
	color: #097eaa;
	margin: -10px 0 5px 16px;
}
.mobilePhaseInst i.fa{
	display: block;
	margin-top: -21px;
	margin-left: -1px;
	font-size: 30px;
}
.mobilePhaseInst i.fa-caret-up{
	margin-top: -22px;
}
.mobilePhaseInst.noEvents{
	color: #C0C0C0;
}
.cd-timeline__content .cd-timeline_title h3.noEvents{
	color: #C0C0C0;
	font-size: 17px;
	margin-left: 35px;
}
.cd-timeline_title .instLogo + .instLogo {
	margin-left: 15px;
}
.instDetails .ViewMoreInfo, .cd-timeline_title .ViewMoreInfo{
	text-transform: none;
	text-decoration: none;
	color: #2f6884;
	white-space: inherit;
	font-size: inherit;
	text-align: left;
	padding-right: 0;
}
.instDetails .ViewMoreInfo:before{
	color: inherit;
}
.cd-timeline-group > .col-md-3 span {
	font-weight: bold;
	font-size: 10px;
	font-style: italic;
	position: absolute;
    top: 4px;
    left: 160px;
}
/* for up to 425px (xxs) */
@media only screen and (max-width: 425px) {
  .cd-timeline__container{
    margin: 0;
	width:100%;
  }
  .cd-timeline__img{
	display: none;
  }
  .cd-timeline__content{
	margin-left:0; 
	border: 1px solid #097eaa;
  }
  .cd-timeline__content.noEvents{
	border: 1px solid #C0C0C0;
  }
  .mobilePhaseInst {
	display: block;
  }
  .cd-timeline-group:last-of-type > .cd-timeline__block:last-of-type:before{
	height: 0%;
  }
}
/* for more than 425px (xxs) */
@media only screen and (min-width: 426px) {
	.instDetails .GridDL4060{
		padding-left: 15px;
	}
	.instDetails .hidden-sm.hidden-md.hidden-lg{
		padding-left: 15px;
	}
	.cd-timeline-group + .cd-timeline-group {
		border-top: none;
		overflow: hidden;
	}
	.cd-timeline-group {
		padding-top: 10px;
		outline: 1px solid #EEE;
		outline-offset: 5px;
	}
	.eventCelex > a{
		width: 200%;
		bottom: 0;
		font-size: 11px;
	}
}
/* for up to 767px (xs) */
@media only screen and (max-width: 767px) {
	.instDetails .GridDL4060 a{
		word-break: break-all;
	}
	.eventTitle{
		padding-right: 0;		
	}
	.cd-timeline__content .cd-timeline_title h3{
		margin-right: 0;
	}
	.procSteps .col-sm-3 a{
		float: right;
	}
}
/* for more than 992px (sm) */
@media only screen and (min-width: 992px) {
  .cd-timeline__container::before {
    left: 25%;
  }
  .cd-timeline-group:last-of-type > .cd-timeline__block:last-of-type:before {
	left: 25%;
    margin-left: -3px;  
  }
  .cd-timeline-group > .col-md-3 > h2 {
	margin: 20px 0 0 10px;
	padding-right: 20px;
  }
  .cd-timeline-group > .col-md-3 span {
	top: 20px;
	left: 10px;
  }
  .cd-timeline__block {
	bottom: 20px;
  }
  /* inverse bounce effect on even content blocks */
  .cd-timeline__block .cd-timeline__content.cd-timeline__content--bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
            animation: cd-bounce-2-inverse 0.6s;
  }
  .cd-is-hidden {
    visibility: hidden;
  }
  .cd-timeline__img {
    left: 25.5%;
    margin-left: -28px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  .cd-timeline__img.cd-timeline__img--bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
  }
  .cd-timeline__content {
    margin-left: 0;
    width: 65%;
  }
  .cd-timeline__content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }
  .cd-timeline__read-more {
    float: left;
  }
  .cd-timeline__date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 1.6rem;
  }
  .cd-timeline__block .cd-timeline__content {
    left: 33%;
  }
  .cd-timeline__block .cd-timeline__read-more {
    float: right;
  }
  .cd-timeline__block .cd-timeline__date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .cd-timeline__content.cd-timeline__content--bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
            animation: cd-bounce-2 0.6s;
  }
  .eventCelex {
	padding-left: 0;
	padding-right: 0;
  }
  .eventDate {
	padding-left: 25px;
    padding-right: 0;  
  }
}

/* rules not related with plugin classes */
.procSteps{
	background: #097eaa;
	padding: 0;
}
.procSteps .col-sm-3{
 	padding: 2px 2px 2px 0;
}
.procSteps .col-sm-9{
	padding: 0;
}
.procSteps .col-sm-3{
 	padding: 2px 2px 2px 0;
}
.procSteps .fa-2x {
	margin: -3px;
}
.procSteps .col-sm-3 .input-group-addon{
	width: 0;
	font-size: 14px;
    font-weight: 500;
	padding: 3px;
}
.procSteps .col-sm-3 .input-group-btn a{
	color: #444;
}
.procSteps h2{
	color: #FFF;
	padding: 5px 0 5px 10px;
	margin: 0;
	font-size: 20px;
}
.logoCOM{
	width: 60px;
	height: 30px;
	background: url("../../images/emblems/logoCOM.jpg") no-repeat center;
	background-size: 60px 30px;
}
.logoCONSIL{
	width: 35px;
	height: 30px;
	background: url("../../images/emblems/logoCONSIL.jpg") no-repeat center;
	background-size: 35px 30px;
}
.logoCOR{
	width: 40px;
	height: 30px;	
	background: url("../../images/emblems/logoCOR.jpg") no-repeat center;
	background-size: 40px 30px;
}
.logoCURIA{
	width: 30px;
	height: 30px;	
	background: url("../../images/emblems/logoCURIA.jpg") no-repeat center;
	background-size: 30px 30px;
}
.logoECA{
	width: 30px;
	height: 30px;	
	background: url("../../images/emblems/logoECA.jpg") no-repeat center;
	background-size: 30px 30px;
}
.logoECB{
	width: 35px;
	height: 30px;	
	background: url("../../images/emblems/logoECB.jpg") no-repeat center;
	background-size: 35px 30px;
}
.logoEDPS{
	width: 35px;
	height: 30px;	
	background: url("../../images/emblems/logoEDPS.jpg") no-repeat center;
	background-size: 35px 30px;
}
.logoEESC{
	width: 50px;
	height: 30px;	
	background: url("../../images/emblems/logoEESC.jpg") no-repeat center;
	background-size: 50px 30px;
}
.logoEIB{
	width: 25px;
	height: 30px;	
	background: url("../../images/emblems/logoEIB.jpg") no-repeat center;
	background-size: 25px 30px;
}
.logoEP{
	width: 55px;
	height: 30px;	
	background: url("../../images/emblems/logoEP.jpg") no-repeat center;
	background-size: 55px 30px;
}
.logoFRA{
	width: 55px;
	height: 30px;	
	background: url("../../images/emblems/logoFRA.jpg") no-repeat center;
	background-size: 55px 30px;
}
.emblems{
	display: inline-flex;
}
.eventRow{
	margin-bottom: 20px;
	padding: 0;
}
.eventEmpty{
	color: #2f6884;
	margin-left: 35px;
}
.pseudoEvent{
	color: #C0C0C0;
	margin-left: 35px;
}
.eventRow .eventDate{
	text-align: right;
}
.eventDate .fa-calendar-minus-o{
	display: inline;
	margin-right: 5px;
}
/* EURLEXNEW-3284 - Revamp of procedures: Custom code added on top of the timeline plugin (end)*/