/*Notification*/

.oneosystem-notification {
    visibility: hidden;
    max-width: 50px;
    height: 70px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: rgb(177, 175, 175);
    color: #fff;
    text-align: center;
    border: 1px solid #faae40;
    border-radius: 2px;
    position: fixed;
    z-index: 103010;
    right: -50px;
    top: 57px;
    font-size: 17px;
    font-weight: bold;
    padding-top: 16px;
    padding-right: 40px;
    white-space: nowrap;
}

.oneosystem-notification #img {
    width: 50px;
    height: 50px;
    float: left;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
    background-color: rgb(7, 161, 46);
    color: #fff;
}

.oneosystem-notification #desc {
    color: #fff;
    padding: 16px;
    overflow: hidden;
    white-space: nowrap;
}

.oneosystem-notification.show {
    visibility: visible;
    /*-webkit-animation: oneosystem-notification-fadein .5s, oneosystem-notification-expand 0.5s 0.5s, oneosystem-notification-stay 3s 1s, oneosystem-notification-shrink 0.5s 2s, oneosystem-notification-fadeout 0.5s 2.5s;
    animation: oneosystem-notification-fadein .5s, oneosystem-notification-expand 0.5s 0.5s, oneosystem-notification-stay 3s 1s, oneosystem-notification-shrink 0.5s 4s, oneosystem-notification-fadeout 0.5s 4.5s;*/
}

@-webkit-keyframes oneosystem-notification-fadein {
    from {
        top: 50px;
        opacity: 0;
    }
    to {
        top: 57px;
        opacity: 1;
    }
}

@keyframes oneosystem-notification-fadein {
    from {
        top: 50px;
        opacity: 0;
    }
    to {
        top: 57px;
        opacity: 1;
    }
}

@-webkit-keyframes oneosystem-notification-expand {
    from {
        min-width: 50px
    }
    to {
        min-width: 350px
    }
}

@keyframes oneosystem-notification-expand {
    from {
        min-width: 50px
    }
    to {
        min-width: 350px
    }
}

@-webkit-keyframes oneosystem-notification-stay {
    from {
        min-width: 350px
    }
    to {
        min-width: 350px
    }
}

@keyframes oneosystem-notification-stay {
    from {
        min-width: 350px
    }
    to {
        min-width: 350px
    }
}

@-webkit-keyframes oneosystem-notification-shrink {
    from {
        min-width: 350px;
    }
    to {
        min-width: 50px;
    }
}

@keyframes oneosystem-notification-shrink {
    from {
        min-width: 350px;
    }
    to {
        min-width: 50px;
    }
}

@-webkit-keyframes oneosystem-notification-fadeout {
    from {
        top: 57px;
        opacity: 1;
    }
    to {
        top: 50px;
        opacity: 0;
    }
}

@keyframes oneosystem-notification-fadeout {
    from {
        top: 57px;
        opacity: 1;
    }
    to {
        top: 50px;
        opacity: 0;
    }
}