/*Pages*/
@import "Pages/_privacyPolicy.css";
@import "Pages/_faq.css";
@import "Pages/_about.css";
@import "Pages/_ourTeam.css";
@import "Pages/_layout.css";
@import "Pages/_home.css";
@import "Pages/_contactUs.css";
@import "Pages/_tutorial.css";
@import "Pages/_disclaimer.css";
@import "Pages/_termsOfService.css";
@import "Pages/_error.css";
@import "Pages/_products.css";
@import "Pages/_product.css";
@import "Pages/_profile.css";
@import "Pages/_signInPanel.css";
@import "Pages/getInspiredDetailedPage.css";
@import "Pages/getInspired.css";
@import "_nav.css";
@import "_footer.css";


html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.max-width-400 {
    max-width: 400px;
}

.max-width-580 {
    max-width: 580px;
}

.max-width-550 {
    max-width: 550px;
}

.w-800 {
    width: 800px;
}
.max-width-1230 {
    max-width: 1230px !important;
}

.body-footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 93vh;
}

.body-footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 93vh;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/*body {
  margin-bottom: 60px;
}*/

.proximaNova-font {
    font-family: 'proxima-nova', sans-serif;
}

.inter-font {
    font-family: 'Inter', sans-serif;
}

.letter-spacing-neg-2 {
    letter-spacing: -0.02em;
}

.ql-size-small {
    font-size: 0.75em;
}

.ql-size-large {
    font-size: 1.5em;
}

.ql-size-huge {
    font-size: 2.5em;
}

/* (Optional) Text Alignments */
.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

.header-line-height {
    line-height: 3.5rem;
}

.line-height-24 {
    line-height: 1.5rem;
}

.line-height-28 {
    line-height: 1.75rem;
}

.container-960 {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}

.cursor-pointer {
    cursor: pointer;
}

.mdo-bg-blue {
    background-color: #004EBA;
}
.mdo-bg-light-blue {
    background-color: #4186F4;
}

.mdo-text-blue {
    color: #004EBA;
}

.mdo-text-light-blue {
    color: #4186F4;
}

.mdo-bg-blue:hover {
    background-color: #004EBA;
}

.semibold-sm {
    font-weight: 500;
}

.semibold-lg {
    font-weight: 600;
}

.top-header {
    font-weight: 800;
    font-size: 3.25rem;
    margin: 0;
    font-family: 'proxima-nova', sans-serif;
    letter-spacing: -0.02em;
    line-height: 3.5rem;
}

.top-header-inpiration {
    font-weight: 800;
    font-size: 3.25rem;
    margin: 0;
    font-family: 'proxima-nova', sans-serif;
    letter-spacing: -0.02em;
    line-height: 3.5rem;
}

.bold-subheader {
    font-weight: 800;
    font-size: 2.25rem;
    margin: 0;
    font-family: 'proxima-nova', sans-serif;
    letter-spacing: -0.02em;
    line-height: 2.75rem;
}

.block-subheader {
    font-size: 0.875rem;
    letter-spacing: 1px;
    font-family: "Inter", sans-serif;
    line-height: 1.25rem;
}

.description-text {
    font-size: 1.125rem;
    color: #404040;
    font-family: "Inter", sans-serif;
    line-height: 1.75rem;
}

.subheader-description {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    /*    letter-spacing: -0.02em;*/
    color: #404040;
}


.container {
    max-width: 1504px;
    padding: 0;
}

/*@media only screen and (max-width: 430px) {
    .container {
        max-width: 360px;
        padding: 0;
    }
}*/

/*@media only screen and (min-width:431px) and (max-width: 720px) {
    .container {
        max-width: 430px;*/
        /*padding: 0;*/
    /*}
}*/


