html, body {
    height: 100%;
}
  

body {
    margin: 0;
    padding: 0;
    /* imagem tela de login */
    background-image: url('../../img/img_bg_1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homeApp_loginContainer{
    background-color: rgba(14, 32, 54, 0.80);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    position: relative;
    padding: 5rem;
}

.homeApp_temValor{
    max-width: 75%;
}

.homeApp__linhaVertical{
    border-left: 1px solid #515457;
    height: 75%;
}


.homeApp__loginForm{
    text-align: center;
}

.homeApp__tituloPortal{
    font-size: 0.5rem;
    font-weight: 20;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.btn-login{
    font-size: 13px;
    color: #fff!important;
    text-transform: capitalize;
    background-color: #021633!important;
    border-color: #021633!important;
    width: 40%;
}

.btn-login:hover{
    color: #fff !important;
    border-color: #021633 !important;
    background-color: #021633 !important;
}
.btn-login:active{
    color: #fff !important;
    border-color: #021633 !important;
    background-color: #021633 !important;
}

/* Responsividade */
@media screen and (min-width: 0){
    body {
        margin: 0;
        padding: 0;
        /* imagem tela de login */
        background-image: url('../../img/img_bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .homeApp__sobre{
        display: none;
    }
    
    .homeApp__loginForm{
        width: 100%;
        
    }
    
    .homeApp__tituloPortal{
        font-size: 1rem;
    }

    .form__group {
        position: relative;
        padding: 20px 0 0;
        margin-top: 10px;
        width: 100%;
        display: inline;
        justify-content: center;
        align-items: center;
        
      }


}


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

    body {
        margin: 0;
        padding: 0;
        /* imagem tela de login */
        background-image: url('../../img/img_bg_1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .homeApp__sobre{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 35%;
    }

    .homeApp__loginForm{
        width: 65%;

    }

    .homeApp__tituloPortal{
        font-size: 1rem;
    }

    .form__group {
        position: relative;
        padding: 20px 0 0;
        margin-top: 10px;
        width: 40%;

      }
}


/* Custom input para o login */
  
  .form__field {
    font-family: inherit;
    width: 100%;
    border: none;
    border-bottom: 0.1px solid #ffff;
    outline: 0;
    font-size: 15px;
    color: #fff;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
  }
  
  .form__field::placeholder {
    color: transparent;
  }
  
  .form__field:placeholder-shown ~ .form__label {
    font-size: 17px;
    cursor: text;
    top: 20px;
  }
  
  .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 12px;
    color:  #fff;
    pointer-events: none;
  }
  
  .form__field:focus, .form__field:hover {
    padding-bottom: 6px;
    /* font-weight: 700; */
    border-width: 3px;
    border-image: linear-gradient(to right, #fff, #fff, #fff);
    border-image-slice: 1;
  }
  
  .form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 15px;
    color: #fff;
    /* font-weight: 700; */
  }
  
  /* reset input */
  .form__field:required, .form__field:invalid {
    box-shadow: none;
  }