/* Notice: a yellow box (Bootstrap .alert-warning) for what must not be overlooked, with a warning sign on the left. */

.cb-notice {
    position: relative;
    margin-bottom: var(--cb-notice-gap, 1.5rem);
    padding-left: calc(var(--cb-notice-icon-size, 1.5rem) + 2rem);
}

/* warning sign: a filled circle with an exclamation mark, drawn in CSS so the element needs no icon font */
.cb-notice::before {
    content: "!";
    position: absolute;
    top: var(--bs-alert-padding-y, 1rem);
    left: 1rem;
    width: var(--cb-notice-icon-size, 1.5rem);
    height: var(--cb-notice-icon-size, 1.5rem);
    border-radius: 50%;
    background-color: var(--cb-notice-icon-bg, var(--bs-warning-text-emphasis));
    color: var(--cb-notice-icon-color, var(--bs-warning-bg-subtle));
    font-weight: 700;
    line-height: var(--cb-notice-icon-size, 1.5rem);
    text-align: center;
}

.cb-notice > :last-child {
    margin-bottom: 0;
}