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

  --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;
    background-color: unset;
    border: unset;
}

.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-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-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";
}
@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
}

dialog[data-type=placeit-dialog-modal] {
    position: relative;
    top: 35px;
    left: calc(50% - 160px);
    padding: unset;
    min-height: 130px;
    height: fit-content;
    width: 320px;
    border: 1px solid gray;
    border-radius: 4px;
    box-shadow: 2px 2px 4px gray;
}

dialog[data-type=placeit-dialog-modal] form {
    height: fit-content;
    width: 100%;
}

dialog[data-type=placeit-dialog-modal] form menu {
    padding: 8px 13px 13px 13px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: fit-content;
}

dialog[data-type=placeit-dialog-modal] label {}
.placeit-camera.passive {
    display: none;
}

.placeit-camera {
    position: relative;
}

.placeit-camera .placeit-video-capture {}

.placeit-camera button[data-id=shutter-button] {
    position: absolute;
    bottom: 5px;
    border: unset;
    left: 50px;
}

.placeit-camera button[data-id=shutter-button]::before {
    content: "Auslösen";
}

.placeit-camera button[data-id=cancel-button] {
    position: absolute;
    bottom: 5px;
    border: unset;
    right: 50px;
}

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

.placeit-camera .placeit-photo-canvas {
    display: none;
}
.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-dialog-container {
    position: fixed;
    top: 200px;
    left: 15px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: calc(100vw - 30px);
    height: fit-content;
    min-height: 20px;
    background-color: #fffdf9;
    box-shadow: 2px 2px 4px lightgray;
}

.placeit-dialog-container.placeit-dialog-info {
    border: 2px solid lightgreen;
}

.placeit-dialog-container.placeit-dialog-warn {
    border: 2px solid red;
}

.placeit-dialog-container .header {
    height: 10px;
}

.placeit-dialog-container .body {
    text-align: center;
}

.placeit-dialog-container .footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

.placeit-dialog-container .footer .placeit-button[data-id=ok] {
    border: 1px solid lightgreen;
    padding: 5px;
    background-color: white;
    float: right;
    margin-right: 10px;
}

.placeit-dialog-container .footer .placeit-button[data-id=ok]::before {
    content: "Verstanden";
}

@media only screen and (min-width: 800px) {
    .placeit-dialog-container {
        width: 400px;
        left: calc(100vw / 2 - 200px);
    }
}
.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.8.8.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-button {
    cursor: pointer;
}

.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 {
    float: left;
}

.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 var(--color-button-border);
    border-radius: var(--box-radius);
    background-color: var(--color-button-background);
    color: var(--color-button-text);
}

.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: 2;
}

@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 .user-info {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding-top: 15px;
    font-size: 10pt;
}

.pet-header .user-info-intro {}

.pet-header .user-info-intro::before {
    content: "Du bist angemeldet als ";
}

.pet-header .user-info-email {
    margin-left: auto;
    margin-right: 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: 1px;
    z-index: 10;
    color: var(--color-header-text);
    background-color: var(--color-header-background);
    border-radius: 8px 8px 8px 8px;
    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=explore-entry]::before {
    content: "Kartenansicht";
}

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

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

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

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

.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: var(--color-footer-text);
    font-size: 8pt;
    text-decoration: none;
}

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

.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-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: 50vh !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-top: 2px;
    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';
}

/* --------------------- top info-line -------------------- */

@keyframes infoline-fadeout {
    from {opacity: 1;}
    to {opacity: 0; }
}
.pet-location-page .body .top-infoline {
    height: 12px;
}

.pet-location-page .body .top-infoline.inactive {
    display: none;
}

