:root {
    --primary: #111;
    --secondary: #fd0;
}	


  .dial-code-dropdown {
  max-width: 100% !important;
  width: 100% !important;
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate3d(0px, 49.6px, 0px);
  max-height: 300px; /* Set your desired max height */
  overflow-y: auto;  /* Enable vertical scrolling */
  z-index: 1000;     /* Adjust if necessary to prevent overlap */
  padding-top: 0; /* Remove padding at the top to align items properly */
}


/* Make the search input fixed at the top */
.dial-code-dropdown li:first-child {
    position: sticky;
    top: 0;
    z-index: 1; /* Keeps it on top of scrolling list items */
    background-color: #fff; /* Match dropdown background */
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Optional: add a separator */
}


        .dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid #F7F7F7;
    border-radius: var(--bs-dropdown-item-border-radius,0);
}