@charset "UTF-8";

@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/MaterialIconsSharp-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Lato';
    src: url(fonts/lato/Lato-Light.woff2) format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url(fonts/lato/Lato-Medium.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url(fonts/lato/Lato-Black.woff2) format('woff2');
    font-weight: bold;
    font-style: normal;
}

* {
    font-family: "Lato", -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif,
        "Material Icons Sharp",
        "FontAwesome";
}

/* TODO is ef-rootcontainer still needed? IIt should be t7-webcomponentroot anyway */
*,
:root,
ef-rootcontainer {
    /* define levels of stack */
    --level-0: #DDD;
    --level-1: #D8D8D8;
    --level-2: #EEE;
    --level-3: #E8E8E8;
    --level-4: #FFF;
    --level-5: #E8E8E8;
    --level-5: #EEE;

    --level-0-darkmode: #000;
    --level-1-darkmode: #080808;
    --level-2-darkmode: #111;
    --level-3-darkmode: #181818;
    --level-4-darkmode: #222;
    --level-5-darkmode: #282828;
    --level-6-darkmode: #333;

    /* general items */
    --text-color: #000;
    --link-color: #08F;
    --link-color-hilite: #08F;

    /* Level 1 items */
    --window-border-color-light: var(--level-5);
    --window-border-color-dark: var(--level-0);
    --window-table-line: var(--level-1);

    /* Level 3 items */
    --window-header-background-color: var(--level-3);
    --input-entry-background-color: var(--level-3);

    /* Level 4 items */
    --window-background-color: var(--level-4);

    /* Level 5 items */
    --menu-background: var(--level-5);

    /* Level 6 items */
    --input-button-background-color: var(--level-6);

    /* general level shifters */
    --dialog-background-color: #0008;
    --hilite-background-color: #8884;

    --border-inset-color: #0002 #FFF #FFF #0002;
    --border-outset-color: #FFF8 #0008 #0008 #FFF8;
    --box-shadow-outset: 0 1px 3px #0004;
    --box-shadow-inset: inset 0 1px 2px #0004;

    --dangerlevel-0: #aaa;
    --dangerlevel-1: hsl(135, 100%, 29.07%);
    --dangerlevel-2: hsl(45, 100%, 31.71%);
    --dangerlevel-3: hsl(15, 100%, 46.70%);
    --dangerlevel-4: hsl(0, 100%, 45%);
    --dangerlevel-5: hsl(0, 100%, 45%);
}

.t7-darkmode,
.t7-darkmode * {
    --text-color: #FFF;
    --window-border-color-light: var(--level-5-darkmode);
    --window-border-color-dark: var(--level-0-darkmode);
    --window-header-background-color: var(--level-3-darkmode);
    --input-entry-background-color: var(--level-3-darkmode);
    --window-background-color: var(--level-4-darkmode);
    --menu-background: var(--level-5-darkmode);
    --input-button-background-color:  var(--level-6-darkmode);
    --window-table-line: var(--level-1-darkmode);
    --hilite-background-color: #FFF2;

    --border-inset-color: #0004 #FFF1 #FFF1 #0004;
    --border-outset-color: #FFF2 #0008 #0008 #FFF2;
    --box-shadow-outset: 0 1px 3px #0006;
    --box-shadow-inset: inset 0 1px 2px #0006;
}

html,
body,
ef-rootcontainer {
    width: 100%;
    height: 100%;
}

body,
ef-rootcontainer {
    margin: 48px 0 0 0;
    background-color: #f5f7f7;
    background-color: var(--window-background-color); /* needed for standalone */
    color: #000;
    font-size: 11px;
    height: calc(100% - 48px);
}

body.t7-darkmode,
ef-rootcontainer.t7-darkmode {
    color: var(--text-color);
}

ef-rootcontainer {
    display: block;
    margin: 0;
    height: 100%;
}

body.t7desktopbody {
    margin: 0;
    background-color: var(--desktop-background-color);
}

body.refreshing::after {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #0002;
}

/* No Scrollbars */
*::-webkit-scrollbar {
      display: none;
}

* {
      -ms-overflow-style: none;
      user-select: none;
}



t7desktop-desktop {
    display: block;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 32px 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.2) 60%);
    background-position: center center ! important;
    background-size: 100% ! important;
    pointer-events: none;
    transform-origin: 0 0;
}

