#epicforms {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.4;
    background-color: #f3f4f8;
    font-family: "Roboto", sans-serif;

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    ul[class],
    ol[class] {
        padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul[class],
    ol[class],
    li,
    figure,
    figcaption,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    ul[class],
    ol[class] {
        list-style: none;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    article > * + * {
        margin-top: 1em;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    a {
        text-decoration: none;
    }

    // WordPress core draws a blue focus frame on every admin <a> (wp-admin/css/common.css).
    // Drop it for pointer interactions only - :focus-visible keeps it for keyboard users.
    a:focus:not(:focus-visible) {
        box-shadow: none;
        border-radius: 0;
    }

    .header-wix {
        width: 100%;
        height: 48px;
        background-color: grey;
    }

    .sidebar-wix {
        background-color: #23263c;
        width: 228px;
        height: 94.4vh;
        position: relative;
        padding: 20px;
    }

    .sidebar-wix a {
        color: #fff;
        display: block;
    }

    .wrapper-wix {
        display: flex;
    }

    * {
        pointer-events: fill;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        position: relative;
        flex: 1;
        background-color: #f3f4f8;
    }

    .wrapper_white {
        background-color: #fff;
    }

    .wrapper_hidden {
        overflow-x: hidden;
    }

    .wrapper_editor {
        min-height: 100vh;
    }

    .wrapper-content {
        flex: 1 0 auto;
        width: 1012px;
        margin: auto;
        padding: 35px 15px 0;
    }

    .show {
        display: block !important;
    }

    .show-flex {
        display: flex !important;
    }

    .choose {
        background-color: #e1e2e8;
    }

    .flex {
        display: flex;
    }

    .block {
        background-color: #fff;
        padding: 26px 30px;
        border-radius: 5px;
        font-size: 12px;
        color: #8a8c94;
    }

    .block_no-b-p {
        padding-bottom: 0;
    }

    .block_tab {
        display: flex;
        justify-content: space-between;
        margin: 0 -15px 9px;
    }

    .block_grey {
        background-color: #f9f9fb;
    }

    .block__row {
        display: flex;
        margin-top: 10px;
    }

    .block__item {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between;
    }

    .block__item_row-reverse {
        position: relative;
        flex-direction: row-reverse;
        line-height: 1.3;
    }

    .block__link {
        display: block;
        margin-top: 8px;
        border: 2px solid transparent;
        border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .block__link:first-child {
        margin-top: 0;
    }

    .block__link:hover {
        border-color: #e9ebec;
    }

    .block__title {
        display: block;
        max-width: 365px;
        margin-bottom: 4px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #3a3d50;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .block__title:hover {
        color: #fd544b;
    }

    .block__subtitle {
        font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        letter-spacing: 0.5px;
    }

    .block__charts {
        display: flex;
        margin-top: 30px;
    }

    .block__links {
        margin-top: 30px;
    }

    .block__edit-show {
        cursor: pointer;
    }

    .block__edit-show:hover .block__edit {
        display: flex;
    }

    .block__edit-show:hover .btn__more svg {
        fill: #000 !important;
    }

    .block__change-info-list {
        display: flex;
        height: 54px;
        align-items: center;
        cursor: pointer;
    }

    .block__change-info-list:hover + .block__charts {
        display: none;
    }

    .block__change-info-list:hover .block__links-edit {
        display: flex;
    }

    .block__change-info-list:hover .btn__more svg {
        fill: #000 !important;
    }

    .block__edit {
        flex-direction: column;
        position: absolute;
        padding-top: 10px;
        right: 0;
    }

    .btn__more_vert:hover + .block__charts {
        display: none;
    }

    .btn__more_vert:hover + .block__charts + .block__links-edit {
        display: flex;
    }

    .forms-list .block__charts {
        margin-top: 0;
    }

    .forms-list .block__title {
        max-width: 460px;
    }

    .forms-list .block__links {
        position: relative;
        margin-top: 0;
        margin-right: 35px;
        padding: 8px 0;
    }

    .forms-list .block__links:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 24px;
        background-color: #edeff5;
        top: 50%;
        right: -16px;
        transform: translateY(-50%);
    }

    .forms-list .block__edit {
        display: block;
        position: relative;
        margin-top: 0;
        padding: 8px 0;
    }

    .forms-list .block__edit_test {
        display: none;
    }

    .forms-list .block__links-edit {
        display: none;
        position: absolute;
        right: 0;
        width: 465px;
        height: 54px;
    }

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

    .row-flex__item {
        position: relative;
    }

    .block-border {
        margin-bottom: 6px;
        border: 2px solid transparent;
        border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .block-border:hover {
        border-color: #e9ebec;
    }

    .header {
        position: relative;
        display: flex;
        justify-content: space-between;
        background-color: #393d56;
        align-items: center;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        z-index: 60;
    }

    .header_editor {
        padding-right: 22px;
    }

    .header__item {
        display: flex;
        align-items: center;
    }

    .header__logo {
        display: block;
        background-image: url("./images/epicformbuilder_logo.svg");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }

    .navbar {
        display: flex;
        flex: 1;
        justify-content: space-between;
    }

    .navbar__list {
        display: flex;
        align-items: center;
    }

    .navbar__item {
        margin: 0 19px;
    }

    @media (max-width: 1374px) {
        .navbar__item {
            margin: 0 10px;
        }
    }

    .navbar__item_btn {
        margin: 0 3px;
    }

    .navbar__item_btn:last-child {
        margin-right: 19px;
    }

    .navbar__link {
        display: flex;
        position: relative;
        padding: 20px 0 19px;
        color: #9699ab;
        text-decoration: none;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        border-bottom: 2px solid transparent;
    }

    .navbar__link.active {
        color: #fff;
        border-color: #f33c33;
    }

    .navbar__link.active svg {
        fill: #fff;
    }

    .navbar__link:hover {
        color: #fff;
    }

    .navbar__link:hover svg {
        fill: #fff;
    }

    .navbar__link svg {
        width: 19px;
        height: 19px;
        margin-right: 10px;
        fill: #9699ab;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .navbar__link_editor {
        padding: 20px 20px 19px;
    }

    .navbar__link_editor svg {
        left: 20px;
    }

    .navbar__link_editor.active {
        background-color: #33374f;
    }

    .navbar__link_editor.active svg {
        fill: #fe544b;
    }

    .header_editor .navbar__item {
        margin: 0 3px;
    }

    .header_editor .navbar__link.active:after {
        bottom: 0;
    }

    _:-ms-fullscreen, :root .navbar__link svg {
        top: 0;
    }

    .btn {
        position: relative;
        border-radius: 5px;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        white-space: normal;
        border: 0px;
    }

    .btn svg {
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .btn_full-width {
        width: 100%;
    }

    .btn__create-first-form {
        font-size: 20px;
        padding: 18px 40px;
        background: #fe544b;
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 32px;
        box-shadow: 0 2px 8px rgba(254,84,75,0.10);
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    .btn__create-first-form:active,
    .btn__create-first-form:focus {
        color: #fff !important;
        background: #d03415 !important;
        border-style: none;
    }

    .btn__create-first-form:hover {
        color: #fff;
        background: #e55435;
        box-shadow: 0 4px 16px rgba(254,84,75,0.13);
    }

    .btn__create-form svg,
    .btn__create-form span,
    .btn__create-first-form svg,
    .btn__create-first-form span {
        display: inline-block;
        vertical-align: middle;
    }

    .btn__create-form svg,
    .btn__create-first-form svg {
        vertical-align: text-top;
    }

    .btn__create-form {
        background-color: #484c62;
        color: #b4bad9;
        padding: 11px 15px;
        border-bottom: none;
    }

    .btn__create-form svg {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        fill: #b4bad9;
    }

    .btn__create-first-form:active,
    .btn__create-first-form:focus {
        color: #CCCCCC !important;
        background-color: #d03415 !important;
        border-style: inset;
    }

    .btn__create-first-form:active svg,
    .btn__create-first-form:focus svg {
        fill: #CCCCCC !important;
        background-color: transparent !important;
    }

    .btn__create-first-form:hover,
    .btn__create-first-form:hover svg {
        color: #FFFFFF;
        fill: #FFFFFF;
        background-color: #e55435;
    }

    .btn__create-form:hover,
    .btn__create-form:hover svg {
        color: #ffffff;
        fill: #ffffff;
    }

    .btn__menu-editor {
        background-color: #484c62;
        color: #b4bad9;
        padding: 9px 18px;
        border-bottom: none;
    }

    .btn__menu-editor svg {
        width: 18px;
        height: 18px;
        margin-right: 0;
        fill: #b4bad9;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .btn__menu-editor:hover {
        color: #ffffff;
    }

    .btn__menu-editor:hover svg {
        fill: #fff;
    }

    .btn__publish-form {
        background-color: #89b659;
        color: #fff;
        padding: 9px 18px;

        display: inline-block;
        width: 180px;
        text-align: center;

        &:hover {
          background-color: #92d050;
        }

        &.failed {
          background-color: #b02525;

          &:hover {
            background-color: #c32929;
          }
        }

        &.disabled,
        &.disabled:hover {
          background-color: #89b659;
          opacity: 0.5;
          cursor: not-allowed;
        }
    }

    .btn__preview-form {
        background-color: #6495ed;
        color: #fff;
        padding: 9px 18px;

        display: inline-block;
        width: 180px;
        text-align: center;

        &:hover {
          background-color: color-mix(in srgb, #6495ed 80%, white);
        }

        &:disabled {
          background-color: color-mix(in srgb, #6495ed 80%, gray);
          opacity: 0.5;
          cursor: not-allowed;
        }
    }

    .btn__editor {
        background-color: #484c62;
        padding: 11px 15px;
        color: #4ba7f6;
    }

    .btn__green {
        display: none;
        background-color: #c2de9e;
        padding: 5px 10px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        color: #668e32;
    }

    .btn__save {
        display: inline-block;
        padding: 7px 20px;
        background-color: #89b659;
        color: #fff;
        cursor: pointer;
    }

    .btn__save:hover {
        background-color: #92d050;
    }

    .grid-view .btn__more {
      display: none;
    }

    .btn__more {
        padding: 0 8px;
    }

    .btn__more svg {
        width: 20px;
        height: 4px;
        fill: #bdbdc5;
    }

    .btn__more_vert svg {
        transform: rotate(90deg);
    }

    .btn__block-link {
        display: inline-block;
        padding: 9px;
        margin: 0 6px 0 0;
        background-color: #edeff5;
        color: #8a8e9d;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
    }

    .btn__block-link svg {
        fill: #9699ab;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .btn__block-link_forms-grid {
        margin: 5px 0 0 0;
    }

    .btn__block-link:hover {
        background-color: #d7d9e3;
        color: #393d56;
    }

    .btn__block-link:hover svg {
        fill: #393d56;
    }

    .btn__block-link svg {
        vertical-align: text-bottom;
    }

    .btn__block-link_responses svg {
        width: 19px;
        height: 19px;
        margin-right: 10px;
    }

    .btn__block-link_statistics svg {
        width: 18px;
        height: 19px;
    }

    .btn__block-link_export svg {
        width: 17px;
        height: 18px;
    }

    .btn__block-link_qr svg {
        width: 18px;
        height: 18px;
    }

    .btn__block-link_embed svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    .btn__block-link_duplicate svg, .btn__block-link_trash svg {
        width: 19px;
        height: 19px;
    }

    .btn__block-link_edit svg {
        width: 18px;
        height: 18px;
    }

    .btn__delete {
        display: inline-block;
        width: 170px;
        background-color: #44465a;
        margin-right: 8px;
        padding: 14px 20px;
        color: #fff;
        text-align: center;
    }

    .btn__delete:hover {
        background-color: #4a4c61;
    }

    .btn__delete:last-child {
        margin-right: 0;
        margin-left: 8px;
        background-color: #fe544b;
    }

    .btn__delete:last-child:hover {
        background-color: #ff6d65;
    }

    @media (max-width: 1374px) {
        .btn__delete {
            width: 145px;
        }
    }

    .btn__submit {
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 16px;
        background-color: #fe544b;
        border: none;
        color: #fff;
        padding: 14px 22px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .btn__submit.small-font {
      font-size: 12px;
    }

    .btn__submit:hover {
        background-color: #ff6d65;
    }

    .btn__submit_green {
        background-color: #89b659;
    }

    .btn__submit_green:hover {
        background-color: #92d050;
    }

    .btn__open-editor {
        background-color: #9699ab;
        color: #fff;
        padding: 10px 18px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

    .btn__open-editor:hover {
        background-color: #bcbfce;
    }

    .btn__constructor {
        background-color: #393d56;
        padding: 14px 30px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #fff;
    }

    .btn__close-panel {
        background-color: #3b3d50;
        padding: 10px 12px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        cursor: pointer;
    }

    .btn__close-panel svg {
        position: relative;
        width: 13px;
        height: 13px;
        top: 2px;
        fill: #9699ab;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .btn__close-panel:hover {
        background-color: #3e4255;
    }

    .btn__close-panel:hover svg {
        fill: #fff;
    }

    .btn__popup {
        display: inline-block;
        padding: 20px 30px;
        margin-right: 20px;
        color: #fff;
        background-color: #393d56;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

    .btn__popup_red {
        background-color: #fe544b;
    }

    .btn__exported {
        position: relative;
        background-color: #fe544b;
        font-size: 14px;
        margin-left: 20px;
        padding: 9px 15px 9px 40px;
        line-height: 1.3;
        color: #fff;
    }

    .btn__exported:hover {
        background-color: #ff6d65;
    }

    .btn__exported:before {
        content: "";
        position: absolute;
        background-image: url(./images/export-white.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        width: 17px;
        height: 18px;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn__exported-small {
        display: inline-block;
        position: relative;
        background-color: #edeff5;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        margin-left: 20px;
        padding: 9px 15px 9px 40px;
        line-height: 1.3;
        color: #8a8e9d;
    }

    .btn__exported-small:hover {
        background-color: #bcbfce;
    }

    .btn__exported-small:before {
        content: "";
        position: absolute;
        background-image: url(./images/download.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        width: 16px;
        height: 16px;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    _:-ms-fullscreen, :root .btn__create-form svg {
        top: 0;
    }

    .tabs input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    .row {
        display: flex;
    }

    .row .col {
        flex: 1;
    }

    .row .col:last-child {
        margin-left: 1em;
    }

    /* Accordion styles */
    .tabs {
        margin-top: 30px;
        overflow: hidden;
    }

    .tab {
        width: 100%;
        color: white;
        margin-bottom: 10px;
    }

    .tab-label {
        display: flex;
        justify-content: space-between;
        padding: 6px 30px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        cursor: pointer;
        color: #72747c;
        text-transform: uppercase;
        border-radius: 5px;
        /* Icon */
    }

    .tab-label:hover {
        background: #e8e9ed;
    }

    .tab-label::after {
        content: "";
        position: relative;
        background-image: url("./images/down-grey.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        width: 1em;
        height: 1em;
        top: 2px;
        text-align: center;
        transition: all 0.35s;
        transform: rotate(0deg);
        order: 2;
        fill: red;
    }

    .tab-label:before {
        content: "";
        position: relative;
        width: 100%;
        height: 1px;
        order: 1;
        flex: 1;
        top: 8px;
        margin: 0 15px;
        background-color: #dcdde3;
    }

    .tab-content {
        padding: 1em 0;
        color: #2c3e50;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .tab-close {
        display: flex;
        justify-content: flex-end;
        padding: 1em;
        font-size: 0.75em;
        background: #2c3e50;
        cursor: pointer;
    }

    .tab-close:hover {
        background: #1a252f;
    }

    .tab__item_right {
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .tab__arrow-next {
        width: 6px;
        height: 10px;
        background-image: url("./images/next.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        margin-top: 15px;
    }

    input:checked + .tab-label::after {
        transform: rotate(180deg);
    }

    .tab__item_image {
        display: none;
        position: relative;
        width: 60px;
        margin-right: 18px;
    }

    .tab__item_description {
        width: 690px;
    }

    .load-more {
        text-align: center;
    }

    .forms-page .load-more {
        margin-top: 20px;
    }

    .load-more > span,
    .load-more > button {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #9699ab;
        text-decoration: underline;
        border: 0;
        background: none;
    }

    .load-more > span {
        text-decoration: none;
    }

    .load-more > button:hover {
        text-decoration: none;
    }

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

    .submission__title {
        margin-bottom: 4px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #3a3d50;
    }

    .submission__contact-info {
        font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        letter-spacing: 0.5px;
        word-break: break-all;
    }

    .submission__contact-info span {
        position: relative;
        padding-right: 11px;
    }

    .submission__contact-info span:before {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        top: 9px;
        left: -7px;
        transform: translateY(-50%);
        background-color: #c8c8c8;
        border-radius: 50%;
    }

    .submission__contact-info span:first-child:before {
        display: none;
    }

    .submission__message {
        position: relative;
        background-color: #d6d6e2;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: 7px;
        margin-right: 20px;
    }

    .submission__message_new {
        background-color: #fe544b;
    }

    .submission__message_new:before {
        content: "";
        position: absolute;
        background-color: #fff;
        width: 7px;
        height: 7px;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .submission__attach {
        width: 10px;
        height: 12px;
        background-image: url("./images/attachment.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        margin-top: 11px;
    }

    /* Card-level badge an add-on renders through its `Badge` part. */
    .submission__badge {
        display: inline-block;
        margin-right: 25px;
        padding: 4px 10px;
        border-radius: 4px;
        background-color: #c2de9e;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        color: #668e32;
        white-space: nowrap;
    }

    .submission__image {
        position: absolute;
        width: 60px;
        height: 60px;
        top: -8px;
        padding: 13px 9px;
        border: 1px solid #efefef;
        border-radius: 5px;
    }

    .submission__image img {
        width: 40px;
    }

    _:-ms-fullscreen, :root .submission__message {
        margin-top: 8px;
    }

    .title-page__section {
        display: flex;
        justify-content: space-between;
    }

    .title-section {
        display: flex;
        justify-content: space-between;
    }

    .top-title {
        color: #363844;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 1.3;
    }

    .top-title__subtitle {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
        letter-spacing: 0.5px;
        font-size: 16px;
        color: #8e8f93;
    }

    .settings {
        margin-top: 30px;

        .block {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
    }

    .settings__title {
        color: #393d56;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
    }

    .settings .custom__select {
        margin-top: 15px;
        width: 400px;
    }

    .settings select {
        display: none;
    }

    .settings__item .select-selected {
        width: 400px;
    }

    .footer {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        margin: 50px 0 30px;
        font-size: 13px;
    }

    .footer__text {
        margin: 0 7px;
        color: #72747c;
    }

    .navbar-footer {
        display: flex;
    }

    .navbar-footer__item {
        margin: 0 7px;
    }

    .navbar-footer__link {
        color: #9699ab;
        border-bottom: 1px solid #9699ab;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .navbar-footer__link:hover {
        border-bottom: 1px solid transparent;
    }

    .block-view__container {
        display: flex;
        border: 2px solid #e1e2e8;
        border-radius: 5px;
    }

    .block-view__item {
        padding: 8px;
        cursor: pointer;
    }

    .block-view__item.active {
        background-color: #e1e2e8;
    }

    .block-view__item:hover {
        background-color: #e1e2e8;
    }

    .block-view__grid {
        width: 20px;
        height: 20px;
        background-image: url("./images/grid.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .block-view__list {
        width: 20px;
        height: 20px;
        background-image: url("./images/list.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .block-view__view-one {
        width: 20px;
        height: 20px;
        background-image: url("./images/view-one.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .block-view__column {
        width: 20px;
        height: 20px;
        background-image: url("./images/column.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .forms-page {
        margin-top: 30px;
    }

    .grid-view {
        display: none;
        flex-wrap: wrap;
    }

    .list-view {
    }

    .forms-grid {
        max-width: 486px;
        margin: 0 0 10px 5px;
        flex-grow: 1;
    }

    .forms-grid:nth-child(odd) {
        margin: 0 5px 10px 0;
    }

    .forms-list {
        display: flex;
        justify-content: space-between;
    }

    .form-list__item {
        position: relative;
    }

    .form-list__show-block {
        width: 4px;
        height: 16px;
        padding: 0 10px;
        background-image: url("./images/three-dot.png");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        transform: translate(0%, 100%);
        cursor: pointer;
    }

    .chart__item {
        margin-right: 20px;
        padding: 0 20px;
        border-left: 2px solid #edeff5;
    }

    .chart__time {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        color: #bbbdc5;
    }

    .chart__value {
        margin-top: 5px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 24px;
        color: #fe544b;
    }

    .chart__value span {
        font-size: 12px;
        color: #bbbdc5;
    }

    .popup {
        position: fixed;
        width: 440px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #393d56;
        padding: 40px;
        border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        z-index: 999;
    }

    @media (max-width: 1374px) {
        .popup {
            width: 350px;
            padding: 20px;
        }
    }

    .popup_support {
        width: 560px;
    }

    .popup_embed-form {
        .popup__close:hover svg {
            fill: #64748b;
        }
    }

    .popup_templates-builder {
        width: 800px;
        height: 90vh;
        overflow-y: auto;
        background-color: #fff;
        color: #323546;
        font-size: 15px;
        margin-bottom: 5%;
        top: 5%;
        transform: translate(-50%, 0) scale(0);
        -webkit-transition: opacity 400ms ease-in-out;
        -moz-transition: opacity 400ms ease-in-out;
        -o-transition: opacity 400ms ease-in-out;
        -ms-transition: opacity 400ms ease-in-out;
        transition: opacity 400ms ease-in-out;
    }

    .popup__title,
    .popup__content h2 {
        color: #fff;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 24px;
    }

    .popup__title_small,
    .popup__content h3 {
        font-size: 18px;
        color: #3a3d50;
        margin-bottom: 25px;
    }

    .popup__progress-bar-bg {
        width: 100%;
        height: 24;
        background: #e3e8ee;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }

    .popup__progress-bar-fill {
        height: 100%;
        background: #FF6666;
        transition: width 0.3s;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .popup__progress-bar-text {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #334155;
        font-weight: 600;
        font-size: 14;
        letter-spacing: 1;
        pointer-events: none;
    }

    .popup__content p + h3 {
        margin-top: 25px;
    }

    .popup__content h4 {
        font-size: 16px;
        color: #3a3d50;
        margin-bottom: 10px;
    }

    .popup__content p {
        font-size: 14px;
        color: #3a3d50;
        margin: 10px 0;
    }

    .popup__subtitle {
        margin-top: 10px;
        color: #82879f;
        font-size: 14px;
    }

    .popup__content {
        margin-top: 30px;
    }

    .popup__qr-section {
        background-color: #fff;
        padding: 60px;
    }

    @media (max-width: 1374px) {
        .popup__qr-section {
            padding: 30px;
        }
    }

    .popup__close {
        position: absolute;
        width: 32px;
        height: 32px;
        top: 10px;
        right: 10px;
        padding: 10px;
        cursor: pointer;
    }

    .popup__close svg {
        fill: #4f546c;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .popup__close:hover svg {
        fill: #fff;
    }

    .popup__frame {
        width: 100%;
        height: 296px;
        background-color: #eeeeee;
        margin: 30px 0;
    }

    .popup__link {
        color: #fe544b;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .popup__link:hover {
        color: #6e6f78;
    }

    .popup__line {
        width: 100%;
        height: 1px;
        background-color: #f0f0f0;
        margin: 40px 0;
    }

    .popup__list {
        margin-bottom: 40px !important;
    }

    .popup__list-item {
        position: relative;
        margin-bottom: 25px;
        padding-left: 40px;
        color: #50525e;
    }

    .popup__list-item:before {
        content: "";
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #b3b4c2;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .popup__color-block {
        margin-bottom: 4px;
        padding: 20px 25px;
        font-size: 15px;
        border-radius: 5px;
        border-left: 4px solid transparent;
    }

    .popup__color-block_green {
        margin-top: 30px;
        background-color: #f2f7df;
        border-color: #c7dd74;
        color: #90996d;
    }

    .popup__color-block_orange {
        background-color: #f7eedf;
        border-color: #ed992d;
        color: #c09651;
    }

    .popup__color-block_blue {
        background-color: #f2f7df;
        border-color: #c7dd74;
        color: #6da6a9;
    }

    .popup__color-block_pink {
        background-color: #ffd2d2;
        border-color: #f87171;
        color: #c17474;
    }

    .popup__color-title {
        margin-bottom: 15px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 15px;
    }

    .popup__color-title_green {
        color: #6e7d34;
    }

    .popup__color-title_orange {
        color: #af7a22;
    }

    .popup__color-title_blue {
        color: #4a979b;
    }

    .popup__color-title_pink {
        color: #b06262;
    }

    .popup__btn-block {
        margin-top: 30px;
    }

    .popup_templates-builder .popup__title {
        color: #363844;
    }

    .popup_templates-builder .popup__close:hover svg {
        fill: #fe544b;
    }

    .modal-area {
        visibility: hidden;
        opacity: 0;
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        background-color: rgba(48, 50, 63, 0.7);
        z-index: 100;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    @media (min-width: 783px) {
        .overlay {
            left: 160px;
            top: 32px;
        }
    }

    @media (min-width: 783px) {
        body.folded .overlay,
        body.auto-fold .overlay {
            left: 36px;
        }
    }

    @media (min-width: 961px) {
        body.auto-fold .overlay {
            left: 160px;
        }
    }

    .popup_templates-builder.show-popup {
        transform: translate(-50%, 0);
    }

    .top-panel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px;
        background-color: #fff;
        color: #9699ab;
        font-size: 14px;
        border-bottom: 1px solid rgba(220, 221, 227, 0.5);
    }

    .top-panel__link {
        display: flex;
        align-items: center;
        padding: 0;
        color: #8a8e9d;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .top-panel__link svg {
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .top-panel__link:hover {
        color: #393d56;
    }

    .top-panel__link:hover svg {
        fill: #393d56;
    }

    .top-panel__top-panel-back {
        display: inline-block;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        background-color: #edeff5;
        text-align: center;
        padding: 11px 11px;
    }

    .top-panel__top-panel-back svg {
        width: 14px;
        height: 14px;
        fill: #8a8e9d;
        transform: rotate(90deg);
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .top-panel__top-panel-back_editor {
        background-color: #484c62;
    }

    .top-panel__back-to-list_editor {
        margin-left: 20px;
    }

    .top-panel__back-to-list_editor .top-panel__link:hover {
        color: #fff;
    }

    .top-panel__back-to-list_editor .top-panel__link:hover svg {
        fill: #fff;
    }

    .top-panel__title-block {
        text-align: center;
    }

    .top-panel__title {
        color: #484c62;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
    }

    .top-panel__subtitle {
        font-size: 12px;
    }

    .menu-small {
        margin: 25px -15px 0;
        padding: 0px 15px 0;
        border-top: 1px solid #f3f4f8;
        text-align: center;
    }

    .menu-small__item {
        display: inline-block;
    }

    .menu-small__link {
        display: inline-block;
        position: relative;
        padding: 20px 20px 20px 40px;
        color: #8a8e9d;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .menu-small__link:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: transparent;
        bottom: 0px;
        left: 0;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .menu-small__link svg {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 10px;
        fill: #8a8e9d;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .menu-small__link:hover {
        color: #393d56;
    }

    .menu-small__link:hover svg {
        fill: #fe544b;
    }

    .menu-small__link:hover:after {
        background-color: #fe544b;
    }

    .menu-small__link.active {
        color: #393d56;
    }

    .menu-small__link.active svg {
        fill: #fe544b;
    }

    .menu-small__link.active:after {
        background-color: #fe544b;
    }

    .response .block {
        margin-bottom: 10px;
    }

    .response__contact-info {
        font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        letter-spacing: 0.5px;
    }

    .response__contact-info span {
        position: relative;
        padding-right: 11px;
    }

    .response__contact-info span:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
        background-color: #c8c8c8;
        border-radius: 50%;
    }

    .response__contact-info span:last-child:after {
        display: none;
    }

    .response__row {
        display: flex;
        padding: 25px 0;
        border-bottom: 1px solid #ebedf2;
    }

    .response__row:first-child {
        padding-top: 0;
    }

    .response__row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .response__item-title {
        width: 290px;
        padding-right: 10px;
        color: #aeb0ba;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
    }

    .response__item-text {
        color: #50525e;
        font-size: 14px;
    }

    .response__email,
    .response__email a {
        color: #fe544b;
    }

    .response__checkbox span {
        color: #83848b;
    }

    .response em {
        color: #bdbec6;
    }

    .response__warning {
        background-color: #faefe1;
        padding: 20px;
        color: #8c7d6b;
        border-radius: 5px;
    }

    .response__warning-title {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

    .response__warning-text {
        margin-top: 5px;
        font-size: 13px;
    }

    .response__files {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .response__files span {
        position: relative;
        padding-left: 30px;
    }

    .response__files span.no-virus:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background-image: url("./images/viruses.png");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        top: -1px;
        left: 0;
    }

    .response__files-item {
        margin-right: 10px;
    }

    .response__upload {
        position: relative;
        display: flex;
        background-color: #edeff5;
        padding: 9px 13px 9px 36px;
        color: #9699ab;
        font-size: 14px;
        border-radius: 5px;
    }

    .response__upload:after {
        content: "";
        position: absolute;
        width: 14px;
        height: 16px;
        left: 13px;
        background-image: url("./images/attach.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .response__upload-size {
        margin-left: 20px;
        color: #7e8195;
        font-weight: bold;
    }

    .response__upload-text a {
        color: inherit;
    }

    .response__upload-text a:hover {
        text-decoration: underline;
    }

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

    .response__product-item {
        position: relative;
    }

    .response__product-item_right {
        margin-left: 20px;
    }

    .response__product-item_left {
        margin-right: 20px;
    }

    .response__product-item_flex {
        display: flex;
    }

    .response__product-info {
        width: 444px;
    }

    .response__product-title {
        color: #3a3d50;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
    }

    .response__image {
        width: 200px;
        height: 200px;
        margin-right: 40px;
        background: linear-gradient(to bottom, #e0dfdd, #eeeeee);
        border-radius: 5px;
        overflow: hidden;
    }

    .response__content-row {
        display: flex;
        margin-top: 30px;
    }

    .response__content-item {
        margin-right: 60px;
    }

    .response__content-title {
        text-transform: uppercase;
        color: #aeb0ba;
        font-weight: bold;
        font-size: 12px;
    }

    .response__content-text {
        color: #50525e;
        margin-top: 10px;
        font-size: 14px;
    }

    .response__content-text span {
        color: #b2b3b9;
    }

    .response__btn-edit {
        position: absolute;
        display: block;
        width: 157px;
        bottom: 0;
        right: 0;
        background-color: #9699ab;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        border-radius: 5px;
    }

    .response__payment {
        width: 91px;
        margin-right: 0;
    }

    .responses__create-info {
        font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 300;
        font-style: normal;
        letter-spacing: 0.5px;
    }

    .responses__create-info span {
        position: relative;
        padding-right: 11px;
    }

    .responses__create-info span:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        background-color: #c8c8c8;
        border-radius: 50%;
    }

    .responses__create-info span:last-child:after {
        display: none;
    }

    .charts {
        width: 50%;
        margin-left: 5px;
    }

    .charts:nth-child(odd) {
        margin-left: 0;
        margin-right: 5px;
    }

    .charts__title {
        color: #72747c;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
    }

    .charts__total {
        font-size: 13px;
    }

    .charts-section {
        margin-top: 25px;
    }

    .chart-block {
        display: flex;
        justify-content: space-between;
    }

    .chart-block__title {
        color: #72747c;
        text-transform: uppercase;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
    }

    .toggle {
        font-family: arial, sans-serif;
    }

    .toggle .tabs {
        border-bottom: 1px solid grey;
        width: 100%;
        overflow: hidden;
        height: 36px;
        line-height: 36px;
    }

    .toggle .tabs .tab {
        float: left;
        background: white;
        color: #777777;
        height: 31px;
        margin: 2px 8px 0;
        padding: 0 8px;
        cursor: pointer;
    }

    .toggle .tabs .tab.active {
        color: #dd4b39;
        border-bottom: 3px solid #dd4b39;
    }

    .toggle .panels .panel {
        padding: 20px 10px;
        display: none;
    }

    .toggle .panels .panel:first-child {
        display: block;
    }

    ::-webkit-input-placeholder {
        color: #d9dbea;
    }

    ::-moz-placeholder {
        color: #d9dbea;
    }

    :-ms-input-placeholder {
        color: #d9dbea;
    }

    :-moz-placeholder {
        color: #d9dbea;
    }

    .input-default {
        position: relative;
        width: 100%;
        margin-top: 10px;
        padding: 9px 15px;
        border: 2px solid transparent;
        outline: none;
        border-radius: 5px;
        font-size: 14px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .input-default:disabled {
        cursor: not-allowed;
    }

    .input-default_light {
        background-color: #f9faff;
        border-color: #dedfeb;
        color: #50525e;
    }

    .input-default_light::-webkit-input-placeholder {
        color: #50525e;
    }

    .input-default_light:-moz-placeholder {
        color: #50525e;
    }

    .input-default_light::-moz-placeholder {
        color: #50525e;
    }

    .input-default_light:-ms-input-placeholder {
        color: #50525e;
    }

    .input-default_light:hover {
        border-color: #cfd2de;
    }

    .input-default_light:focus {
        background-color: #fff;
        border-color: #bcbfce;
    }

    .input-default_dark {
        background-color: #3d3e4f;
        border-color: #3d3e4f;
        color: #fff;
    }

    .input-default_dark:hover {
        background-color: #454658;
        border-color: #454658;
    }

    .input-default_dark:focus {
        background-color: #4c4d60;
        border-color: #4c4d60;
    }

    .input-other {
        width: calc(100% - 31px);
        padding: 5px;
        margin-top: 0;
    }

    .custom__select {
        position: relative;
    }

    .custom__select select {
        display: none;
    }

    .select-selected {
        background-color: #fff;
    }

    .select-selected:after {
        position: absolute;
        content: "";
        top: 22px;
        right: 15px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #50525e transparent transparent transparent;
    }

    /* Point the arrow upwards when the select box is open (active): */
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #50525e transparent;
        top: 16px;
    }

    /* style the items (options), including the selected item: */
    .select-selected {
        width: 100%;
        padding: 15px;
        font-size: 14px;
        color: #50525e;
        border: 2px solid #dedfeb;
        border-radius: 5px;
        cursor: pointer;
    }

    .select-items {
        background-color: #fff;
        box-shadow: 0px 13px 30px 0px rgba(0, 0, 0, 0.55);
    }

    .select-items div {
        padding: 15px;
        background-color: #fff;
        font-size: 14px;
        cursor: pointer;
    }

    /* Style items (options): */
    .select-items {
        position: absolute;
        padding: 10px;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
    }

    /* Hide the items when the select box is closed: */
    .select-hide {
        display: none;
    }

    .select-items div:hover, .same-as-selected {
        background-color: #f3f4f8;
        border-radius: 5px;
    }

    .custom-checkbox {
        position: absolute !important;
        opacity: 0 !important;
    }

    .custom-checkbox + label {
        position: relative;
        cursor: pointer;
        padding-left: 31px;
        color: #50525e;
    }

    .custom-checkbox + label:before {
        content: "";
        position: absolute;
        top: 1px;
        left: 0px;
        width: 16px;
        height: 16px;
        background: #f9faff;
        border: 2px solid #dedfeb;
        border-radius: 3px;
    }

    .custom-checkbox:checked + label {
        color: #fe544b;
    }

    .custom-checkbox:checked + label:before {
        border-color: #fe544b;
    }

    .custom-checkbox:checked + label:after {
        content: "";
        position: absolute;
        left: 6px;
        top: 7px;
        background: #fe544b;
        width: 4px;
        height: 4px;
    }

    .custom-radio {
        position: absolute !important;
        opacity: 0 !important;
    }

    .custom-radio + label {
        position: relative;
        cursor: pointer;
        padding-left: 31px;
        color: #50525e;
    }

    .custom-radio + label:before {
        content: "";
        position: absolute;
        top: 1px;
        left: 0px;
        width: 16px;
        height: 16px;
        background: #f9faff;
        border: 2px solid #dedfeb;
        border-radius: 50%;
    }

    .custom-radio:checked + label {
        color: #fe544b;
    }

    .custom-radio:checked + label:before {
        border-color: #fe544b;
    }

    .custom-radio:checked + label:after {
        content: "";
        position: absolute;
        left: 6px;
        top: 7px;
        background: #fe544b;
        width: 4px;
        height: 4px;
        border-radius: 50%;
    }

    .input,
    .textarea {
        position: relative;
        background-color: #444962;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        border: none;
        outline: none;
    }

    .textarea {
        width: 100%;
        resize: none;
    }

    .textarea_dark {
        background-color: #3d3e4f;
        border-color: #3d3e4f;
        color: #fff;
    }

    .required {
        position: relative;
    }

    .required:after {
        content: "";
        position: absolute;
        width: 7px;
        height: 8px;
        top: -3px;
        right: 20px;
        background-image: url("./images/star_input.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: contain;
    }

    .popup_create-form .input {
        width: 100%;
    }

    .popup_create-form .textarea {
        height: 100px;
    }

    .popup_create-form .required {
        position: relative;
    }

    .popup_create-form .required:after {
        content: "";
        top: 10px;
        right: 15px;
    }

    .popup_support .input {
        width: 48.5%;
        margin-right: 5px;
    }

    .popup_support span:nth-child(2) .input {
        margin-right: 0;
        margin-left: 8px;
    }

    .popup_support .textarea {
        height: 130px;
    }

    .popup_edit-form .required {
        position: relative;
    }

    .popup_edit-form .required:after {
        content: "";
        top: 10px;
        right: 15px;
    }

    .popup_edit-form .input {
        width: 100%;
    }

    .popup_edit-form .btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .support__select {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .support__select .select-selected {
        width: auto;
        background-color: #3c4158;
        border-color: #444962;
        color: #d9dbea;
    }

    .support__select .select-items {
        max-height: 190px;
        background-color: #3f435b;
        box-shadow: none;
        border-radius: 5px;
        overflow-y: scroll;
    }

    .support__select .select-items div {
        background-color: #3f435b;
        color: #9b9ca4;
        padding: 5px;
    }

    .support__select .select-items div:hover {
        background-color: #373b51;
        color: #fff;
    }

    @keyframes autofill {
        to {
            color: inherit;
            background: #444962;
        }
    }

    input:-webkit-autofill {
        -webkit-animation-name: autofill;
        -webkit-animation-fill-mode: both;
    }

    .top-panel-editor {
        display: flex;
        justify-content: space-between;
        padding: 14px 25px;
        border-bottom: 2px solid #f0f0f0;
    }

    .top-panel-editor__item_flex {
        display: flex;
    }

    .switch {
        display: inline-block;
        height: 26px;
        position: relative;
        width: 46px;
    }

    .switch input {
        display: none;
    }

    .switch__container {
        display: flex;
        align-items: center;
        margin-right: 40px;
    }

    .switch__text {
        padding-left: 15px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #697176;
        text-transform: uppercase;
    }

    .switch__text-email {
        color: #fe544b;
        text-decoration: underline;
    }

    .switch__text-message {
        color: #fe544b;
        max-width: 420px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .slider {
        background-color: #ccc;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .slider:before {
        background-color: #fff;
        content: "";
        width: 22px;
        height: 22px;
        bottom: 2px;
        left: 2px;
        position: absolute;
        transition: 0.4s;
    }

    input:checked + .slider {
        background-color: #fe544b;
    }

    input:checked + .slider:before {
        transform: translateX(20px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    .slider.disabled {
        opacity: 0.5;
    }

    .constructor .flex {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .constructor__row {
        display: flex;
    }

    .constructor__component {
        width: 100%;
        margin-bottom: 5px;
        padding: 15px 20px;
        /*
    Code moved to .react-grid-item class
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: 5px;
     */
        /*
    We do not want any transitions when hovering on grid items
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
     */
    }

    .constructor__component:hover {
        /*
    Code moved to .react-grid-item class
    border-color: #e9ebec;
    z-index: 20;
    */
    }

    .constructor__component.active {
        border-color: #fe544b;
    }

    .constructor__component.constructor__component_actions {
        border: 2px solid transparent;
        cursor: pointer;
        border-radius: 5px;
        position: relative;
    }

    .constructor__component.constructor__component_actions:hover {
        border-color: #e9ebec;
        z-index: 20;
    }

    .constructor__component.constructor__component_actions.active {
        border-color: #fe544b;
    }

    .constructor__component_actions {
        margin-bottom: 0;
    }

    .constructor__component-custom_select {
        padding-top: 10px;
    }

    .constructor__component-custom_select .react-select .select__control {
        border: 2px solid #dedfeb;
        background-color: #f9faff;
        padding: 7px 15px;

        :hover {
            border-color: #cfd2de;
        }

        .select__value-container {
            .select__single-value {
                font-weight: normal;
            }

            .select__placeholder {
                font-weight: normal;
            }

            .select__input {
                color: #ddee6b;
                min-height: auto;
            }
        }
    }

    .constructor__component-custom_select .react-select .select__menu {
        width: 100%;
        padding: 0;
        z-index: 20;

        .select__menu-list {
            background-color: inherit;
            z-index: inherit;

            .select__option {
                font-weight: normal;
                background-color: inherit;
                padding: 10px 15px;
                z-index: inherit;

                :hover {
                    border-radius: 0;
                    z-index: inherit;
                }

                &.select__option--is-focused {
                    z-index: inherit;
                }
            }
        }
    }

    .constructor__dots {
        position: relative;
        right: -20px;
        top: -10px;
        z-index: 200;
        cursor: pointer;

        &:hover {
            z-index: 210;
        }

        &-content {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            background: #34384d;
            color: #9699ab;
            padding: 0;
            right: 0;
            top: 20px;
            cursor: pointer;
            border-radius: 5px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;

            &:before {
                content: "";
                position: absolute;
                background: #34384d;
                width: 100%;
                height: 25px;
                top: -25px;
                right: 0;
                border-radius: 5px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &-link {
            background-repeat: no-repeat;
            background-position: 15px 47%;
            background-size: 18px;
            display: block;
            color: #9699ab;
            font-size: 14px;
            padding: 8px 40px 9px 40px;

            &:hover {
                background-color: #3c3d4f;
                color: #fff;
            }

            &.disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            &_del {
                background-image: url("./images/del.svg");
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            &_duplicate {
                background-image: url("./images/duplicate-grey.svg");
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
    }

    .constructor__component-title {
        color: #393d56;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;

        .error {
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 0 5px;
            padding: 2px 10px;
            color: #f8e104;
            background-color: #ef2c49;
        }
    }

    .constructor__component-description {
        margin-top: 10px;
        font-size: 14px;
        color: #a4a5ab;
    }

    .constructor__add-component {
        margin-top: 30px;
        padding: 14px;
        text-align: center;
        color: #fe544b;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        border: 2px dashed #e0e1e3;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .constructor__add-component span {
        position: relative;
    }

    .constructor__add-component span:before {
        content: "";
        position: absolute;
        background-image: url("./images/add-component.svg");
        background-repeat: no-repeat;
        background-position: 0 0;
        width: 18px;
        height: 18px;
        left: -27px;
    }

    .constructor__add-component:hover {
        border-color: #fe544b;
    }

    .constructor__add-component_option {
        color: #9d9faa;
        border-color: #434456;
    }

    .constructor__add-component_option:hover {
        border-color: #ffffff;
    }

    .constructor__checkbox-container {
        margin-bottom: 10px;
        /*margin-right: 40px;*/
    }

    .custom-checkbox + label,
    .constructor .custom-checkbox + label {
        font-weight: 500;
        font-size: 14px;
    }

    .custom-checkbox + label:before,
    .constructor .custom-checkbox + label:before {
        top: 0;
    }

    .custom-checkbox:checked + label:after,
    .constructor .custom-checkbox:checked + label:after {
        top: 6px;
    }

    .constructor__radio-container {
        margin-bottom: 10px;
    }

    .constructor .custom-radio + label {
        font-weight: 500;
        font-size: 14px;
    }

    .constructor .custom-radio + label:before {
        top: 0;
    }

    .constructor .custom-radio:checked + label:after {
        top: 6px;
    }

    .constructor__component .btn__more {
        position: absolute;
        top: -4px;
        right: -1px;
        z-index: 5;
    }

    .constructor__dots:hover .constructor__dots-content {
        visibility: visible;
        opacity: 1;
    }

    .editor-wrapper {
        flex: 1 0 auto;
        width: 785px;
        margin: auto;
        padding: 35px 15px 0;
    }

    .slide-part {
        width: 100%;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        display: flex;
        flex-direction: column;
        min-height: 93%;
    }

    .components-panel {
        position: fixed;
        width: 572px;
        min-height: calc(100% - 60px);
        height: auto;
        background-color: #323341;
        border: 0;
        top: 60px;
        right: -700px;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        padding: 0px 40px 20px;
        z-index: 200;
    }

    .components-panel__title {
        margin-left: 15px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 24px;
    }

    .components-panel__section {
        color: #9699ab;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid rgba(205, 207, 222, 0.1);
    }

    .components-panel__section_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .components-panel__section-title {
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .components-panel__item-box {
        display: flex;
        flex-wrap: wrap;
    }

    .components-panel__item {
        position: relative;
        width: 120px;
        height: 80px;
        background-color: #3b3d50;
        border-radius: 5px;
        padding: 10px;
        margin: 2px;
        cursor: pointer;
        text-align: center;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .components-panel__item:nth-child(4n+1) {
        margin-left: 0;
    }

    .components-panel__item:nth-child(4n+4) {
        margin-right: 0;
    }

    .components-panel__item_half {
        width: 49.3%;
    }

    .components-panel__item_half:nth-child(odd) {
        margin-left: 0;
    }

    .components-panel__item_half:nth-child(even) {
        margin-right: 0;
    }

    .components-panel__item_icon {
        height: 66px;
    }

    .components-panel__item:hover {
        background-color: #3e4255;
        color: #fff;
    }

    .components-panel__item.inactive {
        background-color: #353645;
    }

    .components-panel__item_.inactive:hover {
        background-color: #353645;
        color: #9699ab;
    }

    .components-panel__item.inactive .components-panel__item-text,
    .components-panel__item.inactive .components-panel__item-icon {
        opacity: 0.4;
    }

    /* Greyed "crown" teaser tile for a component that ships in a separate
       add-on plugin (see AddonTeaserTile). Same geometry as a normal tile,
       reusing the .inactive look, plus a small grey crown badge — no red
       hover, since it never adds a component, only toggles a note. */
    .components-panel__item_addon {
        background-color: #353645;
        background-image: url("./images/addon-crown.svg");
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 14px;
        cursor: pointer;
    }

    .components-panel__item_addon .components-panel__item-text,
    .components-panel__item_addon .components-panel__item-icon {
        opacity: 0.4;
    }

    .components-panel__item_addon:hover {
        background-color: #353645;
        color: inherit;
    }

    /* Rendered once per palette, in normal document flow directly below the
       item box of the section containing the open teaser (see
       AddonTeaserNote) — not layered over the tiles, so it never covers the
       next row. */
    .components-panel__addon-note {
        width: 100%;
        margin-top: 8px;
        padding: 8px 10px;
        background: #2c2d3c;
        border-radius: 5px;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 12px;
        line-height: 1.4;
        color: #9699ab;
        text-align: left;
        white-space: normal;
        box-sizing: border-box;
    }

    .components-panel__addon-note a {
        color: #fe544b;
    }

    .components-panel__addon-note a:hover,
    .components-panel__addon-note a:visited {
        color: #fe544b;
    }

    .components-panel__item-icon {
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .components-panel__item-icon svg,
    .components-panel__item-icon img {
        display: inline-block;
        height: 24px;
    }

    .components-panel__link {
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 14px;
        color: #fe544b;
        line-height: 2;
    }

    .components-panel__link:hover {
        color: #ff7f78;
    }

    .components-panel .switch__container {
        margin-right: 0;
    }

    .component-settings__section {
        margin-bottom: 0px;
        padding: 12px 20px;
        background: #353645;
        border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .component-settings__section_flex {
        flex: 1;
    }

    .component-settings__section_flex:first-child {
        margin-right: 5px;
    }

    .component-settings__section_flex:last-child {
        margin-left: 5px;
    }

    .component-settings__section-help {
        margin-bottom: 0px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .component-settings__flex-row-default {
        display: flex;
    }

    .component-settings__row-flex {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
    }

    .component-settings__row-flex_option {
        margin-bottom: 18px;
    }
    .component-settings__row-flex_option-last {
        align-items: center;
        margin-top: 15px;
    }

    .component-settings__row {
        margin-bottom: 6px;
    }

    .component-settings__row_padding {
        padding: 10px 0;
    }

    .component-settings__row button {
        color: #fff;
        border: none;
        width: 100%;
        height: 41px;
        background-color: #3d3e4f;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        margin: 10px 0;
    }

    .component-settings__row button:hover {
        background-color: #484a5b;
    }

    .component-settings__filename {
        font-size: 14px;
    }

    .component-settings-options__country-scroll,
    .component-settings-options__pricing-scroll {
        margin-top: 12px;
        margin-bottom: 2px;
        max-height: 567px;
        overflow: auto;
        border-radius: 5px;
        font-weight: normal;
    }

    .component-settings-options {
    }

    .component-settings-options-item,
    .component-settings-pricing-options-item {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .component-settings-options__country-scroll .component-settings-options-item:last-child > .component-settings__row_option {
        margin-bottom: 0;
    }

    .component-settings-options-item.dragged,
    .component-settings-pricing-options-item.dragged {
        opacity: 0.7;
        z-index: 60;
    }

    .component-settings__row_buttons {
        margin-top: 20px;
        margin-bottom: 40px;
        text-align: right;
    }

    .component-settings__row_buttons button {
        border: none;
        width: 130px;
        height: 41px;
        background-color: #3d3e4f;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background-image: url("./images/settings/plus-red.svg");
        background-repeat: no-repeat;
        background-position: 15% 50%;
        background-size: 12px;
        padding-left: 40px;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .component-settings__row_buttons button:hover {
        background-color: #484a5b;
    }

    .component-settings__row_buttons button svg {
        border: none;
        width: 41px;
        height: 41px;
        /*padding: 16px 21px;*/
    }

    .component-settings__row_option-set {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .component-settings__row_option {
        display: flex;
        margin-bottom: 2px;
        position: static;
        margin-right: 2px;
    }

    .component-settings__row span.input-error {
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        display: block;
        color: #fe544b;
    }

    .component-settings__row input {
        position: relative;
        padding: 9px 15px;
        z-index: 1;
        opacity: 1;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
    }

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

    .component-settings__row input[type="number"] {
        -moz-appearance: textfield;
    }

    .component-settings__row textarea {
        margin-top: 5px;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
    }

    .component-settings__description {
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 14px;
        margin-top: 10px;
        color: #9699ab;
    }

    .component-settings__description_price-option {
        margin-top: 0;
    }

    .component-settings__description_option {
        font-size: 14px;
        margin-top: 0;
    }

    .component-settings__description a {
        color: #fe544b;
    }

    .component-settings__description a:hover {
        color: #fe544b;
    }

    .component-settings__description a:visited {
        color: #fe544b;
    }

    /* Shared building blocks for add-on settings panels, so add-ons reuse
       core styling instead of loading their own stylesheets. */

    /* Horizontal rule with an optional centred label ("or"). */
    .ef-divider {
        display: flex;
        align-items: center;
        margin: 16px 0;
    }

    .ef-divider::before,
    .ef-divider::after {
        content: "";
        flex-grow: 1;
        border-top: 1px solid #d1d5db;
    }

    .ef-divider__label {
        margin: 0 12px;
        color: #6b7280;
        font-size: 14px;
        font-weight: 500;
    }

    /* Connection / configuration state of an external account. */
    .ef-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        border-radius: 999px;
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 12px;
        font-weight: 600;
        background-color: #eef0f5;
        color: #5b5e73;
    }

    .ef-status-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: currentColor;
    }

    .ef-status-pill_success {
        background-color: #e8f3dc;
        color: #4f7a22;
    }

    .ef-status-pill_error {
        background-color: #fde8e7;
        color: #c8322a;
    }

    .ef-status-pill_pending {
        background-color: #fdf3dc;
        color: #9a6b00;
    }

    /* Vertically stacked full-width buttons (e.g. a provider's buttons). */
    .ef-button-stack > * {
        display: block;
        width: 100%;
    }

    .ef-button-stack > * + * {
        margin-top: 0.75rem;
    }

    .component-settings__description_error {
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 14px;
        margin-top: 10px;
        color: #fe544b;
    }

    .component-settings__title {
        display: flex;
        align-items: center;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 400;
        font-size: 14px;
    }

    .component-settings__title svg {
        width: 16px;
        margin-right: 10px;
    }

    .component-settings__title-small {
        font-size: 14px;
        color: #61657a;
    }

    .component-settings__custom_select {
        padding-top: 10px;
        font-family: "Roboto", sans-serif;
    }

    .component-settings__custom_select .react-select .select__control {
        border: 2px solid #3d3e4f;
        background-color: #3d3e4f;
        padding: 7px 15px;

        :hover {
            border-color: #3d3e4f;
        }

        .select__value-container {
            .select__single-value {
                color: #ffffff;
                font-weight: normal;
            }

            .select__placeholder {
                font-weight: normal;
            }

            .select__input {
                color: #ddee6b;
                min-height: auto;
            }
        }
    }

    .component-settings__custom_select .react-select .select__menu {
        width: 100%;
        padding: 0;
        background-color: #3d3e4f;

        .select__menu-list {
            background-color: inherit;

            .select__option {
                color: #fff;
                font-weight: normal;
                background-color: inherit;
                padding: 10px 15px;

                :hover {
                    border-radius: 0;
                }

                &.select__option--is-focused {
                    background-color: #4b4c5e;
                }
            }

            .select__menu-notice--no-options {
                color: #ffffff;
                font-weight: normal;
            }
        }
    }

    .component-settings__tags {
        margin-top: 20px;
    }

    .component-settings__tag {
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        background-color: #ff0000;
        padding: 0 10px;
        border-radius: 5px;
    }

    .component-settings__tag + .component-settings__tag {
        margin-left: 4px;
    }

    .component-settings__tag svg {
        width: 16px;
        margin-right: 10px;
    }

    .component-settings__line {
        height: 2px;
        background-color: #323341;
        margin: 0 -20px 20px;
    }

    .component-settings__move-row {
        flex: none;
        position: relative;
        cursor: grab;
        width: 34px;
        height: 41px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        background-color: #3d3e4f;
    }

    .component-settings__move-row:before {
        position: absolute;
        content: "";
        width: 34px;
        height: 41px;
        background-image: url("./images/more_component.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 13px;
        transform: rotate(90deg);
    }

    .component-settings-pricing-options-item .component-settings__move-row {
        height: auto;
    }

    .component-settings__title-container {
        flex: auto;
        background-color: #414252;
        color: #fff;
        font-family: "Roboto", sans-serif;
        font-weight: normal;
        font-size: 14px;
        padding-top: 5px;
    }

    .component-settings__title-container > img {
        vertical-align: middle;
        margin: 0 20px;
    }

    .component-settings__del-input {
        flex: none;
        width: 41px;
        height: 41px;
        background-color: #414252;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background-image: url("./images/settings/close-gray.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 9px;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .component-settings__del-input:hover {
        background-color: #484a5b;
    }

    .component-settings-pricing-options-item .component-settings__del-input {
        height: auto;
        background-position: 50% 17px;
    }

    .component-settings__add-input {
        flex: none;
        width: 41px;
        height: 41px;
        background-color: #3d3e4f;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background-image: url("./images/settings/plus-red.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 12px;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .component-settings__add-input:hover {
        background-color: #484a5b;
    }

    .component-settings__input {
        margin-top: 0;
        border-radius: 0;
    }

    .component-settings__input_add {
        color: #fe544b;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        margin-bottom: 8px;
        padding-left: 49px !important;
    }

    .component-settings__checkbox-container,
    .component-settings__radio-container {
        position: relative;
        flex: none;
        width: 41px;
        height: 41px;
        background-color: #3d3e4f;
        margin: 0;
    }

    .component-settings-pricing-options-item .component-settings__checkbox-container,
    .component-settings-pricing-options-item .component-settings__radio-container {
        height: auto;
    }

    .component-settings__checkbox-container .custom-checkbox,
    .component-settings__checkbox-container .custom-radio, .component-settings__radio-container .custom-checkbox,
    .component-settings__radio-container .custom-radio {
        top: 11px;
        left: 12px;
        cursor: pointer;
    }

    .component-settings__checkbox-container .custom-checkbox + label,
    .component-settings__checkbox-container .custom-radio + label, .component-settings__radio-container .custom-checkbox + label,
    .component-settings__radio-container .custom-radio + label {
        top: 11px;
        left: 12px;
        padding-left: 0;
    }

    .components-panel-open .slide-part,
    .editor-panel-open .slide-part {
        width: 850px;
    }

    @media (min-width: 1440px) {
        .components-panel-open .slide-part,
        .editor-panel-open .slide-part {
            width: calc(100% - 572px);
        }
    }

    .components-panel-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }

    .components-panel .tabs {
        margin-top: 0px;
        overflow: hidden;
    }

    .components-panel .tabs .components-panel__section {
        padding: 0;
    }

    .components-panel .tab {
        width: 100%;
        margin-bottom: 0;
    }

    .components-panel .tab-label {
        display: flex;
        justify-content: space-between;
        padding: 18px 0;
        font-weight: 500;
        color: #9699ab;
        cursor: pointer;
        text-transform: uppercase;
        /* Icon */
    }

    .components-panel .tab-label:hover {
        background: none;
    }

    .components-panel .tab-label::before {
        display: none;
    }

    .components-panel .tab-content {
        padding: 0;
        color: #fff;
        background: #323341;
        border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .components-panel .tab-close {
        display: flex;
        justify-content: flex-end;
        padding: 0;
        font-size: 0.75em;
        background: red;
        cursor: pointer;
    }

    .components-panel .tab-close:hover {
        background: #cc0000;
    }

    .components-panel input:checked + .tab-label {
        background: none;
    }

    .components-panel input:checked + .tab-label::after {
        transform: rotate(180deg);
    }

    .price_row {
        display: flex;
        flex-wrap: wrap;
    }

    .price_row .constructor__price-container {
        width: 31.4%;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .price_row .constructor__price-container:first-child {
        margin-top: 10px;
    }

    .price_row .constructor__price-container:nth-child(3n+3) {
        margin-right: 0;
    }

    .price_row .constructor__price-container .custom-radio + label {
        display: block;
        margin-top: 33px;
        padding-left: 0;
    }

    .price_row .constructor__price-container .custom-radio + label:before {
        top: -31px;
    }

    .price_row .constructor__price-container .custom-radio:checked + label:after {
        top: -25px;
    }

    .price_row .constructor__price-container .constructor__component-description {
        padding-left: 0;
        margin-top: 6px;
    }

    .price_row .constructor__price-container .price__price-block {
        /*margin-top: 13px;*/
        top: 17px;
    }

    .constructor__price-container {
        position: relative;
        margin-top: 6px;
        padding: 16px 17px;
        border: 2px solid #e9ebec;
        border-radius: 5px;
    }

    .constructor__price-container:first-child {
        margin-top: 10px;
    }

    .constructor__price-container .constructor__radio-container {
        margin-bottom: 0;
    }

    .constructor__price-container .custom-radio + label {
        font-weight: 500;
        font-size: 14px;
        padding-left: 36px;
    }

    .constructor__price-container .constructor__component-description {
        padding-left: 36px;
        margin-top: 3px;
    }

    .constructor__price-container .price__price-block {
        color: #fe544b;
        font-size: 14px;
        font-weight: bold;
        position: absolute;
        top: 19px;
        right: 17px;
    }

    .components-panel input:checked ~ .tab-content .component-settings__section,
    .components-panel input:checked ~ .tab-content .component-settings__section-help {
        margin-bottom: 10px;
    }

    .component-settings-pricing-options-item .constructor__price-container {
        width: 100%;
        position: relative;
        margin: 0;
        padding: 14px 10px 10px 0;
        border: none;
        border-radius: 0;
        background-color: #3d3e4f;
    }

    .component-settings-pricing-options-item .constructor__price-container .constructor__checkbox-container {
        margin-bottom: 8px;
        font-family: "IBM Plex Sans", sans-serif;
    }

    .component-settings-pricing-options-item .constructor__price-container .custom-checkbox + label {
        color: #9699ab;
        font-weight: bold;
        padding-left: 30px;
        font-size: 12px;
    }

    .component-settings-pricing-options-item .constructor__price-container .custom-checkbox + label:before {
        top: -1px;
    }

    .component-settings-pricing-options-item .constructor__price-container .custom-checkbox:checked + label:after {
        top: 5px;
    }

    .component-settings-pricing-options-item .constructor__component-description {
        font-size: 12px;
        color: #9699ab;
        font-weight: normal;
        padding-left: 0;
        font-family: "IBM Plex Sans", sans-serif;
    }

    .component-settings-pricing-options-item .price__price-block {
        position: absolute;
        top: 12px;
        right: 10px;
        font-size: 13px;
        color: #ffffff;
        font-family: "IBM Plex Sans", sans-serif;
    }

    .component-settings-pricing-options-item .price__price-block span {
        color: #5f6070;
        font-weight: normal;
        padding-right: 5px;
    }

    .component-settings__section .option-set__item .component-settings__custom_select {
        padding-top: 0;
    }

    .component-settings-panel-open .slide-part {
        width: calc(100% - 572px);
        min-width: 850px;
    }

    .component-settings-panel-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }
    .component-settings-panel-open .components-panel-settings {
        display: block;
    }

    .component-settings-panel-input-open .slide-part {
        width: 800px;
    }
    @media (min-width: 1920px) {
        .component-settings-panel-input-open .slide-part {
            width: calc(100% - 572px);
        }
    }
    .component-settings-panel-input-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }
    .component-settings-panel-input-open .components-panel-settings-input {
        display: block;
    }

    .component-settings-panel-submit-open .slide-part {
        width: 800px;
    }
    @media (min-width: 1920px) {
        .component-settings-panel-submit-open .slide-part {
            width: calc(100% - 572px);
        }
    }
    .component-settings-panel-submit-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }
    .component-settings-panel-submit-open .components-panel-settings-submit {
        display: block;
    }

    .component-settings-panel-country-open .slide-part {
        width: 800px;
    }
    @media (min-width: 1920px) {
        .component-settings-panel-country-open .slide-part {
            width: calc(100% - 572px);
        }
    }
    .component-settings-panel-country-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }
    .component-settings-panel-country-open .components-panel-settings-country {
        display: block;
    }

    .component-settings-panel-states-open .slide-part {
        width: 800px;
    }
    @media (min-width: 1920px) {
        .component-settings-panel-states-open .slide-part {
            width: calc(100% - 572px);
        }
    }
    .component-settings-panel-states-open .components-panel {
        position: absolute;
        right: 0;
        visibility: visible;
        opacity: 1;
    }
    .component-settings-panel-states-open .components-panel-settings-states {
        display: block;
    }

    .component-settings-panel-actions-open .slide-part {
        width: 800px;
    }

    @media (min-width: 1920px) {
        .component-settings-panel-actions-open .slide-part {
            width: calc(100% - 572px);
        }
    }

    .component-settings-panel-actions-open .components-panel {
        right: 0;
        visibility: visible;
        opacity: 1;
    }

    .option-set__item {
        padding-right: 5px;
    }

    .option-set__item:last-child {
        flex: none;
        width: 180px;
        padding-right: 0;
        padding-left: 5px;
    }

    .option-set__item input {
        margin-top: 0;
    }

    /* table styles */
    table {
        width: 100%;
        margin: 20px auto;
        border-color: #dcdde3;
    }

    table,
    td,
    th {
        border-collapse: collapse;
        color: #50525e;
    }

    th,
    td {
        padding: 10px;
        border: solid 1px #dcdde3;
        text-align: center;
    }

    th {
        color: #3a3d50;
    }

    th:first-child,
    th:last-child,
    td:first-child,
    td:last-child {
        width: 10%;
    }

    .table__title {
        color: #72747c;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
    }

    .short-statistics {
        margin: 30px 0 10px;
    }

    .short-statistics_responses {
        margin: 30px 0 25px;
    }

    .short-statistics__row, .short-statistics__info {
        display: flex;
        justify-content: space-between;
    }

    .short-statistics__info {
        align-items: center;
        margin-top: 11px;
    }

    .short-statistics__item {
        width: 32.6%;
    }

    .short-statistics__title {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        color: #72747c;
    }

    .short-statistics__chart {
        width: 99px;
        height: 42px;
        margin-right: 20px;
    }

    .short-statistics__number {
        position: relative;
        color: #393d56;
        line-height: 1;
        font-size: 54px;
        font-weight: bold;
    }

    .short-statistics__number span {
        bottom: 10px;
        font-size: 15px;
        margin-left: -12px;
    }

    .short-statistics__number_red {
        color: #fe544b;
    }

    .exported {
        margin-top: 25px;
    }

    .exported .exported__buttons {
        text-align: right;
        padding-right: 40px;
        margin-top: 10px;
    }

    .exported__title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .exported__item_flex {
        display: flex;
        align-items: center;
    }

    .exported__item-block {
        width: 33%;
        margin: 0 5px;
    }

    .exported__item-block_right {
        text-align: right;
    }

    .exported__item-block:first-child {
        margin-left: 0;
    }

    .exported__item-block:last-child {
        margin-right: 0;
    }

    .exported__title {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 24px;
        color: #363844;
    }

    .exported__block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0;
    }

    .exported__block_no_files {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin: 32px 0;
    }

    .exported__block_no_files .title {
        color: #334155;
        font-weight: 600;
        font-size: 22px;
        margin: 0 0 10px 0;
    }

    .exported__block_no_files p {
        color: #64748b;
        font-size: 16px;
        margin: 12px 0 0 0;
        max-width: 510px;
        text-align: center;
    }



    .exported__block:first-child {
        margin-top: 0;
    }

    .exported__text-dark {
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #3a3d50;
    }

    .exported__text-grey {
        margin-top: 5px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #8a8c94;
    }

    .exported__text-grey span {
        padding-right: 10px;
    }

    .exported__loader {
        display: inline-block;
        position: relative;
        background-color: #f3f4f8;
        padding: 10px 15px;
        border-radius: 5px;
    }

    .exported__loader-text {
        margin-left: 36px;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #c2c4cc;
    }

    .exported__alert {
        position: relative;
        color: #fff;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 20px;
        text-align: center;
        padding: 16px 50px;
        line-height: 1.3;
    }

    .exported__alert_success {
        background-color: #48c45a;
    }

    .exported__alert_danger {
        background-color: #e84e4e;
    }

    .exported__alert_warning {
        background-color: #e79c05;
    }

    .exported__alert .show {
    }

    .exported__alert-close {
        position: absolute;
        background-image: url("./images/del-white.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        width: 12px;
        height: 12px;
        top: 50%;
        right: 25px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .exported__overlay-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(255, 255, 255, 0.6);
    }

    .exported__content-empty {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #9d9ea6;
        font-size: 14px;
    }

    .exported__content-empty:before {
        content: "";
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 33px;
        background-image: url("./images/empty.png");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
    }

    .exported_empty .btn__exported:hover {
        background-color: #fe544b;
    }

    .exported_empty .exported__title-row {
        padding-bottom: 20px;
        border-bottom: 1px solid #dcdde3;
    }

    .exported_empty .exported__overlay-btn {
    }

    .exported_empty .exported__content {
    }

    .exported_empty .exported__content-empty {
    }

    .lds-spinner {
        color: #c2c4cc;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-25%);
        width: 20px;
        height: 20px;
    }

    .lds-spinner div {
        transform-origin: 4px 4px;
        animation: lds-spinner 0.7s linear infinite;
    }

    .lds-spinner div:after {
        content: " ";
        display: block;
        position: absolute;
        top: 3px;
        left: 7px;
        width: 6px;
        height: 2px;
        border-radius: 20%;
        background: #c2c4cc;
        transform: rotate(0deg);
        animation-delay: -0.7s;
    }

    .lds-spinner div:nth-child(2) {
        transform: rotate(45deg);
        animation-delay: -0.6s;
    }

    .lds-spinner div:nth-child(3) {
        transform: rotate(90deg);
        animation-delay: -0.5s;
    }

    .lds-spinner div:nth-child(4) {
        transform: rotate(135deg);
        animation-delay: -0.4s;
    }

    .lds-spinner div:nth-child(5) {
        transform: rotate(180deg);
        animation-delay: -0.3s;
    }

    .lds-spinner div:nth-child(6) {
        transform: rotate(225deg);
        animation-delay: -0.2s;
    }

    .lds-spinner div:nth-child(7) {
        transform: rotate(270deg);
        animation-delay: -0.1s;
    }

    .lds-spinner div:nth-child(8) {
        transform: rotate(315deg);
        animation-delay: 0s;
    }

    @keyframes lds-spinner {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .banner-feature {
        position: relative;
        padding: 21px 30px;
        background-color: #484c62;
        color: #fff;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.3;
    }

    .banner-feature__link {
        color: #4ba7f6;
        font-family: "IBM Plex Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-decoration: underline;
        padding: 0 15px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .banner-feature__link:hover {
        text-decoration: none;
    }

    .banner-feature__text-underline {
        text-decoration: underline;
    }

    .banner-feature__close {
        position: absolute;
        background-image: url("./images/del-white.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        width: 12px;
        height: 12px;
        top: 50%;
        right: 25px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .banner-feature .show {
    }

    .ef-empty-submissions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e3e8ee;
        margin: 32px 0;
        box-shadow: 0 2px 8px 0 rgba(60,60,60,0.04);
        text-align: center;
    }

    .ef-empty-submissions__icon { margin-bottom: 16px; }
    .ef-empty-submissions__bg { fill: #e3e8ee; }
    .ef-empty-submissions__line { stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; }
    .ef-empty-submissions__rect { stroke: #94a3b8; stroke-width: 2; }

    .ef-empty-submissions__title {
    color: #334155;
    font-weight: 600;
    font-size: 22px;
    margin: 0;
    }

    .ef-empty-submissions__text {
    color: #64748b;
    font-size: 16px;
    margin: 12px 0 0 0;
    max-width: 500px;
    }
}

// @TODO: find the way to open react select menu inside #epicforms container to avoid CSS styles duplication.
.select__menu-portal {
  /* For React Select with menu portal target set to document body */
  .select__menu {
    width: 100%;
    padding: 0;
    z-index: 20;

    .select__menu-list {
      background-color: inherit;
      z-index: inherit;

      .select__option {
        font-weight: normal;
        background-color: inherit;
        padding: 10px 15px;
        z-index: inherit;

        :hover {
          border-radius: 0;
          z-index: inherit;
        }

        &.select__option--is-focused {
          z-index: inherit;
        }
      }
    }
  }

  .select__menu {
    width: 100%;
    padding: 0;
    background-color: #3d3e4f;

    .select__menu-list {
      background-color: inherit;

      .select__option {
        color: #fff;
        font-weight: normal;
        background-color: inherit;
        padding: 10px 15px;

        :hover {
          border-radius: 0;
        }

        &.select__option--is-focused {
          background-color: #4b4c5e;
        }
      }

      .select__menu-notice--no-options {
        color: #ffffff;
        font-weight: normal;
      }
    }
  }
}