#timelineBar {
  width: 100%;
}
#timeline {
  z-index: 0;
  width: 100%;
  padding-top: 23px;
  padding-bottom: 37px;
  text-align: center;
  display: flex;
  align-items: center;
  overflow-x: auto;
  /* Multiple gradients! Cool. */
  /* This BG is copied in tl_chart for mobile, see below. */
  background: #cbebea; /* Old browsers */
  /* FF3.6-15 */
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
              -moz-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
              -moz-linear-gradient(left,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
              -webkit-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
              -webkit-linear-gradient(left,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background: linear-gradient(to right, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
              linear-gradient(to bottom, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
              linear-gradient(to right,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
}
#timeline_before, #timeline_after {
  display: none;
}
#tl_chart {
  margin: auto;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content:center;
}
.bc_column {
	width: 20px;
	height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* Apply an effect to the column that today is in */
.actualWeek > .bc_inner {
  position: relative;
}
.actualWeek > .bc_inner:after {
  display: block;
  position: absolute;
  margin: auto;
  bottom: -17px;
  content: '\2022';
  width: 100%;
  height: 20px;
  font-size: 20px;
  color: #55A992;
  text-align: center;
}
.actualWeek:not(:hover):not(.adjacentHover):not(.highlighted):not(.adjacentHighlight) > .bc_inner:after {
  opacity: 0.5;
}
.actualWeek.adjacentHover > .bc_inner:after,
.actualWeek.adjacentHighlight > .bc_inner:after {
  opacity: 0.6;
}

/* make non-hovered columns translucent on tl hover */
#tl_chart:hover > .bc_column:not(:hover):not(.adjacentHover) {
	opacity: 0.5;
  /* if we only apply the transition here, it means that hovered ones are */
  /* instantly snapped to full opacity, while recently-opaque cols slowly fade */
  /* which is pretty nice. */
  -webkit-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
}
.bc_inner {
  margin: auto;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  width: 80%;
  height: 80%;
}
/* Make highlighted or hovered cols wider */
.bc_column.highlighted,
.bc_column:hover {
  width: 50px;
}
/* Make highlighted or hovered cols taller */
#tl_chart:not(:hover) .bc_column.highlighted:not(.adjacentHover) > .bc_inner,
.bc_column:hover > .bc_inner {
  height: 100%;
  width: 45px;
}
/* Make adjacent columns wider */
.bc_column.adjacentHighlight:not(:hover),
#tl_chart:hover > .bc_column.adjacentHover {
  width: 25px;
}
/* Stop timeline jumping when hovering first or last columns: */
#tl_chart:hover > .bc_column:hover:first-child,
#tl_chart:hover > .bc_column:hover:last-child {
  width: 55px;
}
#tl_chart:hover > .bc_column:hover:first-child > .bc_inner {
  margin-right: 3px;
}
#tl_chart:hover > .bc_column:hover:last-child > .bc_inner {
  margin-left: 2px;
}
/* Show label on hovered and highlighted cols only */
#tl_chart:not(:hover) > .bc_column.highlighted .bc_label,
.bc_column:hover .bc_label {
  display: block;
}

/* Make adjacent columns taller */
.bc_column.adjacentHighlight:not(:hover) > .bc_inner,
#tl_chart:hover > .bc_column.adjacentHover > .bc_inner {
  height: 90%;
}
/* Reset highlighted classes while the whole timeline is hovered */
/* (unless the highlighted cols are actually being hovered as well) */
#tl_chart:hover > .bc_column.highlighted:not(.adjacentHover):not(:hover),
#tl_chart:hover > .bc_column.adjacentHighlight:not(.adjacentHover):not(:hover) {
  width: 20px;
}
#tl_chart:hover > .bc_column.highlighted:not(.adjacentHover):not(:hover) > .bc_inner,
#tl_chart:hover > .bc_column.adjacentHighlight:not(.adjacentHover):not(:hover) > .bc_inner {
  height: 80%;
}

