.tabpanel-nav { display:flex;flex-wrap:wrap;width:100%;margin:0;padding:0;border-bottom:1px solid #dee2e6; }
.tabpanel-nav:before { content:'';padding-left:.5rem; }
.tabpanel-nav:after { content:'';padding-right:.5rem; }
.tabpanel-nav__item { list-style:none;margin-bottom:-1px; }
.tabpanel-nav__link { display: block;padding:.5rem 1rem;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem;color:#495057;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none; }
.tabpanel-nav__link:hover { background-color:#fff;border-color:#dee2e6 #dee2e6 transparent; }
.tabpanel-nav__link--active { background-color:#fff;border-color:#dee2e6 #dee2e6 transparent; }
.tabpanel-content { width:100%;overflow:hidden;background-color:#fff; }
.tabpanel-content__item { display:none; }
.tabpanel-content__item--active { display:block;padding:.5rem; }

/*
@media (prefers-color-scheme: dark) {
    .tabpanel-nav { border-color:#fff; }
    .tabpanel-nav__link { color:#999999; }
    .tabpanel-nav__link:hover { color:#cccccc;background-color:#1f1f1f;border-color:#666; }
    .tabpanel-nav__link--active { color:#cccccc;background-color:#1f1f1f;border-color:#fff #fff #1f1f1f; }
    .tabpanel-content { background-color:#1f1f1f; }
}
*/