body { padding: 0; margin: 0 ;font-family: 'IBM Plex Sans', sans-serif;font-weight: 800;font-size: .8em;}
#unity-container { 
  position: absolute;  
  display: flex; 
  padding: 8px;
  border-radius:1.6vh;
  
}
#unity-container.fullscreen{
  padding: 0px;
}

#unity-canvas{  
  position: absolute;  
  display: flex; 
  padding: 8px;
  border-radius:1.6vh;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* margin-top: 4.8rem; */
}

#unity-container.unity-mobile {left: 50%; top: 25%; transform: translate(-50%, -25%)}
#unity-canvas {border-radius:1.6vh; background: #ffffff; }
.unity-mobile #unity-canvas { width: 100%; height: 100%;}

#unity-warning { 
  position: absolute; 
  left: 50%; top: 5%; 
  width: 100%;
  border-radius: 8px;
  text-align: center;
  transform: translate(-50%); 
  background: #ffe8a8; 
  padding: 10px; 
  display: none;
  font-size: 1.28em;
  font-weight: 600;
}

.unity-mobile #unity-warning { 
  font-size: 1em;
  font-weight: 600;
}
#unity-loading-bar { 
  /* width: 100%; height: 3%;  */
    border-radius:16px;
    overflow: hidden;
    position: absolute; 
    height: 3%;
    /* left: 50%; bottom: 1%;  */
    left: 1.6vh; right: 1.6vh;
    bottom: 1.6vh;

    /* transform: translate(-50%, -50%) */
  }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png?v=1') no-repeat center }
#dive-logo_zone { width:40%;height: 100%;font-weight: 800; flex-direction: row;display:flex ;}
#dive-logo_zone #p{font-size: 1.04em;}
#dive-logo-wide { width: 50%; background: url('dive-logo-wide_color.png?v=1') no-repeat center;background-size: 50%; }
#dive-slideshow { width: auto; height: auto; background-color: white}
#unity-progress-bar-empty 
{ 
    width: 100%; 
    height: 100%; 
    
    /* margin-top: 10px;  */
    /* margin-left: 6.5px;  */
    /* background: url('progress-bar-empty-dark.png') no-repeat center  */
    /* background-color:#19114A; */
    background-color:#A1A0C0;
}
#uBridge-input {
    position:absolute;
}
#unity-progress-bar-full 
{ 
    width: 0%; 
    height: 100%; 
    /* margin-top: 10px;  */
    /* background: url('progress-bar-full-dark.png') no-repeat center ; */
    background-color: #36316A;
}
#unity-footer 
{ 
    /*top:4%;*/
    font-size:100%;
    display:flex ;
    position: absolute;
    height: 8vh;
    justify-content: space-between;
    align-items:flex-start ;
    top: calc(100% + 8px);
    left: 1.6vh; right: 1.6vh;
}
.unity-mobile #unity-footer { 
    height: 6.4vh;
    font-size: .72em;
}
#unity-webgl-logo { float:left; width: 204px; height: 38px}
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
.unity-mobile .unity-fullscreen-button {
  height: 24px;
}
.unity-fullscreen-button 
{ 
    
  height: 52px;
  /* background: url('fullscreen-button.png') no-repeat center; */
  /* background-size: 64%; */
  
  background-color: #36316A;
  border-radius: 8px;
  /* box-shadow: 0.71px 0.71px #686390; */
  border: none;
  display: none;
  aspect-ratio:1/1;
  transition: .2s;
  border: #686390 solid 1px;
  position: relative;
}
.unity-fullscreen-button#unity-fullscreen-button__out
{
    right: 5.2vh;
    top:50%; 
  position: absolute;
  z-index: 1024;
}

.unity-fullscreen-button#unity-fullscreen-button__out::after{
-webkit-mask-image: url('FullScreen_out.png?v=1');
  mask-image: url('FullScreen_out.png?v=1');
}

.unity-fullscreen-button:hover 
{ 
    /* background: url('fullscreen-button_hovered.png') no-repeat center; */
    background-color: #fff;
}
.unity-fullscreen-button::after{
  content: "";
  position: absolute;
    aspect-ratio:1/1;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  -webkit-mask-image: url('FullScreen_in.png?v=1');
  mask-image: url('FullScreen_in.png?v=1');
  background-color: #fff;

  mask-size: 64%;
  -webkit-mask-size: 64%;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-position: center;
  -webkit-mask-position: center;

  transition: .2s;
}
.unity-fullscreen-button:hover::after
{
  cursor: pointer;
  /* background: url('fullscreen-button_hovered.png') no-repeat center;background-size: 32px; */
  background-color: #36316A;
  background-blend-mode: multiply;

}


input{
    font-size: 64px;
}


#loading-slideshow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%; 
    flex-grow: 1;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
#background-slideshow {
    /* width: 100%;height: 100%; */
    background-color: #f1f2f3;
    transition: color .8s;
    transition-duration: .8s;
    display: flex;
    /* left: 50%; top: 50%; transform: translate(-50%, -51%) ; */
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius:1.6vh;
    overflow: hidden;
    flex-grow: 1;
    
  }

  #slide-pages-container{
    position: absolute;
    display: flex;
    bottom: 8%;left: 50%; transform: translate(-50%, 0%) ;
    /* background-color: #fff; */
    gap: .8vh;
    height: 3.2%;
    min-width: 2.4vh;
    flex-direction: row;
  }

  .slide-page-indicator{
    height: 100%;
    aspect-ratio:1/1;
    border-radius: 50%;
    background-color: #f1f2f3;
    transition: all .2s;
  }

  .slide-page-indicator.active{
    background-color: #19114A;
  }

  #mobile-orientation-warn{
    position: absolute;
    transform:translate(-50%, -50%);
    top: 50%;
    left: 50%;
    
    height: 40vh;
    width: 40vh;
    border-radius: 16vh;
    /* background-color: #d3d3d3; */
    font-size: 1.2em;
    font-weight: bold;
    z-index: 1000;
    display: none;
  }
  @keyframes rotate-fade {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: rotate(-90deg);
    opacity: 1;
  }
  60% {
    transform: rotate(-90deg);
    opacity: 0;
  }
  80% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

#mobile-orientation-warn #icon {
 height: 100%;
  width: 100%;
  -webkit-mask-image: url('phone_icon.png');
  mask-image: url('phone_icon.png');
  background-color: #111;

  mask-size: 64%;
  -webkit-mask-size: 64%;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-position: center;
  -webkit-mask-position: center;
  animation: rotate-fade 2.5s linear infinite;
  margin: auto;
  display: block;
}