html {
	display: flex;
	min-height: 100%;
	align-items: center;
}
body {
	flex: 1 1 auto;
	background-color: transparent;
	padding: 0;
	font-family: 'Montserrat', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
	color: #65666a;
}
.tooltip-icon { font-size: 65%; vertical-align: top; margin-top: 0.3em; margin-left: .2em; }

#audio-codec-demo-container {
	background-color: #0082FC;
	color: #fff;
	padding: 20px 20px;
	border-radius: 6px;
	margin: 0 auto;
	max-width: 1110px;
	font-family: ;
}
#audio-codec-demo-container a { color: inherit; text-decoration: underline; }
@media (min-width: 768px) {
	#audio-codec-demo-container {
		padding: 30px 50px 50px;
	}
}

#demo-header { text-align: center; margin-bottom: 20px; }
#demo-header h1 { font-size: 34px; }
#demo-header .tooltip-inner { max-width: 280px; font-size: 12px; line-height: 1.4; text-align: left; padding: 10px 12px 14px; }
#demo-header .tooltip-inner ul { margin-bottom: 0; padding-left: 20px; }
@media (min-width: 768px) {
	#demo-header { font-size: 24px; }
	#demo-header h1 { font-size: 48px; }
	#demo-header .tooltip-inner { max-width: 400px; }
}

#demo-main { position: relative; }
#demo-main > .inner { opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s; }
#audio-codec-demo.loaded #demo-main > .inner { opacity: 1; visibility: visible; }

#demo-loading-progress { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }
#audio-codec-demo.loaded #demo-loading-progress { opacity: 0; visibility: hidden; transition: transition: opacity .5s, visibility 0s .5s; }
#demo-loading-progress .progress { width: 80%; background-color: #0053FC; }
#demo-loading-progress .progress-bar { background-color: #fff; }

#playback-container { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 910px; }

.waveform-container { position: relative; height: 100px; flex: 1 1 auto; }
.waveform { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; }
.waveform.active { opacity: 1; visibility: visible; }
@media (min-width: 768px) {
	.waveform-container { height: 200px; }
}

.play-toggle-container { order: -1; margin-right: 20px; }
#play-toggle { width: 50px; height: 50px; padding: 0; background-color: transparent; border: none; color: #fff; padding: 0; outline: none; transition: opacity .2s; }
#play-toggle:disabled { opacity: .1; cursor: default; }
#play-toggle .label { display: none; }
#play-toggle.play .label.play { display: inline; }
#play-toggle.pause .label.pause { display: inline; }
#play-toggle svg { width: 100%; height: 100%; }
@media (min-width: 768px) {
	.play-toggle-container { margin-right: 40px; }
}

.volume-toggle-container { margin-left: 20px; }
#volume-toggle { display: inline-block; width: 50px; height: 50px; padding: 0; background-color: transparent; border: none; color: #fff; padding: 0; outline: none; }
#volume-toggle .label { display: none; }
#volume-toggle.unmuted .label.unmuted { display: inline; }
#volume-toggle.muted .label.muted { display: inline; }
#volume-toggle svg { width: 100%; height: 100%; }
@media (min-width: 768px) {
	.volume-toggle-container { margin-left: 40px; }
}

#demo-controls { margin-top: 20px; }
#demo-controls .form-group { margin-bottom: 10px; }
#demo-controls .label-container { margin-bottom: 4px; }
#demo-controls label { margin: 0; }
#demo-controls .btn-group { display: flex; }
#demo-controls .form-group.uncompressed .btn-group:after { content: ''; display: block; flex: 0 0 80%; }
#demo-controls .form-group.sbc .btn-group:after { content: ''; display: block; flex: 0 0 60%; }
#demo-controls button.codec-toggle { background-color: rgba(255, 255, 255, 0.2); flex: 1 1 100%; padding: 6px 4px; }
#demo-controls button.codec-toggle:hover { background-color: rgba(255, 255, 255, 0.3); color: #fff; }
#demo-controls button.codec-toggle.active { background-color: rgba(255, 255, 255, 1); color: #212529; }
#demo-controls button.codec-toggle .value { display: block; font-size: 12px; line-height: 1.2; }
#demo-controls button.codec-toggle .units { display: block; font-size: 8px; line-height: 1.4; }
@media (min-width: 520px) {
	#demo-controls .form-group { display: flex; align-items: center; margin-bottom: 20px; }
	#demo-controls .label-container { margin-bottom: 0; flex: 0 0 110px; margin-right: 20px; text-align: right; }
	#demo-controls .input-container { flex: 1 1 100%; }
}
@media (min-width: 768px) {
	#demo-controls button.codec-toggle .value, #demo-controls button.codec-toggle .units { display: inline; font-size: inherit; line-height: inherit; }
}
@media (min-width: 992px) {
	#demo-controls .label-container { font-size: 18px; flex: 0 0 120px; }
}

#demo-footer { margin-top: 10px; text-align: right; font-size: 10px; }
#demo-footer p { margin: 0; }
@media (min-width: 768px) {
	#demo-footer { font-size: 12px; }
}