/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* ========================================================================== */
/**
 * Report Generator CSS Starts Here
 */
:root {
    --general-font: Trebuchet,"Bitstream Vera Sans" ,arial,helvetica,sans-serif;

    /* we don't support small devices */
    --min-width: 768px;

    /* our custom colors */
    --link-color: #3d5376;
    --description-color: #333;

    /* the reddish parts */
    --main-color:#a50000;

    --main-border-color: #d7d7d7;

    --navigation-bg-color: #333;
    --navigation-bg-hover-color: #fff;
    --navigation-color: #fff;
    --navigation-hover-color: #333;
    --navigation-hover-shadow-color: rgba(0,0,0,0.5);
    --navigation-border-color: #555;
    --navigation-shadow-color: rgba(0, 0, 0, 0.5);

    --navigation-dropdown-color: #000;
    --navigation-dropdown-bg-color: #fff;
    --navigation-dropdown-hover-bg-color: #e0e0e0;

    --navigation-line-height: 2;

    --header-full-height: 70px;
    --header-small-height: 30px;

    --header-sticky-position: var(--navigation-height);
    --table-head-sticky-position: calc(var(--navigation-height) + var(--header-small-height));

    --header-color: #f9f9f9;
    --footer-color: var(--header-color);

    --section-headline-color: #2F4782;
    --section-border-color: var(--main-border-color);

    --tab-inactive-color: #fff;
    --tab-active-color: #fafafa;

    --chart-bg-color: var(--tab-active-color);
    --chart-border-color: #ccc;

    --url-hover-border-color: var(--main-border-color);
    --url-hover-shadow-color: var(--navigation-hover-shadow-color);

    --web-vital-color-good: rgb(110,160,110);
    --web-vital-color-improve: #e0b669;
    --web-vital-color-poor: rgb(200,120,120);
    
    --load-bar-color: #8aa4c1;
}

/*
    Breakpoints used when needed
    https://getbootstrap.com/docs/5.0/layout/breakpoints/

    Breakpoint	Class infix	Dimensions
    X-Small	None	<576px
    Small	sm	≥576px
    Medium	md	≥768px
    Large	lg	≥992px
    Extra large	xl	≥1200px
    Extra extra large	xxl	≥1400px
*/

*, *:before, *:after {
  box-sizing: border-box;
}

body
{
    margin: 0px;
    padding: 0px;

    font-family: var(--general-font);

    background-color: #fff;

    min-width: var(--min-width);
}

@media screen and (max-width:1399px) {
    :root {
        --navigation-height: 25px;
    }
    html {
        font-size: 14px;
    }
}
@media screen and (min-width:1400px) {
    :root {
        --navigation-height: 28px;
    }
    html {
        font-size: 16px;
    }
}

button.clear-input
{
  background-color: transparent;
  border-color: transparent;
  margin-left: -16px;
  margin-top: 4px;
  cursor: pointer;
}

/*
 * ----------------------------------------------------
 * Avoid scrolling problems for scroll-to by
 * using local scroll bars for wide content, applied
 * when needed.
 * ----------------------------------------------------
 */
pre
{
    overflow: auto;
    font-family: var(--font);
}

/*
 * ----------------------------------------------------
 * Headlines
 * ----------------------------------------------------
 */
h1
{
    font-size: 1.8rem;
    font-weight: bold;
}
h2
{
    font-size: 1.25rem;
    font-weight: bold;
}
h3
{
    font-size: 1.1rem;
    font-weight: bold;
}

/*
 * ----------------------------------------------------
 * The global anchor definitions
 * ----------------------------------------------------
 */
a
{
    color: var(--link-color);
    text-decoration: none;
}
    a:hover
    {
        color: var(--link-color);
        text-decoration: underline;
    }
    a:visited
    {
        /* Avoid that we mark anything visited!
        color: inherit; */
    }

/*
 * We use elements that look like links but do not need the original anchor behavior. These are
 * mostly JavaScript powered elements. But we want to format them like links.
 */
.link
{
    color: var(--link-color);
    text-decoration: none;
}
    .link:hover
    {
        cursor: pointer;
        color: var(--link-color);
        text-decoration: underline;
    }

/*
 * Global container for the page
 */
#container
{
}

/*
 * ----------------------------------------------------
 * The content section. Holds header, navigation, data, footer.
 * No direct need at the moment, maybe for future use.
 * ----------------------------------------------------
 */
#content
{
}

/*
 * ----------------------------------------------------
 * The navigation that is places right upper corner.
 * ----------------------------------------------------
 */
nav
{
    position: sticky;
    top: 0px;
    z-index: 100;

    margin: 0;
    padding: 0;

    color: var(--navigation-color);
    background-color: var(--navigation-bg-color);

    box-shadow: 0px 1px 1px 0px var(--navigation-shadow-color);

    font-size: 0.875rem;

    height: var(--navigation-height);
}
    nav a, nav a:visited, nav a:hover {
        /* links in the menu should not use the global style */
        color: inherit;
        text-decoration: none;
    }
    nav ul li ul a, nav ul li ul a:hover {
        color: Black;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-flex;
      flex-wrap: wrap;
      white-space: nowrap;
    }
    nav > ul {
      line-height: var(--navigation-line-height);
      margin: 0 0.5rem;
    }
        nav > ul a {
            display: block;
            white-space: nowrap;
        }
        nav > ul > li > a {
            padding: 0 0.5rem;
        }
        nav > ul > li {
        }
            nav > ul > li > ul {
                display: none;
                position: absolute;
                box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
                background-color: var(--navigation-dropdown-bg-color);
            }
                nav ul > li > ul > li a {
                    background: var(--navigation-dropdown-bg-color);
                    color: var(--navigation-dropdown-color);
                    padding: 0 0.5rem;
                }
            nav > ul > li:hover {
                background-color: var(--navigation-bg-hover-color);
                color: var(--navigation-hover-color);
            }
                nav > ul > li:hover > ul {
                    display: block;

                }
            nav > ul > li > ul > li:hover, nav > ul > li > ul > li:hover a {
                background-color: var(--navigation-dropdown-hover-bg-color);
            }

