:root {
  --webform-max-width: 650px;
  --webform-black: var(--color-black, black);
  --webform-white: var(--color-white, white);
  --webform-red: var(--color-red-400, red);
  --webform-grey: rgb(100, 100, 100);
  --webform-body: var(--text-body, 16px);
}

form[class*="webform-"],
.webform-confirmation {
  font-size: var(--webform-body);
}

@media screen and (max-width: 960px) {
  form[class*="webform-"] {
    padding: 0 1rem;
  }
}

fieldset[class*="webform-"] {
  margin: 0;
  margin-bottom: 2em;
  border: none;
}

/* ========================================== */
/* Processed Text */

.webform-type-processed-text {
  display: flex;
  flex-direction: column;
  margin-top: 1em !important;
  gap: 0.15em;
}

.webform-type-processed-text p + p {
  margin-top: 1em;
}

.webform-type-processed-text ul[type="disc"] {
  margin: 1em 0;
  padding-left: 1em;
  list-style: disc;
}

@media screen and (min-width: 960px) {
  .webform-type-processed-text {
    max-width: var(--webform-max-width);
    margin: auto;
  }
}

/* ========================================== */
/* Description */

form[class*="webform-"] input + .description {
  color: var(--webform-grey);
}

/* ========================================== */
/* Composite wrapper/group */

div[class*="-webform-custom-composite"] {
  display: flex;
  flex-direction: column;
  margin: 2em auto;
  gap: 0.15em;
}

@media screen and (min-width: 960px) {
  div[class*="-webform-custom-composite"] {
    max-width: var(--webform-max-width);
  }
}

/* ========================================== */
/* Table */

.webform-multiple-table table {
  width: 100%;
}

.webform-multiple-table tbody tr {
  border: 1px solid var(--webform-black);
}

.webform-multiple-table tbody tr > td {
  padding: 1em;
}

/* Table add row */
.webform-multiple-table td.webform-multiple-table--operations input {
  opacity: 1;
}

/* Table/Composite final button - multiple add */
.webform-multiple-add {
  margin-top: 0.5em !important;
}

/* ========================================== */
/* Text Input */
/* Email Input */
/* Textarea Input */
/* Date Input */

.webform-type-textfield,
.webform-type-email,
.webform-type-textarea,
.webform-type-date {
  display: flex;
  flex-direction: column;
  margin-top: 1em !important;
  gap: 0.15em;
}

.webform-type-textfield input[type="text"],
.webform-type-email input[type="email"],
.webform-type-textarea textarea,
.webform-type-date input[type="date"] {
  width: 100%;
  padding: 0.25em 0.5em;
  border: 1px solid var(--webform-black);
}

@media screen and (min-width: 960px) {
  .webform-type-textfield,
  .webform-type-email,
  .webform-type-textarea,
  .webform-type-date {
    max-width: var(--webform-max-width);
    margin: auto;
  }
}

/* ========================================== */
/* Checkbox Input */

.webform-type-checkbox {
  display: flex;
  flex-direction: row;
  align-items: first baseline;
  margin-top: 1em !important;
  padding-left: 1em;
  gap: 0.5em;
}

.webform-type-checkbox input[type="checkbox"] {
  cursor: pointer;
}

@media screen and (min-width: 960px) {
  .webform-type-checkbox {
    max-width: var(--webform-max-width);
    padding-left: 2em;
    margin: auto;
  }
}

/* ========================================== */
/* Radio Input */

fieldset[class*="radios--wrapper"] {
  margin-bottom: 2em !important;
}

fieldset[class*="radios--wrapper"] legend {
  margin-bottom: 0.15em;
}

div[class*="webform-radios"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}

@media screen and (min-width: 960px) {
  fieldset[class*="radios--wrapper"] {
    max-width: var(--webform-max-width);
    margin: auto;
  }
}

/* Radio Button */
.webform-type-radio {
  display: block;
  position: relative;
}

