.Notices {
    margin-inline: 0;
    margin-block: .5rem 1rem;
    z-index: 999;
}

ul.Notices__list {
    margin: 0 auto !important;
    list-style: none;
}

.Notices__item {
    position: relative;
    padding-inline: 1rem 3rem;
    padding-block: .5rem;
    border-radius: 3px;
}

.Notices__item + .Notices__item {
    margin-block: 1rem 0;
}

.Notices__item--fail {
    color: var(--baseLight100);
    background-color: var(--noticeFail);
}

.Notices__item--success {
    color: var(--baseLight100);
    background-color: var(--noticeSuccess);
}

.Notices__item--question,
.Notices__item--warning {
    background-color: var(--noticeWarning);
}

.Notices__item--info {
    color: var(--baseLight100);
    background-color: var(--noticeInfo);
}

.Notices__item a {
    text-decoration: underline;
}

.Notices__item--fail a,
.Notices__item--info a {
    color: var(--baseLight100);
}

.Notices__item--success a,
.Notices__item--question a,
.Notices__item--warning a {
    color: var(--baseDark900);
}

.singlepage {
    position: fixed;
    right: 10px;
    width: auto;
    margin: 0;
    z-index: 100000;
    overflow: hidden;
}

.singlepage .Notices__item {
    max-width: 600px;
}

/**
 * Close button in dialog must have text instead of 'x'
 * Can easy be misled by close dialog button
 */

.has-js .Notices__close.Notices__closePlaceholder,
.Notices__closeButton {
    position: absolute;
    top: 3px;
    right: 0;
    display: flex;
    padding: .5rem 1rem;
    line-height: 1.4;
    border: 0;
    overflow: hidden;
    text-decoration: none;
    text-indent: -999em;
    cursor: pointer;
}

.Notices__closeButton::after {
    display: block;
    font-size: 1rem;
    content: '\e833';
    font-family: 'fa-regular';
    text-indent: 0;
}

/* FIX: Notices in non-iframe dialog should have a
 * margin-left and -right of the width of the shadow
 * to prevent the notices to be cut off by the parent elem.
 */
.pbdialogcontainer .Notices__item {
    margin: .5rem .5rem 1rem;
}