/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification for details on configuring this project to bundle and minify static web assets. */

/*https://coolors.co/1b1b32-b36b00-f1faee*/

:root {
  /* Theme color variations */
  --TC0A: hsl(var(--TBH0), var(--TBL0), 0%);--TC0B: hsl(var(--TBH0), var(--TBL0), 5%);--TC0C: hsl(var(--TBH0), var(--TBL0), 10%);--TC0D: hsl(var(--TBH0), var(--TBL0), 15%);--TC0E: hsl(var(--TBH0), var(--TBL0), 20%);--TC0F: hsl(var(--TBH0), var(--TBL0), 25%);--TC0G: hsl(var(--TBH0), var(--TBL0), 30%);--TC0H: hsl(var(--TBH0), var(--TBL0), 35%);--TC0I: hsl(var(--TBH0), var(--TBL0), 40%);--TC0J: hsl(var(--TBH0), var(--TBL0), 45%);--TC0K: hsl(var(--TBH0), var(--TBL0), 50%);--TC0L: hsl(var(--TBH0), var(--TBL0), 55%);--TC0M: hsl(var(--TBH0), var(--TBL0), 60%);--TC0N: hsl(var(--TBH0), var(--TBL0), 65%);--TC0O: hsl(var(--TBH0), var(--TBL0), 70%);--TC0P: hsl(var(--TBH0), var(--TBL0), 75%);--TC0Q: hsl(var(--TBH0), var(--TBL0), 80%);--TC0R: hsl(var(--TBH0), var(--TBL0), 85%);--TC0S: hsl(var(--TBH0), var(--TBL0), 90%);--TC0T: hsl(var(--TBH0), var(--TBL0), 95%);--TC0U: hsl(var(--TBH0), var(--TBL0),100%);
  --TC1A: hsl(var(--TBH1), var(--TBL1), 0%);--TC1B: hsl(var(--TBH1), var(--TBL1), 5%);--TC1C: hsl(var(--TBH1), var(--TBL1), 10%);--TC1D: hsl(var(--TBH1), var(--TBL1), 15%);--TC1E: hsl(var(--TBH1), var(--TBL1), 20%);--TC1F: hsl(var(--TBH1), var(--TBL1), 25%);--TC1G: hsl(var(--TBH1), var(--TBL1), 30%);--TC1H: hsl(var(--TBH1), var(--TBL1), 35%);--TC1I: hsl(var(--TBH1), var(--TBL1), 40%);--TC1J: hsl(var(--TBH1), var(--TBL1), 45%);--TC1K: hsl(var(--TBH1), var(--TBL1), 50%);--TC1L: hsl(var(--TBH1), var(--TBL1), 55%);--TC1M: hsl(var(--TBH1), var(--TBL1), 60%);--TC1N: hsl(var(--TBH1), var(--TBL1), 65%);--TC1O: hsl(var(--TBH1), var(--TBL1), 70%);--TC1P: hsl(var(--TBH1), var(--TBL1), 75%);--TC1Q: hsl(var(--TBH1), var(--TBL1), 80%);--TC1R: hsl(var(--TBH1), var(--TBL1), 85%);--TC1S: hsl(var(--TBH1), var(--TBL1), 90%);--TC1T: hsl(var(--TBH1), var(--TBL1), 95%);--TC1U: hsl(var(--TBH1), var(--TBL1),100%);
  --TC2A: hsl(var(--TBH2), var(--TBL2), 0%);--TC2B: hsl(var(--TBH2), var(--TBL2), 5%);--TC2C: hsl(var(--TBH2), var(--TBL2), 10%);--TC2D: hsl(var(--TBH2), var(--TBL2), 15%);--TC2E: hsl(var(--TBH2), var(--TBL2), 20%);--TC2F: hsl(var(--TBH2), var(--TBL2), 25%);--TC2G: hsl(var(--TBH2), var(--TBL2), 30%);--TC2H: hsl(var(--TBH2), var(--TBL2), 35%);--TC2I: hsl(var(--TBH2), var(--TBL2), 40%);--TC2J: hsl(var(--TBH2), var(--TBL2), 45%);--TC2K: hsl(var(--TBH2), var(--TBL2), 50%);--TC2L: hsl(var(--TBH2), var(--TBL2), 55%);--TC2M: hsl(var(--TBH2), var(--TBL2), 60%);--TC2N: hsl(var(--TBH2), var(--TBL2), 65%);--TC2O: hsl(var(--TBH2), var(--TBL2), 70%);--TC2P: hsl(var(--TBH2), var(--TBL2), 75%);--TC2Q: hsl(var(--TBH2), var(--TBL2), 80%);--TC2R: hsl(var(--TBH2), var(--TBL2), 85%);--TC2S: hsl(var(--TBH2), var(--TBL2), 90%);--TC2T: hsl(var(--TBH2), var(--TBL2), 95%);--TC2U: hsl(var(--TBH2), var(--TBL2),100%);

  /* Shadows to accentuate height of panel */
  --panel-level0: none !important;
  --panel-level1: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
  --panel-level2: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
  --panel-level3: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
  --panel-level4: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -7px rgba(0,0,0,0.2);
  --panel-level5: 0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2);

  /* Font size ranges */
  --default-font-size-xxs: 9.25px;
  --default-font-size-xs: 11.25px;
  --default-font-size-s: 13px;
  --default-font-size: 15px;
  --default-font-size-m: 18px;
  --default-font-size-l: 22.5px;
  --default-font-size-xxl: 32.5px;
  --default-font-size-xxxl: 42.5px;

  /* Margin and padding ranges */
  --default-margin-half: 4px;
  --default-margin: 8px;
  --default-margin-double: 16px;
  --default-margin-triple: 24px;
  --default-margin-quadruple: 32px;

  /* Font color ranges */
  --default-color: hotpink;
  --default-color-inactive: var(--TC0M);
  --default-color-title: var(--TC1O);
  --default-color-emphasis: var(--TC1M);
  --default-color-selected: var(--TC1I);

  /* Kpi */
  --kpi-line-color: var(--TC1H);
  --kpi-label-color: var(--panel-font-color);
  --kpi-value-color: var(--default-color-title);  

  /* Misc defaults*/
  --default-radius: 6px;
  --default-column-width1: 175px;
  --default-column-height1: 94px;
  --default-column-width2: calc(2 * var(--default-column-width1)); --default-column-width3: calc(3 * var(--default-column-width1)); --default-column-width4: calc(4 * var(--default-column-width1)); --default-column-width5: calc(5 * var(--default-column-width1));     --default-column-width6: calc(6 * var(--default-column-width1)); --default-column-width7: calc(7 * var(--default-column-width1)); --default-column-width8: calc(8 * var(--default-column-width1));
  --default-column-height2: calc(2 * var(--default-column-height1)); --default-column-height3: calc(3 * var(--default-column-height1)); --default-column-height4: calc(4 * var(--default-column-height1));

  /* Page */
  --page-background-color: var(--TC0B);

  /* Header */
  --header-background-color: var(--TC0C);
  --header-font-color: var(--default-color-inactive);
  --header-height: 64px;
  --header-font-size: var(--default-font-size-l);

  /* Main menu */
  --menu-compact-width: var(--header-height);
  --menu-expanded-width: 275px;
  --menu-color: var(--TC0M);
  --menu-hover-color: var(--TC0P);
  --menu-focus-color: var(--TC0O);
  --menu-header-color: var(--TC1M);
  --menu-background-color: var(--TC0C);
  --menu-hover-background-color: var(--TC0F);
  --menu-focus-background-color: var(--TC0E);
  --menu-header-background-color: var(--TC1H);
  --account-menu-width: var(--header-height);

  /* Panel */
  --panel-background-color: var(--TC0D);
  --panel-font-color: var(--TC0O);
  --panel-label-color: var(--TC0M);
  --panel-label-faded-color: var(--TC0F);
  --panel-hint-background-color: var(--TC0E);
  --panel-hint-color: var(--TC0H);
  --panel-hint-error-color: var(--TC1M);  
  --panel-control-border-color: var(--TC0I);
  --panel-control-hover-background-color: var(--TC0E);
  --panel-control-focus-background-color: var(--TC0C);

  /* Buttons */
  --button-color: var(--TC2Q);
  --button-hover-color: var(--TC2U);
  --button-focus-color: var(--TC2S);
  --button-background-color: var(--TC2F);
  --button-hover-background-color: var(--TC2J);
  --button-focus-background-color: var(--TC2H);
  
  /* Actions */
  --action-color: var(--TC2H);
  --action-hover-color: var(--button-hover-color);
  --action-focus-color: var(--button-focus-color);

  /* Tiles */
  --tiles-default-width: calc(var(--default-column-width1) - var(--default-margin));
  --tiles-default-height: var(--tiles-height2);
  --tiles-height1: var(--default-column-height1);
  --tiles-height2: var(--default-column-height2);
  --tiles-height3: var(--default-column-height3);
  --tiles-height4: var(--default-column-height4);
  --tiles-title-color: var(--TC0O);

  /* List */
  --list-content-color: var(--default-color-inactive);
  --list-background-color-highlight: var(--TC1F);
  --list-content-color-highlight: var(--default-color-emphasis);
  --list-seperator-color: var(--TC0F);
  --list-compact-seperator-color: var(--TC0A);
  --list-action-color: var(--TC2H);
  --list-action-focus-color: var(--button-focus-color);
  --list-action-hover-color: var(--button-hover-color);
  --list-action-focus-background-color: var(--button-focus-background-color);
  --list-action-hover-background-color: var(--button-hover-background-color);

  /* Cards */
  --cards-background-color: var(--panel-background-color);
  --cards-background-hover-color: var(--panel-control-hover-background-color);
  --cards-background-focus-color: var(--panel-control-focus-background-color);
  --cards-title-color: var(--default-color-title);
  --cards-duration-color: var(--default-color-inactive);
  --cards-info-color: var(--default-color-inactive);
  --cards-action-color: var(--TC2H);
  --cards-action-focus-color: var(--button-focus-color);
  --cards-action-hover-color: var(--button-hover-color);
  --cards-action-focus-background-color: var(--button-focus-background-color);
  --cards-action-hover-background-color: var(--button-hover-background-color);

  /* Cards */
  --notes-background-color: var(--panel-background-color);
  --notes-background-hover-color: var(--panel-control-hover-background-color);
  --notes-background-focus-color: var(--panel-control-focus-background-color);
  --notes-title-color: var(--default-color-title);
  --notes-duration-color: var(--default-color-inactive);
  --notes-icon-color: var(--default-color-inactive);
  --notes-info-color: var(--default-color-inactive);
  --notes-action-color: var(--TC2H);
  --notes-action-focus-color: var(--button-focus-color);
  --notes-action-hover-color: var(--button-hover-color);
  --notes-action-focus-background-color: var(--button-focus-background-color);
  --notes-action-hover-background-color: var(--button-hover-background-color);

  /* Checkbox */
  --checkbox-width: 120px;
  --checkbox-dot-width: 26px;
  --checkbox-dot-height: 26px;  
  --checkbox-background-color: var(--panel-background-color);
  --checkbox-focus-background-color: var(--panel-control-focus-background-color);
  --checkbox-hover-background-color: var(--panel-control-hover-background-color);
  --checkbox-border-color: var(--panel-control-border-color);
  --checkbox-dot-color: var(--TC0J);
  --checkbox-dot-focus-color: var(--checkbox-dot-color);
  --checkbox-dot-hover-color: var(--checkbox-dot-color);
  --checkbox-on-color: var(--default-color-inactive);
  --checkbox-off-color: var(--default-color-inactive);

  /* Select dropdown */  
  --select-color: var(--panel-font-color);
  --select-arrow-color: var(--select-color);
  --select-border-color: var(--panel-control-border-color);
  --select-background-color: var(--panel-background-color);
  --select-background-hover-color: var(--panel-control-hover-background-color);
  --select-background-focus-color: var(--panel-control-focus-background-color);

  /* Action panel */
  --actionpanel-border-color: var(--default-color-title);
  --actionpanel-title-color:  var(--default-color-inactive);
  --actionpanel-color: var(--action-color);
  --actionpanel-focus-color: var(--button-focus-color);
  --actionpanel-hover-color: var(--button-hover-color);
  --actionpanel-background-color: var(--panel-background-color);
  --actionpanel-focus-background-color: var(--button-focus-background-color);
  --actionpanel-hover-background-color: var(--button-hover-background-color);

  /* Avatar */
  --avatar-title-color: var(--default-color-inactive);

  /* Account properties */
  --account-properties-color: var(--default-color-inactive);
  --account-properties-icon-color: var(--default-color-inactive);
  --account-properties-title-color: var(--default-color-title);

  /* Memo */
  --memo-color: var(--panel-font-color);
  --memo-border-color: var(--panel-control-border-color);
  --memo-background-focus-color: var(--panel-control-focus-background-color);
  --memo-background-hover-color: var(--panel-control-hover-background-color);

  /* Poll result*/
  --poll-color: var(--TC0O);
  --poll-bar-color: var(--TC0G);
  --poll-bar-winner-color: var(--TC1O);
  --poll-bar-winner-background-color: var(--TC1G);
  --poll-background-color: var(--panel-background-color);

  /* Saving indicator */
  --saving-indicator-color: var(--menu-color);
  --saving-indicator-error-color: var(--default-color-emphasis);
  --saving-indicator-background-color: var(--menu-background-color);

}

