.bootstrap-tagsinput {
  display:        flex;
  flex:           1;
  border: 1px     solid #ccc;   
  box-shadow:     inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display:        inline-block;
  padding:        4px 6px;
  color:        #777;
  vertical-align: middle;
  border-radius:  4px;
  max-width:      100%;
  line-height:    22px;
  cursor:         text;
}

.bootstrap-tagsinput:focus {
  border: solid 1px #6C5DD3;
}

.bootstrap-tagsinput input {
  border:     none;
  
  box-shadow: none;
  outline:    none;

  padding:    0 6px;
  margin:     0;
  width:      100%;
  max-width:  inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color:    #777;
  opacity:    1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color:     #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color:    #777;
}


.bootstrap-tagsinput .tag {
  margin-right:     2px;
  background-color: #f5f7fa;
  border:           1px solid #777
  /*color:      white;*/
}

body.dark .bootstrap-tagsinput .tag {
    background-color: #242731;
    color:            white;
}

body.dark .bootstrap-tagsinput input {
  background-color: #242731;
  color:            white;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left:  8px;
  cursor:       pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content:      "x";
  padding:      0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow:   inset 0 3px 5px rgba(0, 0, 0, 0.125);
}