.t7-darkmode t7desktop-desktop {
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 15%, rgba(0,0,0,0.666) 60%);
}



/* destop info */
t7desktop-info {
    display: block;
    position: fixed;
    right: 32px;
    bottom: 60px;
    text-shadow: 0 0 2px #000;
    transform-origin: bottom right;
    pointer-events: none;
    color: #FFF;
}

.t7-darkmode t7desktop-info {
    color: #555;
}

t7desktop-info::before {
    display: block;
    font-weight: 200;
    font-size: 3em;
    margin: 0 0 0.2em 0;
    content: 'T7Desktop';
}

t7desktop-infoitem {
    display: block;
}



/* taskbar */
t7desktop-taskbar {
    display: block;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    background-color: var(--window-header-background-color);
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: var(--border-outset-color);
}



/* taskbar desktopwidgets */
t7desktop-taskbar t7desktop-widgets {
    width: calc(100% - 288px);
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
}

t7desktop-taskbar t7desktop-widget {
    display: inline-block;
    padding: 8px;
    cursor: pointer;
    position: relative;
    color: var(--link-color);
}

t7desktop-taskbar t7desktop-widget.menu::after {
    content: '\e5c7';
    position: absolute;
    left: calc(50% - 12px);
    top: -6px;
    font-size: 24px;
}

t7desktop-taskbar t7desktop-widget:hover,
t7desktop-taskbar t7desktop-widget.menu.show {
    background-color:  var(--hilite-background-color);
}

t7desktop-taskbar t7desktop-widget.dashboard::before {
    content: '\e866';
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
    font-size: 14px;
}



/* taskbar infobar */
t7desktop-taskbar > t7desktop-infobar {
    position: absolute;
    right: 8px;
    cursor: default;
    color: var(--link-color);
}

t7desktop-taskbar > t7desktop-infobar > * {
    display: inline-block;
    height: auto ! important;
    padding: 8px 0 8px 8px;
}

t7desktop-taskbar > t7desktop-infobar > * > * {
    height: auto ! important;
    padding: 0 ! important;
    box-shadow: none;
}

t7desktop-taskbar > t7desktop-infobar > .t7-infobar-icon {
    cursor: pointer;
    font-size: 14px;
    vertical-align: middle;
}



/* menus and menuitems */
t7desktop-menu {
    box-sizing: border-box;
    display: none;
    position: fixed;
    background-color: var(--menu-background);
    border-radius: 6px 6px;
    border: solid 1px;
    border-color: var(--border-outset-color);
    padding: 0;
    margin-left: -16px;
    box-shadow: 0em 0em 2em 0em rgba(0,0,0,1);
    overflow: hidden;
    z-index: 9998;
    color: var(--link-color);
    opacity: 0.95;
}

t7desktop-menu.show,
t7desktop-widget.show t7desktop-menu {
    display: block;
}

t7desktop-taskbar t7desktop-menu {
    bottom: 36px;
}

t7desktop-menuitem {
    box-sizing: border-box;
    display: block;
    padding: 6px 16px 10px 16px;
    border-bottom: solid 1px var(--table-border-color);
    cursor: pointer;
    background-size: 16px 16px;
    background-position: 6px 6px;
    background-repeat: no-repeat;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 9999;
    background-color: var(--window-header-color);
}

t7desktop-menuitem.icon {
    padding-left: 28px;
}

t7desktop-menuitem:last-child {
    border-bottom: none;
}

t7desktop-menuitem:hover {
    background-color: var(--hilite-background-color);
}



/* widget windows */
t7desktop-window {
    display: block;
    position: absolute;
    background: var(--window-background-color);
    pointer-events: all;
/*
    box-sizing: border-box;
    border: solid 1px;
    border-color: var(--border-outset-color);
*/
}

t7desktop-window.modal,
.t7DialogMediaBox {
    border-radius: 12px 12px;
    background-color: none;
    overflow: hidden;
    box-shadow: var(--box-shadow-outset);
}

.t7DialogMediaBox {
    border: solid 1px;
    border-color: var(--border-outset-color);
}

t7desktop-menu::before,
t7desktop-taskbar t7desktop-widget.menu.show::before,
t7desktop-window.modal::before,
.t7DialogBackground {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #000A;
    background-color: var(--dialog-background-color);
    width: 100%;
    height: 100%;
    display: block;
    content: ' ';
    z-index: -1;
}

