@font-face {
  font-family: 'ImagoBQ-Book';
    src: url('../fonts/ImagoBQ-Book.ttf')  format('truetype');
}
@font-face {
  font-family: 'ImagoBQ-Bold';
    src: url('../fonts/ImagoBQ-Bold.ttf')  format('truetype');
}

html, body{
  touch-action: none;
  -ms-touch-action: none;
}

body{
  background-color: #ffffff;
  color:#005eb8;
  font-family: 'ImagoBQ-Book';
  font-size: 1.2em;
  transition: background-color 0.5s ease-in-out;
  overflow: hidden;
  /* width:100vw; */
  /* height:100vh; */
}
body.nightBg{
  background-color:#001C37;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dn{
  display:none!important;
}

.orange{
  color: #ef9600;
}

.blue{
  color: #005eb8;
}

.width0{
  width:0;
}

nav{
  position: fixed;
  bottom:3vh;
  width:95vw;
  height:9vh;
  display:flex;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index:10;
}
.bottom-nav{
  position: fixed;
  bottom:0;
  width:95%;
  display:flex;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index:10;
}
.bottom-nav div{
  margin:.5%;
  font-size: .8em;
  cursor:pointer;
}
.bottom-nav div.impressum:hover,
.bottom-nav div.datenschutz:hover{
  background-color:#ef9600;
  color:#ffffff;
  cursor:pointer;
}

.btn{
  width:20%;
  height:100%;
  margin: 0 0.5%;
  color:transparent;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: .8em;
  cursor:pointer;
}

.btn:after{
  content: '';
  display: block;
  padding-bottom: 100%;
}

.btn-start{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/btn-01-Start-Weiss.png');
}
.btn-start:hover,.btn-start.active{
  background-image:url('../images/nav/btn-01-Start-Orange.png');
}
.btn-start.mobile{
  background-image:url('../images/nav/Home@2x.png');
}
.btn-start.mobile.active{
  border-radius: 15px;
  background-color:#ef9600;
  text-decoration: none;
  color:#ffffff;
  background-image:none;
  width:35%;
}

.btn-learn{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/btn-02-Lernen-Weiss.png');
}
.btn-learn:hover,.btn-learn.active{
  background-image:url('../images/nav/btn-02-Lernen-Orange.png');
}
.btn-learn.mobile{
  background-image:url('../images/nav/Hase@2x.png');
}
.btn-learn.mobile.active{
  border-radius: 15px;
  background-color:#ef9600;
  text-decoration: none;
  color:#ffffff;
  background-image:none;
  width:35%;
}

.btn-diary{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/btn-03-Tagebuch-Weiss.png');
}
.btn-diary:hover,.btn-diary.active{
  background-image:url('../images/nav/btn-03-Tagebuch-Orange.png');
}
.btn-diary.mobile{
  background-image:url('../images/nav/Toilette@2x.png');
}
.btn-diary.mobile.active{
  border-radius: 15px;
  background-color:#ef9600;
  text-decoration: none;
  color:#ffffff;
  background-image:none;
  width:35%;
}

.btn-settings{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/btn-04-Einstellungen-Weiss.png');
}
.btn-settings:hover,.btn-settings.active{
  background-image:url('../images/nav/btn-04-Einstellungen-Orange.png');
}
.btn-settings.mobile{
  background-image:url('../images/nav/Einstellungen@2x.png');
}
.btn-settings.mobile.active{
  border-radius: 15px;
  background-color:#ef9600;
  text-decoration: none;
  color:#ffffff;
  background-image:none;
  width:35%;
}
.btn-games{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/btn-04-Spiele-Weiss.png');
}
.btn-games:hover,.btn-games.active{
  background-image:url('../images/nav/btn-04-Spiele-Orange.png');
}
.btn-games.mobile{
  background-image:url('../images/nav/Ball@2x.png');
}
.btn-games.mobile.active{
  border-radius: 15px;
  background-color:#ef9600;
  text-decoration: none;
  color:#ffffff;
  background-image:none;
  width:35%;
}

.content{
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  /* overflow:hidden; */
}

.box{
  position: fixed;
  top:10%;
  width:95%;
  height:76%;
  left: 50%;
  transform: translate(-50%, 0%);
  overflow:auto;
}

.headline{
  font-family: 'ImagoBQ-Bold';
  font-size: 2em;
  margin-bottom: 2%;
}

.textBg{
  display:inline-block;
  background-color:rgba(255, 255, 255, 0.5);
}

input{
	border-radius: 15px;
	border:1px solid #d4dbf0;
	height:2.2em;
	text-indent: 35px;
	font-size: 16px;
}

.links{
  display:flex;
  margin-top:5%;
}
[data-content="login"] .links,
[data-content="forgotten"] .links,
[data-content="changeForgottenPw"] .links,
[data-content="register"] .links{
  flex-direction: column;
}
.links div,
input[type="submit"],
input[type="button"],
button{
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:25%;
  margin-right: 1%;
  cursor: pointer;
}
[data-content="login"] .links input,
[data-content="forgotten"] .links input,
[data-content="changeForgottenPw"] .links input,
[data-content="register"] .links input{
  margin-bottom: 5%;
}
.links .btn-blau{
  color:#005eb8;
  background-color:#d4dbf0;
  border-color:#d4dbf0;
}
.links div:hover,
.links input:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #ef9600;
}
.links .btn-blau:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #005eb8;
}
[data-content="login"] .btn-submit,
[data-content="forgotten"] .btn-submit,
[data-content="changeForgottenPw"] .btn-submit,
[data-content="register"] .btn-submit{
  text-indent: 0;
}

.arrowBack{
  position: absolute;
  top:2%;
  left:2%;
  width:5%;
  height:5%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/nav/pfeil-zuruck.orange.png');
  cursor: pointer;
}

.carousselContainer{
  width:100%;
  height:25%;
  display:flex;
}
[data-content='howto'] .carousselContainer{
  height:65%;
}

.caroussel{
  display:none;
}
.caroussel.active{
  display:block;
}

.arrowLeft{
  width:5%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-left-blau.png');
  cursor: pointer;
}
.arrowRight{
  width:5%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-right-blau.png');
  cursor: pointer;
}
.arrowLeft.hide,
.arrowRight.hide{
  opacity: 0;
}

.caroussel .headline{
  font-size: inherit;
}
.caroussel .links{
  margin-top:0;
  display: block;
}
.caroussel .links div{
  padding: 0.2em 1em;
  margin-top:2%;
}

.showUser{
  position: fixed;
  top:1%;
  right:2%;
  width:80vw;
  display:flex;
  align-items: center;
  justify-content: flex-end;
  z-index:50;
}
.showUserAva{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  width:auto;
  height:50px;
  padding-right:50px;
  background-color: #ef9600;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  background-position: center;
}
.showUserName{
  /* flex:1; */
  padding-left:10px;
  color: #ef9600;
}
.btn-logout{
  width: 10%;
  margin-right: 5%;
}

.btn-logout{
  width: 200px;
  margin-right: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4dbf0;
  border-radius: 15px;
  background-color: #d4dbf0;
  padding: 0.5em 1em;
  color: #005eb8;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 1em;
  line-height: 0.9em;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center left 0.275em;
  background-size: calc(0.6em + 0.375rem) calc(0.75em + 0.375rem);
  background-image: url("../images/icon-logout@2x.png");
  cursor: pointer;
}

.blink {
  animation: blink 5s infinite both;
}

@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
    /* color:#005eb8; */
  }
  25%,
  75% {
    opacity: 0;
    /* color:#ef9600; */
  }
}

/* ########################################################################## */
/* Start */
/* ########################################################################## */

[data-content="start"] .box{
  top: 25%;
  width: 45%;
  height: 55%;
  overflow: auto;
  transform: translate(-75%, 0%);
}
/* [data-content="start"] .box, */
[data-content="register"] .box,
[data-content="info"] .box,
[data-content="forgotten"] .box,
[data-content="changeForgottenPw"] .box,
[data-content="login"] .box{
  top: 25%;
  width: 45%;
  height: 55%;
  overflow: auto;
  transform: translate(-100%, 0%);
}
[data-content="start"] .box,
[data-content="register"] .box,
[data-content="info"] .box,
[data-content="forgotten"] .box,
[data-content="changeForgottenPw"] .box,
[data-content="login"] .box{
  overflow: visible;
}
[data-content="register"] .box{
  overflow-y:scroll;
}

.logo{
  position: absolute;
  top:2%;
  left:2%;
  width:98%;
  height:8.46%;
  margin:0;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  background-image:url('../images/apopepha-logo.png');
}

.hase{
  position: absolute;
  right:0;
  bottom:0;
  height: 100vh;
  width:50vw;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  background-image:url('../images/intro/Hase_Mictonorm_Video.png');
  cursor: pointer;
}

[data-content="login"] .loginbox,
[data-content="forgotten"] .loginbox,
[data-content="changeForgottenPw"] .loginbox,
[data-content="register"] .loginbox{
  width:95%;
  margin-left: 5%;
}
[data-content="login"] .loginbox input,
[data-content="forgotten"] .loginbox input,
[data-content="changeForgottenPw"] .loginbox input,
[data-content="register"] .loginbox input{
  width:95%;
}
[data-content="register"] .loginbox input[type="checkbox"]{
  width:auto;
}
[data-content="login"] .loginbox .links button,
[data-content="forgotten"] .loginbox .links button,
[data-content="changeForgottenPw"] .loginbox .links button,
[data-content="register"] .loginbox .links button{
  width:100%;
}

[data-content="register"] .loginbox .checkBx{
  display:flex;
  align-items: center;
}

.loginLink{
  text-decoration: underline;
  cursor: pointer;
}
.loginLink:hover{
  color:#ffffff;
  background-color:#005eb8;
}
.loginText{
  margin-bottom: 5%;
}

/* ########################################################################## */
/* Welcome */
/* ########################################################################## */

[data-content="welcome"] .box{
  display:flex;
  top: 10%;
  width: 85%;
  height: 75%;
}

[data-content="welcome"] .boxLeft{
  width:20%;
  margin-right:5%;
  text-align: center;
  overflow:hidden;
}
[data-content="welcome"] .boxLeft img{
  width:100%;
}
[data-content="welcome"] .userAvatar{
  position: relative;
  width:100%;
  height:auto;
  padding-bottom: 100%;
  background-color: #ef9600;
  background-repeat:no-repeat;
  background-size: contain;
  border-radius: 50%;
  background-position: center;
}
[data-content="welcome"] .avatarEdit{
  position: absolute;
  top: 77%;
  left: 72%;
  width: 21%;
  padding-bottom: 21%;
  background: url('../images/welcome/stift-edit.png') no-repeat #ffffff;
  background-size: 60%;
  border-radius: 50%;
  background-position: center;
  cursor: pointer;
}
[data-content="welcome"] .boxRight{
  width:75%;
}
[data-content="welcome"] .boxRight .headline.username,
[data-content="welcome"] .boxRight .headline.username + .text{
  margin-left:5%;
  margin-right:5%;
}
[data-content="welcome"] .entry{
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:90%;
  margin:0.5% auto;
}
[data-content="welcome"] .first{
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
}

[data-content="welcome"] .entryTbl{
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:90%;
  margin:0.5% auto;
  display:flex;
  align-items: center;
  justify-content: space-evenly;
}
[data-content="welcome"] .entryTbl.first{
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
}
[data-content="welcome"] .entryTbl .tbl{
  width:30%;
}

[data-content="welcome"] .newEntry{
  height:20%;
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  color:#ffffff;
  margin:0.5% 0;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(1em + 0.375rem);
  background-image:url('../images/welcome/stift-edit.png');
}
[data-content="welcome"] .editEntry{
  height:20%;
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  margin:0.5% 0;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(1em + 0.375rem);
  background-image:url('../images/welcome/stift-edit.png');
}
[data-content="welcome"] .emptycell{
  height:20%;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  margin:0.5% 0;
}
[data-content="welcome"] .first .emptycell{
  height:20%;
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  margin:0.5% 0;
}

[data-content="welcome"] .caroussel{
  width:90%;
  height:80%;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  padding:0.5em 1em;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  margin:0.5% auto;
  background-repeat:no-repeat;
  background-position:center right;
  background-size:25%;
  background-image:url('../images/welcome/hase-brille.png');
}
[data-content="welcome"] .carousselContainer .arrowLeft,
[data-content="welcome"] .carousselContainer .arrowRight{
  background-image:none;
}

[data-content='welcome'] .btnLinks{
  display:flex;
  margin-top:5%;
  justify-content: space-around;
  height:50%;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
}

[data-content='welcome'] .btnLinks .btnWelcome{
  /* display:flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center; */
  width:45%;
  height:90%;
  /* background-color: rgba(155,155,155,0.2); */
  position: relative;
  cursor: pointer;
}
[data-content='welcome'] .btnLinks .btnWelcome .welcomeBg{
  position: absolute;
  bottom:0;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color:#d4dbf0;
  border-radius: 15px;
  width:90%;
  height:80%;
  margin:0 auto;
  z-index:0;
}
[data-content='welcome'] .btnLinks .btnWelcome .welcomeHasi{
  position: absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:top right;
  /* background-position:top 30px right; */
  background-size:contain;
  /* background-image:url('../images/welcome/hase-brille.png'); */
  /* background-image:url('../images/welcome/Hase-Startseite.png'); */
  background-image:url('../images/welcome/Hase-mitArm.png');
}
[data-content='welcome'] .btnLinks .btnWelcome .welcomeStift{
  position: absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:top -100px right -100px;
  background-size:contain;
  background-image:url('../images/protokoll/neues-protokoll.png');
  border-radius: 15px;
}
[data-content='welcome'] .btnLinks .btnWelcome .btn-welcome-go{
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width: 40%;
  margin: 0 auto;
  z-index:15;
}
[data-content='welcome'] .btnLinks .btnWelcome .welcome-text{
  position: absolute;
  left:5%;
  top:5%;
  width:50%;
  color: #005eb8;
}
[data-content='welcome'] .btnLinks .btnWelcome .welcome-text .headline{
  font-size:1em;
}
[data-content='welcome'] .btnLinks .btnWelcome .welcome-text .text{
  font-family: 'ImagoBQ-Book';
}
[data-content='welcome'] .longBox{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width:90%;
  height:20%;
  background-color:#D4DBF0;
  border-radius: 15px;
  background-repeat:no-repeat;
  background-position: 80% 50%;
  background-size: auto 70%;
  background-image:url('../images/welcome/Start_PDF_Download_Teaser.png');
  margin:0 auto;
  cursor: pointer;
}
[data-content='welcome'] .longBox .longBoxLeft{
  width:40%;
  margin-left:5%;
}
[data-content='welcome'] .longBox .longBoxLeft .highlight{
  font-family: "ImagoBQ-Bold";
}
[data-content='welcome'] .longBox .longBoxRight{
  width:30%;
  margin-right: 5%;
  display: flex;
  justify-content: flex-end;
}
[data-content='welcome'] .longBox .longBoxRight .btn-verlauf{
  width: 200px;
  /* height: 10px; */
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  color: #ffffff;
  margin: 0.5% 0;
  margin-right: 5%;
  background-repeat: no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(0.5em + 0.375rem);
  background-image: url('../images/protokoll/verlauf-mini.png');
  display: flex;
  align-items: center;
  justify-content: center;
}
/* [data-content='welcome'] .btnLinks .btnWelcome .protokollImg{
  background-color:#d4dbf0;
  border-radius: 15px;
  overflow:visible;
}
[data-content='welcome'] .btnLinks .btn-welcome-protocol .protokollImg{
  width:100%;
  height:90%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/neues-protokoll.png');
}
[data-content='welcome'] .btnLinks .btn-welcome-learn .protokollImg{
  width:100%;
  height:90%;
  background-repeat:no-repeat;
  background-position:bottom right;
  background-size:contain;
  background-image:url('../images/welcome/Hase-Startseite.png');
}
[data-content='welcome'] .btnLinks .protokollText{
  width:100%;
  text-align:center;
  font-family: 'ImagoBQ-Book';
  font-size: 1.5em;
} */

.mediaGames{
  height:70%;
}

