.text-message-popup {
    position: fixed;
    width: 500px;
    min-height: 30%;
    background: #fff;
    margin: auto;
    left: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
    right: 0;
    top: 94px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: -1;
    border-radius: 4px;
    text-align: center;
    opacity: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    text-align: left;
}

    .text-message-popup .close-message {
        position: absolute;
        right: 10px;
        top: 8px;
        font-size: 20px;
        color: #000000;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 50%;
        padding: 5px;
        background: #fff;
        line-height: 13px;
    }

    .text-message-popup h4 {
        color: #fff;
    }

.slide-in-blurred-left {
    animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    z-index: 555555555555;
}


@keyframes slide-in-blurred-left {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.message-out {
    left: -150%;
}

.text-message h3 {
    text-align: center;
}

.modal-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rebeccapurple;
    opacity: 0.9;
    z-index: 55555555;
    transition: 0.5s;
}

/* Scrollbar style*/

.text-message::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.text-message::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.text-message::-webkit-scrollbar-thumb {
    background: #796aee;
}

    /* Handle on hover */
    .text-message::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* End Scrollbar style */