html, body {
  min-height: 100%;
  background-color: #181818;
  color: #e1e1e1;
  /* font-family: 'UniversNextPro-Regular'; */
}
main {
  min-height: 95vh;
  /* background-image: linear-gradient(to bottom, #1a1a1a 20%, #262626 85%); */
  background: var(--em-qrac-loggedin-bg);
  background-size: cover;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
}
.caption {
  font-size: 16px;
  font-weight: bold;
}
.caption-en {
  font-family: 'UniversNextPro-Bold';
}
.caption-ja {
  font-family: 'M2C-Bold';
}
.hide {
  display: none;
}
.vertical-align {
  display: flex;
  align-items: center;
}
.img-responsive {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .btn-xs-block {
    display: block;
    width: 100%;
  }
  a.btn-xs-block + a.btn-xs-block {
    margin-top: 1.5rem;
  }
  .mt-3 {
    margin-top: 0px !important;
  }
}


/* Fonts */

@font-face {
  font-family: 'GothamBook';
  src:  url('https://umw-static-download.embodyvr.io/capcom/fonts/GothamBook.woff2') format('woff2');
}
@font-face {
  font-family: 'GothamMedium';
  src:  url('https://umw-static-download.embodyvr.io/capcom/fonts/GothamMedium.woff2') format('woff2');
}
@font-face {
  font-family: 'GothamBold';
  src: url('https://umw-static-download.embodyvr.io/capcom/fonts/Gotham%20Bold%202.woff2') format('woff2');
}


/* Banner */

.banner-container {
  width: 100%;
  position: fixed;
  z-index: 100;
}

.banner-inner-container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.banner {
  width: 80%;
  padding: 17px;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

/* Since the borders overlap we need to make the banners look seamless */
.tap-anywhere-banner-lowlight {
  border: solid 2px #ffcd19;
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
  border-bottom: unset;
}
.lowlight-warning-banner-container-overlap {
  border-top-right-radius: unset;
  border-top-left-radius: unset;
}

.tap-anywhere-banner {
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0.8;
  margin-bottom: 0;
}

.lowlight-warning-banner-container {
  display: none;

  flex-direction: row;

  background-color: #735320;
  border: solid 2px #ffcd19;
}

.lowlight-warning-text {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0;
}

.warning-icon {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 15px;
}

/* Bootstrap overrides */
.footer {
  bottom: 0;
  padding: 20px 0;
  background-color: var(--em-qrac-primary-bg-color);
}
.footer-nav {
  padding: 0px 2px;
}
.footer-logo {
  padding: 0px 2px;
}
.footer-copyright-en {
  font-family:  var(--em-qrac-font-heading-helper-text);
  color: #fff;
  font-size: 10px;
}
footer {
  display: block;
}
.navbar {
  border-radius: 0px;
}
.navbar-inverse {
  background-color: #000;
  border-color: #000;
}
.navbar-brand {
  margin-top: -9px;
}
.navbar-inverse .navbar-text, .navbar-inverse .navbar-nav > li > a {
  color: #EAEAEA;
}
.btn-primary {
  background-color: #14C7EC;
  /* padding: 13px; */
  padding: 3%;
  font-weight: 800;
  font-size: 18px;
  /* border-radius: 21.5px; */
  border: solid 2px #14C7EC;
  font-family: 'UniversNextPro-Bold';
  /* color: #e1e1e1; */
  color: black;
}

.btn-primary:hover, .btn-primary:active {
  background-color: rgba(30, 167, 196, 0.56);
  border: solid 2px #14C7EC;
  color: #e1e1e1;
  text-decoration: none;
}

.btn-primary:focus, .btn-primary:active:focus, .btn-primary:active:hover {
  background-color: rgba(204, 203, 203, 0.25);
  border: solid 2px #14C7EC;
  color: #e1e1e1;
  text-decoration: none;
}

.btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:active:focus, .btn-primary[disabled]:active:hover{
  border: solid 2px #575757;
  color: #181818;
  background-color: rgba(169, 169, 169, 0.68);
}
/* Dropzone.css overrides */

.dropzone {
  text-align: center;
}

.dz-progress {
  display: none !important;
}

@font-face {
  font-family: "UniversNextPro-Regular";
  src: url("https://umw-static-download.embodyvr.io/audio-technica/fonts/UniversNextPro-Regular/UniversNextProRegular.woff2") format("woff2"),
        url("https://umw-static-download.embodyvr.io/audio-technica/fonts/UniversNextPro-Regular/UniversNextProRegular.woff") format("woff");
}

@font-face {
  font-family: "UniversNextPro-Bold";
  src: url("https://umw-static-download.embodyvr.io/audio-technica/fonts/UniversNextPro-Bold/UniversNextProBold.woff2") format("woff2"),
        url("https://umw-static-download.embodyvr.io/audio-technica/fonts/UniversNextPro-Bold/UniversNextProBold.woff") format("woff");
}

@font-face {
  font-family: "M2C-Regular";
  src: url("https://umw-static-download.embodyvr.io/audio-technica/fonts/mplus-2c-regular/M2CRegular-2jG3.woff2") format("woff2"),
        url("https://umw-static-download.embodyvr.io/audio-technica/fonts/mplus-2c-regular/M2CRegular-2jG3.woff") format("woff");
}

@font-face {
  font-family: "M2C-Bold";
  src: url("https://umw-static-download.embodyvr.io/audio-technica/fonts/mplus-2c-bold/M2CBold-YlGy.woff2") format("woff2"),
        url("https://umw-static-download.embodyvr.io/audio-technica/fonts/mplus-2c-bold/M2CBold-YlGy.woff") format("woff");
}

/* AutoCapture Stylings */
#aplayer {
  display: none;
  position: relative;
  width: 100%;
  /* -webkit-transform: scaleX(-1);
  transform: scaleX(-1); */
}

