body{
    background-color: var(--primario);
    color: var(--secundario);
    font-family: 'Poppins', sans-serif;
}

.container-login {
 display: flex;
  align-items: center;
  justify-content: center;
  /*background: linear-gradient(#F1EDE6 50%, #340F59);*/
  /*background: linear-gradient(30deg, #F1EDE6, #340F59 10%, #227CF2);*/
  background: linear-gradient(to bottom right, #F1EDE6, #340F59, #50F7CB);
  height: 100vh;
  max-height: 100vh;

}

#login-container {
  display: flex;
  flex-direction: column;
  background: linear-gradient(#F1EDE6, 50% #340F59, #50F7CB);
  border-radius: 10px;
  height: 60%;
  width: 25%;
  min-width: 25%;
  box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

#login-header {
  width: 100%;
  height: 25%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#login-header img {
  width: 100%;
}

#login-header .col {
  margin-top: 1rem;
}

#login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 100%;
}

#login-footer {
  font-size: .7rem;
  text-align: center;
  width: 100%;
  margin: 0;
  color: red;
}

.login-form {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.form-group{
  margin-bottom: .9rem;
}

.btn-ingresar{
  font-size:.8rem;
  background-color: var(--primario) !important; 
  outline-color: #50F7CB; 
  border-color: #50F7CB;
  color: var(--blanco) !important;
  position: relative !important;
  display: inline-block !important;
}

.btn-ingresar::after,
.btn-ingresar::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--secundario), var(--violeta));
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.btn-ingresar::before {
  top: -5px;
  transform-origin: left;
}

.btn-ingresar:hover::after,
.btn-ingresar:hover::before {
  transform: scaleX(1);
}


.loginTitle{
  color: var(--blanco) !important;
}

@media only screen and (max-width: 768px) {
  #login-container {
    height: 50%;
    width: 80%;
  }
}