/* ---------------------------------------------------
   GLOBAL NAVIGATION STYLE
----------------------------------------------------- */
.navbar-toggler {
    border: none;
    font-size: 10px;
    padding: 10px 10px 10px 20px;
    outline: none !important;
}

.navbar-nav .nav-link {
    padding: 6px 0 6px 8px;
}

.nav-link img,
.nav-link svg {
    margin: 10px;
    width: 16px;
    height: 16px;
}

.nav-link span {
    vertical-align: middle;
}

.nav-item.active::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    margin-top: 18px;
    left: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--color-active);
    pointer-events: none;
}

.nav-item.nav-item-header:not(.show)::after,
.nav-item.dropdown:not(.show)::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 22px;
    right: 16px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--color-control-bg);
    pointer-events: none;
}

.nav-item.nav-item-header.show::after,
.nav-item.dropdown.show::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 22px;
    right: 16px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid var(--color-control-bg);
    pointer-events: none;
}

.fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-item:first-child .nav-link::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    margin-top: 12px;
    left: -12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}

.navbar-nav .dropdown-toggle::after {
    display: none;
}

.nav-item.nav-item-header {
    position: relative;
}


/* ---------------------------------------------------
    MAIN NAVIGATION STYLE
----------------------------------------------------- */
.fc-main-navigation {
    z-index: var(--navigation-z-index);
    background-color: var(--color-main);
    padding: 3px 0 3px 0;
    height: var(--navigation-height);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

    .fc-main-navigation .navbar-nav {
        padding-top: 3px;
    }

    .fc-main-navigation .nav-item {
        background-color: var(--color-main-heavy);
        border-top: solid var(--color-main) 1px;
    }

    .fc-main-navigation .nav-link {
        font-size: var(--font-size-normal);
        line-height: 1.25;
        color: var(--color-main-bg) !important;
    }

        .fc-main-navigation .nav-link svg {
            fill: var(--color-main-bg);
        }

    .fc-main-navigation .collapse-menu, .fc-main-navigation .dropdown-menu {
        padding: 0;
        border: none;
    }

        .fc-main-navigation .collapse-menu .nav-link, .fc-main-navigation .dropdown-menu .nav-link {
            background-color: #383732;
            padding: 13px 6px 13px 48px;
        }

    .fc-main-navigation .fc-logo {
        height: 20px;
    }

        .fc-main-navigation .fc-logo.UEFA {
            height: 40px;
            border-radius: 40px;
            width: 40px;
            background-color: white;
            padding: 0 !important;
            margin: -6px 0 -6px 0;
        }

    .fc-main-navigation .btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .fc-main-navigation .nav-item.active.nav-item-header::before {
        border-left: none;
    }

    .fc-main-navigation .fc-logo.CUSTOM_DEMO {
        height: 40px;
        width: 40px;
        padding: 0 !important;
    }
/* ---------------------------------------------------
    SIDEBAR NAVIGATION STYLE
----------------------------------------------------- */
.fc-sidebar-navigation {
    z-index: var(--navigation-z-index);
    flex: 1 0 var(--navigation-width);
    background-color: var(--color-main-bg-superheavy);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
    border-right: solid 1px var(--color-vertical-divider);
}

    .fc-sidebar-navigation .nav-item-header {
        cursor: pointer;
    }


.fc-sidebar-navigation .nav-item:hover, .fc-sidebar-navigation .nav-item.active, .fc-sidebar-navigation .nav-item.dropdown.show, .fc-sidebar-navigation .nav-item-header.show {
    background-color: var(--color-main-bg-heavy);
}

    .fc-sidebar-navigation .nav-item.active:not(.nav-item-header)::before {
        border-left: 6px solid var(--color-main);
    }

    .fc-sidebar-navigation .nav-item.active.nav-item-header::before,
    #settings-tabs .nav-item.active::before{
        border-left: none;
    }

.fc-sidebar-navigation .nav-item.nav-item-header:not(.show)::after, .fc-sidebar-navigation .nav-item.dropdown:not(.show)::after {
    border-top: 4px solid var(--color-main);
}

.fc-sidebar-navigation .nav-item-header.show::after, .fc-sidebar-navigation .nav-item.dropdown.show::after {
    border-bottom: 4px solid var(--color-main);
}

.fc-sidebar-navigation .nav-link {
    font-size: var(--font-size-normal);
    font-weight: bold;
    line-height: 1.21;
    color: var(--color-main) !important;
}

    .fc-sidebar-navigation .nav-link svg {
        fill: var(--color-main);
    }

