/*  *****  WorkFlow   *****  */

.workflow {
    list-style: none;
    display: inline-block;
    margin: 0 0 0 14px;
    padding: 0;
}
.workflow li {
    display: inline-block;
    position: relative;
    margin-left: 0;
    padding: 3px 0 0;
}

/*  *****  status highlight   *****  */

.workflow li.highlight a {
    color: #fff;
    display: block;
   /* background: #002ae6;*/
    text-decoration: none;
    position: relative;
    padding: 0 10px 0 2px;
    margin-right: 21px;
    text-align: center;
}

* + html .workflow li.highlight a {
    padding: 10px 15px 0 15px;
    margin-right: 2px;
}
.workflow li.highlight a:before,
.workflow li.highlight a:after {
    content: "";
    position: absolute;
    top: 0;
    /* border: 0 solid; #002ae6;*/
    border-width: 20px 10px;
    width: 0;
    height: 0;
}
.workflow li.highlight a:before {
    left: -18px;
    border-left-color: transparent !important;
}
.workflow li.highlight a:after {
    left: 100%;
    border-color: transparent;
    /*border-left-color: #002ae6;*/
}

/*  *****  status link   *****  */
.workflow li.link a {
    display: block;
    background: #e1e1e1;
    text-decoration: none;
    position: relative;
    padding: 0 7px 0 2px;
    margin-right: 21px;
    text-align: center;
}
* + html .workflow li.link a {
    padding: 10px 15px 0 15px;
    margin-right: 2px;
}
.workflow li.link a:before,
.workflow li.link a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #e1e1e1;
    border-width: 20px 10px;
    width: 0;
    height: 0;
}
.workflow li.link a:before {
    left: -18px;
    border-left-color: transparent;
}
.workflow li.link a:after {
    left: 100%;
    border-color: transparent;
    border-left-color: #e1e1e1;
}

/*  *****  nolink   *****  */
.workflow li.nolink a {
    color: #999;
    display: block;
    background: #e1e1e1;
    text-decoration: none;
    position: relative;
    padding: 0 10px 0 2px;
    margin-right: 21px;
    cursor: default;
    text-align: center;
}
* + html .workflow li.nolink a {
    padding: 10px 15px 0 15px;
    margin-right: 2px;
}
.workflow li.nolink a:before,
.workflow li.nolink a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #e1e1e1;
    border-width: 20px 10px;
    width: 0;
    height: 0;
}
.workflow li.nolink a:before {
    left: -18px;
    border-left-color: transparent;
}
.workflow li.nolink a:after {
    left: 100%;
    border-color: transparent;
    border-left-color: #e1e1e1;
}

/*  *****  submenu   *****  */
.workflow li ul {
    position: absolute;
    left: -9999px;
    background: #fff;
    padding: 0;
    margin: 0 0 0 -19px;
    list-style: none;
    z-index: 80;
    border: 1px solid #ccc;
}
* + html .workflow li ul {
    margin-left: 0;
    height: 160px
}
.workflow li:hover ul {
    left: 0;
    min-width: 124px;
}
/* Define it also with the ':focus-within' pseudo-class for super modern browsers so that with them we can even tab through the arrows and get the hover navigations. 
   But we need to define it separately or else IE (even the newest ones) would not display anymore the arrow hover navigations. */
.workflow li ul:focus-within {
    left: 0;
    min-width: 124px;
}
.workflow li ul li {
    float: none;
    font-size: 1.4rem;
    padding: 3px 13px;
    text-align: left;
    margin: 0;
    line-height: 30px;
    background: #fff;
    white-space: nowrap;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
* + html .workflow li ul li {
    border-bottom: 0;
}
.workflow li ul li:hover,
.workflow li ul li:active,
.workflow li ul li:focus {
    text-decoration: none;
    color: #333;
}
.workflow li ul a {
    text-decoration: none;
    color: #333;
}
.workflow li ul li.all {
    font-size: 1.4rem;
    border-bottom: none;
    text-transform: none;
}
.workflow li ul li:hover {
    background: #002ae6;
    color: #fff;
    border-color: transparent;
}
.workflow li ul li:before,
.workflow li ul li:after {
    content: "";
    position: absolute;
    right: 1px;
    border: 1px solid transparent;
    border-right: 0;
    border-color: transparent;
    z-index: 51;
}
.workflow li:after {
    right: -0px;
    border-top-color: #EBEBEB;
    z-index: 52;
}
.workflow li.link ul a,
.workflow li.nolink ul a,
.workflow li.highlight ul a {
    color: #292929;
    display: block;
    background: #fff;
    text-decoration: none;
    position: relative;
    padding: 0;
    margin-right: 0;
    text-align: left;
}
.workflow li.link ul a:before,
.workflow li.link ul a:after,
.workflow li.nolink ul a:before,
.workflow li.nolink ul a:after,
.workflow li.highlight ul a:before,
.workflow li.highlight ul a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #3498db;
    border-width: 1px;
    width: 0;
    height: 0;
}
.workflow li.link ul a:before,
.workflow li.nolink ul a:before,
.workflow li.highlight ul a:before {
    left: -20px;
    border-color: transparent;
}
.workflow li.link ul a:after,
.workflow li.nolink ul a:after,
.workflow li.highlight ul a:after {
    left: 100%;
    border-color: transparent;
}
.workflow li.link ul a:hover,
.workflow li.nolink ul a:hover,
.workflow li.highlight ul a:hover {
    background-color: #fff;
    border-color: transparent;
}
.workflow a.nolinkmenu,
.workflow a.nolinkmenu li:hover {
    color: #aaa !important;
    cursor: default;
    background: transparent !important;
}

/*  *****  noarrow   *****  */
.workflow.noarrow {
    margin: 0;
}
.workflow.noarrow li.highlight a,
.workflow.noarrow li.link a,
.workflow.noarrow li.nolink a {
    padding: 0 15px;
    margin-right: 2px;
}
.workflow.noarrow li.highlight ul a,
.workflow.noarrow li.link ul a,
.workflow.noarrow li.nolink ul a {
    padding: 0;
}
.workflow.noarrow li.highlight a:before,
.workflow.noarrow li.highlight a:after,
.workflow.noarrow li.link a:before,
.workflow.noarrow li.link a:after,
.workflow.noarrow li.nolink a:before,
.workflow.noarrow li.nolink a:after {
    border-width: 0;
}
.workflow.noarrow li ul {
    margin-left: 0;
}

/*  *****  customizing   *****  */
.workflow {
    font-size: 1.4rem;
}
.workflow .icon {
    display: block;
    font-size: 1.8rem;
    margin: 0 auto;
    padding: 4px 0 0;
    text-align: center;
    height: 20px;
}
ul.workflow li div.float-left a.btn {
    padding-right: 1px;
    margin-right: 0;
}
ul.workflow li div.float-left a.key {
    padding: 0 2px;
    margin-right: 0;
}
ul.workflow li div.float-left a.key-last {
    padding: 0 2px
}

@-moz-document url-prefix() {
	.workflow li.highlight a:before,
    .workflow li.highlight a:after{
       border-width: 24px 10px;
    }
	.workflow li.link a:before,
    .workflow li.link a:after {
       border-width: 24px 10px;
    }
	.workflow li.nolink a:before,
    .workflow li.nolink a:after {
       border-width: 24px 10px;
    }
	.workflow .icon {
       display: inline-block;
       padding: 4px 0 0;
       width: 100%;
    }
}

@media only screen and (max-width: 1100px) {
    .workflowblock, .workflowblock .showblock_textblock {
        overflow-x: initial;
    }
}