:root {
    --primary-color: #6795F0;
    --primary-color-1B: #6795F01B;
    --primary-color-1B-solid: #edf2fd;
    --primary-color-50: #6795F050;
    --primary-color-C0: #6795f0c0;

    --danger-color-1B: #ff00001B;
    --danger-color-50: #ff000050;

    --green-color: #2E8B57;
}

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

#screenshot-iframe {
    display: none;
    width: 1024px;
    height: 576px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* custom scrollbar */
.bwe-scrollbar::-webkit-scrollbar {
    width: 20px;
}

.bwe-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.bwe-scrollbar::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

.bwe-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

::-moz-selection {
    background: var(--primary-color-50);
}

::selection {
    background: var(--primary-color-50);
}

/* range slider */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.h-80 {
    height: 80px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #ddd;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #ddd;
}

input[type=range]::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3f3f3f;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-top: -7px;
}

input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3f3f3f;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-top: -7px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ddd;
}

input[type=range]:focus::-moz-range-track {
    background: #ddd;
}

input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb {
    background: #3f3f3f;
    outline: none;
    box-shadow: none;
}

input[type=range]:focus::-moz-range-thumb,
input[type=range]:active::-moz-range-thumb {
    background: #3f3f3f;
    outline: none;
    box-shadow: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:-moz-focusring {
    outline: none;
}

.sidebar-loading-container {
    display: none;
    background-color: #1a2026;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding: 12px;
}

.loading-container {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 20;
}

.loading-icon {
    width: 60px;
    height: 60px;
    border: 10px solid #ccc;
    border-top: 10px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


h1 {
    font-size: 34px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

.bw-h-px-100 {
    height: 100px;
}

.bw-h-px-150 {
    height: 150px;
}

.bw-h-px-200 {
    height: 200px;
}

.form-select {
    border-radius: 12px;
}
.font-open-sans {
    font-family: 'Open Sans', sans-serif;
}
.font-arial {
    font-family: 'Arial', sans-serif;
}
.font-helvetica {
    font-family: 'Helvetica', sans-serif;
}
.font-times-new-roman {
    font-family: 'Times New Roman', sans-serif;
}
.font-georgia {
    font-family: 'Georgia', sans-serif;
}
.font-tahoma {
    font-family: 'Tahoma', sans-serif;
}
.font-verdana {
    font-family: 'Verdana', sans-serif;
}
.font-courier-new {
    font-family: 'Courier New', sans-serif;
}
.font-trebuchet-ms {
    font-family: 'Trebuchet MS', sans-serif;
}

html,
body {
    font-family: 'Arial', sans-serif;
    color: #222;
}

#builder {
    display: flex;
    background-color: #131415;
}

#editor-area {
    flex: 1;
    height: 100vh;
}

#browser-area {
    height: calc(100vh - 61px);
    margin: 10px 50px 4px 40px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
}

#browser-app {
    width: calc(100% + 10px);
    height: 100%;
    overflow: hidden;

    padding-left: 10px;
    margin-left: -10px;
}

#content-editor {
    min-height: 100%;
    position: relative;
    width: 100%;
}

#browser-app .browser-nav {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #eee;
    display: flex;
    align-items: center;
    padding-top: 2px;
}

#browser-app .browser-nav .browser-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px;
    pointer-events: none;
}

#browser-app .browser-nav .browser-dots>span {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #888;
    margin: 3px;
}

#browser-app .browser-nav .navigation-bar {
    flex: 1;
    display: flex;
    margin-right: 12px;
    background-color: #fff;
    border-radius: 25px;
    overflow: hidden;
}

#browser-app .browser-nav .navigation-bar .secure-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#browser-app .browser-nav .navigation-bar .secure-icon .secure-icon-svg {
    color: #50c878;
    font-size: 14px;
}

#browser-app .browser-nav .navigation-bar input {
    flex: 1;
    padding-right: 10px;
    border: 0;
    outline: none;
    font-size: 14px;
    color: #444;
    overflow: auto;
}

