/* common color palette */

body {
  display:flex;
  flex-direction: column;
  min-height: 100vh;
}

:root {
  --background-color:#f4f4f4;
  --navbar-color:white;
  --navbar-height:3em;
  --footer-height:2em;
  --font-red:darkred;
  --empty-field-color:#ffffcc;
  --invalid-value-bg:#ffcccc;
  --serif-font:'Noto Serif Display', Serif;
  --sans-serif-font: 'Nunito','Quicksand', Sans-serif;
  --monospace-font: 'Courier Prime','Courier New', Monospace;
}

html,body {
  font-weight:normal;
  font-style:normal;
  font-optical-sizing:auto;
  background: var(--background-color);
}

@keyframes bodyErrorFlash {
  0%   { background-color: #ffe6eb; }   /* light pink */
  50%  { background-color: #ffb3c1; }   /* stronger pink */
  100% { background-color: var(--background-color); }
}

body.flash-error {
  animation: bodyErrorFlash 0.5s ease-out;
}

#ttt-body {
  font-family: var(--sans-serif-font);
  font-size:normal;
  box-sizing: border-box;
}

.ttt-card {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  border: solid 1px #666;
  background:white;
}

div.noscript {
  display:none;
  position:relative;
  margin:3px auto;
  padding:0 1.5em;
  flex-direction:column;
  width:fit-content;
  background:white;
  border: solid 1px darkred;
}
div.noscript.card {
  display:block;
  padding:0;
  border:none;
}
div.noscript div {
  color:#800;
  font-style:italic;
  text-align:center;
  background:inherit;
}
div.noscript img.dismiss {
  position:absolute;
  top:2px;
  right:2px;
  width:12px;
  height:12px;
  background:white;
}
#nojs-toggle {
  display:none;
}
#nojs-toggle:checked ~ noscript div.noscript {
  display:flex;
}

input.hidden {
  display:none;
}

input.invalid-value {
  color:darkred;
  caret-color: black;
}

/* Copied from w3.css */

/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{margin:0}
button,input,select,textarea { font:inherit; margin:0 }
html,body{ font-size:15px; line-height:1.5 }

.ttt-red {
  color:var(--font-red);
}

/* splash screens */

div.ttt-splash {
  width:clamp(250px,85vw,600px);
  margin-left:auto;
  margin-right:auto;
  margin-top:10vh;
}

div.ttt-caption, div.ttt-subcaption {
  text-align:center;
}

div.ttt-caption {
  margin-top:10px;
  font-size:large;
}

div.ttt-subcaption {
  margin-top:8px;
  color:#333;
  font-style:italic;
}

div.ttt-splash img {
  width: 100%;
}


/* navigation bar */

#ttt-navbar-wrapper {
  position: sticky;
  top: 0;
  width:100%;
  height:var(--navbar-height);
  z-index:10;
}

#ttt-navbar {
  position: relative;
  z-index:10;
  min-height:50px;
  width:100%;

  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  background-color:var(--navbar-color);
  padding: 5px 0;

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
}

#ttt-navbar * {
  background:var(--navbar-color);
}

#ttt-navbar .left-box {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;

  margin-left: 1em;
  margin-right: 2em;
}

#ttt-navbar .ttt-logo {
  height:clamp(25px,5vw,40px);
  width:clamp(25px,5vw,40px);
}

#ttt-navbar .ttt-logo.missing {
  display:none;
}

#ttt-navbar .ttt-title
{
  font-family: var(--serif-font);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ttt-navbar .center-box {
  display:none;
  font-family: var(--serif-font);
  font-size:large;
  margin-left:auto;
  margin-right:auto;
}

#ttt-navbar .center-box .survey-status {
  display:grid;
  grid-template-columns: 1fr 1fr;
  font-size:80%;
}

#ttt-navbar .center-box .survey-status .key {
  justify-self: right;
  font-weight:bold;
}
#ttt-navbar .center-box .survey-status .key::after {
  content:':';
  padding-right:0.5em;
}