/*@media only screen and (min-width:721px) and (max-width: 820px) {
    .container {
        max-width: 720px;*/
        /*padding: 0;*/
    /*}
}

@media only screen and (min-width:821px) and (max-width: 1024px) {
    .container {
        max-width: 890px;*/
        /*padding: 0;*/
    /*}
}

@media only screen and (min-width:1025px) and (max-width: 1300px) {
    .container {
        max-width: 1100px;*/
        /*padding: 0;*/
    /*}
}

@media only screen and (min-width:1301px) and (max-width: 1440px) {
    .container {
        max-width: 1300px;*/
        /*padding: 0;*/
    /*}
}

@media (min-width:1301px) and (max-width: 1440px) {
    .container {
        max-width: 1300px;*/
        /*padding: 0;*/
    /*}
}

@media (min-width:1441px) and (max-width: 1700px) {
    .container {
        max-width: 1504px;*/
        /*padding: 0;*/
    /*}
}

@media (min-width:1701px) and (max-width: 1900px) {
    .container {
        max-width: 1504px;*/
        /*padding: 0;*/
    /*}
}


@media (min-width:1901px) and (max-width: 2048px) {
    .container {
        max-width: 1504px;*/
        /*padding: 0;*/
    /*}
}*/

.form-control::placeholder {
    color: #A3A3A3;
}

.gap-3-rem {
    gap: 3rem;
}

.gap-2-3 {
    gap: 0.75rem;
}

.gap-3-4 {
    gap: 1.25rem;
}

.gap-4-5-sm {
    gap: 2rem;
}

.gap-4-5-lg {
    gap: 2.5rem;
}

.px-3-4 {
    padding-left: 1.25rem;
    padding-right:1.25rem;
}

.py-2-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-5-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-5-rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.px-120 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
}