#tl_labels {
	/*background: rgba(150,150,150,0.5);*/
	width: 100%;
	height: 20px;
	display: flex;
 	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	text-transform: uppercase;
	color: #FFF;
	font-size: 10pt;
}
#tl_labels > div {
	text-align: center;
	cursor: pointer;
	flex: 1;
	-webkit-flex: 1;
}
.bc_label {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 7pt;
  color: white;
  text-align: center;
  padding-bottom: 2px;
  line-height: 1.5em;
}
.bc_inner.empty > .bc_label {
  color: #55A992;
}
.bc_monthLabel {
  font-size: 8.5pt;
}
.bc_column.scaling_max {
	display: inline-flex;
  flex-direction: column-reverse;
}
.bc_column.highlighted > .bc_label {
  display: block;
  padding: 3px;
}
.bc_segment, .bc_label {
  width: 100%;
}
/* This colour palette is a slightly darker version of the colours used in the miniapps */
.bc_segment:nth-child(1) {
	background-color: rgb(235, 173, 60);
}
.bc_segment:nth-child(2) {
	background-color: rgb(180, 114, 175);
}
.bc_segment:nth-child(3) {
	background-color: rgb(90, 201, 232);
}
.bc_segment:nth-child(4) {
	background-color: rgb(112, 188, 113);
}
.bc_segment:nth-child(5) {
	background-color: rgb(85, 170, 146);
}
/******************************************************************************************/
/*                                                                                        */
/*                                   All mobile devices                                   */
/*                                                                                        */
/******************************************************************************************/
@media only screen and (max-device-width: 1024px) {

  #timeline {
    background: none;
  }
  #tl_chart {
    /* Multiple gradients! Cool. */
    /* This BG is copied from timeline, see above. */
    background: #cbebea; /* Old browsers */
    /* FF3.6-15 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
                -moz-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
                -moz-linear-gradient(left,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
                -webkit-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
                -webkit-linear-gradient(left,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 95%),
                linear-gradient(to bottom, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%),
                linear-gradient(to right,  #CAEBE9 0%, #FAD9B2 50%, #CAEBE9 100%);
  }
  #timelineBar {
    /*display: none;*/
  }
  #timeline_before, #timeline_after {
    width: 100px;
    color: #FFF;
    font-size: 14pt;
  }
  #timeline_before {
    padding-right: 10px;
    padding-left: 30px;
  }
  #timeline_after {
    padding-right: 30px;
    padding-left: 10px;
  }
  .bc_label {
    display: block;
  }
}
/******************************************************************************************/
/*                                                                                        */
/*                                Small devices in any orientation                        */
/*                                                                                        */
/******************************************************************************************/
@media only screen and (max-device-width: 1024px) {
  #timeline {
		white-space: nowrap;
		text-align: center;
		overflow-y: hidden;
		overflow-x: scroll;
    height: 110px;
		-webkit-overflow-scrolling: touch;
    padding: 0;

		/* This fixes a bug where the timeline sometimes becomes hidden due to overflow-scrolling */
		/* I couldn't replicate except that one time, but adding this in safari inspector fixed it. So... here it is. */
		-webkit-transform: translate3d(0,0,0);
  }
  .iframe #timeline {
    height: 140px;
  }
	#tl_chart {
		width: 2600px; /* width of bc_column * 52. Have to set this manually as we're using overflow to get side-scrolling */
		/* so the parent width is only 100%, not the full overflowed width */
		height: 100%;
    padding-left: 10px;
    padding-right: 10px;
	}
  #tl_chart:hover > .bc_column:not(:hover):not(.adjacentHover) {
		opacity: 1;
	}
	.bc_column.empty {
		border: 1px solid #AAA;
	}
	.bc_column,
  .bc_column.adjacentHighlight:not(:hover),
  #tl_chart:hover > .bc_column.adjacentHover,
  #tl_chart:hover > .bc_column.highlighted:not(.adjacentHover):not(:hover),
  #tl_chart:hover > .bc_column.adjacentHighlight:not(.adjacentHover):not(:hover) {
    width: 50px; /* any changes must be reflected in #tl_chart width above */
		height: 87px;
	}
  .bc_column.highlighted {
    width: 55px;
  }
  .bc_column.adjacentHighlight:not(:hover) > .bc_inner,
  #tl_chart:hover > .bc_column.adjacentHover:not(:hover) > .bc_inner {
    height: 80%;
    width: 90%;
  }
}