.small-rating {
    margin-top: 2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5em;
    position: relative;
    padding: .75em;
    border: 2px solid rgba(58, 76, 159, .5);
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--border-radius-main)
}

.small-rating:not(.rated) [data-average-rating="1"] .stars__el:nth-child(-n+1) .el__wrapper,
.small-rating:not(.rated)[data-average-rating="2"] .stars__el:nth-child(-n+2) .el__wrapper,
.small-rating:not(.rated)[data-average-rating="3"] .stars__el:nth-child(-n+3) .el__wrapper,
.small-rating:not(.rated)[data-average-rating="4"] .stars__el:nth-child(-n+4) .el__wrapper,
.small-rating:not(.rated)[data-average-rating="5"] .stars__el:nth-child(-n+5) .el__wrapper {
    color: var(--color-rating);
    fill: var(--color-rating)
}

@media screen and (width < 680px) {
    .small-rating {
        width: 100%
    }
}

.small-rating__title {
    font-size: var(--font-size-5)
}

.small-rating__description {
    opacity: .7
}

.small-rating__right {
    display: flex;
    align-items: center;
    gap: .5em
}

@media screen and (width < 500px) {
    .small-rating__right {
        flex-direction: column;
        align-items: flex-end
    }
}

.small-rating__rating {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5em
}

.small-rating__rating .rating__stars {
    display: flex;
    align-items: center;
    gap: .25em
}

.small-rating__rating .rating__stars .stars__el.active .el__wrapper {
    filter: brightness(.8);
    color: var(--color-main) !important;
    fill: var(--color-main) !important
}

.small-rating__rating .rating__stars .stars__el .el__wrapper {
    padding: 0;
    font-size: var(--font-size-5);
    color: var(--color-bg-lightdark-accent);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-bg-lightdark-accent);
    background: none;
    transition: var(--transition-main)
}

.small-rating__rating .rating__stars .stars__el .el__wrapper svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.small-rating__rating .rating__stars .stars__el .el__wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.small-rating__rating .rating__stars .stars__el .el__wrapper * {
    z-index: 999
}

.small-rating__rating .rating__stars .stars__el .el__wrapper:hover:before,
.small-rating__rating .rating__stars .stars__el .el__wrapper:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 500px) {
    .small-rating__rating .rating__stars .stars__el .el__wrapper {
        font-size: var(--font-size-4)
    }
}

.small-rating.rated .el__wrapper {
    color: var(--color-main) !important;
    filter: none !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.faq {
    position: relative;
    width: 100%
}

.faq .faq__list {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.faq .faq__list .faq__el {
    position: relative;
    width: 100%
}

.faq .faq__list .faq__el .el__wrapper {
    position: relative;
    width: 100%;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    padding: 0 2.5em;
    transition: var(--transition-main)
}

@media screen and (width < 670px) {
    .faq .faq__list .faq__el .el__wrapper {
        padding: 0 1em
    }
}

.faq .faq__list .faq__el.active .wrapper__answer {
    grid-template-rows: 1fr
}

.faq .faq__list .faq__el.active .question__toggle {
    rotate: 0 !important
}

.faq .faq__list .faq__el .wrapper__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding-block: 1em
}

.faq .faq__list .faq__el .wrapper__question .question__text {
    font-size: var(--font-size-2);
    text-align: left
}

@media screen and (width < 670px) {
    .faq .faq__list .faq__el .wrapper__question .question__text {
        font-size: var(--font-size-3)
    }
}

.faq .faq__list .faq__el .wrapper__question .question__toggle {
    padding: 1rem;
    font-size: var(--font-size-2);
    color: var(--color-main);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-main);
    background: none;
    transition: var(--transition-main);
    rotate: -45deg
}

.faq .faq__list .faq__el .wrapper__question .question__toggle svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.faq .faq__list .faq__el .wrapper__question .question__toggle:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.faq .faq__list .faq__el .wrapper__question .question__toggle * {
    z-index: 999
}

.faq .faq__list .faq__el .wrapper__question .question__toggle:hover:before,
.faq .faq__list .faq__el .wrapper__question .question__toggle:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.faq .faq__list .faq__el .wrapper__answer {
    position: relative;
    width: 100%;
    transition: var(--transition-main);
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden
}

.faq .faq__list .faq__el .wrapper__answer>* {
    overflow: hidden
}

.faq .faq__list .faq__el .wrapper__answer .answer__content {
    position: relative;
    width: 100%
}

.faq .faq__list .faq__el .wrapper__answer .answer__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 1px;
    background: var(--color-bg-dark);
    opacity: .15;
    border-radius: 9999px
}

.faq .faq__list .faq__el .wrapper__answer .answer__content::after {
    content: "";
    position: absolute;
    background: var(--color-main);
    top: 0;
    right: calc(var(--font-size-2) / 2 + 4px);
    height: calc(100% - 2em);
    width: 4px;
    border-radius: 9999px
}

.faq .faq__list .faq__el .wrapper__answer .answer__content p {
    font-size: var(--font-size-4);
    padding-block: 1em 2em;
    color: var(--color-text);
    opacity: .65;
    max-width: calc(100% - (var(--font-size-2) / 2 + 12px));
    width: 70%;
    text-align: left
}

@media screen and (width < 670px) {
    .faq .faq__list .faq__el .wrapper__answer .answer__content p {
        width: 95%;
        font-size: var(--font-size-5)
    }
}

.reviews {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem
}

.reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
    place-content: center;
    width: 100%;
    gap: 2rem;
    margin-left: 2rem;
    transition: var(--transition-main);
    padding: 0;
    margin: 0
}

.reviews__list .list__el {
    padding: 1.25em 1.5em;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-big);
    border: var(--border-main);
    flex-shrink: 0
}

.reviews__list .list__el .el__date {
    opacity: .7;
    font-size: var(--font-size-5)
}

.reviews__list .list__el .el__user {
    margin-top: .15em;
    display: flex;
    align-items: center;
    gap: 1rem
}

.reviews__list .list__el .el__user .user__username,
.reviews__list .list__el .el__user>span {
    font-size: var(--font-size-4);
    word-break: break-word
}

.reviews__list .list__el .el__user .user__rating .rating__stars {
    display: flex;
    align-items: center;
    gap: .25em
}

.reviews__list .list__el .el__user .user__rating .rating__stars .stars__el {
    font-size: var(--font-size-4);
    width: 1em;
    color: var(--color-bg-lightdark-accent);
    fill: var(--color-bg-lightdark-accent)
}

.reviews__list .list__el .el__user .user__rating .rating__stars .stars__el.active {
    color: var(--color-main);
    fill: var(--color-main)
}

.reviews__list .list__el .el__comment {
    margin-top: .7em;
    opacity: .6;
    font-weight: 400;
    word-break: break-word
}

.reviews__more {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main)
}

.reviews__more svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.reviews__more:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.reviews__more * {
    z-index: 999
}

.reviews__more:hover:before,
.reviews__more:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.review-modal {
    box-shadow: 0 -5dvh 0 9000svh rgba(0, 0, 0, .75);
    overflow: hidden;
    z-index: 99999999;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    position: fixed;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-big);
    border: var(--border-main);
    padding: 0;
    max-width: 100vw;
    transition: var(--transition-main)
}

.review-modal::backdrop {
    background: rgba(0, 0, 0, .75)
}

.review-modal[data-state=confirmation] {
    width: min(60rem, 100% - 2rem)
}

.review-modal[data-state=confirmation] .confirmation-content {
    display: flex
}

.review-modal[data-state=review] {
    width: min(90rem, 100% - 2rem)
}

@media screen and (width < 550px) {
    .review-modal[data-state=review] .content__left {
        display: none
    }
}

.review-modal[data-state=review] .review-content {
    display: flex
}

.review-modal__content {
    position: relative;
    display: none
}

.review-modal__content.review-content {
    align-items: stretch;
    width: 100%;
    height: min(100vh, 60rem);
    overflow: hidden
}

.review-modal__content.review-content .content__left {
    position: relative;
    height: 100%;
    flex: 1 1 50%
}

.review-modal__content.review-content .content__left .left__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-position: 15% center;
    object-position: 15% center
}

.review-modal__content.review-content .content__right {
    padding: 1em;
    flex: 1 0 50%;
    display: flex;
    align-items: center;
    flex-direction: column
}

