/***********************************************
partbreadcrumb-2.0.1
***********************************************/

/*  partbreadcrumb-2 config or override */
.partBreadcrumb.partBreadcrumb2 {
	--partBreadcrumb2-font-size: 14px;
	--partBreadcrumb2-gap: 0.35714em; /* 5px */

	/* label */
	--partBreadcrumb2-color: #999; /* used for label + home icon */
	--partBreadcrumb2-color-hover: #000; /* used for label + home icon */
	--partBreadcrumb2-color-selected: #000;
	--partBreadcrumb2-font-weight-selected: 700;

	/* icon */
	--partBreadcrumb2-icon-fill: #999;
	--partBreadcrumb2-icon-width: 0.42857em; /* 6px based on 14 pixels */

	/* home icon */
	--partBreadcrumb2-home-icon-width: 0.85714em; /* 12px based on 14 pixels */
}

.partBreadcrumb.partBreadcrumb2 					                    {font-size: var(--partBreadcrumb2-font-size);}

	.partBreadcrumb.partBreadcrumb2 ul										{display:flex; flex-wrap:wrap; column-gap: var(--partBreadcrumb2-gap); background-color: rgba(255,255,255,0.8); padding:0px 20px; border-radius:15px; }

		/* li */
		.partBreadcrumb.partBreadcrumb2 li					                  	{display:flex; column-gap: var(--partBreadcrumb2-gap); }

			/* label */
			.partBreadcrumb.partBreadcrumb2 li .breadcrumbLabel 					{color: var(--partBreadcrumb2-color);  line-height: 25px; padding:0.21429em 0; /* padding top and bottom 3 pixels (based on 14 px) for better click area */}
			.partBreadcrumb.partBreadcrumb2 li a.breadcrumbLabel 					{color: inherit; text-decoration: none; transition: color 0.3s ease;}
			
				/* hover */
				@media (hover: hover) {
					.partBreadcrumb.partBreadcrumb2 li a.breadcrumbLabel:hover 			{text-decoration: underline; color: var(--partBreadcrumb2-color-hover); }
				}

				/* selected/last child */
				.partBreadcrumb.partBreadcrumb2 li:last-child .breadcrumbLabel 	  		{font-weight: var(--partBreadcrumb2-font-weight-selected); color: var(--partBreadcrumb2-color-selected);}	

			/* icon */
			.partBreadcrumb.partBreadcrumb2 li .breadcrumbIcon 						{display: flex; justify-content: center; align-items: center; padding:0px 10px;}
				.partBreadcrumb.partBreadcrumb2 li .breadcrumbIcon svg 					{width: var(--partBreadcrumb2-icon-width); fill:var(--partBreadcrumb2-color-hover);}

			/* home as icon */
			.partBreadcrumb.partBreadcrumb2 li .breadcrumbHomeIcon                 	{display: flex; justify-content: center; align-items: center;}
				.partBreadcrumb.partBreadcrumb2 li .breadcrumbHomeIcon svg              {width: var(--partBreadcrumb2-home-icon-width); fill: var(--partBreadcrumb2-color-hover); transition: fill 0.3s ease;}

				/* hover */
				@media (hover: hover) {
					.partBreadcrumb.partBreadcrumb2 li .breadcrumbHomeIcon:hover svg 		{fill: var(--partBreadcrumb2-color-hover);}
				}