.px-live-fragment-loading,
.px-live-fragment-loading > *,
.px-live-fragment-loading ins,
.px-live-fragment-loading ins > * {
    opacity: 0.5;
}

.px-image-adjust-tool {
    --px-crop-box-handle-size: 24px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.px-image-adjust-tool .px-crop-container {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    overflow: hidden;
    padding: max(32px, calc(var(--px-crop-box-handle-size) / 2));
    position: relative;
    width: 100%;
}

.px-image-adjust-tool .px-crop-box {
    --px-crop-box-outline-color: #39f;
    --px-crop-box-outline-width: 2px;
    outline: var(--px-crop-box-outline-width) solid var(--px-crop-box-outline-color);
    position: absolute;
}

.px-image-adjust-tool .px-crop-box::before {
    background: transparent;
    content: '';
    display: block;
    height: 100%;
    outline: var(--px-crop-box-outline-width) solid #fff8;
    outline-offset: calc(-0.5 * var(--px-crop-box-outline-width));
    width: 100%;
}

.px-image-adjust-tool .px-crop-box .px-crop-box-shadow {
    background: #fff9;
    position: absolute;
    z-index: -1;
}

.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="t"] {
    left: 0;
    top: 0;
    transform: translateY(-100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="tr"] {
    right: 0.5px;
    top: 0.5px;
    transform: translate(100%, -100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="r"] {
    right: 0;
    top: 0;
    transform: translateX(100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="br"] {
    right: 0.5px;
    bottom: 0.5px;
    transform: translate(100%, 100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="b"] {
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="bl"] {
    left: 0.5px;
    bottom: 0.5px;
    transform: translate(-100%, 100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="l"] {
    left: 0;
    top: 0;
    transform: translateX(-100%);
}
.px-image-adjust-tool .px-crop-box .px-crop-box-shadow[data-position="tl"] {
    left: 0.5px;
    top: 0.5px;
    transform: translate(-100%, -100%);
}

.px-image-adjust-tool .px-crop-box-handle {
    align-items: center;
    display: flex;
    height: var(--px-crop-box-handle-size);
    justify-content: center;
    width: var(--px-crop-box-handle-size);
    position: absolute;
}
.px-image-adjust-tool .px-crop-box-handle[data-position=nw],
.px-image-adjust-tool .px-crop-box-handle[data-position=n],
.px-image-adjust-tool .px-crop-box-handle[data-position=ne] {
    top: calc(-0.5 * var(--px-crop-box-handle-size));
}
.px-image-adjust-tool .px-crop-box-handle[data-position=ne],
.px-image-adjust-tool .px-crop-box-handle[data-position=e],
.px-image-adjust-tool .px-crop-box-handle[data-position=se] {
    right: calc(-0.5 * var(--px-crop-box-handle-size));
}
.px-image-adjust-tool .px-crop-box-handle[data-position=se],
.px-image-adjust-tool .px-crop-box-handle[data-position=s],
.px-image-adjust-tool .px-crop-box-handle[data-position=sw] {
    bottom: calc(-0.5 * var(--px-crop-box-handle-size));
}
.px-image-adjust-tool .px-crop-box-handle[data-position=sw],
.px-image-adjust-tool .px-crop-box-handle[data-position=w],
.px-image-adjust-tool .px-crop-box-handle[data-position=nw] {
    left: calc(-0.5 * var(--px-crop-box-handle-size));
}

.px-image-adjust-tool .px-crop-box-handle[data-position=n],
.px-image-adjust-tool .px-crop-box-handle[data-position=s] {
    cursor: ns-resize;
    left: calc(50% - 0.5 * var(--px-crop-box-handle-size));
}

.px-image-adjust-tool .px-crop-box-handle[data-position=w],
.px-image-adjust-tool .px-crop-box-handle[data-position=e] {
    cursor: ew-resize;
    top: calc(50% - 0.5 * var(--px-crop-box-handle-size));
}
.px-image-adjust-tool .px-crop-box-handle[data-position=nw],
.px-image-adjust-tool .px-crop-box-handle[data-position=se] {
    cursor: nwse-resize;
}
.px-image-adjust-tool .px-crop-box-handle[data-position=ne],
.px-image-adjust-tool .px-crop-box-handle[data-position=sw] {
    cursor: nesw-resize;
}

.px-image-adjust-tool .px-crop-box-handle::after {
    display: block;
    background: var(--px-crop-box-outline-color);
    border-radius: 25%;
    content: "";
    height: 50%;
    outline: 1px solid #fff8;
    width: 50%;
}

.px-image-adjust-tool .px-resolution-warning {
    height: 36px;
    left: 8px;
    position: absolute;
    top: 8px;
    width: 36px;
}

.px-image-adjust-tool .px-resolution-warning svg {
    color: #ffc107;
    height: 100%;
    width: 100%;
}

.px-image-adjust-tool .px-buttons-container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 42px;
    justify-content: end;
    padding: max(32px, calc(var(--px-crop-box-handle-size) / 2));
    max-width: 300px;
}

.px-image-adjust-tool .px-buttons-container > div {
    display: flex;
    gap: 14px 28px;
    justify-content: center;
}

.px-image-adjust-tool .px-buttons-container .px-edit-buttons-container {
    flex-direction: column;
}

.px-image-adjust-tool .px-buttons-container .px-edit-buttons-container button svg {
    margin-right: 0.5em;
}

@media (orientation: portrait) {
    .px-image-adjust-tool {
        align-items: center;
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .px-image-adjust-tool .px-buttons-container {
        flex-direction: column;
        gap: 18px;
    }
}

px-file-upload {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

px-file-upload *[hidden] {
    display: none;
}

px-file-upload .px-filename-info {
    font-size: 0.8em;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

px-file-upload .px-progress-indicator {
    --color: #ccc;
    --size: 36px;
    align-items: center;
    color: var(--color);
    display: flex;
    font-size: 10px;
    height: var(--size);
    justify-content: center;
    position: relative;
    width: var(--size);
}

px-file-upload .px-progress-indicator::before {
    animation: px-file-upload-progress-indicator .75s linear infinite;
    border: 2px solid var(--color);
    border-radius: 50%;
    border-right-color: transparent;
    content: '';
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    vertical-align: text-bottom;
    width: 100%;
}

@keyframes px-file-upload-progress-indicator {
    100% {
        transform: rotate(360deg);
    }
}

.px-upload-dialog {
    --header-height: 42px;
    --footer-height: 64px;
    border: none;
    border-radius: 8px;
    display: flex;
    margin: auto;
    min-width: min(90%, 400px);
    outline: none !important;
    padding: 24px 32px 32px;
    z-index: 9999;
}

.px-upload-dialog [hidden] {
    display: none !important;
}

.px-upload-dialog[data-screen="progress"] {
    bottom: 16px;
    box-shadow: 0 0 16px #0001;
    padding: 8px 32px;
    position: fixed;
}

.px-upload-dialog .px-ud-close {
    appearance: none;
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6373 0.0446777L9.91926 6.76118L3.20276 0.0446777L0.963928 2.28351L7.68043 9.00001L0.963928 15.7165L3.20276 17.9553L9.91926 11.2388L16.6373 17.9553L18.8762 15.7165L12.1597 9.00001L18.8762 2.28351L16.6373 0.0446777Z" fill="%23404040"/></svg>');
    background-position: center;
    background-size: 14px;
    background-repeat: no-repeat;
    border: none;
    box-sizing: border-box;
    font-size: 0;
    height: 24px;
    opacity: 0.5;
    outline: none !important;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
}

.px-upload-dialog .px-ud-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.px-upload-dialog .px-ud-wrapper .px-ud-header {
    box-sizing: border-box;
    align-items: start;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 6px;
    height: var(--header-height);
}

.px-upload-dialog .px-ud-wrapper .px-ud-header h6 {
    margin: 0;
}

.px-upload-dialog .px-ud-wrapper .px-ud-header .px-ud-back {
    appearance: none;
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="11,1 1,12 11,23" stroke="%23404040" stroke-width="3"/></svg>');
    background-position: center;
    background-size: 8px;
    background-repeat: no-repeat;
    border: none;
    box-sizing: border-box;
    font-size: 0;
    height: 24px;
    margin-left: -8px;
    opacity: 0.5;
    outline: none !important;
    width: 24px;
}

.px-upload-dialog .px-ud-wrapper .px-ud-body {
    max-height: calc(100% - var(--header-height));
    overflow: auto;
}

.px-upload-dialog .px-ud-wrapper:has(.px-ud-footer) .px-ud-body {
    max-height: calc(100% - var(--header-height) - var(--footer-height));
}

.px-upload-dialog .px-ud-wrapper .px-ud-footer {
    align-items: end;
    box-sizing: border-box;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 1em;
    height: var(--footer-height);
    justify-content: end;
    text-align: right;
}

.px-upload-dialog .px-ud-progress,
.px-upload-dialog .px-ud-load-more {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 8px 0;
}

.px-upload-dialog .px-ud-sources {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: auto;
    max-width: 240px;
}

.px-upload-dialog .px-ud-filelist {
    font-size: 0.85em;
    list-style-position: inside;
    padding-left: 0;
}

.px-upload-dialog .px-ud-filelist .px-ud-error {
    color: red;
}

.px-upload-dialog .px-ud-filelist .px-ud-error::before {
    content: '-';
}

.px-upload-dialog .px-ud-galleries,
.px-upload-dialog .px-ud-images {
    --thumbnail-outline-width: 2px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: var(--thumbnail-outline-width);
}

.px-upload-dialog .px-ud-galleries::after,
.px-upload-dialog .px-ud-images::after {
    content: '';
    flex: auto;
}

.px-upload-dialog .px-ud-galleries .px-ud-gallery,
.px-upload-dialog .px-ud-images .px-ud-image {
    --thumbnail-size: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 2px;
    cursor: pointer;
    flex: 0 0 auto;
    height: var(--thumbnail-size);
    outline: var(--thumbnail-outline-width) solid #ddd;
    position: relative;
    width: var(--thumbnail-size);
}

.px-upload-dialog .px-ud-images .px-ud-image[data-selected="true"] {
    outline: var(--thumbnail-outline-width) solid #888;
}

.px-upload-dialog .px-ud-galleries .px-ud-gallery::after {
    background-color: #0006;
    bottom: 0;
    color: #fff;
    content: attr(data-name);
    font-size: 12px;
    overflow: hidden;
    padding: 2px 4px 1px;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.px-upload-dialog .px-ud-gallery-no-items {
    margin: 16px 0;
    text-align: center;
}

.px-upload-dialog .px-ud-qrcode {
    align-items: center;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    margin: auto;
    max-height: 180px;
    max-width: 180px;
    position: relative;
}

.px-upload-dialog .px-ud-picker-qr hr {
    margin: 24px 0;
}

.px-upload-dialog .px-ud-picker-qr p {
    font-size: 12px;
    margin-bottom: 24px;
    opacity: 0.75;
    text-align: center;
}

.px-upload-dialog .px-ud-qrcode img {
    left: 0;
    max-height: 100%;
    max-width: 100%;
    opacity: 0.1;
    position: absolute;
    top: 0;
}

.px-upload-dialog .px-ud-qrcode[data-upload-status="unknown"] img {
    opacity: 1;
}

.px-upload-dialog[data-screen="picker-url"] .px-ud-url-input {
    padding: 2px;
}

.px-upload-dialog[data-screen="picker-url"] .px-ud-url-input input {
    box-sizing: border-box;
    padding: 4px 8px;
    width: 100%;
}

.px-upload-dialog[data-screen="picker-camera"] .px-ud-camera-preview {
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

.px-upload-dialog[data-screen="picker-camera"] .px-ud-camera-preview video {
    max-width: 100%;
}

.px-upload-dialog[data-screen="picker-google-photos"] .px-ud-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0;
    text-align: center;
}

.px-upload-dialog[data-screen="picker-google-photos"] .px-ud-body a {
    border: 1px solid currentColor;
    padding: 8px 16px;
}

.px-upload-dialog[data-screen="picker-google-photos"] .px-ud-body .px-ud-google-picker-extra-info {
    font-size: 0.7em;
    opacity: 0.7;
}

.px-upload-dialog .px-ud-spinner {
    animation: px-ud-spinner .75s linear infinite;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 32px;
    vertical-align: text-bottom;
    width: 32px;
}

@keyframes px-ud-spinner {
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 576px) {
    .px-upload-dialog .px-ud-header h6 {
        font-size: 18px;
    }

    .px-upload-dialog .px-ud-galleries .px-ud-gallery,
    .px-upload-dialog .px-ud-images .px-ud-image {
        --thumbnail-size: 80px;
    }
}

px-multi-image-upload px-image-upload .px-thumbnail {
    touch-action: manipulation;
}
px-multi-image-upload px-image-upload .px-thumbnail img {
    pointer-events: none;
}

px-multi-image-upload[data-drag-active="true"] px-option[data-dropzone-active="true"] * {
    pointer-events: none;
}

.px-photo-prints {
    --sidebar-width: 300px;
    /* global */
    --bg-color: #f3f3f3;
    --sidebar-bg-color: #fff;
    --bottom-bar-bg-color: var(--sidebar-bg-color);
    --brand-color: #000;
    --highlight-color: #32c5ff;
    --highlight-color-light: #c4e7f5;
    --danger-color: #ec6b5e;
    /* buttons */
    --cart-btn-bg-color: var(--brand-color);
    --cart-btn-color: #fff;
    --primary-btn-bg-color: var(--highlight-color);
    --primary-btn-color: #fff;
    --secondary-btn-bg-color: #d9d9d9;
    --secondary-btn-color: #606367;
    --danger-btn-bg-color: var(--danger-color);
    --danger-btn-color: #fff;
}

.px-photo-prints:not(.px-modal) {
    background-color: var(--bg-color);
    display: flex;
    position: relative;
}

.px-photo-prints.px-mobile-mode:not(.px-modal) {
    min-height: 100dvh;
}

.px-photo-prints[data-thumb-size="single"] {
    --thumb-gap: 64px;
    --thumb-size: 100%;
}

.px-photo-prints[data-thumb-size="large"] {
    --thumb-gap: 48px;
    --thumb-size: 180px;
}

.px-photo-prints[data-thumb-size="small"] {
    --thumb-gap: 32px;
    --thumb-size: 120px;
}

.px-photo-prints.px-mobile-mode {
    --thumb-gap: 18px;
    --thumb-size: 100px;
}

.px-photo-prints .px-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    gap: 0.5em;
    height: 44px;
    justify-content: center;
    outline: none !important;
    padding: 0 1.5em;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
}

.px-photo-prints.px-mobile-mode .px-btn {
    font-size: 12px;
    height: 30px;
    padding: 8px 12px;
}

.px-photo-prints .px-btn.px-btn-small {
    font-size: 13px;
    height: 26px;
}

.px-photo-prints .px-btn-secondary {
    background-color: var(--secondary-btn-bg-color);
    color: var(--secondary-btn-color);
}

.px-photo-prints .px-btn-secondary:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--secondary-btn-bg-color), black 10%);
}

.px-photo-prints .px-btn-primary {
    background-color: var(--primary-btn-bg-color);
    color: var(--primary-btn-color);
}

.px-photo-prints .px-btn-primary:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--primary-btn-bg-color), white 25%);
}

.px-photo-prints .px-btn-danger {
    background-color: var(--danger-btn-bg-color);
    color: var(--danger-btn-color);
}

.px-photo-prints .px-btn-danger:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--danger-btn-bg-color), white 25%);
}