t7desktop-menu::before,
t7desktop-taskbar t7desktop-widget.menu.show::before {
    background-color: #0000;
}

t7desktop-windowtitlebar {
    display: block;
    position: absolute;
    width: calc(100% - 2px);
    left: 1px;
    top: 0px;
    height: 8px;
    text-align: right;
    background-color: #0004;
    background-color: var(--window-header-background-color);
    z-index: 10000;
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: var(--border-outset-color);
}

t7desktop-window.modal t7desktop-windowtitlebar {
    border-top-left-radius: 12px 12px;
}

t7desktop-windowtitle {
    display: inline-block;
    padding: 9px 14px 0px 0;
    font-size: 19.25px;
    font-weight: 200;
}

t7desktop-windowtitlebar :not(t7desktop-windowtitle) {
    color: var(--link-color);
}

t7desktop-windowtitle::before {
    content: '.';
	color: #0000;
}

t7desktop-windowtitle::after {
    content: ' ';
    display: block;
    border-left: solid 12px #0000;
    border-top: solid 28px #0004;
    border-top: solid 36px var(--window-header-background-color);
    width: calc(100% + 98px);
    margin: -24px 0 0 -32px;
}

t7desktop-windowclose,
t7desktop-windowfullscreen {
    box-sizing: border-box;
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0 4px 0 0;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    vertical-align: middle;
}

t7desktop-windowclose:hover,
t7desktop-windowfullscreen:hover {
    color: #CDF;
    color: var(--link-color-hilite);
}

t7desktop-windowcontent {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;

    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: var(--border-outset-color);
}

t7desktop-window.bordered t7desktop-windowcontent {
    margin-top: 56px;
    height: calc(100% - 56px);
}

t7desktop-window > t7desktop-windowcontent > iframe {
    width: 100%;
    height: 100%;
    border: none;
}

t7desktop-window.selected,
.ui-resizable-resizing,
.ui-draggable-dragging {
    z-index: 1000;
}

.ui-resizable-handle {
    position: absolute;
    left: auto;
    top: auto;
    background: #0000;
}

.ui-resizable-w {
    top: 32px;
    left: 0;
    width: 16px;
    height: calc(100% - 64px);
    cursor: w-resize;
}

.ui-resizable-sw {
    bottom: 0;
    left: 0;
    width: 32px;
    height: 32px;
    cursor: sw-resize;
}

.ui-resizable-s {
    left: 32px;
    bottom: 0;
    height: 16px;
    width: calc(100% - 64px);
    cursor: s-resize;
}

.ui-resizable-se {
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    cursor: se-resize;
}

.ui-resizable-e {
    top: 32px;
    right: 0;
    width: 16px;
    height: calc(100% - 64px);
    cursor: e-resize;
}

.t7desktopprotect,
.t7desktopprotect * {
    pointer-events: none ! important;
}

.t7desktopprotect.ui-draggable-dragging .windowsTitleBar,
.t7desktopprotect.ui-resizable-resizing {
    pointer-events: all ! important;
}

t7desktop-infobaricon {
    cursor: pointer;
}



/* general window content style */

/* button-like inputs */
input[type=button],
input[type=reset],
input[type=submit] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin: 0 0 0 8px;
    border: solid 1px #CCC;
    background-color: var(--input-button-background-color);
    border-radius: 4px 4px;
    box-shadow: var(--box-shadow-outset);
    padding: 4px 16px;
    outline: none;
}

.t7-darkmode input[type=button],
.t7-darkmode input[type=reset],
.t7-darkmode input[type=submit] {
    color: var(--text-color);
    border: none;
}

input[type=submit] {
    background-color: var(--link-color); ! important;
    color: #FFF;
    border-color: #0000;
}

input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    background-color: #FFF4 ! important;
    box-shadow: 0 1px 4px #0001;
}

input[type=submit]:hover {
    background-color: #8CF ! important;
}

