.context-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    background-color: var(--secondary-000);
    padding: .5rem;
    border-radius: 4px;
    box-shadow: var(--dropdown-box-shadow)
}

.context-menu--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-out
}

.context-menu__item {
    justify-content: space-between;
    background-color: var(--secondary-000);
    border-radius: 0
}

.context-menu__item[disabled] {
    opacity: 1
}

.context-menu__item[disabled] string {
    opacity: .35
}

.context-menu__item--has-divider {
    border-bottom: 1px solid var(--secondary-300)
}

.context-menu__item--has-divider .context-menu__item--is-child:first-child {
    height: calc(2rem + 1px)
}

.context-menu__item--has-divider .context-menu__item--has-shortcut {
    padding: 1rem 0 1.25rem .5rem
}

.context-menu__item--has-shortcut {
    position: relative;
    padding: .5rem 0 .5rem .5rem
}

.context-menu__item--has-children {
    position: relative
}

.context-menu__item--has-children:hover .context-menu__children,
.context-menu__item--has-children:hover:after {
    opacity: 1;
    pointer-events: auto
}

.context-menu__item--has-children .icon {
    margin-left: 10px
}

.context-menu__item--hidden {
    display: none
}

.context-menu__children {
    position: absolute;
    left: calc(100% + 1rem);
    top: -.5rem;
    background-color: var(--secondary-000);
    padding: .5rem;
    border-radius: 4px;
    box-shadow: var(--dropdown-box-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-out;
    z-index: 1501
}

.context-menu__children--left-side {
    left: auto;
    right: calc(100% + 1rem)
}

.context-menu:before,
.context-menu__children:before {
    content: "";
    display: block;
    position: absolute;
    top: -1rem;
    right: -1rem;
    bottom: -1rem;
    left: -1rem;
    z-index: -1
}

.panel-header {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.panel-header--secondary,
.panel-header--tertiary {
    height: 56px;
    margin-right: -6px
}

.panel-header--secondary .panel-header__text,
.panel-header--tertiary .panel-header__text {
    max-width: calc(100% - 6px)
}

.panel-header--preset {
    background: var(--secondary-000);
    height: 37px;
    border-bottom: 1px solid var(--secondary-500)
}

.panel-header--modal {
    height: 56px;
    padding: 0 16px 0 24px;
    border-bottom: 1px solid var(--border-color)
}

.panel-header--alternate {
    height: 38px;
    padding: 0 0 0 12px;
    border-bottom: 1px solid var(--secondary-500)
}

.panel-header__text {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    max-width: 100%;
    flex-grow: 1;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    overflow: hidden;
    align-items: center
}

.panel-header__text string {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.panel-header__text--alternate {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.panel-header__text--preset {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    padding-left: 12px;
    color: var(--secondary-700)
}

.panel-header__text--modal {
    --text-font-size: 18px;
    --heading-font-size: 18px;
    --text-line-height: calc(18px + 8px);
    --heading-line-height: calc(18px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.panel-header__text--modal-section {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    padding: 0 .75rem .625rem 0
}

.panel-header__text--wider-1x {
    margin-right: -2rem
}

.panel-header__text--wider-2x {
    margin-right: -4rem
}

.panel-header__plus-badge {
    margin: 0 0 0 6px
}

.panel-header__button {
    flex-shrink: 0;
    transition: color .3s ease-in-out, opacity .3s ease-in-out, background .3s ease-in-out, box-shadow .15s ease-in-out, transform .3s ease-in-out
}

.panel-header__button--hidden {
    opacity: 0;
    pointer-events: none
}

.panel-header__button--move-1x {
    transform: translateX(2rem)
}

.panel-header__button--move-2x {
    transform: translateX(4rem)
}

.panel-header__button--left {
    margin-right: .5rem
}

.panel-header__button--right2 {
    order: 1
}

.panel-header__button .icon--back {
    transform: rotate(180deg)
}

.panel-header__button--batch_remove {
    color: var(--selected-text-color)
}

.text-area--at-limit textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--error-500)
}

.text-area--at-limit .text-area__char-count {
    color: var(--error-500)
}

.text-area textarea {
    height: auto
}

.text-area__char-count {
    text-align: right;
    margin-top: .5rem
}

.chip {
    border: 1px solid var(--border-color);
    background-color: var(--secondary-000);
    --text-color: var(--secondary-800);
    color: var(--text-color);
    border-radius: 24px;
    padding: 0 12px;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.chip:not([disabled]):hover {
    background-color: var(--secondary-200)
}

.chip:not([disabled]):active {
    background-color: var(--secondary-400);
    border-color: var(--secondary-400)
}

.chip--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.chip[disabled] {
    opacity: .5
}

.chip--selected {
    --text-color: var(--selected-text-color);
    background: var(--selected-bg);
    border-color: var(--selected-border-color)
}

.chip--selected:not([disabled]):active,
.chip--selected:not([disabled]):hover {
    background: var(--selected-bg);
    border-color: var(--selected-border-color)
}

.chip--selected .chip__checkmark {
    opacity: 1
}

.chip__checkmark {
    color: var(--selected-text-color);
    margin-right: 10px;
    transition: opacity .3s ease-in-out;
    opacity: 0
}

.chip string+button {
    margin-left: 10px
}

.toggle-switch {
    background-color: var(--secondary-200);
    width: 100%;
    height: 2.4rem;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-radius: 4px;
    --text-font-size: 13px;
    --text-line-height: 18px;
    border: 1px solid var(---border-color)
}

@media (max-width:800px) {
    .toggle-switch {
        width: 100%
    }
}

.toggle-switch:hover .toggle-switch__slider {
    border-color: var(--secondary-500)
}

.toggle-switch__label-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 130px;
    width: 100%
}

.toggle-switch__label {
    color: var(--secondary-800);
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.control-item .toggle-switch__label {
    color: var(--text-color)
}

.toggle-switch__slider {
    position: relative;
    width: 40px;
    height: 24px;
    cursor: pointer;
    transition: .15s ease-in-out;
    border-radius: 100px;
    border: 1px solid var(--text-color)
}

.toggle-switch__slider:before {
    content: "";
    position: absolute;
    height: 1rem;
    width: 1rem;
    left: 4px;
    bottom: 3px;
    background-color: var(--text-color);
    transition: .15s ease-in-out;
    pointer-events: none;
    border-radius: 40px
}

.toggle-switch--disabled {
    pointer-events: none;
    opacity: .35
}

.toggle-switch .shortcut {
    background: 0 0
}

.toggle-switch input:active+.toggle-switch__slider:before {
    background-color: var(--secondary-500)
}

.toggle-switch input:checked+.toggle-switch__slider {
    background-color: var(--secondary-000);
    border: 1px solid var(--primary-300)
}

.toggle-switch input:checked+.toggle-switch__slider:before {
    transform: translateX(15px);
    background-color: var(--primary-400)
}

.toggle-switch input:focus+.toggle-switch__slider,
input:focus+.button--toggle.button--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

input:checked+.button--toggle {
    background-color: var(--selected-bg);
    border-color: var(--selected-border-color);
    color: var(--selected-text-color)
}

@media (hover:hover) {
    input:not([disabled]):not(:checked)+.button--toggle:hover {
        background-color: var(--secondary-200);
        border-color: var(--border-color)
    }
}

input:disabled+.button--toggle {
    cursor: not-allowed;
    opacity: .5
}

.toggle-group {
    display: flex;
    --button-text-size: 13px
}

.toggle-group--stretched>* {
    flex-grow: 1 !important;
    width: 100% !important
}

.toggle-group__button {
    width: 100%;
    border-radius: 0
}

.toggle-group__button.button--icon {
    width: var(--button-height)
}

.toggle-group__button.button--focus {
    z-index: 1
}

.toggle-group__button:first-child {
    border-radius: 4px 0 0 4px
}

.toggle-group__button:last-child {
    border-radius: 0 4px 4px 0
}

.toggle-group__button:not(.button--selected)+.button:not(.button--selected) {
    border-left-color: transparent
}

.toggle-group#text_edit_align button {
    width: 100%
}

.button-group {
    display: flex;
    --button-text-size: 13px
}

.button-group--stretched .button {
    flex-grow: 1
}

.button-group--spaced {
    justify-content: space-between
}

.button-group--spaced .button-group__button {
    border-radius: 4px !important
}

.button-group__button {
    width: 100%;
    border-radius: 0
}

.button-group__button.button--icon {
    width: var(--button-height)
}

.button-group__button.button--focus {
    z-index: 1
}

.button-group__button:not(.button--selected)+.button:not(.button--selected) {
    border-left-color: transparent
}

.button-item {
    display: flex;
    align-items: center
}

.button-item--inverted {
    justify-content: space-between
}

.thumbnail-browser {
    padding-top: 1rem;
    background: var(--secondary-000);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    margin: -2px;
    width: calc(var(--scrollable-content-width) + 18px)
}

@media (max-width:800px) {
    .thumbnail-browser {
        padding-top: 0
    }
}

.thumbnail-browser .image-manager__item {
    display: flex;
    justify-content: center;
    align-items: center
}

.thumbnail-browser .image-manager__item .image-manager__button--settings {
    position: relative
}

.thumbnail-browser .image-manager__item:hover .image-manager__button--settings {
    opacity: 0;
    pointer-events: none
}

@media (max-width:800px) {
    .thumbnail-browser .image-manager__item.image-manager__item--selected {
        overflow: visible
    }
}

@media (min-width:801px) {
    .thumbnail-browser .image-manager__item.image-manager__item--selected:hover .image-manager__button--remove {
        opacity: 0;
        pointer-events: none
    }
}

.thumbnail-browser .image-manager__item.image-manager__item--selected .image-manager__placeholder {
    box-shadow: inset 0 0 0 8px var(--primary-200)
}

@media (max-width:800px) {
    .thumbnail-browser .image-manager__item.image-manager__item--selected .image-manager__button--remove {
        display: flex;
        opacity: 1;
        top: -10px;
        left: -8px;
        position: absolute;
        z-index: 99
    }
}

.thumbnail-browser .image-manager__item.image-manager__item--selected .image-manager__button--settings {
    opacity: 1;
    display: flex;
    bottom: 0;
    pointer-events: auto
}

@media (max-width:800px) {
    .thumbnail-browser .image-manager__item.image-manager__item--selected .image-manager__button--settings {
        --button-height: 32px;
        --button-text-size: 14px
    }
}

.size-comparison {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: .5rem 0;
    background-color: var(--secondary-000);
    border: 1px solid var(--secondary-300);
    border-radius: .25rem
}

.size-comparison .arrow-icon {
    margin: -3px 3px 0 2px
}

.size-comparison label {
    --text-font-size: 12px;
    --text-line-height: 18px
}

.multimedia-clue {
    width: 320px;
    height: 408px;
    background: var(--static-white);
    border-radius: 8px;
    scrollbar-color: var(--secondary-400) transparent;
    outline: 0
}

.multimedia-clue p {
    color: var(--secondary-800)
}

.multimedia-clue__panel-header {
    padding-left: 0;
    justify-content: center;
    background: var(--secondary-200);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--secondary-300);
    --heading-color: var(--secondary-800)
}

.multimedia-clue__panel-header .icon {
    fill: var(--static-black)
}

.multimedia-clue__panel-header h3 {
    position: absolute;
    margin: 0 auto
}

.multimedia-clue__panel-header .button {
    margin-left: auto
}

.multimedia-clue__panel-header .button--transparent:not([disabled]):hover {
    background: var(--secondary-300)
}

.multimedia-clue__panel-header .panel-header__button--left {
    margin-right: auto;
    margin-left: .5rem
}

.multimedia-clue__panel-header .panel-header__button--right2 {
    margin-right: .5rem
}

.multimedia-clue__search-box {
    margin-bottom: 1rem
}

.multimedia-clue__contact-us-wrapper {
    position: relative;
    overflow: hidden;
    height: 2rem;
    bottom: 2rem;
    border-radius: 0 0 8px 8px;
    pointer-events: none
}

.multimedia-clue__contact-us {
    background: var(--secondary-300);
    padding: 7px 0;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    pointer-events: auto
}

.multimedia-clue__contact-us-placeholder {
    height: 2rem
}

.multimedia-clue__help-center-container {
    margin: 1rem 1rem .25rem
}

.multimedia-clue__no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.multimedia-clue__no-results img {
    width: 236px;
    height: 152px
}

.multimedia-clue__error-state {
    border-radius: 4px;
    background: var(--error-100);
    color: var(--static-black);
    width: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    padding: .5rem 1rem
}

.multimedia-clue__home {
    margin-bottom: 1rem
}

.multimedia-clue__home h4 {
    margin-bottom: 4px;
    cursor: pointer
}

.multimedia-clue__categories {
    margin-bottom: 1rem
}

.multimedia-clue__article-link {
    margin-bottom: .75rem
}

.multimedia-clue__help-center-content {
    height: 302px;
    width: 303px;
    --text-margin-bottom: 4px
}

.multimedia-clue__help-center-content--home {
    height: 318px
}

.multimedia-clue__category-link {
    display: block;
    margin-bottom: 4px
}

.multimedia-clue__category-description {
    display: block;
    color: var(--secondary-600)
}

.multimedia-clue__content-container {
    overflow: hidden;
    height: 370px;
    border-radius: 0 0 8px 8px
}

.multimedia-clue__video {
    position: relative;
    z-index: -1
}

.multimedia-clue__video video {
    width: 100%;
    position: absolute;
    background: var(--image-bg)
}

.multimedia-clue__caption {
    border-bottom: 1px solid var(--secondary-300);
    margin: .5rem 0 1rem;
    padding-bottom: 1rem
}

.multimedia-clue__caption p {
    border-left: 2px solid var(--static-green);
    padding-left: .5rem;
    color: var(--secondary-700)
}

.multimedia-clue__title {
    --button-height: 12px;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    --heading-margin-top: 16px;
    --heading-margin-bottom: 8px
}

.multimedia-clue__title a {
    display: inline-flex
}

.multimedia-clue__video-placeholder {
    height: 230px;
    background: 0 0
}

.multimedia-clue__content {
    position: relative;
    padding: 1rem 0 .75rem 1rem;
    margin-top: 0;
    margin-bottom: 0;
    width: 319px;
    --scrollable-content-width: 288px;
    --text-margin-bottom: .75rem
}

.multimedia-clue__content img {
    width: 100%;
    height: auto
}

.multimedia-clue__kb-content>:not(:last-child) {
    margin-bottom: .75rem
}

.multimedia-clue__kb-content div>a {
    --text-color: var(--primary-500);
    text-decoration: underline;
    text-underline-offset: 2px
}

.multimedia-clue__kb-content div>a:hover {
    --text-color: var(--primary-400)
}

.multimedia-clue__kb-content div>a:active {
    --text-color: var(--primary-600)
}

.multimedia-clue__kb-content h4 {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.multimedia-clue__preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.multimedia-clue__preview-container {
    position: absolute;
    width: 624px;
    height: 408px;
    display: flex
}

.multimedia-clue__preview-content {
    position: relative;
    width: 100%
}

.multimedia-clue__preview-content button {
    position: absolute;
    top: 8px;
    right: 8px;
    --text-color: var(--secondary-800);
    --button-height: 24px
}

.multimedia-clue__preview-content img {
    max-width: 100%;
    height: auto
}

.multimedia-clue__preview-content iframe {
    width: 100%;
    height: 100%
}

.multimedia-clue__image-container,
.multimedia-clue__vimeo-image {
    position: relative;
    cursor: pointer;
    background: var(--secondary-300)
}

.multimedia-clue__image-container button,
.multimedia-clue__image-container img,
.multimedia-clue__vimeo-image button,
.multimedia-clue__vimeo-image img {
    pointer-events: none
}

.multimedia-clue__image-container img,
.multimedia-clue__vimeo-image img {
    display: block
}

.multimedia-clue__image-container button,
.multimedia-clue__vimeo-image button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    border-radius: 2px;
    --text-color: var(--secondary-800);
    --button-height: 16px
}

.multimedia-clue__video-play-button {
    --icon-size: 70px;
    position: absolute;
    opacity: .8;
    top: calc(50% - var(--icon-size)/ 2);
    left: calc(50% - var(--icon-size)/ 2);
    transition: opacity .15s ease-in-out;
    background-color: var(--static-white);
    border-radius: 50%
}

.multimedia-clue__video-play-button .icon--play-button {
    --icon-size: 70px
}

.multimedia-clue__video-play-button:focus,
.multimedia-clue__video-play-button:hover {
    opacity: 1
}

.multimedia-clue__video-play-button:active {
    pointer-events: none
}

.multimedia-clue--animate {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    animation: .4s ease-in-out closeDraggablePanelAnimation
}

@keyframes closeDraggablePanelAnimation {
    from {
        width: 320px;
        height: 408px;
        opacity: 1
    }
    to {
        left: 290px;
        top: 82px;
        width: 0;
        height: 0;
        opacity: 0
    }
}

.multimedia-clue--animate>* {
    opacity: 0
}

.multimedia-clue--animate.draggable-panel.animated {
    transition: none
}

.multimedia-clue .callout {
    border-radius: 4px;
    padding: .5rem
}

.multimedia-clue .callout p {
    color: var(--static-black)
}

.multimedia-clue .callout--success {
    background: var(--turquoise-100);
    border: 1px solid var(--success-500)
}

.multimedia-clue .callout--transparent {
    background: var(--secondary-300);
    border: 1px solid var(--secondary-400)
}

.multimedia-clue .callout--more-inspiration {
    background: var(--lavender-100);
    border: 1px solid var(--lavender-700)
}

.multimedia-clue .callout--important {
    background: var(--error-100);
    border: 1px solid var(--error-500)
}

.pro-tip {
    background-color: var(--warning-100);
    padding: 1rem;
    margin-bottom: 2rem;
    border: 1px solid var(--warning-500);
    border-radius: 4px;
    --text-color: black
}

.pricing-modal {
    width: 944px;
    background-color: transparent
}

.pricing-modal__bg-wrapper {
    position: relative;
    background-color: var(--secondary-100)
}

.pricing-modal__section {
    margin-bottom: 2rem
}

@media (min-width:768px) {
    .pricing-modal__section {
        margin-bottom: 3rem
    }
}

.pricing-modal__section-heading {
    text-align: center;
    margin-bottom: 1.5rem
}

@media (min-width:768px) {
    .pricing-modal__section-heading {
        margin-bottom: 2rem
    }
}

.pricing-modal__grid {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem 1rem
}

.pricing-modal__card {
    border-radius: 8px;
    background: var(--secondary-000);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    grid-column: 1/-1
}

@media (min-width:768px) {
    .pricing-modal__card {
        grid-column: span 6
    }
}

@media (min-width:960px) {
    .pricing-modal__card {
        padding: 2rem
    }
}

.pricing-modal__card--3-per-row .pricing-modal__card-header {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

@media (min-width:960px) {
    .pricing-modal__card--3-per-row {
        grid-column: span 4;
        padding: 1.5rem
    }
}

.pricing-modal__card-header {
    --text-font-size: 18px;
    --heading-font-size: 18px;
    --text-line-height: calc(18px + 8px);
    --heading-line-height: calc(18px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    margin: 0 0 .5rem
}

.pricing-modal__checkbox-icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: .25rem;
    background: var(--primary-400);
    border-radius: 50%;
    color: var(--secondary-000);
    float: left;
    margin-right: 6px
}

.plus-pricing {
    display: grid;
    grid-gap: 1rem 2rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 14.5rem);
    width: 100%;
    margin: 0 auto 1.5rem
}

.plus-pricing__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 14.5rem;
    max-width: 100%;
    background-color: var(--secondary-000);
    border-radius: .5rem;
    border: 2px solid var(--secondary-300);
    padding: 1rem;
    color: var(--secondary-800)
}

.plus-pricing__card--selected {
    border: 2px solid var(--primary-300)
}

.plus-pricing__card:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.plus-pricing__price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--secondary-300);
    height: 57px;
    font-weight: 700
}

.plus-pricing__currency {
    margin-right: 4px
}

.plus-pricing__large-amount {
    --heading-font-size: 36px;
    --text-font-size: 36px;
    --heading-line-height: calc(36px + 8px);
    --text-line-height: calc(36px + 8px);
    --heading-margin-bottom: 16px;
    --heading-margin-top: 32px;
    --heading-font-weight: 600
}

.plus-pricing__small-amount {
    margin: 4px 0 auto
}

.plus-pricing__description {
    white-space: normal;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center
}

.plus-pricing__most-popular {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 12px;
    border-radius: 6px 0 8px;
    background-color: var(--salmon-500);
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px
}

.teaser-modal {
    width: 100%;
    flex-direction: column;
    max-width: 464px;
    border-radius: 8px
}

@media (min-width:800px) {
    .teaser-modal--image {
        flex-direction: row;
        max-width: 944px;
        width: 50%
    }
}

.teaser-modal__image {
    position: relative;
    flex-shrink: 0;
    background-size: cover;
    background-color: var(--image-bg);
    width: 100%
}

.teaser-modal__image:before {
    content: "";
    display: block;
    padding-bottom: 100%
}

@media (min-width:800px) {
    .teaser-modal__image {
        width: 50%
    }
}

@media (min-width:960px) {
    .teaser-modal--video {
        flex-direction: row;
        max-width: 1032px
    }
}

.teaser-modal__video {
    width: 100%;
    padding-top: 75%;
    position: relative;
    height: 0;
    overflow: hidden;
    flex-shrink: 0
}

@media (min-width:960px) {
    .teaser-modal__video {
        padding-top: 500px;
        width: 540px
    }
    .teaser-modal__video video {
        width: auto !important
    }
}

@media (min-width:1200px) {
    .teaser-modal__video {
        padding-top: 420px;
        width: 560px
    }
}

.teaser-modal__video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.teaser-modal__fade-in-image {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: inherit;
    opacity: 0;
    transition: opacity 1s ease-in-out
}

.teaser-modal__fade-in-image--visible {
    opacity: 1
}

.teaser-modal h2 string {
    display: inline
}

.teaser-modal__col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--secondary-000);
    padding: 1.5rem
}

@media (min-width:600px) {
    .teaser-modal__col-right {
        padding: 2rem
    }
}

@media (min-width:800px) {
    .teaser-modal__col-right {
        padding: 3rem 2rem 2rem
    }
}

@media (max-width:800px) {
    .teaser-modal__image+.modal-card__col-right {
        width: 100%
    }
}

@media (max-width:960px) {
    .teaser-modal__video+.modal-card__col-right {
        width: 100%
    }
}

.teaser-modal__buttons {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
}

.teaser-modal+.modal-root__close-button {
    background-color: var(--secondary-000)
}

