@font-face {
    font-family: "Raveo";
    src: url("../fonts/RaveoVF-subsetted.woff2")
            format("woff2 supports variations"),
        url("../fonts/RaveoVF-subsetted.woff2") format("woff2-variations");
    font-weight: 400 730;
    font-display: swap;
    font-synthesis: none;
}

@font-face {
    font-family: "Cascadia Code Web";
    src: url("../fonts/cascadia-code-semilight.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-synthesis: none;
}

:root {
    --ui-code-font-stack: "Cascadia Code Web", "Cascadia Code", ui-monospace,
        "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono",
        monospace;
}

/* https://flatuicolors.com/palette/se */

.wrap--w3p {
    font-family: "Raveo", -apple-system, BlinkMacSystemFont,
        "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica,
        "Helvetica Neue", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", Arial, sans-serif, "Apple Color Emoji", "Twemoji Mozilla",
        "Segoe UI Emoji", "Android Emoji";
}

.wrap--w3p .w3p-intro {
    font-size: 52px;
    margin: 24px 0 48px 0;
}
.wrap--w3p .w3p-intro b {
    font-weight: 700;
}
.wrap--w3p .w3p-intro .w3p-intro--version {
    font-family: var(--ui-code-font-stack);
    font-size: 14px;
}

.wrap--w3p h2.nav-tab-wrapper,
.wrap--w3p h3.nav-tab-wrapper {
    border-bottom: 0 none;
}

.wrap--w3p h2.nav-tab-wrapper .nav-tab {
    border: 0 none;
    border-radius: 0;
    margin: 2px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.71428571;
    font-weight: 500;
    background: #d2dae2;
    color: #485460;
}

.wrap--w3p h3.nav-tab-wrapper .nav-tab {
    border: 0 none;
    border-radius: 0;
    margin: 2px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.71428571;
    font-weight: 500;
    background: #d2dae2;
    color: #485460;
}

.wrap--w3p h2.nav-tab-wrapper .nav-tab-active,
.wrap--w3p h2.nav-tab-wrapper .nav-tab-active:focus,
.wrap--w3p h2.nav-tab-wrapper .nav-tab-active:focus:active,
.wrap--w3p h2.nav-tab-wrapper .nav-tab-active:hover {
    border-left: 3px solid #1e272e;
    background: #ffffff;
    color: #1e272e;
}
.wrap--w3p h3.nav-tab-wrapper .nav-tab-active,
.wrap--w3p h3.nav-tab-wrapper .nav-tab-active:focus,
.wrap--w3p h3.nav-tab-wrapper .nav-tab-active:focus:active,
.wrap--w3p h3.nav-tab-wrapper .nav-tab-active:hover {
    border-left: 3px solid #1e272e;
    background: #ffffff;
    color: #1e272e;
}

.wrap--w3p h2.nav-tab-wrapper .nav-tab:focus,
.wrap--w3p h2.nav-tab-wrapper .nav-tab:hover {
    color: #1e272e;
}
.wrap--w3p h3.nav-tab-wrapper .nav-tab:focus,
.wrap--w3p h3.nav-tab-wrapper .nav-tab:hover {
    color: #1e272e;
}

.wrap--w3p details {
    font-size: 1rem;
    margin: 0 0 16px 0;
    padding: 0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    width: 100%;
    background: #ffffff;
    position: relative;
}

.wrap--w3p details .summary-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    font-size: 16px;
    font-weight: 500;
}

.wrap--w3p details:hover {
    cursor: pointer;
}

.wrap--w3p details .summary-content {
    border-top: 1px solid #e2e8f0;
    cursor: default;
    padding: 1em;
    line-height: 1.5;
}

.wrap--w3p details summary {
    font-size: 15px;
    list-style: none;
    padding: 1em;
}
.wrap--w3p details[open] summary {
    border: 0 none;
    margin: 0;
}

.wrap--w3p details summary::after {
    content: none;
}

.wrap--w3p details summary:focus {
    outline: none;
}

.wrap--w3p details summary:hover .summary-chevron-up svg {
    opacity: 1;
}

.wrap--w3p details .summary-chevron-up svg {
    opacity: 0.5;
}

.wrap--w3p details .summary-chevron-up,
.wrap--w3p details .summary-chevron-down {
    pointer-events: none;
    position: absolute;
    top: 0.75em;
    right: 1em;
    background: #ffffff;
}

.wrap--w3p details .summary-chevron-up svg,
.wrap--w3p details .summary-chevron-down svg {
    display: block;
}

.wrap--w3p details summary::-webkit-details-marker {
    display: none;
}

.jtable table {
    table-layout: auto;
}

.meter-counter {
    font-size: 0.95em;
    margin-left: 8px;
    vertical-align: middle;
}

/**
 * Panels
 */
.w3p-ui-panel {
    position: relative;
    background-color: #ffffff;
    padding: 1em;
    border-radius: 16px;
    box-shadow: 0 4px 12px -2px rgba(33, 36, 44, 0.1);
    transition: box-shadow 0.3s;
}
.w3p-ui-panel:hover {
    box-shadow: 0 4px 12px -2px rgba(33, 36, 44, 0.3);
}