.box-messge {
    position: absolute;
    transition: all 0.5s;
    top: -100px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    z-index: 1000000;
    left: 50%;
    transform: translateX(-50%);

    &.show {
        top: 15px;
    }

    .card {
        width: 330px;
        height: 80px;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 10px 15px;
        background-color: #ffffff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-around;
        gap: 15px;
    }

    .wave {
        position: absolute;
        transform: rotate(90deg);
        left: -31px;
        top: 32px;
        width: 80px;
        fill: #fc0c0c3a;
    }

    .icon-container {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fc0c0c48;
        border-radius: 50%;
        margin-left: 8px;
    }


    .message-text-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-grow: 1;
    }

    .message-text,
    .sub-text {
        margin: 0;
        cursor: default;
    }

    .message-text {
        color: #d10d0d;
        font-size: 17px;
        font-weight: 700;
    }

    .sub-text {
        font-size: 14px;
        color: #555;
    }

    .cross-icon {
        width: 18px;
        height: 18px;
        color: #555;
        cursor: pointer;
    }

    /* From Uiverse.io by akshat-patel28 */
    .card {
        width: 330px;
        height: 80px;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 10px 15px;
        background-color: #ffffff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 15px;
    }

    .wave {
        position: absolute;
        transform: rotate(90deg);
        left: -31px;
        top: 32px;
        width: 80px;
        fill: #fc0c0c3a;
    }

    .icon-container {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fc0c0c48;
        border-radius: 50%;
        margin-left: 8px;
    }

    .icon {
        color: #d10d0d;
    }

    .message-text-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex-grow: 1;
    }

    .message-text,
    .sub-text {
        margin: 0;
        cursor: default;
    }

    .message-text {
        color: #d10d0d;
        font-size: 17px;
        font-weight: 700;
    }

    .sub-text {
        font-size: 14px;
        color: #555;
    }

    .cross-icon {
        width: 18px;
        height: 18px;
        color: #555;
        cursor: pointer;
    }
}