.my-4-5-sm {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-4-5-lg {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.mt-5-6 {
    margin-top: 3.5rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-20 {
    font-size: 1.25rem;
}

    /* iPhone SE override (up to 375px) */
    @media only screen and (max-width: 375px) {
        .top-header {
            font-size: 34px;
            line-height: 52px;
            /*width: 100%;*/
        }

        .top-header-tutorial {
            font-size: 32px;
            line-height: 40px;
            width: 100%;
        }

        .top-header-inpiration {
            font-size: 34px;
            line-height: 52px;
            width: 100%;
        }
    }


@media only screen and (min-width: 340px) and (max-width: 360px) {
    .bold-subheader {
        font-size: 1.75rem;
    }

    .top-header {
        font-size: 28px;
        line-height: 32px;
        /*width: 70%;*/
    }

    .top-header-inpiration {
        font-size: 28px;
        line-height: 32px;
        width: 70%;
    }
}

@media only screen and (min-width: 361px) and (max-width: 376px) {
    .bold-subheader {
        font-size: 1.75rem;
    }

    .top-header {
        font-size: 28px;
        line-height: 32px;
        /*width: 70%;*/
    }

    .top-header-inpiration {
        font-size: 28px;
        line-height: 32px;
        width: 80%;
    }
}
@media only screen and (max-width: 375px) {
    .top-header-tutorial {
        font-size: 32px;
        line-height: 40px;
        width: 100%;
    }
}

@media only screen and (min-width: 377px) and (max-width: 391px) {
    .top-header {
        font-size: 28px;
        line-height: 32px;
        /*width: 70%;*/
    }

    .top-header-tutorial {
        font-size: 32px;
        line-height: 40px;
        width: 100%;
    }

    .top-header-inpiration {
        font-size: 28px;
        line-height: 32px;
        width: 80%;
    }
}

    @media only screen and (min-width: 392px) and (max-width: 415px) {
        .block-subheader {
            font-size: 0.75rem;
        }

        .bold-subheader {
            font-size: 2rem;
        }

        .top-header {
            font-size: 28px;
            line-height: 32px;
            /*width: 70%;*/
        }

        .top-header-tutorial {
            font-size: 32px;
            line-height: 40px;
            width: 100%;
        }

        .top-header-inpiration {
            font-size: 28px;
            line-height: 32px;
            width: 110%;
        }
    }

@media only screen and (min-width: 416px) and (max-width: 431px) {
    .block-subheader {
        font-size: 0.75rem;
    }

    .bold-subheader {
        font-size: 2rem;
    }

    .top-header {
        font-size: 28px;
        line-height: 32px;
        width: 70%;
    }

    .top-header-tutorial {
        font-size: 32px;
        line-height: 40px;
        width: 100%;
    }

    .top-header-inpiration {
        font-size: 28px;
        line-height: 32px;
        width: 100%;
    }
}

    @media only screen and (min-width:432px) and (max-width: 900px) {
        .block-subheader {
            font-size: 0.75rem;
        }

        .bold-subheader {
            font-size: 2rem;
        }

        .top-header {
            font-size: 44px;
            line-height: 56px;
            width: 100%;
        }

        .top-header-inpiration {
            font-size: 36px;
            line-height: 56px;
            width: 100%;
        }
    }

    @media only screen and (min-width: 835px) and (max-width: 1194px) {
        .top-header {
            font-size: 44px;
            line-height: 56px;
            width: 100%;
        }

        .top-header-inpiration {
            font-size: 48px;
            line-height: 64px;
            width: 100%;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 1024px) {
        .top-header {
            font-size: 48px;
            line-height: 64px;
            width: 100%;
        }

        .top-header-inpiration {
            font-size: 36px;
            line-height: 56px;
            width: 100%;
        }
    }

    @media only screen and (min-width: 1025px) and (max-width: 1180px) {
        .top-header {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-tutorial {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-inpiration {
            font-size: 52px;
            /*width: 400px;*/
            line-height: 56px;
        }
    }

@media only screen and (min-width: 1181px) and (max-width: 1560px) {
    .top-header {
        font-size: 52px;
        line-height: 56px;
        /*width: 400px;*/
    }

    .top-header-tutorial {
        font-size: 52px;
        line-height: 56px;
    }

    .top-header-inpiration {
        font-size: 52px;
        width: 400px;
        line-height: 56px;
    }
}

    @media only screen and (max-width: 375px) {
        .top-header-tutorial {
            font-size: 32px;
            line-height: 40px;
            width: 100%;
        }
    }

    @media only screen and (min-width: 835px) and (max-width: 1194px) {
        .top-header {
            font-size: 48px;
            line-height: 64px;
            width: 100%;
        }
    }

    @media only screen and (min-width: 1195px) (max-width: 1560px) {
        .top-header {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-tutorial {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-inpiration {
            font-size: 52px;
            width: 400px;
            line-height: 56px;
        }
    }

    @media only screen and (min-width: 1561px) and (max-width: 3840px) {
        .top-header {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-tutorial {
            font-size: 52px;
            line-height: 56px;
        }

        .top-header-inpiration {
            font-size: 52px;
            width: 400px;
            line-height: 56px;
        }
    }


    #scanner-wrapper {
        position: relative;
        height: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        #scanner-wrapper #downArrows {
            position: relative;
            bottom: 2.5rem;
            z-index: 999;
        }

        #scanner-wrapper #upArrows {
            z-index: 999;
        }

            #scanner-wrapper #upArrows::before,
            #scanner-wrapper #upArrows::after {
                content: " ";
                width: 20px;
                height: 20px;
                position: absolute;
                top: 10px;
                border-top: #6ec4c2 3px solid;
            }

            #scanner-wrapper #upArrows::before {
                left: 10px;
                border-left: #6ec4c2 3px solid;
            }

            #scanner-wrapper #upArrows::after {
                right: 10px;
                border-right: #6ec4c2 3px solid;
            }

        #scanner-wrapper #downArrows::before,
        #scanner-wrapper #downArrows::after {
            content: " ";
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            border-bottom: #6ec4c2 3px solid;
        }

        #scanner-wrapper #downArrows::before {
            left: 10px;
            border-left: #6ec4c2 3px solid;
        }

        #scanner-wrapper #downArrows::after {
            right: 10px;
            border-right: #6ec4c2 3px solid;
        }

    #scanner-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

        #scanner-container video,
        #scanner-container canvas {
            z-index: 999;
            background-color: #f2f2f2;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #scanner-container canvas {
            z-index: 2;
        }

    .scanArea__freezedFrame {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        img {
        z-index: 1000;
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* === Read-Only Mode Styling (static-content or preview) === */
.editorjs-readonly .ce-tune-alignment--left .image-tool__image-picture {
    float: left !important;
    margin-right: 1rem !important;
    display: block !important;
}

.editorjs-readonly .ce-tune-alignment--right .image-tool__image-picture {
    float: right !important;
    margin-left: 1rem !important;
    display: block !important;
}

.editorjs-readonly .ce-tune-alignment--center .image-tool__image-picture {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

.editorjs-readonly .image-tool__image-picture {
    max-width: 100%;
    height: auto;
}

.editorjs-readonly .image-tool__image {
    display: inline-block !important;
    width: auto !important;
}

.editorjs-readonly .cdx-input.image-tool__caption,
.editorjs-readonly .cdx-input.embed-tool__caption {
    display: none !important;
}

/* === Editor (Edit Mode) Styling Fixes === */
.image-tool__image-picture {
    max-width: 100%;
    height: auto;
}

#editorjs,
.ce-block,
.ce-block__content,
.codex-editor__redactor {
    position: relative;
    overflow: visible !important;
}

.ce-block {
    clear: both;
}

.ce-toolbar__actions,
.ce-settings,
.cdx-settings,
.ce-popover--opened,
.ce-inline-toolbar {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Honor alignment tunes in editor */
#editorjs .ce-tune-alignment--left .image-tool__image-picture {
    float: left !important;
    margin-right: 1rem !important;
}

#editorjs .ce-tune-alignment--right .image-tool__image-picture {
    float: right !important;
    margin-left: 1rem !important;
}

#editorjs .ce-tune-alignment--center .image-tool__image-picture {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide captions in edit mode */
.ce-block .cdx-input.image-tool__caption,
.ce-block .cdx-input.embed-tool__caption,
.ce-block .cdx-input.video-tool__caption {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#editorjs {
    padding: 0 0.5rem !important;
}

.codex-editor {
    padding: 0 2.7rem;
}
/* Container resets */
.editor-wrapper,
#editorjs,
.codex-editor {
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.editor-wrapper,
#editorjs,
#static-content,
#preview-container {
    max-width: 800px !important;
    width: 100% !important;
    margin: 1.5rem auto !important;
}

#static-content,
#preview-container {
    padding: 0;
    overflow: visible;
}

/*.post-content.wide-content {
    max-width: 800px;
    margin: 0 auto;
}*/

.blog-post .editor-wrapper,
.blog-post #editorjs,
.blog-post #static-content,
.blog-post #preview-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.product-mention {
    border-bottom: none !important;
    padding: 0 2px !important;
    cursor: text;
}

