id^='Sessions'

{

@include display(flex);
@include justify-content(center);
@include flex(1);

& > section {
  @include display(flex);
  @include flex(1);
  @include flex-direction(column);
  @include align-items(center);
  @include justify-content(center);
}

form {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  @include display(flex);
  @include flex-wrap(wrap);

  div.fieldset {
    @include display(flex);
    @include flex(3 auto);
    @include flex-direction(column);
    border: 1px solid #BABABA;
    border-right: none;
    border-radius: 2px 0 0 2px;
    background: #FFF;
  }

  p {
    @include flex(1 100%);
    padding: 0 1em;
  }

  p.errors {
    color: rgb(193, 56, 28);
  }

  p.back {
    margin: 1em 0;
    &:before {
      font-family: entypo;
      font-size: 3em;
      content: "←";
      vertical-align: middle;
    }

    a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  input, button {
    margin: 0;
    outline: none;
  }

  input {
    @include flex(1);
    font-family: 'Helvetica Neue';
    font-weight: lighter;
    border: none;
    background: none;
    font-size: 1.3em;
    padding: 1em;

    &:first-child {
      border-bottom: 1px solid #BABABA;
    }
  }

  button {
    @include transition(box-shadow 0.3s);
    @include user-select(none);
    background: none;
    border: 1px solid rgb(109, 154, 127);
    cursor: pointer;
    background: rgb(86, 205, 121);
    padding: 0 0.3em;
    border-radius: 0 2px 2px 0;
    box-shadow: inset 0 1px 1px 0 rgba(215, 255, 225, 0.52);
    width: 100px;

    svg {
      width: 60px;
      height: auto;
      fill: #a9ffb3;
      padding: 1em;
    }

    &:active {
      box-shadow: inset 0 1px 3px 0 rgba(57, 88, 58, 0.26);
    }
  }
}

}