@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 400; src: url('/static/ATNameMono-Regular.woff2')         format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 400; src: url('/static/ATNameMono-Italic.woff2')          format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 500; src: url('/static/ATNameMono-Medium.woff2')          format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 500; src: url('/static/ATNameMono-MediumItalic.woff2')    format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 600; src: url('/static/ATNameMono-SemiBold.woff2')        format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 600; src: url('/static/ATNameMono-SemiBoldItalic.woff2')  format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 700; src: url('/static/ATNameMono-Bold.woff2')            format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 700; src: url('/static/ATNameMono-BoldItalic.woff2')      format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 800; src: url('/static/ATNameMono-ExtraBold.woff2')       format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 800; src: url('/static/ATNameMono-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: normal; font-weight: 900; src: url('/static/ATNameMono-Black.woff2')           format('woff2'); }
@font-face { font-family: 'AT Name Mono'; font-style: italic; font-weight: 900; src: url('/static/ATNameMono-BlackItalic.woff2')     format('woff2'); }

@font-face { font-family: 'Univers'; font-style: normal; font-weight: 300; src: url('/static/UniversLight.ttf')   format('truetype'); }
@font-face { font-family: 'Univers'; font-style: normal; font-weight: 400; src: url('/static/UniversRegular.ttf') format('truetype'); }
@font-face { font-family: 'Univers'; font-style: normal; font-weight: 700; src: url('/static/UniversBold.ttf')    format('truetype'); }

@font-face { font-family: 'Univers Condensed'; font-style: normal; font-weight: 400; src: url('/static/UniversCnRg.ttf')   format('truetype'); }
@font-face { font-family: 'Univers Condensed'; font-style: normal; font-weight: 700; src: url('/static/UniversCnBold.ttf') format('truetype'); }

.typo {
  background-image: linear-gradient(to right, oklch(60% 0.18 295deg), oklch(80% 0.20 30deg));
  background-clip: text;
  color: transparent;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.affine {
  background-image: linear-gradient(to right, oklch(60% 0.20 25deg), oklch(80% 0.125 55deg));
  background-clip: text;
  color: transparent;
  font-weight: 500;
  letter-spacing: 1px;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #a090d0;
}

body {
    --color1: #202020;
    --color2: #303030;
    --color3: #404040;

    --color-font1: #E0E0E0;
    --color-font2: #A0A0A0;
    --color-font3: #a080f0;

    background-color: var(--color1);
    background-image: radial-gradient(#303030 1px, transparent 0);
    background-size: 1em 1em;

    font-size: 16px;
    font-family: "AT Name Mono", monospace;
    font-feature-settings: "case";
    font-weight: 400;
    display: flex;
}

body, html, main{
    padding: 0;
    margin: 0;
    min-width: 100%;
    max-width: 100%;
    white-space: nowrap;
}

sup {
    font-size: 0.667em;
    font-weight: 500;
    line-height: 0;
    vertical-align: baseline;
    position: relative;
    bottom: 0.375em;
}

sub {
    font-size: 0.667em;
    font-weight: 500;
    line-height: 0;
    bottom: -0.25em;
}

pre {
    font-size: 16px;
    font-family: "AT Name Mono", monospace;
    font-feature-settings: "case";
    font-weight: 400;
}

#content-header h2 {
    font-family: "Univers Condensed";
    font-size: 2rem;
    font-weight: normal;
    width: max-content;
    margin-block: 0.75em;
    background-color: var(--color1);
}

#content h4 {
    margin-block: 0 1em;
}

#sidebar {
    background-color: #202020A0;
    padding: 2rem 1rem 1rem;
    height: max-content;
    z-index: 1;
}

#sidebar-toggle {
    display: none;
}

#content-parent{
    flex-grow: 1;
    justify-content: left;
    height: 100%;

    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
}

#content {
    width: 100%;
    white-space: nowrap;
    display: inline-block;
}

#sidebar ul {
    list-style-type: none;
    line-height: 1.5em;
    margin-block: 0;
    padding: 0;
}

#sidebar li {
    margin-block: 0;
    padding: 0 0.5em 0;
    transition: background-color 0.2s ease-in-out;
}

#sidebar li a {
    color: var(--color-font2);
    display: block;
    width: 100%;
}

