/*
Tasks:
-- create responsive breadcrumb with scroller
-- create responsive breadcrumb with the first and last item and a button that shows all options

*/

/*
=====
DEPENDENCES
=====
*/

.r-list{
  --uirListPaddingLeft: var(--rListPaddingLeft, 0);
  --uirListMarginTop: var(--rListMarginTop, 0);
  --uirListMarginBottom: var(--rListMarginBottom, 0);
  --uirListListStyle: var(--rListListStyle, none);

  padding-left: var(--uirListPaddingLeft) !important;
  margin-top: var(--uirListMarginTop) !important;
  margin-bottom: var(--uirListMarginBottom) !important;
  list-style: var(--uirListListStyle) !important;
}

.r-link{
  --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
  --uirLinkTextColor: var(--rLinkTextColor);
  --uirLinkTextDecoration: var(--rLinkTextDecoration, none);
  display: var(--uirLinkDisplay) !important;
 
  font-weight:bold;
  text-decoration: var(--uirLinkTextDecoration) !important;
}

/*
=====
COMPONENT
=====
*/

.breadcrumb{
  --uiBreadcrumbDividerColor: var(--breadcrumbDividerColor, inherit);
  --uiBreadcrumbDividerSize: var(--breadcrumbDividerSize, 1rem);
  --uiBreadcrumbIndent:  var(--breadcrumbIndent, .75rem);
  background-color:transparent !important;}
   padding:0px;}

.breadcrumb__list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--uiBreadcrumbIndent);
}

.breadcrumb__group{
  display: inline-flex;
  align-items: center;
  
}


 

.breadcrumb__divider{
  margin-left: var(--uiBreadcrumbIndent);
  font-size: 50px;
  font-weight:bold;
  color:green;
margin-top:-0.5px;
  
}

/*
=====
SKIN
=====
*/

.breadcrumb{
  --uiBreadcrumbTextColor: var(--breadcrumbTextColor);
  --uiBreadcrumbTextColorActive: var(--breadcrumbTextColorActive);
   padding:0px;
  --breadcrumbDividerColor: var(--uiBreadcrumbTextColor);
  --rLinkTextColor: var(--uiBreadcrumbTextColor);
}

.breadcrumb__divider{
  color: var(--uiBreadcrumbDividerColor);
}

span.breadcrumb__point{
  color: var(--uiBreadcrumbTextColorActive);
}

/*
=====
SETTINGS
=====
*/

:root{
  --breadcrumbTextColor: #D1C4E9;  
  --breadcrumbTextColorActive: #fff;  
}

.breadcrumb_type2{
  --breadcrumbDividerSize: 20px;
}

.breadcrumb_type3{
  --breadcrumbDividerSize: 18px;
}

.breadcrumb_type4{
  --breadcrumbDividerSize: 14px;
}

.breadcrumb_type5{
  --breadcrumbDividerSize: 20px;
   padding:0px;
}

.breadcrumb_type6{
  --breadcrumbDividerSize: 14px;
}

/*
=====
DEMO
=====
*/



.page{
  box-sizing: border-box;
  max-width: 600px;
  padding: 3rem 1rem;
  margin-left: auto;
  margin-right: auto;    
}

.page__section{
  padding:0px Important!;
  
 
  border-radius: 2px;
}

.page__section:nth-of-type(n+2){
   margin-top: 2.5rem;
}
@media screen and (max-width: 1190px) {
  .breadcrumb__divider{
  margin-left: var(--uiBreadcrumbIndent);
  font-size: 50px;
  font-weight:bold;
  color:green;
margin-top:7px;
  
}
}