CSS for Search Widget

CSS should work on all sites that use those templates:

,

#odysseus #OVExploreContainer {
  /* Default styles */
  --primary-color: #{$primary} !important;
  --secondary-color: #{$secondary} !important;
  --text-color: #{$secondary} !important;
  --grid-col: 25% !important;
  --grid-col-num: 25 !important;

  /* Search box BG colour */
  --ody-search-bg: #f5f5f5;
  --ody-search-pad: 1rem;

  /* Button styles */
  --ody-button-bg: var(--primary-color);
  --ody-button-border: var(--primary-color);
  --ody-button-text: #fff;

  /* Button hover styles */
  --ody-button-hover-bg: var(--secondary-color);
  --ody-button-hover-border: var(--secondary-color);
  --ody-button-hover-text: #fff;

  /* Form Elements */
  --ody-form-bg: #fff;
  --ody-form-bg-hover: #f5f5f5;
  --ody-form-border: var(--text-color);
  --ody-form-text: var(--text-color);
  --ody-form-text-hover: var(--text-color);

  /* Highlighted selections & dropdowns */
  --ody-highlight-bg: var(--text-color);
  --ody-highlight-text: var(--primary-color);
  --ody-highlight-hover-bg: var(--secondary-color);
  --ody-highlight-hover-text: var(--primary-color);

  .od-form-wrapper {
    background: var(--ody-search-bg) !important;
    padding: var(--ody-search-pad) !important;

    .itineraries {
      //display: none; // Uncomment to hide the itineraries row
    }

    .multiselect__element {
      background: var(--ody-form-bg) !important;
      color: var(--ody-form-text) !important;

      .multiselect__option--highlight {
        background-color: var(--ody-form-bg-hover) !important;
        color: var(--ody-form-text-hover) !important;
      }
    }

    .multiselect__tags {
      background: var(--ody-form-bg) !important;
      border-color: var(--ody-form-border) !important;
    }

    .od-input-wrapper input.od-input-box {
      background: var(--ody-form-bg) !important;
      border-color: var(--ody-form-border) !important;
      padding: 12px 10px 12px 30px !important;
    }

    .multiselect__content-wrapper {
      border-color: var(--ody-form-border) !important;
    }
  }

  .od-btn.od-btn-primary,
  .od-tab-form-wrapper .od-form-wrapper .od-button-wrapper.od-search-button .btn-search,
  .od-tab-form-wrapper .od-form-wrapper .od-reset-btn-wrapper .reset {
    background: var(--ody-button-bg) !important;
    border: none !important;
    border-radius: #{$border-radius} !important;
    color: var(--ody-button-text) !important;
    height: 37px !important;
    line-height: 22px !important;
    padding: 7px 10px !important;
    text-transform: uppercase;
    transition: .5s;

    span {
      color: var(--ody-button-text) !important;
    }

    svg {
        fill: var(--ody-button-text) !important;
    }

    &:hover {
      background: var(--ody-button-hover-bg) !important;
      color: var(--ody-button-hover-text) !important;

      span {
        color: var(--ody-button-hover-text) !important;
      }

      svg {
        fill: var(--ody-button-hover-text-text) !important;
      }
    }
  }
}

>

I’ve made it so you can just change the primary, secondary and text colours to change the whole form

You can then edit the other ones to make more precise changes