.soitin {
	font-size: 1em;
	line-height: 1;
	font-family: open-sans;
}
.soitin.aikajana {
	width: 14em;
	max-width: 100%;
}


/***/
.soitin-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5em;
	min-height: var(--painike-mitat);
}
.soitin-wrapper > * {
	flex: 0 0 auto;
}

.soitin.soitin-dragging .soitin-wrapper {
	cursor: grabbing;
}
.soitin.soitin-dragging .soitin-wrapper > * {
	pointer-events: none;
}


/***/
.soitin-napit,
.soitin-napit2 {
	display: flex;
	align-items: center;
	gap: .25em;
}
.soitin-napit2:empty {
	display: none;
}


/***/
.soitin-aikajana {
	flex: 1 0 auto;
	margin: 0 .4em;
	display: flex;
	align-items: center;
	height: .2em;
}
.soitin-aikajana-palkki {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.soitin-aikajana-palkki::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -.4em;
	right: -.4em;
	background-color: var(--musta);
	border-radius: .1em;
}
.soitin-aikajana-edistys {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -.4em;
	right: 100%;
	background-color: var(--painike-taustavari);
	border-radius: .1em;
}

.soitin-aikajana-nappi {
	position: absolute;
	top: 50%;
	cursor: pointer;
	cursor: grab;
}
.soitin-aikajana-nappi.selected {
	/* pointer-events: none; */
	cursor: grabbing;
}
.soitin-aikajana-nappi::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--painike-mitat) / 2);
	height: calc(var(--painike-mitat) / 2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: var(--painike-kehys);
	background-color: var(--painike-taustavari);
}
html.no-touch .soitin-aikajana-nappi:hover::after {
	border: var(--painike-kehys-hover);
	background-color: var(--painike-taustavari-hover);
}
.soitin-aikajana-nappi.selected::after {
	border: var(--painike-kehys-hover);
	background-color: var(--painike-taustavari-hover);
}

/***/
.soitin-aika {
	display: flex;
	align-items: center;
	line-height: 1;
}
.soitin-aika > * {
	font-size: .6em;
}
.soitin-aika-nyt[data-placeholder]::before{
	content: attr(data-placeholder);
	font-size: .6em;
	visibility: hidden;
}
.soitin-aika-nyt[data-placeholder] > div {
	position: absolute;
	left: 0;
}
.soitin-aika-kesto > *.preloader::after {
	left: calc(50% - 1.25em);
	top: calc(50% - 1.25em);
	width: 2.5em;
	height: 2.5em;
}
.soitin-virhe {
	display: flex;
	align-items: center;
	color: red;
}
.soitin-virhe > svg {
	width: 1.3em;
	height: 1.3em;
	margin-right: .4em;
}


/*** soitin-valikko ***/
.soitin-valikko {
	position: absolute;
	right: 0;
	bottom: 0;
	color: var(--musta);
	background-color: #FFFFFF;
	box-shadow: 0 0 20px rgba(0,0,0,.25);
	border-radius: .5em;
	padding: .25em;
	z-index: 1000;
}
.soitin-valikko-wrapper {
	display: flex;
	flex-direction: column;
	gap: .25em;
}
.soitin-valikko-valinta {
	display: flex;
	align-items: center;
	box-sizing: content-box;
	height: 1em;
	padding: .4em;
	background-color: #fff;
	border-radius: .35em;
	cursor: pointer;
}
html.no-touch .soitin-valikko-valinta:hover {
	background-color: var(--harmaa-tausta);
}
.soitin-valikko-valinta.selected {
	color: var(--painike-vari);
	background-color: var(--painike-taustavari);
	pointer-events: none;
}
.soitin-valikko-valinta > div {
	flex: 1 1 auto;
	font-size: .6em;
}
.soitin-valikko-valinta > svg {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-left: .5em;
}
.soitin-valikko-valinta:not(.selected) > svg {
	visibility: hidden;
}


