:root {
  --validColor:   green;
}

input:not([type="radio"]), button, textarea {
  display: inline-block;

  background-color: var(--containerBGColor);

  font: inherit;
  color: var(--darkThemeBGColor);

  padding: 0.25rem 0.375rem;
  width: var(--minFormWidth);

  outline: none;
  border: 1px solid var(--darkThemeBGColor);
  border-radius: 6px;
}

input:not([type="radio"]) ~ small, textarea ~ small {
  color:  var(--errorColor);
  font-size: 90%;
  margin-left: 10px;
}

input:required:valid:not(:focus), textarea:required:valid:not(:focus) {
  background: rgb(from var(--lightThemeBGColor) r g b / 20%);
}

input.error, button.error, textarea.error {
  border-color: var(--errorColor);
  border-width: 3px;
}

button {
  background-color: var(--darkThemeBGColor);
  color: var(--darkThemeTextColor);
  margin-top: 0.5em;
  margin-left: 0.5em;
}

input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
textarea:hover {
  background: var(--formHighlightBGColor) !important;
  transition: all var(--linkTransitionDuration) ease-in-out;
}

input:focus, textarea:focus {
  background: var(--formHighlightBGColor);
  color: var(--themeTextcolor);
  border-width: 3px;
}

input:user-valid, textarea:user-valid {
  border-color: var(--validColor);
}

input:invalid:focus, textarea:invalid:focus {
  border-color: var(--errorColor);
}

input:valid:focus, textarea:valid:focus {
  border-color: var(--validColor);
}

input::placeholder, textarea::placeholder {
  opacity: 0.5;
}

input:user-invalid, textarea:user-invalid {
  border-color: var(--errorColor);
}

input:invalid:hover, textarea:invalid:hover {
  border-color: var(--errorColor);
  border-width: 2px;
}

input:valid:hover, textarea:valid:hover {
  border-color: var(--validColor);
  border-width: 2px;
}

div.validity {
  white-space: nowrap;
  display: inline-block;
  vertical-align: center;
}

div.validity:has(> :is(input:user-invalid, textarea:user-invalid)) span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: var(--errorColor);
}

div.validity:has(> :is(input:user-valid, textarea:user-valid)) span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  font-weight: bold;
  color: var(--validColor);
}

input:user-invalid ~ div.invalid, textarea:user-invalid ~ div.invalid {
  visibility: visible;
  display: block;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: var(--darkThemeTextColor);
}

input[type="text"].surname {
  display: none;
  margin: 0;
}

form:invalid div.btnContainer:hover div.formButton  {
  visibility: visible;
}

div.formButton {
  display: block;
  visibility: hidden;
  background: var(--darkThemeTextColor);

  color: rgb(from var(--errorColor) r g b / 80%);
  text-align: center;

  padding: 0.25rem 0.375rem;
  margin-top: 0.5em;
  margin-left: 0.5em;
  box-sizing: border-box;

  border: 3px solid var(--errorColor);

  z-index: 10;
}

div.formButton, button.form {
  grid-area: 1 / 1;
  width: var(--minFormWidth);

  border-radius: 2em;
}

button.form {
  display: block;

  font-weight: bold;

  border: 2px solid var(--darkThemeBGColor);

  transition:
    background var(--linkTransitionDuration) ease-in-out,
    color var(--linkTransitionDuration);
}

button.form:hover {
  background: var(--darkThemeTextColor);
  color: var(--darkThemeBGColor);
  cursor: pointer;
}

button.form:focus {
  outline: none;
  background: var(--formHighlightBGColor);
  color: var(--darkThemeBGColor);
  border: 2px solid var(--darkThemeBGColor);
}

form:invalid button.form {
  opacity: 0.35;
  pointer-events: none;
}

div.btnContainer {
  display: grid;
  justify-items: stretch;
  align-items: end;
  justify-content: stretch;

  font-weight: 500;

  margin: 0.5em 2em 0px;
}

p.submitNotice {
  font-style: italic;
  font-size: 0.8em;

  padding-left: 0.5em;
}

img.ttImage {
  height: 1.2em;
  width: 1.2em;
  margin: 0.35em 0px 0px 0.25em;
}

div.formLE {
  position: static;

  width: var(--minFormWidth);
  margin: 0px 2em;

  text-align: var(--textAlign);
  line-height: var(--lineHeight);

  text-indent: 0px;
}

div.labelTT {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

div.invalid {
  display: none;
  visibility: hidden;

  color:  var(--errorColor);
  font-size: 90%;

  transition: all var(--linkTransitionDuration) ease-in-out;

  ul {
    margin: 0px;

    li {
      margin: 0px;
    }
  }
}