/* ###################################################### */
    /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
    


    /* ###################################################### */
    /* material-icons: to find tags:    https://fonts.google.com/icons?selected=Material+Icons, find notes:   https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web */
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(./fonts/material.woff2) format('woff2');
    }
    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 18px;
        line-height: 1.15;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }
    .material-icons .small {
        font-size: 18px;
    }



    /* ###################################################### */
    /* global variables */
    :root {

        --CELL:42px; 
        --CELL1:42px;
        --CELL2:86px;
        --CELL3:130px;
        --CELL4:174px;
        --CELL5:218px;
        --CELL6:262px;
        --CELL7:306px;
        --CELL8:350px;
        --CELL9:394px;
        --CELLMAX:394px;

        --OUTER: 2px;
        --GAP: 2px;
        --PAD: 15px;
        --SCREENMAX: 4096;

    }    


    /* ###################################################### */
    /* basics */
    * {
        padding:0;
        margin:0;
        border:0;
        box-sizing: border-box;
        font-family:Verdana,sans-serif;
        font-size:13px;
        font-weight: normal;

        /* text-select off */
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */

    }

    /* ###################################################### */
    /* weights  h1-h6*/
    h1,h2,h3,h4,h5,h6 {
        padding:0;
        margin:0;
        border:0;
        box-sizing: border-box;
        font-family:Verdana,sans-serif;
        font-size:13px;
        font-weight: normal;
    }



    /* ###################################################### */
    /* body */
    html, body { 
        width:100%;
        height:100%;
        overflow:hidden;
        background:var(--colorBack);
        background:rgb(30,32,34);
    }
    body { 
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACZJREFUGFdjVFJRa2DABP8ZQRL37txCkVRSUaunnkQD2CgsljMAACd+FosxetQmAAAAAElFTkSuQmCC");
    }



    /* ###################################################### */
    /* page */
    .page {
        position:absolute;
        background-repeat: repeat;
        background-position: 0px 0px;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }



    /* ###################################################### */
    /* frame */
    .frame {
        position:absolute;
        background-repeat: repeat;
        background-position: 0px 0px;
        border:0;
        opacity:0;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }


    /* ###################################################### */
    /* spinner */
    .spinner {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        position:absolute;
        top: calc(50% - var(--CELL)/2);
        left: calc(50% - var(--CELL)/2);
        width: var(--CELL);
        height: var(--CELL);
    }


    /* ###################################################### */
    /* box */
    .box {
        display: flex;
        align-items: center;
        justify-content: center;  

        position:absolute;
        background:#deb; /* debug */
        border-radius: 1px;
        transition: border-width 0.1s;
    }
    .box:hover {
        border: var(--cellBorderHover);
        border-width:2px;
    }



    /* ###################################################### */
    /* menu */
    .menu {
        position: absolute;
        left: var(--OUTER);
        top: var(--OUTER);
        right: var(--OUTER);

        display: grid;
        grid-template-columns: var(--CELL) var(--CELL) var(--CELL) var(--CELL) minmax(var(--CELL), 1fr) var(--CELL);
        grid-template-rows: var(--CELL);
        gap: var(--GAP);
        overflow: hidden;

        max-width: var(--SCREENMAX);
        min-width: var(--CELLMAX);                
        max-height: var(--CELL);
    }
    .menuItem {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 var(--PAD);

        height: var(--CELL);
        max-height: var(--CELL);

        background:rgb(40,42,44);
        opacity:0.9;
    }

    .menuItem.left {
        justify-content: left;
    }
    .menuItem.right {
        justify-content: right;
    }

    .menuItem:hover {
        cursor: pointer;
        opacity:1;
        /*border:solid 1px rgba(0,0,0,0.1);*/
    }


    /* ###################################################### */
    /* status */
    .status {
        position: absolute;
        left: var(--OUTER);
        bottom: var(--OUTER);
        right: var(--OUTER);

        display: grid;
        grid-template-columns: var(--CELL) var(--CELL) var(--CELL) var(--CELL) minmax(var(--CELL), 1fr) var(--CELL);
        grid-template-rows: var(--CELL);
        gap: var(--GAP);
        overflow: hidden;

        max-width: var(--SCREENMAX);
        min-width: var(--CELLMAX);                
        max-height: var(--CELL);
    }
    .statusItem {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 var(--PAD);

        height: var(--CELL);
        max-height: var(--CELL);

        background:rgb(40,42,44);
        opacity:0.9;
    }

    .statusItem.left {
        justify-content: left;
    }
    .statusItem.right {
        justify-content: right;
    }

    .statusItem:hover {
        cursor: pointer;
        opacity:1;
        /*border:solid 1px rgba(0,0,0,0.1);*/
    }


            
    /* ###################################################### */
    /* side */            
    .side {
        position:absolute;
        top:calc(var(--OUTER) + var(--CELL) + var(--GAP));
        right: var(--OUTER);
        width: var(--CELL);
        bottom: var(--OUTER);

        display: grid;
        grid-template-rows: var(--CELL) var(--CELL) minmax(var(--CELL), 1fr) var(--CELL) var(--CELL);
        grid-template-columns: var(--CELL);
        gap: var(--GAP);
        overflow: hidden;

        max-width: var(--CELL);
        min-width: var(--CELL);
        max-height: var(--SCREENMAX);
        
    }
    .sideItem {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 var(--PAD);

        width: var(--CELL);
        max-width: var(--CELL);

        background:rgb(40,42,44);
        opacity:0.9;
    }

    .sideItem:hover {
        cursor: pointer;
        opacity:1;
        /*border:solid 1px rgba(0,0,0,0.1);*/
    }



    /* ###################################################### */
    /* main */
    .main {
        position:absolute;
        left:var(--OUTER);
        top:calc(var(--GAP) + var(--CELL) + var(--GAP));
        right:calc(var(--OUTER) + var(--CELL) + var(--GAP));
        bottom: var(--OUTER);
        overflow:hidden;
    }
    .mainScroller {
        width:100%;
        min-height:100%;
    }

    /* ###################################################### */
    /* modal */
    .modal {
        position:absolute;
        left:var(--OUTER);
        top:calc(var(--GAP) + var(--CELL) + var(--GAP));
        right:var(--OUTER);
        bottom: var(--OUTER);
        overflow:hidden;
        z-index: 10000;
    }



    /* ###################################################### */
    /* group */   
    .group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--CELLMAX), 1fr));
        gap: var(--GAP);

        max-width: var(--SCREENMAX);
        margin-bottom: var(--GAP);
    }
    .groupItem {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;

        height: var(--CELL2);
        opacity:0.8;
    }

    .groupItem:hover {
        cursor: pointer;
        opacity:1;
    }



    /* ########################################################## */
    /* row */            
    .row {
        display: grid;
        grid-template-columns: var(--CELL) auto var(--CELL);
        grid-template-rows: var(--CELL);
        gap: var(--GAP);
        overflow: hidden;

        max-width: var(--SCREENMAX);
        min-width: var(--CELL);
        width:100%;
        max-height: var(--CELL);
    }
    .rowItem {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 var(--PAD);
        white-space: nowrap;

        height: var(--CELL);
        max-height: var(--CELL);
    }
    .rowItem.left {
        justify-content: left;
    }
    .rowItem.right {
        justify-content: right;
    }
    


    /* ###################################################### */
    /* colors */

    .high50 {
        background: rgb(205,190,30);
        color: #111;
    }
    .high60 {
        background: rgb(209,197,70);
        color: #111;
    }
    .high70 {
        background: rgb(213,204,110);
        color: #111;
    }
    .high80 {
        background: rgb(217,211,150);
        color: #111;
    }
    .high90 {
        background: rgb(221,218,190);
        color: #111;
    }
    .high100 {
        background: rgb(225,225,225);
        color: #111;
    }


    .gray30 {
        background:rgb(30,32,34);
        color:#ddd;
    }
    .gray40 {
        background:rgb(40,42,44);
        color:#ddd;
    }
    .gray50 {
        background:rgb(50,52,54);
        color:#ddd;
    }
    .gray60 {
        background:rgb(60,62,64);
        color:#bbb;
    }
    .gray70 {
        background:rgb(70,72,74);
        color:#111;
    }
    .gray80 {
        background:rgb(80,82,84);
        color:#111;
    }
    .gray90 {
        background:rgb(90,92,94);
        color:#111;
    }

    .selected {
        opacity:1;
        color:#ddd;
    }

    .hidden {
        display:none;
    }

    /* media queries */
    @media only screen and (max-width: 400px) {
        h1 { display:none; }
        h2 { display:none; }
        h3 { display:none; }
    }  
    @media only screen and (max-width: 600px) {
        h2 { display:none; }
        h3 { display:none; }
    }      
    @media only screen and (max-width: 1200px) {
        h3 { display:none; }
    }