#body {
				padding: 0px;
				margin: 0px;
				background-color: #090A0B;
				font-family: Roboto, sans-serif;
				color: white;
				font-size: 15px;
			}

			#mm-iframe {
			  z-index: 1;
			}
			#mm-div {
			  z-index: 0;
			}

			.resizer {
				background: repeating-linear-gradient(
				  45deg,
				  #000000,
				  #000000 10px,
				  #1F1F1F 10px,
				  #1F1F1F 20px
				);
			}
			
			#resizerinfo {
			  position: absolute;
			  top: 10px;
			  right: 10px;
			}

			#infobox {
			  align-self: right;
			  margin-left: auto;
			  display: flex;
			  align-items: right;
			}

			button.mbtn {
			  color: #fff;
			  background-color: #1976d2;
			  border: 0;
			  cursor: pointer;
			}

			#viewercount, #techinfo {
			  color: #fff;
			  background-color: #090A0B;
			  border: 0;
			}

			.button-divider {
				background-color: #090A0B;
			}

			.button-info {
			  color:#fff;
			  border:0;
			}

			button.mbtn.disabled {
				background-color: #303030;
				color: #707070;
				cursor: default;

			}

			button.mbtn.passive {
				background-color: #03738C;
			}

			button.mbtn.active {
				background-color: #F2B441;
			}			
			
			.buttonbar {
			  display: flex;
			  align-items: left;
			  background-color: #1F1F1F;
			  overflow: hidden;
			  margin-bottom: 4px;
			}

			#header-container {
			}

			#header {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  background-color: #1F1F1F;
			}
			#logo {
			  height: 100%;
			  background-image: url("../images/scenecity_banner_y512.png");
			  background-repeat: no-repeat;
			  background-size: contain;
			}
			#sceneid {
			  color: white;
			  text-align: center;
			}
			#sceneid-img {
			}
			#player-container {
			  position: absolute;
			  left: 0px;
			}
			#username-container {
			  text-align: right;
			  color: white;
			}
			#username {
			  text-align: right;
			}
			.mm {
			  border: none;
			  position: absolute;
			  top: 0px;
			  left: 0px;
			}
			
			/* Min size */
			#body {
				font-size: 8px;
			}
			#header-container {
				padding: 10px 10px 0px 10px;
			}
			#header {
			  height: 32px;
			  padding: 10px;
			}
			#logo {
			  width: 132px;
			}
			#sceneid {
			  width: 77px;
			}
			#sceneid-img {
			  width: 75px;
			  height: 12px;
			  border: 1px solid black;
			}
			button.mbtn {
			  padding: 4px;
			  border-radius: 3px;
			  margin: 4px;
			  font-size: 8px;
			}
			#viewercount, #techinfo {
			  padding: 4px;
			  border-radius: 3px;
			  margin: 4px;
			  font-size: 8px;
			}
			.button-divider {
				width: 4px;
			}
			.buttonbar {
			  margin-bottom: 4px;
			}
			.button-info {
			  padding: 4px;
			  margin: 4px;
			  font-size: 8px;
			}
			#player-container {
			  top: 62px;
			  height: calc(100% - 182px);
			  width: calc(100% - 20px);
			  padding: 0px 10px 10px 10px;
			}
			#username {
			  font-size: 16px;
			}
			.mm {
			  width: calc(100% - 20px);
			  height: calc(100% - 20px);
			  padding: 10px;
			}
			
			@media (min-width: 1400px) {
				#body {
					font-size: 15px;
				}
				#header-container {
				  padding: 20px 20px 0px 20px;
				}
				#header {
				  height: 64px;
				  padding: 20px;
				}
				#logo {
				  width: 352px;
				}
				#sceneid {
				  width: 204px;
				}
				#sceneid-img {
				  width: 200px;
				  height: 32px;
				  border: 2px solid black;
				}
				button.mbtn {
				  padding: 8px;
				  border-radius: 6px;
				  margin: 8px;
				  font-size: 15px;
				}
				#viewercount, #techinfo {
				  padding: 8px;
				  border-radius: 6px;
				  margin: 8px;
				  font-size: 15px;
				}
				.button-divider {
					width: 5px;
				}
				.buttonbar {
				  margin-bottom: 5px;
				}
				.button-info {
				  padding: 8px;
				  margin: 8px;
				  font-size: 15px;
				}
				#player-container {
				  top: 124px;
				  height: calc(100% - 262px);
				  width: calc(100% - 40px);
				  padding: 0px 20px 20px 20px;
				}
				#username {
				  font-size: 30px;
				}
				.mm {
				  width: calc(100% - 40px);
				  height: calc(100% - 40px);
				  padding: 20px;
				}
			}
			@media (min-width: 2400px) {
				#body {
					font-size: 20px;
				}
				#header-container {
				  padding: 40px 40px 0px 40px;
				}
				#header {
				  height: 128px;
				  padding: 40px;
				}
				#logo {
				  width: 528px;
				}
				#sceneid {
				  width: 308px;
				}
				#sceneid-img {
				  width: 300px;
				  height: 48px;
				  border: 4px solid black;
				}
				button.mbtn {
				  padding: 10px;
				  border-radius: 8px;
				  margin: 10px;
				  font-size: 20px;
				}
				#viewercount, #techinfo {
				  padding: 10px;
				  border-radius: 8px;
				  margin: 10px;
				  font-size: 20px;
				}
				.button-divider {
					width: 10px;
				}
				.buttonbar {
				  margin-bottom: 10px;
				}
				.button-info {
				  padding: 10px;
				  margin: 10px;
				  font-size: 20px;
				}
				#player-container {
				  top: 248px;
				  height: calc(100% - 444px);
				  width: calc(100% - 80px);
				  padding: 0px 40px 40px 40px;
				}
				#username {
				  font-size: 40px;
				}
				.mm {
				  width: calc(100% - 80px);
				  height: calc(100% - 80px);
				  padding: 40px;
				}
			}

/* The snackbar - position it at the bottom and in the middle of the screen */
#toast {
  visibility: hidden; 
  min-width: 250px; 
  margin-left: -125px; 
  background-color: #333; 
  color: #fff; 
  text-align: center; 
  border-radius: 2px; 
  position: fixed; 
  z-index: 1; 
  left: 50%; 
  bottom: 200px;
}

#toast #toastImg{
	width: 50px;
	height: 50px;
    
    float: left;
    
    padding-top: 9px;
    padding-bottom: 9px;
    
    box-sizing: border-box;

    
    background-color: #111;
    color: #fff;
}
#toast #toastMessage{

    
    color: #fff;
   
    padding: 16px;
    
    overflow: hidden;
	white-space: nowrap;
}

#toast.show {
  visibility: visible; 
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation-fill-mode: forwards;  
}


@-webkit-keyframes fadein {
  from {bottom: -50px; opacity: 0}
  to {bottom: 200px; opacity: 1}
}

@keyframes fadein {
  from {bottom: -50px; opacity: 0}
  to {bottom: 200px; opacity: 1}
}

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

@keyframes fadeout {
  from {bottom: 200px; opacity: 1}
  to {bottom: -50px; opacity: 0}
}