body {
  /* font-family: sans-serif; */
  font-family: 'DM Sans';
  margin: 0;
  padding: 0;
  background-color: #3A286C;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;    
  flex-direction: column;
  align-items: center;
  width: 400px;
  height: 365px;
}

.logo {
  width: 200px;
  margin-top: 20px;
  text-align: center;
}

h1 {
  color: #3A286C;
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
  padding-top: 10px; 
}

.login-form .form-group .input-field { 
  display: block; 
  margin: 0 auto;  
  border: none;
}

label {
  color: #3A286C;
  font-size: 12px;
  text-align: left;
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

::placeholder{
  color: rgba(133, 129, 129, 0.82);
  font-size: 14px;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

button[type="submit"] {
  background-color: #E4005B;
  color: #fff;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button[type="submit"]:hover {
  background-color: #292159;
}

a {
  color: #3A286C;
  /* color: blue; */
  text-decoration: none;
  text-align: left;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #292159;
}

p {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
}

.input-field {
  background-color: #dfdada8a;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 35px;
  width: 300px;
  padding-left: 1rem;
  font-size: 16px;
}

.forgot-password {
  color: #0000EE;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
}

.submit-button {
  background-color: #E4005B;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.submit-button:hover {
  background-color: #D9384F;
}

.legal-text {
  margin-top: 10px;
  text-align: center;
}

.legal-text2 {
  margin-top: 500px;
  text-align: left;
  margin-right: 690px;
}

.terms-privacy {
  /* margin-top: 30px; */
  color: white;
  font-size: 15px;
  position: relative;
  top: 60px;
}

.terms-privacy a {
  /* color: #0000EE; */
  /* color: #0b78ed; */
  color: #97bee8;
  text-decoration: none;
}

/* Para El Ojo Del Password */
.auth-pass-inputgroup .btn {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

.icon-lg {
  font-size: 20px;
  margin-right: 20px;
}

.auth-pass-inputgroup {
  position: relative;
}

.btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.iniciar-sesion {
  margin-top: 30px;
}

@media (max-width: 480px) {
  .container {
      width: 70%;
  }
}