
/*!
 * FilePondPluginFilePoster 2.5.2
 * Licensed under MIT, https://opensource.org/licenses/MIT/
 * Please visit https://pqina.nl/filepond/ for details.
 */
.filepond--file-poster-wrapper {
	z-index: 2;
}

.filepond--image-preview-wrapper~.filepond--file-poster-wrapper {
	display: none;
}

.filepond--file-poster-overlay {
	aspect-ratio: auto;
	display: block;
	left: 0;
	margin: 0;
	max-height: 7rem;
	min-height: 5rem;
	mix-blend-mode: multiply;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 100%;
	z-index: 1;
}

.filepond--file-poster-overlay:nth-of-type(2), .filepond--file-poster-overlay:nth-of-type(3) {
	mix-blend-mode: normal;
}

@supports (-webkit-marquee-repetition:infinite) and ((-o-object-fit:fill) or (object-fit:fill)) {
	.filepond--file-poster-overlay {
		mix-blend-mode: normal;
	}
}

.filepond--file-poster-wrapper {
	background: rgba(0, 0, 0, .01);
	border-radius: .45em;
	height: 100%;
	left: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.filepond--file-poster {
	background: #222;
	display: block;
	height: 100%;
	pointer-events: none;
	position: relative;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	width: 100%;
	will-change: transform, opacity;
	z-index: 1;
}

.filepond--file-poster img {
	display: block;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: auto;
	will-change: transform;
}

.filepond--root[data-style-panel-layout~=integrated] .filepond--file-poster-wrapper {
	border-radius: 0;
}

.filepond--root[data-style-panel-layout~=integrated] .filepond--file-poster {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file-poster-wrapper {
	border-radius: 99999rem;
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file-poster-overlay {
	bottom: 0;
	top: auto;
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file .filepond--file-action-button[data-align*=bottom]:not([data-align*=center]) {
	margin-bottom: .325em;
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=left] {
	left: calc(50% - 3em);
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=right] {
	right: calc(50% - 3em);
}

.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=left], .filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=right] {
	margin-bottom: .5125em;
}

.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=center] {
	margin-bottom: .1875em;
	margin-left: .1875em;
	margin-top: 0;
}

/*!
* Pintura v8.92.5 
* (c) 2018-2025 PQINA Inc. - All Rights Reserved
* License: https://pqina.nl/pintura/license/
*/
.PinturaUtilPanel[data-util=retouch] .PinturaControlListScroller+.PinturaControlListScroller {
	margin-top: 1em;
}

.PinturaUtilPanel[data-util=redact] .PinturaUtilFooter {
	padding: 0;
}

.PinturaUtilPanel[data-util=redact] .PinturaUtilFooter>div {
	height: 1px;
}

.pintura-editor, pintura-editor {
	--color-primary: #ffd843;
	--color-primary-dark: #ffc343;
	--color-primary-text: #000;
	--color-secondary: #03a9f4;
	--color-secondary-dark: #046bbf;
	--color-focus: 4, 107, 191;
	--color-focus-100: rgba(var(--color-focus), 1);
	--color-focus-50: rgba(var(--color-focus), .5);
	--color-focus-25: rgba(var(--color-focus), .25);
	--color-error: 255, 87, 34;
	--color-error-100: rgb(var(--color-error));
	--color-error-75: rgba(var(--color-error), .75);
	--color-error-50: rgba(var(--color-error), .5);
	--color-error-25: rgba(var(--color-error), .25);
	--color-error-10: rgba(var(--color-error), .1);
	--color-foreground: 0, 0, 0;
	--color-background: 255, 255, 255;
	--color-preview-outline: var(--color-foreground);
	--color-transition-duration: 250ms;
	--button-cursor: pointer;
	--font-size: 16px;
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--backdrop-filter-bright: brightness(110%) saturate(180%) blur(10px);
	--backdrop-filter-dark: brightness(90%) saturate(180%) blur(10px);
	--border-radius-round: 9999em;
	--border-radius: .625em;
	--filter-disabled: grayscale(95%) opacity(40%);
	--editor-inset-top: 0px;
	--editor-inset-bottom: 0px;
	--safe-area-inset-top: 0px;
	--safe-area-inset-bottom: 0px;
	--pattern-transparent: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' height=\'8\'%3E%3Cpath fill=\'%23E5E5E5\' d=\'M0 0h4v4H0zm4 4h4v4H4z\'/%3E%3C/svg%3E");
	--grid-color-even: rgba(var(--color-foreground), .1);
	--grid-color-odd: rgba(var(--color-background), .1);
	--grid-size: 24;
}

.pintura-editor, .pintura-editor-panel, pintura-editor {
	--color-foreground-100: rgba(var(--color-foreground), 1);
	--color-foreground-95: rgba(var(--color-foreground), .95);
	--color-foreground-90: rgba(var(--color-foreground), .9);
	--color-foreground-80: rgba(var(--color-foreground), .8);
	--color-foreground-70: rgba(var(--color-foreground), .7);
	--color-foreground-60: rgba(var(--color-foreground), .6);
	--color-foreground-50: rgba(var(--color-foreground), .5);
	--color-foreground-40: rgba(var(--color-foreground), .4);
	--color-foreground-30: rgba(var(--color-foreground), .3);
	--color-foreground-20: rgba(var(--color-foreground), .25);
	--color-foreground-15: rgba(var(--color-foreground), .2);
	--color-foreground-10: rgba(var(--color-foreground), .15);
	--color-foreground-5: rgba(var(--color-foreground), .075);
	--color-foreground-3: rgba(var(--color-foreground), .05);
	--color-foreground-1: rgba(var(--color-foreground), .02);
	--color-foreground-0: rgba(var(--color-foreground), 0);
	--color-background-100: rgba(var(--color-background), 1);
	--color-background-95: rgba(var(--color-background), .95);
	--color-background-90: rgba(var(--color-background), .9);
	--color-background-80: rgba(var(--color-background), .8);
	--color-background-70: rgba(var(--color-background), .7);
	--color-background-60: rgba(var(--color-background), .6);
	--color-background-50: rgba(var(--color-background), .5);
	--color-background-40: rgba(var(--color-background), .4);
	--color-background-30: rgba(var(--color-background), .3);
	--color-background-20: rgba(var(--color-background), .2);
	--color-background-15: rgba(var(--color-background), .15);
	--color-background-10: rgba(var(--color-background), .1);
	--color-background-5: rgba(var(--color-background), .05);
	--color-background-3: rgba(var(--color-background), .03);
	--color-background-1: rgba(var(--color-background), .01);
	--color-background-0: rgba(var(--color-background), 0);
}

.PinturaRootWrapper, .pintura-editor, pintura-editor {
	display: block;
}

.PinturaRootWrapper {
	height: 100%;
}

.PinturaScrollableContent {
	max-height: var(--panel-max-height, 100vh);
	overflow: hidden;
	overflow-y: auto;
	scrollbar-color: var(--color-foreground-30) transparent;
	scrollbar-width: thin;
}

.PinturaScrollableContent::-webkit-scrollbar {
	cursor: pointer;
	width: 1em;
}

.PinturaScrollableContent::-webkit-scrollbar-track {
	background: none;
}

.PinturaScrollableContent::-webkit-scrollbar-thumb {
	background-clip: padding-box;
	background-color: var(--color-foreground-30);
	border: .3125em solid transparent;
	border-radius: 9999em;
	cursor: pointer;
}

.PinturaRoot[data-env~=is-animated] {
	--transition-duration-multiplier: 1;
}

.PinturaRoot[data-env~=is-transparent] {
	background: none;
}

.PinturaRoot {
	--nav-group-margin: .5em;
	--editor-calculated-inset-top: calc(var(--safe-area-inset-top) + var(--editor-inset-top));
	--editor-calculated-inset-bottom: calc(var(--safe-area-inset-bottom) + var(--editor-inset-bottom));
	--transition-duration-10: calc(var(--transition-duration-multiplier, 0) * .1s);
	--transition-duration-25: calc(var(--transition-duration-multiplier, 0) * .25s);
	--transition-duration-50: calc(var(--transition-duration-multiplier, 0) * .5s);
	background-color: var(--color-background-100);
	box-sizing: border-box;
	color: var(--color-foreground-90);
	contain: strict;
	direction: ltr;
	display: grid;
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: 450;
	height: var(--editor-height, 100%);
	line-height: normal;
	max-height: var(--editor-max-height, var(--editor-max-height-default, none));
	max-width: var(--editor-max-width, var(--editor-max-width-default, none));
	outline-color: rgba(var(--color-preview-outline), 1);
	overflow: hidden;
	padding-bottom: var(--editor-calculated-inset-bottom);
	padding-top: var(--editor-calculated-inset-top);
	position: relative;
	text-align: left;
	text-rendering: optimizeLegibility;
	text-transform: none;
	touch-action: manipulation;
	transition: background-color 1ms, outline-color 1ms, color var(--transition-duration-10) ease-in-out, dir 1ms;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: var(--editor-width, 100%);
}

.PinturaRoot[dir=rtl] button {
	direction: rtl;
}

.PinturaRoot .PinturaUtilMain {
	cursor: var(--cursor);
}

.PinturaRoot * {
	box-sizing: content-box;
	word-wrap: normal;
}

.PinturaRoot div:empty {
	display: block;
}

.PinturaRoot button, .PinturaRoot fieldset, .PinturaRoot input, .PinturaRoot legend {
	background: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-decoration: none;
	width: auto;
}

.PinturaRoot button[disabled] {
	pointer-events: none;
}

.PinturaRoot canvas {
	display: block;
}

.PinturaRoot svg {
	display: inline-block;
	height: auto;
	max-width: none;
	width: auto;
}

.PinturaRoot p {
	margin: 0;
}

.PinturaRoot li, .PinturaRoot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.PinturaRoot a {
	color: inherit;
	text-decoration: none;
}

.PinturaRoot .implicit {
	border: 0;
	clip: rect(0 0 0 0);
	-webkit-clip-path: polygon(0 0, 0 0, 0 0);
	clip-path: polygon(0 0, 0 0, 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.PinturaRoot .PinturaFixedWidthCharacters {
	font-variant: tabular-nums;
}

.PinturaRoot .PinturaStage {
	align-self: stretch;
	display: flex;
	flex: 1;
	pointer-events: none;
}

.PinturaRoot .PinturaStage[tabindex="-1"] {
	outline: none;
}

.PinturaRoot .PinturaRootPortal, .PinturaRoot>.PinturaCanvas {
	left: 0;
	position: absolute;
	top: 0;
}

.PinturaRoot>.PinturaCanvas {
	height: 100%;
	pointer-events: none;
	width: 100%;
	z-index: 0;
}

.PinturaRoot>.PinturaCanvas canvas {
	height: 100%;
	position: absolute;
	width: 100%;
}

.PinturaRoot>.PinturaCanvas:after {
	background-repeat: no-repeat;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.PinturaRoot>.PinturaStatus {
	align-items: flex-start;
	background-color: var(--color-background-90);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99999;
}

.PinturaRoot>.PinturaStatus>p {
	align-items: center;
	display: inline-flex;
	left: 50%;
	position: absolute;
	top: 50%;
	transition: opacity var(--transition-duration-50) ease-out;
	white-space: nowrap;
}

.PinturaRoot .PinturaStatusMessage {
	font-size: .875em;
	position: absolute;
}

.PinturaRoot .PinturaStatusAside {
	left: 0;
	position: absolute;
}

.PinturaRoot .PinturaStatusAside svg {
	height: 1.25em;
	width: 1.25em;
}

.PinturaRoot .PinturaStatusAside .PinturaProgressIndicator {
	margin-left: .5em;
}

.PinturaRoot .PinturaStatusAside .PinturaButton {
	-webkit-backdrop-filter: var(--backdrop-filter-dark);
	backdrop-filter: var(--backdrop-filter-dark);
	background-color: var(--color-foreground-5);
	border-radius: var(--border-radius-round);
	font-size: .875em;
	margin-left: .75em;
	outline: transparent;
	padding: .25em;
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out;
}

.PinturaRoot .PinturaStatusAside .PinturaButton:not([disabled])[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot .PinturaStatusAside .PinturaButton:not([disabled]):hover {
	background-color: var(--color-foreground-10);
}

.PinturaRoot .PinturaStatusIcon svg {
	font-size: .875em;
	margin-left: .5em;
	margin-top: .25em;
}

.PinturaRoot>.PinturaNav {
	position: relative;
	z-index: 3;
}

.PinturaRoot>.PinturaNav:empty {
	display: none !important;
}

.PinturaRoot>.PinturaNav .PinturaButton {
	outline: transparent;
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out;
}

.PinturaRoot>.PinturaNav .PinturaButton svg {
	transition: opacity var(--transition-duration-10) ease-out;
	width: 1em;
}

.PinturaRoot>.PinturaNav .PinturaButton>span {
	justify-content: center;
}

.PinturaRoot>.PinturaNav .PinturaButtonIconOnly .PinturaButtonInner, .PinturaRoot>.PinturaNav .PinturaDropdownIconOnly .PinturaButtonInner {
	width: 1.75em;
}

.PinturaRoot>.PinturaNav .PinturaButton .PinturaButtonInner {
	height: 1.75em;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) {
	padding-left: .75em;
	padding-right: .75em;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) .PinturaButtonLabel {
	font-size: .75em;
	line-height: 2;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly):not(.PinturaDropdownButton) {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaRoot>.PinturaNav .PinturaButton:only-of-type {
	border-radius: var(--border-radius-round);
}

.PinturaRoot>.PinturaNav .PinturaButton:only-of-type+* {
	margin-left: .5em;
}

.PinturaRoot>.PinturaNav .PinturaButton[disabled] .PinturaButtonLabel, .PinturaRoot>.PinturaNav .PinturaButton[disabled] svg {
	opacity: .25;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonExport):not([disabled])[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonExport):not([disabled]):hover {
	background-color: var(--color-foreground-10);
}

.PinturaRoot .PinturaButtonExport {
	background-color: var(--color-primary);
	color: var(--color-primary-text);
}

.PinturaRoot .PinturaButtonExport:hover {
	background-color: var(--color-primary-dark);
}

.PinturaRoot .PinturaButtonExport[data-focus-visible] {
	background-color: var(--color-primary);
	background-color: var(--color-primary-dark);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5), 0 0 0 3px var(--color-focus-50);
	color: var(--color-primary-text);
}

.PinturaRoot .PinturaButtonExport:not(.PinturaButtonIconOnly) {
	flex: 1;
	padding: 0 .75em;
}

.PinturaRoot>.PinturaNavMain {
	display: flex;
	overflow: hidden;
}

.PinturaRoot>.PinturaNavMain [aria-selected=true] {
	-webkit-backdrop-filter: var(--backdrop-filter-dark);
	backdrop-filter: var(--backdrop-filter-dark);
	background-color: var(--color-foreground-10);
}

.PinturaRoot>.PinturaNavMain button svg {
	align-self: center;
	width: 1.5em;
}

.PinturaRoot>.PinturaNavMain button span, .PinturaRoot>.PinturaNavMain button svg {
	pointer-events: none;
}

.PinturaRoot>.PinturaNavMain button svg+span {
	margin-top: .75em;
}

.PinturaRoot>.PinturaNavMain button span {
	display: block;
	font-size: .875em;
	max-width: calc(100% - 1em);
	overflow: hidden;
	text-overflow: ellipsis;
	width: calc(100% - 1em);
	width: inherit;
}

.PinturaRoot>.PinturaNavMain button {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out;
}

.PinturaRoot>.PinturaNavMain button:hover {
	box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaRoot>.PinturaNavMain button[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot>.PinturaNavTools {
	box-sizing: border-box;
	max-width: 100%;
	pointer-events: none;
}

.PinturaRoot>.PinturaNavTools:empty {
	display: none;
}

.PinturaRoot>.PinturaNavTools, .PinturaRoot>.PinturaNavTools .PinturaNavGroup, .PinturaRoot>.PinturaNavTools .PinturaNavSet {
	align-items: center;
	display: flex;
	justify-content: center;
}

.PinturaRoot>.PinturaNavTools .PinturaButton, .PinturaRoot>.PinturaNavTools .PinturaNavSet {
	pointer-events: all;
}

.PinturaRoot>.PinturaNavTools .PinturaButton[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot .PinturaNavGroup {
	margin: 0 var(--nav-group-margin);
}

.PinturaRoot .PinturaNavGroup>* {
	border-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavGroup>*+* {
	margin-left: .5em;
}

.PinturaRoot .PinturaNavGroup:first-of-type:not(.PinturaNavGroupFloat) {
	margin-left: 0;
	margin-right: auto;
}

.PinturaRoot .PinturaNavGroup:last-of-type:not(.PinturaNavGroupFloat) {
	margin-left: auto;
	margin-right: 0;
}

.PinturaRoot .PinturaNavSet {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaRoot .PinturaNavSet>:not(:only-child) {
	border: 1px solid var(--color-foreground-3);
	border-bottom: 0;
	border-top: 0;
}

.PinturaRoot .PinturaNavSet>:first-child:not(:only-child) {
	border-left: 0;
}

.PinturaRoot .PinturaNavSet>:last-child:not(:only-child) {
	border-right: 0;
}

.PinturaRoot .PinturaNavSet>*+* {
	margin-left: -1px;
}

.PinturaRoot .PinturaNavSet>.PinturaButton:hover, .PinturaRoot .PinturaNavSet>.PinturaButton[data-focus-visible] {
	position: relative;
	z-index: 1;
}

.PinturaRoot .PinturaNavSet>:only-child {
	border-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavSet>:first-child:not(:only-child) .PinturaButtonInner {
	padding: 0 .125em 0 .25em;
}

.PinturaRoot .PinturaNavSet>:first-child:not(:only-child) {
	border-bottom-left-radius: var(--border-radius-round);
	border-top-left-radius: var(--border-radius-round);
}

.PinturaRoot .PinturaNavSet>:last-child:not(:only-child) .PinturaButtonInner {
	padding: 0 .25em 0 .125em;
}

.PinturaRoot .PinturaNavSet>:last-child:not(:only-child) {
	border-bottom-right-radius: var(--border-radius-round);
	border-top-right-radius: var(--border-radius-round);
}

.PinturaRoot[data-env~=overlay] .PinturaNavSet {
	-webkit-backdrop-filter: var(--backdrop-filter-bright);
	backdrop-filter: var(--backdrop-filter-bright);
	background-color: var(--color-background-50);
	box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35);
}

.PinturaRoot[data-env~=overlay] .PinturaNavSet .PinturaButton:not(.PinturaButtonExport):not([disabled]):hover, .PinturaRoot[data-env~=overlay] .PinturaNavSet>* {
	border-color: var(--color-background-15);
}

.PinturaRoot[data-env~=overlay] .PinturaNavGroup>.PinturaButton {
	box-shadow: 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35);
}

.PinturaRoot[data-env~=overlay] .PinturaNavGroup .PinturaButtonExport {
	box-shadow: inset 0 0 .125em rgba(0, 0, 0, .25), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35);
}

.PinturaRoot .PinturaNavGroupFloat {
	pointer-events: none;
}

.PinturaRoot .PinturaNavGroupFloat>* {
	pointer-events: all;
}

.PinturaRoot .PinturaNavGroupFloat:not(:only-child) {
	left: 0;
	position: absolute;
	right: 0;
}

.PinturaRoot .PinturaUtilFooter .PinturaScrollable>div {
	padding-left: 1em;
	padding-right: 1em;
}

.PinturaRoot>.PinturaMain {
	max-width: 100vw;
}

.PinturaRoot:not([data-env~=has-toolbar]) .PinturaUtilHeader {
	margin-bottom: -1em;
	padding-bottom: 1em;
	padding-top: 0;
}

.PinturaRoot[data-env~=landscape] {
	grid-template-columns: auto;
	grid-template-rows: -webkit-min-content auto;
	grid-template-rows: min-content auto;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavTools {
	grid-column: 1;
	grid-row: 1;
	padding: 1em 1em 0;
	z-index: 3;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain {
	align-items: center;
	bottom: calc(1em + var(--editor-calculated-inset-bottom));
	justify-content: flex-end;
	left: 1em;
	position: absolute;
	top: calc(1em + var(--editor-calculated-inset-top));
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain .PinturaTabList {
	flex-direction: column;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain .PinturaTabList button {
	display: flex;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain .PinturaTabList button+button {
	margin: .5em 0 0;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain button {
	border-radius: var(--border-radius);
	flex: 1;
	justify-content: center;
	min-height: 4em;
	min-width: 4em;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain button span {
	font-size: .6875em;
	margin-top: .5em;
}

.PinturaRoot[data-env~=landscape]>.PinturaNavMain button svg {
	margin-top: .25em;
	width: 1em;
}

.PinturaRoot[data-env~=landscape][data-env~=has-toolbar]>.PinturaNavMain {
	bottom: calc(4em + var(--editor-calculated-inset-bottom));
	top: calc(4em + var(--editor-calculated-inset-top));
}

.PinturaRoot[data-env~=landscape][data-env~=has-limited-space]>.PinturaNavMain {
	align-items: flex-start;
	bottom: calc(1em + var(--editor-calculated-inset-bottom));
}

.PinturaRoot[data-env~=landscape]>.PinturaMain {
	grid-column: 1;
	grid-row: 2;
}

.PinturaRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom] {
	grid-template-rows: auto -webkit-min-content;
	grid-template-rows: auto min-content;
}

.PinturaRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom]>.PinturaNavTools {
	grid-row: 2;
	padding-bottom: 1em;
	padding-top: 0;
}

.PinturaRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom]>.PinturaMain {
	grid-row: 1;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation] {
	grid-template-columns: 6em auto;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=narrow]) .PinturaNavGroupFloat {
	margin: 0 0 0 7em;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation]>.PinturaNavTools {
	grid-column: 1/span 2;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation]>.PinturaMain {
	grid-column: 2;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=has-navigation-preference-right]) .PinturaUtilMain {
	padding-left: 0;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=has-navigation-preference-right]) .PinturaUtilFooter {
	padding-right: 1em;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] {
	grid-template-columns: auto 6em;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]:not([data-env~=narrow]) .PinturaNavGroupFloat {
	margin: 0 7em 0 0;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]>.PinturaNavMain {
	left: auto;
	right: 1em;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]>.PinturaMain {
	grid-column: 1;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] .PinturaUtilMain {
	padding-right: 0;
}

.PinturaRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] .PinturaUtilFooter {
	padding-left: 1em;
}

.PinturaRoot[data-env~=portrait] {
	grid-template-columns: auto;
	grid-template-rows: -webkit-min-content auto -webkit-min-content;
	grid-template-rows: min-content auto min-content;
}

.PinturaRoot[data-env~=portrait]>* {
	grid-column: 1;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavTools {
	grid-row: 1;
	padding: .75em .75em 0;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain {
	grid-row: 3;
	justify-content: center;
	margin-bottom: .75em;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain .PinturaTabList {
	padding: 0 .875em;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain button+button {
	margin-left: .5em;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain[data-state~=overflows] {
	overflow: visible;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain button {
	border-radius: var(--border-radius);
	flex: 1;
	justify-content: center;
	min-height: 4em;
	min-width: 4em;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain button span {
	font-size: .6875em;
	margin-top: .5em;
}

.PinturaRoot[data-env~=portrait]>.PinturaNavMain button svg {
	margin-top: .25em;
	width: 1em;
}

.PinturaRoot[data-env~=portrait]>.PinturaMain {
	grid-column: 1;
	grid-row: 2;
}

.PinturaRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom] {
	grid-template-rows: auto -webkit-min-content -webkit-min-content;
	grid-template-rows: auto min-content min-content;
}

.PinturaRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.PinturaNavTools {
	grid-row: 3;
	padding: 0 .75em .75em;
}

.PinturaRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.PinturaNavMain {
	grid-row: 2;
}

.PinturaRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.PinturaMain {
	grid-row: 1;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top] {
	grid-template-rows: -webkit-min-content -webkit-min-content auto;
	grid-template-rows: min-content min-content auto;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top]>.PinturaMain {
	grid-row: 3;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top]>.PinturaNavMain {
	grid-row: 2;
	margin-bottom: 0;
	margin-top: .75em;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom] {
	grid-template-rows: -webkit-min-content auto -webkit-min-content;
	grid-template-rows: min-content auto min-content;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.PinturaNavMain {
	grid-row: 1;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.PinturaMain {
	grid-row: 2;
}

.PinturaRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.PinturaNavTools {
	grid-row: 3;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact]>.PinturaNavMain button {
	align-items: center;
	border-radius: var(--border-radius);
	flex: 1;
	flex-direction: row;
	height: auto;
	justify-content: flex-start;
	min-height: auto;
	padding: .625em 0;
	width: auto;
	width: 6em;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact]>.PinturaNavMain button span {
	font-size: .6875em;
	line-height: 1.2;
	margin: 0 .625em 0 0;
	text-align: left;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact]>.PinturaNavMain button svg {
	margin: 0 .5em 0 .625em;
	min-width: 1em;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact][data-env~=has-navigation] {
	grid-template-columns: 8em auto;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact][data-env~=has-navigation][data-env~=has-navigation-preference-right] {
	grid-template-columns: auto 8em;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact][dir=rtl]>.PinturaNavMain button {
	padding-left: .625em;
}

.PinturaRoot[data-env~=landscape][data-env~=is-compact][dir=rtl]>.PinturaNavMain svg {
	margin-left: 0;
}

.PinturaRoot[data-env~=narrow] .PinturaNavGroupFloat {
	margin: 0;
	position: static;
}

.PinturaRoot[data-env~=portrait][data-env~=is-compact]>.PinturaNavMain button {
	border-radius: 9999em;
	font-size: .625em;
	justify-content: center;
	min-height: 4em;
	min-width: 4em;
	padding: 0;
}

.PinturaRoot[data-env~=portrait][data-env~=is-compact]>.PinturaNavMain button span {
	font-size: 0;
	margin: 0;
	visibility: hidden;
}

.PinturaRoot[data-env~=portrait][data-env~=is-compact]>.PinturaNavMain button svg {
	margin-top: 0;
	width: 1.6em;
}

.PinturaRoot[data-env~=portrait][data-env~=is-compact]>.PinturaNavMain button svg [stroke-width] {
	stroke-width: .15em;
}

.PinturaRoot[data-env~=portrait][data-env~=narrow] {
	--nav-group-margin: .25em;
	grid-template-columns: auto;
	grid-template-rows: -webkit-min-content auto -webkit-min-content;
	grid-template-rows: min-content auto min-content;
}

.PinturaRoot[data-env~=portrait][data-env~=narrow]>* {
	grid-column: 1;
}

.PinturaRoot[data-env~=portrait][data-env~=narrow] .PinturaUtilFooter .PinturaControlList .PinturaControlListOption span, .PinturaRoot[data-env~=portrait][data-env~=narrow] .PinturaUtilFooter .PinturaControlList [role=tab] span {
	font-size: .6875em;
}

.PinturaRoot[data-env~=portrait][data-env~=narrow] .PinturaToolbar .PinturaToolbarInner>* {
	margin: 0 .25em;
}

.PinturaRoot[data-env~=portrait][data-env~=narrow][data-env~=has-toolbar-preference-bottom] {
	grid-template-rows: auto -webkit-min-content -webkit-min-content;
	grid-template-rows: auto min-content min-content;
}

.PinturaRoot[data-env~=overlay] {
	grid-template-columns: auto !important;
	grid-template-rows: auto !important;
}

.PinturaRoot[data-env~=overlay] .PinturaNav {
	z-index: 3;
}

.PinturaRoot[data-env~=overlay] .PinturaMain {
	grid-column: 1;
	grid-row: 1;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilMain {
	bottom: 0;
	left: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter, .PinturaRoot[data-env~=overlay] .PinturaUtilHeader {
	left: 0;
	position: absolute;
	right: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilHeader {
	top: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter {
	bottom: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaNavMain {
	background: none;
	bottom: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaNavTools {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.PinturaRoot[data-env~=overlay][data-env~=has-controlgroups-preference-top] .PinturaUtilFooter {
	bottom: auto;
	top: 0;
}

.PinturaRoot[data-env~=overlay][data-env~=has-toolbar-preference-bottom] .PinturaNavTools {
	bottom: 0;
	top: auto;
}

.PinturaRoot[data-env~=has-swipe-navigation] .PinturaUtilMain {
	padding-left: 2em;
	padding-right: 2em;
}

.PinturaRoot[data-env~=has-swipe-navigation][data-env~=landscape] .PinturaUtilMain[data-env~=has-navigation] {
	padding-left: 0;
	padding-right: 2em;
}

.PinturaRoot[data-env~=has-swipe-navigation][data-env~=landscape] .PinturaUtilMain[data-env~=has-navigation][data-env~=has-navigation-preference-right] {
	padding-left: 2em;
	padding-right: 0;
}

.PinturaRoot[data-env*=is-disabled], .PinturaRoot[data-env*=is-disabled] * {
	pointer-events: none !important;
}

.PinturaRoot[data-env*=is-disabled] {
	--color-primary: #b4b4b4;
	--color-primary-dark: #a0a0a0;
	--color-primary-text: #000;
	--color-secondary: #969696;
	--color-secondary-dark: #646464;
}

.PinturaRoot[data-env*=is-disabled] .PinturaCanvas, .PinturaRoot[data-env*=is-disabled] .PinturaColorPickerButton {
	filter: grayscale(100%);
}

.PinturaRoot .PinturaEditorOverlay {
	background: var(--color-background-50);
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm) {
	@supports (-webkit-appearance:none) {
		.PinturaNav {
			will-change: transform;
		}
	}
}

.PinturaUtilPanel[data-util=frame] .PinturaShapeStyleEditor {
	min-height: 3.375em;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption {
	border: 1px dashed var(--color-foreground-15);
	color: var(--color-foreground-70);
	margin: 1em 1em 0 0;
	padding: .125em;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption span {
	color: var(--color-foreground-90);
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption label {
	font-size: .75em;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption img, .PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption svg {
	height: 100%;
	left: 0;
	-o-object-fit: contain;
	object-fit: contain;
	position: absolute;
	top: 0;
	width: 100%;
}

.PinturaUtilPanel[data-util=frame] [data-selected=true] {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.PinturaUtilPanel[data-util=frame] [data-selected=true] span {
	color: var(--color-foreground-90);
}

.PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li {
	margin: 0 .5em;
}

.PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li:first-child {
	margin-left: 0;
}

.PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li:last-child {
	margin-right: 0;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOptionGroupLabel {
	font-size: 0;
	height: 1px;
	position: absolute;
	width: 1px;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOptionGroup {
	display: flex;
	flex-direction: column-reverse;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption {
	cursor: var(--button-cursor);
	margin-bottom: 1em;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption span {
	display: block;
	font-size: .625em;
	font-weight: 400;
	padding: 0 1.5em;
	text-align: center;
}

.PinturaUtilPanel[data-util=frame] [data-focus-visible]+label span {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption {
	height: 4em;
	position: relative;
	width: 3em;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption div {
	border-color: currentColor;
	cursor: var(--button-cursor);
	outline-color: currentColor;
	position: absolute;
}

.PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption div[slot] {
	align-items: center;
	bottom: -1px;
	display: flex;
	justify-content: center;
	left: -1px;
	overflow: hidden;
	right: -1px;
	top: -1px;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] .PinturaUtilFooter>div {
	padding: 0;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption {
	height: 3em;
	width: 2.25em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] .PinturaRadioGroupOption span {
	font-size: .5em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li {
	margin: 0 .25em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li:first-child {
	margin-left: 0;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=frame] [data-layout=row]>.PinturaRadioGroupOptions>li:last-child {
	margin-right: 0;
}

.PinturaUtilPanel[data-util=filter] .PinturaUtilFooter {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.PinturaUtilPanel[data-util=filter] .PinturaScrollable {
	width: 40em;
}

.PinturaUtilPanel[data-util=filter] [data-layout=row]>.PinturaRadioGroupOptions>li {
	margin: 0 .5em;
}

.PinturaUtilPanel[data-util=filter] [data-layout=row]>.PinturaRadioGroupOptions>li:first-child {
	margin-left: 0;
}

.PinturaUtilPanel[data-util=filter] [data-layout=row]>.PinturaRadioGroupOptions>li:last-child {
	margin-right: 0;
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptionGroupLabel {
	font-size: 0;
	height: 1px;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterPreview {
	border-radius: 0;
	transition: border-radius 1ms;
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterOption {
	border-radius: 0;
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type .PinturaFilterPreview {
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type .PinturaFilterOption {
	border-bottom-left-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type .PinturaFilterPreview {
	border-bottom-right-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type .PinturaFilterOption {
	border-bottom-right-radius: var(--border-radius);
}

.PinturaUtilPanel[data-util=filter] .PinturaRadioGroupOptionGroup {
	display: flex;
	flex-direction: column-reverse;
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterOption {
	cursor: var(--button-cursor);
	margin-bottom: 1em;
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterOption span {
	display: block;
	font-size: .625em;
	font-weight: 400;
	line-height: 1.75;
	margin-left: 1px;
	max-width: 100%;
	overflow: hidden;
	padding: 0 .3125em;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterPreview:before {
	transition: background-color var(--transition-duration-10), color var(--transition-duration-10);
}

.PinturaUtilPanel[data-util=filter] [data-selected=true] .PinturaFilterOption .PinturaFilterPreview {
	position: relative;
	z-index: 1;
}

.PinturaUtilPanel[data-util=filter] [data-selected=true] .PinturaFilterOption .PinturaFilterPreview:before {
	background-color: var(--color-primary);
	border-radius: inherit;
	content: "";
	height: 100%;
	opacity: .35;
	position: absolute;
	width: 100%;
}

.PinturaUtilPanel[data-util=filter] [data-focus-visible]+label>.PinturaFilterOption span {
	background-color: var(--color-focus-50);
	border-radius: .25em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilPanel[data-util=filter] .PinturaFilterOption, .PinturaUtilPanel[data-util=filter] .PinturaFilterPreview {
	height: 4.5em;
	width: 3.75em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=filter] .PinturaUtilFooter>div {
	padding: 0;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=filter] .PinturaFilterOption, .PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=filter] .PinturaFilterPreview {
	height: 3.5em;
	width: 2.875em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=filter] .PinturaFilterOption span {
	font-size: .5em;
}

.PinturaUtilPanel[data-util=crop] .PinturaStage {
	touch-action: none;
}

.PinturaUtilPanel[data-util=crop], .PinturaUtilPanel[data-util=crop] .PinturaStage, .PinturaUtilPanel[data-util=crop] .PinturaUtilMain {
	pointer-events: all;
}

.PinturaUtilPanel[data-util=crop] .PinturaImageInfo {
	bottom: 1em;
	position: absolute;
	right: 1em;
}

.PinturaUtilPanel[data-util=crop] .PinturaButtonCenter {
	--size: 3em;
	-webkit-backdrop-filter: var(--backdrop-filter-bright);
	backdrop-filter: var(--backdrop-filter-bright);
	background: hsla(0, 0%, 100%, .8);
	border-radius: 50%;
	color: #000;
	height: var(--size);
	left: 0;
	line-height: 0;
	margin-left: calc(var(--size) * -.5);
	margin-top: calc(var(--size) * -.5);
	outline: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: var(--size);
	z-index: 1;
}

.PinturaUtilPanel[data-util=crop] .PinturaButtonCenter[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRoot[data-env~=short] .PinturaUtilPanel[data-util=crop] .PinturaUtilFooter {
	padding-bottom: .5em;
}

.PinturaImageInfo, .PinturaRoot[data-env~=overlay] .PinturaUtilPanel[data-util=crop] .PinturaUtilFooter, .PinturaRoot[data-env~=overlay] .PinturaUtilPanel[data-util=crop] .PinturaUtilFooter>[slot]:empty {
	pointer-events: none;
}

.PinturaImageInfo p {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-feature-settings: "tnum";
	font-size: .75em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: right;
}

.PinturaImageInfo:not([data-custom]) p {
	contain: strict;
	height: 1.25em;
	overflow: hidden;
	white-space: nowrap;
	width: 8em;
}

.PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li {
	margin: 0 .25em;
}

.PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li:first-child {
	margin-left: 0;
}

.PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li:last-child {
	margin-right: 0;
}

.PinturaUtilPanel[data-util=fill] .PinturaRadioGroupOption {
	height: 4em;
	position: relative;
	width: 3em;
}

.PinturaUtilPanel[data-util=fill] .PinturaFillTile {
	height: 100%;
	position: absolute;
	width: 100%;
}

.PinturaUtilPanel[data-util=fill] .PinturaFillTile[data-transparent=true] {
	background-color: #fff;
	background-image: var(--pattern-transparent);
	border-radius: calc(var(--border-radius) + 1px);
}

.PinturaUtilPanel[data-util=fill] .PinturaFillTile div, .PinturaUtilPanel[data-util=fill] .PinturaFillTile img {
	border-radius: var(--border-radius);
	cursor: var(--button-cursor);
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.PinturaUtilPanel[data-util=fill] .PinturaFillTile:after {
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	content: "";
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 3;
}

.PinturaUtilPanel[data-util=fill] .PinturaRadioGroupOption[data-selected=true] .PinturaFillTile:after {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5), inset 0 0 0 4px var(--color-primary), inset 0 0 0 5px var(--color-foreground-5);
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] .PinturaUtilFooter>div {
	padding: 0;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] .PinturaRadioGroupOption {
	height: 3em;
	width: 2.25em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] .PinturaRadioGroupOption span {
	font-size: .5em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li {
	margin: 0 .175em;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li:first-child {
	margin-left: 0;
}

.PinturaRoot[data-env~=is-compact] .PinturaUtilPanel[data-util=fill] [data-layout=row]>.PinturaRadioGroupOptions>li:last-child {
	margin-right: 0;
}

.PinturaUtilPanel[data-util=resize] form {
	display: flex;
	justify-content: center;
	padding: 0 1em;
}

.PinturaUtilPanel[data-util=resize] .PinturaFormInner {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative;
}

.PinturaUtilPanel[data-util=resize] .PinturaFormInner>button {
	left: 100%;
	margin-left: 1em;
	position: absolute;
}

.PinturaUtilPanel[data-util=resize] .PinturaFieldsetInner {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.PinturaUtilPanel[data-util=resize] .PinturaFieldsetInner>* {
	margin: .25em;
}

.PinturaUtilPanel[data-util=resize] .PinturaResizeLabel {
	font-size: .75em;
}

.PinturaUtilPanel[data-util=resize] .PinturaDropdownButton {
	background-color: var(--color-foreground-5);
	border-radius: var(--border-radius-round);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	margin-left: .5em;
	margin-right: .5em;
	transition: background-color var(--transition-duration-10);
}

.PinturaUtilPanel[data-util=resize] .PinturaDropdownButton:hover {
	background-color: var(--color-foreground-10);
}

.PinturaUtilPanel[data-util=resize] .PinturaDropdownButton .PinturaButtonLabel {
	display: block;
	font-size: .75em;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	line-height: 2.65;
	padding: 0 1em;
}

.PinturaUtilPanel[data-util=resize] .PinturaDropdownButton .PinturaButtonLabel:after {
	content: "▼";
	font-size: .6875em;
	margin-left: .75em;
	margin-right: -.25em;
	pointer-events: none;
	position: relative;
	top: -.125em;
}

.PinturaUtilPanel[data-util=resize] input[type=checkbox]+label {
	cursor: pointer;
	display: block;
	margin: 0 -.25em;
	outline: transparent;
	padding: 0 .125em;
}

.PinturaUtilPanel[data-util=resize] input[type=checkbox][data-focus-visible]+label {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaInputDimension {
	align-items: center;
	display: inline-flex;
	position: relative;
}

.PinturaInputDimension label {
	color: var(--color-foreground-80);
	font-size: .75em;
	pointer-events: none;
	position: absolute;
	right: .625em;
	text-transform: uppercase;
	z-index: 1;
}

.PinturaInputDimension button, .PinturaInputDimension input, .PinturaInputDimension label {
	font-size: .75em;
	font-weight: 400;
}

.PinturaInputDimension button, .PinturaInputDimension input {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: textfield;
	border: 1px solid var(--color-foreground-80);
	border-radius: var(--border-radius);
	box-shadow: none;
	box-sizing: border-box;
	font-variant-numeric: tabular-nums;
	max-width: 7em;
	outline: transparent;
	padding: .625em 0 .625em .625em;
	transition: background-color var(--transition-duration-10) ease-in-out, color var(--transition-duration-10) ease-in-out, border-color var(--transition-duration-10) ease-in-out;
	width: 100%;
}

.PinturaInputDimension button::-moz-selection, .PinturaInputDimension input::-moz-selection {
	background-color: var(--color-foreground-20);
}

.PinturaInputDimension button::selection, .PinturaInputDimension input::selection {
	background-color: var(--color-foreground-20);
}

.PinturaInputDimension button:hover, .PinturaInputDimension input:hover {
	background-color: var(--color-foreground-10);
}

.PinturaInputDimension button:focus, .PinturaInputDimension input:focus {
	border-color: var(--color-focus-100);
}

.PinturaInputDimension input {
	background-color: var(--color-foreground-5);
}

.PinturaInputDimension input:-moz-placeholder-shown+label {
	color: var(--color-foreground-20);
}

.PinturaInputDimension input:-ms-input-placeholder+label {
	color: var(--color-foreground-20);
}

.PinturaInputDimension input:placeholder-shown+label {
	color: var(--color-foreground-20);
}

.PinturaInputDimension input::-moz-placeholder {
	color: var(--color-foreground-30);
}

.PinturaInputDimension input:-ms-input-placeholder {
	color: var(--color-foreground-30);
}

.PinturaInputDimension input::placeholder {
	color: var(--color-foreground-30);
}

.PinturaInputDimension input[data-state=invalid] {
	border-color: var(--color-error-75);
	box-shadow: inset 0 0 .25em var(--color-error-25), 0 0 .25em var(--color-error-50);
}

.PinturaInputDimension button {
	min-height: 2.65em;
	width: 10em;
}

.PinturaInputDimension input::-webkit-inner-spin-button, .PinturaInputDimension input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.PinturaInputDimension input::-ms-clear {
	display: none;
}

.PinturaRoot[dir=rtl] .PinturaInputDimension label {
	left: .625em;
	right: auto;
}

.PinturaRoot[dir=rtl] .PinturaInputDimension input {
	padding-left: 0;
	padding-right: .625em;
	text-align: right;
}

.PinturaModal {
	--safe-area-inset-top: env(safe-area-inset-top);
	--safe-area-inset-bottom: env(safe-area-inset-bottom);
	--editor-modal-border-radius: 0;
	--editor-modal-overlay-opacity: .95;
	--editor-modal-shadow: 0 1em 2em -1em rgba(0, 0, 0, .25), 0 1.5em 1.5em -2em rgba(0, 0, 0, .5);
	--editor-modal-outline: inset 0 0 0 1px var(--color-foreground-3);
	align-items: center;
	background-color: rgba(var(--color-background), var(--editor-modal-overlay-opacity, var(--editor-modal-overlay-opacity-default, .95)));
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2147483646;
}

@supports (height:100dvh) {
	.PinturaModal {
		height: 100dvh;
	}
}

.PinturaModal>.PinturaRoot[data-env~=is-centered] {
	border-radius: var(--editor-modal-border-radius);
	box-shadow: var(--editor-modal-shadow);
}

.PinturaModal>.PinturaRoot[data-env~=is-centered]:after {
	border-radius: inherit;
	bottom: 0;
	box-shadow: var(--editor-modal-outline);
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2147483646;
}

.PinturaModal[style*="--viewport-pad-footer:1"] {
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.PinturaModal+.PinturaModal {
	--editor-modal-overlay-opacity-default: .75;
}

@media (min-width:600px)and (min-height:600px) {
	.PinturaModal+.PinturaModal .PinturaRoot {
		--editor-max-width-default: calc(100vw - 8em);
		--editor-max-height-default: calc(100vh - 8em);
	}
}

.PinturaDocumentLock, .PinturaDocumentLock body {
	box-sizing: border-box;
	height: calc(var(--pintura-document-height) - 1px);
	overflow-y: hidden;
}

.PinturaDocumentLock body {
	position: relative;
}

.PinturaDocumentLock .PinturaModal {
	height: 100% !important;
}

.PinturaTabPanels {
	display: grid;
	flex: 1;
	grid-template-columns: 1fr;
}

.PinturaTabPanel {
	grid-column-start: 1;
	grid-row-start: 1;
	min-width: 0;
	position: relative;
}

.PinturaTabPanel:not([hidden]) {
	outline: transparent;
	z-index: 2;
}

.PinturaTabPanel[hidden] {
	display: block !important;
	pointer-events: none;
	z-index: 1;
}

.PinturaTabPanel[data-inert=true] {
	visibility: hidden;
}

@supports not (aspect-ratio:1) {
	.PinturaTabPanel {
		overflow-x: hidden;
	}
}

.PinturaTabList {
	display: flex;
	justify-content: center;
}

.PinturaTabList button {
	align-items: center;
	cursor: var(--button-cursor);
	display: flex;
	flex-direction: column;
	outline: transparent;
	-webkit-tap-highlight-color: transparent;
}

.PinturaTabList button>* {
	transition: filter var(--transition-duration-10) ease-out;
}

.PinturaTabList button[disabled]>* {
	filter: var(--filter-disabled);
}

.PinturaScrollable {
	--scrollable-feather-start-opacity: 0;
	--scrollable-feather-end-opacity: 0;
	--scrollable-feather-size: 2em;
	contain: paint;
	overflow: hidden;
}

.PinturaScrollable:focus {
	outline: transparent;
}

.PinturaScrollable>div {
	display: inline-flex;
	position: relative;
	vertical-align: top;
}

.PinturaScrollable {
	touch-action: none;
}

.PinturaScrollable[data-direction=x] {
	max-width: 100%;
	--mask-angle: 90deg;
}

.PinturaScrollable[data-direction=y] {
	max-height: 100%;
	--mask-angle: 180deg;
}

.PinturaScrollable[data-state~=overflows] {
	-webkit-mask: linear-gradient(var(--mask-angle), rgba(0, 0, 0, var(--scrollable-feather-start-opacity)), #000 var(--scrollable-feather-size), #000 calc(100% - var(--scrollable-feather-size)), rgba(0, 0, 0, var(--scrollable-feather-end-opacity)));
	mask: linear-gradient(var(--mask-angle), rgba(0, 0, 0, var(--scrollable-feather-start-opacity)), #000 var(--scrollable-feather-size), #000 calc(100% - var(--scrollable-feather-size)), rgba(0, 0, 0, var(--scrollable-feather-end-opacity)));
}

.PinturaScrollable[data-state~=scrolling]>div * {
	pointer-events: none;
}

.PinturaProgressIndicator {
	display: block;
	height: 1.25em;
	position: relative;
	width: 1.25em;
}

.PinturaProgressIndicator svg {
	pointer-events: none;
	vertical-align: top;
}

.PinturaProgressIndicator .PinturaProgressIndicatorFill {
	stroke-dashoffset: 0;
}

.PinturaProgressIndicator[data-status=busy] svg {
	-webkit-animation: image_editor_spin 1s linear infinite;
	animation: image_editor_spin 1s linear infinite;
}

.PinturaProgressIndicator[data-status=busy] .PinturaProgressIndicatorFill {
	stroke-dashoffset: -26.5;
	stroke-dasharray: 26.5 53;
	transition: stroke-dashoffset .5s linear, stroke-dasharray .5s linear;
}

@-webkit-keyframes image_editor_spin {
	0% {
		transform: rotate(0deg);
	}
	
	to {
		transform: rotate(1turn);
	}
}

@keyframes image_editor_spin {
	0% {
		transform: rotate(0deg);
	}
	
	to {
		transform: rotate(1turn);
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
	.PinturaRoot[data-env~=is-ios] .PinturaProgressIndicator svg {
		transform-origin: 49% 49%;
	}
}

.PinturaButton {
	flex-shrink: 0;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	cursor: var(--button-cursor);
}

.PinturaButton>span {
	align-items: center;
	display: inline-flex;
	min-height: 1em;
	vertical-align: top;
}

.PinturaButton svg+.PinturaButtonLabel {
	margin-left: .5em;
}

.PinturaButton[disabled] {
	cursor: default;
	filter: var(--filter-disabled);
}

.PinturaButtonInner {
	text-decoration: inherit;
}

.PinturaButton:not(.PinturaButtonIconOnly) svg:first-of-type {
	margin-left: -.25em;
}

.PinturaRoot[dir=rtl] .PinturaButton:not(.PinturaButtonIconOnly) svg:first-of-type {
	margin-right: -.25em;
}

.PinturaRoot[dir=rtl] .PinturaButton svg+.PinturaButtonLabel {
	margin-left: 0;
	margin-right: 1em;
}

.PinturaUtilPanel {
	box-sizing: border-box;
	contain: layout size;
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
	position: relative;
	z-index: 1;
}

.PinturaUtilPanel, .PinturaUtilPanel>* {
	padding-bottom: .5em;
	padding-top: .5em;
}

.PinturaInputForm {
	cursor: auto;
	opacity: 0;
	z-index: 2147483647;
	--width: 30em;
}

.PinturaInputForm:not([data-stick=true]) {
	background-color: var(--color-background-95);
	border-radius: var(--border-radius);
	bottom: 7.5em;
	box-shadow: 0 .25em .5em -.5em rgba(0, 0, 0, .75), inset 0 0 0 1px var(--color-foreground-5);
	left: calc(50% - var(--width) / 2);
	position: absolute;
	width: var(--width);
}

@media (max-width:34em) {
	.PinturaInputForm:not([data-stick=true]) {
		left: 2em;
		right: 2em;
		width: auto;
	}
}

.PinturaInputForm[data-stick=true] {
	background-color: var(--color-background-100);
	left: 0;
	outline: 1px solid var(--color-foreground-15);
	position: absolute;
	right: 0;
	transition: opacity .15s ease .25s;
}

.PinturaInputForm[data-stick=true]>.PinturaInputFormInner {
	background-color: var(--color-foreground-3);
}

.PinturaInputFormInner>.PinturaButton {
	border-radius: 9999em;
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	color: var(--color-foreground-100);
}

.PinturaInputFormInner>.PinturaButton:first-of-type {
	left: 1em;
}

.PinturaInputFormInner>.PinturaButton:last-of-type {
	background: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	color: var(--color-primary-text);
	right: 1rem;
}

.PinturaInputFormInner>.PinturaButton:not(.PinturaButtonIconOnly) .PinturaButtonInner {
	padding: 0 .875em;
}

.PinturaInputFormInner>.PinturaButton .PinturaButtonIcon {
	height: .875em;
	width: .875em;
}

.PinturaInputFormInner>.PinturaButton.PinturaButtonIconOnly {
	height: 1.875em;
	width: 1.875em;
}

.PinturaInputFormInner>.PinturaButton .PinturaButtonLabel {
	font-size: .75em;
}

.PinturaInputFormInner>.PinturaButton .PinturaButtonInner {
	display: flex;
	justify-content: center;
	line-height: 2;
}

.PinturaInputFormInner {
	padding-bottom: 3.5em;
	padding-top: 1em;
}

.PinturaInputFormInner>.PinturaButton {
	bottom: 1em;
	position: absolute;
}

.PinturaInputFormFields textarea:only-child {
	height: 5em;
	-webkit-mask: linear-gradient(0deg, transparent, #000 1em);
	mask: linear-gradient(0deg, transparent, #000 1em);
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar {
	cursor: pointer;
	width: 1em;
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar-track {
	background: none;
}

.PinturaInputFormFields textarea:only-child::-webkit-scrollbar-thumb {
	background-clip: padding-box;
	background-color: var(--color-foreground-70);
	border: .25em solid transparent;
	border-radius: 9999em;
	cursor: pointer;
}

.PinturaInputFormFields input:only-child, .PinturaInputFormFields textarea:only-child {
	background: transparent;
	display: block;
	padding: 0 1em .5em;
	width: 100%;
}

.PinturaInputForm input, .PinturaInputForm textarea {
	border: none;
	box-sizing: border-box;
	color: var(--color-foreground-100);
	font-size: .875em;
	outline: transparent;
	resize: none;
}

.PinturaInputForm input {
	background-color: var(--color-background-100);
}

.PinturaModalBodyLock .PinturaInputForm {
	margin-top: -50px;
}

.PinturaInputForm[data-layout=row] {
	--width: 30em;
	border-radius: 9999em;
	max-width: calc(100% - 2em);
	width: var(--width);
}

.PinturaInputForm[data-layout=row] .PinturaInputFormFields {
	flex: 1;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner {
	display: flex;
	padding: .5em;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner input {
	flex: 1;
	font-size: .8125em;
	line-height: 1.75;
	padding: 0 .5em;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner .PinturaButton:first-child {
	margin-right: 0;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner .PinturaButton {
	position: static;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner .PinturaButtonIconOnly {
	height: 1.5em;
	width: 1.5em;
}

.PinturaInputForm[data-layout=row] .PinturaInputFormInner .PinturaButtonLabel {
	font-size: .625em;
}

.PinturaUtilMain {
	min-height: 1px;
	padding-left: 1em;
	padding-right: 1em;
	touch-action: none;
}

.PinturaUtilMain, .PinturaUtilMain>[slot] {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.PinturaUtilMain>[slot] {
	align-items: center;
}

.PinturaUtilFooter>[slot]:empty {
	min-height: 1em;
}

.PinturaUtilFooter>[slot] {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	pointer-events: all;
}

.PinturaUtilFooter .PinturaControlPanel .PinturaImageButtonList, .PinturaUtilFooter .PinturaShapeStyleList {
	align-items: flex-start;
	min-height: 3.5em;
}

.PinturaUtilFooter .PinturaControlList [role=tab][aria-selected=true] {
	background-color: var(--color-foreground-10);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label, .PinturaUtilFooter .PinturaControlList [role=tab] {
	border-radius: var(--border-radius-round);
	box-shadow: inset 0 0 0 1px var(--color-foreground-0);
	cursor: var(--button-cursor);
	flex-direction: row;
	line-height: 1;
	min-height: 1.75em;
	padding: 0 .75em;
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, filter var(--transition-duration-25) ease-out;
	white-space: nowrap;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label span, .PinturaUtilFooter .PinturaControlList [role=tab] span {
	font-size: .75em;
	font-weight: 400;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg, .PinturaUtilFooter .PinturaControlList [role=tab] svg {
	font-size: .875em;
	width: .875em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:only-child, .PinturaUtilFooter .PinturaControlList [role=tab] svg:only-child {
	margin-left: -.25em;
	margin-right: -.25em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:not(:only-child), .PinturaUtilFooter .PinturaControlList [role=tab] svg:not(:only-child) {
	margin-left: -.25em;
	margin-right: .375em;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label:hover, .PinturaUtilFooter .PinturaControlList [role=tab]:hover {
	box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label[data-focus-visible], .PinturaUtilFooter .PinturaControlList [role=tab][data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilFooter .PinturaControlListOption [slot], .PinturaUtilFooter .PinturaControlListOption label {
	align-items: center;
	display: flex;
	flex-direction: row;
}

.PinturaUtilFooter .PinturaControlListOption[data-selected=true] label {
	background-color: var(--color-foreground-10);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaUtilFooter .PinturaControlListOption input[data-focus-visible]+label {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaUtilFooter .PinturaControlListOption input[disabled]+label {
	filter: var(--filter-disabled);
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption+.PinturaControlListOption, .PinturaUtilFooter .PinturaControlList>button+button {
	margin-left: .5em;
}

.PinturaUtilFooter .PinturaControlPanels {
	display: grid;
	flex: auto;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 100%;
	width: 40em;
}

.PinturaUtilFooter .PinturaControlPanel {
	grid-column-start: 1;
	grid-row-start: 1;
	max-width: 100%;
	opacity: 1;
	overflow: hidden;
	visibility: visible;
}

.PinturaUtilFooter .PinturaControlPanel[hidden] {
	display: block !important;
	opacity: 0;
	pointer-events: none;
	transition-delay: 0s;
	visibility: hidden;
}

.PinturaUtilFooter .PinturaControlList[data-layout=compact]>*+* {
	margin-left: -1px;
}

.PinturaUtilFooter .PinturaControlList[data-layout=compact]>[role=tab] {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	padding-left: .625em;
	padding-right: .625em;
}

.PinturaUtilFooter .PinturaControlList[data-layout=compact]>[role=tab]:only-child {
	border-radius: var(--border-radius-round);
}

.PinturaUtilFooter .PinturaControlList[data-layout=compact]>[role=tab]:first-child:not(:only-child) {
	border-bottom-left-radius: var(--border-radius-round);
	border-top-left-radius: var(--border-radius-round);
	padding-left: .75em;
}

.PinturaUtilFooter .PinturaControlList[data-layout=compact]>[role=tab]:last-child:not(:only-child) {
	border-bottom-right-radius: var(--border-radius-round);
	border-top-right-radius: var(--border-radius-round);
	padding-right: .75em;
}

@supports not (aspect-ratio:1) {
	.PinturaControlPanel {
		overflow-x: hidden;
	}
}

.PinturaRoot[data-env~=is-animated] .PinturaUtilFooter .PinturaControlPanel {
	transition: opacity var(--transition-duration-25) ease-in-out, visibility var(--transition-duration-25) linear;
	transition-delay: .1s;
}

.PinturaRoot[data-env~=has-controlgroups-preference-top] .PinturaUtilHeader {
	order: 1;
}

.PinturaRoot[data-env~=has-controlgroups-preference-top] .PinturaUtilFooter {
	order: 2;
}

.PinturaRoot[data-env~=has-controlgroups-preference-top] .PinturaUtilMain {
	order: 3;
}

.PinturaRoot[data-env~=has-controltabs-preference-bottom] .PinturaUtilFooter .PinturaControlPanels {
	order: -1;
}

.PinturaRoot[data-env~=has-controltabs-preference-bottom] .PinturaUtilFooter .PinturaRangeInput .PinturaRangeInputReset {
	bottom: auto;
	top: 0;
}

.PinturaRoot[data-env~=has-controltabs-preference-bottom] .PinturaUtilFooter .PinturaControlPanel .PinturaShapePresetsGrouped {
	padding-bottom: .75em;
}

.PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaControlPanels {
	order: 1;
}

.PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaRangeInput .PinturaRangeInputReset {
	bottom: 0;
	top: auto;
}

.PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaControlPanel .PinturaShapePresetsGrouped {
	padding-top: .75em;
}

.PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaControlPanel .PinturaImageButtonList, .PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaShapeStyleList {
	align-items: flex-end;
}

.PinturaRoot[data-env~=has-controltabs-preference-top] .PinturaUtilFooter .PinturaShapeStyleLabel {
	order: 1;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter {
	margin: .75em 0;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlPanels {
	max-width: 24em;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList {
	margin-top: 1em;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList>button+button {
	margin-left: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList [role=tab] span {
	font-size: .75em;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList [role=tab] {
	-webkit-backdrop-filter: var(--backdrop-filter-bright);
	backdrop-filter: var(--backdrop-filter-bright);
	background-color: var(--color-background-50);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35);
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList [role=tab]:first-child {
	border-bottom-left-radius: var(--border-radius-round);
	border-top-left-radius: var(--border-radius-round);
	padding-left: .875em;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList [role=tab]:last-child {
	border-bottom-right-radius: var(--border-radius-round);
	border-top-right-radius: var(--border-radius-round);
	padding-right: .875em;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlList button:not([aria-selected=true]) span {
	color: var(--color-foreground-40);
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaControlPanels {
	-webkit-backdrop-filter: var(--backdrop-filter-bright);
	backdrop-filter: var(--backdrop-filter-bright);
	background-color: var(--color-background-50);
	border-radius: var(--border-radius-round);
	box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35);
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaRangeInput {
	height: 1.5em;
	margin-top: 0;
}

.PinturaRoot[data-env~=overlay] .PinturaUtilFooter .PinturaRangeInputReset {
	opacity: 0;
}

.PinturaRoot[dir=rtl] .PinturaUtilFooter .PinturaControlListOption [slot], .PinturaRoot[dir=rtl] .PinturaUtilFooter .PinturaControlListOption label {
	flex-direction: row-reverse;
}

.PinturaRoot[dir=rtl] .PinturaUtilFooter .PinturaControlList .PinturaControlListOption label svg:not(:only-child), .PinturaRoot[dir=rtl] .PinturaUtilFooter .PinturaControlList [role=tab] svg:not(:only-child) {
	margin-left: .375em;
	margin-right: -.25em;
}

.PinturaRangeInput {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 3.5em;
	margin: auto;
	max-width: 24em;
	position: relative;
	touch-action: none;
	width: calc(100% - 2em);
	--range-input-feather-left: 2em;
	--range-input-feather-right: 2em;
	--range-input-mask-from: 0%;
	--range-input-mask-to: 100%;
	--range-input-mask-color: rgba(0, 0, 0, .25);
	--range-input-line-color: var(--color-foreground-15);
	outline: transparent;
}

.PinturaRangeInput[data-focus-visible]:after {
	background-color: var(--color-focus-50);
	border-radius: .25em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	height: 2em;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 1em);
}

.PinturaRangeInputInner {
	contain: strict;
	height: 100%;
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--range-input-feather-left), #000 calc(50% - 3em), transparent 50%, #000 calc(50% + 3em), #000 calc(100% - var(--range-input-feather-right)), transparent);
	mask: linear-gradient(90deg, transparent 0, #000 var(--range-input-feather-left), #000 calc(50% - 3em), transparent 50%, #000 calc(50% + 3em), #000 calc(100% - var(--range-input-feather-right)), transparent);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.PinturaRangeInputMeter {
	height: 100%;
}

.PinturaRangeInput .PinturaRangeInputMeter svg {
	display: block;
	pointer-events: none;
	fill: currentColor;
}

.PinturaRangeInput>.PinturaRangeInputValue {
	contain: strict;
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-feature-settings: "tnum";
	font-size: .75em;
	font-variant-numeric: tabular-nums;
	height: 1.5em;
	left: calc(50% - 1.75em);
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	text-align: center;
	top: calc(50% - .6875em);
	width: 3.5em;
	z-index: 1;
}

.PinturaRangeInput>.PinturaRangeInputReset {
	color: transparent !important;
	cursor: var(--button-cursor);
	left: calc(50% - 1.0625em);
	margin-top: .125em;
	opacity: .35;
	outline: transparent;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: 0;
	transition: opacity var(--transition-duration-25);
	width: 2em;
	z-index: 1;
}

.PinturaRangeInput>.PinturaRangeInputReset:hover {
	opacity: .5;
}

.PinturaRangeInput>.PinturaRangeInputReset[data-focus-visible] {
	opacity: 1;
}

.PinturaRangeInput>.PinturaRangeInputReset[data-focus-visible]:before {
	background-color: var(--color-focus-50);
	border-radius: .25em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	height: 1em;
	left: calc(50% - .5em);
	pointer-events: none;
	position: absolute;
	top: calc(50% - .5em);
	width: 1em;
	z-index: 2;
}

.PinturaRangeInput>.PinturaRangeInputReset[disabled] {
	opacity: .15;
}

.PinturaRangeInput>.PinturaRangeInputReset:after {
	background: var(--color-foreground-100);
	content: "";
	height: 60%;
	left: 50%;
	position: absolute;
	top: 20%;
	width: 1px;
}

.PinturaRangeInputInner[data-value-limited] svg {
	-webkit-mask: linear-gradient(90deg, var(--range-input-mask-color) var(--range-mask-from), #000 var(--range-mask-from), #000 var(--range-mask-to), var(--range-input-mask-color) var(--range-mask-to));
	mask: linear-gradient(90deg, var(--range-input-mask-color) var(--range-mask-from), #000 var(--range-mask-from), #000 var(--range-mask-to), var(--range-input-mask-color) var(--range-mask-to));
}

.PinturaRangeInputInner[data-value-limited] svg rect {
	x: var(--range-mask-from);
	width: calc(var(--range-mask-to) - var(--range-mask-from));
	fill: var(--range-input-line-color);
}

.PinturaRadioGroup .PinturaRadioGroupOptions {
	display: flex;
	flex-direction: column;
}

.PinturaRadioGroup .PinturaRadioGroupOptionGroup+.PinturaRadioGroupOptionGroup {
	margin-top: .5em;
}

.PinturaRadioGroup .PinturaRadioGroupOption[data-hidden=true] {
	display: none;
}

.PinturaRadioGroup[data-layout=row] .PinturaRadioGroupOptions {
	flex-direction: row;
}

.PinturaRadioGroup label {
	-webkit-tap-highlight-color: transparent;
}

.PinturaPresetListFilter .PinturaRadioGroupOptions {
	justify-content: space-evenly;
	padding: .625em 0 .3125em;
}

.PinturaPresetListFilter .PinturaRadioGroupOptions label {
	cursor: pointer;
	display: block;
}

.PinturaPresetListFilter+.PinturaOptionsList {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.PinturaShapeStyleEditor {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
}

.PinturaShapeStyleEditor>div {
	align-items: center;
	display: flex;
	grid-column-start: 1;
	grid-row-start: 1;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
}

.PinturaShapeStyleEditorOverflow>div {
	justify-content: flex-start;
	overflow: visible;
}

.PinturaShapeStyleEditorOverflow .PinturaShapeStyleList {
	margin-left: 1em;
	min-height: auto;
}

.PinturaShapeStyleEditorOverflow .PinturaShapeStyle {
	--control-height: 1.75em;
}

.PinturaShapeStyles {
	position: relative;
}

.PinturaShapeStyles:not([data-state~=overflows]) {
	display: flex;
	justify-content: center;
}

.PinturaShapeStyleList {
	display: flex;
}

.PinturaShapeStyleList .PinturaButton, .PinturaShapeStyleList .PinturaInput {
	outline: transparent;
}

.PinturaShapeStyleList .PinturaInput {
	font-size: .75em;
	line-height: 2.25;
	padding: 0 0 0 .625em;
}

.PinturaShapeStyleList .PinturaShapeStyleLabel {
	color: var(--color-foreground-50);
	font-size: .625em;
	font-weight: 300;
	line-height: 1.75;
	padding: 0 .75em;
	pointer-events: none;
	text-align: center;
	text-transform: lowercase;
	white-space: nowrap;
}

.PinturaShapeStyleList .PinturaShapeStyle {
	border-radius: var(--border-radius-round);
}

.PinturaShapeStyleList .PinturaShapeStyle+.PinturaShapeStyle {
	margin-left: 1em;
}

.PinturaShapeStyle {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	--control-height: 1.5em;
}

.PinturaShapeStyle .PinturaPanelButton {
	border-radius: inherit;
}

.PinturaShapeStyle>.PinturaButton:hover, .PinturaShapeStyle>.PinturaButton[data-focus-visible] {
	position: relative;
	z-index: 1;
}

.PinturaShapeStyle .PinturaColorPickerButton .PinturaButtonLabel {
	border-radius: inherit;
	display: block;
}

.PinturaShapeStyle .PinturaColorPickerButton {
	display: flex;
	justify-content: center;
}

.PinturaShapeStyle .PinturaColorPreview {
	background-color: #fff;
	background-size: 4px;
	border-radius: inherit;
	height: 1.5em;
	width: 1.5em;
}

.PinturaShapeStyle .PinturaColorPreview span {
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaShapeStyle [data-focus-visible] .PinturaColorPreview span:before {
	background-color: var(--color-focus-50);
	border-radius: inherit;
	bottom: 0;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.PinturaShapeStyle>.PinturaColorPickerButtonStroke .PinturaColorPreview {
	-webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px);
	mask: radial-gradient(circle, transparent 5.5px, #000 6px);
	-webkit-mask-size: cover;
	mask-size: cover;
}

.PinturaShapeStyle>.PinturaColorPickerButtonStroke .PinturaColorPreview span:after {
	border-radius: inherit;
	bottom: 6px;
	box-shadow: 0 0 0 1px var(--color-foreground-5);
	content: "";
	left: 6px;
	position: absolute;
	right: 6px;
	top: 6px;
}

.PinturaShapeStyle>.PinturaSliderButton .PinturaButtonLabel, .PinturaShapeStyle>.PinturaSliderButton .PinturaButtonLabelPrefix {
	display: block;
	font-size: .6875em;
	line-height: 2.25;
}

.PinturaShapeStyle>.PinturaSliderButton .PinturaButtonLabelPrefix {
	color: var(--color-foreground-40);
	margin-right: -.25em;
	padding-left: .625em;
}

.PinturaShapeStyle>.PinturaSliderButton .PinturaButtonLabel {
	padding: 0 1em;
}

.PinturaShapeStyle>.PinturaDropdownButton .PinturaButtonLabel, .PinturaShapeStyle>.PinturaRadioGroup .PinturaButtonLabel, .PinturaShapeStyle>.PinturaRadioGroupOption label {
	display: block;
	font-size: .6875em;
	line-height: 2.25;
	padding: 0 1em;
}

.PinturaShapeStyle .PinturaButton:not(.PinturaColorPickerButton)[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeStyle .PinturaInputField {
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	height: 2em;
	line-height: 2em;
	padding: 0 .75em;
	width: 3em;
}

.PinturaShapeStyle .PinturaPromptInputGroup {
	align-items: flex-start;
	display: flex;
	position: relative;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaInput {
	padding: 0;
	width: 18em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaInput input {
	padding-right: 2em;
}

.PinturaShapeStyle .PinturaPromptInputGroup>.PinturaButton:not(.PinturaButtonIconOnly) {
	background-color: var(--color-foreground-10);
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	display: block;
	font-size: .6875em;
	line-height: 2.125;
	margin-left: .5em;
	padding: 0 1em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaButtonIconOnly {
	align-items: center;
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	display: flex;
	height: 1.75em;
	justify-content: center;
	padding: 0;
	width: 1.75em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaButtonIconOnly svg {
	width: .875em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaProgressIndicator {
	height: .875em;
	pointer-events: none;
	position: absolute;
	width: .875em;
}

.PinturaShapeStyle .PinturaPromptInputGroup .PinturaProgressIndicator svg {
	width: .875em;
}

.PinturaShapeStyle .PinturaPromptInputWrapper {
	align-items: center;
	display: flex;
	position: relative;
}

.PinturaShapeStyle .PinturaPromptInputWrapper .PinturaProgressIndicator {
	right: .3125em;
}

.PinturaShapeStyle .PinturaGenerateMoreButtonWrapper {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-left: .75em;
	margin-top: .3125em;
	position: relative;
}

.PinturaShapeStyle .PinturaPromptOptions {
	align-items: center;
	display: flex;
	margin-left: .5em;
}

.PinturaShapeStyle .PinturaPromptOption {
	border-radius: .5em;
	margin-left: .5em;
	padding: 0;
	position: relative;
}

.PinturaShapeStyle .PinturaPromptOption img, .PinturaShapeStyle .PinturaPromptOption:after {
	border-radius: .5em;
	pointer-events: none;
}

.PinturaShapeStyle .PinturaPromptOption:after {
	bottom: 0;
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.PinturaShapeStyle .PinturaPromptOption img {
	display: block;
	height: 2.5em;
	-o-object-fit: cover;
	object-fit: cover;
	width: 2.5em;
}

.PinturaShapeStyle>.PinturaDropdownButton {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	transition: background-color var(--transition-duration-10);
}

.PinturaShapeStyle>.PinturaDropdownButton:hover {
	background-color: var(--color-foreground-10);
}

.PinturaShapeStyle>.PinturaDropdownButton .PinturaButtonLabel:after, .PinturaShapeStyle>.PinturaDropdownButton .PinturaComboBox:after {
	content: "▼";
	font-size: .6875em;
	margin-left: .75em;
	margin-right: -.25em;
	pointer-events: none;
	position: relative;
	top: -.125em;
}

.PinturaShapeStyle>.PinturaDropdownButton .PinturaComboBox:after {
	font-size: .47265625em;
	margin-left: .375em;
	top: 0;
}

.PinturaShapeStyle .PinturaComboBox {
	padding-right: .75em;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInput {
	padding-left: 0;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInput input {
	box-shadow: none;
}

.PinturaShapeStyle .PinturaComboBox .PinturaInputField {
	padding-right: .375em;
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions {
	flex-direction: row;
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions label {
	align-items: center;
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	cursor: var(--button-cursor);
	display: flex;
	height: var(--control-height);
	padding: 0 .25em;
	transition: background-color var(--transition-duration-10);
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions label:hover {
	background-color: var(--color-foreground-20);
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions svg {
	height: 1.125em;
	width: 1.125em;
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions .PinturaRadioGroupOption:first-of-type label {
	border-bottom-left-radius: var(--border-radius-round);
	border-top-left-radius: var(--border-radius-round);
	padding-left: .5em;
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions .PinturaRadioGroupOption:last-of-type label {
	border-bottom-right-radius: var(--border-radius-round);
	border-top-right-radius: var(--border-radius-round);
	padding-right: .5em;
}

.PinturaShapeStyle>.PinturaRadioGroup>.PinturaRadioGroupOptions [data-selected=true] label {
	background-color: var(--color-foreground-10);
}

.PinturaRoot[dir=rtl] .PinturaShapeStyle>.PinturaDropdownButton .PinturaButtonLabel:after, .PinturaRoot[dir=rtl] .PinturaShapeStyle>.PinturaDropdownButton .PinturaComboBox:after {
	margin-left: -.25em;
	margin-right: .75em;
}

.PinturaRectManipulator {
	--size: 1.25em;
	left: 0;
	outline: none;
	position: absolute;
	top: 0;
	touch-action: none;
	transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) scale(var(--sx), var(--sy));
}

.PinturaRectManipulator:not([data-shape=edge]) {
	height: var(--size);
	width: var(--size);
	z-index: 2;
}

.PinturaRectManipulator:not([data-shape=edge]):after {
	border-radius: inherit;
	bottom: -.5em;
	content: "";
	left: -.5em;
	position: absolute;
	right: -.5em;
	top: -.5em;
}

.PinturaRectManipulator:not([data-shape=edge])[data-focus-visible]:after {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaRectManipulator[data-shape~=circle] {
	background-color: var(--color-foreground-100);
	border-radius: 50%;
	box-shadow: 0 0 2px var(--color-background-50);
	line-height: var(--size);
	margin-left: calc(var(--size) * -.5);
	margin-top: calc(var(--size) * -.5);
}

.PinturaRectManipulator[data-shape=hook] {
	border: 3px solid var(--color-foreground-100);
}

.PinturaRectManipulator[data-shape=hook][data-direction*=t] {
	border-bottom: 0;
	margin-top: -3px;
}

.PinturaRectManipulator[data-shape=hook][data-direction*=r] {
	border-left: 0;
	margin-left: calc(var(--size) * -1);
}

.PinturaRectManipulator[data-shape=hook][data-direction*=b] {
	border-top: 0;
	margin-top: calc(var(--size) * -1);
}

.PinturaRectManipulator[data-shape=hook][data-direction*=l] {
	border-right: 0;
	margin-left: -3px;
}

.PinturaRectManipulator[data-shape~=edge] {
	height: 1px;
	width: 1px;
	z-index: 1;
}

.PinturaRectManipulator[data-shape~=edge][data-focus-visible] {
	background-color: var(--color-focus-50);
}

.PinturaRectManipulator[data-direction=b], .PinturaRectManipulator[data-direction=t] {
	cursor: ns-resize;
	height: var(--size);
	margin-top: calc(var(--size) * -.5);
	transform-origin: 0 center;
}

.PinturaRectManipulator[data-direction=l], .PinturaRectManipulator[data-direction=r] {
	cursor: ew-resize;
	margin-left: calc(var(--size) * -.5);
	transform-origin: center 0;
	width: var(--size);
}

.PinturaRectManipulator[data-direction=bl], .PinturaRectManipulator[data-direction=tr] {
	cursor: nesw-resize;
}

.PinturaRectManipulator[data-direction=br], .PinturaRectManipulator[data-direction=tl] {
	cursor: nwse-resize;
}

.PinturaRoot[data-env~=pointer-coarse] .PinturaRectManipulator[data-shape=edge]:active {
	background-color: var(--color-foreground-5);
}

.PinturaRoot[data-env~=pointer-coarse] .PinturaRectManipulator:not([data-shape=edge]):after {
	bottom: -1em;
	left: -1em;
	right: -1em;
	top: -1em;
}

.PinturaRoot[data-env~=pointer-coarse] .PinturaRectManipulator:not([data-shape=edge]):active:after {
	background-color: var(--color-foreground-5);
}

.PinturaRoot[data-env*=chrome-] .PinturaRectManipulator {
	transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0);
}

.PinturaRoot[data-env*=chrome-] .PinturaRectManipulator[data-direction=b], .PinturaRoot[data-env*=chrome-] .PinturaRectManipulator[data-direction=t] {
	width: calc(var(--sx) * 1px);
}

.PinturaRoot[data-env*=chrome-] .PinturaRectManipulator[data-direction=l], .PinturaRoot[data-env*=chrome-] .PinturaRectManipulator[data-direction=r] {
	height: calc(var(--sy) * 1px);
}

.PinturaToolbar {
	display: flex;
	justify-content: center;
	margin-left: 1em;
	margin-right: 1em;
}

.PinturaToolbar .PinturaToolbarInner {
	display: inline-flex;
}

.PinturaToolbar[data-layout=compact] .PinturaToolbarContentWide, .PinturaToolbar[data-overflow=overflow] .PinturaToolbarContentOptional {
	display: none;
}

.PinturaToolbar .PinturaButton {
	border-radius: var(--border-radius-round);
	line-height: 1.1;
	outline: transparent;
	padding: .3125em .75em;
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out;
}

.PinturaToolbar .PinturaButton:hover {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
}

.PinturaToolbar .PinturaButton[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaToolbar .PinturaButton .PinturaButtonIcon {
	width: 1em;
}

.PinturaToolbar .PinturaButtonLabel {
	font-size: .75em;
}

.PinturaToolbar .PinturaPanel {
	z-index: 3;
}

.PinturaToolbar .PinturaToolbarInner>* {
	margin: 0 .5em;
}

.PinturaPanel.PinturaSliderPanel {
	border-radius: var(--border-radius-round);
}

.PinturaPercentageLabel {
	font-variant-numeric: tabular-nums;
	min-width: 3em;
	text-align: center;
}

.PinturaSliderPanel .PinturaSlider {
	width: 10em;
	--knob-size: .75em;
	--knob-margin-left: .3125em;
	--knob-margin-right: .3125em;
}

.PinturaSliderPanel .PinturaSliderTrack {
	--track-background: var(--color-foreground-10);
}

.PinturaSliderPanel .PinturaSliderKnob {
	--knob-background: var(--color-foreground-100);
	box-shadow: 0 .125em .25em rgba(0, 0, 0, .35), 0 -.125em .25em rgba(0, 0, 0, .1);
}

.PinturaRoot .PinturaImageButton {
	--thumb-size: 1.75em;
	--thumb-radius: .3125em;
	--thumb-margin: .3125em;
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	cursor: var(--button-cursor);
	outline: transparent;
	padding: var(--thumb-margin);
}

.PinturaRoot .PinturaImageButton>* {
	pointer-events: none;
}

.PinturaRoot .PinturaImageButton {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: filter var(--transition-duration-25) ease-out;
}

.PinturaRoot .PinturaImageButton[disabled] {
	filter: var(--filter-disabled);
}

.PinturaRoot .PinturaImageButton:hover {
	background-color: var(--color-foreground-10);
}

.PinturaRoot .PinturaImageButton text {
	font-family: monospace;
}

.PinturaRoot .PinturaImageButton img, .PinturaRoot .PinturaImageButton svg {
	border-radius: var(--thumb-radius);
	display: block;
	height: var(--thumb-size);
	max-width: none;
	min-width: auto;
	-o-object-fit: cover;
	object-fit: cover;
	width: var(--thumb-size);
}

.PinturaRoot .PinturaImageButton[data-loader]:after, .PinturaRoot .PinturaImageButton[data-loader]:before {
	border-radius: var(--thumb-radius);
	display: block;
	height: var(--thumb-size);
	line-height: var(--thumb-size);
	width: var(--thumb-size);
}

.PinturaRoot .PinturaImageButton[data-error] img {
	display: none;
}

.PinturaRoot .PinturaImageButton[data-error]:after {
	background-color: var(--color-error-10);
	box-shadow: inset 0 0 0 1px var(--color-error-75);
	color: var(--color-error-75);
	content: "⚠";
}

.PinturaRoot .PinturaImageButton[data-loader] {
	position: relative;
}

.PinturaRoot .PinturaImageButton[data-loader]:before {
	-webkit-animation: pintura-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
	animation: pintura-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
	background-color: var(--color-foreground-10);
	content: "";
	left: var(--thumb-margin);
	position: absolute;
	top: var(--thumb-margin);
	transition: transform calc(var(--transition-duration-multiplier, 0) * .5s) ease-in;
	z-index: -1;
}

.PinturaRoot .PinturaImageButton[data-loader] img {
	opacity: 0;
	transition: opacity calc(var(--transition-duration-multiplier, 0) * .35s) ease-out;
}

.PinturaRoot .PinturaImageButton[data-loader][data-load] img {
	opacity: 1;
}

.PinturaRoot .PinturaImageButton[data-loader][data-error]:before, .PinturaRoot .PinturaImageButton[data-loader][data-load]:before {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	transform: scale(.5);
}

@-webkit-keyframes pintura-img-loading {
	0% {
		opacity: .5;
	}
	
	50% {
		opacity: 1;
	}
	
	to {
		opacity: .5;
	}
}

@keyframes pintura-img-loading {
	0% {
		opacity: .5;
	}
	
	50% {
		opacity: 1;
	}
	
	to {
		opacity: .5;
	}
}

.PinturaInput {
	display: flex;
	flex-direction: row;
}

.PinturaInput input[disabled] {
	filter: var(--filter-disabled);
}

.PinturaInputField {
	flex: 1;
	outline: transparent;
}

.PinturaInputField[type=number] {
	-moz-appearance: textfield;
}

.PinturaInputField[type=number]::-webkit-inner-spin-button, .PinturaInputField[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.PinturaInputSpinners {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.PinturaInputSpinners button {
	font-size: .5em !important;
	line-height: 1 !important;
	outline: transparent;
	width: 2em;
}

.PinturaImageButtonList, .PinturaImageButtonList>li {
	align-items: center;
	display: flex;
}

.PinturaImageButtonList>li {
	--thumb-size: 1.75em;
	--thumb-radius: .3125em;
	--thumb-margin: .3125em;
	justify-content: center;
	position: relative;
}

.PinturaImageButtonList>li+li {
	margin-left: .5em;
}

.PinturaShorthandControl {
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	flex-direction: row;
	padding-left: .25em;
}

.PinturaShorthandControl>.PinturaSliderButton+.PinturaSliderButton {
	border-left: 1px solid var(--color-foreground-5);
	border-radius: 0;
}

.PinturaShorthandControl .PinturaSliderButton .PinturaButtonLabel {
	padding: 0 .5em;
}

.PinturaShorthandControl .PinturaColorPreview {
	height: 1em;
	margin-right: .25em;
	margin-top: .25em;
	width: 1em;
}

.PinturaShapeList {
	background: var(--color-background-70);
	border-radius: var(--border-radius);
	box-shadow: 0 0 0 1px var(--color-foreground-5);
	color: var(--color-foreground-100);
	left: 1em;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 1em;
	transition: opacity var(--transition-duration-10) ease-in-out;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	z-index: 1;
}

.PinturaShapeList li+li {
	margin-top: -.3125em;
}

.PinturaShapeList[data-visible=true] {
	opacity: 1;
}

.PinturaShapeList .PinturaColorPreview {
	border-radius: .25em;
	height: .75em;
	margin-right: .25em;
	width: .75em;
}

.PinturaShapeList .PinturaShapeListItem {
	align-items: center;
	display: flex;
	outline: none;
	padding: .25em .5em;
}

.PinturaShapeList .PinturaShapeListItem>span {
	font-size: .75em;
	line-height: 1.75;
	margin-left: -.325em;
	padding: 0 .325em;
}

.PinturaShapeList .PinturaShapeListItem[data-focus-visible]>span {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeList[data-visible=true] .PinturaShapeListItem {
	pointer-events: all;
}

.PinturaShapeEditor {
	height: 100%;
	outline: none;
	touch-action: none;
	width: 100%;
}

.PinturaShapeControls {
	align-items: center;
	display: flex;
	left: 0;
	pointer-events: none;
	position: absolute !important;
	top: 0;
	z-index: 3;
}

.PinturaShapeControlsGroup {
	background: #222;
	border-radius: .25em;
	box-shadow: 0 .125em .25em rgba(0, 0, 0, .25);
	color: #eee;
	pointer-events: all;
}

.PinturaShapeControlsGroup, .PinturaShapeControlsGroup .PinturaShapeControlsGroupToggle {
	display: inline-flex;
	min-height: 1.75em;
}

.PinturaShapeControlsGroup+.PinturaShapeControlsGroup {
	margin-left: .5em;
}

.PinturaShapeControlsGroup .PinturaShapeControlsGroupToggle {
	position: relative;
}

.PinturaShapeControlsGroup .PinturaButton {
	outline: transparent;
}

.PinturaShapeControlsGroup .PinturaButton[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeControlsGroup .PinturaButton[disabled]>span {
	cursor: not-allowed;
	opacity: .5;
	pointer-events: all;
}

.PinturaShapeControlsGroup>.PinturaButton {
	display: block;
	font-weight: 700;
	outline: transparent;
	transition: background-color var(--transition-duration-10);
}

.PinturaShapeControlsGroup>.PinturaButton:hover {
	background-color: hsla(0, 0%, 100%, .15);
}

.PinturaShapeControlsGroup>.PinturaButton .PinturaButtonLabel {
	display: block;
	font-size: .6875em;
	line-height: 1.7em;
	padding: 0 .75em;
}

.PinturaShapeControlsGroup .PinturaButtonIconOnly {
	transition: background-color var(--transition-duration-10);
	width: 1.75em;
}

.PinturaShapeControlsGroup .PinturaButtonIconOnly:hover {
	background-color: hsla(0, 0%, 100%, .15);
}

.PinturaShapeControlsGroup>button:first-of-type {
	border-radius: .25em 0 0 .25em;
}

.PinturaShapeControlsGroup>button:last-of-type {
	border-radius: 0 .25em .25em 0;
}

.PinturaShapeControlsGroup>button:only-of-type {
	border-radius: .25em;
}

.PinturaShapeControlsGroup>*+* {
	border-left: 1px solid rgba(0, 0, 0, .5);
}

.PinturaShapeControlsGroup svg {
	pointer-events: none;
}

.PinturaInlineInput {
	display: flex;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	transform-origin: center;
}

.PinturaInlineInput:before {
	content: "";
	height: var(--line-height);
	width: 0;
}

.PinturaContentEditable {
	height: calc(100% / var(--font-scalar) - var(--bottom-inset, 0));
	margin: 0;
	outline: none;
	overflow: hidden;
	padding: 0;
	vertical-align: top;
	width: calc(100% / var(--font-scalar));
}

.PinturaShapePresetsPalette {
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	width: 40em;
}

.PinturaShapePresetsPalette .PinturaShapePresetSelect {
	display: inline-block;
	vertical-align: top;
}

.PinturaShapePresetsPalette .PinturaScrollable:not([data-state~=overflows]) {
	display: flex;
	justify-content: center;
}

.PinturaShapePresetsPalette .PinturaButton+.PinturaButton {
	margin-left: .5em;
}

.PinturaShapePresetsPalette .PinturaButton {
	border-radius: var(--border-radius-round);
	box-shadow: inset 0 0 0 1px var(--color-foreground-5);
	cursor: var(--button-cursor);
	flex-direction: row;
	line-height: 1.1;
	outline: none;
	padding: .3125em .75em;
	transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out;
}

.PinturaShapePresetsPalette .PinturaButton .PinturaButtonIcon {
	width: 1em;
}

.PinturaShapePresetsPalette .PinturaButton .PinturaButtonLabel {
	font-size: .75em;
}

.PinturaShapePresetsPalette .PinturaButton:hover {
	box-shadow: inset 0 0 0 1px var(--color-foreground-10);
}

.PinturaShapePresetsPalette .PinturaButton[data-focus-visible] {
	background-color: var(--color-focus-50);
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapePresetsPalette .PinturaShapePresetsFlat>*+*, .PinturaShapePresetsPalette .PinturaShapePresetsGroups>*+*, .PinturaShapePresetsPalette .PinturaShapePresetsGroups>div>*+* {
	margin-left: .5em;
}

.PinturaShapePresetsGroups {
	display: flex;
}

.PinturaShapePresetsGrouped {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.PinturaShapePresetsGrouped [role=tab] {
	white-space: nowrap;
}

.PinturaShapePresetsFlat {
	align-items: center;
	display: flex;
	justify-content: center;
}

.PinturaShapePresetsFlat>.PinturaButton {
	margin-left: 1em;
}

.PinturaColorPickerPanel {
	max-width: 14em;
	overflow: visible;
	padding: .5em;
	touch-action: none;
}

.PinturaColorPickerPanel .PinturaEyeDropper {
	align-items: center;
	color: var(--color-foreground-70);
	display: flex;
	height: 1.5em;
	justify-content: center;
	margin-left: .25em;
	width: 1.5em;
}

.PinturaColorPickerPanel .PinturaEyeDropper svg {
	height: 1em;
	width: 1em;
}

.PinturaColorPickerPanel .PinturaColorPickerButton {
	outline: transparent;
}

.PinturaColorPickerPanel .PinturaColorPickerButton[data-focus-visible] {
	box-shadow: inset 0 0 0 1px var(--color-foreground-70);
}

.PinturaColorPickerPanel .PinturaColorPreview {
	border-radius: .25em;
	height: 1.25em;
	width: 1.25em;
}

.PinturaColorPickerPanel .PinturaColorPreview span {
	border-radius: .2em;
	box-shadow: inset 0 0 0 1px var(--color-foreground-20);
}

.PinturaColorPickerPanel .PinturaColorPresets legend {
	color: var(--color-foreground-50);
	font-size: .75em;
	margin: 0 0 .25em .3125em;
}

.PinturaColorPickerPanel .PinturaColorPresets:only-child legend {
	display: none;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaRadioGroupOptions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption {
	display: block;
	padding: .25em;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption label, .PinturaColorPickerPanel .PinturaColorPresetsGrid .PinturaListOption label span {
	cursor: var(--button-cursor);
	display: block;
}

.PinturaColorPickerPanel .PinturaColorPresetsGrid input[data-focus-visible]+label .PinturaColorPreview:after {
	background-color: var(--color-focus-50);
	border-radius: inherit;
	bottom: -.3125em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	left: -.3125em;
	pointer-events: none;
	position: absolute;
	right: -.3125em;
	top: -.3125em;
}

.PinturaColorPickerPanel .PinturaSlider {
	margin-left: -.325em;
	margin-right: -.325em;
}

.PinturaColorPickerPanel .PinturaSlider>.PinturaSliderControl {
	position: relative;
	z-index: 2;
}

.PinturaColorPickerPanel .PinturColorPickerInputGroup {
	align-items: center;
	display: flex;
	flex-direction: row;
	margin: .75em 0 .25em .3125em;
}

.PinturaColorPickerPanel .PinturaPicker {
	width: 100%;
}

.PinturaColorPickerPanel .PinturaPicker+.PinturaColorPresets {
	margin-top: .5em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob, .PinturaColorPickerPanel .PinturaPicker .PinturaSliderKnob {
	border-radius: 9999em;
	box-shadow: inset 0 .06125em .06125em rgba(0, 0, 0, .1), 0 0 0 .06125em #fff, 0 .1875em .25em rgba(0, 0, 0, .35), 0 -.125em .25em rgba(0, 0, 0, .1);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob {
	height: 1.25em;
	left: 0;
	margin-left: -.625em;
	margin-top: -.625em;
	outline: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: visible;
	width: 1.25em;
	z-index: 1;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnob[data-focus-visible]:after {
	background-color: var(--color-focus-50);
	border-radius: inherit;
	bottom: -.3125em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	left: -.3125em;
	pointer-events: none;
	position: absolute;
	right: -.3125em;
	top: -.3125em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaPickerKnobController {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaSaturationPicker {
	background-image: linear-gradient(180deg, transparent, #000), linear-gradient(90deg, #fff, transparent);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	height: 7em;
	margin: -.5em -.5em .5em;
	position: relative;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaHuePicker .PinturaSliderTrack {
	background-image: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaSliderTrack {
	box-shadow: inset 0 0 1px var(--color-foreground-50);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderKnob:before, .PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderTrack:before {
	background-color: #fff;
	background-image: var(--pattern-transparent);
	border-radius: inherit;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker .PinturaSliderKnob:before {
	background-position: calc(var(--slider-position) * -2px) 0;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaOpacityPicker {
	margin-top: .5em;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput {
	border: 1px solid var(--color-foreground-20);
	border-radius: .25em;
	color: var(--color-foreground-80);
	font-size: .875em;
	font-variant: tabular-nums;
	line-height: 1.75;
	text-indent: .5em;
	text-transform: uppercase;
	width: calc(100% - .625em);
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput:focus {
	border-color: var(--color-focus-100);
	outline: transparent;
}

.PinturaColorPickerPanel .PinturaPicker .PinturaColorPickerInput[disabled] {
	color: var(--color-foreground-40);
}

.PinturaOptionsList, .PinturaOptionsListWrapper {
	border-radius: inherit;
}

.PinturaOptionsList .PinturaListOption {
	border-radius: inherit;
	position: relative;
	transition: background-color var(--transition-duration-10);
}

.PinturaOptionsList .PinturaListOption label {
	border-radius: inherit;
	display: block;
	margin: 0;
	white-space: nowrap;
}

.PinturaOptionsList .PinturaListOption svg {
	margin-left: -.5em;
	margin-right: .25em;
	min-width: 1.5em;
}

.PinturaOptionsList .PinturaListOption svg:only-child {
	margin-left: 0;
	margin-right: 0;
}

.PinturaOptionsList .PinturaListOption [slot] {
	align-items: center;
	display: flex;
	padding: .325em .75em;
}

.PinturaOptionsList .PinturaDropdownOptionLabel {
	display: inline-flex;
	flex-direction: column;
	font-size: .75em;
	line-height: 1.75;
	margin-left: -.325em;
	padding: 0 .325em;
}

.PinturaOptionsList .PinturaDropdownOptionSublabel {
	font-size: .75em;
	margin-top: -.5em;
	opacity: .5;
}

.PinturaOptionsList .PinturaListOptionGroup>span {
	color: var(--color-foreground-50);
	display: block;
	font-size: .75em;
	padding: .75em 1em;
	text-transform: uppercase;
}

.PinturaOptionsList [data-disabled=true] {
	color: var(--color-foreground-50);
}

.PinturaOptionsList [data-selected=false]:not([data-disabled=true]):hover {
	background-color: var(--color-foreground-10);
}

.PinturaOptionsList [data-selected=true] {
	background-color: var(--color-foreground-20);
	color: var(--color-foreground-100);
}

.PinturaOptionsList [data-focus-visible]+label .PinturaDropdownOptionLabel {
	background-color: var(--color-focus-50);
	border-radius: .25em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaListOption label {
	margin: 0;
}

.PinturaRoot[dir=rtl] .PinturaDropdownOptionLabel {
	align-items: flex-end;
	margin-right: -.325em;
}

.PinturaRoot[dir=rtl] .PinturaListOption svg {
	margin-left: -.5em;
	margin-right: auto;
}

.PinturaRoot[dir=rtl] .PinturaListOption svg+span {
	margin-left: .25em;
}

.PinturaRoot[dir=rtl] .PinturaListOption [slot] {
	justify-content: flex-end;
}

.PinturaPanel {
	--color-inset: hsla(0, 0%, 100%, .1);
	--color-fill: var(--color-foreground-5);
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 0 1px var(--color-inset), 0 .125em .25em rgba(0, 0, 0, .25), 0 .125em .75em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .1);
	cursor: auto;
	left: 0;
	outline: transparent;
	top: 0;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	z-index: 2147483647;
}

.PinturaPanel, .PinturaPanelTip {
	background-blend-mode: screen;
	background-color: var(--color-background-100);
	background-image: linear-gradient(var(--color-fill), var(--color-fill));
	color: var(--color-foreground-90);
	position: absolute;
}

.PinturaPanelTip {
	--tip-mask: transparent calc(50% - 1.5px), #000 calc(50% - 1.5px);
	box-shadow: inset -1px -1px 0 0 var(--color-inset);
	height: .5em;
	margin-left: -.25em;
	margin-top: -.25em;
	-webkit-mask: linear-gradient(to bottom right, var(--tip-mask));
	mask: linear-gradient(to bottom right, var(--tip-mask));
	pointer-events: none;
	width: .5em;
	z-index: -1;
}

.PinturaPanelTip[data-top=true] {
	box-shadow: inset 1px 1px 0 0 var(--color-inset);
	-webkit-mask: linear-gradient(to top left, var(--tip-mask));
	mask: linear-gradient(to top left, var(--tip-mask));
}

.PinturaContentEditable {
	display: inline-block !important;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
	white-space: pre-line !important;
	word-break: break-word !important;
}

.PinturaContentEditable[data-wrap-content=nowrap] {
	white-space: nowrap !important;
	word-break: normal !important;
}

.PinturaContentEditable[data-wrap-content=nowrap] br {
	display: none;
}

.PinturaContentEditable {
	-webkit-user-drag: none;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	max-width: none !important;
	min-width: auto !important;
}

.PinturaColorPreview {
	--color: transparent;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' height=\'8\'%3E%3Cpath fill=\'%23E5E5E5\' d=\'M0 0h4v4H0zm4 4h4v4H4z\'/%3E%3C/svg%3E");
	color: var(--color);
	pointer-events: none;
	position: relative;
}

.PinturaColorPreview.nitro-lazy {
	background-image: none !important;
}

.PinturaColorPreview span {
	background-color: var(--color);
	border-radius: inherit;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.PinturaSlider {
	position: relative;
	--track-offset-x: .5em;
	--track-offset-y: .5em;
	--track-size: 1.5em;
	--knob-size: 1em;
	--knob-margin-top: 0em;
	--knob-margin-right: 0em;
	--knob-margin-bottom: 0em;
	--knob-margin-left: 0em;
	align-items: center;
	display: flex;
	touch-action: none;
}

.PinturaSlider[data-direction=y] {
	flex-direction: column;
}

.PinturaSlider .PinturaSliderControl {
	flex: 1;
	position: relative;
}

.PinturaSlider>button {
	cursor: pointer;
	flex-shrink: none;
	height: var(--track-size);
	overflow: hidden;
	position: relative;
	width: var(--track-size);
	z-index: 1;
}

.PinturaSlider>button svg {
	height: 1.25em;
	margin: .125em;
	width: 1.25em;
	stroke-width: .125em;
	stroke: var(--color-foreground-50);
}

.PinturaSlider>button:first-of-type {
	margin-left: -.325em;
	order: 2;
	padding-right: .125em;
}

.PinturaSlider>button:last-of-type {
	margin-right: -.325em;
	order: 1;
	padding-left: .125em;
}

.PinturaSlider>.PinturaSliderControl {
	order: 2;
}

.PinturaSlider .PinturaSliderKnob {
	background: var(--knob-background);
	border-radius: 9999em;
	height: var(--knob-size);
	left: 0;
	margin-left: calc(var(--knob-size) * -.5);
	margin-top: calc(var(--knob-size) * -.5);
	top: 50%;
	visibility: visible;
	width: var(--knob-size);
}

.PinturaSlider .PinturaSliderKnob, .PinturaSlider .PinturaSliderKnobController, .PinturaSlider .PinturaSliderTrack {
	pointer-events: none;
	position: absolute;
}

.PinturaSlider .PinturaSliderTrack {
	background: var(--track-background);
	bottom: var(--track-offset-y);
	left: var(--track-offset-x);
	right: var(--track-offset-x);
	top: var(--track-offset-y);
}

.PinturaSlider .PinturaSliderKnobController {
	bottom: calc(var(--track-offset-y) + var(--knob-margin-bottom));
	left: calc(var(--track-offset-x) + var(--knob-margin-left));
	right: calc(var(--track-offset-x) + var(--knob-margin-right));
	top: calc(var(--track-offset-y) + var(--knob-margin-top));
	visibility: hidden;
}

.PinturaSlider .PinturaSliderTrack {
	border-radius: 9999em;
}

.PinturaSlider[data-direction=x] input[type=range] {
	height: var(--track-size);
	margin-left: var(--track-offset-x);
	width: calc(100% - var(--track-offset-x) * 2);
}

.PinturaSlider[data-direction=y] input[type=range] {
	height: calc(100% - var(--track-offset-y) * 2);
	margin-top: var(--track-offset-y);
	width: var(--track-size);
}

.PinturaSlider input[type=range] {
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	display: block;
}

.PinturaSlider input[type=range]::-webkit-slider-runnable-track {
	background: transparent;
}

.PinturaSlider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	line-height: 0;
	margin: 0;
	padding: 0;
}

.PinturaSlider input[type=range]::-moz-range-thumb {
	border: none;
	line-height: 0;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

.PinturaSlider input[type=range]::-ms-thumb {
	border: none;
	line-height: 0;
	margin: 0;
	padding: 0;
}

.PinturaSlider input[type=range]::-ms-ticks-before, .PinturaSlider input[type=range]::-ms-tooltip {
	display: none;
}

.PinturaSlider input[type=range]::-ms-ticks-after {
	display: none;
}

.PinturaSlider input[type=range]::-ms-track {
	background: transparent;
	border: none;
	color: transparent;
}

.PinturaSlider input[type=range]::-ms-fill-lower, .PinturaSlider input[type=range]::-ms-fill-upper {
	background: transparent;
}

.PinturaSlider input[type=range]:focus {
	outline: transparent;
}

.PinturaSlider input[type=range][data-focus-visible]~.PinturaSliderKnobController .PinturaSliderKnob:after {
	background-color: var(--color-focus-50);
	border-radius: inherit;
	bottom: -.3125em;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
	content: "";
	left: -.3125em;
	pointer-events: none;
	position: absolute;
	right: -.3125em;
	top: -.3125em;
}

.PinturaShapeManipulator {
	left: 0;
	outline: none;
	position: absolute;
	top: 0;
	touch-action: none;
	transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) rotate(var(--r)) scale(var(--sx), var(--sy));
	--size: .75em;
}

.PinturaShapeManipulator:not([data-control=edge]) {
	border-radius: 9999em;
	height: var(--size);
	line-height: var(--size);
	margin-left: calc(var(--size) * -.5);
	margin-top: calc(var(--size) * -.5);
	width: var(--size);
}

.PinturaShapeManipulator:not([data-control=edge]):after {
	bottom: -.5em;
	content: "";
	left: -.5em;
	position: absolute;
	right: -.5em;
	top: -.5em;
}

.PinturaShapeManipulator:not([data-control=edge])[data-focus-visible]:after {
	background-color: var(--color-focus-50);
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-focus-100);
}

.PinturaShapeManipulator[data-control=point], .PinturaShapeManipulator[data-control=scale] {
	background: linear-gradient(90deg, var(--color-secondary-dark), var(--color-secondary));
	box-shadow: 0 0 0 2px #fff, 0 0 4px #000;
	z-index: 3;
}

.PinturaShapeManipulator[data-control=point][data-selected=true]:before, .PinturaShapeManipulator[data-control=scale][data-selected=true]:before {
	background: #fff;
	border-radius: 9999em;
	content: "";
	display: block;
	height: calc(var(--size) * .5);
	margin-left: calc(var(--size) * .25);
	margin-top: calc(var(--size) * .25);
	width: calc(var(--size) * .5);
}

.PinturaShapeManipulator[data-control=scale] {
	cursor: -webkit-grab;
	cursor: grab;
}

.PinturaShapeManipulator[data-control=edge] {
	height: var(--size);
	margin-top: calc(var(--size) * -.5);
	transform-origin: 0 calc(var(--size) * .5);
	width: 1px;
	z-index: 1;
}

.PinturaShapeManipulator[data-control=edge][data-focus-visible] {
	background-color: var(--color-focus-50);
}

.PinturaShapeManipulator[data-control=rotate] {
	background: linear-gradient(90deg, #fff, #ddd);
	border-radius: 9999em;
	box-shadow: 0 0 0 2px var(--color-secondary-dark), 0 0 4px #000;
	cursor: -webkit-grab;
	cursor: grab;
	z-index: 2;
}

.PinturaRoot[data-env*=chrome-] .PinturaShapeManipulator[data-control=edge] {
	transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) rotate(var(--r));
	width: calc(var(--sx) * 1px);
}

.filepond--action-edit-item-alt svg {
	display: none;
}

.PinturaScrollable {
	--scrollable-feather-start-opacity: 1 !important;
	--scrollable-feather-end-opacity: 0 !important;
}

.pintura-editor {
	--color-background: var(--color-background-override);
	--color-foreground: var(--color-foreground-override);
}

.filepond--file-poster img {
	height: auto;
	max-height: 100%;
	max-width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