[data-content="welcome"] .countStars,
[data-content="reward-overview"] .countStars{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 10%;
}
[data-content="reward-overview"] .countStars{
  height: 100%;
}
[data-content="reward-overview"] .countStars{
  width: 100%;
}
[data-content="welcome"] .star,
[data-content="reward-overview"] .star{
  width:25%;
  height:100%;
  /* min-height: 50px; */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/welcome/stern-outline.png');
}
[data-content="welcome"] .star.filled,
[data-content="reward-overview"] .star.filled{
  background-image:url('../images/welcome/stern-filled.png');
}

.btnGames{
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:80%;
  margin: 1em auto;
  cursor: pointer;
}
.btnGames:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #ef9600;
}

[data-content="reward-overview"] .box{
  display:flex;
  flex-direction: column;
  top: 10%;
  width: 85%;
  height: 75%;
}

[data-content="reward-overview"] .boxTop{
  display:flex;
  height:20%;
  align-items: center;
}
[data-content="reward-overview"] .boxTopLeft{
  width:60%;
}
[data-content="reward-overview"] .boxTopRight{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4dbf0;
  border-radius: 15px;
  background-color: #d4dbf0;
  padding:0.5em;
  height:50%;
}
[data-content="reward-overview"] .boxBottom{
  width:100%;
  height:80%;
  display:flex;
  justify-content: space-evenly;
}

[data-content="reward-overview"] [data-game]{
  width:30%;
  text-align: center;
}
[data-content="reward-overview"] [data-game] .gameName{
  font-family: 'ImagoBQ-Bold';
  font-size: 1.5em;
  margin-bottom: .5em;
}
[data-content="reward-overview"] [data-game] .btnGames{
  display:none;
}
[data-content="reward-overview"] .active[data-game] .btnGames{
  display:block;
}

[data-content="reward-overview"] [data-game] .gameImg{
  width:100%;
  height:60%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* background-image:url('../images/welcome/1-tictactoe-ausgeblendet.png'); */
}
[data-content="reward-overview"] [data-game="1"] .gameImg{
  background-image:url('../images/welcome/1-tictactoe-ausgeblendet.png');
}
[data-content="reward-overview"] .active[data-game="1"] .gameImg{
  background-image:url('../images/welcome/1-tictactoe.png');
}
[data-content="reward-overview"] [data-game="2"] .gameImg{
  background-image:url('../images/welcome/3-schiebepuzzle-ausgeblendet.png');
}
[data-content="reward-overview"] .active[data-game="2"] .gameImg{
  background-image:url('../images/welcome/3-schiebepuzzle.png');
}
[data-content="reward-overview"] [data-game="3"] .gameImg{
  background-image:url('../images/welcome/2-memory-ausgeblendet.png');
}
[data-content="reward-overview"] .active[data-game="3"] .gameImg{
  background-image:url('../images/welcome/2-memory.png');
}

/* ########################################################################## */
/* Profil */
/* ########################################################################## */

[data-content="profil"] .box{
  display:flex;
  top: 10%;
  width: 85%;
  height: 75%;
  font-size: 0.8em;
}

[data-content="profil"] .box .boxLeft,
[data-content="profil"] .box .boxRight{
  width:45%;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  margin: 0 2%;
  height:85%;
  /* overflow-y: scroll; */
}

[data-content="profil"] .saveProfile{
  position: absolute;
  top: 3%;
  right: 15%;
  width: 200px;
  height: 2%;
}

[data-content="profil"] .btn-saveProfile{
  position: absolute;
  top: 3%;
  right: 10.5%;
  width: 200px;
  /* height: 2%; */
  display:flex;
  align-items: center;
  justify-content: center;
  /* width:100%; */
  /* height:100%; */
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 1em;
  color:#ffffff;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  font-size: 1em;
  line-height: 0.9em;
  text-align: center;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(0.6em + 0.375rem) calc(0.75em + 0.375rem);
  background-image:url('../images/profil/icon-speichern.png');
  cursor: pointer;
}
[data-content="profil"] .btn-saveProfile:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #edc47a;
}
[data-content="profil"] .btn-deleteProfile{
  position: absolute;
  bottom: 20vh;
  right: 10.5%;
  width: 200px;
  /* height: 2%; */
  display:flex;
  align-items: center;
  justify-content: center;
  /* width:100%; */
  /* height:100%; */
  border:1px solid #005eb8;
  border-radius: 15px;
  background-color:#005eb8;
  padding:0.5em 1em;
  color:#ffffff;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  font-size: 1em;
  line-height: 0.9em;
  text-align: center;
  /* background-repeat:no-repeat; */
  /* background-position: center left 0.275em; */
  /* background-size: calc(0.6em + 0.375rem) calc(0.75em + 0.375rem); */
  /* background-image:url('../images/profil/icon-speichern.png'); */
  z-index:15;
  cursor: pointer;
}
[data-content="profil"] .btn-deleteProfile:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #005eb8;
}

[data-content="profil"] .boxLeft .text{
  height: 100%;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

[data-content="profil"] .boxLeft input{
  width:70%;
  border-radius: 0px;
  text-indent: 10px;
}

[data-content="profil"] .boxLeft input[type="date"]:before {
  content: attr(placeholder) !important;
  /* color: #aaa; */
  /* margin-right: 0.5em; */
}
[data-content="profil"] .boxLeft input[type="date"]:focus:before,
[data-content="profil"] .boxLeft input[type="date"]:valid:before {
  content: "";
}

.ui-datepicker{
  background-color:#ffffff;
  border: 1px solid #ef9600;
  border-radius: 15px;
  /* box-shadow: 0px 0px 25px 0px #edc47a; */
}

.ui-datepicker td span, .ui-datepicker td a{
  color:#005eb8;
}
.ui-datepicker td span, .ui-datepicker td a.ui-state-active{
  color:#ef9600;
  border: 1px solid #ef9600;
}

[data-content="profil"] .boxRight .allChoices{
  height: 100%;
  margin: 0 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

[data-content="profil"] label {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}

[data-content="profil"] label span{
	/* color:#c6c6c6; */
}

[data-content="profil"] .small label{
  flex-wrap: wrap-reverse;
  justify-content: center;
}

[data-content="profil"] input.singleChoice{
	width: 0px;
	height: 0px;
	display: none;
}

[data-content="profil"] input.singleChoice + div.styledCheckbox {
	display: inline-block;
	margin-right: 20px;
	min-width: 55px;
	min-height: 55px;
	max-width: 55px;
	max-height: 55px;
	border-radius: 0px;
}
[data-content="profil"] input.singleChoice.small + div.styledCheckbox {
	min-width: 14px;
	min-height: 14px;
	max-width: 14px;
	max-height: 14px;
  margin-right: 0;
}

[data-content="profil"] input.singleChoice + div.styledCheckbox {
	background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/profil/kreis-weiss-gross.png');
}
[data-content="profil"] input.singleChoice.small + div.styledCheckbox {
  background-size:14px 14px;
	background-image:url('../images/profil/kreis-weiss-klein.png');
}

[data-content="profil"] input.singleChoice:checked + div.styledCheckbox {
  background: url('../images/profil/kreis-filled-gross.png') no-repeat #ffffff;
  border-radius: 50%;
  background-position: center;
  background-size:contain;
}
[data-content="profil"] input.singleChoice.small:checked + div.styledCheckbox {
  background: url('../images/profil/kreis-filled-klein.png') no-repeat #ffffff;
  background-size:14px 14px;
}

[data-content="profil"] .choicesContainer{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

[data-content="profil"] .choicesContainer div{
	width:50%;
  cursor: pointer;
}
[data-content="profil"] .choicesContainer.small div{
	width:20%;
  /* flex:1; */
  /* width: 50px; */
  margin-right: 5%;
  cursor: pointer;
}

[data-content="profil"] .choicesContainer.small img{
	width:100%;
  height:100%;
}

[data-content="profil"] .twoChoices{
  display:flex;
}
[data-content="profil"] .twoChoices .skinContainer,
[data-content="profil"] .twoChoices .hairContainer,
[data-content="profil"] .twoChoices .eyeContainer,
[data-content="profil"] .twoChoices .clothContainer{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
[data-content="profil"] .twoChoices .skinContainer,
[data-content="profil"] .twoChoices .clothContainer{
  width:40%;
}
[data-content="profil"] [data-choice='style']{
  align-items: flex-end;
}
[data-content="profil"] .choicesContainer[data-choice='style'].small div{
  /* flex:1; */
  margin-right: 5%;
  width:19%;
}
[data-content="profil"] .choicesContainer[data-choice='style'].small div:last-child{
  width:23%;
}
[data-content="profil"] [data-show="false"]{
  display:none;
}
[data-content="profil"] [data-show="true"]{
  display:flex;
}
[data-content="profil"] .filter{
  filter:brightness(0) saturate(100%);
}

[data-content='saved'] .links div{
  width:30%;
}

.save-profile-popup{
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.8);
  z-index:20;
}
.save-profile-popup .saveBox {
  /* position: relative; */
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 50%;
  margin: 0.5% auto;
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  height: 50%;
  color:#ffffff;
  text-align: center;
  padding:2%;
}

.save-profile-popup .saveBox .save-btn{
  display:flex;
  justify-content: space-evenly;
}
.save-profile-popup .saveBox .save-btn div{
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ef9600;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:25%;
}

.popup-time,
.popup-pdf,
.popup-diaper,
.popup-change,
.popup-delete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255,255,255,0.8);
  z-index: 20;
}
.popup-time .saveBox,
.popup-pdf .saveBox,
.popup-diaper .saveBox,
.popup-change .saveBox,
.popup-delete .saveBox {
  display: none;
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 50%;
  height: 50%;
  margin: 0.5% auto;
  border-radius: 15px;
  background-color: #ffffff;
  color: #005eb8;
  text-align: center;
  padding: 2%;
  box-shadow: 0px 0px 25px 0px #edc47a;
}
.popup-time .saveBox.activ,
.popup-pdf .saveBox.activ,
.popup-diaper .saveBox.activ,
.popup-change .saveBox.activ,
.popup-delete .saveBox.activ {
  display: block;
}
.popup-time .saveBox input,
.popup-pdf .saveBox input,
.popup-diaper .saveBox input,
.popup-change .saveBox input,
.popup-delete .saveBox input{
  width: 56%;
  text-align: center;
  text-indent: 0;
}
.popup-time .saveBox .links,
.popup-pdf .saveBox .links,
.popup-diaper .saveBox .links,
.popup-change .saveBox .links,
.popup-delete .saveBox .links{
  flex-direction: column;
  align-items: center;
}
.popup-time .saveBox .links div,
.popup-pdf .saveBox .links div,
.popup-diaper .saveBox .links div,
.popup-change .saveBox .links div,
.popup-delete .saveBox .links div{
  width:50%;
  margin-bottom: 2%;
}

.oneChoiceEdit{
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.oneChoiceEdit .oneChoiceInput{
  /* flex:1; */
  width:70%;
}
[data-content="profil"] .boxLeft .oneChoiceInput input{
  width:100%;
}
.oneChoiceEdit .btn-editPw{
  width:20%;
  display:flex;
  align-items: center;
  justify-content: center;
  /* width:100%; */
  /* height:100%; */
  border:1px solid #d4dbf0;
  /* border-radius: 15px; */
  background-color:#d4dbf0;
  padding:0.5em 1em;
  color:#005eb8;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  font-size: 1em;
  line-height: 0.9em;
  text-align: center;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(0.6em + 0.375rem) calc(0.75em + 0.375rem);
  background-image:url('../images/welcome/stift-edit.png');
  cursor: pointer;
}

/* ########################################################################## */
/* auskennen */
/* ########################################################################## */

[data-content='auskennen'] .btnLinks{
  display:flex;
  margin-top:5%;
  justify-content: space-around;
  height:60%;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
}

[data-content='auskennen'] .btnLinks div{
  width:45%;
  /* height:100%; */
  background-repeat:no-repeat;
  background-position:center right;
  background-size:contain;
}
[data-content='auskennen'] .btn-protokoll{
  background-image:url('../images/howto/card-Protokoll.png');
}
[data-content='auskennen'] .btn-jetztlernen{
  background-image:url('../images/howto/card-lernen.png');
}
[data-content='auskennen'] .btnLinks span{
  position: relative;
  left:5%;
  top:10%;
  font-size: 1.5em;
}
[data-content='auskennen'] .btnLinks .btnProt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  height: 100%;
  background-color: #7C98CD;
  border-radius: 15px;
}
[data-content='auskennen'] .btnLinks .btn-protokoll .protokollImg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/protokoll/neues-protokoll.png");
}
[data-content='auskennen'] .btnLinks .btn-jetztlernen .protokollImg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/welcome/hase-brille.png");
}
[data-content='auskennen'] .btnLinks .protokollText {
  width: 100%;
  text-align: center;
  font-family: 'ImagoBQ-Book';
  font-size: 1.5em;
  margin:0;
}
/* ########################################################################## */
/* Howto */
/* ########################################################################## */
[data-content='howto'] .box{
  width:80%;
  overflow:inherit;
}

[data-content='howto'] .peek-hasi{
  position: absolute;
  top: -72%;
  left: 70%;
  width: 11%;
  height: 100%;
  background-repeat:no-repeat;
  background-position:center left;
  background-size:contain;
  background-image:url('../images/howto/Hase-point.png');
}

[data-content='howto'] .bluebox{
  position: relative;
  border-radius: 15px;
  /* padding:0.5em 1em; */
  font-family: 'ImagoBQ-Bold';
  width:100%;
  min-height:20%;
  color:#005eb8;
  background-color:#d4dbf0;
  border-color:#d4dbf0;
  margin:0 auto;
  display: flex;
  align-items: center;
}
[data-content='howto'] .bluebox .headline{
  font-size: 1em;
  padding-left: 5%;
  /* padding-top: 5%; */
  margin:0;
}
[data-content='howto'] .bluebox .text{
  padding-left: 5%;
  padding-top: 2%;
  font-family: 'ImagoBQ-Book';
}

[data-content='howto'] .caroussel{
  width:90%;
}

[data-content='howto'] .caroussel.active{
  display:flex;
  align-items: center;
}

[data-content='howto'] .icons{
  display:flex;
  height:70%;
  width:100%;
  /* margin-top:8%; */
  justify-content: space-evenly;
  /* align-items: center; */
  font-size: 0.8em;
  overflow-y:auto;
}

[data-content='howto'] .icons .iconBox{
  width: 30%;
  /* height: 100%; */
  /* overflow-y:auto; */
}
[data-content='howto'] .icons .iconEntry{
  min-height: 50px;
  background-repeat:no-repeat;
  background-position:top left;
  background-size:50px 50px;
  text-align: justify;
  /* padding-left:65px; */
  margin-bottom: 1em;
  /* font-size:1.2em; */
}
[data-content='howto'] .icons .iconEntry:before {
  content: '';
  display:inline-block;
  width: 65px;
  height: 50px; /* however much you need for 2 lines */
  float:left;
}

[data-content='howto'] [data-icon="1"]{
  background-image:url('../images/howto/haus.png');
}
[data-content='howto'] [data-icon="2"]{
  background-image:url('../images/howto/hase-brille.png');
}
[data-content='howto'] [data-icon="3"]{
  background-image:url('../images/howto/einstellungen.png');
}
[data-content='howto'] [data-icon="4"]{
  background-image:url('../images/howto/hase-links.png');
}
[data-content='howto'] [data-icon="5"]{
  background-image:url('../images/howto/toilette-2.png');
}
[data-content='howto'] [data-icon="6"]{
  background-image:url('../images/howto/glas.png');
}
[data-content='howto'] [data-icon="7"]{
  background-image:url('../images/howto/toilette.png');
}
[data-content='howto'] [data-icon="8"]{
  background-image:url('../images/howto/emoji.png');
}
[data-content='howto'] [data-icon="9"]{
  background-image:url('../images/howto/meine-protokolle.png');
}
[data-content='howto'] [data-icon="10"]{
  background-image:url('../images/howto/neues-protokoll.png');
}

/* ########################################################################## */
/* protokoll */
/* ########################################################################## */

[data-content='protokoll'] .btnLinks{
  width:100%;
  height:60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .8em;
}
[data-content='protokoll'] .btnLinksOben,
[data-content='protokoll'] .btnLinksUnten{
  display:flex;
  margin-top:5%;
  justify-content: space-between;
  height:51%;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
}
[data-content='protokoll'] .btnLinksUnten{
  height:31%;
}

