#template("colorThemeInit.vm")
.doc-tags {
  /* Stretch to fill the available width and to push the document creator to the right. Also set the minimum width in
    order to improve the display on small screens. */
  flex: 1 300px;
  /* Leave some space above and below in case the footer wraps on multiple lines. Also leave some space between the tags
    and the next footer item (e.g. the document creator). */
  padding: 3px 2em 3px 0;
}
.tag-wrapper {
  padding: 2px 1px;
}
.tag-wrapper .separator {
  display: none;
}
.tag {
  word-wrap: break-word;
}
a.tag-delete, a.tag-delete:visited {
  color: $theme.pageContentBackgroundColor;
  font-size: 70%;
  font-weight: bold;
  text-decoration: none !important;
  vertical-align: super;
}
.tag-wrapper:hover a.tag-delete {
  color: $theme.textPrimaryColor;
}
.tag-wrapper a.tag-delete:hover {
  color: $theme.notificationErrorColor;
}
.tag-add {
  color: $theme.textPrimaryColor;
  display: inline;
}
.tag-add a, .tag-add a:visited {
  color: $theme.textPrimaryColor;
  font-size: 80%;
  text-decoration: none;
}
.tag-add a:hover {
  color: $theme.linkColor;
}

.tag-add-form {
  border: 1px outset $theme.borderColor;
  position: absolute;
  vertical-align: top !important;
  z-index: 1000;
}
.tag-add-form > div {
  background: $theme.backgroundSecondaryColor;
  overflow: hidden;
  padding: 4px 8px;
}

.tag-add-form label {
  color: $theme.textSecondaryColor;
  font-size: 80%;
  margin: 2px 0;
}

.tag-add-form .input-tag {
  margin: 0 3px .3em 0;
  width: 16em;
}

.tag-add-form .buttonwrapper {
  margin-left: 0;
}

#body .tag-add-form .button {
  font-size: 80%;
  padding: 3px 5px !important;
  cursor: pointer;
  display: inline-block;
  min-height: 0 !important;
}

.tag-add-form .button-add-tag-cancel {
  font-size: 80%;
  padding: 4px 5px !important;
}