/* ==========================================================================
   Progress Bar shortcode style - begin
   ========================================================================== */

.eltdf-progress-bar {
    @include eltdfRelativeHolderLayout();
    
    &.eltdf-pb-percent-floating {
        width: 100%;
        height: 100%;
        
        .eltdf-pb-percent {
            position: absolute;
            left: 0;
            right: auto;
            bottom: 0;
            @include eltdfTransform(translateX(-50%));
        }
    }

    p.eltdf-pb-title-holder {
        @include addFont();
        color: $default-heading-color;
        font-size: 21px;
    }
    
    .eltdf-pb-title-holder {
        position: relative;
        margin: 10px 0 8px;
        
        .eltdf-pb-title {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            z-index: 100;
        }
    }
	
    .eltdf-pb-percent {
        position: absolute;
        right: 0;
        bottom: 1px;
        width: auto;
	    display: inline-block;
	    vertical-align: middle;
	    opacity: 0;
	    z-index: 10;
        
        &:after {
            content: '%';
        }
    }
    
    .eltdf-pb-content-holder {
        position: relative;
        height: 1px;
        background-color: #ebebeb;
        
        .eltdf-pb-content {
            height: 4px;
            position: relative;
            top: -3px;
            max-width: 100%;
            overflow: hidden;
            background-color: $default-heading-color;
        }
    }
}
/* ==========================================================================
   Progress Bar shortcode style - end
   ========================================================================== */