( function () {

const ux_bubbles_css = 'ux_message__styles';

if ( !document.getElementById( ux_bubbles_css ) ) {

            const styleEl = document.createElement( 'style' );
            styleEl.id = ux_bubbles_css;

            styleEl.textContent = `
    /* UX MESSAGE BUBBLES */

    #ux_message__wrapper {
        position        :   fixed;
        left            :   0;
        right           :   0;
        bottom          :   0;
        pointer-events  :   none;
        z-index         :   99999;
        transition      :   all 0.7s ease-in-out;
        height          :   0;
        margin-bottom   :   0;
        background-color:   #fff;
        width           :   fit-content;
        margin-left     :   12px;
    }

    #ux_message__wrapper.open {
        height          :   88px;
        margin-bottom   :   10px;
        border-radius   :   10px;
    }

    .ux_message__circle {
        display                 :   grid;
        grid-template-columns   :   56px 1fr;
        gap                     :   16px;
        align-items             :   center;
        position                :   relative;
        height                  :   88px;
        border                  :   1px solid rgba( 216 , 217 , 226 , .5 );
        box-shadow              :   rgb( 0 0 0 / 43% ) 5px 5px 37px -4px;
        pointer-events          :   auto;
        border-radius           :   10px;
        width                   :   350px;
        padding-inline          :   15px;
        border-left             :   9px solid #1674EA;
    }

    .ux_message__text {
        font-family     :   system-ui;
        font-size       :   15px;
    }
            `;

            document.head.appendChild( styleEl );
        }

    } )();


var url_query_string    =   new URLSearchParams( window.location.search );

var msg_query_string    =   url_query_string.has( 'msg' ) ? url_query_string.get( 'msg' ) : '';

const ux_messages = [{"query_string":"faa_error","message_content":"Error! Invalid Skool REF ID, please try again...","type":"error"},{"query_string":"faa_updated","message_content":"Success! Freedom Affiliate Academy ID has been successfully updated.","type":"success"},{"query_string":"m3innercircle_error","message_content":"Error! Invalid M3 Inner Circle Affiliate ID... Watch The Tutorial First and Then Please Try Again...","type":"error"},{"query_string":"m3innercircle_updated","message_content":"Success! Your M3 Inner Circle Affiliate ID Has Been Updated!","type":"success"},{"query_string":"udimi_error","message_content":"Error! Invalid Udimi Affiliate ID... Watch The Tutorial First and Then Please Try Again...","type":"error"},{"query_string":"udimi_updated","message_content":"Success! Your Udimi Affiliate ID Has Been Updated!","type":"success"},{"query_string":"mlgs_error","message_content":"Error! Invalid My Lead Gen Secret Affiliate ID, Watch The Tutorial First and Then Please Try Again...","type":"error"},{"query_string":"mlgs_updated","message_content":"Success! Your My Lead Gen Secret Affiliate ID Has Been Updated!","type":"success"},{"query_string":"legacybuilders_removed","message_content":"The Legacy Builders URL Was Removed.","type":"error"},{"query_string":"legacybuilders_updated","message_content":"Success! Your Legacy Builders Website URL Was Successfully Saved!","type":"success"},{"query_string":"sendshark_error","message_content":"The SendShark ID You Provided is Invalid Please Try Again...","type":"error"},{"query_string":"roipanel_error","message_content":"The ROI Panel API You Provided is Invalid Please Try Again...","type":"error"},{"query_string":"sendshark_updated","message_content":"Success! Your SendShark Affiliate ID Has Been Updated!","type":"success"},{"query_string":"roipanel_updated","message_content":"Success! Your ROI Panel Account Has Been Successfully Integrated!","type":"success"},{"query_string":"gotbackup_error","message_content":"The Affiliate ID You Entered For GotBackup is Invalid Please Try Again...","type":"error"},{"query_string":"gotbackup_updated","message_content":"Success! Your Got Backup Affiliate ID Has Been Updated.","type":"success"},{"query_string":"faq_submitted","message_content":"Success! Your FAQ Has Been Submitted and Will Be Reviewed Shortly! Thank You!","type":"success"},{"query_string":"ping_sent","message_content":"Success! Your referrer has been notified by email and you should receive your bonuses shortly.","type":"success"},{"query_string":"ping_error","message_content":"Error, you first must sign up as a PAID member AND download the App and perform 1 backup before you can request bonuses","type":"error"},{"query_string":"bonus_request_rejected","message_content":"Please Submit Proof \/ Testimonial In The Facebook Group First Before Requesting Bonuses...","type":"error"},{"query_string":"bonus_request_sent","message_content":"Success! The Bonus Request Has Been Sent (It Will Be Verified and Sent Out Soon...)","type":"success"},{"query_string":"automation_updated","message_content":"The Automation Has Been Updated","type":"success"},{"query_string":"updated","message_content":"Update Successful","type":"success"},{"query_string":"api_error","message_content":"The API Key You Entered Is Invalid... Please Try Again...","type":"error"},{"query_string":"autoresponder_reset","message_content":"Success! The Autoresponder Setup Has Been Reset","type":"success"}]
// Create a new <div> element
const ux_message__wrapper = document.createElement( 'div' );

