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

body{
  display: flex;
}

h1 {
  color: rgb(116, 116, 116);
  font-weight: 300;
  font-size: 2em;
  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;
}

small {
  width: 100%;
  color: red;
}

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 p {
  color: grey;
  font-size: 2em;
  margin-bottom: 0;
}

.ingressar{
  text-align: center;
}

.left{
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.left img{
  width: 60%;
}

.right{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.form-error, .form-error:focus{
  outline: none;
  border: 1px solid red;
}

.blocked-button{
  background-color: var(--disabled);
}

.cont{
  display: flex;
  width: 100%;
}

@media only screen and (max-width: 512px){
  .cont{
    display: block;
  }
}