.advance-enter, .advance-exit { .transition(transform .5s cubic-bezier(0.7, 0, 0.175, 1) 0s); }
.slide-back .advance-enter { .translateX(-100%); }
.slide-back .advance-enter.advance-enter-active  { .translateX(0); }
.slide-back .advance-exit { .translateX(0); }
.slide-back .advance-exit.advance-exit-active { .translateX(100%); }
.slide-next .advance-enter { .translateX(100%); }
.slide-next .advance-enter.advance-enter-active { .translateX(0); }
.slide-next .advance-exit { .translateX(0); }
.slide-next .advance-exit.advance-exit-active { .translateX(-100%); }

.maha-signin {
  flex: 1;
  display: relative;
  background-color: lighten(@black, 30);
}
.maha-signin-panel {
  .scrollable();
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  @media (min-width: 415px) {
    display: flex;
  }
}
.maha-signin-form {
  width: 100%;
  max-width: 375px;
  @media (max-width: 414px) {
    margin: 2em auto 0;
  }
  @media (min-width: 415px) {
    margin: auto;
  }
  overflow: hidden;
  text-align: center;
  padding: 0.8em;
}
.maha-signin-avatar {
  border-radius: 5px;
  margin-bottom: .8em;
  background-color: fadeout(@white, 50);
  height: 0;
  padding-bottom: 100%;
  position: relative;
  cursor: pointer;
}
.maha-signin-avatar-placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  i {
    font-size: 15em;
    color: fadeout(@black, 70);
    margin: auto;
  }
}
.maha-signin-accounts {
  width: ~"calc(100% - 2em)";
  max-width: 375px;
  margin: auto;
}
.maha-signin-accounts-list {
  margin: 0.8em 0 !important;
  with: 100%;
  background: @white;
}
.maha-signin-accounts-title {
  cursor: pointer;
  padding: 0.8em;
  background-color: fadeout(@black, 95);
  font-size: .9em;
  border-bottom: 1px solid #DDD;
  h2 {
    color: @black !important;
  }
  h3 {
    color: lighten(@black, 50) !important;
  }
}
.maha-signin-account {
  .hover(background-color, fadeout(@black, 98));
  display: flex;
  border-bottom: 1px solid #DDD;
  cursor: pointer;
  height: 5.5em;
}
.maha-signin-account-avatar {
  padding: 0.8em 0 0.8em 0.8em;
  line-height: 1em;
  display: flex;
  .maha-avatar {
    width: 2.8em !important;
    margin: auto !important;
  }
  .maha-avatar-text {
    font-size: 1em !important;
  }
}
.maha-signin-account-details {
  flex: 1;
  padding: 0.8em;
  font-size: .9em;
  line-height: 1.5em;
  color: lighten(@black, 60);
  display: flex;
  strong {
    color: @black;
  }
  p {
    text-align: left !important;
    margin: auto 0 !important;
    color: lighten(@black, 60) !important;
  }
}
.maha-signin-account-remove,
.maha-signin-account-next {
  padding: 0.8em;
  display: flex;
  i {
    margin: auto;
    font-size: 1em;
    line-height: 1em;
    color: fadeout(@black, 80);
  }
}
.maha-signin-accounts-remove {
  cursor: pointer;
  padding: 0.8em;
  background-color: fadeout(@black, 95);
  font-size: .9em;
  color: lighten(@black, 50);
  text-align: center;
}

.maha-signin-panel {
  .maha-logo,
  .maha-avatar {
    width: 130px;
    margin: 0 auto;
    display: inline-block;
    .maha-avatar-text {
      font-size: 3em;
    }
  }
  form {
    margin-top: 1em;
  }
  h2 {
    text-align: center;
    color: @white;
    margin: 0;
    font-size: 1.6em;
    line-height: 1.6em;
  }
  h3 {
    text-align: center;
    color: lighten(@white, 5);
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }
  p {
    text-align: center;
    color: @white;
    margin: 0 0 15px;
    line-height: 1.6em;
  }
  .reframe-filefield-token {
    width: 100%;
    margin-right: none;
  }
  .reframe-select {
    text-align: left;
  }
  label {
    color: @white !important;
  }
  .ui.button {
    .hover(background-color, lighten(@blue, 5));
    background-color: @blue;
    color: @white;
    margin-bottom: 5px;
    .transition(background-color 0.5s cubic-bezier(0.7, 0, 0.175, 1) 0s);
  }
  h1 {
    font-size: 4em;
    line-height: 1em;
    margin: 0;
    color: @white;
  }
  .fa-check-circle {
    color: @olive;
  }
  a {
    color: @white;
    cursor: pointer;
  }
  .team-field {
    .suffix {
      position: absolute;
      top: 6px;
      right: 10px;
      color: #333 !important;
    }
  }
  .email-field {
    input {
      border-width: 0 0 1px 0;
      border-color: #DDD;
    }
  }
  .password-field {
    input {
      border: 0px;
    }
    a {
      position: absolute;
      top: 6px;
      right: 6px;
      background-color: #CCC;
      font-size: 10px;
      padding: 3px 5px;
      border-radius: 3px;
      width: 50px;
    }
  }
}