body {
	font-family: sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
}

#gui {
	background: rgba(255, 255, 255, 1);
	border: solid 0px #eee;
	border-radius: 0.0rem;
	box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.8);
	font-family: sans-serif;
	height: 65%;
	left: 50%;
	max-width: 23rem;
	max-height: 70%;
	padding: 0.5rem;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
}


#chaptersMenu {
	max-height: 90%;
	overflow-x: hidden;
	overflow-y: scroll;
}


#audioContainer {
	padding: .5rem 0 0;
	width: 100%;
	background: none;
	border: none;
}


#audioContainer audio{
	width: 100%;
}


#chaptersMenu .item {
	border-bottom: solid 0px #555;
	color: #111;
	cursor: default;
	font-size: 1.2rem;
	padding: 0.5rem 1.2rem;
}


#chaptersMenu .item:hover {
	background-color: rgba(128, 128, 128, 1);
	color: #efefef;
}

#chaptersMenu .item.active{
	background-color: #6C1F1F;
	color: #eee;
	font-weight: bold;
}


.itemTitle {
	font-size: 1.3rem;
	font-weight: bold;
}


.itemDate {
	font-size: 1.1rem;
	font-weight: 600;
	color: brown;
}

#audioElement{
	padding-bottom: 2rem;
	border: none
}

#chaptersMenu .item.active .itemDate {
	color: #c1c1c1;
}



#titleInstructions {
	background: #eee;
	border-bottom: solid 0px #999;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-left: solid 0px #666;
	border-right: solid 0px #666;
	color: #333;
	font-size: 1.7rem;
	font-weight: 700;
	left: 50%;
	padding: 0.7rem 3.5rem;
	position: fixed;
	top: 0;
	transform: translateX(-50%);
}


#audioOverlay{
	
}