* {
	box-sizing: border-box;
}
html {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-image: url(images/raumfreigestellt_V1.png);
	background-color: #0d0e25;
	height: 100%;
	width: 100%;
}
#main {
}
.logo {
	width: 16vw;
	max-width: initial;
	position: absolute;
	left: 1.6%;
	top: 11px;
	z-index: 200;
	background-color: white;
	-webkit-mask-image: url("images/fhnw-logo.svg");
	-webkit-mask-image-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("images/fhnw-logo.svg");
	mask-image-size: contain;
	mask-repeat: no-repeat;
}
.logo img {
	visibility: hidden;
}
.wrapper {
	/*cursor: grab;*/
	height: auto;
}
.wrapper:hover svg {
	/*fill: #F08100;*/
	filter: drop-shadow(5px 5px 20px violet);
}
.wrapper svg {
	position: absolute;
	fill: #f08100;
	filter: drop-shadow(5px 5px 20px black);
	z-index: 1;
	will-change: filter;
	transition: filter 200ms;
	cursor: grab;
}
.wrapper-about .inhalt {
	height: 28vh;
}
.wrapper-program .inhalt {
	height: 45vh;
}
.wrapper-awareness .inhalt {
	height: 20vh;
}
.wrapper-program-radio .inhalt {
	height: 20vh;
}
.wrapper-chat .inhalt {
	width: 80%;
	height: 60vh;
	position: relative;
	z-index: 2;
}
.wrapper-chat iframe {
	box-shadow: 5px 5px 20px black;
	border-radius: 10px;
}

/* Alle Positionen der .wrapper nur mit left / top angeben! */

/*chat*/
.wrapper1 {
	width: 45vw;
	/*height: 35vw;*/
	position: absolute;
	left: 8vw;
	top: 30vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
/*matterport*/
.wrapper2 {
	width: 40vw;
	/*height: 45vw;*/
	position: absolute;
	left: 60vw;
	top: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 102;
}
/*stream*/
.wrapper3 {
	width: 40vw;
	/*height: 30vw;*/
	position: absolute;
	left: 40vw;
	top: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 103;
}
/*program*/
.wrapper4 {
	width: 40vw;
	/*height: 45vw;*/
	position: absolute;
	left: 25vw;
	top: 5vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 104;
}
/*about*/
.wrapper5 {
	width: 20vw;
	/*height: 30vw;*/
	position: absolute;
	left: 30vw;
	top: 36vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 105;
}
/*rübli*/
.wrapper6 {
	width: 40vw;
	/*height: 30vw;*/
	position: absolute;
	left: 65vw;
	top: 35vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 106;
}
/*radio*/
.wrapper7 {
	width: 20vw;
	/*height: 20vw;*/
	position: absolute;
	left: 7vw;
	top: 14vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 110;
}
/*awareness*/
.wrapper8 {
	width: 20vw;
	position: absolute;
	left: 20vw;
	top: 64vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 107;
}
/*radio-programm*/
.wrapper9 {
	width: 20vw;
	position: absolute;
	left: 2vw;
	top: 35vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 108;
}

/* beginning drawing tool    */

.ruebli {
	font-family: "IBM Plex Mono", monospace;
	position: relative;
	z-index: 2;

	/*rübli box*/
	background-color: #0d0e25;
	border-radius: 10px;
	padding: 1rem;
	box-shadow: 5px 5px 20px black;
}

.ruebli-titel {
	font-size: 0.8vw;
	color: white;
	margin-top: 0;
	line-height: 1;
	pointer-events: none;
}
@media (min-width: 1px) {
	#draw-container {
		position: relative;
		width: 300px;
		box-sizing: border-box;
		z-index: 60;
	}
}
#draw-container div {
	margin: 0.5em 0;
}

p#ruebli-hinweis {
	display: inline-block;
	position: absolute;
	font-family: "IBM Plex Mono", "Xanh Mono", monospace;
	font-size: 1.3vh;
	padding: 2em;
}

.hidden {
	visibility: hidden;
}

