/* Slip */

.slip-container {

    width: 100%;

    align-items: center;

    max-width: 500px;

    margin: 0px auto;

}



.slip-card {

    width: 100%;

    max-width: 500px;

}



.slip-card-1 {

    width: 100%;

    max-width: 500px;

    /* background: #00CFFF; */

}



.card-notification {

    width: 100%;

    max-width: 500px;

}



.notification-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 10px;

    width: 100%;

    max-width: 500px;

}



.notification {

    background-color: #333;

    border: 1px solid #444;

    padding: 0px 0px 15px 0px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    opacity: 0;

    transform: translateY(100%);

    animation: slideUp 1s ease forwards;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    width: 100%;

    max-width: 500px;

}



.card-text-title {

    margin-bottom: 20px;

    width: 100%;

    max-width: 500px;

}



.notification .icon {

    width: 50px;

    height: 50px;

    margin-right: 15px;

    margin-left: 15px;

}



.notification .title-highlight {

    margin-top: 15px;

}



.notification .title-highlight .highlight {

    color: #00CFFF;

    width: 100%;

    max-width: 500px;

}



.text-title {

    text-align: center;

    font-size: 26px;

    font-weight: bold;

    color: white;

    background: linear-gradient(135deg, #5db6f6, #053e73);

    border-radius: 15px 15px 0px 0px;

    margin-bottom: 10px;

    padding: 20px 15px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    border: 2px solid #3399e2;

}



.notification p {

    margin: 0;

    color: white;

    /* background-color: #00CFFF; */

    text-align: start;

}



@keyframes slideUp {

    0% {

        opacity: 0;

        transform: translateY(100%);

    }



    100% {

        opacity: 1;

        transform: translateY(0);

    }

}