section#signUp
{ margin: 0 1em;
}

section#signUp > form
{ display: none;
}

section#signUp > form > input[name=phone_verification_code]
{ width: 6em;
  margin: 0 1em 0 2em;
}

section#signUp div.checks
{ margin: 0.5em 0 0.5em 0.25em;
}

section#signUp div.checks > span
{ display: block;
  padding: 0.5em 0.5em 0.5em 2em;
  background-image: url('/layout/media/icon_grey_dot.svg');
  background-repeat: no-repeat;
  background-position: left center; 
}

section#signUp div.checks > span.no
{ background-image: url('/layout/media/icon_wrong_small.svg');
}

section#signUp div.checks > span.yes
{ background-image: url('/layout/media/icon_correct_small.svg');
}

section#signUp div.checks > input[name=error_message]
{ display: none;
  border: none;
  width: 90%;
  color: #ff0000;
  padding: 0.5em 0.5em 0.5em 2em;
  background-image: url('/layout/media/icon_wrong_small.svg');
  background-repeat: no-repeat;
  background-position: left center; 
}


section#signUp form[name=phone_verification] > input[name=verification_code],
section#signUp form[name=email_verification] > input[name=verification_code]
{ margin: 0 1em;
  width: 7em;
  letter-spacing: .5em;
}

section#signUp form[name=mfa_selection] > label
{ display: block;
  margin: 1.5em 0;
}

section#signUp form[name=mfa_selection] > label > input
{ transform: scale(2);
  margin: 0 1em 0 0.5em;
}

section#signUp > form > input[name=email]
{ margin: 0 0.25em 0 0;
}

section#signUp form > fieldset
{ display: block;
  margin: 0;
  width: 60 em;
  padding: 0;
}

section#signUp form > fieldset > h3
{ margin: 1em 0 0 0.5em;
}

section#signUp form > fieldset > label
{ margin: 0.5em 1em 0 0;   
}

section#signUp form > fieldset > label > span
{ display: block;
  padding: 0.5em 0;
}
 
section#signUp form > fieldset:nth-child(1) > label,
section#signUp form > fieldset:nth-child(2) > label
{ display: inline-block;
  width: 22em;
  cursor: pointer;
}

section#signUp form > fieldset:first-child  > label > div.password
{ width: 21em;
}

section#signUp form > fieldset:nth-child(2) > label > input[type=text]
{ width: 20em;
}

section#signUp form > fieldset:nth-child(3) > label
{ display: inline-block;
  padding: 0.5em 0;
}

section#signUp form > fieldset:nth-child(3) input[name=month]
{ width: 11em;
}
  
section#signUp form > fieldset:nth-child(3) input[name=year]
{ width: 7em;
}

section#signUp form > div
{ margin: 0 0 1em 0;
  
}

section#signUp form[name=success] > p
{ display: block;
  padding: 0.5em 0.5em 0.5em 2em;
  background-repeat: no-repeat;
  background-position: left center; 
  background-image: url('/layout/media/icon_correct_small.svg');
}

form > div#signuplegal
{ display: none;
}

div.dialogbackground > div#signuplegal
{ position: absolute;
  background: #fff;
  border: solid 1px #000;
}

div.dialogbackground > div#signuplegal > div:first-child
{ position: absolute;
  overflow-y:scroll;
}

div.dialogbackground > div#signuplegal > div:last-child
{ position: absolute;
}

div.password
{ display: inline-block;
  position: relative;
  padding: 0;
  margin: 0;
}

div.password > input
{ width: 100%;
  margin: 0;
  box-sizing:border-box;
}

div.password > span
{ position: absolute;
  padding: 0;
  margin: 0;
  top: 1px;
  right: 1px;
  width: 2em;
  height: 2em;
  cursor: pointer;
  background-image: url('/layout/media/icon_eye_off.svg');
  background-repeat: no-repeat;
  background-position: center center;
}

div.password > span.datashown
{ background-image: url('/layout/media/icon_eye_on.svg');
}


section#login form > label
{ display: block;
  margin: 1em 0;
}

section#login form > label > span
{ display: block;
  padding: 0.5em 0;
}

section#login form > label > input[type=email],
section#login form > label > div.password
{ width: 20em;
  box-sizing: border-box;
}

div.dialogbackground > div#signuplegal > div:first-child
{ position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 6.5em;
  border-bottom: solid 1px #000;
}

div.dialogbackground > div#signuplegal > div:last-child
{ position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4.5em;
  background: #eee;
  padding: 0 0 2em 0;
  text-align: center;
}
  
div.dialogbackground > div#signuplegal > div:last-child button
{ width: 40%;
}
  
div.dialogbackground > div#signuplegal > div:last-child button:disabled
{ background: #888;
  color: #ccc;
  cursor: default;
} 

/* Media Specific Styles */

/* Smartphones and other small screens */
@media screen and (max-width: 40em), screen and (max-height: 40em)
{
  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1)
  { width: 90%;
  }

  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1) > input[type=text]
  { width: 100%;
  }

  section#signUp > form > input[name=email]
  { width: 90%;
    margin-bottom: 1em;
  }
  
  div.dialogbackground > div#signuplegal
  { width: 94%;
    left: 3%;
    top: 5em;
    bottom: 5em;
  }

  form[name="reset_password_form"] > label > span
  { display: block;
  }

  form[name="reset_password_form"] > label > input
  { margin: 0.5em 0 0 0;
    width: 90%;   
  }
}

