/* ==========================================================
   PUEP Universal Information Blocks
   Version: 1.2.0

   Supported structures:

   Paragraph:
   <p class="note">Text with <strong>formatting</strong></p>

   Block:
   <div class="note">
       <p>Text with <strong>formatting</strong></p>
   </div>
   ========================================================== */


/* ==========================================================
   1. Base styles
   ========================================================== */

p.note,
p.comments,
p.importantly,
p.definition,
p.rule,
p.conclusion,
p.descript,
p.fake,
p.advice,
p.problem,
p.example,
p.alert,
p.info-faq,
p.quote,
p.codeblock,

div.note,
div.comments,
div.importantly,
div.definition,
div.rule,
div.conclusion,
div.descript,
div.fake,
div.advice,
div.problem,
div.example,
div.alert,
div.info-faq,
div.quote,
div.codeblock {
    position: relative;

    width: 100%;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem 1rem 3.5rem;

    border-left: 5px solid #666;
    border-radius: 6px;

    background: #f8f9fa;

    box-sizing: border-box;
}


/* ==========================================================
   2. Icons
   ========================================================== */

p.note::before,
p.comments::before,
p.importantly::before,
p.definition::before,
p.rule::before,
p.conclusion::before,
p.descript::before,
p.fake::before,
p.advice::before,
p.problem::before,
p.example::before,
p.alert::before,
p.info-faq::before,
p.quote::before,
p.codeblock::before,

div.note::before,
div.comments::before,
div.importantly::before,
div.definition::before,
div.rule::before,
div.conclusion::before,
div.descript::before,
div.fake::before,
div.advice::before,
div.problem::before,
div.example::before,
div.alert::before,
div.info-faq::before,
div.quote::before,
div.codeblock::before {
    position: absolute;
    top: 1rem;
    left: 1rem;

    display: block;

    width: 1.5rem;
    height: 1.5rem;

    text-align: center;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5rem;

    pointer-events: none;
}


/* ==========================================================
   3. Content inside DIV blocks
   ========================================================== */

div.note > :first-child,
div.comments > :first-child,
div.importantly > :first-child,
div.definition > :first-child,
div.rule > :first-child,
div.conclusion > :first-child,
div.descript > :first-child,
div.fake > :first-child,
div.advice > :first-child,
div.problem > :first-child,
div.example > :first-child,
div.alert > :first-child,
div.info-faq > :first-child,
div.quote > :first-child,
div.codeblock > :first-child {
    margin-top: 0;
}

div.note > :last-child,
div.comments > :last-child,
div.importantly > :last-child,
div.definition > :last-child,
div.rule > :last-child,
div.conclusion > :last-child,
div.descript > :last-child,
div.fake > :last-child,
div.advice > :last-child,
div.problem > :last-child,
div.example > :last-child,
div.alert > :last-child,
div.info-faq > :last-child,
div.quote > :last-child,
div.codeblock > :last-child {
    margin-bottom: 0;
}


/* ==========================================================
   4. Inline formatting protection
   ========================================================== */

p.note strong,
p.comments strong,
p.importantly strong,
p.definition strong,
p.rule strong,
p.conclusion strong,
p.descript strong,
p.fake strong,
p.advice strong,
p.problem strong,
p.example strong,
p.alert strong,
p.info-faq strong,
p.quote strong,
p.codeblock strong,

div.note strong,
div.comments strong,
div.importantly strong,
div.definition strong,
div.rule strong,
div.conclusion strong,
div.descript strong,
div.fake strong,
div.advice strong,
div.problem strong,
div.example strong,
div.alert strong,
div.info-faq strong,
div.quote strong,
div.codeblock strong {
    display: inline;
    font-weight: 700;
}

p.note em,
p.comments em,
p.importantly em,
p.definition em,
p.rule em,
p.conclusion em,
p.descript em,
p.fake em,
p.advice em,
p.problem em,
p.example em,
p.alert em,
p.info-faq em,
p.quote em,
p.codeblock em,

div.note em,
div.comments em,
div.importantly em,
div.definition em,
div.rule em,
div.conclusion em,
div.descript em,
div.fake em,
div.advice em,
div.problem em,
div.example em,
div.alert em,
div.info-faq em,
div.quote em,
div.codeblock em {
    display: inline;
    font-style: italic;
}