.teaser-modal__sign-in {
    margin: auto 0 -1.25rem;
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.teaser-modal .h3 {
    font-family: Mulish, Avenir Next, Trebuchet MS, sans-serif
}

.centered-modal__bg,
.centered-modal__content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.centered-modal__bg {
    position: absolute;
    --distance-from-side: calc(50% - 420px)
}

.centered-modal__bg--blue {
    background-size: 250px 315px;
    background-image: url(/images/site/background-shapes/register-blue-top-left.svg), url(/images/site/background-shapes/register-blue-bottom-right.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top -3rem left var(--distance-from-side), bottom -4rem right var(--distance-from-side)
}

.centered-modal__bg--purple {
    background-size: 226px 290px;
    background-image: url(/images/site/background-shapes/pricing-purple-top-left.svg), url(/images/site/background-shapes/pricing-purple-bottom-right.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top -1rem left var(--distance-from-side), bottom -4rem right var(--distance-from-side)
}

.centered-modal__bg--orange {
    --distance-from-side: calc(50% - 400px);
    background-size: 258px 336px;
    background-image: url(/images/site/background-shapes/payment-orange-bottom-left.svg), url(/images/site/background-shapes/payment-orange-top-right.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom -8rem left var(--distance-from-side), top -4rem right var(--distance-from-side)
}

.centered-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem
}

@media (min-width:361px) {
    .centered-modal__content {
        padding: 3rem 2rem
    }
}

.centered-modal__heading {
    width: 47rem;
    max-width: 100%;
    text-align: center
}

.centered-modal__heading--sm-margin {
    --heading-margin-bottom: 0.5rem
}

.centered-modal__sub-heading {
    text-align: center
}

.centered-modal__column {
    width: 31rem;
    max-width: 100%
}

.centered-modal__footer-text {
    margin-top: 1rem;
    text-align: center
}

.payment-modal--update-mode .payment-modal__billing-summary,
.payment-modal--update-mode .plus-pricing {
    display: none
}

@media (min-width:361px) {
    .payment-modal .centered-modal__heading+.plus-pricing {
        margin-top: .5rem
    }
}

.payment-modal__card-number {
    width: 100%;
    margin: 0;
    border-radius: 4px 4px 0 0;
    border-bottom-color: transparent;
    order: 0
}

.payment-modal__card-number.form-field__input--invalid {
    border-bottom-color: var(--error-500)
}

.payment-modal__card-number.form-field__input--invalid~.payment-modal__field-container .form-field__input--invalid {
    border-top-color: transparent
}

.payment-modal__card-number>span {
    color: var(--secondary-500)
}

.payment-modal__card-expiry {
    width: 50%;
    border-radius: 0 0 0 4px;
    order: 0
}

.payment-modal__card-expiry.form-field__input--invalid~.form-field__input--invalid {
    border-left-color: transparent
}

.payment-modal__card-cvc {
    width: 50%;
    border-radius: 0 0 4px;
    order: 0;
    border-left-color: transparent
}

.payment-modal__card-cvc.form-field__input--invalid {
    border-left-color: var(--error-500)
}

.payment-modal__card-type {
    position: absolute;
    width: 3.5rem;
    height: 24px;
    top: 5px;
    right: 0;
    z-index: 2;
    text-align: center;
    opacity: 1;
    transition: opacity .2s linear
}

.payment-modal__card-type:empty {
    opacity: 0
}

.payment-modal__card-type img {
    height: 100%
}

.payment-modal__field-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.payment-modal__wallet {
    margin: 0
}

.payment-modal__wallet-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    height: 1.5rem
}

.payment-modal__wallet-divider hr {
    width: 100%;
    border-color: var(--secondary-300)
}

.payment-modal__wallet-divider span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 8px;
    background: var(--secondary-000);
    color: var(--secondary-600);
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.payment-modal__wallet-button {
    background: #000
}

.payment-modal__wallet-button:hover {
    background: var(--static-jetblack)
}

.payment-modal__wallet-button img {
    height: calc(100% - 1.25rem)
}

.payment-modal__promo-input {
    width: 50%
}

.payment-modal__promo-button {
    margin: 0 auto 0 8px
}

.payment-modal__promo-checkmark {
    display: inline-block;
    margin-left: 6px
}

.payment-modal__promo-spinner {
    height: 14px;
    width: 14px;
    margin: 0 4px
}

.payment-modal__footer {
    text-align: center;
    margin-top: 1.5rem;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.payment-modal__footer>* {
    display: inline
}

.payment-modal__billing-summary {
    color: inherit;
    text-align: left
}

.image-library__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 56px)
}

@media (max-width:800px) {
    .image-library__body {
        flex-direction: column
    }
}

.image-library__gallery {
    min-height: 100%
}

@media (max-width:800px) {
    .image-library__gallery {
        margin: 1rem auto 0;
        min-height: 0
    }
}

.image-library__left-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.5rem;
    border-right: 1px solid var(--border-color)
}

.image-library__tab {
    margin-bottom: .25rem;
    padding-left: .75rem;
    transition: color .3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.image-library__albums,
.image-library__folders {
    overflow-y: auto;
    overflow-x: hidden
}

.browser--windows-firefox .image-library__albums,
.browser--windows-firefox .image-library__folders {
    scrollbar-width: thin
}

.image-library__albums:empty,
.image-library__folders:empty {
    display: none
}

.image-library__album,
.image-library__folder {
    justify-content: space-between;
    padding-right: .5rem;
    margin-bottom: 2px
}

.image-library__album string,
.image-library__folder string {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.image-library__album .loading-spinner,
.image-library__folder .loading-spinner {
    flex-shrink: 0;
    margin-left: .25rem;
    margin-right: .25rem
}

.image-library__album:last-child,
.image-library__folder:last-child {
    margin-bottom: 4px
}

.image-library__album {
    padding-left: 2rem
}

.image-library__album--indented {
    padding-left: 2.75rem
}

.image-library__folder {
    padding-left: .75rem
}

.image-library__folder--indented {
    padding-left: 1.5rem
}

.image-library__disconnect {
    position: absolute;
    right: 1.75rem;
    max-width: 108px;
    --button-text-size: 12px
}

@media (min-width:801px) {
    .image-library__disconnect--google-photos {
        top: 4rem
    }
    .image-library__disconnect--google-drive {
        top: 6.25rem
    }
}

@media (max-width:800px) {
    .image-library__disconnect {
        position: absolute;
        left: 10rem;
        top: calc(1rem + var(--safe-area-top))
    }
}

.image-library__folder-heading {
    margin: 1rem 2rem 0;
    display: flex;
    align-items: center
}

.image-library__back-button {
    margin-right: .5rem
}

.image-library__back-button--inactive {
    pointer-events: none
}

.image-library .icon-back {
    transform: rotate(180deg)
}

.image-library__right-panel {
    width: calc(100% - 17rem)
}

.image-library__right-panel>.scrollable-content {
    padding-top: 24px
}

.image-library__button--delete {
    position: absolute;
    right: 8px;
    bottom: 8px
}

.stock-search .panel-header {
    flex-shrink: 0
}

.stock-search__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 56px)
}

@media (max-width:800px) {
    .stock-search__body {
        flex-direction: column
    }
}

.stock-search__left-panel {
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.5rem;
    border-right: 1px solid var(--border-color)
}

.stock-search__tags-container {
    margin-top: 1.5rem
}

@media (max-width:800px) {
    .stock-search__tags-container {
        margin-top: 0;
        height: 4rem !important;
        flex-shrink: 0;
        flex-grow: 0
    }
}

.stock-search__tags-container .panel-header__text {
    padding-left: 0
}

@media (max-width:800px) {
    .stock-search__tags {
        display: flex;
        margin-left: 1.5rem
    }
    .stock-search__tags .chip {
        margin-bottom: 0;
        white-space: nowrap
    }
}

.stock-search__tag {
    display: inline-block;
    margin: 0 4px 4px 0
}

.stock-search__attribution {
    margin-top: auto;
    --text-font-size: 13px;
    --text-line-height: 18px
}

@media (max-width:800px) {
    .stock-search__attribution {
        background: var(--secondary-100);
        height: 2rem;
        line-height: 2rem;
        text-align: center
    }
}

.stock-search__right-panel {
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem);
    border-radius: 0 0 3px
}

.stock-search__results-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 1.5rem 0 1rem 1.5rem
}

.stock-search__results-heading {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    margin: 0
}

.stock-search__results-gallery {
    min-height: 100%
}

.stock-search__clear-results {
    margin-left: .75rem;
    flex-shrink: 0
}

.stock-search__author {
    position: absolute;
    bottom: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    --text-color: var(--static-white);
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transform: translateX(0);
    transition: opacity .25s, transform .2s ease-out !important
}

.stock-search__author a {
    color: inherit !important
}

.gallery__item--selected .stock-search__author {
    transform: translateX(12px) translateY(-12px);
    max-width: calc(100% - 12px - 24px)
}

.get-started {
    padding: 1.5rem 1rem
}

@media (min-width:361px) {
    .get-started {
        padding: 2rem 1rem
    }
}

@media (min-width:768px) {
    .get-started {
        padding: 4rem 0
    }
}

@media (min-width:960px) {
    .get-started {
        padding: 3rem 0
    }
}

.get-started__heading {
    text-align: center;
    margin-bottom: 1.5rem
}

@media (min-width:768px) {
    .get-started__heading {
        margin-bottom: 2rem
    }
}

.get-started__card {
    max-width: 336px;
    margin: 0 auto
}

@media (max-width:767px) {
    .get-started__card p {
        display: none
    }
    .get-started__card button {
        color: var(--secondary-800);
        width: 100%;
        background: 0 0;
        --text-font-size: 18px;
        --heading-font-size: 18px;
        --text-line-height: calc(18px + 8px);
        --heading-line-height: calc(18px + 8px);
        --heading-margin-bottom: 8px;
        --heading-margin-top: 24px;
        --heading-font-weight: 700;
        font-weight: 700;
        margin: -1rem auto
    }
}

@media (min-width:768px) {
    .get-started__card {
        grid-column: span 4;
        margin: 0;
        display: grid
    }
}

.get-started__card:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.get-started__image {
    width: 100%;
    height: auto
}

@media (min-width:361px) {
    .get-started__caption {
        margin-bottom: 1.5rem
    }
}

.get-started__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between
}

.get-started button {
    pointer-events: none
}

.form-modal {
    background-color: var(--secondary-000);
    padding: 1rem
}

@media (min-width:361px) {
    .form-modal {
        padding: 2rem
    }
}

.form-modal h3 {
    margin-bottom: 1.5rem
}

.form-modal .modal__heading {
    margin-bottom: 1rem
}

.form-modal__notification {
    border: 1px solid var(--warning-500);
    background: var(--warning-100);
    border-radius: 4px;
    color: var(--static-jetblack);
    margin: 0 0 1.5rem;
    padding: .5rem
}

.form-modal__confirmation {
    padding: 1rem 2rem
}

.announcement {
    background-color: transparent
}

.announcement__figure {
    display: block;
    margin: 0
}

.announcement__images {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background-color: var(--image-bg)
}

.announcement__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.announcement__image--border-bottom {
    border-bottom: 1px solid var(--image-border-color)
}

.announcement__video {
    padding-top: 56.25%;
    height: 0;
    position: relative;
    background-color: var(--image-bg)
}

.announcement__video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.announcement__new-text {
    color: var(--error-500);
    text-transform: uppercase
}

.webcam--show-error .webcam__apply,
.webcam--show-error .webcam__discard,
.webcam--show-error .webcam__image,
.webcam--show-error .webcam__take-photo,
.webcam--show-error .webcam__video,
.webcam--show-image .webcam__cancel,
.webcam--show-image .webcam__error,
.webcam--show-image .webcam__take-photo,
.webcam--show-image .webcam__video,
.webcam--show-video .webcam__apply,
.webcam--show-video .webcam__discard,
.webcam--show-video .webcam__error,
.webcam--show-video .webcam__image {
    display: none
}

.webcam__body {
    display: block
}

.webcam__content {
    position: relative;
    padding-bottom: 56.25%
}

.webcam__content>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.webcam__image,
.webcam__video {
    background: var(--image-bg)
}

.webcam__error {
    text-align: center;
    line-height: 1.5
}

.project-manager__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 56px);
    height: 100%
}

@media (max-width:800px) {
    .project-manager__body {
        flex-direction: column;
        padding: 1rem 0 0;
        flex-grow: 0;
        height: auto
    }
}

.project-manager__left-panel {
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.5rem 1.5rem 0;
    height: 100%;
    border-right: 1px solid var(--border-color)
}

.project-manager__left-panel-buttons {
    --scrollable-content-width: 14rem
}

.project-manager__right-panel {
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem);
    height: 100%;
    position: relative
}

.project-manager--dragging .project-manager__right-panel {
    pointer-events: none
}

.project-manager__top-bar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 2rem
}

.project-manager__top-bar-buttons {
    display: flex;
    justify-content: space-between
}

.project-manager__filter-button {
    margin-right: 8px;
    position: relative
}

.project-manager__filter-button .count-indicator {
    right: -4px;
    top: -4px
}

.project-manager__thumbnail-gallery {
    flex-grow: 1;
    min-height: 100%
}

@media (max-width:800px) {
    .project-manager__thumbnail-gallery {
        margin-bottom: .5rem
    }
}

@media (pointer:coarse) and (min-width:800px) {
    .project-manager__thumbnail-gallery .icon-deselected {
        opacity: 1;
        background: rgba(255, 255, 255, .4);
        color: transparent;
        filter: none;
        box-shadow: 0 0 1px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5), 0 0 4px rgba(0, 0, 0, .25);
        border: 1px solid var(--static-white);
        overflow: visible
    }
}

.project-manager__thumbnail-gallery .gallery__item {
    transition: transform .15s ease-in-out
}

.project-manager__option-buttons {
    margin-bottom: 1.5rem
}

.project-manager__option {
    justify-content: flex-start;
    margin-bottom: 4px
}

.project-manager__search-box {
    margin-bottom: 1.5rem
}

@media (max-width:800px) {
    .project-manager__search-box {
        margin-right: .5rem;
        width: 100%;
        margin-bottom: 1rem
    }
}

.project-manager__column-header-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--secondary-300);
    padding: 6.5px 0
}

.project-manager__heading-name {
    width: 50%;
    padding-left: .25rem
}

.project-manager__heading-created {
    width: 22.39%
}

.project-manager__heading-modified {
    width: 27.61%
}

.project-manager__column-header-title {
    --text-font-size: 13px;
    --text-line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    margin: 0;
    align-items: center
}

.project-manager__name {
    width: calc(50% - 32px);
    display: flex;
    align-items: center;
    padding: 0 3rem 0 .5rem
}

@media (max-width:800px) {
    .project-manager__name {
        width: calc(100% - 36px);
        padding-right: 1rem
    }
}

.project-manager__name span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.project-manager__date-created {
    width: 22.39%;
    padding-right: 1.5rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.project-manager__date-created--heading {
    width: 23%
}

.project-manager__date-modified {
    width: 22.39%;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.project-manager__project-row {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5rem 0;
    cursor: pointer;
    border-bottom: 1px solid var(--secondary-300);
    transition: transform .15s ease-in-out
}

@media (max-width:800px) {
    .project-manager__project-row {
        border-bottom: 0
    }
}

@media (hover:hover) {
    .project-manager__project-row:hover {
        background-color: var(--secondary-200)
    }
    .project-manager__project-row:hover .project-manager__edit-button {
        opacity: 1
    }
}

.project-manager__project-row:last-child {
    margin-bottom: 1.5rem
}

.project-manager__project-row--selected {
    background: var(--primary-100)
}

.project-manager__project-thumbnail {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-right: 10px;
    background-size: cover;
    border-radius: 4px
}

@media (max-width:800px) {
    .project-manager__project-thumbnail {
        width: 48px;
        height: 48px;
        margin-right: 1rem
    }
}

.project-manager__create-folder-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem
}

.project-manager__edit-button {
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    padding: 4.5px 0
}

.project-manager__edit-button--list-view {
    flex-direction: row;
    flex-shrink: 0;
    padding: 0 4.5px;
    margin: 0 8px
}

@media (max-width:800px) {
    .project-manager__edit-button--list-view {
        margin: 0;
        padding: 4.5px 0;
        flex-direction: column
    }
}

.project-manager__edit-button--thumbnail-view {
    position: absolute;
    bottom: 8px;
    right: 8px
}

.project-manager__edit-button>span {
    border-radius: 50%;
    width: 3px;
    height: 3px;
    background: currentColor
}

@media (max-width:800px) {
    .project-manager__edit-button>span {
        background: var(--primary-500)
    }
}

.project-manager__edit-button:after {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px)
}

.project-manager__thumbnail-view-item:hover .project-manager__edit-button {
    opacity: 1
}

.project-manager__thumbnail-title {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: calc(100% - 3.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    color: var(--static-white)
}

.project-manager__folder-list {
    padding: 1rem 2rem
}

.project-manager__folder {
    margin-bottom: 2px
}

@media (pointer:coarse) and (min-width:800px) {
    .project-manager__folder .project-manager__folder-ellipsis {
        opacity: 1
    }
    .project-manager__folder--targeted {
        background: var(--secondary-400);
        transition: background-color .15s ease-in-out
    }
    .project-manager__folder--targeted .project-manager__folder-ellipsis {
        pointer-events: none
    }
}

@media (hover:hover) {
    .project-manager__folder:hover .project-manager__folder-ellipsis {
        opacity: 1
    }
}

.project-manager__folders-header {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 8px;
    align-items: center
}

.project-manager__folder-ellipsis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 24px;
    height: 24px;
    opacity: 0;
    padding: 0 5.5px
}

@media (max-width:800px) {
    .project-manager__folder-ellipsis {
        opacity: 1
    }
}

.project-manager__folder-ellipsis span {
    border-radius: 50%;
    width: 3px;
    height: 3px;
    position: relative;
    background-color: var(--secondary-800)
}

.project-manager__move-folder-modal+.dialog__footer {
    border-top: 0;
    padding: 0;
    margin-top: 1rem;
    justify-content: flex-start
}

.project-manager__move-folder-modal+.dialog__footer .dialog__button:nth-child(2n) {
    margin: 0 0 .5rem .5rem
}

.project-manager__move-dialog .dialog__body {
    padding: 24px 0 16px 24px
}

.project-manager__move-folder-list {
    max-height: 160px;
    --scrollable-content-width: 272px
}

.project-manager__move-folder-list .project-manager__folder {
    padding-left: 8px
}

.project-manager__move-folder-header {
    --heading-margin-bottom: 8px
}

.project-manager__folder-count {
    color: var(--secondary-600);
    margin-left: 3px
}

.project-manager__folder-name-container {
    display: flex;
    overflow: hidden;
    align-items: center
}

.project-manager__folder-name {
    width: 75%;
    text-overflow: ellipsis;
    overflow: hidden
}

.project-manager__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    --text-font-size: 14px;
    --text-line-height: 20px
}

.project-manager__loading string {
    margin-left: .5rem
}

.project-manager__circle {
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0 2px 0 8px;
    border-radius: 50%;
    border: 1px solid var(--secondary-800);
    flex-shrink: 0;
    transition: none
}

.project-manager__circle .icon {
    opacity: 0
}

.project-manager__circle--selected,
.project-manager__circle:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    border: none
}

.project-manager__circle--selected .icon,
.project-manager__circle:hover .icon {
    opacity: 1
}

.project-manager__circle:hover {
    background: var(--static-white);
    color: var(--static-black)
}

.project-manager__circle--selected {
    background: var(--primary-400) !important;
    color: var(--static-white) !important
}

.project-manager__circle:after {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px)
}

.project-manager__canvas-empty-state {
    min-height: 100%
}

.project-manager__edit-options {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    border-radius: 0
}

.project-manager__rename-input {
    width: 100%
}

.project-manager__logged-out {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    flex-grow: 1
}

.project-manager__results-header {
    margin: 1.5rem 0 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5rem;
    height: 2rem
}

.project-manager__results-header--multiselect {
    height: 3.5rem;
    margin: 0 0 1rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
}

.project-manager__results-container {
    display: flex;
    align-items: center
}

.project-manager__filters {
    display: flex;
    margin-right: 1.5rem;
    justify-content: space-between;
    flex-basis: 152px
}

@media (max-width:800px) {
    .project-manager__filters {
        flex-direction: column;
        margin-right: 0;
        padding: 0 2rem
    }
}

.project-manager__filter {
    margin-bottom: 2px
}

.project-manager__filter h3 {
    margin: 24px 0 10px
}

.project-manager__results-heading {
    margin: 0;
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.project-manager__clear-results {
    margin-left: .75rem;
    flex-shrink: 0
}

.project-manager__active-filters {
    display: flex;
    flex-direction: row;
    margin-left: 1.5rem;
    align-items: center
}

.project-manager__active-filters .button {
    --button-height: 18px
}

.project-manager__active-filter {
    margin-left: .5rem
}

.project-manager__ghost {
    position: relative;
    width: 180px
}

.project-manager__ghost-button {
    position: absolute;
    top: 0;
    --button-height: 40px;
    width: 180px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    z-index: 2
}

.project-manager__ghost-button:nth-child(2) {
    margin: 4px 0 0 4px;
    z-index: 1;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15)
}

.project-manager__ghost-indicator {
    position: absolute;
    width: 22px;
    height: 22px;
    top: -8px;
    right: -12px;
    z-index: 3;
    line-height: 22px;
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: var(--error-500)
}

.banner-modal {
    display: flex
}

.banner-modal__column-left {
    width: 40%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    margin-bottom: calc(-1 * var(--safe-area-bottom))
}

@media (min-width:801px) {
    .banner-modal__column-left {
        width: 60%
    }
}

.banner-modal__column-left--has-curve {
    mask-repeat: no-repeat;
    mask-size: auto 100%;
    mask-position: right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: right
}

.banner-modal__column-right {
    width: 60%;
    padding: 3rem 2rem 4rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

@media (min-width:801px) {
    .banner-modal__column-right {
        padding: 4rem 3rem 5rem 2rem;
        width: 40%
    }
}

.banner-modal__content {
    text-align: right
}

.banner-modal--has-curve .banner-modal__column-left {
    width: 60%
}

.banner-modal--has-curve .banner-modal__column-right {
    width: 40%;
    padding-left: 0
}

.banner-modal--has-curve .banner-modal__content {
    margin-left: -3rem
}

.banner-modal:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, .12)
}

.modal-root__inner:has(.banner-modal) .modal-root__close-button {
    right: .25rem
}

.bfn {
    touch-action: none
}

.browser--safari .bfn :not(input, textarea) {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.control-item-set {
    background: var(--secondary-100);
    border-radius: 8px;
    border: 1px solid var(--secondary-300)
}

.control-item-set .tabs__button {
    flex-basis: 0
}

.control-item-set .tabs__panel {
    padding-bottom: .5rem
}

.control-item-set tabbed-layout+.control-item-bottom {
    margin-top: .5rem
}

.control-item-set--no-background {
    background: 0 0;
    border: 0
}

.control-item-columns {
    display: flex;
    justify-content: space-between;
    margin: 1rem 1rem 0
}

.control-item-columns>.control-item {
    flex-grow: 1
}

.control-item-columns>.control-item:first-child {
    margin: 0 .25rem 0 0
}

.control-item-columns>.control-item:last-child {
    margin: 0 0 0 .25rem
}

@media (max-width:800px) {
    .control-item-columns>.control-item:first-child {
        margin: 0 .5rem 0 0
    }
    .control-item-columns>.control-item:last-child {
        margin: 0 0 0 .5rem
    }
}

.control-item {
    margin: 1rem 1rem 0
}

.control-item>.checkbox {
    margin-top: calc(-1 * var(--checkbox-padding));
    margin-bottom: calc(-1 * var(--checkbox-padding))
}

.control-item--slider {
    padding-bottom: 7px
}

.control-item--slider label {
    margin: 0 0 13px
}

@media (max-width:800px) {
    .control-item--slider label {
        margin: 0 0 16px
    }
}

.control-item--scrubber-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.control-item--scrubber-item .control-item-label {
    flex-grow: 1;
    width: 50%
}

.control-item--scrubber-item .scrubber {
    flex-grow: 1
}

.control-item--gallery {
    margin: 1rem 0 0
}

@media (max-width:800px) {
    .control-item--gallery {
        margin: 0
    }
}

.control-item-bottom {
    margin: 1rem
}

.control-item-disabled {
    pointer-events: none;
    opacity: .3;
    transition: opacity .3s ease-in-out
}

.control-item-disabled:has(.toggle-switch) {
    opacity: .5
}

.control-item .disabled {
    pointer-events: none;
    opacity: .3;
    transition: opacity .3s ease-in-out
}

.control-item-label {
    display: block;
    --text-font-size: 13px;
    --text-line-height: 18px;
    color: var(--secondary-700);
    margin-bottom: 6px;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    min-height: var(--text-line-height)
}

@media (max-width:800px) {
    .control-item-label {
        --text-font-size: 14px
    }
}

.color-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.color-item label {
    margin: 0
}

@media (max-width:800px) {
    #cutout_menu_controls {
        position: relative
    }
    #cutout_menu_controls>div:first-child {
        visibility: hidden;
        height: 0;
        margin-bottom: -1rem
    }
    #cutout_invert {
        visibility: visible;
        position: absolute;
        right: 2rem;
        top: 124px
    }
    #cutout_select_action {
        width: calc(100% - 1rem - 2rem)
    }
}

