.loading {
  background-color: var(--background-color);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 99999;
}
#selfieAlertaErroMensagem {
  margin: .6rem auto;
  max-width: 24rem;
  text-align: center;
}
.selfieContainer video {
  transform: scaleX(-1);
  -webkit-transform:scaleX(-1); /* Safari and Chrome */
  -moz-transform:scaleX(-1); /* Firefox */
}
.selfieContainer {
  overflow: hidden;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: var(--background-color);
  -webkit-text-size-adjust: none;
  touch-action: manipulation;
  color: var(--cor-text);
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: none;
  -khtml-overflow-scrolling:touch;
  -o-overflow-scrolling:touch;
  -moz-overflow-scrolling:touch;
  -webkit-overflow-scrolling:touch;
}
.hidden {
  visibility: hidden;
}
.alignCenter {
  text-align: center;
}
.posicaoAbsolute {
  position: absolute;
}
.centralizado {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
.botaoAcao {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 64px;
  background-color: var(--background-color);
  cursor: pointer;
}
.selfieTextoBotaoAcao {
  color: var(--text-primary-color)!important;
  width: 100%;
  text-align: center;
  font-size: 12px;
  position: absolute;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
.selfieLoading {
  background-color: var(--background-color);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 99999;
}
.selfieLoading .logo-border {
  position:relative;
  overflow:hidden;
  padding:4px;
  z-index:1
}
.selfieLoading .logo-border::after {
  content:'';
  position:absolute;
  z-index:-1;
  width:200px;
  height:200px;
  top:-35px;
  left:-35px;
  background-image:linear-gradient(#c4edff,#015ba6 60%);
  animation-name:rotate;
  animation-duration:3s;
  animation-timing-function:linear;
  animation-iteration-count:infinite
}
.selfieWebcamParent {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.selfieAlertaErro {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: none;
  background-color: var(--background-color);
}
.selfieAlertaErro h1 {
  color: var(--text-primary-color);
}
.selfieAlertaErro p {
  color: var(--text-secondary-color);
  font-weight: bold;
}
.selfieAlertaSucesso {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: none;
  background-color: var(--background-color);
}
.selfieAlertaSucesso h1 {
  color: var(--text-primary-color);
}
.selfieAlertaSucesso p {
  color: var(--text-secondary-color);
}
.selfieWebcam {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
.selfieCanvas {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);

  visibility: hidden;
}
.selfieContainerParent {
  width: 640px;
  height: 480px;
  height: 100%;
}
.selfieMaskCanvas {
  position: absolute;
}
.semOverflow {
  overflow: hidden;
  width:100vw;
  height:100vh;
}
.selfieMaskCanvasGreen {
  -webkit-filter: contrast(100%) hue-rotate(120deg);
  filter: contrast(100%) hue-rotate(120deg);
}
.textCenter {
  text-align: center;
}
.webcamAviso {
  background-color: rgba(0, 0, 0, 0.75);;
  vertical-align: center;
  width: 300px;
  height: 45px;
  line-height: 16px; 
  padding: 3px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}
.webcamAviso p {
  color: #fff;
  font-weight: bold;
}
.selfieMaskGreenText {
  color: #6dfb42 !important;
}
.selfieBotaoAcaoCancelar {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.icone {
  padding-bottom: 90px;
}
.selfieRotacioneAparelho {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: none;
  background-color: var(--background-color);
}
.selfieRotacioneAparelho p {
  color: var(--text-secondary-color);
}
.selfieEmAnalise {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: none;
  background-color: var(--background-color);
  z-index: 99999;
}
.selfieEmAnalise p {
  color: var(--text-secondary-color);
}
.selfieTutorial {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 25px;
}
.selfieTutorialSlider {
  display: none;
  margin-top: 30px;
  height: 100%;
}
.selfieTutorialIcone {
  width: 175px;
  height: 175px;
  object-fit: contain;
}
.selfieTutorial h1 {
  font-size: 16px;
  color: var(--text-primary-color);
}
.selfieTutorial p {
  font-size: 12px;
  color: var(--text-secondary-color);
  padding: 10px;
}
.botaoAcaoTutorial {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 64px;
  background-color: var(--background-button);
  cursor: pointer;
}
.selfieTextoBotaoAcaoTutorial {
  color: #fff;
  width: 100%;
  top: 25%;
  left: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
.tutorialIcone {
  text-align: center;
}
.tutorialTexto {
  color: var(--text-secondary-color);;
  text-align: center;
}
.selfieFechar {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.selfieTextoAviso {
  font-size: 16px !important;
}
#modal-camera video {
  width: 100%;
  height: 100%;
}
.content-media-capture {
  width: 100%;
}
.content-media-verify canvas {
  width: 100%;
  height: 100%;
}
.content-media-verify img {
  width: 100%;
  height: 100%;
}
.content-media-verify .content-actions {
  margin-top: .4rem;
  text-align: center;
}
#selfieAlertaErroImagem img {
  width: 160px;
  height: auto;
}
@media only screen and (max-width:410px) {
  h1 {
    font-size: 18px;
  }
  p {
    font-size: 14px;
  }
  .botaoAcao p{
    font-size: 12px;
  }
  .botaoAcaoTutorial p{
    font-size: 12px;
  }
  .selfieTutorial {
    margin-top: 80px;    
  }
  .selfieTutorialIcone {
    width: 180px;
    height: 180px;
  }
  .selfieTutorial h1 {
    font-size: 18px;
  }
  .selfieTutorial p {
    font-size: 12px;
  }
}
@media only screen and (min-width:412px) {
  h1 {
    font-size: 20px;
  }
  p {
    font-size: 16px;
  }
  .botaoAcao p{
    font-size: 14px;
  }
  .botaoAcaoTutorial p{
    font-size: 14px;
  }
  .selfieTutorial {
    margin-top: 80px;    
  }
  .selfieTutorialIcone {
    width: 200px;
    height: 200px;
  }
  .selfieTutorial h1 {
    font-size: 22px;
  }
  .selfieTutorial p {
    font-size: 14px;
  }
}
@media only screen and (min-width:720px) {
  h1 {
    font-size: 22px;
  }
  p {
    font-size: 16px;
  }
  .botaoAcao p{
    font-size: 16px;
  }
  .botaoAcaoTutorial p{
    font-size: 14px;
  }
  .selfieTutorial {
    margin-top: 100px; 
  }
  .selfieTutorialIcone {
    width: 225px;
    height: 225px;
  }
  .selfieTutorial h1 {
    font-size: 22px;
  }
  .selfieTutorial p {
    font-size: 16px;
  }
}
@keyframes rotate{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}