:root {
  --color-header-text: #072907;
  --color-header-background: #f1fee1;

  --color-body-text: #464646;
  --color-body-background: #fff;

  --color-footer-text: #BAFA6B;
  --color-footer-background: #29401C;

  --color-button-text: #464646;
  --color-button-background: #ffffff;
  --color-button-border: lightgreen;

  --color-collect-text: #fff;
  --color-collect-background: #D297F9;
  --token-sign: "\f51e";

  --color-quiz-text: #072907;
  --color-quiz-background: #ecf0ff;

  --color-link: #70a503;

  --color-box-shadow: lightgray;

  --box-radius: 2px;
}

.placeit-widget {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.placeit-label { }

.placeit-button {
    cursor: pointer;
    display: block;
    width: fit-content;
    height: fit-content;
}

.placeit-textinput {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.placeit-input-label {
    width: 5.5em;
}

.placeit-input-input {

}

.placeit-dropdown-select {
    width: fit-content;
    border: unset;
}

.placeit-imagecapturearea{
    width: 100vw;
    height: 95vh;
    background-color: lightgray;
}

.placeit-imagebuttonarea{
    display: flex;
    padding-bottom: 1em;
    padding-left: 2em;
}

.placeit-audioplayerarea {
    padding: 0em 2em;
    display: flex;
    justify-content: center;
    height: 110px;
}

.placeit-video{
    max-width: 100vw;
    max-height: calc(100vh - 2em - 11px - 30px - 2em);
}
.placeit-canvas{
    max-width: 100vw;
    max-height: calc(100vh - 2em - 11px - 30px - 2em);
}
.placeit-camselect{
    max-width: 100px;
}
.placeit-audiocanvas{
    width: 100%;
    height: 250px;
    padding: 0em 2em;
}
.placeit-audioplayer{
    width: 100%;
    align-self: center;
}
.placeit-audiostartrecbutton,
.placeit-audiostoprecbutton {
    background-repeat: no-repeat;
    margin: 1em 0em;
    height: 80px;
    width: 80px;
    background-position: 16px 5px;
    border-radius: 50%;
    padding-top: 53px;
    text-align: center;
}
.placeit-audiostoprecbutton {
    background-color: lightcoral;
}
.placeit-chooser {
    padding-top: 2em;
    padding-left: 2em;
    display: flex;
    flex-direction: column;
}

.placeit-chooser-optioncontainer {
    display: flex;
    flex-direction: column;
}

.placeit-chooser-line {
    display: flex;
    flex-direction: row;
    padding-bottom: 0.2em;
}

.placeit-chooser-label {
    width: 15em;
}

.placeit-chooser-checkbox { }

.placeit-selector {
    display: flex;
    flex-direction: column;
}
.placeit-selector-name {
    font-size: 1em;
    padding-left: 1.8em;
    padding-top: 0.2em;
}

.placeit-selector-options {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 0.8em;
    padding-top: 0.8em;
    padding-bottom: 0.5em;
}

.placeit-selector-line {
    display: flex;
    flex-direction: row;
}

.placeit-selector-label {
    padding-left: 0.1em;
}

.placeit-selector-radio {}

.placeit-carousel {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.placeit-carousel .placeit-button[data-id=chevron-left] , .placeit-button[data-id=chevron-right] {
    position: unset;
    background-color: unset;
    font-size: 2em;
    transform: scaleY(2);
    margin-top: auto;
    margin-bottom: auto;
    color: lightgreen;
}

.placeit-camera {
    width: 44px;
    height: 26px;
    background-color: lightgreen;
    border-radius: 5px;
    overflow: hidden;
}

.placeit-camera-input {
    position: relative;
    top: -16px;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.placeit-camera-button {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    padding-left: 15px;
    padding-top: 3px;
}

.placeit-infodialog {
    position: absolute;
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid lightgray;
    box-shadow: 4px 4px 4px lightcyan;
}

.infodialog-textlabel {
    display: flex;
}

.infodialog-buttoncontainer {
    display: flex;
    flex-direction: row;
}

.pet-numberpad {
    height: 230pt;
    width: 160pt;
    margin-left: auto;
    margin-right: auto;
    background-color: #eaeaea;
    border: 2px solid lightgray;
    padding: 5px 10px 5px 10px;
    display: flex;
    flex-direction: column;
}

.numberpad-line {
    display: flex;
    flex-direction: row;
}

.number-key, .number-erase {
    border: 2px solid whitesmoke;
    padding: 5px 10px 5px 10px;
    margin: 10px 10px 10px 10px;
    font-size: 25pt;
    background-color: white;
    box-shadow: 2px 2px 2px #b2b2b2;
    width: fit-content;
    cursor: pointer;
}

.number-key:hover, .number-erase:hover {
    box-shadow: unset;
}

.number-erase {
    width: 80pt;
    text-align: center;
}

.number-erase::before {
    font-family: "Font Awesome 5 Pro";
    font-size: 20pt;
    content: "\f55a";
}

.placeit-infodialog {}

.placeit-infodialog .placeit-button::before {
    content: "OK";
}
.placeit-popup {
    position: absolute;
    top: 36%;
    left: 5%;
    background-color: white;
    width: fit-content;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 20px 10px 20px;
    box-shadow: 2px 2px 8px gray;
    max-width: 90%;
    border: 1px solid lightgray;
    font-size: 11pt;
}

.placeit-popup .placeit-popup-label {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.placeit-popup .placeit-button[data-id=close] {
    color: unset;
    padding: 5px 10px 5px 12px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: 25px;
}

.placeit-popup .placeit-button[data-id=close]::before {
    color: white;
    content: "Mach' ich.";
}
.placeit-locate {
    top: 10px;
    right: 10px;
}

.placeit-locate .placeit-locate-btn::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f124";
}
.pet-info {
    width: 100vw;
}

@keyframes fadeout {
    from {font-size: 8pt;}
    to {font-size: 0pt; }
}

.pet-releasestring {
    animation-name: fadeout;
    animation-duration: 2000ms;
    animation-delay: 15s;
    animation-fill-mode: forwards;
    padding-top: 15px;
    width: 100%;
    font-size: 8pt;
    text-align: center;
}

.pet-releasestring::before {
    content: "placeit EventTokenizer 7.5.0.2";
}
:root {
    box-sizing: border-box;
    font-size: 11pt;
    font-family: Geneva, Arial, sans-serif;
    backgorund-color: white;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

.placeit-invisible {
    display: none !important;
}

.placeit-transparent {
    opacity: 0 !important;
}

.placeit-btn-active {
    font-weight: 700;
}

.pet-body {
    padding-top: 60px;
    width: 100vw;
    color: var(--color-body-text);
    background-color: var(--color-body-background);
}


.notification-dialog {
    font-size: 9pt;
    position: relative;
    top: calc(-100vh + 110px);
    left: calc(50% - 50vw + 20px);
    z-index: 10;
    width: calc(100vw - 40px);
    background-color: white;
    border: 1px solid gray;
    box-shadow: 1px 1px 1px gray;
    padding: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.notification-dialog .request {
    display: block;
}

.notification-dialog .request .basic-label {}

.notification-dialog .request .basic-label::before {
    content: "Darf placeit Dir Nachrichten senden (";
    padding-top: 6px;
}

.notification-dialog .request .question-label {}

.notification-dialog .request .question-label::before {
    content: "warum wir das machen";
    padding-top: 6px;
    color: blue;
    border-bottom: 1px solid blue;
    cursor: pointer;
}

.notification-dialog .request .question-label::after {
    content: ")?";
}

.notification-dialog .extended.active {
    width: 100%;
    height: 300px;
    background-color: whitesmoke;
    padding: 10px;
}

.notification-dialog .extended.active::before {
    content: "Hier muss Erklärungstext hin.";
}

.notification-dialog  .button-container {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    justify-content: flex-end;
    width: 100%;
}

.notification-dialog .button-container .placeit-button {
    padding: 5px 10px 5px 10px;
    border: 1px solid gray;
    box-shadow: 1px 1px 1px gray;
}

.notification-dialog .button-container .placeit-button[data-id=notify-ok]::before {
    content: "Zustimmen";
}

.notification-dialog .button-container .placeit-button[data-id=notify-no]::before {
    content: "Später";
}


.placeit-debugging {
    width: calc(100% - 10px);
    height: fit-content;
    background-color: #ffa0a0;
    border: 1px solid lightgray;
    box-shadow: 1px 1px 1px gray;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media only screen and (min-width: 800px) {
  body {
    width: 100%;
    background-color: WhiteSmoke;
  }
  .pet-base,.pet-body,.body {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }

  .notification-dialog {
      left: calc(50% - 300px);
      width: 600px;
  }

    .notification-dialog .request {
        display: flex;
        flex-direction: row;
    }
}

.pet-header {
    height: 60px;
    width: 100%;
    color: var(--color-header-text);
    background-color: var(--color-header-background);
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1;
}

@media only screen and (min-width: 800px) {
  .pet-header {
    max-width: 800px;
  }
}

.pet-header .pet-logo {
    margin-top: auto;
    margin-bottom: auto;
    height: 36px;
    width: auto;
    padding-left: 15px;
    cursor: pointer;
}

.pet-header .pet-logo img {
    margin: 0;
    padding: 0;
}

.pet-header .pet-info {
    font-size: 12pt;
    font-weight: 700;
    max-width: calc(100vw - 160px);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: auto;
    margin-bottom: auto;
}

.pet-header .pet-news {
    margin-top: 15px;
    font-size: 16pt;
}

.pet-header .pet-news.news-bell-active:before {
    font-family: "Font Awesome 5 Pro";
    color: red;
    content: "\f8fa";
}

.pet-header .pet-menu-icon {
}

.pet-header .pet-menu-icon .placeit-button[data-id=menu-button] {
    font-family: "Font Awesome 5 Pro";
    font-size: 20pt;
    padding-top: 15px;
    padding-right: 15px;
}

.pet-header .pet-menu-icon .placeit-button[data-id=menu-button]::before {
    content: "\f0c9";
}

@keyframes show-menu {
    from {opacity: 0;}
    to {opacity: 1;}
}

.pet-menu {
    position: absolute;
    top: 61px;
    right: 0;
    z-index: 10;
    color: var(--color-header-text);
    background-color: var(--color-header-background);
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    width: 145px;
    height: fit-content;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    animation-name: show-menu;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-menu .placeit-button {
    font-size: 11pt;
    padding: 5px 5px 0px 0px;
}

.pet-menu .placeit-button[data-id=map-entry]::before {
    content: "Karte";
}

.pet-menu .placeit-button[data-id=list-entry]::before {
    content: "Locations";
}

.pet-menu .placeit-button[data-id=info-entry]::before {
    content: "Infos";
}

.pet-menu .placeit-button[data-id=news-entry]::before {
    content: "News";
}

.pet-menu .placeit-button[data-id=convert-entry]::before {
    content: "Tokens einlösen";
}

.pet-menu .placeit-button[data-id=pers-entry]::before {
    content: "Personalisierung";
}

.pet-menu .lang-entry {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    height: fit-content;
}

.pet-menu .lang-entry .placeit-button {
    height: 18px;
    width: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}

.pet-menu .lang-entry .placeit-button.active {
    opacity: 1;
}

.pet-menu .lang-entry .placeit-button[data-id=lang-de] {
    background-image: url(b66f68c5b41967f5e70f.png);
}

.pet-menu .lang-entry .placeit-button[data-id=lang-en] {
    background-image: url(0fbee3a262e7def9081f.png);
}
.pet-footer {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    padding-left: 25px;
    padding-right: 25px;
    height: 40px;
    width: 100%;
    color: var(--color-footer-text);
    background-color: var(--color-footer-background);
}

.pet-footer a {
    padding-top: 15px;
    color: white;
    font-size: 8pt;
}

@media only screen and (min-width: 800px) {
  .pet-footer {
    max-width: 800px;
  }
}

.pet-entry-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
    margin-left: 10px;
    margin-right: 10px;
}

.pet-entry-page .body {
    margin-top: 70px;
    flex-grow: 2;
    background-color: white;
}

.pet-entry-page .wip-dynamic-page.scan {
    margin-top: 80px;
}

.pet-entry-page .scan-container {
    margin-top: 10px;
    margin-bottom: 5px;
    position: fixed;
    width: calc(100vw - 20px);
}

.pet-entry-page .scan-container .placeit-button[data-id=scan]::before {
    display: block;
    padding-top: 20px;
    content: "Scannen";
}

.pet-entry-page .scan-container .placeit-button[data-id=abort]::before {
    content: "Abbrechen";
}

.pet-entry-page .scan-container .placeit-button {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid lightgreen;
    padding: 5px 5px 5px 5px;
    border-radius: 2px;
    box-shadow: 1px 1px 2px lightgray;
    background-color: white;
    background-image: url(0f88f6ea0bb3b2507285.png);
    width: 70px;
    height: 70px;
    background-size: contain;
}

.pet-entry-page .scan-container .placeit-button[data-id=abort] {
    background-image: unset;
    width: fit-content;
    height: unset;
    background-size: unset;
}

[data-id=scannerFrame] {
    width: 100vw;
    height: 0;
}

[data-id=scannerFrame].active {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 10px) !important;
    background-color: white;
    opacity: 1 !important;
    transform: unset !important;
    position: absolute;
    z-index: 2;
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-entry-page {
        max-width: 800px;
        margin: 0px;
    }
    .pet-entry-page .scan-container {
        max-width: 800px;
    }
    [data-id="scannerFrame"].active {
        max-width: 600px;
        max-height: 400px;
        margin-left: 100px;
    }
}

.pet-location-page {
    width: 100vw;
    min-height: calc(100vh - 40px);
    overflow: hidden;
}


.pet-location-page .body {
    font-size: 9pt;
    width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
}

.pet-location-page .placeit-button[data-id=close-detail] {
    position: absolute;
    top: 70px;
    right: 10px;
    border: 1px solid lightgrey;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    padding-top: 2px;
    padding-left: 7px;
    background-color: white;
}

.pet-location-page .placeit-button[data-id=close-detail]::before {
    font-family: "Font Awesome 5 Pro";
    font-size: 16pt;
    content: '\f00d';
}

/* ------------------------ images ------------------------ */

.pet-location-page .body .images {}


/* ------------------------ texts ------------------------ */

.pet-location-page .body .texts {
    width: calc(100% - 30px);
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
}

.pet-location-page .body .texts .info {
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: bold;
}

.pet-location-page .body .texts .slogan {
    width: 100%;
    text-align: center;
    padding-top: 3px;
}

.pet-location-page .body .texts .news {
    width: 100%;
    text-align: center;
    padding-top: 3px;
}


/* ------------------------ button container ------------------------ */

.pet-location-page .body .button-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

.pet-location-page .body .button-container.no-details {
    justify-content: space-around;
    width: fit-content;
}

.pet-location-page .body .button-container .placeit-button[data-id=map-button] {
    margin-top: 7px;
    border: 1px solid var(--color-button-border);
    border-radius: var(--box-radius);
    padding: 0.2rem 1.2rem 0.2rem 1.2rem;
    background-color: var(--color-button-background);
    color: var(--color-button-text);
}

.pet-location-page .body .button-container .placeit-button[data-id=map-button]::before {
    content: 'Zur Karte';
}

.pet-location-page .body .button-container .placeit-button[data-id=details-button]::before {
    content: "\21E3\A\A";
    font-size: 20px;
    color: var(--color-button-border);
}

.pet-location-page .body .button-container .placeit-button[data-id=details-button] {
    color: var(--color-body-text);
    font-weight: bold;
}

.pet-location-page .body .button-container .placeit-button[data-id=details-button]::after {
    content: 'Mehr erfahren';
}


.pet-location-page .body .button-container .placeit-button[data-id=close]::before {
    content: "\21E1\A\A";
    font-size: 20px;
    color: var(--color-button-border);
}

.pet-location-page .body .button-container .placeit-button[data-id=close] {
    color: var(--color-body-text);
    font-weight: bold;
}

.pet-location-page .body .button-container .placeit-button[data-id=close]::after {
    content: "Weniger";
}


/* ------------------------ details -------------------------- */

.pet-location-page .body .details.collapsed {
    height: 0;
    padding-top: 0;
    overflow: hidden;
}

.pet-location-page .body .details {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 100%;
    padding-top: 10px;
}

.pet-location-page .body .details .header {
    font-weight: 700;
    font-size: 11pt;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pet-location-page .body .details .header::before {
    content: "Details";
}


/* ------------------------- quiz ------------------------- */

.pet-location-page .body .quiz {
    margin-top: 10px;
    color: var(--color-quiz-text);
    background-color: var(--color-quiz-background);
    padding: 10px;
}

.pet-location-page .body .quiz.fade {
    animation-name: fade-tokens;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    overflow: hidden;
}

.pet-location-page .body .quiz-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.pet-location-page .body .quiz .quiz-header .quiz-question {
    padding-bottom: 5px;
    font-size: 10pt;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.pet-location-page .body .quiz .quiz-header .quiz-question::before {
    content: "Quiz:\A";
    font-weight: 700;
}

.pet-location-page .body .quiz .quiz-header .quiz-explain {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pet-location-page .body .quiz .quiz-header .quiz-explain::before {
    content: "(Auswählen und abschicken)";
}

.pet-location-page .body .quiz .quiz-choice {
    padding-left: 10%;
    margin-top: 2px;
    margin-bottom: 4px;
    background-color: white;
    min-height: 14pt;
    border-radius: 2px;
}

.pet-location-page .body .quiz .quiz-choice.chosen {
    box-shadow: 2px 2px 4px gray;
}

.pet-location-page .body .quiz .quiz-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 15px;
}

.pet-location-page .body .quiz .quiz-buttons .placeit-button {
    box-shadow: 2px 2px 4px lightgray;
    border: 1px solid var(--color-button-border);
    border-radius: var(--box-radius);
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    padding: 2px 6px 2px 6px ;
}

.pet-location-page .body .quiz .quiz-buttons [data-id=send]::before { content: "Abschicken"; }

.pet-location-page .body .quiz .quiz-buttons [data-id=skip]::before { content: "Keine Lust"; }

.pet-location-page .body .quiz .quiz-result {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    color: var(--color-collect-text);
    background-color: var(--color-collect-background);
}

.pet-location-page .body .quiz .quiz-result::before {
    content: var(--token-sign);
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    color: Gold;
    margin-right: 16px;
}

.pet-location-page .body .quiz .quiz-result::after {
    content: " Tokens gesammelt.";
}



/* ------------------------ tokens ------------------------ */

@keyframes fade-tokens {
    from { opacity: 1; max-height: 300px; padding-top: 10px; }
    to { opacity: 0; max-height: 0; padding-top: 0; }
}

.pet-location-page .body .tokens {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    font-size: 11pt;
}

.pet-location-page .body .tokens.fade {
    animation-name: fade-tokens;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    overflow: hidden;
}

.pet-location-page .body .tokens .token-count {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    color: var(--color-collect-text);
    background-color: var(--color-collect-background);
}

.pet-location-page .body .tokens .token-count::before {
    content: var(--token-sign);
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    color: Gold;
    margin-right: 16px;
}

.pet-location-page .body .tokens .token-count::after {
    content: " Tokens gesammelt.";
}


/* ------------------------ secondary ------------------------ */

.pet-location-page .body .secondary {
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
}

.pet-location-page .body .secondary::before {
    content: "Besuche auch ...";
    background-color: var(--color-header-background);
    color: var(--color-header-text);
    width: unset;
    display: block;
    padding: 4px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.pet-location-page .body .secondary .container {
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--color-header-background);
    padding-bottom: 10px;
}

.pet-location-page .body .secondary .container .image {
    width: calc(100% - 100px);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
}

.pet-location-page .body .secondary .container .title {
    width: 100%;
    padding-top: 8px;
    text-align: center;
    font-size: 11pt;
    font-weight: 700;
}

.pet-location-page .body .secondary .container .info {
    width: 100%;
    text-align: center;
    font-size: 9pt;
}


/* ---------------------------------------- slides for location page ---------------------------------------- */

.pet-location-page .body .slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    flex-direction: row;
    height: 190px;
    overflow-y: scroll;
}

.pet-location-page .body .mySlides {
    display: none;
    margin-left: auto;
    margin-right: auto;
    vertical-align: center;
}

.pet-location-page .body .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: fit-content;
    margin-top: -22px;
    font-size: 30px;
    transition: 0.6s ease;
}

.pet-location-page .body .prev {
    left: 0;
}
.pet-location-page .body .next {
    right: 0;
}

.pet-location-page .body .fade {
    animation-name: fade;
    animation-duration: 2.5s;
}

@keyframes fade {
    from {opacity: .2}
    to {opacity: 1}
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-location-page {
        max-width: 800px;
        position: relative;
    }
    .pet-location-page .placeit-button[data-id="close-detail"] {
        top: 5px;
    }
    .pet-location-page .body .slideshow-container {
        height: unset;
        overflow: unset;
    }
    .pet-location-page .body .slideshow-container placeit-slot img {
        max-width: 600px;
    }
}


/* ------------------------ small devices ------------------------ */

@media only screen and (max-width: 600px) {
    .pet-location-page .body .slideshow-container {
        width: 95%;
    }

    .pet-location-page .body .slideshow-container .dynamic-slot {
        height: fit-content;
        margin-top: auto;
        margin-bottom: auto;
    }

    .pet-location-page .body .slideshow-container .dynamic-slot img {
        width: 100% !important;
        max-height: 180px;
        box-shadow: 2px 2px 4px gray;
    }
}


.pet-list-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 100px);
}

@media only screen and (min-width: 800px) {
    .pet-list-page {
      max-width: 800px;
    }
}

.pet-list-page .cat-node {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 12px;
    background-color: #f1fee1;
    border-top: 1px solid lightgray;
    overflow-x: auto;
}

.pet-list-page .cat-node .placeit-button {
    background-color: white;
    padding-left: 3px;
    padding-right: 3px;
    margin-top: 6px;
    box-shadow: 2px 2px 4px gray;
    font-size: 9.5pt;
}

.pet-list-page .list-node {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    min-height: calc(100% - 100px);
    row-gap: 3px;
    background-color: var(--color-body-background);
}

.pet-list-page .list-node .item-container {
    display: flex;
    flex-direction: row;
    width: calc(100% - 12px);
    height: 60px;
    box-shadow: 2px 2px 4px var(--color-button-border);
    border: 1px solid var(--color-button-border);
    border-radius: 8px;
    padding: 10px 5px 10px 5px;
    cursor: pointer;
    font-size: 10pt;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
    margin-bottom: 3px;
    color: var(--color-button-text);
    background-color: var(--color-button-background);
}

.pet-list-page .list-node .item-container:first-child {
    margin-top: 8px;
}

.pet-list-page .list-node .item-container .item-left-container {
    width: calc(100% - 40px);
    min-width: calc(100% - 40px);
    height: 60px;
    overflow: hidden;
}

.pet-list-page .list-node .item-container .item-left-container .item-title {
    font-size: 11pt;
    font-weight: 700;
    margin-bottom: 2px;
}

.pet-list-page .list-node .item-container .item-left-container .item-info {}

.pet-list-page .list-node .item-container .item-left-container .item-type {}

.pet-list-page .list-node .item-container .item-right-container {
    overflow: hidden;
    max-width: 50px;
    max-height: 50px;
}

.pet-list-page .list-node .item-container .item-right-container .item-thumbnail {
    width: 50px;
}

.pet-info-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 100px);
    overflow-y: hidden;
}


.pet-info-page .pet-infopage-general {
    margin-bottom: 20px;
}

.pet-info-page .info-container {
    text-align: center;
    height: 100%;
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
}

.info-container .pet-infopage-time {
    display: flex;
    flex-direction: row;
    padding-top: 30px;
}

.info-container .pet-infopage-time .infopage-activity-time {
    font-size: 10pt;
    margin-right: auto;
    margin-left: auto;
}

.info-container .pet-infopage-time .infopage-activity-time::before {
    content: "Letzte Aktivität am ";
}

.info-container .pet-infopage-registration {
    height: fit-content;
    width: fit-content;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid lightblue;
    font-size: 9pt;
}

.info-container .pet-infopage-registration .petid-info::before {
    white-space: pre-wrap;
    content: "Ihre pET-ID\A";
    font-weight: 700;
}

.info-container .pet-infopage-registration .petid-info {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 6px;
    padding-right: 6px;
}

.info-container .pet-infopage-registration .person-info {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    font-size: 10pt;
}

.info-container .pet-infopage-tokens {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.info-container .pet-infopage-tokens .no-tokens {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.info-container .pet-infopage-tokens .no-tokens::before {
    content: "Schade. Sie haben noch keine Tokens gesammelt.";
    font-weight: bold;
}

.info-container .pet-infopage-tokens .infopage-token-wallet {
    font-weight: 600;
    padding-bottom: 20px;
}

.info-container .pet-infopage-tokens .infopage-token-wallet::before {
    content: "Sie haben ";
}
.info-container .pet-infopage-tokens .infopage-token-wallet::after {
    content: " Token im Wallet."
}

.info-container .pet-infopage-tokens .tokens-spent {
    padding-bottom: 20px;
    font-style: italic;
}

.info-container .pet-infopage-tokens .tokens-spent::before {
    content: "Es wurden schon ";
}

.info-container .pet-infopage-tokens .tokens-spent::after {
    content: " Tokens eingetauscht.";
}


.info-container .pet-infopage-tokens .infopage-last-locations {}

.info-container .pet-infopage-tokens .infopage-last-locations .location-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 3px;
}

.info-container .pet-infopage-tokens .infopage-last-locations .location-line .location-name {
    width: 150px;
    text-align: left;
}

.info-container .pet-infopage-tokens .infopage-last-locations .location-line .location-count {
    width: 30px;
    text-align: right;
}

.info-container .pet-infopage-tokens .infopage-last-locations .location-line .location-time {
    font-size: 9pt;
    width: 115px;
    padding-top: 4px;
    display: flex;
    flex-direction: revert;
    justify-content: flex-end;
}

.info-container .pet-infopage-tokens .placeit-button[data-id=more-btn] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.info-container .pet-infopage-tokens .placeit-button[data-id=more-btn]::before {
    content: "Vollständige Liste";
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-info-page {
        max-width: 800px;
    }
   .pet-info-page .info-container {
       overflow: unset;
   }
}


@keyframes remove-product-page {
    from {background-color: lightgreen; opacity: 1;}
    to {background-color: white; opacity: 0;}
}

@keyframes emphasize-text {
    from { font-size: 300pt; opacity: 0.4; }
    to { font-size: 90pt; opacity: 1; }
}


.pet-convert-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 100px);
    overflow-y: hidden;
}


.pet-convert-page .subpages {
    width: 100%;
}

.pet-convert-page .subpages .products {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pet-convert-page .subpages .products .salespoint-desc {
    width: fit-content;
    margin: 10px auto 30px;
    font-size: 14pt;
    font-weight: bold;
}

.pet-convert-page .subpages .products .product-btn {
    width: 80%;
    height: 50px;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    border: 1px solid whitesmoke;
    border-radius: 10px;
    box-shadow: 1px 1px 2px lightgray;
    text-align: center;
    font-size: 15pt;
    font-weight: bold;
    color: #4cb5f7;
}


.pet-convert-page .subpages .product-page {
    position: absolute;
    top: 60px;
    left: 0;
    height: calc(100vh - 100px);
    width: 100vw;
    background: white;
    display: flex;
    flex-direction: column;
}

.pet-convert-page .subpages .product-page.animated-page-removal {
    animation-name: remove-product-page;
    animation-duration: 1s;
    animation-delay: 8s;
    animation-fill-mode: forwards;
}

.pet-convert-page .subpages .product-page.confirmed {
    background-color: lightgreen;
}

.pet-convert-page .subpages .product-page .product-name {
    font-size: 14pt;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.pet-convert-page .subpages .product-page .product-description {
    margin-bottom: 10px;
    text-align: center;
}

.pet-convert-page .subpages .product-page .product-price {
    text-align: center;
}

.pet-convert-page .subpages .product-page .product-price::before {
    content: "Für ";
}

.pet-convert-page .subpages .product-page .product-price::after {
    content: " Tokens";
}

.pet-convert-page .subpages .product-page .product-image {
    height: auto;
    width: 85vw;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 2px 2px lightgray;
    border-radius: 6px;
    margin-bottom: 20px;
    max-height: 50vh;
}

.pet-convert-page .subpages .product-page .product-confirm {
    display: flex;
    flex-direction: row;
    margin-top: 60px;
    margin-left: 10%;
    margin-right: 10%;
    justify-content: space-around;
}

.pet-convert-page .subpages .product-page .product-confirm .placeit-button {
    border: 1px solid lightgray;
    box-shadow: 1px 1px 2px lightgray;
    border-radius: 10px;
    background-color: whitesmoke;
    padding: 10px;
}

.pet-convert-page .subpages .product-page .product-confirm .placeit-button[data-id=confirm]::before {
    content: "Will ich haben";
}

.pet-convert-page .subpages .product-page .product-confirm .placeit-button[data-id=deny]::before {
    content: "Lieber nicht";
}

.pet-convert-page .subpages .product-page .product-status {}

.pet-convert-page .subpages .product-page.confirmed .product-status {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 90pt;
    color: white;
    animation-name: emphasize-text;
    animation-duration: 100ms;
    animation-fill-mode: forwards;
}

.pet-convert-page .subpages .product-page.confirmed .product-status::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f058";
}


.pet-convert-page .dynamic-token-info {
    width: 85%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.pet-convert-page .token-available {}

.pet-convert-page .token-available .token-count {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}

.pet-convert-page .token-available .token-count::after {
    content: " verfügbare Tokens";
}

.pet-convert-page .token-available.no-tokens {
    font-weight: bold;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 14pt;
    margin-top: 30px;
}

.pet-convert-page .token-available.no-tokens::before {
    content: "Sie haben keine Tokens verfügbar."
}

.pet-convert-page .token-scan {
    margin-top: 20px;
}

.pet-convert-page .token-scan .placeit-button[data-id=scan-start-button],  .placeit-button[data-id=scan-abort-button]{
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-button-background);
    border: 2px solid lightgray;
    box-shadow: 1px 1px 2px lightgray;
    padding: 20px;
    border-radius: 10px;
}

.pet-convert-page .token-scan .placeit-button[data-id=scan-start-button]::before {
    content: "Scannen zum Token-Einlösen";
}

.pet-convert-page .token-scan .placeit-button[data-id=scan-start-button]:hover {
    box-shadow: -1px -1px 2px whitesmoke;
    background-color: whitesmoke;
}

.pet-convert-page .token-scan .placeit-button[data-id=scan-abort-button]::before {
    content: "Scannen abbrechen";
}

.pet-convert-page .token-scan .scanner-active {
    position: absolute;
    z-index: 2;
    opacity: 1 !important;
    width: calc(100% - 20px) !important;
    height: 400px !important;
    background-color: white;
    transform: unset !important;
    top: 60px;
    margin-left: 10px;
}
.wip-dynamic-page {}

.wip-dynamic-page a,a:visited {
    text-decoration: none;
    color: var(--color-link);
    font-weight: 700;
}

.wip-dynamic-page .dynamic-component {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
}

.wip-dynamic-page .dynamic-slot {
    margin-bottom: 15px;
}

.wip-dynamic-page .dynamic-slot p {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 9pt;
}

.wip-dynamic-page .dynamic-slot img {
    max-width: 100%;
    height: auto;
    object-fit: initial;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.wip-dynamic-page .wip-slider {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}


@media only screen and (max-width: 600px) {
    .wip-dynamic-page .dynamic-component {
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

    .wip-dynamic-page .dynamic-slot {
        /*width: unset !important;*/
    }
}

.wip-dynamic-page .dynamic-slot .placeit-dyn-link {
    height: 90px;
    width: 90%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}


/* --------------------------------- CSS for slider --------------------------------- */

.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    flex-direction: row;
    height: 320px;
    overflow-y: scroll;
}

.mySlides {
    display: none;
    margin-left: auto;
    margin-right: auto;
    vertical-align: center;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: fit-content;
    margin-top: -22px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-button-border);
    transition: 0.6s ease;
}

.prev {
    left: 0;
}
.next {
    right: 0;
}

.fade {
    animation-name: fade;
    animation-duration: 2.5s;
}

@keyframes fade {
    from {opacity: .2}
    to {opacity: 1}
}


@media only screen and (max-width: 600px) {
    .slideshow-container {
        width: 90%;
    }

    .slideshow-container .dynamic-slot {
        height: fit-content;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slideshow-container .dynamic-slot img {
        width: 100% !important;
    }
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .wip-dynamic-page {
        padding-left: 40px;
        padding-right: 40px;
    }
    wip-component.dynamic-component {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .wip-dynamic-page .slideshow-container {
        height: unset;
        overflow: unset;
    }
}

.pet-map-page {
    width: 100vw;
    height: calc(100vh - 100px);
    background-color: whitesmoke;
}

.pet-map-page .pet-map-container {
    width: 100%;
    height: 100%;
}

.pet-map-page .pet-cat-container {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 6px;
    background-color: #f1fee1;
    border-top: 1px solid lightgray;
    overflow-x: auto;
}

.pet-map-page .pet-cat-container .placeit-button {
    background-color: white;
    padding-left: 3px;
    padding-right: 3px;
    margin-top: 6px;
    box-shadow: 2px 2px 4px gray;
    font-size: 9.5pt;
}

.pet-map-page .pet-map-container .placeit-button[data-id=close-button]  {
    position: absolute;
    top: 74px;
    right: 10px;
    border: 1px solid lightgrey;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    padding-top: 2px;
    padding-left: 7px;
    background-color: white;
    margin-right: 40px;
}

.pet-map-page .pet-map-container .placeit-button[data-id=close-button]::before {
    font-family: "Font Awesome 5 Pro";
    font-size: 16pt;
    content: '\f00d';
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-map-page {
        max-width: 800px;
    }
    .pet-map-page .pet-map-container {
        position: relative;
    }
    .pet-map-page .pet-map-container .placeit-button[data-id="close-button"] {
        top: 10px;
    }
}

.pet-registration-page {
    width: calc(100vw - 20px);
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100vh - 100px);
    background-color: white;
}

.pet-registration-page .placeit-button {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-button-border);
    color: var(--color-button-text);
    background-color: var(--color-button-background);
    padding: 5px 5px 5px 5px;
    border-radius: var(--box-radius);
    box-shadow: 2px 2px 4px var(--color-box-shadow);
}


.pet-registration-page .login-form {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    border: 1px solid lightgreen;
    padding: 15px 25px 20px 25px;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
    font-size: 10pt;
}

.pet-registration-page .login-form .placeit-textinput {
    justify-content: space-between;
    column-gap: 30px;
}

.pet-registration-page .login-form [data-id=text-label] {
    margin-left: -10px;
}

.pet-registration-page .login-form [data-id=text-label]::before {
    content: "Ich habe mich schon registriert";
}

.pet-registration-page .login-form [data-id=mail] {
    justify-content: space-between;
}

.pet-registration-page .login-form [data-id=pw] {
    justify-content: space-between;
}

.pet-registration-page .login-form [data-id=login] {
    margin-right: unset;
}

.pet-registration-page .login-form [data-id=login]::before {
    content: "Anmelden";
}

.pet-registration-page .pers-container {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    border: 1px solid lightgreen;
    padding: 15px 25px 20px 25px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
    font-size: 10pt;
}

.pet-registration-page .pers-container [data-id=register-label] {
    margin-left: -10px;
}

.pet-registration-page .pers-container [data-id=register-label]::before {
    content: "Noch nicht registriert?";
}

.pet-registration-page .pers-container .placeit-button[data-id=personalize] {
    margin-right: unset;
}

.pet-registration-page .pers-container .placeit-button[data-id=personalize]::before {
    content: "Jetzt registrieren";
}

.pet-registration-page .placeit-button[data-id=skip-pers] {
    margin-right: unset;
    margin-top: 10px;
}

.pet-registration-page .placeit-button[data-id=skip-pers]::before {
    content: "Weiter ohne Registrierung";
}

.pet-registration-page .petid-information {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pet-registration-page .placeit-button[data-id=confirm]::before {
    content: "Los geht's";
}

/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-registration-page {
        max-width: 800px;
    }
    .pet-personalization-page .pers-info, .pet-personalization-page .pers-bottom {
        width: unset;
    }
    .pet-registration-page .login-form {
        margin-top: 20px;
    }
}

.pet-personalization-page {
    width: 100vw;
    height: fit-content;
    min-height: calc(100vh - 100px);
}

.pet-personalization-page .pers-info, .pers-bottom {
    padding-top: 20px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100vw - 40px);
}


.pet-personalization-page .pers-form {
    width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10pt;
}

.pet-personalization-page .pers-form .pers-header {}

.pet-personalization-page .pers-form [data-name=additional]::before {
    content: "Infos";
}

.pet-personalization-page .pers-form .data-protect {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.pet-personalization-page .pers-form [data-id=checkbox]::before {
    display: block;
    padding-right: 45px;
    content: "Trailrunner";
}

.pet-personalization-page .pers-form .pers-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 30px;
}

.pet-personalization-page .placeit-button {
    box-shadow: 2px 2px 4px var(--color-box-shadow);
    border: 1px solid var(--color-button-border);
    border-radius: var(--box-radius);
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    padding: 2px 6px 2px 6px ;
}

.pet-personalization-page .placeit-button.active[data-id=submit]::before {
    color: var(--color-button-text);
    content: "Senden";
}

.pet-personalization-page .placeit-button[data-id=submit]::before {
    color: lightgray;
    content: "Senden";
}

.pet-personalization-page .placeit-button[data-id=cancel]::before {
    content: "Abbrechen";
}

.pet-personalization-page .placeit-button[data-id=change]::before {
    content: "Passwort ändern";
}


.pet-personalization-page .passwd-change {
    height: fit-content;
    width: calc(100% - 70px);
    background-color: white;
    min-height: 200px;
    margin-left: 35px;
    margin-right: 35px;
    font-size: 10pt;
}

.pet-personalization-page .passwd-change .header-label {
    font-weight: 700;
    font-size: 11pt;
    width: fit-content;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.pet-personalization-page .passwd-change .header-label::before {
    content: "Passwort ändern";
}

.pet-personalization-page .passwd-change .placeit-textinput {
    justify-content: space-between;
}

.pet-personalization-page .passwd-change .placeit-input-label {
    width: 120px;
}
.pet-personalization-page .passwd-change .buttons {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}

.pet-personalization-page .passwd-change .buttons .placeit-button[data-id=submit]::before {
    display: block;
    content: "Ändern";
}

.pet-personalization-page .passwd-change .buttons .placeit-button[data-id=cancel]::before {
    display: block;
    content: "Abbrechen";
}

.pet-personalization-page .passwd-change .final-message {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}

.pet-personalization-page .passwd-change .placeit-button[data-id=ack] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.pet-personalization-page .passwd-change .placeit-button[data-id=ack]::before {
    content: "OK";
}

.pet-personalization-page .pers-bottom {
    font-size: 9pt;
}


.pet-personalization-page .dialog-container {
    position: relative;
    top: calc(-100vh + 480px);
    left: 180px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 360px);
    background-color: white;
    border: 1px solid #ff1c1c;
    box-shadow: 1px 1px 1px #ff1c1c;
    text-align: center;
    padding: 15px;
}

.pet-personalization-page .dialog-container [data-id=field-message] {}

.pet-personalization-page .dialog-container [data-id=field-message]::before {
    content: "Bitte die Felder Nachname, Email und Passwort ausfüllen.";
}

.pet-personalization-page .dialog-container [data-id=password-message]::before {
    content: "Bitte ein Passwort mit mindestens 8 Zeichen setzen.";
}

.pet-personalization-page .dialog-container .placeit-button[data-id=ok-btn] {
    margin-top: 20px;
    margin-bottom: 5px;
    margin-left: auto;
    float: right;
}

.pet-personalization-page .dialog-container .placeit-button[data-id=ok-btn]::before {
    content: "OK";
}


/* ----------------------- desktop screens ---------------------- */

@media only screen and (min-width: 800px) {
    .pet-personalization-page {
        max-width: 800px;
    }
    .pet-personalization-page .pers-info, .pet-personalization-page .pers-bottom {
        width: unset;
    }
    .pet-personalization-page .pers-form {
        max-width: 400px;
    }
}

.pet-salespoint-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 100px);
}