#sidebar {
    width: 350px;
    background-color: rgba(28, 28, 30, 1);
    height: 100vh;
    display: flex;
}

#sidebar .box-one {
    border-right: 1px solid var(--primary-color-1B);
    background-color: rgba(28, 28, 30, 1);
    width: 60px;
    display: flex;
    flex-direction: column;
}

#sidebar .box-one .item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(44, 44, 46, 1);
    height: 48px;
    width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 6px 0;
}

#sidebar .box-one .item i {
    color: rgba(199, 199, 204, 1);
    font-size: 20px;
    display: block;
}

#sidebar .box-one .item.active i,
#sidebar .box-one .item:hover i {
    color: var(--primary-color);
}

#sidebar .back-btn {
    height: 60px;
    color: rgba(174, 174, 178, 1);
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#sidebar .box-one-content {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#sidebar .box-two {
    flex: 1;
    position: relative;
}

#sidebar .box-two #sidebar-content-box {
    height: calc(100vh - 140px);
}

#sidebar .box-two #sidebar-content-items {
    overflow-y: auto;
    height: 40%;
}

#sidebar .box-two #sidebar-content {
    height: 100%;
    overflow-y: auto;
}

#sidebar .box-two #sidebar-content .element-options {
    margin-top: 12px;
    padding: 0 12px;
}

#sidebar .box-two #sidebar-content .element-options .item {
    color: #ffffffe3;
    font-size: 18px;
    margin: 12px 0;
}

#sidebar .box-two #sidebar-content .element-options .item button {
    border: 0;
    border-radius: 8px;
}

#sidebar .box-two #sidebar-content .element-options .item button i {
    pointer-events: none;
}

#sidebar .box-two .element-options-title {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    background-color: #2c2c2c;
}

#sidebar .box-two .publish-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 80px;
    display: flex;
    align-items: center;
}

#sidebar .box-two .publish-section button {
    border: 0;
    display: block;
    border-radius: 10px;
}

#sidebar .box-two .publish-section button.btn-preview {
    background: rgba(118, 118, 128, 0.24);
    color: #aeaeb2;
    font-size: 16px;
    height: 48px;
    width: 48px;
    margin-left: 16px;
    margin-right: 12px;
}

#sidebar .box-two .publish-section button.btn-publish {
    background: var(--primary-color);
    font-weight: bold;
    font-size: 17px;
    padding: 12px 0;
    color: #fff;
    flex: 1;
    margin: 0 16px;
}

.bwe-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(34, 34, 34, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bwe-popup-content {
    width: 90%;
    height: 90%;
    background: #222;
    border: 1px solid #444;
    border-radius: 32px;
    overflow-y: auto;
}

#popup-import-module .popup-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 70px;
}

#popup-import-module .popup-header .close-icon {
    width: 70px;
    text-align: center;
}

#popup-import-module .popup-header .close-icon .close-icon-svg {
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}

#popup-import-module .popup-header .close-icon .close-icon-svg:hover {
    color: #ff1a1a;
}

#popup-import-module .popup-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 12px;
    background: #222;
    overflow: hidden;
}

#popup-import-module .popup-cat-list>li {
    cursor: pointer;
    color: #f1f1f1;
    padding: 4px 0;
    padding-left: 10px;
    background-color: #111;
}

#popup-import-module .popup-cat-list>li.active,
#popup-import-module .popup-cat-list li:hover {
    background: #888;
}

#popup-import-module .module-items {
    display: flex;
    flex-wrap: wrap;
}

#popup-import-module .module-items .item {
    margin: 6px;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#popup-import-module .module-items .item img {
    border-radius: 12px;
}

#bwe-empty-box .container .row {
    border-radius: 22px;
    background-color: #bbb;
    padding: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 40px;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 14px;
    border: 8px dashed #444;
}