p.note span,
p.comments span,
p.importantly span,
p.definition span,
p.rule span,
p.conclusion span,
p.descript span,
p.fake span,
p.advice span,
p.problem span,
p.example span,
p.alert span,
p.info-faq span,
p.quote span,
p.codeblock span,

div.note span,
div.comments span,
div.importantly span,
div.definition span,
div.rule span,
div.conclusion span,
div.descript span,
div.fake span,
div.advice span,
div.problem span,
div.example span,
div.alert span,
div.info-faq span,
div.quote span,
div.codeblock span {
    display: inline;
}


/* ==========================================================
   5. Note
   ========================================================== */

p.note,
div.note {
    border-color: #2196f3;
    background: #eef7ff;
}

p.note::before,
div.note::before {
    content: "📝";
}


/* ==========================================================
   6. Comments
   ========================================================== */

p.comments,
div.comments {
    border-color: #607d8b;
    background: #f4f7f9;
}

p.comments::before,
div.comments::before {
    content: "💬";
}


/* ==========================================================
   7. Important
   ========================================================== */

p.importantly,
div.importantly {
    border-color: #d32f2f;
    background: #fff3f3;
}

p.importantly::before,
div.importantly::before {
    content: "❗";
}


/* ==========================================================
   8. Definition
   ========================================================== */

p.definition,
div.definition {
    border-color: #7b1fa2;
    background: #f8f1ff;
}

p.definition::before,
div.definition::before {
    content: "📖";
}


/* ==========================================================
   9. Rule
   ========================================================== */

p.rule,
div.rule {
    border-color: #fb8c00;
    background: #fff8e8;
}

p.rule::before,
div.rule::before {
    content: "📏";
}


/* ==========================================================
   10. Conclusion
   ========================================================== */

p.conclusion,
div.conclusion {
    border-color: #43a047;
    background: #eef9f0;
}

p.conclusion::before,
div.conclusion::before {
    content: "✔";
}


/* ==========================================================
   11. Description
   ========================================================== */

p.descript,
div.descript {
    border-color: #009688;
    background: #eefdfb;
}

p.descript::before,
div.descript::before {
    content: "ℹ";
}


/* ==========================================================
   12. Fake
   ========================================================== */

p.fake,
div.fake {
    border-color: #424242;
    background: #f3f3f3;
}

p.fake::before,
div.fake::before {
    content: "⚠";
}


/* ==========================================================
   13. Advice
   ========================================================== */

p.advice,
div.advice {
    border-color: #3f51b5;
    background: #eef1ff;
}

p.advice::before,
div.advice::before {
    content: "💡";
}


/* ==========================================================
   14. Problem
   ========================================================== */

p.problem,
div.problem {
    border-color: #e65100;
    background: #fff1e7;
}

p.problem::before,
div.problem::before {
    content: "⛔";
}


/* ==========================================================
   15. Example
   ========================================================== */

p.example,
div.example {
    border-color: #00897b;
    background: #eefcf8;
}

p.example::before,
div.example::before {
    content: "📌";
}


/* ==========================================================
   16. Alert
   ========================================================== */

p.alert,
div.alert {
    border-color: #c62828;
    background: #fff0f0;
}

p.alert::before,
div.alert::before {
    content: "🚨";
}


/* ==========================================================
   17. FAQ information block
   ========================================================== */

p.info-faq,
div.info-faq {
    border-color: #1565c0;
    background: #eef6ff;
}

p.info-faq::before,
div.info-faq::before {
    content: "❓";
}


/* ==========================================================
   18. Quote
   ========================================================== */

p.quote,
div.quote {
    border-color: #6d4c41;
    background: #f8f5f3;
}

p.quote::before,
div.quote::before {
    content: "❝";
}


/* ==========================================================
   19. Code
   ========================================================== */

p.codeblock,
div.codeblock {
    border-color: #455a64;
    background: #f5f5f5;

    font-family: Consolas, Monaco, "Courier New", monospace;
    overflow-wrap: anywhere;
}

p.codeblock::before,
div.codeblock::before {
    content: "</>";
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.85rem;
}


