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

body {
    --color1: #222222;
    --color2: #2D2D2D;
    --color3: #3B3B3B;

    --color-font1: #DBDEE1;
    --color-font2: #949BA4;
    --color-font3: #008F11;

    background-color: var(--color1);

    font-size: 16px;
    font-family: "Courier Prime", serif;
    display:flex;
}

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

#sidebar {
    padding: 60px 16px 16px 16px;
    flex-basis: calc(min(300px, max(200px, 10%)));
}

#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 {
    max-width: calc(min(100%,1000px));
    width: 100%;
    white-space: nowrap;
    display: inline-block;
}

#sidebar ul {
    list-style-type: none;
    padding: 0px 16px 0px 8px;
    line-height: 1.75;
}

#sidebar li {
    padding: 4px 16px 2px;
    font-size: 1.0rem;
    border-radius: 4px;
    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);
    font-size: 1.1rem;
    pointer-events: none;
}

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

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

#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 th {
    background-color: black;
}

/* Tables that have hoverable table rows */

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

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

#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:first-child {
    border-top-left-radius: 12px;
}

#content .table-header th:last-child {
    border-top-right-radius: 12px;
}

#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 {
    line-height: 96%;
    border-collapse: collapse;
}

#content td {
    color: var(--color-font2);
    border-bottom: 1px #444444 solid;
}

#content th, #content td {
    padding: 10px 12px 6px 12px;
}

#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 {
    border-radius: 4px;
    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: "Courier Prime", serif;
    font-size: 13px;
    cursor: pointer;
}

#content .btn-blue {
    background-color: #1C2D40;
}

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

#content .btn-preset {
    background-color: #046c52;
}

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

#content .btn-red {
    background-color: #74261E;
}

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

#content .btn-blue:hover {
    background-color: #2E3F57;
}

#content .btn-start:hover {
    background-color: #2E3F57;
}

#content .btn-preset:hover {
    background-color: #11a983;
}

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

#content .btn-red:hover {
    background-color: #8E3D28;
}

#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: 13px;
    color: black;
    line-height: 92%;
    background-color: #CCCCCC;
    font-family: "Courier New";
    border-radius: 4px;
    padding: 7px 10px 4px;
}

#content .statblock-green {
    background-color: #76D576;
}

#content .statblock-blue {
    background-color: #60F0FF;
}

#content .statblock-yellow {
    background-color: #EFF891;
}

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

#content .redlink {
    color: #FF4D4D;
}

/* Long StatBlock which we can copy */

#content .long-statblock {
    background-color: var(--color3);
    color: var(--color-font2);
    border-radius: 4px;
    padding: 0.50rem 0.75rem;
}

/* Test Views */

#content #config {
    float: left;
}

#content #actions {
    float: left;
}

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

#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 {
        flex-basis: 100%;
        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;
    border-radius: 8px;
}