.fc-sidebar-navigation .dropdown-menu, .fc-sidebar-navigation .collapse-menu {
    padding: 0;
    margin: -10px 0 12px 0;
    border: none;
}

    .fc-sidebar-navigation .collapse-menu .nav-link, .fc-sidebar-navigation .dropdown-menu .nav-link {
        background-color: var(--color-main-bg-heavy);
        font-weight: normal;
        padding: 5px 6px 5px 49px;
    }

    .fc-sidebar-navigation .collapse-menu .nav-item.active::before, .fc-sidebar-navigation .dropdown-menu .nav-item.active::before {
        margin-top: 6px;
    }

.collapse-menu.show-active, .dropdown-menu.show-active {
    display: block;
}

/*Toggler button*/
.fc-sidebar-navigation .fc-sidebar-toggler {
    position: fixed;
    bottom: 10px;
    left: 145px;
}

    .fc-sidebar-navigation .fc-sidebar-toggler,
    .fc-sidebar-navigation .fc-sidebar-toggler:focus,
    .fc-sidebar-navigation .fc-sidebar-toggler:active {
        box-shadow: none !important;
        outline: none !important;
        border: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .fc-sidebar-navigation .fc-sidebar-toggler:hover {
            background-color: var(--color-main-bg-heavy);
        } 
    }

    .fc-sidebar-navigation .fc-sidebar-toggler svg {
        fill: var(--color-main);
        width: 16px;
        height: 16px;
    }

.fc-sidebar-navigation-collapsed .fc-sidebar-toggler {
    left: 5px;
}

    .fc-sidebar-navigation-collapsed .fc-sidebar-toggler .expand_icon,
    .fc-sidebar-navigation:not(.fc-sidebar-navigation-collapsed) .fc-sidebar-toggler .collapse_icon {
        display: none;
    }


/*Collapsed*/
.fc-sidebar-navigation-collapsed {
    flex: 1 0 53px;
}
    /*hide text*/
    .fc-sidebar-navigation-collapsed .nav-item span {
        display: none;
    }
    /*hide caret*/
    .fc-sidebar-navigation-collapsed .nav-item.dropdown::after, .fc-sidebar-navigation-collapsed .nav-item.nav-item-header::after {
        display: none;
    }
    /*adjust icons*/
    .fc-sidebar-navigation-collapsed .nav-item.active::before {
        display: none;
    }

    .fc-sidebar-navigation-collapsed .nav-link {
        padding: 0;
    }

    .fc-sidebar-navigation-collapsed .nav-item {
        height: 36px;
        width: 36px;
        margin: 6px 8px;
    }

        .fc-sidebar-navigation-collapsed .nav-item.active {
            outline: solid 1px var(--color-active);
        }
    
    /*sub menu*/
    .fc-sidebar-navigation-collapsed .navbar-nav .collapse-menu {
        position: absolute;
        top: 10px;
        left: 50px;
        background-color: var(--color-sub-menu-bg);
        border-radius: 0;
        list-style: none;
    }

        .fc-sidebar-navigation-collapsed .navbar-nav .collapse-menu span {
            display: inline-block;
        }

    .fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-link {
        background-color: var(--color-sub-menu-bg);
        color: white !important;
        padding: 0 12px;
        line-height: 36px;
        white-space: nowrap;
        border-top: solid 1px #4e4d47;
    }

    .fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-item:first-child .nav-link {
        border-top: none;
    }
        /* submenu caret */
        .fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-item:first-child .nav-link::before {
            border-right: 6px solid var(--color-sub-menu-bg);
        }

    .fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-link:hover, .fc-sidebar-navigation-collapsed.fc-sidebar-navigation .collapse-menu .nav-item.active .nav-link {
        background-color: var(--color-sub-menu-hover);
    }

    .fc-sidebar-navigation-collapsed .navbar-nav .collapse-menu .nav-item {
        width: 100%;
        margin: 0;
    }

 /*   .fc-sidebar-navigation-collapsed .navbar-nav .nav-link svg {
        margin: 9px;
    }*/

    .fc-sidebar-navigation-collapsed .collapse-menu.show-active {
        display: none;
    }

    .fc-sidebar-navigation-collapsed .collapse-menu.show {
        display: block !important;
    }
/* BP3: Large devices  */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .fc-sidebar-navigation .navbar-nav {
        padding-top: 6px;
    }
}
/* BP4: Extra large devices */
@media (min-width: 1280px) {
    .fc-sidebar-navigation .navbar-nav {
        padding-top: 6px;
    }

    /*Hide collapse/expand toggler button input larger devices*/
    .fc-sidebar-navigation .fc-sidebar-toggler {
        display: none;
    }
}