mobile-number-form-element.css in Mobile Number 8

.mobile-number-field div.form-item {
  display: inline-block;
  margin: 0;
  padding: 0;
}
div.mobile-number-field div.form-item {
  vertical-align: bottom;
}

.mobile-number-field .form-type-textfield input {
  width: 150px;
}

.mobile-number-field .local-number {
  border-width: 0;
  border-bottom: 1px solid #ccc;
  height: 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  margin: 0;
}


.mobile-number-field .mobile-number-flag {
  box-sizing: border-box;
  padding: 9px 0 0;
  padding-left: 16px;
  height: 11px;
  background-image: url("../images/flags.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 16px -11px;
  display: inline-block;
  margin: 10px auto;
  vertical-align: bottom;
}

.mobile-number-field .country-select {
  height: 30px;
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  border-bottom: 1px solid #ccc;
}
.mobile-number-field .country-select .prefix {
  font-size: 12px;
  display: inline-block;
  vertical-align: bottom;
  line-height: 30px;
  box-sizing: border-box;
  min-width: 43px;
  font-family: Arial, sans-serif;
}

.mobile-number-field .country-select select {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
}

.mobile-number-field .country-select .arrow {
  top: 50%;
  right: 1px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
  display: inline-block;
  margin: 13px 5px;
  vertical-align: bottom;
}

.mobile-number-field .verification,
.mobile-number-field .send-button,
.mobile-number-field .verify-button,
.mobile-number-field .form-text {
  vertical-align: bottom;
  margin: 0;
  position: relative;
  z-index: 1;
}
.mobile-number-field .description {
  margin: 5px 0;
}
.mobile-number-field .verification,
.mobile-number-field .send-button {
  display: none;
}

.mobile-number-field .send-button.show {
  display: inline;
}
.mobile-number-field .verification.show {
  display: block;
}

.mobile-number-field div.verified {
  display: none;
  color: transparent;
  overflow: hidden;
  line-height: 30px;
  background: transparent url('') no-repeat center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAABV0RVh0Q3JlYXRpb24gVGltZQAyLzE3LzA4IJyqWAAABBF0RVh0WE1MOmNvbS5hZG9iZS54bXAAPD94cGFja2V0IGJlZ2luPSIgICAiIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNC4xLWMwMzQgNDYuMjcyOTc2LCBTYXQgSmFuIDI3IDIwMDcgMjI6MTE6NDEgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhhcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4YXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTMzwveGFwOkNyZWF0b3JUb29sPgogICAgICAgICA8eGFwOkNyZWF0ZURhdGU+MjAwOC0wMi0xN1QwMjozNjo0NVo8L3hhcDpDcmVhdGVEYXRlPgogICAgICAgICA8eGFwOk1vZGlmeURhdGU+MjAwOS0wNS0yNVQwNTozMTo0Mlo8L3hhcDpNb2RpZnlEYXRlPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9wbmc8L2RjOmZvcm1hdD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgBAPLwwAAACRQTFRFAAAA////GLMBGNEAL9YAR9sAX+EAduYAjusApvAAvfUA1foAt17EgQAAAAJ0Uk5TAAB2k804AAAATElEQVQI12MQhAIGOAMC4AxFKINpE5ShtUoRyBNgYJo5CSiiocCg0QFUw1ReBEQgXWppamkKIAZTaGgQxBwVFwUIg8kIZrICmIFhOwBhvQxdcQFfoAAAAABJRU5ErkJggg==");
}

.form-item-fields-field-mobile-number-settings-edit-form-settings-countries select {
  min-height: 150px;
}

.mobile-number-field .verified.show {
  display: inline-block;
}

.mobile-number-field .verified span {
  display: inline;
  color: transparent;
  overflow: hidden;
}

.mobile-number-field .verified.hide {
  display: none;
}