.mmo-timeline {
  list-style-type: none;
  padding-left: 0;
  counter-reset: mmo-timeline;
  display: table;
  font-size: 0.8em;
  margin-bottom: 1em;
  table-layout: fixed;
}

.mmo-timeline__stage {
  display: table-row;
  color: #ccc;
}

.mmo-timeline__stage>*{
  display: table-cell;
  vertical-align: top;
}

.mmo-timeline__date {
  font-weight: 600;
  padding-right: 10px;
  color: #333;
  padding-top: 12px;
}

.mmo-timeline__dot {
  position: relative;
  overflow: hidden;    
  padding-bottom: 30px;
}

.mmo-timeline__dot:before {
  content: '';
  border: 2px solid #ccc;
  background: white;
  z-index: 10;
  position: relative;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  display: block;
  border-radius: 50%;
}                  

.mmo-timeline__dot-content:before {
  counter-increment: mmo-timeline;
  content: counter(mmo-timeline);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  color: #333;
  z-index: 20;
  text-align: center;
  line-height: 40px;
  font-size: 1rem;
  font-weight: 600;                    
}

.mmo-timeline__dot:after {
  content: '';
  border-left: 2px solid #ccc;
  position: absolute;
  top: 0; /* top: 0; bottom: 0; doesn't work in IE11 when inside a table cell, so have to set a very tall height */
  height: 10000px;
  left: calc(50% - 1px);
  z-index: 5;
}

.mmo-timeline__stage:last-child .mmo-timeline__dot:after {
  content: none;
}

.mmo-timeline__details {             
  padding-top: 19px;
  padding-bottom: 30px;
  position: relative;                    
}                  

.mmo-timeline__details:before {
  content: '';
  width: 100%;
  border-top: 2px solid currentColor;
  display: block;
  position: absolute;
  z-index: 10;
}                  

.mmo-timeline__details-box {
  background: #DEE0E2;
  /* We set a border the same colour as the background. Normally this won't be visible, 
     but in high contrast mode the background will turn black (same as the page background) 
     and this border will be white, so the detail box will still be visible */
  border: 2px solid #DEE0E2; 
  margin-left: 10px;
  padding: 0.5em;
  min-height: 95px;
  width: 120px;
  position: relative;
}

.mmo-timeline__details-box>* {
  color: #333;
}                  

.mmo-timeline__stage-title {
  font-weight: 600;
}

.mmo-timeline__stage-description {
  font-weight: 600;
  position: absolute;
  bottom: 0.5em;
}     

.mmo-timeline__stage-time {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.1em 0.5em 0.5em 0.5em;
  text-align: right;
  font-style: italic;
}

.mmo-timeline-keys{
  margin-top: 2em;
}


.mmo-timeline-keys .mmo-timeline-key:first-of-type{
  margin-top: 1em;
}

.mmo-timeline-key{
  margin-bottom: 0em;
}

.mmo-timeline-key .mmo-timeline__date { 
  width: 107px; 
}       

/* Horizontal versions - only shown on desktop */
@media (min-width: 1200px) {
  .mmo-timeline--horizontal {
    width: 100%;
    height: 60px;
    padding-left: 29px;
    box-sizing: border-box;
  }
  
  .mmo-timeline--horizontal .mmo-timeline__stage {
    display: table-cell;
    position: relative;
    width: 14.2%; /* 100%/7 */
  }
  
  .mmo-timeline--horizontal .mmo-timeline__stage:nth-child(3) {
    width: 28.5%; /* 'Consultation' is twice as wide as the other stages */
  }
  
  .mmo-timeline--horizontal .mmo-timeline__date {
    position: absolute;
    bottom: 0;
    left: -32px;
    width: 100px;
    text-align: center;
    padding: 0;                 
  }    
  
  .mmo-timeline--horizontal .mmo-timeline__dot {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    padding-bottom: 0;
  }                           
   
  .mmo-timeline--horizontal .mmo-timeline__dot:after {
    border-left: none;
    border-top: 2px solid #ccc;
    left: 0;
    width: 10000px;
    height: 0;
    top: 19px;
    z-index: 5;
  }
  
  .mmo-timeline--horizontal .mmo-timeline__details {
    padding-top: 0;
    padding-left: 19px;
    padding-bottom: 1px;
    width: calc(100% - 36px);
    display: block;
    margin-bottom: 60px;
  }   
  
  .mmo-timeline--horizontal .mmo-timeline__details:before {
    height: 100%;
    border-left: 2px solid;
    border-top: none;
  }                  
  
  .mmo-timeline--horizontal .mmo-timeline__details-box {
    margin-bottom: 10px;
    margin-left: 0;
  }                  
  
  .mmo-timeline--horizontal .mmo-timeline__details-box {
    width: 100%;
  }
}

