/* STYLE della KbsAppTempBar per la rappresentazione dei macrostati (arrowlike bar) nel dettaglio del record di un'applicazione con wkf */
/* container della barra, settato margine per rispettare la posizione dell'oggetto md-tabs sottostante*/
.arrowcontainer {
    margin: 0 5px 15px;
}

/* step rappresenta il div contenente il nome del macro stato e l'oggetto triangle */
.arrow-steps .step {
    text-align: center;
    /*font-size: 14px; /* definito per rispettare (in combinazione col padding) le misure di triangle */
    height: 36px;
    margin: 0 3px;
    float: left;
    position: relative;
    outline: none;
    margin-right: 20px;
}

/* il primo figlio non deve avere bordo */
.arrow-steps .step:first-child:before{
    border: none;
}

/* bordo arrotondato per il primo e l'ultimo figlio */
.arrow-steps .step:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.arrow-steps .step:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-right: 3px;                                                        /*l'ultimo figlio non deve avere margine*/
}

/* l'oggetto triangle rappresenta la punta della freccia, 
    anche in questo caso come per :before, utilizzo solo i bordi */
.arrow-steps .step .head{
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid;                                                /* il colore di questo bordo viene settato usando md-colors */
    position: absolute;
    top: 0;
    right: -17px;                                                           /* posizione della punta in fondo al div per ricreare la forma di una freccia */
    z-index: 1;                                                             /* l'oggetto deve essere "in primo piano" */
}

.arrow-steps .step .tail{
    width: 0;
    height: 0;
    border-top: 19px solid;                                                 /* il colore di questo bordo viene settato usando md-colors */
    border-bottom: 17px solid;                                              /* il colore di questo bordo viene settato usando md-colors */
    border-left: 17px solid transparent;                                    
    position: absolute;
    top: 0;
    left: -17px;                                                            /* posizione della punta in testa al div per ricreare la forma di una freccia */
    z-index: 1;                                                             /* l'oggetto deve essere "in primo piano" */
}

/* button contenente il nome del macro stato */
.arrow-steps .stepcontent{
     outline:none; 
     border:0;
     width: -webkit-fill-available;
     height: -webkit-fill-available;
     margin-left: 2px;
     margin-right: 2px;
}

button.stepcontent:disabled{
    cursor:not-allowed;
}