/*
 * wpwp.css
 *
 * This file contains the default styling for the WPWP.
 * Do not change this file to modify the UI design.
 * Instead, if you need to make any changes, e.g. to adapt
 * the UI to a different branding, add those changes
 * in wpwp_theme.css
 * 
 */
 
 /* ! Layout, Colors */

:root {
	/* New Sparkasse styleguide - color palette */
	--cpl-brand-40: #ff6d6d;
	--cpl-brand-50: #ff4949;
	--cpl-brand-60: #ff2424;
	--cpl-brand-70: #ee0000;
	--cpl-brand-80: #d10000;
	--cpl-brand-90: #b60000;
	
	--cpl-white: #ffffff;
	--cpl-grey-00: #fafafa;
	--cpl-grey-10: #f5f5f5;
	--cpl-grey-20: #f0f0f0;
	--cpl-grey-30: #e3e3e3;
	--cpl-grey-40: #bebebe;
	--cpl-grey-50: #aeaeae;
	--cpl-grey-60: #949494;
	--cpl-grey-70: #6e6e6e;
	--cpl-grey-80: #565656;
	--cpl-grey-90: #444444;
	--cpl-grey-100: #292929;

	--cpl-blue-10: #dbeeff;
	--cpl-blue-20: #92ccff;
	--cpl-blue-30: #6dbbff;
	--cpl-blue-70: #0071d4;
	--cpl-blue-80: #005baa;
	--cpl-blue-90: #004480;
	--cpl-blue-100: #003666;

	--cpl-red-10: #f9dbdb;
	--cpl-red-20: #f3b6b6;
	--cpl-red-70: #d40000;
	--cpl-red-80: #b10000;
	--cpl-red-90: #8d0000;
	--cpl-red-100: #6a0000;
	
	
	--color-debug: #22ddff;
	--color-debug-bg: #065361;
	
	--color-bg: #ffffff;
	--color-text: #292929;
	--color-text-contrast: var(--cpl-grey-90);
	--color-header: #ffffff;
	--color-header-bg: #ee0000;
	--color-footer: #fff;
	--color-footer-bg: #333;
	--color-ui-primary: var(--cpl-brand-40);
	--color-ui-primary-hover: var(--cpl-brand-60);
	--color-ui-primary-text: white;
	--color-ui-secondary: #333;
	--color-ui-secondary-hover: #222;
	--color-ui-secondary-text: white;
	--color-formfield: #eee;
	--color-selection: #d8d8d8;
	--color-placeholder: #bbb;
	--color-category-0: #e5e5e5;
	
	--color-category-1-dark: #d9bc62;
	--color-category-2-dark: #93c0b5;
	--color-category-3-dark: #b4c468;
	--color-category-4-dark: #e5a16e;
	--color-category-5-dark: #df897d;
	
	--color-category-1: #e5d092;
	--color-category-2: #c1e5dc;
	--color-category-3: #d6e0a8;
	--color-category-4: #eac9b0;
	--color-category-5: #e8bcb6;
	--color-neutral: #c9c9c9;
	
	--color-red: #ff6b40;
	--color-yellow: #ffdc45;
	--color-green: #4ec92f;
	--color-error: var(--cpl-red-90);
	--color-error-bg: var(--cpl-red-10);
}


html, body {
	width: 100%;
	height: 100%;
}

html * {
	box-sizing: border-box;
}

body {
	position: relative;
	color: var(--color-text);
	background-color: var(--color-bg);
	/*
	color: white;
	background-color: #222;
	*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/*overflow: auto;*/
}

body.modal-open { overflow: hidden; }

/* ! Typography */

html, body {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased; /* Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	font-smooth: always;
}

h1 {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0.5em;
}

h4 {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
}

p { margin-bottom: 1em; }

ul { margin-bottom: 1em; }

pre {
	font-family: ui-monospace, monospace;
	font-size: 13px;
	color: #888;
}

sub {
	display: inline-block;
	font-size: 0.75em;
	transform: translateY(0.33em);
}

sup {
	display: inline-block;
	font-size: 0.75em;
	transform: translateY(-0.5em);
}

.font-size-small {
	font-size: 0.9em;
}

.textcontent h2 {
	font-size: 1.4rem;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.textcontent ul {
	list-style: disc;
	padding-left: 1.5em;
}

@media screen and (max-width: 600px)
{
	h1 {
		font-size: 1.2rem;
	}
}

/* ! Error message */

div.error-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
}

