.steps {
    background-color: #f5f5f5;
}

    .steps ul {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .steps ul {
        margin-bottom: 0px;
        display: flex;
        flex-direction: row;
    }

    .steps li {
        flex-basis: 0;
        flex-grow: 1;
    }

    .steps a {
        position: relative;
        display: block;
        padding: 4px 16px 4px 0px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #aaa;
        cursor: pointer;
    }

        .steps a:hover {
            background: #eee;
        }

        .steps a.active {
            color: #777;
            background-color: #fafafa;
        }

            .steps a.active span:first-child {
                color: #fff;
                border-color: #777;
                background-color: #777;
            }

        .steps a:before,
        .steps a:after {
            content: '';
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 1;
            display: block;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            border-left: 16px solid transparent;
        }

        .steps a:before {
            margin-left: 1px;
            border-left-color: #d5d5d5;
        }

        .steps a:after {
            border-left-color: #f5f5f5;
        }

        .steps a:hover:after {
            border-left-color: #eee;
        }

        .steps a.active:after {
            border-left-color: #fafafa;
        }

    .steps li:last-child a:before,
    .steps li:last-child a:after {
        display: none;
    }

    .steps .carat, .steps .audible {
        display: none !important;
    }


.actions {
    /*position: absolute;*/
    /*bottom: 0px;*/
    position:relative;
    width: 100%;
    padding: 10px 10px 10px 10px;
    /*right: 0;*/
    border-top: 1px solid #ebebeb;
    background: #fff;
}

    .actions ul {
        align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        -o-align-items: center;
        -ms-align-items: center;
        justify-content: flex-end;
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -o-justify-content: flex-end;
        -ms-justify-content: flex-end;
        width: 100%
    }

        .actions ul .disabled {
            display: none
        }

        .actions ul li {
            /*margin-left: 10px;*/
            display: inline-block;
            float: left;
            width: 50%;
        }


            .actions ul li:first-child a {
                background: #f8f8f8;
                color: #999;
                float: left;
            }

                .actions ul li:first-child a:hover {
                    background-color: #dfdfdf
                }

            .actions ul li a {
                float: right;
                width: 120px;
                height: 40px;
                color: #fff;
                background: #1abc9c;
                align-items: center;
                -moz-align-items: center;
                -webkit-align-items: center;
                -o-align-items: center;
                -ms-align-items: center;
                justify-content: center;
                -moz-justify-content: center;
                -webkit-justify-content: center;
                -o-justify-content: center;
                -ms-justify-content: center;
                text-decoration: none;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -o-border-radius: 5px;
                -ms-border-radius: 5px;
            }

            .actions ul li a {
                background-image: linear-gradient(to right, rgba(7,161,124,1) 0%, rgba(50,182,157,1) 51%, rgba(7,161,124,1) 100%);
                text-align: center;
                text-transform: capitalize;
                transition: 0.5s;
                background-size: 200% auto;
                color: white;
                box-shadow: 0 0 20px #eee;
                border-radius: 10px;
                display: block;
                padding-top: 10px;
            }

                .actions ul li a:hover {
                    background-position: right center;
                    color: #fff;
                    text-decoration: none;
                }


            .actions ul li:first-child a {
                background-image: linear-gradient(to right, #c2cad1 0%, #bfbfbf 51%, #c2cad1 100%);
                padding-top: 10px;
                text-align: center;
                text-transform: capitalize;
                transition: 0.5s;
                background-size: 200% auto;
                color: white;
                box-shadow: 0 0 20px #eee;
                border-radius: 10px;
                display: block;
            }

                .actions ul li:first-child a:hover {
                    background-position: right center; /* change the direction of the change here */
                    color: #fff;
                    text-decoration: none;
                }



            .actions ul li a:hover {
                background-color: #148f77
            }




.fieldset-content {
    padding-bottom: 20px;
}

.fieldset-footer {
    padding: 28px 0;
    margin: 15px 15px 0px 15px;
    border-top: 1px solid #ebebeb;
    display: none;
}

    .fieldset-footer span {
        color: #999;
        display: none;
    }

.steps li.current a {
    /*background: #eee;*/
    background: #29b296;
    color: #fff;
    text-decoration: none;
}

    .steps li.current a:after {
        /*border-left-color: #eee;*/
        border-left-color: #29b296;
    }


.steps.outline li.current a {
    background: #eee !important;
    background: #29b296;
    color: #aaa;
    text-decoration: none;
}

    .steps.outline li.current a:after {
        border-left-color: #eee !important;
    }

.steps li a {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.steps.outline li.current a {
    border: 1px solid #29b296;
}

    .steps.outline li.current a:before {
        border-left-color: #29b296 !important;
    }

.steps li.current {
    z-index: 999;
}


@media (max-width: 720px) {
    .steps a:before, .steps a:after {
        border-top-width: 13px;
        border-bottom-width: 13px;
        border-left-width: 13px;
    }
}

@media (max-width: 620px) {
    .steps a {
        font-size: 12px;
    }

        .steps a:before,
        .steps a:after {
            border-top-width: 13px;
            border-bottom-width: 13px;
            border-left-width: 11px;
        }
}

@media (max-width: 520px) {
    .steps a {
        padding: 4px 0px 5px 0px;
    }

        .steps a:before,
        .steps a:after {
            border-top-width: 13px;
            border-bottom-width: 14px;
            border-left-width: 8px;
        }

    .steps li a span:first-child {
        display: block;
        margin: 0 auto;
    }

    .steps li a span:last-child {
        display: none;
    }
}



@media (max-width: 768px) {
    .steps {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 28px;
    }

        .steps ul {
            width: 2200px;
            position: absolute;
        }

        .steps li {
            flex-basis: unset;
            flex-grow: unset;
            width: 120px;
            display: inline-table;
        }
}


.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


.toggle-menu {
    z-index: 99999;
    position: absolute;
    top: 20px;
    right: -10px;
    background: #29b296;
}

    .toggle-menu a {
        color: #fff !important;
        padding: 4px 10px;
    }

.steps li:focus, .steps li.current a:focus {
    outline: initial !important;
}