.editor-canvas {
    width: 100%;
    max-width: 800px;
    min-height: 400px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    margin-top: 1rem;
}

#static-content .ce-block,
#preview-container .ce-block {
    position: relative;
}

.block-edit-icon {
    position: absolute;
    top: 8px;
    left: 4px;
    right: auto;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

    .block-edit-icon i {
        font-size: 0.9rem;
        color: #333;
    }

.ce-block + .ce-block {
    clear: both;
}

.two-col-block {
    display: flex;
    gap: 1rem;
    margin: 1em 0;
    align-items: stretch;
}

    .two-col-block .col-left,
    .two-col-block .col-right {
        flex: 1 1 0;
    }

    /* NORMAL MODE: image on left is centered, text on right flows */
    .two-col-block .col-left {
        display: flex;
        align-items: center;
        justify-content: center;
    }

#editorjs .two-col-block .col-right {
    border: none !important;
    padding-bottom: 0 !important;
}

/* === Read-Only Two-Column === */
.editorjs-readonly .two-col-block {
    display: flex !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
    align-items: stretch !important;
    padding: 1rem 0 !important;
}

    .editorjs-readonly .two-col-block .col-left,
    .editorjs-readonly .two-col-block .col-right {
        flex: 1 1 0 !important;
        width: 50% !important;
    }

    .editorjs-readonly .two-col-block .col-left {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .editorjs-readonly .two-col-block .col-right {
        padding: 0.5rem !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
    }

/* — Normal two-column: image left (40%), text right (60%) — */
.two-col-block:not(.two-col-reversed) {
    display: flex;
    gap: 1rem;
}

    .two-col-block:not(.two-col-reversed) .col-left {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .two-col-block:not(.two-col-reversed) .col-right {
        flex: 1 1 60%;
    }

/* — Reversed two-column: image right (40%), text left (60%) — */
.two-col-block.two-col-reversed {
    display: flex;
    gap: 1rem;
    flex-direction: row-reverse;
}

    .two-col-block.two-col-reversed .col-right {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .two-col-block.two-col-reversed .col-left {
        flex: 1 1 60%;
    }

/* -- Shared container setup -- */
#editorjs .two-col-block,
#preview-container.editorjs-readonly .two-col-block {
    display: flex !important;
    gap: 1rem !important;
    margin: 1em 0 !important;
    align-items: stretch !important;
}

    /* -- Normal (image left, text right) -- */
    #editorjs .two-col-block:not(.two-col-reversed) .col-left,
    #preview-container.editorjs-readonly .two-col-block:not(.two-col-reversed) .col-left {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #editorjs .two-col-block:not(.two-col-reversed) .col-right,
    #preview-container.editorjs-readonly .two-col-block:not(.two-col-reversed) .col-right {
        flex: 1 1 60% !important;
    }

    /* -- Reversed (text left, image right) -- */
    #editorjs .two-col-block.two-col-reversed,
    #preview-container.editorjs-readonly .two-col-block.two-col-reversed {
        flex-direction: row-reverse !important;
    }

        #editorjs .two-col-block.two-col-reversed > .col-left,
        #preview-container.editorjs-readonly .two-col-block.two-col-reversed > .col-left {
            /* left = text/tools */
            flex: 1 1 60% !important;
            max-width: 60% !important;
            order: 2 !important;
        }

        #editorjs .two-col-block.two-col-reversed > .col-right,
        #preview-container.editorjs-readonly .two-col-block.two-col-reversed > .col-right {
            /* right = image */
            flex: 0 0 40% !important;
            max-width: 40% !important;
            order: 1 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        #editorjs .two-col-block.two-col-reversed .codex-editor--narrow .codex-editor__redactor,
        #preview-container.editorjs-readonly .two-col-block.two-col-reversed .codex-editor--narrow .codex-editor__redactor {
            margin: 0 !important;
        }

        #editorjs .two-col-block.two-col-reversed .col-right .image-tool__image-picture,
        #preview-container.editorjs-readonly .two-col-block.two-col-reversed .col-right .image-tool__image-picture {
            float: none !important;
            margin: auto !important;
        }


