.qa-sdk-wrapper {
  position: fixed;
  width: 400px;
  right: -600px;
  max-height: 530px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease-in-out;
  background: #fff;
}

.qa-sdk-close-btn {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 16px;
}

.qa-sdk-close-btn:hover {
  border-radius: 50%;
  background-color: #d5d9df;
}

#qa-sdk-iframe {
  width: 400px;
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .qa-sdk-wrapper{
    width: 356px;
  }
  #qa-sdk-iframe {
    width: 356px;
  }
}

.petpet-generator.grid {
    margin: 0 auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: 38.2% 61.8%;
    grid-template-areas:
        "header  header"
        "preview upload"
        "preview output"
        "footer  footer";
    gap: 0;
}
.petpet-generator .upload { grid-area: upload; }
.petpet-generator .output { grid-area: output; }
@media only screen and (max-width: 40em) {
    .petpet-generator.grid {
        grid-template-columns: 100%;
        grid-template-areas:
            "header"
            "upload"
            "preview"
            "output"
            "footer";
    }
}

.night .petpet-generator {
  --pp-bg: #1a1d24; --pp-fg: #222630; --pp-txt: #e6e8eb; --pp-txt-light: #9aa2ad;
  --pp-link: #4aa3ff; --pp-link-hover: #8ec5ff;
  --pp-header-txt: #e6e8eb;
  --pp-preview-bg: #222630; --pp-canvas-bg: #2a2f3a;
  --pp-input-bg: #2a2f3a; --pp-input-border: #3a3f48;
  --pp-input-border-hover: #4a5260; --pp-input-border-focus: #4aa3ff;
  --pp-input-track-bg: rgba(255,255,255,0.12); --pp-input-switch-bg: rgba(255,255,255,0.15);
  --pp-input-switch-bg-active: #4aa3ff; --pp-input-switch-fg: #e6e8eb;
  --pp-input-switch-fg-hover: #d8dee6;
  --pp-btn-bg: #4aa3ff; --pp-btn-color: #fff; --pp-btn-border: #4aa3ff;
  --pp-btn-hover: #3b99ff; --pp-btn-focus: #2f8bef;
  --pp-btn-focus-outline: rgba(74,163,255,0.5);
  --pp-shadow-color: rgba(0,0,0,0.5); --pp-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  --pp-error: #ff6c37;
}