.messagebleft-container {
    transition: all .5s ease;
    transition-property: top, right, bottom, left, opacity;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    min-height: 14px;
    background-color: var(--bubble-bg, rgba(2, 3, 22, 0.95));
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 1.3;
    padding: 8px 12px;
    border: 1px solid #00ff00;
    box-shadow: 0 0 10px #00ff00;
    top: -100px;
    bottom: -100px;
    opacity: 0;
    z-index: 9999;
    text-align: center;
    animation: rainbow-glow 3s infinite alternate;
}

.messagebleft-container p {
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.messagebleft-container .action {
    background: inherit;
    display: inline-block;
    border: none;
    font-size: 11px;
    text-transform: uppercase;
    color: #4caf50;
    margin: 0 0 0 12px;
    padding: 0;
    min-width: min-content;
    cursor: pointer;
}

.messagebleft-container::after {
    content: "DUFANTOTO";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #ffffff;
    padding: 0;
    text-align: center;
    z-index: 1;
    animation: rainbow-stroke 1.5s infinite alternate;
}

@media(min-width:640px) {
    .messagebleft-container {
        min-width: 200px;
        max-width: 300px;
        border-radius: 2px;
        margin: 12px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media(max-width:640px) {
    .messagebleft-container {
        left: 50%;
        right: auto;
        width: auto;
        transform: translateX(-50%);
        padding: 10px 15px;
    }
}

.messagebleft-pos.bottom-center {
    top: auto !important;
    bottom: 55px;
    left: 50%;
    transform: translate(-50%, 0);
}

.messagebleft-pos.bottom-left {
    top: auto !important;
    bottom: 55px;
    left: 0;
}

.messagebleft-pos.bottom-right {
    top: auto !important;
    bottom: 55px;
    right: 0;
}

.messagebleft-pos.top-left {
    bottom: 55px;
    top: 0;
    left: 0;
}

.messagebleft-pos.top-center {
    bottom: auto !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.messagebleft-pos.top-right {
    bottom: auto !important;
    top: 0;
    right: 0;
}

@media(max-width:640px) {
    .messagebleft-pos.bottom-center, .messagebleft-pos.top-center {
        left: 50%;
        transform: translateX(-50%);
    }
}

.messagebleft {
    border: 1px solid #000;
}

@keyframes rainbow-glow {
    0% {
        box-shadow: 0 0 10px #ff0000;
        border-color: #ff0000;
    }
    16.66% {
        box-shadow: 0 0 10px #ffa500;
        border-color: #ffa500;
    }
    33.32% {
        box-shadow: 0 0 10px #ffff00;
        border-color: #ffff00;
    }
    49.98% {
        box-shadow: 0 0 10px #008000;
        border-color: #008000;
    }
    66.64% {
        box-shadow: 0 0 10px #0000ff;
        border-color: #0000ff;
    }
    83.3% {
        box-shadow: 0 0 10px #4b0082;
        border-color: #4b0082;
    }
    100% {
        box-shadow: 0 0 10px #ee82ee;
        border-color: #ee82ee;
    }
}

@keyframes rainbow-stroke {
    0% {
        text-shadow: 0 -1px 0 #ff0000, 0 1px 0 #ffa500, -1px 0 0 #ffff00, 1px 0 0 #008000;
    }
    16.66% {
        text-shadow: 0 -1px 0 #ffa500, 0 1px 0 #ffff00, -1px 0 0 #008000, 1px 0 0 #0000ff;
    }
    33.32% {
        text-shadow: 0 -1px 0 #ffff00, 0 1px 0 #008000, -1px 0 0 #0000ff, 1px 0 0 #4b0082;
    }
    49.98% {
        text-shadow: 0 -1px 0 #008000, 0 1px 0 #0000ff, -1px 0 0 #4b0082, 1px 0 0 #ee82ee;
    }
    66.64% {
        text-shadow: 0 -1px 0 #0000ff, 0 1px 0 #4b0082, -1px 0 0 #ee82ee, 1px 0 0 #ff0000;
    }
    83.3% {
        text-shadow: 0 -1px 0 #4b0082, 0 1px 0 #ee82ee, -1px 0 0 #ff0000, 1px 0 0 #ffa500;
    }
    100% {
        text-shadow: 0 -1px 0 #ee82ee, 0 1px 0 #ff0000, -1px 0 0 #ffa500, 1px 0 0 #ffff00;
    }
}