#broadcastDetails { /*container for broadcast detail popup*/
	display: none; /*start invisible*/
	/*display: block;*/ /*normal state, set by showBroadcast()*/
	/*TODO: set position absolute (calculated) to prevent strange results when zoomed in*/
	margin: 5% auto; /*5% from the top and horizontally centered*/
	position: relative;
	border: var(--borderWidth) solid white;
	border-radius: 5px;
	box-shadow: rgba(0,0,0,0.2) 5px 5px 5px 0px;
	outline: none; /*get rid of focus outline*/
	width: 800px; /*TODO: move to broadcastDetailsBody OR code so #broadcastDetails is equal to #broadcastList and can be converted to a class*/
	overflow: hidden;
}

#broadcastDetailsBody { /* body for broadcast detail popup - modal.css has styling for header and footer */
	display: grid;
	grid-template-rows: auto 60px;
	grid-template-areas: 'data_area' 'menu_area';
	background-color: #F8F8F8;
	color: #888; /*text color*/
	font-size: small;
}

#data_area {
	grid-area: data_area;
	display: grid;
	grid-template-columns: 50% auto;
	grid-template-areas: 'img_area text_area';
	box-shadow: 0px 1px 2px 0px;
}

#img_area {
	grid-area: img_area;
	/*background-color:green;*/
}

#text_area {
	grid-area: text_area;
	overflow-y: auto;
	/*max-height:50%;*/
	/*background-color: blue;*/
	max-height: 50vh;
	overflow-y: auto;
}

#menu_area {
	grid-area: menu_area;
	position: relative;
	/*border-top: inset;*/
	/*border-top: 1px solid black;*/
	/*box-shadow: 0px -2px 2px 0px;*/
	/*background-color: orange;*/
}

#br_image {
	margin: 3%;
	border-radius: 5px;
	width: 94%; /* 100-2*margin */
	height: auto;
	box-shadow: rgba(0,0,0,0.6) 2px 2px 5px 0px;
}

#br_title,
#br_subtitle,
#br_episode,
#br_genre,
#br_prod,
#br_icons,
#br_time,
#br_description,
#br_descr,
#br_synopsis,
#br_collabs,
#br_debug {
	white-space: initial;
	word-break: break-word;
	margin-right: 3%; /* same as image margin */
}

#br_title {
	margin-top: 3%; /*position title flush with image*/
	font-size: 150%;
	font-weight: bold;
	color: #A00; /*text color*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_subtitle {
	font-size: 135%;
	color: #A22; /*text color*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_episode {
	font-size: 120%;
	color: #A44; /*text color*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_genre {
	font-size: 90%;
	color: #A66; /*text color*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_prod {
	font-size: 90%;
	color: #A88; /*text color*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_icons {
	height: 20px; /*TODO: icon height variable*/
	margin-top: 3px;
	margin-bottom: 3px;
}

.br_icon {
	float: left;
	height: 20px; /*TODO: icon height variable*/
	margin-right: 3px;
}

#br_channel {
	clear: left;
	float: left;
	width: 42px;
	height: 28px;
	margin-top: 3px;
	margin-bottom: 3px;
}

#br_time {
	float: left;
	font-size: 110%;
	color: #88F; /*text color*/
	margin-left: 3%;
	padding-top: 5px; /*position at vertical center of image*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_description {
	clear: left;
	/*margin-top: 3%;
    margin-bottom: 3%;*/
	font-size: 90%;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_descr {
	margin-top:2px;
	font-size: 90%;
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#br_synopsis {
	margin-top:5px;
	font-size: 90%;
	text-align: justify;
}

#br_collabs {
	font-size: 80%;
}

table#br_collabs {
	table-layout: auto;
	width: 97%;/* 100-3 */
}

table td {
	white-space: nowrap;
	vertical-align: top;
	/*font-size:unset;*/
}

	table td:last-child {
		width: 100%;
		white-space: initial;
	}

#br_debug {
	font-family: Courier New, Courier, monospace;
	margin-left: 10px;
	word-break: break-all;
}

#button_container {
	position: absolute;
	height: 40px;/* must be absolute value to prevent FF scaling width of buttons wrongly*/
	top: 50%;
	transform:	translateY(-50%); /* center */
				/*translateY(-4px);*//* compensate for borders and margins*/
	margin-left: 1.5%; /* half of image margin (because parent width is double) */
	/*background-color: red;*/
}

.menu_button {
	float: left;
	height: 65%;
	width: auto;
	margin-right: 2px;
	padding: 5px;
	cursor: pointer;
	border-radius: 5px;
	border: outset 2px;
	background-color: lightgray;
	/*background-color: ButtonFace;*/
}

	.menu_button:active {
		border: inset 2px;
		transform: translate(2px,2px);
	}

	.menu_button.disabled:active {
		border: outset 2px;
		transform: translate(0px,0px);
		cursor: default;
	}

	.menu_button object {
		height: 100%;
		width: auto;
		pointer-events:none;
	}

.enabled {
	filter: brightness(100%);
}

.disabled {
	filter: grayscale(100%);
	opacity: 0.25;
	cursor: default;
}

.copyToClip {
	cursor: pointer;
}

.copiedToClip {
	display: none;
	/* cursor: pointer; */
	color: red;
}