.video-and-proximity-indicator-overlays {
  top: 0;
  left: 0;
  width: 100%;
}

.proximity-indicator-overlays {
  position: absolute;
  height: 100%;
  width: 100%;
}

#proximity_indicator_overlay_container, .proximity-indicator-overlays-progress {
  display: none;
}

.proximity-indicator-text-container {
  position: fixed;
  top: 40%;
  text-align: center;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  padding: 0 10px;
}

.status-bar-text-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  margin: 2vh 0px 0px 0px;
}

.status-bar-text-center {
  background: rgba(0, 0, 0, 0.60);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 11px 10px 10px 10px;
    border-radius: 12px;
}

#warning_icon {
  display: none;
  height: 18px;
  margin-right: 10px;
}

#status_bar_text {
  margin: 0;
}

.status-bar-subtext-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#status_bar_subtext {
  font-size: 22px;
}

#arrow-right {
  width:80px;
  height:25px;
  display: block;
}
#arrow-right:before {
  content: "";
  background: currentColor;
  width:80px;
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
}

#arrow-left {
  width:80px;
  height:25px;
  display: block;
}
#arrow-left:before {
  content: "";
  background: currentColor;
  width:80px;
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  transform: scaleX(-1);
}

#arrow-container {
  width: 47vw;
  height: 50vw;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 3vw;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 33%;
  right: 25%;
  text-transform: uppercase;
  font-weight: bold;
}

#arrow-direction-txt{
  display: none;
  padding: 19px;  
  flex-direction: column;
  text-align: center;
  font-size: 4vw;
}

.animated-left-arrow {
  width:20vw;
  height:20vw;
  display: none;
  background:
    linear-gradient(currentColor 0 0) center/calc(100% - 3vw) 3vw,
    conic-gradient(from   44deg at left ,#0000 ,currentColor 1deg 90deg,#0000 91deg) left /5vw 100%;
  background-repeat: no-repeat;
  animation: animationleft .5s infinite linear alternate;
}

@keyframes animationleft {
  0%   {transform: translate(56px)}
  /* 100% {transform: translate(-30px)} */
  100% {transform: translate(5px)}
}

.animated-right-arrow {
  width:20vw;
  height:20vw;
  display: none;
  background:
    linear-gradient(currentColor 0 0) center/calc(100% - 3vw) 3vw,
    conic-gradient(from -136deg at right,#0000 ,currentColor 1deg 90deg,#0000 91deg) right/5vw 100%;
  background-repeat: no-repeat;
  animation: animationright .5s infinite linear alternate;
}

@keyframes animationright {
  0%   {transform: translate(50px)}
  /* 100% {transform: translate( 30px)} */
  100% {transform: translate( 5px)}
}

#button_container {
  position: absolute;
  bottom: 50px;
  width: 100%;

  display: flex;
  justify-content: flex-end;
  /* justify-content: space-between; */
}

#prerecord_countdown_container {
  display: none;
  position: absolute;

  height: 100%;
  width: 100%;

  left: 0;
  top: 0;

  padding-left: 80px;
  padding-right: 80px;

  justify-content: center;
  align-items: center;
  flex-direction: column;

  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}

