@classification-banner-height: 28px;
@classification-banner-height-top: 3px;
@classification-banner-padding-lg: 42px;
@classification-banner-padding-sm: 20px;

.classification-banner-pf-banner{
    background: @color-pf-black;
    background-clip: padding-box;
    color: @color-pf-white;
    height: @classification-banner-height;
    line-height: @classification-banner-height;
    font-size: 12px;
    position: relative;
}

.classification-banner-pf-banner-top{
    width: 100%;
    height: 31px;
}
.classification-banner-pf-banner-top::before{
    content: '';
    background: rgba(255,255,255,0.5);
    display: block;
    width: 100%;
    height: 3px;
}

.classification-banner-pf-banner-bottom{
    width: 100%;
}

.classification-banner-pf-green{
    background: @color-pf-green;
}

.classification-banner-pf-red{
    background: @color-pf-red;
}

.classification-banner-pf-blue{
    background: @color-pf-blue;
}

.classification-banner-pf-orange{
    background: @color-pf-orange;
}

.classification-banner-pf-yellow{
    background: @color-pf-gold;
}

.classification-banner-pf-banner-left{
    position: absolute;
    left: @classification-banner-padding-lg;
    top: 50%;
    transform: translate(0,-50%);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.classification-banner-pf-banner-left > span:nth-of-type(2){
    border-left: 1px solid rgba(white, 0.5);
    border-right: 1px solid rgba(white, 0.5);
    padding: 0 @classification-banner-padding-sm;
}

.classification-banner-pf-banner-left > span:nth-of-type(1){
    padding-right: @classification-banner-padding-sm;
}

.classification-banner-pf-banner-right{
    position: absolute;
    right: @classification-banner-padding-sm;
    top: 50%;
    transform: translate(0,-50%);
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.classification-banner-pf-banner-right > span:nth-of-type(2){
    border-left: 1px solid rgba(white, 0.5);
    border-right: 1px solid rgba(white, 0.5);
    padding: 0 @classification-banner-padding-sm;
}

.classification-banner-pf-banner-right > span:nth-of-type(1){
    padding-left: @classification-banner-padding-sm;
}

.classification-banner-pf-close:before{
    color: @color-pf-white;
}

.classification-banner-pf-classification-level{
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    font-weight: bolder;
    font-size: 14px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.classification-banner-pf-children{
    height: calc(100vh - 59px);
}

.classification-banner-pf-children-no-bottom{
    height: calc(100vh - 31px);
}

@media only screen and (max-width: 415px){
    .classification-banner-pf-banner-left{
        visibility: hidden;
    }
    .classification-banner-pf-banner-right{
        visibility: hidden;
    }

}