.webform-type-radio input[type="radio"] {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.webform-type-radio input[type="radio"]:focus-visible {
  outline: none;
}

.webform-type-radio input[type="radio"] + label {
  display: block;
  min-width: 8ch;
  padding: 0.5em 1.5em;
  background-color: white;
  color: var(--webform-black);
  text-align: center;
  cursor: pointer;
}

.webform-type-radio input[type="radio"]:checked + label {
  background-color: var(--webform-black);
  color: white;
}

.webform-type-radio input[type="radio"]:focus-visible + label {
  outline: auto;
}

/* Disabled Radio Button */
.webform-type-radio.form-disabled {
  cursor: auto;
  opacity: 0.25;
  pointer-events: none;
}

.webform-type-radio.form-disabled input[type="radio"] + label {
  background-color: var(--webform-black);
  color: var(--webform-white);
}

/* ========================================== */
/* File Input */
/* Image Input */

.webform-type-managed-file,
.webform-type-webform-image-file {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.webform-type-managed-file input[type="file"],
.webform-type-webform-image-file input[type="file"]  {
  display: block;
  min-width: 8ch;
  /* padding: 0.5em 1.5em; */
  /* border: 1px solid var(--webform-black); */
  background-color: var(--webform-white);
  color: var(--webform-black);
  text-align: center;
  cursor: pointer;
}

/* input wrapper */
.webform-type-managed-file .form-managed-file,
.webform-type-webform-image-file .form-managed-file {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.15em;
}

.webform-type-managed-file .file-link-wrapper,
.webform-type-webform-image-file .file-link-wrapper {
  display: block;
  width: max-content;
  min-width: 8ch;
  padding: 0.5em 1.5em;
  border: 1px solid var(--webform-black);
  background-color: var(--webform-black);
  color: var(--webform-white);
  cursor: pointer;
}

/* Upload File Button */
/* Remove File Button */
.webform-type-managed-file input[type="submit"][name="portfolio_upload_button"],
.webform-type-managed-file input[type="submit"][name="portfolio_remove_button"],
.webform-type-webform-image-file input[type="submit"][name="portfolio_upload_button"],
.webform-type-webform-image-file input[type="submit"][name="portfolio_remove_button"] {
  display: block;
  min-width: 8ch;
  padding: 0.5em 1.5em;
  border: 1px solid var(--webform-black);
  background-color: transparent;
  color: var(--webform-black);
  cursor: pointer;
}

.webform-type-managed-file input[type="submit"][name="portfolio_upload_button"],
.webform-type-webform-image-file input[type="submit"][name="portfolio_upload_button"] {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* File Description */
.webform-type-managed-file div.description,
.webform-type-webform-image-file div.description {
  margin-top: 0.25em;
  color: var(--webform-grey);
  font-size: 12px;
  line-height: 1.15;
}

@media screen and (min-width: 960px) {
  .webform-type-managed-file,
  .webform-type-webform-image-file {
    max-width: var(--webform-max-width);
    margin: auto;
  }
}

/* ========================================== */
/* Action Input */

form[class*="webform-"] .form-actions {
  display: flex;
  justify-content: flex-start;
  margin: 2em auto;
  gap: 1em;
}

@media screen and (min-width: 960px) {
  form[class*="webform-"] .form-actions {
    max-width: var(--webform-max-width);
  }
}

/* Prev Form Page */
/* Next Form Page */
/* Submit Button */
.webform-button--previous,
.webform-button--next,
.webform-button--submit {
  max-width: max-content;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  background-color: rgba(0, 0, 0, 0.01);
  color: currentColor;
  cursor: pointer;
}

/* Hover */
@media screen and (hover:hover) {
  .webform-button--previous:hover,
  .webform-button--next:hover,
  .webform-button--submit:hover {
    border-color:  var(--webform-black);
    background-color:  var(--webform-black);
    color: var(--webform-white);
  }
}

/* ========================================== */
/* Webform Confirmation */

.webform-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1em;
}

.webform-confirmation__message {
  text-align: center;
}

@media screen and (min-width: 960px) {
  .webform-confirmation {
    max-width: var(--webform-max-width);
    margin: auto;
  }
}

.webform-confirmation__back {
  margin-bottom: 2em;
}

/* Back Button */
.webform-confirmation__back > a {
  max-width: max-content;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  background-color: rgba(0, 0, 0, 0.01);
  color: currentColor;
  cursor: pointer;
}

/* Hover */
@media screen and (hover:hover) {
  .webform-confirmation__back > a:hover {
    border-color:  var(--webform-black);
    background-color:  var(--webform-black);
    color: var(--webform-white);
  }
}