/**
 * -------------------------------------------------------------------------
 *
 * The styles for the Edit page.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    :root {
        --successBackground:       transparent;
        --successColor:            #4f4;

        --errorBackground:         transparent;
        --errorColor:              #f88;

        --topbarBackground:        transparent;
        --topbarColor:             inherit;
        --topbarInputBackground:   #fff;
        --topbarInputBorder:       #ccced1;
        --topbarInputColor:        inherit;
        --topbarInputFocus:        #f4c;
        --topbarMiscColor:         #48f;

        --topbarXLBackground:      #474a59;
        --topbarXLColor:           #707075;
        --topbarXLInputBackground: rgba( 255, 255, 255, 0.05 );
        --topbarXLInputBorder:     transparent;
        --topbarXLInputColor:      #f1f1f2;
        --topbarXLInputFocus:      #f4c;

        --constructDropTargetColor:             #fa5;
        --constructDropTargetShadowColor:       #aaa;
        --constructActiveBlockColor:            #0c0a;
        --constructBlockHoverColorDark:         #84c8;
        --constructBlockHoverColorLight:        #84c4;
        --constructMainBlockHoverColorDark:     #8c48;
        --constructMainBlockHoverColorLight:    #8c44;
        --constructArticleBlockHoverColorDark:  #48c8;
        --constructArticleBlockHoverColorLight: #48c4;
        --constructWhoAmIColor:                 #444;
    }

    html {
    }

        body {
        }

            .wrapper {
            }

                .wrapper > .content {
                }
                @media (min-width: 800px) {
                    .wrapper > .content {
                        width: 100% !important;
                        max-width: calc( 75vw - 1rem - 1rem ) !important;
                        margin-right: 0 !important;
                        margin-left: auto !important;
                    }
                }

                    .content > .form {
                    }

                        .form > .topbar {
                            background: var( --topbarBackground );
                            color: var( --topbarColor );
                            display: block;
                            margin-bottom: 1rem;
                            text-align: center;
                        }
                        @media (min-width: 800px) {
                            .form > .topbar {
                                background: var( --topbarXLBackground );
                                color: var( --topbarXLColor );
                                width: calc( 25vw - 1rem );
                                margin-bottom: 0;
                                padding: 1rem;
                                overflow-x: hidden;
                                scrollbar-width: thin;
                                scrollbar-color: var( --topbarXLColor ) var( --topbarXLBackground );
                                position: fixed;
                                top: 0;
                                left: 0;
                                bottom: 0;
                            }
                        }

                            .form > .topbar .success,
                            .form > .topbar .error {
                                display: block;
                                line-height: 1.5;
                                margin: 0 auto 1rem;
                                text-align: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .form > .topbar .success {
                                background: var( --successBackground );
                                color: var( --successColor );
                            }
                            .form > .topbar .error {
                                background: var( --errorBackground );
                                color: var( --errorColor );
                            }
                            .form > .topbar .success:empty,
                            .form > .topbar .error:empty {
                                display: none !important;
                            }

                            .form > .topbar              label,
                            .form > .aside .modal-window label {
                                display: block;
                                font-size: 1rem;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .form > .topbar              label + label,
                            .form > .aside .modal-window label + label {
                                margin-top: 0.75rem;
                            }

                                .form > .topbar span a,
                                .form > .topbar p a {
                                    color: var( --topbarMiscColor );
                                    cursor: pointer;
                                }
                                .form > .topbar a.misc {
                                    background: var( --topbarXLInputColor );
                                    border-radius: 0.33rem;
                                    color: var( --topbarXLBackground );
                                    width: 1.66rem;
                                    height: 1.66rem;
                                    line-height: 1.66rem;
                                    opacity: 0.5;
                                    text-decoration: none;
                                    text-align: center;
                                    position: absolute;
                                    bottom: 0.33rem;
                                    right: 0.33rem;
                                }
                                .form > .topbar label:has(.misc) input[type="text"],
                                .form > .topbar label:has(.misc) select {
                                    padding-right: 2.33rem;
                                }

                                .form > .topbar              span,
                                .form > .aside .modal-window span {
                                    display: block;
                                    font-size: 80%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .form > .aside .modal-window span {
                                    color: var( --topbarXLColor );
                                    margin-bottom: 1em;
                                }

                                    .form > .topbar span a {
                                        display: block;
                                        float: right;
                                        text-decoration: none;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }

                                .form > .topbar              input[type="text"],
                                .form > .topbar              select,
                                .form > .topbar              textarea,
                                .form > .aside .modal-window textarea {
                                    background: var( --topbarInputBackground );
                                    border: var( --topbarInputBorder ) 1px solid;
                                    color: var( --topbarInputColor );
                                    display: block;
                                    font-size: 1rem;
                                    outline: none !important;
                                    width: 100%;
                                    margin-top: 0.25rem;
                                    padding: 0.25rem 1rem;
                                }
                                .form > .aside .modal-window textarea {
                                    background: var( --topbarXLInputBackground );
                                    border-color: var( --topbarXLInputBorder );
                                    color: var( --topbarXLInputColor );
                                    border-radius: 0.5rem;
                                }
                                .form > .topbar              textarea,
                                .form > .aside .modal-window textarea {
                                    height: 10rem;
                                    resize: none;
                                    scrollbar-width: thin;
                                    scrollbar-color: var( --topbarInputColor ) var( --topbarInputBackground );
                                }
                                .form > .topbar              input[type="text"]::-moz-focus-inner,
                                .form > .topbar              select::-moz-focus-inner,
                                .form > .topbar              textarea::-moz-focus-inner,
                                .form > .aside .modal-window textarea::-moz-focus-inner {
                                    border: 0; 
                                }
                                    .form > .topbar select option {
                                        color: var( --topbarXLBackground );
                                    }
                                .form > .topbar              input[type="text"]:focus,
                                .form > .topbar              select:focus,
                                .form > .topbar              textarea:focus,
                                .form > .aside .modal-window textarea:focus {
                                    box-shadow: var( --topbarInputFocus ) 0 0 0 0.25rem;
                                }
                                @media (min-width: 800px) {
                                    .form > .topbar              input[type="text"],
                                    .form > .topbar              select,
                                    .form > .topbar              textarea,
                                    .form > .aside .modal-window textarea {
                                        background: var( --topbarXLInputBackground );
                                        border-color: var( --topbarXLInputBorder );
                                        color: var( --topbarXLInputColor );
                                        border-radius: 0.5rem;
                                        padding: 0.5rem 1rem;
                                    }
                                    .form > .topbar              textarea,
                                    .form > .aside .modal-window textarea {
                                        scrollbar-color: var( --topbarXLInputColor ) var( --topbarXLInputBackground );
                                    }
                                    .form > .topbar              input[type="text"]:focus,
                                    .form > .topbar              select:focus,
                                    .form > .topbar              textarea:focus,
                                    .form > .aside .modal-window textarea:focus {
                                        box-shadow: var( --topbarXLInputFocus ) 0 0 0 0.25rem;
                                    }
                                }

                                .form > .topbar .btn,
                                .form > .aside  .btn {
                                    background: var( --topbarXLColor );
                                    border-radius: 1rem;
                                    color: var( --topbarXLBackground ) !important;
                                    display: inline-block;
                                    font-size: 1rem;
                                    width: min-content;
                                    height: 2rem;
                                    line-height: 2rem;
                                    margin: 1rem 0.25rem 0;
                                    padding: 0 1rem;
                                    text-align: center;
                                    text-decoration: none;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    vertical-align: top;
                                    transition: background 300ms,
                                                color 300ms;
                                }
                                .form > .topbar button.btn + a.btn,
                                .form > .aside  button.btn + a.btn {
                                    opacity: 0.33;
                                }
                                .form > .topbar .btn:hover,
                                .form > .topbar .btn:active,
                                .form > .topbar .btn:focus,
                                .form > .aside  .btn:hover,
                                .form > .aside  .btn:active,
                                .form > .aside  .btn:focus {
                                    background: var( --topbarXLInputFocus );
                                    color: var( --topbarXLInputColor ) !important;
                                    opacity: 1 !important;
                                }
                                @media (max-width: 799px) {
                                    .form > .topbar .btn,
                                    .form > .aside  .btn {
                                        display: none;
                                    }
                                }

                            .form > .topbar p {
                                font-size: 80%;
                                margin-top: 1rem;
                                padding-bottom: 1rem;
                                text-align: center;
                            }

                                /**
                                 * -----------------------------------------
                                 *
                                 * Roll the buttons that are off the edge
                                 * of the HTML editor screen.
                                 *
                                 * -----------------------------------------
                                 */

                                .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
                                    flex-wrap: wrap !important;
                                }

                                /**
                                 * -----------------------------------------
                                 *
                                 * Correct a dropdown problem on the "bbCodes"
                                 * button.
                                 *
                                 * -----------------------------------------
                                 */

                                [data-cke-tooltip-text="Insert dynamic block"] {
                                }

                                    [data-cke-tooltip-text="Insert dynamic block"] .ck-balloon-panel {
                                        margin-top: 32px !important;
                                        margin-left: -11px !important;
                                        max-width: 25vw;
                                        z-index: 20000 !important;
                                    }

                                        [data-cke-tooltip-text="Insert dynamic block"] .ck-button {
                                            display: block !important;
                                            width: 100% !important;
                                            text-align: left !important;
                                        }

                                            [data-cke-tooltip-text="Insert dynamic block"] .ck-button span {
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }

                                        [data-cke-tooltip-text="Insert dynamic block"] .ck-button:last-of-type {
                                            color: var( --linkColor );
                                        }

                                /**
                                 * -----------------------------------------
                                 *
                                 * WordCount widget.
                                 *
                                 * -----------------------------------------
                                 */

                                .ck.ck-word-count {
                                    display: block;
                                    text-align: right;
                                    background: var(--ck-color-toolbar-background);
                                    padding: var(--ck-spacing-small) var(--ck-spacing-standard);
                                    border: 1px solid var(--ck-color-toolbar-border);
                                    border-top-width: 0;
                                    border-radius: 0 0 var( --ck-border-radius );
                                    font: normal normal normal var( --ck-font-size-base ) / var( --ck-line-height-base ) var( --ck-font-face );
                                }

                                    .ck.ck-word-count .ck-word-count__words {
                                        display: inline-block;
                                        margin-right: var( --ck-spacing-standard );
                                    }

                                    .ck.ck-word-count .ck-word-count__characters {
                                        display: inline-block;
                                        margin-left: var( --ck-spacing-standard );
                                        margin-right: var( --ck-spacing-standard );
                                    }

                                .ck.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
                                .ck.ck-rounded-corners .ck-source-editing-area textarea {
                                    border-bottom-left-radius: 0;
                                    border-bottom-right-radius: 0;
                                }

                        .form > .aside {
                            background: var( --topbarBackground );
                            border: var( --topbarInputBorder ) 1px solid;
                            color: var( --topbarColor );
                            display: block;
                            margin-bottom: 1rem;
                            padding: 0.8rem 1rem 1rem;
                        }
                            .form > .aside summary {
                                color: var( --linkColor );
                                cursor: pointer;
                                font-size: 80%;
                                float: right;
                                line-height: 0.75rem;
                                margin: 0.25rem 0 0;
                            }
                            .form > .aside summary + .tool {
                                color: var( --linkColor );
                                cursor: pointer;
                                display: block;
                                font-size: 80%;
                                float: left;
                                line-height: 0.75rem;
                                margin: 0.25rem 0 0;
                            }
                            .form > .aside summary ~ div {
                                clear: both;
                                padding-top: 0.75rem;
                                text-align: center;
                            }
                                .form > .aside summary ~ div > ul {
                                    border-top: #8886 1px solid;
                                    border-bottom: #8886 1px solid;
                                    margin: 0 !important;
                                    padding: 0.75rem 0;
                                    text-align: left;
                                }
                                    .form > .aside li {
                                        display: block;
                                        padding: 0;
                                    }
                                        .form > .aside ul {
                                            display: block;
                                            margin-left: 1rem !important;
                                        }
                                        .form > .aside a {
                                            color: var( --linkColor ) !important;
                                            cursor: grab;
                                            text-decoration: none !important;
                                        }
                                        .form > .aside small,
                                        .form > .aside .tools,
                                        .form > .aside textarea {
                                            display: none;
                                        }
                                .form > .aside summary:hover,
                                .form > .aside summary:active,
                                .form > .aside summary:focus,
                                .form > .aside summary + .tool:hover,
                                .form > .aside summary + .tool:active,
                                .form > .aside summary + .tool:focus,
                                .form > .aside li > a:active {
                                    color: var( --topbarXLInputFocus ) !important;
                                }
                                .form > .aside p {
                                    font-size: 80%;
                                    margin: 1rem 0 0;
                                    text-align: left;
                                }
                            .form > .aside .modal-window {
                                background: var( --topbarXLBackground );
                                width: calc(100vw - 2em - 2em);
                                margin-top: 2em;
                                padding: 1em;
                                text-align: center;
                                position: fixed;
                            }
                            .form > .aside .modal-window::backdrop {
                                background: rgba( 0, 0, 0, 0.85 );
                            }
                                .form > .aside .modal-window label {
                                }
                                    .form > .aside .modal-window span {
                                    }
                                    .form > .aside .modal-window textarea {
                                        height: calc( 100vh - 5.5em - 5.5em );
                                    }
                                    .form > .aside .modal-window .btn {
                                        display: inline-block;
                                    }
                        @media (min-width: 800px) {
                            .form > .aside {
                                background: transparent;
                                border: none;
                                color: var( --topbarXLColor );
                                width: calc( 25vw - 1rem );
                                margin-bottom: 0;
                                padding: 0;
                                position: fixed;
                                top: 0;
                                left: 0;
                            }
                            .form > .aside[open] {
                                background: var( --topbarXLBackground );
                            }
                                .form > .aside summary {
                                    background: var( --topbarXLBackground );
                                    margin-right: 1.5rem;
                                }
                                .form > .aside summary + .tool {
                                    margin-left: 1rem;
                                }
                                .form > .aside summary ~ div {
                                    background: var( --topbarXLBackground );
                                    color: var( --topbarXLColor );
                                    height: calc( 100vh - 1rem );
                                    padding: 1rem;
                                    overflow-x: hidden;
                                    scrollbar-width: thin;
                                    scrollbar-color: var( --topbarXLColor ) var( --topbarXLBackground );
                                }
                                .form > .topbar:has(.success:not(:empty)) ~ .aside[open]:not(:hover) summary ~ div,
                                .form > .topbar:has(.error:not(:empty))   ~ .aside[open]:not(:hover) summary ~ div,
                                .form > .topbar:focus-within              ~ .aside[open]:not(:hover) summary ~ div,
                                .form > .topbar:focus-within              ~ .aside[open]:hover       summary ~ div:has(button.btn:hover) {
                                    display: none;
                                }
                        }

                        .form > .aside + .left {
                            min-height: calc( 100vh - 8rem );
                        }

                        .form > .left:has(+ .ck-editor) {
                            display: none !important;
                        }

                        .text-hover {
                            cursor: url( 'data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23474a59"%3e%3cpath d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360ZM360-360v-170l367-367q12-12 27-18t30-6q16 0 30.5 6t26.5 18l56 57q11 12 17 26.5t6 29.5q0 15-5.5 29.5T897-728L530-360H360Zm481-424-56-56 56 56ZM440-440h56l232-232-28-28-29-28-231 231v57Zm260-260-29-28 29 28 28 28-28-28Z"/%3e%3c/svg%3e' ), text !important;
                            animation: textHoverColor 1s infinite linear !important;
                        }
                        @keyframes textHoverColor {
                            0%  { opacity: 1; }
                            50% { opacity: 0; }
                        }

                        .fragment-hover {
                            background: var( --constructBlockHoverColorLight ) !important;
                            box-shadow: var( --constructBlockHoverColorLight ) 0 0 0 0.5rem !important;
                            outline: var( --constructBlockHoverColorDark ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        main.fragment-hover {
                            background: var( --constructMainBlockHoverColorLight ) !important;
                            box-shadow: var( --constructMainBlockHoverColorLight ) 0 0 0 0.5rem !important;
                            outline: var( --constructMainBlockHoverColorDark ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        article.fragment-hover {
                            background: var( --constructArticleBlockHoverColorLight ) !important;
                            box-shadow: var( --constructArticleBlockHoverColorLight ) 0 0 0 0.5rem !important;
                            outline: var( --constructArticleBlockHoverColorDark ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        section.fragment-hover,
                        aside.fragment-hover {
                            background: var( --constructArticleBlockHoverColorLight ) !important;
                            box-shadow: var( --constructArticleBlockHoverColorLight ) 0 0 0 0.5rem !important;
                            outline: var( --constructArticleBlockHoverColorDark ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        .fragment-active,
                        main.fragment-active,
                        article.fragment-active,
                        section.fragment-active,
                        aside.fragment-active {
                            outline: var( --constructActiveBlockColor ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        .drop-hover {
                            background: linear-gradient( to bottom, var( --constructDropTargetShadowColor ) 0rem, transparent 1rem ) !important;
                            box-shadow: var( --constructDropTargetShadowColor ) 0 -0.25rem 0 !important;
                            outline: var( --constructDropTargetColor ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }
                        .drop-hover-after {
                            background: linear-gradient( to top, var( --constructDropTargetShadowColor ) 0rem, transparent 1rem ) !important;
                            box-shadow: var( --constructDropTargetShadowColor ) 0 0.25rem 0 !important;
                            outline: var( --constructDropTargetColor ) 0.25rem solid !important;
                            outline-offset: 0.5rem !important;
                        }

                        .fragment-active[data-who-am-i],
                        .fragment-hover[data-who-am-i],
                        .drop-hover[data-who-am-i],
                        .drop-hover-after[data-who-am-i] {
                            overflow: visible !important;
                            position: relative !important;
                        }
                        .fragment-active[data-who-am-i]::before,
                        .fragment-hover[data-who-am-i]::before,
                        .drop-hover[data-who-am-i]::before,
                        .drop-hover-after[data-who-am-i]::before {
                            background: var( --constructWhoAmIColor ) !important;
                            border: white 0.25em solid !important;
                            color: white !important;
                            content: attr( data-who-am-i );
                            display: block !important;
                            font-family: monospace !important;
                            font-size: 0.5rem !important;
                            font-style: normal !important;
                            font-weight: normal !important;
                            line-height: 1.5 !important;
                            margin: 0 !important;
                            padding: 0.25em 0.5em !important;
                            position: absolute !important;
                            top: -0.9em !important;
                            right: -0.95em !important;
                            z-index: 1;
                        }
                        .drop-hover[data-who-am-i]::after,
                        .drop-hover-after[data-who-am-i]::after {
                            z-index: 2;
                        }

                        .form > .aside + .left main:empty,
                        .form > .aside + .left article:empty,
                        .form > .aside + .left section:empty,
                        .form > .aside + .left aside:empty,
                        .form > .aside + .left div:empty,
                        .form > .aside + .left table:empty,
                        .form > .aside + .left footer:empty,
                        .form > .aside + .left header:empty,
                        .form > .aside + .left figure:empty,
                        .form > .aside + .left nav:empty,
                        .form > .aside + .left menu:empty,
                        .form > .aside + .left form:empty,
                        .form > .aside + .left h1:empty,
                        .form > .aside + .left h2:empty,
                        .form > .aside + .left h3:empty,
                        .form > .aside + .left h4:empty,
                        .form > .aside + .left h5:empty,
                        .form > .aside + .left h6:empty,
                        .form > .aside + .left blockquote:empty,
                        .form > .aside + .left p:empty,
                        .form > .aside + .left ul:empty,
                        .form > .aside + .left ol:empty {
                            background: #fff;
                            border: #aaa8 1px solid;
                            color: #aaa;
                            clear: both;
                            display: block;
                            font-family: monospace;
                            font-size: 0.75rem;
                            min-height: 2.5rem;
                            margin: 0.5rem 0;
                            padding: 0.75rem;
                            text-align: center;
                        }
                        .form > .aside + .left main:empty::before,
                        .form > .aside + .left article:empty::before,
                        .form > .aside + .left section:empty::before,
                        .form > .aside + .left aside:empty::before,
                        .form > .aside + .left div:empty::before,
                        .form > .aside + .left table:empty::before,
                        .form > .aside + .left footer:empty::before,
                        .form > .aside + .left header:empty::before,
                        .form > .aside + .left figure:empty::before,
                        .form > .aside + .left nav:empty::before,
                        .form > .aside + .left menu:empty::before,
                        .form > .aside + .left form:empty::before,
                        .form > .aside + .left h1:empty::before,
                        .form > .aside + .left h2:empty::before,
                        .form > .aside + .left h3:empty::before,
                        .form > .aside + .left h4:empty::before,
                        .form > .aside + .left h5:empty::before,
                        .form > .aside + .left h6:empty::before,
                        .form > .aside + .left blockquote:empty::before,
                        .form > .aside + .left p:empty::before,
                        .form > .aside + .left ul:empty::before,
                        .form > .aside + .left ol:empty::before {
                            content: 'still an empty block';
                            display: block;
                        }
                        .form > .aside + .left main:empty::before {
                            content: 'still an empty MAIN block';
                        }
                        .form > .aside + .left article:empty::before {
                            content: 'still an empty ARTICLE block';
                        }
                        .form > .aside + .left section:empty::before {
                            content: 'still an empty SECTION block';
                        }
                        .form > .aside + .left aside:empty::before {
                            content: 'still an empty ASIDE block';
                        }

                        /**
                         * -------------------------------------------------
                         *
                         * TODO: The "safe_!doctype" is not valid so it has
                         * been replaced with "safe_doctype". However, this
                         * does not match the tag name <!DOCTYPE ...> parsed
                         * in the prepareHtml() function declared in the
                         * "static.pages.only/Themes/default/js/constructor.js"
                         * file. Check also related helperEchoEditableBody()
                         * routine declared in the server-side module file
                         * "static.pages.only/Helper/Helper.php".
                         *
                         * -------------------------------------------------
                         */

                        .form > .aside + .left style[hidden]:not(.fragment-active),
                        .form > .aside + .left safe_script[hidden]:not(.fragment-active) {
                            display: none !important;
                        }
                        .form > .aside + .left style,
                        .form > .aside + .left safe_doctype,
                        .form > .aside + .left safe_html,
                        .form > .aside + .left safe_head,
                        .form > .aside + .left safe_body,
                        .form > .aside + .left safe_script,
                        .form > .aside + .left safe_noscript,
                        .form > .aside + .left safe_template,
                        .form > .aside + .left safe_meta,
                        .form > .aside + .left safe_link,
                        .form > .aside + .left safe_iframe,
                        .form > .aside + .left safe_math,
                        .form > .aside + .left safe_audio,
                        .form > .aside + .left safe_video,
                        .form > .aside + .left safe_object,
                        .form > .aside + .left safe_embed,
                        .form > .aside + .left safe_applet,
                        .form > .aside + .left safe_frame,
                        .form > .aside + .left safe_noframes {
                            background: #fff !important;
                            border: #aaa 1px solid !important;
                            color: #aaa !important;
                            display: block !important;
                            font-family: monospace;
                            font-size: 0.75rem;
                            max-height: 2.5rem;
                            margin: 0.5rem 0 !important;
                            padding: 0.75rem !important;
                            text-align: left;
                            overflow: hidden;
                            white-space: pre-wrap;
                        }
                        .form > .aside + .left safe_form {
                        }
                        .form > .aside + .left safe_doctype::before {
                            content: 'A DOCTYPE tag';
                            display: block;
                        }
                        .form > .aside + .left safe_html::before {
                            content: 'An HTML tag';
                            display: block;
                        }
                        .form > .aside + .left safe_head::before {
                            content: 'A HEAD tag';
                            display: block;
                        }
                        .form > .aside + .left safe_body::before {
                            content: 'A BODY tag';
                            display: block;
                        }
                        .form > .aside + .left style::before {
                            content: 'A local style:';
                            display: block;
                        }
                        .form > .aside + .left safe_script::before {
                            content: 'A local javascript:';
                            display: block;
                        }
                        .form > .aside + .left safe_script[src]::after {
                            content: attr( src );
                            display: block;
                        }
                        .form > .aside + .left safe_noscript::before {
                            content: 'A NoSCRIPT tag';
                            display: block;
                        }
                        .form > .aside + .left safe_template::before {
                            content: 'A TEMPLATE tag';
                            display: block;
                        }
                        .form > .aside + .left safe_meta::before {
                            content: 'An inline META tag';
                            display: block;
                        }
                        .form > .aside + .left safe_meta[content]::before {
                            content: 'An inline META tag:';
                        }
                        .form > .aside + .left safe_meta[content]::after {
                            content: attr( content );
                            display: block;
                        }
                        .form > .aside + .left safe_link::before {
                            content: 'An inline LINK tag';
                            display: block;
                        }
                        .form > .aside + .left safe_link[href]::before {
                            content: 'An inline LINK tag:';
                        }
                        .form > .aside + .left safe_link[href]::after {
                            content: attr( href );
                            display: block;
                        }
                        .form > .aside + .left safe_iframe::before {
                            content: 'An IFRAME tag';
                            display: block;
                        }
                        .form > .aside + .left safe_iframe[src]::before {
                            content: 'An IFRAME tag:';
                        }
                        .form > .aside + .left safe_iframe[src]::after {
                            content: attr( src );
                            display: block;
                        }
                        .form > .aside + .left safe_math::before {
                            content: 'A MATH tag';
                            display: block;
                        }
                        .form > .aside + .left safe_audio::before {
                            content: 'An AUDIO tag';
                            display: block;
                        }
                        .form > .aside + .left safe_video::before {
                            content: 'A VIDEO tag';
                            display: block;
                        }
                        .form > .aside + .left safe_object::before {
                            content: 'An inline OBJECT tag';
                            display: block;
                        }
                        .form > .aside + .left safe_object[data]::before {
                            content: 'An inline OBJECT tag:';
                        }
                        .form > .aside + .left safe_object[data]::after {
                            content: attr( data );
                            display: block;
                        }
                        .form > .aside + .left safe_embed::before {
                            content: 'An inline EMBED tag';
                            display: block;
                        }
                        .form > .aside + .left safe_embed[src]::before {
                            content: 'An inline EMBED tag:';
                        }
                        .form > .aside + .left safe_embed[src]::after {
                            content: attr( src );
                            display: block;
                        }
                        .form > .aside + .left safe_applet::before {
                            content: 'An inline APPLET (deprecated) tag';
                            display: block;
                        }
                        .form > .aside + .left safe_frame::before {
                            content: 'A FRAME (deprecated) tag';
                            display: block;
                        }
                        .form > .aside + .left safe_noframes::before {
                            content: 'A NoFRAMES (deprecated) tag';
                            display: block;
                        }
                        .form > .aside + .left style:active,
                        .form > .aside + .left safe_script:active,
                        .form > .aside + .left safe_iframe[src]:active,
                        .form > .aside + .left safe_object[data]:active,
                        .form > .aside + .left safe_embed[src]:active,
                        .form > .aside + .left safe_meta[content]:active,
                        .form > .aside + .left safe_link[href]:active {
                            max-height: none;
                        }

                            .form > .topbar + .left label,
                            .form > .aside  + .left label {
                                color: var(--topbarColor);
                                display: block;
                            }

                                .form > .topbar + .left label span,
                                .form > .aside  + .left label span {
                                    display: block;
                                    font-size: 80%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                .form > .topbar + .left label textarea,
                                .form > .aside  + .left label textarea {
                                    background: var(--topbarInputBackground);
                                    border: var(--topbarInputBorder) 1px solid;
                                    color: var(--topbarInputColor);
                                    display: block;
                                    font-family: monospace;
                                    font-size: 1rem;
                                    outline: none !important;
                                    width: 100%;
                                    margin-top: 0.25rem;
                                    padding: 1rem;
                                    height: calc( 100vh - 8.75rem );
                                    line-height: 1.75;
                                    white-space: nowrap;
                                    resize: none;
                                }

                        .form > .ck-editor {
                        }

                        .form > .right {
                            margin: 0.5rem auto 0;
                            text-align: center;
                        }

                            .form > .right .btn {
                                color: inherit;
                                cursor: pointer;
                                display: inline-block;
                                margin: 0.5rem 0.5rem 0;
                                text-decoration: none;
                                vertical-align: bottom;
                            }
                            .form > .right .btn:hover,
                            .form > .right .btn:active,
                            .form > .right .btn:focus {
                                color: var( --topbarInputFocus );
                            }

                .wrapper > .footnote {
                    display: none !important;
                }
