body { padding: 0; margin: 0;
} }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #FFFFFF }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
/* #unity-logo { width: 624px; height: 763.px; background: url('mascot1.png') no-repeat center } */

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#pleaserotate-graphic{
        fill: #fff;
    }

    #pleaserotate-backdrop {
        color: #fff;
            background: url('BG_Rotation.webp');
    }


#unity-progress-bar-empty
 { 
	margin-left: auto; margin-right: auto;  width: 141px; height: 15px;  margin-top: 10px;
    color: #000 ;
    background-color: #8f8383 ;
	border-radius: 4px;
	

 }
#unity-progress-bar-full {
	width: 0px; height: 15px; margin-top: 10px; 
	color: #fff;
    background: radial-gradient(circle, rgba(98,232,57,1) 0%, rgba(41,194,49,1) 100%);
	padding: 0.01em 0px;
    border-radius: 4px;
	text-align: center !important;
	
	}
	
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }


.loader {
  width: 76px;
  height: 10px;
  -webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) left/20% 100%;
  background: linear-gradient(#0ffd00 0 0) left/0% 100% no-repeat #ddd;
  animation: l17 2s infinite steps(6);
  margin: auto;
  margin-top: 10px;
}
@keyframes l17 {
    100% {background-size:120% 100%}
}