/* [project]/src/app/ui/dashboard/style/css/phone-input-theme.css [app-client] (css) */
.react-tel-input .form-control {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
  background-color: var(--bs-body-bg) !important;
  width: 100% !important;
  color: var(--bs-body-color) !important;
  border-left: none !important;
  padding-left: 48px !important;
}

.react-tel-input .form-control:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

.react-tel-input .flag-dropdown {
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
  border-right: none !important;
}

.react-tel-input .flag-dropdown:hover, .react-tel-input .flag-dropdown.open {
  background-color: var(--bs-tertiary-bg);
}

.react-tel-input .selected-flag {
  background-color: #0000;
}

.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
  background-color: var(--bs-tertiary-bg);
}

.react-tel-input .country-list {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.react-tel-input .country-list .country:hover, .react-tel-input .country-list .country.highlight {
  background-color: var(--bs-tertiary-bg);
}

.react-tel-input .country-list .search {
  background-color: var(--bs-body-bg);
}

.react-tel-input .country-list .search-box {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}