@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ewert&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: verdana,sans-serif;
  background-image: url("../imagens/auxilio_background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.flt-right {
  float: right;
 /* font-family: 'Nosifer', cursive;*/
  font-family: 'Ewert', cursive;
}

.form-group {
  margin-bottom: 10px;
  background: transparent;
}

.fundo {
  width: 400px;
  height: 400px;
  perspective: 1000px;
  margin: 200px auto;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
  transition: 400ms all ease-in;
}

.etapas {
  padding: 10px;
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(146, 135, 187, 0.8)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(to bottom, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
  backface-visibility: hidden;
}
.etapas legend {
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
  user-select: none;
}
.etapas label {
  color: #fff;
  font-size: 13px;
  margin-bottom: 5px;
  display: block;
  user-select: none;
}
.etapas input {
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px 10px;
  border: none;
  color: #000;
  outline: none;

}
.etapas button {
  position: relative;
  width: 100%;
  height: 4rem;
  margin-top: 50px;
  margin-left: -10px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 171, 238)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(to bottom, rgb(194, 176, 238) 0%, rgba(0, 0, 0, 0.6) 100%);
  font-size: 1.5rem;
  border-radius: 3rem;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
  transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
  outline: none;
}
.etapas button.next {
  top: 5px;
}
.etapas button.prev {
  left: 5px;
  top: 5px;
  width: 50%;
  font-family: 'Ewert', cursive;
}

.etapas button.cadastrar{
  width: 50%;
  margin-left: 10px;
  margin-right: -10px;
  top: 5px;
  font-family: 'Ewert', cursive;
}
.etapas button:active {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(171, 159, 255)), to(rgba(55, 55, 55, 0.71)));
  background: linear-gradient(to bottom, rgb(171, 159, 255) 0%, rgba(55, 55, 55, 0.71) 100%);
}

.etapas:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
}

.etapas:nth-child(2) {
  transform: rotateY(90deg) translateZ(200px);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

input#nome{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}
input#end{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}
input#contato{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}
input#user{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}
input#pass{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}
input#confpass{
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 22rem;
  background: transparent;
  color: #FDFCFD;
}

::placeholder {
  color: rgb(231, 228, 255);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(231, 228, 255);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: rgba(231, 228, 255);
}
div.msg-erro{
  margin-top: 60px;
  font-size: 1.2rem;
  color: #ff5400;
  background-color: rgba(108, 0, 8, 0.79);
  border: 2px solid rgba(255, 0, 0, 0.64);
  text-align: center;
}
div.msg-errros{
  margin-top: 40px;
  font-size: 1.2rem;
  color: #ff5400;
  background-color: rgba(108, 0, 8, 0.79);
  border: 2px solid rgba(255, 0, 0, 0.64);
}

div#msg-sucess{
  margin-top: 40px;
  font-size: 1.2rem;
  color: #00ff49;
  background-color: rgba(0, 122, 41, 0.62);
  border: 2px solid #00ff49;
}
legend.titulo{
  font-family: 'Nosifer', cursive;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(171, 159, 255)), to(rgba(55, 55, 55, 0.71)));
  background: linear-gradient(to bottom, rgb(171, 159, 255) 0%, rgba(55, 55, 55, 0.71) 100%);
  border-radius: 30px;
  color: rgb(201, 160, 255);
}
.etapas button.cont{
  left: 5px;
  top:  0px;
  width: 50%;
  font-family: 'Ewert', cursive;
}
.etapas button.cancelar{
  width: 50%;
  margin-left: 10px;
  margin-right: -10px;
  top: 0px;
  font-family: 'Ewert', cursive;
}
.etapas button.cancelar:hover{
  box-shadow: 0px 0px 5px red;
  text-shadow: 0px 0px 5px red;
}
.etapas button.cont:hover{
  box-shadow: 0px 0px 2px #00ff45;
  text-shadow: 0px 0px 2px #00ff25;
}
.etapas button.prev:hover{
  box-shadow: 0px 0px 2px red;
  text-shadow: 0px 0px 2px red;
}
.etapas button.cadastrar:hover{
  box-shadow: 0px 0px 2px #00ff45;
  text-shadow: 0px 0px 2px #00ff25;
}