.pet-salespoint-page .dynamic-salespoint-info {
    margin-top: 20px;
    margin-bottom: 5px;
}

.pet-salespoint-page .projects-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.pet-salespoint-page .projects-list .placeit-button {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    border: 1px solid greenyellow;
    border-radius: 7px;
    box-shadow: 1px 1px 2px gray;
}
.pet-header .placeit-message {
    position: absolute;
    top: 140px;
    left: calc(50% - 185px);
    width: 370px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    border: 1px solid gray;
    box-shadow: 1px 1px 1px gray;
    background-color: white;
    font-size: 10pt;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    row-gap: 5px;
}

.pet-header .placeit-message .placeit-message-date {}

.pet-header .placeit-message .placeit-message-title {}

.pet-header .placeit-message .placeit-message-content {}

.pet-header .placeit-message .placeit-button[data-id=close] {
    margin-left: auto;
    margin-right: 20px;
    margin-top: auto;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid lightgreen;
    border-radius: 2px;
    box-shadow: 1px 1px 1px lightgreen;
}

.pet-header .placeit-message .placeit-button[data-id=close]::before {
    content: "Schließen";
}
/*@import "../../site-css/pet-variables.css";*/
/*@import "pet-news-page.css";*/
/*@import "../../site-css/pet.css";*/