/* text-like inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 0s 50000s;
}

INPUT[type=search],
INPUT[type=text],
INPUT[type=password],
INPUT[type=number],
INPUT[type=date],
INPUT[type=datetime],
INPUT[type=datetime-local],
SELECT,
TEXTAREA {
    width: 100%;
    border: none;
    box-shadow: var(--box-shadow-inset);
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    padding: 2px 8px 2px 8px ! important;
    margin: 0;
    color: var(--text-color);
    background-color: var(--input-entry-background-color);
    font-size: inherit;
}



/* custom checkbox <t7-checkmark><input type="checkbox" id="XYZ"><t7-checkmarktoggle /></t7-checkmark> */
 t7-checkmark {
    display: inline-block;
    position: relative;
    width: 2em;
    height: 14px;
    line-height: 1;
    overflow: hidden;
    vertical-align: middle;
 }

 t7-checkmark input[type=checkbox] {
    opacity: 0;
    width: 100%;
    height: 100%;
}
 t7-checkmark input[type=checkbox] ~ t7-checkmarktoggle {
    pointer-events: none;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

t7-checkmark input[type=checkbox] ~ t7-checkmarktoggle::before {
   content: '\e9f5';
   color: #FFF;
}

t7-checkmark input[type=checkbox]:checked ~ t7-checkmarktoggle::before {
   content: '\e9f6';
   color: #0A0;
}




/* range slider */
INPUT[type=range],
INPUT[type=range]:focus {
  -webkit-appearance: none;
  height: 1px;
  background-color: var(--text-color);
  vertical-align: middle;
}

INPUT[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-color);
  cursor: pointer;
}

INPUT[type=range]::-webkit-slider-thumb,
INPUT[type=range]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFF;
  cursor: pointer;
}



/* text-like inputs in tables */
TD > INPUT[type=search],
TD > INPUT[type=text],
TD > INPUT[type=password],
TD > INPUT[type=number],
TD > INPUT[type=date],
TD > INPUT[type=datetime],
TD > INPUT[type=datetime-local],
TD > SELECT,
TD > TEXTAREA {
    height: 100%;
}

INPUT:focus,
TEXTAREA:focus {
    background: #0003;
}

ef-buttonbar {
    display: block;
    text-align: right;
    position: absolute;
    bottom: 24px;
    right: 32px;
}



/* general enfis styles */
ef-iconbar {
    position: fixed;
    z-index: 88888;
    display: block;
    opacity: 0;
    transition: 0.1s opacity;
}

body:hover ef-iconbar {
    opacity: 1.0;
}

ef-iconbar#iconBar {
    z-index: 88889;
    opacity: 1.0;
    top: 12px;
    left: 12px;
}

ef-iconbar#iconBar ef-icon {
    font-size: 20px;
    margin-right: 4px;
}

ef-iconbar#iconSpaceTL {
    top: 44px;
    left: 12px;
}

ef-iconbar#iconSpaceTR {
    top: 44px;
    right:12px;
}

ef-iconbar#iconSpaceLL {
    bottom: 12px;
    left: 12px;
}

ef-iconbar#iconSpaceLR {
    bottom: 12px;
    right: 12px;
}