.review-modal__content.review-content .content__right .right__close {
    padding: none;
    font-size: var(--font-size-3);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: none;
    transition: var(--transition-main);
    position: absolute;
    top: 1rem;
    right: 1rem
}

.review-modal__content.review-content .content__right .right__close svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.review-modal__content.review-content .content__right .right__close:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.review-modal__content.review-content .content__right .right__close * {
    z-index: 999
}

.review-modal__content.review-content .content__right .right__close:hover:before,
.review-modal__content.review-content .content__right .right__close:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.review-modal__content.review-content .content__right .right__title {
    font-size: var(--font-size-2);
    text-align: center
}

.review-modal__content.review-content .content__right .right__description {
    font-size: var(--font-size-5);
    opacity: .6;
    text-align: center
}

.review-modal__content.review-content .content__right .right__form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: stretch;
    flex-grow: 1;
    width: 100%;
    margin-top: 2rem
}

.review-modal__content.review-content .content__right .right__form .g-recaptcha {
    margin-inline: auto
}

.review-modal__content.review-content .content__right .right__form .form__field {
    display: flex;
    flex-direction: column;
    width: 100%
}

.review-modal__content.review-content .content__right .right__form .form__field p {
    margin-left: 1em;
    font-size: var(--font-size-5)
}

.review-modal__content.review-content .content__right .right__form .form__field input,
.review-modal__content.review-content .content__right .right__form .form__field textarea {
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: var(--padding-input);
    color: var(--color-text)
}

.review-modal__content.review-content .content__right .right__form .form__field input::-moz-placeholder,
.review-modal__content.review-content .content__right .right__form .form__field textarea::-moz-placeholder {
    opacity: .75
}

.review-modal__content.review-content .content__right .right__form .form__field input::placeholder,
.review-modal__content.review-content .content__right .right__form .form__field textarea::placeholder {
    opacity: .75
}

.review-modal__content.review-content .content__right .right__form .form__field input::-moz-placeholder,
.review-modal__content.review-content .content__right .right__form .form__field textarea::-moz-placeholder {
    opacity: .65
}

.review-modal__content.review-content .content__right .right__form .form__field input::placeholder,
.review-modal__content.review-content .content__right .right__form .form__field textarea::placeholder {
    opacity: .65
}

.review-modal__content.review-content .content__right .right__form .form__field textarea {
    resize: vertical;
    width: 100%;
    outline: transparent;
    border: 0;
    height: 15rem
}

.review-modal__content.review-content .content__right .right__form .form__status {
    text-align: center;
    color: var(--color-text);
    width: 100%;
    padding: .75em;
    border-radius: var(--border-radius-main);
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 2rem;
    width: 90%;
    left: 5%;
    translate: 0 -1rem;
    transition: translate ease-in-out --transition-slow, opacity ease-in-out --transition-slow;
    pointer-events: none;
    -webkit-user-select: 0;
    -moz-user-select: 0;
    user-select: 0;
    opacity: 0
}

.review-modal__content.review-content .content__right .right__form .form__status span {
    text-align: center;
    display: none
}

.review-modal__content.review-content .content__right .right__form .form__status[data-state=error] {
    background: linear-gradient(180deg, #55be44 0, #87c27d 100%);
    opacity: 1;
    translate: 0 0
}

.review-modal__content.review-content .content__right .right__form .form__status[data-state=error] .status__error {
    display: block
}

.review-modal__content.review-content .content__right .right__form .form__status[data-state=success] {
    background: linear-gradient(180deg, #55be44 0, #87c27d 100%);
    opacity: 1;
    color: var(--color-text-light);
    translate: 0 0
}

.review-modal__content.review-content .content__right .right__form .form__status[data-state=success] .status__success {
    display: block
}

.review-modal__content.review-content .content__right .right__form .form__submit {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    width: 100%;
    margin-top: auto;
    padding-block: .65em
}

.review-modal__content.review-content .content__right .right__form .form__submit svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.review-modal__content.review-content .content__right .right__form .form__submit:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.review-modal__content.review-content .content__right .right__form .form__submit * {
    z-index: 999
}

.review-modal__content.review-content .content__right .right__form .form__submit:hover:before,
.review-modal__content.review-content .content__right .right__form .form__submit:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.review-modal__content.confirmation-content {
    flex-direction: column;
    width: 100%;
    padding: 1em
}

.review-modal__content.confirmation-content .content__title {
    font-size: var(--font-size-2);
    text-align: center
}

.review-modal__content.confirmation-content .content__description {
    opacity: .6;
    font-size: var(--font-size-4);
    text-align: center
}

.review-modal__content.confirmation-content .content__actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin-top: 2em
}

.review-modal__content.confirmation-content .content__actions .actions__btn {
    padding: .6em 4em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    white-space: nowrap
}

.review-modal__content.confirmation-content .content__actions .actions__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.review-modal__content.confirmation-content .content__actions .actions__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.review-modal__content.confirmation-content .content__actions .actions__btn * {
    z-index: 999
}

.review-modal__content.confirmation-content .content__actions .actions__btn:hover:before,
.review-modal__content.confirmation-content .content__actions .actions__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.review-modal__content.confirmation-content .content__actions .actions__btn.no-btn {
    color: var(--color-text);
    background: var(--color-bg-lightdark)
}

.about-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    box-shadow: var(--box-shadow-main);
    padding-block: 4em;
    padding-inline: 0
}

.about-block .about-block__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    width: var(--width-main-content);
    padding-inline: 1.5em
}

.about-block .about-block__group.row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: stretch;
    flex-wrap: wrap
}

.about-block .about-block__group.row>* {
    flex: 1 1 50%
}

.about-block .about-block__group.full-size {
    width: 100%;
    overflow: hidden;
    padding-inline: 0
}

.about-block .about-block__group.full-size .group__title {
    padding-inline: 1.25em
}

.about-block .about-block__group:has(.group__image) {
    position: relative;
    overflow: hidden
}

.about-block .about-block__group:has(.group__image)::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0)15%, var(--color-bg-light)100%);
    right: 0;
    top: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.about-block .about-block__group .group__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-big);
    box-shadow: var(--box-shadow-main)
}

.about-block .about-block__group .group__title,
.about-block .about-block__group .group__main-title {
    text-align: center;
    max-width: 85rem
}

.about-block .about-block__group .group__title b,
.about-block .about-block__group .group__main-title b {
    font-weight: 800;
    color: var(--color-main)
}

.about-block .about-block__group .group__main-title+.group__title {
    translate: 0 -.8em;
    opacity: .7
}

.about-block .about-block__group .group__main-title {
    font-size: var(--font-size-2);
    max-width: 90rem
}

.about-block .about-block__group .group__title {
    font-weight: 500;
    font-size: var(--font-size-3)
}

.about-block .about-block__group.group_conclusion .group__title {
    margin-bottom: .5em;
    font-size: var(--font-size-3)
}

.about-block .about-block__group .group__description {
    text-align: justify;
    opacity: .6;
    font-weight: 500;
    align-self: flex-start;
    margin-top: 0;
    font-size: var(--font-size-4)
}

.about-block .about-block__group .group__banner {
    border-radius: var(--border-radius-big);
    width: 100%;
    display: flex;
    justify-content: center
}

.about-block .about-block__group .group__banner .banner__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    color: var(--color-text);
    width: var(--width-main-content)
}

.about-block .about-block__group .group__banner .banner__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    height: 60rem;
    border-radius: var(--border-radius-main);
    border-radius: var(--border-radius-big);
    box-shadow: var(--box-shadow-main);
    max-width: 100%
}

@media screen and (width < 570px) {
    .about-block .about-block__group .group__banner .banner__image {
        height: auto;
        width: auto
    }
}

.about-block .about-block__group .group__banner .banner__description {
    font-size: var(--font-size-4);
    border-radius: var(--border-radius-main);
    text-align: center
}

.about-block .about-block__group .group__banner .banner__description b {
    font-weight: 800;
    border-radius: var(--border-radius-small);
    color: var(--color-text-light)
}

.about-block .about-block__group .group__img-list {
    width: 100%;
    display: flex;
    gap: 1em;
    padding-block: .25em;
    justify-content: center
}

@media screen and (width < 880px) {
    .about-block .about-block__group .group__img-list {
        flex-wrap: wrap
    }
}

.about-block .about-block__group .group__img-list .img-list__el {
    flex: 1 1 25rem;
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75em
}

@media screen and (width < 880px) {
    .about-block .about-block__group .group__img-list .img-list__el {
        flex: 1 1 15rem
    }
}

.about-block .about-block__group .group__img-list .img-list__el .el__card .card__text {
    text-align: center;
    font-size: var(--font-size-0);
    background: linear-gradient(90deg, #485fc7 0, #ff4500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.about-block .about-block__group .group__img-list .img-list__el .el__card svg {
    width: 1.5em;
    font-size: var(--font-size-0)
}

.about-block .about-block__group .group__benefits-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em
}

@media screen and (width < 750px) {
    .about-block .about-block__group .group__benefits-list {
        gap: .5em
    }
}

.about-block .about-block__group .group__benefits-list .benefits-list__el {
    flex: 1 1 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    text-align: center;
    padding: 2em
}

@media screen and (width < 750px) {
    .about-block .about-block__group .group__benefits-list .benefits-list__el {
        padding: 1em
    }
}

.about-block .about-block__group .group__benefits-list .benefits-list__el svg {
    color: var(--color-main);
    fill: var(--color-main);
    font-size: var(--font-size-0);
    height: 1.25em
}

.about-block .about-block__group .group__benefits-list .benefits-list__el .el__title {
    text-align: center;
    margin-top: 1em;
    height: 2.5em;
    font-size: var(--font-size-4)
}

.about-block .about-block__group .group__benefits-list .benefits-list__el .el__description {
    opacity: .6;
    text-align: center;
    font-weight: 400;
    max-width: 35rem
}

.about-block .quote-like {
    position: relative;
    min-height: 2em;
    display: flex;
    align-items: center;
    margin-top: .25em;
    border-right: 4px solid var(--color-main);
    border-left: 4px solid var(--color-main);
    border-radius: 4px !important;
    padding-inline: 1em
}

.about-block .quote-like::before {
    top: 0
}

.about-block .quote-like::after {
    bottom: 0
}

.editor {
    border-radius: var(--border-radius-main);
    overflow: hidden;
    width: var(--width-main-content);
    border: var(--border-main);
    padding: 0
}

.editor::backdrop {
    background: rgba(0, 0, 0, .75)
}

.editor>svg {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    opacity: .75;
    width: min(90%, 60rem);
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: var(--transition-main);
    animation: editorBgStrokeAnimation infinite 500s linear;
    stroke-dasharray: 360px
}

.editor>svg * {
    stroke: var(--color-main)
}

.editor>svg.disabled {
    display: none
}

.editor__canvas {
    width: 100%;
    height: min(40vh, 40em);
    background-color: var(--color-bg-light)
}

.editor__tools {
    position: relative;
    background: var(--color-bg-lightdark);
    padding: .5em;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: .5em
}

.editor__tools .tools__left,
.editor__tools .tools__right {
    position: relative;
    display: flex;
    align-items: stretch
}

.editor__tools .tools__left {
    gap: 1em;
    flex-grow: 1
}

.editor__tools .tools__left .left__tool.tool_edit,
.editor__tools .tools__left .left__tool.tool_clear {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    flex-grow: 0;
    flex-shrink: 0
}

.editor__tools .tools__left .left__tool.tool_edit svg,
.editor__tools .tools__left .left__tool.tool_clear svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.editor__tools .tools__left .left__tool.tool_edit:before,
.editor__tools .tools__left .left__tool.tool_clear:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.editor__tools .tools__left .left__tool.tool_edit *,
.editor__tools .tools__left .left__tool.tool_clear * {
    z-index: 999
}

.editor__tools .tools__left .left__tool.tool_edit:hover:before,
.editor__tools .tools__left .left__tool.tool_edit:focus-within:focus-visible:before,
.editor__tools .tools__left .left__tool.tool_clear:hover:before,
.editor__tools .tools__left .left__tool.tool_clear:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 800px) {

    .editor__tools .tools__left .left__tool.tool_edit,
    .editor__tools .tools__left .left__tool.tool_clear {
        padding: .35em .75em
    }
}

.editor__tools .tools__left .left__tool.tool_color {
    position: relative;
    -webkit-appearance: none;
    aspect-ratio: 1/1;
    height: 100%;
    padding: 0;
    width: auto;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--border-radius-small);
    flex-shrink: 0;
    flex-grow: 0
}

.editor__tools .tools__left .left__tool.tool_color::-webkit-color-swatch-wrapper {
    padding: 0
}

.editor__tools .tools__left .left__tool.tool_color::-webkit-color-swatch {
    border-radius: var(--border-radius-small)
}

.editor__tools .tools__left .left__tool.tool_thickness {
    -webkit-appearance: none;
    max-width: 10em;
    height: 1.15em;
    background: var(--color-bg-lightdark-accent);
    border-radius: var(--border-radius-small);
    align-self: center;
    width: 0;
    flex: 1 1 10em
}

.editor__tools .tools__left .left__tool.tool_thickness:focus-within:focus-visible::-moz-range-thumb {
    filter: brightness(.75)
}

.editor__tools .tools__left .left__tool.tool_thickness:focus-within:focus-visible::-ms-thumb {
    filter: brightness(.75)
}

.editor__tools .tools__left .left__tool.tool_thickness:focus-within:focus-visible::-webkit-slider-thumb {
    filter: brightness(.75)
}

.editor__tools .tools__left .left__tool.tool_thickness::-moz-range-thumb {
    border: 0;
    background: var(--color-main);
    height: 160%;
    width: .9em;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    -moz-transition: var(--transition-main);
    transition: var(--transition-main)
}

.editor__tools .tools__left .left__tool.tool_thickness::-moz-range-thumb:hover {
    filter: brightness(.75)
}

.editor__tools .tools__left .left__tool.tool_thickness::-ms-thumb {
    border: 0;
    background: var(--color-main);
    height: 160%;
    width: .9em;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    -ms-transition: var(--transition-main);
    transition: var(--transition-main)
}

.editor__tools .tools__left .left__tool.tool_thickness::-ms-thumb:hover {
    filter: brightness(.75)
}

.editor__tools .tools__left .left__tool.tool_thickness::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 0;
    background: var(--color-main);
    height: 1.8em;
    width: .9em;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    -webkit-transition: var(--transition-main);
    transition: var(--transition-main)
}

.editor__tools .tools__left .left__tool.tool_thickness::-webkit-slider-thumb:hover {
    filter: brightness(.75)
}

.editor__tools .tools__right {
    gap: .25em
}

.editor__tools .tools__right .right__tool.tool_share {
    padding: var(--padding-button);
    font-size: var(--font-size-3);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-lightdark);
    transition: var(--transition-main);
    aspect-ratio: 1;
    padding: .25em
}

.editor__tools .tools__right .right__tool.tool_share svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.editor__tools .tools__right .right__tool.tool_share:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.editor__tools .tools__right .right__tool.tool_share * {
    z-index: 999
}

.editor__tools .tools__right .right__tool.tool_share:hover:before,
.editor__tools .tools__right .right__tool.tool_share:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.editor__tools .tools__right .right__tool.tool_done {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main)
}

.editor__tools .tools__right .right__tool.tool_done svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.editor__tools .tools__right .right__tool.tool_done:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.editor__tools .tools__right .right__tool.tool_done * {
    z-index: 999
}

.editor__tools .tools__right .right__tool.tool_done:hover:before,
.editor__tools .tools__right .right__tool.tool_done:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.editor__tools .tools__right .right__tool.tool_download {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main)
}

.editor__tools .tools__right .right__tool.tool_download svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.editor__tools .tools__right .right__tool.tool_download:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.editor__tools .tools__right .right__tool.tool_download * {
    z-index: 999
}

.editor__tools .tools__right .right__tool.tool_download:hover:before,
.editor__tools .tools__right .right__tool.tool_download:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.editor__tools .tools__right .right__tool.tool_download .tool__text {
    font-size: var(--font-size-5)
}

@media screen and (width < 600px) {
    .editor__tools .tools__right .right__tool.tool_download {
        padding: .5em;
        aspect-ratio: 1
    }

    .editor__tools .tools__right .right__tool.tool_download .tool__text {
        display: none
    }
}

