#notif-container {
    position: fixed;
    right: 50%;
    margin-right: -175px;
    top: 10px;
    max-width: 350px;
    width: 90%;
    max-height: 98%;
    display: flex;
    flex-direction: column-reverse;
    background: none;
    z-index: 99999999999999999999;
    font-size: 13px !important;
}

#notif-container p{margin: 0}

.notif{
  background: #fff;
  background: rgba(255,255,255,.99);
  border-top: 5px solid;
  padding: 10px 20px;
  border-radius:2px;
  box-shadow: 0 3px 2px #888;
  color : #444;
  margin: 7px 0;
  position: relative;
  word-break:break-word;
}

.notif .time{position: absolute; right: .25em; font-size: .8em; bottom : .25em; color : #888; cursor: pointer}
.notif .cross{position: absolute; right: -.5em; font-size: 2.2em; top: -1.1em; color :rgba(0,0,0,.2); cursor: pointer}
.notif .cross:hover{color: #444}
.notif .btn{border: none; border-radius: 3px}

/* Info-Blue Defaults*/
.notif{border-color:#1b809e; background: #abe3f4}
.notif .btn{background-color: #1b809e}
.notif h4{color:#1b809e; margin-top: 0}

.notif-success{border-color:#169688; background: #acf7ef}
.notif .btn-success{background-color: #169688}
.notif-success h4{color:#169688}

.notif-danger{border-color:#ce4844; background: #f5c0bf}
.notif .btn-danger{background-color: #ce4844}
.notif-danger h4{color:#ce4844}

.notif-warning{border-color:#aa6708; background: #f5ddba}
.notif .btn-warning{background-color: #aa6708}
.notif-warning h4{color:#aa6708}