#sidebar li:hover {
    background-color: #303030;
}

#sidebar .header {
    color: var(--color-font3);
    pointer-events: none;
}

#sidebar hr {
    border: 1px var(--color2) solid;
    margin-block: 0.5em;
}

/* Table Striping, with overriding for the Table Header */

#content table:not(.stripes) {
    background-color: #202020A0;
}

#content .stripes tr:nth-child(odd):not(.table-header) {
    background-color: var(--color1);
}

#content .stripes tr:nth-child(even):not(.table-header) {
    background-color: var(--color2);
}

#content .stripes tr:nth-child(odd):not(.table-header) .statblock- {
    background: repeating-linear-gradient(-45deg, #202020, #202020 15.25px, #1C1C1C 15.25px, #1C1C1C 31.5px)
}

#content .stripes tr:nth-child(odd):not(.table-header) .statblock-green {
    background-color: #3b3d69;
}

#content .stripes tr:nth-child(odd):not(.table-header) .statblock-yellow {
    background-color: #765546;
}

#content .stripes tr:nth-child(odd):not(.table-header) .statblock-red {
    background-color: #6e282b;
}

#content .stripes th {
    background-color: black;
}

/* Tables that have hoverable table rows */

#content .hoverable tr:nth-child(odd):hover:not(.table-header) {
    background-color: #242424;
}

#content .hoverable tr:nth-child(even):hover:not(.table-header) {
    background-color: #343434;
}

#content .hoverable tr:hover{
    background-color: var(--color1);
}

/* Tables that are too long can wrap words */

#content .wrappable td {
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
}

/* Things which enable a Cursor Pointer event */

#content .cursor {
    cursor: pointer;
}

/* Table Headers in General */

#content .table-header th {
    color: var(--color-font3);
    font-weight: 400;
    background-color: #171717;
}

#content .table-small-header th {
    color: var(--color-font3);
    font-size: small;
    background-color: #171717;
}

/* Table Spacer for chaining Tables as a hack */

#content .table-spacer th, #content .table-spacer tr {
    background-color: var(--color1);
    height: 1rem;
}

#content .table-spacer-small th, #content .table-spacer-small tr {
    background-color: #171717;
    height: 0.4rem;
    padding: 0px;
}

/* Generic Table CSS for all Tables */

#content table {
    border-collapse: collapse;
}

#content td {
    color: var(--color-font2);
}

#content td:first-child {
  padding-left: 1em;
}

#content td:last-child {
  padding-right: 1em;
}

#content th, #content td {
    padding: 0.25em 0.5em 0.25em;
}

#content .anchor-container {
    display: flex;
    justify-content: space-between;
}

#content .anchor-container > .anchorbutton {
    flex: 1;
    margin-right: 4px;
}

#content .anchor-container > .anchorbutton:last-child {
    margin-right: 0px;
}

#content .anchorbutton {
    padding: 8px 0px 6px;
    border-color: transparent;
    color: var(--color-font1);
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
    font-family: "AT Name Mono", monospace;
    font-size: 13px;
    cursor: pointer;
}

#content .btn-blue {
    /* background-color: #454462; */
    /* background-color: #6a588a; */
    background-color: #4c425f;
}

#content .btn-start {
    background-color: #444171;
    width: 100%;
}

#content .btn-preset {
    background-color: #3a714f;
}

#content .btn-yellow {
    background-color: #885538;
}

#content .btn-red {
    background-color: #742e2b;
}

#content .btn-disabled {
    background-color: var(--color3);
}

#content .btn-blue:hover {
    /* background-color: #525270; */
    /* background-color: #79679a; */
    background-color: #5c4a7b;
}

#content .btn-start:hover {
    background-color: #514e80;
}

#content .btn-preset:hover {
    background-color: #497f5d;
}

#content .btn-yellow:hover {
    background-color: #976346;
}

#content .btn-red:hover {
    background-color: #843c38;
}

#content .btn-disabled:hover {
    background-color: var(--color3);
    cursor: not-allowed;
    transform: none;
}

#content .copy-button {
    color: var(--color-font2);
    transition: color 0.2s ease-in-out;

}

#content .copy-button:hover {
    color: var(--color-font3);
    cursor: pointer;
}

/* Short StatBlock to show SPRT and Test Results */

