.panel {
    height : 100%;
    border : 1px solid #eaeaea
}
.ribbon {
    font-size: 15px !important;      
    position: relative; 
    padding: 9px 0 9px 35px!important;
}
.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;    
    top: calc(50% - 18px);
}
.ribbon:after {
    border: 18px solid transparent;
    right: -36px;
    border-left-width: 18px;
}
.ribbon-label{
    position: absolute;
    top: calc(50% - 26px);
    left: -18px;
    height: 52px;
    width: 52px;
    background: #ffffff;
    font-size: 22px;
}
.ribbon-1{
    background: #ba89b6;
}
.ribbon-1:before {   
    border: 18px solid #ba89b6;
}
.ribbon-1:after {
    border-left-color: #ba89b6;
}
.ribbon-1 .ribbon-label{
    border: 5px solid #ba89b6;
    color: #ba89b6;
}
.ribbon-2{
    background: #083044;
}
.ribbon-2:before {   
    border: 18px solid #083044;
}
.ribbon-2:after {
    border-left-color: #083044;
}
.ribbon-2 .ribbon-label{
    border: 5px solid #083044;
    color: #083044;
}
.ribbon-3{
    background: #BA5219;
}
.ribbon-3:before {   
    border: 18px solid #BA5219;
}
.ribbon-3:after {
    border-left-color: #BA5219;
}
.ribbon-3 .ribbon-label{
    border: 5px solid #BA5219;
    color: #BA5219;
}
.ribbon-4{
    background: #0F7492;
}
.ribbon-4:before {   
    border: 18px solid #0F7492;
}
.ribbon-4:after {
    border-left-color: #0F7492;
}
.ribbon-4 .ribbon-label{
    border: 5px solid #0F7492;
    color: #0F7492;
}
.ribbon-5{
    background: #A9922F;
}
.ribbon-5:before {   
    border: 18px solid #A9922F;
}
.ribbon-5:after {
    border-left-color: #A9922F;
}
.ribbon-5 .ribbon-label{
    border: 5px solid #A9922F;
    color: #A9922F;
}
.ribbon-6{
    background: #831F12;
}
.ribbon-6:before {   
    border: 18px solid #831F12;
}
.ribbon-6:after {
    border-left-color: #831F12;
}
.ribbon-6 .ribbon-label{
    border: 5px solid #831F12;
    color: #831F12;
}
.ribbon-7{
    background: #F4B069;
}
.ribbon-7:before {   
    border: 18px solid #F4B069;
}
.ribbon-7:after {
    border-left-color: #F4B069;
}
.ribbon-7 .ribbon-label{
    border: 5px solid #F4B069;
    color: #F4B069;
}
.ribbon:before {
    left: -42px;    
    border-left-color: transparent;
}