.px-photo-prints .px-btn-cart {
    background-color: var(--cart-btn-bg-color);
    color: var(--cart-btn-color);
    padding: 0 12px;
    width: 100%;
}

.px-photo-prints.px-mobile-mode .px-btn-cart {
    width: auto;
}

.px-photo-prints .px-btn-cart:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--cart-btn-bg-color), white 25%);
}

.px-photo-prints .px-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.px-photo-prints.px-mobile-mode .px-btn svg {
    max-height: 16px;
}

.px-photo-prints .px-prints-spinner {
    --spinner-size: 16px;
    animation: px-prints-spinner .75s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: var(--spinner-size);
    vertical-align: text-bottom;
    width: var(--spinner-size);
}

.px-photo-prints .px-prints-spinner.px-project-loading {
    --spinner-size: 32px;
    display: block;
    margin: 2em auto;
}

@keyframes px-prints-spinner {
    100% {
        transform: rotate(360deg);
    }
}

.px-photo-prints .px-main-area {
    flex-grow: 1;
    padding: 16px 0 64px;
}

.px-photo-prints.px-mobile-mode .px-main-area {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.px-photo-prints .px-main-area .px-top-bar {
    align-items: center;
    background: var(--bg-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 16px 64px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar {
    padding: 14px;
}

.px-photo-prints[data-photo-count="0"] .px-main-area .px-top-bar {
    grid-template-columns: 1fr;
    margin: 2em 0;
    text-align: center;
}

.px-photo-prints .px-main-area .px-top-bar > div {
    align-items: center;
    display: flex;
}

.px-photo-prints[data-photo-count="0"] .px-main-area .px-top-bar .px-left-item {
    justify-content: center;
}

.px-photo-prints .px-main-area .px-top-bar .px-center-item {
    justify-content: center;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-center-item {
    flex-direction: column;
    gap: 1px;
}

.px-photo-prints .px-main-area .px-top-bar .px-right-item {
    justify-content: end;
}

.px-photo-prints:not(.px-mobile-mode) .px-main-area .px-top-bar .px-photos-total,
.px-photo-prints:not(.px-mobile-mode) .px-main-area .px-top-bar .px-photos-selected {
    display: inline-flex;
    font-size: 1.1rem;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-photos-total,
.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-separator,
.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-photos-selected {
    display: flex;
    font-size: 12px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-photos-total {
    color: #747474;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-separator {
    background: #b7b7b7;
    height: 1px;
    width: 50%;
}

.px-photo-prints:not(.px-mobile-mode) .px-main-area .px-top-bar .px-photos-selected {
    background: var(--highlight-color-light);
    border-radius: 6px;
    margin-left: 12px;
    padding: 4px 12px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-top-bar .px-photos-selected {
    color: var(--highlight-color);
}

.px-photo-prints .px-main-area .px-top-bar .px-thumb-size-selector {
    display: flex;
    gap: 1em;
    margin-left: 2em;
}

.px-photo-prints .px-main-area .px-top-bar .px-thumb-size-selector .px-thumb-size {
    background: none;
    border: none;
    opacity: 0.5;
    outline: none !important;
    padding: 8px;
}

.px-photo-prints[data-thumb-size="single"] .px-main-area .px-top-bar .px-thumb-size-selector .px-thumb-size[data-size="single"],
.px-photo-prints[data-thumb-size="large"] .px-main-area .px-top-bar .px-thumb-size-selector .px-thumb-size[data-size="large"],
.px-photo-prints[data-thumb-size="small"] .px-main-area .px-top-bar .px-thumb-size-selector .px-thumb-size[data-size="small"] {
    opacity: 1;
}

.px-photo-prints .px-main-area .px-prints {
    display: grid;
    gap: var(--thumb-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr));
    justify-items: center;
    margin: 16px 64px 0;
}

.px-photo-prints[data-thumb-size="single"] .px-main-area .px-prints {
    margin-top: 48px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints {
    align-content: start;
    flex-grow: 1;
    margin: 8px 16px 80px;
}

.px-photo-prints .px-main-area .px-prints .px-print {
    align-items: center;
    display: flex;
    height: var(--thumb-size);
    justify-content: center;
    width: var(--thumb-size);
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper {
    margin: 0;
    position: relative;
    -webkit-touch-callout: none !important;
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper img {
    box-shadow: 0 0 30px #bbb;
    max-height: var(--thumb-size);
    max-width: var(--thumb-size);
    -webkit-touch-callout: none !important;
}

.px-photo-prints .px-main-area .px-prints .px-print[data-selected="true"] .px-img-wrapper img {
    border-radius: 1px;
    outline: 4px solid var(--highlight-color);
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints .px-print[data-selected="true"] .px-img-wrapper img {
    outline: 3px solid var(--highlight-color);
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-quantity-bubble {
    --bubble-height: 24px;
    background-color: var(--highlight-color-light);
    border-radius: 4px;
    color: #535356;
    height: var(--bubble-height);
    line-height: var(--bubble-height);
    min-width: var(--bubble-height);
    padding: 0 8px;
    position: absolute;
    right: 4px;
    text-align: center;
    top: 4px;
    transition: all 0.2s;
    z-index: 1;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints .px-print .px-img-wrapper .px-quantity-bubble {
    --bubble-height: 16px;
    font-size: 12px;
    padding: 0 6px;
    pointer-events: none;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints-overview {
    align-content: start;
    flex-grow: 1;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble {
    opacity: 0;
    padding: 0;
}

.px-photo-prints:not(.px-mobile-mode) .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper:hover .px-quantity-bubble {
    opacity: 1;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble > span {
    background-color: var(--highlight-color-light);
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    padding: 0 8px;
    width: 100%;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble:hover > span {
    border-radius: 0;
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-quantity-bubble .px-quantity-expand {
    align-items: end;
    background-color: var(--highlight-color-light);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    height: 0;
    margin-top: 4px;
    overflow: hidden;
    padding: 0 8px;
    position: absolute;
    right: 0;
    transition: all 0.1s;
    white-space: nowrap;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble .px-quantity-expand {
    height: var(--bubble-height);
    margin: 0;
    padding: 0;
    top: 0;
    width: var(--bubble-height);
    z-index: -1;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble .px-quantity-expand.px-quantity-decrease {
    border-radius: 50% 0 0 50%;
    left: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble .px-quantity-expand.px-quantity-increase {
    border-radius: 0 50% 50% 0;
    right: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble .px-quantity-expand button {
    align-items: center;
    background: var(--primary-btn-bg-color);
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--primary-btn-color);
    display: flex;
    font-weight: bold;
    height: 100%;
    justify-content: center;
    outline: none !important;
    padding: 0;
    width: 100%;
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-quantity-bubble:hover .px-quantity-expand {
    height: auto;
    padding: 8px;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble:hover .px-quantity-expand {
    height: inherit;
    padding: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble:hover .px-quantity-expand.px-quantity-decrease {
    transform: translateX(-100%);
}

.px-photo-prints .px-main-area .px-prints-overview .px-prints .px-print .px-img-wrapper .px-quantity-bubble:hover .px-quantity-expand.px-quantity-increase {
    transform: translateX(100%);
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-icon {
    align-items: center;
    border: none;
    border-radius: 6px;
    display: flex;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    outline: none !important;
    transition: all 0.2s;
    width: 28px;
}

/* This weirdo selector ensures that the icons show when hovering over the image,
   *except* when hovering over the quantity bubbble or when doing inline cropping. */
.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper:hover:not(:has(.px-quantity-bubble:hover)):not(:has(.px-crop-box:active)) .px-icon {
    opacity: 1;
    pointer-events: auto;
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-icon.px-crop {
    background-color: #f9f9f9e0;
    bottom: 4px;
    color: #3d4043;
    height: 28px;
    right: 4px;
    width: 28px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints .px-print .px-img-wrapper .px-icon.px-crop {
    display: none;
}

.px-photo-prints .px-main-area .px-prints .px-print .px-img-wrapper .px-icon.px-delete {
    background-color: var(--danger-color);
    bottom: 4px;
    color: #fff;
    left: 4px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints .px-print .px-img-wrapper .px-icon.px-delete {
    display: none;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline {
    margin: 32px 64px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints-overview .px-print-orderline {
    margin: 8px 16px;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints-overview .px-print-orderline:first-child {
    margin-top: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-heading {
    border-bottom: 1px solid #b7b7b7;
    font-size: 16px;
    font-weight: bold;
    line-height: 2.75;
    margin-bottom: 24px;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints {
    margin: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool {
    bottom: 0;
    left: 0;
    overflow: visible;
    position: absolute;
    right: 0;
    top: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print[data-shrink-to-fit-mode="true"] .px-image-adjust-tool img {
    box-shadow: none;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-crop-box {
    --px-crop-box-outline-color: var(--highlight-color);
    --px-crop-box-outline-width: 3px;
    cursor: pointer;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-crop-box {
    outline: none;
    pointer-events: none;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print[data-shrink-to-fit-mode="true"] .px-image-adjust-tool .px-crop-box {
    box-shadow: 0 0 30px #bbb;
    cursor: auto;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-crop-box::before {
    outline: none;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-crop-box-handle {
    display: none;
}

.px-photo-prints.px-mobile-mode .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-resolution-warning {
    height: 24px;
    top: 2px;
    width: 24px;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-crop-container {
    overflow: visible;
    padding: 0;
}

.px-photo-prints .px-main-area .px-prints-overview .px-print-orderline .px-prints .px-print .px-image-adjust-tool .px-buttons-container {
    display: none;
}

.px-photo-prints .px-bottom-bar {
    background: var(--bottom-bar-bg-color);
    bottom: 0;
    position: sticky;
    z-index: 3;  /* must be larger than top-bar's z-index so that the bottom-bar-backdrop covers the top-bar */
}

.px-photo-prints[data-photo-count="0"] .px-bottom-bar {
    display: none;
}

.px-photo-prints .px-bottom-bar .px-select-all-btn {
    border-radius: 15px;
    bottom: 80px;
    box-shadow: 0 0 12px #0003;
    font-size: 10px;
    gap: 2px;
    position: absolute;
    right: 16px;
    z-index: -1;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-top {
    align-items: center;
    background: var(--bottom-bar-bg-color);
    display: flex;
    justify-content: space-between;
    padding: 12px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-top .px-bottom-bar-handle {
    align-items: center;
    display: flex;
    gap: 8px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-top .px-bottom-bar-handle svg {
    background-color: var(--highlight-color-light);
    border-radius: 4px;
    height: 32px;
    padding: 6px;
    width: 32px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-top .px-total-price {
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content {
    background: var(--bottom-bar-bg-color);
    max-height: 40vh;
    padding: 0 12px 12px;
    overflow: auto;
    transition: max-height 0.2s, padding-bottom 0.2s;
}

.px-photo-prints .px-bottom-bar[data-open="false"] .px-bottom-bar-content {
    max-height: 0;
    padding-bottom: 0;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-bottom-bar-notice {
    font-size: 14px;
    margin-top: 0.5rem;
    text-align: center;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes {
    align-items: stretch;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto;
    width: 100%;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-header {
    display: contents;
    font-size: 15px;
    font-weight: bolder;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-category {
    border-bottom: 1px solid #b7b7b7;
    font-size: 16px;
    font-weight: bold;
    grid-column: span 3;
    line-height: 2.75;
    margin: 12px 0;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-print-size {
    color: #747474;
    display: contents;
    font-size: 14px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-print-size[data-selected="true"] {
    color: revert;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-print-size[data-selected="true"] > div {
    background-color: var(--highlight-color-light);
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-label,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-quantity,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-price {
    align-items: center;
    display: flex;
    margin: 4px 0;
    padding: 0 8px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-label {
    text-align: left;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-quantity {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-quantity button {
    --qty-btn-size: 40px;
    align-items: center;
    background: var(--secondary-btn-bg-color);
    border: 6px solid var(--sidebar-bg-color);
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--secondary-btn-color);
    display: flex;
    height: var(--qty-btn-size);
    justify-content: center;
    outline: none !important;
    padding: 0;
    width: var(--qty-btn-size);
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-print-size[data-selected="true"] > .px-quantity button {
    background: var(--primary-btn-bg-color);
    border: 6px solid var(--highlight-color-light);
    color: var(--primary-btn-color);
    font-weight: bold;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-quantity span {
    display: inline-block;
    min-width: 16px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-print-sizes .px-price {
    justify-content: end;
    text-align: right;
}

/* The backdrop catches clicks outside of the main area of the bottom bar. */
.px-photo-prints .px-bottom-bar .px-bottom-bar-backdrop {
    backdrop-filter: blur(1px);
    background-color: #0009;
    height: 100vmax;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    transition: background-color 0.2s;
    width: 100%;
}

.px-photo-prints .px-bottom-bar[data-open="false"] .px-bottom-bar-backdrop {
    backdrop-filter: none;
    background-color: #0000;
    pointer-events: none;
}

.px-photo-prints .px-main-area .px-focused-image {
    align-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
    background-color: #0009;
    bottom: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(100%, max-content);
    grid-template-rows: minmax(0, 75vmin) auto auto;
    justify-content: center;
    left: 0;
    opacity: 1;
    padding: 36px;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s;
    z-index: 3;

    @starting-style {
        opacity: 0;
    }
}

.px-photo-prints .px-main-area .px-focused-image * {
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

.px-photo-prints .px-main-area .px-focused-image figure {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    position: relative;
    text-align: center;
    width: 100%;
}

.px-photo-prints .px-main-area .px-focused-image figure img {
    border-radius: 12px;
    bottom: 0;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    transform: translateX(-50%);
}

.px-photo-prints .px-main-area .px-focused-image .px-quantity-panel {
    text-align: center;
}

.px-photo-prints .px-main-area .px-focused-image .px-quantity-panel table {
    background-color: var(--bg-color);
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    font-size: 14px;
    padding: 16px 24px;
}

.px-photo-prints .px-main-area .px-focused-image .px-quantity-panel .px-qty {
    font-weight: bold;
    padding-right: 8px;
    text-align: right;
}

.px-photo-prints .px-main-area .px-focused-image .px-quantity-panel .px-qty::after {
    content: '\00D7';
    font-weight: normal;
    padding-left: 8px;
}

.px-photo-prints .px-main-area .px-focused-image .px-quantity-panel .px-size-label {
    text-align: left;
}

.px-photo-prints .px-main-area .px-focused-image .px-delete-btn-wrapper {
    display: flex;
    justify-content: center;
}

.px-photo-prints .px-sidebar {
    --sidebar-x-padding: 32px;
    background-color: var(--sidebar-bg-color);
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--sidebar-width);
}

.px-photo-prints.px-mobile-mode .px-sidebar,
.px-photo-prints[data-photo-count="0"] .px-sidebar {
    display: none;
}

.px-photo-prints .px-sidebar .px-sidebar-content {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    padding-top: 16px;
    position: sticky;
    top: 0;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-sidebar-top {
    background-color: var(--sidebar-bg-color);
    padding: 16px var(--sidebar-x-padding) 42px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-scroll {
    overflow: auto;
    padding: 32px var(--sidebar-x-padding);
    position: relative;
    scrollbar-width: thin;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-scroll::before {
    background-color: #b7b7b7;
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    width: calc(100% - 2 * var(--sidebar-x-padding));
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-total-price {
    font-size: 28px;
    margin-bottom: 18px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-btn-cart {
    font-size: 18px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-sidebar-instructions .px-heading {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes {
    --print-sizes-padding: 8px;
    align-items: stretch;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto;
    width: 100%;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-header {
    display: contents;
    font-size: 15px;
    font-weight: bolder;
    padding: var(--print-sizes-padding) 0;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-category {
    border-bottom: 1px solid #b7b7b7;
    font-size: 16px;
    font-weight: bold;
    grid-column: span 3;
    line-height: 2.75;
    margin: 12px 0;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size {
    color: #747474;
    display: contents;
    font-size: 14px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size[data-selected="true"] {
    color: revert;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size[data-selected="true"] > div {
    background-color: var(--highlight-color-light);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-label,
.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-quantity,
.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-price {
    --highlight-expand-width: 12px;
    align-items: center;
    display: flex;
    margin: 6px 0;
    padding: 2px var(--print-sizes-padding);
    position: relative;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-label {
    padding-left: 0
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size[data-selected="true"] .px-label::before {
    background-color: var(--highlight-color-light);
    content: '';
    display: block;
    height: 100%;
    left: calc(-1 * var(--highlight-expand-width));
    position: absolute;
    width: var(--highlight-expand-width);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-price {
    padding-right: 0
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size[data-selected="true"] .px-price::after {
    background-color: var(--highlight-color-light);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: calc(-1 * var(--highlight-expand-width));
    width: var(--highlight-expand-width);
}


.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-label {
    text-align: left;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-quantity {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-quantity button {
    --qty-btn-size: 30px;
    align-items: center;
    background: var(--secondary-btn-bg-color);
    border: 6px solid var(--sidebar-bg-color);
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--secondary-btn-color);
    display: flex;
    height: var(--qty-btn-size);
    justify-content: center;
    outline: none !important;
    padding: 0;
    width: var(--qty-btn-size);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-print-size[data-selected="true"] > .px-quantity button {
    background: var(--primary-btn-bg-color);
    border: 6px solid var(--highlight-color-light);
    color: var(--primary-btn-color);
    font-weight: bold;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-quantity span {
    display: inline-block;
    min-width: 16px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-print-sizes .px-price {
    justify-content: end;
    text-align: right;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options {
    margin-bottom: 36px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options {
    padding: 0 8px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-heading,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-heading {
    border-bottom: 1px solid #b7b7b7;
    font-size: 16px;
    font-weight: bold;
    line-height: 2.75;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-heading {
    margin-bottom: 24px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-heading {
    margin-bottom: 16px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option {
    margin-bottom: 1em;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option {
    margin-bottom: 0.6667em;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-label,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-label {
    font-weight: bold;
    line-height: 2;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option select,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option select {
    appearance: none;
    background-color: #e9e9e9;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" fill="%23888"><polygon points="0,0 5,5 10,0"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    border: none;
    box-sizing: border-box;
    color: inherit;
    padding: 8px 26px 8px 12px;
    width: 100%;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-radio-control label {
    --highlight-expand-width: 12px;
    align-items: center;
    display: flex;
    gap: 8px;
    line-height: 2;
    margin-bottom: 0;
    padding: 0 var(--radio-control-x-padding);
    position: relative;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label input,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-radio-control label input {
    display: none;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label .px-icon,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-radio-control label .px-icon {
    align-items: center;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-radio-control label:has(input:checked) .px-icon,
.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label:has(input:checked) .px-icon {
    border: none;
    color: var(--highlight-color);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label:hover {
    background: var(--highlight-color-light);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label:hover::before {
    background-color: var(--highlight-color-light);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: var(--highlight-expand-width);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label:hover::before {
    left: calc(-1 * var(--highlight-expand-width));
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-radio-control label:hover::after {
    right: calc(-1 * var(--highlight-expand-width));
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control {
    display: grid;
    grid-gap: 4px 16px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0.5em;
}

.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control {
    grid-template-columns: repeat(4, 1fr);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label input,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label input {
    display: none;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label img,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label img {
    max-width: 100%;
    transition: all 0.2s;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label:hover img {
    outline: 3px solid var(--highlight-color);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label:has(input:checked) img,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label:has(input:checked) img {
    border: 3px solid var(--sidebar-bg-color);
    outline: 3px solid var(--highlight-color);
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label .px-option-price,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label .px-option-price {
    background: #fff;
    font-weight: bold;
    font-size: 12px;
    left: 0;
    padding: 2px 4px;
    position: absolute;
    top: 16px;
}

.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label .px-radio-label,
.px-photo-prints .px-bottom-bar .px-bottom-bar-content .px-size-options .px-option .px-image-control label .px-radio-label {
    flex-grow: 1;
    font-size: 12px;
    padding-top: 4px;
    text-align: center;
}

.px-photo-prints .px-cropping-overlay {
    background-color: #fff;
    bottom: 0;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s;
    z-index: 9;

    @starting-style {
        opacity: 0;
    }
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay {
    backdrop-filter: blur(1px);
    background-color: #0009;
    display: flex;
    flex-direction: column;
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay * {
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

.px-photo-prints .px-cropping-overlay .px-image-adjust-tool {
    background-color: var(--bg-color);
    flex-grow: 1;
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay .px-image-adjust-tool {
    background-color: transparent;
}

.px-photo-prints .px-cropping-overlay .px-image-adjust-tool .px-buttons-container {
    background-color: #fff;
    width: var(--sidebar-width);
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay .px-image-adjust-tool .px-buttons-container {
    background-color: transparent;
    width: auto;
}

@media (orientation: portrait) {
  .px-photo-prints.px-mobile-mode .px-cropping-overlay .px-image-adjust-tool .px-buttons-container {
      padding-top: 0;
  }
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay .px-image-adjust-tool .px-buttons-container .px-action-buttons-container {
    display: none;
}

.px-photo-prints.px-mobile-mode .px-cropping-overlay .px-quantity-buttons {
    display: flex;
    justify-content: center;
    padding: 32px;
}

/* Modal styles */
.px-photo-prints.px-modal .px-modal-panel {
    min-height: auto;
}

.px-photo-prints.px-modal .px-modal-panel .px-modal-content {
    text-align: center;
}

.px-photo-prints.px-modal .px-modal-panel .px-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: end;
}

.px-photo-prints .px-please-wait-overlay {
    align-items: center;
    background-color: #fffc;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    gap: 1em;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s;
    z-index: 9999;

    @starting-style {
        opacity: 0;
    }
}

.px-photo-prints .px-please-wait-overlay .px-prints-spinner {
    --spinner-size: 32px;
}

.px-color-button {
    box-sizing: border-box;
    color: var(--charcoal-grey);
    cursor: pointer;
    height: 36px;
    line-height: 34px;
}

.px-color-button[data-color-scheme="dark"] {
    border-width: 0;
    color: #fff;
    line-height: 36px;
}

.px-spinner {
    display: inline-block;
    font-size: 0;  /* to avoid extra whitespace */
}

.px-spinner .px-spinner-inner {
    animation-name: px-spinner-rotation;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: block;
}

.px-spinner[data-active="false"] .px-spinner-inner {
    animation-name: none;
    display: none;
}

.px-spinner .px-spinner-inner svg {
    display: block;
}

@keyframes px-spinner-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.px-carousel {
    position: relative;
}

.px-carousel .px-slides {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.px-carousel .px-slides > ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
   Slides are duplicated inside the .px-layout-hack div with visibility: hidden,
   so that they reserve space for absolutely positioned slides.
*/
.px-carousel .px-slides .px-layout-hack .px-slide {
    visibility: hidden;
}

.px-carousel .px-slides .px-slide {
    display: inline-block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s linear;
    width: 100%;
}

.px-carousel .px-slides .px-slide img {
    width: 100%;
}

.px-carousel .px-slides .px-slide-display .px-slide {
    left: 0;
    position: absolute;
    top: 0;
}

.px-carousel .px-slides .px-slide-display .px-slide[data-active="true"] {
    opacity: 1;
    pointer-events: auto;
}

.px-carousel .px-slides .px-navigation {
    --button-size: 64px;
    font-size: 0;
    left: 32px;
    position: absolute;
    right: 32px;
    top: calc(50% - var(--button-size)/2);
    visibility: hidden;
}

.px-carousel .px-slides:hover .px-navigation {
    visibility: visible;
}

.px-carousel .px-slides .px-navigation button {
    border: none;
    border-radius: calc(2 * var(--button-size));
    background: #fff;
    cursor: pointer;
    display: inline-block;
    height: var(--button-size);
    opacity: 0.4;
    outline: none;
    position: absolute;
    text-align: center;
    width: var(--button-size);
}

.px-carousel .px-slides .px-navigation button:hover {
    opacity: 1;
}

.px-carousel .px-slides .px-navigation button.px-prev {
    left: 0;
}

.px-carousel .px-slides .px-navigation button.px-next {
    right: 0;
}

.px-carousel .px-slides .px-navigation button.px-prev::after,
.px-carousel .px-slides .px-navigation button.px-next::after {
    bottom: 0;
    content: url('data:image/svg+xml,<svg width="16px" height="32px" viewBox="0 0 16 28" xmlns="http://www.w3.org/2000/svg"><polyline stroke-width="2" stroke-linecap="round" fill="none" stroke="%238492a6" points="1,1 14,14 1,27" /></svg>');
    left: 0;
    margin: calc(var(--button-size) / 4);
    position: absolute;
    right: 0;
    top: 0;
}

.px-carousel .px-slides .px-navigation button.px-prev::after {
    left: -4px;
    transform: rotate(180deg);
}

.px-carousel .px-slides .px-navigation button.px-next::after {
    left: 4px;
}

.px-carousel .px-pager {
    --pager-item-size: 14px;
    font-size: 0;
    line-height: var(--pager-item-size);
    list-style: none;
    margin: 16px;
    padding: 0;
    text-align: center;
}

.px-carousel .px-pager .px-pager-item {
    display: inline-block;
    height: var(--pager-item-size);
    margin: 0 8px;
}

.px-carousel .px-pager .px-pager-item a {
    background-color: #ccc;
    border-radius: var(--pager-item-size);
    cursor: pointer;
    display: inline-block;
    height: var(--pager-item-size);
    width: var(--pager-item-size);
}

.px-carousel .px-pager .px-pager-item[data-active="true"] a {
    background-color: #636363;
}

.px-dropdown {
    --border-color: var(--neutral-grey-4);
    background: var(--edit-control-background-color);
    background-image: url('data:image/svg+xml,<svg width="12" height="6" vieBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 6,5 12,0" stroke="%23747474" stroke-width="1.5" fill="none"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    border: 1px solid var(--edit-control-background-color);
    border-radius: 4px;
    color: var(--edit-control-color);
    cursor: pointer;  /* required for click events on iOS to fire */
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    padding: 0;
    position: relative;
}

.px-dropdown .px-outside-click-area {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.px-dropdown span.px-selected-value {
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    padding: 0 32px 0 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.px-dropdown .px-freeform-input {
    background-color: #fff;
    line-height: 34px;
    margin: 0 2px;
    outline: none;
    padding: 0 8px;
    width: calc(100% - 64px);
}

.px-dropdown .px-dropdown-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 16px 24px 0 rgba(55, 56, 68, 0.08);
    color: var(--edit-control-color);
    left: -1px;  /* -1px to account for the border of the parent */
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 38px;
    z-index: 99;
}

.px-dropdown .px-dropdown-panel::before,
.px-dropdown .px-dropdown-panel::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
}

.px-dropdown .px-dropdown-panel::before {
    border-bottom-color: var(--border-color);
    border-width: 5px;
    top: -10px;
    right: 17px;
}

.px-dropdown .px-dropdown-panel::after {
    border-bottom-color: #fff;
    border-width: 4px;
    margin-top: 1px;
    top: -9px;
    right: 18px;
}

.px-dropdown .px-dropdown-panel .px-scrollable-wrapper {
    max-height: 320px;
    overflow: auto;
}

.px-dropdown .px-dropdown-panel ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.px-dropdown .px-dropdown-panel ul li {
    line-height: 16px;
    padding: 6px 10px;
}

.px-dropdown .px-dropdown-panel ul li[data-selected="true"],
.px-dropdown .px-dropdown-panel ul li:hover {
    background-color: var(--edit-control-background-color);
}

.px-date-picker {
    display: flex;
    flex-direction: column;
    padding: 18px;
    text-align: center;
    width: 300px;
}

.px-date-picker .px-top-line {
    align-items: center;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    line-height: 40px;
    width: 100%;
}

.px-date-picker .px-top-line button {
    margin: 0;
    height: 32px;
    padding: 0;
    width: 32px;
}

.px-date-picker .px-dates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(100% / 7));
    line-height: 40px;
}

.px-date-picker .px-dates-grid .px-day-name,
.px-date-picker .px-dates-grid .px-date {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    height: 40px;
    user-select: none;
}

.px-date-picker .px-dates-grid .px-day-name {
    color: var(--color-x11-gray);
    font-size: 12px;
}

.px-date-picker .px-dates-grid .px-date {
    cursor: pointer;
}

.px-date-picker .px-dates-grid .px-date:hover {
    border: 2px solid var(--color-spiro-disco-ball);
    border-radius: 4px;
}

.px-date-picker .px-dates-grid .px-date[data-selected="true"] {
    background-color: var(--color-spiro-disco-ball);
    border-radius: 4px;
    color: #fff;
}

.px-date-picker .px-dates-grid .px-date[data-in-range="true"] {
    background-color: var(--color-spiro-disco-ball-25-opacity);
}

.px-date-picker .px-dates-grid .px-date[data-selectable="false"] {
    color: var(--color-isabelline);
}

.px-date-picker .px-dates-grid .px-date[data-outside-display="true"] {
    visibility: hidden;
}

.px-slider-with-numeric-input input {
    display: block;
    margin-left: auto;
    padding: 0;
    text-align: center;
    width: 50px;
}

.px-mapped-preview {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.px-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #74747444;
    margin: 0;
}

.px-modal .px-modal-panel {
    box-shadow: 0px 1px 16px 0px #c4c4c4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    max-width: 80%;
    min-height: 250px;
    max-height: 80%;
    background-color: #fff;
    padding: 28px;
    box-sizing: border-box;
    border-radius: 8px;
}

.px-modal .px-modal-panel .px-close-button {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 6px 8px;
    font-size: 18px;
    color: var(--icon-color, var(--blue-grey));
    cursor: pointer;
    z-index: 1;
}


.px-modal.px-mobile-mode .px-modal-panel button {
    display: inherit;
}

.px-modal .px-modal-panel .px-modal-footer {
    margin-top: 28px;
}

.px-modal .px-modal-panel .px-modal-footer:empty {
    display: none;
}

.px-modal .px-modal-panel .px-modal-header,
.px-modal .px-modal-panel .px-modal-footer {
    flex-shrink: 0;
}

.px-modal .px-modal-panel .px-modal-header {
    min-height: 16px;
}

.px-modal .px-modal-panel .px-modal-header h1 {
    font-size: 1.5em;
    margin: 0.5em 0 1em 0;
    text-align: center;
}

.px-modal.px-mobile-mode .px-modal-panel .px-modal-header h1 {
    font-size: 1.5em;
}

.px-modal .px-modal-panel .px-modal-content {
    flex-grow: 1;
    margin: 8px 0;
    overflow: auto;
    text-align: left;
}

.px-modal .px-modal-panel .px-modal-content p {
    margin-top: 0;
}

.px-modal.px-mobile-mode .px-modal-panel .px-modal-content {
    font-size: 12px;
    text-align: center;
}

.px-modal .px-modal-panel .px-modal-footer button {
    display: inline-flex;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    min-width: 50px;
    padding: 0 16px;
}

.px-modal.px-mobile-mode .px-modal-panel .px-modal-footer button {
    line-height: 1;
    padding: 0 8px;
}

.px-modal .px-modal-panel .px-modal-footer button:hover {
    opacity: 0.6;
}

.px-modal .px-modal-panel .px-modal-footer button:disabled {
    opacity: 0.4;
}

.px-modal .px-modal-panel .px-modal-footer button.px-ok {
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-color);
}
.px-modal .px-modal-panel .px-modal-footer button.px-ok::after {
    content: url('data:image/svg+xml,<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.2498 8.14995L1.6248 5.52494C1.55616 5.45546 1.47441 5.4003 1.38428 5.36265C1.29416 5.325 1.19747 5.30561 1.0998 5.30561C1.00213 5.30561 0.905432 5.325 0.815312 5.36265C0.725191 5.4003 0.64344 5.45546 0.574798 5.52494C0.505319 5.59359 0.450155 5.67534 0.412505 5.76546C0.374856 5.85558 0.355469 5.95228 0.355469 6.04994C0.355469 6.14761 0.374856 6.24431 0.412505 6.33443C0.450155 6.42455 0.505319 6.5063 0.574798 6.57494L3.7173 9.71745C4.0098 10.0099 4.4823 10.0099 4.7748 9.71745L12.7248 1.77494C12.7943 1.7063 12.8494 1.62455 12.8871 1.53443C12.9247 1.44431 12.9441 1.34761 12.9441 1.24994C12.9441 1.15228 12.9247 1.05558 12.8871 0.965458C12.8494 0.875338 12.7943 0.793587 12.7248 0.724945C12.6562 0.655465 12.5744 0.600301 12.4843 0.562652C12.3942 0.525002 12.2975 0.505615 12.1998 0.505615C12.1021 0.505615 12.0054 0.525002 11.9153 0.562652C11.8252 0.600301 11.7434 0.655465 11.6748 0.724945L4.2498 8.14995Z" fill="%23f3f3f3"/></svg>');
    margin-left: 8px;
}

.px-modal .px-modal-panel .px-modal-footer button.px-cancel {
    background-color: var(--secondary-button-background-color);
    color: var(--secondary-button-color);
}
.px-modal .px-modal-panel .px-modal-footer button.px-cancel::after {
    content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.71995 3.72003C3.86058 3.57958 4.0512 3.50069 4.24995 3.50069C4.4487 3.50069 4.63933 3.57958 4.77995 3.72003L7.99995 6.94003L11.2199 3.72003C11.2886 3.64634 11.3714 3.58724 11.4634 3.54625C11.5554 3.50526 11.6547 3.48322 11.7554 3.48144C11.8561 3.47966 11.9562 3.49819 12.0495 3.53591C12.1429 3.57363 12.2278 3.62977 12.299 3.70099C12.3702 3.77221 12.4264 3.85705 12.4641 3.95043C12.5018 4.04382 12.5203 4.14385 12.5185 4.24455C12.5168 4.34526 12.4947 4.44457 12.4537 4.53657C12.4127 4.62857 12.3536 4.71137 12.28 4.78003L9.05995 8.00003L12.28 11.22C12.3536 11.2887 12.4127 11.3715 12.4537 11.4635C12.4947 11.5555 12.5168 11.6548 12.5185 11.7555C12.5203 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3702 12.2279 12.299 12.2991C12.2278 12.3703 12.1429 12.4264 12.0495 12.4642C11.9562 12.5019 11.8561 12.5204 11.7554 12.5186C11.6547 12.5168 11.5554 12.4948 11.4634 12.4538C11.3714 12.4128 11.2886 12.3537 11.2199 12.28L7.99995 9.06003L4.77995 12.28C4.63778 12.4125 4.44973 12.4846 4.25543 12.4812C4.06113 12.4778 3.87574 12.3991 3.73833 12.2617C3.60092 12.1242 3.5222 11.9389 3.51878 11.7446C3.51535 11.5503 3.58747 11.3622 3.71995 11.22L6.93995 8.00003L3.71995 4.78003C3.5795 4.63941 3.50061 4.44878 3.50061 4.25003C3.50061 4.05128 3.5795 3.86066 3.71995 3.72003Z" fill="%23404040"/></svg>');
    height: 25px;
    margin-left: 6px;
}

.px-modal .px-modal-panel .px-modal-footer button.px-delete {
    background-color: var(--danger-color);
    color: #fff;
}

.px-modal .px-modal-panel .px-modal-footer button.px-delete::after {
    content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.455 2.07434C8.69986 2.0744 8.93849 2.15151 9.1371 2.29473C9.3357 2.43795 9.48421 2.64003 9.56158 2.87234L9.87833 3.82434H11.7917C11.9464 3.82434 12.0947 3.8858 12.2041 3.9952C12.3135 4.10459 12.375 4.25296 12.375 4.40767C12.375 4.56238 12.3135 4.71076 12.2041 4.82015C12.0947 4.92955 11.9464 4.99101 11.7917 4.99101L11.7899 5.03242L11.2842 12.1158C11.2526 12.5572 11.055 12.9702 10.7312 13.2717C10.4074 13.5733 9.98132 13.741 9.53883 13.741H4.71117C4.26868 13.741 3.84265 13.5733 3.51881 13.2717C3.19498 12.9702 2.9974 12.5572 2.96583 12.1158L2.46008 5.03184C2.45903 5.01825 2.45844 5.00463 2.45833 4.99101C2.30362 4.99101 2.15525 4.92955 2.04585 4.82015C1.93646 4.71076 1.875 4.56238 1.875 4.40767C1.875 4.25296 1.93646 4.10459 2.04585 3.9952C2.15525 3.8858 2.30362 3.82434 2.45833 3.82434H4.37167L4.68842 2.87234C4.76582 2.63993 4.91442 2.43779 5.11314 2.29456C5.31186 2.15133 5.55062 2.07428 5.79558 2.07434H8.455ZM5.375 6.74101C5.23212 6.74103 5.09422 6.79348 4.98745 6.88842C4.88068 6.98337 4.81247 7.11419 4.79575 7.25609L4.79167 7.32434V10.8243C4.79183 10.973 4.84876 11.116 4.95083 11.2241C5.05289 11.3323 5.19239 11.3973 5.34081 11.406C5.48924 11.4147 5.63539 11.3664 5.7494 11.271C5.86342 11.1756 5.93669 11.0402 5.95425 10.8926L5.95833 10.8243V7.32434C5.95833 7.16963 5.89687 7.02126 5.78748 6.91186C5.67808 6.80247 5.52971 6.74101 5.375 6.74101ZM8.875 6.74101C8.72029 6.74101 8.57192 6.80247 8.46252 6.91186C8.35312 7.02126 8.29167 7.16963 8.29167 7.32434V10.8243C8.29167 10.979 8.35312 11.1274 8.46252 11.2368C8.57192 11.3462 8.72029 11.4077 8.875 11.4077C9.02971 11.4077 9.17808 11.3462 9.28748 11.2368C9.39687 11.1274 9.45833 10.979 9.45833 10.8243V7.32434C9.45833 7.16963 9.39687 7.02126 9.28748 6.91186C9.17808 6.80247 9.02971 6.74101 8.875 6.74101ZM8.455 3.24101H5.795L5.60075 3.82434H8.64925L8.455 3.24101Z" fill="white"/></svg>');
    height: 28px;
    margin-left: 6px;
}

.px-modal .px-modal-panel .px-modal-footer button.px-save::after {
    content: url('data:image/svg+xml,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7406 4.46079L10.4469 2.16714C10.2008 1.921 9.86695 1.78272 9.51885 1.78271H2.1875C1.46262 1.78271 0.875 2.37033 0.875 3.09521V12.7202C0.875 13.4451 1.46262 14.0327 2.1875 14.0327H11.8125C12.5374 14.0327 13.125 13.4451 13.125 12.7202V5.38886C13.125 5.04077 12.9867 4.70693 12.7406 4.46079ZM7 12.2827C6.03351 12.2827 5.25 11.4992 5.25 10.5327C5.25 9.56622 6.03351 8.78271 7 8.78271C7.96649 8.78271 8.75 9.56622 8.75 10.5327C8.75 11.4992 7.96649 12.2827 7 12.2827ZM9.625 3.956V6.70459C9.625 6.8858 9.47808 7.03271 9.29688 7.03271H2.95312C2.77192 7.03271 2.625 6.8858 2.625 6.70459V3.86084C2.625 3.67963 2.77192 3.53271 2.95312 3.53271H9.20172C9.28875 3.53271 9.37221 3.56728 9.43373 3.62883L9.52889 3.72398C9.55936 3.75445 9.58353 3.79062 9.60003 3.83043C9.61652 3.87024 9.625 3.91291 9.625 3.956Z" fill="%23d9d9d9"/></svg>');
    height: 28px;
    margin-left: 10px;
}

.px-modal.px-mobile-mode .px-modal-panel .px-modal-footer button::after {
    display: none;
}

.px-modal .px-modal-panel .px-modal-footer .px-action-buttons {
    text-align: right;
}

.px-modal .px-modal-panel .px-modal-footer .px-action-buttons button {
    margin-left: 8px;
}
.px-modal .px-modal-panel .px-modal-footer .px-action-buttons button:first-child {
    margin-left: 0;
}

.px-modal.px-mobile-mode .px-modal-panel button.px-large,
.px-modal.px-mobile-mode .px-modal-panel label.px-file-upload-button.px-large {
    padding: 10px 10px;
}

.px-confirmation-modal.px-modal .px-modal-panel {
    min-height: 0;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-header {
    margin: 16px 0;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-header h1 {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    min-height: auto;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-content {
    margin: 8px 0 16px;
    text-align: center;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-content:empty {
    display: none;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-footer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-footer button {
    margin-right: 14px;
}

.px-confirmation-modal.px-modal .px-modal-panel .px-modal-footer button:last-child {
    margin-right: 0;
}

.px-modal.px-mobile-mode .px-confirmation-modal.px-modal .px-modal-panel .px-modal-footer button:last-child {
    margin-right: 0;
}

.px-accordion {
    border-bottom: 1px solid var(--layout-border-color);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.px-accordion .px-accordion-item {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.px-accordion .px-accordion-item[data-expanded="false"] {
    min-height: 41px;
}

.px-accordion .px-accordion-item .px-accordion-title {
    border-top: 1px solid var(--layout-border-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    line-height: 40px;
    margin: 0;
    padding: 0 18px;
    position: relative;
}

.px-accordion .px-accordion-item:first-child .px-accordion-title {
    border-top: none;
}

.px-accordion .px-accordion-item .px-accordion-title::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--icon-color);
    content: '';
    height: 0;
    position: absolute;
    top: calc(50% - 4px);
    right: 18px;
    transition: transform 0.2s;
    width: 0;
}

.px-accordion .px-accordion-item[data-expanded=true] .px-accordion-title::after {
    transform: rotate(90deg);
}

.px-accordion .px-accordion-item .px-accordion-content-wrapper {
    overflow: auto;
    transition: max-height 0.4s;  /* max-height values are set by JS code in component */
}

.px-accordion .px-accordion-item .px-accordion-content {
    padding: 14px;
    position: relative;
}

.px-toggle-button {
    color: var(--edit-control-color);
    cursor: pointer;
    height: 36px;
    line-height: 36px;
}

.px-toggle-button[data-pressed="true"] {
    background-color: var(--edit-control-color);
    border-color: var(--edit-control-color);
    color: #fff;
}

.px-upload-modal {
    font-size: 12px;
    text-align: left;
    overflow: hidden;
}

.px-upload-modal .px-file-item {
    margin-bottom: 1em;
    overflow: hidden;
    max-height: 100%;
    opacity: 1;
    transition: opacity 0.4s ease-in, max-height 0.4s step-end, margin-bottom 0.4s step-end;
}

.px-upload-modal .px-file-item.px-status-success {
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
}

.px-upload-modal .px-file-item .px-file-size {
}

.px-upload-modal .px-file-item .px-progress {
    display: none;
    background: var(--pale-grey);
    margin: 2px 0;
    position: relative;
    height: 14px;
}

.px-upload-modal .px-file-item.px-status-started .px-progress,
.px-upload-modal .px-file-item.px-status-success .px-progress {
    display: block;
}

.px-upload-modal .px-file-item .px-progress-bar {
    background: var(--color-spiro-disco-ball);
    min-width: 20px;
    line-height: 14px;
    height: 14px;
    font-size: 10px;
}

.px-upload-modal .px-file-item.px-status-success .px-progress-bar {
    background: var(--seaweed);
    transition: background 0.2s;
}

.px-upload-modal .px-file-item.px-status-error .px-progress-bar {
    background: var(--color-coral-red);
}

.px-upload-modal .px-file-item .px-error {
    display: none;
    color: var(--color-coral-red);
    margin: 2px 0;
}

.px-upload-modal .px-file-item.px-status-error .px-error {
    display: block;
}

.px-upload-modal .px-file-input {
    display: none;
}

px-upload-dialog {
    /* This prevents the screen from scrolling to the bottom
       when a new upload dialog gets inserted into the page. */
    position: fixed;
    z-index: 9999;
}

.px-color-picker .px-color-picker-rgb,
.px-color-picker .px-color-picker-cmyk,
.px-color-picker .px-color-type-switch {
    margin: auto;
}

.px-color-picker .px-color-type-switch {
    margin-bottom: 18px;
}

.px-color-picker .px-color-wheel {
    position: relative;
}

.px-color-picker .px-color-wheel canvas {
    display: block;
    border-radius: 50%;
}

.px-color-picker .px-color-wheel .px-crosshair {
    pointer-events: none;
    position: absolute;
    height: 18px;
    margin-left: -9px;
    margin-bottom: -9px;
    width: 18px;
}

.px-color-picker .px-lightness,
.px-color-picker .px-color-component {
    position: relative;
}

.px-color-picker .px-lightness {
    margin: 8px 0;
}

.px-color-picker .px-lightness canvas,
.px-color-picker .px-color-component canvas {
    border-radius: 4px;
    left: 0;
    position: absolute;
    top: 15px;
}

.px-color-picker .px-lightness .px-slider-strip,
.px-color-picker .px-color-component .px-slider-strip {
    background: transparent;
    box-shadow: none;
}

.px-color-picker .px-slider .px-handle {
    border-radius: 4px;
    bottom: -6px;
}

.px-color-picker .px-bottom-controls {
    font-size: 0;  /* to remove extra space between inline-block elements */
    line-height: 22px;
    margin: 8px 0 16px;
    text-align: center;
}

.px-color-picker .px-bottom-controls span {
    color: var(--edit-control-color);
    display: inline-block;
    font-size: 12px;
    line-height: 32px;
    opacity: 0.5;
    vertical-align: middle;
    width: 32px;
}

.px-color-picker .px-hex-input,
.px-color-picker .px-color-component-input {
    box-sizing: border-box;
    font-size: 12px;
    height: 32px;
    line-height: 26px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

.px-color-picker .px-hex-input {
    display: inline-block;
    margin-left: -32px;
    text-align: right;
    width: 92px;
}

.px-color-picker .px-color-component-input {
    margin-right: 8px;
    padding: 3px;
    width: 32px;
}

.px-color-picker .px-color-preview {
    border: 1px solid var(--pale-grey);
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    height: 32px;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
    width: 32px;
}

.px-color-picker .px-color-preview[data-color-scheme="dark"] {
    border-width: 0;
}

.px-color-picker .px-color-preview svg {
    color: var(--neutral-grey-2);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.px-color-picker .px-color-preview[data-color-scheme="dark"] svg {
    color: #fff;
}

.px-resize-detector {
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.px-slider {
    border-color: transparent;  /* transparent border for larger click area */
    border-style: solid;
    border-width: 15px 0 15px;
    position: relative;
}

.px-slider-strip {
    background: var(--neutral-grey-4);
    border-radius: 1px;
    height: 3px;
}

.px-slider .px-handle {
    background: var(--edit-control-color);
    border-radius: 50%;
    box-shadow: 1px 2px 6px 0 rgba(55, 56, 68, 0.2);
    bottom: -4.5px;
    cursor: pointer;
    display: block;
    position: absolute;
}

/* Transparent pseudo element for larger click area */
.px-slider .px-handle::before {
    border-radius: 50%;
    content: ' ';
    display: block;
    height: 40px;
    left: calc(50% - 20px);
    position: absolute;
    top: calc(50% - 20px);
    width: 40px;
}

px-image-upload {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

px-image-upload *[hidden] {
    display: none;
}

px-image-upload .px-thumbnail img {
    --img-size: var(--available-height, 2em);
    border: 1px solid #0002;
    box-sizing: border-box;
    height: var(--img-size);
    object-fit: cover;
    width: var(--img-size);
}

px-image-upload .px-thumbnail img:not([src]) {
    background-color: #0001;
}

px-image-upload .px-resolution-warning {
    align-items: center;
    display: flex;
    font-size: 0.75em;
    gap: 4px;
}

px-image-upload .px-resolution-warning::before {
    content: url('data:image/svg+xml,<svg width="24" height="23" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg"><line stroke-width="2" stroke="%23fff" x1="12" y1="3" x2="12" y2="18"></line><path d="M10.03 3.50618C10.886 2.02268 13.111 2.02268 13.967 3.50618L21.713 16.9238C22.543 18.3613 21.458 20.1246 19.744 20.1246H4.25401C2.53901 20.1246 1.45401 18.3613 2.28401 16.9238L10.03 3.50714V3.50618ZM12.997 16.2913C13.0012 16.1631 12.9786 16.0354 12.9303 15.9157C12.882 15.7961 12.8091 15.687 12.716 15.5948C12.6229 15.5027 12.5114 15.4295 12.3881 15.3794C12.2648 15.3294 12.1324 15.3036 11.9985 15.3036C11.8647 15.3036 11.7322 15.3294 11.6089 15.3794C11.4857 15.4295 11.3742 15.5027 11.281 15.5948C11.1879 15.687 11.115 15.7961 11.0667 15.9157C11.0185 16.0354 10.9958 16.1631 11 16.2913C11.0082 16.5398 11.117 16.7756 11.3034 16.9486C11.4897 17.1216 11.739 17.2184 11.9985 17.2184C12.258 17.2184 12.5073 17.1216 12.6936 16.9486C12.88 16.7756 12.9888 16.5398 12.997 16.2913ZM12.738 8.76551C12.7121 8.58502 12.6156 8.4207 12.4681 8.30577C12.3206 8.19085 12.1331 8.1339 11.9434 8.14644C11.7537 8.15897 11.5761 8.24007 11.4465 8.37332C11.3168 8.50657 11.2448 8.68203 11.245 8.86422L11.249 13.1777L11.256 13.2754C11.2819 13.4559 11.3784 13.6202 11.5259 13.7352C11.6734 13.8501 11.861 13.907 12.0506 13.8945C12.2403 13.882 12.4179 13.8009 12.5476 13.6676C12.6772 13.5344 12.7492 13.3589 12.749 13.1767L12.745 8.86231L12.738 8.76551Z" fill="%23ffc107"></path></svg>');
    display: block;
}

.px-image-upload-crop-modal-overlay {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
}

.px-image-upload-crop-modal-overlay px-image-adjust-tool {
    height: 100%;
    width: 100%;
}

@media (max-width: 576px) {
    .px-image-upload-crop-modal-overlay {
        padding: 8px;
    }
}