.ce-block__content {
    max-width: 100%;
}

/*@media (min-width: 651px) {
    .ce-block__content {
        max-width: calc(100% - 120px) !important;
        margin: 0 60px;
    }
}*/

@media (min-width: 651px) {
    .ce-toolbar__content {
        width: 0px !important;
        margin: 0 50px;
    }
}

.cdx-block {
    max-width: 100% !important;
}

@media (min-width: 651px) {
    .codex-editor--narrow .ce-toolbox .ce-popover {
        left: 0;
        right: 0;
    }
}

@media (min-width: 651px) {
    .codex-editor--narrow .ce-settings .ce-popover {
        right: 0;
        left: 0;
    }
}

/* Make the wrapper reverse its children order */
#static-content.editorjs-readonly .two-col-block.two-col-reversed {
    display: flex !important;
    gap: 1rem !important;
    flex-direction: row-reverse !important;
}

/* Left = text/tools (fills 60%) */
#static-content.editorjs-readonly .two-col-block.two-col-reversed > .col-left {
    order: 2 !important;
    flex: 1 1 60% !important;
    max-width: 60% !important;
}

/* Right = image (fixed 40%), and center it */
#static-content.editorjs-readonly .two-col-block.two-col-reversed > .col-right {
    order: 1 !important;
    flex: 0 0 40% !important;
    max-width: 40% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#static-content.editorjs-readonly .two-col-block.two-col-reversed
.codex-editor--narrow .codex-editor__redactor {
    margin: 0 !important;
}

#static-content.editorjs-readonly .two-col-block.two-col-reversed .col-right
.image-tool__image-picture {
    float: none !important;
    margin: auto !important;
}

#static-content.editorjs-readonly .two-col-block.two-col-reversed,
#preview-container.editorjs-readonly .two-col-block.two-col-reversed {
    display: flex !important;
    gap: 1rem !important;
    flex-direction: row-reverse !important;
}

    #static-content.editorjs-readonly .two-col-block.two-col-reversed > .col-left,
    #preview-container.editorjs-readonly .two-col-block.two-col-reversed > .col-left {
        order: 2 !important;
        flex: 1 1 60% !important;
        max-width: 60% !important;
    }

    #static-content.editorjs-readonly .two-col-block.two-col-reversed > .col-right,
    #preview-container.editorjs-readonly .two-col-block.two-col-reversed > .col-right {
        order: 1 !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #static-content.editorjs-readonly .two-col-block.two-col-reversed
    .codex-editor--narrow .codex-editor__redactor,
    #preview-container.editorjs-readonly .two-col-block.two-col-reversed
    .codex-editor--narrow .codex-editor__redactor {
        margin: 0 !important;
    }

    #static-content.editorjs-readonly .two-col-block.two-col-reversed .col-right
    .image-tool__image-picture,
    #preview-container.editorjs-readonly .two-col-block.two-col-reversed .col-right
    .image-tool__image-picture {
        float: none !important;
        margin: auto !important;
    }