div.error-container p {
	max-width: min(90%, 18em);
}

/* ! Links */

a { color: inherit; }

/* ! Formal or informal language? */
p.informal, h1.informal, h2.informal, h3.informal { display: none; }
body.informal .informal { display: block; }
body.informal .formal { display: none; }

/* ! Margins */

.mb-1 { margin-bottom: 1em !important; }
.mb-2 { margin-bottom: 2em !important; }
.mb-3 { margin-bottom: 3em !important; }
.mb-4 { margin-bottom: 4em !important; }


/* ! Form Elements */

input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.1em 0;
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	color: var(--color-text);
	background: var(--color-formfield);
	border: none;
	border-radius: 0;
}

/* Remove spinners */
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select:focus { outline: 0; }

input:disabled {  }
label:has(input:disabled),
label:has(select:disabled) { opacity: 0.3; }

::placeholder {
  color: var(--color-placeholder);
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { color: var(--color-placeholder); }
::-ms-input-placeholder { color: var(--color-placeholder); }

.input-box, .input-group {
	margin-bottom: 0.8em;
}

.input-group > label { display: block; margin-bottom: 0.2em; }

.input-box {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3em;
	padding: 0 12px;
	line-height: 1.2;
	overflow: hidden;
	font-size: 1.0rem;
	font-weight: 400;
	color: var(--color-text);
	background: var(--color-formfield);
	border-radius: 8px;
	white-space: nowrap;
}

.input-box input {
	width: 100%;
	height: 35px;
	margin-left: 1em;
	padding: 0.55em 0;
	line-height: 1.2;
	font-size: 1.2rem;
	text-align: right;
	background: transparent;
	border-bottom: none;
}

.input-box select {
	width: 100%;
	max-width: 100%;
	padding: 0.5em 1.5em 0.5em 0;
	line-height: 1.2;
	font-size: 1.2rem;
	text-align: right;
	text-align-last: right;
	background: transparent;
	border-bottom: none;
}

.select-wrapper {
	position: relative;
	width: 100%;
	margin-left: 1em;
}

.select-wrapper:after {
	content: '';
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	right: 0;
	top: 0;
	background-color: fuchsia;
	background: url('../assets/icons/icon_dropdown_24x24.svg') no-repeat center right;
	background-size: contain;
	pointer-events: none;
}

.custom-select select {
	opacity: 0;
}

.custom-select span {
	position: absolute;
	left: 0;
	right: 1.5em;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 1.2rem;
	text-align: right;
	pointer-events: none;
}

.custom-select.show-select select { opacity: 1; }
.custom-select.show-select span { display: none; }

.radio-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 1em;
}

.radio-wrapper input[type="radio"] { display: none; }

.radio-wrapper label {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 110px;
	padding: 8px;
	background-color: var(--color-formfield);
	background-size: min(100%, 100px) 74px;
	background-repeat: no-repeat;
	background-position: 50% 8px;
	font-size: 1rem;
	line-height: 1;
	border-radius: 8px;
}

.radio-wrapper label.slim {
	height: 70px;
	background-size: 100% 32px;
}

.radio-wrapper input[type="radio"]:checked + label {
	/*color: var(--color-ui-secondary-text);*/
	background-color: var(--color-selection);
}


/* Toggle Switch */

input.toggle-switch {
	--width: 46px;
	--height: 24px;
	appearance: none;
	display: inline-block;
	position: relative;
	width: var(--width);
	height: var(--height);
	margin: 0;
	padding: 0;
	line-height: var(--height);
	
	background-color: rgba(255, 255, 255, 1);
	background-color: #aaa;
	border: none;
	border-radius: 100px;
	cursor: pointer;
}

input.toggle-switch::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	width: calc(var(--height) - 4px);
	height: calc(var(--height) - 4px);
	background: #fff;
	border-radius: 100px;
	transition: left 0.2s cubic-bezier(.27, 1.48, .25, .99);
	opacity: 1;
}