/* Turn off unwanted default behaviour and set initial behaviour */
*, *:before, *:after { box-sizing: inherit; outline: none; margin: 0; padding: 0; }
html, body { box-sizing: border-box; position: relative; height: 100%; background-color: var(--page-background-color); color: var(--default-color-inactive); font-family: 'ABeeZee', sans-serif; font-size: var(--default-font-size); overflow-x: hidden; }
h1, h2, p { font-family: 'ABeeZee', sans-serif; }
p { font-size: var(--default-font-size); }
a { color: inherit; text-decoration: none;}
b { color: var(--default-color-emphasis); }
button { font-family: inherit; font-size: 100%; overflow: visible; text-transform: none; border: 0; background-color: inherit; color: inherit; cursor: pointer; }
button::-moz-focus-inner { padding: 0; border: 0; }
input[type="checkbox"], input[type="radio"] { position: absolute; left: var(--default-margin-double); padding: 0; margin: 0; z-index: -1; }

/* External tags */
.validation-summary-errors { color: var(--panel-hint-error-color); padding: var(--default-margin); margin: 0; }
.validation-summary-errors > ul { padding: 0; margin: 0; left: 0; list-style: outside none none; }
.validation-summary-errors > ul > li { padding: 0; margin: 0; left: 0; }

/* General tags*/
h1 { padding: var(--default-margin) var(--default-margin-double) 0 var(--default-margin); width: 100%; color: var(--default-color-title); font-size: var(--default-font-size-l); font-weight: normal; }
h2 { padding: var(--default-margin-double) 0 0 var(--default-margin); text-decoration: none; font-weight: normal; color: var(--default-color-title); font-size: var(--default-font-size-m); }
p { padding-left: var(--default-margin); padding-right: var(--default-margin); }
ul { margin-top: var(--default-margin-double); margin-bottom: var(--default-margin-double); padding-left: var(--default-margin-quadruple); padding-right: var(--default-margin); }
li { padding-left: var(--default-margin); padding-right: var(--default-margin); }

