.alert {
    color: var(--color-essential-black);
    margin-bottom: var(--spacing-40);
    text-align: center;
    border-width: var(--outline-width-2px);
    border-style: solid;
    border-radius: var(--radius-16);
    border-top-width: 18px;
    padding: var(--spacing-12) var(--spacing-20) var(--spacing-20);
}

#error-message,
#info-message {
    margin-bottom: 0px;
}

.alert-info,
.alert-warning {
    border-color: var(--color-secondary-powder-blue);
}

.alert-error {
    border-color: var(--color-secondary-flat-red);
}

.alert-success {
    border-color: var(--color-secondary-flat-green);
}

.subheadline {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-32);
    color: var(--color-essential-black);
}

.subheadline:before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.subheadline.error:before,
.subheadline.info:before,
.subheadline.warning:before,
.subheadline.success:before {
    background-repeat: no-repeat;
}

.subheadline.info:before,
.subheadline.warning:before {
    background-image: url(../../img/info.svg);
}

.subheadline.error:before {
    background-image: url(../../img/error.svg);
}

.subheadline.success:before {
    background-image: url(../../img/success.svg);
}

.box-warning {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-32);
    padding: var(--spacing-16);
    border-radius: var(--radius-16);
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-warning-dark);
    background-color: var(--color-warning-light);
    font-size: var(--font-size-body);
}