.editor-section-item {
    position: relative;
    min-height: 60px;
}

.editor-section-item.selected::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    background: var(--green-color);
    height: 100%;
    width: 2px;
    pointer-events: none;
    border-radius: 1px;
}

@keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}



.editor-section-item img {
    max-width: 100%;
}

.editor-section-item .hoverDOM {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid var(--primary-color);
    position: absolute;
    pointer-events: none;
}

.editor-section-item .hoverDOM .dom-section-options {
    display: flex;
    height: 100%;
}

.editor-section-item .hoverDOM .dom-section-options .add-module-button {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.editor-section-item .hoverDOM .dom-section-options .add-module-button>div button {
    position: relative;
    border: 0;
    background: var(--primary-color-1B-solid);
    color: var(--primary-color);
    z-index: 1;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 12px;
}

.editor-section-item.tools-sm .hoverDOM .dom-section-options .add-module-button>div button {
    font-size: 16px;
    height: 28px;
    padding: 0 8px;
}

.editor-section-item.tools-sm .hoverDOM .dom-section-options .add-module-button>div button span {
    font-size: 12px;
}

.editor-section-item .hoverDOM .dom-section-options .add-module-button>div button.top {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.editor-section-item .hoverDOM .dom-section-options .add-module-button>div button.bottom {
    cursor: pointer;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.editor-section-item .hoverDOM .dom-section-options .add-module-button div button span {
    font-size: 14px;
    padding-left: 4px;
}

.editor-section-item .hoverDOM .dom-section-options .tools {
    position: absolute;
    font-size: 20px;
    text-align: center;
    color: #fff;
    margin-right: 12px;
    margin-top: 12px;
    right: 0;
    top: 0;
    z-index: 101;
}

.editor-section-item.tools-sm .dom-section-options .tools {
    display: flex;
}

.editor-section-item .hoverDOM .dom-section-options .tools div {
    margin-bottom: 4px;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto !important;
    background: var(--primary-color-1B-solid);
    color: var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-section-item.tools-sm .dom-section-options .tools div {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin-bottom: 0;
    margin-left: 4px;
}

.editor-section-item .hoverDOM .dom-section-options .tools div:hover {
    background: var(--primary-color-50);
}

.editor-section-item .hoverDOM .dom-section-options .tools div.bwe-remove-section-icon {
    color: var(--danger-color-50);
}

.editor-section-item .hoverDOM .dom-section-options .tools div.bwe-remove-section-icon:hover {
    background: var(--danger-color-50);
    color: #fff;
}

.editor-section-item .hover-slider-DOM {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid var(--primary-color);
    position: absolute;
    pointer-events: none;
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options {
    display: flex;
    height: 100%;
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options .tools {
    position: absolute;
    font-size: 20px;
    text-align: center;
    color: #fff;
    margin-right: 12px;
    margin-top: 12px;
    right: 0;
    top: 0;
    z-index: 101;
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options .tools div {
    margin-bottom: 4px;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto !important;
    background: var(--primary-color-1B-solid);
    color: var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options .tools div:hover {
    background: var(--primary-color-50);
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options .tools div.bwe-remove-section-icon {
    color: var(--danger-color-50);
}

.editor-section-item .hover-slider-DOM .dom-section-slider-options .tools div.bwe-remove-section-icon:hover {
    background: var(--danger-color-50);
    color: #fff;
}


.pickr .pcr-button::before {
    background: none;
}

.pickr .pcr-button::after {
    outline: none;
    cursor: pointer;
    height: 32px;
    width: 32px;
    border-radius: 8px;
    border: 2px solid #3f3f3f;
}

.pickr input:focus,
.pickr input.pcr-active,
.pickr button:focus,
.pickr button.pcr-active,
.pcr-app input:focus,
.pcr-app input.pcr-active,
.pcr-app button:focus,
.pcr-app button.pcr-active {
    box-shadow: none !important;
}

.bwe-background-color>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}

.bwe-text-color>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}

.bwe-border-color>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}

.bwe-text-align button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-text-align button.active,
.bwe-text-align button:hover {
    background-color: #3f3f3f;
}

.bwe-text-style button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-text-style button.active,
.bwe-text-style button:hover {
    background-color: #3f3f3f;
}

.bwe-image-tools button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-image-tools button.active,
.bwe-image-tools button:hover {
    background-color: #3f3f3f;
}

.bwe-button-element,
.bwe-button-element:active,
.bwe-button-element:focus,
.bwe-button-element:focus-within {
    box-shadow: none;
    outline: none;
    border: 0;
    color: #fff;
    background-color: #3f3f3f;
    border-radius: 6px;
}

.bwe-select-element,
.bwe-select-element:active,
.bwe-select-element:focus,
.bwe-select-element:focus-within {
    box-shadow: none;
    outline: none;

    border: 0;
    color: #fff;
    background-color: #3f3f3f;
    border-radius: 6px;
}

.bwe-clear-format button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-clear-format button:hover {
    background-color: #3f3f3f;
}

.bwe-list button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-list button.active,
.bwe-list button:hover {
    background-color: #3f3f3f;
}

.bwe-border-radius button,
.bwe-font-size button {
    border: 0;
    color: #fff;
    background-color: transparent;
    font-size: 14px;
    padding: 4px 6px;
}

.bwe-border-radius button.active,
.bwe-font-size button.active {
    background-color: #3f3f3f;
}

.bwe-href button {
    border: 0;
    color: #fff;
    background-color: transparent;
}

.bwe-href button {
    font-size: 14px;
    padding: 4px 6px;
}

.bwe-href button.active {
    background-color: #3f3f3f;
}


.bwe-layout-type>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}

.bwe-layout-type .ql-clipboard {
    display: none;
}

.bwe-text .ql-editor {
    position: relative;
}

.bwe-text .ql-editor:focus-visible {
    outline: none !important;
}

.bwe-text .ql-editor:hover {
    cursor: text;
}

.bwe-button {
    position: relative;
}

.bwe-text .ql-editor:hover::after,
.bwe-text .ql-editor:focus-visible::after,
.bwe-button:hover::after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px solid var(--primary-color);
    pointer-events: none;
}

.bwe-element {
    position: relative;
}
.bwe-element:hover::after, .bwe-element.item-selected::after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px solid var(--primary-color);
    pointer-events: none;
}

#bwe-image-editor>img {
    width: 100%;
}

.bwe-image-dropzone {
    background-color: #151b21;
    border: 2px dashed #ccc;
    width: 100%;
    height: 110px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.bwe-image-dropzone div {
    pointer-events: none;
}

.bw-toast {
    position: absolute;
    z-index: 100;
    bottom: 0;
    right: 0;
    background: #fff;
    padding: 16px;
    margin: 16px;
    animation: drop 0.5s 1;
}

.bw-toast.info {
    background: var(--primary-color);
    color: #fff;
}

.bw-toast.danger {
    background: #ac2d2d;
    color: #fff;
}

@keyframes drop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.ql-size-xs {
    font-size: 12px;
}

.ql-size-s {
    font-size: 14px;
}

.ql-size-m {
    font-size: 16px;
}

.ql-size-l {
    font-size: 18px;
}

.ql-size-xl {
    font-size: 20px;
}

.ql-size-xxl {
    font-size: 24px;
}

.ql-size-xxxl {
    font-size: 28px;
}

.bwe-navbar .hoverDOM>div>div {
    display: none !important;
}

.bwe-text-input {
    background: #3f3f3f;
    color: #fff;
    border: 0;
}

.bwe-text-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #3f3f3f !important;
    color: #fff;
}

.bwe-file-input {
    background: #3f3f3f;
    color: #fff;
    border: 0;
}

.bwe-file-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #3f3f3f !important;
    color: #fff;
}

.btn-change-domain {
    font-size: 14px;
    border-radius: 200px;
    background: rgba(103, 149, 240, 0.12);
    border: 0;
    color: var(--primary-color);
    padding: 0 12px;
}

#responsive-area {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    cursor: default;
}