/* Tablets and other medium screens */
@media screen and (min-width: 40.01em) and (min-height: 40.01em) and (max-width: 60em)
{
  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1)
  { width: 90%;
  }

  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1) > input[type=text]
  { width: 100%;
  }

  section#signUp > form > input[name=email]
  { width: 30em;
  }

  div.dialogbackground > div#signuplegal
  { width: 90%;
    left: 5%;
    top: 5em;
    bottom: 5em;
  }

    form[name="reset_password_form"] > label > span
  { display: inline-block;
    width: 5em;
  }

  form[name="reset_password_form"] > label > input
  { width: 30em;   
  }

}

/* Laptops, desktops, and other large screens */
@media screen and (min-width: 60.01em) and (min-height: 40.01em)
{ 
  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1)
  { width: 44em;
  }

  section#signUp form > fieldset:nth-child(3) > label:nth-of-type(1) > input[type=text]
  { width: 43em;
  }

  section#signUp > form > input[name=email]
  { width: 30em;
  }

    div.dialogbackground > div#signuplegal
  { width: 50em;
    top: 5em;
    bottom: 5em;
    left: 50%;
    margin-left: -25em;       
  }
    
  form[name="reset_password_form"] > label > span
  { display: inline-block;
    width: 5em;
  }

  form[name="reset_password_form"] > label > input
  { width: 30em;   
  }
  
    
}

section.TCMDA_userpanel
{ position: absolute;
  top:0.25em;
  right: 0;
  padding: 0;
} 

section.TCMDA_userpanel>p, section.TCMDA_userpanel>dl, section.TCMDA_userpanel>button
{ display: inline-block;
  margin: 0.45em 1em;
  font-size: 1em;
}


section.TCMDA_userpanel>button
{ border-color: #ffffff;
}


section.TCMDA_userpanel>p
{ cursor: default;
  color: #ffffff;
}

section.TCMDA_userpanel>dl
{ position: relative;
  border: solid 1px #ffffff;
  border-radius: 1em;
  padding: .1em 2em .1em 1em;
  cursor: pointer;
}

section.TCMDA_userpanel>dl:hover
{ border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #901616;
}

section.TCMDA_userpanel>dl>dt
{ color: #ffffff;
}

section.TCMDA_userpanel>dl>dd
{ display: none;
}

section.TCMDA_userpanel>dl>dd>ul
{ margin: .15em -1px 0 0;
  background: #901616;
  border: solid 1px #ffffff;
  padding: .5em 0; 
}

section.TCMDA_userpanel>dl>dd>ul>li
{ color: #ffffff;
  list-style: none;
  margin: 0;
  padding: 0.2em 1em;
}

section.TCMDA_userpanel>dl>dd>ul>li:hover
{ color: #ffffff;
  background: #b31b1b;
}


section.TCMDA_userpanel>dl:hover>dd
{ display: block;
  position: absolute;
  right: 0;
  width: 12em;
}


section.TCMDA_login
{ top: 10em;
  width: 30em;
  height: 14em;
  margin: 0 0 0 -15em;
}

section.TCMDA_resetPassword
{ top: 10em;
  width: 30em;
  height: 16em;
  margin: 0 0 0 -15em;
}

section.TCMDA_login>form
,section.TCMDA_resetPassword > form
{ margin: 0 2em 0.5em 2em;
}

section.TCMDA_login>form>label>span
,section.TCMDA_resetPassword > form > label > span
{ display: inline-block;
  width: 7em;
  margin: 0.5em 0;
}

section.TCMDA_login>form>label>input
,section.TCMDA_resetPassword > form > label > input
{ width: 17em;
}

section.TCMDA_login button.link
{ position: relative;
  left: 13em;
  top: -0.7em;
}

section.TCMDA_resetPassword > p
{ margin: 0.5em 1em;
  text-align: left;
}

section.TCMDA_resetPassword > button
{ margin: 0.5em 1em;
}

section.TCMDA_preferences
{ top: 10em;
  width: 30em;
  margin: 0 0 0 -15em;
}

section.TCMDA_preferences span
{ margin-right: 2em;
}

section.TCMDA_preferences p
{ text-align: center;
  width: 100%;
}

section.TCMDA_preferences p>button
{ margin: 0 1em;
}


section.TCMDA_changePassword
{ top: 10em;
  width: 30em;
  margin: 0 0 0 -15em;
}

section.TCMDA_changePassword span
{ display: inline-block;
  margin-right: 2em;
  width: 12em;
}

section.TCMDA_changePassword p
{ text-align: center;
  width: 100%;
  margin: 0 0 2em 0;
}

section.TCMDA_changePassword p>button
{ margin: 0 1em;
}


section.TCMDA_logoutNotification
{ top: 5em;
  width: 40em;
  margin: 0 0 0 -20em;
}

section.TCMDA_logoutNotification p
{ text-align: left;
  margin: 0.75em 1em;
}


section.TCMDA_logoutNotification > button
{ width: 10em;
  margin: 0.5em 0 1em 0;
}


section.TCMDA_signup
{ top: 5em;
  width: 40em;
  height: 19em;
  margin: 0 0 0 -20em;
}

section.TCMDA_signup label
{ margin: 0.5em

}

section.TCMDA_signup label > span
{ display: inline-block;
  width: 10em;
}
 
section.TCMDA_signup label > input
{ width: 26em;
}

section.TCMDA_doneSignup
{ top: 5em;
  width: 40em;
  height: 9em;
  margin: 0 0 0 -20em;
}