body {
  background-color: #222;
  color: #fff;
}


.lg-tag {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border: 0px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #645C5C;
  cursor: pointer;
  background-color: #F2F0F0;
  transition: background-color 0.3s ease;
  user-select: none;
}

.lg-tag:hover {
  background-color: #3cb371;
}

.lg-tag.active {
  background-color: #3cb371;
  color: #fff;
  border-color: #3cb371;
}


.lg-tag.selected::after {
  content: '\f00d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 0.8em;
}

.lg-close {
  color: red;
  margin-left: 5px;
  cursor: pointer;
}



#tag-cloud .lg-tag.active {
  background-color: #4CAF50;
  color: white;
}

#tag-buttons .lg-tag {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#tag-buttons .lg-tag:hover {
  background-color: #eee;
}

#tag-buttons .lg-tag.active {
  background-color: #4CAF50;
  color: white;
}

.lg-tag.no-highlight {
  cursor: pointer;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
}

.lg-tag.no-highlight:hover {
  background-color: #eee;
}


.tag-italic {
  font-style: italic;
}

.photo-hide { display: none; }