/* Phone dropdown theme from the current Webflow export. */
:root {
    --iti-dropdown-bg: #fff;
    --iti-border-color: rgba(6,30,66,.08);
    --iti-hover-color: rgba(6,30,66,.05);
    --iti-dialcode-color: rgba(6,30,66,.5);
  }
  /* dropdown must sit above every modal, including project-modal and its footer */
  .iti--container { z-index: 2147483000 !important; }
  .iti--inline-dropdown .iti__dropdown-content { z-index: 2147483000 !important; }
  .iti__dropdown-content {
    background: #fff !important;
    border: 1px solid rgba(6,30,66,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(6,30,66,.12) !important;
    overflow: hidden;
    font-family: inherit;
  }
  .iti--container:not(.iti--fullscreen-popup) .iti__dropdown-content { margin-top: 8px; }
  .iti__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(6,30,66,.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #061E42 !important;
    font: inherit;
    font-size: 16px;
  }
  .iti__search-input::placeholder { color: rgba(6,30,66,.4); }
  .iti__search-input:focus { border-bottom-color: rgba(6,30,66,.16) !important; }
  .iti__country-list {
    max-height: 280px;
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(6,30,66,.2) transparent;
  }
  .iti__country {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px !important;
    color: #061E42 !important;
    font-size: 15px;
    line-height: 1.3;
    transition: background-color .15s;
  }
  .iti__country.iti__highlight,
  .iti__country:hover { background-color: rgba(6,30,66,.05) !important; }
  .iti__country-name { margin-right: 0 !important; }
  .iti__dial-code { color: rgba(6,30,66,.5) !important; margin-left: auto; }
  .iti__flag { border-radius: 2px; box-shadow: none !important; }
  /* toggle next to the field inherits the form's text color, so it works on dark and light forms */
  .iti__selected-country { color: inherit; }
  .iti__selected-country,
  .iti__selected-country:hover,
  .iti__selected-country-primary:hover { background-color: transparent !important; }
  .iti__selected-dial-code { color: inherit; }
  .iti__arrow { border-top-color: currentColor !important; opacity: .6; }
  .iti__arrow--up { border-top-color: transparent !important; border-bottom-color: currentColor !important; }
  .iti--fullscreen-popup.iti--container {
    background-color: rgba(2,12,30,.5) !important;
    padding: 24px 16px !important;
  }
  .iti--fullscreen-popup .iti__dropdown-content { max-height: 100%; }
  .iti--fullscreen-popup .iti__country-list { max-height: none; }