* {
  --empty-field-color:#ffffe0;
  --empty-optional-color:#f0f0f0;
  --login-background:#ddd;
  --header-background:#008;
  --header-foreground:white;
  --recover-color:#777777;
  --recover-background:#f0f0f0;
  --recover-hover:#f8f8f8;
  --submit-background:#008;
  --submit-foreground:white;
  --submit-hover-fg:white;
  --submit-hover-bg:#33d;
  --info-background:#eee;
  --error-color:#cf0000;

/* overall login box */

#ttt-login {
  width: min(95%, 600px);
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}

#ttt-login .ttt-card {
  background: var(--login-background);
}

#ttt-login .ttt-card * { background:inherit; }

#ttt-login .ttt-card header {
  font-size: large ;
  font-weight:bold;
  color:var(--header-foreground);
  padding: 0.5em 1em;
  background: var(--header-background);
}

#ttt-login div.help {
  display:flex;
  align-items:center;
  font-size:90%;
  font-style:italic;
  font-weight:bold;
  color: var(--header-background);
}

#ttt-login div.help img {
  margin:0 0.25em;
  width:1em;
  height:1em;
}

#ttt-login .ttt-card form {
  margin:1em;
}

/* Resume buttons */

#ttt-login .resume-box {
  margin:1em;
}
#ttt-login .resume-box .button-box {
  width:100%;
  position:relative;
  margin-bottom:3px;
}
#ttt-login .resume-box .button-box * {
  background-color:var(--recover-background);
}
#ttt-login .resume-box .button-box:hover * {
  background-color:var(--recover-hover);
}
#ttt-login .resume-label {
  font-weight:bold;
  margin: 1em auto 0 0;
}
#ttt-login button.resume {
  margin-bottom:2px;
  width:100%;
  height:unset;
  border-style: outset;
  border-width: 1px;
  border-color: var(--recover-color);
  z-index:1;
  cursor: hand;
  cursor: pointer;
  color:black;
}
#ttt-login button.resume:hover {
  border-width:2px;
  margin-bottom:1px;
}
#ttt-login button.resume .fullname {
  font-weight:bold;
  text-align:left;
  margin: 5px 0 0 8px;
}
#ttt-login button.resume .userid {
  text-align:left;
  font-size:small;
  margin: 0 0 5px 8px;
}
#ttt-login .resume-box .forget {
  position:absolute;
  top:5px;
  right:5px;
  font-size:small;
  z-index:2;
}
#ttt-login .resume-box .forget img {
  width:12px;
  height:12px;
}

/* Login userid/password fields */

#ttt-login .input {
  position: relative;
  margin: 8px 1em 0 1em;
}
#ttt-login .input .label-box {
  display:flex;
  align-items: center;
  gap:0.25em;
}
#ttt-login .input div.error {
  color:var(--error-color);
  font-size:x-small;
  display:none;
  margin-left:auto;
  align-self:flex-end;
}
#ttt-login .input input.text-entry {
  background-color:white;
  display:block;
  padding:0.25em 0.5em;
  margin-left:1em;
  width: calc(100% - 1em);
  border: inset 1px #ccc;
}

#ttt-login div.locked-input {
  margin-left:1em;
  border: inset 1px #ccc;
  padding:0.25em 0.5em;
}

#ttt-login .input input.text-entry:placeholder-shown {
  background-color:var(--empty-field-color);
}

#ttt-login .input input.optional.text-entry:placeholder-shown {
  background-color:var(--empty-optional-color);
}

#ttt-login .input .info-box {
  display:flex;
  margin: 5px 0;
}
#ttt-login .input .info-trigger img {
  width:1em;
  height:1em;
  position:absolute;
  top:0.25em;
}
#ttt-login .input .info-box .info {
  margin-left:2em;
  padding:0 0.5em;
  width:calc(100% - 3em);
  border: inset 1px;
  border-radius: 5px;
  background-color:var(--info-background);
}
#ttt-login .input .info-box .info p {
  margin: 0.5em 0 0.5em 1em;
  line-height: 1;
  font-size:small;
}
#ttt-login .input .info-box .info p:first-child {
  margin-left:0;
}

#ttt-login input.info-cb,
#ttt-login div.input .info-box {
  display:none;
}

#ttt-login input.info-cb:checked ~ .info-box {
  display:block;
}

@media (hover:hover) and (pointer:fine) {
  #ttt-login input.info-cb:hover ~ .info-box {
    display:block;
  }
}

/* Submit and other buttons */

#ttt-login .submit-bar {
  margin:10px 1em 0;
  width: calc(100% - 2em);
  overflow:hidden;
  display:flex;
  flex-direction: row-reverse;
}

#ttt-login .submit-bar button.full {
  width:100%;
  margin-left:0;
}
#ttt-login .submit-bar button {
  padding:0.5em 1em;
  margin:0.5em 0 0.5em 1em;
  text-align:center;
  cursor:hand;
  cursor:pointer;
  border:none;
  border-style:outset;
  border-width:1px;
  border-radius:5px;
}
#ttt-login .submit-bar button.submit {
  color:var(--submit-foreground);
  background-color: var(--submit-background);
  font-weight:bold;
}
#ttt-login .submit-bar button.submit:hover {
  color:var(--submit-hover-fg);
  background-color:var(--submit-hover-bg);
}

#ttt-login .links-bar {
  margin-top: 0.5em;
  margin-bottom: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  row-gap:0.5em;
}

#ttt-login div.register a {
  margin: 0.5em 1em;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  background-color:var(--submit-background);
  height:35px;
  border-radius:5px;
  font-weight:bold;
  text-decoration:none;
}

#ttt-login div.register a:hover {
  background-color:var(--submit-hover-bg);
}

#ttt-login div.recover {
  margin-top:1em;
  font-size:1em;
  width:100%;
  display:flex;
  flex-direction:column;
}


/* This was needed before updating .htaccess to enforce https
#ttt-login .safari {
  font-style:italic;
  font-size:90%;
  color:darkred;
  margin-left:auto;
  margin-right:0;
  width:fit-content;
}
*/


@media only screen and (max-width:640px) 
{
  #ttt-login .resume-label {
    font-size:large;
  }
}