/* Button UI */

:root {
    --icon-pack-new-notification-background-color: var(--color-logo-red);
}

.new-notification {
    background: url(../icons/new.svg);
}

.icon-auto {

}

.new-notification { /* with color */
    position: absolute;
    display: inline-block;
    width: 38px;
    height: 16px;
    -webkit-mask-image: url(../icons/new.svg);
    mask-image: url(../icons/new.svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    background-color: var(--icon-pack-new-notification-background-color);
}

#NewNotificationPopup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 30%;
    transform: translate(-50%,0);
    background: #fff;
    border: 1px solid var(--color-logo-red);
    border-radius: 10px;
    padding: 30px 20px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    min-width: 250px;
}

#NewNotificationPopupClose {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    font-size: 22px;
    color: var(--color-logo-red);
}

#NewNotificationPopupContent {
    font-size: 16px;
    font-weight: 500;
}