/* ----------------------------------- */
/* Styles of new Pages, Elements, etc. */
/* ----------------------------------- */

/* Common */
body { font-family:Tahoma, Helvetica, Verdana, Arial, sans-serif; background-image:url( images/quickNavigationBg.png ); background-repeat:no-repeat; }

#headline { background-color:var( --primarycolorwhite ); align-self:center; }
#headline .leftImage { background-image:url( images/NETZSCH_Logo.svg ); width:130px; height:79px; background-repeat:no-repeat; background-size:110px; background-position: 10px 10px }
#headline .text { padding-left:15px; padding-bottom:2px; }

/* Navigation */
a.menuHeadItem:link, .mainMenuItemParent a:link
a.menuHeadItem:visited, .mainMenuItemParent a:visited
a.menuHeadItem:active, .mainMenuItemParent a:visited{ color:var( --primarycolorgrey ); }

a.menuChildItem:link, .mainMenuItemChild1 a:link
a.menuChildItem:visited, .mainMenuItemChild1 a:visited
a.menuChildItem:active, .mainMenuItemChild1 a:active { color:var( --primarycolorgrey ); }

a.navigation:link,
a.navigation:visited,
a.navigation:hover,
a.navigation:active { color:var( --primarycolorgrey ); }

/* Content */
div .contentPage { border:none; }
div .contentPageHeader { color:var( --primarycolorgrey ); }

.fileUploadHidden { color:transparent; direction:rtl; }

/* Hyperlinks */
a:link,
a:visited,
a:hover,
a:active { color:var( --primarycolorgrey ); }

a.bold:link,
a.bold:visited,
a.bold:hover,
a.bold:active { color:var( --secondarycolorgrey1 ); }

/* Separators */
div .areaSeparator { border-top:1px dotted var( --primarycolorgrey ); }
div .areaSeparatorVertical { border-left:1px dotted var( --primarycolorgrey ); }
.dashedBorder { border-color:var( --primarycolorgrey ); }

/* Area Box*/
div .areaBoxContent { background-color:var( --primarycolorwhite ) }
div .areaBoxBackground { background-color:var( --primarycolorwhite ) }
div .areaBoxHeader { background-color:var( --primarycolorwhite ) }

/* Visit Panels */
div.areaHeader { background-color:var( --accentcolorred ); }
div.areaHeaderRight { background-color:var( --secondarycolorgrey2 ); border-bottom:1px solid var( --primarycolorgrey ); }
td.areaHeaderLeft, div.areaHeaderLeft { background-color:var( --accentcolorred ); }
td.areaHeaderRight, .areaHeaderText { border-bottom: 1px solid var( --secondarycolorgrey1 ); background-color: var( --primarycolorwhite ); }

/* ApplicationError and UpdateProgress */
.areaModalUpdateProgress { color:var( --primarycolorgrey ) }

/* GridViews */
.gridView { background-color:var( --primarycolorwhite ); }
.gridView .rowHeadline { background-color:var( --primarycolorwhite ); }
.gridView .rowHeadline th { color:var( --primarycolorgrey ); }

.gridView .rowDefault:hover td { background-color:var( --primarycolorwhite ); border-bottom:1px solid var( --accentcolorred ); border-top:1px solid var( --accentcolorred ); color:var( --accentcolorred ); cursor:default; }

.gridView .rowAlternate { background-color:var( --secondarycolorgrey4 ); }

.gridView .rowAlternate:hover td { background-color:var( --secondarycolorgrey4 ); color:var( --accentcolorred ); border-bottom:1px solid var( --accentcolorred ); border-top:1px solid var( --accentcolorred ); cursor:default; }
.gridView .rowFooter { background-color:var( --primarycolorwhite ); }

/* PopUp Dialogs */
.areaPopUp { background:var( --primarycolorwhite ); border-color:var( --primarycolorgrey ); }

/* Colored Notification Bars */
div .coloredBar { background:var( --primarycolorwhite ); }
div .coloredBarPopUpWndTop { background-color:transparent; }
div .coloredBarPopUpWndBottom { background-color:transparent; }

.tbl_inact_surface { background-color:transparent; margin:0; padding:5px 2px 5px 2px; border:solid 1px var( --secondarycolorgrey2 ); }

.jsModalPopUp {
    background-color:var( --primarycolorwhite );
}

/* v2 layout block tabs */
.v2.layout > * > :is(header).tabs > span.active {
    border-bottom: solid 3px var( --accentcolorred );
}

.v2.layout > * > :is(header).tabs > span.active::after {
    border-top: 7px solid var( --accentcolorred );
}

/* Neues Cockpit */
.ruler-element.active {
    border-color: var( --accentcolorred );
}