/* Hub-Menu Ende */
body {
    margin: 0;
    padding: 0;
}

/* Für das sticky Navigationsmenü (Hub-Menü) */

section:has(.hub-menu) li:has(.hub-menu) {
    top: 55px;
    z-index: 2000;
    position: sticky;
    background-color: #fff;
}

/* Für das sticky Navigationsmenü (Dashboard) */
.rui-dashboard-top {
    top: 55px;
    z-index: 2000;
    position: sticky;
    background-color: #fff;
}


html.dark-mode section:has(.hub-menu) li:has(.hub-menu), html.dark-mode .rui-dashboard-top {
    background-color: #191a1e;
}

.hub-menu {
    display: flex;
    justify-content: space-between;
}

/* Buttons für Dark-Mode anpassen */
.dark-mode .hub-menu a { 
    background-color: #191A1E; 
    border: 1px solid #444444;
}

/* Spacer für Dashboard um das Menü etwas nach unten zu rücken (!!!! Achtung: Scheinbar auch Bezugspunkt um Hub-Menu sticky zu machen */
#hub-menu-dashboard-spacer {
    display: block;
    height: 62px;
    width: 100%;
}

.tabs {
    display: flex;
}

.tabs.left {
    justify-content: flex-start;
}

.tabs.right {
    justify-content: flex-end;
}

.tab {
    text-decoration: none !important;
    color: #212121;
    font-weight: 500;
    padding: 10px 15px;
    margin: 0 10px 0 0;
    background-color: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #E1E1E1;
    transition: background-color 0.3s ease;
}

/* Kein margin für den letzten Tab */
.tabs.right .tab:last-of-type {
    margin-right: 0;
}

/*Tabs neues style 9.01.25 12:39 */
.nav-tabs .nav-link {
    box-shadow: none !important;
    background-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    border-bottom: 2px solid var(--primary-color-400) !important;
    transition: all;
    color: #212121 !important;
}

.theme-dark .nav-tabs .nav-link:hover {
    color: #fff !important;
}

.secondary-navigation .navigation .nav-tabs .nav-link {
    border-radius: 0 !important;
}

.nav-tabs .nav-link.active {
    color: #212121 !important;
    border-bottom: 2px solid var(--primary-color-600);
}

.theme-dark .nav-tabs .nav-link.active {
    color: #fff !important;
}

/* Individuelle Farben für Dashboard
  .tabs.right .tab[href="/my/"] {
    background-color: #35AEFD;
    color: #FFFAFE;
    transition: background-color 0.3s ease;
} 
.tabs.right .tab[href="/my/"]:hover {
    background-color: #71C6FD;
} */

/* Individuelle Farben für Meine Kurse 
.tabs.right .tab[href="/course/view.php?id=17&sectionid=291"] {
    background-color: #35AEFD;
    color: #FFFAFE;
    transition: background-color 0.3s ease;
}

.tabs.right .tab[href="/course/view.php?id=17&sectionid=291"]:hover {
    background-color: #71C6FD;
} */

/* Alle anderen Tabs */
.tab:hover {
    text-decoration: none !important;
    background-color: #35AEFD;
    color: #FFFAFE;
}

.tab.active {
    background-color: #35AEFD;
    color: #FFFAFE;
}

.tab::before {
    background-color: transparent;
    color: #FFFAFE;
}

/* Hub-Menu Ende */