﻿
@media all {
    div.progress-wrapper div.progress {
        height: 26px;
        margin-bottom: 5px;
        overflow: hidden;
        border: 2px solid #FFFFFF;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        border-radius: 26px;
        background-color: #ECECEC;
        background-size: cover;
        -webkit-box-shadow: #B8B8B8 0 0 8px;
        -moz-box-shadow: #B8B8B8 0 0 8px;
        box-shadow: #B8B8B8 0 0 8px;
    }
    div.progress-wrapper div.progress-bar { background: #B8B8B8; height: 26px; line-height: 26px; text-align: right; }
    div.progress-wrapper div.progress-bar > span { font-size: 17px; font-weight: bold; color: #FFFFFF; margin-right: 5px; display: inline-block; vertical-align: middle; }
    /*div.progress-wrapper div.progress-labels > div { display: table; width: 100%; max-width: 100%; border: 2px solid transparent; }
    div.progress-wrapper div.progress-labels > div > div { display: table-cell; }
    div.progress-wrapper div.progress-labels > div > div:first-child { width: 1%; padding-left: 4px; white-space: nowrap; }
    div.progress-wrapper div.progress-labels > div > div:last-child { padding-right: 4px; }
    div.progress-wrapper div.progress-labels > div > div:last-child > div { display: table; comment this table-layout: fixed; width: 100%;}
    div.progress-wrapper div.progress-labels > div > div:last-child > div > div { display: table-cell; width: 1%; text-align: right; }
    div.progress-wrapper div.progress-labels > div > div div { font-size: 12px; line-height: 18px; color: #999999; }
    div.progress-wrapper div.progress-labels > div > div div.completed { color: #666666; }
    div.progress-wrapper div.progress-labels > div > div div.current { font-weight: bold; color: #666666; }*/


    div.progress-wrapper div.progress-labels > div { 
        display: table; 
        width: 100%; 
        max-width: 100%; 
        border: 2px solid transparent; 
    }
    div.progress-wrapper div.progress-labels > div > div { 
        display: table-cell; 
        width: 1%;
        white-space: nowrap; 
        font-size: 12px; 
        line-height: 18px; 
        color: #999999; 
        text-align: center; 
    }
    div.progress-wrapper div.progress-labels > div > div.label-divider { 
        width: auto; 
        white-space: unset; 
    }
    div.progress-wrapper div.progress-labels > div > div:first-of-type { 
        padding-left: 4px; 
    }
    div.progress-wrapper div.progress-labels > div > div:last-of-type { 
        padding-right: 4px; 
    }

    
    
    
    
    
    
    
    /*div.progress-wrapper div.progress-labels > div { border: 2px solid transparent; }
    div.progress-wrapper div.progress-labels > div, 
    div.progress-wrapper div.progress-labels > div > div > div { 
        display: table; 
        width: 100%; 
        max-width: 100%; 
    }
    div.progress-wrapper div.progress-labels > div > div > div { 
         table-layout: fixed;
    }
    div.progress-wrapper div.progress-labels > div > div, 
    div.progress-wrapper div.progress-labels > div > div > div > div { 
        display: table-cell; 
        font-size: 12px; 
        line-height: 18px; 
        color: #999999; 
    }
    
    div.progress-wrapper div.progress-labels > div > div:first-of-type, 
    div.progress-wrapper div.progress-labels > div > div:last-of-type { 
        width: 1%; 
        white-space: nowrap; 
    }
    div.progress-wrapper div.progress-labels > div > div:first-of-type { 
        padding-left: 4px; 
        text-align: left; 
    }
    div.progress-wrapper div.progress-labels > div > div:last-of-type { 
        padding-right: 4px; 
        text-align: right; 
    }
    div.progress-wrapper div.progress-labels > div > div > div > div { 
        text-align: center; 
    }*/

    div.progress-wrapper div.progress-labels > div div.completed { color: #666666; }
    div.progress-wrapper div.progress-labels > div div.current { font-weight: bold; color: #666666; }
}

@media only screen and (max-device-width: 768px) {
	div.progress-wrapper div.progress {
		height: 18px;
		margin: 0 12px 5px;
		border: 1px solid #FFFFFF;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		-webkit-box-shadow: #B8B8B8 0 0 5px;
		-moz-box-shadow: #B8B8B8 0 0 5px;
		box-shadow: #B8B8B8 0 0 5px;
	}
	div.progress-wrapper div.progress-bar { height: 18px; line-height: 18px; }
	div.progress-wrapper div.progress-bar > span { font-size: 12px; }
    div.progress-wrapper div.progress-labels { margin: 0 12px; }
	/*div.progress-wrapper div.progress-labels > div > div div { font-size: 10px; line-height: 16px; }*/
    div.progress-wrapper div.progress-labels > div > div { font-size: 10px; line-height: 16px; }
}
