.support-search-section {
    display: flex;
    background-color: #FFF;
    border: 1px solid #E9EBEE;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
    color: #0d1c3d;
    border-radius: 12px;
    align-items: center;
    margin: 12px 0;
}

.search-title-text h2 {
margin-top:0
}

.search-bar .sda-h3{
  font-size: 14px !important;
  margin:0 !important;
  line-height: 20px !important;
  padding: 12px 12px 4px 12px !important;
}

.search-bar .sda-autocomplete-external-links {
  margin:0 !important
}

.search-bar .quick-link svg , .search-bar .default-kpconfig svg {
    margin-top: 5px;
}

.search-bar .sda-autocomplete-item li.highlighted {
    background-color: #023A71;
    color: white;
}

.search-bar .sda-autocomplete-external-links ul li {
   text-decoration: none !important;
}


.search-bar .sda-autocomplete-external-links ul li a {
   text-decoration: none !important;
}


.search-bar .sda-autocomplete-external-links ul li {
  padding: 12px !important;
  margin: 0 !important;
}

.search-bar .sda-autocomplete-suggestions ul li div {
  padding: 12px !important;
  margin: 0 !important;
}

.search-bar .autocomplete-support .container--ds2 {
    position: absolute !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    top: 35px !important;
    z-index: 1000 !important;
}

.search-bar label {
    margin-bottom: 8px !important;
}

.search-bar #sda-autocomplete ul li a span, #sda-autocomplete ul li div span {
    cursor: pointer;
}

.search-component {
    flex: 0 0 65%;
    max-width: 65%;
    padding: 39px;
}



.search-image {
    flex: 0 0 35%;
    max-width: 35%;
}

.search-image img {
    max-width: 100%;
    height: 220px;
}

.search-title-text h2 {
    margin-bottom: 19px !important;
}

.search-bar .autocomplete-search {
        padding-top: 0;
        padding-bottom: 0;
}


.search-bar .autocomplete-search__top-bar {
  display: flex;
  align-items: stretch;
  width: 100%;

  gap: 8px; /* optional spacing */
}

.search-bar .autocomplete-search__combobox {
  flex: 0 0 84%;
  max-width: 84%;
}

.support-search-section .container--ds2  {
   max-width:82%;
}


 .support-search-section .container--ds2 .autocomplete-search__listbox {
    border: 2px solid #0078B3;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
    background: #ffffff;
    border-radius: 4px;

 }

#search-button-container {
  flex: 0 0 16%;
  max-width: 16%;
  padding-right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-search-section .autocomplete-search .active-input:focus-visible {
  outline:2px solid #0d1c3d !important;
  outline-offset: 6px !important;
}

.search-bar .clear-input-button.hidden {
    display: none;
}

.search-bar .autocomplete-search__input__container {
  display: flex;
  flex: 1;
}

.search-bar .autocomplete-search__input {
  flex: 1;
  width: 100%;
}

.search-bar .autocomplete-support {
  background: none !important;
  padding-top: 8px !important;
}

.search-bar .autocomplete-support form {
   padding-left: 0 !important;
}

.search-bar .clear-input-button {
    position: absolute;
    top: 25%;
    right: 10px;
    width: 24px;
    height: 24px;
    min-width: fit-content;
    border: 0;
    color: #0078b3;
    font-weight: bold;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    padding: 0;
}

.search-bar .clear-input-button img {
    width: 24px;
    height: 24px;
    filter: invert(67%) sepia(100%) saturate(1083%) hue-rotate(175deg) brightness(62%) contrast(137%);
}


#support-search-button {
    background-color: #0074ad;
    color: #f2f8fb;
    margin-left: 0;
    height: 44px;
    font-size: 16px;
    align-items: center;
    /* width: 200px; */
    width: 100% !important;
    text-align: center;
}

#support-search-button:hover {
   text-decoration: underline;
}

@media screen and (max-width: 767px) {
   .search-image {
    display: none;
   }
   .search-component {
    padding: 0 !important;
    margin: 48px 0px;
    flex: 0 0 100%;
    max-width: 100%;
   }

   .support-search-section { 
    background-color: transparent;
    box-shadow: none;
    border: none;
   }

   .support-search-section .autocomplete-support form {
   margin-left: 0 !important;
   }

   #search-button-container {
    padding-right: 20px !important;
    padding-left: 20px !important;
   }

   .support-search-section .autocomplete-search__combobox {
      flex: 0 0 70%;
      max-width: 70%;
    }

    .support-search-section .container--ds2 {
      max-width: 100%;
    }

    #search-button-container {
      flex: 0 0 30%;
      max-width: 30%;
    }

    .search-bar .autocomplete-support .container--ds2 {
      top: 44px !important;
    }



}

@media screen and (min-width: 1024px) and (max-width: 1024px) {
   .search-bar .autocomplete-search__combobox {
      flex: 0 0 88% !important;
      max-width: 88% !important;
    }

    .support-search-section .container--ds2 {
      min-width:86% ;
    }


  #search-button-container {
    flex: 0 0 12% !important;
    max-width: 12% !important;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1280px) {
   #search-button-container {
    flex: 0 0 16% !important;
    max-width: 20% !important;
   }
}


@media screen and (min-width: 540px) and (max-width: 540px) {
   .support-search-section .container--ds2 {
      max-width:100%;
  }

  #support-search-button {
    padding-left: 24px;
    padding-right: 24px;
}

}

@media screen and (min-width: 768px) and (max-width: 768px) {
   #search-button-container {
    padding-right: 0px !important;
    padding-left: 15px !important;
   }

   .search-bar .autocomplete-support .container--ds2 {
        top: 44px !important;
    }
   
   .search-component {
    flex: 0 0 100%;
    max-width: 100%;
   }

  #search-button-container {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding-right: 45px;
    }

  .support-search-section .container--ds2 {
      min-width:82%;
  }

  
}

@media screen and (min-width: 768px) and (max-width: 1151px) {
   .search-image {
    display: none;
   }

   .search-bar .autocomplete-support form {
   margin-left: 0 !important;
   }

   .search-bar .autocomplete-search__combobox {
      flex: 0 0 82%;
      max-width: 82%;
    }

    .support-search-section .container--ds2 {
      max-width:80% ;
    }


    .search-bar .autocomplete-search__top-bar {
      gap: 4px; /* optional spacing */
   }


    #search-button-container {
      flex: 0 0 18%;
      max-width: 18%;
      padding-right: 45px;
    }

   #search-button-container {
    padding-right: 0px !important;
    padding-left: 0px !important;
   }

    .search-component {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 40px 63px;
   }

    .search-bar .autocomplete-support .container--ds2 {
          top: 35px;
    }
}