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

body {
    --color1: #2E3440;
    --color2: #3B4252;
    --color3: #434C5E;

    --color-font1: #ECEFF4;
    --color-font2: #D8DEE9;
    --color-font3: #88C0D0;

    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: #4C566A;
}

#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: #242933;
}

/* Tables that have hoverable table rows */

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

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

#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: #242933;
}

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

/* 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: #242933;
    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 #4C566A 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;
}

/* Buttons */
#content .btn-blue {
    background-color: #6C63FF;          /* modern indigo-blue */
    color: #ffffff;
}
#content .btn-blue:hover {
    background-color: #837BFF;
}

#content .btn-start {
    background-color: #34495E;          /* unchanged navy-gray */
    color: #ffffff;
}
#content .btn-start:hover {
    background-color: #4A6278;
}

#content .btn-preset {
    background-color: #00B894;          /* teal green */
    color: #ffffff;
}
#content .btn-preset:hover {
    background-color: #17DDB2;
}

#content .btn-yellow {
    background-color: #F5B041;          /* golden amber */
    color: #1F1400;                     /* dark brown for contrast */
}
#content .btn-yellow:hover {
    background-color: #FFC966;
}

#content .btn-red {
    background-color: #E74C3C;          /* soft red */
    color: #ffffff;
}
#content .btn-red:hover {
    background-color: #FF6B5E;
}

#content .btn-disabled {
    background-color: #444;
    color: #999;
    cursor: not-allowed;
}

#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: #D8DEE9;
    font-family: "Courier New";
    border-radius: 4px;
    padding: 7px 10px 4px;
}

#content .statblock-green {
    background-color: #24C486;   /* balanced mint green */
    color: #101F1A;               /* dark readable text */
}

#content .statblock-blue {
    background-color: #3FA9F5;   /* modern soft blue */
    color: #0E1A26;
}

#content .statblock-yellow {
    background-color: #FFCB4A;   /* golden yellow */
    color: #2B2300;
}

#content .statblock-red {
    background-color: #FF6B6B;   /* soft crimson red */
    color: #2C0D0D;
}


#content .redlink {
    color: #BF616A;
}

/* 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;
}

#content .llr-history-panel {
    margin: 0.5rem 0 0.75rem;
}

#content .llr-history-loader {
    width: 372px;
}

#content .llr-history-widget {
    position: relative;
    width: 372px;
    z-index: 0;
}

#content .llr-history-chart {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
}

#content .llr-history-yaxis {
    width: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #A7B1C2;
    font-size: 10px;
    text-align: right;
    padding: 0.35rem 0 1.6rem;
}

#content .llr-history-main {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

#content .llr-history-plot {
    position: relative;
    z-index: 0;
}

#content .llr-history-placeholder {
    width: 320px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #4C566A;
    background: linear-gradient(135deg, #242933 0%, #2C3440 100%);
    color: #A7B1C2;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

#content .llr-history-placeholder-error {
    color: #E07A7A;
}

#content .llr-history-label {
    color: var(--color-font3);
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

#content .llr-history-graph {
    display: block;
    width: 320px;
    height: 112px;
}

#content .llr-history-graph .llr-bg {
    fill: #242933;
    stroke: #4C566A;
    stroke-width: 1;
}

#content .llr-history-graph .llr-grid-line {
    stroke: rgba(236, 239, 244, 0.14);
    stroke-width: 1;
}

#content .llr-history-graph .llr-boundary {
    stroke: #BF616A;
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0.85;
}

#content .llr-history-graph .llr-zero {
    stroke: #81A1C1;
    stroke-width: 1;
    opacity: 0.7;
}

#content .llr-history-graph .llr-path-positive,
#content .llr-history-graph .llr-path-negative {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#content .llr-history-graph .llr-path-positive {
    stroke: #7BCB8B;
}

#content .llr-history-graph .llr-path-negative {
    stroke: #E07A7A;
}

#content .llr-history-xaxis {
    display: flex;
    justify-content: space-between;
    color: #A7B1C2;
    font-size: 10px;
    padding: 0 0.2rem;
}

#content .llr-history-graph .llr-point {
    fill: #ECEFF4;
}

#content .llr-history-graph .llr-hover-line {
    stroke: #ECEFF4;
    stroke-width: 1;
    stroke-dasharray: 2 2;
    opacity: 0;
}

#content .llr-history-graph .llr-hover-point {
    fill: #ECEFF4;
    stroke-width: 1.5;
    opacity: 0;
}

#content .llr-history-graph .llr-hover-line.active,
#content .llr-history-graph .llr-hover-point.active {
    opacity: 0.85;
}

#content .llr-history-graph .llr-hover-point-positive {
    stroke: #7BCB8B;
}

#content .llr-history-graph .llr-hover-point-negative {
    stroke: #E07A7A;
}

#content .llr-history-graph .llr-hitbox {
    fill: transparent;
    cursor: crosshair;
}

#content .llr-history-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.18rem 0.4rem 0.12rem;
    border-radius: 4px;
    background-color: rgba(36, 41, 51, 0.96);
    border: 1px solid #4C566A;
    color: var(--color-font1);
    font-size: 0.72rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    white-space: nowrap;
    z-index: 1;
}

#content .llr-history-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}

/* 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: #BF616A;
}

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

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

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

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

#content .was-default-network {
    color: #EBCB8B;
    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%);
        z-index: 30;
    }

    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: 21;
        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: 20;
    }

    #content-header h2 {
        font-size: clamp(1.0rem, 4.8vw, 1.4rem);
        margin: 8px 0;
    }

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

    body {
        flex-direction: column;
    }

    body.sidebar-open {
        position: fixed;
        overflow-y: hidden;
    }

    table {
        display: block;
        overflow-x: auto;
    }

    #content .wrappable:not(.workload-container .test-config) td {
        word-break: normal;
    }

    .workload-container {
        display: flex;
        flex-direction: column;
    }

    #content .llr-history-loader,
    #content .llr-history-widget,
    #content .llr-history-plot {
        z-index: 0;
    }

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

    #content #config {
        float: none;
    }

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