.notifications-area {
    max-width: 850px;
    padding:0px 0px 0px 0px;
}
.dismissible-container {
    margin: 0;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
}

.dismissible {
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: translateY(-100%);
    animation-name: drop-in;
    animation-direction: normal;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
}

.dismissible .dismissible-message {
    flex: 1;
    padding: 0 2rem;
    font-size: 1.25rem;
}

.dismissible::after {
    content: "";
    position: absolute;
    height: 10%;
    width: 100%;
    bottom: 100%;
    left: 0;
}

.dismissible.info {
    background: #cce2c0;
    color: #000;
}

.dismissible.warning {
    background:#f8ee9f;
    color: #000;
}

.dismissible.unavailable {
    background: #fcd6c4;
    color: #000;
}

.dismissible.info::after {
    background: #0b22e2 ;
}

.dismissible.warning::after {
    background: #0b22e2;
}

.dismissible.unavailable::after {
    background: #0b22e2;
}

.dismiss {
    color: inherit;
    appearance: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    background: inherit;
}

.dismiss:hover {
    background: rgba(0, 0, 0, 0.12);
}

@keyframes drop-in {
    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(10%);
    }

    100% {
        transform: translateY(0);
    }
}