input.toggle-switch:checked {
	background: #0dce4b;
}
/*input.toggle-switch:checked::before { }*/
input.toggle-switch:checked::after {
	left: calc(100% - var(--height) + 2px);
	/*background: #0ddb4f;*/
}

input.toggle-switch:disabled {
	cursor: default;
}

input.toggle-switch:disabled::after {
	opacity: 0.3;
}


/* ! Debug output */

#debug {
	display: none;
	gap: 2em;
	min-height: 2em;
	padding: 0.5em max(calc(50vw - 400px), 5%);
	font-family: ui-monospace, monospace;
	font-size: 0.9rem;
	color: var(--color-debug);
	background: var(--color-debug-bg);
}
body.debug #debug { display: flex; }

#debug:empty { display: none !important; }

#debug table { margin-bottom: 1em; }
#debug table td { padding: 0 1em; text-align: right; white-space: nowrap; }
#debug table td:first-child { text-align: left; }



/* ! Header */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 80px;
	padding: 0 5%;
	color: var(--color-header);
	background: var(--color-header-bg);
}

header a {
	color: inherit;
	text-decoration: none;
}

header .title { }
header .title * { display: inline-block; vertical-align: bottom; }
header .title img { margin-right: 0.5em; }


/* ! Content layout */

#main { min-height: calc(100% - 240px); /* 240px = Header plus footer height */ }

#content {
	width: 90%;
	max-width: 800px;
	margin-inline: auto;
	padding-top: 4em;
	padding-bottom: 4em;
}

#content h1 span {
	display: block;
	margin-bottom: 0.75em;
	font-size: 1rem;
	font-weight: 400;
}
#content h1 span a {
	display: inline-block;
	padding: 0.05em 0.25em;
	
	/*text-decoration: none;*/
	letter-spacing: 0.02em;
	/*
	border-radius: 4px;
	color: var(--color-text);
	background: var(--color-category-0);
	*/
}
#content h1 span a:first-of-type { padding-left: 0; }
/*
#content h1 span a.chapter-1 { background: var(--color-category-1); }
#content h1 span a.chapter-2 { background: var(--color-category-2); }
#content h1 span a.chapter-3 { background: var(--color-category-3); }
#content h1 span a.chapter-4 { background: var(--color-category-4); }
#content h1 span a.chapter-5 { background: var(--color-category-5); }
*/

.error {
	padding: 2em;
	color: var(--color-error);
	background: var(--color-error-bg);
	border-radius: 1em;
}

/* ! Content formatting */

p.next { margin-top: 3em; }

ul.related-topics li { display: inline-block; }
ul.related-topics a {
	display: inline-block;
	padding: 0.3em 1.2em;
	margin: 0 0.5em 0.5em 0;
	/*border: 1px solid var(--color-text);*/
	border-radius: 1em;
	/*border-radius: 4px;*/
	text-decoration: none;
	transition: all 0.15s ease;
	/*
	color: var(--color-ui-secondary-text);
	background: var(--color-ui-secondary);
	border-color: transparent;
	*/
	background: var(--color-category-0);
}
ul.related-topics a.chapter-1 { background: var(--color-category-1); }
ul.related-topics a.chapter-2 { background: var(--color-category-2); }
ul.related-topics a.chapter-3 { background: var(--color-category-3); }
ul.related-topics a.chapter-4 { background: var(--color-category-4); }
ul.related-topics a.chapter-5 { background: var(--color-category-5); }

ul.related-topics a:hover {
	background: var(--color-formfield);
	color: var(--color-ui-secondary-text);
	background: var(--color-ui-secondary-hover);
}


/* ! TOC formatting */

ul.toc { line-height: 1.2; }

ul.toc > li {
	margin-bottom: 1em;
}
ul.toc li ul { margin: 0.5em 0 0.5em calc(24px + 0.8em); }
ul.toc li.level-0 {  }
ul.toc li.level-1 { margin-left: 3em; }
ul.toc li.level-2 { margin-left: 6em; }

