/*  
    - Josep Rueda Bartras. 14 abril 2020 -

    Estil barra proces upload arxius grans

    Maquetació:

    <div id='{{idbarra}}' class="wrap_proces--carrega">
        <div class="nom_arxiu">
            <div class='ajustar--text'>{{nomdel arxiu o el que es volgui visualitzar}}</div>
        </div>
        <div class='w-tallets'>

            <div class='tallet'></div>
                    :
                    :                       // Amb 120 tallets de 3 pixels omplim els 
                    :                       //   360 pixels del contenidor
                    :
            <div class='tallet'></div>

        </div>
    </div>

    Carcaterístiques:
        . Amplada fixada a 362px
        . Surten 120 posicions de 3 pixels d'amplada
        . La qunatitat total del progrés a mostrar s'ha de dividir pel 120

*/

.wrap_proces--carrega {
    position: relative;
    display: inline-block;
    height: 28px;
    text-align: center;
    width: 468px;
    padding: 0;
    border: 1px solid #4CAF50;
    overflow:hidden;
    box-sizing: border-box;
}
.wrap_proces--carrega .w-tallets {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 0;
}
.wrap_proces--carrega .w-tallets > .tallet {
    display: inline-block;
    width: 3px;
    height: 28px;
    background-color: lightgreen;
    border-right: 1px solid #ddffdd;
    padding: 0;
    margin: 0;
}

.wrap_proces--carrega .nom_arxiu {
    display: block;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.wrap_proces--carrega .ajustar--text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    text-align: center;

    font-size: 16px;
    color: #2C3241;
    line-height: 28px;

    text-overflow: ellipsis; 
    white-space: nowrap;
    overflow: hidden;

    background-color: transparent;
}