.ct-progress {
    border-radius: 20px;
    box-sizing: border-box;
    .ct-progress-stroke {
        background: #e2e2e2;
        border-radius: 20px;
        position: relative; 
        .ct-progress-track {
            position: absolute;
            border-radius: 20px;
            &.ct-progress__primary {
                background: $primary-bg;
            }
            &.ct-progress__success {
                background: $success-bg;
            }
            &.ct-progress__warning {
                background:$warning-bg;
            }
            &.ct-progress__error {
                background:$error-bg;
            }
        }        
    }
    &.is-horizontal {
        margin:10px 0;   
        .ct-progress-stroke {
            height: 5px;   
            .ct-progress-track {
                top: 0;
                left: 0;
                height: 100%; 
            }
        }    
        &.ct-progress__large {
            .ct-progress-stroke {
                height: 8px;
            }
        } 
        &.is-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .ct-progress-stroke {
                flex: 1;
            }
            .ct-progress-info {
                margin-left: 8px;
                color: #7b7b7b;
                font-size: 12px;
                line-height: 1;
            }
        }
    }    
    &.is-vertical {
        margin: 0 10px;
        height: 100px;
        width: auto;
        // vertical-align: top;
        .ct-progress-stroke {
            width: 5px;
            height: 100%;   
            .ct-progress-track {
                width: 100%;
                bottom: 0;
                left: 0; 
            }
        } 
        &.ct-progress__large {
            .ct-progress-stroke {
                width: 8px;
            }
        } 
        &.is-info {
            .ct-progress-stroke {
                display: inline-block;
            }
            .ct-progress-info {
                height:60%;
                margin-left: 8px;
                color: #7b7b7b;
                font-size: 12px;
                line-height: 1;
                vertical-align: bottom;
                display: inline-block;
            }
        }
    } 
}