:root {
  --color-primary: #003677;
  --color-secondary: #ccd7e4;
  --color-accent: #ff0000;
  --color-action: #d9333f;
  --color-label-require: #cc0000;
  --color-label-option: #e5e5e5;
}

.mailform {
  margin: 3em 0;
}

/* layout */ 

.mailform .columns {
  padding: 20px 0;
}

.mailform .columns .column.field-name {
  margin-bottom: 5px;
}

@media screen and (min-width: 768px), print {
  .mailform .columns {
    display: flex;
    gap: 20px;
    padding: 0;
  }
  .mailform .columns .column {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 10px 0;
  }
  .mailform .columns .column.field-name {
    flex: none;
    width: 25%;
    margin-bottom: 0;
  }
  .mailform:not(.confirm) .columns .column.field-name {
    padding-top: 17px;
  }
}

.mailform .form-group {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.mailform .form-group:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.mailform .field-name label {
  font-weight: bold;
}

.mailform .field-name label .required,
.mailform .field-name label .option {
  margin-left: 0.5em;
  padding: 2px 4px;
  border-radius: 2px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: normal;
}
.mailform .field-name label .required {
  background-color: var(--color-label-require);
}
.mailform .field-name label .option {
  background-color: var(--color-label-option);
  color: #333333;
}

/* action */

.mailform .form-action {
  margin-top: 2em;
  text-align: center;
}

/* button */

a.button,
.button {
  display: inline-block;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.26);
  background-color: #fcfcfc;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075);
  font-size: 1rem;
  transition: ease-in-out .15s, box-shadow ease-in-out .15s;
}
.button.is-primary {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: #ffffff;
}
.button:hover {
  opacity: 0.7;
}

/* form element */

.mailform .form-control {
  width: 100%;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.26);
  background-color: #fcfcfc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-size: 1rem;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.mailform .form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.mailform .form-control + p {
  margin: 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.875rem;
}

.mailform .error .form-control {
  border: 1px solid #e59595;
  background: #fff5f5;
}

.mailform .form-control + .error-item {
  display: block;
  color: #e50000;
}

.mailform textarea.form-control {
  height: 12em;
}

.mailform .form-multi-fields-block {
  display: flex;
  gap: 1em;
}

.mailform .form-multi-fields-block > label {
  display: flex;
  align-items: center;
  gap: .25em;
  font-weight: normal;
}

/* field size */

.mailform .form-control.is-small {
  width: 50%;
}

.mailform .form-control.is-medium {
  width: 75%;
}

.mailform .form-control.is-large,
.mailform .form-control.is-full {
  width: 100%;
}

@media screen and (min-width: 768px), print {
  .mailform .form-control.is-small {
    width: 25%;
  }
  .mailform .form-control.is-medium {
    width: 50%;
  }
  .mailform .form-control.is-large {
    width: 75%;
  }
  .mailform .form-control.is-full {
    width: 100%;
  }
}

.mailform .form-content-copy tr {
  border-top: 1px solid rgba(51, 51, 51, 0.26);
  border-bottom: 1px solid rgba(51, 51, 51, 0.26);
}

.mailform .form-content-copy td {
  display: block;
  padding: 5px;
}

.mailform .form-content-copy td.field-name {
  background-color: #fafafa;
  font-weight: bold;
}

.mailform .form-content-copy td.field-content {
  padding-bottom: 20px;
}

.mailform .form-content-copy td .tbl-form-paragraph {
  margin: 0;
}

@media screen and (min-width: 768px), print {
  .mailform .form-content-copy td {
    display: table-cell;
    padding: 10px;
  }
  .mailform .form-content-copy td.field-name {
    white-space: nowrap;
  }
  .mailform .form-content-copy td.field-content {
    width: 100%;
    padding-bottom: 10px;
  }
}

.sect-form-buttons {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  padding: 1em 0;
  background: #fafafa;
  border-top: 1px solid #ddd;
}