.message-box-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: fit-content;
    min-height: 50px;
    background: #ffffff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: 0.5s ease-in-out;
    transform: translateY(100%);
    z-index: 99;
}

    .message-box-wrapper.show {
        transform: translateY(0%);
    }

    .message-box-wrapper .message-box {
        position: relative;
        padding: 10px;
    }

        .message-box-wrapper .message-box hr.top {
            width: 50px;
            border-top: 4px solid #CCCCCC;
            border-radius: 15px;
            margin: 0px auto 10px auto;
        }

        .message-box-wrapper .message-box hr.bottom {
            width: 100px;
            border-top: 4px solid #101010;
            border-radius: 15px;
            margin: 10px auto;
        }

        .message-box-wrapper .message-box .message-box-content {
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;
        }

            .message-box-wrapper .message-box .message-box-content .message-box-icon {
            }

            .message-box-wrapper .message-box .message-box-content .message-box-title h1,
            .message-box-wrapper .message-box .message-box-content .message-box-title h2,
            .message-box-wrapper .message-box .message-box-content .message-box-title h3,
            .message-box-wrapper .message-box .message-box-content .message-box-title h4,
            .message-box-wrapper .message-box .message-box-content .message-box-title h5,
            .message-box-wrapper .message-box .message-box-content .message-box-title h6 {
                color: #101010;
                font-size: 20px;
                font-weight: bold
            }

            .message-box-wrapper .message-box .message-box-content .message-box-description {
                color: #878787;
                font-size: 14px;
                font-weight: normal
            }

            .message-box-wrapper .message-box .message-box-content .message-box-buttons {
                margin: 20px 0px 0px 10px
            }

            .message-box-wrapper .message-box .message-box-content .confirm-btn {
                background-color: #F58220;
                color: white;
                border: none;
                padding: 20px;
                margin: 0px 0px 10px 0px;
                border-radius: 30px;
                font-size: 1rem;
                cursor: pointer;
                width: 300px;
                font-weight: bold;
                transition: 0.3s all;
                outline: none !important;
            }

                .message-box-wrapper .message-box .message-box-content .confirm-btn:hover {
                    background-color: #e06d1c;
                }

            .message-box-wrapper .message-box .message-box-content .cancel-btn {
                background-color: #002D62;
                color: white;
                border: none;
                padding: 20px;
                margin: 0px 0px 10px 0px;
                border-radius: 30px;
                font-size: 1rem;
                cursor: pointer;
                width: 300px;
                font-weight: bold;
                transition: 0.3s all;
                outline: none !important;
            }

                .message-box-wrapper .message-box .message-box-content .cancel-btn:hover {
                    background-color: #002754;
                }

.message-overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    z-index: 91;
}

/*Icon and Animation*/

.message-box-svg {
    width: 100px;
    height: 100px;
}

    .message-box-svg .msg-box-icon {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }

        .message-box-svg .msg-box-icon.check {
            stroke-dashoffset: -400;
        }

    .message-box-svg .check.animate {
        -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
        animation: dash-check 0.9s 0.35s ease-in-out forwards;
    }

    .message-box-svg .error.animate {
        transform-origin: center; /* Center the scale transformation */
        transition: transform 0.5s ease; /* Smooth transition for scaling */
        -webkit-animation: pulse 1.3s ease-in-out;
        animation: pulse 1.3s ease-in-out;
    }

    .message-box-svg .question.animate,
    .message-box-svg .warning.animate {
        transform-origin: center; /* Center the scale transformation */
        -webkit-animation: ring 4s .7s ease-in-out forwards;
        -webkit-transform-origin: center;
        -moz-animation: ring 4s .7s ease-in-out forwards;
        -moz-transform-origin: center;
        animation: ring 4s .7s ease-in-out forwards;
    }

/*Sucess Animation*/
@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -400;
    }

    100% {
        stroke-dashoffset: 600;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -400;
    }

    100% {
        stroke-dashoffset: 600;
    }
}

/*Question & Warning Animations*/
@-webkit-keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

/*Error Animation*/
@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    
    30% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}