#output{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height: 120px;
			background-color:white;
			color: black;
			z-index: 20000000000000000;
			opacity:0.8;
		}

		
		@font-face {
			font-family: 'TheSansC5';
			src:  url('../fonts/TheSansC5-5_Plain.woff') format('woff');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
		    font-family: 'TheRobotoMono';
		    src: url('../fonts/robotomono_500.woff2') format('woff2');
		    font-style: normal;
		}

		@font-face {
		    font-family: 'TheSansExtraBold';
		    src: url('../fonts/TheSansC5-8_ExtraBold.woff2') format('woff2'),
		        	url('../fonts/TheSansC5-8_ExtraBold.woff') format('woff');
		    font-style: normal;
		    font-display: swap;
		}

		body, html{

				font-family:'TheSansC5';

				top:0px;
			
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  min-height: 100%;
			  height: 100%;
			  width:100%;
			  color: #224;
			  background: #003280;
			  margin:0;
			  
			  	touch-action: none; 
				overflow:hidden; 
				position:fixed;
			  
			  -webkit-user-select: none;       
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			  
			  overflow:hidden;
			  
			  margin:0;
			  padding:0;

			}
			
			#wrapper{

				position:absolute;
				
				  margin:0;
				  padding:0;
				  
				  left:0px;
				  top:0px;
				
				  height: 100%;
				  width:100%;

				  overflow:hidden;

				  background:transparent;
				  
				  background: #003280 url( ../images/game_backgrounds/kombination1.svg );

			}
			
			
							
			#header{
				position:absolute; 
				height:55px; 
				width:100%; 
				top:-60px; 
				left:0px; 
				background:#003280; 
				z-index:10000000000000000; 
			}
			
			#header .ps_logo{
				position:relative; 
				top:13px; 
				left:20px; 
				left:20px; /*calc( 50% - 90px ); */
				width:180px; 
				cursor:pointer;
			}
					
			.burger{
				position:absolute;
				right:10px;
				top:10px;
				filter:invert( 1 );
				cursor:pointer;
			}
			
			#burger_menu{
				position:absolute; 
				padding-top:6px;
				height:100%; 
				width:350px; 
				top:0px; 
				right:0px;  
				background:rgba(255,255,255,1); 
				z-index:100; 
				text-align: left;
				color:#000;
				font-size:38px;			
				-webkit-box-shadow: 1px 1px 23px 1px rgba( 0,0,0,0.4 ); 
				box-shadow: 1px 1px 23px 1px rgba( 0,0,0,0.4 );
				z-index: 200000000000000000000000000000000;
				display: none;
				/*backdrop-filter: blur( 7px);
				-webkit-backdrop-filter: blur( 10px);*/			
			}
			
			#burger_menu div{
				position: relative;
				clear:both;
				top:50px;
				font-size: 20px;
				cursor:pointer;
				margin-left:50px;
				margin-top:20px;
				cursor:pointer;
				color:#003280;
			}
			
			#burger_menu img{
				cursor:pointer;
			}
			
			.burger_menu_item_hidden{
				opacity:0.5;
				pointer-events: none;
			}
				
			
		#game_header{
			font-family:'TheSansC5'; 
			position:absolute; 
			height:40px; 
			width:100%; 
			top:55px; 
			left:0px; 
			background:rgba(0,50,128,0.5); 
			z-index:1;
			display:none;
		}
					
		#game_points{
			position:absolute; 
			left:0px;
			width:300px;
		}
		
		.game_points_text{
			position:relative; 
			left:2px; 
			top:10px; 
			float:left; 
			font-size: 18px; 
			color:#FFF; 
			float:left;
		}
		
		.game_points_fx{
			position:relative; 
			left:10px;  
			top:5px; 
			font-size: 22px; 
			color:#FFF; 
			font-weight: bold; 
			letter-spacing: 3px; 
			float:left;
		}
		
		
		#game_bonus{
			position:absolute; 
			left:180px;
			width:120px;
		}

		.game_bonus_text{
			position:relative; 
			left:5px; 
			top:10px; 
			float:left; 
			font-size: 18px; 
			color:#FFF; 
			float:left;
		}
		
		.game_bonus_count{
			position:relative; 
			left:10px; 
			top:5px; 
			font-size: 22px; 
			color:#FFF; 
			font-weight: bold; 
			letter-spacing: 3px; 
			float:left;
		}


		#game_sentences{
			position:absolute; 
			right:0px;
			width:100px;
		}		
		
		.game_sentences_text{
			position:relative; 
			left:5px; 
			top:10px; 
			float:left; 
			font-size: 18px; 
			color:#FFF;  
			float:left;
		}
		
		.game_sentences_count{
			position:relative; 
			left:10px;  
			top:7px; 
			font-size: 20px; 
			color:#FFF; 
			font-weight: bold; 
			letter-spacing: 3px;  
			float:left;
		}
		
		#game_round{
			position:absolute;
			right:180px;
			width:110px;
		}
		
		.game_round_text{
			position:relative; 
			left:5px; 
			top:10px; 
			float:left; 
			font-size: 18px; 
			color:#FFF;  
			float:left;
		}

		.game_round_count{
			position:relative; 
			left:10px;  
			top:6px; 
			font-size:22px; 
			color:#FFF; 
			font-weight: bold; 
			letter-spacing: 3px;  
			float:left;
		}
		
		#game_header_wrapper{
			position:absolute;
			width:660px;
			height:30px;
			border:solid 0px red;
			left:calc( 50% - 325px );
			top:0px;
		}
		

		
		#trainingscenter_headline{
			position:absolute; 
			font-size: 26px; 
			color:#FFF;
			top:4px;
			left:5px;
			width:300px;
			display:none;
		}
		
		#trainings_center_wrapper{
			position:absolute;
			width:420px;
			height:30px;
			border:solid 0px red;
			left:calc( 50% - 220px );
			top:0px;
			z-index: 2;
		}
		
		#trainings_center_share_wrapper{
			position:absolute;
			width:440px;
			height:10px;
			border:solid 0px red;
			left:calc( 50% - 220px );
			top:0px;
		}
		
		@media only screen and ( max-width: 595px ) {
		
			#game_header_wrapper{
				width:460px !important;
				left:calc( 50% - 225px ) !important;
			}

			#game_points{
				left:-10px;
			}
		
			
			#game_bonus{
				left:150px;
			}
			
			#game_round{
				right:80px;
			}
			
			#game_sentences{
				right:-20px;
			}	
			
			.ps_logo{
				left:10px !important;
			}
		
			#contrast_icon{
				right:180px !important;
			}
						
			#sound_icon{
				right:110px !important;
			}
			
			#user_icon{
				right:60px !important;
			}
		
		}
		
		#contrast_icon{
			position:absolute; 
			top:11px;
			right:240px;
			width:32px;
			cursor:pointer;
		}
					
		#sound_icon{
			position:absolute; 
			top:4px;
			right:150px;
			width:46px;
			cursor:pointer;
		}
		
		#user_icon{
			position:absolute; 
			top:11px;
			right:80px;
			width:31px;
			cursor:pointer;
		}

		#gridDemo{

			padding:10px;
			width:440px;
			height:calc( 100% - 245px);
			
			max-height:600px; 
			
			left:calc( 50% - 230px);
			
			outline:0px solid red; /*rgba( 0, 0, 0, 0.6 );*/

			display:none;

		}	
		
				

		.grid-square{
			
			position: relative;
			width: 34;
			height: 37px;
			display: inline-block;
			border-radius:6px;
			padding: 5px;
			padding-top: 5px;
			padding-bottom: 11px;
			margin: 3px;

			-webkit-box-shadow: 0px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 0px 1px 3px 1px rgba( 0,0,0,0.4 );
			
			text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
			background-color: rgba(255, 255, 255, 0.3);

			float:left;
			cursor:default;

			font-family: 'TheRobotoMono';
			font-size: 2em;
			
			color:#000000;
			text-align:center;

		}
		
		.disable_dragger{
			pointer-events: none !important;
		}
		
		
		#gridBackground{
			position:absolute;
			padding:10px;
			width:440px;
			height:100%;
			left:calc( 50% - 230px);
			top:0px;
			border: dashed 3px rgba(255,255,255,0.3);
			outline:1px solid rgba(0,0,0,0.15);
			border-radius: 10px;
			-webkit-box-shadow: 1px 1px 40px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 40px 1px rgba( 0,0,0,0.4 );
			overflow: hidden;
			display:none;
			backdrop-filter: blur( 3px);
			-webkit-backdrop-filter: blur( 3px);
		}

		#trash_container{
			position:absolute;
			width:100%;
			height:100px;
			top:0px;
			left:0px;
			border:solid 0px red;
			display:none;
			background: rgba( 22,200,100, 0.8 );
			z-index:100000000000000000000;
		}

		#komma_container, #punkt_container, #fragezeichen_container{
			position:relative;
			width:60px;
			height:60px;
			left:calc( 50%);
			border:solid 0px red;
			float:left;
		}

		#komma_container{
			left:calc( 50% - 200px);
			border:solid 0px green;
		}
		
		#punkt_container{
			left:calc( 50% - 100px);
		}
		
		#fragezeichen_container{
			left:calc( 50% - 0px);
		}
		
		#gridDemo{
			position:absolute;
			top:0px;
		}

		.clear_both{
			clear:both;
		}

		.glass_blur{
			backdrop-filter: blur( 14px);
			-webkit-backdrop-filter: blur( 14px);
		}

		.glass_glow{
			position:absolute;
			width:calc( 100% - 2px);
			height:25px;
			left:1px;
			top:1px;
			background: linear-gradient(to bottom,  rgba( 255,255,255,0.5 ) 0%,rgba( 255,255,255,0) 100%);
			-webkit-box-shadow: 1px 5px 6px -4px rgba(0,0,0,0.2 ); 
			box-shadow: 1px 5px 6px -4px rgba(0,0,0,0.2 );
			border-radius:4px;
			z-index:-1;	
		}		
				
		.dragme{
			position:absolute;
			left:0px;
			cursor:move;
			padding-right:18px;
			background: rgba( 255, 255, 255, 0.8 );
		}

		.ghost-background-class {
			background:rgba(0,50,128,1); 
			color:#FFF;
		}
		
		.chosen-background-class {
			background:rgba(0,50,128,1); 
			color:#FFF;
		}
		
		.drop_fx{
			background:rgba(0,50,128,1); 
			color:#FFF;
		}

		#game_footer{
			position:absolute; 
			padding-top:10px;
			height:105px; 
			width:100%; 
			bottom:-2px; 
			left:0px;  
			background:rgba(0,50,128,0.5); 
			z-index:2; 
			text-align: center;
			display:none;
		}
		
		#game_info_footer{
			position:absolute; 
			padding-top:10px;
			height:25px; 
			width:100%; 
			bottom:-40px; 
			left:0px;  
			background:rgba(0,50,128,1); 
			z-index:3; 
			text-align: left;
			color:#FFF;
			font-size:14px;
		}
		
		#game_info_footer span{
			margin-left:18px;
			color:rgba( 255, 255, 255, 0.7 );
			cursor:pointer;
		}
		
		#game_info_footer span:hover{
			color:rgba( 255, 255, 255, 1 );
		}

		#finished_screen{
	
			position:absolute;
			padding:10px;
			padding-left:30px;
			width:395px;
			height:150px;

			left:10px;
			top:10px;

			outline:1px solid rgba( 255,255,255,0.15);

			border-radius: 10px;
			
			-webkit-box-shadow: 1px 1px 40px 1px rgba( 255,255,255,0.4 ); 
			box-shadow: 1px 1px 40px 1px rgba( 255,255,255,0.4 );
			
			overflow: hidden;

			background:rgba( 255, 150, 255, 1); 
			
			background: #003280;
			
			color:#FFF;
			
			font-size:18px;
			
			text-align: left;
			
			border:solid 1px rgba( 255, 255, 255, 0.2 );

			z-index: 20;
			
			display:none;

		}
		
		#finished_screen p{
	
			position: relative;
			top:30px;
			font-size: 24px;

		}
		
		#finished_screen .finished_close_icon{
			position:absolute; 
			top:12px; 
			right:12px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
				
		
		#overview_screen{
	
			position:absolute;
			padding:10px;
			padding-left:30px;
			width:395px;
			height:407px;

			left:10px;
			top:10px;

			outline:1px solid rgba( 255,255,255,0.15);

			border-radius: 10px;
			
			-webkit-box-shadow: 1px 1px 40px 1px rgba( 255,255,255,0.4 ); 
			box-shadow: 1px 1px 40px 1px rgba( 255,255,255,0.4 );
			
			overflow: hidden;

			background:rgba( 255, 150, 255, 1); 
			
			background: #003280;
			
			color:#FFF;
			
			font-size:20px;
			
			text-align: left;
			
			border:solid 1px rgba( 255, 255, 255, 0.2 );
			
			display:none;
			
			z-index: 20;
			
			line-height: 15px;

		}
		
		#overview_screen .overview_close_icon{
			position:absolute; 
			top:12px; 
			right:12px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
		
		#overview_screen h3{
			line-height:28px;
			margin-top: 15px;
			width:300px; 
		}
	
		
		.overview_info_icon{
			position:absolute; 
			right: -40px; 
			top:11px; 
			border:solid 2.5px #FFFFFF; 
			color:#FFF;
			border-radius:20px; 
			width:13px; 
			height:16px; 
			padding:5px; 
			padding-left:5px; 
			padding-top:6px; 
			text-align:center; 
			font-size:15px; 
			padding-top:2px; 
			cursor:pointer; 
			font-family:'TheSansExtraBold';
			background: #003280;
			text-shadow: 0px 1px 1px #000000;
		}
		
		.ok_haken{
			position:absolute; 
			left: 20px; 
			top:8px; 
			width:32px; 
			display:none;
		}
		
		
		#startScreen, #endScreen, #nextScreen, #trainings_center_start_startscreen{
	
			position:relative;
			padding:10px;
			width:440px;
			height:350px;

			left:calc( 50% - 230px);

			outline:0px solid #4178F5;

			border-radius: 10px;
			
			-webkit-box-shadow: 1px 1px 40px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 40px 1px rgba( 0,0,0,0.4 );
			
			overflow: hidden;

			background: #4178F5;
			
			text-align: center;

			opacity:0;
			
			z-index: 20;
			
			z-index: 1;

		}
		
		#startScreen .grid-square, #nextScreen .grid-square, #endScreen .grid-square{
			position:relative;
			left:60px;
			top:100px;
			padding:25px 25px 15px 25px;
			text-shadow: 0px 1px 1px rgba(255,255,255,1) !important;
			 background-color: rgba(255, 255, 255, 0.3);
			 margin-top:50px;
		}
		
		#startScreen .start_button, #nextScreen .__next_button, #endScreen .next_button{
			padding:25px 33px 15px 33px;
			background-color: rgba(255, 255, 255, 1);
			cursor: pointer;
		}
		
		#nextScreen{
			top:125px !important;
			height:460px;
		}
		
		@keyframes mymove {
		  0% { background-position: center; background-size: 320%; }
		}
				
		#startScreen{
			background-image: url( ../images/title.jpg );
			background-repeat: no-repeat;
			background-size: 120%;
			top:125px;
			padding-top: 220px;
			height:220px;
			
		}
		
		.moveLogo{
			animation: mymove 3s;
		}

		#endScreen{
			top:125px !important;
			height:400px;
		}
		
		#trainings_center_start_startscreen{
			top:120px;	
			background:rgba(0,50,128,1); 
		}

		
		#endScreen .next_button{
			top:20px;
			margin-top: 5px;
			width:160px !important;
			left:calc( 50% - 120px);
			font-size: 25px;
		}

		

		#startScreen .start_button:hover, #nextScreen .next_button:hover, #endScreen .next_button:hover{
				
				background: #ff1f71 !important;

				box-shadow: 0 0 5px rgba( 255, 31, 113, 0.6 ), 0 0 15px rgba( 255, 31, 113, 0.6 ), 0 0 30px rgba( 255, 31, 113, 0.6 ), 0 0 40px rgba( 255, 31, 113, 0.6 ), inset 0px 0px 0px 2px rgba( 255,255,255, 0.4 ), inset 0 -30px rgba(  0, 0, 0, 0 ),  inset 0 30px rgba(  255, 255, 255, 0.2 ) ,
				inset 0 5px rgba(  255, 255, 255, 0.4)  !important;

				 color:#FFFFFF !important;
	 
		}
		
		 #endScreen, #nextScreen{
			 display:none;
		}
		
		.type_text{
			font-family:'TheSansC5'; 
			position:absolute; 
			z-index:100000000000000000;
			width:100%; 
			left:0px;
			text-align:center; 
			bottom:300px; 
			font-size: 47px; font-weight: bold; letter-spacing: 3px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8), 2px -2px 0 rgba(0, 0, 0, 0.8), -2px 2px 0 rgba(0, 0, 0, 0.8), -2px -2px 0 rgba(0, 0, 0, 0.8), 2px 0px 0 rgba(0, 0, 0, 0.8), 0px 2px 0 rgba(0, 0, 0, 0.8), -2px 0px 0 rgba(0, 0, 0, 0.8), 0px -2px 0 rgba(0, 0, 0, 0.8), 2px 4px 9px rgba(0, 0, 0, 1);
		}
		
		.popup_text{
			color:#FFF;
			font-size: 26px;
			padding: 20px;
			padding-top: 25px;
		}

		
		.new_item{
			/*opacity:0.2 !important;*/
		}
		
		.old_item{
			/*filter:invert(1);*/
		}
		
		#title_text{
			margin-top:30px;

			color:#FFF;
			font-size: 45px;
			font-weight: bolder;
			color: #F9f1cc;
  text-shadow: 2px 2px 0px #FFB650, 
    4px 4px 0px #FFD662, 
    6px 6px 0px  #FF80BF, 
    8px 8px 0px #EF5097, 
    10px 10px 0px #6868AC, 
    11px 11px 0px #90B1E0,
    12px 12px 10px #000000;
		}
		#title_text div{

			font-size: 60px;
		}
		
		#title_text span{

			font-size:40px;
		}


		.default_button{
			
			position: relative;
			
			width: auto;
			height: 37px;
			display: block;
			border-radius:6px;
			padding: 12px;
			padding-top: 8px;
			padding-bottom: 5px;
			padding-left:20px;
			padding-right:20px;

			-webkit-box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 );
			
			/*text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
			 background-color: rgba(255, 255, 255, 0.3);*/

			/*clear:both;*/

			font-size: 1.7em;
			
			color:#000000;
			text-align:center;
			
			margin:0 auto;
			margin-bottom:20px;
			
			float:left;
			
			cursor:pointer;
			
		}

		
		#user_message{
			position:absolute;
			right:20px;
			top:60px;
			width:250px;
			height:120px;
			padding:10px;
			background: #FFF;
			-webkit-box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 );
			display:none;
		}
		
		#user_message .msg{
			position:absolute;
			left:10px;
			top:40px;
			width:230px;
			height:60px;
			font-size: 18px;
			color:#003280;
		}
		
		.user_message_zipfel{
			position: absolute;
			right:68px;
			top:-25px;
		}
		
		.close_user_message{
			position:absolute;
			right:8px;
			top:8px;
			width:25px;;
			height:25px;
			cursor: pointer;
		}
	
	
		#login{
		
			position:absolute;

			padding:10px;
			padding-left:20px;
			width:100%;
			height:100%;
			
			text-align: center;

			left:0px;
			
			top:55px;

			overflow: hidden;

			background: #FFF url( ../images/game_backgrounds/kombination_code.svg );
			
			background-size: 900%;
			background-position: left top;

			z-index:100000000000000000000000000000000000;

			opacity:1;

			border:solid 0px red;

			color:#003280;
			
			display:none;
		
		}	
		
		#login h1{
			width:360px;
			margin:100px auto;
			margin-top:20px;
			margin-bottom:20px;
			padding-left:20px;
			text-align: left;
		}
		
		
		.login_close_icon{
			position:absolute; 
			top:25px; 
			right:55px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
		
		#your_code{
			position:relative; 
			width:355px; 
			height:90px; 
			left:10px; 
			top:0px; 
			margin:0 auto; 
			font-size: 20px; 
			margin-bottom:10px; 
			border:solid 0px red; 
			text-align:left; 
			display:none
		}
		
		#code_input_instructions{
			position:relative; 
			width:355px; 
			min-height:20px; 
			height:auto; 
			left:10px; 
			top:0px; 
			margin:0 auto; 
			font-size: 20px; 
			margin-bottom:10px; 
			border:solid 0px red; 
			text-align:left; 
		}
		
		code_input_button_start{
			position:relative; 
			z-index:10; 
			top:10px; 
			padding-right:0px; 
		}

		.get_code_message{
			position:relative; 
			width:340px; 
			height:auto; 
			left:0px; 
			top:30px; 
			margin:0 auto; 
			font-size: 20px; 
			text-align:left; 
			clear:both;
		}
		
		.generate_code_input_button{
			position:relative; 
			z-index:10; 
			top:10px; 
			width:300px; 
			left:calc( 50% - 170px ); 
			background: #003280; 
			color:#FFFFFF;
		}
		
		#generate_code_input{
			position:relative; 
			left:10px; 
			float:left; 
			width:250px; 
			pointer-events: none
		}
		
		 #generate_code_input_conainer{
			 position:relative; 
			 width:360px; 
			 height:120px; 
			 left:0px; 
			 top:40px; 
			 margin:0 auto; 
			 border:solid 0px red;
		}
		
		
		#code_error_message{
			position:relative; 
			top:70px; 
			margin-bottom: 20px; 
			margin:0 auto;  
			height:120px; 
			left:-20px; 
			font-size:20px; 
			color:#9B325A; 
			width:300px; 
			text-align:left;
		}
		
		.code_input_button{
			position:relative; 
			z-index:10; 
			top:10px; 
			width:300px; 
			left:calc( 50% - 170px ); 
			background: #003280; 
			color:#FFFFFF; 
			clear:both;
		}
		
		.play_with_code{
			position:relative; 
			z-index:10; 
			top:10px; 
			width:280px; 
			left:calc( 50% - 160px ); 
			background: #003280; 
			color:#FFFFFF;		
		}
		
	
		
		.game_round_close_icon{
			position:absolute; 
			top:8px; 
			right:8px; 
			width:25px; 
			height:25px; 
			cursor:pointer; 
		}
		
		.share_close_icon{
			position:absolute; 
			top:24px; 
			right:20px;; 
			width:25px; 
			height:25px; 
			cursor:pointer; 	
		}


	
		
		#status{
		
			position:absolute;
			padding:10px;
			padding-left:20px;
			width:100%;
			height:100%;
			left:0px;			
			top:55px;
			overflow: hidden;
			background: #FFF url( ../images/game_backgrounds/kombination5.svg );			
			background-size: 900%;
			background-position: left top;
			z-index:100000000000000000000000000000000000;
			opacity:1;
			border:solid 0px red;
			color:#FFF;			
			display:none;
		
		}	
		
		#status_content{
			
			padding-left:20px;
			height:calc( 100% - 150px );
			width:calc( 100% - 420px );
			max-width:480px;
			min-width:420px;
			font-size: 22px;
			line-height: 38px;
			overflow:auto;
			scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
			scrollbar-width: thin;
			margin:100px auto;
			margin-top: 0px;
			background: transparent;
			color:#FFF;
			
		}
	
	.status_content{
		
		margin-top:7px; 
		margin-bottom:12px; 
		color:#003280; 
		height:34px; 
		padding:7px; 
		padding-left:15px; 
		padding-right:20px; 
		font-size:22px; 
		font-family: 'TheSansExtraBold'; 
		background:#FFF; 
		border-radius:5px; 
		width:354px; 
		
	}	
			
	.status_content_overview_item{
		position:relative; 
		width:260px; 
		float:left;
	}
	
	.status_content_overview_item_value{
		position:relative; 
		width:110px; 
		float:left;
		text-align: right;
	}
		
		#status h1{
			width:calc( 100% - 420px );
			max-width:480px;
			min-width:420px;
			margin:100px auto;
			margin-top:20px;
			margin-bottom:20px;
			padding-left:20px;
		}
		
		.status_close_icon{
			position:absolute; 
			top:25px; 
			right:55px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
      

		#credits{
		
			position:absolute;

			padding:10px;
			padding-left:20px;
			width:100%;
			height:100%;

			left:0px;
			
			top:55px;

			overflow: hidden;

			background: #FFF url( ../images/game_backgrounds/kombination_credits_lila.svg );
            background-size: 3800px;

			z-index:100000000000000000000000000000000000;

			opacity:1;
			
			display:none;
			
			border:solid 0px red;

			color:#003280;

		
		}	
		
		


		
		#credits_content{
			padding-left:20px;
			height:calc( 100% - 150px );
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			overflow:auto;
			  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
			  scrollbar-width: thin;
			  margin:100px auto;
			  margin-top: 0px;
			  background: transparent;
			  border: solid 0px red;
		}


		#credits h1{
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			margin:100px auto;
			margin-top:20px;
			margin-bottom:20px;
			padding-left:20px;
		}
		
		#credits h4{
			font-size: 22px;
			margin-bottom: 0px;
			margin-top: 7px;
		}
		
		#credits p{
			font-size: 16px;
			margin-top: 4px;
		}
		
		.credits_close_icon{
			position:absolute; 
			top:25px; 
			right:55px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
		
		


		#instructions{
		
			position:absolute;

			padding:10px;
			padding-left:20px;
			width:100%;
			height:100%;
			left:0px;			
			top:55px;
			overflow: hidden;
			background: #FFF url( ../images/game_backgrounds/kombination_anleitung_rosa.svg );
            background-size: 3800px;
			z-index:100000000000000000000000000000000000;
			opacity:1;
			
			display:none;
			
			border:solid 0px red;

			color:#003280;

		
		}	
		
		#instructions_content{
			padding-left:20px;
			padding-right:20px;
			left:20px;
			height:calc( 100% - 140px );
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			overflow:auto;
			scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
			scrollbar-width: thin;
			margin:100px auto;
			margin-top: -10px;
			background: transparent;
		}


		#instructions h1{
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			margin:100px auto;
			margin-top:20px;
			margin-bottom:20px;
			padding-left:0px;
		}
		
		#instructions h4{
			font-size: 22px;
			margin-bottom: 4px;
			margin-top: 10px;
		}
		
		.instructions_close_icon{
			position:absolute; 
			top:25px; 
			right:55px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}         
	
		
		#glossar{
		
			position:absolute;

			padding:10px;
			padding-left:20px;
			width:100%;
			height:100%;

			left:0px;
			
			top:55px;

			overflow: hidden;

			background: #FFF url( ../images/game_backgrounds/kombination_glossar_rot.svg );
			background-size: 3800px;

			z-index:6;

			opacity:1;

			border:solid 0px red;

			color:#003280;
			
			display:none;
		
		}	
		
		

		
		#glossar_content{
			padding-left:20px;
			height:calc( 100% - 150px );
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			overflow:auto;
			  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
			  scrollbar-width: thin;
			  margin:100px auto;
			  margin-top: 0px;
			  background: transparent;
		}
		
		.glossar_antwort{
			display:none;
			width:80%;
			margin-top:10px;
			margin-left:10px;
			overflow:hidden;
			font-size:18px;
		}
		
		#glossar h1{
			width:calc( 100% - 420px );
			max-width:700px;
			min-width:380px;
			margin:100px auto;
			margin-top:20px;
			margin-bottom:20px;
			padding-left:20px;
		}
		
		#glossar h2{
			cursor:pointer;
			background:transparent;
			z-index:10000;
		}

		
		.glossar_arrow{
			position: relative;
			top:2px;
			margin-left:7px;
			width:20px;
		}
		
		#glossar h2:hover{
			text-decoration: underline;
		}
		
		.glossar_close_icon{
			position:absolute; 
			top:25px; 
			right:55px;
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
				
		#trainings_center{
			
			position:absolute;
			padding:10px;
			width:100%;
			height:100%;
			left:0px;
			overflow: hidden;
			background: url( ../images/game_backgrounds/kombination7.svg );
			z-index:5;
			top:0px;
			opacity:1;
			display:block;			
			border:solid 0px red;			
			display:none;			
			color:#003280;
			
		}
		
		
		
		.trainings_center_headline{
			position:relative; 
			top:40px; 
			height:10px; 
			margin-bottom:15px; 
			width:200px; 
			left:calc( 50% - 200px ); 
			float:left;
		}
		
		.trainings_center_headline_main{
			left:calc( 50% - 220px ); 
		}
		
		.trainings_center_close_icon{
			position:absolute; 
			top:82px; 
			right:42px; 
			width:30px; 
			height:30px; 
			cursor:pointer; 
		}
		
		.share_sentence_types{
			margin-top:10px;
			margin-bottom:10px;
		}
		

		.glossar_info_icon{
			position:absolute; 
			left: 10px; 
			top:90px; 
			border:solid 2.5px #003280; 
			border-radius:20px; 
			width:9px; 
			height:14px; 
			padding:5px; 
			padding-left:6px; 
			padding-top:4px; 
			text-align:center; 
			font-size:14px; 
			padding-top:2px; 
			cursor:pointer; 
			font-family:'TheSansExtraBold';
		}
		
		#trainings_center_content{
	
			position:relative;
			padding:10px;
			width:440px;
			height:calc( 100% - 120px );

			left:calc( 50% - 230px);
			
			top:60px;

			overflow: auto;

			background:transparent;
			
			text-align: left;
			
			border:solid 0px red;
			
			clear:both;


		}
		
		
		#trainings_center_footer{
			position:absolute; 
			padding-top:10px;
			height:105px; 
			width:100%; 
			bottom:-2px; 
			left:0px;  
			/*background:rgba(0,50,128,1); */
			background:rgba(0,50,128,1); 
			z-index:1000000; 
			text-align: center;
			display:none;	
		}
		
		#trainings_share{
			position:absolute; 
			padding-top:10px;
			height:70px; 
			width:100%; 
			bottom:100px; 
			left:0px;  
			background:rgba(0,50,128,1); 
			z-index:1000000; 
			text-align: center;
			display:none;
			overflow:hidden;
		}
		
		#trainings_share input{
			position:relative;
			left:0px;
			top:10px;
			margin-left:5px;
			width:calc( 100% - 170px ); 
			max-width:300px;
			height:30px;
			float:left;

		}
		
		.trainings_button_share_copy{
			position:relative;
			width:20px;
			top:12px;
			left:10px;
			background:#FFF;
			float:left;
		}
		
		.trainings_button_share_copy img{
			position:relative;
			top:2px;
			width:30px;		
			cursor:pointer;
		}
		
		
		.trainings_card{
			
			position:relative;
			
			float:left;
			
			padding:10px; 
			
			margin:3px;
			width:180px;
			height:100px;
			
			/*backdrop-filter: blur( 10px);
			-webkit-backdrop-filter: blur( 10px);*/
			
			background:rgba( 255, 255, 255, 1 ); 
			
			font-weight: bolder;
			
			color:#003280;
			
			font-size:20px;
			
			cursor:pointer;
	
			
		}
	
		
		.trainings_button{
			position:absolute;
			top:20px;
			left:150px;
			background:#FFF;
		}
		
		.trainings_button_share_startscreen{
			position:absolute;
			top:290px;
			left:130px;
			background:#FFF;
		}
		
		.trainings_center_start_startscreen_text{
			color:#FFF;
			font-size: 30px;
			padding: 20px;
			padding-top: 10px;			
		}
		
		.trainings_button_share{
			position:absolute;
			width:30px;
			top:20px;
			left:30px;
			background:#FFF;
		}
		
		.trainings_button_share img{
			position:relative;
			top:2px;
			width:30px;		
		}
		
		.bold_font{
			font-family:'TheSansExtraBold';
			text-decoration:none !important;
		}
		
		.white_contrast_font{
			background:#FFFFFF !important;
			color:#000 !important;
			box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4) !important;
		}
		
		#global_share{
			position:absolute; 
			padding-top:10px;
			height:70px; 
			width:100%; 
			bottom:30px; 
			left:0px;  
			background:rgba(0,50,128,1); 
			z-index:10000000000000000000000000 !important; 
			text-align: left;
			display:none;
			overflow:hidden;
		}

		#global_share input {
			position:relative;
			top:0px;
			left:20px;
			float:left;
		}
				
		.global_button_share_copy{
			position:relative;
			width:20px;
			height:33px;
			top:0px;
			left:30px;
			background:#FFF;
			float:left;
		}
		
		.global_button_share_copy img{
			position:relative;
			top:0px;
			width:30px;		
			cursor:pointer;
		}

		
		#copy_code_button{
			position:relative; 
			width:20px; 
			height:32px; 
			left:5px; 
			top:0px; 
			
			border-radius:6px;
			
			padding: 12px;
			padding-left:15px; 
			padding-top: 8px;
			padding-bottom: 5px;
			background: #003280; 
			color:#FFFFFF; 
			clear:both;
			
			-webkit-box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 );


			clear:both;
			cursor:pointer;

			font-size: 1.7em;
			
			color:#000000;
			text-align:center;
			
			margin:0 auto;
			margin-bottom:20px;
			
			
		}
		
		.screen_button{

			position: relative;
			width: 300px;
			height: 37px;
			display: inline-block;
			border-radius:6px;
			padding: 12px;
			padding-top: 8px;
			padding-bottom: 5px;

			-webkit-box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 );
			
			text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
			 background-color: rgba(255, 255, 255, 0.3);

			clear:both;
			cursor:pointer;

			font-size: 1.7em;
			
			color:#000000;
			text-align:center;
			
			margin:0 auto;
			margin-bottom:20px;
						
		}
		
		
		.level_button{
			
			position: relative;
			width: 300px;
			height: 37px;
			display: inline-block;
			border-radius:6px;
			padding: 12px;
			padding-top: 8px;
			padding-bottom: 5px;

			-webkit-box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 ); 
			box-shadow: 1px 1px 3px 1px rgba( 0,0,0,0.4 );
			
			text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
			 background-color: rgba(255, 255, 255, 0.6);

			clear:both;
			cursor:pointer;

			font-size: 1.7em;
			
			color:#000000;
			text-align:center;
			
			margin:0 auto;
			margin-bottom:20px;
			
		}
		
		.level_label{
			position:absolute;
			left:100px;
			top:8px;
		}
		
		.level_round{
			position:absolute;
			font-size: 18px;
			left:237px;
			top:17px;
		}
		
		.start_game_button{
			position:absolute; 
			left:68px; 
			top: 320px !important; 
			width:300px;
		}
		
		.on_start_hidden{
			display:none;
		}
		
		#copy_existing_code_button_status,
		#copy_existing_code_button_login{
			position:relative; 
			top:3px; 
			left:6px; 
			cursor:pointer;
			width:25px;
		}

		input[ type='text' ]{
			padding:10px;
			width:310px;
			font-size: 20px;
			text-align: center;
			border-radius: 5px;
			border:none;
			margin:0 auto;
			margin-top:0px;
			margin-bottom:6px;
			border:solid 2px #003280;
		}
		
		#generate_code_input{
			width:260px;
		}
	
	
	
