.container--login{
  max-width: 600px;
}

  @media screen and (min-width: 62em){
    .container--login{
      padding: 50px 0;
    }
  }

.login__header{
  display: flex;
  flex-direction: row;
}

.login__logo{
  width: 104px;
  margin-right: 20px;
  flex: 0 0 auto;
}

.login__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login__title{
  margin-top: auto;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.login__subtitle{
  margin-top: 0;
}

#loginform{
  background-color: var(--nav-area-alt);
  padding: 20px;
  margin-top: 40px;
  border-top: 1px solid var(--nav-area);
}

#loginform p{
  margin: 20px 0;
}

  #loginform p:first-child{
    margin-top: 0;
  }

#loginform label{
  display: block;
  font-size: 1.375rem;
  margin-bottom: 10px;
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#loginform textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 18px;
}

#loginform .button.button-primary{
  background-color: var(--main);
  color: var(--background);
  font-weight: 700;
  padding: 8px 15px;
  border: none;
  border-radius: 8px;
}

.loginform__user-types{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.loginform__user-type{
  border: 1px solid var(--nav-area);
  background-color: var(--background);
  border-radius: 8px;
  width: 100%;
  max-width: 245px;
  margin: 0 auto;
}

  #loginform .loginform__user-type label{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    height: 100%;
    box-sizing: border-box;
  }

    #loginform .loginform__user-type label:hover{
      cursor: pointer;
    }

        #loginform .loginform__user-type label:focus{
          border: 2px solid var(--text);
        }

        #loginform .loginform__user-type label img{
          display: block;
          margin-bottom: 10px;
          margin-top: auto;
        }

        #loginform .loginform__user-type label input{
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }

.loginform__group{
  margin: 20px 0;
}

#loginform .loginform__group--checkbox{
  position: relative;
  padding-left: 20px;
}

    #loginform .loginform__group--checkbox input{
      position: absolute;
      top: 5px;
      left: 0;
    }

#loginform .loginform__group--checkbox label{
  font-size: 1rem;
}