/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

:root {
    /* Colors */
    --blue-grey: #8492a6;
    --bright-sky-blue: #1fb6ff;
    --charcoal-grey: #373844;
    --neutral-grey-1: #404040;
    --neutral-grey-2: #747474;
    --neutral-grey-3: #999999;
    --neutral-grey-4: #d9d9d9;
    --neutral-grey-5: #e2e4e9;
    --neutral-grey-6: #f3f3f3;
    --neutral-grey-2-opacity-50: #74747480;
    --neutral-grey-2-opacity-15: #7474741a;
    --orange: #ff903f;
    --orangered: #ff5216;
    --light-red: #ff6b62;
    --pale-grey: #e5e9f2;
    --palest-grey: #f5f7fa;
    --seaweed: #13ce66;
    --sun-yellow: #ffc82c;
    --yellow: #ffcb39;
    --warm-pale-grey: #f8f7f7;
    --pixfizz-blue: #32c5ff;
    /* Semantic colors */
    --danger-color: var(--light-red);
    --brand-color: var(--pixfizz-blue);
    --brand-color-lighter-25: var(--brand-color);  /* for old browsers */
    --brand-color-lighter-25: hsl(from var(--pixfizz-blue) h s calc(l + 25));
    --icon-color: var(--neutral-grey-2);
    --icon-disabled-color: var(--neutral-grey-2-opacity-50);
    --icon-highlight-color: var(--charcoal-grey);
    --icon-background-highlight-color: var(--neutral-grey-5);
    --icon-action-color: var(--brand-color);
    --icon-danger-color: var(--danger-color);
    --icon-warning-color: var(--yellow);
    --layout-border-color: var(--neutral-grey-6);
    --editor-background-color: var(--warm-pale-grey);
    --editor-selection-color: var(--neutral-grey-1);
    --editor-editable-area-highlight-color: var(--neutral-grey-4);
    --mobile-editor-selection-color: var(--brand-color);
    --action-button-color: #fff;
    --action-button-background-color: var(--brand-color);
    --primary-button-color: var(--neutral-grey-6);
    --primary-button-background-color: var(--neutral-grey-2);
    --secondary-button-color: var(--neutral-grey-1);
    --secondary-button-background-color: var(--neutral-grey-5);
    --edit-control-color: var(--neutral-grey-2);
    --edit-control-background-color: var(--neutral-grey-6);
    --mobile-tab-color: var(--neutral-grey-3);
    --mobile-tab-highlight-color: var(--neutral-grey-2);
    /* Fonts */
    --standard-fonts: Satoshi, 'Open Sans', Arial, sans-serif;
    /* Sizing */
    --window-height: var(--detected-window-height, 100vh);
    --editor-height: var(--window-height);
    --sidebar-height: calc(var(--editor-height) - var(--header-height-desktop));
    --gallery-sidebar-width: 276px;
    --subheader-height-mobile: 0px;
    --header-height-desktop: 60px;
    --header-height-mobile: 60px;
    --toolbar-height-mobile: 60px;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(./editor/fonts/opensans.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(./editor/fonts/opensans-bold.woff) format('woff');
}

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 400;
    src: url(./editor/fonts/Satoshi-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Satoshi';
    font-style: normal;
    font-weight: 700;
    src: url(./editor/fonts/Satoshi-Bold.woff2) format('woff2');
}

/*
   We use this as the fallback font for text elements in the editor so that text elements display the missing glyph
   character instead of falling back to the default system font for characters that the currently selected font
   does not support.
   Font file taken from: https://github.com/adobe-fonts/adobe-notdef
*/
@font-face {
    font-family: 'Adobe NotDef';
    src: url(./editor/fonts/AND-Regular.otf) format('opentype');
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

html {
    height: var(--window-height);
    position: fixed;
    overflow: hidden;
    overflow-scroll: none;
    touch-action: none;
}

body {
    color: var(--charcoal-grey);
    font-family: var(--standard-fonts);
    font-size: 14px;
    height: var(--window-height);
    touch-action: none;
    width: 100vw;
}

input,
textarea,
select,
optgroup,
button,
label.px-file-upload-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    align-items: center;
    background: var(--edit-control-background-color);
    box-sizing: border-box;
    border: 1px solid var(--edit-control-background-color);
    border-radius: 8px;
    color: var(--edit-control-color);
    display: inline-flex;
    font-family: var(--standard-fonts);
    font-size: 12px;
    justify-content: center;
    line-height: 18px;
    padding: 2px 10px;
}

input,
textarea {
    background: transparent;
    border-color: var(--neutral-grey-4);
    border-radius: 4px;
}

.px-mobile-mode button {
    display: inline-block;
}

button,
label.px-file-upload-button {
    color: var(--neutral-grey-2);
    cursor: pointer;
    padding: 0 10px;
    outline: none !important;
}

button:active {
    background: var(--neutral-grey-2);
    border-color: var(--neutral-grey-2);
    color: #fff;
}

button:disabled,
label.px-file-upload-button[disabled] {
    cursor: not-allowed;
}

label.px-file-upload-button[disabled] {
    pointer-events: none;
}

button.px-large,
label.px-file-upload-button.px-large {
    background: #fff;
    font-size: 16px;
    padding: 12px 18px;
}

.px-mobile-mode button.px-large,
.px-mobile-mode label.px-file-upload-button.px-large {
    font-size: 14px;
    border-radius: 14px;
}

button.px-small,
label.px-file-upload-button.px-small {
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    padding: 6px 16px;
}

button.px-large.px-strong:hover,
label.px-file-upload-button.px-large:hover {
    opacity: 0.5;
}

button.px-large.px-primary-color,
label.px-file-upload-button.px-large.px-primary-color,
button.px-small.px-primary-color,
label.px-file-upload-button.px-small.px-primary-color {
    border: 1px solid var(--primary-button-background-color);
    color: var(--primary-button-background-color);
}

button.px-large.px-primary-color.px-strong,
button.px-large.px-primary-color:hover,
label.px-file-upload-button.px-large.px-primary-color.px-strong,
label.px-file-upload-button.px-large.px-primary-color:hover,
button.px-small.px-primary-color.px-strong,
button.px-small.px-primary-color:hover,
label.px-file-upload-button.px-small.px-primary-color.px-strong,
label.px-file-upload-button.px-small.px-primary-color:hover {
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-color);
}

button.px-large.px-secondary-color,
button.px-small.px-secondary-color,
label.px-file-upload-button.px-large.px-secondary-color,
label.px-file-upload-button.px-small.px-secondary-color {
    border-color: var(--secondary-button-background-color);
    color: var(--secondary-button-color);
}

button.px-large.px-secondary-color.px-strong,
button.px-large.px-secondary-color:hover,
label.px-file-upload-button.px-large.px-secondary-color.px-strong,
label.px-file-upload-button.px-large.px-secondary-color:hover,
button.px-small.px-secondary-color.px-strong,
button.px-small.px-secondary-color:hover,
label.px-file-upload-button.px-small.px-secondary-color.px-strong,
label.px-file-upload-button.px-small.px-secondary-color:hover {
    background-color: var(--secondary-button-background-color);
    color: var(--secondary-button-color);
}

button.px-large.px-warning-color,
button.px-small.px-warning-color {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

button.px-large.px-warning-color.px-strong,
button.px-large.px-warning-color:hover,
button.px-small.px-warning-color.px-strong,
button.px-small.px-warning-color:hover {
    background-color: var(--danger-color);
    color: #fff;
}

button.px-large.px-secondary-color:disabled,
button.px-large.px-primary-color:disabled,
button.px-large.px-warning-color:disabled,
label.px-file-upload-button.px-large.px-secondary-color[disabled],
label.px-file-upload-button.px-large.px-primary-color[disabled],
label.px-file-upload-button.px-large.px-warning-color[disabled] {
    background-color: var(--pale-grey);
    border-color: var(--pale-grey);
    color: #fff;
    opacity: 1;
}

button.px-small.px-secondary-color:disabled,
button.px-small.px-primary-color:disabled,
button.px-small.px-warning-color:disabled {
    background-color: #fff;
    border-color: var(--pale-grey);
    color: var(--pale-grey);
}

#px-editor-container {
    height: var(--editor-height);
}

.px-editor {
    background-color: var(--editor-background-color);
    display: grid;
    grid-template-areas: "header header header" "gallery-sidebar main-area inspector-sidebar";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--header-height-desktop) 1fr;
    height: var(--editor-height);
    min-height: 0;
    min-width: 0;
    overflow: auto;
    width: 100vw;
}

.px-editor.px-mobile-mode {
    background-color: var(--editor-background-color);
    grid-template-areas: "main-area";
    grid-template-columns: auto;
    grid-template-rows: auto;
    overflow: hidden;
    position: fixed;
}

.px-editor.px-mobile-mode:has(.px-mobile-header > .px-subheader) {
    --subheader-height-mobile: 42px;
}

.px-editor .px-main-area {
    display: grid;
    grid-area: main-area;
    grid-template-areas: "page-display" "page-navigation";
    grid-template-columns: 100%;
    grid-template-rows: 1fr 148px;
    min-height: 0;
    min-width: 0;
    position: relative;
    transition: grid-template-rows 0.2s;
}

.px-editor .px-main-area[data-has-page-navigation="false"] {
    grid-template-areas: "page-display";
    grid-template-rows: 1fr;
}

/* This targets an empty toolbar. */
.px-editor.px-mobile-mode:not(:has(.px-mobile-toolbar .px-tab-panel > *)) {
    --toolbar-height-mobile: 0px;
}

.px-editor.px-mobile-mode .px-main-area {
    --page-area-height-mobile: calc(var(--editor-height) - var(--header-height-mobile) - var(--subheader-height-mobile) - var(--toolbar-height-mobile));
    grid-template-areas: "header" "pages" "mobile-toolbar";
    grid-template-rows: calc(var(--header-height-mobile) + var(--subheader-height-mobile)) var(--page-area-height-mobile) var(--toolbar-height-mobile);
    transition: grid-template-rows 0.2s;
}

.px-editor .px-main-area .px-header {
    grid-area: header;
}

.px-editor .px-main-area .px-page-display {
    grid-area: page-display;
}

.px-editor .px-main-area .px-page-navigation {
    grid-area: page-navigation;
    min-width: 0;
}

.px-editor.px-mobile-mode .px-pages,
.px-editor.px-mobile-mode .px-cut-prints {
    grid-area: pages;
}

.px-editor.px-mobile-mode .px-mobile-toolbar {
    grid-area: mobile-toolbar;
    z-index: 3;
}

.px-editor .px-mobile-page-list > *,
.px-editor .px-mobile-page-display > *,
.px-editor .px-mobile-toolbar > * {
    transition: opacity 0.1s;
}

.px-editor.px-mobile-modep[data-is-animating="true"] {
    pointer-events: none;
}
.px-editor.px-mobile-mode[data-is-animating="true"] .px-mobile-page-list > *,
.px-editor.px-mobile-mode[data-is-animating="true"] .px-mobile-page-display > *,
.px-editor.px-mobile-mode[data-is-animating="true"] .px-mobile-toolbar > * {
    opacity: 0;
}

.px-editor .px-sidebar {
    background-color: #fff;
    height: var(--sidebar-height);
    z-index: 2;
}

.px-editor .px-sidebar.px-inspector-sidebar {
    border-left: 2px solid var(--layout-border-color);
    grid-area: inspector-sidebar;
}

.px-editor .px-sidebar.px-gallery-sidebar {
    border-right: 2px solid var(--layout-border-color);
    box-sizing: border-box;
    display: flex;
    grid-area: gallery-sidebar;
    height: 100%;
    overflow: auto;
    width: var(--gallery-sidebar-width);
}

