/**
 * form.css
 * - Homepage search block
 */

/**
 * Form: homepage search
 */ 
#block-taxa-search-block {
  width: 100%;
  z-index: 1;
}

.banner #taxa-search-wrapper {
  padding: 0 2rem;
  margin: 0 auto;
  max-width: var(--layout-width);

  & .description {
    color: white;
  }
}

/**
 * DataTables.js
 */
div.dt-container {

  & .dt-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-bottom: 1rem;

    & .dt-info {
      margin-right: auto;
      font-size: 0.9rem;
      min-width: 225px;
      width: 100%;

      @media (min-width: 768px) {
        width: fit-content;
      }
    }

    & .export-list {
      margin-left: auto;
    }
  }

  & .dt-search {
    position: relative;
    flex: 1; /* Expand to fill the space the other children aren't using */
    min-width: 300px;

    & label {
      display: none;
    }

    & input {
      font-size: 1.25rem;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 6px;
      width: 100%;

      &::placeholder {
        color: var(--border-grey);
        font-size: 0.9rem;
      }
    }

    /*&::after {
      content: '\e8b6';
      font-family: 'Material Symbols Outlined';
      font-size: 1.3rem;
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
    }*/
  }
}

.dt-search input[type="search"]::-webkit-search-cancel-button {
  /*margin-right: 2rem;*/
  filter: brightness(0);
}

.webform-submission-form {
  .form-item {
    margin-bottom: 1rem;
  }
  input, textarea, select, button {
    font-family: var(--font-body);
  }
  & label {
    font-size: 0.9rem;
    font-weight: normal;
    color: grey;
    text-align: left;
    text-transform: uppercase;
  }
  & input:not(.button),
  & textarea {
    font-size: 1.25rem;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
  }
  & input.button {
    font-size: 1rem;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.65rem 1.75rem;
    width: fit-content;
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main-green);
    color: white;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}