/* ==========================
   POS CSS Notifications
========================== */

.css-notification{

    position:fixed;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    z-index:99999;

}

.notification-logo{

    width:64px;
    height:64px;

    background:#111827;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transform:scale(.5);

    position:relative;
    z-index:2;

}

.notification-logo img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.notification-card{

    background:#111827;

    color:white;

    border-radius:30px;
	position:relative;
	z-index:1;
    margin-left:-25px;
	
    min-height:60px;
    display:flex;
    align-items:center;
	
    padding:15px 20px 15px 35px;
	
	opacity:0;

    max-width:0;

    overflow:hidden;

    white-space:nowrap;
	
	transform-origin:left center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.30);

}

.notification-content{

    opacity:0;

}

.notification-content h6{

    margin:0;

    font-size:16px;

    font-weight:700;

}

.notification-content p{

    margin:3px 0 0 0;

    font-size:14px;

    color:#d1d5db;

}

/* Entrada */

.logo-show{

    animation:
    logoShow .30s ease forwards;

}

.card-show{

    animation:
    cardShow .40s ease forwards;

}

.content-show{

    animation:
    contentShow .25s ease forwards;

}

/* Salida */

.content-hide{

    animation:
    contentHide .20s ease forwards;

}

.card-hide{

    animation:
    cardHide .35s ease forwards;

}

.logo-hide{

    animation:
    logoHide .25s ease forwards;

}

/* Keyframes */

@keyframes logoShow{

    0%{

        opacity:0;

        transform:
        scale(.3);

    }

    50%{

        opacity:1;

        transform:
        scale(1.2);

    }

    75%{

        transform:
        scale(.95);

    }

    100%{

        opacity:1;

        transform:
        scale(1);

    }

}

@keyframes cardShow{

    0%{

        max-width:0;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        max-width:350px;

        opacity:1;

    }

}

@keyframes contentShow{

    0%{

        opacity:0;

        transform:
        translateX(-10px);

    }

    100%{

        opacity:1;

        transform:
        translateX(0);

    }

}

@keyframes contentHide{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes cardHide{

    0%{

        max-width:350px;

        opacity:1;

    }

    100%{

        max-width:0;

        opacity:0;

    }

}

@keyframes logoHide{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.5;

        transform:scale(.85);

    }

    100%{

        opacity:0;

        transform:scale(.3);

    }

}