ul.toc span.expand {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 0.5em;
	background-image: url(../assets/icons/icon_dropdown_24x24.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent !important;
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
	cursor: pointer;
}
ul.toc li.expanded span.expand { transform: rotate(0); }
ul.toc li ul { display: none; }
ul.toc li.expanded ul { display: block; }


ul.toc span.id {
	display: inline-block;
	padding: 0.2em 0.6em;
	margin-right: 0.5em;
	font-weight: bold;
	color: var(--color-text-contrast);
	background: var(--color-category-0);
	border-radius: 0.5em;
}
ul.toc span.chapter {
	display: inline-block;
	margin-right: 0.2em;
	font-weight: bold;
}
ul.toc a { display: inline-block; padding: 0.3em 0.4em; color: inherit; text-decoration: none; border-radius: 4px; }
/*
ul.toc a:hover { background: var(--color-category-0); }
ul.toc li.chapter-1 a:hover { background: var(--color-category-1); }
ul.toc li.chapter-2 a:hover { background: var(--color-category-2); }
ul.toc li.chapter-3 a:hover { background: var(--color-category-3); }
ul.toc li.chapter-4 a:hover { background: var(--color-category-4); }
ul.toc li.chapter-5 a:hover { background: var(--color-category-5); }
*/
ul.toc > li > a { display: flex; align-items: center; font-size: 1.3em; line-height: 1.5; background: var(--color-category-0); }
ul.toc > li.chapter-1 > a { background: var(--color-category-1); }
ul.toc > li.chapter-2 > a { background: var(--color-category-2); }
ul.toc > li.chapter-3 > a { background: var(--color-category-3); }
ul.toc > li.chapter-4 > a { background: var(--color-category-4); }
ul.toc > li.chapter-5 > a { background: var(--color-category-5); }

ul.toc ul a:hover { background: var(--color-category-0); }
ul.toc ul li.chapter-1 a:hover { background: var(--color-category-1); }
ul.toc ul li.chapter-2 a:hover { background: var(--color-category-2); }
ul.toc ul li.chapter-3 a:hover { background: var(--color-category-3); }
ul.toc ul li.chapter-4 a:hover { background: var(--color-category-4); }
ul.toc ul li.chapter-5 a:hover { background: var(--color-category-5); }

@media screen and (max-width: 640px) {
	ul.toc span.expand {
		width: 16px;
		height: 16px;
	}
	ul.toc li ul { margin: 0.5em 0 0.5em calc(16px + 0.5em); }
	ul.toc > li > a { font-size: 1em; }
	ul.toc li.level-1 { margin-left: 1.5em; }
	ul.toc li.level-2 { margin-left: 3em; }
}


/* ! Footer */

footer {
	height: 160px;
	color: var(--color-footer);
	background-color: var(--color-footer-bg);
}

footer .container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90%;
	max-width: 800px;
	height: calc(100% - 3rem);
	margin: 0 auto;
}

footer nav {
	display: flex;
	justify-content: center;
	gap: 1.5em;
}

footer .container nav a {
	padding: 0.5em 2em;
	font-weight: 600;
	font-size: 1em;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	color:  var(--color-ui-secondary-text);
	background: var(--color-ui-secondary);
	border-radius: 2.5em;
	transition: all 0.15s ease;
}

footer .container nav a:hover {
	/*text-decoration: underline;*/
	background: var(--color-ui-secondary-hover);
}

footer .meta {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 3rem;
	margin: 0 auto;
	background: var(--color-bg);
	border-top: 1px solid var(--color-placeholder);
}

footer .meta nav a {
	color: var(--color-ui-primary);
	font-weight: 600;
	text-decoration: none;
}

footer .meta nav a:hover { text-decoration: underline; }

@media screen and (max-width: 400px)
{
	footer { height: 220px; }
	footer .container nav { display: block; text-align: center; width: 100%; }
	footer .container nav a { display: block; width: 85%; padding: 0.8em 2em; margin: 1em auto;}
}


/* ! Video Player */

.video-player {
	position: relative;
	/*
	display: grid;
	grid-template-columns: 1fr 1fr;
	*/
	width: 100%;
	height: calc(0.5626 * 100vw);
	/*
	min-height: 75vw;
	max-height: 100vh;
	*/
}

.video-player > * { /*display: flex; align-items: center; justify-content: center;*/ }


