.render-html,
.render-code {
    background-color: #f9f9f9;
    padding: 1em;
    border: 1px dashed #999;
}

pre {
    background: #f5f5f5;
    padding: 1em;
    overflow-x: auto;
}


.code-preview-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1em;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 0.5em;
        margin-bottom: 1.5em;
    }
}

.code-container,
.render-html,
.render-code {
    flex: 1;
    min-width: 300px;
    padding: 1em;
    border: 1px solid #ddd;
}

.language {
    max-width: 100%;
}

.code-preview-flex * {
    flex: 1;

    @media (max-width: 768px) {
        flex: 0;
    }
}

.code-output {
    white-space: pre-line;
    margin-top: 10px;
    border: 1px solid rgb(204, 204, 204);
    padding: 10px;
    background-color: rgb(249, 249, 249);
}

.code-preview-flex pre[class*=language-] {
    margin: 0;
}

.markdown img {
    max-width: 100%;
}

ex,
im,
ac {
    border: 1px solid #ddd;
    padding: 0.5em;
    margin: 0.2em 0;
    display: inline-block;
    width: 100%;
}

ex::before,
im::before,
ac::before {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
}

ul+ex:has(+ul),
li+ex:has(+li),
ul+im:has(+ul),
ul+im:has(+ul),
ul+ac:has(+ul),
li+ac:has(+li) {
    margin-top: -1rem;
    margin-left: var(--bs-list-group-item-padding-x, 2rem);
}

/* li>ex,
li>ac,
li>im {
    margin-top: -1rem;
} */


/* Gesione del caso in cui ci sia un list item con un paragrafo e un esempio */

li p+ex,
li p+ac,
li p+im {
    margin-top: -1rem;
}

/* A volte se ho degli elenchi dentro ad altri elenchi mette il titolo del primo 
livello dentro ad un tag <p> che per natura ha il margine sotto e quindi il risultato ha uno spazio inutile*/
p:has(+ul),
p:has(+ol) {
    margin-bottom: 0;
}


ex {
    background-color: #f9f9f9;
}

ex::before {
    content: "Esempio";
}

im {
    background-color: floralwhite;
}

im::before {
    content: "Importante";
}

ac {
    background-color: mintcream;
}

ac::before {
    content: "Attività Guidata";
}

li>p:only-child {
    margin-bottom: 0;
}


/* Rimozione del margine sotto al paragrafo se ultimo elemento del tag particolare */
ex>p:last-child,
im>p:last-child,
ac>p:last-child {
    margin-bottom: 0;
}



/* Gestione migliorata degli elenchi puntati */
p+ex,
p+im,
p+ac {
    margin-top: -.8rem;
    margin-bottom: 1rem;
}

li p+ex,
li p+im,
li p+ac {
    margin-bottom: 0.5rem;
}

ul li:last-child ex {
    margin-bottom: 0;

}




@media (min-width: 768px) {

    p:has(+ rt),
    lf,
    rt {
        width: 50%;
        display: inline-block;
        float: left;
    }

    lf,
    rt {
        display: inline-flex;
        align-content: center;
        /* justify-content: center; */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    lf img,
    rt img {
        max-width: 100%;
        vertical-align: center;
    }


    rt+* {
        clear: both;
        /* Garantisce che inizi su una nuova riga */
    }
}



img[alt*="+"] {
    max-width: 25%;
}

img[alt*="++"] {
    max-width: calc(100% / 3);
}

img[alt*="+++"] {
    max-width: 50%;
}

img[alt*="++++"] {
    max-width: calc(100% / 3 * 2);
}

@media (max-width: 768px) {

    img[alt*="+"],
    img[alt*="++"],
    img[alt*="+++"] {
        max-width: 100%;
        width: 100%;
    }
}

img[alt$=">"],
img[alt$="<"],
img[alt$="><"] {
    z-index: 100;
    position: relative;
}

img[alt$=">"] {
    float: right;
}

img[alt$="<"] {
    float: left;
}

img[alt$="><"] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    float: none !important;
}