/* Opacity */
.opacity-1 {opacity: 0.1 !important;}
.opacity-2 {opacity: 0.2 !important;}
.opacity-3 {opacity: 0.3 !important;}
.opacity-4 {opacity: 0.4 !important;}
.opacity-5 {opacity: 0.5 !important;}
.opacity-6 {opacity: 0.6 !important;}
.opacity-7 {opacity: 0.7 !important;}
.opacity-8 {opacity: 0.8 !important;}
.opacity-9 {opacity: 0.9 !important;}

/* ==========================
   Dark Violet Theme
   Primary: #6A0DAD
   ========================== */

.theme-l5 {color:#000 !important; background-color:#f5f0fb !important;}
.theme-l4 {color:#000 !important; background-color:#e8d8f7 !important;}
.theme-l3 {color:#000 !important; background-color:#d2b2ef !important;}
.theme-l2 {color:#fff !important; background-color:#b98be6 !important;}
.theme-l1 {color:#fff !important; background-color:#9255d4 !important;}

.theme {color:#fff !important; background-color:#6A0DAD !important;}

.theme-d1 {color:#fff !important; background-color:#5d0b99 !important;}
.theme-d2 {color:#fff !important; background-color:#500985 !important;}
.theme-d3 {color:#fff !important; background-color:#430771 !important;}
.theme-d4 {color:#fff !important; background-color:#36055d !important;}
.theme-d5 {color:#fff !important; background-color:#290449 !important;}

.theme-light {
    color:#000 !important;
    background-color:#f5f0fb !important;
}

.theme-dark {
    color:#fff !important;
    background-color:#290449 !important;
}

.theme-action {
    color:#fff !important;
    background-color:#290449 !important;
}

.text-theme {
    color:#6A0DAD !important;
}

.border-theme {
    border-color:#6A0DAD !important;
}

.hover-theme:hover {
    color:#fff !important;
    background-color:#6A0DAD !important;
}

.hover-text-theme:hover {
    color:#6A0DAD !important;
}

.hover-border-theme:hover {
    border-color:#6A0DAD !important;
}

/* ==========================
   UI Colors
   ========================== */

.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:#6A0DAD !important;
}

.ui-purple {
    background-color:#8000FF !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;
}