/* Search widget container styling */
[id^="brokerage-search-widget--"] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    min-height: 470px;
  }
  
  /* Results container styling */
  [id^="brokerage-search-results--"] {
    max-height: 380px;
    overflow-y: auto;
    padding-bottom: 10px;
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-inter: Inter;
    --font-roboto: Roboto;
  
    /* font sizes */
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-5xl: 24px;
    --font-size-lgi: 19px;
  
    /* Colors */
    --color-white: #fff;
    --color-mediumslateblue: #3e68ff;
    --color-black: #000;
    --color-dimgray: #4f4f4f;
    --color-silver: #c4c4c4;
    --color-whitesmoke: #eee;
  
    /* Gaps */
    --gap-53xl-8: 72.8px;
    --gap-17xl: 36px;
    --gap-47xl-4: 66.4px;
    --gap-14xl: 33px;
    --gap-base-3: 16.3px;
    --gap-2xl: 21px;
  
    /* Paddings */
    --padding-116xl: 135px;
    --padding-103xl: 122px;
    --padding-xl: 20px;
    --padding-xs: 12px;
    --padding-mid: 17px;
    --padding-6xs: 7px;
    --padding-12xs: 1px;
    --padding-4xs: 9px;
    --padding-3xs: 10px;
    --padding-42xl: 61px;
  
    /* Border radiuses */
    --br-8xs: 5px;
  }
  
  .search-icon {
    width: 34.1px;
    height: 40px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .search-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5.1px 0px 0px;
  }
  
  .search-placeholder-text {
    border: none;
    outline: none;
    font-family: var(--font-roboto);
    font-size: var(--font-size-5xl);
    background-color: transparent;
    align-self: stretch;
    height: 45px;
    position: relative;
    color: var(--color-dimgray);
    text-align: left;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 198px;
    padding: 0;
  }
  
  .search-filed-line {
    align-self: stretch;
    position: relative;
    border-top: 1px solid var(--color-silver);
    margin-top: -2px;
  }
  
  .search-input-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 0.1px 0px;
    box-sizing: border-box;
    gap: 5px;
    min-width: 214px;
    width: 100%;
    cursor: pointer;
  }
  
  .search-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14.5px;
    width: 93%;
  }
  
  .item-logo-icon {
    align-self: stretch;
    width: 114.6px;
    position: relative;
    max-height: 100%;
    object-fit: contain;
    min-height: 40px;
  }
  
  .item-name {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: inherit;
    font-weight: 700;
    font-family: inherit;
  }
  
  .item-licence-number {
    align-self: stretch;
    position: relative;
    font-size: var(--font-size-xs);
  }
  
  .item-name-and-licence {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .item-details {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0px 0px;
    box-sizing: border-box;
  }
  
  .item-basic {
    align-self: stretch;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: var(--br-8xs);
    background-color: var(--color-white);
    border: 0.5px solid var(--color-mediumslateblue);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-4xs) var(--padding-xs) var(--padding-3xs);
    gap: var(--gap-47xl-4);
    z-index: 10;
  }
  
  .item-background {
    height: 76px;
    width: 426px;
    position: relative;
    border-radius: var(--br-8xs);
    background-color: var(--color-whitesmoke);
    display: none;
    max-width: 100%;
  }
  
  .item-specs {
    flex: 1;
    position: relative;
    display: inline-block;
    max-width: 100%;
    z-index: 1;
  }
  
  .item-more-wrapper {
    flex: 1;
    border-radius: var(--br-8xs);
    background-color: var(--color-whitesmoke);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px var(--padding-4xs) 39px;
    box-sizing: border-box;
    max-width: 100%;
  }
  
  .item-more {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 4px;
    box-sizing: border-box;
    max-width: 100%;
    font-size: var(--font-size-xs);
    display: none; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  
  .brokerage-item {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    position: relative;
  }
  
  .content-parent {
    width: 434px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-2xl);
    max-width: 100%;
    text-align: left;
    font-size: var(--font-size-lg);
    color: var(--color-black);
    font-family: var(--font-inter);
  }
  
  .no-results-message {
    text-align: center;
  }
  
  .content-wrapper {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: 29.2px;
    line-height: normal;
    letter-spacing: normal;
  }
  
  @media screen and (max-width: 675px) {
    .content-wrapper {
      padding-left: var(--padding-42xl);
      padding-right: var(--padding-42xl);
      box-sizing: border-box;
    }
  }
  
  @media screen and (max-width: 625px) {
    .item-basic {
      flex-wrap: wrap;
      gap: 25px;
    }
  
    .item-basic1 {
      flex-wrap: wrap;
    }
  }
  
  @media screen and (max-width: 579px) {
    .item-basic {
      gap: 10px;
    }
  }
  
  @media screen and (max-width: 450px) {
    .search-placeholder-text {
      font-size: var(--font-size-lgi);
    }
  
    .item-basic {
      gap: var(--gap-14xl);
    }
  
    .item-basic1 {
      gap: var(--gap-17xl);
    }
  
    .content-wrapper {
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
  }