.sf-menu,
.sf-sub {
    margin: 0;
    padding: 0;
    list-style: none
}

.sf-has-sub {
    position: relative
}

.sf-sub {
    position: absolute;
    display: none;
    z-index: 1000
}

.sf-menu .sf-has-sub:hover>ul,
.sf-menu .sf-has-sub.sfHover>ul {
    display: block
}

.sf-menu .item {
    display: block;
    position: relative;
    text-overflow: ellipsis
}

.sf-menu .sf-has-sub .sf-has-sub .sf-sub {
    top: 0;
    left: 100%
}

.sf-menu>.sf-has-sub:last-child>.sf-sub {
    right: 0
}

.sf-menu>.sf-has-sub:last-child>.sf-sub .sf-sub {
    right: 100%;
    left: auto
}

.sf-hidden {
    display: none !important
}

.sf-menu {
    display: flex;
    gap: 1.25rem
}

.sf-menu .item-icon {
    margin-right: .25em
}

.sf-level-1>.item {
    display: block;
    padding: .9375rem .3125rem .625rem;
    border-bottom: .3125rem solid rgba(0, 0, 0, 0);
    text-align: center;
    text-decoration: none
}

.sf-menu .sf-sub .active>.item,
.sf-menu .sf-sub .current>.item,
.sf-menu .item:active,
.sf-menu .item:focus,
.sf-menu .sf-sub:hover>.item {
    color: #fff;
    background: #333
}

.sf-menu>.current>.item,
.sf-menu>.active>.item {
    font-weight: 600;
    border-color: #333
}

.sf-sub {
    background: #fff;
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, .25);
    min-width: 15rem
}

.sf-sub li+li {
    border-top: 1px solid rgba(0, 0, 0, .25)
}

.sf-sub .sf-sub {
    border-left: 1px solid rgba(0, 0, 0, .25)
}

.sf-menu>.sf-has-sub:last-child>.sf-sub .sf-sub {
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, .25)
}

.sf-sub .item {
    color: #333;
    background: #fff;
    margin: 0;
    padding: .625rem 1.25rem;
    border: none;
    text-align: left;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}