.video-player .video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgb(80,80,80);
	background: linear-gradient(180deg, rgba(80,80,80,1) 0%, rgba(240,240,240,1) 100%);
	background: url(../assets/posterframe.jpg) no-repeat center center;
	background-size: cover;
}

.video-player video {
	position: absolute;
	left: 0;
	max-width: 100%;
	max-height: 100%;
}

.video-player .overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.video-player.end-of-sequence .overlay {
	opacity: 1;
}

.video-player .logo-overlay {
	position: absolute;
	right: 2vw;
	top: 2vw;
	width: 10vw;
	height: 10vw;
	max-width: 70px;
	max-height: 70px;
	background-image: url(../assets/Logo_Sparkasse_S_weiss.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	opacity: 0.1;
}

@media screen and (max-width: 800px) and (orientation: portrait)
{
	.video-player {
		height: calc(0.75 * 100vw);
		overflow: hidden;
	}
	
	.video-player .video-wrapper{
		width: 133.33%;
	 }
	 
	.video-player video {
		left: -12.5%;
	}
}


/* ! Video Player UI */

.ui-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #d1e5ee;
	background: rgba(240, 240, 250, 0.2);
	background: transparent;
}

.ui-wrapper button {
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.2em;
	padding: 0 2.2em;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-ui-primary-text);
	background: var(--color-ui-primary);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
	border: none;
	border-radius: 2em;
	cursor: pointer;
	pointer-events: none;
}

.ui-wrapper button.chapter-1 { background: var(--color-category-1-dark); }
.ui-wrapper button.chapter-2 { background: var(--color-category-2-dark); }
.ui-wrapper button.chapter-3 { background: var(--color-category-3-dark); }
.ui-wrapper button.chapter-4 { background: var(--color-category-4-dark); }
.ui-wrapper button.chapter-5 { background: var(--color-category-5-dark); }

.ui-wrapper .show button { pointer-events: auto; }

.ui-wrapper button:hover {
	color: var(--color-ui-secondary-text);
	background: var(--color-ui-secondary-hover);
}

.timeline-wrapper {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	height: 12px;
	transition: width 0.3s linear;
	cursor: pointer;
	z-index: 100;
}

.timeline-wrapper div {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
}

.timeline {
	height: 4px;
	background-color: rgba(192, 192, 192, 0.4);
	transition: width 0.3s linear, height 0.25s ease;
}

.timeline-wrapper:hover .timeline {
	height: 8px;
}

.timeline .time {
	width: auto;
	bottom: 14px;
	padding: 3px 2px 2px;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 2px;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.2s linear;
}

.timeline-wrapper:hover .timeline .time {
	opacity: 1;
}

.timeline-target {
	width: 0%;
	height: 100%;
	background-color: rgba(192, 192, 192, 0.9);
	opacity: 0;
	transition: opacity 0.15s linear;
}

.timeline-wrapper:hover .timeline-target {
	opacity: 1;
}

.timeline-bar {
	width: 0%;
	height: 100%;
	background-color: var(--color-ui-primary);
}


.center {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.controls-wrapper {
	/*display: none;*/
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.controls-wrapper.hidden {
	opacity: 0.0;
}

.video-player.end-of-sequence .controls-wrapper {
	background: transparent;
}

.config {
	position: absolute;
	width: auto;
	right: 20px;
	bottom: 40px;
	pointer-events: auto;
	cursor: pointer;
}

.config .trigger {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 36px;
	height: 36px;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	background-image: url(../assets/icons/icon_rate.svg);
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: center 42%;
	border-radius: 18px;
}

.config:hover .trigger { background: transparent; }

.config .popup {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 6px 10px 28px;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	font-size: 14px;
	line-height: 1.3;
	border-radius: 4px;
}

.config:hover .popup { display: block; }

.config .label {
	display: block;
	font-size: 12px;
	margin-bottom: 0.5em;
}

.config .playback-rate {
	position: relative;
	line-height: 2;
	padding-left: 20px;
}

.config .playback-rate.current:before,
.config .playback-rate:hover:before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(50% - 5.5px);
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 5px;
}

.config .playback-rate:not(.current):hover:before {
	background: #888;
}

.controls {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.controls-wrapper button {
	-webkit-appearance: none;
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	padding: 0;
	margin: 0;
	background-color: #222;
	border: none;
	border-radius: 60px;
	cursor: pointer;
	pointer-events: auto;
}

.controls-wrapper button:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../assets/icons/icon_play.svg) no-repeat center center;
	background-size: contain;
}