[data-content='protokoll'] .btnLinks .btnProtContainer{
  display:flex;
  width: 65%;
  height:100%;
  flex-direction: column;
  justify-content: space-between;
  font-size: .8em;
}
[data-content='protokoll'] .btnLinks .btnProtOben{
  display:flex;
  width: 100%;
  height: 58%;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}
[data-content='protokoll'] .btnLinks .btnProt{
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  width:26%;
  padding:2%;
  height:100%;
  background-color:#7C98CD;
  border-radius: 15px;
  cursor: pointer;
}
[data-content='protokoll'] .btnLinks .btnProt.filter{
  /* filter:grayscale(1); */
  opacity: .5;
}
[data-content='protokoll'] .btnLinks .btn-new-protokoll .protokollImg{
  width:100%;
  height:50%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/neues-protokoll.png');
}
[data-content='protokoll'] .btnLinks .btn-my-protokoll .protokollImg{
  width:100%;
  height:50%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/meine-protokolle.png');
}
[data-content='protokoll'] .btnLinks .protokollText{
  width:100%;
  text-align:center;
  font-family: 'ImagoBQ-Book';
  font-size: 1.5em;
}
[data-content='protokoll'] .btnLinks .btnProtLong{
  display:flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  width: 59%;
  padding: 2%;
  height: 100%;
  background-color:#D4DBF0;
  border-radius: 15px;
  background-repeat:no-repeat;
  background-position:top 43% right 7%;
  background-size:222px 476px;
  background-image:url('../images/protokoll/Hase_Play.png');
  cursor: pointer;
}
[data-content='protokoll'] .btnLinks .btnProtLong .btnLongHl{
  width:30%;
  color:#005EB8;
  font-size: 1.4em;
  display:flex;
  align-items: center;
}
[data-content='protokoll'] .btnLinks .btnProtLong .btnLongRight{
  width:30%;
  color:#005EB8;
  font-size: 1.4em;
  display:flex;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */
  font-family: 'ImagoBQ-Book'!important;
}
[data-content='protokoll'] .btnLinks .btnProtLong .btnLongText{
}
[data-content='protokoll'] .btnLinks .btnProtLong .btnLongBtn{
  /* position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0%); */
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width: 75%;
  margin: 0 auto;
  z-index: 15;
  font-size: .9em;
  margin-top:1em;
}

[data-content='protokoll'] .btn-sleeptimes{
  width:30%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .8em;
}

[data-content='protokoll'] .btn-night{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:30%;
  padding:2%;
  margin-bottom: 20px;
  height: 100%;
  color:#ffffff;
  background-repeat:no-repeat;
  background-position:top 5px right 5px;
  background-size:50px 50px;
  background-color:#001C37;
  border-radius: 15px;
  background-image:url('../images/learning/pinkeln/mond.png');
}
[data-content='protokoll'] .btn-night.filter{
  /* filter:grayscale(1); */
  opacity: .5;
}
[data-content='protokoll'] .btn-morning{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:30%;
  padding:2%;
  height: 100%;
  color:#ef9600;
  background-repeat:no-repeat;
  background-position:top 5px right 5px;
  background-size:50px 50px;
  background-color:#F9ECD3;
  border-radius: 15px;
  background-image:url('../images/protokoll/sonne@2x.png');
}
[data-content='protokoll'] .btn-morning.filter{
  /* filter:grayscale(1); */
  opacity: .5;
}

[data-content='protokoll'] .row1,
[data-content='protokoll'] .row2,
[data-content='protokoll'] .row3{
  display:flex;
  height:30%;
  width:90%;
  margin-left: 5%;
}
[data-content='protokoll'] .btn-sleeptimes .btn-morning .row1{
  /* height:30%; */
  /* margin-top:5%; */
}
[data-content='protokoll'] .btn-sleeptimes .btn-morning .row2{
  /* height:60%; */
}
[data-content='protokoll'] .row1{
  justify-content: space-between;
}
[data-content='protokoll'] .nightText{
  width:80%;
}
[data-content='protokoll'] .row2,
[data-content='protokoll'] .row3{
  font-family: 'ImagoBQ-Book';
  display:flex;
  align-items: center;
}
[data-content='protokoll'] .row3{
  width:76%;
  justify-content: space-between;
}

[data-content='protokoll'] .nightInput{
  margin-left:5%;
}
[data-content='protokoll'] .nightInput input{
  width:25%;
  text-indent: .8em;
  font-size: .8em
}
[data-content='protokoll'] .nightInput input[name="nighttime"]:disabled {
  background-color:#ffffff;
  color:#005EB8;
}
[data-content='protokoll'] .nightInput input[name="waketime"]:disabled {
  background-color:#ffffff;
  color:#ef9600;
}
[data-content='protokoll'] .night .wettedNight,
[data-content='protokoll'] .night .diaperNight,
[data-content='protokoll'] .night .dryNight{
  margin-left: 5%;
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/protokoll/pipi/white_kreis-leer.png');
  cursor: pointer;
}
[data-content='protokoll'] .night.selected .wettedNight,
[data-content='protokoll'] .night.selected .diaperNight,
[data-content='protokoll'] .night.selected .dryNight{
  background-image: url('../images/protokoll/pipi/white_filled.png');
}

.btn-night .save,
.btn-morning .save{
  position: absolute;
  bottom: 0%;
  /* top: 19%; */
  right: 0%;
  width: 65px;
  height: 65px;
  text-indent: -9999px;
  border: none;
  background: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 16px 21px, 36px 37px;
  background-position: center, center;
  background-image: url("../images/protokoll/lock@2x.png"), url("../images/protokoll/kreis_orange@2x.png");
  z-index: 5;
  cursor: pointer;
}
.btn-night .filter .save,
.btn-morning .filter .save{
  /* 52 40 */
  background-size: 19px 15px, 36px 37px;
  background-image: url("../images/protokoll/Haken@2x.png"), url("../images/protokoll/kreis_orange@2x.png");
  z-index: 5;
}

[data-content='my-protokoll'] .entry{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:90%;
  margin:0.5% auto;
  background-color:#d4dbf0;
  border:1px solid #d4dbf0;
  border-radius: 15px;
}
[data-content='my-protokoll'] .entry:not(.protokolltable){
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
}
/* [data-content='my-protokoll'] .entry.protokolltable .klemmbrett{
  position: absolute;
  right:0px;
  bottom: 0px;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  background-image:url('../images/protokoll/klemmbrett.png');
  width:30%;
  height:50%;
}
[data-content='my-protokoll'] .entry.protokolltable .klemmbrett.bottom-right{
  background-position: bottom right;
} */
[data-content="my-protokoll"] .eye {
  display:none;
}

[data-content="my-protokoll"] .entryTbl{
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  display:flex;
  align-items: center;
  justify-content: space-between;
}
[data-content="my-protokoll"] .entryTbl.first{
  background-color: #f9ecd3;
  border: 1px solid #f9ecd3;
  cursor: pointer;
}
[data-content="my-protokoll"] .entryTbl.protokolltable{
  position: relative;
  display:flex;
  flex-direction: column;
  padding-bottom: 50px;
}
[data-content="my-protokoll"] .entryTbl .oneEntry{
  width:100%;
  display:flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
[data-content="my-protokoll"] .entryTbl .tbl{
  width:22%;
  padding:1.5% 0;
  border-bottom: 1px solid #ffffff;
}
[data-content="my-protokoll"] .entryTbl .tbl.date{
  width:22%;
  padding:1.5% 0;
  border-bottom: 1px solid #ffffff;
  margin-left: 1%;
}
[data-content='my-protokoll'] .entryTbl .noborder{
  border:none!important;
}
[data-content='my-protokoll'] .entryTbl .oneEntry .noborder,
[data-content='my-protokoll'] .entryTbl .newEntry{
  flex:1;
  display:flex;
  justify-content: flex-end;
}
[data-content='my-protokoll'] .entryTbl.protokolltable .klemmbrett{
  position: absolute;
  right:0px;
  bottom: 0px;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  background-image:url('../images/protokoll/klemmbrett.png');
  width:30%;
  height:100%;
  flex:1;
}

[data-content="my-protokoll"] .entryTbl.lastNight{
  color:#ffffff;
  background-color: #001C37;
  border: 1px solid #001C37;
}
[data-content="my-protokoll"] .entryTbl .nightTbl{
  width:33%;
}
[data-content="my-protokoll"] .entryTbl .nightTbl.text{
  margin-left: 1%;
}
[data-content="my-protokoll"] .entryTbl .nightTbl.time{
  display:flex;
  justify-content: center;
  align-items: center;
  /* flex:1; */
}
[data-content='my-protokoll'] .entryTbl .nightTbl.time input {
  width: 100px;
  text-indent: 1em;
  font-size: .8em;
  margin-left: 5%;
}
[data-content="my-protokoll"] .entryTbl .nightTbl.time .nightSave{
  top: 19%;
  right: 0%;
  width: 30%;
  height: 65px;
  text-indent: -9999px;
  border: none;
  background: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 19px 15px, 36px 37px;
  background-position: center, center;
  background-image: url("../images/protokoll/Haken@2x.png"), url("../images/protokoll/kreis_orange@2x.png");
  z-index: 5;
  cursor: pointer;
}

[data-content='my-protokoll'] .newEntryBtn{
  width:200px!important;
  /* height:10px; */
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  color:#ffffff;
  margin:0.5% 0;
  margin-right: 5%;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(1em + 0.375rem);
  background-image:url('../images/welcome/stift-edit.png');
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-content='my-protokoll'] .newEntryBtn.filter{
  /* filter:grayscale(1); */
  opacity: .5;
  cursor: auto;
}
.nightTbl .newEntryBtn{
  border:1px solid #ffffff;
  background-color:#ffffff;
  color:#ef9600
}
.nightTbl.newEntry{
  padding: 1.5% 0;
}
[data-content='my-protokoll'] .editEntry{
  border-radius: 15px;
  color:#ffffff;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  margin:0.5% 0;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(1em + 0.375rem);
  background-image:url('../images/welcome/stift-edit.png');
}
[data-content="my-protokoll"] .entry.overview{
  display:flex;
  align-items: center;
  justify-content: space-between;
}
[data-content="my-protokoll"] .entry.overview .overviewLeft{
  width:60%;
  text-align: left;
  margin-left: 1%;
}
[data-content="my-protokoll"] .entry.overview .overviewRight{
  width:30%;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
[data-content="my-protokoll"] .btn-verlauf{
  width:200px!important;
  /* height:10px; */
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  color:#ffffff;
  margin:0.5% 0;
  margin-right: 5%;
  background-repeat:no-repeat;
  background-position: center left 0.275em;
  background-size: calc(1em + 0.375rem) calc(0.5em + 0.375rem);
  background-image:url('../images/protokoll/verlauf-mini.png');
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

[data-content="my-protokoll"] .noEntry {
  background:none;
}

/* ########################################################################## */
/* detail-protokoll */
/* ########################################################################## */

[data-content='detail-protokoll'] .box{
  overflow-y:scroll;
}
[data-content='detail-protokoll'] .entry{
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:95%;
  margin:0.5% auto;
  background-color:#d4dbf0;
  border:1px solid #d4dbf0;
  border-radius: 15px;
}

[data-content="detail-protokoll"] .detailIcons{
  display:flex;
  width:100%;
  height:5%;
  justify-content: space-evenly;
}
[data-content="detail-protokoll"] .savePdf{
  width:40%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/PDF_Icon.png');
}
[data-content="detail-protokoll"] .saveExcel{
  width:40%;
  height:100%;
  background-repeat:no-repeat;
  background-position:left;
  background-size: contain;
  background-image:url('../images/protokoll/icon_excel.png');
}

[data-content="detail-protokoll"] .detailHL{
  display:flex;
  text-align: left;
  width:100%;
  cursor: pointer;
}

[data-content="detail-protokoll"] .detailHL .arrow{
  width:5%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  background-image: url('../images/protokoll/arrow-up-white.png');
  /* border-bottom: 2px solid #ffffff; */
}
[data-content="detail-protokoll"] .detailHL.closed .arrow{
  background-image: url('../images/protokoll/arrow-down-white.png');
}
[data-content="detail-protokoll"] .detailHL .nr{
  width:25%;
  padding-bottom: 1%;
  border-bottom: 2px solid #ffffff;
}
[data-content="detail-protokoll"] .detailHL .date{
  width:25%;
  padding-bottom: 1%;
  border-bottom: 2px solid #ffffff;
}
[data-content="detail-protokoll"] .detailHL .time{
  width:20%;
  /* width:40%;*/
  padding-bottom: 1%;
  border-bottom: 2px solid #ffffff;
}
[data-content="detail-protokoll"] .detailHL .delete{
  width:20%;
  /* padding-bottom: 1%; */
  border-bottom: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-content="detail-protokoll"] .detailHL .filler{
  width:5%;
}
[data-content="detail-protokoll"] .detailHL.closed .nr,
[data-content="detail-protokoll"] .detailHL.closed .date,
[data-content="detail-protokoll"] .detailHL.closed .time,
[data-content="detail-protokoll"] .detailHL.closed .delete{
  border:none;
}

[data-content='detail-protokoll'] .deleteEntryBtn{
  width:100%;
  /* height:10px; */
  /* border:1px solid #ef9600; */
  border-radius: 15px;
  background-color:#ffffff;
  padding:0.5em 0em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  font-size: 0.8em;
  text-align: center;
  color:#ef9600;
  margin:0.5% 0;
  margin-right: 5%;
  background-repeat:no-repeat;
  background-position: center left 0.75em;
  background-size: calc(0.75em + 0.375rem) calc(1.5em + 0.375rem);
  /* background-size: 26px 40px; */
  background-image:url('../images/protokoll/bin.png');
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 2em;
  cursor: pointer;
}

[data-content="detail-protokoll"] .smallHL{
  font-size: 0.8em;
  color:#7C98CD;
}

/* [data-content="detail-protokoll"] .details.closed{
  display:block;
} */
[data-content="detail-protokoll"] .details.closed{
  display:none;
}

[data-content="detail-protokoll"] .details{
  display:flex;
  text-align: left;
  width:100%;
  flex-wrap: wrap;
  /* margin-top:2%; */
}
[data-content="detail-protokoll"] .details .right{
  width:45%;
  padding: 2% 0;
  min-height: 75px;
}
[data-content="detail-protokoll"] .details .left{
  width:50%;
  /* padding-left:5%; */
  padding:2% 0 2% 5%;
  min-height: 75px;
}
/* [data-content="detail-protokoll"] .details[data-entry="extra"]{
  display:block;
}
[data-content="detail-protokoll"] .details[data-entry="extra"] div{
  width:95%;
  padding:2% 0 2% 5%;
  min-height: 75px;
} */
[data-content="detail-protokoll"] .details[data-entry="extra"]{
  min-height: 75px;
}
[data-content="detail-protokoll"] .details[data-entry="extra"] .right{
  width:95%;
  padding:2% 0 0 5%;
  min-height: initial;
}
[data-content="detail-protokoll"] .details[data-entry="extra"] .left{
  width:95%;
  /* padding-left:5%; */
  padding:2% 0 0 5%;
  min-height: initial;
}
[data-content="detail-protokoll"] .highlight{
  font-family: "ImagoBQ-Bold";
}

[data-content="detail-protokoll"] .urgeHasi{
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-content="detail-protokoll"] .urgeHasi[data-urge="0"]{
  background-image: url('../images/protokoll/pipi/hase-1.png');
}
[data-content="detail-protokoll"] .urgeHasi[data-urge="1"]{
  background-image: url('../images/protokoll/pipi/hase-2.png');
}
[data-content="detail-protokoll"] .urgeHasi[data-urge="2"]{
  background-image: url('../images/protokoll/pipi/hase-3.png');
}
[data-content="detail-protokoll"] .urgeHasi[data-urge="3"]{
  background-image: url('../images/protokoll/pipi/hase-4.png');
}
[data-content="detail-protokoll"] .tropfen{
  width:100%;
  height:50%;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-content="detail-protokoll"] .tropfen[data-tropfen="1"]{
  background-image: url('../images/protokoll/pipi/tropfen-1.png');
}
[data-content="detail-protokoll"] .tropfen[data-tropfen="2"]{
  background-image: url('../images/protokoll/pipi/tropfen-2.png');
}
[data-content="detail-protokoll"] .tropfen[data-tropfen="3"]{
  background-image: url('../images/protokoll/pipi/tropfen-3.png');
}
[data-content="detail-protokoll"] .poo{
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-content="detail-protokoll"] .poo[data-poo="4"]{
  background-image: url('../images/protokoll/pipi/kacke-1.png');
}
[data-content="detail-protokoll"] .poo[data-poo="3"]{
  background-image: url('../images/protokoll/pipi/kacke-2.png');
}
[data-content="detail-protokoll"] .poo[data-poo="2"]{
  background-image: url('../images/protokoll/pipi/kacke-3.png');
}
[data-content="detail-protokoll"] .poo[data-poo="1"]{
  background-image: url('../images/protokoll/pipi/kacke-4.png');
}

[data-content='view-protokoll'] .detailChart{
  position: relative;
  height:90%;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:90%;
  margin:0.5% auto;
  background-color:#d4dbf0;
  border:1px solid #d4dbf0;
  border-radius: 15px;
}

.jqplot-target{
  width:80%;
  margin:0 auto;
}

.jqplot-point-label {
  color : #ffffff;
  margin-left: -20px;
}

#chart2 div.jqplot-xaxis-tick{
  margin-left:-11%;
}

[data-content="view-protokoll"] .dropdownDetail{
  margin-left:10%;
  text-align: left;
}

.ui-selectmenu-button.ui-button{
	margin-left: 5px;
	width:50%;
	height:1.8em;
	background-color:#ffffff;
	text-align:center;
}

.ui-selectmenu-icon{
	position: relative;
  top: -22%;
  left: 7%;
  width: 20%;
  height: 144%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:50%;
	background-image: url('../images/protokoll/arrow-down-white.png');
  background-color:#ef9600;
}

.ui-selectmenu-button-open .ui-selectmenu-icon{
	position: relative;
  top: -22%;
  left: 7%;
  width: 20%;
  height: 144%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:50%;
	background-image: url('../images/protokoll/arrow-up-white.png');
  background-color:#ef9600;
}

.ui-selectmenu-menu {
	background-color:#ffffff;
	/* padding:1em; */
}
.ui-selectmenu-menu .ui-menu {
	/* background-color:#ffffff; */
	padding:1em;
}
.ui-menu .ui-state-focus, .ui-menu .ui-state-active{
  background-color:#f9ecd3;
  margin:0!important;
}

.ui-menu .ui-menu-item{
	text-align:center;
}
.ui-menu .ui-menu-item-wrapper{
  padding:0.5em!important;
}
.ui-menu .ui-menu-item:last-child{
	border-bottom: none;
  padding-bottom: 1em;
}

.ui-selectmenu-text {
  padding-top: 0.3em;
  color:#005eb8;
  font-family: 'ImagoBQ-Book';
}

.showDayDetails .dropdown{
  font-size: 0.75em;
}
.showDayDetails .dropdown .ui-selectmenu-text {
  padding-top: 0.3em;
  color:#ef9600;
  font-family: 'ImagoBQ-Book';
  padding-left:20%;
}
.showDayDetails .dropdown .ui-selectmenu-button.ui-button{
  width:8em!important;
  border-radius: 15px;
  border:1px solid #d4dbf0;
}
.showDayDetails .dropdown .ui-selectmenu-icon{
	position: relative;
  top: -16%;
  left: 7%;
  width: 20%;
  height: 135%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image: url('../images/protokoll/lupe.png');
  background-color:#ffffff;
}
.showDayDetails .dropdown .ui-selectmenu-icon.ui-icon{
  float:left;
}

.showDayDetails .dropdown .ui-selectmenu-button-open .ui-selectmenu-icon{
	position: relative;
  top: -16%;
  left: 7%;
  width: 20%;
  height: 135%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image: url('../images/protokoll/lupe.png');
  background-color:#ffffff;
}
.showDayDetails .dropdown .ui-selectmenu-menu .ui-menu {
	background-color:#ffffff;
	padding:1em;
}
.showDayDetails .dropdown .ui-menu .ui-state-focus, .ui-menu .ui-state-active{
  background-color:#d4dbf0;
  margin:0!important;
}

.showDayDetails .dropdown .ui-menu .ui-menu-item{
	text-align:center;
}
.showDayDetails .dropdown .ui-menu .ui-menu-item-wrapper{
  padding:0.5em!important;
}
.showDayDetails .dropdown .ui-menu .ui-menu-item:last-child{
	border-bottom: none;
  padding-bottom: 1em;
}

.showDayDetails{
  margin-top:3%;
}

.dayDetails .hoseDetails,
.chart2details{
  display:flex;
  justify-content: center;
}

.dayDetails .hoseDetails .pipi,
.chart2details .pipi{
  /* width:100%; */
  /* height:100%; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/protokoll/tropfen.png");
  text-indent: 2em;
}
.dayDetails .hoseDetails .poo,
.chart2details .poo{
  /* width:100%; */
  /* height:100%; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/protokoll/emoji.png");
  text-indent: 2em;
}
.dayDetails .hoseDetails .wet,
.chart2details .wet{
  /* width:100%; */
  /* height:100%; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/protokoll/pipi-nachts.png");
  text-indent: 2em;
}

[data-popup="details"] .blase-content{
  margin:0 auto;
  font-size: 0.8em;
}

[data-popup="details"] .highlight{
  font-family: "ImagoBQ-Bold";
}

[data-popup="details"] .urgeHasi{
  width:100%;
  height:50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-popup="details"] .urgeHasi[data-urge="0"]{
  background-image: url('../images/protokoll/pipi/hase-1.png');
}
[data-popup="details"] .urgeHasi[data-urge="1"]{
  background-image: url('../images/protokoll/pipi/hase-2.png');
}
[data-popup="details"] .urgeHasi[data-urge="2"]{
  background-image: url('../images/protokoll/pipi/hase-3.png');
}
[data-popup="details"] .urgeHasi[data-urge="3"]{
  background-image: url('../images/protokoll/pipi/hase-4.png');
}
[data-popup="details"] .tropfen{
  width:100%;
  height:30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-popup="details"] .tropfen[data-tropfen="1"]{
  background-image: url('../images/protokoll/pipi/tropfen-1.png');
}
[data-popup="details"] .tropfen[data-tropfen="2"]{
  background-image: url('../images/protokoll/pipi/tropfen-2.png');
}
[data-popup="details"] .tropfen[data-tropfen="3"]{
  background-image: url('../images/protokoll/pipi/tropfen-3.png');
}
[data-popup="details"] .poo{
  width:100%;
  height:30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* background-image: url('../images/protokoll/arrow-up-white.png'); */
}
[data-popup="details"] .poo[data-poo="4"]{
  background-image: url('../images/protokoll/pipi/kacke-1.png');
}
[data-popup="details"] .poo[data-poo="3"]{
  background-image: url('../images/protokoll/pipi/kacke-2.png');
}
[data-popup="details"] .poo[data-poo="2"]{
  background-image: url('../images/protokoll/pipi/kacke-3.png');
}
[data-popup="details"] .poo[data-poo="1"]{
  background-image: url('../images/protokoll/pipi/kacke-4.png');
}

[data-popup="details"] .saveBox {
  /* position: relative; */
  display:flex;
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 40%;
  height:40%;
  margin: 0.5% auto;
  /* border: 1px solid #ef9600; */
  border-radius: 15px;
  background-color: #ffffff;
  /* color:#ffffff; */
  text-align: center;
  padding:2%;
  box-shadow: 0px 0px 25px 0px #edc47a;
}

#chart2 div.jqplot-xaxis-tick .ui-selectmenu-text {
  padding-top: 0.3em;
  color:#ef9600;
  font-family: 'ImagoBQ-Book';
}

#chart2 div.jqplot-xaxis-tick .ui-selectmenu-button.ui-button{
  width:8em!important;
  border-radius: 15px;
  border:1px solid #d4dbf0;
}
#chart2 div.jqplot-xaxis-tick .ui-selectmenu-icon{
	position: relative;
  top: -16%;
  left: 7%;
  width: 20%;
  height: 135%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image: url('../images/protokoll/kalender.png');
  background-color:#ffffff;
}