.alt-brush-menu .button-group {
    display: none
}

.alt-brush-menu .control-item-columns {
    align-items: end
}

.alt-brush-menu .control-item-columns .dropdown {
    width: calc(100% - 2.5rem)
}

@media (max-width:800px) {
    #rotate_menu_controls .control-item-columns .control-item:nth-child(2) {
        flex-grow: 1 !important
    }
    #rotate_menu_controls .button-group {
        --gap: 1rem
    }
    #funky_focus_menu_controls .button-group--spread {
        --gap: 1rem !important
    }
}

.control-item-divider {
    border-top: 1px solid var(--secondary-300)
}

.popover {
    position: relative;
    display: none;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .12));
    transition: opacity .3s ease-in-out
}

.dark-theme .popover {
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .35))
}

.popover:not([data-transform=false]) .popover-container {
    will-change: transform
}

.popover-arrow {
    position: absolute;
    background-color: var(--secondary-000);
    width: 14px;
    height: 14px;
    transform-origin: top left;
    transform: rotate(-45deg)
}

.popover-container {
    position: absolute;
    background-color: var(--secondary-000);
    border-radius: 8px
}

.popover--animate {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    animation: .4s ease-in-out closeAnimation
}

@keyframes closeAnimation {
    from {
        margin-left: 0;
        margin-top: 0;
        width: 320px;
        height: 197px;
        opacity: 1
    }
    to {
        margin-left: -43px;
        margin-top: 17px;
        width: 0;
        height: 0;
        opacity: 0
    }
}

.popover--animate .help-clue {
    opacity: 0
}

.popover.active {
    opacity: 1;
    pointer-events: all
}

.popover.active-container {
    transition: transform .3s ease-in-out
}

.popover.bounce {
    transform: scale(1.05)
}

.drop-shadow-not-supported .popover {
    filter: none
}

.drop-shadow-not-supported .popover .popover-container {
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .5);
    padding: .5rem 0 1rem
}

.sample-images {
    width: 264px;
    padding: 1rem
}

.sample-images__main-text {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center
}

.sample-images__sub-text {
    position: relative;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center
}

.sample-images__sub-text hr {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1px solid var(--secondary-300)
}

.sample-images__sub-text span {
    position: relative;
    padding: 0 10px;
    --text-font-size: 13px;
    --text-line-height: 18px;
    background-color: var(--secondary-000);
    color: var(--secondary-600)
}

.sample-images__container {
    display: flex;
    margin-top: .5rem;
    justify-content: space-between
}

.sample-images__button {
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 4px;
    padding: 0;
    background-color: var(--image-bg);
    position: relative;
    overflow: hidden
}

.sample-images__button img {
    display: block;
    width: 100%;
    z-index: -1
}

.sample-images__button:hover .sample-images__hover-container {
    opacity: 1
}

.sample-images__hover-container {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%);
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.batch-icon__container {
    position: absolute;
    top: 0
}

.badge {
    display: inline-block;
    padding: .25rem;
    line-height: 18px;
    border-radius: 4px;
    color: var(--secondary-000);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .12)
}

.badge+.badge {
    display: none
}

.badge--plus {
    padding: 0;
    width: 12px;
    height: 12px;
    background: var(--static-green);
    border: 2px solid var(--secondary-000);
    border-radius: 50%;
    box-shadow: none
}

.badge--ai {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--static-green)
}

.badge--ai .icon--ai {
    fill: var(--static-white)
}

.dark-theme .badge--ai .icon--ai {
    fill: var(--static-black)
}

.badge--ai.badge--dashboard-ai {
    position: initial
}

.badge--new-template {
    position: absolute;
    top: 12px;
    text-transform: uppercase;
    color: var(--static-white);
    width: 37px;
    display: flex;
    background-size: contain;
    align-items: center;
    padding-left: 4px;
    --text-font-size: 10px
}

.badge--new-category {
    position: absolute;
    top: -5px;
    text-transform: uppercase;
    color: var(--static-white);
    width: 40px;
    display: flex;
    background-size: contain;
    align-items: center;
    padding-left: 4px;
    --text-font-size: 10px;
    right: -6px;
    transform: scale(.7)
}

@media (min-width:768px) {
    .badge--new-category {
        top: 9px;
        right: 0;
        transform: rotate(180deg)
    }
}

@media (min-width:768px) {
    .badge--new-category strong {
        transform: rotate(180deg)
    }
}

.badge--right-corner {
    bottom: 24px;
    right: 15px;
    top: auto
}

.button .badge {
    margin: auto 0 auto auto
}

.tabs__nav {
    display: flex;
    box-shadow: inset 0 -1px 0 var(--border-color)
}

.tabs__button {
    flex-grow: 1;
    --button-height: 40px;
    --button-padding: 0;
    --button-text-size: 14px;
    --text-color: var(--secondary-600);
    background: 0 0;
    border-radius: 0
}

.tabs__button:active,
.tabs__button:focus,
.tabs__button:hover {
    --text-color: var(--secondary-800)
}

.tabs__button.button--focus {
    background: var(--primary-100)
}

.tabs__button:active {
    background: var(--primary-200)
}

.tabs__button--active {
    --text-color: var(--primary-500) !important
}

@media (max-width:800px) {
    .tabs__button {
        flex-grow: 0;
        --button-height: 44px;
        --button-padding: 16px
    }
    .tabs__button--0 {
        margin-left: auto
    }
    .tabs__button--1 {
        margin-right: auto
    }
}

.tabs__button-text {
    position: relative;
    height: var(--button-height);
    line-height: var(--button-height);
    font-size: 14px;
    pointer-events: none
}

.tabs__underline {
    position: absolute;
    width: 100%;
    left: 0;
    height: 2px;
    bottom: 0;
    background-color: var(--primary-500);
    transition: width .15s ease-out, transform .15s ease-out
}

.tabs__panels {
    position: relative;
    overflow: hidden;
    transition: height .3s cubic-bezier(.25, .1, .25, 1)
}

.tabs__panel {
    position: absolute;
    width: 100%;
    top: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.tabs__panel:not(.tabs__panel--active),
.tabs__panel:not(.tabs__panel--active) * {
    pointer-events: none !important
}

.tabs__panel--active {
    position: static;
    opacity: 1
}

.note {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid var(--note-500);
    background-color: var(--note-100);
    border-radius: 4px;
    --text-color: var(--static-black);
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px
}

.control-item-set .note {
    margin: 1rem 1rem 0
}

.note--has-close-button {
    position: relative
}

.note__close-button {
    color: var(--static-black);
    --button-height: 18px;
    position: absolute;
    top: 0;
    right: 0
}

.dismissible-note {
    opacity: 1;
    transition: 1s;
    height: 100%
}

.dismissible-note--hidden {
    opacity: 0;
    visibility: hidden;
    display: flex;
    height: 0;
    transition: none
}

.dismissible-note__outer-menu {
    display: flex;
    height: auto;
    margin-top: 1rem;
    opacity: 0;
    visibility: hidden;
    position: absolute
}

.dismissible-note__outer-menu--active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transition: 1s
}

.bfn--is-mobile .note--desktop-only {
    display: none
}

.tutorial {
    display: flex;
    align-items: center;
    background: var(--secondary-100);
    border: 1px solid var(--secondary-300);
    border-radius: 4px;
    margin-top: 8px;
    padding: 6px 16px 6px 8px;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.tutorial__text {
    margin-right: .25rem
}

.tutorial__icon {
    margin-right: .5rem
}

.tutorial p {
    margin-bottom: 0
}

.tool-menu {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    margin: 0;
    height: 100%
}

.tool-menu:focus {
    outline: 0
}

.tool-menu .menu-content {
    display: flex;
    flex-direction: column;
    height: 100%
}

.tool-menu__empty-state {
    padding: 1.5rem
}

@media (max-width:800px) {
    .tool-menu__empty-state {
        text-align: center;
        padding: 1rem
    }
}

.tool-menu__empty-state-image {
    max-width: 100%;
    margin-bottom: 1rem
}

@media (max-width:800px) {
    .tool-menu__empty-state-image {
        width: 80px;
        margin-bottom: .5rem
    }
}

.dark-theme .tool-menu__empty-state-image {
    filter: saturate(.6)
}

.tool-menu__message {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center
}

.tool-menu-group {
    height: 100%
}

.app-lang-es #designer_resize_template,
.app-lang-tr #designer_resize_template {
    font-size: 14px;
    letter-spacing: -.5px
}

.tooltip-screen {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 14.5rem;
    padding: 3px 8px;
    border-radius: 4px;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    background-color: var(--secondary-100);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, var(--tooltip-drop-shadow-alpha)));
    z-index: 9999999997;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0;
    transition: opacity .1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary-800);
    white-space: pre-wrap;
    word-break: break-word
}

.tooltip-screen--bottom:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--secondary-100);
    bottom: -9px
}

.tooltip-screen--top:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid var(--secondary-100);
    top: -9px
}

.tooltip-screen--left:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-right: 12px solid var(--secondary-100);
    left: -9px
}

.tooltip-screen--right:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-left: 12px solid var(--secondary-100);
    right: -9px
}

.tooltip-screen.active {
    opacity: 1
}

.tooltip-screen .shortcut {
    margin-left: .5rem
}

.tooltip-info {
    position: relative;
    display: inline
}

@media (min-width:801px) {
    .tooltip-info__icon-container:hover+.tooltip-info__text {
        opacity: 1
    }
}

@media (max-width:800px) {
    .tooltip-info__icon-container--active+.tooltip-info__mobile-text {
        display: flex
    }
}

.tooltip-info__icon {
    margin: 0 0 2px 2px;
    fill: var(--secondary-500);
    pointer-events: all
}

.tooltip-info__text {
    opacity: 0;
    background-color: var(--secondary-100);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    padding: 8px;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 248px;
    pointer-events: none;
    transition: opacity .1s ease-in-out
}

.tooltip-info__text--right {
    left: 38px
}

.tooltip-info__text--left {
    right: 28px
}

.tooltip-info__mobile-text {
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    margin-right: 1rem;
    display: none
}

.selectable-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 224px;
    height: 480px;
    overflow: hidden
}

.selectable-list input[type=checkbox] {
    display: none
}

.selectable-list__header {
    flex-shrink: 0;
    display: flex;
    position: relative;
    margin: 1rem;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.selectable-list__search-icon {
    position: absolute;
    transform: translate(8px, 8px)
}

.selectable-list__input {
    flex-grow: 1;
    padding: 0 2.25rem 0 2.125rem;
    height: 32px
}

.selectable-list__clear-search {
    position: absolute;
    right: 0
}

.selectable-list__list {
    flex-grow: 1;
    margin-left: 14px
}

.selectable-list__list--no-results .selectable-list__item {
    display: none
}

.selectable-list__list--no-results .selectable-list__item--no-results {
    display: block
}

.selectable-list__list.scrollable-content {
    --scrollable-content-width: 192px;
    width: 208px
}

.selectable-list__item {
    justify-content: flex-start;
    margin-bottom: 2px
}

.selectable-list__item .icon {
    display: none;
    margin-left: auto
}

.selectable-list__item.button--selected .icon {
    display: inline-block
}

.selectable-list__item--no-results {
    display: none;
    padding: 0 1rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center;
    pointer-events: none
}

.selectable-list__item--no-results img {
    width: 100%;
    margin-bottom: 1rem
}

.dark-theme .selectable-list__item--no-results img {
    filter: saturate(.6)
}

.selectable-list .checkbox {
    display: block;
    width: 100%
}

.selectable-list .checkbox label {
    padding: 0 0 0 .5rem;
    cursor: pointer
}

.selectable-list .checkbox string {
    line-height: 2rem
}

/* nouislider - 15.8.1 */

.noUi-target,
.noUi-target * {
    -webkit-touch-callout: none;
    touch-action: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.noUi-target {
    position: relative
}

.noUi-base,
.noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1
}

.noUi-connects {
    overflow: hidden;
    z-index: 0
}

.noUi-connect,
.noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transform-origin: 0 0;
    transform-style: flat
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    left: 0;
    right: auto
}

.noUi-vertical .noUi-origin {
    top: -100%;
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute
}

.noUi-touch-area {
    height: 100%;
    width: 100%
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit !important
}

[disabled] .noUi-connect {
    background: #b8b8b8
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
    cursor: not-allowed
}

.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center
}

.noUi-value-sub {
    color: #ccc;
    font-size: 10px
}

.noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    left: 0;
    width: 100%
}

.noUi-value-horizontal {
    transform: translate(-50%, 50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(50%, 50%)
}

.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px
}

.noUi-vertical .noUi-origin>.noUi-tooltip {
    transform: translate(0, -18px);
    top: auto;
    right: 28px
}

.bfn-slider {
    cursor: pointer;
    margin: 0 .05rem;
    height: 2px
}

.bfn-slider .noUi-connect {
    background: var(--secondary-800)
}

.bfn-slider .noUi-connects {
    background: var(--secondary-400)
}

.bfn-slider .noUi-handle {
    height: 16px;
    width: 16px;
    top: -7px;
    right: -8px;
    border-radius: 50%;
    background: var(--secondary-000);
    border: 2px solid var(--secondary-800);
    transition: background-color .3s ease-in-out, width .15s ease-out, height .15s ease-out, transform .15s ease-in-out
}

@media (max-width:800px) {
    .bfn-slider .noUi-handle {
        height: 20px;
        width: 20px;
        top: -9px;
        right: -10px
    }
}

@media (pointer:coarse) {
    .bfn-slider .noUi-handle:before {
        content: "";
        position: absolute;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        top: -14px;
        left: -14px
    }
}

.bfn-slider .noUi-draggable {
    cursor: ew-resize
}

.bfn-slider .noUi-base {
    width: calc(100% - 16px);
    margin: 0 auto
}

.bfn-slider:after {
    content: "";
    width: 20px;
    height: 2px;
    display: flex;
    position: absolute;
    border-radius: 8px;
    top: 0;
    background: var(--secondary-400);
    right: 0
}

.bfn-slider .noUi-base:after,
.bfn-slider .noUi-base:before {
    content: "";
    position: absolute;
    display: block
}

.bfn-slider .noUi-base:before {
    width: 16px;
    height: 100%;
    border-radius: 4px;
    top: 0;
    left: -8px;
    background: var(--secondary-800)
}

.bfn-slider .noUi-base:after {
    width: calc(100% + 16px);
    height: 16px;
    top: -7px;
    left: -8px
}

@media (max-width:800px) {
    .bfn-slider .noUi-base:before,
    .bfn-slider .noUi-base:focus-within:before,
    .bfn-slider .noUi-connect,
    .bfn-slider .nou-base:after,
    .bfn-slider :after {
        pointer-events: none
    }
}

@media (min-width:801px) {
    .bfn-slider:hover .noUi-handle {
        background: var(--primary-500);
        border: 2px solid var(--primary-500)
    }
    .bfn-slider:hover .noUi-base:before,
    .bfn-slider:hover .noUi-connect {
        background: var(--primary-500)
    }
}

.bfn-slider--active .noUi-base:before {
    background: var(--primary-500) !important
}

@media (max-width:800px) {
    .bfn-slider--active .noUi-connect,
    .bfn-slider--active:before {
        background: var(--primary-500)
    }
}

.bfn-slider .noUi-base:focus-within .noUi-connect,
.bfn-slider .noUi-base:focus-within:before {
    background: var(--primary-500)
}

.bfn-slider .noUi-handle.noUi-active:focus {
    background: var(--primary-500);
    box-shadow: none;
    border: 0
}

.bfn-slider .noUi-handle:focus {
    outline: 0;
    background: var(--secondary-000);
    border: 2px solid var(--primary-500);
    box-shadow: 0 0 0 2px #acc3fd;
    width: 20px;
    height: 20px;
    transform: translate(2px, -2px)
}

@media (max-width:800px) {
    .bfn-slider .noUi-handle:focus {
        transform: translate(0, 0)
    }
}

.bfn-slider .noUi-pips-horizontal {
    display: flex;
    padding: 0;
    justify-content: space-between;
    transform: translateY(-4px);
    position: relative;
    height: auto;
    pointer-events: none;
    z-index: 1
}

.bfn-slider .noUi-pips-horizontal .noUi-value-horizontal {
    font-size: 10px;
    margin-top: .25rem
}

.bfn-slider .noUi-pips-horizontal .noUi-marker-large {
    height: 2px;
    background-color: var(--secondary-800);
    border-radius: 50%
}

.bfn-slider .noUi-pips-horizontal .noUi-marker-large.notch--active {
    background-color: transparent
}

.bfn-slider .noUi-pips-horizontal .noUi-marker-large.notch--invert {
    background-color: var(--secondary-000)
}

.bfn-slider .noUi-pips-horizontal .noUi-marker:first-child+.noUi-value {
    margin-left: 2px
}

.bfn-slider .noUi-pips-horizontal .noUi-value:last-child {
    margin-left: -3px
}

.slider-notch {
    margin-bottom: 2rem;
    padding-bottom: .25rem;
    transform: translateY(-4px)
}

.slider-notch .slider-label__value {
    display: none
}

.slider-custom .bfn-slider {
    height: .5rem;
    background: 0 0
}

.slider-custom .noUi-connect {
    background: 0 0
}

.slider-custom .noUi-base:focus-within .noUi-base:before,
.slider-custom .noUi-base:focus-within .noUi-connect {
    background: 0 0
}

.slider-custom:hover .noUi-connect {
    background: 0 0
}

.slider-custom .noUi-handle {
    top: -4px
}

.slider-custom-hue .noUi-base:before {
    background: red !important
}

.slider-custom-hue .bfn-slider:after {
    height: 8px;
    background: red !important
}

.slider-custom-hue .noUi-connects {
    background: linear-gradient(to right, red 0, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, red 100%)
}

.slider-custom-saturation .noUi-base:before {
    background: #fff !important
}

.slider-custom-saturation .bfn-slider:after {
    height: 8px;
    background: red !important
}

