/**
 * @file
 * CSS for form components.
 */




/**
 * ===== FORM =====
 */
button,
form,
fieldset,
input,
legend,
option,
select,
textarea {
  /*
  font-family: "IBM Plex Sans", sans-serif;
  */
  font-family: "FreightSans", sans-serif;
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.5;
}




/**
 * ===== FORM =====
 */
form {
  /*
  background-color: var(--site--body--back-color--02);
  border: 1px solid var(--site--form--border-color--01);
  */
  border: 2px dashed #CCCCCC;
  margin: 1rem auto;
  max-width: 700px;
  padding: 0.25rem 1rem;
}




/**
 * ===== FORM =====
 */
details {}
summary {
  display: list-item;
}




/**
 * ===== FIELDSET =====
 */
fieldset {}
legend {}




/**
 * ===== LABEL =====
 */
label {
  display: block;
  font-weight: bold;
  padding: 0.5rem 0;
}




/**
 * ===== INPUT =====
 */
input {
  background-color: var(--site--form--back-color--01);
  border: 1px solid var(--site--form--border-color--01);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 13px;
}
input:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--border-color--02);
}




/**
 * ===== SELECT =====
 */
select {
  background-color: var(--site--form--back-color--01);
  border: 2px solid var(--site--form--border-color--01);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 13px;
}
select:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--border-color--02);
}




/**
 * ===== TEXTAREA =====
 */
textarea {
  background-color: var(--site--form--back-color--01);
  border: 2px solid var(--site--form--border-color--01);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 13px;
  width: 100%;
}
textarea:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--border-color--02);
}




/**
 * ===== VIEWS =====
 */
.views-exposed-form {
  border: 1px dashed #CCCCCC;
  border-radius: 8px;
}

.views-exposed-form .clearfix::after {
  display: none;
}

/**/
.views-exposed-form .form--inline {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: 1.0rem;
  justify-content: center;
  padding: 1.0rem;
}

/**/
.views-exposed-form .form--inline > .form-actions {
  float: none;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1.0rem;
}

/**/
.views-exposed-form .form--inline .form-item {
  float: none;
}

/**/
.views-exposed-form .form--inline > .form-item {
  float: none;  
  margin: 0;
}
.views-exposed-form .form--inline > .form-item label {
  font-weight: 400;
}
.views-exposed-form .form--inline > .form-item input {}

/**/
.views-exposed-form .form--inline > .form-type-textfield {}
.views-exposed-form .form--inline > .form-type-textfield label {}
.views-exposed-form .form--inline > .form-type-textfield input {}

/**/
.views-exposed-form .form--inline .form-type-textfield {
  align-items: center;
  display: grid;
  gap: 0.5rem;
}
.views-exposed-form .form--inline .form-type-textfield > label {
  /*
  color: var(--site--form--text-color--01);
  height: fit-content;
  margin-left: calc(24px + 0.5rem);
  padding: 0.25rem 0.5rem 0;
  transition-duration: .3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  width: -moz-fit-content;
  width: fit-content;
  z-index: 10;
  */
  /**/
  grid-area: 1 / 1 / auto / auto;
}
.views-exposed-form .form--inline .form-type-textfield > input {
  background-image: url(../../img/google/material-symbols/search-default.svg);
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 0.25rem 0.5rem 0.25rem calc(24px + 0.5rem);
  padding: 0.5rem 1.0rem 0.5rem calc(24px + 0.75rem);
  grid-area: 2 / 1 / auto / auto;
}
.views-exposed-form .form--inline .form-type-textfield > input:focus {
  border-color: var(--site--main--color--01-01);
}


/**/
.views-exposed-form .form--inline > details {
  border: none;
  float: none;
  /*margin: 0 0 1rem 0;*/
}
.views-exposed-form > details summary {
  /*
  background-image: url(../../img/google/material-symbols/add-default.svg);
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 0.25rem 0.5rem 0.25rem calc(24px + 0.25rem);
  */
  padding: 0.5rem 1.0rem 0.5rem calc(24px + 0.75rem);
  /**/
  background-color: var(--site--form--back-color--01);
  border: 0px solid var(--site--form--border-color--01);
  border-width: 1px;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--site--form--text-color--01);
  font-size: 1.0rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  /*
  margin: 0 auto;
  */
  text-align: left;
  text-transform: none;
  max-width: 100%;
  width: fit-content;
}
/**/
.views-exposed-form .form--inline > details > .details-wrapper {
  padding: 1.0rem;
  padding: 1.0rem 1rem 1rem 0.75rem;
}
/**/
.views-exposed-form .form--inline > details > .details-wrapper .form-item {
  margin: 0;
}
.views-exposed-form .form--inline > details > .details-wrapper .form-item label {
  padding: 0.25rem 0;
}
.views-exposed-form .form--inline > details > .details-wrapper .form-item input {}

/**/
.views-exposed-form .form--inline > details > .details-wrapper > .form-radios > .form-radios {
  display: flex;
  flex-flow: column wrap;
  gap: 0.15rem;
}

/**/
.views-exposed-form .form--inline > details > .details-wrapper > .form-checkboxes > .form-checkboxes > div {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
}

/**/
.views-exposed-form .form--inline select.form-select {
  /*
  background-image: url(../../img/google/material-symbols/add-default.svg);
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 0.25rem 0.5rem 0.25rem calc(24px + 0.25rem);
  padding: 0.5rem 1.0rem 0.5rem calc(24px + 0.75rem);
  */
  padding: 0.5rem 1.0rem 0.5rem 1.0rem;
  /**/
  background-color: var(--site--form--back-color--01);
  border: 0px solid var(--site--form--border-color--01);
  border-width: 2px;
  border-radius: 9999px;
  box-sizing: border-box;
  color: var(--site--form--text-color--01);
}


/* @media */
@media only screen and (min-width: 768px) {

  /**/
  .views-exposed-form .form--inline {}

  /**/
  .views-exposed-form .form--inline > .form-item {}

  /**/
  .views-exposed-form .form--inline .form-type-textfield > label {
    grid-area: 1 / 1 / auto / auto;
  }
  .views-exposed-form .form--inline .form-type-textfield > input {
    grid-area: 1 / 2 / auto / auto;
  }

  /**/
  .views-exposed-form .form--inline > .item-list {}

  /**/
  .views-exposed-form .form--inline > details {}

  /**/
  .views-exposed-form .form--inline > .form-wrapper {}

  /**/
  .views-exposed-form .form--inline > .form-actions {}

}