#chart2 div.jqplot-xaxis-tick .ui-selectmenu-button-open .ui-selectmenu-icon{
	position: relative;
  top: -16%;
  left: 7%;
  width: 20%;
  height: 135%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image: url('../images/protokoll/kalender.png');
  background-color:#ffffff;
}
#chart2 div.jqplot-xaxis-tick .ui-selectmenu-menu .ui-menu {
	background-color:#ffffff;
	padding:1em;
}
#chart2 div.jqplot-xaxis-tick .ui-menu .ui-state-focus, .ui-menu .ui-state-active{
  background-color:#d4dbf0;
  margin:0!important;
}
.selectmenu-radius {
	border-radius: 15px;
  border:1px solid #d4dbf0;
}
#chart2 div.jqplot-xaxis-tick .ui-menu .ui-menu-item{
	text-align:center;
}
#chart2 div.jqplot-xaxis-tick .ui-menu .ui-menu-item-wrapper{
  padding:0.5em!important;
}
#chart2 div.jqplot-xaxis-tick .ui-menu .ui-menu-item:last-child{
	border-bottom: none;
  padding-bottom: 1em;
}

#chart2 div.jqplot-xaxis-tick .ui-selectmenu-text {
  padding-top: 0.3em;
  color:#ef9600;
  font-family: 'ImagoBQ-Book';
}

[data-content="view-protokoll"] .detailNav{
  display:flex;
  margin-bottom: 10%;
  margin-top: 0.5em;
}

[data-content="view-protokoll"] .showDetails{
  display:flex;
  width:20%;
  margin:0 6%;
}
[data-content="view-protokoll"] .showDetails .poo{
  /* width:50%; */
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/PDF_Icon.png');
  flex:1;
  cursor: pointer;
}
[data-content="view-protokoll"] .showDetails .excel{
  /* width:50%; */
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/icon_excel.png');
  flex:1;
}

[data-content="view-protokoll"] .showDetails .schalter{
  /* width:10%; */
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/off.png');
  flex:1;
}
[data-content="view-protokoll"] .showDetails .schalter.on{
  background-image:url('../images/protokoll/on.png');
}
[data-content="view-protokoll"] .toggleTropfen,
[data-content="view-protokoll"] .togglePoo{
  width:50%;
  display:flex;
  margin:0 5%;
  display:none;
}
[data-content="view-protokoll"] .toggleTropfen .tropfen{
  width:50%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/tropfen.png');
}
[data-content="view-protokoll"] .togglePoo .poo{
  width:50%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  background-image:url('../images/protokoll/emoji.png');
}

[data-content="view-protokoll"] .changeDay{
  display:flex;
  align-items: center;
  flex:1;
}

[data-content="view-protokoll"] .detailNav .arrowLeft{
  width:10%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-left-blau.png');
  z-index:5;
  cursor: pointer;
}
[data-content="view-protokoll"] .detailNav .arrowRight{
  width:10%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-right-blau.png');
  z-index:5;
  cursor: pointer;
}

[data-content="view-protokoll"] .detailNav .showDay{
  /* width:80%; */
}

/* ########################################################################## */
/* new-protokoll */
/* ########################################################################## */


[data-content='new-protokoll'] .btnLinks{
  display:flex;
  margin-top:5%;
  justify-content: space-around;
  height:60%;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
}

[data-content='new-protokoll'] .btnLinks .btn-protokollValue{
  width:25%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-color:#7C98CD;
  border-radius: 15px;
  cursor: pointer;
}
[data-value="glas"]{
  background-image:url('../images/howto/glas.png');
}
[data-value="toilet"]{
  background-image:url('../images/howto/toilette.png');
}
[data-value="poo"]{
  background-image:url('../images/howto/emoji.png');
}

nav.protokoll{
  bottom: 13%;
  width: 20%;
  height: 7%;
}
.btn-nav-previous{
  background-repeat:no-repeat;
  background-position:center;
  background-size:25%;
  background-image:url('../images/protokoll/pfeil-links.png');
}
.btn-nav-previous.disabled{
  opacity: 0.5;
}
.btn-nav-glas{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/slider-glas-off.png');
}
.btn-nav-glas.active{
  background-image:url('../images/protokoll/slider-glas-on.png');
}
.btn-nav-toilett{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/slider-toilette-off.png');
}
.btn-nav-toilett.active{
  background-image:url('../images/protokoll/slider-toilette-on.png');
}
.btn-nav-poo{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/slider-emoji-off.png');
}
.btn-nav-poo.active{
  background-image:url('../images/protokoll/slider-emoji-on.png');
}
.btn-nav-next{
  background-repeat:no-repeat;
  background-position:center;
  background-size:25%;
  background-image:url('../images/protokoll/pfeil-rechts.png');
}
.btn-nav-next.disabled{
  opacity: 0.5;
}

[data-content="add-protokoll"] .box{
  display:none;
  top: 15%;
  height: 64%;
  overflow: inherit;
}
[data-content="add-protokoll"] .box.show{
  display:block;
}
[data-content="add-protokoll"] .scrollBox{
  height:100%;
}

[data-content="add-protokoll"] .saveProtokoll{
  position: absolute;
  top: 10%;
  right: 12%;
  width: 200px;
  height: 2%;
}

[data-content="add-protokoll"] .btn-saveProtokoll,
[data-content="add-protokoll"] .btn-editProtokoll{
  position: absolute;
  top: 10%;
  right: 15%;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 1em;
  color: #ffffff;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  font-size: 1em;
  line-height: 0.9em;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center left 0.275em;
  background-size: calc(0.6em + 0.375rem) calc(0.75em + 0.375rem);
  background-image: url("../images/profil/icon-speichern.png");
  cursor: pointer;
}

[data-content="add-protokoll"] .btn-saveProtokoll:hover,
[data-content="add-protokoll"] .btn-editProtokoll:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #edc47a;
}

[data-content="add-protokoll"] .box[data-count='0'] .subBox{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  display:flex;
  height: 50%;
}
[data-content="add-protokoll"] .box[data-count='0'] .subBox .left{
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:20%;
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
  padding:0.5em;
}
[data-content="add-protokoll"] .box[data-count='0'] .subBox .right{
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:80%;
}
[data-content="add-protokoll"] .box[data-count='0'] .subBox .right .glas{
  height:100%;
  width:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="0"]{
  background-image:url('../images/protokoll/glas/Trinken_0.png');
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="1"]{
  background-image:url('../images/protokoll/glas/Trinken_100.png');
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="2"]{
  background-image:url('../images/protokoll/glas/Trinken_200.png');
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="3"]{
  background-image:url('../images/protokoll/glas/Trinken_300.png');
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="4"]{
  background-image:url('../images/protokoll/glas/Trinken_400.png');
}
[data-content='add-protokoll'] .subBox .right .glas[data-status="5"]{
  background-image:url('../images/protokoll/glas/Trinken_500.png');
}

[data-content='add-protokoll'] .entry{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  min-height: 25%;
}
[data-content='add-protokoll'] .text{
  margin-bottom: 3em;
}

[data-content="add-protokoll"] [data-choice='drink'] label {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: flex-start;
  height:100%;
}

[data-content="add-protokoll"] [data-choice='drink'] label span{
	/* color:#c6c6c6; */
}

[data-content="add-protokoll"] [data-choice='drink'] input.singleChoice{
	width: 0px;
	height: 0px;
	display: none;
}

[data-content="add-protokoll"] [data-choice='drink'] input.singleChoice + div.styledCheckbox {
	display: inline-block;
	margin-right: 20px;
	/* min-width: 25px; */
	height: 100%;
	/* max-width: 25px; */
	/* max-height: 25px; */
	border-radius: 0px;
}
[data-content="add-protokoll"] [data-choice='drink'] input.singleChoice + div.styledCheckbox {
	background-repeat:no-repeat;
  background-position:center right;
  background-size:contain;
	background-image:url('../images/protokoll/btn-weiss.png');
}

[data-content="add-protokoll"] [data-choice='drink'] input.singleChoice:checked + div.styledCheckbox {
  background-image: url('../images/protokoll/btn-filled.png');
  /* border-radius: 50%; */
  background-position: center right;
  background-size:contain;
}

[data-content="add-protokoll"] .choicesContainer[data-choice='drink']{
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  font-size: 0.8em;
  height:78%;
  margin-top:.5em;
}