.slider-custom-saturation .noUi-connects {
    background: linear-gradient(to right, #fff 0, red 100%)
}

.slider-custom-temperature .noUi-base:before {
    background: #2963d9 !important
}

.slider-custom-temperature .bfn-slider:after {
    height: 8px;
    background: #ff9700 !important
}

.slider-custom-temperature .noUi-connects {
    background: linear-gradient(to right, #2963d9 0, #fff 50%, #ff9700 100%)
}

.slider-custom-luminosity .noUi-base:before {
    background: #000 !important
}

.slider-custom-luminosity .bfn-slider:after {
    height: 8px;
    background: #fff !important
}

.slider-custom-luminosity .noUi-connects {
    background: linear-gradient(to right, #000 0, #fff 100%)
}

.slider-custom-contrast .noUi-base:before {
    background: gray !important
}

.slider-custom-contrast .bfn-slider:after {
    height: 8px;
    background: #fff !important
}

.slider-custom-contrast .noUi-connects {
    background: linear-gradient(to right, gray 0, #4169e1 50%, #fff 100%)
}

.slider-custom-cyan-red .noUi-base:before {
    background: #0ff !important
}

.slider-custom-cyan-red .bfn-slider:after {
    height: 8px;
    background: red !important
}

.slider-custom-cyan-red .noUi-connects {
    background: linear-gradient(to right, #0ff 0, grey 50%, red 100%)
}

.slider-custom-magenta-green .noUi-base:before {
    background: #f0f !important
}

.slider-custom-magenta-green .bfn-slider:after {
    height: 8px;
    background: #0f0 !important
}

.slider-custom-magenta-green .noUi-connects {
    background: linear-gradient(to right, #f0f 0, grey 50%, #0f0 100%)
}

.slider-custom-yellow-blue .noUi-base:before {
    background: #ff0 !important
}

.slider-custom-yellow-blue .bfn-slider:after {
    height: 8px;
    background: #00f !important
}

.slider-custom-yellow-blue .noUi-connects {
    background: linear-gradient(to right, #ff0 0, grey 50%, #00f 100%)
}

.slider-custom-gradient .noUi-base:before {
    background: var(--before-color) !important
}

.slider-custom-gradient .bfn-slider:after {
    height: 8px;
    background: var(--after-color) !important
}

.slider-custom-gradient .noUi-connects {
    background: linear-gradient(to right, var(--gradient-colors))
}

.slider-custom--opacity {
    --slider-height: 16px;
    margin: 0 0 8px;
    padding-bottom: 0;
    position: relative
}

@media (max-width:800px) {
    .slider-custom--opacity {
        --slider-height: 24px
    }
}

.slider-custom--opacity .slider-label__container {
    position: initial
}

.slider-custom--opacity .slider-label__value--centered[type=number] {
    position: absolute;
    right: 0;
    z-index: 1;
    background: var(--secondary-000);
    max-width: 32px;
    height: var(--slider-height);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.slider-custom--opacity .bfn-slider {
    height: var(--slider-height);
    margin: 0;
    background: url(/images/app/checker_pattern.jpg) 0 0/10.5px;
    border-radius: 8px
}

.slider-custom--opacity .bfn-slider:after {
    display: none
}

.slider-custom--opacity .bfn-slider:hover .noUi-base:before,
.slider-custom--opacity .bfn-slider:hover .noUi-connect {
    background: 0 0
}

.slider-custom--opacity .bfn-slider:hover .noUi-handle {
    border: 2px solid var(--secondary-800)
}

.slider-custom--opacity .bfn-slider .noUi-connects {
    background: 0 0;
    border-radius: 8px
}

.slider-custom--opacity .bfn-slider .noUi-base {
    width: calc(100% - 32px);
    margin-left: 0
}

.slider-custom--opacity .bfn-slider .noUi-base:before,
.slider-custom--opacity .bfn-slider .noUi-base:focus-within .noUi-connect {
    background: 0 0 !important
}

.slider-custom--opacity .bfn-slider .noUi-connect {
    background: 0 0
}

.slider-custom--opacity .bfn-slider .noUi-handle {
    width: 6px;
    height: calc(var(--slider-height) + 2px);
    background: 0 0;
    border-radius: 0;
    top: -1px;
    right: -3px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5)
}

.slider-custom--opacity .bfn-slider .noUi-handle.noUi-active:focus {
    background: 0 0
}

.slider-custom--opacity .bfn-slider .noUi-handle:focus {
    background: 0 0;
    width: 6px;
    height: calc(var(--slider-height) + 2px);
    transform: initial;
    box-shadow: none;
    border: 2px solid var(--secondary-800)
}

.slider-custom--opacity .slider-label {
    position: absolute;
    width: 100%
}

.slider-custom--opacity .slider-label .control-item-label {
    display: none
}

.slider-custom--opacity .slider-label .control-item-label.slider-label__value {
    right: 0;
    position: absolute;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    height: 16px;
    width: 32px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    --text-line-height: 16px;
    --text-font-size: 11px;
    background: var(--secondary-000);
    z-index: 1
}

.slider-custom .noUi-base:after {
    top: -3px
}

.slider-label {
    display: flex;
    justify-content: space-between;
    position: relative
}

.slider-label__container {
    position: relative;
    height: 100%
}

.slider-label__value {
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    max-width: 45px;
    height: 18px;
    text-align: right;
    word-spacing: -2px
}

@media (pointer:coarse) {
    .slider-label__value {
        height: 20px;
        border: 0;
        pointer-events: none
    }
}

.slider-label__value.slider-label__value--px[type=number] {
    padding: 0 16px 0 0;
    letter-spacing: -.04em
}

.slider-label__value.slider-label__value--percent[type=number] {
    padding: 0 14px 0 0
}

.slider-label__value[type=number] {
    padding: 0 13px 0 0;
    text-align: right;
    -webkit-appearance: textfield;
    -moz-appearance: none;
    appearance: textfield;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    letter-spacing: -.3px !important
}

@media (max-width:800px) {
    .slider-label__value[type=number] {
        --text-line-height: 20px
    }
}

.slider-label__value--centered[type=number] {
    text-align: center;
    padding: 0
}

.slider-label__unit {
    position: absolute;
    right: 4px;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    letter-spacing: -.4px !important
}

@media (max-width:800px) {
    .slider-label__unit {
        --text-line-height: 20px
    }
}

.slider-label__dash {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -1px;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none
}

.slider-label input::-webkit-inner-spin-button,
.slider-label input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.input-array {
    display: flex;
    justify-content: space-between
}

.input-array__value {
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    max-width: 45px;
    height: 22px;
    text-align: right;
    word-spacing: -2px
}

@media (pointer:coarse) {
    .input-array__value {
        height: 20px
    }
}

.input-array__value[type=number] {
    padding: 0 13px 0 0;
    text-align: right;
    -webkit-appearance: textfield;
    -moz-appearance: none;
    appearance: textfield;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    letter-spacing: -.3px !important
}

@media (max-width:800px) {
    .input-array__value[type=number] {
        --text-line-height: 20px
    }
}

.input-array__value--centered[type=number] {
    text-align: center;
    padding: 0 8px
}

.input-array input::-webkit-inner-spin-button,
.input-array input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.accordion {
    width: calc(var(--scrollable-content-width) + 20px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: -2px;
    padding: 2px
}

.browser--windows-firefox .accordion {
    scrollbar-width: thin
}

.accordion__header {
    justify-content: space-between;
    margin-bottom: 2px;
    padding-left: 0;
    font-size: 14px
}

.accordion__header:hover {
    color: var(--secondary-600)
}

.accordion__header:active {
    color: var(--secondary-500)
}

.accordion__header span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 3rem;
    height: 100%;
    padding-right: 2px;
    flex-shrink: 1
}

.accordion__header .icon {
    transition: transform .3s
}

.accordion__section {
    overflow: hidden;
    will-change: height;
    width: calc(4px + var(--scrollable-content-width, 100%));
    margin: -2px;
    padding: 2px
}

.accordion__section.accordion__section--open .accordion__header .icon {
    transform: scaleY(-1)
}

.accordion__panel {
    overflow: hidden;
    margin: -2px;
    padding: 2px 2px 10px
}

.accordion__menu-button {
    margin-bottom: 2px
}

.accordion__menu-button .badge {
    margin: 0 0 0 1px
}

.scrubber {
    position: relative;
    color: var(--secondary-800);
    --text-font-size: 13px;
    --text-line-height: 18px;
    font-size: var(--text-font-size);
    background-color: inherit;
    transition: background-color .3s ease-in-out;
    --unitWidth: 16px;
    --inputPadding: 7px;
    --buttonWidth: 23px
}

@media (hover:hover) and (min-width:801px) {
    .scrubber:hover {
        background-color: var(--secondary-200)
    }
}

.scrubber label {
    display: block
}

.scrubber__mobile-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative
}

.scrubber__mobile-content .scrubber__button--minus {
    margin-right: 6px
}

.scrubber__mobile-content .scrubber__button--plus {
    margin-left: 6px
}

.scrubber--no-unit {
    --unitWidth: 0rem
}

.scrubber__unit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--buttonWidth);
    z-index: 1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: calc(var(--unitWidth) + var(--inputPadding));
    text-align: left;
    line-height: 2rem;
    border-right: 1px solid var(--border-color)
}

.scrubber__unit--mobile {
    border-right: none;
    right: 38px
}

.scrubber__unit--sm {
    --unitWidth: 14px !important;
    --text-font-size: 11px;
    line-height: 2.15rem
}

.scrubber__input {
    height: 2rem;
    line-height: 30px;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: textfield;
    padding-right: calc(var(--unitWidth) + var(--inputPadding) + var(--buttonWidth));
    text-align: right;
    width: 100%
}

.scrubber__input--sm {
    --unitWidth: 14px !important
}

.scrubber__input--mobile {
    padding-right: calc(var(--unitWidth) + var(--inputPadding))
}

.scrubber__input::-webkit-inner-spin-button,
.scrubber__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.scrubber__button {
    touch-action: none
}

.scrubber__button--desktop {
    position: absolute;
    height: 1rem;
    width: 1.5rem;
    color: inherit;
    background: 0 0;
    border: none;
    right: 0;
    cursor: row-resize;
    padding: 0;
    line-height: 0;
    z-index: 9
}

.scrubber__button--desktop .icon {
    height: .25rem
}

.scrubber__button--mobile {
    flex-shrink: 0
}

.scrubber__button--plus {
    top: 0
}

.scrubber__button--plus .icon {
    transform: rotate(180deg)
}

.scrubber__button--minus {
    bottom: 0
}

.dropdown {
    display: block;
    position: relative
}

.dropdown__box:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.dropdown__box .icon {
    flex-shrink: 0;
    transform: none
}

.dropdown .button--selected+.dropdown__list {
    opacity: 1;
    visibility: visible;
    box-shadow: var(--dropdown-box-shadow)
}

.dropdown__selection {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.dropdown__selection--placeholder {
    color: var(--secondary-600)
}

.dropdown__list {
    top: calc(100% + 4px);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    z-index: 10;
    overflow-y: auto;
    height: 162px;
    border-radius: 4px;
    background-color: var(--secondary-000);
    transition: opacity .3s ease-in-out, box-shadow .3s ease-in-out;
    touch-action: pan-y
}

.dropdown__list-header {
    margin: 0;
    padding: .5rem 0;
    display: flex
}

.dropdown__description {
    color: inherit
}

.dropdown__item {
    text-align: left;
    border-radius: 0
}

.dropdown__item--has-divider {
    border-bottom: 1px solid var(--border-color)
}

.dropdown__item.button--focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--focus-outline-color);
    border-radius: 4px
}

.dropdown__mobile-list {
    overflow-y: auto;
    overflow-x: hidden;
    height: 220px;
    transition: height .3s cubic-bezier(.25, .1, .25, 1)
}

.browser--windows-firefox .dropdown__mobile-list {
    scrollbar-width: thin
}

.dialog--dropdown-select .dialog__heading {
    margin: 0
}

.dialog--dropdown-select .dialog__body {
    --vertical-padding: 0px
}

.dialog--dropdown-select.dialog--expanded .dropdown__mobile-list {
    height: calc(var(--100vh) - 84px - var(--top-nav-height) - var(--safe-area-bottom) - var(--safe-area-top))
}

.dialog--dropdown-select .dropdown__list-header {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    padding: .5rem 1rem
}

.browser--safari #transform_blend_mode .dropdown__list::-webkit-scrollbar {
    width: 0
}

.browser--safari #transform_blend_mode .button--selected+.dropdown__list::-webkit-scrollbar {
    width: 12px
}

.dropdown-menu {
    position: relative
}

.dropdown-menu .button--selected+.dropdown-menu__items {
    visibility: visible;
    opacity: 1;
    transform: translateY(8px)
}

.dropdown-menu__heading {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    --heading-font-weight: 700;
    margin: 0 0 4px;
    white-space: nowrap
}

.dropdown-menu__divider {
    margin: .25rem .5rem;
    border-top: 1px solid var(--border-color)
}

.dropdown-menu__items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 4;
    padding: .5rem;
    border-radius: 8px;
    background: var(--secondary-000);
    box-shadow: var(--dropdown-box-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out
}

.dropdown-menu__item-with-submenu {
    position: relative;
    cursor: auto
}

.dropdown-menu__item-with-submenu:focus .dropdown-menu__submenu-outer,
.dropdown-menu__item-with-submenu:focus-within .dropdown-menu__submenu-outer,
.dropdown-menu__item-with-submenu:hover .dropdown-menu__submenu-outer {
    opacity: 1;
    pointer-events: auto
}

.dropdown-menu__submenu-outer {
    position: absolute;
    left: 100%;
    top: -1rem;
    padding: 1rem .5rem 1rem 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-out
}

.dropdown-menu__submenu-inner {
    padding: .5rem;
    border-radius: 8px;
    background: var(--secondary-000);
    box-shadow: var(--dropdown-box-shadow)
}

.bfn--hidden .button--selected+.dropdown-menu__items {
    visibility: hidden
}

.sortable-list {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.sortable-list--dragging.no-pointer {
    pointer-events: none !important
}

.sortable-list--dragging .dragging {
    opacity: .8
}

.sortable-list--dragging .drag-over {
    position: relative
}

.sortable-list--dragging .drag-over:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-500)
}

.sortable-list--dragging .drag-over-up:before {
    top: 0
}

.sortable-list--dragging .drag-over-down:before {
    bottom: 0
}

.draggable-panel {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 12;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-shadow: var(--dropdown-box-shadow)
}

.draggable-panel.animated {
    transition: opacity .2s linear
}

.draggable-panel .active {
    pointer-events: none
}

.draggable-panel.active {
    pointer-events: all;
    opacity: 1
}

.draggable-panel.active .active {
    pointer-events: initial
}

.draggable-panel .panel-header,
.draggable-panel.disabled {
    cursor: move
}

.draggable-panel.disabled>:not(.panel-header):not(.popover) {
    filter: opacity(.35)
}

.draggable-panel.disabled>:not(.panel-header):not(.popover) * {
    pointer-events: none
}

.help-clue {
    padding: 1rem
}

.help-clue__item {
    --text-font-size: 13px;
    --text-line-height: 18px;
    --text-margin-bottom: .5rem
}

.help-clue__item:nth-last-child(2) {
    --text-margin-bottom: 1rem
}

.help-clue__header {
    --heading-margin-bottom: .5rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    font-weight: 700
}

.help-clue__icon-text {
    display: flex
}

.help-clue__icon-text a {
    pointer-events: auto
}

.help-clue__icon {
    flex-shrink: 0;
    margin-right: 10px
}

.help-clue__icon.badge--plus {
    margin: 3px 11px 0 3px
}

.help-clue__footer {
    border-top: 1px solid var(--secondary-300);
    padding: 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.help-clue__link {
    --text-color: var(--primary-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.help-clue__link:hover {
    --text-color: var(--primary-400)
}

.help-clue__link:active {
    --text-color: var(--primary-600)
}

.help-clue__upgrade {
    display: inline-block;
    pointer-events: auto
}

.help-clue__dismiss {
    margin-left: auto
}

.help-clue__dismiss-container {
    position: absolute;
    top: 32px
}

.shortcut {
    margin-left: 1rem;
    background: var(--secondary-300);
    color: var(--secondary-700);
    border-radius: 4px;
    padding: 0 .25rem;
    --text-font-size: 13px;
    --text-line-height: 18px;
    font-size: var(--text-font-size);
    line-height: var(--text-line-height)
}

.image-preview {
    flex-direction: row;
    padding: 0;
    max-width: 100%
}

@media (max-width:800px) {
    .image-preview {
        flex-direction: column
    }
}

.image-preview__header {
    margin-bottom: 1rem;
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.image-preview__left-column {
    width: calc(100% - 20rem);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--secondary-000);
    border-radius: 3px 0 0 3px;
    touch-action: pan-y
}

.browser--windows-firefox .image-preview__left-column {
    scrollbar-width: thin
}

.image-preview__image-outer {
    flex-grow: 1;
    background: var(--secondary-000);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem
}

.image-preview__image-wrapper {
    position: relative;
    display: flex;
    justify-content: center
}

.image-preview__image {
    height: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(/images/app/checker_pattern.jpg);
    box-shadow: 0 0 12px rgba(0, 0, 0, .25)
}

.image-preview__dimensions {
    padding: 0 1.5rem 1.5rem
}

.image-preview__dimensions-label {
    --text-font-size: 13px;
    --text-line-height: 18px
}

.image-preview__right-column {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--border-color);
    width: 20rem;
    padding: 1.5rem;
    border-radius: 0 3px 3px 0;
    touch-action: pan-y
}

.browser--windows-firefox .image-preview__right-column {
    scrollbar-width: thin
}

@media (max-width:800px) {
    .image-preview__right-column {
        width: 100%
    }
}

.image-preview__right-column .checkbox__label {
    align-items: flex-start
}

.image-preview__right-column .control-item {
    margin-left: 0;
    margin-right: 0
}

.image-preview__footer {
    padding-top: 1rem;
    margin-top: auto
}

.side-by-side {
    display: flex;
    align-items: center;
    margin: 0 0 1rem
}

.side-by-side__column {
    width: calc(50% - 20px)
}

.side-by-side__arrow {
    width: 40px;
    margin-top: 2rem
}

.side-by-side__heading {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    font-weight: 700;
    margin-bottom: 1rem
}

.side-by-side__image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--image-border-color);
    flex-direction: column;
    font-size: 13px;
    background: var(--image-bg) no-repeat center;
    background-size: contain;
    height: 146px
}

.cutout-modal {
    flex-direction: row
}

@media (max-width:800px) {
    .cutout-modal {
        flex-direction: column;
        padding: 2rem
    }
}

.cutout-modal__left-column {
    width: calc(100% - 20rem);
    padding: 1.5rem
}

.cutout-modal__right-column {
    display: flex;
    flex-direction: column;
    width: 20rem;
    padding: 1.5rem;
    border-left: 1px solid var(--border-color)
}

.cutout-modal__mobile-content {
    flex-shrink: 0;
    margin-top: auto
}

.cutout-modal__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center
}

.cutout-modal__image {
    background: url(/images/app/checker_pattern.jpg);
    box-shadow: 0 0 12px rgba(0, 0, 0, .25)
}

.cutout-modal__header {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.cutout-modal .control-item {
    margin-left: 0;
    margin-right: 0
}

.expandable-checkbox {
    display: block;
    margin: 0 0 2px;
    border-radius: 4px
}

.expandable-checkbox__control {
    --gap: 0;
    background: var(--secondary-200)
}

.expandable-checkbox__check-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex-grow: 0;
    max-width: calc(100% - 2rem)
}

.expandable-checkbox__check-button string {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.expandable-checkbox__check-button:hover .expandable-checkbox__box {
    border-color: var(--secondary-500)
}

.expandable-checkbox__check-button.button--focus {
    z-index: 1
}

.expandable-checkbox__box {
    border-color: var(--jetblack)
}

.expandable-checkbox__box--on {
    border-color: var(--primary-400);
    background-color: var(--primary-400) !important
}

.expandable-checkbox__box--on .expandable-checkbox__icon {
    opacity: 1;
    color: var(--static-white) !important
}

.expandable-checkbox__mixed-icon {
    width: .5rem;
    height: 2px;
    background-color: var(--primary-400)
}

.expandable-checkbox__open-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-grow: 1 !important;
    justify-content: flex-end;
    padding-right: .5rem
}

.expandable-checkbox__content {
    background: var(--secondary-100);
    overflow: hidden;
    transition: height .3s cubic-bezier(.25, .1, .25, 1)
}

.expandable-checkbox__content>div {
    overflow: hidden;
    padding-bottom: .5rem
}

.mobile-badges {
    overflow: hidden;
    flex-grow: 0
}

.mobile-badges__image {
    height: 54px;
    width: auto
}

.browser--android .mobile-badges--app-store,
.browser--iOS .mobile-badges--google-play {
    display: none
}

.recent-projects {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: calc(var(--scrollable-content-width) + 18px);
    overflow: hidden
}

.recent-projects__header {
    width: calc(var(--scrollable-content-width) + 8px);
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    height: 2rem;
    margin-bottom: 8px
}

.recent-projects__header h3 {
    font-weight: inherit
}

.recent-projects__no-projects string {
    display: inline
}

.recent-projects__content {
    flex-grow: 1
}

.recent-projects__content .gallery {
    background: 0 0
}

.recent-projects__content .gallery__item {
    border-radius: 8px
}

.main-container {
    height: var(--100vh);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.app {
    position: relative;
    top: calc(var(--top-nav-height) + var(--safe-area-top));
    left: 0;
    width: 100%;
    height: calc(var(--100vh) - var(--top-nav-height) - var(--safe-area-top) - var(--safe-area-bottom));
    overflow: hidden
}

@media (max-width:800px) {
    .app {
        height: calc(var(--100vh) - var(--top-nav-height) - var(--safe-area-top))
    }
}

@media (min-width:801px) {
    .app {
        outline: 1px solid var(--border-color)
    }
}

#appStage {
    position: absolute;
    top: 0;
    left: 56px;
    right: 0;
    bottom: 48px
}

@media (max-width:800px) {
    #appStage {
        left: 0;
        bottom: calc(50px + var(--safe-area-bottom))
    }
}

.tertiary-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: .5rem
}

@media (max-width:800px) {
    .tertiary-grid {
        grid-auto-flow: column;
        grid-template-columns: unset;
        grid-gap: 1rem;
        padding: 0 1.5rem 0 1rem;
        height: 104px;
        align-items: center;
        margin: 0
    }
}

@media (max-width:800px) {
    .tertiary-grid--expanded {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(var(--collage-icon-size), 1fr));
        grid-gap: 1rem;
        padding-top: 1rem !important;
        height: 100%;
        align-items: center;
        width: 100%
    }
}

.tertiary-grid__item {
    position: relative;
    width: 68px;
    height: 68px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: box-shadow .15s ease-in-out
}

@media (max-width:800px) {
    .tertiary-grid__item {
        height: var(--collage-icon-size);
        width: var(--collage-icon-size)
    }
}

.tertiary-grid__item--pattern {
    background: var(--image-bg);
    border-radius: 8px;
    background-size: 34px;
    border: 1px solid var(--image-border-color)
}

.tertiary-grid__item:hover .tertiary-grid__image--pattern {
    opacity: 1
}

.tertiary-grid__item:hover .tertiary-grid__image--layout {
    background-image: url(/images/app/collage-layout-sprites/4px-hovered-v4.png)
}

.tertiary-grid__item.button--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.tertiary-grid__item.button--focus .tertiary-grid__image--layout {
    background-color: var(--focus-outline-color)
}

.tertiary-grid__item--selected .tertiary-grid__image--layout {
    background-image: url(/images/app/collage-layout-sprites/4px-selected-v4.png)
}

.tertiary-grid__item>* {
    pointer-events: none
}

.tertiary-grid__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.tertiary-grid__image--layout {
    background-image: url(/images/app/collage-layout-sprites/4px-default-v4.png);
    transition: background .15s ease-in-out
}

.tertiary-grid__image--pattern {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%);
    border-radius: 8px;
    opacity: 0;
    transition: opacity .15s ease-in-out
}

.tertiary-grid__badge {
    position: absolute;
    right: 4px;
    bottom: 4px
}

.tertiary-grid__badge--layout {
    right: 6px;
    bottom: 8px
}

.user-is-plus .badge--plus,
.user-is-plus .hide-if-premium {
    display: none
}

.drag-drop-area {
    position: absolute;
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    padding: .5rem;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    --text-color: var(--secondary-800);
    background-color: var(--overlay-color-1);
    opacity: 0;
    transition: color .3s ease-in-out, opacity .3s ease-in-out, background-color .3s ease-in-out
}

.bfn--smartphone .drag-drop-area {
    display: none
}

.canvas--dark .drag-drop-area {
    --text-color: var(--static-white);
    background-color: rgba(53, 57, 72, .9)
}

.canvas--light .drag-drop-area {
    --text-color: var(--static-jetblack);
    background-color: rgba(236, 236, 245, .9)
}

.drag-drop-area--initial {
    opacity: 1
}

.drag-drop-area--initial:not(.drag-drop-area--active) {
    background-color: transparent
}

.drag-drop-area--active {
    opacity: 1
}

.drag-drop-area--canvas-guides {
    top: 2rem;
    left: 2rem
}

.canvas--dark .drag-drop-area img,
.dark-theme .drag-drop-area img {
    filter: saturate(.6)
}

.canvas--light .drag-drop-area img {
    filter: none
}

.drag-drop-listener * {
    pointer-events: none !important
}

.main-menu--disabled {
    pointer-events: none
}

.browser--safari .main-menu--disabled custom-tool-menu button:not(.button--icon):not(.button--has-icon) {
    display: block
}

.main-menu--disabled .primary-panel__button {
    color: var(--secondary-500) !important
}

.main-menu--alt-menu-displayed .popover,
.main-menu--disabled .popover {
    opacity: 0;
    transition: none
}

.main-menu--alt-menu-displayed .secondary-menu,
.main-menu--alt-menu-displayed .tertiary-menu {
    visibility: hidden
}

.primary-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: var(--secondary-000)
}

.primary-panel:focus {
    outline: 0
}

.primary-panel__section {
    display: none
}

.primary-panel__section.active {
    display: flex
}

@media (max-width:800px) {
    .primary-panel {
        right: 0;
        bottom: var(--safe-area-bottom);
        height: 50px;
        overflow-y: hidden;
        overflow-x: auto;
        border-top: 1px solid var(--border-color)
    }
    .primary-panel__section {
        height: 49px;
        align-items: center
    }
    .primary-panel__section:after,
    .primary-panel__section:before {
        content: "";
        display: block;
        width: 1px;
        height: 1px;
        flex-shrink: 0;
        margin-right: calc(1rem - 1px)
    }
    .primary-panel__button {
        --button-height: 24px;
        --button-text-size: 12px;
        margin-right: 1rem
    }
}

@media (max-width:800px) and (max-width:800px) {
    .primary-panel__button {
        margin-top: 5px
    }
}

@media (max-width:800px) {
    .primary-panel__button.active {
        --text-color: var(--selected-text-color);
        background: var(--selected-bg)
    }
}

@media (max-width:800px) {
    .primary-panel .icon {
        display: none
    }
}

