textarea {
  resize: vertical;
  height: 200px;
  color: var(--textColor);
}

.dark textarea {
  border-color: var(--darkGray);
  color: var(--textColor);
}

#patientForm label {
  text-transform: capitalize;
}

input,
.input,
.commentBox,
textArea {
  border: var(--borderSize) dashed var(--borderColor);
  outline: none;
  background: var(--highlightBlue);
  border-radius: var(--radius);
  padding: var(--twoTimesPadding);
  width: 100%;
  font-size: inherit;
  color: var(--textColor);
}

.commentBox {
  margin-bottom: var(--threeTimesPadding);
  background: none;
  border: none;
}


label,
.label,
.commentLabel {
  grid-column: 1;
  font-size: 12px;
  text-transform: lowercase;
  color: var(--mediumGray);
  margin-bottom: var(--padding);
}


.commentLabel {
  text-transform: none;
}

.click,
.link,
a {
  cursor: pointer;
  text-decoration: none;
  /*    text-decoration: underline; */
  outline: none;
  color: inherit;
}

button,
.button {
  color: var(--title);
  background: var(--white);
  padding: var(--padding);
  border: var(--border);
  border-radius: var(--radius);
  border-color: var(--title);
  outline: none;
  cursor: pointer;
  font-size: 10pt;
  transition: all 350ms;
}


button[type="submit"],
.button[type="submit"] {
  color: var(--title);
  /*   background: var(--); */
  padding: var(--padding);;
  border-radius: var(--radius);;
  outline: none;
  cursor: pointer;
}

button[type="submit"]:hover,
.button[type="submit"]:hover {
  color: var(--white);
  background: var(--title);
}

button.buttonFlex {
  display: inline-flex;
  justify-content: space-between !important;
}


button#cancel:hover {
  /*     background: var(--gray235); */
  color: var(--red);
  border-color: var(--red);
}

button#cancel {
  background: var(--white);
  color: var(--gray150);
  border-color: var(--gray150);
  font-size: 8pt;
}