@media screen and (min-width: 1300px) {
  body{
    font-size: 1.4em;
  }
  [data-content="learning"] .boxLeft .nav-learn {
    padding: 0.4em 1em;
  }
}

@media screen and (max-height: 800px) {
  body{
    font-size: 1em;
  }
  [data-content="learning"] .boxLeft .nav-learn {
    padding: 0.3em 1em;
  }
  [data-content="register"] .box, [data-content="info"] .box, [data-content="forgotten"] .box, [data-content="changeForgottenPw"] .box, [data-content="login"] .box{
    overflow:auto;
  }
}

@media screen and (max-width: 900px) {
  .helpMe{
    left: 5%;
    /* left: 15%; */
    top: 1%;
    width: 41px;
    height: 41px;
    padding: 1%;
    background-size: contain;
    background-image: url("../images/Btn-AppGuide@2x.png");
    border: none;
  }
  .helpMe.indent{
    left:15%;
  }
  .helpMe.start{
    position: absolute;
    left: 12%;
    top: 25%;
  }
  .helpContainer{
    position: absolute;
    left: 15%;
    top: 10%;
    width: 70%;
    height: 50%;
    background-color: #ffffff;
    border: 2px solid #ef9600;
    border-radius: 3%;
  }
  .helpContainer.start{
    position: absolute;
    left: 12%;
    top: 33%;
  }
  /* .helpContainer .smallTxt {
    width:100%;
  } */
  .hase {
    top: 0;
    height: 50vh;
    width: 50vw;
    background-position: top right;
  }
  .headline {
    margin:10%;
  }
  .text{
    width:80%;
  }
  [data-content="start"] .headline{
    margin: 5% 10%;
  }
  .links{
    flex-direction: column;
    width: 80%;
    margin: 5% auto;
  }
  .links div{
    width:50%;
    margin-bottom: 5%;
  }
  .textBg{
    margin-left:10%;
  }
  .showUserName {
    width: 30%;
  }
  .btn-logout{
    width: 48px;
    height:48px;
    margin-right: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4dbf0;
    border-radius: 15px;
    background-color: #d4dbf0;
    padding: 0%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-image: url("../images/icon-logout@2x.png");
    text-indent: -9999px;
  }
  .box {
    width:100% !important;
  }
  [data-content="impressum"] .box,
  [data-content="datenschutz"] .box {
    width: 90% !important;
    padding: 1em;
    font-size: .9em;
  }
  [data-content="start"] .box, [data-content="login"] .box, [data-content="register"] .box, [data-content="forgotten"] .box, [data-content="changeForgottenPw"] .box, [data-content="login"] .box{
    top:35%;
    overflow:auto;
    transform: translate(-50%, 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:35%;
    overflow:auto;
    transform: translate(-50%, 0%);
  }
  .loginText{
    width:80%;
    margin:0 auto;
  }
  [data-content="start"] .box .links div, [data-content="login"] .box .links div, [data-content="register"] .box .links div{
    width:80%;
    margin:5% auto;
  }
  [data-content="start"] .box .links{
    margin-top:0;
  }
  [data-content="login"] .loginbox {
    width: 80%;
    margin: 0 auto;
  }
  [data-content="login"] .loginbox .headline{
    margin:10% 0;
  }
  [data-content="register"] .loginbox {
    width: 80%;
    margin: 0 auto;
  }
  [data-content="register"] .loginbox .headline{
    margin:10% 0;
  }
  [data-content="welcome"] .box {
    flex-direction: column;
  }
  [data-content="welcome"] .boxLeft {
    width: 90%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    min-height: 30%;
    margin:0 auto;
  }
  .media{
    width:20%;
  }
  .headline.mobile {
    width: 75%;
    margin:0;
    text-align: left;
    padding-left: 5%;
  }
  .text.mobile{
    width: 75%;
    text-align: left;
    padding-left: 5%;
  }
  .mediaGames{
    width:80%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    border:1px solid #ef9600;
    border-radius: 15px;
    margin:5% auto;
    padding:5%;
    height: 20%;
  }
  .text.points{
    width: 100%;
    text-align: left;
    margin-bottom: 1em;
  }
  .btnGames {
    width: 35%;
    margin: 0;
    font-size: 0.7em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  [data-content="welcome"] .countStars{
    width:50%;
    height:auto;
    min-height: 50px;
  }
  [data-content="welcome"] .star, [data-content="reward-overview"] .star {
    width: 16%;
  }
  [data-content="welcome"] .boxRight {
    width: 90%;
    height:80%;
    margin: 0 auto;
  }
  [data-content='welcome'] .btnLinks{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* display:block; */
    height:100%;
  }
  [data-content='welcome'] .btnLinks .btnWelcome{
    width:100%;
    margin-bottom: 5%;
    min-height: 70px;
  }
  [data-content='welcome'] .btnLinks .btnWelcome .welcomeBg{
    width:100%;
    height:100%;
  }
  [data-content='welcome'] .btnLinks .btnWelcome .welcomeStift{
    background-position: top -60px right;
  }
  [data-content='welcome'] .btnLinks .btnWelcome .welcomeHasi{
    background-position: top 40% right 3%;
    background-size: 40%;
  }
  [data-content='welcome'] .btnLinks .btnWelcome .welcome-text .text{
    margin:10%;
  }
  [data-content='welcome'] .btnLinks .btnWelcome .btn-welcome-go{
    display:none;
  }
  [data-content='welcome'] .longBox{
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    display:block;
    width:100%;
    height:200px;
    background-position: center bottom;
    background-size: 90% auto;
    position: relative;
  }
  [data-content='welcome'] .longBox .longBoxLeft{
    width:90%;
    padding-top:5%;
    display:block;
  }
  [data-content='welcome'] .longBox .longBoxRight{
    width:100%;
    display:block;
  }
  [data-content='welcome'] .longBox .longBoxRight .btn-verlauf{
    position: absolute;
    right:3%;
    bottom:15%;
    width:60%;
  }
  .carousselContainer {
    height:auto;
  }
  [data-content="welcome"] .caroussel .headline,
  [data-content="welcome"] .caroussel .text{
    /* display:inline; */
    /* background-color:rgba(212, 219, 240, 0.5); */
    width:50%;
    margin-bottom: 0;
    margin-left: 0;
  }

  [data-content="welcome"] .entry{
    margin: 3% auto;
  }
  [data-content="welcome"] .entryTbl{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  [data-content="welcome"] .entryTbl .tbl.nr{
    width:65%;
    text-align: left;
    margin-left: 5%;
    font-family: 'ImagoBQ-Bold';
  }
  [data-content="welcome"] .entryTbl .tbl.date{
    width:50%;
    text-align: left;
    margin-left: 5%;
  }

  [data-content="welcome"] .newEntry {
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/welcome/Gruppe_27@2x.png");
  }
  [data-content="welcome"] .editEntry {
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/welcome/Gruppe_26@2x.png");
  }

  [data-content="welcome"] .caroussel {
    background-position: bottom right;
    background-size: 98px 184px;
  }

  [data-content="profil"] .box {
    flex-direction: column;
  }
  [data-content="profil"] .box .boxLeft,
  [data-content="profil"] .box .boxRight {
    width:90%;
    height:auto;
    margin:0 auto;
    margin-bottom: 1em;
  }
  [data-content="profil"] .oneChoice .choicesContainer:not(.small) {
    display:block;
  }
  [data-content="profil"] .choicesContainer.small div{
    width:15%;
  }
  [data-content="profil"] .twoChoices {
    flex-direction: column;
  }
  [data-content="profil"] .oneChoice,
  [data-content="profil"] .twoChoices {
    flex-direction: column;
    margin:5% 0;
  }
  [data-content="profil"] .twoChoices .skinContainer, [data-content="profil"] .twoChoices .clothContainer {
    width: auto;
  }
  [data-content="profil"] .twoChoices .skinContainer, [data-content="profil"] .twoChoices .hairContainer, [data-content="profil"] .twoChoices .eyeContainer, [data-content="profil"] .twoChoices .clothContainer{
    margin:5% 0;
  }
  [data-content="profil"] input.singleChoice + div.styledCheckbox {
    display: inline-block;
    margin-right: 20px;
    min-width: 35px;
    min-height: 35px;
    max-width: 35px;
    max-height: 35px;
    border-radius: 0px;
  }
  [data-content="profil"] .choicesContainer div{
    width:100%;
    margin-top: 2%;
  }
  [data-content="profil"] .oneChoiceEdit .btn-editPw{
    text-indent: -9999px;
    width:10%;
    background-size: contain;
    background-position: center;
  }
  [data-content="profil"] .btn-saveProfile,
  [data-content="profil"] .btn-deleteProfile{
    position: static;
    left:auto;
    top:auto;
    margin:2% auto;
    width:80%;
    font-size: 1.4em;
    min-height: 20px;
  }
  .popup-time .saveBox,
  .popup-pdf .saveBox,
  .popup-diaper .saveBox,
  .popup-change .saveBox,
  .popup-delete .saveBox{
    width: 80%;
    height: 60%;
  }

  [data-content='saved'] .avatar{
    bottom: 12%;
    width: 100vw;
    height: 38vh;
  }
  [data-content='saved'] .links div{
    width:80%;
    margin:0 auto 5% auto;
  }
  [data-content='saved'] .text{
    margin-left: 10%;
  }

  [data-content='auskennen'] .text{
    margin-left: 10%;
  }

  [data-content='auskennen'] .btnLinks{
    flex-direction: column;
    align-items: center;
  }
  [data-content='auskennen'] .btnLinks div{
    width:90%;
    margin-bottom: 1em;
  }
  [data-content='auskennen'] .btnLinks .btnProt{
    width:90%;
  }

  [data-content='howto'] .box{
    width:80%!important;
  }
  [data-content='howto'] .peek-hasi{
    width:30%;
  }
  [data-content='howto'] .bluebox .headline{
    /* width:80%; */
    /* margin:10% 0; */
    /* font-size: .9em; */
    /* padding-left: 0; */
    margin:0;
    /* direction: rtl;
    text-align: left;
    text-indent: 10%; */
  }
  [data-content='howto'] .bluebox .headline::before{
    content: '';
    float: right;
    width: 20%;
    height: 1em;
  }
  /* h3:first-line {
    background-color: yellow;
  }
  h3:before {
    content: '';
    float: right;
    width: 10em;
    height: 1em;
  } */
  [data-content='howto'] .bluebox .text{
    padding-bottom: 10%;
    /* margin:0 auto; */
    /* padding-left: 0; */
  }
  [data-content='howto'] .carousselContainer{
    height: 60%;
    flex-direction: column;
    overflow:auto;
    margin-top:2%;
  }
  [data-content='howto'] .carousselContainer .arrowLeft,
  [data-content='howto'] .carousselContainer .arrowRight{
    display:none;
  }
  [data-content='howto'] .caroussel.active{
    width:100%;
    display:block;
  }
  [data-content='howto'] .icons{
    overflow:visible;
    flex-direction: column;
    justify-content: flex-start;
  }
  [data-content='howto'] .icons .iconBox{
    width:100%;
  }
  [data-content='howto'] .icons .iconEntry{
    margin-bottom: 2em;
  }

  [data-content='protokoll'] .btnLinks {
    flex-direction: column;
    align-items: center;
    height: auto;
    display:block;
  }
  [data-content='protokoll'] .btnLinksOben,
  [data-content='protokoll'] .btnLinksUnten{
    display:block;
    width:90%;
    /* height:150px; */
    margin:0 auto;
    margin-bottom: 1em;
  }
  [data-content='protokoll'] .btnLinks .btnProt,
  [data-content='protokoll'] .btnLinks .btnProtLong {
    width:95%;
    height:150px;
    margin:0 auto;
    margin-bottom: 1em;
  }
  [data-content='protokoll'] .btnLinks .btnProtLong{
    display:block;
    position: relative;
    width:96%;
    height:200px;
    background-position:top 75% right 7%;
    background-size:133px 285px;
  }
  [data-content='protokoll'] .btnLinks .btnProtLong .btnLongHl{
    display:block;
    width:50%;
    padding:2%;
  }
  [data-content='protokoll'] .btnLinks .btnProtLong .btnLongRight{
    display:block;
    width:50%;
    padding:2%;
  }
  [data-content='protokoll'] .btnLinks .btnProtLong .btnLongText{
    width:50%;
    padding:2%;
  }
  [data-content='protokoll'] .btnLinks .btnProtLong .btnLongBtn{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
    width:70%;
    margin:0 auto;
  }
  [data-content='protokoll'] .btnLinks .btn-sleeptimes{
    width:90%;
    margin:0 auto;
    display:block;
    /* margin-bottom: 1em; */
  }
  [data-content='protokoll'] .btn-night,
  [data-content='protokoll'] .btn-morning{
    /* height:150px;
    margin-bottom: 1em;
    width:90%;
    margin:0 auto; */
    /* display:block; */
    width: 95%;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 1em;
  }
  [data-content='protokoll'] .btnLinks .btn-sleeptimes .btn-night .row1 .nightText{
    /* width:60%; */
  }

  [data-content='new-protokoll'] .btnLinks {
    flex-direction: column;
    align-items: center;
    height: 90%;
  }
  [data-content='new-protokoll'] .btnLinks div {
    width:90%;
    margin-bottom: 1em;
    background-color: #7C98CD;
    border-radius: 15px;
  }

  /* Protkoll Drink */

  [data-content="add-protokoll"] .box{
    overflow:inherit;
  }
  [data-content="add-protokoll"] .scrollBox{
    width: 100%;
    height: 65%;
    overflow:auto;
  }

  [data-content="add-protokoll"] .headline{
    width: 60%;
    font-size: 1.8em;
  }
  [data-content="add-protokoll"] .btn-saveProtokoll, [data-content="add-protokoll"] .btn-editProtokoll{
    top:19%;
    right:0%;
    width:30%;
    height:65px;
    text-indent: -9999px;
    border:none;
    background:none;
    background-repeat: no-repeat, no-repeat;
    background-size: 22px 28px, 64px 65px;
    background-position: center, center;
    background-image: url("../images/protokoll/lock@2x.png"), url("../images/protokoll/kreis_orange@2x.png");
    z-index:5;
  }

  .howto-save{
    width:90%;
    margin:5% auto;
    padding-bottom: 5%;
  }

  [data-content="add-protokoll"] .box[data-count='0'] .left {
    font-family: 'ImagoBQ-Book';
    text-align: left;
    width: 85%;
    border: 1px solid #f9ecd3;
    border-radius: 15px;
    background-color: #f9ecd3;
    padding: 0.5em;
    margin: 0 auto;
  }
  [data-content="add-protokoll"] [data-choice='drink'] input.singleChoice + div.styledCheckbox {
    min-height: 25px;
  }
  [data-content="add-protokoll"] .box[data-count='0'] .subBox{
    height:70%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  [data-content="add-protokoll"] .box[data-count='0'] .subBox .right{
    margin:0 auto;
    height:100%;
  }
  [data-content="add-protokoll"] .changeDrinkLayout{
    position: unset;
    width:100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  [data-content="add-protokoll"] .drinkStateText{
    width:100%;
  }
  [data-content="add-protokoll"] .drinkSlider,
  [data-content="add-protokoll"] .drinkBottles{
    width:40%;
  }
  [data-content="add-protokoll"] .box[data-count='0'] .valueContainer{
    position: static;
    top:auto;
    left: auto;
    margin:0 auto;
    margin-top:5%;
    width:50%;
  }
  [data-content="add-protokoll"] .box[data-count='0'] .sliderContainer{
    width:80%;
  }

  [data-content="add-protokoll"] .box[data-count='0'] .scrollBox[data-drink-state="2"] .subBox{
    display:block;
    height:30%;
  }
  [data-drink-state="2"] .right {
    justify-content: center;
    flex-wrap: wrap;
  }
  [data-content="add-protokoll"] .bottle{
    width:80%;
  }
  [data-content="add-protokoll"] .bottle .bottleImg{
    min-height: 150px;
    text-align: center;
  }
  [data-content="add-protokoll"] .drinkSum{
    margin:0 auto;
    margin-bottom: 5%;
  }

  [data-content='checkBx'] .saveBox,
  [data-content='save-protokoll'] .saveBox,
  [data-content='edit-protokoll'] .saveBox,
  [data-content='forgot-save-protokoll'] .saveBox,
  [data-content='save-profile'] .saveBox,
  [data-content='delete-profile'] .saveBox,
  [data-content='cant-save-protokoll'] .saveBox{
    width:80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  [data-content='checkBx'] .saveBox .headline,
  [data-content='save-protokoll'] .saveBox .headline,
  [data-content='edit-protokoll'] .saveBox .headline,
  [data-content='forgot-save-protokoll'] .saveBox .headline,
  [data-content='save-profile'] .saveBox .headline,
  [data-content='delete-profile'] .saveBox .headline,
  [data-content='cant-save-protokoll'] .saveBox .headline{
    margin:0;
    font-size: 1.5em;
  }
  [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='save-profile'] .saveBox .btn-save-ok,
  [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{
    font-size: .8em;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  [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='save-profile'] .saveBox .save-btn,
  [data-content='delete-profile'] .saveBox .save-btn,
  [data-content='cant-save-protokoll'] .saveBox .save-btn{
    margin-top:10%;
    width:100%;
  }
  /* Protokoll Pipi */
  [data-content="add-protokoll"] .choicesContainer[data-choice='urge']{
    height:100%;
  }
  [data-content="add-protokoll"] .choicesContainer[data-choice='urge'] div {
    height: 75%;
    width: 50%;
  }
  [data-content="add-protokoll"] [data-choice='urge'] label{
    height: 80%;
    justify-content: flex-end;
  }
  [data-content="add-protokoll"] [data-choice='urge'] input.singleChoice + div.styledCheckbox{
    min-height:25px;
    max-height:25px;
    min-width:25px;
    max-width: 25px;
    background-size: contain;
  }
  [data-content="add-protokoll"] [data-choice='urge'] input.singleChoice:checked + div.styledCheckbox{
    background-size: contain;
  }
  [data-content="add-protokoll"] .urgeContainer{
    flex-wrap: wrap;
    height:100%;
  }

  [data-content='add-protokoll'] .urgeContainer div{
    width:45%;
    height:55%;
  }
  [data-content='add-protokoll'] .urgeContainer div.urgeBtn{
    width:25px;
    height:30px;
  }

  [data-content="add-protokoll"] .parentContainer{
    flex-direction: column;
  }
  [data-content='add-protokoll'] .parentYesContainer, [data-content='add-protokoll'] .parentNoContainer{
    flex-direction: row;
  }
  [data-content='add-protokoll'] .parentContainer div.text{
    margin:0;
    width:45%;
  }
  [data-content='add-protokoll'] .parentContainer div.parentBtn{
    width:15%;
    background-position: right;
  }
  [data-content='add-protokoll'] .parentContainer div.parentYes,
  [data-content='add-protokoll'] .parentContainer div.parentNo{
    width:33%;
  }

  [data-content="add-protokoll"] .hoseContainer {
    height: 85%;
    flex-direction: column;
  }
  [data-content='add-protokoll'] .hoseContainer div{
    height:50%;
  }

  [data-content='add-protokoll'] .wetting{
    height:90%;
    border: none;
    background-color: transparent;
  }

  [data-content="add-protokoll"] .tropfenContainer{
    flex-direction: column;
    height:100%;
  }
  [data-content='add-protokoll'] .tropfenContainer div{
    background-color: #d4dbf0;
    background-position: left;
  }
  [data-content='add-protokoll'] .tropfenContainer div.tropfenBtn{
    /* background-position: right; */
  }
  [data-content='add-protokoll'] .tropfen{
    flex-direction: row;
    margin:2%;
  }

  [data-content="add-protokoll"] .box[data-count='1'] .subBox{
    height:50%;
  }
  [data-content="add-protokoll"] .box[data-count='1'] .subBox .right{
    margin:0 auto;
  }
  [data-content="add-protokoll"] .box[data-count='1'] .valueContainer{
    position: static;
    top:auto;
    left: auto;
    margin:0 auto;
    margin-top:5%;
    width:50%;
  }
  [data-content="add-protokoll"] .box[data-count='1'] .sliderContainer{
    width:80%;
  }
  /* [data-content="add-protokoll"] .box[data-count='1'] .left {
    font-family: 'ImagoBQ-Book';
    text-align: left;
    width: 85%;
    border: 1px solid #f9ecd3;
    border-radius: 15px;
    background-color: #f9ecd3;
    padding: 0.5em;
    margin: 0 auto;
  } */
  [data-content="add-protokoll"] .box[data-count='1'] .windelContainer{
    width:auto;
  }

  [data-content='add-protokoll'] .poo{
    height:90%;
    border: none;
    background-color: transparent;
  }
  [data-content="add-protokoll"] .pooContainer{
    flex-wrap: wrap;
    height:100%;
    background-color: #d4dbf0;
    border-radius: 15px;
  }

  [data-content='add-protokoll'] .pooContainer div{
    width:45%;
    height:45%;
  }
  [data-content='add-protokoll'] .pooContainer div.pooBtn{
    width:25px;
  }

  [data-content="my-protokoll"] .entryTbl{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  [data-content="my-protokoll"] .entryTbl.first {
    border: 1px solid #f9ecd3;
    border-radius: 15px;
    background-color: #f9ecd3;
  }
  [data-content="my-protokoll"] .entryTbl .klemmbrett{
    display:none;
  }
  [data-content="my-protokoll"] .entryTbl .tbl,
  [data-content="my-protokoll"] .entryTbl .tbl.date{
    border:none;
  }
  [data-content="my-protokoll"] .entryTbl .tbl.nr{
    width:50%;
    text-align: left;
    margin-left: 5%;
    font-family: 'ImagoBQ-Bold';
  }
  [data-content="my-protokoll"] .entryTbl .tbl.date{
    width:35%;
    text-align: left;
    margin-left: 5%;
  }
  [data-content="my-protokoll"] .entryTbl .tbl.date{
    width:35%;
    text-align: left;
    margin-left: 5%;
  }
  [data-content="my-protokoll"] .entryTbl .tbl.entryNr{
    width:35%;
    text-align: left;
    /* margin-left: 5%; */
  }
  [data-content="my-protokoll"] .entryTbl.protokolltable{
    background-color: transparent;
    border:none;
    margin:0 auto;
  }
  [data-content="my-protokoll"] .entryTbl .oneEntry{
    flex-wrap: wrap;
    justify-content: flex-start;
    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: 100%;
    margin: 0.5em auto;
  }

  [data-content="my-protokoll"] .newEntryBtn {
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/welcome/Gruppe_27@2x.png");
  }
  [data-content="my-protokoll"] .nightTbl .newEntryBtn {
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/protokoll/Gruppe_99@2x.png");
  }
  [data-content="my-protokoll"] .editEntry {
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/welcome/Gruppe_26@2x.png");
  }
  [data-content="my-protokoll"] .noEntry {
    display:none;
  }
  [data-content="my-protokoll"] .eye {
    display:block;
    text-indent: -9999px;
    font-size: 2em;
    height: 20%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/protokoll/icon-auge-blau@2x.png");
  }
  [data-content="my-protokoll"] .eye.orange {
    background-image: url("../images/protokoll/icon-auge-orange@2x.png");
  }
  [data-content="my-protokoll"] .eye.lonely {
    width:41%;
    background-position: center right;
  }
  [data-content="my-protokoll"] .entryTbl.protokolltable{
    padding-bottom: 0;
  }
  [data-content="my-protokoll"] .entryTbl.lastNight{
    margin-top:1em;
  }
  [data-content="my-protokoll"] .entryTbl .nightTbl.text{
    width:95%;
    margin-left:5%;
  }
  [data-content="my-protokoll"] .entryTbl .nightTbl.time{
    width:70%;
    margin-left: 5%;
  }
  [data-content='my-protokoll'] .entryTbl .nightTbl.time input{
    width:80px;
  }
  [data-content="my-protokoll"] .entryTbl .nightTbl.newEntry{
    width:25%;
  }
  /* [data-content='my-protokoll'] .entryTbl .nightTbl.newEntry{
    flex:initial;
  } */

  [data-content="detail-protokoll"] .savePdf{
    height:10%;
  }
  [data-content="detail-protokoll"] .details .left,
  [data-content="detail-protokoll"] .details .right{
    width:95%;
    padding:2% 5%;
    min-height: unset;
  }
  [data-content="detail-protokoll"] .urgeHasi,
  [data-content="detail-protokoll"] .poo{
    height:75px;
  }
  [data-content="detail-protokoll"] .tropfen{
    height:35px;
  }

  [data-content="detail-protokoll"] .detailHL .arrow{
    width:10%;
  }
  [data-content="detail-protokoll"] .detailHL .time{
    width:25%;
  }
  [data-content="detail-protokoll"] .detailHL .delete{
    width:30%;
  }
  [data-content='detail-protokoll'] .deleteEntryBtn{
    width:15%;
    text-indent: -9999px;
    background-position: center;
    background-color: #d4dbf0;
  }
  [data-content="my-protokoll"] .entry.overview .overviewLeft{
    text-align: left;
    margin-left: 5%;
    width:auto;
  }
  [data-content="my-protokoll"] .entry.overview .overviewRight{
    width:auto;
  }
  [data-content="my-protokoll"] .btn-verlauf{
    /* top:19%; */
    /* right:0%; */
    width:80px!important;
    height:65px;
    color:transparent;
    text-indent: -9999px;
    border:none;
    background:none;
    background-repeat: no-repeat, no-repeat;
    background-size: 27px 14px, 48px 49px;
    /* 19px 15px, 36px 37px  ,56*/
    background-position: center, center;
    background-image: url("../images/protokoll/Icon-Verlauf@2x.png"), url("../images/protokoll/kreis_orange@2x.png");
    z-index:5;
  }
  .jqplot-target{
    height:65%;
  }
  .ui-selectmenu-button.ui-button{
    width:5em!important;
  }

  .ui-selectmenu-icon,
  .ui-selectmenu-button-open .ui-selectmenu-icon {
    left: 20%;
    width: 50%;
  }
  [data-content="view-protokoll"] .dropdownDetail{
    margin-left: 0;
  }
  [data-content="view-protokoll"] .showDetails{
    margin:0;
  }
  [data-content="view-protokoll"] .detailNav .arrowLeft,
  [data-content="view-protokoll"] .detailNav .arrowRight{
    background-size: contain;
  }
  [data-content="view-protokoll"] .detailNav{
    margin-bottom: 15%;
  }
  [data-content='view-protokoll'] .detailChart{
    padding: 0% 0% 10% 0%;
  }
  .selectmenu-radius{
    height:250px;
    overflow:auto;
  }
  [data-popup="details"] .saveBox{
    width: 80%;
    height: 60%;
    overflow:auto;
  }
  .jqplot-xaxis{
    display: flex;
    flex-direction: row;
    width: 100%!important;
    /* left:-10%!important; */
    /* align-items: center; */
    justify-content: center;
  }
  #chart2 div.jqplot-xaxis-tick{
    margin-left:0%;
    position: static!important;
    left:unset;
    width:50%;
  }
  #chart2 div.jqplot-xaxis-tick .ui-selectmenu-button.ui-button{
    width:5em!important;
  }
  #chart2 div.jqplot-xaxis-tick .ui-selectmenu-text{
    margin-right: 0;
  }
  #chart2 div.jqplot-xaxis-tick .ui-selectmenu-icon{
    display:none;
  }
  .jqplot-point-label{
    margin-left:0;
  }

  .nav.learn.mobile{
    position: fixed;
    left:0;
    top:10%;
    width:100%;
    height:40px;
    display:flex;
    align-items: center;
    margin-left: 10%;
    z-index:5;
  }
  [data-content="learning"] .boxLeft{
    display:none;
  }
  [data-content="learning"] .boxLeft.show{
    display:block;
    position: absolute;
    left: 10%;
    top: 2%;
    z-index: 10;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 0px 25px 0px #edc47a;
    width: 80%;
    height:90%;
    padding-top:5%;
    overflow:auto;
  }
  [data-content="learning"] .boxLeft .nav-learn {
    width: 70%;
    margin: 0 auto;
    padding: .5em 1em;
  }
  .info-hase{
    display:none;
  }
  .mobile-hase{
    width:40px;
    height:40px;
    margin-left:2%;
    background-color:#D4DBF0;
    border-radius: 50%;
    background-image:url('../images/howto/hase-links.png');
    background-size: contain;
  }
  .mobile-hase.open{
    background-image:url('../images/learning/btn-close.png');
    background-position: center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
  }
  .did-you-know{
    left: 10%;
    top: 22%;
    width: 80%;
    height: 60%;
    transform:none;
    display:none;
    background-image:url('../images/learning/hase-links.png');
    background-position: bottom -25% left;
    background-repeat: no-repeat;
    background-size: 40%;
  }
  .did-you-know.show{
    animation: none;
  }
  .did-you-know.hide{
    animation: none;
    display:none;
  }
  .did-you-know .subheadline{
    margin:10%;
  }
  .did-you-know .text{
    margin:0 10%;
  }

  .answer-popup .saveBox{
    width:80%;
  }
  .answer-popup .saveBox .headline{
    margin:0;
  }
  .answer-popup .saveBox .save-btn{
    margin-top:5%;
    flex-direction: column;
  }
  .answer-popup .saveBox .save-btn div{
    font-size: .8em;
    display:flex;
    align-items: center;
    justify-content: center;
    width:80%;
    margin:5% auto;
  }

  [data-content="learning"] .box{
    top:18%;
    height:67%;
  }
  [data-content="learning"] .boxRight{
    width:100%;
  }
  [data-content="learning"] .headline{
    font-size: 1.5em;
    margin:10%;
  }
  [data-content='learning'] .learning-entry{
    width:100%;
    margin:0 auto;
    height:95%;
    overflow:auto;
  }
  [data-content='learning'] .learning-entry .learn-btn{
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }
  [data-content='learning'] .learning-entry .learn-btn div{
    width: 80%;
    margin: 5% auto;
  }
  .dotNavi {
    position: fixed;
    left: 10%;
    width: 60%;
  }
  [data-popup="learn"] .dotNavi{
    bottom:5%;
  }
  .nav-learn-next-step[data-step="slide"] {
    position: fixed;
    right: 7%;
    bottom: 13%;
    width: 40px;
    height: 40px;
  }
  [data-popup="learn"] .btn-next-step{
    position: fixed;
    right: 6%;
    bottom: 3%;
    width: 40px;
    height: 40px;
  }
  [data-content="learning"] .twoColumns{
    /* flex-direction: column; */
    height:95%;
    /* overflow:auto; */
    display:block;
  }
  [data-content="learning"] .twoColumns .leftColumn{
    width:100%;
    /* margin:0 auto; */
    overflow:unset;
  }
  [data-content="learning"] .twoColumns .rightColumn{
    width:80%;
    margin:0 auto;
    height:50%;
    padding-bottom: 5%;
  }
  [data-content='learning'] .learning-entry .subheadline{
    width:80%;
    margin:0 auto;
    margin-bottom: .5em;
  }
  [data-content='learning'] .learning-entry .text{
    width:80%;
    margin:0 auto;
    margin-bottom: .5em;
  }
  [data-content='learning'] .learning-entry .text.highlight{
    width:80%;
    margin:0 auto;
  }

  [data-content="learning"] .threeColumns {
    display: block;
    /* overflow: auto; */
    height:70%;
    width: 80%;
    margin: 0 auto;
  }
  [data-content="learning"] .threeColumns div{
    flex-direction: row;
    height:33%;
  }
  [data-content="learning"] .threeColumns .selectChoice{
    margin-top:2%;
  }
  [data-content="learning"] .threeColumns .selectChoice .text{
    width:60%;
  }
  [data-content="learning"] .selectChoice .btn-selectChoice{
    margin-bottom: 0!important;
    width:10%;
  }
  [data-content="learning"] .threeColumns div.ofen,
  [data-content="learning"] .threeColumns div.waschmaschine,
  [data-content="learning"] .threeColumns div.pumpe{
    background-size: contain;
    height:100%;
    width:25%
  }

  [data-content='learning'] .learning-entry[data-part='1'][data-slide='4'] .twoColumns{
    flex-direction: column;
    height:90%;
  }
  [data-content="learning"] [data-part="1"][data-slide="4"] .twoColumns div{
    width:80%;
    margin:1% auto;
    background-size: contain;
  }
  [data-content="learning"] [data-slide="4"] .twoColumns div.column .text{
    /* margin:2% auto; */
    width:100%;
  }

  [data-content='learning'] .learn-box{
    width:100%;
    overflow:auto;
  }
  [data-content="learning"] .toilett{
    width:100%;
  }

  [data-content="learning"] .toggleBoy{
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 100%;
    height: 8%;
  }

  [data-content="learning"] .choicesContainer{
    display:block;
    margin:0 auto;
    width:80%;
    height:auto;
    margin-bottom: 5%;
  }
  [data-content="learning"] .choicesContainer div{
    width:60%;
    margin:1% 0;
  }
  [data-content="learning"] input.singleChoice + div.styledCheckbox{
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  [data-content="learning"] input.singleChoice + div.styledCheckbox,
  [data-content="learning"] input.singleChoice:checked + div.styledCheckbox{
    background-size: 25px 25px;
  }
  [data-content="learning"] .pipiBlase{
    background-position: center right;
  }
  [data-content="learning"] .pipiBlase .sprechblase{
    left: -20%;
    bottom: -30%;
    width: 80%;
    height: 60%;
  }
  [data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns{
    /* display:block; */
    margin: 5% 0;
    flex-direction: column;
    height:50%;
  }
  [data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns div{
    flex-direction: row;
    flex: unset;
    margin: 2% auto;
    width: 80%;
    height:50%;
  }
  [data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns div.niereNacht,
  [data-content="learning"] [data-part="3"][data-slide="5"] .threeColumns div.blaseNacht{
    width:25%;
    background-position: top left;
    margin-right: 2%;
  }

  [data-content="learning"] .rightColumn .moon {
    position: fixed;
    right: 5%;
    top: -10%;
    width: 59px;
    height: 59px;
    background-size: contain;
  }
  [data-content="learning"] .caroussel.active {
    width: 100%;
    margin: 0 auto;
  }
  [data-content="learning"] .carousselContainer .caroussel .carousselEntry{
    display:block;
  }
  [data-content="learning"] .carousselContainer .caroussel .carousselEntry .text{
    width:80%;
    margin:5% auto;
  }
  [data-content="learning"] [data-part="3"][data-slide="6"] .carousselContainer .caroussel[data-slide='1'] .carousselEntry .carousselImg,
  [data-content="learning"] [data-part="3"][data-slide="7"] .carousselContainer .caroussel[data-slide='2'] .carousselEntry .carousselImg,
  [data-content="learning"] [data-part="3"][data-slide="8"] .carousselContainer .caroussel[data-slide='3'] .carousselEntry .carousselImg{
    width:100%;
    margin:0 auto;
    background-size: contain;
  }
  [data-content="learning"] [data-part="3"][data-slide="9"] .carousselContainer .caroussel[data-slide='1'] .carousselEntry .carousselImg,
  [data-content="learning"] [data-part="3"][data-slide="10"] .carousselContainer .caroussel[data-slide='2'] .carousselEntry .carousselImg,
  [data-content="learning"] [data-part="3"][data-slide="11"] .carousselContainer .caroussel[data-slide='3'] .carousselEntry .carousselImg{
    width:100%;
    margin:0 auto;
    background-size: contain;
  }

  [data-content="learning"] [data-part="4"] .twoColumns .leftColumn{
    width:100%;
  }
  [data-content="learning"] [data-part="4"] .rightPosition{
    bottom:36%;
  }

  [data-content="learning"] [data-part="5"] .threeColumns div{
    flex-direction: row;
    height:33%;
  }
  [data-content="learning"] [data-part="5"] .threeColumns .selectChoice{
    margin-top:2%;
    width:100%;
  }
  [data-content="learning"] [data-part="5"] .threeColumns .selectChoice .text{
    width:60%;
  }
  [data-content="learning"] [data-part="5"]] .selectChoice .btn-selectChoice{
    margin-bottom: 0!important;
    width:10%;
  }
  [data-content="learning"] [data-part="5"] .threeColumns div.quizImg{
    background-size: contain;
    height:100%;
    width:25%
  }
  [data-content='learning'] .bluebox .headline {
    position: static;
    margin: 0;
    padding-top: 5%;
    padding-left: 5%;
    width: 70%;
  }
  [data-content='learning'] .bluebox .text{
    position: static;
    margin: 0;
    padding-top: 5%;
    padding-left: 5%;
    width: 70%;
  }
  [data-content='learning'] .allAnswers .answers .answer {
    width: 100%;
  }
  [data-content='learning'] .allAnswers {
    width: 80%;
    margin: 0 auto;
  }
  [data-content='learning'] .allAnswers .answers .answer .right{
    align-items: flex-start;
  }
  [data-content="learning"] .allAnswers .btn-solution {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-content="learning"] .allAnswers .answers .answer .left .subheadline{
    width:90%;
    margin:0;
  }
  [data-content="learning"] .allAnswers .answers .answer .left .text{
    width:90%;
    margin:0;
  }
  [data-content='learning'] .allAnswers .answers .solution{
    width:100%;
    margin:0;
  }
  [data-content="learning"] .allAnswers .answers .answer .left [data-result] {
    width:70%;
    min-height: 50px;
    max-height: 70px;
    padding-left: 35%;
  }
  [data-content='learning'] .allAnswers .answers .answer .left [data-result='8']{
    width: 100%;
    padding-left: 50%;
  }
  [data-content='learning'] .allAnswers .answers .answer .left [data-result='9']{
    width: 100%;
    padding-left: 50%;
  }

  [data-popup="learn"] .blase-content.active{
    overflow:auto;
  }
  [data-content="popup-blase"] .twoPics[data-state='2'] div{
    height:50%;
  }
  [data-content="popup-pinkeln"] .twoPics{
    /* display:block; */
    height: auto;
    flex-direction: column;
  }
  [data-popup="learn"] .twoPics .boyLinks,
  [data-popup="popup-solution"] .twoPics .boyLinks{
    height:40%;
    margin-bottom: 5%;
    min-height: 200px;
  }
  [data-popup="learn"] .twoPics .pinkelnRight,
  [data-popup="popup-solution"] .twoPics .pinkelnRight{
    height:55%;
    margin:0 auto;
  }
  [data-popup="learn"] .twoPics .pinkelnRight div {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100px;
    flex-direction: column;
  }
  [data-popup="learn"] .twoPics .pinkelnRight div.blasePhone{
    flex-direction: column-reverse;
  }
  [data-popup="learn"] .twoPics[data-state="3"] .pinkelnRight{
    width:100%;
  }
  [data-popup="learn"] .twoPics[data-state="3"] .pinkelnRight div{
    min-height: 150px;
  }
  [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:block;
  }
  [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:100%;
    margin:0 auto;
    height:auto;
    margin-top:15%;
  }
  [data-content="popup-solution"] [data-popup-slide="5"] .twoColumns .rightColumn,
  [data-content="popup-solution"] [data-popup-slide="6"] .twoColumns .rightColumn,
  [data-content="popup-solution"] [data-popup-slide="7"] .twoColumns .rightColumn,
  [data-content="popup-solution"] [data-popup-slide="9"] .twoColumns .rightColumn{
    height:50%;
  }
  [data-content="popup-solution"] .twoPics{
    display:block;
    height:60%;
  }
  [data-content="popup-solution"] [data-popup-slide="4"] .twoPics,
  [data-content="popup-solution"] [data-popup-slide="8"] .twoPics{
    height: auto;
    flex-direction: column;
  }
  [data-content="popup-solution"] [data-popup-slide='1'] .twoPics,
  [data-content="popup-solution"] [data-popup-slide='2'] .twoPics{
    display:flex;
  }
  [data-content="popup-solution"] .text.highlight,
  [data-content="popup-solution"] .text{
    margin:0 auto;
    width:100%;
  }

  [data-content="reward-overview"] .box{
    display:block;
  }
  [data-content="reward-overview"] .boxTop{
    display:block;
    height:auto;
  }
  [data-content="reward-overview"] .boxTopLeft,
  [data-content="reward-overview"] .boxTopRight{
    width:80%;
    margin:0 auto;
    padding:0;
  }
  [data-content="reward-overview"] .boxTopRight .topRightText{
    padding:.5em;
  }
  [data-content="reward-overview"] .boxTopLeft .headline{
    margin:0;
  }
  [data-content="reward-overview"] .star{
    min-height: 50px;
  }
  [data-content="reward-overview"] .boxBottom {
    height: 68%;
    flex-direction: column;
  }
  [data-content="reward-overview"] [data-game]{
    display:flex;
    align-items: center;
    width:80%;
    margin:0 auto;
    background-color: #EF9600;
    height: 30%;
    border-radius: 15px;
  }
  [data-content="reward-overview"] [data-game] .gameImg{
    height: 100%;
    width:33%;
  }
  [data-content="reward-overview"] [data-game] .gameName{
    width:66%;
    color:#ffffff;
    font-size: 1em;
    margin:0;
  }
  [data-content="reward-overview"] [data-game] .btnGames{
    color:#ef9600;
    background-color: #ffffff;
    margin:0 auto;
    width:50%;
  }

  /* VIDEO-POPUP */
  .popup-video .saveBox{
    width: 80%;
    height: auto;
  }
}

@media screen and (max-width: 350px) {
  .mediaGames {
      width: 80%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      border: 1px solid #ef9600;
      border-radius: 15px;
      margin: 5% auto;
      padding: 5%;
      height:unset;
      /* min-height: 20%; */
  }
}

@media screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 1400px) {
  [data-content='welcome'] .btnLinks .btnWelcome .welcomeStift{
    /* background-position: top -60px right; */
  }
  [data-content='welcome'] .btnLinks .btnWelcome .welcomeHasi{
    /* background-position: top 40% right 3%; */
    /* background-size: 40%; */
    background-position: top 100px right -80px;
  }
}