@media (min-width:801px) {
    .primary-panel {
        top: 0;
        width: 56px;
        padding: 2px 0 0;
        border-right: 1px solid var(--border-color);
        transition: width .1s ease-out, box-shadow .1s ease-out
    }
    .primary-panel__section {
        flex-direction: column;
        width: 56px;
        transition: width .15s ease-out
    }
    .primary-panel__button {
        width: var(--button-height);
        --button-padding: 6px;
        justify-content: flex-start;
        color: var(--secondary-500);
        margin: 12px 12px 0
    }
    .primary-panel__button.active,
    .primary-panel__button:hover {
        color: var(--secondary-800)
    }
    .primary-panel__button .icon {
        flex-shrink: 0
    }
    .primary-panel__button string {
        display: none
    }
    .primary-panel--expanded {
        --primary-side-menu-expanded-width: 200px;
        --primary-side-menu-expanded-button-width: 176px;
        width: var(--primary-side-menu-expanded-width);
        box-shadow: 6px 4px 12px rgba(0, 0, 0, .2);
        transition: width .15s ease-out, box-shadow .15s ease-out
    }
    .primary-panel--expanded .primary-panel__button {
        width: var(--primary-side-menu-expanded-button-width);
        color: var(--secondary-800)
    }
    .primary-panel--expanded .primary-panel__section {
        width: 100%
    }
    .primary-panel--expanded string {
        display: inline-block;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.primary-panel-skirt {
    display: none
}

@media (max-width:800px) {
    .primary-panel-skirt {
        display: block;
        position: absolute;
        width: 100%;
        height: var(--safe-area-bottom);
        bottom: 0;
        z-index: 10;
        background: var(--secondary-000)
    }
}

.secondary-menu,
.tertiary-menu {
    position: absolute
}

.secondary-menu:focus,
.tertiary-menu:focus {
    outline: 0
}

@media (min-width:801px) {
    .secondary-menu,
    .tertiary-menu {
        top: 0;
        left: 56px;
        height: 100%;
        width: 272px;
        transform: translateX(-272px);
        --scrollable-content-width: 224px;
        background: var(--secondary-000);
        border-right: 1px solid var(--border-color);
        transition: transform .3s cubic-bezier(.25, .1, .25, 1);
        will-change: transform
    }
    .secondary-menu.open,
    .tertiary-menu.open {
        transform: translateX(0)
    }
    .secondary-menu .tool-menu,
    .tertiary-menu .tool-menu {
        padding: 0 calc(1.5rem - 1px) 0 1.5rem
    }
    .secondary-menu .tool-menu .accordion,
    .tertiary-menu .tool-menu .accordion {
        touch-action: pan-y
    }
}

@media (max-width:800px) {
    .secondary-menu .button--blue.button--fullwidth,
    .tertiary-menu .button--blue.button--fullwidth {
        --button-height: 36px;
        --button-text-size: 16px;
        --button-padding: 12px
    }
    .secondary-menu .toggle-group__button,
    .tertiary-menu .toggle-group__button {
        --button-text-size: 14px
    }
}

.secondary-menu {
    z-index: 9
}

@media (max-width:800px) {
    .secondary-menu {
        bottom: calc(50px + var(--safe-area-bottom));
        left: 0;
        right: 0;
        height: 67px;
        background: var(--secondary-000);
        border-top: 1px solid var(--border-color);
        transition: height .3s cubic-bezier(.25, .1, .25, 1);
        will-change: height
    }
    .secondary-menu--disabled-on-mobile>* {
        opacity: .5;
        pointer-events: none
    }
    .secondary-menu,
    .secondary-menu .vertical-scroller {
        max-height: calc(var(--100vh) - var(--safe-area-top) - var(--safe-area-bottom) - var(--top-nav-height) - 36px - 50px)
    }
    .secondary-menu .tabs__panel .vertical-scroller {
        max-height: calc(var(--100vh) - var(--safe-area-top) - var(--safe-area-bottom) - var(--top-nav-height) - 36px - 44px - 50px)
    }
}

.tertiary-menu {
    z-index: 8
}

@media (max-width:800px) {
    .tertiary-menu {
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 12;
        --mobile-tertiary-menu-height: 240px;
        height: calc(var(--mobile-tertiary-menu-height) + var(--safe-area-bottom));
        border-top: 1px solid var(--border-color);
        background: var(--secondary-000);
        transform: translateY(calc(var(--mobile-tertiary-menu-height) + var(--safe-area-bottom)));
        transition: transform .3s cubic-bezier(.25, .1, .25, 1), height .3s cubic-bezier(.25, .1, .25, 1);
        will-change: transform, height
    }
    .tertiary-menu.open {
        transform: translateY(0)
    }
    .tertiary-menu:not(.open) .drag-up-to-expand:after,
    .tertiary-menu:not(.open) .drag-up-to-expand:before {
        display: none
    }
    .tertiary-menu .vertical-scroller {
        height: calc(var(--mobile-tertiary-menu-height) + var(--safe-area-bottom) - 44px)
    }
    .tertiary-menu .vertical-scroller>* {
        margin: 0 auto;
        max-width: 464px;
        padding: 0 1rem
    }
    .tertiary-menu .vertical-scroller>:last-child {
        padding: 0 1rem calc(var(--safe-area-bottom) + 2rem)
    }
    .tertiary-menu .tabs__nav {
        margin: 0 auto;
        max-width: 464px
    }
    .tertiary-menu .tabs__panel {
        padding-bottom: 1rem
    }
    .tertiary-menu__top-bar {
        margin: 0 auto;
        max-width: 464px;
        display: flex;
        justify-content: space-between;
        height: 44px;
        border-bottom: 1px solid var(--border-color);
        position: relative;
        z-index: 1
    }
    .tertiary-menu__top-bar--left-aligned {
        justify-content: left
    }
    .tertiary-menu__top-bar--right-aligned {
        justify-content: flex-end
    }
    .tertiary-menu__heading {
        --text-font-size: 14px;
        --heading-font-size: 14px;
        --text-line-height: calc(14px + 6px);
        --heading-line-height: calc(14px + 6px);
        margin: 0;
        --heading-line-height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .tertiary-menu__heading--centered {
        display: flex;
        overflow: hidden;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        margin: 0 calc(32px + 2rem) 0 0
    }
    .tertiary-menu__back {
        margin: calc((44px - var(--button-height))/ 2) 10px 0 1rem
    }
    .tertiary-menu__apply,
    .tertiary-menu__cancel {
        margin: calc((44px - var(--button-height))/ 2) 1rem 0
    }
    .tertiary-menu input[type=checkbox],
    .tertiary-menu input[type=radio] {
        top: 0
    }
}

.tertiary-menu .icon--back {
    transform: rotate(180deg)
}

.category-menu .button {
    margin-bottom: 2px
}

.category-menu .icon {
    color: var(--primary-500)
}

.horizontal-scroller {
    height: 100%;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto
}

.horizontal-scroller>.button {
    margin-left: 1rem
}

.horizontal-scroller>.button:last-child {
    margin-right: 1rem
}

.vertical-scroller {
    overflow-y: auto;
    overflow-x: hidden
}

.browser--windows-firefox .vertical-scroller {
    scrollbar-width: thin
}

.drag-up-to-expand {
    touch-action: none
}

.drag-up-to-expand:before {
    content: "";
    position: absolute;
    height: 6px;
    width: 36px;
    top: -12px;
    left: calc(50% - 18px);
    display: block;
    background: var(--border-color);
    border-radius: 8px;
    border: 1px solid var(--secondary-300);
    transition: background .15s ease-in-out
}

.drag-up-to-expand:after {
    content: "";
    position: absolute;
    height: 24px;
    width: 100%;
    top: -24px;
    left: 0
}

.drag-up-to-expand--pressed:before {
    background: var(--secondary-500)
}

@media (max-width:800px) {
    .add-1px-line:before {
        content: "";
        display: block;
        position: absolute;
        top: 43px;
        left: 0;
        height: 1px;
        width: 100%;
        background: var(--border-color)
    }
}

.preset-menu:focus {
    outline: 0
}

.preset-menu .horizontal-scroller {
    height: calc(var(--mobile-tertiary-menu-height) + max(0px, var(--safe-area-bottom) - 16px) - 44px)
}

.pmi {
    flex-shrink: 0;
    min-height: 8.125rem;
    margin-bottom: .25rem;
    display: inline-flex;
    flex-direction: column-reverse;
    overflow: hidden;
    border: 1px solid var(--secondary-300);
    background-repeat: no-repeat;
    position: relative;
    transition: height .3s cubic-bezier(.25, .1, .25, 1), background .3s ease-in-out;
    border-radius: 8px;
    background-size: 100%
}

@media (max-width:800px) {
    .pmi {
        border: 0;
        align-items: center;
        min-height: initial;
        width: 98px;
        flex-direction: column;
        overflow: visible;
        background-image: none !important;
        margin-bottom: 0
    }
    .pmi__tabbed-layout {
        background: var(--secondary-000);
        width: 100%;
        z-index: 11
    }
}

.pmi--loading {
    pointer-events: none
}

.pmi--loading>* {
    pointer-events: none !important
}

.pmi .loading-spinner {
    position: absolute;
    z-index: 4;
    bottom: 10px;
    right: 8px
}

@media (max-width:800px) {
    .pmi .loading-spinner {
        width: 14px;
        height: 14px;
        bottom: 5px;
        background: var(--secondary-000)
    }
}

.pmi:hover>.pmi__hover-container {
    opacity: 1
}

.pmi:focus {
    outline: 0
}

.pmi--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.pmi__hover-container {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .0001;
    transition: opacity .3s ease-in-out;
    cursor: pointer;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%)
}

.pmi__title-bar {
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .5rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    background: var(--secondary-000);
    cursor: pointer;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pmi__title-bar .badge--plus {
    margin-right: 2px
}

@media (max-width:800px) {
    .pmi__title-bar .badge--plus {
        flex-shrink: 0
    }
}

@media (max-width:800px) {
    .pmi__title-bar {
        --text-font-size: 10px;
        --text-line-height: 12px;
        white-space: nowrap;
        height: auto;
        margin-top: 4px;
        max-width: 78px;
        padding: 0
    }
    .pmi__title-bar .badge--plus {
        position: absolute;
        bottom: 24px;
        right: 15px
    }
    .pmi__title-bar string {
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.pmi__bg-image,
.pmi__prev-bg-image {
    width: 224px;
    height: 100%;
    border-radius: 8px;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat
}

@media (max-width:800px) {
    .pmi__bg-image,
    .pmi__prev-bg-image {
        width: 72px;
        height: 72px;
        background-size: cover;
        background-position: center
    }
}

.pmi__bg-image {
    position: absolute
}

@media (max-width:800px) {
    .pmi__bg-image {
        position: static
    }
}

.pmi__prev-bg-image {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    transition: opacity .5s
}

.pmi__options {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    flex-direction: column;
    pointer-events: none;
    transition: opacity .3s;
    padding: 2.75rem 3rem;
    z-index: 2;
    opacity: 0
}

.pmi__options--active {
    pointer-events: all;
    opacity: 1;
    background-color: var(--secondary-000);
    background-image: linear-gradient(180deg, var(--gradient-start-color), var(--gradient-stop-color))
}

@media (max-width:800px) {
    .pmi__options--active {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        width: 72px;
        height: 72px;
        padding: 0;
        position: relative;
        border: 1px solid var(--secondary-300);
        transition: none
    }
    .pmi__options--active~.pmi__bg-image,
    .pmi__options--active~.pmi__prev-bg-image {
        display: none
    }
}

.pmi__options-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem
}

.pmi__slider {
    padding: 1rem 0
}

.pmi__effects-padding-container {
    position: absolute;
    width: 100%
}

@media (max-width:800px) {
    .pmi__effects-padding-container {
        position: relative
    }
}

.pmi__effect-parameters {
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    background: var(--secondary-100);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.pmi__effect-parameters--active {
    pointer-events: all;
    opacity: 1;
    z-index: 3
}

.pmi__effect-parameters:focus {
    outline: 0
}

@media (max-width:800px) {
    .pmi--effect-menu-open {
        width: 100%;
        margin: 0;
        top: 0;
        position: absolute;
        left: 0
    }
    .pmi--effect-menu-open .pmi__prev-bg-image {
        visibility: hidden
    }
}

.pmi__effect-parameters-padding-container {
    overflow: hidden
}

.pmi__effect-parameters-padding-container .tabs__button {
    flex-basis: 0
}

.pmi__effect-tools {
    width: 100%;
    z-index: 2;
    background: var(--secondary-000);
    position: absolute
}

.pmi .brush_menu_container,
.pmi .custom_controls_container {
    padding-bottom: .5rem
}

.pmi .control-item-bottom {
    margin-top: .5rem
}

.batch-processing-icon,
.favorite-star {
    position: absolute;
    top: 2px
}

.batch-processing-icon--selected,
.favorite-star--selected {
    color: var(--selected-text-color)
}

.favorite-star {
    left: 2px
}

@media (max-width:800px) {
    .favorite-star {
        position: absolute;
        top: -15px;
        left: -17px;
        margin: 0 !important
    }
}

.batch-processing-icon {
    right: 2px
}

.alternate-menu {
    position: absolute;
    top: calc(var(--top-nav-height) + var(--safe-area-top));
    left: 56px;
    width: 272px;
    height: calc(100% - var(--top-nav-height) - var(--safe-area-top) - var(--safe-area-bottom));
    padding: 0 calc(1.5rem - 1px) 0 1.5rem;
    border-right: 1px solid var(--border-color);
    background-color: var(--secondary-000);
    transform: translateY(calc(100% + 24px + var(--safe-area-bottom)));
    --scrollable-content-width: 224px
}

.alternate-menu--open {
    transform: translateY(0)
}

.alternate-menu:focus {
    outline: 0
}

.alternate-menu--over-fabric-canvas {
    z-index: 2002
}

.alternate-menu .scrollable-content {
    height: calc(100% - 56px + 2px)
}

.alternate-menu--hide-on-mobile {
    opacity: 0;
    pointer-events: none;
    height: 0 !important
}

.alternate-menu--disabled>* {
    pointer-events: none;
    opacity: .5
}

.browser--safari .alternate-menu--disabled custom-tool-menu button:not(.button--icon):not(.button--has-icon) {
    display: block
}

.alternate-menu--small-heading panel-header h3 {
    font-size: 15px;
    letter-spacing: -.25px
}

.alternate-menu #transform_menu_controls {
    margin-top: 8px
}

.alternate-menu #layer_isolator_tool_menu {
    height: 100%
}

.alternate-menu #cutout_menu_controls .control-item-bottom {
    margin-bottom: 0
}

.alternate-menu #collage_image_menu>*,
.alternate-menu #mask_image_crop_menu>*,
.alternate-menu #shape_menu>.control-item {
    margin-right: 0;
    margin-left: 0
}

.alternate-menu #mask_image_crop_menu>:first-child {
    margin-top: 0
}

.alternate-menu .expandable-checkbox__content>div>.control-item:first-child {
    margin-top: .5rem
}

.alternate-menu #graphic_svg_color_menu .control-item {
    margin-left: 0;
    margin-right: 0
}

.alternate-menu #graphic_svg_color_menu .color-button-row {
    margin-bottom: .25rem
}

.alternate-menu #layer_image_cutout {
    width: 100%
}

.alternate-menu .icon--back {
    transform: rotate(180deg)
}

@media (max-width:800px) {
    .alternate-menu {
        top: auto;
        left: 0;
        bottom: var(--safe-area-bottom);
        width: 100%;
        height: calc(271px + var(--safe-area-bottom));
        padding: 0;
        border-top: 1px solid var(--border-color);
        border-right: 0;
        background: var(--secondary-000);
        z-index: 10;
        transition: transform .3s cubic-bezier(.25, .1, .25, 1), height .3s cubic-bezier(.25, .1, .25, 1)
    }
    .alternate-menu__header-bar {
        height: 44px;
        border-bottom: 1px solid var(--border-color)
    }
    .alternate-menu__header-content {
        margin: 0 auto;
        max-width: 464px;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 1rem
    }
    .alternate-menu__header-content h3 {
        --text-font-size: 16px;
        --heading-font-size: 16px;
        --text-line-height: calc(16px + 8px);
        --heading-line-height: calc(16px + 8px);
        --heading-margin-bottom: 8px;
        --heading-margin-top: 24px;
        --heading-font-weight: 700;
        margin: 0 auto 0 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }
    .alternate-menu__cutout-tool .vertical-scroller {
        height: calc(var(--mobile-tertiary-menu-height) + var(--safe-area-bottom) - 44px)
    }
    .alternate-menu__cutout-tool #cutout_menu_controls {
        margin-left: 1rem;
        margin-right: 1rem
    }
    .alternate-menu__cutout-tool #cutout_invert {
        right: 2rem;
        top: 120px
    }
    .alternate-menu #transform_delete,
    .alternate-menu #transform_duplicate {
        display: none
    }
    .alternate-menu .vertical-scroller {
        transition: height .15s ease-out
    }
    .alternate-menu .vertical-scroller>* {
        margin: 0 auto;
        max-width: 464px;
        padding: 0 2rem
    }
    .alternate-menu .vertical-scroller>:first-child {
        padding-top: 1rem
    }
    .alternate-menu .vertical-scroller>:last-child {
        padding-bottom: calc(var(--safe-area-bottom) + 2rem)
    }
    .alternate-menu .vertical-scroller .popover-controls {
        padding: 0 1rem calc(var(--safe-area-bottom) + 2rem)
    }
    .alternate-menu .vertical-scroller #cutout_menu_controls {
        margin: 0 auto;
        padding: 0 1rem calc(var(--safe-area-bottom) + 2rem)
    }
    .alternate-menu #layer_save_as_image {
        display: none
    }
    .alternate-menu #layer_image_cutout {
        width: auto
    }
}

@media (max-width:800px) {
    .alternate-menu #text_menu,
    .alternate-menu #text_menu+#transform_menu #transform_menu_popover_button {
        --button-height: 36px
    }
    .alternate-menu #text_menu .scrubber__input--mobile {
        height: 36px
    }
    .alternate-menu #text_menu .scrubber__unit--mobile {
        right: 42px;
        line-height: 38px
    }
}

.history-panel {
    width: 224px;
    height: 268px;
    flex-shrink: 0;
    background: var(--secondary-000);
    border-radius: 8px
}

.history-panel__list {
    width: 100%;
    height: 230px !important;
    padding: 1rem 0 .5rem 1rem
}

.history-panel__list .scrollable-content {
    --scrollable-content-width: 192px;
    width: calc(var(--scrollable-content-width) + 16px)
}

.history-panel__button {
    --button-text-size: 13px;
    padding: 0 0 0 .25rem;
    border: 0;
    margin-bottom: 2px;
    opacity: .5;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.history-panel__button.active {
    opacity: 1
}

.history-panel__button string {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-panel__button img {
    width: 24px;
    background: var(--image-bg)
}

#history_preview_image_container {
    padding: 10px
}

#history_preview_image_container img {
    max-width: 240px;
    max-height: 240px;
    background: url(/images/app/checker_pattern.jpg)
}

.canvas-footer {
    --side-padding: 0.5rem;
    position: absolute;
    height: 48px;
    left: 56px;
    right: 0;
    bottom: 0;
    padding-right: var(--side-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary-000);
    border-top: 1px solid var(--border-color)
}

@media (max-width:800px) {
    .canvas-footer {
        display: none
    }
}

.canvas-footer__layers,
.canvas-footer__toggle-mask {
    padding-left: var(--side-padding);
    transition: transform .3s cubic-bezier(.25, .1, .25, 1)
}

.app-side-menu-is-open .canvas-footer__layers,
.app-side-menu-is-open .canvas-footer__toggle-mask {
    transform: translateX(272px)
}

.canvas-footer__zoom {
    position: relative;
    display: flex;
    transition: transform .3s cubic-bezier(.25, .1, .25, 1)
}

.app-side-menu-is-open .canvas-footer__zoom {
    transform: translateX(136px)
}

@media (max-width:960px) {
    .canvas-footer .bfn-slider,
    .canvas-footer .zoom-bar__item--minus,
    .canvas-footer .zoom-bar__item--plus {
        display: none
    }
    .canvas-footer .zoom-bar__slider {
        width: 0
    }
    .canvas-footer .slider-label__container {
        left: 4px !important
    }
}

@media (min-width:1024px) {
    .canvas-footer {
        --side-padding: 1rem
    }
    .canvas-footer__history,
    .canvas-footer__layers,
    .canvas-footer__toggle-mask {
        flex-basis: 152px
    }
}

.zoom-region {
    display: none;
    top: -10px;
    width: 0;
    height: 0;
    margin: auto;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s linear
}

.zoom-region.active {
    pointer-events: all;
    opacity: 1
}

.zoom-region-container {
    position: absolute;
    overflow: hidden;
    width: 100px;
    height: 100px;
    background: var(--secondary-800);
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    outline-style: solid;
    outline-width: thin;
    outline-color: var(--secondary-500)
}

.zoom-region-preview-image-background {
    position: absolute;
    opacity: .3
}

.zoom-region-preview-image-foreground {
    position: absolute;
    pointer-events: none
}

.zoom-region-viewport {
    position: absolute;
    overflow: hidden;
    outline-style: solid;
    outline-width: thin;
    outline-color: var(--secondary-500)
}

.zoom-region-viewport-grid-h {
    position: absolute;
    left: 0;
    top: 33.33%;
    width: 100%;
    height: 33.33%;
    outline-style: solid;
    outline-width: thin;
    outline-color: var(--secondary-500)
}

.zoom-region-viewport-grid-v {
    position: absolute;
    left: 33.33%;
    top: 0;
    width: 33.33%;
    height: 100%;
    outline-style: solid;
    outline-width: thin;
    outline-color: var(--secondary-500)
}

.zoom-bar {
    display: flex;
    align-items: center
}

.zoom-bar--disabled .zoom-bar__slider {
    pointer-events: none
}

.zoom-bar--disabled .zoom-bar__slider .noUi-base::before,
.zoom-bar--disabled .zoom-bar__slider .noUi-connect {
    background: var(--primary-300)
}

.zoom-bar--disabled .zoom-bar__slider .noUi-handle {
    border: 2px solid var(--primary-300)
}

.zoom-bar--disabled .zoom-bar__slider input {
    pointer-events: none;
    opacity: .5
}

.zoom-bar input::-webkit-inner-spin-button,
.zoom-bar input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.zoom-bar__item {
    margin-left: 8px
}

.zoom-bar__item:first-child {
    margin-left: 0
}

.zoom-bar__slider {
    width: 8rem;
    margin-left: 4px;
    margin-right: -4px
}

.zoom-bar .slider-label__container {
    left: 172px;
    top: -8px;
    height: 0
}

.zoom-bar__percent-placeholder {
    width: 40px
}

.color-button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: border-color .3s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 4px;
    padding: 0;
    overflow: hidden
}

.color-button--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.color-button:hover {
    border-color: var(--secondary-500)
}

.color-button--preset {
    width: 2rem;
    height: 2rem;
    border-radius: 4px
}

@media (max-width:800px) {
    .color-button--preset {
        width: 36px;
        height: 36px
    }
}

.color-button--preset-spacer {
    background-color: var(--border-color);
    background: var(--border-color);
    width: 2px;
    height: auto;
    margin: 0 .125rem
}

.color-button--recent {
    width: 32px;
    height: 32px;
    margin-right: 4px
}

.color-button--recent:last-child {
    margin-right: 0
}

.color-button--grow-when-selected {
    transition: transform .15s ease-in-out
}

.color-button--selected,
.color-button--selected:hover {
    border: 2px solid var(--primary-400)
}

.color-button--selected.color-button--grow-when-selected {
    transform: scale(1.2)
}

.color-button--dash {
    width: 12px;
    height: 1px;
    margin: 0 auto;
    background-color: var(--secondary-800)
}

.color-button--mixed .color-button__triangle {
    border-left: 8px solid var(--secondary-200)
}

.color-button.empty {
    display: flex;
    justify-content: center;
    align-items: center
}

.color-button__triangle {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    border-left: 8px solid var(--secondary-000);
    transform: rotate(45deg);
    display: block;
    right: 2px;
    bottom: -3px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5))
}

.color-button.color-display.empty {
    background-image: url(/web/icons/no-color-v3.svg);
    background-position: center;
    background-size: 100% 100%;
    margin-right: 4px
}

.color-static {
    border: 1px solid var(--border-color)
}

.color-static:hover {
    transform: scale(1, 1);
    cursor: auto !important
}

.color-button-picker {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative
}

@media (max-width:800px) {
    .color-button-picker {
        width: 36px;
        height: 36px
    }
}

.color-button-picker.empty {
    display: flex;
    justify-content: center;
    align-items: center
}

.color-button-row {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width:800px) {
    .color-button-row+.color-button-row {
        margin-top: 12px
    }
}

@media (min-width:801px) {
    .color-button-row div:has(>#collage_customize_background_color_preset_2, >#collage_customize_background_color_preset_11) {
        display: none
    }
}

.color-button-row--equal-spacing {
    margin-top: 0 !important
}

.color-button-row--equal-spacing div {
    flex-basis: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.color-button-row--equal-spacing .color-button--preset {
    box-sizing: border-box;
    width: calc(100% - 8px);
    height: calc(100% - 8px)
}

.color-button-row--equal-spacing .color-button--preset.color-button--grow-when-selected {
    transition: .15s ease-in-out;
    transform: scale(1)
}

.color-button-row--equal-spacing .color-button--preset.color-button--grow-when-selected.color-button--selected {
    width: calc(100% - 4px);
    height: calc(100% - 4px)
}

.control-item:last-child .color-button-row:last-child {
    margin-bottom: 0
}

.color-picker {
    position: absolute;
    width: 244px;
    border-radius: 8px;
    background-color: var(--secondary-000);
    visibility: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0;
    transition: opacity .15s ease-out, transform .2s !important
}

.color-picker--win-firefox {
    width: 253px
}

.color-picker--win-firefox .color-picker__grid {
    padding-right: 4px
}

.color-picker.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: 2005
}

