.chronologie-content
{
    overflow:auto;
    display:block;
}

.chronologie-timeline-start
{
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;  
    height:15px;
    border-top: 1px solid #ccccce; 
    -moz-border-radius-topleft :25px; 
    -moz-border-radius-topright:25px;

}

.chronologie-timeline-end
{
    border-bottom: 1px solid #ccccce; 
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px; 
    
    height:15px;
    -moz-border-radius-bottomleft :18px; 
    -moz-border-radius-bottomright:18px;
}


.chronologie-col-right
{
	flex: 1;
}

.chronologie-col-center 
{
    overflow: hidden;
   flex: 0 0 0.5rem;
    border-left: 1px solid #ccccce;
    border-right: 1px solid #ccccce;
}

.chronologie-left-arrow {
    position: relative;
    background-color: white;
}

.chronologie-left-arrow:after {
    content: '';
	left:0rem;
    position: absolute;
    top: 50%;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.chronologie-left-arrow:after {
    right: 100%;
    border-right: 15px solid  #506482 ;
}


.chronologie-arrow-glyph{
    display: inline-block;
    position: relative;
    border-radius: 10px;
}

.chronologie-arrow-glyph:after{
    content: '';
    display: block;
    position: absolute;
    top: 60%;
    margin-top: -12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid transparent;
    right: 100%;
}


.chronologie-Date {
    background-color:  #506482 ;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    display: flex;
    
    text-align: center;
    width: 11rem;
}

/********************
* Prevision d'acte
*********************/
.chronologie-Prevision .chronologie-left-arrow {
    border-color: #9b9b9b
}




.chronologie-Prevision .chronologie-left-arrow:after {
    right: 100%;
    border-right: 15px solid #9b9b9b
}

.chronologie-Prevision .chronologie-Date {
    background-color: #9b9b9b
}


/********************
* Evt annulé
*********************/
.chronologie-Annule .chronologie-left-arrow, .chronologie-retard .chronologie-left-arrow {
    border-color: #FF640F
}


.chronologie-Annule .chronologie-left-arrow:after, .chronologie-retard .chronologie-left-arrow:after {
   right: 100%;
   border-right: 15px solid #FF640F;
}

.chronologie-Annule .chronologie-Date, .chronologie-retard .chronologie-Date {
    background-color:  #FF640F;
}

.chronologie-ContentGlyphTypeElement {
    flex-direction: column;
    justify-content: center;
    display: flex;
    text-align: center;
}


.chronologie-GlyphTypeElement {
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;

}

/********************
* Arret
*********************/
.chronologie-arrow-glyph.chronologie-Arret, .chronologie-arrow-glyph.chronologie-Accident, .chronologie-arrow-glyph.chronologie-Radiation, .chronologie-arrow-glyph.chronologie-Procedure {
    border: 2px solid #FF006E;
}
.chronologie-Arret.chronologie-arrow-glyph:after, .chronologie-Accident.chronologie-arrow-glyph:after, .chronologie-Radiation.chronologie-arrow-glyph:after, .chronologie-Procedure.chronologie-arrow-glyph:after {
    border-right: 15px solid #FF006E;
}

.chronologie-arrow-glyph.chronologie-Suspension{
    border: 2px solid #FF640F;
}

.chronologie-Suspension.chronologie-arrow-glyph:after {
    border-right: 15px solid #FF640F;
}

.chronologie-arrow-glyph.chronologie-Adhesion, .chronologie-arrow-glyph.chronologie-Reintegration {
    border: 2px solid #00DCB4;
}

.chronologie-Adhesion.chronologie-arrow-glyph:after, .chronologie-Reintegration.chronologie-arrow-glyph:after{
    border-right: 15px solid #00DCB4;    
}

.chronologie-arrow-glyph:after{
    border-right: 15px solid #d43f3a;    
}

.chronologie-PeriodeArret .chronologie-col-center, .chronologie-PeriodeArret-start .chronologie-col-center, .chronologie-PeriodeArret-end .chronologie-col-center
{
    background-color: #FF006E;
    
    
}

.chronologie-PeriodeArret-start .chronologie-col-center{
    border-bottom-left-radius: 18px; 
    border-bottom-right-radius: 18px; 
    -moz-border-radius-bottomleft :18px; 
    -moz-border-radius-bottomright:18px;
}
    

.chronologie-PeriodeArret-end .chronologie-col-center {
    border-top-left-radius: 18px; 
    border-top-right-radius: 18px; 
    -moz-border-radius-topleft :18px; 
    -moz-border-radius-topright:18px;
}


.chronologie-PeriodeArret.chronologie-Today  div.prev-circle.text-green
{
    color:white
}

/********************
* Fin Arret
*********************/

.chronologie-Element {
   /* padding-left: 2em;*/
    display: inline-block;
    float: left;
    flex-grow: 1;
}

.chronologie-Glyph
{
	line-height:3.5rem;
}