/* Universal configuration */
.note,
.tip,
.important,
.warning,
.caution {
    display: flex;
    flex-direction: column;
    width: 75%;
    background-color: var(--bg-1);
    color: var(--fg-1);
    padding: 0.5rem;
    border-radius: 1rem;
    border: solid 0.35rem;
    margin-top: var(--box-margin-vert);
    margin-bottom: var(--box-margin-vert);
}
.note .title,
.tip .title,
.important .title,
.warning .title,
.caution .title {
    align-self: center;
}
.note .title p,
.tip .title p,
.important .title p,
.warning .title p,
.caution .title p {
    font-size: 0;
}
.note .title p::before,
.tip .title p::before,
.important .title p::before,
.warning .title p::before,
.caution .title p::before {
    font-family: 'boxicons' !important;
    font-size: 3rem;
}

/* Notes */
.note {
    border-color: var(--blue);
}
.note .title p::before {
    content: "\eb21";
    color: var(--blue);
}
/* Tips */
.tip {
    border-color: var(--green);
}
.tip .title p::before {
    content: "\eaee";
    color: var(--green);
}
/* Importants */
.important {
    border-color: var(--violet);
}
.important .title p::before {
    content: "\eb0d";
    color: var(--violet);
}
/* Warnings */
.warning {
    border-color: var(--yellow);
}
.warning .title p::before {
    content: "\eac5";
    color: var(--yellow);
}
/* Cautions */
.caution {
    border-color: var(--red);
}
.caution .title p::before {
    content: "\eac6";
    color: var(--red);
}