1<style> 
				2.breadcrumbsComponent.breadcrumbsComponent-desktop{ 
				3	height: auto; 
				4} 
				5.breadcrumbsComponent.breadcrumbsComponent-desktop .breadcrumb-item + .breadcrumb-item::before{ 
				6  display: none !important; 
				7} 
				8.breadcrumbsComponent.breadcrumbsComponent-desktop li{ 
				9  padding: 0 !important; 
				10} 
				11 
				12.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item, 
				13.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item a{ 
				14	height: var(--gs-base-line-height-xs) !important; 
				15	line-height: var(--gs-base-line-height-xs) !important; 
				16	display: flex; 
				17} 
				18.breadcrumbsComponent.breadcrumbsComponent-desktop i.gs-icon-chevron-right { 
				19    align-items: center; 
				20    display: inline-flex; 
				21	font-size: 8px; 
				22    padding: 0 6px; 
				23} 
				24.portlet-boundary_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_{ 
				25    display: flex; 
				26} 
				27#breadcrumbs .portlet-breadcrumb > section.portlet { 
				28    float: unset; 
				29    width: 100%; 
				30} 
				31 
				32.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item > span{ 
				33	line-height: normal !important; 
				34    height: var(--gs-base-line-height-xs) !important; 
				35    color: var(--gs-base-color-eu-gray-80); 
				36    margin-bottom: unset !important; 
				37	min-height: 18px; 
				38} 
				39button { 
				40  padding: 1px 3px; 
				41  border: 1px solid rgb(175, 175, 175); 
				42  border-radius: 3px; 
				43} 
				44section#portlet_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_INSTANCE_breadcrumbISG { 
				45    float: left; 
				46    width: 100%; 
				47	padding-left: 24px; 
				48} 
				49.breadcrumbsComponent .icon-home-grey { 
				50    height: 15px !important; 
				51    overflow: hidden; 
				52} 
				53.breadcrumbsComponent .icon-home-grey::before { 
				54    height: 15px !important; 
				55    margin-top: 0; 
				56    margin-right: 0; 
				57} 
				58.breadcrumbsComponent.breadcrumbsComponent-desktop { 
				59	padding: 7px 16px 7px 0; 
				60} 
				61.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item, 
				62.breadcrumbsComponent.breadcrumbsComponent-desktop li.breadcrumb-item i{ 
				63	margin: 5px 0; 
				64} 
				65 
				66.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button a:focus-visible { 
				67    outline: 2px solid var(--gs-base-color-link-100) !important; 
				68    outline-offset: 2px !important; 
				69} 
				70.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button a svg{ 
				71	margin: auto; 
				72} 
				73 
				74.breadcrumbsComponent.breadcrumbsComponent-desktop #breadcrumbs-button.no-arrow i{ 
				75	display: none !important; 
				76} 
				77 
				78@media (max-width:991.5px){ 
				79	 
				80	.site-class-8541614.page-class-bibliographic-details #globalnav .global-nav-middle, 
				81	.site-class-10184.page-class-publication-detail #globalnav .global-nav-middle { 
				82        display: block !important; 
				83    } 
				84    .site-class-8541614.page-class-bibliographic-details .maincontentarea, 
				85    .site-class-10184.page-class-publication-detail .maincontentarea{ 
				86        padding-top: 0 !important; 
				87    } 
				88	.site-class-10184.page-class-publication-detail .maincontentarea .page-title-publication-detail h2 + a{ 
				89		display: none !important; 
				90	} 
				91	.site-class-8541614.page-class-bibliographic-details .portlet-breadcrumb,  
				92	.site-class-11197864 .portlet-breadcrumb,  
				93	.site-class-11197864 .portlet-breadcrumb,  
				94	.layout-class-portal2012-layout-isg .portlet-breadcrumb { 
				95        height: auto; 
				96    } 
				97	.site-class-10184.page-class-publication-detail .global-nav-middle div#tabnav, 
				98	.site-class-8541614.page-class-bibliographic-details .global-nav-middle div#tabnav, 
				99	.site-class-13664221.page-class-procurement-details .global-nav-middle div#tabnav { 
				100		min-width: 100%; 
				101		max-width: 100%; 
				102	} 
				103} 
				104@media (max-width:767.5px){ 
				105	section#portlet_com_liferay_site_navigation_breadcrumb_web_portlet_SiteNavigationBreadcrumbPortlet_INSTANCE_breadcrumbISG { 
				106		padding-left: 0; 
				107	} 
				108} 
				109</style> 
				110<#if entries?has_content> 
				111	<#assign count = 0> 
				112	<#assign last_url = ""> 
				113	<#assign previous_url = ""> 
				114	<#assign previous_name = ""> 
				115	 
				116	<#assign item1 = ""> 
				117	<#assign item2 = ""> 
				118	<#assign item3 = ""> 
				119	<#assign hasIdenticalURL = false> 
				120	 
				121	 
				122	<#assign languageId = localeUtil.toLanguageId(locale) />				   
				123	<#assign languageIdBrowse = localeUtil.fromLanguageId(languageId).getLanguage() />				   
				124	<#assign slash = "/" />				   
				125	<#assign siteRoot = "/content/" />	 
				126	<#assign siteRootWithLang = "/" + languageIdBrowse + "/content/" /> 
				127	 
				128	<#list entries as entry> 
				129 
				130		<#assign count = count+1> 
				131 
				132		<#if entry?has_next> 
				133			<#assign previous_url = entry.getURL()!""> 
				134		</#if> 
				135		 
				136		<#if count == 1> 
				137			<#assign item1 = entry.getURL()!""> 
				138		<#elseif count == 2> 
				139			<#assign item2 = entry.getURL()!""> 
				140		<#elseif count == 3> 
				141			<#assign item3 = entry.getURL()!""> 
				142		</#if> 
				143 
				144		<#if entry.getURL()?? && entry.getURL() != "" > 
				145			<#assign last_url = entry.getURL()?replace(siteRoot, siteRootWithLang)> 
				146		</#if> 
				147	</#list> 
				148		 
				149    <#assign isFirst = true> 
				150	<#if (count == 2 && item2?contains(item1) && item2?contains("/home")) || (count == 3 && item3?contains(item2) && item3?contains("/home"))> 
				151		<#assign hasIdenticalURL = true> 
				152		 
				153	</#if> 
				154	 
				155	<ol class="breadcrumb breadcrumbsComponent breadcrumbsComponent-desktop" style="display: flex !important;"> 
				156		<#assign countd = 0> 
				157        <#list entries as entry> 
				158		 
				159		<#assign labelCodePart = ""> 
				160		<#list entry.getURL()?split("/web/") as x> 
				161			<#if !x?contains("/")> 
				162				<#assign labelCodePart = x> 
				163			</#if> 
				164		</#list> 
				165		 
				166			<#assign countd = countd+1> 
				167            <li class="breadcrumb-item"> 
				168                <#if entry?has_next> 
				169                    <#if isFirst> 
				170						<#if ((entry.getURL()!"")?contains("/web/eu-law-and-publications") && !(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")?contains("/web"))  
				171							|| (entry.getURL()!"") == ("https://beta.op.europa.eu/" + languageIdBrowse + "/") 
				172							|| (entry.getURL()!"") == ("https://op.europa.eu/" + languageIdBrowse + "/") > 
				173                        <a class="breadcrumb-link" href="${(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}"> 
				174                            <span class="breadcrumb-text-truncate"><@liferay_ui["message"] key="eu.europa.publications.Common.guestSiteShort" /></span>					 
				175                        </a> 
				176						<#elseif (entry.getURL()!"")?contains("dorie.ec.europa.eu") || (entry.getURL()!"")?contains("style-guide.europa.eu") || (entry.getURL()!"")?contains("style-guide.beta.op.europa.eu")> 
				177						<a class="breadcrumb-link" href="${(entry.getURL()!"")}" title='<@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" />'> 
				178                            <span class="breadcrumb-text-truncate"><@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" /></span>					 
				179                        </a> 
				180						<#else> 
				181						<a class="breadcrumb-link" href="${(entry.getURL()!"")?replace("/web/eu-law-and-publications", "/home")}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}"> 
				182                            <span  
				183								class="breadcrumb-text-truncate"  
				184								withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />' 
				185								>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</span>					 
				186                        </a> 
				187						</#if> 
				188						<i class="gs-icon-chevron-right" aria-hidden="true"></i> 
				189					<#elseif countd == 2 && hasIdenticalURL> 
				190						<span class="active breadcrumb-text-truncate"  
				191								withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />' 
				192								><#if entry.getTitle()?has_content>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</#if></span>					 
				193                    <#else> 
				194                        <a class="breadcrumb-link" href="${entry.getURL()!""}" title="${entry.getTitle()?replace('<([^>]+)>', '', 'r')}"> 
				195                            <span class="breadcrumb-text-truncate"  
				196								withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />' 
				197								>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</span> 
				198                        </a> 
				199						<i class="gs-icon-chevron-right" aria-hidden="true"></i> 
				200                    </#if> 
				201					 
				202                <#elseif !hasIdenticalURL> 
				203                    <#if isFirst> 
				204                        <span class="active breadcrumb-text-truncate"  
				205								withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />' 
				206								><@liferay_ui["message"] key="eu.europa.publications.MyPortal.Home" /></span> 
				207                    <#else> 
				208                        <span class="active breadcrumb-text-truncate"  
				209								withliferaylabel='<@liferay_ui["message"] key="eu.europa.publications.breadcrumbs.site.name.${labelCodePart}" />' 
				210								><#if entry.getTitle()?has_content>${entry.getTitle()?replace('<([^>]+)>', '', 'r')}</#if></span> 
				211                    </#if> 
				212                </#if> 
				213            </li> 
				214			<#if (isFirst && (count > 1))>  
				215				<li class="breadcrumb-item d-none" id="breadcrumbs-button" client-width="50"> 
				216					<a href="#" id="show-breadcrumbs" title="Show more breadcrumbs"><svg width="23" height="14" viewBox="0 0 23 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 
				217					<rect x="0.5" width="22" height="14" rx="2" fill="#E7EDFA"/> 
				218					<path d="M5.64844 8V5.80469H7.84375V8H5.64844ZM10.1016 8V5.80469H12.2969V8H10.1016ZM14.5547 8V5.80469H16.75V8H14.5547Z" fill="#0E47CB"/> 
				219					</svg></a><i class="gs-icon-chevron-right" aria-hidden="true"></i> 
				220				</li> 
				221			</#if> 
				222            <#assign isFirst = false> 
				223        </#list> 
				224    </ol> 
				225	<script> 
				226		$(".breadcrumbsComponent-desktop li span").each(function( index ) { 
				227		  var attrVal = $( this )[0].getAttribute("withliferaylabel"); 
				228		  if(attrVal != null && attrVal != "" && !attrVal.includes("eu.europa.publications.breadcrumbs.site.name.")){ 
				229			$( this )[0].textContent = attrVal; 
				230		  } 
				231		}); 
				232	</script> 
				233</#if> 
				234 
				235<script> 
				236var prevLast = $(".breadcrumbsComponent-desktop li:last").prev("li"); 
				237var listSize = $(".breadcrumbsComponent-desktop li").length; 
				238var listHeight = $("ol.breadcrumbsComponent-desktop").height(); 
				239var breadcrumbDesktopOL = document.querySelector('ol.breadcrumbsComponent-desktop'); 
				240var breadcrumbDesktopOLWidth = breadcrumbDesktopOL.clientWidth; 
				241 
				242$(".breadcrumbsComponent-desktop li:not(#breadcrumbs-button.breadcrumb-item)").each(function( index ) { 
				243  $( this )[0].setAttribute("client-width", ($( this )[0].clientWidth + 6)); 
				244}); 
				245 
				246//function to adapt the breadcrumb size 
				247function adaptBreadcrumbDesktopOL() { 
				248	var breadcrumbDesktopOL = document.querySelector('ol.breadcrumbsComponent-desktop'); 
				249	var bcElemWidth = breadcrumbDesktopOL.clientWidth; 
				250	//debugger; 
				251	var listSize = $(".breadcrumbsComponent-desktop li").length; 
				252	 
				253	//only for tablet or bigger and when there are more items in breadcrubs 
				254	if(listSize > 2){ 
				255		var bcItems = $(".breadcrumbsComponent-desktop li:not(#breadcrumbs-button.breadcrumb-item)"); 
				256		var lengthThatFits = parseInt(bcItems[0].getAttribute("client-width")) + ($('#breadcrumbs-button') && $('#breadcrumbs-button').hasClass("d-none") ? 0 : 50); 
				257		//console.log("lengthThatFits: ", lengthThatFits); 
				258		var maxWidthLastItem = bcItems[bcItems.length - 1].querySelector('span').textContent.length * 7; //6.75 
				259		 
				260		//console.log("maxWidthLastItem + lengthThatFits: ", (maxWidthLastItem + lengthThatFits)); 
				261		//console.log("bcElemWidth: ", bcElemWidth); 
				262		var maxWidthLastItemSpan = maxWidthLastItem; 
				263		if((maxWidthLastItem + lengthThatFits) > bcElemWidth){ 
				264			maxWidthLastItem = bcElemWidth - lengthThatFits - 17; 
				265			maxWidthLastItemSpan = maxWidthLastItem; 
				266		} 
				267		if(maxWidthLastItem <= 70){ 
				268			maxWidthLastItem = 70; 
				269			maxWidthLastItemSpan = 63; 
				270		} 
				271		bcItems[bcItems.length - 1].setAttribute("client-width", maxWidthLastItem); 
				272		bcItems[bcItems.length - 1].querySelector('span').style.maxWidth = maxWidthLastItemSpan + 'px'; 
				273		 
				274		//if there is enough space, add it to the last item 
				275		if(bcElemWidth - (maxWidthLastItem + lengthThatFits) > 70){ 
				276			bcItems[bcItems.length - 1].setAttribute("client-width", (maxWidthLastItem + 70)); 
				277			bcItems[bcItems.length - 1].querySelector('span').style.maxWidth = (maxWidthLastItemSpan + 70) + 'px'; 
				278		} 
				279		 
				280		for( var i = (bcItems.length - 1) ; i > 0 ; i--){ 
				281			lengthThatFits += (bcItems[i].getAttribute("client-width") != null ? parseInt(bcItems[i].getAttribute("client-width")) : 288); 
				282			 
				283			if(lengthThatFits < bcElemWidth){ 
				284				bcItems[i].classList.remove("d-none"); 
				285				$('#breadcrumbs-button').addClass("d-none"); 
				286			}else{ 
				287				bcItems[i].classList.add("d-none"); 
				288				$('#breadcrumbs-button').removeClass("d-none"); 
				289			} 
				290		} 
				291		 
				292		if($(".breadcrumbsComponent-desktop li").last().hasClass("d-none") && !($('#breadcrumbs-button').hasClass("d-none"))){ 
				293			$('#breadcrumbs-button').addClass("no-arrow"); 
				294		}else{ 
				295			$('#breadcrumbs-button').removeClass("no-arrow"); 
				296		} 
				297	} 
				298} 
				299 
				300//call the adapt function after the breadcrumbs are generated. 
				301adaptBreadcrumbDesktopOL(); 
				302 
				303//create a resize observer for the breadcrumbs 
				304var resizeObserverBCD = new ResizeObserver(adaptBreadcrumbDesktopOL); 
				305if (!resizeObserverBCD){ 
				306  resizeObserverBCD = new WebKitResizeObserver(adaptBreadcrumbDesktopOL); 
				307} 
				308	 
				309resizeObserverBCD.observe(breadcrumbDesktopOL); 
				310 
				311//show all the breadcrumbs when the button is clicked 
				312$("#show-breadcrumbs").click(function() { 
				313  $(".breadcrumbsComponent-desktop li") 
				314    .not("#breadcrumbs-button") 
				315    .removeClass("d-none"); 
				316	 
				317	//keep the button hidden now 
				318	$('#breadcrumbs-button').addClass("d-none"); 
				319	  
				320	//disconect the resize observer 
				321	resizeObserverBCD.disconnect(); 
				322	 
				323	//reset max-width of last element 
				324	$(".breadcrumbsComponent-desktop li").last()[0].querySelector('span').style.maxWidth = ""; 
				325	 
				326	//then, focus te first breadcrumb element 
				327	$(".breadcrumbsComponent-desktop li:first a").focus(); 
				328}); 
				329 
				330</script>