/*
 * Navigation
 */

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
	background-color: #A9A9A9 !important;
}

/*
 * Table
 */

 #table-points-div {
	max-height: calc(100vh - 12em);
	max-width: 100vw;
	margin-top: 6px;
	overflow: scroll;
}

#table-points {
	margin-top: 0 !important; /* To overwrite DataTable styling and improve scrolling; replaced with div margin */
}

#table-heading th {
	min-width: 6em;
	width: 15vw;
	max-width: calc(12em + 26px);
	/*background-color: white;*/
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index: 2;
}


#table-heading th.student-id,
#table-heading th.total {
	max-width: calc(8em + 26px);
}

#table-heading .form-control { /* Search bars in heading cells */
	min-width: 6em;
	width: min(12em, 14vw);
}

#table-heading th.student-id .form-control,
#table-heading th.total .form-control {
	max-width: 8em;
}

#table-heading th.student-id, #table-heading th.student-id input
{
	max-width: 6em;
}

#table-heading th.stick-on-scroll:not(.indicator-heading) {
    left: 0;
    z-index: 3;
}

#table-heading th.stick-on-scroll.indicator-heading {
	left: 0;
}

tbody td.stick-on-scroll {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    left: 0;
    z-index: 1;
}

#table-heading th.stick-on-scroll:nth-child(2),
tbody td.stick-on-scroll:nth-child(2) {
	left: 6em;
}

table#table-points thead td div.ratio {
	text-align: right;
	font-style: italic;
	font-weight: normal;
}
table#table-points thead td div.ratio::after {
	content: "%";
}

.student-id,
.student-name,
#table-heading th.indicator-heading {
    font-weight: bold;
}

div.dt-note {
    padding-top: 8px;
    white-space: nowrap;
	text-align: right;
}
