$lighten-primary: lighten($primary, 20);
.sw-theme-circles, 
.sw-theme-dots {
    border: 1px solid #ddd;
    padding: 1rem 0;
    overflow: hidden;
    .step-content {
        padding: 1rem;
    }
}

.sw-theme-dots>ul.step-anchor,
.sw-theme-circles>ul.step-anchor {
    z-index: 10;
}
.sw-theme-default>ul.step-anchor>li.active>a {
    color: $primary !important
}
.sw-theme-default>ul.step-anchor>li>a::after,
.sw-theme-dots>ul.step-anchor>li.active>a:after {
    background: $primary;
}

.sw-theme-arrows>ul.step-anchor>li>a, 
.sw-theme-arrows>ul.step-anchor>li>a:hover {
    padding: 10px 0 10px 45px !important;
}
.sw-theme-arrows>ul.step-anchor>li.active>a,
.sw-theme-circles>ul.step-anchor>li.active>a {
    border-color: $primary !important;
    color: $white !important;
    background: $primary !important;
}
.sw-theme-arrows>ul.step-anchor>li.active>a:after {
    border-left: 30px solid $primary!important;
}
.sw-theme-arrows>ul.step-anchor>li.done>a,
.sw-theme-circles>ul.step-anchor>li.done>a,
.sw-theme-dots>ul.step-anchor>li.done>a:after,
.sw-theme-default>ul.step-anchor>li.done>a::after {
    border-color: $lighten-primary !important;
    background: $lighten-primary !important;
}
.sw-theme-arrows>ul.step-anchor>li.done>a:after {
    border-left: 30px solid $lighten-primary !important;

}


.sw-theme-circles>ul.step-anchor>li>a {
    padding: 25px 0 !important;
}
.sw-theme-circles>ul.step-anchor>li.done>a>small,
.sw-theme-circles>ul.step-anchor>li.active>a>small {
    color: $primary;
}
@media screen and (min-width: 768px) {
    .sw-theme-dots>ul.step-anchor:before {
        top: auto;
        bottom: 14px;
    }
    .sw-theme-dots>ul.step-anchor>li>a:after,
    .sw-theme-dots>ul.step-anchor>li>a:before {
        left: 0;
        right: 0;
        margin: auto;
    }
    .sw-theme-dots>ul.step-anchor>li>a:after {
        bottom: -6px;
    }
}
@media screen and (max-width: 768px) {
    .sw-theme-default,
    .sw-theme-arrows {
        .nav-tabs {
            display: flex;
            flex-direction: column;
        }
    }
    .sw-theme-circles {
        &>ul.step-anchor {
            &:before {
                display: none;
            }
            li {
                margin-bottom: 3rem;
            }
        }
    }
    .sw-theme-dots>ul.step-anchor>li>a:after {
        top: -43px;
    }
}

@media screen and (max-width: 340px) {
    .sw-main{
        .sw-toolbar {
            display: flex;
            flex-direction: column;
            align-items: center;
            .btn-group {
                margin: 0 0 .5rem;
            }
        }
    }
}
