/**
 * Minified by jsDelivr using clean-css v5.3.3.
 * Original file: /npm/js-draw@1.24.2/dist/Editor.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
@charset "UTF-8";
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    > div
    > div {
    padding: 5px;
}
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    > div {
    min-height: 0;
}
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    .insert-image-image-status-view {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
}
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    .action-button-row {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 0;
    margin-bottom: 0;
}
:root
    .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content
    .action-button-row
    > button {
    flex-grow: 1;
    text-align: end;
    max-width: 50%;
    min-width: min(100%, 40px);
}
.toolbar-overflow-widget-overflow-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}
.toolbar-overflow-widget-overflow-list
    > .toolbar-toolContainer
    > .toolbar-button {
    height: var(--toolbar-button-height);
}
.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
    flex-direction: row;
}
.toolbar-overflow-widget.horizontal > .toolbar-dropdown {
    max-width: 100%;
    left: 15px;
    right: 15px;
    margin-left: 0 !important;
    translate: none !important;
    padding: 4px;
}
:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
    display: flex;
    justify-content: stretch;
    padding-top: 0;
    padding-bottom: 5px;
    direction: ltr;
}
:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > * {
    flex-grow: 1;
    text-align: start;
    margin-inline-end: 5px;
}
:root
    .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons
    > *
    .icon {
    margin: 0;
    margin-inline-start: 4px;
    margin-inline-end: 10px;
}
:root
    .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons
    > :first-child {
    direction: ltr;
}
:root
    .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons
    > :last-child {
    direction: rtl;
}
.toolbar-zoomLevelEditor {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.toolbar-zoomLevelEditor .zoomDisplay {
    flex-grow: 1;
}
.toolbar-zoomLevelEditor button {
    min-width: 48px;
}
.selection-format-menu.disabled {
    opacity: 0.5;
}
.toolbar-document-properties-widget button.about-button {
    width: 100%;
    text-align: end;
}
.toolbar-document-properties-widget > * {
    --align-items-to-x: 120px;
}
.toolbar-document-properties-widget
    .js-draw-size-input-row.js-draw-size-input-row {
    display: flex;
}
.toolbar-document-properties-widget
    .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size {
    display: none;
}
.toolbar-thicknessSliderContainer {
    display: flex;
    flex-direction: row;
}
.toolbar-thicknessSliderContainer input {
    flex-grow: 1;
}
.toolbar-element .clr-field * {
    cursor: pointer;
}
.toolbar-element .clr-field button {
    width: 1.2em;
    height: 1.2em;
    top: 50%;
    left: 0;
    border-radius: 50%;
    margin-left: 0;
    margin-right: 0;
}
.toolbar-element .clr-field input {
    opacity: 0;
}
.color-input-container {
    display: inline-flex;
    flex-direction: row;
}
.color-input-container .coloris_input {
    height: calc(100% - 6px);
}
.color-input-container.picker-open .clr-field {
    pointer-events: none;
}
:root .color-input-container > button.pipetteButton {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
}
.color-input-container > .color-input-wrapper {
    display: flex;
    justify-content: stretch;
}
.color-input-container .pipetteButton > svg {
    width: 100%;
}
.color-input-container .pipetteButton .pickColorInstructions {
    display: none;
    font-size: 1em;
    position: absolute;
    margin-left: 30px;
    background-color: var(--background-color-1);
    border-radius: 30px;
    padding: 4px;
    opacity: 0;
    transition: 0.2s ease opacity;
}
@media (prefers-reduced-motion: reduce) {
    .color-input-container .pipetteButton .pickColorInstructions {
        transition: none;
    }
}
.color-input-container .pipetteButton.active {
    background-color: var(--selection-background-color);
    --icon-color: var(--selection-foreground-color);
}
.color-input-container .pipetteButton.active .pickColorInstructions {
    display: block;
    opacity: 0.8;
}
.tool-dropdown-separator {
    --border-color: rgba(100, 100, 100, 0.2);
    --border-color: color-mix(
        in srgb,
        var(--foreground-color-1),
        rgba(0, 0, 0, 0) 80%
    );
    border-top: 1px solid var(--border-color);
    padding-left: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.toolbar-element .toolbar--file-input-container {
    display: flex;
}
.toolbar-element .toolbar--file-input-container.-loading {
    opacity: 0.8;
}
.toolbar-element .toolbar--file-input-container > input.file-input {
    opacity: 0;
    width: 0;
    min-width: 0 !important;
    max-width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.toolbar-element .toolbar--file-input-container > label {
    display: block;
    flex-grow: 1;
    padding: 0 !important;
    padding-bottom: 5px;
    --active-border-color: rgba(100, 100, 100, 0.5);
    --active-border-color: color-mix(
        in srgb,
        var(--foreground-color-1),
        transparent
    );
}
.toolbar-element .toolbar--file-input-container > label .cancel-button {
    padding-left: 3px;
    padding-right: 3px;
}
.toolbar-element
    .toolbar--file-input-container
    > label
    > .toolbar--file-input-description {
    background-color: var(--background-color-3);
    color: var(--foreground-color-3);
    border: 1px dashed var(--active-border-color);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    --action-color: var(--primary-action-foreground-color);
    --icon-color: var(--action-color);
}
.toolbar-element
    .toolbar--file-input-container
    > label
    > .toolbar--file-input-description
    > span {
    white-space: pre-wrap;
}
.toolbar-element
    .toolbar--file-input-container
    > label
    > .toolbar--file-input-description
    > span
    > b {
    color: var(--action-color);
    cursor: pointer;
}
.toolbar-element
    .toolbar--file-input-container
    > label
    > .toolbar--file-input-description
    > .icon {
    width: min(50vw, 42px);
    height: min(50vw, 42px);
    margin-bottom: 8px;
    display: block;
}
.toolbar-element .toolbar--file-input-container > label.drag-target,
.toolbar-element .toolbar--file-input-container > label:active,
.toolbar-element .toolbar--file-input-container > label:hover {
    --active-border-color: var(--foreground-color-1);
}
.toolbar-element
    .toolbar--file-input-container
    > label.drag-target
    > .toolbar--file-input-description {
    border-width: 2px;
}
.toolbar-grid-selector {
    position: relative;
}
.toolbar-grid-selector > div {
    display: flex;
    flex-direction: row;
    max-width: 350px;
    flex-wrap: wrap;
    --button-size: 48px;
}
.toolbar-grid-selector .choice-button {
    display: flex;
    flex-direction: column-reverse;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 1;
    margin: 2px;
}
.toolbar-grid-selector .choice-button.focus-visible {
    outline: 2px solid var(--foreground-color-1);
}
.toolbar-grid-selector .choice-button input {
    opacity: 0;
    height: 0;
}
.toolbar-grid-selector .choice-button label {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--button-size);
    height: var(--button-size);
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
    padding: 4px;
    user-select: none;
    -webkit-user-select: none;
}
.toolbar-grid-selector .choice-button .icon {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}
.toolbar-grid-selector .choice-button.checked {
    background-color: var(--selection-background-color);
    color: var(--selection-foreground-color);
    --icon-color: var(--selection-foreground-color);
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
    height: min(200px, 50vh);
    position: relative;
    display: flex;
    align-items: center;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .scroller {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 100%;
    width: 100%;
    flex-grow: 1;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .scroller
    > .item {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.-empty {
    display: none;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .page-markers {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100%;
    min-height: 0;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .page-markers.-one-element {
    visibility: hidden;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .page-markers
    > .marker {
    padding: 2px;
    opacity: 0.1;
    cursor: pointer;
    left: 0;
    transition: left 0.2s ease;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .page-markers
    > .marker
    > .content {
    background-color: var(--foreground-color-1);
    border-radius: 2px;
    padding: 2px;
}
:root
    .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list
    > .page-markers
    > .marker.-active {
    position: relative;
    left: 2px;
    opacity: 0.2;
}
.toolbar-root {
    background-color: var(--background-color-1);
    --icon-color: var(--foreground-color-1);
    --toolbar-button-height: min(20vh, 60px);
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.toolbar-element {
    z-index: 1;
    font-family: system-ui, -apple-system, sans-serif;
}
.toolbar-element details > summary {
    cursor: pointer;
}
.toolbar-element > .toolbar-button,
.toolbar-element > .toolbar-buttonGroup > button,
.toolbar-element > .toolbar-toolContainer > * > button,
.toolbar-element > .toolbar-toolContainer > .toolbar-button {
    white-space: pre;
    height: var(--toolbar-button-height);
}
.toolbar-dropdown .toolbar-button > .toolbar-icon {
    max-width: 50px;
    width: 100%;
}
.toolbar-button.disabled {
    filter: sepia(0.2);
    opacity: 0.45;
    cursor: unset;
}
.toolbar-button,
.toolbar-element button {
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0 2px var(--shadow-color);
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.25s ease,
        opacity 0.2s ease;
}
.toolbar-button,
.toolbar-buttonGroup > button,
.toolbar-root > button,
.toolbar-toolContainer > * > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 40px;
    max-width: 105px;
    width: min-content;
    font-size: 1em;
}
.toolbar-button > label {
    cursor: inherit;
    user-select: none;
    -webkit-user-select: none;
}
.toolbar-root > .toolbar-toolContainer > .toolbar-button > label.long-label {
    font-size: 0.75em;
}
.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button,
.toolbar-dropdown > .toolbar-toolContainer > button {
    width: 6em;
}
.toolbar-button:not(.disabled):hover,
.toolbar-root button:not(:disabled):hover {
    box-shadow: 0 2px 4px var(--shadow-color);
}
.toolbar-root button:disabled {
    cursor: inherit;
    opacity: 0.5;
}
.toolbar-root .toolbar-icon {
    flex-shrink: 1;
    user-select: none;
    width: 100%;
    min-width: 20px;
    min-height: 20px;
}
.toolbar-toolContainer.selected > .toolbar-button {
    background-color: var(--selection-background-color);
    color: var(--selection-foreground-color);
    --icon-color: var(--selection-foreground-color);
}
.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
    > .toolbar-button
    > .toolbar-showHideDropdownIcon {
    display: none;
}
.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
    height: 15px;
    transition: transform 0.25s ease;
}
.toolbar-toolContainer.dropdownVisible
    > .toolbar-button
    > .toolbar-showHideDropdownIcon {
    transform: rotate(180deg);
}
.toolbar-dropdown.hidden,
.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
    > .toolbar-dropdown:not(.hiding) {
    display: none;
}
.toolbar-dropdown {
    position: absolute;
    padding: 15px;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 80vh;
    max-width: fit-content;
    z-index: 2;
    background-color: var(--background-color-1);
    box-shadow: 0 3px 3px var(--shadow-color);
}
@keyframes dropdown-transition-in {
    0% {
        opacity: 0;
        transform: scale(1, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}
@keyframes dropdown-transition-out {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }
    100% {
        opacity: 0;
        transform: scale(1, 0);
    }
}
.toolbar-dropdown {
    transform-origin: top left;
    --dropdown-show-animation: dropdown-transition-in;
    --dropdown-hide-animation: dropdown-transition-out;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-dropdown {
        --dropdown-show-animation: none;
        --dropdown-hide-animation: none;
    }
    .toolbar-dropdown.hiding {
        display: none;
    }
    .toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
        transition: none;
    }
    .toolbar-root button,
    :root .toolbar-button {
        transition: none;
    }
}
.toolbar-buttonGroup {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.toolbar-element .toolbar--toggle-button {
    color: var(--foreground-color-1);
    font-weight: 400;
}
.toolbar-element .toolbar--toggle-button[aria-checked="true"] {
    background: var(--selection-background-color);
    color: var(--selection-foreground-color);
}
.toolbar-element .toolbar--toggle-button > .icon {
    width: 25px;
    height: 25px;
    margin: 0 5px;
}
.toolbar-element .toolbar--toggle-button > * {
    vertical-align: middle;
}
.toolbar-closeColorPickerOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    touch-action: none;
    background-color: var(--background-color-1);
    opacity: 0.3;
    z-index: 2;
}
.toolbar-spacedList > * {
    padding-bottom: 5px;
    padding-top: 5px;
}
.toolbar-indentedList {
    padding-left: 10px;
}
@media print {
    .toolbar-element {
        display: none;
    }
}
@keyframes rehide-label {
    0% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.1;
    }
}
@keyframes show-label-delayed {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}
@keyframes show-label-now {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}
@keyframes keep-label-hidden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes toolbar--edgemenu-transition-in {
    from {
        transform: translate(0, 100%);
    }
    to {
        transform: translate(0, 0);
    }
}
@keyframes toolbar--edgemenu-transition-in-reduce-motion {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes toolbar--edgemenu-transition-out {
    to {
        transform: translate(0, 100%);
    }
}
@keyframes toolbar--edgemenu-transition-out-reduce-motion {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes toolbar--edgemenu-container-transition-in {
    from {
        overflow-y: hidden;
    }
    to {
        overflow-y: hidden;
    }
}
@keyframes toolbar--edgemenu-container-transition-out {
    from {
        overflow-y: hidden;
    }
    to {
        overflow-y: hidden;
    }
}
.toolbar-edge-toolbar {
    --toolbar-button-height: min(20vh, 48px);
    --toolbar-button-size: var(--toolbar-button-height);
    --label-hover-offset-size: calc(14px + var(--toolbar-button-height));
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-around;
    --button-label-hover-offset-y: var(--label-hover-offset-size);
    --button-label-hover-offset-x: 0;
}
@media screen and (min-width: 540px) {
    .toolbar-edge-toolbar {
        flex-wrap: nowrap;
    }
    .toolbar-edge-toolbar > .toolbar-action-row {
        max-width: 50vw;
        flex-grow: 0;
        flex-shrink: 0;
    }
}
@media screen and (max-width: 700px) {
    .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline {
        font-size: 0.9em;
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button {
        width: var(--toolbar-button-size);
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button
        label {
        opacity: 0;
        animation: 0.2s linear hide-initially;
    }
    @keyframes hide-initially {
        from {
            opacity: 0;
        }
        to {
            opacity: 0;
        }
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button:not(.no-long-press-or-hover):not(
            .has-long-press-or-hover
        ):active
        > label,
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button:not(.no-long-press-or-hover):not(
            .has-long-press-or-hover
        ):hover:not(:focus-visible)
        > label {
        opacity: 0.8;
        animation: 1s ease show-label-delayed;
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button.has-long-press-or-hover
        > label {
        opacity: 0.8;
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button.focus-visible
        > label,
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button:focus-visible
        > label {
        animation: 1.5s ease rehide-label;
        opacity: 0;
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button:has(:focus-visible)
        > label {
        animation: 1.5s ease rehide-label;
        opacity: 0;
    }
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button
        > label {
        opacity: 0;
        position: absolute;
        margin-top: var(--button-label-hover-offset-y);
        margin-left: var(--button-label-hover-offset-x);
        z-index: 1;
        pointer-events: none;
        background-color: var(--background-color-1);
        color: var(--foreground-color-1);
        border-radius: 25px;
        padding: 10px;
        transition: 0.3s ease opacity, 0.2s ease margin-top;
    }
}
@media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button
        > label {
        transition: none;
    }
}
@media screen and (max-width: 700px) {
    .toolbar-edge-toolbar.one-row
        > *
        > .toolbar-toolContainer.label-inline
        > .toolbar-button
        > .toolbar-icon.toolbar-icon {
        margin-left: 0;
        margin-right: 0;
    }
}
.toolbar-edge-toolbar > div.toolbar-element {
    flex-direction: row;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    background-color: var(--background-color-2);
    color: var(--foreground-color-2);
    --icon-color: var(--foreground-color-2);
    --extra-left-right-padding: 0px;
}
.toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar-thumb {
    background-color: var(--shadow-color);
}
.toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row {
    overflow-x: auto;
    overflow-y: hidden;
    flex-grow: 100;
}
.toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
    z-index: 2;
    background-color: var(--background-color-3);
    color: var(--foreground-color-3);
    --icon-color: var(--foreground-color-3);
}
.toolbar-edge-toolbar > div.toolbar-element.has-scroll {
    justify-content: start;
    position: relative;
    --button-label-hover-offset-y: 0;
    --button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size));
}
.toolbar-edge-toolbar > div.toolbar-element.has-scroll > :first-child {
    --button-label-hover-offset-x: var(--label-hover-offset-size);
}
.toolbar-edge-toolbar .toolbar-toolContainer.selected > .toolbar-button {
    background-color: var(--selection-background-color);
    color: var(--selection-foreground-color);
    --icon-color: var(--selection-foreground-color);
}
.toolbar-edge-toolbar .toolbar-button {
    box-sizing: border-box;
    background-color: transparent;
}
.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon {
    flex-shrink: 0.01;
    height: 12px;
}
.toolbar-edge-toolbar .toolbar-toolContainer {
    order: 1;
}
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline {
    flex-grow: 1;
    display: flex;
    --button-flex-direction: row;
}
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left {
    justify-content: end;
    --button-flex-direction: row-reverse;
    order: 100;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer.label-inline.label-left
    > .toolbar-button
    > .toolbar-icon {
    margin-left: 7px;
    margin-right: 0;
}
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right {
    order: -1;
}
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button {
    width: auto;
    flex-direction: var(--button-flex-direction);
}
.toolbar-edge-toolbar
    .toolbar-toolContainer.label-inline
    > .toolbar-button
    > .toolbar-icon {
    height: 100%;
    margin-right: 7px;
    margin-left: 0;
    width: 22px;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button {
    width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
    height: var(--toolbar-button-size);
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button:not(.no-long-press-or-hover):not(
        .has-long-press-or-hover
    ):active
    > label,
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button:not(.no-long-press-or-hover):not(
        .has-long-press-or-hover
    ):hover:not(:focus-visible)
    > label {
    opacity: 0.8;
    animation: 1s ease show-label-delayed;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button.has-long-press-or-hover
    > label {
    opacity: 0.8;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button.focus-visible
    > label,
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button:focus-visible
    > label {
    animation: 1.5s ease rehide-label;
    opacity: 0;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button:has(:focus-visible)
    > label {
    animation: 1.5s ease rehide-label;
    opacity: 0;
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline)
    .toolbar-button
    > label {
    opacity: 0;
    position: absolute;
    margin-top: var(--button-label-hover-offset-y);
    margin-left: var(--button-label-hover-offset-x);
    z-index: 1;
    pointer-events: none;
    background-color: var(--background-color-1);
    color: var(--foreground-color-1);
    border-radius: 25px;
    padding: 10px;
    transition: 0.3s ease opacity, 0.2s ease margin-top;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-edge-toolbar
        .toolbar-toolContainer:not(.no-icon):not(.label-inline)
        .toolbar-button
        > label {
        transition: none;
    }
}
.toolbar-edge-toolbar
    .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible
    > .toolbar-button
    > label {
    opacity: 0.8;
    animation: 1.5s ease rehide-label 0.3s,
        1s ease keep-label-hidden 1.8s infinite;
}
.toolbar-edge-toolbar
    > div
    > .toolbar-toolContainer:not(.selected):not(.dropdownShowable)
    > .toolbar-button
    > .toolbar-showHideDropdownIcon {
    display: block;
    visibility: hidden;
}
.toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button {
    margin: 0;
    border-radius: 0;
    padding: 8px;
    box-shadow: none;
}
.toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button.has-dropdown {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 0;
}
.imageEditorContainer.pipette--color-selection-in-progress
    .toolbar-edgemenu-container {
    height: 0;
    background-color: transparent;
    opacity: 0.9;
}
.imageEditorContainer.pipette--color-selection-in-progress
    .toolbar-edgemenu-container
    .toolbar-edgemenu {
    position: absolute;
}
.toolbar-edgemenu-container {
    background-color: var(--background-color-transparent);
    transition: 0.15s ease-in-out height, 0.15s ease-in-out background-color,
        0.2s ease-in-out opacity;
    position: absolute;
    width: var(--editor-current-width-px);
    height: var(--editor-current-height-px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-edgemenu-container {
        transition: 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
    }
}
.toolbar-edgemenu-container.dropdown-below-edge {
    overflow-y: hidden;
}
.toolbar-edgemenu-container button {
    font-size: 1.2em;
    box-shadow: none;
    border: none;
    padding: 10px;
    transition: 0.2s ease box-shadow;
    font-weight: 700;
    color: var(--primary-action-foreground-color);
}
.toolbar-edgemenu-container button:not(:disabled):hover {
    box-shadow: 0 1px 2px var(--shadow-color);
}
.toolbar-edgemenu-container button:disabled {
    opacity: 0.5;
    font-weight: unset;
    cursor: unset;
    color: var(--foreground-color-1);
}
.toolbar-edgemenu-container .toolbar-grid-selector .choice-button {
    --button-label-hover-offset-y: var(--button-size);
}
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button:not(.no-long-press-or-hover):not(
        .has-long-press-or-hover
    ):active
    > label
    > .button-label-text,
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button:not(.no-long-press-or-hover):not(
        .has-long-press-or-hover
    ):hover:not(:focus-visible)
    > label
    > .button-label-text {
    opacity: 0.8;
    animation: 1s ease show-label-delayed;
}
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button.has-long-press-or-hover
    > label
    > .button-label-text {
    opacity: 0.8;
}
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button.focus-visible
    > label
    > .button-label-text,
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button:focus-visible
    > label
    > .button-label-text {
    animation: 1.5s ease rehide-label;
    opacity: 0;
}
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button:has(:focus-visible)
    > label
    > .button-label-text {
    animation: 1.5s ease rehide-label;
    opacity: 0;
}
.toolbar-edgemenu-container
    .toolbar-grid-selector
    .choice-button
    > label
    > .button-label-text {
    opacity: 0;
    position: absolute;
    margin-top: var(--button-label-hover-offset-y);
    margin-left: var(--button-label-hover-offset-x);
    z-index: 1;
    pointer-events: none;
    background-color: var(--background-color-1);
    color: var(--foreground-color-1);
    border-radius: 25px;
    padding: 10px;
    transition: 0.3s ease opacity, 0.2s ease margin-top;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-edgemenu-container
        .toolbar-grid-selector
        .choice-button
        > label
        > .button-label-text {
        transition: none;
    }
}
.toolbar-edgemenu-container .toolbar-help-overlay-button {
    align-items: last baseline;
}
.toolbar-edgemenu-container .toolbar-edgemenu {
    --toolbar-button-height: 48px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background-color: var(--background-color-2);
    color: var(--foreground-color-2);
    --icon-color: var(--foreground-color-2);
    box-shadow: 0 0 1px var(--shadow-color);
    padding-left: 10px;
    padding-right: 10px;
    width: min(400px, 100vw);
    box-sizing: border-box;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transition: transform 0.1s ease, padding-bottom 0.1s ease;
}
.toolbar-edgemenu-container .toolbar-edgemenu input,
.toolbar-edgemenu-container .toolbar-edgemenu textarea {
    user-select: auto;
    -webkit-user-select: auto;
}
.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
    display: inline-block;
}
.toolbar-edgemenu-container .toolbar-edgemenu button {
    background-color: transparent;
}
.toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem {
    height: 40px;
    display: block;
    cursor: ns-resize;
    position: relative;
    margin-top: -15px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: 0 0;
}
.toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem::before {
    content: "";
    background-color: var(--icon-color);
    opacity: 0.2;
    display: block;
    position: relative;
    top: 10px;
    height: 5px;
    border-radius: 5px;
    width: min(80%, 40px);
    margin-left: auto;
    margin-right: auto;
}
.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
    display: block;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-toolContainer
    .toolbar-button {
    flex-direction: row;
    max-width: unset;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    box-shadow: none;
    padding: 2px;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-toolContainer
    .toolbar-button
    > .toolbar-icon {
    width: 25px;
    height: 25px;
    padding: 13px;
    margin-right: 15px;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-toolContainer
    .toolbar-button
    label,
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-toolContainer
    .toolbar-button
    > label.long-label {
    font-size: 1em;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-nonbutton-controls-main-list {
    padding-left: 10px;
    padding-right: 10px;
}
.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList {
    box-sizing: border-box;
    --align-items-to-x: 105px;
}
.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div {
    display: flex;
    align-items: center;
    margin-top: 5px;
    min-height: 35px;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-spacedList
    > div:first-child {
    margin-top: 0;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-spacedList
    > div
    > label {
    padding-right: 35px;
    min-width: var(--align-items-to-x);
    flex-shrink: 1;
    box-sizing: border-box;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-spacedList
    > div
    > input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-left: 0;
}
.toolbar-edgemenu-container
    .toolbar-edgemenu
    .toolbar-spacedList
    > div
    > input:not([type="checkbox"]) {
    flex-grow: 1;
    min-width: 48px;
    flex-shrink: 1;
}
.toolbar-dropdown-toolbar .toolbar-button,
.toolbar-dropdown-toolbar button {
    background-color: var(--background-color-2);
    color: var(--foreground-color-2);
    --icon-color: var(--foreground-color-2);
}
.toolbar-dropdown-toolbar,
.toolbar-dropdown-toolbar .toolbar-dropdown {
    background-color: var(--background-color-3);
    color: var(--foreground-color-3);
}
.toolbar-dropdown-toolbar .toolbar-spacedList > div > label {
    padding-right: 10px;
    min-width: 50px;
}
.toolbar-dropdown-toolbar .clr-field button {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    border-radius: 5px;
}
.toolbar-dropdown-toolbar .toolbar-grid-selector > div {
    --button-size: 57px;
}
.toolbar-dropdown-toolbar .toolbar-dropdown > div > .toolbar-toolContainer {
    display: inline-block;
}
.toolbar-help-overlay {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: none;
    margin: 0;
    padding: 0;
    z-index: 5;
    touch-action: none;
    overflow: hidden;
    color: #fff;
    --icon-color: white;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    transition: 0.3s ease transform;
}
.toolbar-help-overlay::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.toolbar-help-overlay,
.toolbar-help-overlay::backdrop {
    animation: 0.25s ease transition-in;
}
@keyframes transition-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes transition-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.toolbar-help-overlay.-hiding,
.toolbar-help-overlay.-hiding::backdrop {
    animation: 0.25s ease transition-out;
    opacity: 0;
}
.toolbar-help-overlay.-dragging {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-help-overlay {
        transition: none;
    }
}
@media screen and (min-width: 800px) {
    .toolbar-help-overlay > .navigation-buttons {
        order: 1;
        margin-top: auto;
    }
}
.toolbar-help-overlay .help-page-container > .label,
.toolbar-help-overlay .with-text-shadow,
.toolbar-help-overlay button {
    text-shadow: 0 0 3px rgba(20, 20, 20, 0.9);
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}
.toolbar-help-overlay button:not(:disabled) {
    cursor: pointer;
}
.toolbar-help-overlay button {
    background: 0 0;
    border: none;
    color: var(--help-overlay-foreground);
    border-radius: 15px;
}
.toolbar-help-overlay .close-button {
    align-self: flex-start;
    width: 48px;
    height: 48px;
    z-index: 1;
}
.toolbar-help-overlay .close-button > svg {
    width: 100%;
}
.toolbar-help-overlay .navigation-content {
    flex-grow: 1;
    display: flex;
}
.toolbar-help-overlay .help-page-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    touch-action: none;
}
.toolbar-help-overlay .help-page-container > .label {
    flex-grow: 1;
    text-align: center;
    font-size: 18.5pt;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 0;
    z-index: 1;
    transition: 0.5s ease margin-top;
}
.toolbar-help-overlay .help-page-container > .label.-large-space-below {
    margin-top: 0;
    margin-bottom: auto;
}
.toolbar-help-overlay .help-page-container > .label.-small-space-above {
    margin-top: 40px;
    margin-bottom: auto;
}
.toolbar-help-overlay .help-page-container > .label.-large-space-above {
    margin-top: auto;
    margin-bottom: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-help-overlay .help-page-container > .label {
        transition: none;
    }
}
.toolbar-help-overlay .help-page-container > .cloned-element-container {
    position: absolute;
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 10px;
    opacity: 0.01;
    background-color: rgba(100, 100, 100, 0.01);
    box-shadow: none;
    transition: 0.5s ease opacity, 0.5s ease background-color;
}
.toolbar-help-overlay .help-page-container > .cloned-element-container * {
    pointer-events: none !important;
}
.toolbar-help-overlay .help-page-container > .cloned-element-container > * {
    margin: 0;
    opacity: 0.01 !important;
    transition: 0.3s ease opacity !important;
}
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container:not(.-clickable)
    * {
    cursor: unset !important;
}
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-background,
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-clickable {
    z-index: 1;
    touch-action: none;
}
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-clickable {
    cursor: pointer;
    z-index: 2;
}
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-clickable.has-long-press-or-hover {
    opacity: 0.5 !important;
}
.toolbar-help-overlay .help-page-container > .cloned-element-container.-active,
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-clickable.has-long-press-or-hover {
    background-color: var(--background-color-1);
}
.toolbar-help-overlay .help-page-container > .cloned-element-container.-active {
    opacity: 1;
    background-color: var(--background-color-1);
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.5);
}
.toolbar-help-overlay
    .help-page-container
    > .cloned-element-container.-active
    > * {
    opacity: 1 !important;
}
.toolbar-help-overlay .navigation-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    direction: ltr;
}
.toolbar-help-overlay .navigation-buttons > button:disabled {
    opacity: 0.5;
}
.toolbar-help-overlay .navigation-buttons > .next,
.toolbar-help-overlay .navigation-buttons > .previous {
    font-size: 1em;
    padding: 10px;
    transition: 0.2s ease font-size;
    z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-help-overlay .navigation-buttons > .next,
    .toolbar-help-overlay .navigation-buttons > .previous {
        transition: none;
    }
}
.toolbar-help-overlay
    .navigation-buttons:not(.-has-previous)
    > .next:not(:disabled) {
    animation: 0.5s ease highlight-button 0.5s;
}
@keyframes highlight-button {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    55% {
        transform: scale(1.2) rotate(2deg);
    }
    65% {
        transform: scale(1.2) rotate(-2deg);
    }
    100% {
        transform: scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .toolbar-help-overlay
        .navigation-buttons:not(.-has-previous)
        > .next:not(:disabled) {
        animation: none;
    }
}
.toolbar-help-overlay .navigation-buttons > .next::after {
    content: "❯";
    margin-left: 3px;
}
.toolbar-help-overlay .navigation-buttons > .previous::before {
    content: "❮";
    margin-right: 3px;
}
.toolbar-help-overlay .navigation-buttons.-has-next > .next {
    font-size: 1.4em;
}
.toolbar-help-overlay .navigation-buttons.-has-previous > .previous {
    font-size: 1.4em;
}
.toolbar-help-overlay .navigation-buttons.-highlight-next > .next,
.toolbar-help-overlay .navigation-buttons.-highlight-previous > .previous {
    font-weight: 700;
    background-color: rgba(200, 200, 200, 0.1);
    font-size: 1.4em;
}
.toolbar-help-overlay .navigation-help {
    margin-top: 1em;
    font-size: 0.7em;
}
.toolbar-element .toolbar-help-overlay-button {
    height: 0;
    position: relative;
    display: flex;
    justify-content: end;
}
.toolbar-element .toolbar-help-overlay-button > .button {
    margin: 0;
    padding: 5px;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    text-align: center;
    opacity: 0.5;
}
.toolbar-element .toolbar-help-overlay-button > .button > .icon {
    width: 1.18em;
    height: 1.18em;
    transition: 0.2s ease filter;
}
.toolbar-element .toolbar-help-overlay-button > .button:focus-visible > .icon,
.toolbar-element .toolbar-help-overlay-button > .button:hover > .icon {
    filter: drop-shadow(0px 0px 1px var(--shadow-color));
}
.ScrollbarTool-overlay {
    width: 0;
    height: 0;
    overflow: visible;
    opacity: 0.2;
    pointer-events: none;
    --fade-out-animation: 1s ease 0s fade-out;
    --scrollbar-size: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .ScrollbarTool-overlay {
        --fade-out-animation: none !important;
    }
}
@keyframes fade-out {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 0;
    }
}
.ScrollbarTool-overlay:not(.just-updated) {
    animation: var(--fade-out-animation);
    opacity: 0;
}
.ScrollbarTool-overlay .horizontal-scrollbar,
.ScrollbarTool-overlay .vertical-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
    min-width: var(--scrollbar-size);
    min-height: var(--scrollbar-size);
    background-color: var(--foreground-color-1);
    border-radius: var(--scrollbar-size);
    position: absolute;
}
.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll,
.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll {
    animation: var(--fade-out-animation);
    opacity: 0;
}
.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar {
    margin-left: calc(
        var(--editor-current-display-width-px) - var(--scrollbar-size)
    );
}
.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar {
    margin-top: calc(
        var(--editor-current-display-height-px) - var(--scrollbar-size)
    );
}
.clipboard-error-dialog details > summary {
    cursor: pointer;
}
.clipboard-error-dialog details[open] {
    margin-bottom: 12px;
}
.clipboard-error-dialog textarea {
    width: 100%;
    box-sizing: border-box;
}
.selection-tool-selection-background {
    background-color: var(--selection-background-color);
    opacity: 0.5;
    overflow: visible;
}
.selection-tool-handle {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    --max-size: 17px;
}
.selection-tool-handle .selection-tool-content {
    border: 1px solid var(--foreground-color-1);
    background: var(--background-color-1);
    box-sizing: border-box;
    max-width: var(--max-size);
    max-height: var(--max-size);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}
.selection-tool-handle .selection-tool-content .icon {
    width: 100%;
    height: 100%;
}
.selection-tool-handle.selection-tool-circle .selection-tool-content {
    border-radius: 100%;
}
.selection-tool-handle.selection-tool-rotate {
    --max-size: 28px;
    cursor: grab;
}
.selection-tool-handle.selection-tool-resize-x {
    cursor: ew-resize;
}
.selection-tool-handle.selection-tool-resize-y {
    cursor: ns-resize;
}
.selection-tool-handle.selection-tool-resize-xy {
    cursor: nwse-resize;
}
.selection-tool-rotated-near-perpendicular
    .selection-tool-handle.selection-tool-resize-x {
    cursor: ns-resize;
}
.selection-tool-rotated-near-perpendicular
    .selection-tool-handle.selection-tool-resize-y {
    cursor: ew-resize;
}
.selection-tool-rotated-near-perpendicular
    .selection-tool-handle.selection-tool-resize-xy {
    cursor: nesw-resize;
}
.selection-tool-selection-menu > button {
    max-height: var(--vertical-offset);
    background-color: var(--background-color-1);
    font-size: 14px;
    color: var(--foreground-color-1);
    border: 0.5px solid var(--foreground-color-1);
    border-radius: 3px;
    padding: 3px;
    opacity: 0.8;
    transition: 0.2s ease opacity;
}
.selection-tool-selection-menu > button:focus-visible,
.selection-tool-selection-menu > button:hover {
    background-color: var(--background-color-2);
    color: var(--foreground-color-2);
    cursor: pointer;
    opacity: 1;
}
.overlay.handleOverlay {
    touch-action: none;
    direction: ltr;
}
.overlay.handleOverlay,
.overlay.handleOverlay .selection-tool-selection-outer-container {
    height: 0;
    overflow: visible;
}
.overlay.handleOverlay .selection-tool-selection-inner-container {
    width: var(--editor-current-display-width-px);
    height: var(--editor-current-display-height-px);
    overflow: hidden;
    pointer-events: none;
}
.overlay.handleOverlay .selection-tool-selection-inner-container > * {
    pointer-events: all;
}
.overlay.handleOverlay .selection-tool-selection-inner-container.-empty {
    opacity: 0;
}
.overlay.handleOverlay
    .selection-tool-selection-inner-container.-hide-handles
    .selection-tool-handle {
    display: none;
}
@keyframes selection-duplicated-animation {
    0% {
        scale: 1 1;
    }
    50% {
        scale: 1.02 1.02;
    }
    100% {
        scale: 1 1;
    }
}
.find-tool-overlay {
    order: -1;
    position: absolute;
}
.js-draw-sound-ui-toggle {
    width: 0;
    height: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.js-draw-sound-ui-toggle button {
    margin-top: 1px;
}
.js-draw-sound-ui-toggle.sound-ui-tool-enabled,
.js-draw-sound-ui-toggle:focus-within {
    overflow: visible;
    z-index: 5;
}
.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
    opacity: 0.5;
}
@keyframes show-popup-menu-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.editor-popup-menu {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    animation: var(--hide-menu-animation-timeout) ease show-popup-menu-animation;
    opacity: 1;
    transition: var(--hide-menu-animation-timeout) ease opacity;
    overflow: hidden;
}
.editor-popup-menu.-hide {
    opacity: 0;
}
.editor-popup-menu > .content {
    position: absolute;
    left: var(--anchor-x);
    top: var(--anchor-y);
    display: flex;
    flex-direction: column;
    overflow: clip;
    border-radius: 6px;
    box-shadow: 0 1px 2px var(--shadow-color);
}
.editor-popup-menu::backdrop {
    background: 0 0;
}
.editor-popup-menu-option {
    display: flex;
    justify-content: start;
    cursor: pointer;
    padding: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--background-color-1);
    color: var(--foreground-color-1);
    --icon-color: currentColor;
    border: none;
    font-size: 1em;
}
.editor-popup-menu-option:focus-visible,
.editor-popup-menu-option:hover {
    background-color: var(--background-color-2);
    color: var(--foreground-color-2);
}
.editor-popup-menu-option > :first-child {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    margin-inline-start: 0;
    margin-inline-end: 0.25em;
}
.about-dialog-content > .scroll {
    white-space: pre-wrap;
    font-family: monospace;
}
.about-dialog-content > .scroll > details > summary {
    cursor: pointer;
}
.about-dialog-content > .scroll > details > summary,
.about-dialog-content > .scroll > h2 {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: 700;
}
.about-dialog-content > .scroll > details > summary a,
.about-dialog-content > .scroll > h2 a {
    color: var(--foreground-color-1);
    text-decoration: underline;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.message-dialog-container dialog {
    display: flex;
}
.message-dialog-container dialog.-closing {
    opacity: 0;
}
.message-dialog-container dialog.-closing::backdrop {
    opacity: 0;
}
.message-dialog-container dialog,
.message-dialog-container dialog::backdrop {
    transition: opacity 0.2s ease;
    animation: fade-in 0.2s ease;
}
.message-dialog-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.message-dialog-content > .close {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.message-dialog-content > .scroll {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;
}
.dialog-container > dialog {
    background-color: var(--background-color-1);
    color: var(--foreground-color-1);
    border: none;
    outline: 0;
    box-shadow: 0 0 2px var(--shadow-color);
    border-radius: 8px;
    max-height: 90vh;
    width: min(100%, 500px);
    box-sizing: border-box;
}
.dialog-container > dialog::backdrop {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: var(--background-color-transparent);
}
#clr-picker {
    --clr-slider-size: 30px;
}
#clr-picker #clr-color-area,
#clr-picker .clr_hue {
    touch-action: none;
}
#clr-picker .clr-alpha {
    margin-top: 15px;
    margin-bottom: 15px;
}
#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {
    width: var(--clr-slider-size);
    height: var(--clr-slider-size);
}
#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {
    width: var(--clr-slider-size);
    height: var(--clr-slider-size);
}
#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {
    height: var(--clr-slider-size);
}
#clr-picker.clr-picker input[type="range"]::-moz-range-track {
    height: var(--clr-slider-size);
}
.imageEditorContainer {
    --background-color-1: white;
    --foreground-color-1: black;
    --background-color-2: #f5f5f5;
    --foreground-color-2: #2c303a;
    --background-color-3: #e5e5e5;
    --foreground-color-3: #1c202a;
    --selection-background-color: #cbdaf1;
    --selection-foreground-color: #2c303a;
    --background-color-transparent: rgba(105, 100, 100, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --primary-action-foreground-color: #15b;
}
@media (prefers-color-scheme: dark) {
    .imageEditorContainer {
        --background-color-1: #151515;
        --foreground-color-1: white;
        --background-color-2: #222;
        --foreground-color-2: #efefef;
        --background-color-3: #272627;
        --foreground-color-3: #eee;
        --selection-background-color: #607;
        --selection-foreground-color: white;
        --shadow-color: rgba(250, 250, 250, 0.5);
        --background-color-transparent: rgba(50, 50, 50, 0.5);
        --primary-action-foreground-color: #7ae;
    }
}
.imageEditorContainer {
    --icon-color: var(--foreground-color-1);
}
.imageEditorContainer {
    color: var(--foreground-color-1);
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--background-color-1);
    width: 100%;
    height: 400px;
    min-height: 220px;
    min-width: 100px;
    writing-mode: horizontal-tb;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
}
.imageEditorContainer input {
    accent-color: var(--primary-action-foreground-color);
}
.imageEditorContainer .imageEditorRenderArea {
    display: grid;
    grid-template-columns: 1fr;
    flex-grow: 2;
    flex-shrink: 1;
    min-height: 100px;
    min-width: 0;
    width: 100%;
    height: 100%;
}
.imageEditorContainer .imageEditorRenderArea canvas {
    grid-row: 1/1;
    grid-column: 1/1;
    touch-action: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: inherit;
    min-height: 0;
    max-height: inherit;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.imageEditorContainer .loadingMessage {
    position: fixed;
    text-align: center;
    font-size: 2em;
    text-shadow: 0 0 1px var(--background-color-1);
    bottom: 0;
    left: 0;
    right: 0;
}
.imageEditorContainer .accessibilityAnnouncement {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.imageEditorContainer .textRendererOutputContainer {
    width: 0.001px;
    height: 0.001px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.imageEditorContainer .textRendererOutputContainer:focus-within {
    overflow: visible;
    z-index: 5;
}
.imageEditorContainer .anchored-element-overlay {
    overflow: visible;
    height: 0;
}
.imageEditorContainer .anchored-element-overlay > .content-wrapper {
    width: var(--editor-current-display-width-px);
    height: var(--editor-current-display-height-px);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}
.imageEditorContainer .anchored-element-overlay > .content-wrapper > .content {
    position: absolute;
    left: var(--position-x);
    top: var(--position-y);
    transform: scale(var(--scale)) rotate(var(--rotation));
    transform-origin: left top;
    margin: 0;
    pointer-events: all;
}
@media print {
    .imageEditorContainer .loadingMessage {
        display: none;
    }
    .imageEditorContainer .imageEditorRenderArea canvas {
        width: 100%;
        height: initial;
    }
}
/*# sourceMappingURL=/sm/2cb16aa48bdfc6e4c925e7634f2ac698ea704bb31577caaabb209ebb850c3610.map */