// Set the id
ux_message__wrapper.id = 'ux_message__wrapper';

// Append it to the <body>
document.body.appendChild( ux_message__wrapper );


if( msg_query_string != '' ){

    ux_messages.forEach( function ( item ) {

        console.log( item.query_string )

        if ( item.query_string == msg_query_string ) {

            if ( item.type == 'success' ) { // GREEN MESSAGE

                let message_content = `
                    <div class="ux_message__circle" id="ux_message__circle" style="border-left-color: rgb(22, 160, 133);">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            height="48"
                            viewBox="0 -960 960 960"
                            width="48">
                            <path
                                id="icon_path"
                                fill="#49d761"
                                d="m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z"
                                style="fill: rgb(26, 188, 156);">
                            </path>
                        </svg>
                        <div class="ux_message__text"> ${ item.message_content } </div>
                    </div>`;

                document.querySelector( '#ux_message__wrapper' ).insertAdjacentHTML( 'beforeend', message_content );

                setTimeout( function () {
                    document.querySelector( '#ux_message__wrapper' ).classList.add( 'open' );
                }, 500 );

            } else if( item.type == 'error' ) { // RED MESSAGE

                let message_content = `
                    <div class="ux_message__circle" id="ux_message__circle" style="border-left-color: rgb(192, 57, 43);">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            height="48px"
                            viewBox="0 -960 960 960"
                            width="48px"
                            fill="#BB271A">
                            <path
                                d="m336-294 144-144 144 144 42-42-144-144 144-144-42-42-144 144-144-144-42 42 144 144-144 144 42 42ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z">
                            </path>
                        </svg>
                        <div class="ux_message__text"> ${ item.message_content } </div>
                    </div>`;

                document.querySelector( '#ux_message__wrapper' ).insertAdjacentHTML( 'beforeend', message_content );

                setTimeout( function () {
                    document.querySelector( '#ux_message__wrapper' ).classList.add( 'open' );
                }, 500 );

            }else if( item.type == 'warning' ) { // YELLOW MESSAGE

                let message_content = `
                    <div class="ux_message__circle" id="ux_message__circle" style="border-left-color: rgb(249, 202, 36);">
                        <svg 
                            width="48px"
                            height="48px"
                            viewBox="0 0 64 64"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            stroke="#000000">
                                <circle cx="32" cy="32" r="24"/><line x1="32" y1="16" x2="32" y2="36"/>
                                <line x1="32" y1="44" x2="32" y2="48"/>
                            
                        </svg>
                        <div class="ux_message__text"> ${ item.message_content } </div>
                    </div>`;

                document.querySelector( '#ux_message__wrapper' ).insertAdjacentHTML( 'beforeend', message_content );

                setTimeout( function () {
                    document.querySelector( '#ux_message__wrapper' ).classList.add( 'open' );
                }, 500 );

            }

                setTimeout( function () {
                    document.querySelector( '#ux_message__wrapper' ).classList.remove( 'open' );
                }, 6000 );

        }

    });



}