@media (max-width:800px) {
    .color-picker {
        top: auto !important;
        bottom: 0 !important;
        width: 100%;
        max-width: calc(464px - 2rem);
        left: calc(50% - 216px) !important;
        border-radius: 12px 12px 0 0;
        transform: scale(.95) translateY(1rem);
        transform-origin: bottom center
    }
}

@media (max-width:800px) and (max-width:432px) {
    .color-picker {
        left: 0 !important
    }
}

@media (max-width:800px) {
    .color-picker.active {
        transform: none
    }
}

.color-picker__tabs--dragging-color * {
    cursor: grabbing !important
}

.color-picker .tabs__nav {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    padding-top: 8px;
    cursor: move
}

.color-picker .tabs__button {
    --button-height: 32px;
    --button-padding: 16px;
    flex-grow: 0
}

.color-picker .tabs__button:last-child {
    margin-right: auto
}

.color-picker__close-button {
    display: none
}

@media (max-width:800px) {
    .color-picker .tabs__nav {
        padding-top: 0
    }
    .color-picker .tabs__button {
        --button-height: 44px
    }
    .color-picker__before-tabs {
        width: 30px;
        margin: 0 auto 0 1rem
    }
    .color-picker__close-button {
        display: flex;
        --button-height: 30px;
        margin: calc((44px - var(--button-height))/ 2) 1rem 0 auto
    }
}

.color-picker__controls {
    margin-bottom: 6px
}

@media (max-width:800px) {
    .color-picker__controls {
        margin-bottom: .5rem
    }
}

.color-picker__input-container {
    position: relative;
    display: flex;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    --input-height: 24px
}

@media (max-width:800px) {
    .color-picker__input-container {
        --input-height: 32px;
        --text-font-size: 14px;
        --heading-font-size: 14px;
        --text-line-height: calc(14px + 6px);
        --heading-line-height: calc(14px + 6px)
    }
}

.color-picker__input-box {
    width: var(--input-height);
    height: var(--input-height);
    border-radius: 4px 0 0 4px;
    background-size: 9.7px;
    background-repeat: repeat
}

.color-picker__input-box-color {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--input-height);
    height: var(--input-height);
    border-radius: 4px 0 0 4px
}

.color-picker__input-hash {
    position: absolute;
    top: 0;
    left: calc(var(--input-height) + 4px);
    color: var(--secondary-800);
    line-height: var(--input-height)
}

.color-picker__input {
    width: 68px;
    height: var(--input-height);
    padding: 0 0 0 12px;
    margin: 0 4px 0 -1px;
    border-radius: 0 4px 4px 0;
    border-color: var(--border-color);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: .5px
}

@media (max-width:800px) {
    .color-picker__input {
        width: 75px;
        padding: 0 0 0 13px
    }
}

.color-picker__hsv {
    position: relative;
    display: flex;
    flex-direction: column;
    touch-action: none
}

.color-picker__hsv--hidden {
    display: none
}

.color-picker__hsv-sv {
    position: relative;
    cursor: crosshair;
    width: 100%;
    background-color: red;
    border-radius: 4px;
    margin-bottom: 10px;
    height: 118px
}

@media (max-width:800px) {
    .color-picker__hsv-sv {
        height: 64px
    }
}

.color-picker__hsv-sv-indicator {
    position: absolute;
    width: 0;
    height: 0
}

.color-picker__hsv--smooth .color-picker__hsv-sv-indicator {
    transition: transform .1s
}

.color-picker__hsv-sv-indicator-display {
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .25)
}

.color-picker__hsv-gradient {
    border-radius: 4px
}

.color-picker__hsv-h {
    width: 100%;
    height: 16px;
    background-color: transparent;
    margin-bottom: 8px;
    position: relative;
    cursor: crosshair;
    margin-right: .5rem;
    border-radius: 4px
}

.color-picker__hsv-h.locked {
    opacity: .5;
    pointer-events: none
}

.color-picker__hsv-h .color-picker__hsv-gradient {
    border-radius: 8px
}

@media (max-width:800px) {
    .color-picker__hsv-h {
        height: 24px;
        margin-bottom: 14px
    }
    .color-picker__hsv-h .color-picker__hsv-gradient {
        border-radius: 12px
    }
}

.color-picker__hsv-h-indicator {
    position: absolute;
    left: 5px;
    width: 0;
    height: 0;
    top: 1px
}

@media (max-width:800px) {
    .color-picker__hsv-h-indicator {
        top: -1px
    }
}

.color-picker__hsv-h-indicator-display {
    margin: 0 0 0 -8px;
    width: 6px;
    height: 18px;
    border: 2px solid #fff;
    background-color: red;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    pointer-events: none
}

@media (max-width:800px) {
    .color-picker__hsv-h-indicator-display {
        height: 26px
    }
}

.color-picker__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 4px;
    margin-top: 4px
}

@media (max-width:800px) {
    .color-picker__grid {
        row-gap: 12px;
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr))
    }
}

.color-picker__grid--hidden {
    display: none
}

.color-picker__grid-square {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: border-color .3s ease-in-out, transform .15s ease-in-out
}

@media (max-width:800px) {
    .color-picker__grid-square {
        width: 36px;
        height: 36px
    }
}

.color-picker__grid-square--selected {
    border: 2px solid var(--primary-400)
}

.color-picker__grid-square--long-pressed {
    transform: scale(1.2)
}

.color-picker__hsv-tab {
    margin: .75rem 1rem 1rem
}

@media (max-width:800px) {
    .color-picker__hsv-tab {
        margin: 1rem auto;
        padding: 0 2rem
    }
}

.color-picker__library {
    margin: 10px 0 14px 14px;
    --scrollable-content-width: 207px
}

@media (max-width:800px) {
    .color-picker__library {
        margin: 14px 0;
        padding: 0 2rem
    }
}

.color-picker__library--win-firefox {
    --scrollable-content-width: 215px
}

.color-picker__library--empty {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center
}

.color-picker__library--empty img {
    margin-bottom: 1rem
}

.color-picker__ghost {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -16px 0 0 -16px
}

.color-picker__ghost .icon {
    color: var(--secondary-800);
    filter: drop-shadow(0 2px 4px var(--secondary-000));
    margin-bottom: 8px;
    display: none
}

.color-picker__ghost--delete {
    margin: -40px 0 0 -16px
}

.color-picker__ghost--delete .icon {
    display: inline-block
}

.font-menu {
    --mobile-font-menu-height: 237px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--top-nav-height);
    left: 56px;
    width: 272px;
    bottom: var(--safe-area-bottom);
    flex-shrink: 0;
    background: var(--secondary-000);
    opacity: 0;
    transition: opacity .2s, height .3s cubic-bezier(.25, .1, .25, 1)
}

.font-menu--over-fabric-canvas {
    z-index: 2002
}

@media (max-width:800px) {
    .font-menu {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(var(--mobile-font-menu-height) + var(--safe-area-bottom));
        z-index: 12;
        border-top: 1px solid var(--border-color)
    }
}

.font-menu__inner {
    display: flex;
    flex-direction: column;
    height: calc(100% + 1px);
    background: var(--secondary-000)
}

@media (max-width:800px) {
    .font-menu__inner:before {
        content: "";
        display: block;
        position: absolute;
        top: 42px;
        left: 0;
        height: 1px;
        width: 100%;
        background: var(--border-color)
    }
}

.font-menu .panel-header {
    width: 240px;
    margin-left: 16px;
    flex-shrink: 0
}

@media (max-width:800px) {
    .font-menu .panel-header {
        height: 43px;
        width: calc(100% - 2rem);
        max-width: calc(464px - 2rem);
        margin: 0 auto
    }
    .font-menu .panel-header .panel-header__button--back {
        background: 0 0;
        position: relative
    }
    .font-menu .panel-header .panel-header__button--back:before {
        content: "";
        position: absolute;
        top: -4px;
        left: -4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px)
    }
}

.font-menu__header {
    display: flex;
    position: relative;
    padding: 0 16px 16px;
    flex-shrink: 0
}

.font-menu__header>button {
    margin-left: .25rem;
    flex-shrink: 0
}

@media (max-width:800px) {
    .font-menu__header {
        padding: 0;
        width: calc(100% - 4rem);
        max-width: calc(464px - 4rem);
        margin: 1rem auto
    }
}

.font-menu__heading {
    --text-font-size: 13px;
    --text-line-height: 18px;
    margin: 0 0 .25rem 16px;
    letter-spacing: .01em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.font-menu__search {
    flex-grow: 1
}

.font-menu__search .input {
    height: 32px;
    letter-spacing: .01em
}

.font-menu__not-found {
    padding: 1rem 1rem 0;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    text-align: center
}

.font-menu__not-found img {
    width: 100%;
    margin-bottom: 1rem
}

.dark-theme .font-menu__not-found img {
    filter: saturate(.6)
}

.font-menu__lists-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 104px)
}

@media (max-width:800px) {
    .font-menu__lists-container {
        height: calc(100% - 91px);
        overflow-y: auto;
        overflow-x: hidden
    }
    .browser--windows-firefox .font-menu__lists-container {
        scrollbar-width: thin
    }
    .font-menu__lists-container .font-menu__heading {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 4rem);
        max-width: calc(464px - 4rem)
    }
    .font-menu__lists-container .font-menu__list {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 4rem);
        max-width: calc(464px - 4rem);
        padding: 0
    }
}

.font-menu__list {
    list-style-type: none;
    margin-left: 14px;
    margin-bottom: 0;
    flex-grow: 1;
    --scrollable-content-width: 240px;
    width: calc(var(--scrollable-content-width) + 16px)
}

.font-menu__list--recent {
    height: auto;
    width: var(--scrollable-content-width);
    margin: 0 0 .5rem 16px;
    padding: 0
}

@media (max-height:720px) {
    .font-menu__list--recent li:nth-child(4) {
        display: none
    }
}

@media (max-height:850px) {
    .font-menu__list--recent li:nth-child(5) {
        display: none
    }
}

.font-menu__item {
    padding: 0;
    margin: 0 0 2px;
    position: relative;
    transition: background-color .2s ease-in-out, opacity .1s ease-in-out;
    text-indent: 12px
}

.font-menu__item string {
    text-align: left;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.font-menu__item--befunky,
.font-menu__item--google {
    background-size: 228.5714285714px;
    background-repeat: no-repeat;
    background-position-x: .75rem;
    color: transparent
}

.font-menu__item:hover .font-menu__weights {
    display: block
}

.font-menu__item.button--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.font-menu__item--active {
    background-color: var(--selected-bg)
}

.font-menu__item:active .font-menu__favorite-button,
.font-menu__item:active .font-menu__right-button {
    background-color: transparent !important
}

.font-menu__item.button--focus .font-menu__favorite-icon,
.font-menu__item:hover .font-menu__favorite-icon {
    opacity: 1
}

.font-menu__item.button--focus .font-menu__show-weights-icon,
.font-menu__item:hover .font-menu__show-weights-icon {
    opacity: 0
}

.font-menu__item--showing-weights {
    position: relative
}

.font-menu__item--showing-weights:after,
.font-menu__item--showing-weights:before {
    content: "";
    position: absolute;
    z-index: 1
}

.font-menu__item--showing-weights:before {
    height: 64px;
    width: 25%;
    left: 50%
}

.font-menu__item--showing-weights:after {
    height: 86px;
    width: calc(25% + 1.5rem);
    left: 75%
}

.font-menu__item--showing-weights .font-menu__favorite-button {
    z-index: 2
}

.font-menu__font-image {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    background-size: 228.5714285714px;
    background-repeat: no-repeat;
    background-position-x: .75rem
}

.dark-theme .font-menu__font-image {
    filter: invert(1) grayscale(1)
}

.font-menu .loading-spinner {
    position: absolute;
    right: 12px
}

.font-menu__right-button {
    z-index: 11
}

.font-menu__favorite-button--selected {
    color: var(--selected-text-color)
}

.font-menu__favorite-button,
.font-menu__right-button {
    position: absolute;
    right: 0
}

.font-menu__favorite-button.button--focus,
.font-menu__right-button.button--focus {
    opacity: 1;
    outline: 0;
    box-shadow: 0 0 0 2px var(--focus-outline-color)
}

.font-menu__favorite-icon {
    margin-top: -1px;
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.font-menu .font-menu__show-weights-icon {
    transition: opacity .1s ease-in-out;
    margin-right: .75rem;
    color: var(--secondary-800)
}

@media (hover:none) {
    .font-menu__favorite-icon {
        opacity: 1
    }
    .font-menu__favorite-button--weights {
        right: 36px
    }
    .font-menu__show-weights-icon {
        opacity: 1 !important;
        --icon-size: 10px !important;
        margin-right: 13px !important
    }
}

.font-menu__weights {
    position: absolute;
    padding-left: 6px;
    background: 0 0;
    left: calc(100% - 1px);
    z-index: 2006
}

.font-menu__weights-list {
    padding: .5rem;
    background: var(--secondary-000);
    color: var(--secondary-000);
    border-radius: 8px;
    box-shadow: var(--dropdown-box-shadow)
}

.dialog .font-menu__weights-list {
    padding: 0;
    box-shadow: none;
    border-radius: 0
}

.font-menu__weights-item {
    min-width: 8rem;
    background-repeat: no-repeat;
    background-size: 228.5714285714px;
    background-position: 4px center;
    display: flex;
    justify-content: flex-start
}

.font-menu .drag-drop-area {
    bottom: 0
}

.loader-svg {
    animation-name: ckw;
    animation-duration: .4s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block;
    animation-timing-function: linear;
    width: 60px;
    height: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@keyframes ckw {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

.image-manager {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    margin: -2px;
    padding: 2px;
    width: calc(var(--scrollable-content-width) + 18px)
}

.image-manager__buttons,
.image-manager__controls {
    width: var(--scrollable-content-width)
}

.image-manager--hide-controls .image-manager__controls {
    display: none
}

.image-manager .button--three-dots {
    flex-grow: 0
}

.image-manager .button--three-dots span {
    display: block;
    width: 3px;
    height: 3px;
    float: left;
    margin: 0 1px;
    border-radius: 50%;
    background: currentColor
}

.image-manager__controls {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
    flex-shrink: 0
}

.image-manager__images {
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 0 1.5rem
}

@media (max-width:800px) {
    .image-manager__images {
        grid-auto-flow: column;
        grid-template-columns: unset;
        grid-gap: 1rem;
        padding: 0 1.5rem 0 1rem;
        height: 7rem;
        align-items: center;
        margin: 0
    }
}

.image-manager__images--expanded {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    grid-auto-flow: unset;
    max-width: 464px;
    margin: 1rem auto;
    padding: 0 2rem;
    height: auto
}

.image-manager__images--expanded .image-manager__item {
    width: 72px;
    height: 72px;
    aspect-ratio: 1
}

.image-manager__top-bar-buttons {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    padding-right: 1rem
}

.image-manager__add-item {
    width: 40px;
    height: 40px;
    margin: auto
}

.image-manager__item {
    position: relative;
    height: 108px;
    width: 108px;
    cursor: pointer;
    background-color: var(--image-bg);
    border-radius: 8px;
    overflow: hidden
}

@media (max-width:800px) {
    .image-manager__item {
        height: 72px;
        width: 72px
    }
}

.image-manager__item:hover .image-manager__button,
.image-manager__item:hover .image-manager__hover-container {
    opacity: 1
}

.image-manager__item--loading {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none
}

.image-manager__hover-container {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.image-manager__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: filter .15s;
    border: 1px solid var(--image-border-color);
    border-radius: inherit
}

.browser--chromium .image-manager__placeholder {
    image-rendering: -webkit-optimize-contrast
}

.image-manager__button {
    position: absolute;
    bottom: 4px;
    opacity: 0;
    z-index: 1
}

.image-manager__button--remove {
    right: 4px
}

.image-manager__button--save {
    left: 4px
}

@media (max-width:800px) {
    .image-manager__button {
        display: none
    }
}

.app-lang-fr #image_manager_search_images,
.app-lang-ru #image_manager_search_images {
    font-size: 14px;
    letter-spacing: -.5px
}

.graphic-manager {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    width: calc(var(--scrollable-content-width) + 18px)
}

.graphic-manager__shapes {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(4, 1fr)
}

.graphic-manager__shape {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary-500);
    transition: filter .15s ease-out
}

.graphic-manager__shape:hover {
    background: var(--secondary-300)
}

.graphic-manager__shape svg {
    width: 44px;
    height: 44px
}

.graphic-manager__graphics {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(2, 1fr)
}

.graphic-manager__empty-message {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    padding: 1.5rem
}

.graphic-manager__empty-state-image {
    max-width: 100%
}

.dark-theme .graphic-manager__empty-state-image {
    filter: saturate(.6)
}

.graphic-manager__empty-text {
    margin-top: 1rem;
    text-align: center
}

.graphic-manager__item {
    position: relative;
    height: 108px;
    width: 108px;
    border-radius: 8px;
    background-color: var(--secondary-400)
}

@media (max-width:800px) {
    .graphic-manager__item--graphic {
        padding: 0 12px
    }
}

.graphic-manager__item:hover {
    background-color: var(--secondary-300)
}

.graphic-manager__item:hover .graphic-manager__button {
    opacity: 1
}

.graphic-manager__item:active {
    background-color: var(--secondary-500)
}

.graphic-manager__placeholder {
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    transition: filter .15s
}

.graphic-manager__button {
    position: absolute;
    bottom: 4px;
    padding: 0 .375rem;
    line-height: 0;
    height: 1.5rem;
    width: 1.5rem;
    opacity: 0;
    transition: opacity .15s ease-in-out, color .15s ease-in-out;
    z-index: 1
}

.graphic-manager__button--remove {
    right: 4px
}

.graphic-manager__button--save {
    left: 4px
}

@media (max-width:800px) {
    .graphic-manager__button {
        top: -8px;
        left: -8px;
        bottom: auto;
        right: auto
    }
}

.graphic-manager .badge--plus {
    position: absolute;
    right: 4px;
    bottom: 4px
}

.graphics-tabs .tabs__nav {
    margin: 0 auto;
    max-width: 464px
}

.graphics-tabs__shapes {
    display: grid;
    grid-gap: 20px;
    grid-auto-flow: column;
    align-items: center;
    padding: 0 2rem 0 1rem;
    height: 7rem
}

.graphics-tabs__shapes .graphic-manager__shape {
    width: 56px;
    height: 56px
}

.graphics-tabs__shapes .graphic-manager__shape svg {
    width: inherit;
    height: inherit
}

.graphics-tabs__shapes--expanded {
    grid-auto-flow: unset;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    padding: 1rem 2rem;
    max-width: 464px;
    margin: 0 auto;
    height: auto
}

.graphics-tabs__shapes--expanded .graphic-manager__shape {
    margin: 0 auto
}

.graphics-tabs__graphics {
    display: grid;
    grid-gap: 16px;
    grid-auto-flow: column;
    align-items: center;
    padding: 0 2rem 0 1rem;
    height: 7rem
}

.graphics-tabs__graphics .graphic-manager__item {
    width: 72px;
    height: 72px
}

.graphics-tabs__graphics--expanded {
    grid-auto-flow: unset;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    padding: 1rem 2rem;
    max-width: 464px;
    margin: 0 auto;
    height: auto
}

.graphics-tabs__empty-graphic-box {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--secondary-400);
    display: flex;
    justify-content: center;
    align-items: center
}

.graphics-tabs__empty-icon {
    width: 46px;
    height: 47px;
    fill: var(--secondary-300)
}

.app-lang-de #transform_shape_line_style .toggle-group__button,
.app-lang-it #transform_shape_line_style .toggle-group__button,
.app-lang-ru #transform_shape_line_style .toggle-group__button {
    font-size: 12px
}

.top-nav {
    position: absolute;
    width: 100%;
    z-index: 13;
    height: calc(var(--top-nav-height) + var(--safe-area-top));
    padding: var(--safe-area-top) 1rem 0;
    display: flex;
    justify-content: space-between;
    background: var(--secondary-000);
    border-bottom: 1px solid var(--border-color)
}

@media (display-mode:standalone) {
    .top-nav {
        box-shadow: inset 0 1px 0 0 var(--border-color-2)
    }
}

.top-nav .top-nav--button {
    transition: opacity .15s linear
}

@media (min-width:801px) {
    .top-nav--disable {
        pointer-events: none;
        opacity: .5
    }
}

@media (max-width:800px) {
    .top-nav--disable .top-nav--button {
        pointer-events: none;
        opacity: .5
    }
    .top-nav--disable--allow-history .top-nav--history-button {
        pointer-events: auto;
        opacity: 1
    }
}

.top-nav-button {
    display: flex
}

.top-nav__inner {
    display: flex;
    align-items: center;
    height: 100%
}

.top-nav__right {
    justify-content: flex-end
}

.top-nav__user-button {
    background: 0 0 !important;
    padding: 0
}

.top-nav__user-button string {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 700;
    background: var(--secondary-000);
    color: var(--secondary-800);
    border: 1px solid var(--border-color);
    transition: background .3s ease-in-out
}

.top-nav__user-button:hover string {
    background: var(--secondary-200)
}

.top-nav__user-button:active string {
    background: var(--secondary-400)
}

.top-nav__user-button--plus string {
    background: var(--primary-500);
    border: 0;
    color: var(--primary-button-text-color)
}

.top-nav__user-button--plus:hover string {
    background: var(--primary-400)
}

.top-nav__user-button--plus:active string {
    background: var(--primary-600)
}

.top-nav__user-button .icon--chevron-down {
    margin: 0 0 0 8px !important
}

.top-nav__center {
    transition: transform .3s ease-in-out
}

@media (min-width:1100px) {
    .top-nav__left,
    .top-nav__right {
        flex-basis: 11.5rem
    }
    .top-nav__center {
        transform: translateX(56px);
        flex-grow: 0
    }
}

@media (min-width:1300px) {
    .app-side-menu-is-open .top-nav__center {
        transform: translateX(calc(328px/2))
    }
}

.top-nav__animate-button {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0 .5rem
}

.top-nav__animate-button--rainbow {
    position: relative;
    z-index: 0
}

.alignment-options {
    width: 224px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--secondary-000)
}

.alignment-options__body {
    padding: .5rem 0 1rem
}

.alignment-options__body .control-item {
    margin-top: .5rem
}

.layers-groups {
    width: 224px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--secondary-000)
}

.layers-groups__tabs {
    height: 270px;
    display: block;
    background: var(--secondary-000);
    border-radius: 0 0 8px 8px
}

.layers-groups__groups,
.layers-groups__layers {
    padding: 16px 0 16px 16px
}

.layers-groups .scrollable-content {
    --scrollable-content-width: 192px;
    width: 208px;
    max-height: 214px
}

.layers-groups .sortable-list:after {
    content: "";
    display: block;
    height: .5rem;
    width: 100%
}

.layers-groups__no-groups,
.layers-groups__no-layers {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.layers-groups__no-groups {
    padding: 0 1rem;
    text-align: center
}

.layers-groups__no-groups img {
    width: 100%;
    margin-bottom: 1rem
}

.dark-theme .layers-groups__no-groups img {
    filter: saturate(.6)
}

.layer-item {
    margin-bottom: 2px;
    --button-text-size: 13px;
    padding-right: 0
}

.layer-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    min-width: 2rem;
    text-align: left;
    flex-grow: 1
}

.layer-item input {
    min-width: 0;
    height: 24px;
    line-height: 24px;
    padding: 0 2px;
    margin-left: -3px;
    font-size: inherit
}

.layer-item img {
    background-color: var(--secondary-400);
    pointer-events: none
}

