.dp-none{
    display:none!important;
}

.cabecalho-rainbow{

    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;

    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
        animation: rainbow 18s ease infinite;
}
    
    @-webkit-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-moz-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-o-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @keyframes rainbow { 
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }


.login-form{

    margin:auto;
    margin-top:2%;
    transition: width 1s;

}

.btn-voltar-cadastro{
    display:none;
    position:absolute;
    color:white!important;
    width:50px;
    height: 50px;
    left: 0;
    border-radius:50%;
    padding:0px!important;
}

.ft-right{

    float:right;
}

.ft-left{

    float:left;
}

.cadastro-ativo{

    transition: width 0.2s;

}

.success-step .circle{
    background-color: #29b152!important;
}

@media screen and (min-width: 1050px){
    #webcamFrente{

        width:600px;
        padding:25px;
    
    }

}

@media screen and (max-width: 1049px){
    #webcamFrente{

        width:100%;
        padding:10px;
    
    }

}

@media screen and (min-width: 600px) and (max-width: 1000px){
    
    .login-form{

        width:75%;
        transition: width 0.2s;
    
    }

    .cadastro-ativo{
        width:90%;
        transition: width 0.2s;
    }
}

.mdb-select {
      position: relative;
      width: 100%;
      margin-top:22px;
  }
  
  .select-text {
      position: relative;
      font-family: inherit;
      background-color: transparent;
      padding: 10px 10px 10px 0;
      font-size: 18px;
      width:100%;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(0,0,0, 0.12);
      font-weight: lighter;
      font-family: 'Roboto';
      color: #606060;
  }
  
  /* Remove focus */
  .select-text:focus {
      outline: none;
      border-bottom: 1px solid rgba(0,0,0, 0);
  }
  
      /* Use custom arrow */
  .select .select-text {
      appearance: none;
      -webkit-appearance:none
  }
  
  .select:after {
      position: absolute;
      top: 18px;
      right: 10px;
      /* Styling the down arrow */
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(0, 0, 0, 0.12);
      pointer-events: none;
  }
  
  
  /* LABEL ======================================= */
  .select-label {
      color: #757575;
      font-size: 18px;
      font-weight: lighter;
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 10px;
      transition: 0.2s ease all;
  }
  /* active state */
  .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
      color: #2F80ED;
      top: -5px;
      transition: 0.2s ease all;
      font-size: 12px;
  }
  
  /* BOTTOM BARS ================================= */
  .select-bar {
      position: relative;
      display: block;
      width: 100%;
  }
  
  .select-bar:before, .select-bar:after {
      content: '';
      height: 2px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #2F80ED;
      transition: 0.2s ease all;
  }

  .btn-sociais{
    border-radius:50%;
    width: 40px;
    height: 40px;
    padding:0px!important;
  }
  
  .select-bar:before {
      left: 50%;
  }
  
  .select-bar:after {
      right: 50%;
  }
  
  /* active state */
  .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
      width: 50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .select-highlight {
      position: absolute;
      height: 60%;
      width: 100px;
      top: 25%;
      left: 0;
      pointer-events: none;
      opacity: 0.5;
  }


@media screen and (min-width: 900px){

    .login-form{

        width:55%;
        transition: width 0.2s;
    
    }

    .cadastro-ativo{
        width:90%;
        transition: width 0.2s;
    }

}


@media screen and (min-width: 1100px){

    .login-form{

        width:40%;
        transition: width 0.2s;
    
    }

    .cadastro-ativo{
        width:90%;
        transition: width 0.2s;
    }

}

@media only screen and (max-width: 600px) {

    .login-form{

        width:98%;
        transition: width 0.2s;
    
    }

    .cadastro-ativo{
        width:98%;
        transition: width 1s;
    }

}

/* .lista_inputs{
    padding:0px;
    list-style:none;
    display:inline-flex;
  }

.li_digito{
    margin:15px;
} */

.div_recuperacao{
    margin-top:15px;
}

.input_digito{
    width:100%;
    height: 65px;
    padding-left: 33%;
    font-size: 35px;
    text-transform: uppercase!important;
}