/* General applicable styles */
.hidden { display: none !important; }
.right { text-align: right; }
p.content-description { color: var(--TC0K); }
body.waiting * { cursor: wait; }

/* Expand collapse home recent changes */
#expand-collapse-details,
#expand-collapse-expand,
#expand-collapse-collapse:target {
    display: none; 
}
#expand-collapse-collapse > h1, #expand-collapse-expand > h1 { white-space: nowrap; width: auto; display: inline-block; }
#expand-collapse-collapse:target + #expand-collapse-expand,
#expand-collapse-collapse:target ~ #expand-collapse-details { display: inherit; }

/* Page headers */
#page-header { position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height); display: flex; justify-content: space-between; font-size: var(--header-font-size); color: var(--header-color); background-color: var(--header-background-color); box-shadow: var(--panel-level2); }
#page-header-minimal { position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height); display: flex; justify-content: space-between; font-size: var(--header-font-size); color: var(--header-color); background-color: var(--header-background-color); box-shadow: var(--panel-level2); }
#page-header-minimal > a { display: grid; grid-template-columns: 56px 1fr; align-items: center; text-align: center; }
#content-container-minimal { padding-top: calc(var(--header-height)  + var(--default-margin)); text-align: center; }
#content-container-minimal > div { display: inline-block; }
#content-container { padding-top: calc(var(--header-height)  + var(--default-margin)); padding-left: calc(var(--menu-expanded-width) + var(--default-margin)); text-align: center; }
#content-container > div { display: inline-block; }