.layer-item .button--icon {
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none
}

.layer-item .button--icon.button--visible,
.layer-item .button--icon:focus,
.layer-item:hover .button--icon {
    opacity: 1;
    pointer-events: initial
}

.group-item {
    overflow: hidden
}

.group-item--empty .group-item__header-button--collapse,
.group-item--empty .group-item__header-button--expand {
    opacity: 0;
    pointer-events: none
}

.group-item--empty .group-item__header-icon,
.group-item--empty .group-item__header-name {
    opacity: .35
}

.group-item__header {
    margin-bottom: 2px;
    padding: 0 0 0 4px
}

.group-item__header input {
    min-width: 0;
    height: 24px;
    line-height: 24px;
    padding: 0 2px;
    margin-left: 7px;
    font-size: inherit
}

.group-item__header .button--icon {
    flex-shrink: 0
}

.group-item__header:hover .group-item__header-button--delete {
    visibility: visible;
    opacity: 1
}

.group-item__header-button--expand .icon {
    transition: transform .3s
}

.group-item__header-button--collapse .icon {
    transition: transform .3s;
    transform: scaleY(-1)
}

.group-item__header-button--delete {
    margin-left: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.group-item__header-button--delete:focus {
    visibility: visible;
    opacity: 1
}

.group-item__header-icon {
    flex-shrink: 0
}

.group-item__header-name {
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    min-width: 2rem;
    text-align: left
}

.group-item__members {
    height: 0;
    transition: height .3s cubic-bezier(.25, .1, .25, 1)
}

.group-item__members .layer-item {
    padding: 0 0 0 2rem
}

.group-item__members .layer-item input {
    margin-left: -3px
}

.resize-template__body {
    padding-top: 1rem;
    padding-bottom: 0
}

.resize-template__body .control-item {
    margin: 1rem 0 0
}

.resize-template__dimensions-controls {
    margin-top: 1rem
}

@media (min-width:801px) {
    .resize-template__dimensions-controls {
        background-color: var(--secondary-100);
        border: 1px solid var(--secondary-300);
        padding: 1rem;
        border-radius: 4px
    }
}

.resize-template__dimensions {
    margin: 0
}

@media (max-width:350px) {
    .resize-template__dimensions .scrubber__button--mobile {
        display: none
    }
    .resize-template__dimensions .scrubber__unit--mobile {
        right: 0
    }
}

.resize-template__size-presets>.control-item-label {
    margin-bottom: .5rem
}

.resize-template .note {
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    margin-bottom: .75rem
}

.resize-template .dropdown__list {
    padding: 1rem 0 1rem 1rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--dropdown-box-shadow)
}

.resize-template .dropdown__item {
    margin-bottom: 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between
}

.resize-template .dropdown__template-dimensions {
    --text-font-size: 13px;
    --text-line-height: 18px
}

.modal-root__outer--fullwidth-on-mobile .resize-template {
    padding-top: 0
}

.create-group__body {
    padding-top: .5rem;
    padding-bottom: 0
}

.create-group__body .control-item {
    margin: .75rem 0
}

.create-group__body .control-item input {
    width: 100%
}

.create-group__footer {
    display: flex;
    justify-content: flex-end
}

.batch-processing {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative
}

.batch-processing .panel-header {
    flex-shrink: 0
}

.batch-processing .popover {
    position: absolute;
    left: 0;
    top: 0
}

.batch-processing__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 56px)
}

.batch-processing__navbar {
    flex-grow: 0;
    flex-shrink: 0;
    height: 48px;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-color)
}

.batch-processing__navbar>* {
    flex-grow: 0
}

.batch-processing__left-panel {
    width: 17rem;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    --scrollable-content-width: 224px
}

.batch-processing__menu {
    display: flex;
    width: 36rem;
    height: 100%;
    transition: transform .15s ease-in-out;
    transform: translateX(0)
}

.batch-processing__menu.slide {
    transform: translateX(-17rem)
}

.batch-processing__menu-section {
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100%;
    padding: 1.5rem 0 0 1.5rem
}

.batch-processing__manage-tools-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: var(--scrollable-content-width);
    margin-bottom: 1rem
}

.batch-processing__tool-button-row {
    display: flex;
    margin-bottom: 2px
}

.batch-processing__tool-button-row.dropped .button {
    background: var(--selected-bg);
    color: var(--selected-text-color)
}

.batch-processing__open-tool {
    display: block;
    flex-grow: 1;
    text-align: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.batch-processing__remove-tool {
    flex-shrink: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.batch-processing__controls-header {
    width: var(--scrollable-content-width);
    height: 40px;
    margin-top: -1rem
}

.batch-processing__controls-container {
    margin-bottom: .5rem
}

.batch-processing .control-item-set {
    display: none
}

.batch-processing .control-item-set.active {
    display: block
}

.batch-processing__controls-message {
    font-size: 12px;
    line-height: 16px;
    margin: 0
}

.batch-processing__controls-message.note {
    color: #f0d76a
}

.batch-processing__controls-message.warning {
    color: #fa7d00
}

.batch-processing__right-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem);
    border-radius: 0 0 3px
}

.batch-processing__right-panel .drag-drop-area {
    margin-top: 48px
}

.batch-processing .scrollable-content--modal-right-panel {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.batch-processing__images-container {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr)
}

.batch-processing__download-button {
    justify-content: left;
    overflow: hidden
}

.batch-processing__download-button .icon:last-child {
    margin-left: auto;
    transform: translateY(-2rem);
    transition: transform .3s ease-in-out
}

.batch-processing__download-button.button--selected .icon:last-child {
    transform: translateY(0)
}

.batch-resize-control-container {
    display: none
}

.batch-resize-control-container.active {
    display: block
}

.batch-crop-control__custom-ratio-label {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1rem
}

.batch-crop-control__focal-point {
    display: flex;
    align-items: center
}

.batch-crop-control__focal-point-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.batch-crop-control__focal-point-row:not(:last-child) {
    margin-bottom: 6px
}

.batch-item {
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--image-bg);
    border: 1px solid var(--image-border-color);
    border-radius: 8px;
    overflow: hidden
}

.batch-item:hover .batch-button {
    opacity: 1
}

.batch-item__background {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/images/app/checker_pattern.jpg)
}

.batch-item__image {
    position: relative;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated
}

.batch-item__image-overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated
}

.batch-item__image-overlay.active {
    display: block
}

.batch-item__image-overlay-veil {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8)
}

.batch-item__image-overlay-veil.active {
    display: flex
}

.batch-item__image-overlay-veil .loading-spinner {
    display: none;
    width: 30px;
    height: 30px
}

.batch-item__image-overlay-veil .loading-spinner.active {
    display: block
}

.batch-item__crop-controls {
    position: relative;
    display: none;
    width: 100%;
    height: 100%
}

.batch-item__crop-controls.active {
    display: block
}

.batch-item__crop-veil {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6)
}

.batch-item__crop-region {
    touch-action: none;
    position: absolute;
    border: 1px dashed var(--secondary-300);
    display: flex;
    justify-content: space-between;
    cursor: move
}

.batch-item__crop-region .batch-item__crop-region-handle.bottom {
    bottom: 0
}

.batch-item__crop-region .batch-item__crop-region-handle.right {
    right: 0
}

.batch-item__crop-region .batch-item__crop-region-handle.center {
    left: -5px
}

.batch-item__crop-region .batch-item__crop-region-handle.middle {
    top: -5px
}

.batch-item__crop-region--handle-expand .batch-item__crop-region-handle.top {
    top: -6px
}

.batch-item__crop-region--handle-expand .batch-item__crop-region-handle.bottom {
    bottom: -6px
}

.batch-item__crop-region--handle-expand .batch-item__crop-region-handle.left {
    left: -6px
}

.batch-item__crop-region--handle-expand .batch-item__crop-region-handle.right {
    right: -6px
}

.batch-item__crop-region--handle-hide-center .batch-item__crop-region-handle.center,
.batch-item__crop-region--handle-hide-middle .batch-item__crop-region-handle.middle {
    display: none
}

.batch-item__crop-region-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none
}

.batch-item__crop-region-handle-container {
    position: relative;
    width: 0;
    height: 0;
    overflow: visible
}

.batch-item__crop-region-handle {
    position: absolute;
    margin: 1px;
    width: 10px;
    height: 10px;
    background: var(--secondary-300);
    border: 1px solid var(--secondary-800);
    border-radius: 2px;
    pointer-events: all
}

.batch-item__crop-region-handle.bottom.center,
.batch-item__crop-region-handle.top.center {
    cursor: ns-resize
}

.batch-item__crop-region-handle.middle.left,
.batch-item__crop-region-handle.middle.right {
    cursor: ew-resize
}

.batch-item__crop-region-handle.bottom.right,
.batch-item__crop-region-handle.top.left {
    cursor: nwse-resize
}

.batch-item__crop-region-handle.bottom.left,
.batch-item__crop-region-handle.top.right {
    cursor: nesw-resize
}

.batch-item__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    --text-font-size: 13px;
    --text-line-height: 18px;
    text-align: center;
    color: var(--secondary-000);
    background: var(--secondary-500);
    border-radius: 0 0 8px 8px;
    pointer-events: none
}

.batch-item__rotate-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    display: none;
    justify-content: space-between;
    background: var(--secondary-100);
    border-radius: 0 0 8px 8px
}

.batch-item__rotate-controls div {
    display: flex
}

.batch-item__rotate-controls div button:first-child {
    margin-right: 4px
}

.batch-item__rotate-controls div button:last-child {
    margin-left: 4px
}

.batch-item__rotate-controls.active {
    display: flex
}

.collage-wizard {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.modal-root__outer--fullwidth-on-mobile .collage-wizard {
    padding-bottom: 0
}

.collage-wizard .panel-header {
    flex-shrink: 0
}

.collage-wizard .panel-header .panel-header__text--modal-section {
    padding-bottom: 0
}

.collage-wizard__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    overflow: hidden
}

@media (max-width:800px) {
    .collage-wizard__body {
        flex-direction: column;
        max-height: calc(100vh - 188px)
    }
}

.collage-wizard__left-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    width: 17rem;
    padding: 1rem 1.5rem 0
}

.collage-wizard__left-panel .panel-header__text--modal-section {
    padding: 0
}

.collage-wizard__left-panel .scrollable-content {
    --scrollable-content-width: 224px;
    width: calc(var(--scrollable-content-width) + 20px)
}

.collage-wizard__left-panel .gallery__placeholder {
    border-radius: 4px
}

.collage-wizard__left-panel .gallery__item--selected .gallery__outline {
    box-shadow: inset 0 0 0 6px var(--primary-200)
}

.collage-wizard__left-panel .icon-deselected,
.collage-wizard__left-panel .icon-selected {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px
}

.collage-wizard__right-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.collage-wizard__image-selection {
    padding: 1rem
}

@media (max-width:800px) {
    .collage-wizard__image-selection {
        height: calc(100% - 100vw * (470 / 349) - 49px);
        padding: 0
    }
    .collage-wizard__image-selection .scrollable-content {
        height: calc(100% - 96px)
    }
}

@media (max-width:800px) and (min-aspect-ratio:2/3) {
    .collage-wizard__image-selection {
        height: 251px
    }
}

.collage-wizard__image-selection .vertical-scroller {
    padding: 1rem
}

.collage-wizard__use-images {
    flex-shrink: 0;
    margin: 1rem auto;
    padding: 0 .75rem
}

@media (max-width:800px) {
    .collage-wizard__use-images {
        width: 90%
    }
}

.collage-wizard__image-menu {
    --collage-icon-size: 68px;
    position: absolute;
    bottom: 0;
    background-color: var(--secondary-000);
    box-shadow: 0 -9px 13px -2px rgba(0, 0, 0, .12);
    border-radius: 12px 12px 0 0;
    width: 100%;
    z-index: 9;
    will-change: height
}

.collage-wizard__menu-veil {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, .35);
    top: calc(var(--safe-area-top) + 55px)
}

.collage-wizard__preview-outer {
    position: relative
}

.collage-wizard__preview-outer:before {
    content: "";
    display: block;
    padding-top: calc(100% * (528 / 672))
}

@media (max-width:800px) and (min-aspect-ratio:2/3) {
    .collage-wizard__preview-outer:before {
        padding-top: calc(var(--100vh) - 56px - 300px)
    }
}

@media (max-width:800px) {
    .collage-wizard__preview-outer.collage-wizard__preview-outer--app-height {
        height: calc(100vh - 300px)
    }
}

@media (max-width:800px) {
    .collage-wizard__preview-outer {
        height: calc(100vh - 350px)
    }
}

.collage-wizard__preview-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    background-color: var(--image-bg);
    border: 1.5rem solid var(--secondary-000);
    background-size: contain
}

.collage-wizard__preview-inner--has-image {
    background-color: var(--secondary-000)
}

.collage-wizard__preview-inner--has-image .collage-wizard__preview-message {
    display: none
}

.collage-wizard__preview-inner--has-image .collage-wizard__next-button,
.collage-wizard__preview-inner--has-image .collage-wizard__prev-button,
.collage-wizard__preview-inner--has-image .collage-wizard__preview-image {
    display: block
}

.collage-wizard__preview-image {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    display: none
}

.collage-wizard__preview-image--is-transparent {
    background: url(/images/app/checker_pattern.jpg)
}

.collage-wizard__preview-message {
    max-width: 30rem;
    text-align: center;
    margin: 0 auto;
    padding: 0 1rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.collage-wizard__next-button,
.collage-wizard__prev-button {
    position: absolute;
    top: 50%;
    margin-top: -1rem;
    opacity: .85;
    background-color: var(--secondary-200);
    border-radius: 4px;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .12);
    display: none
}

.collage-wizard__next-button:disabled,
.collage-wizard__prev-button:disabled {
    display: none
}

.collage-wizard__prev-button {
    left: -.5rem
}

.collage-wizard__prev-button .icon {
    transform: rotate(90deg)
}

.collage-wizard__next-button {
    right: -.5rem
}

.collage-wizard__next-button .icon {
    transform: rotate(270deg)
}

@media (max-width:800px) {
    .collage-wizard__select-collage {
        width: 100%
    }
}

.collage-wizard__popover-placeholder {
    position: absolute;
    right: 2rem
}

.collage-wizard__footer {
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding: .5rem 1rem;
    border-radius: 0 0 3px
}

@media (max-width:800px) {
    .collage-wizard__footer {
        padding: 1rem;
        flex-grow: 0
    }
}

.collage-wizard .tutorial {
    margin: 0
}

.collage-wizard__button-section {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    padding-left: 1rem
}

.graphic-library .panel-header {
    flex-shrink: 0
}

.graphic-library__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 56px)
}

@media (max-width:800px) {
    .graphic-library__body {
        flex-direction: column
    }
}

.graphic-library__left-panel {
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.5rem 1.5rem 0;
    border-right: 1px solid var(--border-color)
}

.graphic-library__left-panel--mobile {
    width: 100%
}

.graphic-library__left-panel--mobile .graphic-library__search-box {
    flex-grow: 1
}

.graphic-library__left-panel .scrollable-content {
    --scrollable-content-width: 14rem
}

.graphic-library__mobile-search-options {
    display: flex;
    justify-content: flex-start
}

.graphic-library__left-panel-options {
    display: flex;
    flex-direction: column
}

.graphic-library__filter-button {
    position: relative
}

.graphic-library__button {
    margin-bottom: 2px
}

.graphic-library__editors-choice-buttons-container {
    margin-bottom: 1.5rem;
    width: var(--scrollable-content-width)
}

@media (max-width:800px) {
    .graphic-library__styles-container {
        margin: 1.5rem 2rem 0
    }
}

.graphic-library__styles-container,
.graphic-library__tags-container {
    width: var(--scrollable-content-width)
}

.graphic-library__styles-container .panel-header__text,
.graphic-library__tags-container .panel-header__text {
    padding-left: 0
}

.graphic-library__search-box {
    flex-grow: 1;
    margin-right: .5rem
}

@media (min-width:801px) {
    .graphic-library__search-box {
        margin-bottom: 1.5rem;
        margin-right: 0
    }
}

.graphic-library__style {
    margin-bottom: 2px
}

.graphic-library__tags-header {
    margin-top: 1.5rem
}

@media (max-height:550px) {
    .graphic-library__tags {
        overflow-y: visible;
        overflow-x: visible
    }
}

@media (max-width:800px) {
    .graphic-library__tags {
        display: flex;
        margin-left: 2rem
    }
    .graphic-library__tags .chip {
        margin-bottom: 0;
        white-space: nowrap
    }
}

@media (max-width:800px) {
    .graphic-library__tags-container {
        margin-top: 0;
        height: 4rem !important;
        flex-shrink: 0;
        flex-grow: 0
    }
}

.graphic-library__tag {
    display: inline-block;
    margin: 0 4px 4px 0
}

.graphic-library__right-panel {
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem);
    border-radius: 0 0 3px
}

.graphic-library__results-header {
    margin: 24px 0 16px 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center
}

.graphic-library__results-heading {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    margin: 0
}

.graphic-library__clear-results {
    margin-left: .75rem;
    flex-shrink: 0
}

.graphic-library .editors-choice--loading {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.graphic-library__results-gallery {
    min-height: 100%;
    flex-grow: 1
}

.graphic-library__results-gallery .gallery__item {
    background-color: var(--secondary-400);
    transition: background-color .25s ease-in-out
}

.graphic-library__results-gallery .gallery__item:hover {
    background-color: var(--secondary-300)
}

.graphic-library__results-gallery .gallery__item:active {
    background-color: var(--secondary-500)
}

.graphic-library__results-gallery .gallery__item--selected {
    background-color: var(--secondary-400) !important
}

.graphic-library__results-gallery .gallery__item--selected:active {
    background-color: var(--secondary-500) !important
}

.graphic-library__results-gallery .gallery__item--selected .gallery__outline {
    box-shadow: inset 0 0 0 6px var(--primary-200)
}

.graphic-library__results-gallery .gallery__item--bookend {
    background: 0 0
}

.graphic-library__results-gallery .icon-deselected,
.graphic-library__results-gallery .icon-selected {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px
}

.graphics-editors-choice {
    padding: 0 0 1.25rem
}

.graphics-editors-choice__row {
    margin-bottom: 1rem
}

.graphics-editors-choice__row-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    align-items: center
}

.graphics-editors-choice__row-heading {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    margin-bottom: 0
}

.graphics-editors-choice__see-all:hover {
    cursor: pointer
}

.template-library input:invalid:not(:focus) {
    box-shadow: none
}

.template-library .panel-header {
    flex-shrink: 0
}

.template-library__tabs {
    position: absolute;
    width: 210px;
    left: calc(50% - 105px);
    top: 12px
}

.modal-root__outer--fullwidth-on-mobile .template-library__tabs {
    top: calc(var(--safe-area-top) + 12px)
}

.template-library__mobile-search-options {
    display: flex;
    justify-content: flex-start
}

.template-library__mobile-filters {
    padding: 2rem
}

.template-library__filter-button {
    position: relative
}

.template-library__popover-placeholder {
    position: absolute;
    top: 2.75rem;
    left: calc(50% + 4rem)
}

.template-library__body {
    flex-direction: row;
    flex-grow: 1;
    padding: 0;
    max-height: calc(100% - 49px)
}

.template-library__left-panel {
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.5rem 1.5rem 0
}

.template-library__tags {
    height: calc(100% - 176px)
}

.template-library__tags span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    pointer-events: none
}

.template-library__tag {
    justify-content: flex-start;
    margin-bottom: 2px
}

@media (max-width:801px) {
    .template-library__search-box {
        flex-grow: 1;
        margin-right: .5rem
    }
}

.template-library__search-input {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    font-size: var(--text-font-size)
}

.template-library__search-autocomplete {
    z-index: 1;
    top: 40px;
    width: 100%
}

.template-library__right-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 17rem);
    border-left: 1px solid var(--border-color);
    padding: 1.5rem 0
}

.template-library__results-header {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding-left: 1.5rem
}

.template-library__results-header--left {
    justify-content: left
}

.template-library__results-heading {
    margin: 0
}

.template-library__clear-results {
    margin-left: .75rem;
    flex-shrink: 0
}

.template-library__results-gallery {
    flex-grow: 1;
    min-height: 100%;
    overflow-y: initial;
    overflow-x: initial
}

.template-library__buttons {
    margin: 1.5rem 0
}

.template-library__button {
    margin-bottom: 2px;
    justify-content: flex-start
}

.template-library .gallery__item {
    cursor: zoom-in
}

.template-library .gallery__placeholder {
    position: relative
}

.template-library .gallery__placeholder div {
    transform: translate(0, -24px);
    background-size: auto !important
}

.template-library .gallery__overlay {
    height: 6rem
}

.template-library__item-content {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: calc(100% - 12px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.template-library__item-content .badge--plus {
    margin-left: 6px;
    flex: none
}

.template-library__dimensions {
    --text-color: var(--static-white);
    --text-font-size: 12px;
    --text-line-height: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.template-library__dimensions span {
    display: inline-block
}

.template-editors-choice {
    display: flex;
    flex-direction: column;
    min-height: 100%
}

.template-editors-choice--loading {
    flex-grow: 1;
    align-items: center;
    justify-content: center
}

.template-editors-choice--loading .loading-spinner {
    margin-right: .5rem
}

.template-editors-choice__row {
    margin-bottom: 1rem
}

.template-editors-choice__row-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;
    align-items: center
}

.template-editors-choice__row-heading {
    margin-bottom: 0
}

@media (max-width:800px) {
    .template-editors-choice__see-all {
        padding-right: 0;
        --button-text-size: 12px
    }
}

.template-editors-choice__see-all:hover {
    cursor: pointer
}

.template-editors-choice__images {
    display: flex;
    justify-content: flex-start;
    margin-left: -.25rem
}

.template-editors-choice__item {
    min-width: 2.5rem;
    position: relative;
    overflow: hidden;
    margin: 0 .25rem;
    cursor: zoom-in;
    background-color: var(--secondary-000);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border-radius: 8px
}

.blank-canvas__section {
    width: 100%;
    display: flex
}

.blank-canvas__mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.blank-canvas__mobile-controls {
    background: var(--secondary-200);
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.blank-canvas__custom-heading {
    --text-font-size: 13px;
    --text-line-height: 18px;
    margin-bottom: 1.625rem
}

@media (max-width:800px) {
    .blank-canvas__custom-heading {
        --text-font-size: 14px;
        --heading-font-size: 14px;
        --text-line-height: calc(14px + 6px);
        --heading-line-height: calc(14px + 6px);
        margin-bottom: 1rem
    }
}

.blank-canvas__dimensions-scrubber,
.blank-canvas__orientation-toggle {
    margin: 0 0 1.25rem;
    width: 100%;
    max-width: 336px
}

.blank-canvas__dimensions-scrubber .control-item,
.blank-canvas__orientation-toggle .control-item {
    margin: 0 .5rem 0 0
}

.blank-canvas__button {
    align-self: start
}

.blank-canvas__row-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem
}

@media (max-width:800px) {
    .blank-canvas__row-header {
        margin: 0 0 0 2rem
    }
}

@media (max-width:600px) {
    .blank-canvas__row-header {
        margin: 0 0 0 1rem
    }
}

.blank-canvas__gallery-row .gallery {
    background: 0 0
}

.blank-canvas__gallery-row .gallery__item {
    background: 0 0;
    cursor: pointer
}

.blank-canvas__gallery-row .gallery__item:hover {
    background: var(--secondary-200)
}

.blank-canvas__gallery-row .gallery__item:empty {
    background: 0 0
}

.blank-canvas__template-description {
    position: absolute;
    width: 100%;
    padding: 0 1rem;
    text-align: center;
    pointer-events: none;
    bottom: 16px;
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px
}

@media (max-width:800px) {
    .blank-canvas__template-description {
        bottom: 0
    }
}

.blank-canvas__template-title {
    line-height: 1rem;
    font-weight: 700;
    margin-bottom: 0
}

.blank-canvas__template-dimensions {
    font-weight: 400
}

.blank-canvas__dpi-info {
    margin: -.75rem 0 .75rem
}

.app-lang-fr #designer_search_templates {
    font-size: 14px
}

.app-lang-es #designer_view_all_templates,
.app-lang-pt #designer_view_all_templates {
    letter-spacing: .5px
}