[data-content="add-protokoll"] .choicesContainer[data-choice='drink'] div{
	width:100%;
  padding:0.5% 0;
  margin: 1% 0;
  height:100%;
  cursor: pointer;
}
[data-content="add-protokoll"] .choicesContainer[data-choice='drink'] input{
	width:95%;
}

[data-content="add-protokoll"] .box[data-count='0'] .sliderContainer{
	position: relative;
  background-color:#ffffff;
  width:50%;
  margin:0 auto;
}

[data-content="add-protokoll"] .box[data-count='0'] .sliderHandle.ui-slider-handle{
	width:2em!important;
	height: 2em!important;
	margin-top:0.2em;
	text-align: center;
	border-radius: 1.5em;
	font-weight: bold;
	line-height: 1.6em;
	color: white;
	border-width: 0px;
	font-size: 1.2em;
	margin-left:-1.1em!important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/hand-slider.png');
  cursor: pointer;
}
[data-content="add-protokoll"] .box[data-count='0'] .sliderHandle.ui-slider-handle:focus,
[data-content="add-protokoll"] .box[data-count='0'] .sliderHandle.ui-slider-handle:active{
  outline:none;
}

[data-content="add-protokoll"] .box[data-count='0'] .ui-slider-horizontal .ui-slider-handle {
  top: -0.9em!important;
}

[data-content="add-protokoll"] .box[data-count='0'] div.slider.ui-sortable-handle{
	width: 100%;
}

[data-content="add-protokoll"] .box[data-count='0'] .ui-slider-range{
	background-color:#ef9600;
}

[data-content="add-protokoll"] .box[data-count='0'] #sliderValue{
	position: relative;
	font-size: 2em;
	text-align: center;
  width:100%;
}

[data-content="add-protokoll"] .box[data-count='0'] .valueContainer{
	position: absolute;
  right: -42%;
  top: -190%;
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  width:30%;
}

