.component { overflow:hidden; }

/*
.timetable-wrap { width:1000px; margin:0 0 1000px 300px; overflow-x:auto; }
tr th:first-child { position:absolute; width:300px; left:0; top:auto; }
tbody th { min-width:50px; }
*/

@media (max-width:767px) {
th { white-space:normal; }
}

/* For appearance */
.sticky-wrap {
	height:700px;
	overflow: auto;
	position: relative;
	width: 80%;
	margin: 0 auto;
}
@media (min-width:768px) {
	.sticky-wrap {
		width: 100%;
		margin: 0 auto;
		height:400px;
	}
}

.sticky-wrap .sticky-thead,.sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect {
	opacity:0;
	position:absolute;
	top:4px;
	left:0;
	z-index:50;
	width: auto;
}
@supports (-moz-appearance:none) {
    .sticky-wrap .sticky-thead,.sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect {
		transition: all ease 0.1s;
	}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .sticky-wrap .sticky-thead,.sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect {
		transition: all ease 0.1s;
	}
 }
.sticky-wrap .sticky-thead {
	box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
	z-index: 100;
	width: 100%; /* Force stretch */
}
.sticky-wrap .sticky-intersect {
	opacity:1;
	z-index:150;
}
.sticky-thead thead {
	background: #2e3638;
    color: #fff;
}
.sticky-wrap thead {
	background: #2e3638;
    color: #fff;
}

.sticky-wrap td,
.sticky-wrap th {
	box-sizing: border-box;
}

.component table thead tr th:first-child { text-align:left; }

/* Not needed for sticky header/column functionality */
td.user-name {
	text-transform: capitalize;
}
.sticky-wrap.overflow-y {
	overflow-y: auto;
	max-height: 50vh;
}