.notif-success .notif-icon-i {
    background: #292;
    color: white;
}

.notif-success .notif-icon-shadow:after {
    background: #151;
}

.notif-success .notif-body {
    background: #7B7;
    border-color: #9D9 !important;
    color: #093309;
}

.notif-success .notif-body-close {
    color: #151;
}

.notif-success .notif-body-close:hover {
    color: #093309;
}

.notif-danger .notif-icon-i {
    background: #D33;
    color: white;
}

.notif-danger .notif-icon-shadow:after {
    background: #711;
}

.notif-danger .notif-body {
    background: #D77;
    border-color: #DAA !important;
    color: #330909;
}

.notif-danger .notif-body-close {
    color: #711;
}

.notif-danger .notif-body-close:hover {
    color: #330909;
}


.notif-warning .notif-icon-i {
    background: #DD3;
    color: white;
}

.notif-warning .notif-icon-shadow:after {
    background: #771;
}

.notif-warning .notif-body {
    background: #EEA;
    border-color: #EED !important;
    color: #333309;
}

.notif-warning .notif-body-close {
    color: #771;
}

.notif-warning .notif-body-close:hover {
    color: #333309;
}

.notif-info .notif-icon-i {
    background: #3EE;
    color: white;
}

.notif-info .notif-icon-shadow:after {
    background: #177;
}

.notif-info .notif-body {
    background: #9DE;
    border-color: #BEE !important;
    color: #093333;
}

.notif-info .notif-body-close {
    color: #177;
}

.notif-info .notif-body-close:hover {
    color: #093333;
}

.notif-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 102px;
    right: 0;
    width: 350px;
    max-width: 450px;
    z-index: 10;
}

.notif {
    display: flex;
    align-items: center;
    position: relative;
    right: -366px;
    width: 100%;
    z-index: 10;
    box-shadow: 0 0 24px #0003;
    transition: right 0.25s;
}

.notif:not(:first-child) {
    margin-top: 8px;
}

.notif-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    bottom: calc(50% - 25px);
    left: -16px;
    width: 32px;
    height: 40px;
    height: 40px;
    font-size: 1.5rem;
    z-index: 12;
    overflow: hidden;
}

.notif-icon-i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    z-index: 1;
}

.notif-icon-shadow {
    position: relative;
    width: 16px;
    height: 8px;
    overflow: hidden;
}

.notif-icon-shadow:after {
    content: '';
    position: absolute;
    width: 18px;
    height: 8px;
    margin-left: 1px;
    margin-top: -4px;
    background: orange;
    transform: rotate(25deg);
}

.notif-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 400px;
    padding: 8px 8px 8px 24px;
    border-style: solid;
    border-width: 3px;
    border-right: none;
    z-index: 10;
}

.notif-body-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: none;
    font-size: 1.5rem;
    border: none;
    transition: 0.15s;
}

.notif-show {
    right: 0 !important;
}