/* add your css */
:root {
  /* ---------- Hex Colors ---------- */
  --su__searchboxapp-deepskyblue-light: #1770d4;
  --su__searchboxapp-darkgray: #333;
  --su__searchboxapp-violet: #609;
  --su__searchboxapp-gray: #666;
  --su__searchboxapp-lightblue-alt: #92c4f3;
  --su__searchboxapp-paleblue-cool: #d9ebff;
  --su__searchboxapp-lightgray-14: #f2f2f2;
  --su__searchboxapp-white: #fff;
  --su__searchboxapp-black-rgba: 0, 0, 0;
  --su__searchboxapp-jetgray-rgba: 102, 102, 102;
  --su__searchboxapp-gray-44: rgba(125, 112, 112, 0.439);
}
.su_autocomplete-block .su__form-block .su__input-search {
    background: white}
.su__search_section {
    background-color:unset !important;
}

.su__app{
    background-color: unset !important;
} 
#search-box-autocomplete{
    /* padding-left: 46px !important; */
    padding-right: 40px !important;
    border: 1px solid var(--config--main-border-base-color) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1) ;
    font-family: var(--config--main-font-base-stack) !important;
    height: 56px;
    border-radius: 40px;
    width: 100%;
}
.su_autocomplete-block .su__input-close {
    right: 58px;
    top: 15px !important;}
    .su_autocomplete-block .su__form-block .su__input-search {
    background: white}


.su__radius-2.su__d-flex {
  display: flex;
  align-items: center;
}

.su_autocomplete-block .su__btn.su__search_btn{
  position:relative;
  background: #DA291C;
}


.SU-search-granularity-wrapper {
  display: flex;
  align-items: center;
}


.SU-search-form-granularity {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 13px !important;
    background: #DA291C !important;
    color: white;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-align-last: center !important; 
    appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}
.su__btn.su__search_btn{
  position:relative !important;
  background:#DA291C !important;
  padding: 11px !important;
  border-radius: 0 30px 30px 0;
}
.su__btn.su__search_btn svg path{
  fill: white
}

.su__input-search{
  padding: 10px !important;
}
.SU-search-form-granularity option{
  background: white;
  color: black;
  text-align: left;
}
.SU-search-form-granularity option:hover{
  background:#DA291C ;
  color: white
}

.su__input-search {
  flex: 1; 
  min-width: 0; 
}


.SU-search-form-granularity {
  border-radius: 30px 0 0 30px !important;
}

#search-box-autocomplete {
  border-radius: 0 !important;
}

/* Prevent wrapping */
.su__form-block .su__radius-2 {
  flex-wrap: nowrap;
}

@media (max-width: 567px) {
  .su__form-block .su__radius-2 {
    flex-wrap: wrap;
  }

  .SU-search-granularity-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .SU-search-granularity-wrapper select{
    width: 100% !important;
    margin-bottom: 10px !important;
    border-radius: 0px !important
  }

  #search-box-autocomplete {
    width: calc(100% - 56px);
    border-radius: 0px;
  }

  .su__btn.su__search_btn {
    width: 56px;
    border-radius: 0;
  }
  .su__input-search {
    flex: 1;
  }

}