#notificationsWrapper {
    transition: all 0.1s ease-in-out;
    position: fixed;
    right: 0;
    bottom: 2rem;
    width: 25vw;
    max-width: 420px;
    z-index: 10000000;
}

#notificationsWrapper #notificationsList {
    transition: all 0.1s ease-in-out;
}

#notificationsWrapper .notificationItem {
    transition: all 0.15s ease-in;
    transform: translateX(28vw);
    width: 25vw;
    max-width: 420px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
    height: 10vh;
    background: #FFF;
    max-height: 120px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}


#notificationsWrapper .notificationItem:not(.dismissed) {
    animation: showItem 0.35s ease-in-out;
    transform: translateX(0);
}

#notificationsWrapper .notificationItem.delete {
    transform: translateX(28vw);
    height: 0;
    margin-bottom: 0;
    margin-top: -1.5rem;
}

#notificationsWrapper .notificationItem .notificationClose {
    padding: 0.5rem;
    cursor: pointer;
    color:#666f73;
}

#notificationsWrapper .notificationItem .notificationContent {
    padding: 0 0.5rem;
    color: #666f73;
    margin-right: auto;
    margin-left: auto;
}

#notificationsWrapper .notificationItem::before {
    content: '';
    height: 100%;
    width: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

#notificationsWrapper .notificationItem .notificationIcon {
    font-size: 1.5rem;
    padding-right: 0.5rem;
    margin-left:0.5rem;
}

#notificationsWrapper .notificationItem .dismissibleScale {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:5px;
}

#notificationsWrapper .notificationItem .dismissibleScale .inner {
    height: 100%;
    width: 100%;
    background: #AFAFAF;
}




@keyframes showItem {
    0% {
        transform: translateX(28vw);
    }

    45% {
        transform: translateX(-30px);
    }

    100% {
        transform: unset;
    }
}

/**RTL**/

body[dir='rtl'] #notificationsWrapper {
    position: fixed;
    left: 0;
    right: unset;
    bottom: 2rem;
    z-index: 10000000;
}

body[dir='rtl'] #notificationsWrapper .notificationItem {
    transform: translateX(-28vw);
}

body[dir='rtl'] #notificationsWrapper .notificationItem .notificationIcon {
    margin-right: 0.5rem;
    padding-left:0.5rem;
}

body[dir='rtl'] #notificationsWrapper .notificationItem:not(.dismissed) {
    animation: showItemRtl 0.3s ease-in-out;
    transform: translateX(0);
}

body[dir='rtl'] #notificationsWrapper .notificationItem.delete {
    transform: translateX(-28vw);
}
body[dir='rtl'] #notificationsWrapper .notificationItem::before {
    left: unset;
    right:0;
}

@keyframes showItemRtl {
    0% {
        transform: translateX(-28vw);
    }

    45% {
        transform: translateX(30px);
    }

    100% {
        transform: unset;
    }
}

/**MOBILE**/
@media screen and (max-width: 768px) {
    #notificationsWrapper {
        width: 100vw;
        bottom: 0;
        max-width: 100vw;
    }

    #notificationsWrapper .notificationItem {
        width: 100vw;
        max-width: 100vw;
    }

    #notificationsWrapper .notificationItem.delete {
        transform: translateX(101vw);
    }


    body[dir='rtl'] #notificationsWrapper .notificationItem.delete {
        transform: translateX(-101vw);
    }
}

/**TYPES**/
#notificationsWrapper .notificationItem.success::before {
    background: #28a745
}

#notificationsWrapper .notificationItem.success .notificationIcon {
    color: #28a745;
}

#notificationsWrapper .notificationItem.error::before {
    background: #dc3545
}

#notificationsWrapper .notificationItem.error .notificationIcon {
    color: #dc3545;
}

#notificationsWrapper .notificationItem.warning::before {
    background: #ffc107
}

#notificationsWrapper .notificationItem.warning .notificationIcon {
    color: #ffc107;
}

#notificationsWrapper .notificationItem.info::before {
    background: #17a2b8
}

#notificationsWrapper .notificationItem.info .notificationIcon {
    color: #17a2b8;
}

@media (max-width: 1100px) {
    .managementSearchWrap {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}