@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: 0.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: 0.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"] .dayTbl .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_88@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.addNew {
    margin-top: 1em;
  }
  [data-content="my-protokoll"] .entryTbl .dayTbl.text {
    width: 95%;
    margin-left: 5%;
  }
  [data-content="my-protokoll"] .entryTbl .dayTbl.time {
    width: 70%;
    margin-left: 5%;
  }
  [data-content="my-protokoll"] .entryTbl .dayTbl.time input {
    width: 80px;
  }
  [data-content="my-protokoll"] .entryTbl .dayTbl.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: 0.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: 0.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: 0.5em;
  }
  [data-content="learning"] .learning-entry .text {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 0.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: 0.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;
  }
}