input[type="time"] {
  border: var(--input-border);
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  background-color: var(--input-bg-color);
  font-family: var(--text-input-font-family);
  font-size: var(--font-size-medium);
}

.form-required::after {
  display: inline-block;
  margin-right: 0.15em;
  margin-left: 0.15em;
}

.form-item,
.facet-item,
.form-item-webform-terms-of-service {
  position: relative;
  margin-bottom: var(--spacing-larger);
}

fieldset,
.fieldgroup {
  padding: var(--spacing);
  border: var(--border);
  border-color: var(--fieldset-border-color);
}

legend {
  padding: 0 var(--spacing);
  font-weight: bold;
}

label,
.webform-element--title-inline > label {
  display: block;
  margin-bottom: 0;
}

.webform-submission-form label {
  font-weight: bold;
}

input[disabled] {
  opacity: 0.5;
}

.js input.form-autocomplete {
  background-position: calc(100% - 1rem) center;
}

input[type="date"], 
input[type="datetime-local"], 
input[type="email"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="url"], 
textarea, 
select, 
.select2-container--default .select2-search--dropdown .select2-search__field {
  width: 100%;
}
@media screen and (min-width: 48rem) {
  input[type="date"], 
  input[type="datetime-local"], 
  input[type="email"], 
  input[type="number"], 
  input[type="password"], 
  input[type="search"], 
  input[type="tel"], 
  input[type="text"], 
  input[type="url"], 
  textarea, 
  select, 
  .select2-container--default .select2-search--dropdown .select2-search__field {
    width: auto;
  }
}


input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
textarea:focus {
  box-shadow: var(--color-yellow) 0 0 0 var(--border-width-large);
  outline: none;
}

.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  margin: 0.5rem;
}

.select2-results__option {
  padding: 0.5rem 1rem;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 13px;
}

/* Buttons */
input[type="submit"] {
  padding:
    var(--button-padding-vertical) var(--button-padding-horizontal)
    var(--button-padding-vertical) var(--button-padding-horizontal);
  cursor: pointer;
  background-color: var(--color-accent);
  color: var(--color-white) !important;
  font-weight: bold;
  font-size: 19px;
}

input[type="submit"][value="Apply"],
input[type="submit"][value="Log in"],
  input[type="submit"][value="Submit"] {
  background-color: var(--color-green);
  color: var(--color-white) !important;
}

input[type="submit"]:focus,
input[type="submit"]:hover {
  text-decoration: underline;
  background-color: var(--color-info);
  color: var(--color-accessible);
}
input[type="submit"][value="Search for my organisation"],
button {
  margin-bottom: var(--spacing);
}

/*
  Checkboxes

  This checkboxes styling is amended CSS from the gov.uk design system:
    - https://design-system.service.gov.uk/components/checkboxes/

  We are adding a .form-checkboxes class around each of these here to make sure
  this only affects checkboxes created by Drupal. If we don't, the position absolute
  can have very unwanted effects.

  If you need to create custom checkboxes, make sure you have the same class
  wrapping them.
*/

.form-checkboxes input[type="checkbox"],
.facet-item input[type="checkbox"],
.form-item-webform-terms-of-service input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.form-checkboxes input[type="checkbox"] + label,
.facet-item input[type="checkbox"] + label,
.form-item-webform-terms-of-service input[type="checkbox"] + label {
  display: inline-block;
  margin-left: 40px;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation;
}

.form-checkboxes input[type="checkbox"] + label::before,
.facet-item input[type="checkbox"] + label::before,
.form-item-webform-terms-of-service input[type="checkbox"] + label::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  content: "";
  border: 2px solid var(--checkbox-select-outline-color);
  background: transparent;
}
.form-checkboxes input[type="checkbox"] + label::after,
.facet-item input[type="checkbox"] + label::after,
.form-item-webform-terms-of-service input[type="checkbox"] + label::after {
  position: absolute;
  top: 11px;
  left: 9px;
  box-sizing: border-box;
  width: 23px;
  height: 12px;
  content: "";
  transform: rotate(-45deg);
  opacity: 0;
  border: solid;
  border-width: 0 0 5px 5px;
  border-top-color: transparent;
  background: transparent;
}

