#media-player {
	margin: 0.4vh 0 0 0.4vw;
    border: 0.1vmin solid #222222;
	width: 99%;
	height: 60%;
}

#media-dataTableContainer {
	width: 99.5%;
	height: 100%;
	flex: 1 1 0;
	margin: 1vh 0 0 0;
	overflow-y: scroll;
	overflow-x: auto;
	scrollbar-color: rgba(255, 255, 255, 0.25) #222629;
	scrollbar-width: thin;
}	

#media-dataTableContainer::-webkit-scrollbar {
	width: 10px;
}

#media-dataTableContainer::-webkit-scrollbar-track {
	background: #222629;
}

#media-dataTableContainer::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 8px;
}

#media-dataTable {
	table-layout: fixed;
	width: 100%;
	color: #FFFFFF;
	margin: 0 0 0 0;
	border-collapse: separate;
	border-spacing: 0.4vw 0.4vh;
}

#media-dataTable tr {
	line-height: 1.4;
	text-align: left;
	transition: background 120ms ease;
	cursor: pointer;
}

#media-dataTable tr:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

#media-dataTable td {
	font-family: "Courier New", Courier, monospace;
	font-size: max(1.7vmin, 14px);
	padding: 0.5vh 0.5vw 0.5vh 0.5vw;
	text-wrap: wrap;
 	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
}

@media (orientation: portrait) {
  #media-dataTable td {
    letter-spacing: -1px;
  }
}

#media-dataTable td:nth-child(1) {
	width: 75%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.media-selectedRow {
	color: #222222;
	font-weight: bold;
	background: rgba(255,204,0,0.75); 
	text-shadow: 0 0 0; 
	pointer-events: none;
}