.controls-wrapper.hidden button { pointer-events: none; }

.controls-wrapper .button-playpause { left: 50%; top: 50%; }
.controls-wrapper .button-rewind { left: calc(50% - 200px); top: 50%; }
.controls-wrapper .button-rewind10 { left: calc(50% - 100px); top: 50%; }
.controls-wrapper .button-replay { left: 50%; top: 50%; }
.controls-wrapper .button-skip10 { left: calc(50% + 100px); top: 50%; }

.controls .button-playpause:before { background-image: url(../assets/icons/icon_pause.svg); }
.controls .button-rewind:before { background-image: url(../assets/icons/icon_rewind.svg); }
.controls .button-rewind10:before { background-image: url(../assets/icons/icon_rewind10.svg); }
.controls .button-replay { display: none; }
.controls .button-replay:before { background-image: url(../assets/icons/icon_replay.svg); }
.controls .button-skip10:before { background-image: url(../assets/icons/icon_skip10.svg); }
.video-player.paused .controls .button-playpause:before { background-image: url(../assets/icons/icon_play.svg); }
.video-player.end-of-sequence .controls .button-replay { display: block; }
.video-player.end-of-sequence .controls .button-rewind,
.video-player.end-of-sequence .controls .button-rewind10,
.video-player.end-of-sequence .controls .button-playpause,
.video-player.end-of-sequence .controls .button-skip10,
.video-player.autoplay-blocked .controls .button-rewind,
.video-player.autoplay-blocked .controls .button-rewind10,
.video-player.autoplay-blocked .controls .button-skip10,
.video-player:not(.started) .controls .button-rewind,
.video-player:not(.started) .controls .button-rewind10,
.video-player:not(.started) .controls .button-skip10 { display: none; }

.ui-wrapper .toc {
	position: absolute;
	top: 3%;
	left: 3%;
	z-index: 1;
}

.ui-wrapper .toc a.button {
	display: none;
	padding: 0.3em 1.4em;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	color: var(--color-ui-secondary-text);
	background: var(--color-ui-secondary);
	border-radius: 1em;
}

.ui-wrapper .toc a.button:hover {
	background: var(--color-ui-secondary-hover);
}

.video-player.end-of-sequence .ui-wrapper .toc a.button {
	display: inline-block;
}


.button-container {
	position: absolute;
	left: 0;
	bottom: 10%;
	width: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-container.bottom {
	flex-wrap: wrap;
}

.button-container.center {
	top: 0;
	bottom: 0;
	height: 100%;
}

.button-container.left {
	left: 10%;
	top: 0;
	bottom: 0;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
}

.button-container .button-wrapper {
	width: 40%;
	max-width: 16em;
	margin: 0 0.75em 0.5em;
	transform: translateY(60px);
	opacity: 0;
	transition: all 0.0s cubic-bezier(.48,.07,.25,1.1);
}

.button-container.left .button-wrapper {
	max-width: 20em;
	margin: 0.5em 0;
	transform: translateX(-60px) translateY(0);
}

.button-container .button-wrapper.show {
	transform: translateY(0);
	opacity: 1;
	transition-duration: 0.5s;
}

.button-container .button-wrapper.hidden {
	display: none;
}

.button-container .button-wrapper button {
	width: 100%;
}

@media screen and (max-width: 800px)
{
	.controls-wrapper button { width: 50px; height: 50px; }
	.controls-wrapper .button-rewind { left: calc(50% - 120px); }
	.controls-wrapper .button-rewind10 { left: calc(50% - 60px); }
	.controls-wrapper .button-skip10 { left: calc(50% + 60px); }
	
	.button-container.bottom { bottom: 5%; }
	.button-container.left { left: 5%; }
	.button-container.left .button-wrapper { margin: 0.33em 0; }
	.button-container button {
		height: 2.6em;
		font-size: 0.9em;
		line-height: 1.1;
	}
}