You are here

Home » API reference » Country, State and City Fields 8

select2.css in Country, State and City Fields 8 

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}
.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  user-select: none;
  -webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__clear {
  background-color: transparent;
  border: none;
  font-size: 1em;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}
.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  min-height: 32px;
  user-select: none;
  -webkit-user-select: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline;
  list-style: none;
  padding: 0;
}
.select2-container .select2-selection--multiple .select2-selection__clear {
  background-color: transparent;
  border: none;
  font-size: 1em;
}
.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 5px;
  margin-left: 5px;
  padding: 0;
  max-width: 100%;
  resize: none;
  height: 18px;
  vertical-align: bottom;
  font-family: sans-serif;
  overflow: hidden;
  word-break: keep-all;
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-results__option--selectable {
  cursor: pointer;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
}
.select2-search--dropdown .select2-search__field {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
  display: none;
}

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  height: 26px;
  margin-right: 20px;
  padding-right: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  display: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  padding-bottom: 5px;
  padding-right: 5px;
  position: relative;
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
  padding-right: 25px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  cursor: pointer;
  font-weight: bold;
  height: 20px;
  margin-right: 10px;
  margin-top: 5px;
  position: absolute;
  right: 0;
  padding: 1px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  padding-left: 20px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  cursor: default;
  padding-left: 2px;
  padding-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: transparent;
  border: none;
  border-right: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #999;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  padding: 0 4px;
  position: absolute;
  left: 0;
  top: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: #f1f1f1;
  color: #333;
  outline: none;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 5px;
  padding-right: 2px;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  border-left: 1px solid #aaa;
  border-right: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
  float: left;
  margin-left: 10px;
  margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  padding-left: 0;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -1em;
  padding-left: 2em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -2em;
  padding-left: 3em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -3em;
  padding-left: 4em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -4em;
  padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -5em;
  padding-left: 6em;
}

.select2-container--default .select2-results__option--group {
  padding: 0;
}

.select2-container--default .select2-results__option--disabled {
  color: #999;
}

.select2-container--default .select2-results__option--selected {
  background-color: #ddd;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #5897fb;
  color: white;
}

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}
.select2-container--classic .select2-selection--single:focus {
  border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  height: 26px;
  margin-right: 20px;
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
  color: #999;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
  background-color: #ddd;
  border: none;
  border-left: 1px solid #aaa;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
  background: transparent;
  border: none;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
}

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0;
  padding-bottom: 5px;
  padding-right: 5px;
}
.select2-container--classic .select2-selection--multiple:focus {
  border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
  display: none;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
  cursor: default;
  padding-left: 2px;
  padding-right: 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
  background-color: transparent;
  border: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #888;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  padding: 0 4px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #555;
  outline: none;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 5px;
  padding-right: 2px;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0;
}

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none;
}

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent;
}

.select2-container--classic .select2-dropdown--above {
  border-bottom: none;
}

.select2-container--classic .select2-dropdown--below {
  border-top: none;
}

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--classic .select2-results__option--group {
  padding: 0;
}

.select2-container--classic .select2-results__option--disabled {
  color: grey;
}

.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #3875d7;
  color: white;
}

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb;
}

File