.colorButton {
	height: 15px;
	width: 15px;
	border: 2px solid transparent;
	box-sizing: border-box;
}
.colorButton.active {
	border: 2px solid white;
}

.beige {
	background-color: rgb(246, 254, 217);
}
.yellow {
	background-color: rgb(235, 233, 98);
}
.orange {
	background-color: rgb(237, 145, 33);
}
.red {
	background-color: rgb(235, 32, 79);
}
.violet {
	background-color: rgb(121, 59, 108);
}
.green {
	background-color: rgb(46, 115, 7);
}
#timebox {
	width: 100%;
	padding: 0.5em;
	font-size: 1em;
	height: 2em;
	text-align: center;
	line-height: 1;
	color: white;
	border-radius: 0.2em;
	font-family: "IBM Plex Mono", monospace;
	box-sizing: border-box;
	margin-top: 1rem;
	margin-bottom: 0;
	pointer-events: none;
}
#time {
	width: 2.5em;
	display: inline-block;
	text-align: right;
}
/*wähle deine farbe*/
.ruebli #controls span {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.6rem;
	color: white;
	pointer-events: none;
	white-space: nowrap;
}

.ruebli button {
	margin-right: 1rem;
	font-family: "IBM Plex Mono", monospace;
	cursor: pointer;
}
.ruebli .actionButton {
	font-size: 0.7rem;
	padding: 0.3em 0.5em;
	margin: 0;
	margin-right: 1rem;
	margin-top: 0.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: white;
	border: none;
	border-radius: 5px;
	color: #000;
}
.ruebli button:disabled,
.ruebli button[disabled] {
	/* styling für den ausgeschaltenen Send button */
	background: grey;
}

/* end drawing tool  */

.program {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1.3vh;
	padding: 1% 2% 10% 2%;
	width: 100%;
	height: 100%;
	background-color: white;
	border-radius: 10px;
	box-shadow: 5px 5px 20px black;
	overflow-y: scroll;
	z-index: 10;
}
.about {
	font-family: "IBM Plex Mono", "Xanh Mono", monospace;
	font-size: 1.3vh;
	padding: 1% 2% 10% 2%;
	width: 100%;
	height: 100%;
	background-color: white;
	border-radius: 10px;
	box-shadow: 5px 5px 20px black;
	overflow-y: scroll;
	z-index: 10;
}
.radio {
	z-index: 110;
	filter: drop-shadow(5px 5px 20px black);
	cursor: pointer;
}
.grid-container {
	display: grid;
	grid-template-columns: 15% 55% 22%;
	grid-column-gap: 4%;
	grid-row-gap: 20px;
}
.grid-container-radio {
	display: grid;
	grid-template-columns: 30% 66%;
	grid-column-gap: 4%;
	grid-row-gap: 20px;
}
.grid-item {
	border-top: 2px;
	border-top-color: black;
	border-top-style: solid;
	padding-top: 2px;
	padding-bottom: 0px;
}
.iframe-sizer {
	width: 100%;
}
.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.iframe-wrapper {
	width: 100%;
	z-index: 2;
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
	z-index: 2;
	box-shadow: 5px 5px 20px black;
}
iframe {
	background-color: #0d0e25;
}

#awareness-play-button {
	padding-left: 1.7em;
	background-image: url("images/play_circle_filled_black.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 110%;
	color: inherit;
	overflow: visible;
}
/* when audio is playing */
#awareness-play-button.playing {
	background-image: url("images/pause_circle_filled_black.svg");
	animation-name: awarenessPlaying;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}
/* pulse animation */
@keyframes awarenessPlaying {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}

.footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #0d0e25;
	color: violet;
	opacity: 0.85;
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8vw;
	letter-spacing: 0.05vw;
	text-align: left;
	z-index: 9999;
}
.footer a:link {
	color: violet;
	text-decoration: none;
}
.footer a:visited {
	color: violet;
}
.footer a:hover {
	color: #f08100;
	cursor: pointer;
}
.footer a:active {
	color: violet;
}