.wf-header .workflow-state {
    padding:  16px;
    border-radius:  4px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    border: 2px solid #999;
}

.wf-header .workflow-state .title {
    font-size:  1.4em;
}

.wf-header .workflow-state .current-state {
    margin-left: 10px;
    padding: 4px 24px;
/*    border-radius: 50%;  oval */
    border-radius: 4px;
    border: 2px solid #333;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.wf-header .workflow-transitions {
    padding:  0;
    margin:  0;
    margin-top:  -3px;
}

/*
    "A horizontal list menu - W3Schools Tryit Editor"
    https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
*/

.workflow-transitions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*background-color: #333333;*/
    display: inline;
}

.workflow-transitions li {
    float: left;
}

.workflow-transitions li a {
    border: 1px solid transparent;
/*    color: white;*/
    text-align: center;
    text-decoration: none;
    padding: 4px;
    margin-right: 4px;
}

.wf-header .workflow-transitions li a {
    border-color: #666;
    min-width: 80px;
    width:  120px;
    display: inline-block;
    font-size: 16px;
    line-height: 30px;
    padding: 0 4px;
}

.workflow-transitions li a:hover {
    border-color: #549EFC;
    color: #549EFC !important;
}

.workflow-transitions li a:hover i {
    color: #549EFC !important;
}