.info-message {
    position: fixed;
    bottom: 30px;
    width: 500px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999999;
    box-shadow: 0 10px 40px rgba(0,0,0,.2),0 4px 3px rgba(0,0,0,.01);
    visibility: hidden;
    color: #ffffff;
}

    .info-message.success .info-message-icon:after {
        content: "\f058";
        font-family: "Font Awesome 6 Pro";
        font-size: 2em;
    }

    .info-message.success {
        background-color: #55a51c !important;
        color: #ffffff !important;
    }

        .info-message.success #statusMessageText {
            border-right: 1px solid rgba(255, 255, 255, 0.3);
        }

    .info-message.error .info-message-icon:after {
        content: "\f071";
        font-family: "Font Awesome 6 Pro";
        font-size: 2em;
    }

    .info-message.error {
        background-color: #f2ae00 !important;
        color: #333333 !important;
    }

        .info-message.error #statusMessageText {
            border-right: 1px solid rgba(0, 0, 0, 0.3);
        }

#statusMessageCloseButton {
    cursor: pointer;
    font-size: 1.5em;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
    margin: 0;
    padding-left: 15px;
}

    #statusMessageCloseButton:hover {
        opacity: 1;
    }

#statusMessageText {
    font-size: 1.25em;
    padding-right: 15px;
}

@media (max-width:767px) {
    .info-message {
        width: calc(100vw - 30px) !important;
    }
}