/* ==========================================================
   20. Links
   ========================================================== */

p.note a,
p.comments a,
p.importantly a,
p.definition a,
p.rule a,
p.conclusion a,
p.descript a,
p.fake a,
p.advice a,
p.problem a,
p.example a,
p.alert a,
p.info-faq a,
p.quote a,
p.codeblock a,

div.note a,
div.comments a,
div.importantly a,
div.definition a,
div.rule a,
div.conclusion a,
div.descript a,
div.fake a,
div.advice a,
div.problem a,
div.example a,
div.alert a,
div.info-faq a,
div.quote a,
div.codeblock a {
    display: inline;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}


/* ==========================================================
   21. Lists inside DIV blocks
   ========================================================== */

div.note ul,
div.note ol,
div.comments ul,
div.comments ol,
div.importantly ul,
div.importantly ol,
div.definition ul,
div.definition ol,
div.rule ul,
div.rule ol,
div.conclusion ul,
div.conclusion ol,
div.descript ul,
div.descript ol,
div.fake ul,
div.fake ol,
div.advice ul,
div.advice ol,
div.problem ul,
div.problem ol,
div.example ul,
div.example ol,
div.alert ul,
div.alert ol,
div.info-faq ul,
div.info-faq ol,
div.quote ul,
div.quote ol,
div.codeblock ul,
div.codeblock ol {
    padding-left: 1.5rem;
}


/* ==========================================================
   22. Images and media inside DIV blocks
   ========================================================== */

div.note img,
div.comments img,
div.importantly img,
div.definition img,
div.rule img,
div.conclusion img,
div.descript img,
div.fake img,
div.advice img,
div.problem img,
div.example img,
div.alert img,
div.info-faq img,
div.quote img,
div.codeblock img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================
   23. Responsive layout
   ========================================================== */

@media (max-width: 600px) {
    p.note,
    p.comments,
    p.importantly,
    p.definition,
    p.rule,
    p.conclusion,
    p.descript,
    p.fake,
    p.advice,
    p.problem,
    p.example,
    p.alert,
    p.info-faq,
    p.quote,
    p.codeblock,

    div.note,
    div.comments,
    div.importantly,
    div.definition,
    div.rule,
    div.conclusion,
    div.descript,
    div.fake,
    div.advice,
    div.problem,
    div.example,
    div.alert,
    div.info-faq,
    div.quote,
    div.codeblock {
        margin: 1rem 0;
        padding: 0.85rem 1rem 0.85rem 3rem;

        border-left-width: 4px;
        border-radius: 5px;
    }

    p.note::before,
    p.comments::before,
    p.importantly::before,
    p.definition::before,
    p.rule::before,
    p.conclusion::before,
    p.descript::before,
    p.fake::before,
    p.advice::before,
    p.problem::before,
    p.example::before,
    p.alert::before,
    p.info-faq::before,
    p.quote::before,
    p.codeblock::before,

    div.note::before,
    div.comments::before,
    div.importantly::before,
    div.definition::before,
    div.rule::before,
    div.conclusion::before,
    div.descript::before,
    div.fake::before,
    div.advice::before,
    div.problem::before,
    div.example::before,
    div.alert::before,
    div.info-faq::before,
    div.quote::before,
    div.codeblock::before {
        top: 0.85rem;
        left: 0.8rem;

        width: 1.35rem;
        height: 1.35rem;

        font-size: 1.05rem;
        line-height: 1.35rem;
    }

    p.codeblock::before,
    div.codeblock::before {
        font-size: 0.72rem;
    }
}


/* ==========================================================
   PUEP Compact TinyMCE Toolbar
   Version: 1.0.1
   ========================================================== */

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow {
    min-height: 28px !important;
    padding: 2px !important;
}

.tox .tox-toolbar__group {
    margin: 0 !important;
    padding: 0 2px !important;
}

.tox .tox-tbtn,
.tox .tox-split-button {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 2px !important;
}

.tox .tox-tbtn svg,
.tox .tox-icon svg {
    width: 13px !important;
    height: 13px !important;
}

.tox .tox-tbtn__select-label {
    font-size: 12px !important;
}

.tox .tox-mbtn {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 4px !important;
}