ef-icon {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 8px 0 0;
    font-size: 24px;
    width: 32px;
    height: 32px;
    color: #08F;
    color: var(--link-color);
    text-align: center;
    cursor: pointer;
    padding: 2px 0 0 0;
    transition: 0.1s color;
    text-shadow: 0 0 3px #FFF;

    font-family: 'Material Icons Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

ef-iconbar > ef-icon:last-child {
    margin-right: 0;
}

ef-icon.ef-inactive {
    opacity: 0.333;
}

.t7-darkmode ef-icon {
    text-shadow: 0 0 3px #000;
}

ef-icon:hover {
    color: #8CF;
}

.t7-icon-3d::before {
    content: '\e84d';
}

.t7-icon-close::before {
    content: '\e5cd';
}

.t7-icon-fullscreen::before {
    content: '\e5d0';
}

.t7-icon-grid::before {
    content: '\e3ec';
}

.t7-icon-grid.ef-inactive::before {
    content: '\e3eb';
}

.t7-icon-menu::before {
    content: '\e5d4';
}

.t7-icon-notification::before {
    content: '\e7f4';
}

.t7-icon-notification.ef-inactive::before {
    content: '\e7f6';
}

.t7-icon-outline::before {
    content: '\e23e';
}

.t7-icon-protocol::before {
    content: '\e616';
}

.t7-icon-refresh::before {
    content: '\e5d5';
}

.t7-icon-search::before {
    content: '\e8b6';
}



t7desktop-iconbar {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 10000;
}

t7desktop-iconbar > ef-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
t7desktop-iconbar > ef-icon:hover {
    background-color: hsla(0,0%,0%,0.05);
}
t7desktop-iconbar > ef-icon:active {
    background-color: hsla(0,0%,100%,0.2);
}



/* loading screen */
t7-loader {
    display: block;
    position: absolute;
    left: 0;
    top:  0;
    width: 100%;
    height: 100%;
    background-color: #0006;
    z-index: 100;
}

t7-loader t7-loaderText {
    position: absolute;
    left: calc(50% + 20px);
    bottom: calc(50% + 8px);
    transform: skew(-16deg);
    font-size: 12px;
}

t7-loader SVG {
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translate(0, 50%);
    width: 100%;
    height: auto;
}

t7-loader PATH {
    stroke:  #FFF;
    stroke-width:  2px;
    fill:  none;
    animation: dash 0.25s linear forwards infinite;
    transition: stroke-dasharray 0.5s;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}



/* search results */
ef-results {
    position: absolute;
    left: 0;
    bottom: 41px;
    background: #EEE;
    display: block;
    color: #000;
}

.t7-darkmode ef-results {
    background: #2d3436;
    color: var(--menu-background-color);
/*    color: var(--text-color); */
}

ef-result {
    display: block;
    padding: 4px 12px;
    font-size: 12px;
}


ef-result::first-line {
    font-size: 14px;
    font-weight: bold;
}



/* searchfield */
ef-iconcontainer.show.efsearchcontainer {
/*    background: #FFF;*/
    border-radius: 4px;
    border: solid 1px #1c1f20;
    margin: -1px;
    padding: 0px 0px 0px 12px;
    display: inline-block;
}

ef-iconcontainer.show.efsearchcontainer t7desktop-menu {
    display: block;
    bottom: 48px;
}

ef-iconcontainer.efsearchcontainer INPUT[type=text] {
    padding: 0;
    margin: 0;
    border: none ! important;
    font-size: 14px;
    background: transparent ! important;
    outline: none;
    display: none;
    position: relative;
    top: -4px;
    color: #000;
    width: auto;
    background-color: #FFF ! important;
}

ef-iconcontainer.show.efsearchcontainer INPUT[type=text] {
    display: inline-block;
}



.efh1,
ef-h1 {
    color: rgba(0,0,0,.54);
    font-weight: 600;
}

.t7-darkmode .efh1,
.t7-darkmode ef-h1 {
    color: rgba(245, 245, 245, 0.64);
}



/* generic sidepanel */
t7-shield {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
    content: ' ';
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
}

t7-sidepanel {
    width: 80%;
    background: var(--level-4);
    height: 100%;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0;
    left: -85%;
    padding: 56px 16px 16px;
    transition: left 0.25s;
    box-shadow: var(--box-shadow-outset);
    border-right: calc(100% - 1px);

    left: -324px;
    width: 324px;
    max-width: 100%;
    overflow-y: hidden;
}
t7-sidepanel > * {
    box-sizing: border-box;
    width: auto !important;
}


.t7-darkmode t7-sidepanel,
t7-sidepanel.t7-darkmode {
    background: var(--level-4-darkmode);
}

t7-sidepanel.show {
    left: 0%;
}



/* generic info cards */
ef-card {
    display: block;
    box-sizing: border-box;
    position: relative;
    margin: 0 0 4px 0;
    padding: 16px;
    color : #000;
    font-size: 12px;
    background-color: var(--level-5);
    box-shadow: 0 2px 4px #0004;
}

.t7-darkmode ef-card {
    background-color: var(--level-5-darkmode);
    color : #FFF;
}

ef-card:last-of-type {
    margin: 0 0 0px 0;
}

ef-card.dangerLevel1 {
    background-color: #00FF00;
    background-color: var(--dangerlevel-1);
    color: #000;
}

ef-card.dangerLevel2 {
    background-color: #FFFF00;
    background-color: var(--dangerlevel-2);
    color: #000;
}

ef-card.dangerLevel3 {
    background-color: #FF7700;
    background-color: var(--dangerlevel-3);
    color: #000;
}

ef-card.dangerLevel4 {
    background-color: #FF0000;
    background-color: var(--dangerlevel-4);
    color: #FFF;
}

ef-card.dangerLevel5 {
    background-color: #8B0000;
    background-color: var(--dangerlevel-5);
    background-image: url(images/pattern_dangerlevel5.png);
    color: #FFF;
    text-shadow: 0 0 4px #000;
}

ef-card-h1 {
    display: block;
    font-weight: bold;
    margin: 0 0 4px 0;
}

ef-card-h1.new::after {
    content: '\ef4a';
    color: #88F;
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
}


t7-webcomponentroot {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}





/* t7 dialog & mediabox general */
.t7DialogBackground {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 17000;
}
.t7-darkmode .t7DialogBackground {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 17000;
}

.t7DialogCenterBox {
    display: table-cell;
    vertical-align: middle;
    padding: 5%;
}

.t7DialogMediaBox {
    display: inline-block ! important;
    position: relative;
    margin: 0 0 0 0;
    padding: 0;
    background-color: var(--window-background-color);
    line-height: 0 ! important;
    text-align: left;
}
/*
.t7-darkmode .t7DialogMediaBox {
    background-color: #1c1f20;
    color: #FFF;
}
*/
.t7DialogMediaBox > * {
    box-sizing: border-box;
    line-height: 1.2;
    max-width: 100%;
    max-height: 100%;
}

/* Dialog-box Forms */
.t7DialogMediaBox > FORM {
    padding: 2em;
    font-size: 12px;
}

.t7DialogMediaBox > FORM TD {
    padding: 4px;
    text-align: right;
}

.t7DialogMediaBox > FORM INPUT[type=text],
.t7DialogMediaBox > FORM INPUT[type=password],
.t7DialogMediaBox > FORM SELECT {
    width: 32em;
}

/* t7dialog-mediabox closer */
.t7DialogMediaBoxClose {
    position: absolute;
    top: -31px;
    right: 32px;
    width: 32px;
    height: 40px;
    background-color: #08F;
    transform: rotateZ(5deg);
    z-index: -1;
}

.t7DialogMediaBoxClose::after {
    position: relative;
    left: 6px;
    top: 2px;
    content: '\f00d';
    font-size: 24px;
    color: #FFF;
}

.t7DialogMediaBoxClose:hover {
    background-color: #8CF;
    top: -36px;
}



/* ag-grid */
.ag-theme-balham,
.ag-theme-balham-dark {
    font-size: 11px ! important;
}

.ag-theme-balham .ag-root-wrapper,
.ag-theme-balham .ag-root,
.ag-theme-balham .ag-header,
.ag-theme-balham .ag-row,
.ag-theme-balham-dark .ag-root-wrapper,
.ag-theme-balham-dark .ag-root,
.ag-theme-balham-dark .ag-header,
.ag-theme-balham-dark .ag-row {
    background-color: #0000;
}

.ag-theme-balham .ag-root-wrapper,
.ag-theme-balham .ag-root,
.ag-theme-balham-dark .ag-root-wrapper,
.ag-theme-balham-dark .ag-root {
    border: none ! important;
}

.ag-theme-balham .ag-row,
.ag-theme-balham-dark .ag-row {
    border-color: var(--window-table-line);
}



/* plotly */
.js-plotly-plot .plotly:hover .modebar-group {
    background-color: transparent ! important;
}

.plotly text {
    fill: var(--text-color);
}

.plotly .xlines-above,
.plotly .ylines-above,
.plotly .overlines-above path {
    stroke-width: 4 ! important;
    opacity: 0;
}

.plotly .gridlayer path {
    stroke: #8888 ! important;
}




/* Seismo NG */
:host-context(body.theme-brand) {
    --level-4-darkmode: #1e293b;
    --level-5-darkmode: #2B384D;
}

:host-context(body.theme-brand) ef-card {
    margin: 0 0 8px 0;
    border-radius: 8px;
}

:host-context(body.theme-brand) t7-webcomponentroot {
	box-sizing: border-box;
    top: 80px;
    width: calc(100% - 20px);
    height: calc(100% - 80px);
    padding: 0 20px;
}





/* Seismo NG */
:host-context(body.theme-brand) * {
    --level-4-darkmode: #1e293b;
    --level-5-darkmode: #2B384D;
}

:host-context(body.theme-brand) ef-card {
    margin: 0 0 8px 0;
    border-radius: 8px;
}

:host-context(body.theme-brand) t7-webcomponentroot {
	box-sizing: border-box;
    top: 80px;
    width: 100%;
    height: calc(100% - 80px);
    padding: 0 20px;
}

:host-context(body.theme-brand) t7-sidepanel {
	font-size: 11px;
}