body {
  font-family: "Karla", sans-serif;
  background-color: #00427e;
  min-height: 100vh; 
  background-image: url(../img/background/detalhe-footer.png);
  background-size: 100%;
}

.brand-wrapper {
  margin-bottom: 19px; }
  .brand-wrapper .logo {
    height: 120px; }

.login-card {
  border: 0;
  border-radius: 27.5px;
  box-shadow: 0px 0px 6px -1px #000000 !important;
  overflow: hidden; }
  .login-card-img {
    border-radius: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; 
  }
  .login-card .card-body {
    padding: 3em 4em 4em;
  }
    @media (max-width: 767px) {

      .login-card .card-body {
        padding: 6em 4em 4em !important;
      } 

      .texto_principal{
        color:#F2F5F7 !important;
      }
      
    }
  .login-card-description {
    font-size: 30px;
    color: #0072a9;
    font-weight: bolder;
    margin-bottom: 23px; }
  .login-card form {
    max-width: 326px; }
  .login-card .form-control {
    border: 1px solid #d5dae2;
    padding: 15px 25px;
    margin-bottom: 20px;
    min-height: 45px;
    font-size: 13px;
    line-height: 15;
    font-weight: normal; }
    .login-card .form-control::-webkit-input-placeholder {
      color: #808285; }
    .login-card .form-control::-moz-placeholder {
      color: #808285; }
    .login-card .form-control:-ms-input-placeholder {
      color: #808285; }
    .login-card .form-control::-ms-input-placeholder {
      color: #808285; }
    .login-card .form-control::placeholder {
      color: #808285; }
  .login-card .login-btn {
    padding: 13px 20px 12px;
    background-color: #00427e;
    border-radius: 4px;
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    color: #F1F1F1;
    margin-bottom: 24px; }
    .login-card .login-btn:hover {
      border: 1px solid #F2F5F7;
      background-color: #0072a9;
      color: #F2F5F7; }
  .login-card .forgot-password-link {
    font-size: 14px;
    color: #0072a9;
    margin-bottom: 12px; }
  .login-card-footer-text {
    font-size: 16px;
    color: #00427e;
    margin-bottom: 60px; }

    @media (max-height: 500px){
      .card {
        height: 29em !important;
      }

      .login-card .card-body {
        padding: 1em 4em 4em;
      }
    }

    @media (max-width: 767px) {

      .login-card-footer-text {
        margin-bottom: 24px; } 

        .div_left{
          background-color: #00427e;
          vertical-align: middle;
          display: inherit;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
          height: 0em !important;
        }
      
        .imagem_left_logo{
          background-color: #00427e;
          vertical-align: middle;
          display: inherit;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
          /*margin-top: 10em !important;
          z-index: 10000;
          max-height: 20em;
          padding-top: 5em;*/
          /*display: none !important;*/
          margin-top: 6em !important;
          z-index: 10000;
          max-height: 17em;
          padding-top: 5em;
        }

        .container{
          max-width: 30em !important;
        }

        
    }
  .login-card-footer-nav a {
    font-size: 14px;
    color: #4A4D4F; }


.login-btn-2 {
    padding: 13px 20px 12px;
    background-color: #0072a9;
    border-radius: 4px;
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    color: #F1F1F1;
    margin-bottom: 24px; }

.card {
  background-color: #F2F5F7;
  height: 35em;
}

.texto_inf{
  justify-items: center;
  display: grid;
}

.div_left{
  background-color: #00427e;
  vertical-align: middle;
  display: inherit;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 35em;
}

.imagem_left_logo{
  background-color: #00427e;
  vertical-align: middle;
  display: inherit;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: auto;
}

.container{
  max-width: 60em;
}

label{
  display: contents !important;
}

p{
  color: #4A4D4F;
  font-size: 0.8em;
}

.texto_principal{
  color:#00427e;
}

.form_autenticar{
  justify-content: center;
  justify-items: center;
  display: inline;
}

.fade_in_1 {
  opacity: 0;
  animation: fadeIn 2s 0s forwards;
}

.fade_in_2 {
  opacity: 0;
  animation: fadeIn 2s 0.5s forwards;
}

.fade_in_3 {
  opacity: 0;
  animation: fadeIn 2s 1s forwards;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}