/*
 Tabs
 -------------------------------------------------*/
.tabs, .tabs li {
    margin: 0;
    padding: 0;
}

.tabs {
    display: flex;
    font: 400 1em system-ui, sans-serif;
    flex-flow: row wrap;
    list-style: none;
    margin: 2em 0 2em -.875em;
}

h1 + .tabs,
h2 + .tabs,
h3 + .tabs {
    margin-top: 1em;
}

.tabs a {
    padding: 1em;
}

.tabs .active a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/*
 Tab Panels
 -------------------------------------------------*/
.tab-panel {
    margin: 2em 0;
}

.tab-panel > * {
    border: 1px solid #eef3f9;
    border-radius: 6px;
    padding: 2em 2.5em;
}

.tab-panel > :not(.active) {
    display: none;
}

.tab-panel > :not(.hide) {
    margin-top: 2em;
}

.tab-panel > :first-child,
.tab-panel > .hide + :not(.hide),
.tab-panel > * > :first-child {
    margin-top: 0;
}

.tab-panel > * > :last-child {
    margin-bottom: 0;
}

/*
 Popup Tabs
 -------------------------------------------------*/
.popup .tabs {
    margin: 0 0 1em -.875em;
    position: fixed;
}

.popup .tab-panel {
    margin: 2em 0 0 0;
    overflow: auto;
    height: calc(100% - 2em);
}

/*
 Table Tabs
 -------------------------------------------------*/
td .tabs {
    margin-top: 0;
}

td .tab-panel {
    margin: 0 -1em -1em 0;
}