/* #region Hypnose Player: Selection */
	#mainDivSelection {
		width: 100%;
		margin: 0px auto;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/* background-color: white; */
		display: block;
		/* margin-top: 20px; */
	}

	select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-color: white;
		border: none;
		padding: 5px;
		font-size: 16px;
		font-family: 'Times New Roman', Times, serif;
		cursor: pointer;
		width: 80%;
		margin: 0;
		border-radius: 5px;
		box-shadow: 0 0 2px 0 #555;
		transition: background .3s ease-in-out;
		text-align: center;
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	button {
		border: none;
		padding: 5px;
		font-size: 16px;
		font-family: 'Times New Roman', Times, serif;
		cursor: pointer;
		border-radius: 5px;
		box-shadow: 0 0 2px 0 #555;
		transition: background .3s ease-in-out;
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
		margin-top: 20px;
		background-color: #FF3333;
		color: white;
	}
/* #endregion */

/* #region Hypnose Player: Input */
	:root {
		/* colors */
		--black: #020202;
		--darkGrey: #313131;
		--middleGrey: #7c7c7c;
		--middle2Grey: #757575;
		--lightGrey: #c7c7c7;
		--blue: #0098ff;
		/* thumb percentage, is needed to update the position in the slider track */
		--thumb-percentage: 1;
	}
	
	/* input range */
	input[type="range"] {
		-webkit-appearance: none;
		background: var(--lightGrey);
		background-image: linear-gradient(var(--lightGrey), var(--lightGrey));
		border-radius: 20px;
		height: 5px;
	}
	
	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background: var(--middleGrey);
		cursor: ew-resize;
		box-shadow: 0 0 2px 0 #555;
		transition: background .3s ease-in-out;
		margin-top: -7.5px;
	}
	
	input[type="range"]::-moz-range-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background: var(--middleGrey);
		cursor: ew-resize;
		box-shadow: 0 0 2px 0 #555;
		transition: background .3s ease-in-out;
		margin-top: -7.5px;
	}
	
	input[type="range"]::-ms-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background: var(--middleGrey);
		cursor: ew-resize;
		box-shadow: 0 0 2px 0 #555;
		transition: background .3s ease-in-out;
		margin-top: -7.5px;
	}
	
	input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--middleGrey);
	}
	
	input[type="range"]::-moz-range-thumb:hover {
		background: var(--middleGrey);
	}
	
	input[type="range"]::-ms-thumb:hover {
		background: var(--middleGrey);
	}
/* #endregion */

/* #region Hypnose Player: Main */
	html,
	/* body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: auto;
		background-color: var(--white);
		font-family: 'Times New Roman', Times, serif;
	} */
	
	#mainDivPlayer {
		width: 100%;
		margin: 0px auto;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/* background-color: white; */
		display: block;
	}
/* #endregion */

/* #region Hypnose Player: Top-Div */
	#topDiv {
		width: 100%;
		height: 180px;
		position: relative;
	}
	
	#mixRange {
		position: absolute;
		width: 90%;
		left: 5%;
		top: 80px;
	}
	
	#mixRange::-webkit-slider-thumb {
		height: 50px;
		width: 50px;
		background-image: url('../_styles/sound.svg');
		background-size: 70%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#mixRange::-moz-range-thumb {
		height: 50px;
		width: 50px;
		background-image: url('../_styles/sound.svg');
		background-size: 70%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#mixRange::-ms-thumb {
		height: 50px;
		width: 50px;
		background-image: url('../_styles/sound.svg');
		background-size: 70%;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#Label1 {
		position: absolute;
		left: 5%;
		top: 110px;
		color: var(--blue);
		font-size: 16px;
	}
	
	#Label2 {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 110px;
		color: var(--blue);
		font-size: 16px;
	}
	
	#Label3 {
		position: absolute;
		right: 5%;
		top: 110px;
		color: var(--blue);
		font-size: 16px;
	}
	
	#SpracheLabel {
		position: absolute;
		left: 5%;
		top: 30px;
		color: var(--black);
		font-size: 16px;
	}
	
	#HintergrundLabel {
		position: absolute;
		right: 5%;
		top: 30px;
		color: var(--black);
		font-size: 16px;
	}
/* #endregion */

/* #region Hypnose Player: Middle-Div */
	#middleDiv {
		width: 100%;
		height: 180px;
		position: relative;
	}
	
	#backward15Div {
		position: absolute;
		width: min(150px, 15vw);
		height: min(150px, 15vw);
		left: 10%;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('../_styles/arrow-left.svg');
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		color: var(--middle2Grey);
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight:bold;
		font-size: min(25px, 3vw);
	}
	
	#forward15Div {
		position: absolute;
		width: min(150px, 15vw);
		height: min(150px, 15vw);
		right: 10%;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('../_styles/arrow-right.svg');
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
		color: var(--middle2Grey);
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight:bold;
		font-size: min(25px, 3vw);
	}
	
	#playDiv {
		position: absolute;
		width: min(200px, 20vw);
		height: min(200px, 20vw);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-image: url('../_styles/play.svg');
		background-size: 40%;
		background-repeat: no-repeat;
		background-position: center;
		background-position-x: 55%;
		border: min(10px, 1vw) solid var(--middle2Grey);
		border-radius: 50%;
		cursor: pointer;
		display: block;
	}
	
	#playDiv.isPlaying {
		background-size: 55%;
		background-image: url('../_styles/pause.svg');
		background-position-x: 50%;
	}
	
	#playDiv.isLoading {
		background-size: 100%;
		background-image: url('../_styles/loaderHypno.gif');
		background-position-x: 40%;
		border: none;
	}
/* #endregion */

/* #region Hypnose Player: Bottom-Div */
	#bottomDiv {
		width: 90%;
		margin: 0px auto;
		height: 110px;
		position: relative;
		/* margin-top: 20px; */
	}
	
	#positionRange {
		position: absolute;
		width: calc(100% - 120px);
		left: 50%;
		transform: translateX(-50%);
		top: 59px;
	}
	
	#positionRange::-webkit-slider-runnable-track {
		-webkit-appearance: none;
		box-shadow: none;
		border: none;
		border-radius: 20px;
		height: 5px;
		background: linear-gradient(to right, var(--middleGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))), var(--lightGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))));
	}
	
	#positionRange::-moz-range-track {
		-webkit-appearance: none;
		box-shadow: none;
		border: none;
		border-radius: 20px;
		height: 5px;
		background: linear-gradient(to right, var(--middleGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))), var(--lightGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))));
	}
	
	#positionRange::-ms-track {
		-webkit-appearance: none;
		box-shadow: none;
		border: none;
		border-radius: 20px;
		height: 5px;
		background: linear-gradient(to right, var(--middleGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))), var(--lightGrey) calc(1px + (100% - 16px) * (1 - var(--thumb-percentage))));
	}
	
	#timeLabel {
		position: absolute;
		left: 0px;
		top: 50px;
		color: var(--darkGrey);
		font-size: 20px;
	}
	
	#durationLabel {
		position: absolute;
		right: 0px;
		top: 50px;
		color: var(--darkGrey);
		font-size: 20px;
	}
/* #endregion */