From b682fd0cd3cf640d621431d66091ccb2c95d99ea Mon Sep 17 00:00:00 2001
From: HWFord <54360213+HWFord@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:43:29 +0200
Subject: [PATCH] fixes #2414 change related tags display

Add conf to display or not the related tag options by default
Add templates and css for new display
---
 admin/configuration.php                       |   1 +
 .../template/configuration_display.tpl        |   8 ++
 include/functions_html.inc.php                |  45 +++-----
 include/menubar.inc.php                       |  71 ++----------
 include/selected_tags.inc.php                 |  45 ++++++++
 index.php                                     |  59 ++++++++++
 install/config.sql                            |   1 +
 install/db/180-database.php                   |  20 ++++
 .../template/include/related_tags.inc.tpl     |  27 +++++
 .../template/include/selected_tags.inc.tpl    |  14 +++
 themes/default/template/index.tpl             |  43 ++++++-
 themes/default/template/menubar_tags.tpl      |   2 +-
 themes/default/theme.css                      | 105 ++++++++++++++++--
 13 files changed, 332 insertions(+), 109 deletions(-)
 create mode 100644 include/selected_tags.inc.php
 create mode 100644 install/db/180-database.php
 create mode 100644 themes/default/template/include/related_tags.inc.tpl
 create mode 100644 themes/default/template/include/selected_tags.inc.tpl

diff --git a/admin/configuration.php b/admin/configuration.php
index 4d04f8a98..b4f438672 100644
--- a/admin/configuration.php
+++ b/admin/configuration.php
@@ -76,6 +76,7 @@ $display_checkboxes = array(
     'menubar_filter_icon',
     'index_search_in_set_button',
     'index_search_in_set_action',
+    'index_related_tags_display',
     'index_sort_order_input',
     'index_flat_icon',
     'index_posted_date_icon',
diff --git a/admin/themes/default/template/configuration_display.tpl b/admin/themes/default/template/configuration_display.tpl
index fe31f857d..1b49c2ccb 100644
--- a/admin/themes/default/template/configuration_display.tpl
+++ b/admin/themes/default/template/configuration_display.tpl
@@ -56,6 +56,14 @@
         </label>
       </li>
 
+      <li>
+        <label class="font-checkbox">
+          <span class="icon-check"></span>
+          <input type="checkbox" name="index_related_tags_display" {if ($display.index_related_tags_display)}checked="checked"{/if}>
+          {'Display related tags by default'|translate}
+        </label>
+      </li>
+
       <li>
         <label class="font-checkbox">
           <span class="icon-check"></span>
diff --git a/include/functions_html.inc.php b/include/functions_html.inc.php
index 66508ca64..d4395587f 100644
--- a/include/functions_html.inc.php
+++ b/include/functions_html.inc.php
@@ -411,42 +411,25 @@ function get_tags_content_title()
 
   for ($i=0; $i<count($page['tags']); $i++)
   {
-    $title.= $i>0 ? ' + ' : '';
 
-    $title.=
-      '<a href="'
-      .make_index_url(
-        array(
-          'tags' => array( $page['tags'][$i] )
-          )
-        )
-      .'" title="'
-      .l10n('display photos linked to this tag')
-      .'">'
-      .trigger_change('render_tag_name', $page['tags'][$i]['name'], $page['tags'][$i])
-      .'</a>';
-
-    if (count($page['tags']) > 1)
+    if (1 == count($page['tags']))
     {
-      $other_tags = $page['tags'];
-      unset($other_tags[$i]);
-      $remove_url = make_index_url(
-        array(
-          'tags' => $other_tags
-          )
-        );
-
       $title.=
-        '<a id="TagsGroupRemoveTag" href="'.$remove_url.'" style="border:none;" title="'
-        .l10n('remove this tag from the list')
-        .'"><img src="'
-          .get_root_url().get_themeconf('icon_dir').'/remove_s.png'
-        .'" alt="x" style="vertical-align:bottom;" >'
-        .'<span class="pwg-icon pwg-icon-close" ></span>'
-        .'<i class="fas fa-plus" aria-hidden="true"></i>'
+        '<a href="'
+        .make_index_url(
+          array(
+            'tags' => array( $page['tags'][$i] )
+            )
+          )
+        .'" title="'
+        .l10n('display photos linked to this tag')
+        .'">'
+        .trigger_change('render_tag_name', $page['tags'][$i]['name'], $page['tags'][$i])
         .'</a>';
     }
   }
+
+
   return $title;
 }
 