.form-checkboxes input[type="checkbox"]:focus + label:before,
.facet-item input[type="checkbox"]:focus + label:before,
.form-item-webform-terms-of-service input[type="checkbox"]:focus + label:before {
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--checkbox-select-focus-color);
}

.form-checkboxes input[type="checkbox"]:hover + label,
.facet-item input[type="checkbox"]:hover + label,
.form-item-webform-terms-of-service input[type="checkbox"]:hover + label,
.form-checkboxes input[type="checkbox"]:focus + label,
.facet-item input[type="checkbox"]:focus + label,
.form-item-webform-terms-of-service input[type="checkbox"]:focus + label {
  text-decoration: underline;
}

.form-checkboxes input[type="checkbox"]:checked + label:after,
.facet-item input[type="checkbox"]:checked + label:after,
.form-item-webform-terms-of-service input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

/* Radio Buttons
  This radio styling is amended CSS from the gov.uk design system:
  - https://design-system.service.gov.uk/components/radios/

  We are adding a .form-radios class around each of these here to make sure
  this only affects radios created by Drupal. If we don't, the position absolute
  can have very unwanted effects.

  If you need to create custom radios, make sure you have the same class
  wrapping them.
*/
.webform-type-webform-radios-other .form-item,
.webform-type-radios .form-item,
.webform-type-webform-radios-other .form-item-radios-other--radios {
  position: relative;
  display: block;
  clear: left;
  min-height: 40px;
  margin-bottom: 10px;
  padding-left: 40px;
}

.webform-type-webform-radios-other .form-item input,
.webform-type-radios .form-item input,
.webform-type-webform-radios-other .form-item-radios-other--radios input {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.webform-type-webform-radios-other  .form-item label,
.webform-type-radios .form-item label,
.webform-type-webform-radios-other .form-item-radios-other--radios label {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation;
}

.webform-likert-table .form-item [type="radio"] + label::before,
.webform-type-webform-radios-other .form-item [type="radio"] + label::before,
.webform-type-radios .form-item [type="radio"] + label::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  content: "";
  border: 2px solid var(--radio-select-outline-color);
  border-radius: 50%;
  background: transparent;
}

