@import "../helpers/colors.scss";
#smartwizard select::-ms-expand {
    background: none;
    border: none;
}
.sw-theme-dots > .nav {
    &::before {
        width: auto !important;
    }
    .nav-link {
        color: $black !important;
        &.active {
            color: $black !important;
            cursor: not-allowed;
            &::before {
                background: $lightGreen !important;
            }
            &::after {
                background-color: #fff !important;
            }
        }
        &.done.inactive {
            cursor: not-allowed;
            &::before {
                background: $lightGreen !important;
            }
        }
        &::after {
            background-color: #fff !important;
        }
    }
}

.sw.sw-justified > .nav > li {
    position: relative;
    &::after {
        content: " ";
        position: absolute;
        top: 18px;
        right: -60%;
        // left: 0;
        width: 100%;
        height: 5px;
        background-color: #ededed !important;
        border-radius: 3px;
        z-index: 1;
    }

    &.done {
        &::after {
            background-color: $green !important;
        }
    }

    &:last-of-type {
        &::after {
            opacity: 0;
            display: none !important;
        }
    }
}

@media (max-width: 1120px) {
    .sw.sw-justified > .nav > li,
    .sw.sw-justified > .nav .nav-link {
        width: 85px;
    }
    .sw.sw-justified > .nav > li:after {
        right: -50%;
    }
    // .sw.sw-justified > .nav > li::after {
    //     width: 11%;
    // }
}