@media screen {

  /* FORM
  --------------------------- */
  .section-form .inner {
    --inner-padding-bottom: 3.75rem;
    --inner-padding-top: 3.75rem;
    --form-field-margin-top: .9375rem;
  }

  fieldset + button {
    margin-top: 2rem;
  }

  /* Field Wrapper */
  .form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--form-field-margin-bottom, 0);
    margin-left: var(--form-field-margin-left, 0);
    margin-right: var(--form-field-margin-right, 0);
    margin-top: var(--form-field-margin-top);
    position: var(--form-field-position, relative);
    width: var(--form-field-width);
  }


  /* Label */
  .form-field label {
    font-size: .875rem;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: scale(1) translateY(-50%);
    transition: transform .1s;
  }
  .form-field textarea + label {
    top: 10px;
    transform: scale(1) translate(0,0);
  }

  .form-field input:not([type="checkbox"]):not([type="radio"]):focus-visible + label,
  .form-field.field-dirty label,
  textarea:focus-visible + label {
    background: linear-gradient(#fff, #ebebeb);
    border-radius: 3px 3px 0 0;
    padding: 0 3px;
    transform: scale(.85) translate(-6px,-37px);
  }
  textarea:focus-visible + label {
    transform: scale(.85) translate(-6px,-25px);
  }
  /* Detached Labels */
  .form-field.detach-label > :first-child {
    order: 2;
  }
  .form-field.detach-label label {
    background: none !important;
    font-family: var(--theme-font-bold);
    font-weight: 500;
    left: auto;
    order: 1;
    margin-bottom: 10px;
    padding: 0 !important;
    position: relative;
    text-transform: uppercase;
    top: auto;
    transform: none !important;
  }
  .form-field.detach-label label[for] {
    cursor: pointer;
  }


  /* Input / Textarea */
  textarea {
    --form-field-padding: 5px 0 0 10px;
    --form-field-min-height: 150px;
    resize: vertical;
  }
  .form-field input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    background-color: var(--theme-gray-lighter);
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: var(--theme-font-regular);
    font-size: 1rem;
    line-height: var(--theme-line-height);
    min-height: var(--form-field-min-height, 40px);
    outline: none;
    padding: var(--form-field-padding, 0 0 0 10px);
    width: 100%;
  }
  .form-field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  textarea:focus-visible {
    background-color: #ebebeb;
    outline: 1px solid var(--theme-btn-color);
  }

  /* Select */
  .form-select {
    position: relative;
  }
  .form-select select {
    appearance: none;
    font-size: .875rem;
  }
  .form-select select:focus-visible {
    background-color: #ebebeb;
    outline: 1px solid var(--theme-btn-color);
  }
  .form-select label {
    display: none;
  }
  .form-select .form-field.detach-label label {
    cursor: auto;
    display: block;
  }
  .form-select svg {
    height: 6px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
  }
  .form-select .form-field.detach-label + svg {
    transform: translateY(calc(-50% + 18px));
  }

  /* Search Bar (Input + Button) */
  .form-search {
    margin-top: var(--form-field-margin-top);
    position: relative;
    width: 100%;
  }
  .form-search .form-field,
  .form-search .form-select {
    flex: 1 0 auto;
    margin: 0;
  }
  .form-search input {
    --form-field-padding: 0 2rem 0 10px;
  }
  .form-search button,
  .form-search .btn {
    margin-top: 10px;
  }
  .form-search.detach-label button,
  .form-search.detach-label .btn {
    margin-top: 33px;
  }
  .form-search .icon-search {
    height: 15px;
    pointer-events: none;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
  }
  @media screen and (min-width: 500px) {
    .form-search {
      align-items: center;
      display: flex;
      grid-column-gap: var(--form-field-margin-top, 20px);
    }
    .form-search button,
    .form-search .btn {
      margin-top: 0;
    }
  }


}


/* PRINT STYLES
--------------------------- */
/* @media print {} */
