:root {
	/* Palette: https://coolors.co/f94144-f3722c-f8961e-f9c74f-90be6d-43aa8b-577590 */
	--play-colour: #90BE6D;
	--stop-colour: #F94144;
	--pause-colour: #F9C74F;
	--to-end-colour: #577590;
	--skip-colour: #F8961E;
}

/* Symbola has glyphs needed for unicode on buttons */
@font-face {
	font-family: 'Symbola';
	src:url('Symbola-reduced.woff') format('woff');
	/*
	src:url('fonts/Symbola.ttf.woff') format('woff'),
	url('fonts/Symbola.ttf.svg#Symbola') format('svg'),
	url('fonts/Symbola.ttf.eot'),
	url('fonts/Symbola.ttf.eot?#iefix') format('embedded-opentype'); 
	*/
	font-weight: normal;
	font-style: normal;
}

html,
body {
	height: 100%;
	margin: 0;
	font-family: Symbola, sans-serif;
}

/* credit for the flexbox layout goes to https://jsfiddle.net/przemcio/xLhLuzf9/3/
 */
.box {
	display: flex;
	flex-flow: column;
	height: 100%;
}

.box .row.header {
	flex: 0 1 auto;
}

.box .row.content {
	display: flex;
	flex-flow: column;
	flex: 1 1 auto;
	overflow-y: auto;
}

#scroller {
	/* smooth scrolling is bad if we're doing frequent 1pixel scrolls */
	/* scroll-behavior: smooth; */
	position: relative;
}
/* CSS for button group from https://www.w3schools.com/howto/howto_css_button_group.asp
 */
.buttonGroup {
	float: left; /* Float the buttons side by side */
	margin: 5px;
}
.buttonGroup button {
	background-color: AliceBlue;
	border: 1px solid Gainsboro;
	font-size: 40px;
	color: black;
	padding: 1px 10px;
	cursor: pointer; /* Pointer/hand icon */
	float: left; /* Float the buttons side by side */
}

.buttonGroup button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.buttonGroup:after {
	content: "";
	clear: both;
	display: table;
}

/* Add a background color on hover */
.buttonGroup button:hover {
	background-color: lightgrey;
}

#playButton {
	color: var(--play-colour);
}
#pauseButton {
	color: var(--pause-colour);
}
#stopButton {
	color: var(--stop-colour);
}
#rewindButton {
	color: var(--skip-colour);
}
#fastforwardButton {
	color: var(--skip-colour);
}
#startButton {
	color: var(--to-end-colour);
}
#endButton {
	color: var(--to-end-colour);
}

/* Form elements do not inherit font-family be default: */
button {
	font-family: inherit;
}
button.active {
	background-color: lavender;
}

#audioContainer {
	text-align: center;
	overflow: hidden;
    width: 100%;
    background: white;
}

.svgContainer {
	/*
    overflow: auto;
	*/
    width: 100%;
    text-align: center;
	position: absolute;
}
.svgContainer.hidden {
	display: none;
}
#svgContainer {
}
#svgContainerOther {
	height: 100px;
	background: green;
	content: "foo";
}