.notification-dialog,
.notification-dialog * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.notification-area {
    position: fixed;
    right: 0;
    width: 382px;
    max-height: 100vh;
    padding-right: 10px;
    z-index: 1000;
}

.notification-area--top {
    top: 0;
}

.notification-area--bottom {
    bottom: 0;
}

.notification-dialog {
    background: #fff;
    background: linear-gradient(to bottom, #fff 0%, #f1f1f1 100%);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, opacity 0.2s ease;
}

.notification-dialog--top {
    margin-top: 10px;
}

.notification-dialog--bottom {
    margin-bottom: 10px;
}

.notification-dialog--hidden {
    visibility: hidden;
    transform: translateX(382px);
    opacity: 0;
}

.notification-dialog--hiding {
    transform: scale(0.75);
    opacity: 0;
}

.notification-dialog-layout {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 64px;
}

.notification-dialog-message,
.notification-dialog-close {
    display: table-cell;
    vertical-align: middle;
}

.notification-dialog-message {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    word-wrap: break-word;
    padding: 20px 20px 20px 72px;
    background: url(images/info.svg) 20px center no-repeat;
    background-size: 32px 32px;
}

.notification-dialog-close {
    width: 72px;
    border-left: 1px solid #e1e1e1;
    background: url(images/close.svg) center no-repeat;
    background-size: 16px 16px;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

.notification-dialog-close:active {
    background-color: rgba(0, 0, 0, 0.1);
}