.pet-location-page .body .top-infoline.additional-info {
    font-size: 9pt;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    animation-name: infoline-fadeout;
    animation-duration: 2000ms;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

.pet-location-page .body .top-infoline.additional-info::before {
    content: "Angemeldet erhältst Du mehr Infos";
}


/* ------------------------ 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: 100dvw;
    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);
}


/* ------------------------- 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 .secondaries-header {
    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 .secondaries-header::before {
    content: "Empfehlungen für Dich:";
}

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


/* ---------------------------------------- recommendation-swiper ---------------------------------------- */

.pet-location-page .body .secondary .container .recommend-image {
    height: 200px;
    width: auto;
    object-fit: contain;
}

.pet-location-page .body .secondary .swiper-button-prev,
.pet-location-page .body .secondary .swiper-button-next {
    color: slategray;
}


/* ---------------------------------------- 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-height: 400px;
    }
}


/* ------------------------ 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-explore-page {
    width: 100vw;
    height: calc(100vh - 100px);
    background-color: whitesmoke;
    --control-container: 63px;
    --feature-count: 42px;
    --locator-display: 105px;
    --category-display: 110px;
}

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

    .pet-explore-page .init-container {
        width: 800px !important;
        margin-left: calc(50dvw - 400px);
    }

    .pet-explore-page .pet-map-container .ol-zoom {
        top:30px;
        left: 10px;
    }
}

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

@media only screen and (max-width: 799px) {
    .pet-explore-page .pet-map-container .ol-zoom {
        display: none;
    }
}


/* ------------------------------------- control-buttons ------------------------------------- */
@media only screen and (min-width: 800px) {
    .pet-explore-page .control-container {
        width: fit-content !important;
        column-gap: 30px !important;
        margin-right: calc(50dvw - 400px);
        padding-left: 40px;
        padding-right: 20px;
    }

    .pet-explore-page .feature-count-display {
        left: calc(50dvw - 397px) !important;
    }

    .pet-explore-page .explore-info-container {
        left: calc(50dvw - 200px) !important;
        width: 400px !important;
    }
}

.pet-explore-page .feature-count-display {
    position: absolute;
    bottom: var(--feature-count);
    left: 3px;
    font-size: 8pt;
    height: fit-content;
    width: fit-content;
    background-color: whitesmoke;
    padding: 2px;
}

.pet-explore-page .feature-count-display::before {
    content: "Angezeigte Locations: ";
}

.pet-explore-page .explore-info-container {
    animation: zoomIn;
    animation-duration: 1s;
    position: absolute;
    top: 30dvh;
    left: 50px;
    width: calc(100dvw - 100px);
    height: 32px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 4px gray;
}

.pet-explore-page .explore-info-container.zoom-out {
    animation: zoomOut;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
}

.pet-explore-page .explore-info-container .info-label {
    width: fit-content;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    font-size: 10pt
}

.pet-explore-page .explore-info-container .info-label::before {
    content: "Wir haben ";
}

.pet-explore-page .explore-info-container .info-label::after {
    content: " Locations gefunden.";
}

.pet-explore-page .control-container {
    position: absolute;
    top: var(--control-container);
    right: 5px;
    height: fit-content;
    width: calc(100dvw - 10px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 5px;
}

.pet-explore-page .control-container .spacer {
    width:1px;
    height: 1px;
    flex-grow: 1;
    display: none;
}

.pet-explore-page .control-container .placeit-button {
    color: black;
    background-color: white;
    font-weight: normal;
    text-decoration: unset;
    text-align: unset;
    height: unset;
    width: unset;
    line-height: unset;
    font-size: 9pt;
    border: 1px solid #f3f3f3;
    border-radius: 15px;
    padding: 8px;
}


.pet-explore-page .control-container .placeit-button[data-state=active] {
    color: #1daaff;
}

.pet-explore-page .control-container .placeit-button[data-id=cat]::before {
    font-size: 9pt;
    content: "Kategorien";
}

.pet-explore-page .control-container .placeit-button[data-id=fav]::before {
    font-size: 9pt;
    content: "Favoriten";
}

.pet-explore-page .control-container .placeit-button[data-id=lst]::before {
    font-size: 9pt;
    content: "Locations";
}

.pet-explore-page .control-container .placeit-button[data-id=loc]::before {
    font-size: 9pt;
    content: "Standort";
}


.pet-explore-page .display-container {
    position: absolute;
    top: var(--locator-display);
    right: 0;
    display: flex;
    flex-direction: row;
    height: 1px;
    width: fit-content;
}
.pet-areachooser-page {
    width: 100%;
    height: calc(100vh - 100px);
    background-color: whitesmoke;
}

.pet-areachooser-page .init-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
}

.pet-areachooser-page .init-container .intro-text {
    font-size: 10pt;
    position: relative;
    top: 67px;
    left: 12px;
    background-color: white;
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 4px gray;
}

.pet-areachooser-page .init-container .intro-text br {
    margin-bottom: 10px;
}

.pet-areachooser-page .init-container .locator-container {
    position: relative;
    top: 80px;
    left: calc(50% - 170px);
    z-index: 1;
    width: 340px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border: 2px solid gray;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 22px;
    background-color: rgba(255,255,255,0.4);
}

.pet-areachooser-page .locator-container.search-region {
    justify-content: center;
}

.pet-areachooser-page .locator-container.search-region input {
    border-radius: 7px 0 0 7px;
    outline: 0;
    border: unset;
    box-shadow: 2px 2px 4px gray;
}

.pet-areachooser-page .locator-container.search-region input:focus {
    background-color: white;
    border: unset;
}

.pet-areachooser-page .locator-container .placeit-button {
    padding: 15px;
    outline: 0;
    border-radius: 8px;
    background-color: white;
    box-shadow: 2px 2px 4px gray;
}

.pet-areachooser-page .locator-container .placeit-button:focus {
    font-weight: bold;
}

.pet-areachooser-page .locator-container .placeit-button[data-id=search-location] {
    padding: 6px 5px 5px 6px;
    font-size: 12pt;
    border-radius: 0 7px 7px 0;
}

.pet-areachooser-page .locator-container .placeit-button[data-id=geolocation]::before {
    content: "Standort";
}

.pet-areachooser-page .locator-container .placeit-button[data-id=geosearch]::before {
    content: "Ortschaft";
}

.pet-areachooser-page .locator-container .placeit-button[data-id=polygon]::before {
    content: "Bereich";
}

.pet-areachooser-page .locator-container .placeit-button[data-id=search-location]::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f002";
}