.webform-likert-table .form-item [type="radio"] + label::after,
.webform-type-webform-radios-other .form-item [type="radio"] + label::after,
.webform-type-radios .form-item [type="radio"] + label::after {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  content: "";
  opacity: 0;
  border: 10px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.webform-likert-table .form-item [type="radio"]:focus + label::before,
.webform-type-webform-radios-other .form-item [type="radio"]:focus + label::before,
.webform-type-radios .form-item [type="radio"]:focus + label::before {
  box-shadow: 0 0 0 4px var(--radio-select-focus-color);
  border-width: 4px;
}

.webform-likert-table .form-item input:checked + label::after,
.webform-type-webform-radios-other .form-item input:checked + label::after,
.webform-type-radios .form-item input:checked + label::after {
  opacity: 1;
}

.webform-type-webform-radios-other .form-item:last-child,
.webform-type-webform-radios-other.form-item:last-of-type,
.webform-type-radios .form-item:last-child,
.webform-type-radios .form-item:last-of-type {
  margin-bottom: 0;
}

.js-form-type-radio  {
  position: relative;
  display: block;
  clear: left;
  min-height: 40px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.js-form-type-radio input {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.js-form-type-radio label  {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation;
}


/* Description Field - needs to come before the file upload description items */
.form-item .description {
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: var(--font-size-small-medium);
}
.form-item input + .description {
  border-top: 0;
}
.form-item .description + input {
  border-top: var(--border-width-medium) solid var(--search-border-color);
}

.form-item .description .webform-element-more--content {
  padding: 1rem;
}

.form-item .description + input + label{
  position: relative;
}

.form-item .description + input + label::before{
  left: -40px;
}

/*
  This is just in case we have a description field in a fieldset that contains
  checkboxes or radios. It stops the first item from hitting the bottom of the
  description.
*/
.fieldset-wrapper > .field-prefix + .form-checkboxes,
.fieldset-wrapper > .field-prefix + .form-item-radios {
  margin-top: var(--spacing);
}

/* File Upload */
input[type="file"],
.form-item-managed-file-button .webform-file-button {
  display: inline-block;
  margin: 0;
  padding: 1rem;
  cursor: pointer;
  border: var(--file-upload-border);
  border-color: var(--file-upload-border-color);
  border-left-width: var(--file-upload-border-left-size);
}
input[type="file"]:focus,
input[type="file"]:hover,
.form-item-managed-file-button .webform-file-button:focus,
.form-item-managed-file-button .webform-file-button:focus,
.form-managed-file:focus-within .webform-file-button,
.form-managed-file .webform-file-button:hover {
  text-decoration: underline;
  color: var(--file-upload-text-hover-color);
  background-color: var(--file-upload-bg-hover-color);
  font-weight: bold; /* Because text-decoration doesn't work on input[type]"file"] */
}
.form-item-managed-file .description,
.form-item-managed-file-multiple .description,
.form-item-managed-file-button .description {
  position: relative;
  top: -1px;
  width: auto;
  max-width: 768px;
  border: var(--file-upload-border);
  border-color: var(--file-upload-border-color);
  border-left-width: var(--file-upload-border-left-size);
}
.form-item-managed-file .description br,
.form-item-managed-file-multiple .description br,
.form-item-managed-file-button .description br {
  margin-bottom: var(--spacing);
}

/* found in Directory pages */
.lbhf-directory-field__label {
  font-weight: bold;
}

.lbhf-directory-field {
  margin-bottom: 1rem;
}

.lbhf-directory-field > * {
  margin-left: 0;
}

.lbhf-directory-fieldset {
  border-top: 1px solid var(--color-grey-lighter);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.lbhf-directory-fieldset__venue {
  padding: 1rem;
  background-color: var(--color-grey-lightest);
}

.lbhf-directory-fieldset__venue .field__item {
  margin-bottom: 1rem;
}

.localgov-directories-venue .field__label,
.localgov-directories-page fieldset .field__label {
  font-weight: bold;
}
@media screen and (min-width: 60rem) {
  .localgov-directories-page .lbhf-directory-fieldset .lbhf-directory-field__label {
    width: calc(20% - var(--grid-column-spacing));
  }
  .lbhf-directory-fieldset .field__label {
    width: calc(20% - var(--grid-column-spacing));
  }
}

.field--name-extra-field-suggest-an-edit a,
.field--name-field-suggest-an-edit a {
  display: inline-block;
  position: relative;
  padding: 0.5rem var(--spacing-larger);
  color: var(--color-white);
  background-color: var(--color-accent);
  margin-top: var(--spacing-small);
}

.field--name-extra-field-suggest-an-edit a:hover,
.field--name-field-suggest-an-edit a:hover {
  background-color: var(--color-accent-darker);
}

.webform-options-display-two-columns div.form-item,
.webform-options-display-three-columns div.form-item {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
  }

.webform-options-display-two-columns div.form-item:nth-of-type(1),
.webform-options-display-three-columns div.form-item:nth-of-type(1) {
  margin-top: 0;
  margin-bottom: 0;
}


.webform-confirmation {
  max-width: var(--width-restricted-width-section);
}

/* .webform-submission-form .form-required:after {
  display: inline-block;
  padding: 0 var(--spacing-smallest);
  content: var(--form-item-required-pseudocontent);
}

.webform-submission-form .form-item label:not(.form-required):after {
  content: var(--form-item-optional-pseudocontent);
} */

.webform-submission-form fieldset:not(.required) legend:after {
  content: var(--form-item-optional-pseudocontent);
}
  
.webform-submission-form fieldset  legend:has(span.visually-hidden)::after {
  content: "";
}

.webform-button--submit {
  margin-bottom: 1rem;
}

legend .description {
  position: absolute;
  font-weight: normal;
}

legend:has(.description) {
  margin-bottom: 1.4rem;
}