:root {
    --mm-spn-item-height: 54px;
    --mm-spn-item-indent: var(--theme--gutter);
    --mm-spn-line-height: 24px;
    --mm-ocd-width: 100%;
    --mm-ocd-min-width: 320px;
  --mm-ocd-max-width: 480px;
}

.mm-ocd__header {
    padding: 0 var(--theme--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mm-ocd__header .mobile-search {
    display: none;
}

.mm-spn.mm-spn--light {
    background: rgba(255,255,255, 1);
}

.mm-spn ul::after {
    height: 110px;
}

.mm-spn.mm-spn--navbar.mm-spn--main::after,
.mm-spn.mm-spn--navbar ul::before,
.mm-spn li:last-child::after,
.mm-spn a:not(:last-child)::after,
.mm-spn:not(.mm-spn--main) li::after {
    content: none;
}

.mm-spn.mm-spn--navbar.mm-spn--main ul {
    top: 0;
}

.mm-spn li::before {
    width: 7px;
    height: 7px;
    opacity: 1;
}
    .mm-spn .menu-item.first::before {
        border-color: var(--theme--color--primary-75);
    }
    .mm-spn .menu-item.second::before {
        border-color: var(--theme--color--primary);
    }
    .mm-spn .menu-item.third::before {
        border-color: var(--theme--color--primary-50);
    }
    .mm-spn .menu-item.fourth::before {
        border-color: var(--theme--color--primary-25);
    }

.mm-spn.mm-spn--navbar::before {
    border-color: rgba(255,255,255, 1);
    opacity: 1;
    width: 7px;
    height: 7px;
    z-index: 1;
}

.mm-spn.mm-spn--navbar::after {
    color: rgba(255,255,255, 1);
    opacity: 1;
    font-weight: 700;
    font-size: var(--theme--font-size--small);
    text-align: left;
}
    .mm-spn.mm-spn--navbar[data-mm-span-submenu="first"]::after {
        background: var(--theme--color--primary-75);
    }
    .mm-spn.mm-spn--navbar[data-mm-span-submenu="second"]::after {
        background: var(--theme--color--primary);
    }
    .mm-spn.mm-spn--navbar[data-mm-span-submenu="third"]::after {
        background: var(--theme--color--primary-50);
    );
    }
    .mm-spn.mm-spn--navbar[data-mm-span-submenu="fourth"]::after {
        background: var(--theme--color--primary-25);
    }

.mm-spn li::after {
    margin-left: 0;
}

.mm-spn .menu-link-depth-0 {
    font-size: var(--theme--font-size--small);
}
    .mm-spn .menu-link-depth-0.is-active {
        font-weight: 700;
    }
    .mm-spn .menu-item.first .menu-link-depth-0 {
        color: var(--theme--color--primary-85);
    }
    .mm-spn .menu-item.second .menu-link-depth-0 {
        color: var(--theme--color--primary);
    }
    .mm-spn .menu-item.third .menu-link-depth-0 {
        color: var(--theme--color--primary-65);
    }
    .mm-spn .menu-item.fourth .menu-link-depth-0 {
        color: var(--theme--color--primary-50);
    }
    
.mm-spn .menu-link-depth-1 {
    font-size: var(--theme--font-size--normal);
    padding-left: calc(2 * var(--mm-spn-item-indent));
    padding-right: calc(2 * var(--mm-spn-item-indent));
    font-family: var(--theme--font-family--secondary);
    color: var(--theme--color--primary);
}

    .mm-spn .menu-link-depth-1.is-active {
        padding-left: calc(2 * var(--mm-spn-item-indent) + 1.5em);
        color: var(--theme--color--secondary);
    }
    .mm-spn .menu-link-depth-1.is-active::before {
        content: '\f178';
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;
        font-size: var(--theme--font-size--medium);
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 1;
        transform: translate(calc(2 * var(--mm-spn-item-indent)), -50%);
        opacity: 1;
    }

@media (min-width: 768px) {
    .mm-spn ul::after {
        height: 140px;
    }
}