.editor__tools .tools__right .right__tool.disabled {
    display: none
}

@media screen and (width < 600px) {
    .editor__tools .tools__right .right__tool {
        flex: 1 1 100%
    }
}

@keyframes editorBgStrokeAnimation {
    from {
        stroke-dashoffset: 99999
    }

    to {
        stroke-dashoffset: 0
    }
}

body {
    overflow-x: hidden;
    letter-spacing: normal !important
}

@media screen and (width < 650px) {
    .main-header__title {
        display: none
    }
}

.small-rating {
    margin-top: 0
}

.main-content {
    justify-content: center;
    gap: 2rem;
    margin-top: 0
}

.main-content.new-element .pages__page {
    cursor: url(../cursor.png), auto !important
}

@media screen and (width < 750px) {
    .main-content:has(.editor__control-area.active) {
        z-index: 999999
    }
}

.main-content[data-state=edit] .main-content__info .info__subtitle {
    display: none
}

.main-content[data-state=edit] .main-content__editor {
    display: grid
}

@media screen and (width < 750px) {
    .main-content[data-state=edit] .main-content__editor {
        display: flex;
        flex-direction: column
    }
}

.main-content[data-state=edit] .main-content__upload {
    display: none
}

.main-content__reviews-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-block);
    width: min(1400px, 100%);
    margin-inline: auto
}

.main-content__reviews-area .reviews-area__heading {
    text-align: center
}

.main-content__info {
    width: 100%;
    position: relative
}

.main-content__info .info__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: var(--font-size-2);
    text-align: center
}

.main-content__info .info__subtitle {
    font-size: var(--font-size-4);
    text-align: center;
    margin-inline: auto;
    width: min(100%, 90rem);
    font-weight: 500;
    opacity: .6;
    height: 5em
}

@media screen and (width < 550px) {
    .main-content__info .info__subtitle {
        height: 7em
    }
}

@media screen and (width < 370px) {
    .main-content__info .info__subtitle {
        height: 9em
    }
}

.main-content__editor {
    padding: 0;
    min-height: calc(100svh - 12.5em);
    width: 100%;
    margin-inline: auto;
    display: none;
    z-index: 3
}

@media screen and (width < 750px) {
    .main-content__editor {
        min-height: auto
    }

    .main-content__editor:has(.editor__control-area.active) .editor__top-control,
    .main-content__editor:has(.editor__control-area.active) .editor__bottom-control {
        z-index: 0 !important
    }
}

.main-content__editor .editor__wrapper {
    position: relative;
    gap: 2rem;
    width: 100vw;
    z-index: 3;
    display: flex
}

@media screen and (width>=750px) {
    .main-content__editor .editor__wrapper {
        translate: 0 -.1rem
    }

    .main-content__editor .editor__wrapper>*:nth-child(1) {
        flex: 2 1 25%;
        min-width: 25rem;
        max-width: 35rem
    }

    .main-content__editor .editor__wrapper>*:nth-child(2) {
        flex: 1 1 50%
    }

    .main-content__editor .editor__wrapper>*:nth-child(3) {
        flex: 2 1 25%;
        min-width: 25rem;
        max-width: 35rem
    }
}

@media screen and (width>=750px) and (width < 1000px) {
    .main-content__editor .editor__wrapper>*:nth-child(3) {
        flex-grow: 1
    }
}

.main-content__editor .editor__top-control,
.main-content__editor .editor__bottom-control {
    width: 100%;
    position: sticky;
    z-index: 99999;
    height: 6rem;
    top: 0
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control.editor__top-control .content__middle,
    .main-content__editor .editor__top-control.editor__top-control .right__document-size,
    .main-content__editor .editor__bottom-control.editor__top-control .content__middle,
    .main-content__editor .editor__bottom-control.editor__top-control .right__document-size {
        display: none !important
    }
}

.main-content__editor .editor__top-control.editor__bottom-control,
.main-content__editor .editor__bottom-control.editor__bottom-control {
    display: none;
    position: fixed;
    bottom: 0;
    top: auto;
    transition: var(--transition-main)
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control.editor__bottom-control,
    .main-content__editor .editor__bottom-control.editor__bottom-control {
        display: flex
    }
}

.main-content__editor .editor__top-control.editor__bottom-control.active,
.main-content__editor .editor__bottom-control.editor__bottom-control.active {
    translate: 0 100%
}

.main-content__editor .editor__top-control .top-control__content,
.main-content__editor .editor__top-control .bottom-control__content,
.main-content__editor .editor__bottom-control .top-control__content,
.main-content__editor .editor__bottom-control .bottom-control__content {
    width: 100%;
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    padding: .45rem 2rem;
    background: var(--color-bg-light);
    border: var(--border-main);
    z-index: 1;
    height: 6rem;
    gap: 1rem
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content,
    .main-content__editor .editor__top-control .bottom-control__content,
    .main-content__editor .editor__bottom-control .top-control__content,
    .main-content__editor .editor__bottom-control .bottom-control__content {
        grid-template-columns: 1fr 1fr
    }
}

.main-content__editor .editor__top-control .top-control__content>*,
.main-content__editor .editor__top-control .bottom-control__content>*,
.main-content__editor .editor__bottom-control .top-control__content>*,
.main-content__editor .editor__bottom-control .bottom-control__content>* {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 100%
}

