:root {
	--attributeBgColor:#ffffff;
	--attributeFontColor:#202C42;
}
body,
html {
	position: fixed;
	ovewrflow:hidden;
	touch-action:none;width: 100%;
	height: 100%;margin:0;padding:0;
	overscroll-behavior: none;
	font-family: 'Nunito';
	background-color: #131a27;
}


#gameWrapper {
	height: 100vh;
	overflow-y: hidden;
	width: 100%;
	height: 100%;overscroll-behavior: none;
}

.loadingScreens { position:absolute;left:0;top:0;bottom:0;right:0;z-index:1;transition:0.5s all ease-in-out 0s;opacity:1; }
.loadingScreens > div { position:absolute;left:0;top:0;bottom:0;right:0;background-color:#000;transition:0.5s all ease-in-out 0s;  }
.loadingScreens > div > div.img { width:200px;position:absolute;top:50%;left:50%; }
.loadingScreens > div > div.img:after { content:" ";padding-bottom:100%;display:block; }
.loadingScreens > div > div.txt  { position:absolute;left:0;font-weight:bold;right:0px;color:#fff;text-align:center;opacity:0;transition:1.5s all ease-in-out 0s;  }
.loadingScreens > div.main > div.txt { bottom:50px;}
.loadingScreens > div.main > div.img { transition:1.5s all ease-in-out 0s;background:url(../images/logoWhite.svg) center center no-repeat transparent;background-size:100%;transform:translateX(-50%) translateY(-50%) rotate(90deg) scale(0.5);opacity:0;  }
.loadingScreens > div.main.in > div.img { transform:translateX(-50%) translateY(-50%) rotate(0deg) scale(1);opacity:1; }
.loadingScreens > div.sponsor > div.txt { top:50px;}
.loadingScreens > div.sponsor > div.img { transition:1.5s all ease-in-out 0s;background:url(../images/logoWhite.svg) center center no-repeat transparent;background-size:100%;transform:translateX(-50%) translateY(-50%) scale(0.5);opacity:0;  }
.loadingScreens > div.sponsor.in > div.img { transform:translateX(-50%) translateY(-50%) scale(1);opacity:1; }
.loadingScreens > div.in > div.txt  { opacity:1;}
.loadingScreens > div.out  { opacity:0; }
.loadingScreens > div.startScreen { background-color:#000;opacity:1; } 
.loadingScreens > div.startScreen > div  { opacity:0;position:absolute;left:0;top:0;bottom:0;right:0;background-color:#000;transition:0.5s all ease-in-out 0s;background-size:cover;}
.loadingScreens > div.startScreen.in > div { opacity:1; }
.loadingScreens > div.startScreen.in .inWrap { justify-content: center;position:absolute;width:300px;left:50%;top:0;bottom:0;transform:translateX(-50%);display:flex;align-items:center;} 
.loadingScreens > div.startScreen.in .inWrap img { width:100%;margin-bottom:30px; }
.loadingScreens > div.startScreen .title { text-align:center;color: #fff;font-size: 32px;font-weight: bold; }
.loadingScreens > div.hidden { display:none; }
.loadingScreens:not(.visible) { display:none; }
.loadingScreens.hide { }
.loadingScreens.out  { opacity:0; }

.aktionsLoader  { background-color:#000;position:absolute;left:0;top:0;bottom:0;right:0;z-index:999;transition:0.25s opacity ease-in-out 0s;opacity:0;transform:translateY(-100%); }
.aktionsLoader.in { opacity:1;transform:translateY(0%); }
.aktionsLoader.out { opacity:0; }


.pages {  width:100%;position:absolute;top:0;bottom:110px;left:0px;right:0px;overflow:hidden; }
.pages > .pagesWrapper { width:400%;height:100%;position:absolute;display:flex;left:0;top:0;right:0;transition:0.5s all ease-in-out 0s; }
.pages[page="1"] > .pagesWrapper { transform:translateX(0%); }
.pages[page="2"] > .pagesWrapper { transform:translateX(-25%); }
.pages[page="3"] > .pagesWrapper { transform:translateX(-50%); }
.pages[page="4"] > .pagesWrapper { transform:translateX(-75%); }
.pages > .pagesWrapper > .page { position:relative;width:calc(100% / 4);height:100%;flex-shrink:0; }
.pages > .pagesWrapper > .page .scrollContainer { position:absolute;bottom:0;top:0;left:0;right:0;overscroll-behavior:smooth;overflow: auto; -webkit-overflow-scrolling: touch; }
.pages > .pagesWrapper > .page .scrollContainer > div { padding:20px; }
.pages > .pagesWrapper > .page .scrollContainer { background-color: #131a27; }
#gameWrapper[noplayercreation="1"] .pages { bottom:70px; }
#gameWrapper[pages="1"] .pages,
#gameWrapper[pages="0"] .pages { bottom:0px; }


[noQRScan="1"] .pages > .pagesWrapper > .page:nth-child(1),
[noInventoryPage="1"] .pages > .pagesWrapper > .page:nth-child(2),
[noHistoryPage="1"] .pages > .pagesWrapper > .page:nth-child(3),
[noInfoPage="1"] .pages > .pagesWrapper > .page:nth-child(4) { display:none; }

.whatHappendPopUp { position: absolute;top: 0;bottom: 0;right: 0;left: 0;display: flex;text-align:center;align-items: center;justify-content: center;background-color: #131a27;padding: 20px;color: #fff;z-index: 3;display:none; }
.whatHappendPopUp .btn {background-color:#202C42; }
.whatHappendPopUp.show { display:flex; }
.whatHappendPopUp > div { transition:0.5s all ease-in-out 0s;opacity:0; }
.whatHappendPopUp.in > div { opacity:1; }

.inventar h1 { color:#fff;margin-top:0px; }
.inventarListe { color:#fff;list-style:none;margin:0;padding:0; }
.inventarListe li { background-color:rgba(255,255,255,0.05);display:flex;align-items:center;padding:10px;border-radius:5px;margin-bottom:10px; }
.inventarListe li .img { padding:5px;width:60px;height:60px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:5px;overflow:hidden;margin-right:10px; }
.inventarListe li .img img { width:100%; }
.inventarListe li .title { font-weight:bold; }
.inventarListe li .attribute { display:block; }
.inventarListe li .ek { margin-left:auto;font-weight:bold;color:#2edaff; }
.inventarListe li[equiped="equiped"] { border:3px solid #2edaff;}

.characterAttributes ul { list-style:none; color:#fff;list-style:none;margin:0;padding:0; }
.characterAttributes li { background-color:rgba(255,255,255,0.05);align-items:center;display:flex;padding:10px;border-radius:5px;margin-bottom:10px; }
.characterAttributes li div:nth-child(1) { font-weight:bold; }
.characterAttributes li div:nth-child(2) { margin-left:auto;text-align:right;font-weight:bold; }
.characterAttributes li div span { font-size:12px;display:block;font-weight:100; }
.characterAttributes li div span[kind="add"] {color:#56b6a2; }
.characterAttributes li div span[kind="sub"] {color:#ff74a5; }

.ereignisklassen ul { list-style:none; color:#fff;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;margin:0 -10px;align-items: stretch; }
.ereignisklassen li { background-color:rgba(255,255,255,0.05);align-items:center;padding:10px;border-radius:5px;margin:0 10px;width:calc(50% - 20px);margin-bottom:10px; }
.ereignisklassen li.none { display:flex;align-items:center;border:3px dashed rgba(255,255,255,0.15);text-align:center;font-weight:bold;color:rgba(255,255,255,0.15);font-weight:italic; }
.ereignisklassen li:not(.none) { background-color:rgba(255,255,255,0.05);display:flex;align-items:center;padding:10px;border-radius:5px;margin-bottom:10px; }
.ereignisklassen li:not(.none) .img { padding:5px;width:60px;height:60px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:5px;overflow:hidden;margin-right:10px; }
.ereignisklassen li:not(.none) .img img { width:100%; }
.ereignisklassen li:not(.none) .title { font-weight:bold; }
.ereignisklassen li:not(.none) .attribute { display:block; }
.ereignisklassen li:not(.none) .ek { margin-left:auto;font-weight:bold;color:#2edaff; }
.ereignisklassen li:not(.none) { box-shadow:0px 0px 3px rgba(46,218,255,0.6) inset;}
@media only screen and (max-width:600px) {
	.ereignisklassen li { width:calc(100% - 20px); }
}


.globalToplist { overflow-y:auto;padding:0px 10px;border-radius:10px;margin-bottom: 20px;max-height: 500px; }
.globalToplist ul { margin:0;padding:0;counter-reset: list-number; }
.globalToplist ul li { display:flex;margin:0;padding:10px 0 ;border-bottom:1px solid rgba(255,255,255,0.2); }
.globalToplist ul li:last-child { border-bottom:0px; }
.globalToplist ul li:before {display:inline-block;counter-increment: list-number;display:inline-block;padding-right:10px;font-weight:bold;content: counter(list-number); }
.globalToplist ul li span { min-width: 140px;display:inline-block;text-align:right;margin-left:auto;font-style:italic; }
.globalToplist ul li:nth-child(1) { font-size:20px;font-weight: bold; }
#gameWrapper:not([globalLeaderboard='1']) .globalToplist { display:none; }
.globalToplist .tl > span { margin-right:10px;margin-bottom:10px;padding-bottom: 10px;display: inline-block;border-bottom: 3px solid transparent;cursor:pointer; }
.globalToplist .tl:not([list='A']) .lists .listA ,
.globalToplist .tl:not([list='B']) .lists .listB  { display:none; } 
.globalToplist .tl[list="B"] [li="B"],
.globalToplist .tl[list="A"] [li="A"] { font-weight:bold;border-bottom: 3px solid #fff; }


.highscoreError span { padding-bottom:20px;color: rgba(217,99,140,0.8) ;display: block; }

.toplist { color:#fff; }
.toplist h1 { margin-top:0px; }
.toplist ul { list-style:none;margin:0;padding:0; }
.toplist .totals ul {  counter-reset: list-number;position:relative;display:flex;width:100%;margin:0 0px;margin-bottom:10px;flex-wrap:wrap; }
.toplist .totals ul li::before { counter-increment: list-number;left: 12px;content: counter(list-number);position: absolute;top: 50%;transform: translateY(-50%);font-size: 39px;font-weight: 900; }
.toplist .totals ul li { box-sizing: border-box;margin: 0 5px;display:flex;width:100%;position:relative;padding:20px;padding-left:50px;border-radius:5px;background-color:rgba(255,255,255,0.05);margin-bottom:10px; }
.toplist .totals ul li .points { margin-left:auto; }
.toplist .totals ul:not(.withCounter) li::before { display:none; }
.toplist .totals ul:not(.withCounter) li { padding-left:20px; }
.toplist .totals ul li.current { background-color:#fff;color:#131a27;}
[noplayercreation="1"] .toplist h1.pktfl,
[noplayercreation="1"] .toplist h1 b,
[noplayercreation="1"] .toplist .totals ul li { margin-left:0px; }
[noplayercreation="1"] .toplist .totals ul li .name { display:none; }
[noplayercreation="1"] .toplist .totals ul li::before { content:"Du";display:block;position:relative;font-size: 15px;}
[noplayercreation="1"] .toplist h1 b { display:none; }

.toplist .history ul li {  margin: 0 5px;position:relative;padding:20px;border-radius:5px;background-color:rgba(255,255,255,0.05);margin-bottom:2px; }
.toplist .history ul li ul li {  background-color:rgba(255,255,255,0); }
.toplist .history ul li .diaglogs { margin: 0 -5px;position:relative;padding:10px;border-radius:5px;background-color:rgba(255,255,255,0.05);margin-top:10px; } 
.toplist .history ul li span  { font-weight:bold; }
.toplist .history ul li[type="answer"] font.w { color:#ff74a5;font-weight:bold; }
.toplist .history ul li[type="answer"]  font.r { color:#56b6a2;font-weight:bold; }
.toplist .history ul li .diaglogs .points { font-weight:bold; }
.toplist .history ul li .pnts { color:#e17c47;font-weight:bold; }
.toplist .history ul li .itm { color:#2edaff;font-weight:bold; }
.toplist .history ul li ul li { padding:0px;margin:0px;margin-bottom:5px; } 
.toplist .history ul li ul { margin-top:5px; }
.toplist .history ul li[type="ereignis"]  { background-color:transparent;border-radius:0px;padding:10px 0 ;font-weight:bold; border-bottom:0px solid #fff;border-radius:5px;text-align:center;background-color:rgb(68,166,198,0.3) }
.toplist .history ul li .who { font-weight:bold;}

.buttonContainer { max-width:200px;margin:0 auto;display: flex;justify-content: center;padding-top:50px;flex-wrap:wrap; }
.buttonContainer .ereignisbutton { cursor:pointer;position:relative;display:flex;padding:10px 20px;margin:10px 5px;margin-top:0px;border-radius:5px;color:#fff;font-weight:bold;align-items:center;justify-content: center;background-color:#131a27;border-top: 3px solid #202C42;box-shadow: 0px 3px 1px #000; } 
.buttonContainer .ereignisbutton.active-helper::after { content:" ";display:block;position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.2);border-radius:50%; }
[mode="cam"] .buttonContainer { display:none; }

.scanWrap { padding:10px;box-sizing:border-box;position:absolute;z-index:1;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#131a27;}
#reader { opacity:0;transform:translateX(-50%) translateY(-50%);top:50%;left:50%;positon:absolute;border:10px solid red;border-radius:10px;border: 5px solid #202C42;border-radius:10px;overflow:hidden; transition:0.2s all linear 0s;
background: rgb(230,240,163); }
#reader.in {  opacity:1; }

#userChallangeQr { display:none; }

[mode="buttons"] #reader { display:none; }

.buttonRow { left:0px;right:0px;bottom:20px;display:flex;justify-content:center;position:absolute;z-index:2; }
.buttonRow > div { position:relative;padding:0px;background-color:rgba(255,255,255,0.5);border-radius:5px;margin:0 3px;cursor:pointer;height:50px;border-radius:10px;background-color:#131a27;border-top: 5px solid #202C42;box-shadow: 0px 3px 1px #000;display:flex;align-items:center;color:#fff;padding-left:50px;padding-right:20px;  }
.buttonRow > div font { font-weight:bold;color:#fff; }
.buttonRow > div .img { position:absolute;top:0;left:10px;width:40px;bottom:0;z-index:1; }
.buttonRow > div.active-helper {background-color:rgba(255,255,255,0.8);  }
#gameWrapper[mode="cam"] [action="useCamera"],
#gameWrapper[mode="buttons"] [action="noCamera"] { display:none; }
#gameWrapper [action="useCamera"] .img { background:url(../images/game_camWhite.svg) center center no-repeat transparent;background-size:50%;  }
#gameWrapper [action="noCamera"] .img  { background:url(../images/game_buttonsWhite.svg) center center no-repeat transparent;background-size:50%;  }

.footer { position:absolute;left:0;right:0;bottom:40px;height:70px;background-color:#131a27;border-top: 5px solid #202C42; }
.footer .footerWrapper { position:relative;width:100%;display:flex;height:100%;cursor:pointer; }
.footer .footerWrapper > div { width: 100%;height:100%;display:flex;align-items:center;justify-content: center;position:relative; }
.footer .footerWrapper > div.active-helper {background-color:rgba(0,0,0,0.5);  }
.footer .footerWrapper > div .img { opacity:0.8;width:40px;height:40px;left:50%;top:50%;position:absolute;transform:translateX(-50%) translateY(-50%); }
.footer .footerWrapper > div font { display:none; }
.footer .footerWrapper > div:nth-child(1) .img {background:url(../images/game_scanWhite.svg) center center no-repeat transparent;background-size:contain;  }
.footer .footerWrapper > div:nth-child(3) .img {background:url(../images/game_toplistWhite.svg) center center no-repeat transparent;background-size:contain;  }
.footer .footerWrapper > div:nth-child(2) .img {background:url(../images/game_bagWhite.svg) center center no-repeat transparent;background-size:contain;  }
.footer .footerWrapper > div:nth-child(4) .img {background:url(../images/about.svg) center center no-repeat transparent;background-size:contain;  }

.footer[page="1"] .footerWrapper > div:nth-child(1) { background-color:#101621; }
.footer[page="2"] .footerWrapper > div:nth-child(2) { background-color:#101621; }
.footer[page="3"] .footerWrapper > div:nth-child(3) { background-color:#101621; }
.footer[page="4"] .footerWrapper > div:nth-child(4) { background-color:#101621; }

[noQRScan="1"] .footer .footerWrapper > div:nth-child(1) ,
[noInventoryPage="1"] .footer .footerWrapper > div:nth-child(2) ,
[noHistoryPage="1"] .footer .footerWrapper > div:nth-child(3),
[noInfoPage="1"] .footer .footerWrapper > div:nth-child(4) { display:none; }

#gameWrapper[noplayercreation="1"] .footer { bottom:0px; }
#gameWrapper[pages="1"] .footer,
#gameWrapper[pages="0"] .footer { display:none; }


.subFooter { position:absolute;left:0;right:0;bottom:0;height:40px;background-color:#0a0e15;border-top: 0px solid #202C42; }
.subFooter .rechtliches { position: absolute;top:0px;right: 0px;width: 40px;height: 40px;background: url(../images/game_rechtliches.svg) center center no-repeat rgba(0,0,0,0.7);background-size: auto;background-size: 30%;border-radius:0%;cursor:pointer; }
.subFooter .rechtliches.rechtliches.active-helper {background-color:rgba(0,0,0,0.8);  }
.subFooter .wrap { display:flex;position:absolute;left:0;top:0;bottom:0;right:40px; }
.subFooter .wrap .current { height:40px;margin-left:auto;display:flex;align-items:center;white-space:nowrap;padding-right:10px;padding-left:10px;color:#fff; }
.subFooter .wrap .current font { font-weight:bold; }
#gameWrapper[noplayercreation="1"] .subFooter { display:none; }


ul.players { margin:0;padding:0;display:flex;list-style:none;}
ul.players li { cursor:pointer;min-width:40px;height:40px;padding-left:10px;padding-right:10px;white-space:nowrap;color:#fff;display:flex;align-items:center;box-sizing:border-box;position:relative;}
ul.players li:not(.new) { background:url(../images/game_player.svg) center center no-repeat transparent;background-size:40%; }
ul.players li.new font { display:none;}
ul.players li.new { width:40px;background:url(../images/game_plus.svg) center center no-repeat transparent;background-size:40%;  }
ul.players[activeplayer="1"] li[player="1"] { background-color:#56b6a2; }
ul.players[activeplayer="2"] li[player="2"] { background-color:#e17c47; }
ul.players[activeplayer="3"] li[player="3"] { background-color:#aa3772; }
ul.players[activeplayer="4"] li[player="4"] { background-color:#6c4d7a; }
ul.players[activeplayer="5"] li[player="5"] { background-color:#6ca958; }
ul.players li.active-helper::after { content:" ";display:block;position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.2);}

#gameWrapper[player="1"] .playerfontcolor { color:#56b6a2; }
#gameWrapper[player="2"] .playerfontcolor { color:#e17c47; }
#gameWrapper[player="3"] .playerfontcolor { color:#aa3772; }
#gameWrapper[player="4"] .playerfontcolor { color:#6c4d7a; }
#gameWrapper[player="5"] .playerfontcolor { color:#6ca958; }

#gameWrapper[player="1"] .playerbgcolor { background-color:#56b6a2; }
#gameWrapper[player="2"] .playerbgcolor { background-color:#e17c47; }
#gameWrapper[player="3"] .playerbgcolor { background-color:#aa3772; }
#gameWrapper[player="4"] .playerbgcolor { background-color:#6c4d7a; }
#gameWrapper[player="5"] .playerbgcolor { background-color:#6ca958; }

.aboutTheGame { color:#fff;text-align:center; }
.aboutTheGame .text { text-align:left;max-width:650px;margin:0 auto; }
.aboutTheGame .text div { font-weight:bold; }
.aboutTheGame .text p { border-radius:5px;margin:0px;padding:10px;background-color:rgba(0,0,0,0);margin: 0 -10px;margin-top: 10px;}
.aboutTheGame img { max-width:300px;width:100%;margin:0 autp; }
.aboutTheGame .scanNow { cursor:pointer;display:flex;padding:10px 20px;margin:0 -10px;margin-bottom:20px;background-color:#202C42;box-shadow: 0px 3px 1px #000;margin-top: 10px;align-items:center;border-radius:5px;cursor:pointer;  }
.aboutTheGame .scanNow .scannen { margin-left:auto;width:30px;height:30px;background: url(../images/game_scanWhite.svg) center center no-repeat transparent;background-size: auto;background-size: contain; }
.aboutTheGame .scanNow:hover { opacity:0.8; }

.popUp { height:100%;width:100%;position:fixed;display:flex;align-items:center;background-color:rgba(0,0,0,0.6);overscroll-behavior:smooth;-webkit-overflow-scrolling: touch;overflow-y: scroll; transition:0.2s all linear 0s;opacity:1; } 
.popUp .inner { max-width:600px;width:100%;margin:0 auto;transition:0.2s all linear 0s; transform:scale(0.7);opacity:0; }
.popUp .inner .in { padding:40px 20px;position:relative; }
.popUp .inner .in .cnt { background-color:#202C42;border-radius:10px;padding:50px 20px ;color:#fff; }
.popUp .inner .in .close { position:absolute;width:50px;height:50px;cursor:pointer;background:url(../images/game_close.svg) center center no-repeat #131a27;background-size:40%; border-radius:50%;right:10px;top:30px; } 
.popUp:not(.visible) { display:none; }
.popUp:not(.show) { opacity:0; }


.popUp .inner.in { transform:scale(1);opacity:1; }

.popUp .inner .in .cnt ul { list-style:none;margin:0;padding:0; }
.popUp .inner .in .cnt ul li:nth-child(1) { border-top:1px solid rgba(255,255,255,0.3); }
.popUp .inner .in .cnt ul li { cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.3); }
.popUp .inner .in .cnt ul li a.active-helper { background-color:rgba(0,0,0,0.1); }
.popUp .inner .in .cnt ul li a { color:#fff;text-decoration:none;padding:20px 0px;display:block;font-weight:bold; }
.popUp:not([page="rechtliches"]) [page="rechtliches"],
.popUp:not([page="entredHigscore"]) [page="entredHigscore"],

.popUp:not([page="setPlayerName"]) [page="setPlayerName"],
.popUp:not([page="updatePlayer"]) [page="updatePlayer"],
.popUp:not([page="deletePlayer"]) [page="deletePlayer"],
.popUp:not([page="switchedPlayer"]) [page="switchedPlayer"],
.popUp:not([page="reachedEndOfGame"]) [page="reachedEndOfGame"],

.popUp:not([page="allreadyEnded"]) [page="allreadyEnded"],

.popUp:not([page="continueOrNewGame"]) [page="continueOrNewGame"],
.popUp:not([page="newUser"]) [page="newUser"],
.popUp[page="switchedPlayer"] .close,
.popUp[page="reachedEndOfGame"] .close,
.popUp[page="allreadyEnded"] .close,


.popUp[page="entredHigscore"] .close,

.popUp[page="setPlayerName"] .close,
.popUp[page="continueOrNewGame"] .close { display:none; }



#gameWrapper .popUp:not([page="reachedEndOfGame"]) [page="reachedEndOfGame"] .enterGlobalHighscore,
#gameWrapper:not([globalLeaderboard='1']) .popUp [page="reachedEndOfGame"] .enterGlobalHighscore { display:none; }



#gameWrapper[noplayercreation="1"] [page="reachedEndOfGame"] b { display:none; }


.btn { position: relative;padding: 0px;text-align:center;width:auto;font-weight:bold;background-color: rgba(255,255,255,0.5);border-radius: 5px;cursor: pointer;height: 50px;border-radius: 10px;background-color: #131a27;box-shadow: 0px 3px 1px #000;display: flex;justify-content:center;width:160px;margin:0 auto;align-items: center;color: #fff;padding-left: 20px;padding-right: 20px;margin-bottom:10px;}
.btn.active-helper::after { content:" ";display:block;position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.2);}
.btn.red { background-color:#ff74a5;box-shadow: 0px 3px 1px #703349; }

.popUp [page="newUser"],
.popUp [page="deletePlayer"],
.popUp [page="updatePlayer"],
.popUp [page="switchedPlayer"],
.popUp [page="reachedEndOfGame"],
.popUp [page="allreadyEnded"],

.popUp [page="continueOrNewGame"],
.popUp [page="entredHigscore"],

.popUp [page="setPlayerName"] { text-align:center; }
.popUp select, 
.popUp input { width: 100%;margin-bottom:20px;padding:10px;font-size:20px;border-radius:10px;border:0px;font-weight:bold;font-family:inherit;text-align:center;outline:0; }
.popUp select.error,
.popUp input.error { box-shadow:0px 0px 0px 4px rgba(217,99,140,0.8) inset; }

.popUp h1 { margin-top:0px;font-family: 'Bubblegum Sans'; }

.gameOverlay { position:absolute;left:0;top:0;right:0;bottom:0;z-index:9;background-position:center center;background-size:cover;  }
.gameOverlay:not(.show) { display:none; }
.gameOverlay:not([kind="quiz"]) .quiz ,
.gameOverlay:not([kind="ereignis"]) .ereignis,
.gameOverlay:not([kind="fight"]) .fight { display:none; }

.gameOverlay .quiz { position:absolute;left:0;top:0;right:0;bottom:0; }
.gameOverlay .quiz .person { position:absolute;right:0;bottom:25%;border:0px;left:0;top:0; }
.gameOverlay .quiz .person img { object-fit: contain;width: 90%;height: 90%;object-position: right bottom;position: absolute;right: 0;bottom: 0;}
.gameOverlay .quiz .person[stylepos="characterLeftFlipped"] img, 
.gameOverlay .quiz .person[stylepos="characterLeft"] img { object-position: left bottom;right: auto;right:none;left:0; }
.gameOverlay .quiz .person[stylepos="characterCenterFlipped"] img, 
.gameOverlay .quiz .person[stylepos="characterCenter"] img { object-position: center bottom;right:auto;right:none;left:50%;transform:translateX(-50%); }
.gameOverlay .quiz .person[stylepos="characterCenterFlipped"] img { transform:scaleX(-1) translateX(-50%); }
.gameOverlay .quiz .person[stylepos="characterRightFlipped"] img, 
.gameOverlay .quiz .person[stylepos="characterRight"] img {  object-position: right bottom;right: 0; }
.gameOverlay .quiz .person[stylepos="characterRightFlipped"] img { transform:scaleX(-1); }
.gameOverlay .quiz .person[stylepos="characterLeftFlipped"] img { transform:scaleX(-1); }


#gameWrapper[fixedimageratio="1"] .gameOverlay .quiz .person { bottom:unset;bottom:auto;background-size:cover;background-position:center center; }
#gameWrapper[fixedimageratio="1"] .gameOverlay .quiz .person::after { content:" ";padding-bottom:135%;display:block; }
#gameWrapper[fixedimageratio="1"] .gameOverlay .quiz .person img { display:none; }

#gameWrapper.wrongRatio::after { content:" ";display:block;background-color:#202C42;position:absolute;left:0;right:0;bottom:0;top:0;  }
#gameWrapper.wrongRatio::before { content:"Falsches Bildformat. Um dieses Spiel spielen zu können, müssen Sie es im Hochkantmodus ihres Smartphones aufrufen.";display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);color: #fff;text-align: center;
z-index: 1; }


.gameOverlay .quiz .speechbubble { position:absolute;left:0;right:0;bottom:0;height:25%;padding-bottom: 60px;background-color: rgba(0,0,0,1);box-sizing: border-box;}
.gameOverlay .quiz .speechbubble .weiter { position:absolute;right:10px;bottom:10px;padding: 0px;text-align: center;width: auto;font-weight: bold;background-color: rgba(255,255,255,0.5);border-radius: 5px;cursor: pointer;height: 40px;border-radius: 5px;background-color: #131a27;box-shadow: 0px 3px 1px #000;display: flex;justify-content: center;width: 80px;margin-left:auto;align-items: center;color: #fff;padding-left: 10px;padding-right:10px;margin-bottom:0px; }
.gameOverlay .quiz .speechbubble .weiter.hide { display:none; }
.gameOverlay .quiz .speechbubble .name { position:absolute;top:-20px;left:10px;padding:10px;color:#fff;font-weight:bold;background-color:rgb(0, 0, 0);border-radius: 8px;}
.gameOverlay .quiz .speechbubble .quizReciever .name { left:0px; }
.gameOverlay .quiz .speechbubble .txtReciever { padding: 20px;padding-bottom: 20px;color: #fff;position: absolute;left: 0px;right: 0px;bottom: 0px;min-height: 100%;box-sizing: border-box;padding-bottom: 59px;background-color: #000;} 
.gameOverlay .quiz .speechbubble:not([kind="question"]) .quizReciever { display:none; }
.gameOverlay .quiz .speechbubble:not([kind="txt"]) .txtReciever { display:none; }
.gameOverlay .quiz .speechbubble .quizReciever ul { display:flex;flex-wrap:wrap;align-items:stretch;color:#fff;list-style:none;padding:0;margin:0;text-align:center;width:100%;justify-content: center;padding-bottom: 10px; }
.gameOverlay .quiz .speechbubble .quizReciever ul li  { display:inline-block;padding: 0px;text-align: center;font-weight: bold;background-color: rgba(255,255,255,0.5);border-radius: 5px;cursor: pointer;height: 40px;border-radius: 5px;background-color: #131a27;box-shadow: 0px 3px 1px #000;display: flex;justify-content: center;align-items: center;color: #fff;padding-left: 10px;padding-right:10px;white-space: nowrap;
margin: 0 5px;margin-bottom:10px;
}
.gameOverlay .quiz .speechbubble .quizReciever ul li.hide { display:none; }
.gameOverlay .quiz .speechbubble .quizReciever {text-align: center;position: absolute;left: 10px;right: 10px;bottom: 0;min-height: 100%;background-color: #000;border-radius: 10px; }
.gameOverlay .quiz .speechbubble .quizReciever .question { text-align:center;font-size:20px;color:#fff;padding: 20px 10px; }
.gameOverlay .quiz .speechbubble[kind="question"] .weiter { display:none; }
.gameOverlay .quiz .speechbubble .quizReciever input[name='answer'] { margin-bottom:10px;border-radius:5px;max-width:280px;width:100%;padding:10px;border:3px solid #000;font-family:inherit;font-size:16px;font-weight:bold;text-align: center; }
.gameOverlay .quiz .speechbubble .quizReciever [action='cancelAnser'],
.gameOverlay .quiz .speechbubble .quizReciever [action='giveAnswer'] {
padding: 0px;text-align: center;width: auto;margin:0 3px;font-weight: bold;background-color: rgba(255,255,255,0.5);border-radius: 5px;cursor: pointer;height: 40px;border-radius: 5px;background-color: #131a27;box-shadow: 0px 3px 1px #000;display: flex;justify-content: center;width: 80px;align-items: center;color: #fff;padding-left: 10px;padding-right:10px;margin-bottom:0px;
}
.gameOverlay .quiz .speechbubble .quizReciever .answerBtns { display:flex;align-items:center;justify-content:center; }

.gameOverlay .quiz .speechbubble .quizReciever[kind="multiplechoice"] input[name='cancelAnser'],
.gameOverlay .quiz .speechbubble .quizReciever[kind="multiplechoice"] input[name='answer'],
.gameOverlay .quiz .speechbubble .quizReciever[kind="multiplechoice"] .answerBtns,
.gameOverlay .quiz .speechbubble .quizReciever[kind="numeric"] ul,
.gameOverlay .quiz .speechbubble .quizReciever[kind="numeric"] input[type='text'][name='answer'],
.gameOverlay .quiz .speechbubble .quizReciever[kind="text"] ul,
.gameOverlay .quiz .speechbubble .quizReciever[kind="text"] input[type='numeric'][name='answer'] { display:none; }

.gameOverlay .quiz .speechbubble[akzent="akzent1"] .name  { color:#8cff7f; }
.gameOverlay .quiz .speechbubble[akzent="akzent1"] .txtReciever { color:#dfffd8; }
.gameOverlay .quiz .speechbubble[akzent="akzent2"] .name  { color:#7fc0ff; }
.gameOverlay .quiz .speechbubble[akzent="akzent2"] .txtReciever { color:#d8efff; }
.gameOverlay .quiz .speechbubble[akzent="akzent3"] .name  { color:#ffbd7f; }
.gameOverlay .quiz .speechbubble[akzent="akzent3"] .txtReciever { color:#ffe8d7; }
.gameOverlay .quiz .speechbubble[akzent="akzent4"] .name  { color:#ff8b7f; }
.gameOverlay .quiz .speechbubble[akzent="akzent4"] .txtReciever { color:#ffd8d8; }
.gameOverlay .quiz .speechbubble[akzent="akzent5"] .name  { color:#ff7fea; }
.gameOverlay .quiz .speechbubble[akzent="akzent5"] .txtReciever { color:#ffd8fc; }

#gameWrapper[fixedimageratio="1"] .gameOverlay .quiz .speechbubble { height:calc(100vh - 100vw * 1.35);background-color:#000; }




.gameOverlay .fight  { position:absolute;left:0;top:0;right:0;bottom:0; }
.gameOverlay .fight .fightBg  {  position:absolute;left:0;top:0;right:0;bottom:0;background-position:center center;background-size:cover;  }
.gameOverlay .fight .gegner { position:absolute;right:0;bottom:0%;border:0px;left:0;top:0; }
.gameOverlay .fight .gegner img { object-fit: contain;top:20px;left:20px;right:20px;width:calc(100% - 40px);height:calc(100% - 90px);object-position: center center;position: absolute;right: 5%;bottom:70px;}
.gameOverlay .fight .name { text-align: center;font-size: 30px;position: absolute;left: 0;right: 0;top:30px;z-index: 1;font-weight: bold;color: #fff; text-shadow: #131a27 5px 0px 0px, #131a27 4.90033px 0.993347px 0px, #131a27 4.60531px 1.94709px 0px, #131a27 4.12668px 2.82321px 0px, #131a27 3.48353px 3.58678px 0px, #131a27 2.70151px 4.20736px 0px, #131a27 1.81179px 4.6602px 0px, #131a27 0.849836px 4.92725px 0px, #131a27 -0.145998px 4.99787px 0px, #131a27 -1.13601px 4.86924px 0px, #131a27 -2.08073px 4.54649px 0px, #131a27 -2.94251px 4.04248px 0px, #131a27 -3.68697px 3.37732px 0px, #131a27 -4.28444px 2.57751px 0px, #131a27 -4.71111px 1.67494px 0px, #131a27 -4.94996px 0.7056px 0px, #131a27 -4.99147px -0.291871px 0px, #131a27 -4.83399px -1.27771px 0px, #131a27 -4.48379px -2.2126px 0px, #131a27 -3.95484px -3.05929px 0px, #131a27 -3.26822px -3.78401px 0px, #131a27 -2.4513px -4.35788px 0px, #131a27 -1.53666px -4.75801px 0px, #131a27 -0.560763px -4.96846px 0px, #131a27 0.437495px -4.98082px 0px, #131a27 1.41831px -4.79462px 0px, #131a27 2.34258px -4.41727px 0px, #131a27 3.17346px -3.86382px 0px, #131a27 3.87783px -3.15633px 0px, #131a27 4.4276px -2.32301px 0px, #131a27 4.80085px -1.39708px 0px, #131a27 4.98271px -0.415447px 0px;
}

.gameOverlay .fight .difficulty { text-align: center;font-size: 19px;position: absolute;left: 0;right: 0;top:70px;z-index: 1;font-weight: bold;color: #fff; text-shadow: #131a27 3px 0px 0px, #131a27 2.83487px 0.981584px 0px, #131a27 2.35766px 1.85511px 0px, #131a27 1.62091px 2.52441px 0px, #131a27 0.705713px 2.91581px 0px, #131a27 -0.287171px 2.98622px 0px, #131a27 -1.24844px 2.72789px 0px, #131a27 -2.07227px 2.16926px 0px, #131a27 -2.66798px 1.37182px 0px, #131a27 -2.96998px 0.42336px 0px, #131a27 -2.94502px -0.571704px 0px, #131a27 -2.59586px -1.50383px 0px, #131a27 -1.96093px -2.27041px 0px, #131a27 -1.11013px -2.78704px 0px, #131a27 -0.137119px -2.99686px 0px, #131a27 0.850987px -2.87677px 0px, #131a27 1.74541px -2.43999px 0px, #131a27 2.44769px -1.73459px 0px, #131a27 2.88051px -0.838247px 0px;
}
.gameOverlay .fight .difficulty.schwer { color:#ff6e6e; }
.gameOverlay .fight .difficulty.normal { color:#71c5ff; }
.gameOverlay .fight .difficulty.leicht { color:#79ff92 ; }


.gameOverlay .fight .healthbar { max-width:350px;width:100%;border-radius:5px;height:20px;border:2px solid #131a27;background-color:#131a27;position:absolute;transform:translateX(-50%);left:50%;z-index:9;top:110px; }
.gameOverlay .fight .healthbar > div { transition:0.2s all linear 0s;
background: rgb(230,240,163);
background: -moz-linear-gradient(top, rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 69%, rgba(219,240,67,1) 100%);
background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 69%,rgba(219,240,67,1) 100%);
background: linear-gradient(to bottom, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 69%,rgba(219,240,67,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
position:absolute;left:0;top:0;bottom:0;
}
.gameOverlay .fight .yourHealthbar {  max-width:350px;width:100%;border-radius:5px;height:20px;border:2px solid #131a27;background-color:#131a27;position:absolute;transform:translateX(-50%);left:50%;z-index:9;bottom:20px; }
.gameOverlay .fight .yourHealthbar > div { transition:0.2s all linear 0s;
background: rgb(230,240,163);
background: -moz-linear-gradient(top, rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 69%, rgba(219,240,67,1) 100%);
background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 69%,rgba(219,240,67,1) 100%);
background: linear-gradient(to bottom, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 69%,rgba(219,240,67,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
position:absolute;left:0;top:0;bottom:0;
}
.gameOverlay .fight .bt { position:absolute;bottom:0px;left:0;right:0;padding:30px;text-align:center;display:flex;align-items:center;justify-content: center; }
.gameOverlay .fight .bt [action='run'],
.gameOverlay .fight .bt [action='fight'] { display:inline-block;padding: 0px;text-align: center;width: auto;font-weight: bold;background-color: rgba(255,255,255,0.5);border-radius: 5px;cursor: pointer;height: 40px;border-radius: 5px;background-color: #131a27;box-shadow: 0px 3px 1px #000;display: flex;justify-content: center;margin:0 10px;width: 80px;align-items: center;color: #fff;padding-left: 10px;padding-right:10px;margin-bottom:0px; }
.gameOverlay .fight:not(.fighting) .yourHealthbar,
.gameOverlay .fight:not(.fighting) .healthbar { display:none; }
.gameOverlay .fight.fighting .bt { display:none; }
.gameOverlay .fight .damage { opacity:0.3;width:40%;height:40%;position:absolute;top:50%;left:50%; }
.gameOverlay .fight .damage > div { position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/damage.svg) center center no-repeat transparent;transform:scale(5);transition:0.2s all linear 0s; }
.gameOverlay .fight .damage.dmg2 { transform:translateX(-64%) translateY(-50%); }
.gameOverlay .fight .damage.dmg3 { transform:translateX(-25%) translateY(-100%); } 
.gameOverlay .fight .damage.dmg1 { transform:translateX(-25%) translateY(-10%); } 
.gameOverlay .fight .damage.dmg4 { transform:translateX(-50%) translateY(-50%); } 
.gameOverlay .fight .damage.dmg4 > div { transform:scale(0);opacity:1; } 
.gameOverlay .fight .damage.hide { opacity:0; }
.gameOverlay .fight .damage.in > div { transform:scale(1); }
.gameOverlay .fight .damage.dmg4.in > div { transform:scale(10);opacity:0; }
.gameOverlay .fight .gegner.shake img { animation: shake 0.7s;  animation-iteration-count: infinite;}
.gameOverlay .fight .spechbubble {position: absolute;bottom: 100px;left: 0;right: 0;padding:0px;text-align: center;display: flex;align-items: center;justify-content: center;display:flex;}
.gameOverlay .fight .spechbubble > div { position:relative;text-align:center;justify-content:center;display:flex;align-items:center;min-height:30px;color:#fff;max-width:350px;width:100%;padding:20px;border-radius:10px; }
.gameOverlay .fight .spechbubble > div > div { position:relative;z-index:1; }
.gameOverlay .fight .spechbubble:not(.show) { display:none; }
.gameOverlay .fight .spechbubble > div > span { opacity:0.8;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000; }
.gameOverlay .fight .spechbubble > div > span:after { content: '';position: absolute;display: block;width: 0;z-index: 1;border-style: solid;border-width: 0 0 20px 20px;border-color: transparent transparent  #000000 transparent;top: -20px;left: 50px;margin-left: -10px;}
.gameOverlay .fight.fighting .spechbubble { display:none; } 
.gameOverlay .fight .rstlTxt { padding: 20px; transition:0.2s all linear 0s;transform:scale(0.5);opacity:0;position:absolute;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align: center; } 
.gameOverlay .fight .rstlTxt font { color:#fff;font-size:90;font-weight:900;text-transform:uppercase;display:block;text-shadow: #131a27 5px 0px 0px, #131a27 4.90033px 0.993347px 0px, #131a27 4.60531px 1.94709px 0px, #131a27 4.12668px 2.82321px 0px, #131a27 3.48353px 3.58678px 0px, #131a27 2.70151px 4.20736px 0px, #131a27 1.81179px 4.6602px 0px, #131a27 0.849836px 4.92725px 0px, #131a27 -0.145998px 4.99787px 0px, #131a27 -1.13601px 4.86924px 0px, #131a27 -2.08073px 4.54649px 0px, #131a27 -2.94251px 4.04248px 0px, #131a27 -3.68697px 3.37732px 0px, #131a27 -4.28444px 2.57751px 0px, #131a27 -4.71111px 1.67494px 0px, #131a27 -4.94996px 0.7056px 0px, #131a27 -4.99147px -0.291871px 0px, #131a27 -4.83399px -1.27771px 0px, #131a27 -4.48379px -2.2126px 0px, #131a27 -3.95484px -3.05929px 0px, #131a27 -3.26822px -3.78401px 0px, #131a27 -2.4513px -4.35788px 0px, #131a27 -1.53666px -4.75801px 0px, #131a27 -0.560763px -4.96846px 0px, #131a27 0.437495px -4.98082px 0px, #131a27 1.41831px -4.79462px 0px, #131a27 2.34258px -4.41727px 0px, #131a27 3.17346px -3.86382px 0px, #131a27 3.87783px -3.15633px 0px, #131a27 4.4276px -2.32301px 0px, #131a27 4.80085px -1.39708px 0px, #131a27 4.98271px -0.415447px 0px; }
.gameOverlay .fight .rstlTxt.in { transform:scale(1);opacity:1; }
.gameOverlay .fight .rstlTxt[state="victory"] font:nth-child(2) { display:none; }
.gameOverlay .fight .rstlTxt[state="lose"] font:nth-child(1) { display:none; }

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}





.gameOverlay .ereignis { position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
	background-color:#202C42;
}
.gameOverlay .ereignis::before { content:" ";position:absolute;left:0;right:0;bottom:0;top:0;display:block; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0+100 */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	z-index:1;
}
.gameOverlay .ereignis::after { 
	opacity: 0.03;content:" ";position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);display:block; background:url(../images/radialBg.svg) center center no-repeat transparent;background-size:cover;z-index:2; 
	-webkit-animation-name: rotate;
	-webkit-animation-duration:12s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration:12s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
} 
@media (orientation: landscape) {
	.gameOverlay .ereignis::after { width:200vw;height:200vw; }
}
@media (orientation: portrait) {
	.gameOverlay .ereignis::after { width:200vh;height:200vh; }
}
@-webkit-keyframes rotate {
  from {-webkit-transform:translateX(-50%) translateY(-50%) rotate(0deg);}
  to {  -webkit-transform:translateX(-50%) translateY(-50%) rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:translateX(-50%) translateY(-50%) rotate(0deg);}
  to {  -moz-transform:translateX(-50%) translateY(-50%) rotate(360deg);}
}
@media only screen and (max-width:390px) {
	.gameOverlay .fight .rstlTxt font { font-size:55px; }
	.gameOverlay .fight .spechbubble { padding:0 20px; }
	.gameOverlay .fight .healthbar,
	.gameOverlay .fight .yourHealthbar { width:unset;left:20px;right:20px;transform:translateX(0%); }
}




.gameOverlay .ereignis .title { position:absolute;top:-30px;z-index:3;right:0;left:0;width:100%; font-weight:bold;color:#2edaff;text-align:center; text-shadow: #131a27 5px 0px 0px, #131a27 4.90033px 0.993347px 0px, #131a27 4.60531px 1.94709px 0px, #131a27 4.12668px 2.82321px 0px, #131a27 3.48353px 3.58678px 0px, #131a27 2.70151px 4.20736px 0px, #131a27 1.81179px 4.6602px 0px, #131a27 0.849836px 4.92725px 0px, #131a27 -0.145998px 4.99787px 0px, #131a27 -1.13601px 4.86924px 0px, #131a27 -2.08073px 4.54649px 0px, #131a27 -2.94251px 4.04248px 0px, #131a27 -3.68697px 3.37732px 0px, #131a27 -4.28444px 2.57751px 0px, #131a27 -4.71111px 1.67494px 0px, #131a27 -4.94996px 0.7056px 0px, #131a27 -4.99147px -0.291871px 0px, #131a27 -4.83399px -1.27771px 0px, #131a27 -4.48379px -2.2126px 0px, #131a27 -3.95484px -3.05929px 0px, #131a27 -3.26822px -3.78401px 0px, #131a27 -2.4513px -4.35788px 0px, #131a27 -1.53666px -4.75801px 0px, #131a27 -0.560763px -4.96846px 0px, #131a27 0.437495px -4.98082px 0px, #131a27 1.41831px -4.79462px 0px, #131a27 2.34258px -4.41727px 0px, #131a27 3.17346px -3.86382px 0px, #131a27 3.87783px -3.15633px 0px, #131a27 4.4276px -2.32301px 0px, #131a27 4.80085px -1.39708px 0px, #131a27 4.98271px -0.415447px 0px;}
.gameOverlay .ereignis .title strong { display:block;font-size:35px;color:#fff; text-shadow: #131a27 5px 0px 0px, #131a27 4.90033px 0.993347px 0px, #131a27 4.60531px 1.94709px 0px, #131a27 4.12668px 2.82321px 0px, #131a27 3.48353px 3.58678px 0px, #131a27 2.70151px 4.20736px 0px, #131a27 1.81179px 4.6602px 0px, #131a27 0.849836px 4.92725px 0px, #131a27 -0.145998px 4.99787px 0px, #131a27 -1.13601px 4.86924px 0px, #131a27 -2.08073px 4.54649px 0px, #131a27 -2.94251px 4.04248px 0px, #131a27 -3.68697px 3.37732px 0px, #131a27 -4.28444px 2.57751px 0px, #131a27 -4.71111px 1.67494px 0px, #131a27 -4.94996px 0.7056px 0px, #131a27 -4.99147px -0.291871px 0px, #131a27 -4.83399px -1.27771px 0px, #131a27 -4.48379px -2.2126px 0px, #131a27 -3.95484px -3.05929px 0px, #131a27 -3.26822px -3.78401px 0px, #131a27 -2.4513px -4.35788px 0px, #131a27 -1.53666px -4.75801px 0px, #131a27 -0.560763px -4.96846px 0px, #131a27 0.437495px -4.98082px 0px, #131a27 1.41831px -4.79462px 0px, #131a27 2.34258px -4.41727px 0px, #131a27 3.17346px -3.86382px 0px, #131a27 3.87783px -3.15633px 0px, #131a27 4.4276px -2.32301px 0px, #131a27 4.80085px -1.39708px 0px, #131a27 4.98271px -0.415447px 0px; }

.gameOverlay .ereignis .image { z-index:3;width:80%;height:80%;position:absolute;top:10%;left:10%;transition:0.4s all linear 0s;transform:scale(0);opacity:1; }
.gameOverlay .ereignis .image img { width:100%;height:100%;object-fit:contain; }
.gameOverlay .ereignis .image.in { transform:scale(1);opacity:1; }
.gameOverlay .ereignis .unterEreignisse { min-height: 20px;z-index:4;position:absolute;bottom:0px;left:50%;padding-bottom:90px;max-width:301px;width:100%;background-color:var(--attributeBgColor);border-top-left-radius:10px;border-top-right-radius:10px;color:var(--attributeFontColor);transition:0.5s all linear 0s;transform:translateY(200%) translateX(-50%);padding-top:20px;}
.gameOverlay .ereignis .unterEreignisse .list { position:relative;display:flex;justify-content: center;align-items: center;padding:0 20px; }
.gameOverlay .ereignis .unterEreignisse .attributes { list-style:none;padding:0;margin:0;box-sizing:border-box;padding-left:20px;}
.gameOverlay .ereignis .unterEreignisse .attributes li { font-weight:bold;font-size:14px;margin-bottom:10px; }
.gameOverlay .ereignis .unterEreignisse .attributes li .bar { overflow:hidden;margin-bottom:10px;height:6px;border-radius:3px;width:100%;position:relative;background-color:rgba(0,0,0,0.4);}
.gameOverlay .ereignis .unterEreignisse .attributes li .bar::after { z-index:2;content:" ";display:block;width:2px;margin-left:-1px;left:33.33%;top:0;bottom:0;position:absolute;background-color:var(--attributeBgColor); }
.gameOverlay .ereignis .unterEreignisse .attributes li .bar::before { z-index:2;content:" ";display:block;width:2px;margin-left:-1px;left:66.66%;top:0;bottom:0;position:absolute;background-color:var(--attributeBgColor); }
.gameOverlay .ereignis .unterEreignisse .attributes li .bar > div { z-index:1;position:absolute;left:0;top:0;bottom:0;background-color:#fcb36b;transition:0.2s all linear 0s; }
.gameOverlay .ereignis .unterEreignisse .attributes li .bar > div[p="1"] { background-color:#e57d7a; }
.gameOverlay .ereignis .unterEreignisse .attributes li font { display:block;margin-bottom:10px; }
.gameOverlay .ereignis .unterEreignisse .attributes li:last-child,
.gameOverlay .ereignis .unterEreignisse .attributes li:last-child .bar { margin-bottom:0px;margin-top:0px; }
.gameOverlay .ereignis .unterEreignisse .attributes li:last-child font { margin-bottom:0px;display:block;margin-bottom:5px; }
.gameOverlay .ereignis .unterEreignisse .rsv { width:100%; }
.gameOverlay .ereignis .unterEreignisse.nobadge .attributes { padding-left:20px;text-align:center; }
.gameOverlay .ereignis .unterEreignisse .badge { flex-shrink: 0;width: 100px;height: 100px;border-radius: 50%;top:50%;transform:rotate(-12deg); }
.gameOverlay .ereignis .unterEreignisse .badge > div { height:100%;width:100%;background:url(../images/badgeGrey.svg) center center no-repeat transparent;background-size:100%; position:relative;z-index:1; }
.gameOverlay .ereignis .unterEreignisse .badge[state="stars"] > div { background:url(../images/badgeYellow.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge > div::before { opacity:0;content:" ";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:url(../images/badgeOrange.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="perfect"] > div::before { opacity:1; } 
.gameOverlay .ereignis .unterEreignisse .badge::before { position:absolute;top:5px;left:5px;content:" ";display:block;height:90px;width:90px;border-radius:50%;box-shadow:0px 2px 7px  #000; }
.gameOverlay .ereignis .unterEreignisse .badge .stars { display:flex;position:absolute;top:37%;position:absolute;left:0;right:0;justify-content:center; }
.gameOverlay .ereignis .unterEreignisse .badge .stars > div { width:22%; background:url(../images/badgeStar.svg) center center no-repeat transparent;background-size:100%;transform:scale(2);transition:0.2s all linear 0s;opacity:0; }
.gameOverlay .ereignis .unterEreignisse .badge .stars > div::after { content:" ";display:block;padding-bottom:100%; }
.gameOverlay .ereignis .unterEreignisse .badge .stars > div.in { transform:scale(1);opacity:1; }
.gameOverlay .ereignis .unterEreignisse.nobadge .badge { display:none; }
.gameOverlay .ereignis .unterEreignisse .flavour {  }
.gameOverlay .ereignis .unterEreignisse .flavour > div { text-align:center;padding:20px;padding-top:0px;padding-bottom:10px;font-style:italic; }

/**
.gameOverlay .ereignis .unterEreignisse .badge[state="perfect"] > div { background:url(../images/badgePerfect.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="worst"] > div { background:url(../images/badgeWorst.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="1"] > div { background:url(../images/badge1.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="2"] > div { background:url(../images/badge2.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="3"] > div { background:url(../images/badge3.svg) center center no-repeat transparent;background-size:100%;  }
.gameOverlay .ereignis .unterEreignisse .badge[state="none"] { display:none; }
**/

.gameOverlay .ereignis .equip,
.gameOverlay .ereignis .close { left:50%;padding: 0px;text-align: center;width: auto;font-weight: bold;border-radius: 5px;cursor: pointer;height:50px;border-radius: 5px;background-color: #202C42;box-shadow: 0px 3px 1px #000;display: flex;justify-content: center;width: 80px;margin-left:auto;align-items: center;color: #fff;padding-left: 20px;padding-right:20px;margin-bottom:0px; }
.gameOverlay .ereignis .equip.hide { display:none; }
.gameOverlay .ereignis .equip {margin-right:10px; }
.gameOverlay .ereignis .equip:not(.de) font:nth-child(2) { display:none;}
.gameOverlay .ereignis .equip.de font:nth-child(1) { display:none; }
.gameOverlay .ereignis .btnBox { z-index:5;transition:0.25s all linear 0s;transform:translateX(0%) scale(0);opacity:1;position: absolute;bottom:20px;display: flex; justify-content: center;}
.gameOverlay .ereignis .btnBox.in { transform:translateX(0%) scale(1);opacity:1; }

.gameOverlay .ereignis .unterEreignisse.in { transform:translateY(0%) translateX(-50%); }

@keyframes blinkCursor{
  from {border-right-color: #fff;}
  to {border-right-color: #000;}
}
.gameOverlay .ereignis.noloading .lds-ripple,
.lds-ripple.hide { display:none; }
.lds-ripple {
	z-index:9999;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}