@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');

.page__subheading {
	font-size: 1.2rem;
    font-weight: var(--font-weight-normal);
}
.page__last-update {
	display: block;
	font-size: 0.95rem;
	color: var(--gray);
}
.page__mode-btn-wrapper {
	display: flex;
	align-items: center;
	margin-top: 30px !important;
}
.page__mode-btn-container {
	min-width: 250px;
}
.page__mode-btn {
	border-color: var(--primary);
	color: var(--primary);
	width: 50%;
	white-space: nowrap;
	font-size: 0.95rem;
}
.page__mode-btn:hover {
	color: var(--primary);
}
.page__mode-btn:focus {
	box-shadow: none;
}
.page__mode-btn--active {
	background-color: var(--primary);
	color: var(--light);
}
.page__mode-btn--active:hover {
	color: var(--light);
}

.injuries__select-wrapper {
	display: flex;
	align-items: center;
}
.injuries__select-wrapper div.dropdown:focus {
	outline: 0 !important;
}
.injuries__select-wrapper button.dropdown-toggle {
	background: var(--light);
    border: 0;
    color: var(--dark) !important;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid rgb(128 128 128 / 0.5);
    border-radius: 0;
    font-weight: var(--font-weight-normal);
    font-size: 0.95rem;
    min-width: 250px;
}
.injuries__select-wrapper button.dropdown-toggle:active {
	background-color: var(--light) !important;
	box-shadow: none !important;
	outline: 0 !important;
}
.injuries__select-wrapper button.dropdown-toggle:focus {
	box-shadow: none !important;
	outline: 0 !important;
}
.injuries__select-wrapper div.show button.dropdown-toggle {
	background-color: var(--light);
	box-shadow: none !important;
	outline: 0 !important;
}
.injuries__select-wrapper div.dropdown-menu.show a.dropdown-item {
	background-color: var(--light);
	font-weight: var(--font-weight-light);
	font-size: 0.95rem;
}
.injuries__select-wrapper div.dropdown-menu.show a.dropdown-item:focus,
.injuries__select-wrapper div.dropdown-menu.show a.dropdown-item:active {
	outline: 0 !important;
	background-color: var(--light);
}
.injuries__select-wrapper div.dropdown-menu.show a.dropdown-item.selected {
	background-color: var(--light);
}

.injuries__article {
	margin-top: 32px;
}
.injuries__team {
	display: inline;
	font-weight: var(--font-weight-normal);
}
.injuries__table-container {
	overflow-x: scroll;
	margin-left: -15px;
	margin-right: -15px;
	margin-top: 8px;
}
.injuries__table {
	font-size: 0.95rem;
	white-space: nowrap;
	width: 100%;
	font-family: 'Roboto Condensed', sans-serif;
}
.injuries__table th {
	background-color: #DCDCDC;
	color: var(--dark);
	font-weight: var(--font-weight-normal);
}
.injuries__table td {
	background-color: var(--light);
	color: var(--dark);
	border-bottom: 1px solid #dedede
}
.injuries__table th,
.injuries__table td {
	padding: 0.4rem 10px;
	text-align: center;
}
.injuries__table th:first-of-type,
.injuries__table td:first-of-type {
	padding-left: 16px;
	text-align: left;
	max-width: 140px;
	min-width: 140px;
	text-overflow: ellipsis;
	overflow: hidden;
	position: sticky;
	left: 0;
	box-shadow: 2px 0px 2px -1px #dadada;
}
.injuries__table th:first-of-type {
	box-shadow: 2px 0px 2px -1px #b5b5b5;
}
.injuries__table td:first-of-type {
	box-shadow: 2px 0px 2px -1px #dadada;
	font-weight: var(--font-weight-normal);
}
.injuries__table th:last-of-type,
.injuries__table td:last-of-type {
	padding-right: 16px;
}

.injuries__player-link {
	color: inherit;
}
.injuries__player-link:hover {
	color: inherit;
}

@media only screen and (min-width: 1200px) {
	.page__subheading {
		font-size: 1.4rem;
	    font-weight: var(--font-weight-normal);
	}
	.injuries__article {
		margin-left: -15px;
		margin-right: -15px;
	}
	.injuries__table-team-img {
		margin-left: 13px;
	}
	.injuries__table-container {
		overflow-x: hidden;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 8px;
		border-radius: 5px;
		box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
	}
	.injuries__table {
		font-size: 1rem;
	}
	.injuries__table th:first-of-type,
	.injuries__table td:first-of-type {
		box-shadow: none;
	}
	.injuries__table-calendar-img {
		margin-left: 15px;
	}
}