#responsive-area button {
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    font-size: 18px;
    width: 42px;
    padding: 4px 0;
}

#responsive-area button.active,
#responsive-area button:hover {
    background-color: #3f3f3f;
}

.bwe-menu-items {
    margin-top: 12px;
    padding: 0 12px;
}

.bwe-menu-items ul {
    list-style: none;
    padding: 0;
}

.bwe-menu-items ul li {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 6px;
}

.bwe-menu-items ul li span {
    color: #fff;
}

.bwe-menu-items ul li span>i {
    display: block;
    cursor: pointer;
}

.bwe-menu-items ul li span>i:hover {
    color: var(--primary-color);
}

.bwe-menu-items ul li input {
    border: 0;
    color: #fff;
    background-color: #3f3f3f;
    border-radius: 6px;
    margin-left: 8px;
    padding-right: 70px;
}

.bwe-menu-items ul li input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #3f3f3f !important;
    color: #fff;
}

.bwe-menu-items ul li>i {
    cursor: pointer;
}

.bwe-menu-items ul li>i.bwe-page-visibility {
    position: absolute;
    right: 24px;
    color: #fff;
}

.bwe-menu-items ul li>i.bwe-page-edit {
    position: absolute;
    right: 70px;
    color: #fff;
}

.bwe-menu-items ul li>i.bwe-page-clone {
    position: absolute;
    right: 49px;
    color: #fff;
}