.pet-areachooser-page .locator-container .placeit-button[data-id=cancel] {
    position: absolute;
    top: -9px;
    right: -8px;
    border-radius: 15px;
    font-size: 18pt;
    width: 30px;
    height: 30px;
    padding: unset;
    box-shadow: unset;
    background-color: rgba(255,255,255,0.4);
}

.pet-areachooser-page .init-container .locator-container .placeit-initial.placeit-button[data-id=cancel] {
    display: none
}

.pet-areachooser-page .locator-container .placeit-button[data-id=cancel]::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00d";
}


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

.pet-areachooser-page .areamap-container .ol-zoom {
    top:30px;
    left: 10px;
}


.pet-areachooser-page .geosearch {
    position: absolute;
    z-index: 1;
    top: 70px;
    right: 0;
    max-height: 200px;
    width: 240px;
    overflow-y: scroll;
    opacity: 0.85;
    background-color: whitesmoke;
    border-radius: 8px;
    box-shadow: 2px 2px 4px gray;
    font-size: 10pt;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.pet-areachooser-page .geosearch .entry-line {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: 1px solid lightgray;
    padding: 7px 10px;
    opacity: 1;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
}

.pet-areachooser-page .geosearch .entry-line .display-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal] {
    position: absolute;
    top: 80px;
    left: calc(50% - 170px);
    z-index: 2;
    min-height: unset;
    padding: 10px 15px;
    border-radius: 10px;
    width: 340px;
}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal]::backdrop {}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal] div {
    text-align: center;
    padding-bottom: 8px;
}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal] button {
    background-color: lightgray;
    border: unset;
    border-radius: 6px;
    padding: 7px 12px;
}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal] button:first-of-type {
    margin-left: 12px
}

.pet-areachooser-page dialog[data-type=placeit-dialog-modal] button:last-of-type {
    float: right;
    margin-right: 12px;
}
.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: "Deine pET-ID\A\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. Du hast 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: "Du hast ";
}
.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 {
    display: flex;
    flex-direction: column;
}

.info-container .pet-infopage-tokens .infopage-last-locations::before {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    content: "Deine letzten Kontakte:";
}

.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 .actions.active {
    display: unset;
}

.pet-convert-page .actions {
    position: absolute;
    top: 31%;
    right: 20px;
    background-color: #29cb29;
    color: white;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    display: none;
}

.pet-convert-page .actions .placeit-button {
    margin-left: auto;
    margin-right: auto;
    margin-top: 38px;
    padding: unset;
    font-size: 13pt;
}

.pet-convert-page .actions .placeit-button[data-id=sales-action-btn] {}

.pet-convert-page .actions .placeit-button[data-id=sales-action-btn]::before {
    content: "Bestätigen";
}


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

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

.pet-convert-page .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 .products .product-btn.activated {
    background-color: lightgreen;
    color: black;
}

