
.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%;
}