@@ -557,7 +540,7 @@ function register_default_menubar_blocks($menu_ref_arr)
     return;
   $menu->register_block( new RegisteredBlock( 'mbLinks', 'Links', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbCategories', 'Albums', 'piwigo'));
-  $menu->register_block( new RegisteredBlock( 'mbTags', 'Related tags', 'piwigo'));
+  $menu->register_block( new RegisteredBlock( 'mbTags', 'Tags', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbSpecials', 'Specials', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbMenu', 'Menu', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbRelatedCategories', 'Related albums', 'piwigo') );
diff --git a/include/menubar.inc.php b/include/menubar.inc.php
index e52b262b5..de3d25676 100644
--- a/include/menubar.inc.php
+++ b/include/menubar.inc.php
@@ -143,68 +143,19 @@ function initialize_menu()
   $block = $menu->get_block('mbTags');
   if ( $block!=null and 'picture' != script_basename() )
   {
-    if ('tags'==@$page['section'])
+    $tags = get_available_tags();
+    usort($tags, 'tags_counter_compare');
+    $tags = array_slice($tags, 0, $conf['menubar_tag_cloud_items_number']);
+    foreach ($tags as $tag)
     {
-      $tags = get_common_tags(
-        $page['items'],
-        $conf['menubar_tag_cloud_items_number'],
-        $page['tag_ids']
-        );
-      $tags = add_level_to_tags($tags);
+      $block->data[] = array_merge(
+        $tag,
+        array(
+          'URL' => make_index_url( array( 'tags' => array($tag) ) ),
+        )
+      );
+    }
 
-      foreach ($tags as $tag)
-      {
-        $block->data[] = array_merge(
-          $tag,
-          array(
-            'U_ADD' => make_index_url(
-              array(
-                'tags' => array_merge(
-                  $page['tags'],
-                  array($tag)
-                  )
-                )
-              ),
-            'URL' => make_index_url( array( 'tags' => array($tag) )
-              ),
-            )
-          );
-      }
-      $template->assign( 'IS_RELATED', false);
-    }
-    //displays all tags available for the current user
-    else if ($conf['menubar_tag_cloud_content'] == 'always_all' or ($conf['menubar_tag_cloud_content'] == 'all_or_current' and empty($page['items'])) )
-    {
-      $tags = get_available_tags();
-      usort($tags, 'tags_counter_compare');
-      $tags = array_slice($tags, 0, $conf['menubar_tag_cloud_items_number']);
-      foreach ($tags as $tag)
-      {
-        $block->data[] = array_merge(
-          $tag,
-          array(
-            'URL' => make_index_url( array( 'tags' => array($tag) ) ),
-          )
-        );
-      }
-      $template->assign( 'IS_RELATED', false);
-    }
-    //displays only the tags available from the current thumbnails displayed
-    else if ( !empty($page['items']) and ($conf['menubar_tag_cloud_content'] == 'current_only' or $conf['menubar_tag_cloud_content'] == 'all_or_current') )
-    {        
-      $selection = array_slice( $page['items'], $page['start'], $page['nb_image_page'] );
-      $tags = add_level_to_tags( get_common_tags($selection, $conf['content_tag_cloud_items_number']) );
-      foreach ($tags as $tag)
-      {
-        $block->data[] =
-        array_merge( $tag,
-          array(
-            'URL' => make_index_url( array( 'tags' => array($tag) ) ),
-          )
-        );
-      }
-      $template->assign( 'IS_RELATED', true);
-    }
     if ( !empty($block->data) )
     {
       $block->template = 'menubar_tags.tpl';
diff --git a/include/selected_tags.inc.php b/include/selected_tags.inc.php
new file mode 100644
index 000000000..2b81853aa
--- /dev/null
+++ b/include/selected_tags.inc.php
@@ -0,0 +1,45 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | This file is part of Piwigo.                                          |
+// |                                                                       |
+// | For copyright and license information, please view the COPYING.txt    |
+// | file that was distributed with this source code.                      |
+// +-----------------------------------------------------------------------+
+global $page;
+
+$selected_related_tags_info = array();
+
+if (count($page['tags']) > 1)
+{
+  foreach ($page['tags'] as $key=>$tag)
+  {
+    $other_tags = $page['tags'];
+    unset($other_tags[$key]);
+
+    $selected_related_tags_info[$key] =
+    array(
+      'tag_name' => trigger_change('render_tag_name', $page['tags'][$key]['name'], $page['tags'][$key]),
+      'item_count' => '',
+      'index_url' => make_index_url(
+        array(
+          'tags' => array( $page['tags'][$key] )
+        )
+      ),
+      'remove_url' => make_index_url(
+        array(
+          'tags' => $other_tags
+        )
+      )
+    );
+  }
+}
+
+$template->assign(
+  array(
+  'SELECT_RELATED_TAGS' => $selected_related_tags_info,
+  )
+);
+
+$template->set_filename('selected_tags', 'include/selected_tags.inc.tpl');
+$template->assign_var_from_handle('SELECTED_TAGS_TEMPLATE', 'selected_tags');
+    
diff --git a/index.php b/index.php
index 94ef67140..946fd0315 100644
--- a/index.php
+++ b/index.php
@@ -189,11 +189,45 @@ if ( empty($page['is_external']) )
 
   if (isset($page['body_data']['tag_ids']))
   {
+    //get tags for related tags "button", with the possibility to combine them
+    $tags = get_common_tags(
+      $page['items'],
+      $conf['menubar_tag_cloud_items_number'],
+      $page['tag_ids']
+    );
+
+    $tags = add_level_to_tags($tags);
+
+    $related_tags = array();
+
+    foreach ($tags as $tag)
+    {
+      $related_tags[] = array_merge(
+        $tag,
+        array(
+          'U_ADD' => make_index_url(
+            array(
+              'tags' => array_merge(
+                $page['tags'],
+                array($tag)
+                )
+              )
+            ),
+          'URL' => make_index_url( array( 'tags' => array($tag) )
+            ),
+          )
+        );
+    }
+
+    include_once(PHPWG_ROOT_PATH.'include/selected_tags.inc.php');
+
     $template->assign(
       array(
         'SEARCH_IN_SET_BUTTON' => $conf['index_search_in_set_button'],
         'SEARCH_IN_SET_ACTION' => $conf['index_search_in_set_action'],
         'SEARCH_IN_SET_URL' => get_root_url().'search.php?tag_id='.implode(',', $page['body_data']['tag_ids']),
+        'RELATED_TAGS_DISPLAY' => $conf['index_related_tags_display'],
+        'RELATED_TAGS' => $related_tags,
       )
     );
   }
@@ -360,6 +394,31 @@ if ( empty($page['is_external']) )
       $template->assign('U_SLIDESHOW', $page['cat_slideshow_url']);
     }
   }
+
+  //We want all pages that display thumbnails, except on the tags page
+  //Fill related tags action
+  if(!empty($page['items']) and 'tags' != $page['body_data']['section'])
+  {
+    $selection = array_slice( $page['items'], $page['start'], $page['nb_image_page'] );
+    $tags = add_level_to_tags( get_common_tags($selection, $conf['content_tag_cloud_items_number']) );
+    $related_tags = array();
+    foreach ($tags as $tag)
+    {
+      $related_tags[] =
+      array_merge( $tag,
+        array(
+          'URL' => make_index_url( array( 'tags' => array($tag) ) ),
+        )
+      );
+    } 
+
+    $template->assign(
+      array(
+      'RELATED_TAGS_ACTION' => true,
+      'RELATED_TAGS' => $related_tags,
+      )
+    );
+  }
 }
 
 //------------------------------------------------------------ end
diff --git a/install/config.sql b/install/config.sql
index d2e9ede61..5f872037c 100644
--- a/install/config.sql
+++ b/install/config.sql
@@ -81,3 +81,4 @@ INSERT INTO piwigo_config (param,value) VALUES ('upload_detect_duplicate','true'
 INSERT INTO piwigo_config (param,value) VALUES ('webmaster_id','1');
 INSERT INTO piwigo_config (param,value) VALUES ('use_standard_pages','true');
 INSERT INTO piwigo_config (param,value,comment) VALUES ('filters_views','a:14:{s:5:"words";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:4:"tags";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"post_date";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:13:"creation_date";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:5:"album";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:6:"author";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:8:"added_by";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"file_type";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:5:"ratio";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:6:"rating";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"file_size";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:6:"height";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:5:"width";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:17:"last_filters_conf";b:1;}','Filters displays configuration');
+INSERT INTO piwigo_config (param,value) VALUES ('index_related_tags_display','true');
\ No newline at end of file
diff --git a/install/db/180-database.php b/install/db/180-database.php
new file mode 100644
index 000000000..56591b85e
--- /dev/null
+++ b/install/db/180-database.php
@@ -0,0 +1,20 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | This file is part of Piwigo.                                          |
+// |                                                                       |
+// | For copyright and license information, please view the COPYING.txt    |
+// | file that was distributed with this source code.                      |
+// +-----------------------------------------------------------------------+
+
+if (!defined('PHPWG_ROOT_PATH'))
+{
+  die('Hacking attempt!');
+}
+
+$upgrade_description = 'add config parameters to display by default or not "related tags" ';
+
+conf_update_param('index_related_tags_display', true);
+
+echo "\n".$upgrade_description."\n";
+
+?>
diff --git a/themes/default/template/include/related_tags.inc.tpl b/themes/default/template/include/related_tags.inc.tpl
new file mode 100644
index 000000000..fefcc7a5b
--- /dev/null
+++ b/themes/default/template/include/related_tags.inc.tpl
@@ -0,0 +1,27 @@
+<div class="mcs-side-results search-in-set-button" id="related-tags-toggle">
+  <div>
+    <p>{'Related tags'|translate}<i class="gallery-icon-up-open rotated"></i></p>
+  </div>
+</div>
+
+{foreach from=$RELATED_TAGS item=tag}
+<span class="related-tags {if isset($RELATED_TAGS_DISPLAY) and $RELATED_TAGS_DISPLAY == false} hide{/if}">{strip}
+  <a class="tagLevel {if isset($tag.level)}{$tag.level}{/if}" href=
+  {if isset($tag.U_ADD)}
+    "{$tag.U_ADD}" title="{$tag.counter|@translate_dec:'%d photo is also linked to current tags':'%d photos are also linked to current tags'}" rel="nofollow">
+  {else}
+    "{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
+  {/if}
+    + {$tag.name}</a><div class="tag-counter">{$tag.counter}</div></span>{/strip}
+{/foreach}
+
+{footer_script require='jquery'}
+
+$(document).ready(function () { 
+  $('#related-tags-toggle').on("click", function (e) { 
+    $('.related-tags').toggle();
+    $('#related-tags-toggle .gallery-icon-up-open').toggleClass('rotated'); 
+  }); 
+});
+
+{/footer_script}
\ No newline at end of file
diff --git a/themes/default/template/include/selected_tags.inc.tpl b/themes/default/template/include/selected_tags.inc.tpl
new file mode 100644
index 000000000..1f371f788
--- /dev/null
+++ b/themes/default/template/include/selected_tags.inc.tpl
@@ -0,0 +1,14 @@
+<span id="selected-tags-container">
+
+{foreach $SELECT_RELATED_TAGS as $TAG}
+  <span class="selected-related-tag">
+    <a href="{$TAG.index_url}" title="{'display photos linked to this tag'|translate}">
+      {$TAG.tag_name}
+    </a>
+    <a class="selected-related-tag-remove" href="{$TAG.remove_url}" style="border:none;" title="{'remove this tag from the list'|translate}">
+      <i class="gallery-icon-cancel"></i>
+    </a>
+  </span>{if !$TAG@last}<span class="related-tag-condition">+</span>{/if}
+{/foreach}
+
+</span>
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index e767e05e0..5331bb7be 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -1,4 +1,5 @@
 {combine_script id='core.switchbox' load='async' require='jquery' path='themes/default/js/switchbox.js'}
+{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
 
 {$MENUBAR}
 
@@ -13,11 +14,29 @@
 <div class="titrePage{if isset($chronology.TITLE)} calendarTitleBar{/if}">
 	<ul class="categoryActions">
 {if isset($SEARCH_IN_SET_ACTION) and $SEARCH_IN_SET_ACTION}
-	  {combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
     <li id="cmdSearchInSet"><a href="{$SEARCH_IN_SET_URL}" title="{'Search in this set'|translate}" class="pwg-state-default pwg-button" rel="nofollow">
       <span class="gallery-icon-search-folder"></span><span class="pwg-button-text">{'Search in this set'|translate}</span>
     </a></li>
 {/if}
+
+{* We want the related tags action icon on all pages except the index and tag pages*}
+{if isset($RELATED_TAGS_ACTION) and $RELATED_TAGS_ACTION}
+    <li>{strip}<a id="cmdRelatedTags" title="{'Related tags'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon gallery-icon-tag"></span><span class="pwg-button-text">{'Related tags'|@translate}</span>
+		</a>
+		<div id="relatedTagsBox" class="switchBox">
+			<div class="switchBoxTitle">{'Related tags'|@translate}</div>
+	{foreach from=$RELATED_TAGS item=tag}
+			<a href=
+				"{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
+				{$tag.name}
+      </a>
+	{/foreach}
+		</div>
+		{footer_script}(window.SwitchBox=window.SwitchBox||[]).push("#cmdRelatedTags", "#relatedTagsBox");{/footer_script}
+		{/strip}</li>
+{/if}
+
 {if !empty($image_orders)}
 		<li>{strip}<a id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 			<span class="pwg-icon pwg-icon-sort"></span><span class="pwg-button-text">{'Sort order'|@translate}</span>
@@ -97,7 +116,13 @@
 {if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
 	</ul>
 
-<h2>{$TITLE} {if $NB_ITEMS > 0}<span class="badge nb_items">{$NB_ITEMS}</span>{/if}</h2>
+<div id="breadcrumb">
+  <h2>{$TITLE}
+    {if $NB_ITEMS > 0}<span class="badge nb_items">{$NB_ITEMS}</span>{/if}
+  </h2>
+
+{$SELECTED_TAGS_TEMPLATE}
+</div>
 
 {if isset($chronology_views)}
 <div class="calendarViews">{'View'|@translate}:
@@ -157,14 +182,20 @@
 {include file=$FILE_CHRONOLOGY_VIEW}
 {/if}
 
+<div class="action-buttons">
+
 {if isset($SEARCH_IN_SET_BUTTON) and $SEARCH_IN_SET_BUTTON}
-<div class="mcs-side-results search-in-set-button">
-  <div>
-    <p><a href="{$SEARCH_IN_SET_URL}" class="gallery-icon-search-folder" rel="nofollow">{'Search in this set'|translate}</a></p>
+  <div class="mcs-side-results search-in-set-button">
+    <div>
+      <p><a href="{$SEARCH_IN_SET_URL}" class="gallery-icon-search-folder" rel="nofollow">{'Search in this set'|translate}</a></p>
+    </div>
   </div>
-</div>
 {/if}
 
+{include file='include/related_tags.inc.tpl'}
+
+</div>
+
 {if !empty($CONTENT_DESCRIPTION)}
 <div class="additional_info">
 	{$CONTENT_DESCRIPTION}
diff --git a/themes/default/template/menubar_tags.tpl b/themes/default/template/menubar_tags.tpl
index 2ef7daf16..b19cb543d 100644
--- a/themes/default/template/menubar_tags.tpl
+++ b/themes/default/template/menubar_tags.tpl
@@ -1,4 +1,4 @@
-<dt>{if $IS_RELATED}{'Related tags'|@translate}{else}{'Tags'|@translate}{/if}</dt>
+<dt>{'Tags'|@translate}</dt>
 <dd>
 	<div id="menuTagCloud">
 		{foreach from=$block->data item=tag}
diff --git a/themes/default/theme.css b/themes/default/theme.css
index d81fe9b46..e58b73a88 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -840,19 +840,12 @@ LEGEND {
     padding: 0px 5px !important;
 }
 
-#TagsGroupRemoveTag span,
-#TagsGroupRemoveTag i{
-  display:none;
-}
-
 /* Search in this set button CSS, 
-Needs to be loaded herre because we don't use it on the search pages but on other pages
+Needs to be loaded here because we don't use it on the search pages but on other pages
 it won't be loaded if it goes in the search specific css
 because of this it needs to specifically be added to each theme */
-.mcs-side-results.search-in-set-button {
-  /* margin-top:-15px; */
-  margin-bottom: 30px;
-}
+
+/*the related tags button also uses this css*/
 .mcs-side-results.search-in-set-button p {
   margin:0;
 }
@@ -873,7 +866,7 @@ because of this it needs to specifically be added to each theme */
   display: flex;
   flex-direction: row;
   gap: 5px;
-  margin: 15px 0 0 15px;
+
 }
 
 .mcs-side-results > div {
@@ -915,3 +908,93 @@ because of this it needs to specifically be added to each theme */
   font-size: 10px;
   background: #777;
 }
+
+.action-buttons{
+  display:flex;
+  align-items:start;
+  flex-wrap:wrap;
+  margin-bottom: 20px;
+  padding:0 15px;
+}
+
+#related-tags-toggle i{
+  margin-left:5px;
+}
+
+#related-tags-toggle i::before {
+  transition: transform 0.3s ease;
+}
+
+#related-tags-toggle i.rotated::before {
+  transform: rotate(90deg);
+} 
+
+.related-tags.hide{
+  display:none;
+}
+
+span.related-tags{
+  padding:3px 5px;
+  border:1px solid #D6D6D6;
+  margin:3px;
+  border-radius:15px;
+}
+
+span.related-tags a{
+  font-weight:700;
+  color:#787878;
+}
+
+span.related-tags .tag-counter{
+  display: inline-block;
+  margin-left: 7px;
+  color:#D6D6D6;
+}
+
+#relatedTagsBox.switchBox A {
+  padding:unset;
+  display:block;
+}
+
+#selected-tags-container{
+  margin:0 15px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#selected-tags-container .selected-related-tag {
+  background-color: #FCEAD2;
+  border:1px solid #FF7700;
+  color:#ff7700;
+  border-radius:15px;
+  padding:2px 10px;
+  padding-right:5px;
+}
+
+#selected-tags-container .selected-related-tag a{
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 12px;
+  color:#ff7700;
+  }
+
+#selected-tags-container .selected-related-tag a.selected-related-tag-remove:hover{
+  text-decoration:none;
+  color:#000;
+}
+
+.related-tag-condition{
+  background-color:#FAFAFA;
+  border-bottom: 1px solid #D0D2D5;
+  border-radius:5px;
+  margin:0 5px 0 15px;
+  font-weight:900;
+  font-size:20px;
+  padding:0 5px;
+  color:#777777;
+}
+
+#breadcrumb{
+  display:flex;
+  align-items: baseline;
+}