#content .statblock {
    /* font-size: 12px; */
    line-height: 1.5em;
    color: #BEBEBE;
    font-family: "AT Name Mono", monospace;
    padding: 0.5em 1.0em 0.5em;
}

#content .statblock- {
    background: repeating-linear-gradient(-45deg, #303030, #303030 15.25px, #2C2C2C 15.25px, #2C2C2C 31.5px)
}

#content .statblock-green {
    background-color: #40426f;
}

#content .statblock-blue {
    background-color: #40426f;
}

#content .statblock-yellow {
    background-color: #7c5a4c;
    color: #cecece;
}

#content .statblock-red {
    background-color: #742d31;
}

#content .redlink {
    color: #FF4D4D;
}

/* Long StatBlock which we can copy */

#content .long-statblock {
    background-color: var(--color1);
    color: var(--color-font2);
    border: 2px solid var(--color2);
    padding: 0.50rem 0.75rem;
    line-height: 1.5em;
}

#content .long-statblock sub {
  margin-left: 2px;
}

/* Test Views */

#content #config {
    float: left;
    background-color: #202020A0;
}

#content #actions {
    float: left;
}

#content #results {
    display: inline-block;
    width: 100%;
}

#content .test-config {
    font-size: 1.0rem;
}

#content .test-config .td-label {
    color: var(--color-font1);
}

/* ??? */

td pre {
    margin: 0px;
    padding: 0px;
}

#content .error-message {
    color: red;
}

#content .warning-message {
    color: yellow;
}

#content .status-message {
    color: green;
}

#content .site-title {
    color: var(--color-font3);
}

#content .default-network {
    color: var(--color-font3);
    transform: scale(1.10);
}

#content .was-default-network {
    color: #EFF891;
    transform: scale(0.90);
}

#content .non-default-network {
    color: var(--color-font1);
    transform: scale(0.70);
}


#content .numeric {
    text-align: right;
}

/* #content .branch_name {
    font-style: italic;
} */

#content .active-highlight {
    border-left: 4px solid var(--color-font3);
}

/* Styles for screen widths less than 768px */
@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: var(--color1);
        overflow-y: auto;
        transition: transform cubic-bezier(0.82, 0.08, 0.1, 0.93) 0.3s;
        transform: translateX(-100%);
    }

    body.sidebar-open #sidebar {
        transform: none;
    }

    #sidebar-toggle {
        display: flex;
        padding: 10px;
        color: var(--color-font1);
        background-color: transparent;
        border: none;
        position: relative;
        z-index: 10;
        font-size: 2.2rem;
    }

    #content-parent {
        height: auto;
        flex-grow: 0;
        flex-basis: 100%;
        padding: 0 8px;
    }

    #content {
        overflow-x: hidden;
        margin-top: 70px;
    }

    #content-header {
        display: flex;
        align-items: center;
        background-color: var(--color1);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    #content-header h2 {
        /* Adjust the font size to the screen width, ensuring that the title doesn't overflow */
        font-size: clamp(1.0rem, 4.8vw, 1.4rem);
        margin: 8px 0;
    }

    #content-header .site-title {
        white-space: break-spaces;
    }

    body {
        flex-direction: column;
    }

    /* Disable vertical body scrolling when the sidebar is open */
    body.sidebar-open {
        position: fixed;
        overflow-y: hidden;
    }

    /* Horizontally scrollable table */
    table {
        display: block;
        overflow-x: auto;
    }

    /* Tables cannot break words to avoid issues such as single-letter lines */
    /* The only exception is the test config table */
    #content .wrappable:not(.workload-container .test-config) td {
        word-break: normal;
    }

    /* Test Views */
    .workload-container {
        display: flex;
        flex-direction: column;
    }

    #content #actions {
        order: -1;
        margin: 0 0 1rem 0;
    }

    #content #config {
        float: none;
    }

    #content .long-statblock {
        overflow-x: auto;
    }
}


/* On-hover for long engine options in workloads */

#content .engine-options {
    position: relative;
}

#content .engine-options:hover .engine-options-popup {
    display: block;
}

#content .engine-options-popup {
    display: none;
    position: absolute;
    padding: 8px 12px;
    background-color: #000;
    border: 1px solid #ccc;
}