.red-dot {
  width: 12px;
  height: 12px;
  margin-right: 10px;
  flex-grow: 0;
  border-radius: 10px;
  background-color: #ff002b;

  -webkit-animation: fadeinout 2.5s linear infinite;
  animation: fadeinout 2.5s linear infinite;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

#prerecord_countdown_indicator {
  font-size: 130px;
  line-height: 130px;
  display: none;
}

#recording_countdown_container {
  display: none;
  position: absolute;
  top: 5%;
  width: 100%;

  justify-content: center;
  align-items: center;

  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
}

/*
#recording_countdown_indicator {
  margin-left: 10px;
}
*/

.multiple-buttons {
  justify-content: space-between !important;
}

.autocapture-button {
  background-color: #666;
  border-radius: 50%; 
  /* font-size: 24px; */
  font-weight: bold;
  padding: 5px;
  margin: 0 24px;
  width: 50px;
  height: 50px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  color: white;

  border: none;
}

.autocapture-button:disabled {
  opacity: 0.6
}

.autocapture-button:active:enabled {
  border: 1px solid white !important;
}

#retry_button, #done_button {
  display: none;
}

.green-text {
  color: #00bf80;
}

.screen-text-wrapper {
  font-size: 16px;
  padding: 20px;
  padding-top: 10px;
  text-align: center;
}

#status_bar {
  position: relative;

  width: 100%;
  height: 45px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bold;

  background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 38%, #000 100%), linear-gradient(to bottom, rgba(255, 149, 0, 0.4), rgba(255, 149, 0, 0.4));
}

#status_progress_bar {    
  position: absolute;
  left: 0;
  
  height: 100%;
  width: 0%;
  max-width: 100%;
  
  transition: 1s linear all;
  background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 38%, #000 100%), linear-gradient(to bottom, #0270ff, #0270ff);
}

.status-bar-yellow {
  background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 38%, #000 100%), linear-gradient(to bottom, rgba(255, 205, 25, 0.4), rgba(255, 205, 25, 0.4)) !important;
}

.status-bar-green {
  background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 38%, #000 100%), linear-gradient(to bottom, rgba(0, 191, 128, 0.4), rgba(0, 191, 128, 0.4)) !important;
}

.status-bar-grey {
  background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 38%, #000 100%), linear-gradient(to bottom, rgba(0, 191, 128, 0), rgba(0, 191, 128, 0)), linear-gradient(to bottom, rgba(64, 64, 64, 0.6), rgba(64, 64, 64, 0.6)) !important;
}

/* New Button States */
.primary-button-container {
  align-items: center;
}

.primary-button {
  /* background: rgb(2, 112, 255); */
  background: var(--em-qrac-button-background-color);
  border-radius: 5px;
  padding: 10px 20px;
  border: unset;
  font-size: 4.5vw;
  font-family: var(--em-qrac-font-heading-text-bold);
  font-weight: var(--em-qrac-heading-font-weight);
  color: var(--em-qrac-primary-button-text-color);
}

.primary-button:active {
  background: rgb(2, 63, 229);
  color: rgb(108, 190, 245);
}

.countdown-wrapper {
  color: #999;
  font-size: 20px;
  letter-spacing: 20px;
}

#countdown_1 {
  letter-spacing: 0;
}

.countdown-primary {
  color: #fff !important;
}

.timer-countdown {
  color: white !important;
  font-size: 20px !important;
}

