@charset "utf-8";

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}
html, body, #content-wrap, #content, #input_video, #cameraNotAllowed, #tutorial, #selection, #ng, #ui-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#cameraNotAllowed, #tutorial, #selection, #ng, #ui-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body {
  font-family: sans-serif;
  text-align: center;

}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
  /* display: block; */
}
.button {
  width: 80%;
  max-width: 380px;
}
/*#content-wrap {
  padding-top: 43px;
}*/
#content {
  position: relative;
}
#cameraNotAllowed {
  display: none;
  padding-top: 32px;
  font-size: 17px;
  z-index: 3;
  background-color: white;
}
#cameraNotAllowed p {
  margin: 0 5% 32px;
  text-align: initial;
}
#tutorial, #selection, #ng {
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
#tutorial {
  padding: 8px 4px;
}
#selection, #ng {
  display: none;
  padding: 8px;
  padding-bottom: 92px;
}

#ui-wrap {
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
#input_video {
  object-fit: cover;
  z-index: 1;
}
#videoContainer {
  display: none;
}
#show-tutorial {
  position: absolute;
  top: 2%;
  right: 2%;
  max-width: 240px;
}
#play, #selection-play, .buttons {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin: auto;
}
.buttons .button {
  margin: 16px 8px 0;
}
#play, #selection-play {
  opacity: 0.4;
}
#show-selection {
  bottom: 1px;
  display: none;
  width: 80%;
  max-width: 380px;
}
#retry {
  bottom: 1px;
  width: 80%;
  max-width: 380px;
}
#frame {
  max-width: 90%;
  max-height: 98%;
  min-width: 55%;
}
#output-text {
  display: none;
  position: absolute;
  width: 100px;
  height: 60px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 30px;
  font-weight: bold;
  color: magenta;
}

#ngimg{
  width: 80%;
}

#options {
  background-image: url("images/selection_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 2vh 3vw;
}
#options .title {
  width: 212px;
  margin: 16px 8px 8px;
}
.ania {
  display: inline-block;
  width: 105px;
  /* height: 130px; */
  max-width: 19vh;
}
.ania .active {
  display: none;
}

#halert{
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 9;
}
#blackscreen {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 6;
  text-align: center;
}

#alertimg{
  display: none;
  /*display: inline-block;*/
  position: absolute;
  width: auto;
  height: 70%;
  z-index: 7;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}