.callout {
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--bs-primary-bg-subtle);
    border-left: 0.5rem solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

.callout-info {
    background-color: var(--bs-info-bg-subtle);
    border-left: 0.5rem solid var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);
}

.callout-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-left: 0.5rem solid var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

.callout-danger {
    background-color: var(--bs-danger-bg-subtle);
    border-left: 0.5rem solid var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
}

label.required::after {
    content: "*";
}