/* ------ */
/* Layout */
/* ------ */

.PA-WizardProgress
{
    display : inline-block;

    height  : 50px;                             /* diametro dos circulos - padding */
    padding : 10px 0px 10px 0px;

    vertical-align : middle;
}

.PA-WizardProgress ol
 {
	position : relative;
	display  : inline-block;
	
    height   : 2px;                                               /* largura da linha horizontal */
    margin   : calc( 15px - 1px) 10px calc( 15px - 1px) 0px;      /* metade do diametro dos circulos - metade da largura da linha */
    padding  : 0px;

    vertical-align : middle;
}
.PA-WizardProgress ol li 
{
	display       : block;
	position      : relative;
	
    float         : left;
	top           : calc( -15px + 1px);         /* - metade do diametro dos circulos + metade da largura da linha */
                  
    margin        : 0px;
    margin-right  : 20px;
	width         : 30px;                       /* diametro dos circulos */
    height        : 30px;                       /* diametro dos circulos */
    padding       : 0px;
    padding-top   : calc( 15px - 2px - 5.5pt);  /* metade do diametro dos circulos - lagura da border - metade da altura da linha de texto */
                  
    line-height   : 10pt;
    text-align    : center;
                  
    border-width  : 2px;
    border-style  : solid;
	border-radius : 50% 50% 50% 50%;
}
.PA-WizardProgress li:last-child
{
    margin-right : 0px;
}
.PA-WizardProgress span.PA-ProgressPercentage
{
    display : inline-block;

    width        : auto;
    margin-right : 4px;
    min-width    : 30px;

    text-align : right;
}


/* ----- */
/* Style */
/* ----- */

.PA-WizardProgress
{
	font-family : Lato;
    font-size   : 10pt;     /* cuidado com a altura da linha */
    font-weight : normal;

    color : #444;           /* cor dos textos */
}

.PA-WizardProgress ol
{
    background : #444;      /* cor da linha horizontal */
}
.PA-WizardProgress ol li 
{
    border-color : #444;    /* cor da border dos circulos */
    background   : #fff;    /* cor do interior dos circulos */
}
.PA-WizardProgress ol li.done 
{
    background   : #444;    /* cor do interior dos circulos de passos completados */
    color        : #fff;    /* cor do texto de passos completados */
}
.PA-WizardProgress li.current 
{
    border-color : rgba( 153, 22, 23,1) !important;
    color        : rgba( 153, 22, 23,1) !important;
}

.PA-WizardProgress span.PA-ProgressPercentage
{
    font-weight : bold;
}