body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #002C80 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { width:400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#progress-bar-text { width: 65px; height: 12.5px; margin: auto; background: url('progress-bar-text.png') no-repeat center; transform:translate(0%, 100%); background-size: contain }

        
#audio-button {
	position: absolute; /* Absolute positioning relative to the unity-container */
	top: 10px;           /* 10 pixels from the top */
	left: 10px;          /* 10 pixels from the left */
	z-index: 1000;       /* Ensure it's on top */
	padding: 10px 10px;
	background-color: transparent;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#audio-hint {
	position: absolute; /* Absolute positioning relative to the unity-container */
	top: 10px;           /* 10 pixels from the top */
	left: 50px;          /* 10 pixels from the left */
	z-index: 1000;       /* Ensure it's on top */
	padding: 10px 10px;
	background-color: transparent;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#audio-button img {
	width: 100%;   /* Full width of the button */
	height: auto;  /* Maintain aspect ratio */
	box-shadow: none;
}

.holder {
  padding:40px;
  margin:0 auto;
}

.holder span {
  color:#fff;
  text-align:center;
  display:block;
  padding:12px;
}

.surround {
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  height:16px;
  position:relative;
  width:50%;
  margin:0 auto;
}

/*these are the end bars pinned left and right on the top so they mask out the shape of the loading bar edges */

.surround::before,
.surround::after {
  position:absolute;
  width:8px;
  height:16px;
  content:"";
  display:block;
  background-image: url("p-bar-sides.png");
  background-size:16px 16px;
  background-repeat:no-repeat;
  top:0px;
  z-index:8;
}

.surround::before {
  background-position:top left;
  left:-6px;
}

.surround::after {
  background-position:top right;
  right:-6px;
}



.loader-bg {
  position:absolute;
  width:100%;
  height:16px;
  top:0;
  left:0;
  z-index:1;
  width:calc(100% + 4px);
  left:-2px;
  background-image: url("p-bar-loader.png");
  background-size:15px 16px;
  background-repeat:repeat-x;
  background-position:center center;
}

.loader-bar {
  position:absolute;
  height:100%;
  top:0;
  right:0;
  z-index:2;
  background-color:#002F87;
  height:16px;
}