.pet-convert-page .products .product-btn.passive-product {
    color: lightgray;
    box-shadow: unset;
}

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

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

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

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

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

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

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

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

.pet-convert-page .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 .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 .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 .product-page .product-status {}

.pet-convert-page .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 .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;
}
@keyframes showCheck {
    from {opacity: 0;}
    to {opacity: 1;}
}


.pet-convert-page .chosen-products {
    position: absolute;
    top:60px;
    left: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    width: 100vw;
    overflow-y: scroll;
    background-color: white;
    padding-bottom: 50px;
}

.pet-convert-page .chosen-products.confirmed {
    background-color: lightgreen;
}

.pet-convert-page .chosen-products .prod-info {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    margin-top: 50px;
}

.pet-convert-page .chosen-products .prod-info .product-label {
    width: calc(100% - 60px);
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    border-radius: 4px;
    box-shadow: 1px 1px 1px gray;
    background-color: white;
    text-align: center;
    padding-top: 11px;
    font-size: 15pt;
}

.pet-convert-page .chosen-products.confirmed .action-status {
    height: 40px;
    width: 100%;
    background-image: url(1f60fffd8e1690af5ed9.png);
    background-repeat: no-repeat;
    background-position: center;
    flex-grow: 1;
    animation: showCheck 1500ms;
    animation-fill-mode: forwards;
}

.pet-convert-page .chosen-products .action-buttons {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    justify-content: center;
    margin-top: auto;
}

.pet-convert-page .chosen-products .action-buttons .placeit-button {
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    box-shadow: 1px 1px 1px gray;
    padding: 10px 10px 10px 10px;
}

.pet-convert-page .chosen-products .action-buttons .placeit-button[data-id=close].passive {
    display: none;
}

.pet-convert-page .chosen-products .action-buttons .placeit-button[data-id=confirm]::before {
    content: "Ok";
}

.pet-convert-page .chosen-products .action-buttons .placeit-button[data-id=decline]::before {
    content: "Lieber nicht";
}

.pet-convert-page .chosen-products .action-buttons .placeit-button[data-id=close]::before {
    content: "Schließen";
}
.pet-pers-page {
    width: 100vw;
    height: fit-content;
    min-height: calc(100vh - 100px);
    padding-left: 25px;
    padding-right: 25px;
}

.pet-pers-page .wip-dynamic-page {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 10pt;
}

.pet-pers-page .placeit-button {
    border: 1px solid lightgreen;
    border-radius: 3px;
    padding: 5px;
}

.pet-pers-page .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.pet-pers-page .buttons .placeit-button[data-id=login]::before {
    content: "Anmelden";
}

.pet-pers-page .buttons .placeit-button[data-id=newcred]::before {
    content: "Registrieren";
}

.pet-pers-page .placeit-button[data-id=anon],.placeit-button[data-id=forgotten] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

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

.pet-pers-page .placeit-button[data-id=forgotten]::before {
    content: "Passwort vergessen";
}

.pet-pers-page .my-placeit-opts {
    padding-top: 20px;
    margin-bottom: 30px;
}

.pet-pers-page .my-placeit-opts .buttons {
    display: flex;
    flex-direction: row;
}

.pet-pers-page .my-placeit-opts .buttons .placeit-button {
    background-color: white;
}

.pet-pers-page .my-placeit-opts .buttons .placeit-button[data-id=logout] {
    margin-left: auto;
    margin-right: auto;
}

.pet-pers-page .my-placeit-opts .buttons .placeit-button[data-id=logout]::before {
    content: "Abmelden";
}

.pet-pers-page .my-placeit-opts .buttons .placeit-button[data-id=pwchange] {
    margin-left: auto;
    margin-right: auto;
}

.pet-pers-page .my-placeit-opts .buttons .placeit-button[data-id=pwchange]::before {
    content: "Passwort ändern";
}

.pet-pers-page .my-placeit-opts .password-change {}

.pet-pers-page .my-placeit-opts .password-change .pw-change-form {
    font-size: 10pt;
}

.pet-pers-page .my-placeit-opts .password-change .pw-change-form .placeit-input-label {
    width: 120px;
}

.pet-pers-page .my-placeit-opts .password-change .button-line {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 15px;
}

.pet-pers-page .my-placeit-opts .password-change .button-line .placeit-button[data-id=submit]::before {
    content: "Senden";
}

.pet-pers-page .my-placeit-opts .password-change .button-line .placeit-button[data-id=cancel]::before {
    content: "Abbrechen";
}

.pet-pers-page .pwrequest {}

.pet-pers-page .pwrequest .reqbuttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 20px;
}

.pet-pers-page .pwrequest .reqbuttons .placeit-button[data-id=request]::before {
    content: "Senden";
}

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


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

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

.pet-pers-dialog {
    width: 100vw;
    height: fit-content;
    min-height: calc(100vh - 100px);
    padding-left: 25px;
    padding-right: 25px;
}

.pet-pers-dialog .wip-dynamic-page {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 10pt;
}

.pet-pers-dialog .placeit-button {
    border: 1px solid lightgreen;
    border-radius: 3px;
    padding: 5px;
}

.pet-pers-dialog .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.pet-pers-dialog .buttons .placeit-button[data-id=login]::before {
    content: "Anmelden";
}

.pet-pers-dialog .buttons .placeit-button[data-id=newcred]::before {
    content: "Registrieren";
}

.pet-pers-dialog .placeit-button[data-id=anon],.placeit-button[data-id=forgotten],.placeit-button[data-id=no-mail] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.pet-pers-dialog .placeit-button[data-id=no-mail]::before {
    content: "Weiter ohne E-Mail";
}

.pet-pers-dialog .placeit-button[data-id=anon]::before {
    content: "Anonym bleiben";
}

.pet-pers-dialog .placeit-button[data-id=forgotten]::before {
    content: "Passwort vergessen";
}

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


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

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

.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";
}
.pet-pers-credentials {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 10pt;
}

.pet-pers-credentials .placeit-textinput {
    justify-content: space-between;
}

.pet-pers-credentials .placeit-input-label {
    width: 100px;
}

.pet-pers-credentials .placeit-input-input {
    width: 250px;
}

.pet-pers-credentials .power-container {
    background-color: #2E424D;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    margin-top: 7px;
}

.pet-pers-credentials .power-point {
    background-color: #D73F40;
    width: 1%;
    height: 100%;
    border-radius: 5px;
    transition: 0.5s;
}

.pet-pers-credentials .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 20px;
}

.pet-pers-credentials .buttons .placeit-button {
    border: 1px solid lightgreen;
    border-radius: 3px;
    padding: 3px;
}

.pet-pers-credentials .buttons .placeit-button[data-id=submit]::before {
    content: "Senden";
}

.pet-pers-credentials .buttons .placeit-button[data-id=cancel]::before {
    content: "Abbrechen";
}
.pet-explore-page .location-container {
    position: absolute;
    top: 65px;
    //left: 4px;
    z-index: 1;
    margin-left: 4px;
    width: calc(100dvw - 8px);
    height: calc(100dvh - 115px);
    background-color: white;
    opacity: 0.95;
    box-shadow: 2px 2px 4px gray;
    border-radius: 6px;
    min-height: unset;
}

@media only screen and (min-width: 800px) {
    .pet-explore-page .location-container {
        width: 790px;
    }
}

.pet-explore-page .location-container .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    border-bottom: 1px solid lightgray;
}

.pet-explore-page .location-container .header .spacer {
    width: 10px;
    height: 100%;
}

.pet-explore-page .location-container .header .placeit-button[data-id=favorite] {
    padding-left: 10px;
    padding-top: 10px;
    font-family: "Font Awesome 5 Pro";
    font-size: 12pt;
    font-weight: normal;
}

.pet-explore-page .location-container .header .placeit-button[data-id=favorite].active {
    font-weight: bold;
    color: #caac0a;
}

.pet-explore-page .location-container .header .placeit-button[data-id=favorite]::before {
    content: "\f005";
}