#ttt-navbar .center-box .survey-status .timestamp {
  justify-self: left;
}

#ttt-navbar .right-box {
  font-family: var(--serif-font);
  margin-left:auto;
  padding:0 1em;
  display:flex;
  align-items: center;
}


#ttt-navbar span.link {
  margin: 0 5px;
}
#ttt-navbar span.link a {
  display:flex;
  align-content:center;
  position:relative;
}
#ttt-navbar img.link {
  width:20px;
  height:20px;
  vertical-align:middle;
  position:relative
}

#ttt-navbar span.link-tip {
  visibility: hidden;
  font-size:70%;
  background-color: white;
  color: #444;
  text-align: center;
  padding: 2px 4px;
  border: solid gray 1px;

  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}

#ttt-navbar .admin.link a:hover,
#ttt-navbar .admin.link a img:hover
{
  cursor:pointer
}

#ttt-navbar .survey.link span.link-tip {
  left:revert;
  right:-1em;
  transform:none;
}

#ttt-navbar span.link a:hover span.link-tip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.8s;
}


#ttt-navbar .menu-trigger {
  margin-left:0.5em;
  margin-right:0;
  display:flex;
  align-items: center;
}

#ttt-navbar img.menu-trigger {
  width: 16px;
}


@media only screen and (min-width:320px) 
{
  #ttt-navbar .ttt-title {
    font-size: large;
  }
}

@media only screen and (min-width:480px) 
{
  #ttt-navbar .ttt-title {
    font-size: x-large;
  }
  #ttt-navbar .right-box {
    font-size: large;
  }
  #ttt-navbar img.menu-trigger {
    width: 20px;
  }

}

@media only screen and (min-width:850px) 
{
  #ttt-navbar .center-box {
    display:inline-block;
  }
}

@media only screen and (min-width:1024px)
{
}

/* User Menu */

#ttt-user-menu {
  position: absolute;
  top:100%;
  right:0;
  z-index:5;

  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events:none;

  display:flex;
  flex-direction: column;
  gap: 0.5em;
  background:white;
  padding:1em;
  width:fit-content;
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

#ttt-user-menu.locked, #ttt-user-menu.hover {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

#ttt-user-menu button {
  border:none;
  padding:0;
  cursor:pointer;
  justify-content:center;
  width:fit-content;
  font-size:large;
  background:inherit;
  white-space:nowrap;
}

#ttt-user-menu button:hover {
  color:#2f6bd6;
  text-shadow: 0 4px 5px rgba(100, 100, 200, 0.5);
  cursor:pointer;
}


#ttt-navbar-wrapper .editor-pane
{
  position: absolute;
  top:100%;
  right:1em;
  z-index:4;

  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events:none;

  display:flex;
  flex-direction: column;
  background:white;
  padding:1em;
  width:fit-content;
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

#ttt-navbar-wrapper .editor-pane * {
  background:inherit;
}

#ttt-navbar-wrapper .editor-pane.visible {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

#ttt-navbar-wrapper .editor-pane .wrapper {
  display:flex;
  align-items: center;
}

#ttt-navbar-wrapper .editor-pane .fields .label {
  font-weight:700;
  margin-top:10px;
}

#ttt-navbar-wrapper .editor-pane div.error {
  color:darkred;
  font-style:italic;
  text-align:center;
}

#ttt-navbar-wrapper .editor-pane input {
  border: 1px solid #ccc;   /* light gray */
  border-radius: 4px;       /* soft corners */
  padding: 0.25em 0.5em;    /* some inner spacing */
}

#ttt-navbar-wrapper .editor-pane input:focus {
  border-color: #666;
  outline: none;  /* remove default blue outline if you like */
  box-shadow: 0 0 0 2px rgba(100, 150, 250, 0.3); /* subtle focus ring */
}

#ttt-navbar-wrapper .editor-pane input.error {
  background:#fdd;
  color:darkred;
}

