.iti {
  position: relative;
  display: inline-block;
  width: 100%;
}

.iti * {
  box-sizing: border-box;
}

.itiFlag__hide {
  display: none;
}

.iti input,
.iti input[type="text"],
.iti input[type="tel"] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-right: 0;
  margin-bottom: 0 !important;
  padding-right: 36px;
}

.itiFlag__flag-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
}

.itiFlag__selected-flag {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}

.itiFlag__arrow {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 4px solid #555;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

.itiFlag__arrow--up {
  border-top: 0;
  border-bottom: 4px solid #555;
}

.itiFlag__country-list {
  position: absolute;
  z-index: 10001;
  max-height: 200px;
  padding: 0;
  margin: 0 0 0 -1px;
  overflow-y: auto;
  list-style: none;
  white-space: nowrap;
  text-align: left;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
}

.itiFlag__country-list--dropup {
  bottom: 100%;
  margin-bottom: -1px;
}

.itiFlag__flag-box {
  display: inline-block;
  width: 20px;
}

.itiFlag__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.itiFlag__country {
  padding: 5px 10px;
  margin: 0;
  outline: 0;
}

.itiFlag__dial-code {
  color: #777;
}

.itiFlag__country.itiFlag__highlight {
  background: rgba(0, 0, 0, 0.05);
}

.itiFlag__flag-box,
.itiFlag__country-name,
.itiFlag__dial-code {
  vertical-align: middle;
}

.itiFlag__flag-box,
.itiFlag__country-name {
  margin-right: 6px;
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type="text"],
.iti--allow-dropdown input[type="tel"],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type="text"],
.iti--separate-dial-code input[type="tel"] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}

.iti--allow-dropdown .itiFlag__flag-container,
.iti--separate-dial-code .itiFlag__flag-container {
  right: auto;
  left: 0;
}

.iti--allow-dropdown .itiFlag__flag-container:hover {
  cursor: pointer;
}

.iti--allow-dropdown .itiFlag__flag-container:hover .itiFlag__selected-flag,
.iti--separate-dial-code .itiFlag__selected-flag {
  background: rgba(0, 0, 0, 0.05);
}

.iti--separate-dial-code .itiFlag__selected-dial-code {
  margin-left: 6px;
}

.iti--container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}

.iti-mobile .iti--container {
  position: fixed;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
}

.iti-mobile .itiFlag__country-list {
  width: 100%;
  max-height: 100%;
}

.iti-mobile .itiFlag__country {
  padding: 10px;
  line-height: 1.5em;
}

.itiFlag__flag {
  width: 20px;
  height: 15px;
  background-color: #dbdbdb;
  background-image: url("../img/flags.png");
  background-repeat: no-repeat;
  background-position: 20px 0;
  box-shadow: 0 0 1px 0 #888;
}

.itiFlag__be { width: 18px; }
.itiFlag__ch { width: 15px; }
.itiFlag__mc { width: 19px; }
.itiFlag__ad { height: 14px; background-position: -22px 0; }
.itiFlag__ae { height: 10px; background-position: -44px 0; }
.itiFlag__al { height: 15px; background-position: -132px 0; }
.itiFlag__am { height: 10px; background-position: -154px 0; }
.itiFlag__at { height: 14px; background-position: -264px 0; }
.itiFlag__az { height: 10px; background-position: -352px 0; }
.itiFlag__ba { height: 10px; background-position: -374px 0; }
.itiFlag__be { height: 15px; background-position: -440px 0; }
.itiFlag__bg { height: 12px; background-position: -482px 0; }
.itiFlag__by { height: 10px; background-position: -790px 0; }
.itiFlag__ch { height: 15px; background-position: -944px 0; }
.itiFlag__cy { height: 14px; background-position: -1225px 0; }
.itiFlag__cz { height: 14px; background-position: -1247px 0; }
.itiFlag__de { height: 12px; background-position: -1269px 0; }
.itiFlag__dk { height: 15px; background-position: -1335px 0; }
.itiFlag__ee { height: 13px; background-position: -1467px 0; }
.itiFlag__es { height: 14px; background-position: -1555px 0; }
.itiFlag__fi { height: 12px; background-position: -1621px 0; }
.itiFlag__fo { height: 15px; background-position: -1709px 0; }
.itiFlag__fr { height: 14px; background-position: -1731px 0; }
.itiFlag__gb { height: 10px; background-position: -1775px 0; }
.itiFlag__ge { height: 14px; background-position: -1819px 0; }
.itiFlag__gi { height: 10px; background-position: -1907px 0; }
.itiFlag__gr { height: 14px; background-position: -2039px 0; }
.itiFlag__hk { height: 14px; background-position: -2171px 0; }
.itiFlag__hr { height: 10px; background-position: -2237px 0; }
.itiFlag__hu { height: 10px; background-position: -2281px 0; }
.itiFlag__ie { height: 10px; background-position: -2347px 0; }
.itiFlag__il { height: 15px; background-position: -2369px 0; }
.itiFlag__in { height: 14px; background-position: -2413px 0; }
.itiFlag__is { height: 15px; background-position: -2501px 0; }
.itiFlag__it { height: 14px; background-position: -2523px 0; }
.itiFlag__ke { height: 14px; background-position: -2633px 0; }
.itiFlag__kr { height: 14px; background-position: -2787px 0; }
.itiFlag__li { height: 12px; background-position: -2941px 0; }
.itiFlag__lt { height: 12px; background-position: -3029px 0; }
.itiFlag__lu { height: 12px; background-position: -3051px 0; }
.itiFlag__lv { height: 10px; background-position: -3073px 0; }
.itiFlag__mc { height: 15px; background-position: -3139px 0; }
.itiFlag__md { height: 10px; background-position: -3160px 0; }
.itiFlag__mk { height: 10px; background-position: -3270px 0; }
.itiFlag__nl { height: 14px; background-position: -3752px 0; }
.itiFlag__no { height: 15px; background-position: -3774px 0; }
.itiFlag__pk { height: 14px; background-position: -4009px 0; }
.itiFlag__pl { height: 13px; background-position: -4031px 0; }
.itiFlag__pt { height: 14px; background-position: -4141px 0; }
.itiFlag__ro { height: 14px; background-position: -4251px 0; }
.itiFlag__rs { height: 14px; background-position: -4273px 0; }
.itiFlag__ru { height: 14px; background-position: -4295px 0; }
.itiFlag__se { height: 13px; background-position: -4427px 0; }
.itiFlag__sg { height: 14px; background-position: -4449px 0; }
.itiFlag__si { height: 10px; background-position: -4493px 0; }
.itiFlag__tr { height: 14px; background-position: -5065px 0; }
.itiFlag__ua { height: 14px; background-position: -5175px 0; }

@media (max-width: 500px) {
  .itiFlag__country-list {
    white-space: normal;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .itiFlag__flag {
    background-image: url("../img/flags@2x.png");
    background-size: 5652px 15px;
  }
}