.ccm-page .bread-container {
min-height:3rem 
}

.ccm-page .breadcrumb {
  background-color: #9261aa!important;
  border-radius: 0px;
  width: fit-content;
  min-width: 300px;
  position: relative;
  padding-right: 50px!important;
  border-radius: 0px!important;
}
.ccm-page .breadcrumb a {
  color: #fff;
  font-weight: 600; }

.ccm-page .breadcrumb .active, .ccm-page .breadcrumb a:hover {
  color: #fff!important;
}
.ccm-page.breadcrumb:after {
  height: 100%;
  width: calc(100% - 70px);
  background-color: white;
  position: absolute;
  content: "";
  transform: rotate(130deg);
  transform-origin: bottom right;
}
.ccm-page .breadcrumb-item, .breadcrumb-item::before{
	color: #fff!important;}

/* pull the main element up after breadcrumb */
.ccm-page .bread-container + main {
  margin-top: -3rem;
}

/* add top padding only to the very first div inside main */
.ccm-page .bread-container + main > div:first-child {
  padding-top: 4rem!important;
}