.highlight_box {
    background-color: #eee;

    border: 0;
    border-radius: 5px;
    border-top: 10px solid #ccc;

    margin-bottom: 24px;
    padding: 12px 20px;
}

.highlight_box :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    padding-top: 0;
}

.highlight_box .title {
    background-color: #ccc;
    margin: -12px -20px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
}

.highlight_box .title::before, .highlight_box .box-icon {
    margin-right: 10px;
}

.highlight_box p:not(.title) {
    margin: 4px 0;
}

.highlight_box p + ul, .highlight_box p + ol {
    margin-top: 0.6em;
}

/****** EXERCISE ******/

.exercise .title::before {
    content: "📝";
}

.exercise .title {
    background-color: #92e6a7;
}

.exercise {
    /* Green */
    background-color: #d2f6dd;
    border-color: #92e6a7;
}



/****** INFO ******/

.info .title::before {
    content: "💡";
}

.info .title {
    background-color: #6ab0de;
}

.info {
    /* Blue */
    background-color: #e7f2fa;
    border-color: #6ab0de;
}



/****** WARNING ******/

.warning .title::before {
    content: "⚠️";
}

.warning .title {
    background-color: #f0b37e;
}

.warning {
    /* Orange */
    background-color: #ffedcc;
    border-color: #f0b37e;
}




/****** ERROR ******/

.error .title::before {
    content: "⛔";
}

.error .title {
    background-color: #fd8b8b;
}

.error {
    /* Red */
    background-color: #ffcccb;
    border-color: #fd8b8b;
}