.save-image {
    display: block;
    position: relative
}

.save-image .control-item {
    margin-left: 0;
    margin-right: 0
}

.save-image panel-header {
    position: absolute;
    right: 0;
    border: 0;
    display: none
}

.save-image .modal__body {
    flex-direction: row;
    padding: 0;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.browser--windows-firefox .save-image .modal__body {
    scrollbar-width: thin
}

.save-image__left-column {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 8px 0 0 8px
}

.save-image__preview-outer {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.save-image__preview-inner {
    display: block;
    position: relative
}

.save-image__preview-bg {
    width: 100%;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, .25));
    background: var(--secondary-000)
}

.save-image__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center
}

.save-image__dimensions {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700
}

.save-image__image-type .toggle-group__label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.save-image__quality-and-size {
    padding: .5rem;
    background: var(--secondary-100);
    border: 1px solid var(--secondary-300);
    border-radius: 4px
}

.save-image__quality-and-size .control-item-columns {
    margin: 0
}

.save-image__size {
    position: relative;
    max-width: 4.5rem;
    padding-left: 4px
}

.save-image__size-label {
    margin-bottom: 2px;
    --text-font-size: 13px;
    --text-line-height: 18px
}

.save-image__size-text {
    display: inline-block;
    margin-right: 6px;
    --text-font-size: 13px;
    --text-line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.save-image__size-text--updating {
    opacity: .5
}

.save-image__size-text--updating+.save-image__size-spinner {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease-in
}

.save-image__size-spinner {
    position: absolute;
    bottom: 6px;
    visibility: hidden;
    opacity: 0
}

.save-image__quality-guide {
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    min-height: 20px;
    margin-top: 8px
}

.save-image__image-quality {
    margin-right: 1rem !important
}

.save-image__pdf-quality {
    margin: 0 .5rem 0 0 !important;
    padding-right: .5rem
}

.save-image__pdf-quality .toggle-group__button {
    height: 1.5rem
}

.save-image__header {
    --text-font-size: 18px;
    --heading-font-size: 18px;
    --text-line-height: calc(18px + 8px);
    --heading-line-height: calc(18px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.save-image__content {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    width: 20rem;
    padding: 1.5rem;
    border-radius: 0 8px 8px 0
}

.save-image__content input[type=text],
.save-image__content textarea {
    width: 100%
}

.save-image .modal-options {
    display: none
}

.save-image__complete {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-top: 1.5rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.save-image__footer {
    margin-top: auto;
    padding-top: 1rem
}

.save-image__image-metadata {
    display: block;
    height: auto;
    line-height: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none
}

.google-save__loading,
.save-to-folder__loading {
    margin-top: 8px;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.google-save__dropdown,
.save-to-folder__dropdown {
    margin-top: 8px
}

.google-save__dropdown .dropdown,
.save-to-folder__dropdown .dropdown {
    max-width: 236px
}

@media (max-width:800px) {
    .google-save__dropdown .dropdown,
    .save-to-folder__dropdown .dropdown {
        max-width: 368px;
        overflow: hidden
    }
}

.google-save__folder-title {
    display: flex;
    align-items: center;
    margin-top: 1rem
}

.google-save__back-button {
    margin-right: .5rem
}

.google-save__back-button--inactive {
    pointer-events: none
}

.google-save__back-button .icon-back {
    transform: rotate(180deg)
}

.template-preview {
    flex-direction: row
}

.template-preview__left-column {
    width: calc(100% - 20rem);
    padding: 1.5rem;
    display: flex;
    border-right: 1px solid var(--border-color)
}

@media (max-width:800px) {
    .template-preview__left-column {
        width: calc(100% - 12rem)
    }
}

.template-preview__content-container {
    padding: var(--safe-area-top) 0 var(--safe-area-bottom) 0
}

.template-preview__stacked {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

.template-preview__stacked .template-preview__content {
    width: 100%;
    padding: 1.5rem
}

.template-preview__stacked-image {
    padding: 2.5rem 1.5rem 0
}

.template-preview__image-outer {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.template-preview__image-inner {
    width: 100%
}

.template-preview__image-placeholder {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 12px rgba(0, 0, 0, .25)
}

.template-preview__content {
    width: 20rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.5rem 1.5rem
}

@media (max-width:800px) {
    .template-preview__content {
        width: 12rem;
        padding: 2rem 1rem 1rem
    }
}

.template-preview__name {
    --text-font-size: 18px;
    --heading-font-size: 18px;
    --text-line-height: calc(18px + 8px);
    --heading-line-height: calc(18px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    --heading-font-weight: 600;
    padding: 0 1rem 1rem 0;
    margin-bottom: 0
}

@media (max-width:800px) {
    .template-preview__name {
        --text-font-size: 14px;
        --heading-font-size: 14px;
        --text-line-height: calc(14px + 6px);
        --heading-line-height: calc(14px + 6px)
    }
}

.template-preview__dimensions {
    font-size: 15px;
    line-height: 21px;
    padding: 0 1rem 1rem 0;
    margin-bottom: 0
}

.template-preview__description {
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 1rem
}

.template-preview__sign-in {
    margin: auto 0 0;
    padding-top: .75rem;
    font-size: 14px;
    line-height: 20px
}

.template-preview__sign-in button {
    display: inline-block;
    margin-left: -4px
}

.watermark .watermark-placement {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    padding: 1rem;
    border-radius: 4px
}

.watermark .watermark-placement .button {
    border-radius: 4px
}

.watermark input {
    width: 100%;
    background: var(--secondary-000)
}

.watermark .watermark-columns {
    display: flex
}

.watermark .watermark-controls {
    width: 14rem;
    flex-shrink: 0;
    margin: 1.5rem;
    background-color: var(--secondary-100);
    border: 1px solid var(--secondary-300);
    border-radius: 8px
}

.watermark .watermark-upload__preview-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9rem;
    padding: .75rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--secondary-400);
    margin-bottom: 1.5rem
}

.watermark .watermark-upload__preview-container string {
    color: var(--secondary-800);
    font-weight: 700
}

.watermark .watermark-upload__preview-container--has-image:hover .watermark-upload__overlay {
    opacity: 1
}

.watermark .watermark-upload__preview-image {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: url(/images/app/checker_pattern.jpg);
    display: none
}

.watermark .watermark-upload__preview-image.active {
    display: block
}

.watermark .watermark-upload__preview-string {
    display: none
}

.watermark .watermark-upload__preview-string.active {
    display: block
}

.watermark .watermark-upload__drop-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary-300);
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.watermark .watermark-upload__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%);
    transition: opacity .3s ease-in-out;
    opacity: 0
}

.watermark .watermark-preview-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 20rem);
    flex-grow: 1;
    flex-shrink: 0;
    padding: 1.5rem;
    border-left: 1px solid var(--border-color)
}

.watermark .watermark-preview-container {
    position: relative;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: url(/images/app/checker_pattern.jpg)
}

.watermark .watermark-preview-image {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, .25))
}

.watermark .watermark-preview-watermark {
    position: absolute;
    left: 0;
    top: 0
}

.watermark-control-container {
    display: none;
    width: 100%;
    margin-top: .5rem
}

.watermark-control-container.active {
    display: flex
}

.watermark-control-presets {
    display: none;
    flex-grow: 1;
    width: 50%
}

.watermark-control-presets.active {
    display: block
}

.watermark-control-edit {
    display: none;
    margin-left: .25rem;
    width: 2rem;
    flex-shrink: 0
}

.watermark-control-edit.active {
    display: flex
}

.watermark-control-create.button--icon {
    flex-grow: 0;
    margin-left: .25rem
}

.watermark-control-create.button--icon string {
    display: none
}

.watermark-preset__body {
    display: flex;
    flex-direction: row;
    padding: 0;
    height: 100%
}

.watermark-preset__left-column {
    width: calc(100% - 20rem)
}

.watermark-preset__image-bg {
    height: 100%;
    width: 100%;
    background-size: contain;
    background-position: center
}

.watermark-preset__right-column {
    display: flex;
    flex-direction: column;
    width: 20rem;
    flex-shrink: 0;
    padding: 1.5rem 0 1.5rem 1.5rem;
    border: 1px solid var(--secondary-300)
}

.watermark-preset__heading {
    --text-font-size: 18px;
    --heading-font-size: 18px;
    --text-line-height: calc(18px + 8px);
    --heading-line-height: calc(18px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    margin-bottom: 1rem;
    flex-shrink: 0
}

.watermark-preset__preset-list {
    --scrollable-content-width: 17rem
}

.watermark-preset__footer {
    margin-top: 1.5rem
}

.watermark-preset__preset-button-row {
    display: flex;
    margin-bottom: 2px;
    padding: 0
}

.watermark-preset__preset-button-row .watermark-preset__edit-preset {
    display: none
}

.watermark-preset__preset-button-row.button--selected .watermark-preset__edit-preset {
    display: flex
}

.watermark-preset__preset-button-row:not(.button--selected):hover .button--transparent:not(:hover) {
    background-color: var(--secondary-200)
}

.watermark-preset__preset-button-row .button--transparent:not([disabled]):hover {
    background-color: var(--secondary-300)
}

.watermark-preset__preset-button-row .button--transparent {
    --text-color: inherit
}

.watermark-preset__select-preset {
    width: auto;
    flex-grow: 1;
    text-align: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.watermark-preset__select-preset--is-editing string {
    display: none
}

.watermark-preset__select-preset--is-editing:hover {
    background: 0 0 !important
}

.watermark-preset__select-preset--is-editing input {
    min-width: 0;
    height: 24px;
    padding: 0 2px;
    margin-left: -3px
}

.watermark-preset__select-preset string {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.watermark-preset__update-name {
    width: calc(100% - 2px)
}

.watermark-preset__edit-preset {
    flex-shrink: 0;
    border-radius: 0
}

.watermark-preset__remove-preset {
    flex-shrink: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.font-manager .panel-header {
    flex-shrink: 0
}

.font-manager__body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.font-manager__left-panel {
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.125rem 1.5rem 0;
    flex-shrink: 0
}

.font-manager__left-panel button {
    flex-shrink: 0
}

.font-manager__sub-heading {
    margin-top: 1rem;
    margin-bottom: .5rem
}

.font-manager__tab {
    margin-bottom: 2px;
    transition: color .3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.font-manager__tab string,
.font-manager__tab:hover {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.font-manager__button:hover {
    --text-color: var(--secondary-600)
}

.font-manager__google-menu {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--secondary-300);
    background: var(--secondary-100);
    border-radius: 4px;
    margin-top: 2px
}

.font-manager__google-scroll {
    padding: 2px 2px 18px 18px;
    --scrollable-content-width: 192px;
    width: calc(var(--scrollable-content-width) + 29px)
}

.font-manager__add-google-font:hover {
    color: var(--secondary-600)
}

.font-manager__right-panel {
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color)
}

.font-manager__right-panel .scrollable-content {
    margin-left: 22px
}

.font-manager__right-panel .font-manager__upload-scroll {
    margin-left: 0
}

.font-manager__upload-scroll {
    width: calc(var(--scrollable-content-width) + 20px);
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 3rem
}

.font-manager__center-contents {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.font-manager__center-contents .loading-spinner {
    margin-right: .5rem
}

.font-manager__center-contents .loading-spinner+string {
    vertical-align: top
}

.font-manager__drag-message {
    height: calc(100% - 3rem);
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px dashed var(--secondary-600);
    border-radius: 8px;
    cursor: pointer;
    --text-color: var(--secondary-800);
    transition: background-color .25s ease-in-out
}

.font-manager__drag-message--drop-target,
.font-manager__drag-message:hover {
    background-color: var(--overlay-color-1)
}

.font-manager__drag-message img {
    width: 100%
}

.font-manager__drag-message--has-items {
    height: auto;
    margin-bottom: 0
}

.font-manager__drag-message--has-items img {
    height: 5rem
}

.dark-theme .font-manager__illustration {
    filter: saturate(.6)
}

.font-manager__list {
    list-style-type: none;
    padding: 1.5rem 0
}

.font-manager__list--uploaded {
    padding-top: 0
}

.font-manager__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    height: 2rem;
    background: var(--secondary-200);
    margin-bottom: 4px;
    width: 100%;
    border-radius: 4px
}

.font-manager__item string {
    margin-right: auto;
    line-height: 24px;
    max-width: calc(100% - 56px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.font-manager__item--google {
    position: relative;
    color: transparent
}

.font-manager__item--uploaded {
    padding: 0 4px 0 12px;
    height: auto;
    min-height: 2rem
}

.font-manager__item--error {
    font-size: 14px
}

.font-manager__item:hover .font-manager__link {
    opacity: 1
}

.font-manager__font-image {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    background-size: 228.5714285714px;
    background-repeat: no-repeat;
    background-position-x: .75rem
}

.dark-theme .font-manager__font-image {
    filter: invert(1) grayscale(1)
}

.font-manager__error {
    margin-right: 1rem;
    padding: .25rem 0;
    color: var(--error-500);
    --text-font-size: 12px;
    --text-line-height: calc(12px + 6px);
    letter-spacing: .25px;
    flex-grow: 1
}

.font-manager__error string {
    display: block;
    color: var(--secondary-800);
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height)
}

.font-manager__upload-button-container {
    position: absolute;
    width: var(--scrollable-content-width);
    bottom: 0;
    padding: 1rem 0;
    background-color: var(--secondary-000)
}

.font-manager__search {
    width: calc(100% - 30px);
    flex-shrink: 0;
    margin: 1rem 15px;
    background: var(--secondary-000)
}

.font-manager__style--google {
    width: 72px;
    margin-right: .5rem;
    text-align: right;
    background: var(--secondary-200)
}

.font-manager__upload-progress {
    color: var(--secondary-500)
}

.font-manager__icon-selected {
    padding: 3px;
    background: var(--primary-400);
    border-radius: 50%;
    color: var(--secondary-000);
    pointer-events: inherit;
    margin: .5rem
}

.font-manager__icon-selected--default {
    color: var(--secondary-000);
    background: var(--secondary-500)
}

.font-manager__icon-file,
.font-manager__icon-google {
    pointer-events: inherit;
    margin-right: .5rem
}

.font-manager__no-added-fonts .icon {
    height: 6rem;
    width: 100%;
    margin-bottom: 1.5rem
}

.message-screen {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999999;
    pointer-events: none
}

.message-screen.active {
    display: flex
}

.message-screen .center-container {
    position: relative;
    height: 0;
    overflow: visible;
    text-align: center
}

.message-screen .message-container {
    position: relative;
    max-width: 400px;
    padding: .5rem 1rem;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px);
    color: var(--static-white);
    background: rgba(0, 0, 0, .5);
    border-radius: 4px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.drag-screen {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    overflow: visible;
    z-index: 9999999998;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0;
    transition: opacity .1s ease-in-out
}

.drag-screen__image {
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s ease-in-out;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    min-width: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.drag-screen--active .drag-screen__image {
    transform: translate(-50%, -50%) scale(1)
}

.pricing-table__header-row {
    display: flex;
    grid-column: 1/-1;
    align-items: center;
    margin-bottom: 4px;
    transition: opacity .3s ease-in-out
}

@media (max-width:800px) {
    .pricing-table__header-row {
        margin: .5rem;
        justify-content: space-between
    }
}

.pricing-table__header-row .button {
    opacity: 0;
    height: 0;
    transition: opacity .2s ease-in-out
}

.pricing-table__header-row.fixed {
    position: fixed;
    max-width: 1232px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: var(--site-nav-height);
    padding: calc(var(--safe-area-top) + 1rem) 2rem 1rem;
    background: var(--secondary-000);
    z-index: 1;
    width: 100%
}

@media (max-width:800px) {
    .pricing-table__header-row.fixed {
        padding: calc(var(--safe-area-top) + 1rem) .5rem 1rem
    }
}

@media (min-width:768px) {
    .pricing-table__header-row.fixed {
        padding: 1rem 3rem
    }
}

.pricing-table__header-row.fixed .pricing-table__plans {
    align-items: flex-start
}

.pricing-table__header-row.fixed .pricing-table__plans .button {
    opacity: 1;
    height: auto
}

.pricing-modal .pricing-table__header-row.fixed {
    max-width: 1024px;
    right: 12px
}

@media (max-width:800px) {
    .pricing-modal .pricing-table__header-row.fixed {
        width: calc(100% - 2rem);
        right: 0
    }
}

.pricing-table__header {
    width: 40%;
    margin-left: 8px;
    --heading-font-weight: 400
}

@media (min-width:768px) {
    .pricing-table__header {
        width: 50%
    }
}

.pricing-table__category-header {
    --text-font-size: 16px;
    --heading-font-size: 16px;
    --text-line-height: calc(16px + 8px);
    --heading-line-height: calc(16px + 8px);
    --heading-margin-bottom: 8px;
    --heading-margin-top: 24px;
    --heading-font-weight: 700;
    font-weight: var(--heading-font-weight);
    margin: 28px 8px 12px;
    grid-column: 1/-1
}

@media (max-width:800px) {
    .pricing-table__category-header {
        padding-left: .5rem
    }
}

.pricing-table__row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    grid-column: 1/-1;
    padding: 8px 0 8px 16px
}

.pricing-table__row--background {
    background: var(--secondary-100)
}

.pricing-table__row:last-child {
    background: 0 0
}

.pricing-table__footer {
    justify-content: flex-end;
    display: none;
    margin-top: 32px
}

@media (min-width:960px) {
    .pricing-table__footer {
        display: flex
    }
}

.pricing-table__footer.hidden {
    display: none
}

.pricing-table__checkmark {
    fill: var(--static-green);
    stroke: var(--static-green)
}

.pricing-table__feature {
    display: flex;
    align-items: center;
    width: 65%
}

@media (min-width:768px) {
    .pricing-table__feature {
        width: 50%
    }
}

.pricing-table__feature-name {
    margin-bottom: 0;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

.pricing-table__dash {
    width: 14px;
    height: 1.5px;
    background-color: var(--secondary-800)
}

.pricing-table__plans {
    display: flex;
    width: 35%;
    justify-content: space-evenly;
    align-items: center
}

@media (min-width:768px) {
    .pricing-table__plans {
        width: 50%
    }
}

.pricing-table__plans-column {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --text-font-size: 14px;
    --heading-font-size: 14px;
    --text-line-height: calc(14px + 6px);
    --heading-line-height: calc(14px + 6px)
}

@media (max-width:800px) {
    .pricing-table__plans-column {
        text-align: center;
        width: 40%
    }
}

@media (max-width:800px) {
    .pricing-table__sign-in-button,
    .pricing-table__upgrade-button {
        display: none !important
    }
}

@media (max-width:800px) {
    .pricing-table .section__grid {
        padding: 0
    }
}

.text-patches {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(2, 1fr)
}

.text-patches .loading-spinner {
    margin: .5rem
}

.text-patches__item {
    position: relative;
    background: var(--static-grey);
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    overflow: hidden
}

@media (max-width:800px) {
    .text-patches__item {
        padding: 6px
    }
}

.text-patches__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.text-patches__item:hover:before {
    opacity: 1
}

.text-patches__item:before {
    content: "";
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .006) 8.1%, rgba(0, 0, 0, .022) 15.5%, rgba(0, 0, 0, .047) 22.5%, rgba(0, 0, 0, .079) 29%, rgba(0, 0, 0, .117) 35.3%, rgba(0, 0, 0, .158) 41.2%, rgba(0, 0, 0, .203) 47.1%, rgba(0, 0, 0, .247) 52.9%, rgba(0, 0, 0, .292) 58.8%, rgba(0, 0, 0, .333) 64.7%, rgba(0, 0, 0, .371) 71%, rgba(0, 0, 0, .403) 77.5%, rgba(0, 0, 0, .428) 84.5%, rgba(0, 0, 0, .444) 91.9%, rgba(0, 0, 0, .45) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 8px
}

.text-patches__item:after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%
}

@media (max-width:800px) {
    .text-patches {
        grid-gap: 16px;
        grid-template-columns: unset;
        grid-auto-flow: column;
        align-items: center;
        height: 7rem;
        padding: 0 2rem 0 1rem
    }
    .text-patches--expanded {
        grid-auto-flow: unset;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        padding: 1rem 2rem;
        max-width: 464px;
        margin: 0 auto
    }
}

.iti {
    width: 100%
}

.iti .iti__country-list {
    transition: box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-000);
    max-width: 400px
}

.iti .iti__flag {
    background-image: url(/images/site/dropdown-flags.png)
}

.iti .iti__divider {
    border-bottom: 1px solid var(--border-color)
}

.phone-modal {
    overflow: visible
}

.phone-modal__input {
    margin-bottom: 1rem !important
}

#appViewportBG {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

#appViewportBG.active {
    z-index: 2000;
    display: block
}

#appViewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(48px + var(--safe-area-bottom));
    left: 56px;
    display: none
}

@media (max-width:800px) {
    #appViewport {
        left: 0;
        bottom: calc(117px + var(--safe-area-bottom))
    }
}

#appViewport.active {
    display: block;
    z-index: 2001
}

#appViewport.show-drag-drop-area--dragging,
#appViewport.show-drag-drop-area--initial {
    display: block;
    pointer-events: none
}

.color-exists-button-placeholder {
    margin: 0 .5rem 0 auto
}

.color-exists-button-placeholder .button {
    padding: 0;
    height: 30px;
    width: 30px;
    font-size: 14px
}

.star-text-favorite:after,
.star-text-favorite:before {
    content: "★";
    font-size: 8px;
    vertical-align: middle;
    line-height: 0
}

.star-text-favorite:before {
    padding-right: 2px
}

.star-text-favorite:after {
    padding-left: 2px
}

.image-edit__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--image-bg);
    opacity: 0;
    pointer-events: none
}

.image-edit__image {
    position: absolute;
    left: 0;
    bottom: 0;
    background-position: center;
    background-size: cover;
    outline: 2px solid var(--image-border-color);
    box-shadow: 0 12px 24px -4px rgba(30, 32, 36, .1), 0 8px 16px -8px rgba(30, 32, 36, .3);
    visibility: hidden;
    cursor: pointer;
    transform-origin: bottom left;
    transform: translateX(72px) translateY(-64px);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out, outline-color .2s ease-in-out
}

.app-side-menu-is-open .image-edit__image {
    transform: translateX(344px) translateY(-64px)
}

@media (max-width:800px) {
    .image-edit__image {
        display: none
    }
}

.image-edit__image:active,
.image-edit__image:focus,
.image-edit__image:hover {
    outline-color: var(--border-color)
}

#svg_measurement {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100px;
    visibility: hidden
}

.count-indicator {
    position: absolute;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 8px;
    margin: 4px 0 0 2px;
    border-radius: 50%;
    color: #fff;
    background: var(--error-500)
}

.count-indicator--animate {
    animation: .5s ease-out indicator-grow
}

@keyframes indicator-grow {
    0%,
    100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.25)
    }
}

.layer-edit-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 11;
    padding: var(--safe-area-top) 1rem 0;
    background-color: var(--selected-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2)
}

.layer-edit-menu__heading,
.layer-edit-menu__item {
    margin: 0
}

.layer-edit-menu label {
    color: var(--secondary-800);
    margin-bottom: 0
}

.layer-edit-menu label string {
    white-space: nowrap
}

@media (hover:none) {
    .layer-edit-menu .button--grey-200:not([disabled]):hover {
        background: var(--secondary-200)
    }
}