.bwe-menu-items ul li>i.bwe-page-remove {
    right: 8px;
    padding-left: 4px;
    color: #ff2b2b;
}

#iframe-content-editor {
    width: calc(100% + 10px);
    height: calc(100% - 8px);
    margin-left: -10px;
    margin-bottom: 8px;
    padding-bottom: 36px;
}

.bwe-menu-items ul li:first-child span i.bwe-page-move-up,
.bwe-menu-items ul li:last-child span i.bwe-page-move-down {
    opacity: 0.4;
    pointer-events: none;
}

.bwe-menu-items ul li.active input {
    background: var(--primary-color);
}

.pcr-app.visible,
.pcr-app {
    left: 84px !important;
}

.module-items-action {
    display: flex;
    margin-top: 4px;
}

.module-items-action div {
    flex: 1;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.module-items-action button {
    border: 0;
    border-radius: 6px;
    width: 68px;
    background: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    padding: 6px 0;
    color: #fff;
}

.bwe-text a {
    border-bottom: 1px dashed var(--primary-color) !important;
}

.bwe-add-new-page {
    background: var(--primary-color);
    border: 0;
}

.bwe-add-new-page:hover {
    background: var(--primary-color-C0);
    border: 0;
}

.bwe-tab-menu-config>div {
    color: #ffffffe3;
    font-size: 16px;
    margin: 6px 0;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

.ql-clipboard {
    display: none;
}

.bwe-swiper-nav {
    display: none;
    position: absolute;
    z-index: 101;
    background: var(--primary-color-C0);
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    border-radius: 8px;
}

.editor-section-item:hover .bwe-swiper-nav {
    display: flex;
}

.bwe-swiper-nav>div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    text-align: center;
    width: 30px;
}
.bwe-check-sides {
    background-color: var(--primary-color);
}
.form-switch .bwe-check-sides {
    background-position: left center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .bwe-check-sides:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.cursor-pointer {
    cursor: pointer;
}
.ud-option {
    cursor: pointer;
}
.ud-title i {
    font-size: 12px;
    color: #aaa;
}
.bwe-no-text-selected {
    color: #f2f2f2;
}
.hide-on-email {
    display: none !important;
}
#content-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#content-editor > section {
    max-width: 600px;
    width: 100%;
}