.hc-container {
	position:relative;
	width:100%;
	margin:20px 0;
	padding-top:20px;
}

.hc-wrapper {
	position:absolute;
	min-width:calc(100% - 40px);
	margin-left:40px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:stretch;
	text-align:center;
}

.hc-hours {
	position: absolute;
	left: -40px;
	right: 0;
}

.hc-hour-row {
	position: relative;
	height: 60px;
	border-bottom: 1px solid #ccc;
}

.hc-hour-box {
	color:#999;
	position:absolute;
	bottom:0;
	left:2px;
}

.hc-column {
	position:relative;
	flex:1 0 40px;
}

.hc-column-header {
	position:relative;
	top:-20px;
	min-width:40px;
	padding:0 2px;
	
	/*transform: rotate(90deg);*/
}

.hc-scheduled {
	position:absolute;
	left:50%;
	margin-left:-10px; /*8*/
	width:20px; /*16*/
	background-color:#ccc;
	border-radius:2px;
	z-index:1;
	cursor:pointer;
}

.hc-scheduled:hover {
	background-color:#999;
	z-index:2;
}

.hc-actual {
	position:absolute;
	left:50%;
	margin-left:-4px;
	width:8px;
	background-color: #000000;/*green*/
	border-radius:2px;
	z-index:3;
	cursor:pointer;
	opacity:.7;
	min-height:3px
}

.hc-actual:hover {
	z-index: 4;
	opacity: 1;
}

.hc-lp {
	transform:rotate(90deg);
	transform-origin:left top 0;
	background-color:inherit;
	display:block;
	position:absolute;
	top:0;
	padding:1px 3px 2px;
	border-radius:3px;
	margin-left:3px;
}