.main-content__editor .editor__top-control .top-control__content .content__left,
.main-content__editor .editor__top-control .bottom-control__content .content__left,
.main-content__editor .editor__bottom-control .top-control__content .content__left,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left {
    justify-content: flex-start
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__logo,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__logo,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__logo,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__logo {
    font-size: var(--font-size-4)
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 2rem
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el {
    padding: .25em;
    font-size: var(--font-size-4);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    flex: 1;
    width: 2em;
    height: 100%
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el svg,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el svg,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el svg,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el:before,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:before,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el *,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el *,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el *,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el:hover:before,
.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el,
    .main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el,
    .main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el {
        font-size: var(--font-size-3)
    }
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el:not(:last-child)::after,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:not(:last-child)::after,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el:not(:last-child)::after,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;
    left: calc(100% + 1rem);
    width: 1px;
    height: 50%;
    background: var(--color-bg-dark);
    opacity: .15;
    pointer-events: none
}

.main-content__editor .editor__top-control .top-control__content .content__left .left__editor-elements .editor-elements__el.active,
.main-content__editor .editor__top-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el.active,
.main-content__editor .editor__bottom-control .top-control__content .content__left .left__editor-elements .editor-elements__el.active,
.main-content__editor .editor__bottom-control .bottom-control__content .content__left .left__editor-elements .editor-elements__el.active {
    background: var(--color-main);
    color: var(--color-text-light);
    fill: var(--color-text-light)
}

.main-content__editor .editor__top-control .top-control__content .content__middle,
.main-content__editor .editor__top-control .bottom-control__content .content__middle,
.main-content__editor .editor__bottom-control .top-control__content .content__middle,
.main-content__editor .editor__bottom-control .bottom-control__content .content__middle {
    justify-content: center
}

.main-content__editor .editor__top-control .top-control__content .middle__pages,
.main-content__editor .editor__top-control .top-control__content .left__pages,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages,
.main-content__editor .editor__top-control .bottom-control__content .left__pages,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages,
.main-content__editor .editor__bottom-control .top-control__content .left__pages,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    width: -moz-min-content;
    width: min-content;
    gap: 1em
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn {
    padding: .5em 1em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main)
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn svg,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn svg,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn svg,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn svg,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn svg,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn svg,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn svg,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn:before,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn:before,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn:before,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn:before,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn:before,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn:before,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn:before,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn *,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn *,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn *,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn *,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn *,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn *,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn *,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn:hover:before,
.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn:hover:before,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn[prev-page=""] svg,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn[prev-page=""] svg {
    rotate: 180deg
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn,
    .main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn,
    .main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn,
    .main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn,
    .main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn,
    .main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn,
    .main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn,
    .main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn {
        width: 2.5em;
        padding: .75em;
        aspect-ratio: 1
    }

    .main-content__editor .editor__top-control .top-control__content .middle__pages .pages__btn span,
    .main-content__editor .editor__top-control .top-control__content .left__pages .pages__btn span,
    .main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__btn span,
    .main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__btn span,
    .main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__btn span,
    .main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__btn span,
    .main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__btn span,
    .main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__btn span {
        display: none
    }
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info {
    display: flex;
    align-items: stretch;
    gap: .4em
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info>span,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info>span,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info>span,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info>span,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info>span,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info>span,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info>span,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info>span {
    display: flex;
    align-items: center;
    justify-content: center
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info .page-info__current,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info .page-info__current,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info .page-info__current,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info .page-info__current,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info .page-info__current,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info .page-info__current,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info .page-info__current,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info .page-info__current {
    outline: transparent;
    border: 0;
    transition: var(--transition-main);
    display: inline;
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: 0 .15em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    width: 2em;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info .page-info__current::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info .page-info__current::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info .page-info__current::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.main-content__editor .editor__top-control .top-control__content .middle__pages .pages__page-info span:last-child,
.main-content__editor .editor__top-control .top-control__content .left__pages .pages__page-info span:last-child,
.main-content__editor .editor__top-control .bottom-control__content .middle__pages .pages__page-info span:last-child,
.main-content__editor .editor__top-control .bottom-control__content .left__pages .pages__page-info span:last-child,
.main-content__editor .editor__bottom-control .top-control__content .middle__pages .pages__page-info span:last-child,
.main-content__editor .editor__bottom-control .top-control__content .left__pages .pages__page-info span:last-child,
.main-content__editor .editor__bottom-control .bottom-control__content .middle__pages .pages__page-info span:last-child,
.main-content__editor .editor__bottom-control .bottom-control__content .left__pages .pages__page-info span:last-child {
    padding: 0 .15em;
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: 0 .15em;
    width: 2em;
    text-align: center;
    font-size: var(--font-size-5)
}

.main-content__editor .editor__top-control .top-control__content .content__right,
.main-content__editor .editor__top-control .bottom-control__content .content__right,
.main-content__editor .editor__bottom-control .top-control__content .content__right,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right {
    justify-content: flex-end
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools {
    padding: .5em 1em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: #4682b4;
    transition: var(--transition-main);
    display: none;
    padding: .75em 4em
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools svg,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools svg,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools svg,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools *,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools *,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools *,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools {
        display: flex
    }
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    position: relative
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn {
    padding: .25em;
    font-size: var(--font-size-4);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    height: 100%;
    width: 2em
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn svg,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn svg,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn svg,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn *,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn *,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn *,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn:hover:before,
.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__resize-btn:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__resize-btn:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__resize-btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__value,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__value,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__value,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__value {
    outline: transparent;
    border: 0;
    transition: var(--transition-main);
    display: inline;
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: .25em .15em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    width: 4em;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__value::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__value::-webkit-inner-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__value::-webkit-outer-spin-button,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__value::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__value::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__value::-webkit-inner-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__value::-webkit-outer-spin-button,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

@media screen and (width < 400px) {

    .main-content__editor .editor__top-control .top-control__content .content__right .right__document-size .document-size__value,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__document-size .document-size__value,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__document-size .document-size__value,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__document-size .document-size__value {
        display: none
    }
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document {
    padding: .5em 1em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: #4682b4;
    transition: var(--transition-main);
    white-space: nowrap
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document svg,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document svg,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document svg,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document *,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document *,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document *,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document:hover:before,
.main-content__editor .editor__top-control .top-control__content .content__right .right__new-document:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content .content__right .right__new-document,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__new-document,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__new-document,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__new-document {
        padding: .75em
    }
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools {
    padding: .75em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: #4682b4;
    transition: var(--transition-main);
    white-space: nowrap;
    display: none
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools svg,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools svg,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools svg,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools *,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools *,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools *,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools * {
    z-index: 999
}

.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__top-control .top-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools:focus-within:focus-visible:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:hover:before,
.main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {

    .main-content__editor .editor__top-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools {
        display: flex
    }
}

@media screen and (width < 370px) {

    .main-content__editor .editor__top-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools {
        width: 2.5em;
        padding: .75em;
        aspect-ratio: 1
    }

    .main-content__editor .editor__top-control .top-control__content .content__right .right__tools span,
    .main-content__editor .editor__top-control .bottom-control__content .content__right .right__tools span,
    .main-content__editor .editor__bottom-control .top-control__content .content__right .right__tools span,
    .main-content__editor .editor__bottom-control .bottom-control__content .content__right .right__tools span {
        display: none
    }
}

.main-content__editor .editor__structure-area {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    background: var(--color-bg-light);
    border-radius: 0 0 var(--border-radius-main)0;
    border-right: var(--border-main);
    padding: .75em;
    overflow-y: hidden;
    height: calc(100svh - 6rem + .1rem);
    transition: var(--transition-main);
    padding-top: 4rem
}

@media screen and (width < 1000px) {
    .main-content__editor .editor__structure-area {
        display: none
    }
}

.main-content__editor .editor__structure-area .structure-area__title {
    text-align: center
}

.main-content__editor .editor__structure-area .structure-area__list {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
    overflow-y: auto;
    padding: 2px
}

.main-content__editor .editor__structure-area .structure-area__list .list__el {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    transition: var(--transition-main);
    border-radius: var(--border-radius-small);
    z-index: 0
}

.main-content__editor .editor__structure-area .structure-area__list .list__el:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-bg-dark);
    opacity: .15;
    z-index: 100;
    transition: var(--transition-main)
}

.main-content__editor .editor__structure-area .structure-area__list .list__el:hover,
.main-content__editor .editor__structure-area .structure-area__list .list__el:focus-within {
    background: var(--color-bg-lightdark)
}

.main-content__editor .editor__structure-area .structure-area__list .list__el:hover .el__remove-btn,
.main-content__editor .editor__structure-area .structure-area__list .list__el:focus-within .el__remove-btn {
    opacity: 1;
    pointer-events: all
}

.main-content__editor .editor__structure-area .structure-area__list .list__el:hover::after,
.main-content__editor .editor__structure-area .structure-area__list .list__el:focus-within::after {
    opacity: 0
}

.main-content__editor .editor__structure-area .structure-area__list .list__el.active {
    outline: 1px solid var(--color-main)
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info {
    padding: 1em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: transparent;
    transition: var(--transition-main);
    flex-grow: 1;
    display: grid;
    grid-template-columns: 3em auto;
    text-align: left;
    justify-content: flex-start;
    font-weight: 500
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info * {
    z-index: 999
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info:hover:before,
.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info .info__icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__info .info__icon svg {
    font-size: var(--font-size-4)
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn {
    padding: 1em 1em 1em 0;
    font-size: var(--font-size-4);
    color: tomato;
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: tomato;
    background: transparent;
    transition: var(--transition-main);
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn * {
    z-index: 999
}

.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn:hover:before,
.main-content__editor .editor__structure-area .structure-area__list .list__el .el__remove-btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__document-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin-top: 2rem;
    width: 100%
}

@media screen and (width < 1000px) {
    .main-content__editor .editor__document-area {
        margin-left: 2rem
    }
}

@media screen and (width < 750px) {
    .main-content__editor .editor__document-area {
        margin-inline: 2rem
    }
}

.main-content__editor .editor__document-area .document-area__document {
    position: relative;
    width: 100%;
    height: 100%;
    padding: .5rem;
    overflow: auto
}

.main-content__editor .editor__document-area .document-area__x-scrollbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5em;
    overflow-x: auto
}

.main-content__editor .editor__document-area .document-area__x-scrollbar .x-scrollbar__thumb {
    width: 100%;
    height: 20px
}

.main-content__editor .editor__control-area {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    background: var(--color-bg-light);
    border-radius: 0 0 0 var(--border-radius-main);
    border-left: var(--border-main);
    padding: .75em;
    overflow-y: hidden;
    height: calc(100svh - 6rem + .1rem);
    transition: var(--transition-main);
    padding-top: 4rem
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area {
        padding-top: .75em
    }

    .main-content__editor .editor__control-area,
    .main-content__editor .editor__control-area * {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area {
        position: fixed;
        width: max(80vw, 37.5rem);
        height: 90dvh;
        top: 5dvh;
        border-radius: var(--border-radius-main)0 0 var(--border-radius-main);
        flex-direction: column;
        box-shadow: 0 -5dvh 0 100svh rgba(0, 0, 0, 0);
        right: -140vw;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        pointer-events: none;
        z-index: 99999;
        max-width: 100%;
        border: var(--border-main)
    }

    .main-content__editor .editor__control-area.active {
        right: 0;
        box-shadow: 0 -5dvh 0 100svh rgba(0, 0, 0, .75);
        -webkit-user-select: all;
        -moz-user-select: all;
        user-select: all;
        pointer-events: all
    }
}

.main-content__editor .editor__control-area .control-area__nav-close {
    padding: .5em;
    font-size: var(--font-size-3);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: none;
    transition: var(--transition-main);
    display: none;
    margin-left: auto
}

.main-content__editor .editor__control-area .control-area__nav-close svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__nav-close:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__control-area .control-area__nav-close * {
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__nav-close:hover:before,
.main-content__editor .editor__control-area .control-area__nav-close:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__nav-close {
        display: flex
    }
}

.main-content__editor .editor__control-area .control-area__content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto
}

.main-content__editor .editor__control-area .control-area__content[data-state=signature] .signature-element-wrapper,
.main-content__editor .editor__control-area .control-area__content[data-state=text] .text-element-wrapper,
.main-content__editor .editor__control-area .control-area__content[data-state=datetime] .datetime-element-wrapper {
    display: flex
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper {
    position: relative;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    display: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__title {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-bg-dark);
    opacity: .15
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__title {
    font-size: var(--font-size-5);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__title {
        font-size: var(--font-size-4)
    }
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__input {
    outline: transparent;
    border: 0;
    transition: var(--transition-main);
    display: inline;
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: .3em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    width: 4em;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__input {
        font-size: var(--font-size-4)
    }
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__input::-webkit-outer-spin-button,
.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__select {
    background: none;
    border: 0;
    outline: transparent;
    padding: 0;
    font-size: var(--font-size-5);
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    text-align: right
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__select {
        font-size: var(--font-size-4)
    }
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type {
    display: flex;
    align-items: stretch;
    gap: .5rem
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el {
    padding: .5em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    cursor: pointer;
    width: 2em;
    aspect-ratio: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el * {
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el:hover:before,
.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el {
        font-size: var(--font-size-4);
        padding: 1em;
        width: 2.5em
    }
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el:has(input:checked) {
    background: var(--color-bg-lightdark)
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el:has(input:checked)::before {
    display: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type .type__el input {
    display: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type-based-input {
    outline: transparent;
    border: 0;
    transition: var(--transition-main);
    display: none;
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: 0 .15em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    width: 2em;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type-based-input {
        font-size: var(--font-size-4)
    }
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type-based-input::-webkit-outer-spin-button,
.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type-based-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper .wrapper__group .group__setting-field .setting-field__type-based-input.show {
    display: inline
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    overflow-y: hidden
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list {
    position: relative;
    width: 100%;
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    transition: var(--transition-main)
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list .list__el {
    width: calc(100% - 16px);
    margin: 8px;
    aspect-ratio: 2/1;
    position: relative;
    border: var(--border-main);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-main);
    transition: var(--transition-main)
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list .list__el.active {
    border: 2px solid var(--color-main)
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list .list__el:not(.active):hover {
    border: 1px solid var(--color-main)
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list .list__el button {
    background: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__list .list__el .el__img {
    position: absolute;
    text-align: center;
    width: 60%;
    height: auto;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__more {
    color: var(--color-text-light);
    font-size: var(--font-size-4);
    border-width: initial;
    border-style: none;
    border-color: initial;
    text-align: center;
    border: 0;
    font-size: 13px;
    font-weight: 900;
    padding: .5em .75em;
    position: relative;
    z-index: 0;
    width: calc(100% - 4px);
    border-radius: 5px !important;
    margin-bottom: 1.5rem;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__more:before {
    content: "";
    background: linear-gradient(45deg, #e45cff, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #e45cff);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: gMove 20s linear infinite;
    transition: opactiy .3s ease-in-out;
    border-radius: 4px
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__more:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: rgba(17, 17, 17, .6784313725);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background 300ms ease
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__more:hover,
.main-content__editor .editor__control-area .control-area__content .content__wrapper.signature-element-wrapper .wrapper__last-signatures .last-signatures__more:focus-within:focus-visible {
    text-decoration: underline
}

.main-content__editor .editor__control-area .control-area__content .content__wrapper.datetime-element-wrapper *[name=value-type][value=custom-date]~.setting-field__type-based-input {
    display: inline-block
}

.main-content__editor .editor__control-area .control-area__wrapper {
    position: relative;
    width: 100%;
    margin-top: auto
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__wrapper {
        flex: 1 1 25%
    }
}

.main-content__editor .editor__control-area .control-area__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.main-content__editor .editor__control-area .control-area__info .info__el:has(b:empty) {
    display: none
}

.main-content__editor .editor__control-area .control-area__output-btns {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1em
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group.hidden {
    display: none
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__output-btns .output-btns__group {
        flex-direction: column;
        align-items: stretch
    }
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn {
    padding: .5em 2em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-lightdark);
    transition: var(--transition-main);
    flex: 1;
    min-width: -moz-fit-content;
    min-width: fit-content
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn * {
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn:hover:before,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__output-btns .output-btns__group .group__btn {
        padding-block: .75em
    }
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    width: 100%;
    color: var(--color-text-light);
    background: var(--color-main);
    height: 2.5em;
    z-index: 1;
    border: var(--border-main);
    box-shadow: var(--box-shadow-main);
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn * {
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn:hover:before,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn .download-btn__variant {
    display: flex;
    align-items: center;
    gap: .5em;
    position: absolute;
    transition: var(--transition-slow);
    scale: 0;
    opacity: 0;
    transform-origin: center;
    z-index: 1
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn .download-btn__variant .variant__icon,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn .download-btn__variant svg {
    width: 1.25em;
    height: auto;
    fill: var(--color-text-light);
    color: var(--color-text-light)
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn:not(.loading) .variant_download {
    scale: 1;
    opacity: 1
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: visible;
    cursor: progress
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading .variant_loading {
    scale: 1;
    opacity: 1;
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading .variant_loading .variant__icon,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading .variant_loading svg {
    animation: spin infinite 1s
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading:hover::before,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__download-btn.loading:focus-visible:focus-within::before {
    filter: none !important
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main)
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn * {
    z-index: 999
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn:hover:before,
.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn b {
    color: var(--color-text);
    font-weight: 800
}

@media screen and (width < 750px) {
    .main-content__editor .editor__control-area .control-area__output-btns .output-btns__btn {
        padding-block: .75em
    }
}

.main-content__upload .upload__area {
    height: 30rem;
    position: relative;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    padding: var(--padding-block);
    /*box-shadow: var(--box-shadow-main);*/
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem
}

@media screen and (width < 500px) {
    .main-content__upload .upload__area {
        padding: 3rem;
        height: 25rem
    }
}

.main-content__upload .upload__area.processing {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.main-content__upload .upload__area.processing .area__title {
    opacity: .4
}

.main-content__upload .upload__area.processing::before {
    opacity: 0
}

.main-content__upload .upload__area.processing .area__file-btn,
.main-content__upload .upload__area.processing .area__title,
.main-content__upload .upload__area.processing .area__subtitle {
    display: none
}

.main-content__upload .upload__area:not(.processing) .error .area__error {
    display: block
}

.main-content__upload .upload__area.dz-drag-hover {
    outline: 2px solid var(--color-main);
    background: var(--color-main);
    color: var(--color-text-light)
}

.main-content__upload .upload__area.dz-drag-hover .area__title {
    margin-top: 2rem
}

.main-content__upload .upload__area.dz-drag-hover::before {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='white' stroke-width='1' stroke-dasharray='18' stroke-dashoffset='27' stroke-linecap='butt'/%3e%3c/svg%3e")
}

.main-content__upload .upload__area.dz-drag-hover .area__file-btn {
    display: none
}

.main-content__upload .upload__area::before {
    content: "";
    position: absolute;
    left: 3rem;
    top: 3rem;
    width: calc(100% - 6rem);
    height: calc(100% - 6rem);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='black' stroke-width='1' stroke-dasharray='18' stroke-dashoffset='27' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: var(--border-radius-main);
    opacity: .5;
    transition: var(--transition-main)
}

@media screen and (width < 500px) {
    .main-content__upload .upload__area::before {
        left: 1.5rem;
        top: 1.5rem;
        width: calc(100% - 3rem);
        height: calc(100% - 3rem)
    }
}

.main-content__upload .upload__area .area__title {
    font-size: var(--font-size-2);
    text-align: center;
    transition: var(--transition-main);
    font-weight: 800
}

.main-content__upload .upload__area .area__subtitle {
    text-align: center;
    opacity: .6;
    font-weight: 500;
    font-size: var(--font-size-4);
    transition: var(--transition-main)
}

.main-content__upload .upload__area .area__error {
    display: none;
    color: var(--color-text);
    padding: .75em;
    background: tomato;
    border-radius: var(--border-radius-main);
    margin-block: 1em;
    text-align: center
}

.main-content__upload .upload__area .area__uploads {
    display: flex;
    align-items: center
}

.main-content__upload .upload__area .area__file-btn {
    padding: .5em 4em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    margin-top: auto;
    flex-shrink: 0
}

.main-content__upload .upload__area .area__file-btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.main-content__upload .upload__area .area__file-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.main-content__upload .upload__area .area__file-btn * {
    z-index: 999
}

.main-content__upload .upload__area .area__file-btn:hover:before,
.main-content__upload .upload__area .area__file-btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 500px) {
    .main-content__upload .upload__area .area__file-btn {
        width: 100%;
        padding-block: .75em
    }
}

.main-content__upload .upload__area .dz-preview {
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-main);
    padding: 2em;
    font-size: var(--font-size-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    width: 15rem;
    min-height: 20rem;
    justify-content: center;
    color: var(--color-text);
    position: relative;
    width: 100%;
    height: 100%
}

@media screen and (width < 600px) {
    .main-content__upload .upload__area .dz-preview {
        padding: 1em
    }
}

.main-content__upload .upload__area .dz-preview .dz-image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    width: auto;
    height: 7em;
    border-radius: var(--border-radius-main)
}

@media screen and (width < 750px) {
    .main-content__upload .upload__area .dz-preview .dz-image {
        height: 4em
    }
}

.main-content__upload .upload__area .dz-preview .dz-details {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2em;
    width: 100%
}

@media screen and (width < 600px) {
    .main-content__upload .upload__area .dz-preview .dz-details {
        gap: 1em
    }
}

.main-content__upload .upload__area .dz-preview .dz-details .dz-info {
    display: flex;
    flex-direction: column;
    gap: .5em;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.main-content__upload .upload__area .dz-preview .dz-details .dz-info .dz-size {
    opacity: .6;
    font-size: var(--font-size-4)
}

@media screen and (width < 600px) {
    .main-content__upload .upload__area .dz-preview .dz-details .dz-info .dz-size {
        font-size: var(--font-size-5)
    }
}

.main-content__upload .upload__area .dz-preview .dz-details .dz-info .dz-filename {
    font-size: var(--font-size-3);
    color: var(--color-main);
    font-weight: 700;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (width < 600px) {
    .main-content__upload .upload__area .dz-preview .dz-details .dz-info .dz-filename {
        font-size: var(--font-size-4)
    }
}

.main-content__upload .upload__area .dz-preview .dz-progress {
    transition: opacity .2s linear;
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: relative;
    height: 16px;
    width: 100%;
    background: rgba(255, 255, 255, .9);
    scale: 1;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0
}

.main-content__upload .upload__area .dz-preview .dz-progress .dz-upload {
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out
}

.main-content__upload .upload__area .dz-preview .dz-error-message,
.main-content__upload .upload__area .dz-preview .dz-success-mark,
.main-content__upload .upload__area .dz-preview .dz-error-mark {
    display: none
}

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

.main-content__instruction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-block)
}

.main-content__instruction .instruction__heading {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: center;
    margin-block: 1em
}

.main-content__instruction .instruction__block {
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    box-shadow: var(--box-shadow-main);
    padding: var(--padding-block);
    width: 100%
}

.main-content__instruction .instruction__block .block__steps {
    display: flex;
    flex-direction: column;
    gap: 1.5em
}

@media screen and (width < 500px) {
    .main-content__instruction .instruction__block .block__steps {
        gap: .75em
    }
}

.main-content__instruction .instruction__block .block__steps .steps__step {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 3fr;
    align-items: center;
    gap: min(20em, 15%);
    padding: 4rem
}

.main-content__instruction .instruction__block .block__steps .steps__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='black' stroke-width='1' stroke-dasharray='18' stroke-dashoffset='27' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: var(--border-radius-main);
    opacity: .5;
    transition: var(--transition-main)
}

@media screen and (width < 500px) {
    .main-content__instruction .instruction__block .block__steps .steps__step::before {
        left: 1.5rem;
        top: 1.5rem;
        width: calc(100% - 3rem);
        height: calc(100% - 3rem)
    }
}

.main-content__instruction .instruction__block .block__steps .steps__step:first-of-type {
    margin-top: 1em
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25em;
    height: 100%;
    z-index: 1
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__index {
    position: absolute;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-0);
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    border-radius: 9999px;
    background: var(--color-bg-lightdark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    top: -1.5rem;
    left: 0
}

@media screen and (width < 750px) {
    .main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__index {
        left: 50%;
        translate: -50% 0
    }
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__index::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0, #fff 14.5%, rgba(255, 255, 255, 0)100%);
    border-radius: 9999px;
    z-index: 2;
    transition: var(--transition-main)
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: 600;
    z-index: 2
}

@media screen and (width < 750px) {
    .main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__title {
        margin-top: calc(6em - 5rem)
    }
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__description {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: var(--line-height-main);
    font-weight: 400;
    z-index: 2
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__right {
    position: relative;
    min-width: 15rem;
    z-index: 2
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__right::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0)85%, var(--color-bg-light)100%);
    right: 0;
    top: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.main-content__instruction .instruction__block .block__steps .steps__step .step__right .right__img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    height: auto;
    border-radius: var(--border-radius-main);
    width: 100%;
    z-index: 2
}

@media screen and (width < 750px) {
    .main-content__instruction .instruction__block .block__steps .steps__step .step__right .right__img {
        height: 300px;
        width: auto;
        margin: 0 auto
    }
}

@media screen and (width < 480px) {
    .main-content__instruction .instruction__block .block__steps .steps__step .step__right .right__img {
        height: auto;
        width: auto;
        max-width: 100%
    }
}

@media screen and (width < 750px) {
    .main-content__instruction .instruction__block .block__steps .steps__step {
        gap: 1em
    }
}

@media screen and (width < 750px) {
    .main-content__instruction .instruction__block .block__steps .steps__step {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto);
        gap: 1em
    }

    .main-content__instruction .instruction__block .block__steps .steps__step .step__left {
        align-items: center
    }

    .main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__index,
    .main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__title,
    .main-content__instruction .instruction__block .block__steps .steps__step .step__left .left__description {
        text-align: center
    }

    .main-content__instruction .instruction__block .block__steps .steps__step .step__img {
        width: 100%
    }
}

.main-content__about-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-block)
}

.main-content__about-area .about__heading {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: center
}

.main-content__faq-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-block)
}

.main-content__faq-area .faq-area__heading {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: center
}

.document__pages {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.25em;
    z-index: 1;
    width: 100%;
    scale: calc(var(--scale-index, 100) / 100 * 100%);
    transform-origin: left top;
    margin-inline: auto
}

.document__pages .small-rating {
    margin-top: 0
}

.page-download {
    position: fixed;
    top: 0;
    left: 100vw;
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.page-download .pages__page,
.document__pages .pages__page {
    display: grid;
    z-index: 1;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    transform-origin: center top;
    width: 100%
}

.page-download .pages__page .page__doc,
.document__pages .pages__page .page__doc {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    width: 100%;
    height: auto;
    box-shadow: var(--box-shadow-main);
    border-radius: var(--border-radius-main);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    background: white
}

.page-download .pages__page .page__doc.docx,
.document__pages .pages__page .page__doc.docx {
    display: flex
}

.page-download .pages__page .page__docx,
.document__pages .pages__page .page__docx {
    width: 100%;
    height: auto;
    box-shadow: var(--box-shadow-main);
    border-radius: var(--border-radius-main);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.page-download .pages__page .page__content,
.document__pages .pages__page .page__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden
}

.page-download .pages__page .page__content:has(.doc-element.active.resizing) .wrapper__tip,
.document__pages .pages__page .page__content:has(.doc-element.active.resizing) .wrapper__tip {
    opacity: 1
}

.page-download .pages__page .page__content .content__wrapper,
.document__pages .pages__page .page__content .content__wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.page-download .pages__page .page__content .wrapper__tip,
.document__pages .pages__page .page__content .wrapper__tip {
    position: absolute;
    top: 1em;
    left: 50%;
    z-index: 99;
    background: var(--color-bg-lightdark);
    border: 2px solid var(--color-main);
    border-radius: var(--border-radius-main);
    padding: .5em;
    color: var(--color-text);
    text-align: center;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    translate: -50% 0;
    font-size: var(--font-size-6);
    white-space: nowrap
}

@media screen and (width < 600px) {

    .page-download .pages__page .page__content .wrapper__tip,
    .document__pages .pages__page .page__content .wrapper__tip {
        display: none !important
    }
}

.page-download .pages__page .page__content .doc-element,
.document__pages .pages__page .page__content .doc-element {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: none;
    width: 30%;
    height: auto;
    top: 50%;
    left: 50%;
    z-index: 1
}

.page-download .pages__page .page__content .doc-element::after,
.page-download .pages__page .page__content .doc-element::before,
.document__pages .pages__page .page__content .doc-element::after,
.document__pages .pages__page .page__content .doc-element::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    top: 100%;
    left: 100%;
    background: var(--color-main);
    z-index: 999;
    translate: -50% -50%;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.page-download .pages__page .page__content .doc-element::after,
.document__pages .pages__page .page__content .doc-element::after {
    top: 100%;
    left: 100%
}

.page-download .pages__page .page__content .doc-element.active,
.page-download .pages__page .page__content .doc-element:hover,
.page-download .pages__page .page__content .doc-element:focus-within,
.document__pages .pages__page .page__content .doc-element.active,
.document__pages .pages__page .page__content .doc-element:hover,
.document__pages .pages__page .page__content .doc-element:focus-within {
    outline: 1px solid var(--color-text)
}

.page-download .pages__page .page__content .doc-element.active .doc-element__rotation-handle,
.page-download .pages__page .page__content .doc-element.active .doc-element__top-control,
.page-download .pages__page .page__content .doc-element.active::after,
.page-download .pages__page .page__content .doc-element.active::before,
.page-download .pages__page .page__content .doc-element:hover .doc-element__rotation-handle,
.page-download .pages__page .page__content .doc-element:hover .doc-element__top-control,
.page-download .pages__page .page__content .doc-element:hover::after,
.page-download .pages__page .page__content .doc-element:hover::before,
.page-download .pages__page .page__content .doc-element:focus-within .doc-element__rotation-handle,
.page-download .pages__page .page__content .doc-element:focus-within .doc-element__top-control,
.page-download .pages__page .page__content .doc-element:focus-within::after,
.page-download .pages__page .page__content .doc-element:focus-within::before,
.document__pages .pages__page .page__content .doc-element.active .doc-element__rotation-handle,
.document__pages .pages__page .page__content .doc-element.active .doc-element__top-control,
.document__pages .pages__page .page__content .doc-element.active::after,
.document__pages .pages__page .page__content .doc-element.active::before,
.document__pages .pages__page .page__content .doc-element:hover .doc-element__rotation-handle,
.document__pages .pages__page .page__content .doc-element:hover .doc-element__top-control,
.document__pages .pages__page .page__content .doc-element:hover::after,
.document__pages .pages__page .page__content .doc-element:hover::before,
.document__pages .pages__page .page__content .doc-element:focus-within .doc-element__rotation-handle,
.document__pages .pages__page .page__content .doc-element:focus-within .doc-element__top-control,
.document__pages .pages__page .page__content .doc-element:focus-within::after,
.document__pages .pages__page .page__content .doc-element:focus-within::before {
    opacity: 1;
    pointer-events: all
}

.page-download .pages__page .page__content .doc-element.active .wrapper__img,
.page-download .pages__page .page__content .doc-element:hover .wrapper__img,
.page-download .pages__page .page__content .doc-element:focus-within .wrapper__img,
.document__pages .pages__page .page__content .doc-element.active .wrapper__img,
.document__pages .pages__page .page__content .doc-element:hover .wrapper__img,
.document__pages .pages__page .page__content .doc-element:focus-within .wrapper__img {
    outline: 1px solid var(--color-main)
}

.page-download .pages__page .page__content .doc-element__top-control,
.document__pages .pages__page .page__content .doc-element__top-control {
    position: absolute;
    top: 0;
    right: 0;
    translate: 20% -60%;
    display: flex;
    gap: .5rem;
    z-index: 9999;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

@media screen and (width < 750px) {

    .page-download .pages__page .page__content .doc-element__top-control,
    .document__pages .pages__page .page__content .doc-element__top-control {
        translate: 20% -100%
    }
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn {
    padding: .25em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-delete);
    transition: var(--transition-main);
    border-radius: 9999px;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn svg,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn:before,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn *,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn * {
    z-index: 999
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn:hover:before,
.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn:focus-within:focus-visible:before,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn:hover:before,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

@media screen and (width < 750px) {

    .page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn,
    .document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn {
        font-size: var(--font-size-4)
    }
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn.edit,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn.edit {
    background: var(--color-main)
}

.page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn.settings,
.document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn.settings {
    background: var(--color-bg-lightdark);
    color: var(--color-text);
    fill: var(--color-text)
}

@media screen and (width>750px) {

    .page-download .pages__page .page__content .doc-element__top-control .top-control__top-btn.settings,
    .document__pages .pages__page .page__content .doc-element__top-control .top-control__top-btn.settings {
        display: none
    }
}

.page-download .pages__page .page__content .doc-element__rotation-handle,
.document__pages .pages__page .page__content .doc-element__rotation-handle {
    position: absolute;
    top: calc(100% + 1.5rem);
    left: calc(100% + 1.5rem);
    translate: -50% -50%;
    padding: 3px 4px;
    display: table;
    margin-inline: auto;
    background-color: var(--color-main);
    border-radius: 10rem;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor: grab !important;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 99999
}

.page-download .pages__page .page__content .doc-element__wrapper,
.document__pages .pages__page .page__content .doc-element__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1
}

.page-download .pages__page .page__content .doc-element__wrapper .wrapper__text,
.document__pages .pages__page .page__content .doc-element__wrapper .wrapper__text {
    font-family: var(--option-font, "Nunito"), sans-serif;
    font-size: var(--option-font-size, 20px);
    text-align: var(--option-align, left);
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word
}

.page-download .pages__page .page__content .doc-element__wrapper .wrapper__text span,
.document__pages .pages__page .page__content .doc-element__wrapper .wrapper__text span {
    font-family: var(--option-font, "Nunito"), sans-serif
}

.page-download .pages__page .page__content .doc-element__wrapper .wrapper__text[contenteditable=true],
.document__pages .pages__page .page__content .doc-element__wrapper .wrapper__text[contenteditable=true] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    cursor: text
}

.page-download .pages__page .page__content .doc-element__wrapper .wrapper__img,
.document__pages .pages__page .page__content .doc-element__wrapper .wrapper__img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: none
}

.page-download .pages__page .page__content .doc-element.datetime .wrapper__text,
.document__pages .pages__page .page__content .doc-element.datetime .wrapper__text {
    font-weight: var(--option-font-weight, normal);
    font-style: var(--option-font-style, normal);
    -webkit-text-decoration: var(--option-text-decoration, none);
    text-decoration: var(--option-text-decoration, none)
}

.page-download .pages__page .page__content .doc-element.edit,
.document__pages .pages__page .page__content .doc-element.edit {
    cursor: text !important
}

.page-download .pages__page .page__doc {
    width: auto;
    height: auto;
    border-radius: 0
}

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 1
    }

    100% {
        width: 150px;
        height: 150px;
        opacity: 0
    }
}

@keyframes gMove {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }

    100% {
        background-position: 0 0
    }
}

@keyframes spin {
    from {
        rotate: 0
    }

    to {
        rotate: 360deg
    }
}