css/select2.css
View source 
  1. .select2-container {

  2.   box-sizing: border-box;

  3.   display: inline-block;

  4.   margin: 0;

  5.   position: relative;

  6.   vertical-align: middle;

  7. }

  8. .select2-container .select2-selection--single {

  9.   box-sizing: border-box;

  10.   cursor: pointer;

  11.   display: block;

  12.   height: 28px;

  13.   user-select: none;

  14.   -webkit-user-select: none;

  15. }

  16. .select2-container .select2-selection--single .select2-selection__rendered {

  17.   display: block;

  18.   padding-left: 8px;

  19.   padding-right: 20px;

  20.   overflow: hidden;

  21.   text-overflow: ellipsis;

  22.   white-space: nowrap;

  23. }

  24. .select2-container .select2-selection--single .select2-selection__clear {

  25.   background-color: transparent;

  26.   border: none;

  27.   font-size: 1em;

  28. }

  29. .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {

  30.   padding-right: 8px;

  31.   padding-left: 20px;

  32. }

  33. .select2-container .select2-selection--multiple {

  34.   box-sizing: border-box;

  35.   cursor: pointer;

  36.   display: block;

  37.   min-height: 32px;

  38.   user-select: none;

  39.   -webkit-user-select: none;

  40. }

  41. .select2-container .select2-selection--multiple .select2-selection__rendered {

  42.   display: inline;

  43.   list-style: none;

  44.   padding: 0;

  45. }

  46. .select2-container .select2-selection--multiple .select2-selection__clear {

  47.   background-color: transparent;

  48.   border: none;

  49.   font-size: 1em;

  50. }

  51. .select2-container .select2-search--inline .select2-search__field {

  52.   box-sizing: border-box;

  53.   border: none;

  54.   font-size: 100%;

  55.   margin-top: 5px;

  56.   margin-left: 5px;

  57.   padding: 0;

  58.   max-width: 100%;

  59.   resize: none;

  60.   height: 18px;

  61.   vertical-align: bottom;

  62.   font-family: sans-serif;

  63.   overflow: hidden;

  64.   word-break: keep-all;

  65. }

  66. .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {

  67.   -webkit-appearance: none;

  68. }

  69. 

  70. .select2-dropdown {

  71.   background-color: white;

  72.   border: 1px solid #aaa;

  73.   border-radius: 4px;

  74.   box-sizing: border-box;

  75.   display: block;

  76.   position: absolute;

  77.   left: -100000px;

  78.   width: 100%;

  79.   z-index: 1051;

  80. }

  81. 

  82. .select2-results {

  83.   display: block;

  84. }

  85. 

  86. .select2-results__options {

  87.   list-style: none;

  88.   margin: 0;

  89.   padding: 0;

  90. }

  91. 

  92. .select2-results__option {

  93.   padding: 6px;

  94.   user-select: none;

  95.   -webkit-user-select: none;

  96. }

  97. 

  98. .select2-results__option--selectable {

  99.   cursor: pointer;

  100. }

  101. 

  102. .select2-container--open .select2-dropdown {

  103.   left: 0;

  104. }

  105. 

  106. .select2-container--open .select2-dropdown--above {

  107.   border-bottom: none;

  108.   border-bottom-left-radius: 0;

  109.   border-bottom-right-radius: 0;

  110. }

  111. 

  112. .select2-container--open .select2-dropdown--below {

  113.   border-top: none;

  114.   border-top-left-radius: 0;

  115.   border-top-right-radius: 0;

  116. }

  117. 

  118. .select2-search--dropdown {

  119.   display: block;

  120.   padding: 4px;

  121. }

  122. .select2-search--dropdown .select2-search__field {

  123.   padding: 4px;

  124.   width: 100%;

  125.   box-sizing: border-box;

  126. }

  127. .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {

  128.   -webkit-appearance: none;

  129. }

  130. .select2-search--dropdown.select2-search--hide {

  131.   display: none;

  132. }

  133. 

  134. .select2-close-mask {

  135.   border: 0;

  136.   margin: 0;

  137.   padding: 0;

  138.   display: block;

  139.   position: fixed;

  140.   left: 0;

  141.   top: 0;

  142.   min-height: 100%;

  143.   min-width: 100%;

  144.   height: auto;

  145.   width: auto;

  146.   opacity: 0;

  147.   z-index: 99;

  148.   background-color: #fff;

  149.   filter: alpha(opacity=0);

  150. }

  151. 

  152. .select2-hidden-accessible {

  153.   border: 0 !important;

  154.   clip: rect(0 0 0 0) !important;

  155.   -webkit-clip-path: inset(50%) !important;

  156.   clip-path: inset(50%) !important;

  157.   height: 1px !important;

  158.   overflow: hidden !important;

  159.   padding: 0 !important;

  160.   position: absolute !important;

  161.   width: 1px !important;

  162.   white-space: nowrap !important;

  163. }

  164. 

  165. .select2-container--default .select2-selection--single {

  166.   background-color: #fff;

  167.   border: 1px solid #aaa;

  168.   border-radius: 4px;

  169. }

  170. .select2-container--default .select2-selection--single .select2-selection__rendered {

  171.   color: #444;

  172.   line-height: 28px;

  173. }

  174. .select2-container--default .select2-selection--single .select2-selection__clear {

  175.   cursor: pointer;

  176.   float: right;

  177.   font-weight: bold;

  178.   height: 26px;

  179.   margin-right: 20px;

  180.   padding-right: 0px;

  181. }

  182. .select2-container--default .select2-selection--single .select2-selection__placeholder {

  183.   color: #999;

  184. }

  185. .select2-container--default .select2-selection--single .select2-selection__arrow {

  186.   height: 26px;

  187.   position: absolute;

  188.   top: 1px;

  189.   right: 1px;

  190.   width: 20px;

  191. }

  192. .select2-container--default .select2-selection--single .select2-selection__arrow b {

  193.   border-color: #888 transparent transparent transparent;

  194.   border-style: solid;

  195.   border-width: 5px 4px 0 4px;

  196.   height: 0;

  197.   left: 50%;

  198.   margin-left: -4px;

  199.   margin-top: -2px;

  200.   position: absolute;

  201.   top: 50%;

  202.   width: 0;

  203. }

  204. 

  205. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {

  206.   float: left;

  207. }

  208. 

  209. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {

  210.   left: 1px;

  211.   right: auto;

  212. }

  213. 

  214. .select2-container--default.select2-container--disabled .select2-selection--single {

  215.   background-color: #eee;

  216.   cursor: default;

  217. }

  218. .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {

  219.   display: none;

  220. }

  221. 

  222. .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {

  223.   border-color: transparent transparent #888 transparent;

  224.   border-width: 0 4px 5px 4px;

  225. }

  226. 

  227. .select2-container--default .select2-selection--multiple {

  228.   background-color: white;

  229.   border: 1px solid #aaa;

  230.   border-radius: 4px;

  231.   cursor: text;

  232.   padding-bottom: 5px;

  233.   padding-right: 5px;

  234.   position: relative;

  235. }

  236. .select2-container--default .select2-selection--multiple.select2-selection--clearable {

  237.   padding-right: 25px;

  238. }

  239. .select2-container--default .select2-selection--multiple .select2-selection__clear {

  240.   cursor: pointer;

  241.   font-weight: bold;

  242.   height: 20px;

  243.   margin-right: 10px;

  244.   margin-top: 5px;

  245.   position: absolute;

  246.   right: 0;

  247.   padding: 1px;

  248. }

  249. .select2-container--default .select2-selection--multiple .select2-selection__choice {

  250.   background-color: #e4e4e4;

  251.   border: 1px solid #aaa;

  252.   border-radius: 4px;

  253.   box-sizing: border-box;

  254.   display: inline-block;

  255.   margin-left: 5px;

  256.   margin-top: 5px;

  257.   padding: 0;

  258.   padding-left: 20px;

  259.   position: relative;

  260.   max-width: 100%;

  261.   overflow: hidden;

  262.   text-overflow: ellipsis;

  263.   vertical-align: bottom;

  264.   white-space: nowrap;

  265. }

  266. .select2-container--default .select2-selection--multiple .select2-selection__choice__display {

  267.   cursor: default;

  268.   padding-left: 2px;

  269.   padding-right: 5px;

  270. }

  271. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {

  272.   background-color: transparent;

  273.   border: none;

  274.   border-right: 1px solid #aaa;

  275.   border-top-left-radius: 4px;

  276.   border-bottom-left-radius: 4px;

  277.   color: #999;

  278.   cursor: pointer;

  279.   font-size: 1em;

  280.   font-weight: bold;

  281.   padding: 0 4px;

  282.   position: absolute;

  283.   left: 0;

  284.   top: 0;

  285. }

  286. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,

  287. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {

  288.   background-color: #f1f1f1;

  289.   color: #333;

  290.   outline: none;

  291. }

  292. 

  293. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {

  294.   margin-left: 5px;

  295.   margin-right: auto;

  296. }

  297. 

  298. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {

  299.   padding-left: 5px;

  300.   padding-right: 2px;

  301. }

  302. 

  303. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {

  304.   border-left: 1px solid #aaa;

  305.   border-right: none;

  306.   border-top-left-radius: 0;

  307.   border-bottom-left-radius: 0;

  308.   border-top-right-radius: 4px;

  309.   border-bottom-right-radius: 4px;

  310. }

  311. 

  312. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {

  313.   float: left;

  314.   margin-left: 10px;

  315.   margin-right: auto;

  316. }

  317. 

  318. .select2-container--default.select2-container--focus .select2-selection--multiple {

  319.   border: solid black 1px;

  320.   outline: 0;

  321. }

  322. 

  323. .select2-container--default.select2-container--disabled .select2-selection--multiple {

  324.   background-color: #eee;

  325.   cursor: default;

  326. }

  327. 

  328. .select2-container--default.select2-container--disabled .select2-selection__choice__remove {

  329.   display: none;

  330. }

  331. 

  332. .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,

  333. .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {

  334.   border-top-left-radius: 0;

  335.   border-top-right-radius: 0;

  336. }

  337. 

  338. .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,

  339. .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {

  340.   border-bottom-left-radius: 0;

  341.   border-bottom-right-radius: 0;

  342. }

  343. 

  344. .select2-container--default .select2-search--dropdown .select2-search__field {

  345.   border: 1px solid #aaa;

  346. }

  347. 

  348. .select2-container--default .select2-search--inline .select2-search__field {

  349.   background: transparent;

  350.   border: none;

  351.   outline: 0;

  352.   box-shadow: none;

  353.   -webkit-appearance: textfield;

  354. }

  355. 

  356. .select2-container--default .select2-results > .select2-results__options {

  357.   max-height: 200px;

  358.   overflow-y: auto;

  359. }

  360. 

  361. .select2-container--default .select2-results__option .select2-results__option {

  362.   padding-left: 1em;

  363. }

  364. .select2-container--default .select2-results__option .select2-results__option .select2-results__group {

  365.   padding-left: 0;

  366. }

  367. .select2-container--default .select2-results__option .select2-results__option .select2-results__option {

  368.   margin-left: -1em;

  369.   padding-left: 2em;

  370. }

  371. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  372.   margin-left: -2em;

  373.   padding-left: 3em;

  374. }

  375. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  376.   margin-left: -3em;

  377.   padding-left: 4em;

  378. }

  379. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  380.   margin-left: -4em;

  381.   padding-left: 5em;

  382. }

  383. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  384.   margin-left: -5em;

  385.   padding-left: 6em;

  386. }

  387. 

  388. .select2-container--default .select2-results__option--group {

  389.   padding: 0;

  390. }

  391. 

  392. .select2-container--default .select2-results__option--disabled {

  393.   color: #999;

  394. }

  395. 

  396. .select2-container--default .select2-results__option--selected {

  397.   background-color: #ddd;

  398. }

  399. 

  400. .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {

  401.   background-color: #5897fb;

  402.   color: white;

  403. }

  404. 

  405. .select2-container--default .select2-results__group {

  406.   cursor: default;

  407.   display: block;

  408.   padding: 6px;

  409. }

  410. 

  411. .select2-container--classic .select2-selection--single {

  412.   background-color: #f7f7f7;

  413.   border: 1px solid #aaa;

  414.   border-radius: 4px;

  415.   outline: 0;

  416.   background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);

  417.   background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);

  418.   background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);

  419.   background-repeat: repeat-x;

  420.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);

  421. }

  422. .select2-container--classic .select2-selection--single:focus {

  423.   border: 1px solid #5897fb;

  424. }

  425. .select2-container--classic .select2-selection--single .select2-selection__rendered {

  426.   color: #444;

  427.   line-height: 28px;

  428. }

  429. .select2-container--classic .select2-selection--single .select2-selection__clear {

  430.   cursor: pointer;

  431.   float: right;

  432.   font-weight: bold;

  433.   height: 26px;

  434.   margin-right: 20px;

  435. }

  436. .select2-container--classic .select2-selection--single .select2-selection__placeholder {

  437.   color: #999;

  438. }

  439. .select2-container--classic .select2-selection--single .select2-selection__arrow {

  440.   background-color: #ddd;

  441.   border: none;

  442.   border-left: 1px solid #aaa;

  443.   border-top-right-radius: 4px;

  444.   border-bottom-right-radius: 4px;

  445.   height: 26px;

  446.   position: absolute;

  447.   top: 1px;

  448.   right: 1px;

  449.   width: 20px;

  450.   background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);

  451.   background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);

  452.   background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);

  453.   background-repeat: repeat-x;

  454.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);

  455. }

  456. .select2-container--classic .select2-selection--single .select2-selection__arrow b {

  457.   border-color: #888 transparent transparent transparent;

  458.   border-style: solid;

  459.   border-width: 5px 4px 0 4px;

  460.   height: 0;

  461.   left: 50%;

  462.   margin-left: -4px;

  463.   margin-top: -2px;

  464.   position: absolute;

  465.   top: 50%;

  466.   width: 0;

  467. }

  468. 

  469. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {

  470.   float: left;

  471. }

  472. 

  473. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {

  474.   border: none;

  475.   border-right: 1px solid #aaa;

  476.   border-radius: 0;

  477.   border-top-left-radius: 4px;

  478.   border-bottom-left-radius: 4px;

  479.   left: 1px;

  480.   right: auto;

  481. }

  482. 

  483. .select2-container--classic.select2-container--open .select2-selection--single {

  484.   border: 1px solid #5897fb;

  485. }

  486. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {

  487.   background: transparent;

  488.   border: none;

  489. }

  490. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {

  491.   border-color: transparent transparent #888 transparent;

  492.   border-width: 0 4px 5px 4px;

  493. }

  494. 

  495. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {

  496.   border-top: none;

  497.   border-top-left-radius: 0;

  498.   border-top-right-radius: 0;

  499.   background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);

  500.   background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);

  501.   background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);

  502.   background-repeat: repeat-x;

  503.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);

  504. }

  505. 

  506. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {

  507.   border-bottom: none;

  508.   border-bottom-left-radius: 0;

  509.   border-bottom-right-radius: 0;

  510.   background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);

  511.   background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);

  512.   background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);

  513.   background-repeat: repeat-x;

  514.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);

  515. }

  516. 

  517. .select2-container--classic .select2-selection--multiple {

  518.   background-color: white;

  519.   border: 1px solid #aaa;

  520.   border-radius: 4px;

  521.   cursor: text;

  522.   outline: 0;

  523.   padding-bottom: 5px;

  524.   padding-right: 5px;

  525. }

  526. .select2-container--classic .select2-selection--multiple:focus {

  527.   border: 1px solid #5897fb;

  528. }

  529. .select2-container--classic .select2-selection--multiple .select2-selection__clear {

  530.   display: none;

  531. }

  532. .select2-container--classic .select2-selection--multiple .select2-selection__choice {

  533.   background-color: #e4e4e4;

  534.   border: 1px solid #aaa;

  535.   border-radius: 4px;

  536.   display: inline-block;

  537.   margin-left: 5px;

  538.   margin-top: 5px;

  539.   padding: 0;

  540. }

  541. .select2-container--classic .select2-selection--multiple .select2-selection__choice__display {

  542.   cursor: default;

  543.   padding-left: 2px;

  544.   padding-right: 5px;

  545. }

  546. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {

  547.   background-color: transparent;

  548.   border: none;

  549.   border-top-left-radius: 4px;

  550.   border-bottom-left-radius: 4px;

  551.   color: #888;

  552.   cursor: pointer;

  553.   font-size: 1em;

  554.   font-weight: bold;

  555.   padding: 0 4px;

  556. }

  557. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {

  558.   color: #555;

  559.   outline: none;

  560. }

  561. 

  562. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {

  563.   margin-left: 5px;

  564.   margin-right: auto;

  565. }

  566. 

  567. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {

  568.   padding-left: 5px;

  569.   padding-right: 2px;

  570. }

  571. 

  572. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {

  573.   border-top-left-radius: 0;

  574.   border-bottom-left-radius: 0;

  575.   border-top-right-radius: 4px;

  576.   border-bottom-right-radius: 4px;

  577. }

  578. 

  579. .select2-container--classic.select2-container--open .select2-selection--multiple {

  580.   border: 1px solid #5897fb;

  581. }

  582. 

  583. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {

  584.   border-top: none;

  585.   border-top-left-radius: 0;

  586.   border-top-right-radius: 0;

  587. }

  588. 

  589. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {

  590.   border-bottom: none;

  591.   border-bottom-left-radius: 0;

  592.   border-bottom-right-radius: 0;

  593. }

  594. 

  595. .select2-container--classic .select2-search--dropdown .select2-search__field {

  596.   border: 1px solid #aaa;

  597.   outline: 0;

  598. }

  599. 

  600. .select2-container--classic .select2-search--inline .select2-search__field {

  601.   outline: 0;

  602.   box-shadow: none;

  603. }

  604. 

  605. .select2-container--classic .select2-dropdown {

  606.   background-color: white;

  607.   border: 1px solid transparent;

  608. }

  609. 

  610. .select2-container--classic .select2-dropdown--above {

  611.   border-bottom: none;

  612. }

  613. 

  614. .select2-container--classic .select2-dropdown--below {

  615.   border-top: none;

  616. }

  617. 

  618. .select2-container--classic .select2-results > .select2-results__options {

  619.   max-height: 200px;

  620.   overflow-y: auto;

  621. }

  622. 

  623. .select2-container--classic .select2-results__option--group {

  624.   padding: 0;

  625. }

  626. 

  627. .select2-container--classic .select2-results__option--disabled {

  628.   color: grey;

  629. }

  630. 

  631. .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {

  632.   background-color: #3875d7;

  633.   color: white;

  634. }

  635. 

  636. .select2-container--classic .select2-results__group {

  637.   cursor: default;

  638.   display: block;

  639.   padding: 6px;

  640. }

  641. 

  642. .select2-container--classic.select2-container--open .select2-dropdown {

  643.   border-color: #5897fb;

  644. }