/*

** Manage In Progress stages layout **

**** Inspired by:
        https://css-tricks.com/triangle-breadcrumbs/
        https://codepen.io/team/css-tricks/pen/xRmmdr
*/

ul.in_progress_stages {
    list-style: none;
    overflow: hidden;
    font: 18px Helvetica, Arial, Sans-Serif;
    /*margin: 40px;*/
    /*margin: 36px 0px;*/
    margin: 16px 0px;
    padding: 0;
    /*background: #abd299;*/
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /*border: 3px solid #dcecd4;*/
}
ul.in_progress_stages li {
    float: left;
}
ul.in_progress_stages li a {
    color: white;
    text-decoration: none;
    /*padding: 19px 0 19px 55px;*/
    padding: 19px 22px 19px 55px;
    min-width:100px;
    /*background: #abd299;*/
    /*background: #00af66;*/
    background: #297d6d;
    position: relative;
    display: block;
    float: left;
}
ul.in_progress_stages li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    /* Go big on the size, and let overflow hide */
    border-top: 31px solid transparent;
    border-bottom: 31px solid transparent;
    /*border-left: 20px solid #abd299;*/
    /*border-left: 20px solid #00af66;*/
    border-left: 20px solid #297d6d;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    left: 100%;
    z-index: 2;
}
ul.in_progress_stages li a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    /* Go big on the size, and let overflow hide */
    border-top: 31px solid transparent;
    border-bottom: 31px solid transparent;
    border-left: 20px solid white;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    margin-left: 2px;
    left: 100%;
    z-index: 1;
}
ul.in_progress_stages li:first-child a {
    padding-left: 30px;
}

/* ccb146 is orange button color */
ul.in_progress_stages li.current a {
    /*background: #ffc843;*/
    background: #ccb146;
}
ul.in_progress_stages li.current a:after {
    /*border-left-color: #ffc843;*/
    border-left-color: #ccb146;
}

/*
ul.in_progress_stages li a:hover { background: hsla(34,85%,25%,1); }
ul.in_progress_stages li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
*/

@media (max-width: 1199px) {
    ul.in_progress_stages li a {
        min-width: none;
        padding: 19px 12px 19px 45px;
    }
}

@media (max-width: 991px) {
    ul.in_progress_stages {
        font: 16px Helvetica, Arial, Sans-Serif;
        background: none;
    }
    ul.in_progress_stages li a {
        min-width: none;
        padding: 12px 0px 12px 45px;
    }
    ul.in_progress_stages li a:after {
        border-top: 22px solid transparent;
        border-bottom: 22px solid transparent;
        margin-top: -22px;
    }
    ul.in_progress_stages li a:before {
        border-top: 22px solid transparent;
        border-bottom: 22px solid transparent;
        margin-top: -22px;
    }
}