.language-switcher {
  border-radius: 5px;
  padding: 0 10px;
  color: #999999;
  background-color: #666666;
  border: 0;
  width: 62px;
  height: 32px;
  font-size: 14px;
  font-weight: bold;
  align-self: center;
}

/* Common styling for modal_instructions, dropzone instructions and error pages */
.modal-instructions-title {
    font-size: 4.4vw;
    font-weight: var(--em-qrac-heading-font-weight);
    text-align: center;
    font-family: var(--em-qrac-font-inner-heading-text);
    line-height: normal;
    margin-bottom: 3.9vw;
    color: var(--em-qrac-primary-fg-color);
}

.modal-instructions-title-helper {
    width: 100%;
    font-size: 3.7vw;
    font-style: normal;
    font-weight: normal;
    /* letter-spacing: -0.41px; */
    text-align: center;
    line-height: normal;
    font-family: var(--em-qrac-font-heading-helper-text);
    /* margin-bottom: 3.9vw; */
    color: var(--em-qrac-secondary-fg-color);
}

.H-Divide {
    height: 1px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: var(--background-color-H-Divide);
    margin: 2.8vh 0vh;
}

.H-Divide-with-text {
    height: 1px;
    flex-grow: 1;
    /* margin: 0 2vw 0 2vw; */
    background-color: var(--background-color-H-Divide);
}

/* to be removed after updating error.html */
.modal-instructions-rows {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    width: 100%;
}

/* to be removed after updating UI changes */
.modal-instructions-columns {
    display: flex;
    flex-direction: column;
    margin: 4px;
    background-color: var(--em-qrac-primary-bg-color);
}

.main-instructions-rows {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-radius: 12px;
  background-color: var(--em-qrac-primary-bg-color);
}

.instructions-heading-step-one{
  display:flex;
  padding: 1.2vh 0vh 0.5vh;
}

.inner-instructions-rows {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: var(--em-qrac-primary-bg-color);
}

.inner-instructions-rows:not(:last-child) {
  border-bottom: 1px solid var(--em-qrac-checkbox-bg-color);
}

.inner-instructions-columns {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--em-qrac-primary-bg-color);
}

.instructions-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  padding-right: 8px;
}

.inner-instructions-title{
  color: var(--em-qrac-primary-fg-color);
  font-family: var(--em-qrac-font-inner-heading-text);
  font-size: 3.5vw;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
}