.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 5s;
  cursor: move;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  
  0% { transform: rotate(0deg); }
  2% { transform: rotate(-8deg); }
  4% { transform: rotate(8deg); }
  6% { transform: rotate(-6deg); }
  8% { transform: rotate(6deg); }
  10% { transform: rotate(-4deg); }
  12% { transform: rotate(4deg); }
  14% { transform: rotate(0deg); }

}

/* width */
::-webkit-scrollbar {
  width: 5px;
}
 
/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 1px grey;*/
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}
 
#trainings_center_content{
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
  scrollbar-width: thin;
}

a{
	text-decoration: none;
}

#game_title{
	margin-top:50px; 
	margin-bottom:30px; 
	opacity:0;
	width:100%;
}


.hide_burger{
	width:30px; 
	height:30px; 
	position:absolute; 
	right:15px; 
	top:15px; 
	cursor:pointer;
}

#decker{
	z-index:100000000000000000000000000; 
	touch-action: none; 
	overflow:hidden; 
	position:fixed;
	 -webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border:solid 0px red; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	pointer-events: auto; 
	background:rgba(122,11,255,0); 
	display:none;
}


.confetti{
	z-index:10000000000000000000; 
	position:absolute; 
	border:solid 0px red; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:calc( 100% - 90px ); 
	pointer-events: none;
}