[data-content="add-protokoll"] .changeDrinkLayout{
  position: absolute;
  right:0;
  top:0;
  width:15%;
  /* height:10%; */
  /* background-color:red; */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
[data-content="add-protokoll"] .drinkSlider{
  background-color:#ffffff;
  border-radius: 15px;
  border:1px solid #005EB8;
  width:100px;
  height:50px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:77px 38px;
  background-image:url('../images/protokoll/umschalten-blau-1@2x.png');
  margin-bottom: 5%;
  cursor: pointer;
}
[data-content="add-protokoll"] .drinkSlider.activ{
  background-color:#005EB8;
  background-image:url('../images/protokoll/umschalten-blau-2@2x.png');
}
[data-content="add-protokoll"] .drinkBottles{
  background-color:#ffffff;
  border-radius: 15px;
  border:1px solid #EF9600;
  width:100px;
  height:50px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:77px 38px;
  background-image:url('../images/protokoll/umschalten-orange@2x.png');
  margin-bottom: 5%;
  cursor: pointer;
}
[data-content="add-protokoll"] .drinkBottles.activ{
  background-color:#EF9600;
}
[data-content="add-protokoll"] .drinkSum{
  background-color:#D4DBF0;
  border-radius: 15px;
  border:1px solid #D4DBF0;
  width:100px;
  height:50px;
  display:flex;
  justify-content:center;
  align-items: center;
}
[data-content="add-protokoll"] .box[data-count='0'] .scrollBox[data-drink-state="2"] .subBox{
  height:80%;
}
[data-content="add-protokoll"] .box[data-count='0'] .scrollBox[data-drink-state="2"] .subBox .left{
  height:60%;
}
[data-drink-state="2"] .right{
  display:flex;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: flex-start;
}

[data-content="add-protokoll"] .bottle {
  width:25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
[data-content="add-protokoll"] .bottle .bottleImg {
  width:100%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  /* background-image:url('../images/protokoll/umschalten-orange@2x.png'); */
}
[data-content="add-protokoll"] .bottle[data-bottle='1'] {
  height:100%;
}
[data-content="add-protokoll"] .bottle[data-bottle='1'] .bottleImg {
  background-size:auto 80%;
  /* background-size: 147px 350px; */
  background-image:url('../images/protokoll/drink/Flasche_200@2x.png');
}
[data-content="add-protokoll"] .bottle[data-bottle='2'] {
  height:100%;
}
[data-content="add-protokoll"] .bottle[data-bottle='2'] .bottleImg {
  background-size:auto 80%;
  height:60%;
  /* background-size: 144px 218px; */
  background-image:url('../images/protokoll/drink/Glas_100@2x.png');
}
[data-content="add-protokoll"] .bottle[data-bottle='3'] {
  height:100%;
}
[data-content="add-protokoll"] .bottle[data-bottle='3'] .bottleImg {
  background-size:auto 80%;
  height:45%;
  /* background-size: 110px 140px; */
  background-image:url('../images/protokoll/drink/Becher_50@2x.png');
}

[data-content="add-protokoll"] .qtyContainer {
  /* position: absolute; */
  /* left: 65%; */
  /* top: 89%; */
  /* width: 19%; */
  /* height: 6.51%; */
  height:20%;
  width:50%;
  height:75px;
}
[data-content="add-protokoll"] .UI {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}
[data-content="add-protokoll"] .doPlus,
[data-content="add-protokoll"] .doMinus {
  width: 50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* background-color: rgba(200,0,0,0.3); */
  cursor: pointer;
}
[data-content="add-protokoll"] .doMinus {
  background-image: url('../images/protokoll/drink/Icon_awesome-minus-circle@2x.png');
}
[data-content="add-protokoll"] .doPlus {
  background-image: url('../images/protokoll/drink/Icon_awesome-plus-circle@2x.png');
}
[data-content="add-protokoll"] .mid {
  height: 100%;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* background-color: rgba(0,200,0,0.3); */
}
[data-content="add-protokoll"] .qty {
  width: 100%;
  color: #213f7d;
  font-size: 1.5em;
  line-height: 1.5em;
  font-size: 1em;
  margin: 0 5%;
}


[data-content="add-protokoll"] .urgeContainer{
  display:flex;
  height: 75%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ImagoBQ-Bold";
}
[data-content='add-protokoll'] .urgeHasi{
  display:flex;
  flex-direction: column;
  align-items: center;
}
[data-content='add-protokoll'] .urgeContainer div{
  width:95%;
  height:75%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* border:3px solid #d4dbf0; */
  /* border-radius: 15px; */
  cursor: pointer;
}
[data-content='add-protokoll'] .urgeContainer div .urgeImg[data-value='0']{
  background-image: url('../images/protokoll/pipi/hase-1.png');
}
[data-content='add-protokoll'] .urgeContainer div .urgeImg[data-value='1']{
  background-image: url('../images/protokoll/pipi/hase-2.png');
}
[data-content='add-protokoll'] .urgeContainer div .urgeImg[data-value='2']{
  background-image: url('../images/protokoll/pipi/hase-3.png');
}
[data-content='add-protokoll'] .urgeContainer div .urgeImg[data-value='3']{
  background-image: url('../images/protokoll/pipi/hase-4.png');
}
[data-content='add-protokoll'] .urgeContainer div.urgeBtn{
  width:95%;
  height:30%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/protokoll/pipi/kreis-leer.png');
}
[data-content='add-protokoll'] .urgeContainer div.selected .urgeBtn{
  background-image: url('../images/protokoll/pipi/filled.png');
}

[data-content="add-protokoll"] [data-choice='urge'] label {
  display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
  justify-content: center;
  height:100%;
}

[data-content="add-protokoll"] [data-choice='urge'] label span{
  text-align: center;
  height:90%;
}

[data-content="add-protokoll"] [data-choice='urge'] input.singleChoice{
	width: 0px;
	height: 0px;
	display: none;
}

[data-content="add-protokoll"] [data-choice='urge'] input.singleChoice + div.styledCheckbox {
	display: inline-block;
	/* margin-right: 20px; */
	min-width: 55px;
	min-height: 55px;
	max-width: 55px;
	max-height: 55px;
	border-radius: 0px;
}
[data-content="add-protokoll"] [data-choice='urge'] input.singleChoice + div.styledCheckbox {
	background-repeat:no-repeat;
  background-position:center;
  background-size:47px 47px;
	background-image:url('../images/protokoll/pipi/kreis-leer.png');
}

[data-content="add-protokoll"] [data-choice='urge'] input.singleChoice:checked + div.styledCheckbox {
  background-image: url('../images/protokoll/pipi/filled.png');
  border-radius: 50%;
  background-position: center;
  background-size:47px 47px;
}

[data-content="add-protokoll"] .choicesContainer[data-choice='urge']{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-evenly;
  flex-direction: row;
  height:75%;
}

[data-content="add-protokoll"] .choicesContainer[data-choice='urge'] div{
  height:100%;
}

[data-content="add-protokoll"] .choicesContainer[data-choice='urge'] img{
  height:100%;
}

[data-content="add-protokoll"] .containerBox{
  display:none;
  height:92%;
  height:100%;
}
[data-content="add-protokoll"] .containerBox.show{
  display:block;
}

[data-content="add-protokoll"] .parentContainer{
  display:flex;
  height: 85%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ImagoBQ-Bold";
}

[data-content='add-protokoll'] .parentYesContainer,
[data-content='add-protokoll'] .parentNoContainer{
  display:flex;
  flex-direction: column;
  align-items: center;
}
[data-content='add-protokoll'] .parentContainer div{
  width:95%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:3px solid #ffffff;
  border-radius: 15px;
  cursor: pointer;
}
[data-content='add-protokoll'] .parentContainer div.parentYes{
  background-image: url('../images/protokoll/pipi/mama-papa.png');
}
[data-content='add-protokoll'] .parentContainer div.parentNo{
  background-image: url('../images/protokoll/pipi/alleine.png');
}
[data-content='add-protokoll'] .parentContainer div.text{
  width:auto;
  height:auto;
}
[data-content='add-protokoll'] .parentContainer div.parentBtn{
  width:95%;
  height:20%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/protokoll/pipi/kreis-leer.png');
}
[data-content='add-protokoll'] .parentContainer div.selected .parentBtn{
  background-image: url('../images/protokoll/pipi/filled.png');
}

[data-content="add-protokoll"] .hoseContainer{
  display:flex;
  height: 85%;
  align-items: center;
  justify-content: center;
}

[data-content='add-protokoll'] .hoseContainer div{
  width:45%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:3px solid #ffffff;
  border-radius: 15px;
  cursor: pointer;
}
[data-content='add-protokoll'] .hoseContainer div.hoseYes{
  background-image: url('../images/protokoll/pipi/ja.png');
}
[data-content='add-protokoll'] .hoseContainer div.hoseNo{
  background-image: url('../images/protokoll/pipi/nein.png');
}
[data-content='add-protokoll'] .hoseContainer div.selected{
  border:3px solid #005eb8;
  border-radius: 15px;
  /* background-color:#f9ecd3; */
}

[data-content='add-protokoll'] .wetting{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  height: 60%;
}

[data-content="add-protokoll"] .tropfenContainer{
  display:flex;
  height: 75%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ImagoBQ-Bold";
}
[data-content='add-protokoll'] .tropfen{
  display:flex;
  flex-direction: column;
  align-items: center;
}
[data-content='add-protokoll'] .tropfenContainer div{
  width:95%;
  height:75%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:3px solid #d4dbf0;
  border-radius: 15px;
  cursor: pointer;
}
[data-content='add-protokoll'] .tropfenContainer div .tropfenImg[data-value='1']{
  background-image: url('../images/protokoll/pipi/tropfen-1.png');
}
[data-content='add-protokoll'] .tropfenContainer div .tropfenImg[data-value='2']{
  background-image: url('../images/protokoll/pipi/tropfen-2.png');
}
[data-content='add-protokoll'] .tropfenContainer div .tropfenImg[data-value='3']{
  background-image: url('../images/protokoll/pipi/tropfen-3.png');
}
[data-content='add-protokoll'] .tropfenContainer div.tropfenBtn{
  width:95%;
  height:30%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/protokoll/pipi/white_kreis-leer.png');
}
[data-content='add-protokoll'] .tropfenContainer div.selected .tropfenBtn{
  background-image: url('../images/protokoll/pipi/white_filled.png');
}

[data-content='add-protokoll'] .poo{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  border:1px solid #d4dbf0;
  border-radius: 15px;
  background-color:#d4dbf0;
  height: 85%;
}

[data-content="add-protokoll"] .pooContainer{
  display:flex;
  height: 75%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ImagoBQ-Bold";
}
[data-content='add-protokoll'] .pooEmoji{
  display:flex;
  flex-direction: column;
  align-items: center;
}
[data-content='add-protokoll'] .pooContainer div{
  width:95%;
  height:75%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:3px solid #d4dbf0;
  border-radius: 15px;
  cursor: pointer;
}
[data-content='add-protokoll'] .pooContainer div .pooImg[data-value='4']{
  background-image: url('../images/protokoll/pipi/kacke-1.png');
}
[data-content='add-protokoll'] .pooContainer div .pooImg[data-value='3']{
  background-image: url('../images/protokoll/pipi/kacke-2.png');
}
[data-content='add-protokoll'] .pooContainer div .pooImg[data-value='2']{
  background-image: url('../images/protokoll/pipi/kacke-3.png');
}
[data-content='add-protokoll'] .pooContainer div .pooImg[data-value='1']{
  background-image: url('../images/protokoll/pipi/kacke-4.png');
}
[data-content='add-protokoll'] .pooContainer div.pooBtn{
  width:95%;
  height:30%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/protokoll/pipi/white_kreis-leer.png');
}
[data-content='add-protokoll'] .pooContainer div.selected .pooBtn{
  background-image: url('../images/protokoll/pipi/white_filled.png');
}

[data-content="add-protokoll"] .box[data-count='1'] .subBox{
  position: relative;
  padding:0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:90%;
  margin:0.5% auto;
  display:flex;
  height:40%;
  align-items: flex-end;
}
/* [data-content="add-protokoll"] .box[data-count='1'] .subBox .left{ */
  /* width:20%; */
/* } */
[data-content="add-protokoll"] .box[data-count='1'] .windelContainer{
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width:100%;
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
  padding:0.5em;
}
[data-content="add-protokoll"] .box[data-count='1'] .subBox .right{
  font-family: 'ImagoBQ-Book';
  text-align: center;
  width:100%;
  height:100%;
}
[data-content="add-protokoll"] .box[data-count='1'] .subBox .right .becher{
  height:100%;
  width:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="0"]{
  background-image:url('../images/protokoll/becher/becher-0.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="1"]{
  background-image:url('../images/protokoll/becher/becher-50.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="2"]{
  background-image:url('../images/protokoll/becher/becher-100.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="3"]{
  background-image:url('../images/protokoll/becher/becher-150.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="4"]{
  background-image:url('../images/protokoll/becher/becher-200.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="5"]{
  background-image:url('../images/protokoll/becher/becher-250.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="6"]{
  background-image:url('../images/protokoll/becher/becher-300.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="7"]{
  background-image:url('../images/protokoll/becher/becher-350.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="8"]{
  background-image:url('../images/protokoll/becher/becher-400.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="9"]{
  background-image:url('../images/protokoll/becher/becher-450.png');
}
[data-content='add-protokoll'] .subBox .right .becher[data-status="10"]{
  background-image:url('../images/protokoll/becher/becher-500.png');
}

[data-content="add-protokoll"] .box[data-count='1'] .sliderContainer{
	position: relative;
  background-color:#ffffff;
  width:50%;
  margin:0 auto;
}

[data-content="add-protokoll"] .box[data-count='1'] .sliderHandle.ui-slider-handle{
	width:2em!important;
	height: 2em!important;
	margin-top:0.2em;
	text-align: center;
	border-radius: 1.5em;
	font-weight: bold;
	line-height: 1.6em;
	color: white;
	border-width: 0px;
	font-size: 1.2em;
	margin-left:-1.1em!important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/protokoll/hand-slider.png');
  cursor: pointer;
}
[data-content="add-protokoll"] .box[data-count='1'] .sliderHandle.ui-slider-handle:focus,
[data-content="add-protokoll"] .box[data-count='1'] .sliderHandle.ui-slider-handle:active{
  outline:none;
}
[data-content="add-protokoll"] .box[data-count='1'] .sliderHandle.ui-slider-handle.filter{
  filter:grayscale(1);
}

[data-content="add-protokoll"] .box[data-count='1'] .ui-slider-horizontal .ui-slider-handle {
  top: -0.9em!important;
}

[data-content="add-protokoll"] .box[data-count='1'] div.slider.ui-sortable-handle{
	width: 100%;
}

[data-content="add-protokoll"] .box[data-count='1'] .ui-slider-range{
	background-color:#ef9600;
}

[data-content="add-protokoll"] .box[data-count='1'] #sliderValue{
	position: relative;
	font-size: 2em;
	text-align: center;
  width:100%;
}

[data-content="add-protokoll"] .box[data-count='1'] .valueContainer{
	position: absolute;
  right: -42%;
  top: -190%;
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  width:30%;
}

[data-content='checkBx'],
[data-content='save-protokoll'],
[data-content='edit-protokoll'],
[data-content='forgot-save-protokoll'],
[data-content='delete-protokoll'],
[data-content='cant-save-protokoll']{
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.8);
  z-index:20;
}
[data-content='checkBx'] .saveBox,
[data-content='save-protokoll'] .saveBox,
[data-content='edit-protokoll'] .saveBox,
[data-content='forgot-save-protokoll'] .saveBox,
[data-content='delete-protokoll'] .saveBox,
[data-content='cant-save-protokoll'] .saveBox {
  /* position: relative; */
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 50%;
  margin: 0.5% auto;
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  height: 50%;
  color:#ffffff;
  text-align: center;
  padding:2%;
}

[data-content='checkBx'] .saveBox .save-btn,
[data-content='save-protokoll'] .saveBox .save-btn,
[data-content='edit-protokoll'] .saveBox .save-btn,
[data-content='forgot-save-protokoll'] .saveBox .save-btn,
[data-content='delete-protokoll'] .saveBox .save-btn,
[data-content='cant-save-protokoll'] .saveBox .save-btn{
  display:flex;
  justify-content: space-evenly;
}
[data-content] .saveBox .save-btn div:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #ffffff;
}
[data-content='checkBx'] .saveBox .btn-save-ok,
[data-content='save-protokoll'] .saveBox .btn-save-ok,
[data-content='save-protokoll'] .saveBox .btn-save-continue,
[data-content='edit-protokoll'] .saveBox .btn-save-ok,
[data-content='forgot-save-protokoll'] .saveBox .btn-save-ok,
[data-content='forgot-save-protokoll'] .saveBox .btn-save-cancel,
[data-content='delete-protokoll'] .saveBox .btn-save-ok,
[data-content='delete-protokoll'] .saveBox .btn-save-cancel,
[data-content='cant-save-protokoll'] .saveBox .btn-save-continue{
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ef9600;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:25%;
  cursor: pointer;
}

/* ########################################################################## */
/* Learning */
/* ########################################################################## */

.nav.learn.mobile{
  display:none;
}
.hamburg {
  display: block;
  background: #EF9600;
  width: 40px;
  height: 40px;
  position: relative;
  /* margin:0 auto; */
  border-radius: 50%;
  /* transition: border-radius .5s; */
}

.hamburg.line {
  position: absolute;
  left:10px;
  height: 3px;
  width: 20px;
  background: #fff;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}

.hamburg.line:nth-child(1) { top: 11px; }
.hamburg.line:nth-child(2) { top: 19px; }
.hamburg.line:nth-child(3) { top: 27px; }

.hamburg.checked .hamburg.line:nth-child(1){
  transform: translateY(8px) rotate(-45deg);
}

.hamburg.checked .hamburg.line:nth-child(2){
  opacity:0;
}

.hamburg.checked .hamburg.line:nth-child(3){
  transform: translateY(-8px) rotate(45deg);
}

.info-hase{
  position: absolute;
  left:0;
  top: 55%;
  width: 11%;
  height: 36%;
  background-repeat:no-repeat;
  background-position:top left;
  background-size:contain;
  background-image:url('../images/learning/hase-links.png');
  z-index:20;
  cursor: pointer;
}
.info-hase-click{
  position: absolute;
  left:0;
  top: 55%;
  width: 8%;
  height: 36%;
  z-index:20;
}
.info-hase:hover{
  /* border-radius: 15px; */
  /* box-shadow: 0px 0px 25px 0px #ef9600; */
  /* background-color:#d4dbf0; */
  /* background-color:#ef9600; */
  /* color:#ffffff; */
  /* filter: brightness(0) invert(1); */
}

.did-you-know{
  position: absolute;
  left:0%;
  top: 53%;
  width: 40%;
  height: 38%;
  background-color:#d4dbf0;
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration:1s;
  z-index:19;
}
.did-you-know.peek{
  /* display:block; */
  /* animation: hasi-peek 1s forwards; */
  transform: translateX(-75%);
}
/* @keyframes hasi-peek {
  100% { transform: translateX(-75%); }
} */
/* .did-you-know.peek-back{
  display:block;
  transform: translateX(-75%);
  animation: hasi-peek-back 1s forwards;
}
@keyframes hasi-peek-back {
  100% { transform: translateX(-100%); }
} */
.did-you-know.show{
  display:block;
  animation: hasi-slide-in 1s forwards;
}
@keyframes hasi-slide-in {
  0% { transform: translate(-75%);}
  100% { transform: translateX(0%); }
}
.did-you-know.hide{
  animation: hasi-slide-out 1s forwards;
}
@keyframes hasi-slide-out {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.close-info{
  position: absolute;
  top:1%;
  right:1%;
  width:28px;
  height: 28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url('../images/learning/btn-close.png');
  cursor: pointer;
}

.did-you-know .subheadline{
  margin:10% 20% 10% 30%;
  font-family: 'ImagoBQ-Bold';
  font-size: 1.2em;
}
.did-you-know .text{
  margin:0% 10% 0% 30%;
}

[data-content="learning"] .box{
  display:flex;
  top: 10%;
  width: 80%;
  height: 75%;
  overflow: visible;
}

[data-content="learning"] .boxLeft{
  width:20%;
  margin-right:5%;
  text-align: left;
  /* border:1px solid green; */
}

[data-content="learning"] .boxLeft .nav-learn{
  padding:0.5em 1em;
  font-size:0.9em;
  cursor: pointer;
}
[data-content="learning"] .boxLeft .nav-learn:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 15px 0px #edc47a;
}

[data-content="learning"] .boxLeft .nav-learn.active{
  border:1px solid #f9ecd3;
  border-radius: 15px;
  background-color:#f9ecd3;
  font-family: "ImagoBQ-Bold";
}
[data-content="learning"] .boxLeft .nav-learn .navHL{
  width:100%;
  background-repeat: no-repeat;
  background-position: center right 0.275em;
  background-size: 14px 8px;
  background-image: url('../images/learning/arrow-up.png');
}
[data-content="learning"] .boxLeft .nav-learn .navHL.closed{
  background-image: url('../images/learning/arrow-down.png');
}
[data-content="learning"] .boxLeft .nav-learn .navHL.noBg{
  background-image: none;
}
[data-content="learning"] .boxLeft .nav-learn.active .navSubline{
  display:block;
  font-family: "ImagoBQ-Book";
  z-index:5;
}
[data-content="learning"] .boxLeft .nav-learn .navSubline.closed{
  display:none;
}
[data-content="learning"] .boxLeft .nav-learn .navSubline .subline-link{
  padding:5% 0;
  font-size: 0.9em;
}

[data-content="learning"] [data-step="part"] {
  width:75px;
  padding: 0.5em 1em;
  font-size: 0.9em;
  text-decoration: none;
  color: #ef9600;
  font-family: "ImagoBQ-Bold";
  margin: 0.5% 0;
  background-repeat: no-repeat;
  background-position: center right 0.275em;
  background-size: calc(1em + 0.375rem) calc(1em + 0.375rem);
  background-image: url('../images/learning/btn-weiter.png');
}
.nav-learn-next-step[data-step="slide"] {
  position: absolute;
  right:10%;
  bottom:15%;
  width:50px;
  height:50px;
  /* padding: 0.5em 1em; */
  font-size: 0.9em;
  text-decoration: none;
  color: #ef9600;
  font-family: "ImagoBQ-Bold";
  /* margin: 0.5% 0; */
  border-radius: 50%;
  background-color:#ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../images/learning/btn-weiter.png');
  z-index:5;
  cursor: pointer;
}
[data-content="learning"] [data-step="part"]:hover,
.nav-learn-next-step[data-step="slide"]:hover{
  border-radius: 50%;
  box-shadow: 0px 0px 25px 0px #ef9600;
}

[data-content="learning"] .boxRight{
  width:75%;
}

[data-content='learning'] .learning-entry{
  display:none;
  position: relative;
  height:90%;
}
[data-content='learning'] .learning-entry.active{
  display:block;
}

.dotNavi{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height:10px;
}
.line{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background-color:rgba(239,150,0,0.5);
}
.lineFilled{
  position: absolute;
  left:0;
  top:0;
  height:5px;
  background-color:#ef9600;
}
[data-part="1"] .lineFilled[data-dot="1"] { width:  0%; }
[data-part="1"] .lineFilled[data-dot="3"] { width: 50%; }
[data-part="1"] .lineFilled[data-dot="4"] { width:100%; }

[data-part="3"] .lineFilled[data-dot="1"]  { width:  0%; }
[data-part="3"] .lineFilled[data-dot="2"]  { width: 11%; }
/* [data-part="3"] .lineFilled[data-dot="3"]  { width: 12.5%; } */
[data-part="3"] .lineFilled[data-dot="4"]  { width: 22%; }
[data-part="3"] .lineFilled[data-dot="5"]  { width: 33%; }
[data-part="3"] .lineFilled[data-dot="6"]  { width: 44%; }
[data-part="3"] .lineFilled[data-dot="7"]  { width: 55%; }
[data-part="3"] .lineFilled[data-dot="8"]  { width: 66%; }
[data-part="3"] .lineFilled[data-dot="9"]  { width: 77%; }
[data-part="3"] .lineFilled[data-dot="10"] { width: 88%; }
[data-part="3"] .lineFilled[data-dot="11"] { width:100%; }

[data-part="4"] .lineFilled[data-dot="1"] { width:  0%; }
[data-part="4"] .lineFilled[data-dot="3"] { width: 11%; }
[data-part="4"] .lineFilled[data-dot="4"] { width: 22%; }
[data-part="4"] .lineFilled[data-dot="5"] { width: 33%; }
[data-part="4"] .lineFilled[data-dot="6"] { width: 44%; }
[data-part="4"] .lineFilled[data-dot="7"] { width: 55%; }
[data-part="4"] .lineFilled[data-dot="8"] { width: 66%; }
[data-part="4"] .lineFilled[data-dot="9"] { width: 77%; }
[data-part="4"] .lineFilled[data-dot="10"]{ width: 88%; }
[data-part="4"] .lineFilled[data-dot="11"]{ width:100%; }

[data-part="5"] .lineFilled[data-dot="1"] { width:  0.0%; }
[data-part="5"] .lineFilled[data-dot="2"] { width: 12.5%; }
[data-part="5"] .lineFilled[data-dot="3"] { width: 25.0%; }
[data-part="5"] .lineFilled[data-dot="4"] { width: 37.5%; }
[data-part="5"] .lineFilled[data-dot="5"] { width: 50.0%; }
[data-part="5"] .lineFilled[data-dot="6"] { width: 62.5%; }
[data-part="5"] .lineFilled[data-dot="7"] { width: 75.0%; }
[data-part="5"] .lineFilled[data-dot="8"] { width: 87.5%; }
[data-part="5"] .lineFilled[data-dot="9"] { width:100.0%; }

[data-content="popup-blase"] .lineFilled[data-dot="1"] { width:  0%; }
[data-content="popup-blase"] .lineFilled[data-dot="2"] { width: 50%; }
[data-content="popup-blase"] .lineFilled[data-dot="3"] { width:100%; }
[data-content="popup-pinkeln"] .lineFilled[data-dot="1"] { width:  0%; }
[data-content="popup-pinkeln"] .lineFilled[data-dot="2"] { width: 50%; }
[data-content="popup-pinkeln"] .lineFilled[data-dot="3"] { width:100%; }

.dot{
  position: absolute;
  top:-5px;
  width:15px;
  height:15px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #ef9600;
  cursor: pointer;
}
.dot:hover{
  background-color:#ef9600;
}
.dot.filled{
  background-color:#ef9600;
}
[data-part="1"] .dot[data-dot="1"] { left:  0%; }
[data-part="1"] .dot[data-dot="3"] { left: 50%; }
[data-part="1"] .dot[data-dot="4"] { left:100%; }

[data-part="3"] .dot[data-dot="1"]  { left:  0%; }
[data-part="3"] .dot[data-dot="2"] { left: 11%; }
/* [data-part="3"] .dot[data-dot="3"]  { left: 12.5%; } */
[data-part="3"] .dot[data-dot="4"]  { left: 22%; }
[data-part="3"] .dot[data-dot="5"]  { left: 33%; }
[data-part="3"] .dot[data-dot="6"]  { left: 44%; }
[data-part="3"] .dot[data-dot="7"]  { left: 55%; }
[data-part="3"] .dot[data-dot="8"]  { left: 66%; }
[data-part="3"] .dot[data-dot="9"]  { left: 77%; }
[data-part="3"] .dot[data-dot="10"] { left: 88%; }
[data-part="3"] .dot[data-dot="11"] { left:100.0%; }

[data-part="4"] .dot[data-dot="1"] { left:  0%; }
[data-part="4"] .dot[data-dot="3"] { left: 11%; }
[data-part="4"] .dot[data-dot="4"] { left: 22%; }
[data-part="4"] .dot[data-dot="5"] { left: 33%; }
[data-part="4"] .dot[data-dot="6"] { left: 44%; }
[data-part="4"] .dot[data-dot="7"] { left: 55%; }
[data-part="4"] .dot[data-dot="8"] { left: 66%; }
[data-part="4"] .dot[data-dot="9"] { left: 77%; }
[data-part="4"] .dot[data-dot="10"]{ left: 88%; }
[data-part="4"] .dot[data-dot="11"]{ left:100%; }

[data-part="5"] .dot[data-dot="1"] { left:  0.0%; }
[data-part="5"] .dot[data-dot="2"] { left: 12.5%; }
[data-part="5"] .dot[data-dot="3"] { left: 25.0%; }
[data-part="5"] .dot[data-dot="4"] { left: 37.5%; }
[data-part="5"] .dot[data-dot="5"] { left: 50.0%; }
[data-part="5"] .dot[data-dot="6"] { left: 62.5%; }
[data-part="5"] .dot[data-dot="7"] { left: 75.0%; }
[data-part="5"] .dot[data-dot="8"] { left: 87.5%; }
[data-part="5"] .dot[data-dot="9"] { left:100.0%; }

[data-content="popup-blase"] .dot[data-dot="1"] { left:  0%; }
[data-content="popup-blase"] .dot[data-dot="2"] { left: 50%; }
[data-content="popup-blase"] .dot[data-dot="3"] { left:100%; }
[data-content="popup-pinkeln"] .dot[data-dot="1"] { left:  0%; }
[data-content="popup-pinkeln"] .dot[data-dot="2"] { left: 50%; }
[data-content="popup-pinkeln"] .dot[data-dot="3"] { left:100%; }

[data-content='learning'] .learning-entry .learn-btn{
  display:flex;
  justify-content: space-evenly;
}

[data-content='learning'] .learning-entry .learn-btn div{
  border:1px solid #ef9600;
  border-radius: 15px;
  background-color:#ef9600;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:25%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-content='learning'] .learning-entry .learn-btn .btn-learn-no{
  border:1px solid #d4dbf0;
  background-color:#d4dbf0;
  color:#005eb8;
}
[data-content='learning'] .learning-entry .learn-btn .btn-learn-go:hover,
[data-content='learning'] .learning-entry .learn-btn .btn-learn-PinkelnYes:hover,
[data-content='learning'] .learning-entry .learn-btn .btn-learn-PinkelnNo:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #ef9600;
}
[data-content='learning'] .learning-entry .learn-btn .btn-learn-no:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #005eb8;
}

[data-content='learning'] .learn-box{
  /* display: flex; */
  /* flex-direction: column; */
  height: 100%;
  width:70%;
  /* justify-content: space-between; */
}

[data-content='learning'] .learning-entry .subheadline{
  font-family: 'ImagoBQ-Bold';
  font-size:1em;
  margin-bottom: 2em;
}
[data-content='learning'] .learning-entry .text{
  font-family: 'ImagoBQ-Book';
  margin-bottom: 1em;
}
[data-content='learning'] .learning-entry .text.small{
  font-family: 'ImagoBQ-Book';
  font-size:0.5em;
}
[data-content='learning'] .learning-entry .text.highlight{
  font-family: 'ImagoBQ-Bold';
  /* font-size:1em; */
  margin:2em 0;
}

[data-content="learning"] .toilett{
  position: absolute;
  right:0;
  top:0;
  width:50%;
  height:90%;
  background-repeat:no-repeat;
  background-position:center right;
  background-size:contain;
  background-image:url('../images/learning/background-right.png');
}
[data-content="learning"] .learning-entry[data-part="3"][data-slide="1"]{
  /* width:70%; */
}

[data-content="learning"] .choicesContainer{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  /* flex:1; */
  height:30%;
}

[data-content="learning"] .choicesContainer div{
	width:50%;
  cursor: pointer;
}

[data-content="learning"] label {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}

[data-content="learning"] label span{
	/* color:#c6c6c6; */
}

[data-content="learning"] .small label{
  justify-content: center;
}

[data-content="learning"] input.singleChoice{
	width: 0px;
	height: 0px;
	display: none;
}

[data-content="learning"] input.singleChoice + div.styledCheckbox {
	display: inline-block;
	margin-right: 20px;
	min-width: 45px;
	min-height: 45px;
	max-width: 45px;
	max-height: 45px;
	border-radius: 0px;
}

[data-content="learning"] input.singleChoice + div.styledCheckbox {
	background-repeat:no-repeat;
  background-position:center;
  background-size:45px 45px;
	background-image:url('../images/learning/btn-default.png');
}

[data-content="learning"] input.singleChoice:checked + div.styledCheckbox {
  background: url('../images/learning/btn-filled.png') no-repeat #ffffff;
  border-radius: 50%;
  background-position: center;
  background-size:45px 45px;
}

[data-content="learning"] .twoRows{
  display:flex;
  flex-direction: column;
  width:100%;
  height:90%;
}
[data-content="learning"] .twoColumns{
  display:flex;
  width:100%;
  height:90%;
}
[data-content="learning"] [data-part="3"][data-slide="6"] .twoColumns,
[data-content="learning"] [data-part="3"][data-slide="7"] .twoColumns,
[data-content="learning"] [data-part="3"][data-slide="8"] .twoColumns{
  height:auto;
}
[data-content="learning"] [data-part="3"][data-slide="5"] .twoColumns{
  width:auto;
  height:auto;
}
[data-content="learning"] [data-part="5"][data-slide="8"] .twoColumns{
  height: 70%;
}
[data-content="learning"] [data-part="3"][data-slide="5"] .twoRows{
  height:70%;
}
[data-content="learning"] [data-part="3"][data-slide="6"] .twoRows{
  /* height: auto; */
}

[data-content="learning"] .twoColumns .leftColumn{
  /* width:60%; */
  width:50%;
  overflow-y:auto;
}
[data-content="learning"] .twoColumns .rightColumn{
  position: relative;
  /* width:40%; */
  width:50%;
  height:500px;
}
[data-content="learning"] [data-part="4"] .twoColumns .leftColumn{
  width:50%;
}
[data-content="learning"] [data-part="4"] .twoColumns .rightColumn{
  width:50%;
}
[data-content="learning"] .twoColumns .rightColumn{
  height:100%;
}

[data-content="learning"] [data-part="1"][data-slide="4"] .twoColumns{
  display:flex;
  width:100%;
  height:50%;
  align-items: center;
}
[data-content="learning"] [data-part="1"][data-slide="4"] .twoColumns div{
  width:50%;
  /* height:100%; */
}
[data-content="learning"] .column.icon{
  /* width:50%; */
  height:100%;
}

[data-content="learning"] .threeColumns{
  display:flex;
  width:100%;
  height:50%;
}
[data-content="learning"] .threeColumns div{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin:0 2%;
  cursor: pointer;
}
[data-content="learning"] [data-part="5"] .threeColumns div{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin:0 2%;
  width:30%;
}

[data-content="learning"] .niereBoy{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/niere/Junge-step2.png');
  cursor: pointer;
}
[data-content="learning"] .niereBoyVorne{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/niere/Ansicht_Vorne.png');
}
[data-content="learning"] .niereBoyHinten{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/niere/Ansicht_Hinten.png');
}

[data-content="learning"] [data-part="1"] .rightPosition{
  position: absolute;
  right: 31%;
  bottom: 34%;
  width: 37%;
  height: 10%;
  /* background-color:rgba(0,255,255,0.5); */
  z-index:20;
  cursor: pointer;
}
[data-content="learning"] .toggleBoy{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8%;
  cursor: pointer;
}

[data-content="learning"] .ofen{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:95px 95px;
  background-image:url('../images/learning/niere/icon-ofen.png');
}
[data-content="learning"] .waschmaschine{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:95px 95px;
  background-image:url('../images/learning/niere/icon-waschmaschine.png');
}
[data-content="learning"] [data-slide="4"] .waschmaschine{
  background-size:75%;
}
[data-content="learning"] .pumpe{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:95px 95px;
  background-image:url('../images/learning/niere/icon-luftpumpe.png');
}

[data-content="learning"] .selectChoice .btn-selectChoice {
  width:45px;
  height:45px;
	background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	background-image:url('../images/learning/btn-default.png');
  margin-bottom: 2em!important;
}

[data-content="learning"] .selectChoice.selected .btn-selectChoice {
  background-image:url('../images/learning/btn-filled.png');
}

[data-content="learning"] .blaseBoy{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/niere/Junge-step2.png');
  cursor: pointer;
}
[data-content="learning"] .blaseBoyVorne{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/blase/junge-blase.png');
}
[data-content="learning"] .imgBlase{
  width:100%;
  height:100px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/blase.png');
  cursor: pointer;
}

[data-content="learning"] [data-part="3"] .rightPosition{
  position: absolute;
  right: 31%;
  bottom: 32%;
  width: 37%;
  height: 10%;
  /* background-color:rgba(0,255,255,0.5); */
  z-index:20;
  cursor: pointer;
}

[data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns{
  display:flex;
  width:100%;
  height:40%;
}
[data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns div{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin:0 2%;
  flex:1;
  cursor: auto;
}
[data-content="learning"] .rightColumn .moon{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:top right;
  background-size:129px 129px;
  background-image:url('../images/learning/pinkeln/mond.png');
}
[data-content="learning"] .niereNacht{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/Niere-step1.png');
  /* padding-top:200px; */
}
[data-content="learning"] .blaseNacht{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/Blase-step1.png');
  /* padding-top:200px; */
}
[data-content='learning'] [data-part="3"][data-slide="5"] .text.highlight{
  margin:0;
}

[data-content="learning"] .darmBoy{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* background-image:url('../images/learning/darm/Junge_darm_step2.png'); */
}
[data-content="learning"] .darmBoy[data-position="0"]{
  background-image:url('../images/learning/darm/Junge_darm_step2.png');
  cursor: pointer;
}
[data-content="learning"] .darmBoy[data-position="1"]{ background-image:url('../images/learning/darm/junge-darm-step3.png'); }
[data-content="learning"] .darmBoy[data-position="2"]{ background-image:url('../images/learning/darm/junge-darm-step4.png'); }
[data-content="learning"] .darmBoy[data-position="3"]{ background-image:url('../images/learning/darm/junge-darm-step5.png'); }
[data-content="learning"] .darmBoy[data-position="4"]{ background-image:url('../images/learning/darm/junge-darm-step6.png'); }
[data-content="learning"] .darmBoy[data-position="5"]{ background-image:url('../images/learning/darm/junge-darm-step7.png'); }
[data-content="learning"] .darmBoy[data-position="6"]{
  background-image:url('../images/learning/darm/junge-darm-step8.png');
  /* position: absolute;
  right: -29.5%;
  background-position: right; */
}
[data-content="learning"] .darmBoy[data-position="7"]{
  background-image:url('../images/learning/darm/junge-darm-step9.png');
  /* position: absolute;
  right: -29.5%;
  background-position: right; */
}
[data-content="learning"] .darmBoy[data-position="8"]{ background-image:url('../images/learning/darm/karte-kot.png'); }
[data-content="learning"] .darmBoy[data-position="9"]{ background-image:url('../images/learning/darm/rutsche-verstopfung-step11.png'); }
[data-content="learning"] .darmBoy[data-position="10"]{ background-image:url('../images/learning/darm/junge-darm-step12.png'); }

[data-content="learning"] [data-part="4"] .rightPosition{
  position: absolute;
  right: 31%;
  bottom: 32%;
  width: 37%;
  height: 10%;
  /* background-color:rgba(0,255,255,0.5); */
  z-index:20;
  cursor: pointer;
}

[data-content="learning"] [data-part="5"] .threeColumns div.text{
  width:100%;
  height:3em;
  margin-top:1em;
}
[data-content="learning"] [data-part="5"] .threeColumns div.quizImg{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
[data-content="learning"] [data-part="5"] [data-question="1"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/trampolin-step2.png');
}
[data-content="learning"] [data-part="5"] [data-question="1"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/balloon-step2.png');
}
[data-content="learning"] [data-part="5"] [data-question="1"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/luftballon-step2.png');
}
[data-content="learning"] [data-part="5"] [data-question="2"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/muskel-step3.png');
}
[data-content="learning"] [data-part="5"] [data-question="2"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/tunnel-step3.png');
}
[data-content="learning"] [data-part="5"] [data-question="2"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/hase-step4.png');
}
[data-content="learning"] [data-part="5"] [data-question="3"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/muell-step4.png');
}
[data-content="learning"] [data-part="5"] [data-question="3"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/schokolade-step4.png');
}
[data-content="learning"] [data-part="5"] [data-question="3"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/wasser-step4.png');
}
[data-content="learning"] [data-part="5"] [data-question="4"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/blase-step5.png');
}
[data-content="learning"] [data-part="5"] [data-question="4"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/blase2-step5.png');
}
[data-content="learning"] [data-part="5"] [data-question="4"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/blase3-step5.png');
}
[data-content="learning"] [data-part="5"] [data-question="5"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/fabrik-step6.png');
}
[data-content="learning"] [data-part="5"] [data-question="5"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/eimer-step6.png');
}
[data-content="learning"] [data-part="5"] [data-question="5"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/strass-step6.png');
}
[data-content="learning"] [data-part="5"] [data-question="6"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/naehrstoffe-step7.png');
}
[data-content="learning"] [data-part="5"] [data-question="6"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/brei-step7.png');
}
[data-content="learning"] [data-part="5"] [data-question="6"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/wasser-step7.png');
}
[data-content="learning"] [data-part="5"] [data-question="7"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/darm-step8.png');
}
[data-content="learning"] [data-part="5"] [data-question="7"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/hase-step8.png');
}
[data-content="learning"] [data-part="5"] [data-question="7"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/toilette-step8.png');
}
[data-content="learning"] [data-part="5"] [data-question="8"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/Blase-Step9.png');
}
[data-content="learning"] [data-part="5"] [data-question="8"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/hose-step9.png');
}
[data-content="learning"] [data-part="5"] [data-question="8"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/blase-anruf-step9.png');
}
[data-content="learning"] [data-part="5"] [data-question="9"][data-answer="1"] .quizImg{
  background-image:url('../images/learning/quiz/step10-dick.png');
}
[data-content="learning"] [data-part="5"] [data-question="9"][data-answer="2"] .quizImg{
  background-image:url('../images/learning/quiz/step10-nahrungsmittel.png');
}
[data-content="learning"] [data-part="5"] [data-question="9"][data-answer="3"] .quizImg{
  background-image:url('../images/learning/quiz/step10-ende.png');
}

[data-content="learning"] [data-part="5"][data-slide="8"] .twoColumns .leftColumn{
  /* width:60%; */
}
[data-content="learning"] [data-part="5"] .winnerHasi{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/quiz/Gewinnerhase.png');
}

[data-content='learning'] .peek-hasi{
  position: absolute;
  top: -9.5%;
  left: 70%;
  width: 35%;
  height: 150%;
  background-repeat:no-repeat;
  background-position:center left;
  background-size:contain;
  background-image:url('../images/howto/Hase-point.png');
}

[data-content='learning'] .bluebox{
  position: relative;
  border-radius: 15px;
  /* padding:0.5em 1em; */
  font-family: 'ImagoBQ-Bold';
  width:90%;
  min-height:25%;
  color:#005eb8;
  background-color:#d4dbf0;
  border-color:#d4dbf0;
  margin:5% auto;
}
[data-content='learning'] .bluebox .headline{
  position: relative;
  top:10%;
  left:2%;
  font-size: 1em;
}
[data-content='learning'] .bluebox .text{
  position: relative;
  top:15%;
  left:2%;
  font-family: 'ImagoBQ-Book';
}
[data-content='learning'] .allAnswers{

}
[data-content='learning'] .allAnswers .answers{
  padding:2% 0;
  border-top:1px solid #ef9600;
  /* border-bottom:1px solid #ef9600; */
}
[data-content='learning'] .allAnswers .answers[data-solution="5"]{
  border-bottom:1px solid #ef9600;
}
[data-content='learning'] .allAnswers .answers .answer{
  display:flex;
  width:90%;
  margin:0 auto;
}
[data-content='learning'] .allAnswers .answers .answer .left{
  width:70%;
  display: flex;
  flex-direction: column;
}
[data-content='learning'] .allAnswers .answers .answer .right{
  width:30%;
  display:flex;
  align-items: center;
}
[data-content='learning'] .allAnswers .answers .solution{
  width:90%;
  margin:0 auto;
}
[data-content='learning'] .allAnswers .answers .text,
[data-content='learning'] .allAnswers .answers .subheadline{
  margin-bottom: 0;
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result]{
  width:80%;
  height:100%;
  min-height: 70px;
  padding-left:20%;
  margin:2%;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  display:flex;
  align-items: center;
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="1"]{
  background-image:url('../images/learning/quiz/balloon-step2.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="2"]{
  background-image:url('../images/learning/quiz/muskel-step3.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="3"]{
  background-image:url('../images/learning/quiz/muell-step4.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="4"]{
  background-image:url('../images/learning/quiz/blase2-step5.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="5"]{
  background-image:url('../images/learning/quiz/eimer-step6.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="6"]{
  background-image:url('../images/learning/quiz/naehrstoffe-step7.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="7"]{
  background-image:url('../images/learning/quiz/darm-step8.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="8"]{
  background-image:url('../images/learning/quiz/blase-anruf-step9.png');
}
[data-content="learning"] .allAnswers .answers .answer .left [data-result="9"]{
  background-image:url('../images/learning/quiz/step10-nahrungsmittel.png');
}

[data-content="learning"] .allAnswers .solution{
  color:red;
}
[data-content="learning"] .allAnswers .solution.green{
  color:green;
}

[data-content="learning"] .allAnswers .btn-solution{
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width: 100%;
  cursor: pointer;
}

[data-content="popup-solution"] [data-popup-slide="3"] .twoColumns{
  display:flex;
  width:100%;
  height:50%;
  align-items: center;
}
[data-content="popup-solution"] [data-popup-slide="3"] .twoColumns .column{
  width:50%;
}
[data-content="popup-solution"] [data-popup-slide="3"] .column.icon{
  height:100%;
}
[data-content="popup-solution"] .waschmaschine{
  width:50%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:75%;
  background-image:url('../images/learning/niere/icon-waschmaschine.png');
  margin:0 auto;
}
[data-content="popup-solution"] [data-popup-slide="5"] .twoColumns,
[data-content="popup-solution"] [data-popup-slide="6"] .twoColumns,
[data-content="popup-solution"] [data-popup-slide="7"] .twoColumns,
[data-content="popup-solution"] [data-popup-slide="9"] .twoColumns {
  display: flex;
  width: 100%;
  height: 90%;
}
[data-content="popup-solution"] [data-popup-slide="5"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="5"] .twoColumns .rightColumn,
[data-content="popup-solution"] [data-popup-slide="6"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="6"] .twoColumns .rightColumn,
[data-content="popup-solution"] [data-popup-slide="7"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="7"] .twoColumns .rightColumn,
[data-content="popup-solution"] [data-popup-slide="9"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="9"] .twoColumns .rightColumn {
  width:50%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-content="popup-solution"] .text,
[data-content="popup-solution"] .subheadline {
  font-family: 'ImagoBQ-Bold';
  font-size: 1em;
  margin-bottom: 2em;
  text-align: left;
  color: #005eb8;
}
[data-content="popup-solution"] .text.highlight {
  font-family: 'ImagoBQ-Bold';
  margin: 2em 0;
}
[data-content="popup-solution"] .blaseBoyVorne {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../images/learning/blase/junge-blase.png');
}
[data-content="popup-solution"] [data-popup-slide="6"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="6"] .twoColumns .rightColumn,
[data-content="popup-solution"] [data-popup-slide="7"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="7"] .twoColumns .rightColumn,
[data-content="popup-solution"] [data-popup-slide="9"] .twoColumns .leftColumn,
[data-content="popup-solution"] [data-popup-slide="9"] .twoColumns .rightColumn{
  width:50%;
}
/* [data-content="popup-solution"] .text {
  font-family: 'ImagoBQ-Book';
  margin-bottom: 1em;
  color: #005eb8;
} */
[data-content="popup-solution"] .darmBoy{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
[data-content="popup-solution"] .darmBoy[data-position="3"]{ background-image:url('../images/learning/darm/junge-darm-step5.png'); }
[data-content="popup-solution"] .darmBoy[data-position="4"]{ background-image:url('../images/learning/darm/junge-darm-step6.png'); }
[data-content="popup-solution"] .darmBoy[data-position="5"]{ background-image:url('../images/learning/darm/junge-darm-step7.png'); }

[data-popup="learn"]{
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.8);
  z-index:20;
}
[data-popup="learn"] .saveBox {
  /* position: relative; */
  display:flex;
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 80%;
  height:80%;
  margin: 0.5% auto;
  /* border: 1px solid #ef9600; */
  border-radius: 15px;
  background-color: #ffffff;
  color:#ffffff;
  text-align: center;
  padding:2%;
  box-shadow: 0px 0px 25px 0px #edc47a;
}
[data-popup="learn"] .saveBox .text{
  text-align: left;
}
[data-popup="learn"] .blase-content{
  position: relative;
  height:90%;
  display:none;
}
[data-popup="learn"] .blase-content.active{
  display:block;
  width: 98%;
}
.close-blase,
.close-details{
  position: absolute;
  top:1%;
  right:1%;
  width:28px;
  height: 28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url('../images/learning/btn-close.png');
  z-index:21;
  cursor: pointer;
}

[data-popup="learn"] .btn-next-step {
  position: absolute;
  right: 10%;
  bottom: 4%;
  width: 50px;
  height: 50px;
  /* padding: 0.5em 1em; */
  font-size: 0.9em;
  text-decoration: none;
  color: #ef9600;
  font-family: "ImagoBQ-Bold";
  /* margin: 0.5% 0; */
  border-radius: 50%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../images/learning/btn-weiter.png');
  z-index: 21;
  cursor: pointer;
}
[data-popup="learn"] .btn-next-step:hover{
  border-radius: 50%;
  box-shadow: 0px 0px 25px 0px #ef9600;
}

[data-popup="learn"] .arrowLeft{
  width:10%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-left-blau.png');
  z-index:5;
}
[data-popup="learn"] .arrowRight{
  width:10%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../images/welcome/icon-arrow-right-blau.png');
  z-index:5;
}
[data-popup="learn"] .arrowLeft.hide,
[data-popup="learn"] .arrowRight.hide{
  opacity: 0;
}
[data-content="popup-blase"] .twoPics,
[data-content="popup-solution"] .twoPics{
  display:flex;
  justify-content: center;
  align-items: center;
  height:70%;
}
[data-content="popup-blase"] .twoPics div,
[data-content="popup-solution"] .twoPics div{
  width:100%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
[data-popup="learn"] .twoPics[data-state="2"] .blase-links{
  background-image:url('../images/learning/blase/blase3.png');
}
[data-popup="learn"] .twoPics[data-state="2"] .ballon-rechts{
  background-image:url('../images/learning/blase/luftballon3.png');
}

[data-popup="learn"] .twoPics[data-state] .blase-animation[data-animation]{
  position: absolute;
  width:50%;
  height:60%;
  transition: opacity 1s ease-in-out;
}
[data-popup="learn"] .twoPics[data-state] .blase-animation.show{
  opacity: 1;
}
[data-popup="learn"] .twoPics[data-state] .blase-animation.hide{
  opacity: 0;
}
[data-popup="learn"] .text .animateText{
  transition: opacity 1s ease-in-out;
}
[data-popup="learn"] .text .animateText.hide{
  opacity: 0;
}

[data-popup="learn"] .twoPics[data-state="1"] .blase-links .step1[data-animation="1"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-11.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blase-links .step1[data-animation="2"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-12.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blase-links .step1[data-animation="3"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-13.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blase-links .step1[data-animation="4"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-14.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blase-links .step1[data-animation="5"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-15.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .ballon-rechts .step1[data-animation="1"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-16.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .ballon-rechts .step1[data-animation="2"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-17.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .ballon-rechts .step1[data-animation="3"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-18.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .ballon-rechts .step1[data-animation="4"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-19.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .ballon-rechts .step1[data-animation="5"]{
  background-image:url('../images/learning/blase/step1/Blase-Illustration-20.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .blase-links .step3[data-animation="1"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-21.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .blase-links .step3[data-animation="2"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-22.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .blase-links .step3[data-animation="3"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-23.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .blase-links .step3[data-animation="4"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-24.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .blase-links .step3[data-animation="5"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-25.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .ballon-rechts .step3[data-animation="1"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-26.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .ballon-rechts .step3[data-animation="2"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-27.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .ballon-rechts .step3[data-animation="3"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-28.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .ballon-rechts .step3[data-animation="4"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-29.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .ballon-rechts .step3[data-animation="5"]{
  background-image:url('../images/learning/blase/step3/Blase-Illustration-30.png');
}

[data-content="learning"] [data-part="3"] .rightColumn{
  height:100%;
}

[data-content="learning"] .pipiBlase{
  position: relative;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/blase.png');
  cursor: pointer;
}
[data-content="learning"] .pipiBlase .sprechblase{
  position: absolute;
  left: -60%;
  bottom: 5%;
  width:80%;
  height:40%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/sprechblase.png');
}
[data-content="learning"] .carousselContainer{
  height:65%;
}
[data-content="learning"] .caroussel.active {
  width: 90%;
}
[data-content="learning"] .carousselContainer .caroussel .carousselEntry{
  display:flex;
  height:100%;
  width:100%;
  justify-content: space-evenly;
}
[data-content="learning"] .carousselContainer .caroussel .carousselEntry .text{
  width:40%;
  align-self: center;
  height: 100%;
  overflow: auto;
}
[data-content="learning"] .carousselContainer .caroussel .carousselEntry .carousselImg{
  width:50%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  /* background-size:contain; */
}
[data-content="learning"] [data-part="3"][data-slide="6"] .carousselContainer .caroussel[data-slide='1'] .carousselEntry .carousselImg{
  background-size:244px 231px;
  background-image:url('../images/learning/pinkeln/junge-schlafen-step2-ja.png');
}
[data-content="learning"] [data-part="3"][data-slide="7"] .carousselContainer .caroussel[data-slide='2'] .carousselEntry .carousselImg{
  background-size:263px 231px;
  background-image:url('../images/learning/pinkeln/junge-schlafen-step3-ja.png');
}
[data-content="learning"] [data-part="3"][data-slide="8"] .carousselContainer .caroussel[data-slide='3'] .carousselEntry .carousselImg{
  background-size:281px 245px;
  background-image:url('../images/learning/pinkeln/junge-schlafen-step4-ja.png');
}
[data-content="learning"] [data-part="3"][data-slide="9"] .carousselContainer .caroussel[data-slide='1'] .carousselEntry .carousselImg{
  background-size:contain;
  background-image:url('../images/learning/pinkeln/junge-step1.png');
}
[data-content="learning"] [data-part="3"][data-slide="10"] .carousselContainer .caroussel[data-slide='2'] .carousselEntry .carousselImg{
  background-size:contain;
  background-image:url('../images/learning/pinkeln/blase-step2.png');
}
[data-content="learning"] [data-part="3"][data-slide="11"] .carousselContainer .caroussel[data-slide='3'] .carousselEntry .carousselImg{
  background-size:contain;
  background-image:url('../images/learning/pinkeln/blase-step3.png');
}

[data-content="popup-pinkeln"] .twoPics,
[data-content="popup-solution"] .twoPics{
  display:flex;
  justify-content: center;
  align-items: center;
  height:80%;
}
[data-popup="learn"] .twoPics .boyLinks{
  width:100%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/learning/pinkeln/junge-gehirn-blase.png');
}
[data-popup="learn"] .twoPics[data-state="3"] .boyLinks{
  background-image:url('../images/learning/pinkeln/junge-step5.png');
}
[data-popup="learn"] .twoPics .pinkelnRight{
  display:flex;
  flex-direction: column;
  width:100%;
  height:80%;
}
[data-popup="learn"] .twoPics[data-state="3"] .pinkelnRight{
  width:50%;
}
[data-popup="learn"] .twoPics .pinkelnRight div{
  /* width:100%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain; */
  display:flex;
}
[data-popup="learn"] .twoPics .pinkelnRight div{
  display:flex;
  width:100%;
  height:100%;
}
[data-popup="learn"] .twoPics .pinkelnRight .brainPhone div,
[data-popup="learn"] .twoPics .pinkelnRight .blasePhone div{
  width:100%;
  height:80%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

[data-popup="learn"] .twoPics[data-state="1"] .brainPhone .sprechblase{
  background-image:url('../images/learning/pinkeln/step3/sprechblase-gehirn-step3.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .brainPhone .brain{
  background-image:url('../images/learning/pinkeln/step3/gehirn-telefon-step3.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blasePhone .sprechblase{
  background-image:url('../images/learning/pinkeln/step3/sprechblase-blase-step3.png');
}
[data-popup="learn"] .twoPics[data-state="1"] .blasePhone .blase{
  background-image:url('../images/learning/pinkeln/step3/blase-telefon-step3.png');
}

[data-popup="learn"] .twoPics[data-state="2"] .brainPhone .sprechblase{
  background-image:url('../images/learning/pinkeln/step4/sprechblase-gehirn.png');
}
[data-popup="learn"] .twoPics[data-state="2"] .brainPhone .brain{
  background-image:url('../images/learning/pinkeln/step4/gehirn-telefon-step4.png');
}
[data-popup="learn"] .twoPics[data-state="2"] .blasePhone .sprechblase{
  background-image:url('../images/learning/pinkeln/step4/sprechblase-blase.png');
}
[data-popup="learn"] .twoPics[data-state="2"] .blasePhone .blase{
  background-image:url('../images/learning/pinkeln/step4/blase-telefon-step4.png');
}

[data-popup="learn"] .twoPics[data-state="3"] .brainPhone .brain{
  background-image:url('../images/learning/pinkeln/step5/gehirn-telefon-step5.png');
  margin-bottom: 3em;
}
[data-popup="learn"] .twoPics[data-state="3"] .blasePhone .blase{
  background-image:url('../images/learning/pinkeln/step5/blase-telefon-step5.png');
}

.answer-popup{
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.8);
  z-index:20;
}
.answer-popup .saveBox {
  /* position: relative; */
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 50%;
  margin: 0.5% auto;
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  height: 50%;
  color:#ffffff;
  text-align: center;
  padding:2%;
}

.answer-popup .saveBox .save-btn{
  display:flex;
  justify-content: space-evenly;
}
.answer-popup .saveBox .save-btn div{
  border:1px solid #ffffff;
  border-radius: 15px;
  background-color:#ffffff;
  padding:0.5em 1em;
  text-decoration: none;
  color:#ef9600;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width:25%;
  cursor: pointer;
}

[data-content="view-protokoll"] .changeView{
  position: absolute;
  top: 0%;
  left: 18%;
  width: 10%;
  height: 5%;
  background-color:#ef9600;
}
/* [data-content="view-protokoll"] .preview1{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/temp/protokoll-Ansicht1.png');
} */
[data-content="view-protokoll"] .preview1{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/temp/protokoll-Ansicht2.png');
}
[data-content="view-protokoll"] .preview2{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('../images/temp/protokoll-Ansicht3.png');
}
.learning-entry[data-part="5"][data-slide="10"]{
  overflow-y:scroll;
}
.learning-entry[data-part="5"][data-slide="10"] img{
  width:100%;
  height:auto;
}

/* ########################################################################## */
/* HelpMe */
/* ########################################################################## */

.helpMe{
  position: fixed;
  right: 0%;
  top: 10%;
  width: 5%;
  height: 48px;
  padding: 1%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:29px 48px;
  background-image:url('../images/icon-help.png');
  z-index:20;
  border:1px solid #ef9600;
  border-right:none;
  border-radius:50% 0 0 50%;
  border-radius:20% 0 0 20%;
  cursor: pointer;
}

.helpContainer{
  position: absolute;
  right:0;
  top:10%;
  width:20%;
  min-height:20%;
  background-color:#ffffff;
  border:1px solid #ef9600;
  border-right:none;
  border-radius:50% 0 0 50%;
  border-radius:20% 0 0 20%;
  z-index:21;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding:2%;
}
.closeHelp{
  position: absolute;
  top:1%;
  right:1%;
  width:28px;
  height: 28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url('../images/learning/btn-close.png');
  cursor: pointer;
}
.helpContainer form{
  width:80%;
  text-align: center;
}
.helpContainer input{
  text-indent: 0;
  text-align: center;
  width:95%;
}

.helpContainer input[type="submit"]{
  border-radius: 15px;
  padding: 0.5em 1em;
  text-decoration: none;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width: 100%;
  margin-right: 1%;
  color: #005eb8;
  background-color: #d4dbf0;
  border-color: #d4dbf0;
  margin-top:5%;
  cursor: pointer;
}
.helpContainer input[type="submit"]:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #005eb8;
}

.helpContainer.helpTxt{
  padding:2%;
}

.btn-howto,
.btn-impressum{
  border: 1px solid #ef9600;
  border-radius: 15px;
  background-color: #ef9600;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
  font-family: 'ImagoBQ-Bold';
  text-align: center;
  width: 65%;
  margin: 0 auto;
  margin-top:5%;
  cursor: pointer;
}
.btn-howto:hover,
.btn-impressum:hover{
  border-radius: 15px;
  box-shadow: 0px 0px 25px 0px #ef9600;
}

.helpContainer .smallHL{
  font-family: 'ImagoBQ-Bold';
  padding-left: 10%;
  width:100%;
}
.helpContainer .smallTxt{
  /* font-size: .8em; */
  padding-left: 10%;
  width:100%;
}

.popup-impressum {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255,255,255,0.8);
  z-index: 20;
}
.popup-impressum .saveBox {
  display: flex;
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 80%;
  height: 80%;
  margin: 0.5% auto;
  border-radius: 15px;
  background-color: #ffffff;
  color: #ffffff;
  text-align: center;
  padding: 2%;
  box-shadow: 0px 0px 25px 0px #edc47a;
}

.closeImpressum {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("../images/learning/btn-close.png");
  z-index: 21;
  cursor: pointer;
}

.imprTxt{
  color:#005eb8;
  width:100%;
  text-align: left;
  overflow:auto;
}

.imprTxt a{
  color:#ef9600;
}

.paddingBottom{
  padding-bottom: 5em;
}

/* VIDEO-POPUPS */
.popup-video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255,255,255,0.8);
  z-index: 51;
}
.popup-video .saveBox{
  display: none;
  padding: 0.5em 0;
  text-decoration: none;
  font-family: 'ImagoBQ-Book';
  text-align: left;
  width: 90%;
  height: auto;
  margin: 0.5% auto;
  /* border-radius: 15px; */
  /* background-color: #ffffff; */
  color: #005eb8;
  text-align: center;
  padding: 2%;
  /* box-shadow: 0px 0px 25px 0px #edc47a; */
}
.popup-video .saveBox.activ {
  display: block;
}

.closeVideo{
  position: absolute;
  top:1%;
  right:1%;
  width:28px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url('../images/learning/btn-close.png');
  z-index:52;
  cursor: pointer;
}

.popup-video video {
  /* position: absolute; */
  /* left: 5%; */
  /* top: 10%; */
  width: 90%;
  height: auto;
}