.mmo-timeline--small .mmo-timeline__date {
  padding-top: 7px;
}

.mmo-timeline--small .mmo-timeline__dot:before,
.mmo-timeline--small .mmo-timeline__dot-content:before {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.mmo-timeline--small .mmo-timeline__dot:after {
  top: 14px;
}

.mmo-timeline--small.mmo-timeline--on-hold .mmo-timeline__stage--in-progress .mmo-timeline__dot-content:before {
  content: "";
  width: 20px;
  border-top: 4px solid white;
  top: 13px;
  left: 5px;
}

@media (min-width: 1200px) {
  .mmo-timeline--small.mmo-timeline--horizontal {
    width: 450px;
    table-layout: auto;
  }
  
  .mmo-timeline--small.mmo-timeline--horizontal .mmo-timeline__stage,
  .mmo-timeline--small.mmo-timeline--horizontal .mmo-timeline__stage:nth-child(3){
    width: calc(100% / 6);
  }          
  
  .mmo-timeline--small.mmo-timeline--horizontal .mmo-timeline__date{
    left: -36px;
  }                    
}

/* To set colours for specific stages, we (ab)use the color property to define the colour for each stage
   then use currentColor to set the border and background colours as appropriate for the in progress and completed variants */
.mmo-timeline__stage:nth-child(1) { color: #1f5fa7; }
.mmo-timeline__stage:nth-child(2) { color: #1b6433; }
.mmo-timeline__stage:nth-child(3) { color: #4e8400; }
.mmo-timeline__stage:nth-child(4) { color: #c14a08; }
.mmo-timeline__stage:nth-child(5) { color: #8c2a8a; }
.mmo-timeline__stage:nth-child(6) { color: #31368d; }                  

/* In progress stages have a coloured dot border */
.mmo-timeline__stage--in-progress .mmo-timeline__dot:before {
  border-color: currentColor;
}

/* Completed stages have coloured dots and detail backgrounds */
.mmo-timeline__stage--completed .mmo-timeline__dot:before,
.mmo-timeline__stage--completed .mmo-timeline__dot:after,
.mmo-timeline__stage--completed .mmo-timeline__details-box {
  border-color: currentColor;
  background: currentColor;
}

.mmo-timeline__stage--completed .mmo-timeline__dot-content:before,
.mmo-timeline__stage--completed .mmo-timeline__details-box>* {
  color: white;
}

/* Action required - yellow dot with exclaimation mark on current stage */
.mmo-timeline--action-required .mmo-timeline__stage--in-progress .mmo-timeline__dot:before {
  border-color: #FFBF47;
  background: #FFBF47;
}   

.mmo-timeline--action-required .mmo-timeline__stage--in-progress .mmo-timeline__dot-content:before {
  content: "!";
  font-size: 2em;
  font-weight: bold;
}

/* On hold - Red "stop" sign on current stage. Other stages go dark grey. */
.mmo-timeline--on-hold .mmo-timeline__stage--completed { color: #666; }

.mmo-timeline--on-hold .mmo-timeline__stage--in-progress .mmo-timeline__dot:before {
  border-color: #A90718;
  background: #A90718;
}   

.mmo-timeline--on-hold .mmo-timeline__stage--in-progress .mmo-timeline__dot-content:before {
  content: "";
  width: 20px;
  border-top: 4px solid white;
  top: 18px;
  left: 10px;
}