@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: 0.5%;
  font-size: 0.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: 0.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: 0.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-entry,
.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-entry .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-entry .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-entry .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-entry .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-entry .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%;
}
.popup-time .saveBox .headline,
.popup-entry .saveBox .headline,
.popup-pdf .saveBox .headline,
.popup-diaper .saveBox .headline,
.popup-change .saveBox .headline,
.popup-delete .saveBox .headline {
  font-family: "ImagoBQ-Bold";
  font-size: 1.2em;
}

.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: 0.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: 0.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: 0.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: 0.9em;
  margin-top: 1em;
}

[data-content="protokoll"] .btn-sleeptimes {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.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: 0.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: 0.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: 0.8em;
  font-size: 0.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: 0.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"] .entryTbl.addNew {
  color: #ffffff;
  background-color: #ef9600;
  border: 1px solid #ef9600;
}
[data-content="my-protokoll"] .entryTbl .dayTbl {
  width: 33%;
}
[data-content="my-protokoll"] .entryTbl .dayTbl.text {
  margin-left: 1%;
}
[data-content="my-protokoll"] .entryTbl .dayTbl.time {
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex:1; */
}
[data-content="my-protokoll"] .entryTbl .dayTbl.time input {
  width: 100px;
  text-indent: 1em;
  font-size: 0.8em;
  margin-left: 5%;
}
[data-content="my-protokoll"] .entryTbl .dayTbl.time .daySave {
  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_blue@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: 0.5;
  cursor: auto;
}
.nightTbl .newEntryBtn {
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #ef9600;
}
.dayTbl .newEntryBtn {
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #001c37;
}
.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: 0.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%;
}
[data-part="5"] .lineFilled[data-dot="2"] {
  width: 12.5%;
}
[data-part="5"] .lineFilled[data-dot="3"] {
  width: 25%;
}
[data-part="5"] .lineFilled[data-dot="4"] {
  width: 37.5%;
}
[data-part="5"] .lineFilled[data-dot="5"] {
  width: 50%;
}
[data-part="5"] .lineFilled[data-dot="6"] {
  width: 62.5%;
}
[data-part="5"] .lineFilled[data-dot="7"] {
  width: 75%;
}
[data-part="5"] .lineFilled[data-dot="8"] {
  width: 87.5%;
}
[data-part="5"] .lineFilled[data-dot="9"] {
  width: 100%;
}

[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%;
}

[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%;
}
[data-part="5"] .dot[data-dot="2"] {
  left: 12.5%;
}
[data-part="5"] .dot[data-dot="3"] {
  left: 25%;
}
[data-part="5"] .dot[data-dot="4"] {
  left: 37.5%;
}
[data-part="5"] .dot[data-dot="5"] {
  left: 50%;
}
[data-part="5"] .dot[data-dot="6"] {
  left: 62.5%;
}
[data-part="5"] .dot[data-dot="7"] {
  left: 75%;
}
[data-part="5"] .dot[data-dot="8"] {
  left: 87.5%;
}
[data-part="5"] .dot[data-dot="9"] {
  left: 100%;
}

[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;
}