/* css variables */
        
         :root {
            /* color palette */
            /* use of variables: var(--color_tooltip_1); */
            /* background color */
            --b_color_body: #000000;
            --b_color_container: #111111;
            --b_color_grid_header: #1B1B1B;
            --b_color_code: #000000;
            --b_color_cell_rating: #000000;
            --b_color_button: #FF9900;
            /* front color */
            --f_color_body: #9DA5B4;
            --f_color_code: #78C379;
            --f_color_link: #ffffff;
            --f_color_05: #FF9900;
            --f_color_06: dark-white;
            --f_color_07: black;
            /* border color*/
            --brd_color_grid: #313131;
            --brd_color_container: #313131;
            /* color */
            --color_r_strong: Chartreuse;
            --color_r_positive: Green;
            --color_r_medium: orange;
            --color_r_neutral: #9DA5B4;
            --color_r_negative: red;
            --color_r_none: #9DA5B4;
            --color_tooltip_1: #000;
            --color_tooltip_2: hsla(0, 0%, 20%, 0.9);
            --color_tooltip_3: #fff;
        }
        /*region: media dependent on screen size */
        /* less then 590px*/
        
        @media (max-width: 590px) {
            .media_header_grid_01 {
                display: grid;
                grid-template-columns: 1fr;
            }
            .media_header_grid_02 {
                display: grid;
                grid-template-columns: 1fr;
            }
            .media_right {
                text-align: left;
            }
            .media_portrait_visible {
                visibility: visible;
            }
        }
        /* larger then 590px */
        
        @media (min-width: 590px) {
            .media_header_grid_01 {
                display: grid;
                grid-template-columns: 1fr 3fr;
            }
            .media_header_grid_02 {
                display: grid;
                grid-template-columns: 4fr 9fr 3fr;
            }
            .media_right {
                text-align: right;
            }
            .media_portrait_visible {
                visibility: hidden;
            }
        }
        /* region: basics */
        
        html {
            font-family: sans-serif;
            max-width: 1200px;
            min-width: 300px;
            width: 100%;
            /*margin auto means centered horizontally*/
            margin: auto;
            padding-right: 0px;
            overflow-y: auto;
            overflow-x: hidden;
            word-wrap: break-word;
            overflow-wrap: break-word;
            box-sizing: border-box;
            background-color: var(--b_color_body);
            line-height: 1.5;
            color: var(--f_color_body);
            /*This is the base font-size. All other font-size 
  use rem units that are
  relative to this font-size.*/
            /*width greater than 600 px*/
            font-size: 34px;
            -webkit-font-smoothing: antialiased;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        }
        
        body {
            max-width: 1200px;
            margin: 0;
            padding: 0;
            font-size: 60%;
            line-height: 1.5;
            background-color: var(--b_color_body);
            color: var(--f_color_body);
        }
        /*CSS Reset*/
        
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        font,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td {
            margin: 0;
            padding: 0;
            border: 0;
            border-style: none;
            outline: 0;
            font-family: 'Roboto', sans-serif;
            vertical-align: baseline;
            background: transparent;
        }
        /* no color */
        
        a:link,
        a:visited,
        a:hover,
        a:active {
            color: inherit;
            text-decoration: none;
        }
        
        h1,
        h2,
        h3,
        h4 {
            margin-bottom: 16px;
        }
        
        p {
            line-height: 1.5;
        }
        
        pre {
            white-space: pre-wrap;
        }
        
        code {
            padding: .1em .4em;
            margin: 0;
            font-size: 85%;
            background-color: var(--b_color_code);
            color: var(--f_color_code);
            border-radius: 3px;
            font-family: Consolas, Liberation Mono, Courier, monospace;
        }
        
        input[type=text] {
            background-color: var(--b_color_code);
            color: var(--f_color_code);
            width: 600px;
            border: 1px;
            border-radius: 3px;
            padding: 2px;
            font-size: 100%;
            font-family: Consolas, Liberation Mono, Courier, monospace;
        }
        
        input.read_only {
            background-color: var(--f_color_link);
            color: var(--f_color_body);
        }
        
        textarea {
            background-color: var(--b_color_code);
            color: var(--f_color_code);
            width: 900px;
            height: 120px;
            border: 1px;
            border-radius: 3px;
            padding: 18px;
            font-size: 100%;
            font-family: Consolas, Liberation Mono, Courier, monospace;
        }
        
        ul {
            margin-left: 0;
            padding-left: 40px;
            list-style-position: inside;
        }
        /* endregion: basics */
        /* region: css classes */
        /* When concatenating names that makes it hard to refactor later.
example if both `grid` and `grid_cell` start with the same word `grid`.
So I mandatory add a number. 
But to make them different to the searcher, 
the first one have underscore+number:               container0_content_grid_0
and the second one only number without underscore:  grid0_c
A small difference to help search and replace refactoring.
*/
        
        .container0_content_grid_0 {
            width: 100%;
            display: grid;
            border-radius: 5px;
            border: 0.2px solid var(--brd_color_grid);
        }
        
        .grid0_h_c {
            /* grid0 header cell */
            background-color: var(--b_color_grid_header);
            border: 0.2px solid var(--brd_color_grid);
            text-align: center;
        }
        
        .grid0_c {
            /* grid0 cell */
            border: 0.2px solid var(--brd_color_grid);
            text-align: center;
        }
        
        .grid0_c_r {
            /* grid0 cell rating*/
            background-color: var(--b_color_cell_rating);
        }
        
        .container_0 {
            display: grid;
            background-color: var(--b_color_container);
            border: 2px solid var(--brd_color_grid);
            border-radius: 5px;
            margin: 2%;
        }
        
        .container0_content_not_grid {
            padding: 20px;
        }
        
        .review_header_0 {
            display: grid;
            justify-content: space-around;
            background-color: var(--b_color_grid_header);
            padding: 10px;
        }
        
        .review_header0_cell {
            padding: 0px;
            /*border: 1px solid var(--brd_color_grid);*/
            text-align: center;
        }
        
        .review_info_header {
            display: flex;
            justify-content: space-around;
            background-color: var(--b_color_grid_header);
            padding: 10px;
        }
        
        .review_comment {
            padding: 20px;
            padding-top: 20px;
            font-family: sans-serif;
            font-size: 20px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: pre-line;
            overflow: hidden;
        }
        
        .h3y {
            /*h3 yellow ?/
    /*The .class_name is repeated in css to take different properties.*/
            background: transparent;
        }
        
        .h2u {
            /*h2 underline */
            /*The .class_name is repeated in css to take different properties.*/
            background: transparent;
            margin-top: 20px;
        }
        /* endregion: css classes */
        /* region: colors and attributes */
        
        .break-all {
            word-break: break-all;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .word-wrap {
            word-wrap: break-word;
            overflow-wrap: break-all;
        }
        
        .bold {
            font-weight: bold;
        }
        /* links are mostly white */
        
        .c_white,
        .c_link_1,
        a:link.c_link_1,
        a:visited.c_link_1,
        a:hover.c_link_1,
        a:active.c_link_1 {
            color: var(--f_color_link);
        }
        /* dark_white */
        
        .h2u {
            color: var(--f_color_06);
        }
        
        .c_black {
            color: var(--f_color_07);
        }
        /* greener */
        
        .c_strong,
        .c_high,
        .c_low_severity {
            color: var(--color_r_strong);
        }
        /* green */
        
        .c_positive {
            color: var(--color_r_positive);
        }
        /* yellow */
        
        .c_yellow,
        .c_alternative,
        .c_medium_severity,
        .h3y,
        .c_link_2,
        a:link.c_link_2,
        a:visited.c_link_2,
        a:hover.c_link_2,
        a:active.c_link_2 {
            color: var(--f_color_05);
        }
        /* orange */
        
        .c_medium,
        .c_neutral,
        .c_issue {
            color: var(--color_r_medium);
        }
        /* red */
        
        .c_alert,
        .c_negative,
        .c_low,
        .c_high_severity,
        .c_advisory {
            color: var(--color_r_negative);
        }
        /* none rating */
        
        .c_none {
            color: var(--color_r_none);
        }
        /* neutral rating */
        
        .c_neutral {
            color: var(--color_r_neutral);
        }
        
        .middle {
            display: grid;
            align-items: center;
        }
        
        .top {
            display: grid;
            align-items: top;
        }
        
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .right {
            text-align: right;
        }
        
        .under_line,
        .h2u {
            border-bottom: 1px solid var(--brd_color_container);
        }
        
        .big {
            font-size: 140%;
        }
        
        .small {
            font-size: 80%;
        }
        /* endregion: colors and attributes */
        /*** Tooltip Styles */
        /* Add this attribute to the element that needs a tooltip */
        
        [data-tooltip] {
            position: relative;
            z-index: 2;
            cursor: pointer;
        }
        /* Hide the tooltip content by default */
        
        [data-tooltip]:before,
        [data-tooltip]:after {
            visibility: hidden;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            pointer-events: none;
        }
        /* Position tooltip above the element */
        
        [data-tooltip]:before {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-bottom: 5px;
            margin-left: -80px;
            padding: 7px;
            width: 160px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: var(--color_tooltip_1);
            background-color: var(--color_tooltip_2);
            color: var(--color_tooltip_3);
            content: attr(data-tooltip);
            text-align: center;
            font-size: 14px;
            line-height: 1.2;
        }
        /* Triangle hack to make tooltip look like a speech bubble */
        
        [data-tooltip]:after {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-left: -5px;
            width: 0;
            border-top: 5px solid var(--color_tooltip_1);
            border-top: 5px solid var(--color_tooltip_2);
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: " ";
            font-size: 0;
            line-height: 0;
        }
        /* Show tooltip content on hover */
        
        [data-tooltip]:hover:before,
        [data-tooltip]:hover:after {
            visibility: visible;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1;
        }
        /*special instructions*/
        
        .blink {
            animation: blinker 1s linear infinite;
        }
        
        @keyframes blinker {
            0% {
                opacity: 1.0;
            }
            50% {
                opacity: 1.0;
            }
            100% {
                opacity: 0.1;
            }
        }
        /* region: Navigation menu */
        
        ul.nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--b_color_grid_header);
        }
        
        button,
        li.nav {
            cursor: pointer;
            background-color: var(--b_color_grid_header);
            color: var(--f_color_link);
            border: none;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        
        li.nav {
            float: left;
            display: block;
        }
        
        button:hover,
        li.nav:hover {
            background-color: var(--b_color_button);
        }
        /* end region: Navigation menu */