.inner-instructions-title-helper{
  color: var(--em-qrac-secondary-fg-color);
  font-family: var(--em-qrac-font-heading-helper-text);
  font-size: 3.5vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.inner-instructions-title-helper-step-one{
  color: var(--em-qrac-secondary-fg-color);
  font-family: var(--em-qrac-font-heading-helper-text);
  font-size: 3.2vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.4px;
  padding-left: 5vw;
  padding-bottom: 1vh;
}

.main-instructions-double-columns {
  display: flex;
  flex-direction: column;
  flex: 2;
  justify-content: center;
  padding: 4vw 4vw 4vw 4vw;
}

.inner-instructions-button{
  display: flex;
  flex-direction: column;
  padding: 4vw 4vw 4vw 2vw;
}

.main-instructions-container{
  margin: 1px ;
}


.main-instructions-steps {
  margin-top: 2vh;
  margin-bottom: 2vh;
  width: 100%;
}

.main-instructions-steps img {
  width: 30%;
  object-fit: contain;
  background-color: black;
}

.main-instructions-steps video {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.white-text-3 {
    font-weight: normal;
    font-size: 4vw;
    letter-spacing: -0.41px;
    margin: auto;
}

.round-button {
    /* width: 20vw;
    height: 20vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12vw;
    background-color: var(--em-qrac-button-background-color);
    font-family: var(--em-qrac-font-heading-text-bold);
}

.check-mark {
    width: 5vw;
    height: 5vw;
}

/* to be removed after  updating error page
.quick-tips {
    font-size: 3vw;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ccc;
    margin: 0vw 0vw 0vw 2vw;
    text-align: left;
} */

.instructions-tip-header {
  /* color: #FFCD19; */
  font-family: var(--em-qrac-font-heading-helper-text);
  font-size: 3.2vw;
  font-style: normal;
  /* font-weight: var(--em-qrac-tip-header-font-weight); */
  line-height: normal;
  margin-bottom: 4vw;
  text-align: center;

}

.quick-tips-bullet {
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 1vw;
    background-color: #ffcd19;
    margin: 1.5vh 0px 0px 1.5vw;
}

.quick-tip {
    font-size: 3vw;
    margin: 0.8vh 0 0 2vw;
    text-align: left;
}

/* Common styling for header.html and header_left_aligned.html */
img.map, map area{
    outline: none;
}

.header-logo {
    max-width: 80px;
}

.header-container {
    margin-top: 20px;
    margin-bottom: 15px;
}

.header-container-left-aligned {
    margin-bottom: 4vw;
    text-align: left;
    display: flex;
    justify-content: space-between;
}


.overlay {
  position: fixed;
  top: -6%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Style for the popup container */
.popup {
  background: #1A1A1A;
  padding: 20px;
  width: 70%;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.popup p {
  font-size: 3.9vw;
  color: var(--color-modal-instructions-title-helper);
}

/* Style for the button */
.popup-button {
  background: var(--em-qrac-error-popup-button);
  width: 100%;
  border-radius: 5px;
  padding: 10px 20px;
  border: unset;
  color: white;
  font-size: 4.3vw;
  font-weight: 500;
  margin-top: 1rem;
}

.popup-secondary-button {
  background: #404040;
  width: 100%;
  border-radius: 5px;
  padding: 10px 20px;
  border: unset;
  color: white;
  font-size: 4.3vw;
  font-weight: 500;
  margin-top: 1rem;
}


.popup-description{
    font-size: 3.2vw;   
    font-family: var(--em-qrac-font-heading-helper-text);
    margin: 1rem 0rem 0rem;
}

.popup-instruction-label{
    font-size: 3.2vw;
    font-family: var(--em-qrac-font-inner-heading-text);
    margin-top: 1rem;
}

.popup-instruction-text{
    font-size: 3.2vw;
    font-family: var(--em-qrac-font-heading-helper-text);
}

/* Custom iPad styles */
@media only screen and (min-width: 700px) and (min-height: 700px) {

  #aplayer{
    height: 100vh;
  }

  /* .round-button{
    width: 16vw;
    height: 16vw;
  } */

  .modal-instructions-title {
    font-size: 5.00vw;
  }

  .modal-instructions-title-helper{
    font-size: 3.2vw;
  }

  .inner-instructions-title{
    font-size: 3vw;
  }

  .inner-instructions-title-helper{
    font-size: 3vw;
  }

  .main-instructions-container{
    margin: 3vh 3.3vw;
  }

  .instructions-tip-header{
    font-size: 2.7vw;
  }

  .main-instructions-steps img {
    width: 23%;
  }
  
  .main-instructions-steps{
      margin-top: 40px;
      margin-bottom: 40px;
  }

  .instructions-text-container {
    width: 75%;
  }

  .instructions-heading-step-one{
    display:flex;
    padding: 1.2vh 0vh 0vh;
    align-items: centre;
  }
  

  .inner-instructions-title-helper-step-one{
    font-size: 2.9vw;
    padding-left: 3.9vw;
    padding-bottom: 1vh;
  }

  .proximity-indicator-text-container {
    /* top: 20px; */
    font-size: 23px;
  }

  .status-bar-text-container {
    margin-top: 1.5vh;
  }

  .status-bar-text-center {
    margin-top: 1.5vh;
  }

  #warning_icon {
    height: 30px;
    margin-right: 20px;
  }

  #status_bar_subtext {
    font-size: 17px;
  }

  #prerecord_countdown_container { 
    font-size: 30px;
  }

  #prerecord_countdown_indicator {
    font-size: 250px;
    line-height: 250px;
  }

  #recording_countdown_container {
    font-size: 30px;
  }

  .autocapture-button {
    width: 100px;
    height: 100px;
    margin: 0 60px;
  }

  .rotate-arrows {
    width: 82px;
    height: 60px;
  }

  .language-switcher {
    border-radius: 10px;
    color: #999999;
    background-color: #666666;
    width: 95px;
    height: 46px;
    font-size: 28px;
    align-self: center;
  }

  .header-logo {
    width: 300px;
  }
}