/*
 * ----------------------------------------------------
 * Headers
 * ----------------------------------------------------
 */
#header
{
    background-color: var(--main-color);
    display: flex;
    align-items: stretch;
    gap: 1rem;

    padding: 0 0.5rem;
    color: var(--header-color);

    position: sticky;
    top: var(--header-sticky-position);
    z-index: 99;
    height: var(--header-full-height);

    transition: height 0.2s;
}
    #header .brand {
        background-color: White;
        padding: 5px 0;
        height: 90%;
        align-self: center;
    }
        #header .brand img {
            filter: drop-shadow(2px 2px 2px rgb(100 100 100 / 0.7));
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    #header .title
    {
        display: flex;
        justify-content: center;

        flex-direction: column;
    }

        #header h1
        {
            margin: 0;
            padding: 0;
            font-weight: bold;
        }
        #header h2
        {
            font-size: 0.875rem;
            font-weight: normal;
            margin: 0;
            padding: 0;
            text-align: left;
        }
            #header h2 a, #header h2 a:hover,  #header h2 a:visited {
                color: inherit;
                text-decoration: none;
            }
            #header h2 a:hover {
                /* avoids that the underline is ínterrupted on hover */
                border-bottom: 1px solid;
            }
        #header .productversion, footer .productversion {
            padding-left: 0.25rem;
        }

        #header .ltinfo {
        	display: inline;
        	margin-right: 2ch;
        	font-size: 0.875rem;
        }

        #header .ltinfo .key {
        	margin-right: 1ch;
        }

        #header .ltinfo .value {
        	font-weight: bolder;
        }

/*
 * ----------------------------------------------------
 * Additions for sticky header functionality
 * ----------------------------------------------------
 */

@media screen
{
    #header.sticky {
        height: var(--header-small-height);
    }
    #header.sticky .brand {
        padding: 2px 0;
    }

    #header.sticky h1 {
        display: none;
    }

    #header.sticky h2 {
        padding: 0px 10px 0px 15px;
    }

    #header.sticky .show-on-scroll {
        display: block  ;
    }

    #header.sticky .hide-on-scroll {
        display: none;
    }
}

#header .show-on-scroll {
   	display: none;
}

#header .hide-on-scroll {
    display: block;
}

#header .logo {
    display:block;
}
#header .logo_small {
    display:none;
}

/*
 * ----------------------------------------------------
 * Hamburger Menu
 * ----------------------------------------------------
 */

.hamburger-btn
{
   display: none;
}

nav .hamburger-icon
{
  cursor: pointer;
  float: left;
  padding: 10px;
  position: sticky;
  user-select: none;
}

.nav-menu
{
   display: none;
}

nav .hamburger-btn:checked ~ .nav-menu
{
   display: block;
   list-style: none;
   float: left;
   margin: 0;
   background: var(--navigation-bg-color);
}

