@import url('./common.css');

body{
  display: flex;
}

h1 {
  color: rgb(116, 116, 116);
  font-weight: 300;
  margin: .5em 0;
}

form {
  position: relative;
  max-width: 26em;
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 2em auto;
  box-shadow: 0 5px 5px lightgrey;
  padding: 1em 2.5em;
  box-sizing: border-box;
}

form:after {
  position: absolute;
  content: '';
  width: .7em;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(var(--primary), var(--secondary));
}


input {
  width: 100%;
  padding: .4em .5em;
  background-color: var(--app-grey);
  border: 1px solid var(--app-grey);
  border-radius: .2em;
}

input:focus {
  outline: none;
  border: 1px solid lightgrey;
}

label {
  width: 100%;
  font-weight: 300;
  margin-bottom: -.1em;
  margin-top: 1em;
  font-size: .8em;
}

button {
  padding: .5em 3em;
  background-color: var(--primary);
  color: white;
  margin-top: 2em;
  font-weight: 400;
  font-size: 1em;
}

.form-header {
  color: grey;
  font-size: 2em;
}
.ingresarA{
  text-align: center;
}
.left{
  width: 50%;  
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left img{
  width:60%;
}
.right{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.showErrors{
  color: red;
  font-size: 12px;
  padding-top: 5px;
}