/* Main menu */
nav.main { position: absolute; top: 0; left: 0; width: var(--menu-expanded-width); display: flex; flex-direction: column; z-index: 1; transition: width 0.3s ease-out; height: 100%; }
nav.main > * { color: var(--menu-color); background-color: var(--menu-background-color); display: grid; grid-template-columns: var(--menu-compact-width) 1fr; align-items: center; min-height: var(--menu-compact-width); min-height: var(--menu-compact-width); font-size: var(--default-font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.main > a > span::first-line { font-size: var(--default-font-size-l); text-transform: capitalize; }
nav.main > div { color: var(--menu-header-color); background-color: var(--menu-header-background-color); }
nav.main > div > a > span { font-size: var(--default-font-size-l); text-transform: capitalize; }
nav.main > div > a > span > span { font-size: var(--default-font-size-xxs); position: relative; top: 10px; left: -74px; }
nav.main > * > i { font-size: var(--default-font-size-l); text-align: center; }
nav.main::after { background-color: var(--menu-background-color); box-shadow: var(--panel-level2); position: absolute; left: 0; top:0; width: var(--menu-expanded-width); height: 100%; content: ""; z-index: -1; transition: width 0.3s ease-out; }
nav.main > a:focus { color: var(--menu-focus-color); background-color: var(--menu-focus-background-color); }
nav.main > a:hover { color: var(--menu-hover-color); background-color: var(--menu-hover-background-color); }
nav.main:hover, nav.main:hover:after, nav.main:focus-within:after { width: var(--menu-expanded-width); height: 100%; }

/* Account menu*/
nav.account { position: absolute; top: 0px; right: 0px; height: var(--account-menu-width); width: var(--account-menu-width); white-space: nowrap; overflow: hidden; text-align: right; z-index: 2; }
nav.account > img { width: 100%; height: 100%; border-radius: calc(var(--account-menu-width) / 2); width: var(--account-menu-width); padding: var(--default-margin); }
nav.account > div { text-align: right; background-color: var(--menu-background-color); margin-top: 2px; margin-right: 2px; }
nav.account > div > a { display: grid; grid-template-columns: 58px 1fr; align-items: center; text-align: center; font-size: var(--default-font-size-m); }
nav.account > div > a > span { text-align: left; padding: 8px; }
nav.account > div > a:hover { background-color: var(--menu-hover-background-color); color: var(--menu-hover-color); }
nav.account > div > a:focus { background-color: var(--menu-focus-background-color); color: var(--menu-focus-color); }
nav.account:hover, nav.account > div:hover, nav.account:focus-within { height: auto; width: auto; }
nav.important-message { position: absolute; top: 0px; left: calc(var(--menu-expanded-width) + var(--default-margin-double)); height: var(--account-menu-width); width: var(--account-menu-width); white-space: nowrap; overflow: hidden; text-align: center; z-index: 2; transition: left 0.3s ease-out; overflow: visible; }
nav.important-message > a > i { font-size: xx-large; padding-top: 16px; color: var(--list-content-color-highlight); animation: fadeinout 2s linear infinite; }
nav.important-message > a > div { display: none; position: absolute; top: calc(var(--menu-compact-width) + 2px); left: 0; width: 350px; height: auto; background-color: var(--panel-background-color); text-align: left; border-radius: var(--default-radius); box-shadow: var(--panel-level2); }
nav.important-message:hover { background-color: var(--menu-hover-background-color); }
nav.important-message:hover > a > div { display: initial; }

@keyframes fadeinout {
  0%,100% { color: var(--header-background-color); }
  50% { color: var(--list-content-color-highlight); }
}

/* General flow */
.flow { display: flex; flex-direction: row; flex-wrap: wrap; flex-basis: none; }
.flow.w8 { width: var(--default-column-width8); } .flow.w6 { width: var(--default-column-width6); } .flow.w4 { width: var(--default-column-width4); } .flow.w2 { width: var(--default-column-width2); }
.flow.w80 { display: none !important; } .flow.w81 { width: var(--default-column-width1); } .flow.w82 { width: var(--default-column-width2); } .flow.w83 { width: var(--default-column-width3); } .flow.w84 { width: var(--default-column-width4); } .flow.w85 { width: var(--default-column-width5); } .flow.w86 { width: var(--default-column-width6); } .flow.w87 { width: var(--default-column-width7); } .flow.w88 { width: var(--default-column-width8); }
.flow.h1 { height: var(--default-column-height1); } .flow.h2 { height: var(--default-column-height2); } .flow.h3 { height: var(--default-column-height3); } .flow.h4 { height: var(--default-column-height4); } .flow.h5 { height: var(--default-column-height5); } .flow.h6 { height: var(--default-column-height6); } .flow.h7 { height: var(--default-column-height7); } .flow.h8 { height: var(--default-column-height8); }
.flow.space-above { padding-top: var(--default-margin); }
.tile { padding: var(--default-margin); margin-bottom: var(--default-margin); margin-right: var(--default-margin); background-color: inherit; border-radius: var(--default-radius); }
.tile.w80 { display: none !important; } .tile.w81 { width: calc(var(--default-column-width1) - var(--default-margin)); } .tile.w82 { width: calc(var(--default-column-width2) - var(--default-margin)); } .tile.w83 { width: calc(var(--default-column-width3) - var(--default-margin)); } .tile.w84 { width: calc(var(--default-column-width4) - var(--default-margin)); } .tile.w85 { width: calc(var(--default-column-width5) - var(--default-margin)); } .tile.w86 { width: calc(var(--default-column-width6) - var(--default-margin)); } .tile.w87 { width: calc(var(--default-column-width7) - var(--default-margin)); } .tile.w88 { width: calc(var(--default-column-width8) - var(--default-margin)); } 
.tile.full-width { width: calc(100% - var(--default-margin)); }
.tile.panel { background-color: var(--panel-background-color); }
.tile.noflex.justext { display: block !important; text-align: left; }
.tile.no-vertical-space { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

/* Panel */
.panel-full { width: calc(100% - var(--default-margin)); position: relative; border-radius: var(--default-radius); text-align: left; }
.panel-full.background { background-color: var(--panel-background-color); }

/* Label and validation bubble as part of control */
.label { margin-top: var(--default-margin); display: flex; white-space: nowrap; text-overflow: ellipsis; color: var(--header-font-color); user-select: none; }
.label > div:first-of-type { overflow: hidden; }
.label > div:nth-of-type(2) { display: none; position: relative; margin-left: var(--default-margin-half); color: var(--panel-hint-color); }
.label > div:nth-of-type(2) > i { font-size: var(--default-font-size-xs); vertical-align: super; }
.label > div:nth-of-type(2) > div { display: none; position: absolute; bottom: 0px; left: var(--default-margin-double); width: 300px; color: var(--panel-label-color); background-color: var(--panel-hint-background-color); padding: var(--default-margin); box-shadow: var(--panel-level1); border-radius: var(--default-radius); z-index: 1; text-align: left; }
.label > div:nth-of-type(2):hover > div { display: inherit; }
.label > div:nth-of-type(2).showhint > div {  display: inherit; }
.label > div:nth-of-type(2).err { display: inherit; color: var(--panel-hint-error-color); }
.label > div:nth-of-type(2).err.first { color: var(--panel-hint-color) !important; }
input.err { border-color: var(--panel-hint-error-color) !important; }

/* Control: textbox */
.tile.textbox > input[type="text"], .tile.textbox > input[type="password"] { width: 100%; margin-top: var(--default-margin); margin-bottom: var(--default-margin); background-color: inherit; color: var(--panel-font-color); border: 1px solid var(--panel-control-border-color); border-radius: var(--default-radius); padding: var(--default-margin); font-family: inherit; font-size: inherit; }
.tile.textbox > input[type="text"]:focus, .tile.textbox > input[type="password"]:focus { background-color: var(--panel-control-focus-background-color); }
.tile.textbox > input[type="text"]:hover, .tile.textbox > input[type="password"]:hover { background-color: var(--panel-control-hover-background-color); }

/* Control: button */
.button-container { width: 100%; padding-left:var(--default-margin); }
.button-container.right { text-align: right; }
.button-action { color: var(--button-color); background-color: var(--button-background-color); padding: var(--default-margin); border-radius: var(--default-radius); }
.button-action:focus { color: var(--button-focus-color); background-color: var(--button-focus-background-color); }
.button-action:hover { color: var(--button-hover-color); background-color: var(--button-hover-background-color); }
.button-action.align-to-control { margin-top: 42px; height: 36px; }

/* Control: checkbox */
.checkbox > div:nth-of-type(2) { position: relative; left: 0; top: 0;}
.checkbox > div:nth-of-type(2) > input[type=checkbox]:focus ~ label:nth-of-type(2) { background-color: var(--checkbox-dot-focus-color); z-index: 99999; }
.checkbox > div:nth-of-type(2) > input[type=checkbox]:focus ~ label:nth-of-type(2) { background-color: var(--checkbox-dot-focus-color); z-index: 99999; }
.checkbox > div:nth-of-type(2) > input[type=checkbox]:checked ~ label:nth-of-type(2) { left: calc(var(--checkbox-width) - var(--checkbox-dot-width) - var(--default-margin) + 2px); transition-duration: 0.2s; }
.checkbox > div:nth-of-type(2) > input[type=checkbox]:checked ~ label:nth-of-type(3) { color: var(--checkbox-on-color); transition-duration: 0.2s; }
.checkbox > div:nth-of-type(2) > input[type=checkbox]:checked ~ label:nth-of-type(4) { color: rgba(0,0,0,0); transition-duration: 0.2s; }
.checkbox > div:nth-of-type(2) > label:first-of-type { position: relative; left: 0; top: 0; display: inline-block; width: var(--checkbox-width); height: calc(var(--checkbox-dot-height) + 10px); margin: var(--default-margin) 0 0 0; background-color: var(--checkbox-background-color); border: 1px solid var(--checkbox-border-color); border-radius: var(--default-radius); cursor: pointer; }
.checkbox > div:nth-of-type(2) > label:first-of-type:hover { background-color: var(--checkbox-hover-background-color) !important; }
.checkbox > div:nth-of-type(2) > input[type=checkbox]:focus ~ label:first-of-type { background-color: var(--checkbox-focus-background-color); }
.checkbox > div:nth-of-type(2) > label:nth-of-type(2) { position: absolute; left:  6px; top: 13px; height: var(--checkbox-dot-height); width: var(--checkbox-dot-width); background-color: var(--checkbox-dot-color); border-radius: var(--default-radius); pointer-events: none; transition-duration: 0.2s; }
.checkbox > div:nth-of-type(2) > label:nth-of-type(3) { position: absolute; left: 10px; top: 18px;  color: rgba(0,0,0,0); text-transform: uppercase; pointer-events: none; transition-duration: 0.2s; user-select: none; font-size: var(--default-font-size); }
.checkbox > div:nth-of-type(2) > label:nth-of-type(4) { position: absolute; left: 0; width: calc(var(--checkbox-width) - var(--default-margin)); text-align: right; top: 18px;  color: var(--checkbox-off-color); text-transform: uppercase; pointer-events: none; transition-duration: 0.2s; user-select: none; font-size: var(--sFontDefault); }

/* Control: selection dropdown */
.tile.select { position: relative; }
.tile.select:after { display: block; content: '\f0d7'; position: absolute; left: calc(100% - (var(--default-margin-half) * 7)); top: 49px; padding: 0 0 2px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 18px; color: var(--select-arrow-color); pointer-events: none; }
.tile.select > select { width: 100%; margin-top: var(--default-margin); margin-bottom: var(--default-margin); padding: var(--default-margin) var(--default-margin-triple) var(--default-margin) var(--default-margin-half); background-color: inherit; color: var(--select-color); font-family: inherit; font-size: inherit; border: 1px solid var(--select-border-color); border-radius: var(--default-radius); -webkit-appearance: none; -moz-appearance: textfield; -webkit-box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; -moz-box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
.tile.select > select:focus { background-color: var(--select-background-focus-color); }
.tile.select > select:hover { background-color: var(--select-background-hover-color); }

/* Control: memo */
.tile > textarea { width: 100%; height: calc(100% - var(--default-margin-double) - 37px); margin: var(--default-margin) 0; padding: var(--default-margin); background-color: inherit; color: var(--memo-color); border: 1px solid var(--memo-border-color); border-radius: var(--default-radius); font-size: inherit; font-family: inherit; }
.tile > textarea:hover { background-color: var(--memo-background-hover-color); }
.tile > textarea:focus { background-color: var(--memo-background-focus-color); }

/* Control: tabstrip */
.tabstrip { position: relative; display: flex; align-items: center; height: auto; background-color: var(--panel-background-color); margin: var(--default-margin-triple) 0 var(--default-margin-quadruple) 0; padding: 0; border-radius: var(--default-radius); user-select: none; }
.tabstrip > label { color: var(--panel-color); padding: var(--default-margin-double) var(--default-margin-double) calc(var(--default-margin) + var(--default-margin-half)) var(--default-margin-double); border-bottom: var(--default-margin-half) solid rgba(0,0,0,0.0); text-transform: uppercase; cursor: pointer; }
.tabstrip > label > i { padding-right: var(--default-margin-half); }
.tabstrip > input[type="checkbox"]:focus + label { background-color:var(--menu-focus-background-color); border-color: var(--menu-focus-background-color); border-radius: var(--default-radius); }
.tabstrip > input[type="checkbox"]:hover + label { background-color:var(--menu-hover-background-color); border-color: var(--menu-hover-background-color); border-radius: var(--default-radius); }
.tabstrip > input[type="checkbox"]:checked + label { border-color: var(--default-color-selected); }
.tabstrip > input[type="checkbox"]:checked:hover + label { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.tabstrip > input[type="checkbox"]:checked:focus + label { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

/* Control: selection dropdown */
.tabstrip > div { position: relative; display: none; }
.tabstrip > div:after { display: block; content: '\f0d7'; position: absolute; right: var(--default-margin); top: 14px; padding: 0 0 2px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 18px; color: var(--select-arrow-color); pointer-events: none; }
.tabstrip > div > select { 
  margin-top: var(--default-margin); margin-bottom: var(--default-margin); 
  padding: var(--default-margin) var(--default-margin-triple) var(--default-margin) var(--default-margin-half); 
  background-color: inherit; color: var(--select-color); font-family: inherit; font-size: inherit; 
  border: 1px solid var(--panel-background-color);
  border-bottom: 4px solid var(--default-color-selected); 
  border-top-left-radius: var(--default-radius);
  border-top-right-radius: var(--default-radius);
   -webkit-appearance: none; -moz-appearance: textfield; -webkit-box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; -moz-box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
.tabstrip > div > select:focus { background-color: var(--select-background-focus-color); }
.tabstrip > div > select:hover { background-color: var(--select-background-hover-color); }




/* Control: action panel */
.actionpanel { display: flex; flex-direction: column; align-items: flex-end; border-right: solid 2px var(--actionpanel-border-color); padding-right: var(--default-margin); }
.actionpanel > div:first-of-type { text-transform: uppercase; padding: var(--default-margin); color: var(--actionpanel-title-color); }
.actionpanel > button { color: var(--actionpanel-color); background-color: inherit; border-radius: var(--default-radius); padding: 9px 8px 6px 8px; }
.actionpanel > button:focus { background-color: var(--actionpanel-focus-background-color); color: var(--actionpanel-focus-color); }
.actionpanel > button:hover { background-color: var(--actionpanel-hover-background-color); color: var(--actionpanel-hover-color); }

/* Control: avatar */
.avatar { display: flex; align-items: flex-end; position: relative; width: calc(100% - var(--default-margin)); height: calc(100% - var(--default-margin)); min-height: var(--default-column-height1); margin: 0 var(--default-margin) var(--default-margin) 0; background-position: center center; background-size: cover; border: 1px solid var(--cbPage); border-radius: var(--default-radius); }
.avatar > div { background-color: rgba(0,0,0,0.85); width: 100%; color: var(--avatar-title-color); font-size: var(--default-font-size-l); padding: var(--default-margin); text-align: left; }
.avatar.h1 { height: var(--default-column-height1); } .avatar.h2 { height: var(--default-column-height2); } .avatar.h3 { height: var(--default-column-height3); } .avatar.h4 { height: var(--default-column-height4); }

/* Control: account properties*/
.account-properties { color: var(--account-properties-color); padding-top: var(--default-margin); }
.account-properties > i { width: 20px; padding-bottom: 7px; text-align: center; color: var(--account-properties-icon-color); }
.account-properties > .title { font-size: var(--default-font-size-l); padding-bottom: var(--default-margin); color: var(--account-properties-title-color); }

/* Control: color picker */
.colorpicker > div:first-child { display: flex; padding-bottom: var(--default-margin-double); }
.colorpicker > div:first-child > div:first-child { width: calc(9 * var(--default-margin-half)); height: var(--default-margin-quadruple); background-color: hsl(var(--TTH), var(--TTL), 50%); }

/* Saving indicator */
#saving-indicator { position: fixed; top: calc(100% - 80px); width: var(--default-column-width2); left: calc(100% - 52px); margin-bottom: var(--default-margin); background-color: var(--saving-indicator-background-color); border-top-left-radius: var(--default-radius); border-bottom-left-radius: var(--default-radius); transition: left 0.3s ease-out; box-shadow: var(--panel-level2); }
#saving-indicator > div { display: flex; align-items: center; margin: var(--default-margin-double); color: var(--saving-indicator-color); }
#saving-indicator > div > i { color: var(--ccSaveIndicator); margin-left: var(--default-margin-half); margin-right: calc(var(--default-margin-double) + var(--default-margin-half)); }
#saving-indicator.expand, #saving-indicator:hover { left: calc(100% - var(--default-column-width2)); }
#saving-indicator.expand > div > i, #saving-indicator:hover > div > i { margin-right: var(--default-margin-double); }
#saving-indicator:hover { left: calc(100% - var(--default-column-width2)); transition: left 0.3s ease-out; }
#saving-indicator.err > div > i { color: var(--saving-indicator-error-color); }

/* Control: poll result */
.poll-result { width: calc(100% - var(--default-margin)); padding: var(--default-margin); text-align: left; }
.poll-result > div:first-child { width: 100%; margin-bottom: var(--default-margin-half); color: var(--poll-color); white-space: nowrap; overflow: hidden;  }
.poll-result > div:nth-child(2) { background-color: var(--poll-bar-color); color: var(--poll-color); padding: var(--default-margin-half); border-radius: var(--default-radius); width: 0; white-space: nowrap; }
.poll-result.win > div:nth-child(2) { background-color: var(--poll-bar-winner-background-color); color: var(--poll-bar-winner-color); }
/* .poll-result:nth-child(4) > div:nth-child(2) { background-color: var(--poll-bar-winner-background-color); color: var(--poll-bar-winner-color); } */

/* Popup-menu */
#popup-blocker { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.15); z-index: 9998; }
.popup-container { position: relative; z-index:9999; }
.popup-container > div { position: absolute; font-size: var(--fontSize); }
.popup-container > div > div { position: absolute; padding: var(--default-margin); width: var(--menu-expanded-width); right: 32px; top: var(--default-margin); display: flex; flex-flow: column nowrap; color: var(--menu-color); background-color: var(--menu-background-color); box-shadow: var(--panel-level2); }
.popup-container > div > div > button { display: relative; padding: var(--default-margin); text-align: left; }
.popup-container > div > div > button:focus { color: var(--menu-focus-color); background-color: var(--menu-focus-background-color); }
.popup-container > div > div > button:hover { color: var(--menu-hover-color); background-color: var(--menu-hover-background-color); }
.popup-container.hcr > div > div { right: 24px; top: 8px; } /* list header correction */
.popup-container.lcr > div > div { right: -3px; top: -34px; } /* list layout correction */
.popup-container.ccr > div > div { right: -138px; top: -338px; } /* channels layout correction */
.popup-container.dcr > div > div { right: -307px; top: -48px; } /* card layout correction */
.popup-container.tcr > div > div { right: -144px; top: 4px; } /* tiles layout correction */

/* List header, regardless of list type */
.list-header-title > div { padding-left: var(--default-margin-double); }
.list-header-title > div:first-of-type { align-self: top; font-size: var(--default-font-size-l); color: var(--default-color-title); height: 52px; line-height: 50px; }
.list-header-search-container { display: flex; flex-wrap: nowrap; position: relative; justify-content: flex-end; padding-right: var(--default-margin-double); }
.list-header-search-container > .search { position: relative; }
.list-header-search-container > .search > div { position: absolute; top: 17px; left: 8px; display: block; color: var(--panel-hint-color); font-style: italic; pointer-events: none; }
.list-header-search-container > .search > input { width: 100%; margin: var(--default-margin) 0; padding: var(--default-margin); color: inherit; background-color: var(--cbPanel); font-family: inherit; font-size: var(--default-font-size); border: 1px solid var(--panel-control-border-color); border-radius: var(--default-radius); }
.list-header-search-container > .search > input:focus { background-color: var(--panel-control-focus-background-color); }
.list-header-search-container > .search > input:hover { background-color: var(--panel-control-hover-background-color); }
.list-header-search-container > .search > button { background-color: var(--panel-background-color); position: absolute; right: 1px; top:9px; border-radius: var(--default-radius); padding: 9px 8px 6px 8px; }
.list-header-search-container > .search > button:focus { color: var(--button-focus-background-color); background-color: var(--panel-control-focus-background-color); }
.list-header-search-container > .search > button:hover { color: var(--button-hover-background-color); background-color: var(--panel-control-hover-background-color); }
.list-header-search-container > .search > input:focus + div { display: none; }
.list-header-search-container > .search > input + .hidden { display: none; }
.list-header-search-container > .action { height: 36px; margin: var(--default-margin) 0 var(--default-margin) var(--default-margin); padding: 0 var(--default-margin); color: var(--action-color); border-radius: var(--default-radius); }
.list-header-search-container > .action:focus { background-color: var(--button-focus-background-color); color: var(--action-focus-color); }
.list-header-search-container > .action:hover { background-color: var(--button-hover-background-color); color: var(--action-hover-color); }
.list-header-search-container > .action.primary { margin: var(--default-margin) 0 var(--default-margin) var(--default-margin); color: var(--button-color); background-color: var(--button-background-color); border: 1px solid var(--panel-background-color); }
.list-header-search-container > .action.primary:focus { color: var(--button-focus-color); background-color: var(--button-focus-background-color); }
.list-header-search-container > .action.primary:hover { color: var(--button-hover-color); background-color: var(--button-hover-background-color); }

/* Rendertype: tiles */
.tiles { display: flex; flex-wrap: wrap; }
.tiles > div { position: relative; top: 0; left: 0; width: var(--tiles-default-width); height: var(--tiles-default-height); margin: var(--default-margin) var(--default-margin) 0 0; background-size: cover; background-position: center center; font-size: var(--default-font-size-m); border-radius: var(--default-radius); }
.tiles > div.select:hover { cursor: pointer; }
.tiles > div.select:hover > div:first-of-type { color: var(--button-hover-color); background-color: hsla(var(--TBH2), var(--TBL2), 35%, 0.9); border-bottom-left-radius: var(--default-radius); border-bottom-right-radius: var(--default-radius); }
.tiles > div.select:hover > div:nth-of-type(2) { color: var(--cchControlHighLight); }
.tiles > div > div:first-of-type { position:absolute; bottom: 0px; padding: var(--default-margin); color: var(--tiles-title-color); background-color: rgba(0,0,0,0.8); width: 100%; text-align: left; overflow: hidden; }
.tiles > div > div:nth-of-type(2) { position:absolute; bottom: 0px; padding: var(--default-margin-half); color: var(--ccIconLight); right: 0; color: var(--ccLabel); }
.tiles > div > div > button { position: absolute; top: 4px; right: 4px; width: 0; height: 0; color: var(--action-color); background-color: var(--panel-background-color); border-radius: var(--default-radius); font-size: var(--default-font-size); overflow: hidden; }
.tiles > div > div > button:focus { width: 24px; height: 36px; color: var(--button-focus-color); background-color: var(--button-focus-background-color); }
.tiles > div > div > button:hover { color: var(--button-hover-color); background-color: var(--button-hover-background-color); }
.tiles > div:hover > div > button { width: 24px; height: 36px; }
.tiles > div.h1 { height: var(--tiles-height1); }
.tiles > div.h2 { height: var(--tiles-height2); }
.tiles > div.h3 { height: var(--tiles-height3); }
.tiles > div.h4 { height: var(--tiles-height4); }

/* Rendertype: list */
.list { display: table; padding: var(--default-margin) var(--default-margin-double) var(--default-margin) var(--default-margin); color: var(--list-content-color); table-layout: fixed;  width: 100%; text-align: left; }
.list > div { display: table-row; height: 50px; }
.list > div > div { padding-left: 8px; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis;}
.list > div.hl { background-color: var(--list-background-color-highlight); color: var(--list-content-color-highlight); }
.list > div > div:last-of-type { padding-right: 0px; }
.list > div > div { display: table-cell; vertical-align: middle; border-top: 1px solid var(--list-seperator-color); }
.list > div > div > span { font-size: var(--default-font-size-s); }
.list > div > div.c { text-align: center; }
.list > div > div.c.ov { overflow: visible; }
.list > div > div.c.i { width: 40px; }
.list > div > div.r { text-align: right; }
.list > div.select:hover { background-color: var(--panel-control-hover-background-color); cursor: pointer; }
.list > div > div > button.action { padding: var(--default-margin); border-radius: var(--default-radius); color: var(--list-action-color); }
.list > div > div > button.action:focus { background-color: var(--list-action-focus-background-color); color: var(--list-action-focus-color); }
.list > div > div > button.action:hover { background-color: var(--list-action-hover-background-color); color: var(--list-action-hover-color); }
.list > div:first-child > div { border-top-width: 0px; } /* We don't want a line above a list header */
.list > div > div.img { position: relative; overflow: visible; } /* Container for thumbnail images and a preview */
.list > div > div > .img:first-child { width: 34px; height: 34px; min-height: 0; padding: 0; margin: 0; vertical-align: middle; } /* Thumbnail image */
.list > div > div > .img:nth-child(2) { width: 250px; height: 250px; position: absolute; top: 50px; left: 50px;  visibility: hidden;} /* Preview of that image */
.list > div > div.img:hover > .img:nth-child(2) { visibility: visible; } /* Image hover over effect */
.list > div.cmp { height: 34px; }
.list > div.cmp > div { border-color: var(--list-compact-seperator-color); }

/* Rendertype: cards */
.cards { display: flex; flex-wrap: wrap; text-align: left; }
.cards > div { position: relative; display: flex; flex-direction: column; width: calc(var(--default-column-width2) - var(--default-margin)); margin:  var(--default-margin) var(--default-margin) 0 0; background-color: var(--cards-background-color); border-radius: var(--default-radius); overflow: hidden; }
.cards > div.select { cursor: pointer; }
.cards > div.select:hover { background-color: var(--cards-background-hover-color); }
.cards > div > div:first-of-type { display: flex; }
.cards > div > div > div > img { width: 64px; height: 64px; padding: var(--default-margin); }
.cards > div > div > div > div:first-of-type { padding: var(--default-margin-half) var(--default-margin) var(--default-margin) 0; color: var(--cards-title-color); font-size: var(--default-font-size-l); }
.cards > div > div > div > div:nth-of-type(2) { font-style: italic; color: var(--cards-duration-color); overflow: hidden; }
.cards > div > div > div > div:nth-of-type(3) { color: var(--cards-info-color); padding: 3px var(--default-margin) var(--default-margin) 0; }
.cards > div > div:nth-of-type(3) { position: absolute; width: 100%; top: 0; right: 0; padding: var(--default-margin) var(--default-margin); display: flex; justify-content: space-between; }
.cards > div > div:nth-of-type(3) > div > button { padding: var(--default-margin); border-radius: var(--default-radius); color: var(--cards-background-color); border-radius: var(--default-radius); }
.cards > div:hover > div:nth-of-type(3) > div > button { color: var(--cards-action-color); }
.cards > div > div:nth-of-type(3):focus-within > div > button { color: var(--cards-action-color); }
.cards > div > div:nth-of-type(3) > div > button:focus { padding: var(--default-margin); color: var(--action-focus-color); background-color: var(--cards-action-focus-background-color); }
.cards > div > div:nth-of-type(3) > div > button:hover { padding: var(--default-margin); color: var(--action-hover-color); background-color: var(--cards-action-hover-background-color) }

/* Rendertype: notes */
.notes { display: flex; flex-wrap: wrap; text-align: left; }
.notes > div { position: relative; width: calc(var(--default-column-width2) - var(--default-margin)); margin: var(--default-margin) var(--default-margin) 0 0; display: flex; flex-direction: column; background-color: var(--notes-background-color); border-radius: var(--default-radius); overflow:hidden; }
.notes > div.select { cursor: pointer;}
.notes > div.select:hover { background-color: var(--notes-background-hover-color); }
.notes > div > div:first-of-type { display: flex; }
.notes > div > div > div > img { width: 64px; height: 64px; padding: var(--default-margin); }
.notes > div > div > div > div:first-of-type { padding: var(--default-margin-half) var(--default-margin) var(--default-margin) 0; color: var(--notes-title-color); font-size: var(--default-font-size-l); }
.notes > div > div > div > div:nth-of-type(2) { font-style: italic; color: var(--notes-duration-color); overflow: hidden; }
.notes > div > div > div > div:nth-of-type(3) { color: var(--notes-info-color); padding: var(--default-margin-half) var(--default-margin) var(--default-margin) 0; }
.notes > div > div:nth-of-type(2) { position: absolute; color: var(--notes-icon-color); top: var(--default-margin); right: var(--default-margin); display: flex; }
.notes > div > div:nth-of-type(2) > div { padding-left: var(--default-margin); }
.notes > div > div:nth-of-type(3) { padding-top: calc(5 * var(--default-margin)); } /* creates padding for actions (next line) */
.notes > div > div:nth-of-type(4) { position: absolute; width: 100%; bottom: 0; padding: var(--default-margin) var(--default-margin-double); display: flex; justify-content: space-between; }
.notes > div > div:nth-of-type(4) > div > button { padding: var(--default-margin); border-radius: var(--default-radius); color: var(--notes-background-color); }
.notes > div:hover > div:nth-of-type(4) > div > button { color: var(--notes-action-color); }
.notes > div > div:nth-of-type(4):focus-within > div > button { color: var(--notes-action-color); }
.notes > div > div:nth-of-type(4) > div > button:focus { padding: var(--default-margin); background-color: var(--notes-action-focus-background-color); color: var(--notes-action-focus-color); }
.notes > div > div:nth-of-type(4) > div > button:hover { padding: var(--default-margin); background-color: var(--notes-action-hover-background-color); color: var(--notes-action-hover-color); }

.kpiState { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; }
.kpiState > div:nth-child(1) { color: var(--kpi-label-color); }
.kpiState > div:nth-child(2) { color: var(--kpi-value-color); position: absolute; top: calc(50% + 2px); left: 0; width: inherit; font-size: var(--default-font-size-xxxl); transform: translateY(-50%); }

.kpiHLine { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; }
.kpiHLine > div:nth-child(1) { background-color: var(--kpi-line-color); position: absolute; top: calc(50% + 5px); left: 0; width: inherit; height: 4px; border-radius: 2px; }
.kpiHLine > div:nth-child(2) { color: var(--kpi-value-color); position: absolute; top: calc(50% - 31px); left: 0; width: inherit; font-size: var(--default-font-size-xxl); }
.kpiHLine > div:nth-child(3) { color: var(--kpi-label-color); position: absolute; top: calc(50% + 11px); width: inherit; }

.kpiLeftLine { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; }
.kpiLeftLine > div:nth-child(1) { background-color: var(--kpi-line-color); position: absolute; left: 10px; height: inherit; width: 4px; border-radius: 2px; }
.kpiLeftLine > div:nth-child(2) { color: var(--kpi-value-color); position: absolute; top: -3px; left: 30px; font-size: var(--default-font-size-xxxl); }
.kpiLeftLine > div:nth-child(3) { color: var(--kpi-label-color); position: absolute; top: 42px; left: 30px; }

.kpiRightLine { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; }
.kpiRightLine > div:nth-child(1) { background-color: var(--kpi-line-color); position: absolute; right: 10px; height: inherit; width: 4px; border-radius: 2px; }
.kpiRightLine > div:nth-child(2) { color: var(--kpi-value-color); position: absolute; bottom: 15px; right: 30px; font-size: var(--default-font-size-xxxl); }
.kpiRightLine > div:nth-child(3) { color: var(--kpi-label-color); position: absolute; bottom: 2px; right: 30px; }


/***************
*   RESIZING   *
***************/
@media screen and (max-width: 1710px) {
  .flow.w8, .flow.w6 { width: var(--default-column-width6); }
  .flow.w60 { display: none !important; } .flow.w61 { display: flex !important; width: var(--default-column-width1); } .flow.w62 { display: flex !important; width: var(--default-column-width2); } .flow.w63 { display: flex !important; width: var(--default-column-width3); } .flow.w64 { display: flex !important; width: var(--default-column-width4); } .flow.w65 { display: flex !important; width: var(--default-column-width5); } .flow.w66 { display: flex !important; width: var(--default-column-width6); } .flow.w67 { display: flex !important; width: var(--default-column-width7); } .flow.w68 { display: flex !important; width: var(--default-column-width8); }
  .tile.w60 { display: none !important; } .tile.w61 { display: block !important; width: calc(var(--default-column-width1) - var(--default-margin)); }  .tile.w62 { display: block !important; width: calc(var(--default-column-width2) - var(--default-margin)); }  .tile.w63 { display: block !important; width: calc(var(--default-column-width3) - var(--default-margin)); }  .tile.w64 { display: block !important; width: calc(var(--default-column-width4) - var(--default-margin)); }  .tile.w65 { display: block !important; width: calc(var(--default-column-width5) - var(--default-margin)); } .tile.w66 { display: block !important; width: calc(var(--default-column-width6) - var(--default-margin)); } .tile.w67 { display: block !important; width: calc(var(--default-column-width7) - var(--default-margin)); } .tile.w68 { display: block !important; width: calc(var(--default-column-width8) - var(--default-margin)); } 
}

@media screen and (max-width: 1360px) {
  #pageheader > div:first-of-type { width: var(--menu-compact-width); transition: width 0.3s ease-out; } /* empty block with the same width as the nav menu to align nav menu */
  #content-container { padding-left: calc(var(--menu-compact-width) + var(--default-margin)); transition: padding-left 0.3s ease-out } /* empty room under nav menu */
  nav.main { width: var(--menu-compact-width); transition: width 0.3s ease-out; }
  nav.main::after { width: var(--menu-compact-width); transition: width 0.3s ease-out; }
  /* nav.important-message { left: calc(var(--menu-compact-width) + var(--default-margin-double)); transition: left 0.3s ease-out; } */
}

@media screen and (max-width: 1160px) {
  .ho4 { display: none !important; }
  .flow.w8, .flow.w6, .flow.w4 { width: var(--default-column-width4); }
  .flow.w40 { display: none !important; } .flow.w41 { display: flex !important; width: var(--default-column-width1); } .flow.w42 { display: flex !important; width: var(--default-column-width2); } .flow.w43 { display: flex !important; width: var(--default-column-width3); } .flow.w44 { display: flex !important; width: var(--default-column-width4); } .flow.w45 { display: flex !important; width: var(--default-column-width5); } .flow.w46 { display: flex !important; width: var(--default-column-width6); } .flow.w47 { display: flex !important; width: var(--default-column-width7); } .flow.w48 { display: flex !important; width: var(--default-column-width8); }
  .tile.w40 { display: none !important; } .tile.w41 { display: block !important; width: calc(var(--default-column-width1) - var(--default-margin)); } .tile.w42 { display: block !important; width: calc(var(--default-column-width2) - var(--default-margin)); } .tile.w43 { display: block !important; width: calc(var(--default-column-width3) - var(--default-margin)); } .tile.w44 { display: block !important; width: calc(var(--default-column-width4) - var(--default-margin)); } .tile.w45 { display: block !important; width: calc(var(--default-column-width5) - var(--default-margin)); } .tile.w46 { display: block !important; width: calc(var(--default-column-width6) - var(--default-margin)); } .tile.w47 { display: block !important; width: calc(var(--default-column-width7) - var(--default-margin)); } .tile.w48 { display: block !important; width: calc(var(--default-column-width8) - var(--default-margin)); } 
}

@media screen and (max-width: 800px) {
  .tabstrip > div { display: initial; }
  .tabstrip > label:not(:first-of-type) { display: none; }
  .tabstrip > input:not(:first-of-type) { display: none; }
  .flow.w8, .flow.w6, .flow.w4, .flow.w2 { width: var(--default-column-width2); }
  .ho2 { display: none !important; }
  .flow.w20 { display: none !important; } .flow.w21 { display: flex !important; width: var(--default-column-width1); } .flow.w22 { display: flex !important; width: var(--default-column-width2); } .flow.w23 { display: flex !important; width: var(--default-column-width3); } .flow.w24 { display: flex !important; width: var(--default-column-width4); } .flow.w25 { display: flex !important; width: var(--default-column-width5); } .flow.w26 { display: flex !important; width: var(--default-column-width6); } .flow.w27 { display: flex !important; width: var(--default-column-width7); } .flow.w28 { display: flex !important; width: var(--default-column-width8); }
  .tile.w20 { display: none !important; } .tile.w21 { display: block !important; width: calc(var(--default-column-width1) - var(--default-margin)); } .tile.w22 { display: block !important; width: calc(var(--default-column-width2) - var(--default-margin)); } .tile.w23 { display: block !important; width: calc(var(--default-column-width3) - var(--default-margin)); } .tile.w24 { display: block !important; width: calc(var(--default-column-width4) - var(--default-margin)); } .tile.w25 { display: block !important; width: calc(var(--default-column-width5) - var(--default-margin)); } .tile.w26 { display: block !important; width: calc(var(--default-column-width6) - var(--default-margin)); } .tile.w27 { display: block !important; width: calc(var(--default-column-width7) - var(--default-margin)); } .tile.w28 { display: block !important; width: calc(var(--default-column-width8) - var(--default-margin)); } 
  p.content-description { padding-bottom: var(--sMarginDouble); }
}

@media screen and (max-width: 480px) {
  #content-container { padding-left: var(--default-margin); transition: padding-left 0.3s ease-out } /* empty room under nav menu */
  nav.main { height: var(--header-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  nav.main::after { height: var(--header-height); }
}

/* VIP items */
.flow.hidden { display: none !important; }

.bgRed { background-color: red important!; color: pink !important;}