/*** äänenvoimakkuus ***/
.soitin-aanenvoimakkuus {
	padding-top: 1em;
	padding-bottom: 1em;
	width: var(--painike-mitat);
	display: flex;
	align-items: center;
	justify-content: center;
}
.soitin-aanenvoimakkuus .soitin-valikko-wrapper {
	height: 5.2em;
	width: .2em;
}
.soitin-aanenvoimakkuus-palkki {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.soitin-aanenvoimakkuus-palkki::before {
	content: '';
	position: absolute;
	top: -.4em;
	bottom: -.4em;
	left: 0;
	right: 0;
	background-color: var(--painike-taustavari-disabled);
	border-radius: .1em;
}
.soitin-aanenvoimakkuus-edistys {
	position: absolute;
	top: 0;
	bottom: -.4em;
	left: 0;
	right: 0;
	background-color: var(--painike-taustavari);
	border-radius: .1em;
}

.soitin-aanenvoimakkuus-nappi {
	position: absolute;
	left: 50%;
	cursor: pointer;
	cursor: grab;
}
.soitin-aanenvoimakkuus-nappi.selected {
	/* pointer-events: none; */
	cursor: grabbing;
}
.soitin-aanenvoimakkuus-nappi::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--painike-mitat) / 2);
	height: calc(var(--painike-mitat) / 2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: var(--painike-kehys);
	background-color: var(--painike-taustavari);
}
html.no-touch .soitin-aanenvoimakkuus-nappi:hover::after {
	border: var(--painike-kehys-hover);
	background-color: var(--painike-taustavari-hover);
}
.soitin-aanenvoimakkuus-nappi.selected::after {
	border: var(--painike-kehys-hover);
	background-color: var(--painike-taustavari-hover);
}


/*** VIDEO ***/
.video-soitin {
	width: 100% !important;
	color: #fff;
	background-color: #000;
}
.soitin-video {
	position: relative;
	display: block;
	width: 100%;
}
.video-soitin .soitin-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .5em;
	background-color: rgba(0,0,0,.5);
	z-index: 1;
	transition: bottom .2s ease-in-out;
	min-height: 2.5em;
}
/*.video-soitin .soitin-aikajana::before,
.video-soitin .soitin-aikajana-nappi::after {
	background-color: #fff;
}*/
.video-soitin .soitin-aikajana-palkki::before {
	background-color: #fff;
}

/*.video-soitin .fullscreen{
	margin-left: .5em;
}*/
html.mobile:not(.fullscreen) .video-soitin .fullscreen {
	display: none;
}

.video-soitin .tekstitykset {
	position: absolute;
	bottom: 3em;
	left: .5em;
	right: .5em;
	z-index: 1000;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
}
.video-soitin .tekstitykset korostus {
	display: none;
	color: #fff;
	font-size: 1.4em;
	line-height: 1.2em;
	font-weight: normal;
	text-shadow: 2px 2px #000;
	width: 100%;
	text-align: center;
}
.video-soitin .tekstitykset korostus.korostettu {
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-soitin:not(.soitin-tekstitys) .tekstitykset {
	display: none;
}
html.mobile .video-soitin .tekstitykset korostus {
	font-size: 1em;
}
html.mobile.portrait .video-soitin .tekstitykset korostus {
	font-size: .75em;
}
html.mobile .video-soitin .tekstitykset korostus br {
	display: block !important;
}



/*** FULLSCREEN ***/
html.fullscreen:not(.no-parent) #container {
	background-color: #000 !important;
}
html.fullscreen #container,
html.fullscreen #video-container,
html.fullscreen #video,
html.fullscreen .soitin-video {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
}
html.fullscreen #sivu-alapalkki,
html.fullscreen #suljeVaiheB,
html.fullscreen #edellinenVaiheB,
html.fullscreen #seuraavaVaiheB,
html.fullscreen #vaihe-eteneminen,
html.fullscreen #sivu-zoom,
html.fullscreen #eteneminen,
html.fullscreen #painikkeet {
	display: none !important;
}
html.fullscreen .video-soitin .soitin-wrapper {
	position: absolute !important;
	top: auto !important;
	left: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
}


/***/
html.no-touch:not(.soitin-hover) .video-soitin:not(.paused) .soitin-wrapper {
	bottom: -2.75em !important;
}