#toastbar {
            visibility: hidden; /* Hidden by default. Visible on click */
            width: 220px; /* Set a default minimum width */            
            /*margin-left: -125px;*/ /* Divide value of min-width by 2 */
            background-color: #222222; /* Black background color */
            color: #ffffff; /* White text color */
            text-align: center; /* Centered text */
            border-radius: 5px; /* Rounded borders */
            padding: 16px; /* Padding */
            position: fixed; /* Sit on top of the screen */
            z-index: 100000; /* Add a z-index if needed */
            left: calc((100% - 240px) / 2); /* Center the toastbar */
            top: 100px; /* 30px from the bottom */
            border:solid 2px #ffffff;
        }

            #toastbar.show {
                visibility: visible; /* Show the toastbar */
                -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                animation: fadei n 0.5s, fadeout 0.5s 2.5s;
            }
            #toastbar.show2 {
                visibility: visible; /* Show the toastbar */
                -webkit-animation: fadein 0.5s;
                animation: fadein 0.5s;
            }
            /************************************/
            #toastbar2 {
                visibility: hidden; /* Hidden by default. Visible on click */
                width: 220px; /* Set a default minimum width */
                /*margin-left: -125px;*/ /* Divide value of min-width by 2 */
                background-color: #222222; /* Black background color */
                color: #ffffff; /* White text color */
                text-align: center; /* Centered text */
                border-radius: 5px; /* Rounded borders */
                padding: 16px; /* Padding */
                position: fixed; /* Sit on top of the screen */
                z-index: 100000; /* Add a z-index if needed */
                left: calc((100% - 240px) / 2); /* Center the toastbar */
                top: 100px; /* 30px from the bottom */
                border: solid 2px #ffffff;
            }

                #toastbar2.show {
                    visibility: visible; /* Show the toastbar */
                    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                    animation: fadei n 0.5s, fadeout 0.5s 2.5s;
                }

                #toastbar2.show2 {
                    visibility: visible; /* Show the toastbar */
                    -webkit-animation: fadein 0.5s;
                    animation: fadein 0.5s;
                }

        /* Animations to fade the toastbar in and out */
        @-webkit-keyframes fadein {
            from {
                top: 0;
                opacity: 0;
            }

            to {
                top: 100px;
                opacity: 1;
            }
        }

        @keyframes fadein {
            from {
                top: 0;
                opacity: 0;
            }

            to {
                top: 100px;
                opacity: 1;
            }
        }

        @-webkit-keyframes fadeout {
            from {
                top: 100px;
                opacity: 1;
            }

            to {
                top: 0;
                opacity: 0;
            }
        }

        @keyframes fadeout {
            from {
                top: 100px;
                opacity: 1;
            }

            to {
                top: 0;
                opacity: 0;
            }
        }