/*
 * Central Hub Menu
 **/

ul.central-hub-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    margin-bottom: auto;
    overflow: hidden;
}

ul.central-hub-menu > li {
    display: flex;
    width: 70px;
}

ul.central-hub-menu > li.hidden {
    display: none;
}

ul.central-hub-menu > li:hover, ul.central-hub-menu > li.item:hover {
    /*background: var(--sw-dark-grey);*/
}

ul.central-hub-menu > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    text-decoration: none;
    color: var(--sw-white);
}

ul.central-hub-menu > li > a > .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--sw-white);
    border-radius: 10px;
}

ul.central-hub-menu > li:hover > a > .icon-container,
ul.central-hub-menu > li.active > a > .icon-container {
    background-color: var(--sw-714773);
}

ul.central-hub-menu > li > a > .icon-container > .icon {
    display: flex;
    font-size: 22px;
}

ul.central-hub-menu > li > a > span {
    display: flex;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
}


/*
 * More dowpdown for Central Hub Menu
 **/

.more-dropdown {
    display: none;
    position: absolute;
    left: 80px;
    /*top: 0;*/
    width: 200px;
    padding: 10px 15px;
    background: var(--sw-white);
    border: var(--sw-border-size) var(--sw-border-style) var(--sw-border-color);
    border-radius: 15px;
    z-index: +1;
}

.more-dropdown.active {
    display: block;
}

.more-dropdown > .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.more-dropdown > .dropdown-item > .icon-container {
    display: flex;
}