
.keyword-search-container .input-group.input-group-lg {
  font-size: 1.1em;
  line-height: 1.1em;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;

}

/* Coordinate these and override defaults from extension & bootstrap */
.keyword-search-container .input-group.input-group-lg .form-control,
.keyword-search-container .input-group.input-group-lg .input-group-addon {
  padding: 0.5em 0.7em 0.2em 0.7em;
  font-size: 1em;
  line-height: 1em;
  height: auto;
  display: flex;
  align-items: stretch;
  align-content: stretch;
}

.keyword-search-container .input-group.input-group-lg .form-control {
  flex-grow: 19;
  flex-wrap: wrap;
  width: 90%;
}

.keyword-search-container .input-group .form-control.hide-right-addon {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}

.keyword-search-container .input-group .form-control.hide-right-addon ~ .input-group-addon {
  display: none;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon {
  flex-grow: 1;
  flex-wrap: nowrap;
  /* Suitable padding will be done by the buttons */
  padding-left: 0;
  padding-right: 0;
  font-size: 1em; /* If you increase this away from 1em set in .form-control, must reduce top/bottom padding similarly */
  /* Want full line-height, will add into line-height of button */
  padding-bottom: 0;
  padding-top: 0;
  width: 10%;
  min-width: 74px;
  max-width: 84px;
  border-color: #32739d;
  background-color: #32739d;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  flex-grow: 1;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn {
  align-self: stretch;
  font-size: 1.2em;
  border-width: 0;
  padding-top: 0.4em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #32739d;
  color: white;
  border-radius: 0;
  float: none;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn.fa-search {
  flex: 3;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn.dropdown-toggle {
  flex: 1;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn:hover {
  background-color: #57889D;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn:first-of-type {
  border-right: 2px solid rgb(204, 204, 204);
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn:last-of-type {
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.keyword-search-container .input-group.input-group-lg .input-group-addon .btn-group .btn:last-of-type .caret {
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.keyword-search-container .form-control > input {
  padding: 0;
  font-size: 1.0em;
  line-height: 1.3em;
  flex-grow: 1;
  flex-wrap: wrap;
  border-bottom: 1px dashed lightgrey;
  margin-bottom: 0.3em; /* Coordinate with bottom margin of .tag-label to avoid jumpy input box height */
  min-width: 20%;
}

.keyword-search-container .typeahead.dropdown-menu .dropdown-item .keyword-count {
  display: flex;
  justify-content: space-between;
  line-height: 1.3em;
}

.keyword-search-container .typeahead.dropdown-menu .dropdown-item .keyword-count .count {
  color: grey;
  font-size: 0.82em;
  margin-left: 1em;
}

.keyword-search-container .typeahead.dropdown-menu .active > a,
.keyword-search-container .typeahead.dropdown-menu .active > a:hover {
  background-color: #748ca1b3;
}

.keyword-search-container .typeahead.dropdown-menu .active .dropdown-item .keyword-count .count {
  color: white;
}

.keyword-search-container .typeahead.dropdown-menu .dropdown-item .keyword-count .count::before {
  content: '(';
}

.keyword-search-container .typeahead.dropdown-menu .dropdown-item .keyword-count .count::after {
  content: ')';
}

.keyword-search-container .form-control .typeahead.dropdown-menu .dropdown-item .keyword-count .keyword .highlight {
  color: blue;
  font-weight: bold;
}

.keyword-search-container .form-control .tag.label {
  padding: 5px 6px 4px 6px;
  font-size: 1em;
  display: inline-block;
  margin-bottom: 0.3em;
  margin-right: 0.42em;
  box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.4);
  background-color: #077CC5;
  text-align: left;
  white-space: normal;
  line-height: normal;
}

.keyword-search-container .form-control .tag.label [data-role="remove"] {
  font-size: 1.3em;
  margin-left: 0.82em;
  float: right;
  position: relative;
  top: -0.1em;
  line-height: 1;
}

.keyword-search-container .form-control .tag.label [data-role="remove"]:hover {
  box-shadow: none;
  color: red;
}

.keyword-search-container .form-control .tag.label [data-role="remove"]::after {
  padding: 0;
}

.keyword-search-container .count-message {
  margin-left: 1em;
  color: #32739d;
  font-size: 1.2em;
}

.keyword-search-container .count-message .count {
  font-weight: bold;
  margin-right: 0.3em;
}

.keyword-search-container .count-message .count.zero {
  color: darkred;
}

.keyword-search-container .form-control .dropdown-menu {
  z-index: 8000;
}

/* ---------------------------------------------------------------- */
/* .head.input-group-addon related rules, where that appears */
/* ---------------------------------------------------------------- */

/* - possibly some of these would be overridden for page-specific head addons */
.keyword-search-container .input-group.input-group-lg .head.input-group-addon {
  font-size: 1.2em;
  color: #32739D;
  background-color: #EEEEEE;
  width: 20%;
  flex-grow: 3;
  line-height: 1.2em;
  max-width: 7em;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-right: none;
}

/* - IFF .form-control follows a .head.input-group-addon, reduce its widget preference. */
/* - possibly may need to override this for page-specific head addons */
.keyword-search-container .input-group.input-group-lg .head.input-group-addon + .form-control {
  width: 65%;
  flex-grow: 16;
}

.keyword-search-container .input-group.input-group-lg .head.input-group-addon .help.fa {
  position: relative;
  top: -0.5em;
  font-size: 80%;
}