.theme-l5 {color:#000 !important; background-color:#faf1f3 !important} /* very light pink */
.theme-l4 {color:#000 !important; background-color:#f5d6dd !important} /* pastel pink */
.theme-l3 {color:#000 !important; background-color:#eba8b9 !important} /* medium pink */
.theme-l2 {color:#fff !important; background-color:#e07a95 !important} /* brighter pink */
.theme-l1 {color:#fff !important; background-color:#d44c71 !important} /* strong pink */

.theme-d1 {color:#fff !important; background-color:#a83755 !important} /* dark pink */
.theme-d2 {color:#fff !important; background-color:#93304a !important}
.theme-d3 {color:#fff !important; background-color:#7e2940 !important}
.theme-d4 {color:#fff !important; background-color:#692235 !important}
.theme-d5 {color:#fff !important; background-color:#541b2b !important} /* darkest pink */

.theme-light {color:#000 !important; background-color:#faf1f3 !important}
.theme-dark {color:#fff !important; background-color:#541b2b !important}
.theme-action {color:#fff !important; background-color:#7e2940 !important}

.theme {color:#fff !important; background-color:#d44c71 !important} /* primary pink */
.text-theme {color:#d44c71 !important}
.border-theme {border-color:#d44c71 !important}

.hover-theme:hover {color:#fff !important; background-color:#d44c71 !important}
.hover-text-theme:hover {color:#d44c71 !important}
.hover-border-theme:hover {border-color:#d44c71 !important}

.ui-red{background-color:#B03060 !important}
.ui-orange{background-color:#FE9A76  !important}
.ui-yellow{ background-color:#FFD700 !important}
.ui-olive{ background-color:#32CD32 !important}
.ui-green{ background-color:#016936 !important}
.ui-teal{ background-color:#008080 !important}
.ui-blue{ background-color:#0E6EB8 !important}
.ui-violet{ background-color:#EE82EE !important}
.ui-purple{ background-color:#B413EC !important}
.ui-pink{ background-color:#FF1493 !important}
.ui-brown{ background-color:#A52A2A !important}
.ui-grey{ background-color:#A0A0A0 !important}
.ui-black{ background-color:#000000 !important}


 .breadcrumb{
 display: inline-block;
 overflow: hidden;
 border-radius: 10px;
 counter-reset: flag;
 padding: 5px;

}

.breadcrumb a{
 text-decoration: none;
 outline: none;
 display: block;
 float: left;
 font-size: 12px;
 line-height: 36px;
 color:#fff;
 padding: 0 10px 0 60px;
 position: relative;
 margin-bottom: 5px;
}
.breadcrumb2 a{
 text-decoration: none;
 outline: none;
 display: block;
 float: left;
 font-size: 12px;
 line-height: 36px;
 color:#fff;
 padding: 0 10px 0 10px;
 width:100px;
 margin-bottom: 5px;
}
.breadcrumb a:first-child{
 padding-left: 46px;
 border-radius: 10px 0 0 5px;
}
.breadcrumb a:first-child::before{
 left: 14px;
}
.breadcrumb a:last-child{
 border-radius: 0 5px 5px 0;
 padding-right: 20px;
}
.breadcrumb a::after{
 content: "";
 position: absolute;
 top: 0;
 right: -18px;
 width: 36px;
 height: 36px;
 transform: scale(0.707) rotate(45deg);
 z-index: 1;
 box-shadow: 
 2px -2px 0 2px #00000018,
 3px -3px 0 2px #ffffff1a;
 border-radius: 0 5px 0 50px;
}
.breadcrumb a:last-child::after{
 content: none;
}
.breadcrumb a::before{
 content: counter(flag);
 counter-increment: flag;
 border-radius: 100%;
 width: 20px;
 height: 20px;
 line-height: 20px;
 margin: 8px 0;
 position: absolute;
 top: 0;
 padding-left: 6px;
 left: 30px;
 background: #444;
 background: linear-gradient(#444, #222);
 font-weight: bold;
}
.flat a, .flat a::after{
 background: #fff;
 color: #000;
 transition: all 0.5s;
}
.flat a::before{
 background: #fff;
 box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover::after, .flat a.active::after{
 background: #9EEB62;
}