.app-service {
    --module-accent: var(--color-primary);
    --module-accent-rgb: var(--color-primary-rgb);
}

.app-time_registration {
    --module-accent: var(--color-primary);
    --module-accent-rgb: var(--color-primary-rgb);
}

.module-app-nav {
    border-bottom: 1px solid var(--bs-border-color);
    flex-wrap: wrap;
    padding-bottom: 0;
}

.module-app-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.module-app-tab:hover {
    color: var(--module-accent);
}

.module-app-nav .nav-link.module-app-tab.active {
    border-bottom-color: var(--module-accent);
    color: var(--module-accent);
}

.module-app-tab-icon {
    background: rgb(var(--module-accent-rgb) / 0.12);
    color: var(--module-accent);
    flex: 0 0 auto;
    height: 40px;
    width: 40px;
}

.module-app-nav .nav-link.module-app-tab.active .module-app-tab-icon {
    background: var(--module-accent);
    color: white;
}

.module-app-tab-icon > .material-icons {
    font-size: 22px;
}

.module-app-tab-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}