.px-editor .px-sidebar.px-gallery-sidebar .px-tab-panel-accordion-wrapper {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.px-editor .px-sidebar .px-tab-panel {
    transition: width 0.2s;
}

.px-editor .px-sidebar .px-tab-panel[data-expanded="false"] {
    width: 0;
    transition: width 0.4s;
}
.px-editor .px-sidebar .px-tab-panel[data-expanded="true"] {
    width: 265px;
}

.px-help-modal iframe {
    border: none;
    box-sizing: border-box;
    width: 60vw;
    height: 60vh;
}

.px-tooltip {
    background: #000a;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    padding: 4px 6px;
    pointer-events: none;
    position: absolute;
    z-index: 9999;
    text-align: center;
}

.px-advanced-edit-panel .px-edit-controls .px-element-edit-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.px-advanced-edit-panel .px-edit-controls .px-element-edit-flags .px-toggle-button {
    line-height: 14px;
    margin-top: 8px;
    width: calc(50% - 4px);
}

.px-advanced-edit-panel .px-edit-controls .px-typography-settings .px-setting,
.px-advanced-edit-panel .px-edit-controls .px-padding-settings .px-setting {
    align-items: center;
    display: flex;
    font-size: 12px;
    margin: 12px 0;
}

.px-advanced-edit-panel .px-edit-controls .px-typography-settings .px-setting .px-prop-name,
.px-advanced-edit-panel .px-edit-controls .px-padding-settings .px-setting .px-prop-name {
    flex-grow: 1;
}

.px-advanced-edit-panel .px-edit-controls .px-typography-settings .px-setting input,
.px-advanced-edit-panel .px-edit-controls .px-padding-settings .px-setting input {
    flex-grow: 0;
    flex-shrink: 0;
    width: 4em;
}

.px-advanced-edit-panel .px-edit-controls .px-text-path {
    box-sizing: border-box;
    width: 100%;
    height: 8em;
}

.px-advanced-edit-panel .px-edit-controls .px-element-name {
    box-sizing: border-box;
    padding: 6px 10px;
    width: 100%;
}

.px-edit-panel .px-edit-controls .px-element-coords .px-coordinate-input {
    align-items: center;
    display: flex;
    font-size: 12px;
    margin: 12px 0;
}

.px-edit-panel .px-edit-controls .px-element-coords .px-coordinate-input .px-prop-name {
    flex-grow: 1;
}

.px-edit-panel .px-edit-controls .px-element-coords .px-coordinate-input input {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 6px;
    width: 80px;
}

.px-edit-panel .px-edit-controls .px-element-coords .px-coordinate-input .px-prop-units {
    flex-grow: 0;
    flex-shrink: 0;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-inline-page-masks {
    --panel-padding: 14px;
    font-size: 0;  /* so that there is no space between inline items */
    padding: var(--panel-padding);
}

.px-tab-content-panel.px-accordion-content .px-inline-page-mask-panel .px-inline-page-masks {
    --panel-padding: 0;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image {
    --gap: 8px;
    align-items: center;
    aspect-ratio: 6/5;
    background-color: var(--neutral-grey-6);
    border: 2px solid #fff;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
    position: relative;
    vertical-align: top;
    width: calc((100% - var(--gap)) / 2);
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image:nth-child(2n) {
    margin-right: 0;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image[data-selected="true"] {
    border-color: var(--brand-color);
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image .px-thumbnail {
    background: var(--neutral-grey-4);
    display: flex;
    height: 100%;
    position: relative;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image[data-selected="true"] .px-thumbnail::after {
    background: var(--brand-color);
    bottom: 0;
    box-sizing: border-box;
    content: '';
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: 0;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image .px-thumbnail img {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.px-tab-content-panel.px-inline-page-mask-panel .px-image .px-tick-mark {
    color: var(--brand-color);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-view-settings-panel button {
    margin-bottom: 8px;
    width: 100%;
}

.px-view-settings-panel button:first-child {
    margin-top: 16px;
}

.px-view-settings-panel .px-grid-size-inputs {
    align-items: center;
    display: flex;
    justify-content: center;
}

.px-view-settings-panel .px-grid-size-inputs input {
    max-width: 10ex;
    min-width: 0;
    padding-right: 0;
    text-align: right;
}

.px-view-settings-panel .px-grid-size-inputs span {
    margin: 0 10px;
}

.px-mobile-page-list {
    grid-area: pages;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    position: relative;
}

.px-mobile-page-list[data-is-scrollable="false"] {
    overflow: hidden;
}

.px-mobile-page-list .px-page-sets {
    will-change: scroll-position;
}

.px-mobile-page-list .px-page-sets .px-page-set {
    padding: 18px 36px;
    position: relative;
    text-align: center;
}

.px-rtl-mode .px-mobile-page-list .px-page-sets .px-page-set {
    direction: rtl;
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-thumbs {
    display: inline-block;
    font-size: 0;
    position: relative;
    white-space: nowrap;
}

.px-mobile-page-list .px-page-sets .px-page-set[data-selected="true"] .px-page-thumbs::after {
    border: 4px solid var(--mobile-editor-selection-color);
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-thumbs .px-page-wrapper {
    /* cursor: pointer is required for click events to work on iOS:
     https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile */
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-right: 2px;
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-thumbs .px-page-wrapper:last-child {
    margin-right: 0;
}
.px-mobile-page-list .px-page-sets .px-page-set .px-page-thumbs .px-page-wrapper .px-page {
    filter: drop-shadow(0 0 3px rgba(183,186,193,0.3));
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-thumbs .px-page-wrapper[data-selected="true"]::after {
    border: 4px solid var(--mobile-editor-selection-color);
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-captions {
    display: flex;
    font-size: 10px;
    line-height: 28px;
    height: 28px;
    margin: 0 auto;
}

.px-mobile-page-list .px-page-sets .px-page-set .px-page-captions .px-page-caption {
    flex-grow: 1;
    text-align: center;
}

.px-mobile-page-list .px-page-sets .px-page-set.px-add-set button {
    background: none;
    border: 2px dashed var(--icon-action-color);
    border-radius: 4px;
    color: var(--icon-action-color);
    height: 25vw;
    width: 25vw;
}

.px-mobile-page-list .px-page-sets .px-page-set.px-add-set .px-page-captions {
    color: var(--icon-action-color);
    justify-content: center;
    margin-top: 3px;
}

.px-mobile-sidebar-panel-wrapper {
    background: #00000000;
    bottom: 0;
    left: -100vw;
    position: fixed;
    top: 0;
    transition: background 0.2s, left 0.2s, width 0.2s step-end;
    width: 100vw;
    z-index: 4;
}

[data-sidebar-active="true"] .px-mobile-sidebar-panel-wrapper {
    background: #00000044;
    left: 0;
    transition: background 0.2s, left 0.2s, width 0.2s step-start;
    width: 200vw;
}

.px-mobile-sidebar-panel {
    background: white;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    height: 100%;
    max-width: 330px;
    width: 100%;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-header {
    align-items: center;
    background: var(--neutral-grey-6);
    display: flex;
    flex-shrink: 0;
    height: 60px;
    justify-content: space-between;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-header img {
    display: block;
    margin-left: 32px;
    max-height: 36px;
    max-width: 33%;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-header button {
    aspect-ratio: 1;
    background: none;
    border: none;
    display: flex;
    height: 48px;
    padding: 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-header button svg {
    color: var(--neutral-grey-3);
    height: 16px;
    width: 16px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-product-info {
    flex-shrink: 0;
    padding: 24px 36px 8px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-product-info .px-product-name {
    font-size: 14px;
    font-weight: bold;
    margin: 4px 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-product-info .px-page-count {
    align-items: center;
    display: flex;
    font-size: 10px;
    height: 11px;
    justify-content: left;
    margin: 4px 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-product-info .px-page-count .px-page-count-text {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-product-info .px-page-count .px-separator {
    background: var(--neutral-grey-2);
    height: 66%;
    margin: 0 8px;
    opacity: 0.5;
    width: 1px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-cart-button-wrapper {
    padding: 2px 36px 12px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-cart-button-wrapper button {
    align-items: center;
    background: var(--icon-action-color);
    border: none;
    border-radius: 18px;
    color: #fff;
    display: flex;
    gap: 6px;
    height: 36px;
    justify-content: center;
    padding: 0 18px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-cart-button-wrapper button .px-icon {
    display: flex;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-cart-button-wrapper button .px-icon svg {
    height: 20px;
    width: 20px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul {
    flex-grow: 1;
    list-style: none;
    margin: 0;
    padding: 0 36px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul li {
    margin: 16px 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body .px-dropdown ul li {
    margin: 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul li button {
    align-items: center;
    background: none;
    border: none;
    display: flex;
    font-size: 14px;
    padding: 8px 8px 8px 0;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul li button[disabled] {
    opacity: 0.5;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul li button .px-icon {
    display: flex;
    margin-right: 14px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body ul li button .px-icon svg {
    display: block;
    height: 18px;
    width: 18px;
}

.px-mobile-sidebar-panel .px-mobile-sidebar-body p.px-mobile-notice {
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1.5;
    padding: 36px;
    text-align: center;
}

.px-mobile-sidebar-body .px-tab-content-panel {
    box-sizing: border-box;
    flex-grow: 1;
    height: auto;
    min-height: 100%;
}

.px-mobile-sidebar-body .px-tab-content-panel .px-panel-top-section {
    display: none;
}

.px-mobile-sidebar-body .px-options-panel {
    padding: 16px;
}

.px-mobile-toolbar {
    --manual-panel-offset: 0px;
    --tab-panel-height: 0px;
    --tab-panel-min-height: 0px;
    --tab-panel-max-height: calc(100dvh - var(--header-height-mobile));
    --tabs-height: var(--toolbar-height-mobile);
    box-sizing: border-box;
    position: relative;
    top: 0;
    transition: top 0.2s;

    @starting-style {
        top: var(--toolbar-height-mobile);
    }
}

.px-mobile-toolbar::after {
    background-color: #fff;
    content: '';
    height: 100dvh;
    position: absolute;
    width: 100%;
}

.px-mobile-toolbar[data-manual-drag="true"] {
    transition: none;
}

.px-mobile-toolbar:not(:has(.px-tab-panel > *)) {
    /* This makes animations starting from no toolbar smooth. */
    top: var(--toolbar-height-mobile);
}

.px-mobile-toolbar:has(.px-tab-panel > *) {
    --tab-panel-height: var(--tabs-height);
    top: clamp(calc(-100dvh + var(--header-height-mobile) + var(--toolbar-height-mobile)),
               calc(-1 * var(--tab-panel-height) + var(--toolbar-height-mobile) + var(--manual-panel-offset)),
               calc(-1 * var(--tab-panel-min-height) + var(--toolbar-height-mobile)));
}

.px-mobile-toolbar[data-active-tab="page->layout"],
.px-mobile-toolbar[data-active-tab="image->cropping"],
.px-mobile-toolbar[data-active-tab="image->mask"],
.px-mobile-toolbar[data-active-tab="text->content"],
.px-mobile-toolbar[data-active-tab="text->alignment"],
.px-mobile-toolbar[data-active-tab="text->font"],
.px-mobile-toolbar[data-active-tab="text->fontsize"] {
    --tab-panel-height: 140px;
}

.px-mobile-toolbar[data-active-tab="project->gallery"] {
    --tab-panel-height: min(50dvh, 180px);
}

.px-mobile-toolbar[data-active-tab="project->gallery"]:has(.px-images) {
    --tab-panel-height: calc(100dvh - var(--header-height-mobile));
}

.px-mobile-toolbar[data-active-tab="project->options"] {
    --tab-panel-height: min(50dvh, 300px);
    --tab-panel-min-height: 120px;
}

.px-mobile-toolbar[data-active-tab="image->source"] {
    --tab-panel-height: min(50dvh, 180px);
}

.px-mobile-toolbar[data-active-tab="image->source"]:has(.px-images) {
    --tab-panel-height: min(50dvh, 380px);
    --tab-panel-min-height: 140px;
}

.px-mobile-toolbar[data-active-tab="image->cropping"] {
    --tab-panel-min-height: 112px;
}

.px-mobile-toolbar[data-active-tab="project->cut-print-quantities"] {
    --tab-panel-height: 160px;
}

.px-mobile-toolbar .px-tabs {
    align-items: center;
    box-sizing: border-box;
    color: var(--mobile-tab-color);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 16px;
    height: var(--tabs-height);
    justify-content: center;
    padding: 0 16px;
    text-align: center;
}

.px-mobile-toolbar .px-tabs .px-tab {
    align-items: center;
    background: transparent;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: var(--mobile-tab-color);
    font-size: 8px;
    height: 32px;
}

.px-mobile-toolbar .px-tabs .px-tab[data-selected="true"] {
    color: var(--mobile-tab-highlight-color);
}

.px-mobile-toolbar .px-tabs .px-tab .px-icon {
    height: 20px;
}

.px-mobile-toolbar .px-tabs .px-tab .px-icon svg {
    display: block;
    height: 100%;
}

.px-mobile-toolbar .px-tabs .px-tab.px-danger {
    color: var(--icon-danger-color);
}

.px-mobile-toolbar .px-tabs .px-tab .px-label {
    line-height: 12px;
}

.px-mobile-toolbar .px-tab-panel {
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-sizing: border-box;
    display: flex;
    filter: drop-shadow(0 0 2px #0001);
    flex-direction: column;
    height: clamp(var(--tab-panel-min-height),
                  calc(var(--tab-panel-height) - var(--manual-panel-offset)),
                  var(--tab-panel-max-height));
    overflow: hidden;
    position: relative;
}

.px-mobile-toolbar[data-active-tab="project->gallery"]:not(:has(.px-tabs)):has(.px-images) .px-tab-panel {
    border-radius: 0;
    filter: none;
}

.px-mobile-toolbar .px-tab-panel .px-drag-handle {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 0;
    touch-action: none;
    transform: translateX(-50%);
    width: 36px;
}

.px-mobile-toolbar .px-tab-panel .px-drag-handle::after {
    background: var(--neutral-grey-4);
    border-radius: 4px;
    content: '';
    display: block;
    height: 4px;
    width: 100%;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}


.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-actions {
    align-items: end;
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    height: 58px;
    justify-content: center;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-actions button {
    background-color: var(--brand-color-lighter-25);
    border: none;
    border-radius: 24px;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    gap: 8px;
    height: 42px;
    padding: 0 24px;
    width: 100%;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-actions button:disabled {
    opacity: 0.5;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-actions button.px-done {
    background-color: var(--brand-color);
    color: #fff;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-actions button svg {
    height: 20px;
    width: 20px;
}

.px-page-display {
    display: grid;
    grid-template-areas: "toolbar toolbar toolbar" "prev-arrow current-set next-arrow";
    grid-template-columns: 30px 1fr 30px;
    grid-template-rows: 42px 1fr;
    min-height: 0;
    min-width: 0;
    position: relative;  /* required for resize detector to work */
}

.px-page-display .px-page-toolbar {
    align-items: center;
    display: flex;
    grid-area: toolbar;
    justify-content: space-between;
    padding: 6px 16px 0;
}

.px-page-display .px-page-toolbar .px-left,
.px-page-display .px-page-toolbar .px-right {
    align-items: center;
    display: flex;
}

.px-page-display .px-page-toolbar .px-zoom-slider {
    align-items: center;
    display: flex;
    width: 100px;
}

.px-page-display .px-page-toolbar .px-zoom-slider .px-slider {
    flex-grow: 1;
    margin: 0 4px;
}

.px-page-display .px-page-toolbar .px-zoom-slider .px-slider .px-handle {
    background-color: var(--neutral-grey-3);
    border-radius: 2px;
}

.px-page-display .px-page-toolbar .px-zoom-slider svg {
    color: var(--icon-color);
}

.px-page-display .px-page-toolbar button:not(.px-exit-button) {
    background: none;
    border: none;
    box-sizing: border-box;
    color: var(--icon-color);
    height: 100%;
    padding: 2px 4px;
    width: 40px;
}

.px-page-display .px-page-toolbar button.px-exit-button {
    position: absolute;
    right: 16px;
}

.px-page-display .px-page-toolbar button[disabled] {
    color: var(--icon-disabled-color);
}

.px-page-display .px-page-toolbar .px-spacer {
    width: 8px;
}

.px-rtl-mode .px-page-display {
    grid-template-areas: "toolbar toolbar toolbar" "next-arrow current-set prev-arrow";
}

.px-page-display .px-page-prev,
.px-page-display .px-page-next {
    align-self: center;
    display: grid;  /* the only reason we need this is for vertical centering */
}

.px-page-display .px-page-prev {
    grid-area: prev-arrow;
}

.px-page-display .px-page-next {
    grid-area: next-arrow;
}

.px-page-display .px-page-prev[data-enabled="false"],
.px-page-display .px-page-next[data-enabled="false"] {
    visibility: hidden;
}

.px-page-display .px-page-prev button {
    transform: rotate(180deg);
}

.px-page-display .px-page-prev button,
.px-page-display .px-page-next button {
    background: none;
    border: none;
    font-size: 0;
    height: 28px;
    padding: 0;
    width: 100%;
}

.px-rtl-mode .px-page-display .px-page-prev button {
    transform: none;
}

.px-rtl-mode .px-page-display .px-page-next button {
    transform: rotate(180deg);
}

.px-page-display .px-current-set {
    display: grid;
    grid-area: current-set;
    grid-template-areas: "pages" "page-titles";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 60px;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.px-page-display .px-current-set .px-pages {
    display: grid;
    grid-area: pages;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    position: relative;
}

.px-page-display .px-current-set.px-current-set-controls .px-pages {
    overflow: visible;
}

.px-rtl-mode .px-page-display .px-current-set .px-pages {
    direction: rtl;
}

.px-page-display .px-current-set .px-pages .px-pages-scrollable-area {
    align-self: center;
    display: flex;
    gap: 4px;
    justify-self: center;
    scroll-behavior: smooth;
}

.px-page-display .px-current-set .px-pages .px-page-display-page {
    align-items: center;
    align-self: center;
    display: flex;
    justify-content: center;
    justify-self: center;
}

.px-page-display .px-current-set .px-pages .px-page-display-page .px-page {
    display: block;
    filter: drop-shadow(0 0 4px var(--neutral-grey-2-opacity-15));
    flex-grow: 0;
    flex-shrink: 0;
    /* Workaround for performance issues on Safari, see:
       https://stackoverflow.com/questions/74475815/swapping-css-drop-shadow-filters-in-safari
    */
    transform: translateZ(0);
}

.px-page-display .px-current-set .px-pages[data-highlight-selected-page="true"] .px-page-display-page[data-selected="true"] .px-page {
    filter: drop-shadow(0 0 4px var(--brand-color));
}

/* Disable the drop-shadow filter on inline/embedded pages */
.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-page {
    filter: none;
}

.px-page-display .px-current-set.px-current-set-controls .px-pages .px-page-display-page .px-page {
    filter: none;
    overflow: visible;
}

@keyframes px-image-loading-indicator{
    from {
        opacity: 0.75;
    }

    to {
        opacity: 0.25;
    }
}

.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-1,
.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-2,
.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-3 {
    animation-duration: 3s;
    animation-name: px-image-loading-indicator;
    animation-iteration-count: infinite;
}

.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-1 {
    animation-delay: 0s;
}

.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-2 {
    animation-delay: 1s;
}

.px-page-display .px-current-set .px-pages .px-page-display-page .px-page .px-image-loading-indicator .px-circ-3 {
    animation-delay: 2s;
}

.px-page-display .px-current-set .px-page-titles {
    display: flex;
    grid-area: page-titles;
    justify-content: center;
    height: 60px;
    line-height: 32px;
    min-width: 0;
}

.px-rtl-mode .px-page-display .px-current-set .px-page-titles {
    direction: rtl;
}

.px-page-display .px-current-set .px-page-titles .px-caption {
    flex-grow: 1;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-page-navigation {
    display: flex;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
}

.px-rtl-mode .px-page-navigation {
    padding-right: 32px;
}

.px-page-navigation .px-organize-pages-button {
    background: #fff;
    border: none;
    border-radius: 12px 12px 0 0;
    color: var(--neutral-grey-2);
    height: 32px;
    padding: 8px 16px 4px;
    position: absolute;
    right: -2px;
    top: -32px;
}

.px-page-navigation .px-organize-pages-button span {
    font-size: 14px;
    margin: 0 10px 0 8px;
}

.px-page-navigation .px-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 16px;
}

.px-page-navigation .px-actions button {
    background: var(--neutral-grey-6);
    border: none;
    border-radius: 4px;
    color: var(--icon-color);
    height: 32px;
    padding: 6px;
    width: 32px;
}

.px-page-navigation .px-actions button:hover:not([disabled]) {
    color: #fff;
    background: var(--icon-color);
}

.px-page-navigation .px-actions button[disabled] {
    color: var(--icon-disabled-color);
}

.px-page-navigation .px-page-sets {
    align-items: center;
    display: flex;
    flex-grow: 1;
    overflow-x: auto;
    padding: 12px 16px 0 16px;
    position: relative;
    white-space: nowrap;
}

.px-rtl-mode .px-page-navigation .px-page-sets {
    direction: rtl;
}

.px-page-navigation .px-page-sets .px-page-set {
    /* Using transparent border instead of margin, which does not work with flexbox. */
    border-right: 12px solid transparent;
    font-size: 0;
}

.px-rtl-mode .px-page-navigation .px-page-sets .px-page-set {
    border-left: 12px solid transparent;
    border-right: none;
}

.px-page-navigation .px-page-sets .px-page-set .px-page-thumbs {
    background-color: var(--palest-grey);  /* background is only visible on pages that use masking */
    border: 2px solid var(--pale-grey);
    cursor: pointer;
    display: inline-block;
    font-size: 0;  /* to remove extra whitespace between the images and borders */
}

.px-page-navigation .px-page-sets .px-page-set[data-selected='true'] .px-page-thumbs {
    border-color: var(--editor-selection-color);
}

.px-page-navigation .px-page-sets .px-page-set .px-page-captions {
    display: flex;
    font-size: 10px;
    line-height: 18px;
    height: 18px;
}

.px-page-navigation .px-page-sets .px-page-set .px-page-captions .px-page-caption {
    flex-grow: 1;
    text-align: center;
}

.px-palette-color-picker .px-color {
    border: 1px solid var(--pale-grey);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    width: 40px;
}

.px-palette-color-picker .px-color[data-selected="true"] {
    outline: 1px solid var(--blue-grey);
}

.px-tab-content-panel.px-page-mask-panel .px-page-masks {
    --panel-padding: 14px;
    font-size: 0;  /* so that there is no space between inline items */
    padding: var(--panel-padding);
}

.px-tab-content-panel.px-accordion-content .px-page-mask-panel .px-page-masks {
    --panel-padding: 0;
}

.px-tab-content-panel.px-page-mask-panel .px-image {
    --gap: 8px;
    align-items: center;
    aspect-ratio: 6/5;
    background-color: var(--neutral-grey-6);
    border: 2px solid #fff;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
    position: relative;
    vertical-align: top;
    width: calc((100% - var(--gap)) / 2);
}

.px-tab-content-panel.px-page-mask-panel .px-image:nth-child(2n) {
    margin-right: 0;
}

.px-tab-content-panel.px-page-mask-panel .px-image[data-selected="true"] {
    border-color: var(--brand-color);
}

.px-tab-content-panel.px-page-mask-panel .px-image .px-thumbnail {
    background: var(--neutral-grey-4);
    display: flex;
    height: 100%;
    position: relative;
}

.px-tab-content-panel.px-page-mask-panel .px-image[data-selected="true"] .px-thumbnail::after {
    background: var(--brand-color);
    bottom: 0;
    box-sizing: border-box;
    content: '';
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: 0;
}

.px-tab-content-panel.px-page-mask-panel .px-image .px-thumbnail img {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.px-tab-content-panel.px-page-mask-panel .px-image .px-tick-mark {
    color: var(--brand-color);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-modal.px-upload-project-images-modal .px-ok::after {
    display: none;
}

.px-upload-project-images-modal .px-modal-panel .px-modal-content .px-upload-progress {
    background-color: var(--pale-grey);
    border-radius: 6px;
    display: inline-block;
    height: 8px;
    margin: 8px 0 0;
    width: 250px;
}

.px-upload-project-images-modal .px-modal-panel .px-modal-content .px-upload-progress .px-upload-progress-bar {
    background-color: var(--brand-color);
    border-radius: 6px;
    height: 100%;
}

.px-upload-project-images-modal .px-modal-panel .px-modal-content .px-upload-progress-details {
    color: var(--blue-grey);
    font-size: 11px;
    line-height: 14px;
    margin: 0;
}

.px-gallery-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

.px-gallery-panel .px-gallery-actions {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    padding-bottom: 12px;
}

.px-gallery-panel .px-gallery-actions .px-action-buttons button {
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--icon-color);
    display: flex;
    padding: 4px 0;
}

.px-gallery-panel .px-gallery-actions .px-action-buttons button:not(:disabled):hover {
    color: var(--icon-highlight-color);
}

.px-gallery-panel .px-gallery-actions .px-action-buttons button svg {
    margin-right: 4px;
}

.px-gallery-panel .px-gallery-actions button.px-large,
.px-gallery-panel .px-gallery-actions .px-file-upload-button.px-large {
    box-sizing: border-box;
    display: block;
    margin-bottom: 14px;
    text-align: center;
    width: 100%;
}

.px-gallery-panel .px-gallery-actions button.px-small {
    margin-bottom: 10px;
}

.px-gallery-panel .px-gallery-actions .px-gallery-size {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    text-align: right;
}

.px-gallery-panel .px-gallery-actions .px-gallery-size button {
    background-color: transparent;
    border: none;
    color: var(--icon-color);
    padding: 5px;
}

.px-gallery-panel .px-gallery-actions .px-gallery-size button[data-selected="true"] {
    color: var(--icon-highlight-color);
}

.px-gallery-panel .px-gallery-actions .px-gallery-size button svg {
    scale: 0.8;
}

.px-gallery-panel .px-back-action {
    margin-top: -4px;
    padding-bottom: 18px;
}

.px-gallery-panel .px-back-action button {
    border-radius: 18px;
    height: 32px;
    padding: 0 12px;
}

.px-gallery-panel .px-back-action button:not(:disabled):hover {
    background-color: var(--icon-color);
    color: #fff;
}

.px-gallery-panel .px-back-action button svg {
    margin-right: 8px;
}

.px-gallery-panel .px-no-items-notice {
    color: var(--neutral-grey-1);
    text-align: center;
    margin-top: 60px;
}

.px-gallery-panel .px-gallery-items {
    flex-grow: 0;
    flex-shrink: 1;
    font-size: 0;  /* to remove any extra whitespace due to using inline positioning */
    overflow: auto;
}

.px-gallery-panel .px-gallery-items .px-gallery-item {
    --caption-height: 24px;
    --gallery-item-gap: 8px;
    align-items: center;
    aspect-ratio: 1;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-size: 12px;
    justify-content: center;
    margin-bottom: var(--gallery-item-gap);
    overflow: hidden;
    position: relative;
    vertical-align: top;
    width: 100%;
}

.px-gallery-panel .px-gallery-items[data-item-size="medium"] .px-gallery-item {
    --caption-height: 18px;
    font-size: 10px;
    margin-right: var(--gallery-item-gap);
    width: calc((100% - var(--gallery-item-gap)) / 2);
}

.px-gallery-panel .px-gallery-items[data-item-size="medium"] .px-gallery-item:nth-child(2n) {
    margin-right: 0;
}

.px-gallery-panel .px-gallery-items[data-item-size="small"] .px-gallery-item {
    --caption-height: 16px;
    font-size: 10px;
    margin-right: var(--gallery-item-gap);
    width: calc((100% - 2 * var(--gallery-item-gap)) / 3);
}

.px-gallery-panel .px-gallery-items[data-item-size="small"] .px-gallery-item:nth-child(3n) {
    margin-right: 0;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-thumbnail {
    align-items: center;
    background-color: var(--neutral-grey-6);
    border: 1px solid var(--neutral-grey-4);
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    height: calc(100% - var(--caption-height));
    justify-content: center;
    position: relative;
    width: 100%;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-caption {
    box-sizing: border-box;
    color: var(--neutral-grey-2);
    flex-shrink: 0;
    flex-grow: 0;
    height: var(--caption-height);
    line-height: var(--caption-height);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-thumbnail img {
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
}

.px-gallery-panel .px-gallery-items .px-gallery-item.px-gallery .px-thumbnail svg {
    color: var(--icon-color);
    padding: 4% 12%;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-tick-mark {
    color: var(--brand-color);
    position: absolute;
    top: 5px;
    right: 5px;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-remove {
    background: #fffd;
    bottom: calc(var(--caption-height) + 5px);
    color: var(--danger-color);
    display: none;
    left: 5px;
    padding: 2px;
    position: absolute;
}

.px-gallery-panel .px-gallery-items .px-gallery-item:hover .px-remove {
    display: flex;
}

.px-gallery-panel .px-gallery-items .px-gallery-item .px-remove svg {
    height: 20px;
}

.px-gallery-panel .px-load-more {
    margin: 24px auto;
}

.px-gallery-panel .px-spinner {
    padding: 8px;
    margin: auto;
}

.px-gallery-panel .px-gallery-item .px-image-usage {
    align-items: center;
    background-color: rgba(37, 38, 44, 0.8);
    bottom: var(--caption-height);
    color: #fff;
    display: flex;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
}

.px-gallery-panel .px-gallery-item:hover .px-image-usage {
    visibility: visible;
}

.px-gallery-panel .px-gallery-item .px-image-usage p {
    box-sizing: border-box;
    padding: 12px;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

.px-gallery-panel .px-gallery-item .px-image-usage p a {
    color: var(--brand-color);
    pointer-events: auto;
}

.px-gallery-panel .px-gallery-item .px-upload-progress {
    background-color: var(--pale-grey);
    bottom: 0;
    height: 6px;
    opacity: 0.8;
    position: absolute;
    width: 100%;
}

.px-gallery-panel .px-gallery-item .px-upload-progress .px-upload-progress-bar {
    background-color: var(--brand-color);
    height: 100%;
}

.px-gallery-panel .px-gallery-item .px-upload-failure {
    background-color: var(--orangered);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.8;
    padding: 3px;
    position: absolute;
    right: 0;
}

.px-gallery-panel .px-gallery-footer {
    align-items: end;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    gap: 12px;
    justify-content: center;
    padding-top: 14px;
}

.px-gallery-panel .px-gallery-footer button,
.px-gallery-panel .px-gallery-footer .px-file-upload-button {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    min-width: 48px;
    padding: 0 52px;
}

.px-gallery-panel .px-gallery-footer button.px-icon-only,
.px-gallery-panel .px-gallery-footer .px-file-upload-button.px-icon-only {
    padding: 0;
}

.px-gallery-panel .px-gallery-footer button svg,
.px-gallery-panel .px-gallery-footer .px-file-upload-button svg {
    margin-right: 4px;
}

.px-gallery-panel .px-gallery-footer button.px-icon-only svg,
.px-gallery-panel .px-gallery-footer .px-file-upload-button.px-icon-only svg {
    margin-right: 0;
}

.px-modal.px-spinner-modal .px-modal-panel {
    min-width: 200px;
    min-height: auto;
}

.px-modal.px-spinner-modal .px-modal-panel .px-modal-header,
.px-modal.px-spinner-modal .px-modal-panel .px-modal-footer {
    display: none;
}

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

.px-modal.px-spinner-modal .px-modal-panel .px-modal-content p {
    margin: 12px 0 6px;
}

.px-header {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid var(--layout-border-color);
    box-sizing: border-box;
    display: grid;
    grid-area: header;
    grid-template-areas: "left-content center-content right-content";
    grid-template-columns: 1.1fr 0.8fr 1.1fr;
    grid-template-rows: var(--header-height-desktop);
    height: var(--header-height-desktop);
    justify-content: space-between;
    line-height: var(--header-height-desktop);
    padding: 0 6px 0 22px;
    position: relative;
    z-index: 3;
}

.px-header .px-left-content,
.px-header .px-right-content {
    align-items: center;
    display: flex;
}

.px-header .px-right-content {
    justify-content: flex-end;
}

.px-header .px-center-content {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.px-header .px-center-content .px-project-info {
    line-height: 1.3333;
    overflow: hidden;
    padding: 0 16px;
}

.px-header .px-center-content .px-project-info .px-product-name {
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-header .px-project-name-wrapper {
    position: relative
}

/*
    The function of the unedited overlay is to provide the dot highlight for unedited project names.
    We position it over the input with the same text and styling, but text made transparent, so that
    the only thing visible is the dot.
*/
.px-header .px-project-name-wrapper .px-unedited-overlay {
    align-items: center;
    border: 1px solid transparent;
    box-sizing: border-box;
    color: transparent;
    display: flex;
    /* For some reason in dev build the project name input's font is set to sans-serif,
       but that is not the case in production, where it correctly sets it to var(--standard-fonts).
       If the blue dot seems a bit of in developement, that is probably why.
    */
    /* font-family: sans-serif; */
    font-size: 16px;
    font-weight: normal;
    gap: 8px;
    height: 100%;
    justify-content: flex-end;
    left: 0;
    overflow: hidden;
    padding: 6px 10px;
    position: absolute;
    pointer-events: none;
    text-align: right;
    text-overflow: ellipsis;
    top: 0;
    width: 100%;
}

.px-header .px-project-name-wrapper .px-project-name:focus + .px-unedited-overlay {
    display: none;
}

.px-header .px-project-name-wrapper .px-unedited-overlay span {
    flex-shrink: 0
}

.px-header .px-project-name-wrapper .px-unedited-overlay svg {
    color: var(--brand-color);
    height: 6px;
    width: 6px;
}

.px-header .px-project-name {
    background-color: transparent;
    border-color: transparent;
    box-sizing: border-box;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding: 6px 10px;
    text-align: right;
    text-overflow: ellipsis;
    width: 100%;
}

.px-header .px-logo-link {
    box-sizing: border-box;
    display: block;
}

.px-header .px-logo-link .px-logo {
    --header-height: var(--header-height-desktop);
    --logo-vertical-padding: 10px;
    --logo-height: calc(var(--header-height) - 2*(var(--logo-vertical-padding)));
    box-sizing: border-box;
    display: block;
    height: var(--logo-height);
    padding: 0 14px;
    max-width: 100%;
}

.px-header .px-logo-link .px-logo.px-admin-logo {
    height: 36px;
}

.px-header .px-project-name:hover,
.px-header .px-project-name:focus {
    border-color: var(--pale-grey);
    outline: none;
}

.px-header .px-project-name:disabled {
    border-color: transparent !important;
}

.px-header .px-icon-buttons {
    display: flex;
    margin: 0 16px;
}

.px-header .px-icon-buttons button {
    background: transparent;
    border: none;
    color: var(--icon-color);
}

.px-header .px-icon-buttons button svg {
    display: block;
}

.px-header .px-cart-button {
    align-items: center;
    background: var(--action-button-background-color);
    color: var(--action-button-color);
    display: flex;
    height: 45px;
    padding: 0 12px 0 24px;
    white-space: nowrap;
}

.px-header .px-cart-button .px-text {
    display: inline-block;
    font-weight: bold;
    margin-left: 8px;
    margin-right: 12px;
}

.px-header .px-share-save svg {
    height: 20px;
    margin-right: 8px;
}

.px-header .px-editor-exit-button {
    background: transparent;
    border: none;
    color: var(--icon-color);
    margin-left: 6px;
    padding: 0 16px;
}

.px-header .px-exit-button {
    border-radius: 23px;
    font-size: 14px;
    height: 42px;
    line-height: 42px;
    margin-right: 32px;
    padding: 12px 24px;
}

button.px-exit-button svg:first-child {
    margin-right: 8px;
}

/* The cross icon */
button.px-exit-button svg:last-child {
    margin-left: 16px;
    margin-top: 1px;
    width: 9px;
}

.px-edit-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-edit-panel .px-edit-controls {
    padding: 0 18px 18px;
}

.px-edit-panel .px-edit-controls .px-edit-control h2 {
    font-size: 12px;
    font-weight: normal;
    margin: 24px 0 8px 0;
}

.px-edit-panel .px-edit-controls .px-edit-control.px-slider-control h2 {
    margin-bottom: -24px;
    margin-top: 36px;
}

.px-edit-panel .px-edit-controls .px-edit-control.px-slider-control:first-child h2 {
    margin-top: 24px;
}

.px-edit-panel .px-edit-controls .px-edit-control button {
    font-size: 12px;
    height: 36px;
    line-height: 36px;
}

.px-edit-panel .px-edit-controls .px-edit-control button.px-color-button {
    display: block;
    margin: 0 auto;
}

.px-edit-panel .px-edit-controls .px-edit-control input {
    height: 32px;
    line-height: 32px;
}

.px-edit-panel .px-edit-controls .px-edit-control select {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    width: 100%;
    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% - 16px) 50%;
}

.px-edit-panel .px-edit-controls .px-edit-control textarea {
    box-sizing: border-box;
    height: 64px;
    width: 100%;
}

.px-edit-panel .px-edit-controls .px-edit-control.px-action-button {
    text-align: center;
}

.px-edit-panel .px-edit-controls .px-edit-control.px-action-button button {
    margin-top: 24px;
}

.px-edit-panel .px-delete-element-section {
    margin-top: 24px;
    text-align: center;
}

.px-edit-panel .px-delete-element-section button {
    padding-left: 28px;
    padding-right: 28px;
}

.px-image-edit-panel .px-edit-controls .px-image-effects {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.px-image-edit-panel .px-edit-controls .px-image-effects .px-toggle-button {
    line-height: 14px;
    margin-top: 8px;
    width: calc(50% - 4px);
}

.px-image-edit-panel .px-edit-controls .px-rotate-buttons,
.px-image-edit-panel .px-edit-controls .px-crop-buttons {
    font-size: 0;
    margin: 8px 0;
}

.px-image-edit-panel .px-edit-controls .px-rotate-buttons button {
    width: calc(50% - 4px);
}

.px-image-edit-panel .px-edit-controls .px-crop-buttons button {
    margin-right: 8px;
    width: 40%;
}

.px-image-edit-panel .px-edit-controls .px-crop-buttons button:first-child,
.px-image-edit-panel .px-edit-controls .px-crop-buttons button:last-child {
    width: calc(30% - 8px);
}

.px-image-edit-panel .px-edit-controls .px-crop-buttons button:last-child {
    margin-right: 0;
}

.px-image-edit-panel .px-edit-controls .px-rotate-buttons button:first-child {
    margin-right: 8px;
}

.px-image-edit-panel .px-edit-controls .px-crop-buttons button svg,
.px-image-edit-panel .px-edit-controls .px-rotate-buttons button svg {
    box-sizing: border-box;
    display: block;
    height: 18px;
}

.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls {
    text-align: center;
}

.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls .px-select-mask,
.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls .px-remove-mask {
    cursor: pointer;
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    width: calc(50% - 4px);
}

.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls .px-select-mask {
    margin-right: 4px;
}

.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls .px-remove-mask {
    background-color: transparent;
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.px-image-edit-panel .px-edit-controls .px-mask-control .px-controls .px-remove-mask:hover {
    background-color: var(--danger-color);
    color: #fff;
}

.px-image-edit-panel .px-edit-controls .px-border-control .px-controls .px-border-color-control {
    border: 1px solid var(--pale-grey);
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 0;
    height: 40px;
    margin-left: 16px;
    width: 40px;
}

.px-options-panel .px-options {
    padding: 0 18px 18px;
}

.px-options-panel .px-options .px-option[data-option-level="1"],
.px-options-panel .px-options .px-option[data-option-level="2"] {
    background-image: url('data:image/svg+xml,<svg width="16" height="80" xmlns="http://www.w3.org/2000/svg"><polyline points="1,0 1,60 9,60" stroke="%23e2e4e9" fill="none" stroke-width="1.5" /></svg>');
    background-position: 0 bottom;
    background-repeat: no-repeat;
}

.px-options-panel .px-options .px-option[data-option-level="1"] {
    padding-left: 16px;
}
.px-options-panel .px-options .px-option[data-option-level="2"] {
    background-position: 16px bottom;
    padding-left: 32px;
}

.px-options-panel .px-options .px-option h2 {
    font-size: 12px;
    font-weight: normal;
    margin: 24px 0 8px 0;
}

.px-options-panel .px-options .px-option .px-dropdown li img:not(.px-font-dropdown-option) {
    display: inline-block;
    height: 40px;
    margin: 8px 8px 8px 0;
    object-fit: contain;
    vertical-align: middle;
    width: 40px;
}

.px-options-panel .px-options .px-option .px-dropdown li img.px-font-dropdown-option {
    display: block;
    height: 36px;
}

.px-options-panel .px-options .px-option .px-radio-buttons {
    --gap: 8px;
    --item-width: calc((100% - 2 * var(--gap)) / 3);
    display: grid;
    gap: var(--gap);
    grid-template-columns: var(--item-width) var(--item-width) var(--item-width);
    grid-auto-rows: 1fr;
}

.px-options-panel .px-options .px-option .px-radio-buttons button {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid var(--neutral-grey-4);
    font-size: 10px;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.px-options-panel .px-options .px-option .px-radio-buttons button[data-selected="true"] {
    outline: 1px solid var(--blue-grey) !important;
}

.px-options-panel .px-options .px-option .px-radio-buttons button .px-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}

.px-options-panel .px-options .px-option .px-radio-buttons button .px-label {
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: 5px;
}

.px-options-panel .px-options .px-option input {
    box-sizing: border-box;
    height: 40px;
    width: 100%;
}

.px-options-panel.px-mobile-options-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 0 16px;
}

.px-options-panel.px-mobile-options-panel .px-options {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-options-panel.px-mobile-options-panel .px-options .px-option .px-radio-buttons {
    --item-width: calc((100% - 3 * var(--gap)) / 4);
    grid-template-columns: var(--item-width) var(--item-width) var(--item-width) var(--item-width);
}

.px-options-panel.px-mobile-options-panel .px-actions {
    align-self: center;
}

.px-organize-pages {
    --sidebar-width: 280px;
    background-color: #fff;
    bottom: 0;
    border-top: 4px solid var(--layout-border-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: var(--header-height-desktop);
    width: 100%;
    z-index: 3;
}

.px-organize-pages[data-can-add-or-remove-pages="false"] {
    --sidebar-width: 0;
}

.px-organize-pages .px-organize-pages-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 36px 32px;
    width: calc(100% - var(--sidebar-width));
}

.px-organize-pages .px-organize-pages-header .px-title {
    font-size: 0;
    text-align: center;
}

.px-organize-pages .px-organize-pages-header .px-title h2 {
    color: var(--neutral-grey-1);
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
}

.px-organize-pages .px-organize-pages-header .px-title h2::after {
    content: url('data:image/svg+xml,<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><circle fill="%23747474" cx="3" cy="3" r="3"></circle></svg>');
    display: inline-block;
    margin: 0 12px;
    vertical-align: text-top;
}

.px-organize-pages .px-organize-pages-header .px-title p {
    color: var(--neutral-grey-3);
    display: inline-block;
    font-size: 16px;
    margin: 0;
}

.px-organize-pages .px-page-sets {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    max-height: 100%;
    overflow-y: auto;
    margin-right: var(--sidebar-width);
    padding: 0 32px 32px 32px;
}

.px-rtl-mode .px-organize-pages .px-page-sets {
    direction: rtl;
}

.px-organize-pages .px-page-sets .px-page-set {
    display: inline-block;
    font-size: 0;
    margin-bottom: 42px;
    padding: 0 16px;
    position: relative;
}

.px-organize-pages .px-page-sets .px-page-set .px-tick-mark {
    display: none;  /* currently only used for cut prints mode */
}

.px-organize-pages .px-page-sets .px-page-set .px-page-thumbs {
    border: 2px solid var(--pale-grey);
    cursor: pointer;
    display: inline-block;
    font-size: 0;  /* to remove extra whitespace between the images and borders */
}

.px-organize-pages .px-page-sets .px-page-set[data-selected='true'] .px-page-thumbs {
    border-color: var(--brand-color);
}

.px-organize-pages .px-page-sets .px-page-set[data-selectable='false'] .px-page-thumbs {
    cursor: not-allowed;
}

.px-organize-pages .px-page-sets .px-page-set .px-page-captions {
    display: flex;
    font-size: 10px;
    line-height: 18px;
}

.px-organize-pages .px-page-sets .px-page-set .px-page-captions .px-page-caption {
    flex-grow: 1;
    text-align: center;
}

.px-organize-pages .px-page-sets .px-page-set.px-is-dragged {
    opacity: 0.3;
}

.px-organize-pages .px-page-sets .px-page-set.px-drop-before::before,
.px-organize-pages .px-page-sets .px-page-set.px-drop-after::after {
    background-color: var(--brand-color);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 2px;
}

.px-organize-pages .px-page-sets .px-page-set.px-drop-before::before {
    left: -1px;
}

.px-organize-pages .px-page-sets .px-page-set.px-drop-after::after {
    right: -1px;
}

.px-rtl-mode .px-organize-pages .px-page-sets .px-page-set.px-drop-before::before {
    left: auto;
    right: -1px;
}

.px-rtl-mode .px-organize-pages .px-page-sets .px-page-set.px-drop-after::after {
    left: -1px;
    right: auto;
}

.px-organize-pages .px-page-sets .px-page-set.px-add-set .px-page-thumbs {
    align-items: center;
    background-color: var(--neutral-grey-6);
    border: none;
    border-radius: 4px;
    color: var(--neutral-grey-2);
    display: flex;
    height: 100px;
    justify-content: center;
    width: 100px;
}

.px-organize-pages .px-page-sets .px-page-set.px-add-set .px-page-thumbs:hover {
    background-color: var(--neutral-grey-2);
    color: #fff;
}

.px-organize-pages .px-page-sets .px-page-set.px-add-set .px-page-thumbs::after {
    content: '+';
    font-size: 26px;
}

.px-organize-pages .px-page-sets .px-dragged-copy .px-page-set .px-page-thumbs {
    border-color: var(--brand-color);
}

.px-organize-pages .px-organize-pages-sidebar {
    background-color: var(--layout-border-color);
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--sidebar-width);
}

.px-organize-pages .px-organize-pages-sidebar .px-actions {
    margin-top: 48px;
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button {
    background: #fff;
    border: none;
    border-radius: 16px;
    color: var(--neutral-grey-2);
    display: flex;
    font-size: 16px;
    height: 48px;
    justify-content: space-between;
    margin: 18px auto;
    padding-left: 12px;
    text-align: left;
    width: calc(100% - 64px);
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button[disabled] {
    opacity: 0.6;
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button .px-bubble {
    align-items: center;
    border-radius: 20px;
    color: #fff;
    display: flex;
    font-size: 14px;
    height: 28px;
    justify-content: center;
    padding: 0 8px 0 10px;
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button.px-duplicate-pages .px-bubble {
    background-color: var(--icon-action-color);
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button.px-delete-pages .px-bubble {
    background-color: var(--danger-color);
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button[disabled] .px-bubble {
    background-color: var(--neutral-grey-3);
}

.px-organize-pages .px-organize-pages-sidebar .px-actions button .px-bubble svg {
    margin-left: 8px;
}

.px-broken-image-modal button {
    float: right;
}

.px-calendar-edit-panel .px-edit-controls .px-option-buttons button {
    display: block;
    margin-bottom: 8px;
    width: 100%;
}

.px-pdf-import-modal.px-modal .px-modal-panel {
    padding: 14px 28px;
    width: 800px;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-header h1 {
    font-size: 18px;
    margin: 0;
    padding: 0 0 18px 0;
    text-align: center;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-header .px-actions-right {
    position: absolute;
    right: 40px;
    top: 8px;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main {
    display: flex;
    max-height: calc(80vh - 4*14px); /* semi-arbitrary hackety hack :( */
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews {
    display: grid;
    flex-grow: 1;
    grid-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    overflow: auto;
    padding-right: 24px;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews[data-page-count='1'] {
    grid-template-columns: repeat(1, 1fr);
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews[data-page-count='2'],
.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews[data-page-count='3'],
.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews[data-page-count='4'] {
    grid-template-columns: repeat(2, 1fr);
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews .px-pdf-preview {
    width: 100%;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews .px-pdf-preview img {
    border: 2px solid var(--pale-grey);
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    margin: auto;
    max-height: 600px;
    max-width: 100%;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews .px-pdf-preview img[src=""] {
    background-image: url('data:image/svg+xml,<svg width="6" height="2" viewBox="0 0 6 2" class="px-image-loading-indicator" xmlns="http://www.w3.org/2000/svg"><circle class="px-circ-2" cx="3" cy="1" r="0.5" fill="%23000000" opacity="0.5" stroke="%23ffffff" stroke-width="0.25"></circle><circle class="px-circ-1" cx="1" cy="1" r="0.5" fill="%23000000" opacity="0.5" stroke="%23ffffff" stroke-width="0.25"></circle><circle class="px-circ-3" cx="5" cy="1" r="0.5" fill="%23000000" opacity="0.5" stroke="%23ffffff" stroke-width="0.25"></circle></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10%;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews .px-pdf-preview[data-selected='true'] img {
    border-color: var(--seaweed);
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-previews .px-pdf-preview .px-page-label {
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info {
    flex-grow: 0;
    flex-shrink: 0;
    padding-left: 8px;
    position: relative;
    width: 250px;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-pdf-prop {
    display: flex;
    padding-bottom: 1em;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-pdf-prop .px-pdf-prop-name {
    flex-shrink: 0;
    width: 33%;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-pdf-prop .px-pdf-prop-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-main-action {
    bottom: 0;
    position: absolute;
    right: 0;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-warning {
    background-color: rgba(255, 238, 190, 0.9);
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polygon points="10,1 19,19 1,19" fill="none" stroke-width="1.5" stroke="%23ffc82c" stroke-linejoin="round" /><line x1="10" y1="7" x2="10" y2="13" stroke-width="1.5" stroke="%23ffc82c" stroke-linecap="round" /><line x1="10" y1="16" x2="10" y2="16" stroke-width="1.5" stroke="%23ffc82c" stroke-linecap="round" /></svg>');
    background-position: 1em center;
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: 3px;
    color: var(--blue-grey);
    font-size: 13px;
    line-height: 1.5;
    padding: 1em 1em 1em calc(2em + 20px);
    margin-bottom: 1em;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-warning .px-checkbox {
    margin: 0.5em 0;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-content .px-pdf-import-modal-main .px-pdf-info .px-warning .px-checkbox input {
    appearance: auto;
    border: 1px solid var(--blue-grey);
    margin-right: 3px;
    vertical-align: middle;
}

.px-pdf-import-modal.px-modal .px-modal-panel .px-modal-footer {
    padding-top: 14px;
    text-align: right;
}

.px-page-settings-panel .px-page-flags button {
    margin-bottom: 8px;
    width: 100%;
}

.px-page-settings-panel .px-page-names {
    box-sizing: border-box;
    padding: 6px 10px;
    width: 100%;
}

.px-mobile-text-content-editor {
    box-sizing: border-box;
    height: calc(var(--tab-panel-height) - var(--tabs-height));
    padding: 0 12px 12px;
}

.px-mobile-text-content-editor .px-controls {
    height: 100%;
}

.px-mobile-text-content-editor .px-controls textarea {
    box-sizing: border-box;
    height: 100%;
    pointer-events: none;  /* required so that clicks on the disabled textarea bubble up the parent */
    width: 100%;
}

.px-mobile-text-content-editor .px-controls textarea:disabled {
    opacity: 1;
}

.px-mobile-text-alignment-editor {
    height: 100%;
}

.px-mobile-text-alignment-editor .px-controls {
    height: 100%;
}

.px-mobile-text-alignment-editor .px-text-alignment-buttons {
    height: 100%;
}

.px-mobile-text-alignment-editor .px-text-alignment-buttons .px-radio-buttons {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.px-mobile-text-alignment-editor .px-text-alignment-buttons .px-radio-buttons .px-toggle-button {
    margin: 0 8px;
}

.px-mobile-text-font-editor,
.px-mobile-text-size-editor {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}

.px-mobile-layouts-panel {
    --tool-tabs-height: 0 !important;
    height: 100%;
}

.px-mobile-layouts-panel .px-tool-wrapper {
    align-items: center;
    display: flex;
    font-size: 0;
    height: 100%;
    overflow: auto;
    padding: 0 4px;
}

/* This provides some padding after the last element in the gallery. */
.px-mobile-layouts-panel .px-tool-wrapper::after {
    content: '';
    flex: 0 0 8px;
    height: 100%;
}

.px-mobile-layouts-panel .px-tool-wrapper .px-layout {
    align-items: center;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid var(--neutral-grey-4);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    margin: 0 4px;
    width: 64px;
}

.px-mobile-layouts-panel .px-tool-wrapper .px-layout[data-current="true"] {
    border-color: var(--brand-color);
}

.px-header.px-mobile-header {
    background: transparent;
    border-bottom: none;
    display: block;
    height: calc(var(--header-height-mobile) + var(--subheader-height-mobile));
    line-height: var(--header-height-mobile);
    overflow: hidden;
    padding: 0;
}

.px-header.px-mobile-header .px-mobile-header-main {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--layout-border-color);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    height: var(--header-height-mobile);
    justify-items: center;
    width: 100%;
}

.px-header.px-mobile-header .px-mobile-header-main .px-cut-prints-info {
    flex-grow: 1;
    line-height: 1;
    text-align: center;
}

.px-header.px-mobile-header .px-mobile-header-main .px-cut-prints-info h2 {
    font-size: 14px;
    margin: 0 0 6px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-cut-prints-info p {
    font-size: 10px;
    margin: 0;
}

.px-header.px-mobile-header .px-mobile-header-main button {
    background: none;
    border: none;
    box-sizing: border-box;
    color: var(--icon-color);
    padding: 0 16px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-placeholder {
    width: 76px;
}

.px-header.px-mobile-header .px-mobile-header-main button[disabled] {
    opacity: 0.25;
}

.px-header.px-mobile-header .px-mobile-header-main .px-menu-button {
    color: var(--icon-color);
    justify-self: start;
    padding-left: 20px;
    text-align: left;
}

.px-header.px-mobile-header .px-mobile-header-main .px-mobile-cart-button {
    border: 1px solid var(--icon-action-color);
    border-radius: 24px;
    color: var(--icon-action-color);
    display: flex;
    height: 32px;
    margin: 0 16px 0 8px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-mobile-cart-button[disabled] {
    visibility: hidden;
}

.px-header.px-mobile-header .px-mobile-header-main .px-mobile-cart-button .px-icon {
    display: flex;
}

.px-header.px-mobile-header .px-mobile-header-main .px-mobile-cart-button .px-icon svg {
    height: 20px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-save-copy-button {
    box-sizing: border-box;
    color: var(--icon-action-color);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    gap: 5px;
    height: 100%;
}

.px-header.px-mobile-header .px-mobile-header-main .px-save-copy-button .px-icon {
    height: 20px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-save-copy-button .px-label {
    line-height: 10px;
}

.px-header.px-mobile-header .px-mobile-header-main .px-save-copy-button .px-icon svg {
    max-height: 100%;
}

.px-header.px-mobile-header .px-mobile-header-main .px-project-name {
    flex-grow: 1;
    font-size: 14px;
    height: 32px;
    text-align: center;
    width: 100%;
}

.px-header.px-mobile-header .px-subheader {
    align-items: end;
    display: flex;
    height: var(--subheader-height-mobile);
    padding: 0 16px;
}

.px-header.px-mobile-header .px-subheader button {
    background: var(--neutral-grey-5);
    border-radius: 16px;
    color: var(--neutral-grey-2);
    display: flex;
    height: 32px;
    line-height: 32px;
    padding: 0 16px 0 8px;;
}

.px-header.px-mobile-header .px-subheader button svg {
    height: 12px;
    padding-right: 4px;
}

.px-header.px-mobile-header .px-set-selection {
    display: flex;
    height: var(--header-height-mobile);
    justify-content: start;
    width: 100%;
}

.px-header.px-mobile-header .px-autofill-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 12px 0;
}

.px-header.px-mobile-header .px-autofill-info span {
    height: 18px;
    line-height: 18px;
    text-align: center;
}

.px-header.px-mobile-header .px-autofill-info span.px-subtitle {
    font-size: 10px;
}

.px-tab-content-panel .px-image-mask-panel .px-image-masks {
    --panel-padding: 14px;
    font-size: 0;  /* so that there is no space between inline items */
    padding: var(--panel-padding);
}

.px-tab-content-panel .px-accordion-content .px-image-mask-panel .px-image-masks {
    --panel-padding: 0;
}

.px-tab-content-panel .px-image-mask-panel .px-image {
    --gap: 8px;
    align-items: center;
    aspect-ratio: 6/5;
    background-color: var(--neutral-grey-6);
    border: 2px solid #fff;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
    position: relative;
    vertical-align: top;
    width: calc((100% - var(--gap)) / 2);
}

.px-tab-content-panel .px-image-mask-panel .px-image:nth-child(2n) {
    margin-right: 0;
}

.px-tab-content-panel .px-image-mask-panel .px-image[data-selected="true"] {
    border-color: var(--brand-color);
}

.px-tab-content-panel .px-image-mask-panel .px-image .px-thumbnail {
    background: var(--neutral-grey-4);
    display: flex;
    height: 100%;
    position: relative;
}

.px-tab-content-panel .px-image-mask-panel .px-image[data-selected="true"] .px-thumbnail::after {
    background: var(--brand-color);
    bottom: 0;
    box-sizing: border-box;
    content: '';
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: 0;
}

.px-tab-content-panel .px-image-mask-panel .px-image .px-thumbnail img {
    background-color: #000;
    background-image: none;
    box-sizing: border-box;
    display: block;
    filter: invert(1);
    mix-blend-mode: screen;
    width: 100%;
}

.px-tab-content-panel .px-image-mask-panel .px-image .px-tick-mark {
    color: var(--brand-color);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-notifications {
    left: 50%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 13px;
    transform: translateX(-50%);
}

.px-notifications .px-notification {
    border-radius: 3px;
    margin-bottom: 8px;
    padding: 18px 24px;
    transition: opacity 0.3s;
}

.px-mobile-mode .px-notifications {
    position: fixed;
    top: 4px;
    z-index: 9999;
}

.px-notifications .px-notification.px-notification-success {
    background-color: rgba(145, 231, 180, 0.9);
}

.px-notifications .px-notification.px-notification-warning,
.px-notifications .px-notification.px-notification-info {
    background-color: rgba(255, 238, 190, 0.9);
}

.px-notifications .px-notification.px-notification-error {
    background-color: rgba(255, 125, 88, 0.9);
}

.px-notifications .px-notification[data-is-disposing="true"] {
    opacity: 0;
}

.px-mobile-mode .px-notifications .px-notification {
    border-radius: 16px;
    font-size: 12px;
    text-align: center;
}

.px-notifications .px-notification p {
    line-height: 1.5;
    margin: 0;
}

.px-pdf-imports-panel .px-action-description-area {
    border: 2px dashed #c4cbd4;
    border-image-slice: 2;
    border-image-source: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="6" y2="0" stroke-width="4" stroke="%23c4cbd4"></line><line x1="14" y1="0" x2="20" y2="0" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="0" x2="20" y2="6" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="14" x2="20" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="20" x2="14" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="6" y1="20" x2="0" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="0" y1="20" x2="0" y2="14" stroke-width="4" stroke="%23c4cbd4"></line><line x1="0" y1="6" x2="0" y2="0" stroke-width="4" stroke="%23c4cbd4"></line></svg>');
    border-image-repeat: round;
    border-image-width: 2px;
}

.px-pdf-imports-panel .px-no-items-content {
    margin: 0;
    height: 100%;
    padding: 16px;
}

.px-pdf-imports-panel .px-no-items-content .px-file-upload-button {
    margin-top: 6px;
}

.px-dates-edit-panel {
    padding-bottom: 40px;  /* Lame workaround for the Fill dropdown overflowing the available space. */
}

.px-dates-edit-panel .px-dateseries {
    border-bottom: 1px solid var(--pale-grey);
    padding-bottom: 40px;
}

.px-dates-edit-panel .px-edit-controls h1 {
    font-size: 14px;
    margin: 16px 0;
}

.px-dates-edit-panel .px-edit-controls .px-date-index {
    box-sizing: border-box;
    padding: 6px 10px;
    width: 10ex;
}

.px-image-import-panel {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.px-image-import-panel .px-gallery-tabs-wrapper {
    --gallery-tabs-height: 74px;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    padding: 0 14px;
    height: var(--gallery-tabs-height);
}

.px-image-import-panel .px-gallery-tabs-wrapper[data-tab-count="1"] {
    --gallery-tabs-height: 48px;
    border-bottom: 1px solid var(--layout-border-color);
}

.px-image-import-panel .px-gallery-tabs-wrapper .px-gallery-tabs {
    background-color: var(--neutral-grey-6);
    border-radius: 24px;
    display: flex;
    overflow: auto;
    padding: 4px 6px;
    width: 100%;
}

/* Make the tab look like a regular heading if there is only one tab. */
.px-image-import-panel .px-gallery-tabs-wrapper[data-tab-count="1"] .px-gallery-tabs {
    background-color: transparent;
}

.px-image-import-panel .px-gallery-tabs-wrapper .px-gallery-tabs button {
    background-color: transparent;
    border: none;
    border-radius: 18px;
    color: var(--neutral-grey-2);
    flex-grow: 1;
    font-size: 14px;
    font-weight: bold;
    height: 34px;
    padding: 8px 12px;
    white-space: nowrap;
}

.px-image-import-panel .px-gallery-tabs-wrapper[data-tab-count="1"] .px-gallery-tabs button {
    background-color: transparent;
    pointer-events: none;
}

.px-image-import-panel .px-gallery-tabs-wrapper .px-gallery-tabs button[data-selected="true"] {
    background-color: #fff;
    color: var(--neutral-grey-1);
}

.px-image-import-panel .px-gallery-content-panel {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
    padding: 0 14px 14px;
}

.px-mobile-page-display {
    background-color: var(--editor-background-color);
    display: none;
    grid-area: pages;
    padding: 16px;
    position: relative;
    transform: translateY(100vh);
    z-index: 2;
}

.px-mobile-page-display[data-expanded="true"] {
    display: block;
    transform: translateY(0);
}

.px-mobile-page-display .px-pages {
    display: grid;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    position: relative;
}

.px-rtl-mode .px-mobile-page-display .px-pages {
    direction: rtl;
}

.px-mobile-page-display .px-pages[data-is-swiping="true"],
.px-mobile-page-display .px-pages[data-is-animating-swipe="true"] {
    overflow: hidden;
}

.px-mobile-page-display .px-pages .px-prev-set-hint,
.px-mobile-page-display .px-pages .px-next-set-hint {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

.px-mobile-page-display .px-pages .px-prev-set-hint {
    left: 0;
}

.px-mobile-page-display .px-pages .px-next-set-hint {
    right: 0;
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area {
    align-self: start;
    display: flex;
    justify-self: center;
}

.px-mobile-page-display[data-is-cropping="true"] .px-pages .px-pages-scrollable-area {
    align-self: center;
}

.px-mobile-page-display .px-pages[data-is-animating-swipe="true"] .px-pages-scrollable-area {
    transition: transform 0.2s;
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area .px-page-display-page {
    align-items: center;
    align-self: center;
    display: flex;
    justify-content: center;
    justify-self: center;
    position: relative;
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area .px-page-display-page.px-with-outline::after {
    border: 4px solid var(--mobile-editor-selection-color);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area .px-page-display-page .px-page {
    filter: drop-shadow(0 0 3px rgba(183,186,193,0.3));
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area .px-current-set-controls {
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.px-mobile-page-display .px-pages .px-pages-scrollable-area .px-current-set-controls .px-page {
    overflow: visible;
}

.px-layouts-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-layouts-panel .px-layouts {
    --panel-padding: 14px;
    font-size: 0;  /* so that there is no space between inline items */
    padding: var(--panel-padding);
}

.px-layouts-panel .px-accordion-content .px-layouts {
    --panel-padding: 0;
}

.px-layouts-panel .px-layouts .px-layout {
    --gap: 8px;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
    position: relative;
    width: calc((100% - var(--gap)) / 2);
}

.px-layouts-panel .px-layouts .px-layout[data-selected="true"] {
    cursor: auto;
}

.px-layouts-panel .px-layouts .px-layout:nth-child(2n) {
    margin-right: 0;
}

.px-layouts-panel .px-layouts .px-layout[data-selected="true"]::after {
    background: var(--brand-color);
    bottom: 0;
    box-sizing: border-box;
    content: '';
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: 0;
}

.px-layouts-panel .px-layouts .px-layout .px-page {
    border: 1px solid var(--neutral-grey-5);
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.px-layouts-panel .px-layouts .px-layout[data-selected="true"] .px-page {
    border: 2px solid var(--brand-color);
}

.px-layouts-panel .px-layouts .px-layout[data-selected="true"] .px-tick-mark {
    color: var(--brand-color);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-content {
    text-align: center;
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-content .px-upload-progress {
    background-color: var(--pale-grey);
    border-radius: 6px;
    display: inline-block;
    height: 8px;
    margin: 8px 0 0;
    width: 250px;
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-content .px-upload-progress .px-upload-progress-bar {
    background-color: var(--brand-color);
    border-radius: 6px;
    height: 100%;
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-content .px-upload-progress-details {
    color: var(--blue-grey);
    font-size: 11px;
    line-height: 14px;
    margin: 0;
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-footer {
    text-align: right;
}

.px-uploads-in-progress-modal.px-modal .px-modal-panel .px-modal-footer button {
    margin-left: 8px;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-crop-editor,
.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-crop-editor {
    flex-direction: column;
    gap: 8px;
    padding: 24px 24px 16px;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-crop-editor p {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 11px;
    justify-content: center;
    margin: 0;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-crop-editor .px-actions {
    height: auto;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery {
    align-items: center;
    display: flex;
    height: 100%;
    overflow: auto;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery .px-image {
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    margin: 0 4px;
    padding: 4px;
    transition: 0.2s border;
    width: 64px
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery .px-image[data-selected="true"] {
    border: 2px solid var(--brand-color);
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery .px-image span {
    background-color: var(--icon-disabled-color);
    font-size: 0;
    max-height: 100%;
    max-width: 100%;
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery .px-image[data-selected="true"] span {
    background-color: var(--icon-color);
}

.px-mobile-toolbar .px-tab-panel .px-tab-panel-content .px-mobile-image-mask-editor .px-mask-gallery .px-image img {
    background-color: #000;
    background-image: none;
    filter: invert(1);
    max-height: 100%;
    max-width: 100%;
    mix-blend-mode: screen;
}

.px-mobile-image-selector-panel {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 4px 16px 16px;
    text-align: center;
}
.px-mobile-image-selector-panel[data-fullscreen="true"] {
    padding-top: 0;
}

.px-mobile-image-selector-panel .px-product-name {
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 16px;
}

.px-mobile-image-selector-panel .px-upload-prompt-instructions {
    color: var(--neutral-grey-2);
    margin-bottom: 24px;
}

.px-mobile-image-selector-panel .px-source-buttons {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.px-mobile-image-selector-panel .px-source-buttons button {
    align-items: center;
    background-color: var(--primary-button-background-color);
    border: none;
    border-radius: 22px;
    color: var(--primary-button-color);
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 12px 32px;
}

.px-mobile-image-selector-panel .px-source-buttons button.px-upload {
    background-color: var(--action-button-background-color);
    box-shadow: 0 0 16px #0002;
    color: var(--action-button-color);
}

.px-mobile-image-selector-panel .px-source-buttons button .px-icon {
    align-items: center;
    display: flex;
    justify-content: center;
}

.px-mobile-image-selector-panel .px-top-bar {
    align-items: center;
    display: grid;
    flex-shrink: 0;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    height: 32px;
    justify-items: center;
}

.px-mobile-image-selector-panel .px-top-bar:has(.px-upload-more) {
    height: 64px;
}

.px-mobile-image-selector-panel .px-top-bar .px-upload-more {
    background-color: var(--icon-action-color);
    border: none;
    color: #fff;
    font-size: 0;
    display: flex;
    height: 42px;
    justify-self: start;
    padding: 0;
    width: 42px;
}

.px-mobile-image-selector-panel .px-top-bar .px-upload-more svg {
    bottom: 1px;
    left: 2px;
    position: relative;
}

.px-mobile-image-selector-panel .px-top-bar .px-autofill-info {
    background-color: var(--neutral-grey-6);
    border-radius: 6px;
    color: var(--neutral-grey-3);
    font-weight: bold;
    padding: 4px 8px;
}

.px-mobile-image-selector-panel .px-top-bar .px-autofill-info .px-image-count {
    color: var(--icon-action-color)
}

.px-mobile-image-selector-panel .px-top-bar .px-size-selector {
    display: flex;
    gap: 4px;
    justify-self: end;
}

.px-mobile-image-selector-panel .px-top-bar .px-size-selector button {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    padding: 6px;
}

.px-mobile-image-selector-panel .px-top-bar .px-size-selector button svg {
    color: var(--icon-color);
    display: block;
    height: 16px;
    width: 16px;
}

.px-mobile-image-selector-panel .px-top-bar .px-size-selector button[data-active="true"] svg {
    color: var(--icon-highlight-color);
}

.px-mobile-image-selector-panel .px-images {
    box-sizing: border-box;
    display: grid;
    flex-grow: 1;
    gap: 16px;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    overflow: auto;
    padding: 12px;
    width: 100%;
}

.px-mobile-image-selector-panel .px-images[data-thumb-size="medium"] {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.px-mobile-image-selector-panel .px-images .px-image {
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    min-width: 80px;
    max-width: 150px;
    position: relative;
}

.px-mobile-image-selector-panel .px-images[data-thumb-size="medium"] .px-image {
    min-width: 120px;
    max-width: 200px;
}

.px-mobile-image-selector-panel .px-images .px-image[data-selected="true"] {
    outline: 3px solid var(--icon-action-color);
}

.px-mobile-image-selector-panel .px-images .px-image[data-selected="true"]::before {
    align-items: center;
    background-color: rgb(from var(--icon-action-color) r g b / 50%);
    bottom: 0;
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49891 13.5L4.58224 10.5833C4.50597 10.5061 4.41514 10.4448 4.315 10.403C4.21487 10.3612 4.10743 10.3396 3.99891 10.3396C3.89039 10.3396 3.78295 10.3612 3.68281 10.403C3.58268 10.4448 3.49184 10.5061 3.41557 10.5833C3.33837 10.6596 3.27708 10.7504 3.23525 10.8506C3.19342 10.9507 3.17188 11.0581 3.17188 11.1667C3.17188 11.2752 3.19342 11.3826 3.23525 11.4827C3.27708 11.5829 3.33837 11.6737 3.41557 11.75L6.90724 15.2417C7.23224 15.5667 7.75724 15.5667 8.08224 15.2417L16.9156 6.41665C16.9928 6.34038 17.0541 6.24955 17.0959 6.14942C17.1377 6.04928 17.1593 5.94184 17.1593 5.83332C17.1593 5.7248 17.1377 5.61736 17.0959 5.51722C17.0541 5.41709 16.9928 5.32626 16.9156 5.24999C16.8393 5.17279 16.7485 5.11149 16.6483 5.06966C16.5482 5.02783 16.4408 5.00629 16.3322 5.00629C16.2237 5.00629 16.1163 5.02783 16.0161 5.06966C15.916 5.11149 15.8252 5.17279 15.7489 5.24999L7.49891 13.5Z" fill="white"/></svg>');
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.px-mobile-image-selector-panel .px-images .px-image .px-tick-mark {
    color: var(--brand-color);
    position: absolute;
    top: 2px;
    right: 2px;
}

.px-mobile-image-selector-panel .px-images .px-image[data-selected="true"] .px-tick-mark {
    display: none;
}

body > .px-dragged {
    border: 1px solid var(--pale-grey);
    box-sizing: border-box;
    cursor: pointer;
    cursor: -webkit-grabbing;
    cursor: grabbing;
    z-index: 100;
}

.px-add-gallery-modal .px-modal-content {
    line-height: 24px;
}

.px-add-gallery-modal .px-modal-content .px-gallery-name-input {
    font-size: 14px;
    height: 24px;
    outline: none;
    padding: 18px;
    width: 100%;
}

svg.px-page {
    /* Make sure page direction is always ltr. We position all elements of the page absolutely, and we manually handle
       text positioning, so a rtl direction on text elements would make RTL text look wrong. */
    direction: ltr;
}

svg.px-page .px-bleed,
svg.px-page .px-margin {
    fill: none;
    stroke-opacity: 0.5;
}

svg.px-page .px-bleed {
    stroke: #ff0000;
}

svg.px-page .px-margin {
    stroke: #ff00ff;
}

svg.px-page text.px-bleed,
svg.px-page text.px-margin {
    paint-order: stroke;
    stroke: #fff;
    stroke-opacity: 1;
}

svg.px-page text.px-bleed {
    fill: #ff0000;
}

svg.px-page text.px-margin {
    fill: #ff00ff;
}

svg.px-page .px-image-element svg {
    /* By default overflow is hidden, but we need it to set it to auto,
       so that it shows when cropping an image. */
    overflow: auto;
}

svg.px-page .px-image-element .px-image-swap-target {
    filter: drop-shadow(0 0 2px var(--icon-action-color));
    transform: translateZ(0);  /* forces GPU render on Safari */
}

.px-modal.px-upload-method-modal .px-modal-panel {
    min-width: 320px;
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content {
    margin: 1rem 0;
    text-align: center;
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-separator {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
    margin: 2.5rem auto;
    max-width: 380px;
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-separator::before,
.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-separator::after {
    align-self: center;
    border-top: 1px solid var(--neutral-grey-4);
    content: "";
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-image-wrapper {
    height: 180px;
    margin: auto;
    position: relative;
    width: 180px;
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-image-wrapper .px-spinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.px-modal.px-upload-method-modal .px-modal-panel .px-modal-content .px-qr-code .px-image-wrapper img {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

.px-mapped-preview-panel {
    --preview-padding: 36px;
    display: grid;
    grid-area: page-display;  /* position it over page display*/
    grid-template-areas: ". . ." "prev-arrow image next-arrow" "dots dots dots";
    grid-template-columns: var(--preview-padding) 1fr var(--preview-padding);
    grid-template-rows: var(--preview-padding) 1fr var(--preview-padding);
    overflow: hidden;
    z-index: 2;
}

.px-mapped-preview-panel .px-spinner {
    align-self: center;
    grid-area: image;
    margin: auto;
}

.px-mapped-preview-panel .px-canvas-container,
.px-mapped-preview-panel img {
    grid-area: image;
    height: calc(100% - 2*var(--preview-padding));
    margin: auto;
    object-fit: contain;
    width: calc(100% - 2*var(--preview-padding));
}

.px-mapped-preview-panel .px-prev,
.px-mapped-preview-panel .px-next {
    align-self: center;
    display: grid;  /* for vertical centering */
}

.px-mapped-preview-panel .px-prev {
    grid-area: prev-arrow;
}

.px-mapped-preview-panel .px-next {
    grid-area: next-arrow;
}

.px-mapped-preview-panel .px-prev button {
    height: 28px;
    transform: rotate(180deg);
}

.px-mapped-preview-panel .px-prev button,
.px-mapped-preview-panel .px-next button {
    background: none;
    border: none;
    font-size: 0;
}

.px-mapped-preview-panel .px-dots {
    grid-area: dots;
    text-align: center;
}

.px-mapped-preview-panel .px-dots span {
    cursor: pointer;
    display: inline-block;
    height: var(--preview-padding);
    margin: 0 6px;
    text-align: center;
    width: 18px;
}

.px-mapped-preview-panel .px-dots span::after {
    --dot-size: 8px;
    background-color: var(--pale-grey);
    border-radius: 4px;
    content: "";
    display: inline-block;
    height: var(--dot-size);
    margin: calc((var(--preview-padding) - var(--dot-size))/2) 6px;
    width: var(--dot-size);
}

.px-mapped-preview-panel .px-dots span[data-current="true"]::after {
    background-color: var(--blue-grey);
}

svg.px-page .px-score-element,
svg.px-page .px-score-element.px-bleed {  /* increase specificity for bleed score elements */
    opacity: 0.5;
    fill-opacity: 0.5;
    fill: #aaa;
    stroke-width: 0;
}

.px-cut-prints {
    background-color: var(--editor-background-color);
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.px-cut-prints[data-active="false"] {
    visibility: hidden;
}

.px-mobile-mode .px-cut-prints {
    background: inherit;
    position: static;
}

.px-cut-prints .px-cut-prints-header {
    align-items: center;
    display: flex;
    padding: 18px 16px 32px;
}

.px-mobile-mode .px-cut-prints .px-cut-prints-header {
    display: none;
}

.px-cut-prints .px-cut-prints-header .px-title {
    align-items: center;
    display: flex;
    justify-content: center;
}

.px-cut-prints .px-cut-prints-header .px-title h2 {
    color: var(--neutral-grey-1);
    font-size: 16px;
    margin: 0;
}

.px-cut-prints .px-cut-prints-header .px-title .px-separator {
    padding: 0 12px;
}

.px-cut-prints .px-cut-prints-header .px-quantity-count-info {
    align-items: center;
    background: #fff;
    border-radius: 16px;
    color: var(--brand-color);
    display: flex;
    font-size: 16px;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
}

.px-cut-prints .px-cut-prints-header .px-actions {
    flex: 1 0 0;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-left {
    display: flex;
    gap: 18px;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right {
    text-align: right;
}

.px-cut-prints .px-cut-prints-header .px-actions button {
    background: #fff;
    border: none;
    border-radius: 13px;
    color: var(--neutral-grey-2);
    font-size: 14px;
    padding: 0 16px;
    vertical-align: middle;
}

.px-cut-prints .px-cut-prints-header .px-actions button:disabled {
    color: var(--neutral-grey-2-opacity-50);
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-left button {
    height: 38px;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-left button svg {
    margin-left: 10px;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls {
    align-items: center;
    display: inline-flex;
    vertical-align: middle;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-quantity-title {
    margin-right: 12px;
}

@media (max-width: 1399.98px) {
    /* Hide the "Change quantity" title on smaller screens because we don't have a lot of horizontal space */
    .px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-quantity-title {
        display: none;
    }
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-controls {
    display: flex;
    gap: 8px;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-controls button {
    align-items: center;
    border-radius: 4px;
    display: flex;
    height: 28px;
    justify-content: center;
    min-width: auto;
    padding: 0;
    width: 28px;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-controls button svg {
    display: block;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-controls input[type="number"] {
    background: #fff;
    height: 28px;
    max-width: 58px;
    padding: 0;
    text-align: center;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-quantity-controls .px-controls input[type="number"][disabled] {
    cursor: not-allowed;
}

.px-cut-prints .px-cut-prints-header .px-actions.px-actions-right .px-select-all {
    height: 28px;
    margin-left: 32px;
}

.px-cut-prints .px-cut-print-upload-instructions {
    font-size: 16px;
    line-height: 1.5;
    margin: auto;
    max-width: 800px;
    text-align: center;
}

.px-mobile-mode .px-cut-prints .px-cut-print-upload-instructions {
    font-size: inherit;
    margin-top: 0;
}

.px-cut-prints .px-cut-print-upload-instructions p {
    color: var(--neutral-grey-3);
    margin: 64px;
    padding: 48px;
}

.px-mobile-mode .px-cut-prints .px-cut-print-upload-instructions p {
    border: none;
    margin: 0;
}

.px-cut-prints .px-cut-print-upload-instructions p svg {
    display: block;
    margin: 16px auto 0;
}

.px-cut-prints .px-page-sets {
    --page-set-horizontal-padding: 12px;
    --page-set-vertical-padding: 8px;
    --page-thumbs-border-width: 2px;
    --thumb-size: 96px;  /* This is just the initial value which gets updated from JS */
    --page-set-width: calc(var(--thumb-size) + 2 * var(--page-thumbs-border-width) + 2 * var(--page-set-horizontal-padding));
    display: grid;
    gap: 42px 16px;
    grid-template-columns: repeat(auto-fill, var(--page-set-width));
    justify-content: space-between;
    overflow-y: auto;
    padding: 8px 16px 32px;
}

.px-mobile-mode .px-cut-prints .px-page-sets {
    --page-set-horizontal-padding: 8px;
    padding: 16px 8px;
}

.px-mobile-mode:has([data-active-tab="project->cut-print-quantities"]) .px-cut-prints .px-page-sets {
    padding-bottom: 160px;
}

.px-cut-prints .px-page-sets .px-page-set {
    background-color: #fff;
    border: 1px solid var(--neutral-grey-4);
    border-radius: 3px;
    display: inline-block;
    font-size: 0;
    padding: var(--page-set-vertical-padding) var(--page-set-horizontal-padding);
    position: relative;
}

.px-mobile-mode .px-cut-prints .px-page-sets .px-page-set {
    margin-bottom: 16px;
    padding: 0 8px;
}

.px-cut-prints .px-page-sets .px-page-set .px-page-thumbs {
    align-items: center;
    display: flex;
    font-size: 0;  /* to remove extra whitespace between the images and borders */
    height: calc(var(--thumb-size) + 2 * var(--page-thumbs-border-width));
    justify-content: center;
    position: relative;
    text-align: center;
    width: calc(var(--thumb-size) + 2 * var(--page-thumbs-border-width));
}

.px-cut-prints .px-page-sets .px-page-set[data-selected="true"] {
    border-color: var(--brand-color);
    outline: 1px solid var(--brand-color);
}

.px-cut-prints .px-page-sets .px-page-set .px-page-thumbs > svg {
    outline: var(--page-thumbs-border-width) solid var(--pale-grey);
    cursor: pointer;
}

.px-cut-prints .px-page-sets .px-page-set[data-selectable='false'] .px-page-thumbs > svg {
    cursor: not-allowed;
}

.px-cut-prints .px-page-sets .px-page-set .px-page-thumbs .px-image-upload-progress-indicator {
    bottom: 0;
    position: absolute;
    height: var(--cut-print-height);
    top: auto;
    width: var(--cut-print-width);
}

.px-cut-prints .px-page-sets .px-page-set .px-page-captions {
    display: flex;
    font-size: 10px;
    line-height: 18px;
}

.px-cut-prints .px-page-sets .px-page-set .px-page-captions .px-page-caption {
    color: var(--neutral-grey-2);
    flex-grow: 1;
    margin-top: 2px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-cut-prints .px-page-sets .px-page-set .px-cut-print-controls {
    display: flex;
    font-size: 12px;
    justify-content: center;
    padding: 8px 0 2px;
}

.px-cut-prints .px-page-sets .px-page-set .px-cut-print-controls button {
    align-items: center;
    background: white;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 16px;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.px-cut-prints .px-page-sets .px-page-set .px-cut-print-controls button.px-delete-btn {
    margin-left: 16px;
}

.px-cut-prints .px-page-sets .px-page-set .px-cut-print-controls span {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    padding: 0 8px;
}

svg.px-page .elementOutline.editableOutline {
  stroke-dasharray: 2;
}

.px-mobile-mode svg.px-page .elementOutline.editableOutline {
  stroke-dasharray: 5;
}

.px-delete-icon {
  cursor: pointer;
}

.px-text-edit-modal .px-modal-panel {
    width: 600px;
}

.px-text-edit-modal textarea {
    background: var(--palest-grey);
    border: 2px solid var(--pale-grey);
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    font-size: 24px;
    height: 300px;
    line-height: 1;
    outline: none;
    padding: 24px;
    width: 100%;
}

.px-backgrounds-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-backgrounds-panel h1 {
    position: relative;
}

.px-backgrounds-panel h1 button {
    background: none;
    border: none;
    color: var(--icon-danger-color);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.px-backgrounds-panel h1 button svg {
    height: 24px;
}

.px-backgrounds-panel .px-backgrounds {
    --panel-padding: 14px;
    font-size: 0;  /* so that there is no space between inline items */
    padding: var(--panel-padding);
}

.px-backgrounds-panel .px-accordion-content .px-backgrounds {
    --panel-padding: 0;
}

.px-backgrounds-panel .px-backgrounds .px-background {
    --gap: 8px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    margin-bottom: var(--gap);
    margin-right: var(--gap);
    position: relative;
    vertical-align: top;
    width: calc((100% - var(--gap)) / 2);
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"]:not(.px-color)::after {
    background: var(--brand-color);
    bottom: 0;
    box-sizing: border-box;
    content: '';
    left: 0;
    opacity: 0.25;
    position: absolute;
    right: 0;
    top: 0;
}

.px-backgrounds-panel .px-backgrounds .px-background:not(.px-color):nth-child(2n) {
    margin-right: 0;
}

.px-backgrounds-panel .px-backgrounds .px-background.px-color {
    width: calc((100% - (3 * var(--gap))) / 4);
}

.px-backgrounds-panel .px-backgrounds .px-background.px-color:nth-child(4n) {
    margin-right: 0;
}

.px-backgrounds-panel .px-backgrounds .px-background .px-thumbnail {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--neutral-grey-5);
    border-radius: 4px;
    color: var(--icon-color);
    display: flex;
    justify-content: center;
    position: relative;
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"] .px-thumbnail {
    border: 2px solid var(--brand-color);
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"] .px-thumbnail .px-tick-mark {
    color: var(--neutral-grey-2);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"][data-color-scheme="dark"] .px-thumbnail .px-tick-mark {
    color: #fff;
}

.px-backgrounds-panel .px-backgrounds .px-background .px-label {
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-backgrounds-panel .px-backgrounds .px-background img {
    border: 1px solid var(--pale-grey);
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    pointer-events: none;
    width: 100%;
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"]:not(.px-color) img {
    border: 2px solid var(--brand-color);
}

.px-backgrounds-panel .px-backgrounds .px-background[data-selected="true"]:not(.px-color) .px-tick-mark {
    color: var(--brand-color);
    left: 50%;
    position: absolute;
    top: 50%;;
    transform: translate(-50%, -50%);
}

.px-backgrounds-panel .px-backgrounds .px-background.px-add-color-button {
    cursor: pointer;
}

.px-backgrounds-panel .px-backgrounds .px-background.px-add-color-button svg {
    width: 30%;
}

.px-admin-elements-panel .px-add-element-buttons {
    flex-direction: column;
    padding: 18px 0;
}

.px-admin-elements-panel .px-add-element-buttons button {
    display: block;
    margin: 0 auto 18px;
}

.px-admin-elements-panel .px-add-element-buttons button:last-child {
    margin-bottom: 0;
}

.px-admin-elements-panel .px-group-button {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 18px 0;
}

.px-modal.px-inline-page-modal .px-modal-panel {
    min-height: 420px;
}

.px-inline-page-modal .px-modal-footer {
    text-align: right;
}

.px-modal.px-inline-page-modal .px-modal-control {
    margin-bottom: 1em;
}

.px-modal.px-inline-page-modal .px-modal-control label {
    display: block;
    margin-bottom: 6px;
}

.px-modal.px-inline-page-modal .px-crop-inputs {
    display: flex;
    gap: 18px;
}

.px-modal.px-inline-page-modal .px-crop-inputs label {
    font-size: 12px;
}

.px-modal.px-inline-page-modal .px-crop-inputs input {
    height: 32px;
    line-height: 32px;
    max-width: 10ex;
    min-width: 0;
    padding-right: 0;
    text-align: right;
}

.px-tab-content-panel {
    display: flex;
    flex-direction: column;
    height: var(--sidebar-height);
}

.px-tab-content-panel .px-panel-top-section,
.px-tab-content-panel .px-panel-bottom-section {
    flex-shrink: 0;
}

.px-tab-content-panel .px-panel-top-section h1 {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--layout-border-color);
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding: 14px 18px;
}

.px-tab-content-panel .px-panel-top-section h1 button {
    border-radius: 16px;
    float: right;
    height: 28px;
    padding: 0 12px;
    position: relative;
    top: -5px;
}

.px-tab-content-panel .px-panel-top-section h1 button svg {
    margin-right: 6px;
}

.px-tab-content-panel .px-panel-top-section .px-tab-panel-actions {
    border-bottom: 1px solid var(--layout-border-color);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 18px 14px 12px 14px;
}

.px-tab-content-panel .px-panel-top-section .px-tab-panel-actions .px-action-button button {
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--icon-highlight-color);
    display: flex;
    padding: 4px 0;
}

.px-tab-content-panel .px-panel-top-section .px-tab-panel-actions .px-action-button button svg {
    margin-right: 4px;
}

.px-tab-content-panel .px-panel-scrollable-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

.px-tab-content-panel .px-panel-scrollable-section .px-category-tag {
    margin-bottom: 8px;
}

.px-tab-content-panel .px-action-description-area {
    color: var(--neutral-grey-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    justify-content: center;
    line-height: 1.5;
    margin: 18px;
    padding: 36px;
    text-align: center;
}

.px-tab-content-panel .px-action-description-area .px-upload-icon {
    display: block;
    margin-bottom: 12px;
}

.px-tab-content-panel .px-action-description-area .px-upload-icon svg {
    height: 32px;
}

.px-tab-content-panel .px-action-description-area p svg {
    vertical-align: text-bottom;
}

.px-tab-content-panel .px-action-description-area.px-drop-active {
    background-color: rgba(255, 200, 44, 0.05);
    border-color: var(--sun-yellow);
    border-image-source: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="6" y2="0" stroke-width="4" stroke="%23ffc82c"></line><line x1="14" y1="0" x2="20" y2="0" stroke-width="4" stroke="%23ffc82c"></line><line x1="20" y1="0" x2="20" y2="6" stroke-width="4" stroke="%23ffc82c"></line><line x1="20" y1="14" x2="20" y2="20" stroke-width="4" stroke="%23ffc82c"></line><line x1="20" y1="20" x2="14" y2="20" stroke-width="4" stroke="%23ffc82c"></line><line x1="6" y1="20" x2="0" y2="20" stroke-width="4" stroke="%23ffc82c"></line><line x1="0" y1="20" x2="0" y2="14" stroke-width="4" stroke="%23ffc82c"></line><line x1="0" y1="6" x2="0" y2="0" stroke-width="4" stroke="%23ffc82c"></line></svg>');
}

.px-tab-content-panel .px-action-description-area.px-drop-active p {
    color: var(--sun-yellow);
}


.px-tab-content-panel .px-no-items-text {
    padding: 12px 18px;
    text-align: center;
}

.px-tab-content-panel .px-image-selection {
    padding: 14px;
}

.px-tab-content-panel .px-accordion-content .px-image-selection {
    padding: 0;
}

.px-tab-content-panel .px-image-selection .px-image-selection-actions button {
    margin-bottom: 10px;
}

.px-tab-content-panel .px-image-selection .px-image {
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: grab;
    margin-bottom: 8px;
    position: relative;
}
.px-tab-content-panel .px-image-selection .px-image .px-tick-mark {
    color: var(--brand-color);
    position: absolute;
    top: -5px;
    right: -5px;
}

.px-tab-content-panel .px-image-selection .px-image img {
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    display: block;
    pointer-events: none;
    width: 100%;
}

/* The img::after pseudo class only kicks in when image fails to load */
/* This make sure that images are not all squeezed together in chrome if they fail to load. */
.px-tab-content-panel .px-image-selection .px-image img::after {
    content: " ";
    display: block;
    min-height: 120px;
}

.px-tab-content-panel .px-image-selection .px-image .px-image-usage {
    align-items: center;
    background-color: rgba(37, 38, 44, 0.8);
    bottom: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 18px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
}

.px-tab-content-panel .px-image-selection .px-image:hover .px-image-usage {
    visibility: visible;
}

.px-tab-content-panel .px-image-selection .px-image .px-image-usage a {
    color: var(--bright-sky-blue);
    pointer-events: auto;
}

.px-mobile-cut-print-quantity-panel {
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 16px;
    text-align: center;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons {
    align-items: center;
    display: flex;
    justify-content: center;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons button {
    align-items: center;
    background: none;
    border: none;
    box-sizing: border-box;
    color: var(--icon-color);
    display: flex;
    height: 36px;
    justify-content: center;
    line-height: 36px;
    margin: 0 12px;
    padding: 0 4px;
    vertical-align: middle;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons button:first-child {
    margin-left: 0;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons button:last-child {
    margin-right: 0;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons button[disabled] {
    opacity: 0.5;
}

.px-mobile-cut-print-quantity-panel .px-quantity-buttons input[type="number"] {
    background: transparent;
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    text-align: right;
    vertical-align: middle;
    width: 60px;
}

.px-mobile-cut-print-quantity-panel .px-quantity-instructions {
    flex-grow: 1;
    font-size: 12px;
    margin-top: 16px;
}

.px-project-gallery-panel .px-action-description-area {
    border: 2px dashed #c4cbd4;
    border-image-slice: 2;
    border-image-source: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="6" y2="0" stroke-width="4" stroke="%23c4cbd4"></line><line x1="14" y1="0" x2="20" y2="0" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="0" x2="20" y2="6" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="14" x2="20" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="20" y1="20" x2="14" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="6" y1="20" x2="0" y2="20" stroke-width="4" stroke="%23c4cbd4"></line><line x1="0" y1="20" x2="0" y2="14" stroke-width="4" stroke="%23c4cbd4"></line><line x1="0" y1="6" x2="0" y2="0" stroke-width="4" stroke="%23c4cbd4"></line></svg>');
    border-image-repeat: round;
    border-image-width: 2px;
}

.px-project-gallery-panel .px-no-items-content {
    margin: 0;
    height: 100%;
    padding: 16px;
}

.px-project-gallery-panel .px-no-items-content .px-file-upload-button {
    margin-top: 6px;
}

.px-vertical-tabbed-menu {
    display: flex;
    height: 100%;
}

.px-vertical-tabbed-menu .px-tabs {
    border-right: 1px solid var(--layout-border-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    font-size: 10px;
    height: 100%;
    padding-top: 12px;
    overflow: auto;
    width: 54px;
}

.px-vertical-tabbed-menu .px-tabs .px-divider {
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
    width: 100%;
}

.px-vertical-tabbed-menu .px-tabs .px-tab-group {
    flex-shrink: 0;
}

.px-vertical-tabbed-menu .px-tabs .px-tab {
    background-color: transparent;
    border-radius: 12px;
    border: none;
    color: var(--icon-color);
    display: block;
    font: inherit;
    line-height: inherit;
    margin: 24px auto;
    padding: 10px;
    text-align: center;
}

.px-vertical-tabbed-menu .px-tabs .px-tab[data-expanded=true] {
    color: var(--brand-color);
}

.px-vertical-tabbed-menu .px-tabs svg {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 22px;
    max-width: 22px;
}

.px-vertical-tabbed-menu .px-tab-panel {
    flex-grow: 1;
    overflow: auto;
}

.px-vertical-tabbed-menu .px-tab-panel .px-tab-panel-accordion-wrapper {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.px-text-edit-panel .px-edit-controls .px-text-alignment-buttons {
    font-size: 0;  /* remove whitespace */
}

.px-text-edit-panel .px-edit-controls .px-text-alignment-buttons .px-toggle-button {
    width: calc(33.3333% - 5.3333px);
    margin-right: 8px;
}

.px-text-edit-panel .px-edit-controls .px-text-alignment-buttons .px-toggle-button:last-child {
    margin-right: 0;
}

.px-text-edit-panel .px-edit-controls .px-color-picker {
    margin: 18px auto 36px;
}

.px-text-edit-panel .px-edit-controls .px-dropdown-panel .px-font-dropdown-option {
    display: block;
    height: 36px;
}

.px-text-alignment-buttons .px-toggle-button svg {
    box-sizing: border-box;
    display: block;
    height: 18px;
}

.px-text-alignment-buttons .px-toggle-button rect {
    color: var(--icon-color);
}

.px-text-alignment-buttons .px-toggle-button[data-pressed="true"] rect {
    color: #fff;
}

.px-element-icon-tooltip {
    background-color: #ffeebe;
    border-radius: 4px;
    font-size: 12px;
    padding: 8px 12px;
    position: fixed;
    z-index: 99999;
}

.px-element-icon-tooltip[data-style="error"] {
    background-color: #ff7d58;
}

.px-qr-uploader {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;  /* fallback for dvh units, which are not well supported yet */
    height: 100dvh;
}

.px-qr-uploader header {
    align-items: center;
    border-bottom: 1px solid var(--layout-border-color);
    display: flex;
    height: 60px;
    justify-content: center;
}

.px-qr-uploader header img {
    max-height: 36px;
    max-width: 33%;
}

.px-qr-uploader main {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 3em 2em;
}

.px-qr-uploader main label.px-file-upload-button.px-large.px-primary-color.px-strong {
    background: var(--action-button-background-color);
    border: 1px solid var(--neutral-grey-5);
    color: var(--action-button-color);
}

.px-qr-uploader main p {
    margin: 0;
}

.px-qr-uploader main p,
.px-qr-uploader main .px-upload-progress {
    text-align: center;
}

.px-qr-uploader main .px-upload-progress {
    margin: 1rem 0 2rem;
}

.px-qr-uploader main .px-upload-progress progress {
    accent-color: var(--brand-color);
}

.px-qr-uploader main label,
.px-qr-uploader main progress {
    max-width: 240px;
}

.px-qr-uploader main .px-uploads {
    flex-grow: 1;
    font-size: 0.8rem;
    overflow: auto;
    width: 100%;
}

.px-qr-uploader main .px-uploads .px-upload {
    display: flex;
    padding: 2px 0;
}

.px-qr-uploader main .px-uploads .px-upload .px-filename {
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
}

.px-qr-uploader main .px-uploads .px-upload .px-upload-progress-percent,
.px-qr-uploader main .px-uploads .px-upload .px-upload-error {
    line-height: 1.5;
    text-align: right;
    width: 50%;
}

.px-qr-uploader main .px-uploads .px-upload .px-upload-progress-percent {
    color: var(--neutral-grey-3);
}

.px-qr-uploader main .px-uploads .px-upload .px-upload-error {
    color: var(--danger-color);
}

.px-color-picker-modal.px-modal .px-modal-panel {
    min-width: auto;
    padding: 28px 32px;
    text-align: center;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content {
    padding: 0 16px;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-color-picker {
    margin: 0 auto 16px;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content h3 {
    color: var(--neutral-grey-3);
    font-size: 15px;
    font-weight: normal;
    margin: 32px 0 16px;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content .px-suggested-colors {
    display: grid;
    gap: 12px 15px;
    grid-template-columns: 32px 32px 32px 32px 32px;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content .px-suggested-colors .px-color {
    cursor: pointer;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content .px-suggested-colors .px-color .px-thumbnail img {
    border: 1px solid var(--pale-grey);
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content .px-suggested-colors .px-color[data-selected="true"] .px-thumbnail img {
    border: 2px solid var(--brand-color);
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-content .px-suggested-colors .px-color .px-label {
    color: var(--neutral-grey-2);
    font-size: 7px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-color-picker-modal.px-modal .px-modal-panel .px-modal-footer button {
    margin-right: 16px;
}

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

.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-resize-detector {
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

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

.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-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-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-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-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-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-slider-with-numeric-input input {
    display: block;
    margin-left: auto;
    padding: 0;
    text-align: center;
    width: 50px;
}

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

/* These CSS rules assume that the parent of image upload progress indicator component is positioned */

.px-image-upload-progress-indicator {
    position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
}

.px-image-upload-progress-indicator .px-upload-progress {
    background-color: var(--pale-grey);
    bottom: 0;
    height: 6px;
    opacity: 0.8;
    position: absolute;
    width: 100%;
}

.px-image-upload-progress-indicator .px-upload-progress .px-upload-progress-bar {
    background-color: var(--brand-color);
    height: 100%;
    transform-origin: left;
    transition: transform 0.4s linear;
}

.px-image-upload-progress-indicator .px-upload-failure-notice {
    background-color: var(--orangered);
    bottom: 0;
    color: #fff;
    font-size: 12px;
    left: 0;
    opacity: 0.8;
    padding: 3px;
    position: absolute;
    right: 0;
}

.px-mobile-mode .px-image-upload-progress-indicator .px-upload-failure-notice {
    font-size: 8px;
}