/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  font-family: 'Roboto', sans-serif;
  background: gray center / 100% no-repeat fixed;
}


/* #backgroundVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  pointer-events: none;
} */

body, html {
  height: 100%;
  margin: 0;
}


#regForm {
  background-color: #eee;
  margin: 0px auto;
  padding: 30px;
  border-radius: 20px;
  border: 2px solid lightgray
}

h2 {
  text-align: center
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;

  border: 1px solid #aaaaaa
}

#setor, #categoria, #natureza_rep, #conferencia_anterior, #eixo_debate, #etnia, #formacao, #pne, #tipo_pne, #autorizacao_imagem{
  padding: 10px;
  width: 100%;
  font-size: 17px;
  height: 90%;

  border: 1px solid #aaaaaa

}

#tipoUsuario{
  padding: 10px;
  width: 100%;
  font-size: 17px;
  height: 90%;

  border: 1px solid #aaaaaa

}

input.invalid {
  background-color: #ffdddd
}

.invalid {
  background-color: #ffdddd
}


.tab {
  display: none;
  flex-direction: column; 
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;

  cursor: pointer
}

#nextBtn{
  position: relative;
}

button:hover {
  opacity: 0.8
}

#prevBtn {
  background-color: #bbbbbb;
  position: relative;
}

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5
}

.step.active {
  opacity: 1
}

.step.finish {
  background-color: #4CAF50
}

.all-steps {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px
}

.thanks-message {
  display: none
}

.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.logo-gonube img {
  width: 30%;
  position: absolute;
  margin-left: 20px;
}

.login-logo img {
  width: 50%;
  margin-left: 280px;
}

#termos {
  height: 150px;
  width: 100%;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.5);
}

#aceite {
  width: auto;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}

.first-step {
  gap: 10px;
}

#camera-container {
  /* position: relative;
  top: -10px; */
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  
  position: relative;
}


#camera {
  /* position: relative;
  top: -10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300em;
  height: 300px;
}


.silhueta-container{

  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  width: 200em;
  height: 300em;
  margin-bottom: -10px;
  position: absolute;
  
}

#silhueta {
  width: 16em;
  height: 17em;
  margin-bottom: 10px;
  display: flex;
  position: absolute;
  border: #eee 30px solid;
  border-left: #eee 80px solid;
  border-right: #eee 80px solid;
  


}



#imageprev {
	width: 100%;
}

#botao {
  position: absolute;
  margin-top: 320px !important;
  width: 100px;
  height: 25px;

}

*, ::after, ::before {
  box-sizing: inherit !important;
}

#retakeButton {
  position: absolute;
  margin-top: 446px;
  margin-right: 200px;
  width: 80px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  padding-top: 2px;
}


@media only screen and (max-width: 1068px) {
  .login-logo img {
    width: 50%;
    height: 50%;
    text-align: center;
    margin-left: 180px;
    margin-bottom: 5px;
  }

  #regForm{
    left: -20;
  }

  

  .logo-celebration img {
    width: 35%;
    position: absolute;
    margin-top: 40px;
    margin-left: 20px;
  }

  body {
    font-family: Roboto;
    background-attachment: fixed;
    background-size: 2000px 2000px;
    background-repeat: no-repeat;
    background-position: right;                 
    overflow: hidden;
  
  }
  #backgroundVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    pointer-events: none;
  }
  
  body, html {
    height: 100%;
    margin: 0;
  }
}