.scrollBox {width: 100%;height: 435px;overflow: auto;text-align:center}
.contentBox {display:inline-block;height:400px;position:relative;}

.jspHorizontalBar {background:none;border-top:2px solid #48a74d}
.jspTrack {background:none;}
.jspTrack {background:none;}
.jspDrag {background:white;width:16px !important;height:16px !important;border:2px solid #48a74d;top:-9px !important;border-radius:16px;}
.jspDrag.jspHover {background:#48a74d}
.scrollBox, .contentBox {outline:none}

.mosaic-column {
  position: absolute;
  width: 72px;
}

.square {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -2px 0 -2px 0;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
}

.square.grey { background-color: #DFDFDF;}
.square.green { background-color: #A3D45D;}

.mosaic-space {
  display: inline-block;
  margin: -2px 0 -2px 0;
  width: 72px;
}

.timeline {
	display: block;
  position: relative;
  min-height: 400px;
}

.year-column {
  position: absolute;
  width: 72px;
  margin: 0;
  padding: 0;
}

.year-box {
  position: absolute;
  cursor: pointer;
  display: block;
  background-color: #2280B1;
  color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
  margin: 0;
  padding: 0;
  width: 72px;
  height: 72px;
  transition: all 0.1s ease-in;
}

.year-box.selected {
    background-color: #0B1548;
    width: 110px;
    height: 110px;
    z-index: 99999;
    transform: translate(-19px,-19px);
    transition: all 0.1s ease-out;
 }

.year-box.selected .year-wrap {
	transition: all 0.1s ease-out;
    transform: translate(9.5px,4.25px);
}

.year-box:hover:not(.selected) {
    background-color: #23527C;
 }

.year-wrap {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 25%;
  top: 37.5%;
  text-align:center;
  width: 40px;
  transition: all 0.1s ease-in;
}

.year-wrap hr {
  margin: 0;
  padding: 0;
}