nav .hamburger-icon .navicon
{
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

nav .hamburger-icon .navicon:before,
nav .hamburger-icon .navicon:after
{
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .hamburger-icon .navicon:before
{
  top: 5px;
}

nav .hamburger-icon .navicon:after
{
  top: -5px;
}

nav .hamburger-btn:checked ~ .hamburger-icon .navicon
{
  background: transparent;
}

nav .hamburger-btn:checked ~ .hamburger-icon .navicon:before
{
  transform: rotate(-45deg);
}

nav .hamburger-btn:checked ~ .hamburger-icon .navicon:after
{
  transform: rotate(45deg);
}

nav .hamburger-btn:checked ~ .hamburger-icon:not(.steps) .navicon:before,
nav .hamburger-btn:checked ~ .hamburger-icon:not(.steps) .navicon:after
{
  top: 0;
}

/* phone screens with less than 576px  */
@media only screen and (max-width: 575px)
{
  .nav-menu li,
  .nav-menu li ul li
  {
    text-align: center;
    width: 100dvw;
  }
}

/* portrait screens with 576px and up to 767px */
@media only screen and (min-width: 576px) and (max-width: 767px)
{
   .nav-menu li,
   .nav-menu li ul li
   {
     text-align: center;
     width: 100dvw;
   }
}

/* landscape screens with 768px and up to 991px */
@media only screen and (min-width: 768px) and (max-width: 991px)
{
  .nav-menu li,
  .nav-menu li ul li
  {
    text-align: center;
    width: 100dvw;
  }
}

/* screens with 992px and up to 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px)
{
  .nav-menu li,
  .nav-menu li ul li
  {
    text-align: center;
    width: 100dvw;
  }
}

/* screen with 1200px and higher */
@media only screen and (min-width: 1200px)
{
  .hamburger-icon
  {
    display: none;
  }

  .nav-menu
  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    white-space: nowrap;
  }
}

/*
 * ----------------------------------------------------
 * Data Content section to hold all the reports and
 * data tables.
 * ----------------------------------------------------
 */
#data-content
{
    padding: 0.5rem;
}

/*
 * ----------------------------------------------------
 * The footer.
 * ----------------------------------------------------
 */
footer
{
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.8rem;

    background-color: var(--main-color);
    color: var(--footer-color);
    border-radius: 2px;
    line-height: var(--navigation-line-height);
}
    footer a
    {
        color: var(--footer-color);
    }
        footer a:hover, footer a:visited
        {
            color: inherit;
        }

.forcewordbreak
{
    word-break: break-word;
}

/*
 * ----------------------------------------------------
 * The most important data container, the table
 * with all these beautiful numbers.
 * ----------------------------------------------------
 */
table
{
    margin: 0;
    padding: 0;
    width: 100%;
    border-spacing: 1px;

    font-size: 0.8rem;

    /* get wide tables displayed nicely */
    overflow: scroll;

    empty-cells: show;

    --padding: 4px 3px 3px 5px;
    --head-padding: 8px 5px 6px 5px;
    --footer-padding: 8px 3px 6px 4px;
}

table * {
    /* reset table */
    line-height: 1;
    padding: 0;
    vertical-align: middle;
}

    /*
    * ----------------------------------------------------
    * sticky table headers
    * ----------------------------------------------------
    */
    table > thead {
        position: sticky;
        top: var(--table-head-sticky-position);
    }
    table th
    {
        background-color: #BCCBDC;
        white-space: nowrap;
        padding: var(--head-padding);
    }
    table th.colgroup1
    {
        background-color: #CED9E5;
    }
        table th.table-sortable
        {
            cursor: pointer;
        }

        table th.table-sorted-asc,
        table th.table-sorted-desc
        {
            background-repeat: no-repeat;
            background-size: 12px 12px;
            background-position: right center;
        }
            table th.table-sorted-asc
            {
                background-image: url('../images/caret-down-fill.svg');
            }
            table th.table-sorted-desc
            {
                background-image: url('../images/caret-up-fill.svg');
            }
    table tfoot td.colgroup1
    {
        background-color: #CED9E5;
    }
    table tfoot {
    }
        table tfoot td, table tfoot td.key
        {
            background-color: #BCCBDC;
            padding: var(--footer-padding);
        }

    table td
    {
        background-color: #e8e8e8;
        padding: var(--padding);
        letter-spacing: 0.04em;
    }
        table td.no-data
        {
            text-align: center;
        }
        table td.key
        {
            background-color: #e8e8e8;
            padding: var(--padding);
            letter-spacing: normal;
        }
        table td.wrap
        {
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: anywhere;
        }
        table.properties td.key
        {
            vertical-align: text-top;

        }
    table td.colgroup1
    {
        background-color: #f0f0f0;
    }

      table td.trace .charts,
      table td.trace .charts .chart {
        text-align: left;
        margin-bottom: 0;
     }

        /*
            When hovering, use a change in the background color to make the effect clear.
        */
        table tbody tr:hover td
        {
        }
            table tbody tr:hover td:first-child
            {
            }
            table tbody tr:hover td:last-child
            {
            }

        /*
            Hover effect for tables. Clean lines. It uses CSS 3 for the left and right border effect.
            This is for diff and trend only, because it uses colors in the background.
         */
        #loadtestreport table tr td
        {
        }
            #loadtestreport table tr td:first-child
            {
            }
            #loadtestreport table tr td:last-child
            {
            }

        /*
            When hovering, change background and color
        */
        #loadtestreport table tbody tr:hover td:not(.colorized)
        {
            background-color: #BCCBDC !important;
            color: Black !important;
        }

        /* format total rows in bold */
        table tr.totals
        {
            font-weight: bold;
        }
        table tr.totals td.key
        {
            text-align: right;
        }
        table tbody tr:nth-child(odd) td
        {
            background-color: #f9f9fc;
        }
        table tbody tr:nth-child(odd) td.colgroup1
        {
            background-color: #f9f9fc;
        }

        table td.key
        {
            text-align: left;
            white-space: nowrap;
        }
        table.error-table {
        }
            table.error-table td {
                overflow: hidden;
            }
                table.error-table td:first-child {
                    max-width: 10em;
                }
                table.error-table td:nth-child(2) {
                    max-width: 10em;
                }
                table.error-table td:nth-child(3) {
                    max-width: 10em;
                }
                table.error-table td:nth-child(4) {
                    max-width: 30em;
                }
                table.error-table td:last-child {
                    width: fit-content;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            table.error-table td {
                vertical-align: top;
                word-wrap: break-word;
            }
            table.error-table td.trace {
            }
                table.text-table td.trace .charts {
                    text-align: left;
                    margin: 0.25rem 0;
                }

        table td.value
        {
            text-align: right;
        }
        #event-summary table td.value
        {
            vertical-align: top;
        }
        table td.text
        {
            text-align: left;
        }
        table td.centeredtext
        {
            text-align: center;
        }
        table td.number
        {
            text-align: right;
        }
        table td.link
        {
            text-align: center;
        }
        table td.error
        {
            color: #f00000;
        }
        table td.event
        {
            color: #cc6600;
        }
        /* Style the directory entry in the error table */
        table td.directory
        {
            white-space: nowrap;
        }
        /* Style the trace entry in the error table */
        table td.trace
        {
            /* let the trace column consume all the remaining space */
            width: 100%;
        }
        table td.trace pre
        {
            display: none;
            padding-top: 10px;
            padding-left: 25px;
        }

    table th input.filter
    {
        margin-top: 4px;
        padding: 2px;
        width: 80%;
        font-size: 100%;
        background-color: #FFF;
        color: #000;
        border: 0 solid #FFF;
        border-right-width: 16px;
    }

@media screen and (max-width:1399px) {
    table {
        --padding: 4px 2px 3px 2px;
        --head-padding: 8px 5px 6px 5px;
        --footer-padding: 8px 2px 6px 2px;
    }
        table th
        {
        }
        table td
        {
        }
        table td.key
        {
            padding-left: 5px;
        }
        table tfoot {
        }
            table tfoot td
            {
                padding: var(--footer-padding);
            }
}

/*
 there are some table which display mainly text, they get a different
 formatting */

.collapsible
{
}
    .collapsible-expanded
    {
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 0.75rem;
        cursor: pointer;
        background-image: url('../images/caret-down-se-fill.svg');
        background-size: 12px 12px;
    }
    .collapsible-collapsed
    {
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 0.75rem;
        cursor: pointer;
        background-image: url('../images/caret-right-fill.svg');
        background-size: 12px 12px;
    }

/*
 * ----------------------------------------------------
 * The data within a specific reporting topic
 * ----------------------------------------------------
 */
.section
{
    margin: 0.5rem 0;
    background-color: White;
    border: 1px solid var(--section-border-color);

    padding: 0.75rem;
    border-radius: 5px;
}
    .section + .section {
    }

    .section h2
    {
        background-color: White;
        border-bottom: 2px solid var(--section-headline-color);
        margin: 0;
        color: var(--section-headline-color);
    }
    .section h3
    {
        border-bottom: 1px dotted var(--section-headline-color);
        color: var(--section-headline-color);
        margin: 1rem 0 0.5rem 0;
    }
    .section .description
    {
    }
        .section .description h3
        {
            display: block;
            margin-top: 1em;
        }
        .section .description p, .section .description ul
        {
            text-align: justify;
            line-height: 1.25;
            font-size: 1rem;
            margin: 0.5rem 0;
            padding: 0;

            color: var(--description-color);
        }
        .section p.no-data
        {
            /* in case we have text indicating no Data */
            text-align: center;
        }

        .section .description ul
        {
            margin: 1em 10em 1em 4em;
        }
            .section .description ul li
            {
                list-style-position:outside;
            }

        /* Hide the more text by default */
        .section .description .link
        {
        }
            .section .description .more
            {
                display: none;
            }
            .section .description .more-hide
            {
                display: none;
            }

    /* this covers default p's and custom paragraph's for comments */
    #comment p, #comment .paragraph
    {
        margin: 10px 0px 5px 0;
        padding: 0px;

        text-align: justify;
    }

    .section p.text-center{
        text-align: center;
    }
        /* real p's inside the comment paragraph should not be indented again */
        .section .paragraph p
        {
            margin: 5px 0px;
        }
            .section .paragraph ul
            {
                 margin: 5px 20px;
            }
                .section .paragraph ul li
                {
                    list-style-position: inside;
                }


.subsection
{
    margin-top: 8px;
    margin-bottom: 8px;
}

/*
 * ----------------------------------------------------
 * The chart area, usually as tabs, but sometimes standalone.
 * You find the tab stuff below.
 * ----------------------------------------------------
 */
.charts
{
    text-align: center;
    margin: 15px auto;
    width: fit-content;
}
    .charts > .chart
    {
        margin: 10px 1px;
    }

.charts > a
{
    float: left;
}
    .charts a.backlink
    {
        float: right;
        display: block;
        margin: -1.5em 0 0 0;
        font-size: 0.7rem;
    }
    .charts .error
    {
        position: relative;
    }
        .charts .error .backlink
        {
            float: none;
            position: absolute;
            right: 2px;
            top: -8px;
            margin: 0;
            display: block;
            background-color: #fff;
            border: 1px solid var(--main-border-color);
            padding: 2px 4px;
        }
    .charts .chart
    {
        text-align: center;
    }
        .charts .chart img
        {
            border: 1px solid #bbb;
            max-width: 100%;
        }

.chart-group {

}
    .chart-group:not(:first-of-type) {
        margin-top: 1.2rem;
    }

/*
 * ----------------------------------------------------
 * The request tool tips and their styling
 * ----------------------------------------------------
*/
.cluetip-data
{
    position: absolute;
    z-index: 1000;
    /*top: 10px;*/
    left: 100px;
    width: auto !important;
    max-width: 200%;
    background-color: #f9f9fc;
    box-shadow: 2px 4px 6px 0px #555;
    border-radius: 2px;
    border: 1px solid #d7d7d7;
    display: none;

    padding: 2px;
    margin: 0;
}
    .cluetip-data.is-active{
       display: block;
    }
        .cluetip-data h4
        {
            font-size: 10px;
            background-color: #BCCBDC;
            padding: 5px;
            margin: 0;
        }
        .cluetip-data ul
        {
            margin: 0;
        }
        .cluetip-data li
        {
            padding: 2px 5px;
            list-style-type: none;
            color: #333;
        }
            .cluetip-data li:nth-child(even)
            {
                background-color: #e8e8e8;
            }

/*
 * Cluetip that opens to the left
 */
.cluetip-data-openleft
{
    transform: translateX(-100%) translateX(-20px);
}

/*
 * Background colors for table inside cluetip override report table styling
 */
#loadtestreport table tr td .cluetip-data table tr:nth-child(even) td
{
    background-color: #f9f9fc !important;
}

#loadtestreport table tr td .cluetip-data table tr:nth-child(odd) td
{
    background-color: #e8e8e8 !important;
}

#loadtestreport table tr td .cluetip-data table tr td:first-child
{
    background-color: #CED9E5 !important;
}

/*
 * ----------------------------------------------------
 * Tabs
 * ----------------------------------------------------
 */
.c-tabs {
    padding: 0px;
    font-size: 0.8rem;
}
    .c-tabs .c-tabs-nav {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0px;
    }
        .c-tabs .c-tabs-nav li.c-tabs-nav-link {
            cursor: pointer;
            position: relative;
            border: 1px solid var(--chart-border-color);
            margin: 0 5px -1px 0;
            padding: 5px 20px 0 20px;
            background-color: var(--tab-inactive-color);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
            .c-tabs .c-tabs-nav li.c-tabs-nav-link.c-is-active {
              background-color: var(--tab-active-color);
              padding-bottom: 1px;
              padding-top: 5px;
              border-bottom-width: 0px;
            }
            .c-tabs .c-tabs-nav .c-tabs-nav-link a{
                text-decoration: none;
                color: #999;
            }
            .c-tabs .c-tabs-nav .c-tabs-nav-link.c-is-active a{
                color: #000;
            }

    .c-tabs .c-tab {
        display: none;
        border: 1px solid var(--chart-border-color);
        background-color: White;
        border-radius: 2px;
    }

        .c-tabs .c-tab.c-is-active {
            display: block;
        }
        .c-tabs .c-tab .c-tab-content.chart {
            background-color: var(--chart-bg-color);
        }
            .c-tabs .c-tab .c-tab-content.chart img{
                border: none;
            }

/*
 * ----------------------------------------------------
 * Diff report color coding
 * ----------------------------------------------------
 */
.p0                                                        { background-color: rgb(245,245,245) !important; }
.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9                { background-color: rgb(248,250,248) !important; }
.p10, .p11, .p12, .p13, .p14, .p15, .p16, .p17, .p18, .p19 { background-color: rgb(241,246,241) !important; }
.p20, .p21, .p22, .p23, .p24, .p25, .p26, .p27, .p28, .p29 { background-color: rgb(226,236,226) !important; }
.p30, .p31, .p32, .p33, .p34, .p35, .p36, .p37, .p38, .p39 { background-color: rgb(212,227,212) !important; }
.p40, .p41, .p42, .p43, .p44, .p45, .p46, .p47, .p48, .p49 { background-color: rgb(197,217,197) !important; }
.p50, .p51, .p52, .p53, .p54, .p55, .p56, .p57, .p58, .p59 { background-color: rgb(183,208,183) !important; }
.p60, .p61, .p62, .p63, .p64, .p65, .p66, .p67, .p68, .p69 { background-color: rgb(168,198,168) !important; }
.p70, .p71, .p72, .p73, .p74, .p75, .p76, .p77, .p78, .p79 { background-color: rgb(154,189,154) !important; }
.p80, .p81, .p82, .p83, .p84, .p85, .p86, .p87, .p88, .p89 { background-color: rgb(139,179,139) !important; }
.p90, .p91, .p92, .p93, .p94, .p95, .p96, .p97, .p98, .p99 { background-color: rgb(125,170,125) !important; }
.p100                                                      { background-color: rgb(110,160,110) !important; }

.n0                                                        { background-color: rgb(245,245,245) !important; }
.n1, .n2, .n3, .n4, .n5, .n6, .n7, .n8, .n9                { background-color: rgb(253,248,248) !important; }
.n10, .n11, .n12, .n13, .n14, .n15, .n16, .n17, .n18, .n19 { background-color: rgb(250,242,242) !important; }
.n20, .n21, .n22, .n23, .n24, .n25, .n26, .n27, .n28, .n29 { background-color: rgb(244,228,228) !important; }
.n30, .n31, .n32, .n33, .n34, .n35, .n36, .n37, .n38, .n39 { background-color: rgb(239,215,215) !important; }
.n40, .n41, .n42, .n43, .n44, .n45, .n46, .n47, .n48, .n49 { background-color: rgb(233,201,201) !important; }
.n50, .n51, .n52, .n53, .n54, .n55, .n56, .n57, .n58, .n59 { background-color: rgb(228,188,188) !important; }
.n60, .n61, .n62, .n63, .n64, .n65, .n66, .n67, .n68, .n69 { background-color: rgb(222,174,174) !important; }
.n70, .n71, .n72, .n73, .n74, .n75, .n76, .n77, .n78, .n79 { background-color: rgb(217,161,161) !important; }
.n80, .n81, .n82, .n83, .n84, .n85, .n86, .n87, .n88, .n89 { background-color: rgb(211,147,147) !important; }
.n90, .n91, .n92, .n93, .n94, .n95, .n96, .n97, .n98, .n99 { background-color: rgb(206,134,134) !important; }
.n100                                                      { background-color: rgb(200,120,120) !important; }

.a0                                                        { background-color: rgba(245,245,245) !important; }
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8, .a9                { background-color: rgba(222,230,237,0.7) !important; }
.a10, .a11, .a12, .a13, .a14, .a15, .a16, .a17, .a18, .a19 { background-color: rgba(206,217,228,0.7) !important; }
.a20, .a21, .a22, .a23, .a24, .a25, .a26, .a27, .a28, .a29 { background-color: rgba(189,204,219,0.7) !important; }
.a30, .a31, .a32, .a33, .a34, .a35, .a36, .a37, .a38, .a39 { background-color: rgba(173,191,210,0.7) !important; }
.a40, .a41, .a42, .a43, .a44, .a45, .a46, .a47, .a48, .a49 { background-color: rgba(156,178,201,0.7) !important; }
.a50, .a51, .a52, .a53, .a54, .a55, .a56, .a57, .a58, .a59 { background-color: rgba(140,165,192,0.7) !important; }
.a60, .a61, .a62, .a63, .a64, .a65, .a66, .a67, .a68, .a69 { background-color: rgba(123,152,183,0.7) !important; }
.a70, .a71, .a72, .a73, .a74, .a75, .a76, .a77, .a78, .a79 { background-color: rgba(107,139,174,0.7) !important; }
.a80, .a81, .a82, .a83, .a84, .a85, .a86, .a87, .a88, .a89 { background-color: rgba(91,126,164,0.7) !important; }
.a90, .a91, .a92, .a93, .a94, .a95, .a96, .a97, .a98, .a99 { background-color: rgba(81,114,148,0.7) !important; }
.a100                                                      { background-color: rgba(72,102,132,0.7) !important; }

tr:hover td.p0, tr:hover td.n0, tr:hover td.a0 { background: linear-gradient(rgb(188, 203, 220), rgba(0,0,0,0), rgb(188, 203, 220)) !important; }

tr:hover td.p1, tr:hover td.p2, tr:hover td.p3, tr:hover td.p4, tr:hover td.p5, tr:hover td.p6, tr:hover td.p7, tr:hover td.p8, tr:hover td.p9                           { background: linear-gradient(rgb(235,250,235), rgba(0,0,0,0), rgb(235,250,235)) !important; }
tr:hover td.p10, tr:hover td.p11, tr:hover td.p12, tr:hover td.p13, tr:hover td.p14, tr:hover td.p15, tr:hover td.p16, tr:hover td.p17, tr:hover td.p18, tr:hover td.p19 { background: linear-gradient(rgb(229,246,229), rgba(0,0,0,0), rgb(229,246,229)) !important; }
tr:hover td.p20, tr:hover td.p21, tr:hover td.p22, tr:hover td.p23, tr:hover td.p24, tr:hover td.p25, tr:hover td.p26, tr:hover td.p27, tr:hover td.p28, tr:hover td.p29 { background: linear-gradient(rgb(215,236,215), rgba(0,0,0,0), rgb(215,236,215)) !important; }
tr:hover td.p30, tr:hover td.p31, tr:hover td.p32, tr:hover td.p33, tr:hover td.p34, tr:hover td.p35, tr:hover td.p36, tr:hover td.p37, tr:hover td.p38, tr:hover td.p39 { background: linear-gradient(rgb(212,227,212), rgba(0,0,0,0), rgb(212,227,212)) !important; }
tr:hover td.p40, tr:hover td.p41, tr:hover td.p42, tr:hover td.p43, tr:hover td.p44, tr:hover td.p45, tr:hover td.p46, tr:hover td.p47, tr:hover td.p48, tr:hover td.p49 { background: linear-gradient(rgb(197,217,197), rgba(0,0,0,0), rgb(197,217,197)) !important; }
tr:hover td.p50, tr:hover td.p51, tr:hover td.p52, tr:hover td.p53, tr:hover td.p54, tr:hover td.p55, tr:hover td.p56, tr:hover td.p57, tr:hover td.p58, tr:hover td.p59 { background: linear-gradient(rgb(183,208,183), rgba(0,0,0,0), rgb(183,208,183)) !important; }
tr:hover td.p60, tr:hover td.p61, tr:hover td.p62, tr:hover td.p63, tr:hover td.p64, tr:hover td.p65, tr:hover td.p66, tr:hover td.p67, tr:hover td.p68, tr:hover td.p69 { background: linear-gradient(rgb(168,198,168), rgba(0,0,0,0), rgb(168,198,168)) !important; }
tr:hover td.p70, tr:hover td.p71, tr:hover td.p72, tr:hover td.p73, tr:hover td.p74, tr:hover td.p75, tr:hover td.p76, tr:hover td.p77, tr:hover td.p78, tr:hover td.p79 { background: linear-gradient(rgb(154,189,154), rgba(0,0,0,0), rgb(154,189,154)) !important; }
tr:hover td.p80, tr:hover td.p81, tr:hover td.p82, tr:hover td.p83, tr:hover td.p84, tr:hover td.p85, tr:hover td.p86, tr:hover td.p87, tr:hover td.p88, tr:hover td.p89 { background: linear-gradient(rgb(139,179,139), rgba(0,0,0,0), rgb(139,179,139)) !important; }
tr:hover td.p90, tr:hover td.p91, tr:hover td.p92, tr:hover td.p93, tr:hover td.p94, tr:hover td.p95, tr:hover td.p96, tr:hover td.p97, tr:hover td.p98, tr:hover td.p99 { background: linear-gradient(rgb(125,170,125), rgba(0,0,0,0), rgb(125,170,125)) !important; }
tr:hover td.p100                                                                                                                                                         { background: linear-gradient(rgb(110,160,110), rgba(0,0,0,0), rgb(110,160,110)) !important; }

tr:hover td.n1, tr:hover td.n2, tr:hover td.n3, tr:hover td.n4, tr:hover td.n5, tr:hover td.n6, tr:hover td.n7, tr:hover td.n8, tr:hover td.n9                            { background: linear-gradient(rgb(253,248,248), rgba(0,0,0,0), rgb(253,248,248)) !important; }
tr:hover td.n10, tr:hover td.n11, tr:hover td.n12, tr:hover td.n13, tr:hover td.n14, tr:hover td.n15, tr:hover td.n16, tr:hover td.n17, tr:hover td.n18, tr:hover td.n19 { background: linear-gradient(rgb(250,242,242), rgba(0,0,0,0), rgb(250,242,242)) !important; }
tr:hover td.n20, tr:hover td.n21, tr:hover td.n22, tr:hover td.n23, tr:hover td.n24, tr:hover td.n25, tr:hover td.n26, tr:hover td.n27, tr:hover td.n28, tr:hover td.n29 { background: linear-gradient(rgb(244,228,228), rgba(0,0,0,0), rgb(244,228,228)) !important; }
tr:hover td.n30, tr:hover td.n31, tr:hover td.n32, tr:hover td.n33, tr:hover td.n34, tr:hover td.n35, tr:hover td.n36, tr:hover td.n37, tr:hover td.n38, tr:hover td.n39 { background: linear-gradient(rgb(239,215,215), rgba(0,0,0,0), rgb(239,215,215)) !important; }
tr:hover td.n40, tr:hover td.n41, tr:hover td.n42, tr:hover td.n43, tr:hover td.n44, tr:hover td.n45, tr:hover td.n46, tr:hover td.n47, tr:hover td.n48, tr:hover td.n49 { background: linear-gradient(rgb(233,201,201), rgba(0,0,0,0), rgb(233,201,201)) !important; }
tr:hover td.n50, tr:hover td.n51, tr:hover td.n52, tr:hover td.n53, tr:hover td.n54, tr:hover td.n55, tr:hover td.n56, tr:hover td.n57, tr:hover td.n58, tr:hover td.n59 { background: linear-gradient(rgb(228,188,188), rgba(0,0,0,0), rgb(228,188,188)) !important; }
tr:hover td.n60, tr:hover td.n61, tr:hover td.n62, tr:hover td.n63, tr:hover td.n64, tr:hover td.n65, tr:hover td.n66, tr:hover td.n67, tr:hover td.n68, tr:hover td.n69 { background: linear-gradient(rgb(222,174,174), rgba(0,0,0,0), rgb(222,174,174)) !important; }
tr:hover td.n70, tr:hover td.n71, tr:hover td.n72, tr:hover td.n73, tr:hover td.n74, tr:hover td.n75, tr:hover td.n76, tr:hover td.n77, tr:hover td.n78, tr:hover td.n79 { background: linear-gradient(rgb(217,161,161), rgba(0,0,0,0), rgb(217,161,161)) !important; }
tr:hover td.n80, tr:hover td.n81, tr:hover td.n82, tr:hover td.n83, tr:hover td.n84, tr:hover td.n85, tr:hover td.n86, tr:hover td.n87, tr:hover td.n88, tr:hover td.n89 { background: linear-gradient(rgb(211,147,147), rgba(0,0,0,0), rgb(211,147,147)) !important; }
tr:hover td.n90, tr:hover td.n91, tr:hover td.n92, tr:hover td.n93, tr:hover td.n94, tr:hover td.n95, tr:hover td.n96, tr:hover td.n97, tr:hover td.n98, tr:hover td.n99 { background: linear-gradient(rgb(206,134,134), rgba(0,0,0,0), rgb(206,134,134)) !important; }
tr:hover td.n100                                                                                                                                                         { background: linear-gradient(rgb(200,120,120), rgba(0,0,0,0), rgb(200,120,120)) !important; }

tr:hover td.a1, tr:hover td.a2, tr:hover td.a3, tr:hover td.a4, tr:hover td.a5, tr:hover td.a6, tr:hover td.a7, tr:hover td.a8, tr:hover td.a9                           { background: linear-gradient(rgba(238,242,246,0.7), rgba(0,0,0,0), rgba(238,242,246,0.7)) !important; }
tr:hover td.a10, tr:hover td.a11, tr:hover td.a12, tr:hover td.a13, tr:hover td.a14, tr:hover td.a15, tr:hover td.a16, tr:hover td.a17, tr:hover td.a18, tr:hover td.a19 { background: linear-gradient(rgba(222,230,237,0.7), rgba(0,0,0,0), rgba(222,230,237,0.7)) !important; }
tr:hover td.a20, tr:hover td.a21, tr:hover td.a22, tr:hover td.a23, tr:hover td.a24, tr:hover td.a25, tr:hover td.a26, tr:hover td.a27, tr:hover td.a28, tr:hover td.a29 { background: linear-gradient(rgba(206,217,228,0.7), rgba(0,0,0,0), rgba(206,217,228,0.7)) !important; }
tr:hover td.a30, tr:hover td.a31, tr:hover td.a32, tr:hover td.a33, tr:hover td.a34, tr:hover td.a35, tr:hover td.a36, tr:hover td.a37, tr:hover td.a38, tr:hover td.a39 { background: linear-gradient(rgba(189,204,219,0.7), rgba(0,0,0,0), rgba(189,204,219,0.7)) !important; }
tr:hover td.a40, tr:hover td.a41, tr:hover td.a42, tr:hover td.a43, tr:hover td.a44, tr:hover td.a45, tr:hover td.a46, tr:hover td.a47, tr:hover td.a48, tr:hover td.a49 { background: linear-gradient(rgba(173,191,210,0.7), rgba(0,0,0,0), rgba(173,191,210,0.7)) !important; }
tr:hover td.a50, tr:hover td.a51, tr:hover td.a52, tr:hover td.a53, tr:hover td.a54, tr:hover td.a55, tr:hover td.a56, tr:hover td.a57, tr:hover td.a58, tr:hover td.a59 { background: linear-gradient(rgba(156,178,201,0.7), rgba(0,0,0,0), rgba(156,178,201,0.7)) !important; }
tr:hover td.a60, tr:hover td.a61, tr:hover td.a62, tr:hover td.a63, tr:hover td.a64, tr:hover td.a65, tr:hover td.a66, tr:hover td.a67, tr:hover td.a68, tr:hover td.a69 { background: linear-gradient(rgba(140,165,192,0.7), rgba(0,0,0,0), rgba(140,165,192,0.7)) !important; }
tr:hover td.a70, tr:hover td.a71, tr:hover td.a72, tr:hover td.a73, tr:hover td.a74, tr:hover td.a75, tr:hover td.a76, tr:hover td.a77, tr:hover td.a78, tr:hover td.a79 { background: linear-gradient(rgba(123,152,183,0.7), rgba(0,0,0,0), rgba(123,152,183,0.7)) !important; }
tr:hover td.a80, tr:hover td.a81, tr:hover td.a82, tr:hover td.a83, tr:hover td.a84, tr:hover td.a85, tr:hover td.a86, tr:hover td.a87, tr:hover td.a88, tr:hover td.a89 { background: linear-gradient(rgba(107,139,174,0.7), rgba(0,0,0,0), rgba(107,139,174,0.7)) !important; }
tr:hover td.a90, tr:hover td.a91, tr:hover td.a92, tr:hover td.a93, tr:hover td.a94, tr:hover td.a95, tr:hover td.a96, tr:hover td.a97, tr:hover td.a98, tr:hover td.a99 { background: linear-gradient(rgba(91,126,164,0.7), rgba(0,0,0,0), rgba(91,126,164,0.7)) !important; }
tr:hover td.a100                                                                                                                                                         { background: linear-gradient(rgba(81,114,148,0.7), rgba(0,0,0,0), rgba(81,114,148,0.7)) !important; }

.added    { color: #888 !important; }
.removed  { color: #888 !important; }

.infinity {
    /* The infinity symbol is rather small, so we use a larger font size for it, however, without increasing the height of the table cell. */
    font-size: 1.3rem;
    line-height: 0;
}


/*
 * ----------------------------------------------------
 * Apdex color coding
 * ----------------------------------------------------
 */
.apdex              { white-space: nowrap; }
.apdex-excellent    { background-color: rgb(110,160,110) !important; }
.apdex-good         { background-color: rgb(154,189,154) !important; }
.apdex-fair         { background-color: #e0b669          !important; }
.apdex-poor         { background-color: rgb(217,161,161) !important; }
.apdex-unacceptable { background-color: rgb(200,120,120) !important; }

/*
 * ----------------------------------------------------
 * Web Vitals
 * ----------------------------------------------------
 */
.web-vital {
}

.web-vital-score {
    display: flex;
    margin-left: 75%;
    width: 0;
    justify-content: center;
    white-space: nowrap;
    font-weight: bold;
}

.web-vital-score-good {
    color: var(--web-vital-color-good);
}

.web-vital-score-improve {
    color: var(--web-vital-color-improve);
}

.web-vital-score-poor {
    color: var(--web-vital-color-poor);
}

.web-vital-gauge {
    display: flex;
    margin-left: 75%;
    width: 0;
    justify-content: center;
}

.web-vital-gauge-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid grey; /* border color will be adjusted via class */
}

.web-vital-gauge-arrow-good {
    border-top-color: var(--web-vital-color-good);
}

.web-vital-gauge-arrow-improve {
    border-top-color:  var(--web-vital-color-improve);
}

.web-vital-gauge-arrow-poor {
    border-top-color: var(--web-vital-color-poor);
}

.web-vital-bar {
    padding-top: 2px;
    display: flex;
}

.web-vital-bar-segment {
    flex-grow: 0; /* will be adjusted via style */
    height: 5px;
    background-color: grey;  /* will be adjusted via class */
}

.web-vital-bar-segment-good {
    background-color: var(--web-vital-color-good);
}

.web-vital-bar-segment-improve {
    background-color: var(--web-vital-color-improve);
}

.web-vital-bar-segment-poor {
    background-color: var(--web-vital-color-poor);
}

/*
 * ----------------------------------------------------
 * Load Distribution
 * ----------------------------------------------------
 */

table tbody tr:nth-child(odd) .load-meter {
    background: linear-gradient(to right, var(--load-bar-color) calc(var(--loadp) * 1%), #f9f9fc calc(var(--loadp) * 1%));
}

table tbody tr .load-meter {
    background: linear-gradient(to right, var(--load-bar-color) calc(var(--loadp) * 1%), #e8e8e8 calc(var(--loadp) * 1%));
}

table tbody tr:hover .load-meter {
    background: linear-gradient(to right, var(--load-bar-color) calc(var(--loadp) * 1%), #BCCBDC calc(var(--loadp) * 1%));
}

/*
 * ----------------------------------------------------
 * Printing
 * ----------------------------------------------------
 */
/* Hide any stuff intended only for printing. */
.print {
    display: none;
}

/* Show any stuff not intended for printing. */
.no-print {
}

.hidden {
    display: none;
}

/********************************************************************************************
 *
 * Spinner
 *
 ********************************************************************************************/

/*
 * The progress meter look and feel
 */
#progressmeter {
    display: flex;
    flex-direction: column;
    align-items: center;
}
	#progressmeter.hidden {
	    display: none;
	}
	#progressmeter p {
	    padding: 9px;
	}

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 24px;
    height: 24px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.crosshair {
  display: block;
  position: relative;
  overflow: hidden;
}
.crosshair img {
  width: 100%;
}
.crosshair .hair {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -1px;
  margin-left: -1px;
  background: transparent;
  border-top: 1px solid black;
  border-left: 1px solid black;
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
}
.crosshair .hair.hair-vertical {
  height: 100%;
}
.crosshair .hair.hair-horizontal {
  width: 100%;
}