.msg-item {
            z-index: 9999;
            --yyz-dh-time: 0.3s;
            position: fixed;
            top: 0;
            /* right: 0; */
            /* left: auto; */
            /* width: 200px; */
            padding: 0;
            transition: all var(--yyz-dh-time);
            /* animation: msg-item-in-right var(--yyz-dh-time) forwards; */

            font-size: 17px;
        }

        .msg-item.top-left {
            animation: msg-item-in-left var(--yyz-dh-time) forwards;
            right: auto;
            left: 0;
            top: 0;
            bottom: auto;
        }

        .msg-item.top-right {
            animation: msg-item-in-right var(--yyz-dh-time) forwards;
            right: 0;
            left: auto;
            top: 0;
            bottom: auto;
        }

        .msg-item.bottom-left {
            animation: msg-item-in-left var(--yyz-dh-time) forwards;
            right: auto;
            left: 0;
            top: auto;
            bottom: 0;
        }

        .msg-item.bottom-right {
            animation: msg-item-in-right var(--yyz-dh-time) forwards;
            right: 0;
            left: auto;
            top: auto;
            bottom: 0;
        }
        .msg-item.top-center {
            animation: msg-item-in-top var(--yyz-dh-time) forwards;
            right: auto;
            left: 50%;
            top: 0;
            bottom: auto;
        }        
        .msg-item.bottom-center {
            animation: msg-item-in-bottom var(--yyz-dh-time) forwards;
            right: auto;
            left: 50%;
            transform: translatex(-50%);
            top: auto;
            bottom: 0;
        }

        @keyframes msg-item-in-top {
            0% {
                transform: scaleX(0) translateY(-100%) translatex(-50%);
            }

            100% {
                transform: scaleX(1) translateY(0) translatex(-50%);
            }
        }
        @keyframes msg-item-in-bottom {
            0% {
                transform: scaleX(0) translateY(100%) translatex(-50%);
            }

            100% {
                transform: scaleX(1) translateY(0) translatex(-50%);
            }
        }
        @keyframes msg-item-in-right {
            0% {
                transform: scaleY(0) translateX(100%);
            }

            100% {}
        }

        @keyframes msg-item-in-left {
            0% {
                transform: scaleY(0) translateX(-120%);
            }

            100% {}
        }



        @keyframes msg-item-out {
            0% {}

            100% {
                transform: scaleY(0) scaleX(0);
            }
        }


        .box {
            padding: 13px;
            padding-right: 30px;
            background-color: #fff;
            border-radius: 15px;
            position: relative;
            box-sizing: border-box;
            margin: 10px;
            
            max-width: 100%;
            width: 200px;
            box-shadow: 0 0 15px rgba(127, 127, 127, 0.3);
        }

        span {
            overflow-wrap: break-word;  

            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }

        .close svg {
            display: block;
            transition: transform .2s;
            fill: #000;
        }

        .close:hover {
            background-color: rgba(127, 127, 127, 0.2);
        }

        .close:hover>svg {
            transform: rotate(90deg);
        }