.noticeContainer {
    position: relative;
    z-index: 99999999;
}

.notices {
    position: fixed;
    right: 0;
    bottom: 32px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 99999999;
}

.notice__message {
    position: relative;
    max-width: 90%;
    right: -15px;
    float: right;
    clear: both;
    margin-bottom: .75em;
    border: 1px solid var(--color-secondary);
    border-left-width: 4px;
    padding: 20px 20px 20px 44px;
    background: var(--color-secondary-light);
    width: auto;
    transition: right 1s;
}

@media screen and (min-width: 780px) {
    .notice__message {
        min-width: 385px;
    }
}

.notice__messageText {
    margin-right: 20px;
}

.notice__static,
.notice__push {
    right: 15px;
}

.notice__static {
    transition: none;
}

.notice__fail {
    border-left-color: var(--color-failure);
}

.notice__fail .notice__icon {
    color: var(--color-failure);
}

.notice__success {
    border-left-color: var(--color-success);
}


.notice__success .notice__icon {
    color: var(--color-success);
}

.notice__info {
    border-left-color: var(--color-info);
}

.notice__info .notice__icon {
    color: var(--color-info);
}

.notice__warning,
.notice__question {
    border-left-color: var(--color-warning);
}

.notice__warning .notice__icon,
.notice__question .notice__icon {
    color: var(--color-warning);
}

.notice__icon {
    position: absolute;
    top: 22px;
    left: 8px;
}

.notice__close {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: .8em;
    cursor: pointer;
    padding: 15px;
}