body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color : transparent;
}

.progress{
	z-index: 1000;
	position: absolute;
	top: 50%;
	width: 50%;
	left: 25%;
}
.btn {
	height: 40px;
}
#help {
	position: absolute;
	bottom: 0;
	margin: 8px;
    width: 40px;
}

.modal-body img {
	width: 48px;
	height: 48px;
}

.modal-body div {
	margin: 8px 0;
}

.modal-title {
	width: 100%;
}

.d-desktop, .d-mobile {
	display: none;
}

html.mobile .d-mobile {
	display: block;
}

html.desktop .d-desktop {
	display: block;
}

.modal-body.d-mobile {
	text-align: center;
}
.modal-body.d-mobile span{
	display: block;
}

.dropdown {
	position: absolute;
    bottom: 0;
    right: 0;
    margin: 8px;
}

#version {
	position: absolute;
    margin: 8px;
}

html.desktop #version {
   bottom: 0;
   left: 60px;
}

#playPause {
	display:none;
	position: absolute;
    bottom: 0;
    left: 50%;
	transform: translateX(-50%);
    margin: 8px;
	width: 48px;
	height: 48px;
}

.play{
	background-image: url("play-fill.svg");
}

.pause{
	background-image: url("pause-fill.svg");
}