/**
 * Highlighting for Tag blocks used in:
 * - TinyMCE Editor (authors)
 * - Author's preview (before submit)
 * - Customer's preview
 */

.highlight-block-tags > * {
    margin: 1.2em 0 !important;
    padding: 0.8em;
    line-height: 1.4em;
}

.highlight-block-tags p {
    font-size: 1.1em;
    border: 2px dotted #13be0e;
    position: relative;
}

.placeholder {
    border: 2px dotted #666 !important;
    color: #666 !important;
}

.placeholder:before {
    color: #666 !important;
    content: "Export structure" !important;
}

.highlight-block-tags p:after,
.highlight-block-tags ul:after,
.highlight-block-tags ol:after,
.highlight-block-tags dt:after,
.highlight-block-tags h1:after,
.highlight-block-tags h2:after,
.highlight-block-tags h3:after,
.highlight-block-tags h4:after,
.highlight-block-tags h5:after,
.highlight-block-tags h6:after {
    content: attr(data-index);
    left: -18px;
    top: -5px;
    position: absolute;
    font-size: 12px;
    color: #afafaf;
}

.highlight-block-tags p:before,
.highlight-block-tags ul:before,
.highlight-block-tags ol:before,
.highlight-block-tags dt:before,
.highlight-block-tags h1:before,
.highlight-block-tags h2:before,
.highlight-block-tags h3:before,
.highlight-block-tags h4:before,
.highlight-block-tags h5:before,
.highlight-block-tags h6:before {
    margin: 0;
    top: -1.2em;
    padding: 0.4em;
    font-weight: normal !important;
    color: #13be0e;
    font-size: 14px;
    background-color: white !important;
    position: absolute;
    background-color: transparent;
    font-weight:bold;
}

.highlight-block-tags p:before {
    content: "P";
}

.highlight-block-tags ul,
.highlight-block-tags ol,
.highlight-block-tags dl {
    font-size: 1.1em;
    line-height: 1.4em;
    border: 2px dotted #13be0e;
    position: relative;
}

.highlight-block-tags ul {
    list-style: disc;
}
.highlight-block-tags ol {
    list-style: decimal;
}

.highlight-block-tags li {
    padding: 0 !important;
    margin: 0 0 0 1em !important;
}

.highlight-block-tags li + li {
    padding-top: 0.4em;
}

.highlight-block-tags ul:before {
    content: "UL";
}
.highlight-block-tags ol:before {
    content: "OL";
}
.highlight-block-tags dl:before {
    content: "DL";
}

.highlight-block-tags h1,
.highlight-block-tags h2,
.highlight-block-tags h3,
.highlight-block-tags h4,
.highlight-block-tags h5,
.highlight-block-tags h6 {
    color: inherit !important;
    font-size: 1.3em !important;
    border: 2px dotted #13be0e;
    content: " ";
    position: relative;
}

.highlight-block-tags h1:before {
    content: "H1";
}
.highlight-block-tags h2:before {
    content: "H2";
}
.highlight-block-tags h3:before {
    content: "H3";
}
.highlight-block-tags h4:before {
    content: "H4";
}
.highlight-block-tags h5:before {
    content: "H5";
}
.highlight-block-tags h6:before {
    content: "H6";
}

.no-margin-top-on-first-bock > * {
    margin-top: 0.24em !important;
}