/* Notifications start */

.notice-area {
    position: fixed;
    right: 0;
    top: 0;
    width: 470px;
    z-index: 100;
    height: 0;
    background-color: red;
    padding-right: 20px;
}

.admin-bar .notice-area {
    top: 32px;
}

.notice-area .notice {
    position: relative;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 9px 14px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    opacity: 1;
    transform: translateX(0px);
    animation: showNotify ease-in-out .3s;
}

@keyframes showNotify {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.notice-area .notice .content {
    width: 100%;
    padding-right: 15px;
}

.notice-area .notice .content p {
    margin: 0 0 8px;
    text-align: left;
}

.notice-area .notice .content p:last-child {
    margin: 0;
}

.notice-area .notice p.title {
    font-size: 16px;
    font-weight: 600;
}

.notice-area .notice p.subtitle {
    font-size: 14px;
    color: #7c7c7c;
}

.notice-area .notice .close {
    color: #777777;
    opacity: .4;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 22px;
    height: 22px;
}

.notice-area .notice .close:hover {
    opacity: .8;
}

.notice-area .notice .close svg {
    max-width: 100%;
    max-height: 100%;
}

.notice-area .notice .icon {
    color: #F3CA24;
    margin-right: 10px;
}

.notice-area .notice.success .icon {
    color: #66C272;
}

.notice-area .notice.error .icon {
    color: #FF7B69;
}

@media screen and (max-width: 782px) {
    .admin-bar .notice-area {
        top: 46px;
    }
}


@media only screen and (max-width: 575px) {
    .notice-area {
        width: 100%;
    }
    .notice-area .notice {
        margin: 10px;
    }
}

/* Notifications end */