#static-content .two-col-block.two-col-reversed,
#editorjs-container .two-col-block.two-col-reversed {
    display: flex !important;
    gap: 1rem !important;
    flex-direction: row-reverse !important;
}

    /* Left = text/tools (60%) */
    #static-content .two-col-block.two-col-reversed > .col-left,
    #editorjs-container .two-col-block.two-col-reversed > .col-left {
        order: 2 !important;
        flex: 1 1 60% !important;
        max-width: 60% !important;
    }

    /* Right = image (40%), centered */
    #static-content .two-col-block.two-col-reversed > .col-right,
    #editorjs-container .two-col-block.two-col-reversed > .col-right {
        order: 1 !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #editorjs-container .two-col-block.two-col-reversed
    .codex-editor--narrow .codex-editor__redactor {
        margin: 0 !important;
    }

    /* Center the <img> inside its column */
    #static-content .two-col-block.two-col-reversed .col-right .image-tool__image-picture,
    #editorjs-container .two-col-block.two-col-reversed .col-right .image-tool__image-picture {
        float: none !important;
        margin: auto !important;
    }

    #static-content .two-col-block.two-col-reversed > .col-left,
    #editorjs-container .two-col-block.two-col-reversed > .col-left {
        /* switch off flex on the left col */
        display: block !important;
        /* reset any centering */
        align-items: normal !important;
        justify-content: normal !important;
    }

        #static-content .two-col-block.two-col-reversed > .col-left p,
        #editorjs-container .two-col-block.two-col-reversed > .col-left p {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }


#editorjs .two-col-block.two-col-reversed > .col-left,
#preview-container .two-col-block.two-col-reversed > .col-left {
    display: block !important;
    align-items: normal !important;
    justify-content: normal !important;
}

    #editorjs .two-col-block.two-col-reversed > .col-left p,
    #preview-container .two-col-block.two-col-reversed > .col-left p {
        margin: 0.5em 0;
    }
.codex-editor__redactor {
    padding-bottom: 100px !important;
}

.ce-inline-tool-hyperlink-wrapper,
.ce-inline-tool-hyperlink-wrapper--showed {
    pointer-events: all !important;
}

@media (min-width: 651px) {
    .codex-editor--narrow .codex-editor__redactor {
        margin-right: 0px !important
    }
}

#editorjs .two-col-block:not(.two-col-reversed) {
    display: flex !important;
    gap: 1rem !important;
}

    #editorjs .two-col-block:not(.two-col-reversed) .col-left {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #editorjs .two-col-block:not(.two-col-reversed) .col-right {
        flex: 1 1 60% !important;
    }

#editorjs .two-col-block.two-col-reversed {
    display: flex !important;
    gap: 1rem !important;
    flex-direction: row-reverse !important;
}

    #editorjs .two-col-block.two-col-reversed > .col-left {
        /* left = text/tools = 60% */
        order: 2 !important;
        flex: 1 1 60% !important;
        max-width: 60% !important;
        display: block !important;
        align-items: normal !important;
        justify-content: normal !important;
    }

    #editorjs .two-col-block.two-col-reversed > .col-right {
        /* right = image = 40% */
        order: 1 !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #editorjs .two-col-block.two-col-reversed .image-tool__image-picture {
        /* center the actual <img> */
        float: none !important;
        margin: auto !important;
    }

html, body, .page-container {
    overflow-x: hidden;
}

/* make the “×” smaller inside each hashtag badge */
.selected-hashtags .btn-close {
    /* shrink button dimensions */
    width: 0.75em;
    height: 0.75em;
    padding: 0;
    font-size: 0.5rem;
    /* align it nicely */
    margin-left: 0.25em;
}

/* add bottom margin to the badge container so there's space
   between the first row of badges and whatever follows */
.selected-hashtags {
    margin-bottom: 0.5rem; /* adjust as needed */
}

/* if you want more control over wrapping you can also
   force the badges to wrap with a little row-gap */
.selected-hashtags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem; /* vertical gap between lines of badges */
}