#ttt-navbar-wrapper .editor-pane input.mismatch {
  background:#fdd;
  color:darkred;
}

#ttt-navbar-wrapper .editor-pane input:placeholder-shown {
  background:#ffd;
}

#ttt-user-editor input {
  width:30em;
  max-width:75vw;
}

#ttt-navbar-wrapper #ttt-user-editor input.missing {
  background:#fdd;
}

#ttt-password-editor input {
  width:15em;
}

#ttt-navbar-wrapper .editor-pane img.info {
  content: url('../img/icons8/info.png');
  margin-left:5px;
  width:13px;
}

#ttt-password-editor img.show-pw {
  content: url('../img/icons8/show_pw.png');
  margin-left:0.5em;
  width:20px;
}

#ttt-password-editor img.hide-pw {
  content: url('../img/icons8/hide_pw.png');
  margin-left:0.5em;
  width:20px;
}

#ttt-navbar-wrapper .editor-pane div.actions {
  margin-top:1em;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
}

#ttt-navbar-wrapper .editor-pane div.actions button {
  padding: 0 8px;
  background-color: #d8d8d8;
  border-radius: 4px;
  border: 1px solid #222222;
  cursor: pointer;
}

#ttt-navbar-wrapper .editor-pane div.actions button:hover {
  background-color:#c0c0c0;
  box-shadow:0 1px 4px 0 rgba(0,0,0,0.16),0 1px 6px 0 rgba(0,0,0,0.12);
}

#ttt-navbar-wrapper .editor-pane div.actions button.disabled {
  pointer-events:none;
  background:#eee;
  color:#aaa;
  border-color:#ddd;
}

/**
 * No-Javascript styling
 **/

#nojs-menu-toggle {
  display:none;
}

#nojs-menu-toggle:checked + #ttt-user-menu {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

#ttt-user-menu a.user-menu-item {
  width:100%;
  font-size:large;
  background:inherit;
  white-space:nowrap;

  text-decoration: none;
  color:black;
  transition: text-shadow 0.1s ease, color 0.1s ease;
}

#ttt-user-menu a.user-menu-item:hover {
  color:#2f6bd6;
  text-shadow: 0 4px 5px rgba(100, 100, 200, 0.5);
  cursor:pointer;
}


/**
 * Footer
 **/

#ttt-footer {
  margin-top:auto;
  width:100%;
  height:var(--footer-height);
  background-color:inherit;
}
#ttt-footer * {
  background-color:inherit;
}
#ttt-footer .ttt-ack {
  float:right;
  margin:3px 2em;
  font:sans-serif;
  font-size:85%;
}

/**
 * status message
 **/

#ttt-status {
  font-family: var(--sans-serif-font);

  width:min(500px,90%);
  margin:1em auto;
  padding: 0.5em 1em;
  border:solid 1px;
  border-left: solid 5px;
  border-radius:5px;

  opacity:1;
  transition: all 0.5s;
}

#ttt-status.info {
  color:#3333ff;
  background-color:#ddeeff;
}

#ttt-status.warning {
  color:#a86000;
  background-color:#fff8c8;
}

#ttt-status.error {
  color:#900000;
  background-color:#ffdddd;
}

#ttt-status.none {
  opacity:0;
  transform:scaleY(0);
  margin: 0 auto;
  font-size:0;
}

#ttt-status div {
  background-color:inherit;
}

#ttt-status div.note {
  font-style:italic;
}


@media only screen and (min-width:320px) 
{
}

@media only screen and (min-width:480px) 
{
}

@media only screen and (min-width:640px) 
{
  #ttt-small-screen {
    display:none;
  }
}

@media only screen and (min-width:1024px)
{
}

/**
 * Close Tab/Window Page
 **/

#ttt-body div.close {
  margin:1em;
  width:100%;
  text-align:center;
  font-weight:bold;
}

#ttt-body div.close.message {
  font-size: x-large;
}

#ttt-body div.close.notification {
  font-size: large;
  font-weight:normal;
  font-style: italic;
}