
.s_LD_NotFound_Title
  font-size: 27px;
  text-align: center;
  margin: -3px 0 15px;
  padding: 0;
.s_LD_NotFound_Details
  text-align: center;
  font-size: 16px;
  margin-bottom: 25px;
.s_LD_NotFound_HomeL
  font-size: 18px;
  text-decoration: underline;
  font-weight: bold;
  color: hsl($uiHue,100%,42%);

.esLoginDlg_becomeAdminInstr
  margin: 25px 5px;
  text-align: center;
  p
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 10px;

.esLoginDlg_badPwd
  margin: 1.3em 0 1.2em;
  color: red;
  &.esHidden
    opacity: 0.4;
    transition: opacity 0.7s linear;


// On small screens, like iPhone 5 and login popup windows, make the dialog full-screen.
@media (max-width: $modalDialogBreakpoint - 1)
  .dw-login-modal
    margin: 0;
    padding: 0;
    width: 100%;  // can remove? or are there  position: fixed (used below) iOS bugs?
    height: 100%; //
    max-width: none;
    max-height: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .modal-content
      border: none !important;
      border-radius: 0;
      height: 100%;
      // sometimes Ty adds some text dynamically, e.g.
      // an invalid input message — which can make the dialog
      // taller than any popup it is in. Then
      // it's good if one can scroll down and see the bottom.
      //overflow-y: auto; — already in client/app-slim/third-party.styl   [e2e_win_size]
    .modal-body
      // Reduce padding so gets closer to top of window, and so there's more
      // horizontal space for the ext IDP authn buttons (e.g. Continue with Google).
      padding: 8px 5px;


.c_AuD
  padding-top: 4px;

  #dw-lgi-other-sites
    margin-bottom: 28px;

  .btn-group-vertical
    margin: 0 auto;
    display: block;
    width: 19em;

  $width = 323px;
  .c_AuD_Switch
    font-style: italic;
    max-width: $width;
    margin: 17px auto;
    &:last-child
      margin: 31px auto 27px;  // more whitespace below, if nothing there


  form
    max-width: $width;
    margin: 0 auto;
    // If there's no footer below, with whitespace & a Cancel button, add some margin instead.
    &:last-child
      margin-bottom: 30px;

  .input-group
    width: 100%;  // else email and full name fields rather narrow, dupl [6RBTFE2]


  label
    color: hsl(0, 0%, 15%);  // a bit darker, so easier to read

  // No, looks better with $width 323 and the inputs 100%.
  //input
  //  width: 310px !important;
  //.esCreateUser input#e2eUsername
  //  width: 272px !important;  // because of the [@] in front [7RFWUQ2]

  .input-group-addon
    background: hsl(0, 0%, 98.3%); // [7RFWUQ2]

  .icon-user  // for custom IDPs
    background: hsl(0 0% 19%);

  .icon-google
    background: hsl(230, 91%, 66%);
    &:before
      margin-right: 5px;
  .icon-facebook
    background: #4267B2;
    // Remove icon; it breaks FB's brand guidelines. Us .s_FbIcon instead, see just
    // below, + .ts file. For now, don't remove .icon-facebook — needed for button size.
    &::before
      display: none;
  .s_FbIcon
    display: inline-block;
    max-width: 18px;
    margin-right: 7px;
  .icon-twitter
    background: #00bced;
    &:before
      margin-right: 5px;
      font-size: 107%;
  .icon-github-circled
    background: #6d6d6d;
    &:before
      margin-right: 5px;
      font-size: 112%;

  .icon-linkedin
    background: #4875B4;
    &:before
      color: #4875B4;
      background: white;
      padding: 2px 2px 2px 2px;
      width: 18px;
      margin-right: 6px;
      margin-left: 0;

  .icon-user,
  .icon-google,
  .icon-facebook,
  .icon-twitter,
  .icon-github-circled,
  .icon-linkedin
    color: white;
    font-weight: bold;
    border: none;
    padding: 10px 13px 10px 12px;
    margin-bottom: 4px;
    &:not(:last-child)
      margin-right: 3px;
    &:hover
      opacity: 0.85; // would be better if could make them darker on hover, instead of brighter

.c_AuD_SwitchB
  font-weight: bold;
  background: hsl($uiHue 80% 55%);
  color: white;
  padding: 0px 3px 2px 5px;
  margin: 0 3px 0 2px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
  min-width: 60px;
  display: inline-block;
  text-align: center;
  &:hover
    color: white;
    text-decoration: none;
    background: hsl($uiHue 100% 65%);

.c_AuD_2SgU .c_AuD_SwitchB   // switch to Create Account button
  padding-right: 5px;

.c_AuD_2LgI .c_AuD_SwitchB   // switch to Log In
  // Make the "Log in" text a bit wider — it's otherwise short, compared to
  // "just type a name". Hmm but this might not make sense in some languages
  // other than English, where "Log in" is longer. Oh well.
  letter-spacing: 0.5px;
  word-spacing: 1px;

.c_AuD_2Gst .c_AuD_SwitchB   // switch to Guest login ("just type a name")
  margin-right: 5px;

.s_LD_LoginB
  font-weight: bold;
  // Make it a bit wider.
  padding-left: 17px;
  padding-right: 17px;


.s_LD_SsoB
  box-shadow: 4px 4px 6px rgba(0,0,0,0.29);
  padding: 7px 28px;
  margin: 13px 0 32px;
  font-size: 17px;

// Add this class to modal dialogs that have opened modal child dialogs.
// This fades the modal dialog by placing an opaque gray layer above.
.dw-modal-fade:before
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  opacity: 0.5;


// Custom title and intro html

.c_AuD_Cu
   text-align: center;

.c_AuD_Cu_Ttl
  font-size: 25px;
  margin-bottom: 1ex;
  line-height: 140%;

.c_AuD_Cu_Intro
  max-width: 27em;
  margin: 0 auto 30px;
  &, p, ol, ul
    color: hsl(0 0% 20%);  // [login_intro_color]
    font-size: 16px;
    line-height: 145%;

.c_AuD_Cu_Fig img
  padding: 0 40px;
  margin: 30px auto;



// vim: fdm=marker et ts=2 sw=2 fo=tcqwn list
