index.scss

body{
    overflow-y: scroll;
}
.ProseMirror{
    outline: none;
    min-height: 204px;
    padding-bottom: 12px;
}
.atma-editor {
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    &-wrap{
        *{
            box-sizing: border-box;
        }

        margin-bottom: 20px;
    }


    &-toolbar{
        display: flex;
        position: sticky;
        top: 0;
        flex-direction: row;
        border-radius: 4px 4px 0 0;
        border: 1px solid #ccc;
        background-color: #ffffff;
        box-shadow: 0 -3px 0 3px #ffffff;
        padding: 6px;
        z-index: 1;

        &-g{
            display: flex;
            flex-direction: row;

            &:after{
                content: '';
                display: inline-block;
                width: 20px;
            }
        }
        &-s{
            $this: &;
            position: relative;
            padding-right: 5px;
            margin-right: 9px;

            .qseparator{
                display: block;
                height: 8px;
            }

            &-opts{
                position: absolute;
                clip: rect(0,0,0,0);
                border-radius: 8px;
                box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
                background-color: #fff;
                padding: 8px;
                right: 42%;
                transform: translateX(50%);

                &-item{
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    padding-right: 8px;

                    &:hover{
                        opacity: 0.6;
                    }

                    span{
                        font-size: 1em;
                        white-space: nowrap;
                    }

                    &.active{
                        opacity: 0.4;
                    }

                    &.disabled{
                        opacity: 0.6;
                        cursor: default;
                    }

                    &[data-type="h2"]{
                        span{
                            font-size: 1.5em;
                        }
                    }
                    &[data-type="h3"]{
                        span{
                            font-size: 1.17em;
                        }
                    }

                    &[data-type="h2"], &[data-type="h3"], &[data-type="h4"]{
                        font-weight: 500;
                        padding: 8px;

                        .qicon{
                            display: none;
                        }
                    }
                    &[data-type="paragraph"]{
                        padding: 8px;

                        .qicon{
                            display: none;
                        }
                    }
                }
            }

            &:after{
                content: '';
                display: inline-block;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.664%204.709c.132%200%20.254-.05.351-.156L6.992%201.51a.433.433%200%200%200%20.129-.32c0-.254-.2-.454-.45-.454a.464.464%200%200%200-.328.137L3.663%203.62.984.873A.471.471%200%200%200%20.657.736c-.254%200-.453.2-.453.453%200%20.125.047.235.132.32l2.977%203.044a.472.472%200%200%200%20.352.156z%22%20fill%3D%22%23AAB2BD%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                background-repeat: no-repeat;
                background-position: 0 0;
                width: 7px;
                height: 5px;
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -2px;
            }

            &.show{
                #{$this}-opts{
                    clip: auto;
                }

                &:after{
                    transform: rotate(180deg);
                }
            }
        }

        .qicon{
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 2px;
            //background-color: tomato;

            &.active{
                background-color: #edeef0;
                border-radius: 4px;
            }

            &:hover{
                cursor: pointer;
                opacity: 0.8;
            }
        }
    }


    &-content{
        border: 1px solid #ccc;
        border-top: 0;
        padding: 12px 15px;
        padding-bottom: 0;

        p{
            margin-top: 0;
        }

        img, video, iframe{
            max-width: 100%;
        }

        blockquote{
            border-left: 2px solid #ccc;
            margin-left: 0;
            padding: 0 0 0 30px;
        }

        hr{
            border: none;
            height: 2px;
            background-color: #ccc;
        }

        table{
            border-collapse: collapse;
            table-layout: fixed;
            margin: 0;
            overflow: hidden;

            td, th{
                min-width: 3em;
                border: 1px solid #ced4da;
                padding: 3px 5px;
                vertical-align: top;
                position: relative;
            }

            th{
                font-weight: bold;
                text-align: left;
                background-color: #f1f3f5;
            }
            .selectedCell:after{
                z-index: 2;
                position: absolute;
                content: '';
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(200,200,255, 0.4);
                pointer-events: none;
            }

            .column-resize-handle{
                position: absolute;
                right: -2px;
                top: 0;
                bottom: -2px;
                width: 4px;
                background-color: #adf;
                pointer-events: none;
            }
        }

        .tableWrapper{
            overflow-x: auto;
            margin-bottom: 20px;
        }

        .resize-cursor{
            cursor: ew-resize;
            cursor: col-resize;
        }

        a[download]{
            display: inline-block;
            color: #1790FF;
            position: relative;
            margin-left: 20px;
            margin-right: 20px;

            &:before{
                content: '';
                display: inline-block;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.712%2012.6H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43.567.567%200%200%200-.422-.17H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zm0-3.4H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43A.567.567%200%200%200%208.86%208H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zM1.18%2016c-.315%200-.59-.12-.825-.36A1.161%201.161%200%200%201%200%2014.8V1.2C0%20.88.118.6.354.36.589.12.864%200%201.179%200h6.6a1.164%201.164%200%200%201%20.844.36l3.595%203.66a1.214%201.214%200%200%201%20.353.86v9.92c0%20.32-.117.6-.353.84s-.51.36-.825.36H1.179zM7.68%201.2H1.18v13.6h10.214V4.92H8.27a.567.567%200%200%201-.423-.17.588.588%200%200%201-.167-.43V1.2zm-6.501%200v3.72V1.2%2014.8%201.2z%22%20fill%3D%22%231790FF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                width: 13px;
                height: 16px;
                position: absolute;
                top: 1px;
                left: -20px;
            }

            //&[href*='.pdf']{
            //    &:before{
            //        content: 'pdf'
            //    }
            //}

            &:after{
                content: attr(data-size);
                display: inline-block;
                color: #AAB2BD;
                font-size: 13px;
                margin-left: 6px;
            }
        }

    }

    &-bubble{
        display: flex;
        flex-direction: row;
        border-radius: 8px;
        box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
        background-color: #fff;
        padding: 8px;

        .qicon{
            width: 25px;
            height: 28px;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 2px;
            //background-color: tomato;

            &.active{
                opacity: 0.5;
            }

            &:hover{
                cursor: pointer;
                opacity: 0.8;
            }
        }
    }

    &-modal{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.2);

        &-box{
            display: inline-block;
            position: fixed;
            top: 50%;
            min-height: 200px;
            background: #fff;
            transform: translate(0, -50%);
            border-radius: 8px;
            max-width: 90%;
            min-width: 560px;
            padding: 48px;

            &-header{
                display: block;
                text-align: left;
                font-size: 21px;
                font-weight: bold;
                margin-bottom: 35px;
            }
        }

        &-close {
            position: absolute;
            top: 0;
            right: 0;
        }

        &-action {
            width: 100%;
            padding: 24px 0 0;
            text-align: right;
        }

        input[type="text"]{
            background-color: #F5F7FA;
            font-size: 18px;
            border: none;
            padding: 19px 25px;
            border-radius: 16px;
            width: 100%;
            margin-bottom: 24px;
        }
    }

    &-uploader{
        &-drop{
            display: flex;
            width: 490px;
            height: 154px;
            background-color: #F5F7FA;
            border-radius: 16px;
            border: 2px dashed #CCD1D9;
            box-shadow: 0 0 0 1px #F5F7FA;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &:hover{
                border-color: #adb0b6;
            }
        }
        &-placeholder{
            display: inline-block;
            color: #656D77;
        }

        &-uitems{
            display: block;
            text-align: left;
            margin-bottom: 32px;

            &-elem{
                position: relative;
                display: inline-block;
                width: 116px;
                background-color: lightgrey;
                border-radius: 4px;
                margin-right: 16px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                aspect-ratio: 16 / 9;

                &.atma-editor-uploader-file{
                    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.712%2012.6H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43.567.567%200%200%200-.422-.17H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zm0-3.4H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43A.567.567%200%200%200%208.86%208H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zM1.18%2016c-.315%200-.59-.12-.825-.36A1.161%201.161%200%200%201%200%2014.8V1.2C0%20.88.118.6.354.36.589.12.864%200%201.179%200h6.6a1.164%201.164%200%200%201%20.844.36l3.595%203.66a1.214%201.214%200%200%201%20.353.86v9.92c0%20.32-.117.6-.353.84s-.51.36-.825.36H1.179zM7.68%201.2H1.18v13.6h10.214V4.92H8.27a.567.567%200%200%201-.423-.17.588.588%200%200%201-.167-.43V1.2zm-6.501%200v3.72V1.2%2014.8%201.2z%22%20fill%3D%22%231790FF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E') !important;
                    background-position: center top;
                    background-size: 30px;
                    aspect-ratio: auto;
                    width: 76px;
                    min-height: 56px;
                    background-color: transparent;
                    padding-top: 40px;
                    font-size: 11px;
                    margin-right: 30px;
                    vertical-align: top;
                }
            }

            &-del{
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.163%209.649c.092.091.2.152.326.182.125.03.25.03.375%200a.66.66%200%200%200%20.32-.177l3.222-3.222L8.543%209.57a.7.7%200%200%200%20.32.183c.125.033.25.034.373.002a.707.707%200%200%200%20.328-.19.693.693%200%200%200%20.185-.323.753.753%200%200%200%200-.375.68.68%200%200%200-.18-.323L6.432%205.406l3.222-3.222a.655.655%200%200%200%20.18-.322.808.808%200%200%200-.003-.373.693.693%200%200%200-.51-.51.763.763%200%200%200-.373-.004.674.674%200%200%200-.32.183L5.406%204.38%202.269%201.243a.655.655%200%200%200-.323-.18.844.844%200%200%200-.375%200%20.656.656%200%200%200-.328.18.669.669%200%200%200-.186.333.807.807%200%200%200%20.003.373c.03.122.09.228.183.32L4.38%205.406%201.158%208.628a.68.68%200%200%200-.18.317.753.753%200%200%200%200%20.376.693.693%200%200%200%20.185.328z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                border-radius: 10px;
                background-position: center center;
                background-repeat: no-repeat;
                position: absolute;
                top: -10px;
                right: -10px;
                background-color: rgba(204,209,217,0.8);
                z-index: 1;

                &:hover{
                    background-color: #FF4E44;
                    cursor: pointer;
                }
            }



        }

        &-progress{
            display: flex;
            position: relative;
            width: 46px;
            height: 46px;
            background-color: #ffffff;
            border-radius: 23px;
            color: #1790FF;
            font-size: 13px;
            justify-content: center;
            align-items: center;

            &-wrap{
                display: flex;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(67,74,83,0.5);
                border-radius: inherit;
                justify-content: center;
                align-items: center;
            }

            //& > div{
            //    position: absolute;
            //    top: 0;
            //    left: 0;
            //    height: 100%;
            //    background-color: #1790FF;
            //    border-radius: 4px;
            //    overflow: hidden;
            //
            //
            //}
        }
    }

    &-btn{
        font-size: 16px;
        -webkit-appearance: none;
        outline: none;
        border: none;
        background: none;
        padding: 16px 24px;
        line-height: 16px;

        &:hover{
            cursor: pointer;
            opacity: 0.7;
        }

        &[disabled]{
            opacity: 0.3 !important;
            cursor: default !important;
        }


        &.atma-editor-complete{
            background-color: #1790FF;
            border-radius: 24px;
            color: #ffffff;
        }

        &.atma-editor-cancel{

        }
    }

    &-soc-video{
        display: block;
        list-style: none;
        margin: 0 0 35px 0;
        padding: 0;
        text-align: left;

        li{
            display: inline-block;
            vertical-align: middle;
            background-position: center center;
            background-repeat: no-repeat;
            margin-right: 12px;

            &.youtube{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M24.776%202.966A3.17%203.17%200%200%200%2022.539.729C20.565.2%2012.652.2%2012.652.2S4.74.2%202.766.73A3.17%203.17%200%200%200%20.529%202.966C0%204.939%200%209.056%200%209.056s0%204.118.529%206.091a3.169%203.169%200%200%200%202.237%202.237c1.973.53%209.886.53%209.886.53s7.913%200%209.887-.53a3.169%203.169%200%200%200%202.237-2.237c.528-1.973.528-6.09.528-6.09s0-4.118-.528-6.091%22%20fill%3D%22%23FF0100%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFE%22%20d%3D%22m10.122%2012.852%206.574-3.795-6.574-3.796v7.591%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 26px;
                height: 18px;
            }
            &.vimeo{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.544%203.114c-.069%201.514-1.127%203.588-3.172%206.22-2.114%202.749-3.903%204.124-5.367%204.124-.906%200-1.673-.837-2.3-2.512L3.45%206.342C2.985%204.668%202.486%203.83%201.952%203.83c-.116%200-.524.245-1.221.733L0%203.62c.767-.674%201.524-1.35%202.269-2.025C3.293.71%204.061.245%204.574.198%205.784.082%206.529.91%206.809%202.68c.302%201.912.511%203.1.628%203.566.349%201.586.733%202.378%201.152%202.378.326%200%20.815-.515%201.467-1.543.651-1.03%201-1.812%201.047-2.35.093-.887-.256-1.332-1.047-1.332-.373%200-.757.085-1.151.255.764-2.504%202.224-3.721%204.38-3.652%201.598.047%202.351%201.084%202.259%203.11%22%20fill%3D%22%231AB7EA%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
                width: 16px;
                height: 18px;
            }
            &.vk{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8.392.151h7.3c6.663%200%208.24%201.578%208.24%208.24v7.301c0%206.663-1.577%208.24-8.24%208.24h-7.3c-6.663%200-8.241-1.577-8.241-8.24v-7.3C.151%201.729%201.729.15%208.391.15%22%20fill%3D%22%234680C2%22%2F%3E%3Cpath%20d%3D%22M19.62%208.341c.117-.369%200-.638-.52-.638h-1.73c-.436%200-.637.235-.755.487%200%200-.89%202.148-2.131%203.541-.403.403-.587.538-.806.538-.117%200-.268-.135-.268-.504v-3.44c0-.437-.134-.638-.504-.638h-2.719c-.268%200-.436.201-.436.403%200%20.42.621.52.688%201.695v2.55c0%20.555-.1.655-.319.655-.587%200-2.014-2.165-2.87-4.632-.167-.487-.335-.671-.772-.671H4.733c-.504%200-.588.235-.588.486%200%20.454.588%202.736%202.736%205.757%201.427%202.064%203.457%203.172%205.287%203.172%201.108%200%201.242-.252%201.242-.671V14.87c0-.504.1-.587.453-.587.252%200%20.705.134%201.729%201.124%201.174%201.175%201.376%201.712%202.03%201.712h1.729c.504%200%20.739-.252.604-.739-.15-.486-.721-1.191-1.46-2.03-.403-.47-1.007-.99-1.192-1.242-.251-.336-.184-.47%200-.772-.016%200%202.098-2.988%202.317-3.995%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 24px;
                height: 24px;
            }
            &.ok{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M23.913%2012.054C23.913%2018.652%2018.565%2024%2011.967%2024S.021%2018.652.021%2012.054%205.369.108%2011.967.108s11.946%205.348%2011.946%2011.946%22%20fill%3D%22%23EE8208%22%2F%3E%3Cpath%20d%3D%22M12%207.194c.82%200%201.488.668%201.488%201.489A1.49%201.49%200%200%201%2012%2010.17a1.49%201.49%200%200%201-1.488-1.488c0-.821.668-1.489%201.488-1.489m0%205.082a3.598%203.598%200%200%200%203.594-3.593A3.598%203.598%200%200%200%2012%205.088a3.599%203.599%200%200%200-3.594%203.595A3.598%203.598%200%200%200%2012%2012.276M13.455%2015.205a6.724%206.724%200%200%200%202.09-.867c.492-.311.64-.963.33-1.456a1.052%201.052%200%200%200-1.454-.332%204.56%204.56%200%200%201-4.843%200%201.052%201.052%200%200%200-1.453.332%201.057%201.057%200%200%200%20.33%201.456c.65.409%201.357.7%202.09.867L8.532%2017.22a1.058%201.058%200%200%200%20.746%201.803c.27%200%20.54-.103.745-.31L12%2016.734l1.977%201.98c.41.413%201.078.413%201.49%200a1.056%201.056%200%200%200%200-1.493l-2.012-2.015%22%20fill%3D%22%23FFFFFE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 24px;
                height: 24px;
            }
            &.rutube{
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2246%22%20height%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.902%206H0v15h3.87v-4.88h7.414L14.667%2021H19l-3.73-4.902c1.158-.18%201.992-.608%202.502-1.282.51-.675.765-1.755.765-3.194v-1.124c0-.855-.093-1.53-.255-2.047a3.399%203.399%200%200%200-.834-1.372%203.799%203.799%200%200%200-1.437-.832C15.455%206.09%2014.76%206%2013.903%206zm-.625%206.814H3.87V9.306h9.407c.533%200%20.904.09%201.089.247.185.158.301.45.301.877v1.26c0%20.45-.116.742-.301.9-.185.157-.556.224-1.09.224zM24.758%2016.57V6H21v10.48c0%20.854.067%201.552.225%202.069.157.54.427.99.832%201.372.383.404.833.674%201.373.832.54.18%201.215.247%202.07.247h9c.833%200%201.508-.067%202.047-.247.54-.158.99-.428%201.396-.832.382-.383.652-.832.81-1.372.157-.517.247-1.215.247-2.07V6h-3.758v10.57c0%20.45-.112.742-.292.9-.18.157-.54.224-1.058.224h-7.785c-.54%200-.9-.067-1.08-.225-.18-.157-.27-.45-.27-.9z%22%20fill%3D%22%2314191E%22%2F%3E%3Cpath%20d%3D%22M42.682%205.252a2.623%202.623%200%200%200%202.619-2.626A2.623%202.623%200%200%200%2042.682%200a2.623%202.623%200%200%200-2.62%202.626%202.623%202.623%200%200%200%202.62%202.626z%22%20fill%3D%22%23F41240%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                width: 32px;
                height: 24px;
                background-size: contain;
            }
        }
    }

    //&-select-colors{
    //    ul.colors-list{
    //        display: block;
    //        margin: 0;
    //        padding: 0;
    //        max-width: 200px;
    //        letter-spacing: 0;
    //        font-size: 0;
    //        position: relative;
    //        left: -5px;
    //
    //        li{
    //            display: inline-block;
    //            vertical-align: top;
    //            height: 40px;
    //            width: 40px;
    //            margin: 10px;
    //            margin-left: 0;
    //            margin-bottom: 0;
    //            border-radius: 20px;
    //            list-style: none;
    //            letter-spacing: 0;
    //            font-size: 0;
    //
    //            &.active, &:hover{
    //                transform: scale(1.2);
    //                cursor: pointer;
    //            }
    //        }
    //    }
    //
    //    .colors-tabs{
    //        font-size: 21px;
    //        font-weight: bold;
    //        margin-bottom: 35px;
    //        text-align: left;
    //
    //        & > div{
    //            display: inline-block;
    //            margin-right: 20px;
    //            opacity: 0.3;
    //
    //            &:hover{
    //                opacity: 0.6;
    //                cursor: pointer;
    //            }
    //
    //            &.active{
    //                position: relative;
    //                opacity: 1;
    //                padding-bottom: 10px;
    //
    //                &:after{
    //                    content: "";
    //                    display: inline-block;
    //                    position: absolute;
    //                    bottom: 0;
    //                    height: 3px;
    //                    width: 100%;
    //                    left: 0;
    //                    background-color: #1790FF;
    //                }
    //            }
    //        }
    //
    //    }
    //}





    .qicon{
        &.qbold{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.021%2013h4c2.698%200%204.297-1.327%204.297-3.56%200-1.687-1.107-2.9-2.83-3.12v-.07C7.71%206.03%208.677%204.8%208.677%203.481c0-1.898-1.468-3.164-3.639-3.164H1.021c-.483%200-.79.317-.79.818v11.048c0%20.5.307.817.79.817zm.792-7.216v-4.07h2.865c1.538%200%202.4.695%202.4%201.952%200%201.371-1.02%202.118-2.892%202.118H1.813zm0%205.819V7.146h2.82c2.022%200%203.06.748%203.06%202.215%200%201.468-1.003%202.242-2.91%202.242h-2.97z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qparagraph{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M1.274%2013.123c.396%200%20.624-.185.774-.606L3.164%209.37h5.019l1.125%203.147c.149.421.378.606.773.606.457%200%20.791-.29.791-.694%200-.115-.026-.246-.097-.44L6.688.95c-.193-.518-.51-.756-.993-.756-.518%200-.843.246-1.037.765L.58%2011.989c-.07.194-.097.325-.097.44%200%20.404.334.694.791.694zm2.347-5.098%202.03-5.783h.053l2.03%205.783H3.621zM15.012%2013.158c1.23%200%202.4-.685%202.944-1.731h.035v.958c0%20.457.299.773.73.773.422%200%20.72-.316.72-.773V6.68c0-1.82-1.353-2.98-3.498-2.98-1.485%200-2.82.66-3.34%201.661-.123.22-.184.44-.184.633%200%20.413.281.686.677.686.29%200%20.492-.115.633-.37.51-.905%201.186-1.265%202.18-1.265%201.265%200%202.003.668%202.003%201.784v.765l-2.628.15c-2.11.122-3.313%201.107-3.313%202.671%200%201.644%201.221%202.742%203.04%202.742zm.342-1.3c-1.098%200-1.828-.572-1.828-1.442%200-.861.703-1.406%201.934-1.485l2.452-.15v.747c0%201.319-1.116%202.33-2.558%202.33z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qh2{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M.685%2011.034c.402%200%20.659-.264.659-.681V6.119h5.8v4.234c0%20.417.257.68.66.68s.659-.263.659-.68V.94c0-.418-.256-.681-.66-.681-.402%200-.658.263-.658.68v3.993H1.344V.94c0-.418-.257-.681-.66-.681C.283.26.026.523.026.94v9.413c0%20.417.257.68.66.68zM11.246%2010.931h5.823c.373%200%20.622-.234.622-.586%200-.351-.249-.586-.622-.586h-4.615V9.73l2.652-2.725c1.809-1.853%202.336-2.724%202.336-3.881%200-1.707-1.377-2.937-3.281-2.937-2.16%200-3.325%201.406-3.48%202.49a1.537%201.537%200%200%200-.021.263c0%20.345.22.586.608.586.359%200%20.505-.19.593-.461.359-1.135%201.157-1.729%202.3-1.729%201.135%200%201.963.791%201.963%201.868%200%20.886-.337%201.45-1.758%202.937l-3.384%203.53c-.315.33-.373.447-.373.718%200%20.33.249.542.637.542z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qh3{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M.685%2011.034c.402%200%20.659-.264.659-.681V6.119h5.8v4.234c0%20.417.257.68.66.68s.659-.263.659-.68V.94c0-.418-.256-.681-.66-.681-.402%200-.658.263-.658.68v3.993H1.344V.94c0-.418-.257-.681-.66-.681C.283.26.026.523.026.94v9.413c0%20.417.257.68.66.68zM14.205%2011.107c2.073%200%203.67-1.267%203.67-3.084%200-1.501-1.048-2.46-2.586-2.592V5.4c1.325-.278%202.241-1.179%202.241-2.49%200-1.509-1.223-2.724-3.34-2.724-1.465%200-2.585.607-3.142%201.662a1.71%201.71%200%200%200-.22.85c0%20.38.213.6.586.6.33%200%20.462-.139.594-.52.38-.96%201.018-1.45%202.182-1.45%201.355%200%202.014.71%202.014%201.758%200%201.055-.879%201.831-2.138%201.831h-.784c-.352%200-.593.227-.593.557%200%20.33.241.556.593.556h.842c1.487%200%202.417.733%202.41%202.036-.007%201.106-.938%201.897-2.33%201.897-1.274%200-2.028-.534-2.38-1.443-.139-.358-.307-.52-.607-.52-.381%200-.608.25-.608.616%200%20.285.073.549.241.842.638%201.084%201.78%201.648%203.355%201.648z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qh4{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M.685%2011.034c.402%200%20.659-.264.659-.681V6.119h5.8v4.234c0%20.417.257.68.66.68s.659-.263.659-.68V.94c0-.418-.256-.681-.66-.681-.402%200-.658.263-.658.68v3.993H1.344V.94c0-.418-.257-.681-.66-.681C.283.26.026.523.026.94v9.413c0%20.417.257.68.66.68zM16.31%2011.056c.373%200%20.637-.279.637-.681V8.727h.967c.351%200%20.615-.227.615-.579s-.264-.579-.615-.579h-.967V1.263c0-.681-.374-1.04-1.077-1.04-.578%200-.923.256-1.516%201.113-1.487%202.132-2.944%204.285-3.706%205.647-.242.433-.315.66-.315.996%200%20.455.293.748.762.748h4.577v1.648c0%20.402.264.68.638.68zm-.638-3.487h-4.02V7.54c.856-1.501%202.043-3.245%203.998-6.042h.022v6.071z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qitalic{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%226%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.362%203.27a1.065%201.065%200%200%200%201.275-.789%201.059%201.059%200%200%200-.8-1.267%201.057%201.057%200%200%200-1.265.79c-.13.562.229%201.136.79%201.265zM1.654%2015.001c.485.112.91-.17%201.032-.694L4.64%205.839c.12-.523-.138-.964-.624-1.076-.485-.112-.911.17-1.032.694L1.03%2013.926c-.12.523.138.964.624%201.076z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qstrike{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5.388%2013.21c2.839%200%204.684-1.467%204.684-3.814%200-1.792-1.046-2.847-3.691-3.427L4.975%205.66c-1.732-.378-2.409-1.063-2.409-2.065%200-1.292%201.222-2.066%202.804-2.066%201.371%200%202.417.563%202.857%201.846.14.404.386.615.79.615.422%200%20.721-.281.721-.712%200-.167-.017-.299-.044-.395C9.237%201.17%207.532.106%205.414.106%202.786.106.94%201.574.94%203.666c0%201.802%201.1%202.953%203.64%203.507l1.405.307c1.758.387%202.461%201.09%202.461%202.154%200%201.248-1.248%202.153-2.97%202.153-1.6%200-2.848-.615-3.235-1.925-.123-.422-.369-.624-.764-.624-.449%200-.73.317-.73.818%200%20.184.035.378.088.553.475%201.53%202.17%202.602%204.553%202.602z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M1.43%206.726h8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qunderline{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ctext%20font-family%3D%22SFProRounded-Regular%2C%20SF%20Pro%20Rounded%22%20font-size%3D%2215%22%20fill%3D%22%231D1D1F%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctspan%20x%3D%220%22%20y%3D%2214%22%3EU%3C%2Ftspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ftext%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M1.43%2016.727h8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qcodeBlock{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2221%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.262%2013.837c.388.103.74-.11.857-.498L12.766.837C12.87.485%2012.7.134%2012.312.03c-.38-.102-.71.044-.842.498L7.844%2012.966c-.117.395.008.761.418.871zM20.53%206.923a.742.742%200%200%200-.25-.556l-4.892-4.41c-.315-.278-.718-.278-.974.008-.256.285-.22.703.073.967l4.41%203.991-4.41%203.992c-.293.264-.33.674-.073.967.256.285.66.285.974.007l4.893-4.416a.716.716%200%200%200%20.249-.55zM0%206.923c0%20.205.088.403.256.55l4.893%204.416c.308.278.718.278.974-.007.256-.293.212-.703-.08-.967L1.64%206.923l4.401-3.991c.293-.264.337-.682.081-.967-.256-.286-.666-.286-.974-.008L.256%206.367A.75.75%200%200%200%200%206.923z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qclearMarks{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.574%206.094%207.07%204.609l.47-1.093H5.995L3.965%201.484h9.355c.274%200%20.505.095.694.284.188.188.283.42.283.693a.943.943%200%200%201-.283.693.943.943%200%200%201-.694.284H9.707L8.574%206.094zm5.43%208.73L7.598%208.398l-1.465%203.438a.935.935%200%200%201-.362.43.976.976%200%200%201-.537.156.932.932%200%200%201-.82-.44.913.913%200%200%201-.078-.927l1.758-4.14L.176.995A.562.562%200%200%201%200%20.586C0%20.43.059.293.176.176A.562.562%200%200%201%20.586%200c.156%200%20.293.059.41.176l13.828%2013.828a.562.562%200%200%201%20.176.41.562.562%200%200%201-.176.41.562.562%200%200%201-.41.176.562.562%200%200%201-.41-.176z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qbulletList{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%20.496%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20fill%3D%22%231D1D1F%22%20cx%3D%222%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M8.5%209.004h8%22%2F%3E%3Ccircle%20fill%3D%22%231D1D1F%22%20cx%3D%222%22%20cy%3D%222%22%20r%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M8.5%202.004h8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qorderedList{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M8.5%2010.5h8M8.5%203.5h8%22%2F%3E%3Cpath%20d%3D%22M2.229%206.085c.434%200%20.724-.28.724-.714V1.792c0-.495-.307-.81-.83-.81-.28%200-.53.028-.817.22l-.896.597a.565.565%200%200%200-.273.496.47.47%200%200%200%20.478.489.512.512%200%200%200%20.339-.113l.523-.362h.027V5.37c0%20.434.29.714.725.714zM.974%2013h2.741c.363%200%20.568-.222.568-.547%200-.331-.205-.547-.568-.547H2.15v-.027l.899-.776c.765-.663%201.107-1.008%201.107-1.671%200-.896-.765-1.5-1.965-1.5-.861%200-1.555.365-1.815.953a.794.794%200%200%200-.065.321c0%20.349.226.564.595.564.277%200%20.45-.103.642-.383.185-.266.363-.386.622-.386.352%200%20.592.215.592.526%200%20.294-.158.51-.711.985L.694%2011.674c-.274.229-.397.434-.397.7%200%20.363.205.626.677.626z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qblockquote{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M12.38%209.504h5%22%2F%3E%3Cg%20fill%3D%22%23222%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M4.262%202.352c.047-.188%200-.282%200-.611C4.122.989%203.37.519%202.617.519c-.987%200-1.692.61-1.692%201.55%200%20.8.517%201.364%201.222%201.505L1.02%207.428h1.692l1.27-4.042c.14-.376.14-.658.281-1.034zM8.993%202.352c.047-.188%200-.282%200-.611C8.853.989%208.1.519%207.348.519c-.987%200-1.692.61-1.692%201.55%200%20.8.517%201.364%201.222%201.505L5.75%207.428h1.692l1.27-4.042c.14-.376.14-.658.281-1.034z%22%2F%3E%3C%2Fg%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M12.38%202.504h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qhardBreak{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22%231D1D1F%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.148%206.24a.582.582%200%200%201-.41-.15.494.494%200%200%201-.163-.38c0-.153.054-.28.162-.38.109-.1.246-.15.411-.15h9.712c.765%200%201.408.25%201.931.75.523.5.784%201.104.784%201.81%200%20.705-.261%201.311-.784%201.817s-1.166.759-1.93.759H8.355l.88.794c.127.106.187.227.18.362a.516.516%200%200%201-.18.362.585.585%200%200%201-.412.158.555.555%200%200%201-.392-.14L6.578%2010.14a.54.54%200%200%201-.134-.177.483.483%200%200%201-.038-.194c0-.07.012-.135.038-.194a.54.54%200%200%201%20.134-.177l1.854-1.711a.627.627%200%200%201%20.411-.142c.16%200%20.29.047.392.142a.499.499%200%200%201%20.172.379.499.499%200%200%201-.172.38l-.88.811h2.505c.446%200%20.819-.15%201.119-.45.299-.3.449-.656.449-1.067%200-.412-.15-.765-.45-1.06a1.533%201.533%200%200%200-1.118-.44H1.148z%22%20stroke-width%3D%22.32%22%20fill%3D%22%231D1D1F%22%2F%3E%3Cpath%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20d%3D%22M1.042%201.68h12M1.042%209.68h3.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qundo{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.587%203.104h3.308c2.185%200%203.662%201.181%204.016%203.012.355%201.595-.236%203.308-1.358%204.017a.608.608%200%201%201-.59-1.063c.649-.354%201.062-1.595.826-2.717-.295-1.24-1.24-2.068-2.894-2.068H2.587l1.95%201.95a.59.59%200%201%201-.828.827L.756%204.108a.59.59%200%200%201%200-.827L3.709.328a.59.59%200%200%201%20.827.827l-1.95%201.949z%22%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%22.3%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qredo{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.93%204.406H4.623c-1.653%200-2.598.827-2.893%202.067-.237%201.18.177%202.362.826%202.716a.608.608%200%200%201-.59%201.063C.785%209.544.253%207.832.608%206.237c.354-1.772%201.771-3.012%204.015-3.012H7.93L5.981%201.276A.59.59%200%201%201%206.808.45l2.953%202.952a.59.59%200%200%201%200%20.827L6.808%207.182a.59.59%200%200%201-.827-.827l1.95-1.949z%22%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%22.3%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qlink{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2215%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.8%207.958a3%203%200%200%200%204.524.324l1.8-1.8A3%203%200%200%200%207.882%202.24L6.85%203.266%22%2F%3E%3Cpath%20d%3D%22M8.2%206.758a3%203%200%200%200-4.524-.324l-1.8%201.8a3%203%200%200%200%204.242%204.242l1.026-1.026%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qimage{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281.107%20.622%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%223.667%22%20cy%3D%223.667%22%20r%3D%221%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m11.467%208.006-3-3.273-6.6%207.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qhr {
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%223%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.4%22%20d%3D%22M1.517%201.475h16%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qvideo{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.623%20.597%29%22%20stroke%3D%22%231F1E1D%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22%231F1E1D%22%20d%3D%22M6.71%203.99v4l3.654-2z%22%2F%3E%3Crect%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qiframe{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.623.597h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202h-12a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2z%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-dasharray%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qinsertTable{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281.517%20.975%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M.976%205.967h11M6.035.033v11%22%2F%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qdeleteTable{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%3E%3Crect%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qaddRowBefore{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2219%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qaddRowAfter{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%28-180%206.5%209.513%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qdeleteRow{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%206%207%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M4.678%2010.002v1M7.678%2010.002v1M4.678%201.002v1M7.678%201.002v1%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qaddColumnBefore{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%28-90%206.835%206.19%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qaddColumnAfter{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%208.81%209.835%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qdeleteColumn{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M4.678%2010.002v1M7.678%2010.002v1M4.678%201.002v1M7.678%201.002v1%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qmergeOrSplit{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%205.81%206.835%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M.976%207.967h11M4.065.637v11M4.057%208.54v3M3.437%203.906h-3M8.057%208.54v3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qtoggleHeaderCell{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2219%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M4.408%207.548c.397%200%20.626-.236.626-.653V5.487h1.965v1.408c0%20.417.23.653.626.653s.625-.236.625-.653V3.118c0-.417-.229-.653-.625-.653-.397%200-.626.236-.626.653v1.357H5.034V3.118c0-.417-.229-.653-.626-.653-.396%200-.628.236-.628.653v3.777c0%20.417.232.653.628.653z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qalignLeft{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.303%20.805%29%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20width%3D%2213.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3Crect%20y%3D%228%22%20width%3D%2213.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3Crect%20y%3D%224%22%20width%3D%227.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qalignCenter{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20d%3D%22M.7%201.559h12M4.05%205.559h5.3M.7%209.559h12%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qalignRight{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20d%3D%22M.7%201.559h12M7.4%205.559h5.3M.7%209.559h12%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qcolorText{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.274%2013.123c.396%200%20.624-.185.774-.606L3.164%209.37h5.019l1.125%203.147c.149.421.378.606.773.606.457%200%20.791-.29.791-.694%200-.115-.026-.246-.097-.44L6.688.95c-.193-.518-.51-.756-.993-.756-.518%200-.843.246-1.037.765L.58%2011.989c-.07.194-.097.325-.097.44%200%20.404.334.694.791.694zm2.347-5.098%202.03-5.783h.053l2.03%205.783H3.621z%22%20fill%3D%22%231F1E1D%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
        }
        &.qhighlight{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.136%20.136%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20transform%3D%22rotate%2845%206.364%206.364%29%22%20x%3D%222.464%22%20y%3D%222.464%22%20width%3D%227.8%22%20height%3D%227.8%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20d%3D%22M1.52%206.364h9.714%22%2F%3E%3Cpath%20d%3D%22M13.34%2015.063c1.665%200%202.774-1.086%202.774-2.71%200-.794-.316-1.61-.598-2.216-.414-.91-1.09-1.898-1.68-2.8-.136-.211-.308-.317-.495-.317-.192%200-.364.106-.5.317-.594.91-1.278%201.91-1.692%202.832-.273.59-.586%201.398-.586%202.183%200%201.625%201.11%202.711%202.778%202.711z%22%20fill%3D%22%231F1E1D%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        &.qfile{
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%229%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.85%2015c-1.062%200-1.969-.365-2.721-1.094C1.376%2013.177%201%2012.282%201%2011.22V3.695c0-.747.265-1.382.796-1.908A2.627%202.627%200%200%201%203.713%201c.758%200%201.4.262%201.925.787.524.526.787%201.167.787%201.926v6.894c0%20.444-.152.82-.455%201.13-.303.308-.677.463-1.12.463-.443%200-.817-.166-1.12-.499a1.694%201.694%200%200%201-.455-1.181V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v6.562c0%20.257.085.476.254.657.169.18.376.271.621.271a.83.83%200%200%200%20.621-.262.874.874%200%200%200%20.254-.63V3.694c0-.56-.195-1.033-.586-1.417A1.956%201.956%200%200%200%203.713%201.7c-.56%200-1.036.193-1.427.578-.39.384-.586.857-.586%201.417v7.56c0%20.852.31%201.572.928%202.161.618.59%201.359.884%202.222.884.875%200%201.619-.298%202.231-.893.613-.595.919-1.324.919-2.187V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v7.192c0%201.062-.376%201.96-1.129%202.696C6.82%2014.632%205.911%2015%204.85%2015z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
        }
    }

    .qcolors{
        display: inline-block;
        width: 20px;
        height: 20px;
        opacity: 1;

        &:hover{
            cursor: pointer;
        }

        &.unset{
            position: relative;
            box-shadow: inset 0 0 1px 0 black;
            overflow: hidden;

            &:before{
                content: '';
                background-color: tomato;
                width: 120%;
                height: 2px;
                transform: rotate(-45deg);
                position: absolute;
                top: calc(50% - 1px);
                left: -1px;
            }
        }
    }

    .qseparator{
        width: 16px;
    }
}