#popup_error_screen_container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 9;
    display: none;
}
#popup_message_container {
                            top: 0px;
                            left: 0px;
                            position: absolute;
                            width: 100vw;
                            height: 100vh;
                            z-index: 10;
                            display: none;
                            background-color: rgb(0,0,0); /* Fallback color */
                            background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
                            
                        }
#popup_warning_container {
                            top: 0px;
                            left: 0px;
                            position: absolute;
                            width: 100vw;
                            height: 100vh;
                            z-index: 10;
                            display: none;
                            background-color: rgb(0,0,0); /* Fallback color */
                            background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
                        }
#popup_loading_container {
                            top: 0px;
                            left: 0px;
                            position: absolute;
                            width: 100vw;
                            height: 100vh;
                            z-index: 10;
                            display: none;
                            background-color: rgb(0,0,0); /* Fallback color */
                            background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
                        }
#popup_error_container {
                            top: 0px;
                            left: 0px;
                            position: absolute;
                            width: 100vw;
                            height: 100vh;
                            z-index: 10;
                            display: none;
                            background-color: rgb(0,0,0); /* Fallback color */
                            background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
                        }



#popup_message {
                    min-width: 250px;
                    background-color: #777;
                    color: #fff;
                    text-align: center;
                    border-radius: 2px;
                    padding: 20px;
                    display: inline-block;
                    position: fixed;
                    top: 250px;
                    left: 50%;
                    transform: translate(-50%);
                }
#popup_warning {
                    min-width: 250px;
                    background-color: #fff;
                    color: black;
                    text-align: center;
                    vertical-align: middle;
                    border-radius: 4px;
                    border: 4px red solid;
                    padding: 40px;
                    display: inline-block;
                    position: fixed;
                    top: 250px;
                    left: 50%;
                    transform: translate(-50%);
                }
#popup_loading {
                    min-width: 250px;
                    background-color: rgb(69, 175, 236);
                    color: #fff;
                    text-align: center;
                    border-radius: 2px;
                    padding: 20px;
                    display: inline-block;
                    position: fixed;
                    top: 250px;
                    left: 50%;
                    transform: translate(-50%);
                }
#popup_error {
                    min-width: 250px;
                    background-color: #fff;
                    border: 4px red solid;
                    text-align: center;
                    border-radius: 7px;
                    padding: 30 30 30 30px;
                    display: inline-block;
                    position: fixed;
                    top: 250px;
                    left: 50%;
                    transform: translate(-50%);
                    cursor: pointer;
                }

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#popup_message_container.show {
    display: inline-block;
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#popup_warning_container.show {
    display: inline-block;
}
#popup_loading_container.show {
    display: inline-block;
}
#popup_error_screen_container.show {
    display: inline-block;
}
/* Animations to fade the div in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

#message_text {
                    color: white;
                    font-family: 'Courier New', Courier, monospace;
                    font-size: 15px;
                }
#warning_text {
                    color: black;
                    font-family: 'Courier New', Courier, monospace;
                    font-size: 15px;
                    padding-left: 20px;
                    margin-top: auto;
                    margin-bottom: auto;
                    display: inline-block;
                }
#loading_text {
                    color: white;
                    font-family: 'Courier New', Courier, monospace;
                    font-size: 15px;
                }
#error_text {
                    color: black;
                    font-family: 'Courier New', Courier, monospace;
                    font-size: 15px;
                }
#popup_title {	/*	style title label for popup window	*/
					font-family: 'Verdana', 'serif';
                    font-size: 19px;
					background-color: #fff; /* white background color */
					text-align: center;
					padding: 0 0 30px;
					display: block;
					text-decoration: underline;
				}
.loader {
            border: 4px solid #f3f3f3; /* thickness of ring and color - Light grey */
            border-top: 5px solid #ff0000; /* red */
            border-radius: 50%;     /*  make into a circle  */
            width: 12px;
            height: 12px;
            animation: spin 2s linear infinite;     /*  full rotation every 2 seconds   */
            display: inline-block;
        }

@keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }