.progressbar {
    width: 100%;
    height: 20px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 1px solid #6e6e6e;
    border-bottom: 1px solid #6e6e6e;
}

.progressBar_Step
{
    text-align:center;
    height:30px;
    padding: 0;
    white-space:nowrap;
}

.stepCorrente
{
    background-color: #6E6E6E;
    color: #FFF;
}

.stepCorrente .pnlFreccia
{
    background-image: url('/IOLHttp/img/step_progressBar.png');
}

.stepCompleto
{
    background-color: #6E6E6E;
    color: #FFF;
}
.stepCompleto .pnlFreccia
{
    /*/display: none;*/
    background-image: url('/IOLHttp/img/step_progressBarPieno.png');
}

.stepFuturo
{
    background-color: #E9e9e9;
    color: inherit;
}
.stepFuturo .pnlFreccia
{
    background-image: url('/IOLHttp/img/step_progressBarVuoto.png');

}

.lblProgressBar
{
    padding-left:15px;
    display:block;
    vertical-align:middle;
    line-height:30px;
    white-space:normal;
    float:left;
}

.pnlFreccia
{
    width: 15px;
    height: 30px;
    background-repeat:no-repeat;
    float:right;
}


/**************** ULTIMA VERSIONE COI BORD STONDATI **********************************/

.container-Progress {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    padding: 10px 0;
    background: white;
    z-index:10;
}

    .container-Progress.no-fixed {
        display: inline-block;
        border-radius: 0px;
        box-shadow: none;
        position: relative;
        padding:0px;
    }

.Progress {
    border-radius: 50px;
    width: calc(100% - 10px);
    border-left: 1px solid #6e6e6e;
    border-top: 1px solid #6e6e6e;
    border-bottom: 1px solid #6e6e6e;
    height: 50px;
    display: inline-flex;
    flex-wrap: nowrap;
    line-height: 50px;
    font-family: 'Inaz-Cond';
    font-size: 18px;
    white-space: nowrap;
    margin:0 auto;
    width:98%;
}

.Progress div {
    background-image: url(/IOLHttp/img/step_progressBarVuoto_1.png) !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    background-size: contain;
    background-color: #E9e9e9;
    height: 50px;
    padding-right: 30px;
    padding-left: 10px;
    margin: 0px;
    color: #6e6e6e;
    flex: 1;
    text-align: center;
    margin-left: -1px;
}

.Progress div.attuale {
    background: #6E6E6E;
    background-image: url(/IOLHttp/img/step_progressBar_1.png) !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    background-size: contain;
    color: white;
    margin-left: -1px;
}

.Progress div.completo {
    background: #6E6E6E;
    background-image: url(/IOLHttp/img/step_progressBarPieno_1.png) !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    background-size: contain;
    color: white;
    margin-left: -1px;
}

.Progress div:first-of-type {
    border-radius: 50px 0px 0px 50px;
    padding-left: 20px;
    margin-left: 0px;
}

.Progress div:last-of-type {
    background-image: none !important;
    border-radius: 0px 50px 50px 0px;
    border-right: 1px solid #6e6e6e;
    margin-left: -1px;
}


/* 17/02/2020 - Più responsive con ... nelle descrizioni troppo lunghe e testi nascosti degli step precedenti e successivi su mobile */

.Progress div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.Progress div.attuale {
    overflow: visible;
    text-overflow: unset;
    width: auto;
}

@media only screen and (max-width : 480px) {

    .Progress {
        overflow: auto;
    }

    .Progress div {
        overflow: auto;
    }

    .Progress div span {
        display: none;
    }

    .Progress div.attuale span {
        display: block;
    }

    .Progress div.attuale {
        display: block;
        width: auto;
    }

    .Progress div.completo {
        display: block;
    }

    .Progress div:last-of-type {
        display: block;
    }

    .Progress div.completo span {
        display: none;
    }

    .Progress div.completo:last-of-type {
        width: auto;
    }

    .Progress div.completo:last-of-type span {
        display: block;
    }

}
