.straight-line-one{    
	border-top: 3px solid #50a5e3;
    width: 50px;
}

.straight-line-two{    
    border-top: 3px solid #50a5e3;
    width: 50px;
}

.straight-line-three{    
    border-top: 3px solid #50a5e3;
    width: 50px;
}

.straight-line-four{    
    border-top: 3px solid #CCC;
    width: 70px;
}

.one{
    border: 2px solid #50a5e3;
    border-right: none;
    border-left: none;
    border-bottom: none;
    height: 40px;
    width: 70px;
    border-top-left-radius:18px;
    border-width: unset;
}

.one2{
    border: 2px solid #CCC;
    border-right: none;
    border-left: none;
    border-top: none;
    height: 40px;
    width: 70px;
    border-bottom-left-radius:18px;
    border-width: unset;
}

.two{
    border: 2px solid #50a5e3;
    border-right: none;
    border-left: none;
    border-bottom: none;
    height: 40px;
    width: 70px;
    border-top-right-radius:18px;
    border-width: unset;
}

.two2{
    border: 2px solid #CCC;
    border-right: none;
    border-left: none;
    border-top: none;
    height: 40px;
    width: 70px;
    border-bottom-right-radius:18px;
    border-width: unset;
}

.three{
    border: 2px solid #50a5e3;
    border-right: none;
    border-bottom: none;
    border-left: none;
    height: 55px;
    width: 70px;
    border-top-left-radius: 35px;
    border-width: unset;
}

.three2{
    border: 2px solid #CCC;
    border-right: none;
    border-top: none;
    border-left: none;
    height: 55px;
    width: 70px;
    border-bottom-left-radius: 35px;
    border-width: unset;
}

.pie-0 {
    width: 20px; height: 20px;
    border: 1px solid #50a5e3;
    border-radius: 50%;
    background: #ecf0f1;
    background-image:
    linear-gradient(to right, transparent 50%, #50a5e3 0);
    margin-top: -11px;
}

.pie-0::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #50a5e3;
    transform-origin: left;
    transform: rotate(.1turn);
}

.pie-1 {
    width: 20px; height: 20px;
    border: 1px solid #50a5e3;
    border-radius: 50%;
    background: #ecf0f1;
    background-image:
    linear-gradient(to right, transparent 50%, #50a5e3 0);
    margin: 2px;
    margin-left: 0px;
}

.pie-1::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #ecf0f1;
    transform-origin: left;
    transform: rotate(.4turn);
}

.pie-2 {
    width: 20px;
    height: 20px;
    border: 1px solid #CCC;
    border-radius: 50%;
    background: #ecf0f1;
    background-image: linear-gradient(to right, transparent 50%, #CCC 0);
    margin: 2px;
    margin-left: 0px;
}

.pie-2::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #ecf0f1;
    transform-origin: left;
    transform: rotate(.1turn);
}

.pie-3 {
    width: 20px;
    height: 20px;
    border: 1px solid #CCC;
    border-radius: 50%;
    background: #ecf0f1;
    background-image: linear-gradient(to right, transparent 50%, #CCC 0);
    margin: 2px;
    margin-left: 0px;
}

.pie-3::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #ecf0f1;
    transform-origin: left;
    transform: rotate(.4turn);
}

.pie-label-0{
    font-family: Roboto;
    font-size: 12px;
    color: #000;
}

.pie-label-1, .pie-label-2, .pie-label-3{
    font-family: Roboto;
    font-size: 12px;
    color: #000;
    margin: 5px;
}

.legend{
    min-height: 17%;
    width: 150px;
    background-color: #DBDBDB;
}

.legend-button{
    border: none;
    background: none;
    outline: none;
}

.box1, .box2, .box3{
    height: 12px;
    width: 20px;
    border: 1px solid #FFF;
    outline: none;
}

.box1 span, .box2 span, .box3 span{
    font-size: 11px;
    margin-left: 30px;
    display: inline-block;
    width: 120px;
    text-align: left;
    pointer-events: none;
}


/*Progress Bar*/
progress {
    background: #ecf0f1;
    height: 2em;
    width: 20em;
    margin-bottom: -0.3em;
    outline: 2px solid #50a5e3;
}

progress::-webkit-progress-bar {
    background: #ecf0f1;
    height:2em;
    width:20em;
}

progress::-webkit-progress-value {
    background: #CCC;
}

progress::-moz-progress-bar { 
    background: #CCC;
}

.progress-bar-label__span{
    margin-top: 0.5em;
    font-family: Roboto;
    font-size: 12px;
    color: #000;
    position: absolute;
    margin-left: .5%;
}

.label-public{
    position: absolute;
}

.progress-bar-percent{
    margin-top: 0.5em;
    font-family: Roboto;
    font-size: 12px;
    color: #000;
    position: absolute;
    margin-left: 11.7%;
}

.percent-public{
    position: absolute;
    margin-left: 11.4%;
}

.view-statistics__button img{
    height: 1.6em;
    width: 1.6em;
}

.view-statistics__button{
    margin-top: 0.1em;
    background-color: transparent;
    border: none;
    outline: none;
}

progress[value="100"]::-moz-progress-bar {
    background-color : #50a5e3;
}

progress[value="100"]::-webkit-progress-value {
    background: #50a5e3;
}

progress[value="14"]::-moz-progress-bar {
    background-color : #50a5e3;
}

progress[value="14"]::-webkit-progress-value {
    background: #50a5e3;
}

.progress-value-black{
    color: #000;
}

.second-bar progress, .fourth-bar progress{
    outline-color: #CCC;
}

/*Browser Specific CSS - Mozilla Firefox : http://stackoverflow.com/questions/19569399/browser-specific-css-padding-for-firefox-field*/
@-moz-document url-prefix() {

    .progress-bar-label__span {
        font-family: Roboto;
        font-size: 12px;
    }

    progress {
        margin-bottom: -0.5em;
        border: none;
    }

    /*FLOWCHART*/
    .one{
        border-top-left-radius:18px;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-width: unset;
    }

    .two{
        width: 70px;
        border-top-right-radius:18px;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-width: unset;
    }

    .three{
        width: 70px;
        border-bottom: none;
        border-left: none;
        border-top-left-radius: 35px;
    }

    .four{
        width: 70px;
    }

    .five{
        width: 70px;
    }

    .straight-line-one{
        width: 20px;
    }

    .straight-line-two{
        width: 28px;
    }

    .straight-line-three{
        width: 88px;
    }

    .legend{
        width: 137px;
    }

    .box1, .box2, .box3{
        height: 12px;
        width: 20px;
        border: 1px solid #FFF;
    }

    .box1 span, .box2 span, .box3 span{
        font-size: 11px;
    }

    .straight-line-four{    
        border-top: 3px solid #CCC;
    }

    .one2{
        border-bottom-left-radius:18px;
        border-right: none;
        height: 40px;
        width: 70px;
        border-left: none;
        border-top: none;
        border-width: unset;
    }

    .two2{
        border: 2px solid #CCC;
        border-left: none;
        height: 40px;
        width: 70px;
        border-bottom-right-radius:18px;
        border-left: none;
        border-top: none;
        border-width: unset;
        border-right: none;
    }
    
    .three2{
        border-right: none;
        height: 55px;
        width: 70px;
        border-bottom-left-radius: 35px;
        border-top: none;
        border-left: none;
        border-width: unset;
    }
}