.pet-explore-page .location-container .header .loc-title {
    width: fit-content;
    max-width: calc(100% - 80px);
    padding-top: 10px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pet-explore-page .location-container .header .placeit-button[data-id=detach] {
    float: right;
    padding-right: 16px;
    padding-top: 5px;
    font-family: "Font Awesome 5 Pro";
    font-size: 16pt;
}

.pet-explore-page .location-container .header .placeit-button[data-id=detach]::before {
    display: block;
    float: right;
    content: "\f00d";
    cursor: pointer;
}


.pet-explore-page .location-container .body {
    height: calc(100% - 40px);
    width: 100%;
    overflow-y: scroll;
}

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

@keyframes details-collapse {
    from {height: var(--initialHeight);}
    to {height: 0; padding-top: 0; overflow: hidden;}
}

@keyframes details-expand {
    from {height: 0; overflow: hidden;}
    to {height: var(--finalHeight);}
}

.location-details .header {
    display: none;
}

.location-details .header::before {}


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

.pet-explore-page .location-container .body .location-details.expand {
    --finalHeight: 0;
    animation: details-expand;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-explore-page .location-container .body .location-details.collapsed {
    --initialHeight: 0;
    animation: details-collapse;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.location-details .wip-dynamic-page {
    padding-left: 10px;
    padding-right: 10px;
}

.location-details .wip-dynamic-page .dynamic-slot {
    margin-bottom: 2px;
}

.location-details .wip-dynamic-page wip-slot {}

.location-details .wip-dynamic-page wip-slot label {}

.pet-explore-page .location-container .placeit-button {}

.pet-explore-page .location-container .placeit-button[data-id=details-button] {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 9pt;
    background-color: #e8e8e8;
}

.pet-explore-page .location-container .placeit-button[data-id=details-button]::before {
    content: "Details erfahren";
}

.pet-explore-page .location-container .placeit-button.button-open[data-id=details-button]::before {
    content: "Details schließen";
}

.location-details .wip-dynamic-page wip-component.dynamic-component {}

@media only screen and (min-width: 800px) {
    .location-details .wip-dynamic-page wip-component.dynamic-component {
        padding-top: unset;
        padding-bottom: unset;
    }
}


/* ---------------------- synthetic locations ---------------------- */

.location-details.synthetic .wip-dynamic-page {
    font-size: 9pt;
    width:calc(100% - 10px);
    margin-left: 5px;
    padding: 13px 6px;
    background-color: white;
    opacity: 1;
    border-radius: 4px;
    box-shadow: 1px 1px 2px gray;
}

.location-details.synthetic .wip-dynamic-page wip-slot {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

.location-details.synthetic .wip-dynamic-page wip-slot label {
    font-weight: bold;
}


/* ---------------------- curated locations ---------------------- */

.location-details.curated .wip-dynamic-page {
    font-size: 9pt;
}
@keyframes close-locdisplay {
    from { width: 80px; }
    to { width: 4px; }
}

@keyframes open-locdisplay {
    from { width: 4px; }
    to { width: 80px; }
}

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

@keyframes hide-locdisplay {
    from { opacity: 1; }
    to { opacity: 0; }
}

.pet-explore-page .pet-location-display {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 80px;
    width: fit-content;
    height: fit-content;
    max-height: calc(100dvh - 205px);
    overflow-y: scroll;
    row-gap: 4px;
}

.pet-explore-page .pet-location-display.show {
    animation-name: show-locdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-explore-page .pet-location-display.hide {
    animation-name: hide-locdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-explore-page .pet-location-display.close-display {
    animation-name: close-locdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-explore-page .pet-location-display.open-display {
    animation-name: open-locdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@media only screen and (min-width: 800px) {
    .pet-explore-page .pet-location-display {
        margin-right: calc(50dvw - 400px);
    }
}

.pet-explore-page .pet-location-display .invisible {
    display: none !important;
}

.pet-explore-page .pet-location-display .placeit-button:first-child {
    position: fixed;
    top: 94px;
    right: 5px;
    width: fit-content;
    font-family: "Font Awesome 5 Pro";
    background-color: unset;
    box-shadow: unset;
    font-size: 18pt;
}

@media only screen and (min-width: 800px) {
    .pet-explore-page .pet-location-display .placeit-button:first-child {
        right: calc(50dvw - 400px);
    }
}

.pet-explore-page .pet-location-display .placeit-button.closed {}

.pet-explore-page .pet-location-display .placeit-button:first-child::before {
    content: "\f178";
}

.pet-explore-page .pet-location-display .placeit-button.closed::before {
    content: "\f177";
    padding-right: 2px;
}

.pet-explore-page .pet-location-display .placeit-button:nth-of-type(2) {
    margin-top: 18px;
}

.pet-explore-page .pet-location-display .placeit-button {
    width: calc(100% - 6px);
    background-color: white;
    opacity: 0.93;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9pt;
    min-height: 30px;
    padding: 5px;
    text-align: center;
    box-shadow: 2px 2px 4px gray;
}
.pet-explore-page .pet-category-display {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 71px;
    height: fit-content;
    margin-top: 18px;
    max-height: calc(100dvh - 205px);
    overflow-y: scroll;
    row-gap: 4px;
}

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

@keyframes hide-catdisplay {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media only screen and (min-width: 800px) {
    .pet-explore-page .pet-category-display {
    }
}

.pet-explore-page .pet-category-display .invisible {
    display: none !important;
}

.pet-explore-page .pet-category-display .placeit-button {
    width: calc(100% - 6px);
    background-color: white;
    opacity: 0.93;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9pt;
    min-height: 30px;
    padding: 5px;
    text-align: center;
    box-shadow: 2px 2px 4px gray;
}

.pet-explore-page .pet-category-display .placeit-button[data-state=active] {
    color: #1daaff;
}

.pet-explore-page .pet-category-display.show {
    animation-name: show-catdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pet-explore-page .pet-category-display.hide {
    animation-name: hide-catdisplay;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.location-container .posts-container {
    height: fit-content;
    padding-bottom: 7px;
}

.location-container .posts-container .placeit-button,
.placeit-camera button[data-id=cancel-button],
.placeit-camera button[data-id=shutter-button] {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 9pt;
    background-color: #e8e8e8;
}

.location-container .posts-container .placeit-button[data-id=show-posts],
.location-container .posts-container .placeit-button[data-id=hide-posts] {
    width: 119px;
    text-align: center;
}

.location-container .posts-container .placeit-button[data-id=show-posts]::before {
    content: "Posts anzeigen";
}

.location-container .posts-container .placeit-button[data-id=hide-posts]::before {
    content: "Posts verbergen";
}


.location-container .posts-container .inner-container {}

.location-container .posts-container .inner-container .no-posts {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
    font-weight: bold;
    animation: zoomIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.location-container .posts-container .inner-container .no-posts::before {
    content: "Noch keine Posts - schreib' doch einen!";
}


@keyframes posts-collapse {
    from {height: var(--initialHeight);}
    to {height: 0; padding-top: 0; overflow: hidden;}
}

@keyframes posts-expand {
    from {opacity: 0;}
    to {opacity: 1;}
}


.location-container .posts-container .inner-container.expand {
    animation: details-expand;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.location-container .posts-container .inner-container.collapse {
    --initialHeight: 0;
    animation: details-collapse;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.location-container .posts-container .inner-container .placeit-button[data-id=new-post]::before {
    content: "Neuer Post";
}


/* -------------------------------------- dialog for a new post --------------------------------------- */

.location-container .posts-container .inner-container dialog {}

.location-container .posts-container .inner-container dialog form textarea {
    width: calc(100% - 6px);
    min-height: 100px;
    margin-left: 3px;
    margin-top: 3px;
    outline: unset;
    font-size: 10pt;
}

.placeit-button[data-id=camera]::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f030";
    font-size: 12pt;
    padding: 0 12px;
}

.location-container .posts-container .inner-container dialog button[data-id=close]::before {
    content: "Posten";
}

.location-container .posts-container .inner-container dialog button[data-id=reset]::before {
    content: "Verwerfen";
}

/* ------------------------------------------- list of post ------------------------------------------- */

.location-container .posts-container .posts-list {
    width: calc(100% - 20px);
    height: fit-content;
    border: 1px solid gray;
    border-radius: 4px;
    margin: 10px 0 10px 10px;
}

.location-container .posts-container .posts-list .post-entry {
    display: flex;
    flex-direction: column;
}

.location-container .posts-container .posts-list .post-entry img {
    width: 100%;
    height: auto;
}

.location-container .posts-container .posts-list .post-entry > div {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

.location-container .posts-container .posts-list .post-entry .title {
    font-weight: bold;
    font-size: 10pt;
    text-align: unset;
    height: 30px;
}

.location-container .posts-container .posts-list .post-entry .title > div {
    display: inline-block;
    margin-top: 5px;
}

.location-container .posts-container .posts-list .post-entry div.empty {
    height: 70px;
}

.location-container .posts-container .posts-list button {
    float: right;
    background-color: unset;
    margin: unset;
    padding: unset;
}

.location-container .posts-container .posts-list button::before {
    content: "Gefällt "
}

.location-container .posts-container .posts-list button::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
    font-size: 16pt;
    color: #ffae00;
    content: "\f164";
    padding-left: 4px;
}
/*@import "../../site-css/pet.css";*/