/*
------------------------------------------------------------------------
Title        : artnet.css
------------------------------------------------------------------------
              This is an UNPUBLISHED work COPYRIGHT by
        "ArtCom GmbH"; Haferwende 2; D-28357 Bremen; Germany
     It may be used, copied, or distributed only as permitted in a
                          written license.
------------------------------------------------------------------------
Created : long time ago by kk
Version : $Id: artnet.css,v 1.253 2024-10-09 08:55:12 kk Exp $
Remarks : Display-Styles/Formatdefinitionen fuer artnet
!!NOTE!!: Es kann unter /customer/customer.css (optional!) auch noch
          CSS-Deklarationen geben, die diese hier ueberschreiben !!
------------------------------------------------------------------------
*/


* {
margin: 0;
padding: 0;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box

}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 99%;
    line-height: 1.4;/* Keine Einheit angeben, um vererbungsbedingte Ueberlappungen zu vermeiden! */
    text-align: center;
    background: white url("bg_body.gif");
    background-repeat: repeat;
    background-position: center;
    color: black;
    /*width: 75%;*/
    overflow:auto;
}

.body-white {
    background: white;
}

table, .global-sized {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    color:#000000;
    /**width: 97%; /*...dies steuert die Breite der Formulare zur Win-Groesse*/
    width: 100%;
  /*min-width: 640px;  <--- das ist schaedlich im firefox 3.0 weil es an alle Sub-
                           tables propagiert wird => deformierte (breite) Formulare*/
  /*padding:5px 5px 5px 5px;     ** Rand um jede Tabelle */
}

h1, h2, h3, h4 {
    /*margin: 5px 0 5px 0;*/
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 150%;
}
h2 {
    font-size: 130%;
}
h3 {
    font-size: 115%;
}
h4 {
    font-size: 100%;
}
p {
    margin: 5px 0 10px 0;
}

td {
	/*color: #6C5500;*/
	color:#000000;
}

th {
    text-align: center;
    font-weight: bold;
}

a {
	text-decoration: none;
	color: #000000;
}

select {
	background: #ffffff url("bg_v_graytowhite.gif");
    background-repeat: repeat-x;
    background-position: left top;
    border-width: 0px;
}

.noTextSel {
    user-select: none;
}

.info {
	color: #FF0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.bkgtab {
	background-color: #D7D7D7;
}

.h-txt {
	font: bold 130%/220% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
.adr-txt {
	font: 75%/105% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

.footer, .footer-cell {
 	/**color: #ffffff;**/
    color: white;
    color: var(--side-and-titlebar-color, white);
	/**background-color: gray;
	background: gray url("bg_footer.gif");**/
	/*background: gray url("bg_v_whitetogray.gif");
    background-repeat: repeat-x;
    background-position: left;*/
	vertical-align:middle;
}

.footer-table {
    background-color: rgb(215,215,215); /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, DimGray);
    width: 100%;
    text-align: center;
}

.backward_footer {
	font: 80%/100% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	background-color: white;
	vertical-align:middle;
}

.footer-txt {
	font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	/**color: #ffffff;**/
    color: white;
    color: var(--side-and-titlebar-color, white);
	vertical-align:middle;
}

.footer-txt-on-white {
	font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	/*font-weight: bold;*/
	color: #000000;
	background-color: white;
    vertical-align:middle;
}

.txt-small {
    font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

.txt-small-bold {
    font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: bold;
}


.txt-small-gray {
    font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	color: gray;
}

.txt-smaller {
    /*font: 60%/80% Verdana, Arial, Helvetica, sans-serif;*/
    font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	/*font-weight: bold;*/
}


.nav-table {
    text-align: left;
    background-color: transparent;
    border-width:0px;
}

.nav-table tr {
    background-color: white;
}

.nav-bar {
    background-color: transparent;
}

.nav {
	font: 95%/105% Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 1.4;/* Keine Einheit angeben, um vererbungsbedingte Ueberlappungen zu vermeiden! */
	/*font-weight: bold;*/
	/* wg. Lage des Nav-Bars ueber dem Logo weg (s.a: .overlap-headlogo)...***
	background-color: white;
	background: white url("bg_footer.gif");
    background-repeat: repeat-x;
    background-position: left;
    */
    background-color: transparent;
    /*color: #eee5cf; */
    /*color: #ffffff;*/
    color:#000000;
	border-width:0px;
}

.nav-selected {
	font: 95%/105% Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 1.4;/* Keine Einheit angeben, um vererbungsbedingte Ueberlappungen zu vermeiden! */
	font-weight: bold;
	/* wg. Lage des Nav-Bars ueber dem Logo weg (s.a: .overlap-headlogo)...***
	background-color: gray;
	background: gray url("bg_footer.gif");
    background-repeat: repeat-x;
    background-position: left;
     */
    background-color: transparent;
    /*color: #ff0000;*/
    /*color: maroon;*/
    color: white;
	border-width:0px;
}

.subnav {
	font: 80%/90% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #eee5cf;
}

.subnav-selected {
	font: 80%/90% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
}

.Huge {
    font-size: 200%;
    font-weight: bold;
}

.an-selmenu {
    border-width: 0;
    margin-left: auto;
    margin-right: auto;
    min-width: 40px;
    font-size: 9pt;
}

.an-optmenu {
    background-color: #ffffff;
    border-width:1px;
}

.option-disabled {
	/*font: 75%/105% Verdana, Arial, Helvetica, sans-serif;*/
	color: gray;
}

.an-button {
   border-width:0px;
}

.cancel-button {
	background: rgb(215,215,215) url("bg_button_red.jpg") repeat-x left;
}

.okay-button {
	background: rgb(215,215,215) url("bg_button_green.jpg") repeat-x left;
}

.button-white {
	background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;
}

.button-gray {
	background: rgb(215,215,215) url("bg_button_gray.jpg") repeat-x left;
}

.button-gray48 {
	background: rgb(215,215,215) url("bg_button_gray48.jpg") repeat-x left;
}

.button-cyan {
	background: rgb(215,215,215) url("bg_button_cyan.jpg") repeat-x left;
}

.button-magenta {
	background: rgb(215,215,215) url("bg_button_magenta.jpg") repeat-x left;
}

.button-yellow {
	background: rgb(215,215,215) url("bg_button_yellow.jpg") repeat-x left;
}
.button-key {
	background: rgb(215,215,215) url("bg_button_gray.jpg") repeat-x left;
}

.small-icon {
   border-width:0px;
   width:16px;
   height:22px;
}

.small-icon-landscape {
   border-width:0px;
   width:22px;
   height:16px;
}

.small-artcomicon {
   border-width:0px;
   height:14px;
   margin: 0px;
}

.title-image {
   border-width:0px;
   width: 100%;
   max-width: 50px;
   height: 100%;
   max-height: 70px;
        /* ggf wird nicht-proportional skaliert. Das Bild passt aber auf
           jeden Fall rein */
}

.ovw-image {
   border-width:0px;
   width: 100%;
   max-width: 140px;
   height: 100%;
   max-height: 165px;
        /* ggf wird nicht-proportional skaliert. Das Bild passt aber auf
           jeden Fall rein */
}

.ovw-image-landscape {
   border-width:0px;
   width: 140px; /*nur in einer Dimension bewirkt proportionale Skalierung,
                   jedoch ragen Hochformate ggf. raus */
   /*width: 100%;*/
}

.ovw-image-portrait {
   border-width:0px;
   height: 165px; /*nur in einer Dimension bewirkt proportionale Skalierung,
                  jedoch ragen Querformate ggf. raus */
}

.ovw-image-doublepage {
   border-width:0px;
   width: 40px;
   /*height: 82px;*/
        /* ggf wird nicht-proportional skaliert. Das Bild passt aber auf
           jeden Fall rein */
}

.ovw-image-small {
   border-width:0px;
   height: 30px;
}

.ovw-image-badstatus {
   border-width:0px;
   /*width: 50px;*/
   width: 100%;  /* ...(BadStatus-)Icons immer komplett sichtbar */
   max-width: 150px;
   /*height: 150px;*/
}

.icon-filename {
    font: 80%/90% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	/*max-width: 98%;*/
	text-align: justify;
}

.pager-txt {
	margin: 1px 1px 1px 1px;
    padding: 1px 1px;
    font: 90%/100% Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    line-height: 1.4;/* Keine Einheit angeben, um vererbungsbedingte ?berlappungen zu vermeiden! */
	font-weight: bold;
	background-color: transparent;
	color:#000000;
	border-width: 0px;

}

.spacer-v {
	background-color: #ffffff;
	background: #ffffff url("bg_v_graytowhite.gif");
    background-repeat: repeat-x;
    background-position: left;
	border-width:0px;
	height:15px;
}

.spacer-v-inv {
	background-color: #ffffff;
	background: #ffffff url("bg_v_whitetogray.gif");
    background-repeat: repeat-x;
    background-position: left;
	border-width:0px;
	height:15px;
}

.spacer-v-white {
    background-color: #ffffff;
	border-width:0px;
	height:4px;
}

.v-space {
	border-width:0px;
	height:15px;
}

.field {
	/**
  	background-color: #ffffff;
	background: #ffffff url("bg_v_graytowhite.gif");
    background-repeat: repeat-x;
    background-position: left top;
     ******/
}

.page-table-text {
  	background-color: rgb(225,225,225);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    min-width: 10px;
    empty-cells:show;
    padding-top: 10px;
}

.page-table-icon {
    min-width: 10px;
}

.page-table-icon-all {
    min-width: 10px;
    width: 99.9%;
    padding-top: 10px;
    /*empty-cells:hide;*/
    empty-cells:show;
    table-layout: fixed;    /* ...auffuellen der Spalten am Ende */
}

.icon-table {
  	/*background-color: rgb(225,225,225);*/
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    min-width: 10px;
}

.topic-line {
    background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;
    /*background: rgb(215,215,215) url("bg_button_yellow.jpg") repeat-x left;*/
    /*background: rgb(215,215,215) url("bg_button_gray.jpg") repeat-x left;*/
    border-width:0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
}

.topic-header {
	background: rgb(215,215,215) url("tile-gray-bg_30px.png") repeat-x left;
    border-width:0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    min-width: 2em;
}

.item-header {
    /*
	background: rgb(215,215,215) url("navi_tile_blue.gif") repeat-x left;
    color: white;
    */
    background: transparent;
    border-width: 0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    min-width: 10px;
}

.item-header-selected {
    border-width:0px;
    /*
	background: rgb(215,215,215) url("navi_tile_blue.gif") repeat-x left;
    color: white;
    */
    background: transparent;
    border-width: 0px;
	color: black;
    margin-left: auto;
    margin-right: auto;
    min-width: 10px;
	text-decoration: underline; /* fkt nicht. warum?? <u>...</u> geht!*/
}

.topic-table {
  	/*background-color: rgb(225,225,225);*/
    text-align: left;
    width: 20%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.group-table {
  	/*background-color: rgb(225,225,225);*/
    text-align: left;
    width: 10%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.booklet-table {
  	/*background-color: rgb(225,225,225);*/
    text-align: center;
    width: 20%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.booklet-table-icon {
	border-width: 0px;
    text-align: center;
    /* width: 20%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.booklet-line {
    background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;
    /*background: rgb(215,215,215) url("bg_button_yellow.jpg") repeat-x left;*/
    /*background: rgb(215,215,215) url("bg_button_gray.jpg") repeat-x left;*/
    border-width:0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
}

.booklet-line-icon {
    border-width:0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
}

.booklet-item {
	background: transparent;
    border-width:0px;
    /*margin: 0;*/
    padding: 3px;
}

.topic-font {
	font-size: 10pt;
	/* ...if changes, change .order-item, .folder-item, .order-item-booklet-button
	      .topic-font-padd, .topic-font-variantpadd too ! */
}

.topic-font-padd {
	font-size: 10pt;
	/* ...if changes, change .order-item, .folder-item, .order-item-booklet-button
	      .topic-font-padd, .topic-font-variantpadd too ! */
	padding-left: 3px;
	padding-right: 3px;
}

.topic-font-variantpadd {
	font-size: 10pt;
	/* ...if changes, change .order-item, .folder-item, .order-item-booklet-button
	      .topic-font-padd, .topic-font-variantpadd too ! */
	padding-left: 40px;
	padding-right: 3px;
}

.order-item {
    /*
    background: #ffffff url("bg_v_whitetogray.gif");
    background-repeat: repeat-x;
    background-position: left; bottom;
     */
    /*
    background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;
    border-width:1px;
    align: justify;
     */
    /*color: Maroon;*/
    font-size: 10pt;
    background: transparent;
    border-width: 0px;
    color: #000000;
}

.topic-column {
    background: transparent;
    border-width: 0px;
}

.topic-column-selected {
    background: transparent;
    border-width: 0px;
	text-decoration: underline; /* fkt nicht. warum?? <u>...</u> geht!*/
}

.order-item-booklet-button {
	font-size: 10pt;
}

.folder-item {
    /*
    background: #ffffff url("bg_v_whitetogray.gif");
    background-repeat: repeat-x;
    background-position: left; bottom;
     */
    /*
    background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;
    border-width:1px;
    align: justify;
     */
    /*color: Maroon;*/
    font-size: 10pt;
    background: transparent;
    border-width:0px;
    color: #000000;
}

.logo-table {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border-width:0px;
}

.logo-overflow-hidden {
	overflow:hidden;
}

.logo-object {
    text-align: left;
    vertical-align: middle;
}

.logo-img {
    border-width:0px;
    clip:auto;
}

.logo-img-autorefresh {
    border-width:0px;
    clip:auto;
    margin-left: 2px;
    margin-right: 5px;
    margin-bottom: 0px;
    height: 90%;
    vertical-align: middle;
}

.logo-img-with-scaling {
    border-width:0px;
    clip:auto;
    overflow:hidden;
    width: 100%;
}

.client-img {
    border-width:0px;
    clip:auto;
}

.status-menu {
   /*border-width: 0px;*/
   font-size: 9pt;
}

.text-area {
   text-align: left;
}

.history-table {
  	/*background-color: rgb(225,225,225);*/
  	background-color: white;
    /*margin: 0 0 0 0;*/
    padding: 0 0;
    margin-left: auto;
    margin-right: auto;
    /*width: 40%;*/ /* d.h. die aktuelle Tabellenbreite richtet sich nach dem
                   laengsten Eintrag in der Tabelle */
}

.history-line {
    /*background: rgb(215,215,215) url("bg_v_whitetogray.gif") repeat-x left;*/
    /*background: rgb(215,215,215) url("bg_button_yellow.jpg") repeat-x left;*/
    /*background: rgb(215,215,215) url("bg_button_gray.jpg") repeat-x left;*/
	border-width:0px;
    text-align: left;
    color: black;
    margin-left: auto;
    margin-right: auto;
    /*white-space: nowrap;*/
}

.history-line td {
    padding:5px 5px 5px 5px;
}

.history-cell {
    /*padding:5px 5px 5px 5px;*/
}

.history-cell-nowrap {
    /*padding:5px 5px 5px 5px;*/
    white-space: nowrap;
}

.pager-table {
	background: rgb(215,215,215) url("tile-gray-bg_30px.png") repeat-x left;
	empty-cells:show;
	padding: 0 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.pager-table-inv {
	background: rgb(215,215,215) url("tile-gray-bg_30px_inv.png") repeat-x left;
	empty-cells:show;
	padding: 0 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.flatplannew-table {
 	background-color: white;
	empty-cells:show;
    /*margin: 0 0 0 0;*/
    padding: 0 0;
    margin-left: auto;
    margin-right: auto;
}

.flatplannew-header {
    font-weight: bold;
	border-width:1px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    min-width: 2em;
}

#lang {
    margin: 0px;
    padding: 2px;
    border: 2px;
}

#lang .selected {
    padding: 2px;
    border: 2px;
    border-style: solid;
	border-color:  rgb(215,215,215);
	width: 22px;
	height: 16px;
}

#lang .norm {
    padding: 2px;
    border: 2px;
    /*border-style: solid;   ...hiermit 'springen' die Icons nicht */
	border-color: transparent;
	width: 22px;
	height: 16px;
}

#lang input:hover {
    border-style: solid;
    border-color:  rgb(215,215,215);
}

.tree-table {
    background: transparent;
    text-align: left;
    padding: 0 0 0 0;
    margin-left: auto;
    margin-right: auto;
    width: 20%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.tree-line {
    background: transparent;
    border-width:0px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    text-align: left;
}

.icon-img {
    padding: 0 0 0 4px;
}

.framed-red {
	/*padding: 2px;*/
	border: 2px;
	border-style: solid;
	border-color: rgb(255,0,0);
}

.framed-green {
	/*padding: 2px;*/
	border: 2px;
	border-style: solid;
	border-color: Lime;
}

#about-centered {
	margin: 0 auto;
	margin-top: 5%;
	width: 45%;
}

#basiccolor-centered {
	margin: 0 auto;
	margin-top: 15%;
	width: 60%;
}

#msg-centered {
	margin: 0 auto;
	margin-top: 15%;
	width: 45%;
}

#version-centered {
	margin: 0 auto;
	margin-top: 20%;
	width: 45%;
}

#errorpage-centered {
	margin: 0 auto;
	margin-top: 20%;
	margin-bottom: 20px;
	width: 45%;
}

#flatplan_new-centered {
	margin: 0 auto;
	margin-top: 10%;
	width: 45%;
}

#settings-centered {
	margin: 0 auto;
	margin-top: 5%;
	width: 45%;
}

.flatplan-info-text {
    color: gray;
    font-size: 80%;
}

/* Das folgende soll dazu dienen per <div class="overlap-headlogo"> den
   Seiteninhalt (alles ausser dem Logo selbst) etwas ueber das Logo am
   Seitenkopf zu schieben. Die Kartenreiter sitzen dann im Logo... */
.overlap-headlogo {
	background-color: transparent;
	position: relative;
	top: -2em;
}

/* Das folgende fuer die Topiclistendarstellung mittels Karten(Tiles): */
.topictile-table {
  	background-color: rgb(225,225,225);
    padding: 0 0 0 0;
    margin-left: auto;
    margin-right: auto;
	text-align: left;
    width: 20%; /* d.h. das sich i.d.R. die aktuelle Tabellenbreite nach dem
                   laengsten Eintrag in der Tabelle richtet */
}

.title-image-fortile {
    border-width:0px;
    width: 100%;
    min-width: 100px;
    min-height: 140px;
    max-width: 210px;
    height: 100%;
    max-height: 297px;
        /* ggf wird nicht-proportional skaliert. Das Bild passt aber auf
           jeden Fall rein */
}

.topictile-jobtype {
	text-align: left;
    font-weight: bold;
}

.topictile-icon {
	text-align: center;
	/*padding: 4px;*/
	width: 25px;
}

.topictile-iconbutton {
	text-align: center;
	/*padding: 4px;*/
	width: 25px;
}

.topictile-textfield {
    overflow: hidden;
    text-align: left;
    width: 30em;
}

.timeline {
    /*font: 70%/90% Arial, Helvetica, sans-serif;*/
    font: 90%/100% Verdana, Arial, Helvetica, sans-serif;
    margin: 8px 0px 4px 0px;
           /*top right bottom left*/

}

/*--- Dialog "Notizen": --------------------------------*/
.note-table {
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.note-table tr {
	margin: 5px;
}

.note-table td {
	background-color: rgb(225,225,225);
	text-align: left;
}

#note-title {
    background-color: gray;
    font-weight: bold;
}

#note-inc {
	background-color: transparent;
    width: 20px;
}

#note-userdate {
    font: 80%/90% Verdana, Arial, Helvetica, sans-serif;
	color: gray;
}
/*------------------------------------------------------*/


/*--- Dialog "Topic-Settings": -------------------------*/
.settings-table {
 	background-color: white;
	empty-cells:show;
    /*margin: 0 0 0 0;*/
    padding: 0 0;
    margin-left: auto;
    margin-right: auto;
}

.settings-line {
	border-width:0px;
    text-align: left;
    color: black;
    margin-left: auto;
    margin-right: auto;
    /*white-space: nowrap;*/
}

.settings-line td {
    /*padding:5px 5px 5px 5px;*/
    padding: 0px 5px 0px 5px;
}
/*------------------------------------------------------*/

/*--- Dialoge "Common": --------------------------------*/

.dialog-table {
 	/*background-color: white;*/
	background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.dialog-table-header {
	background: rgb(215,215,215) url("tile-gray-bg_30px.png") repeat-x left;
    border-width:1px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    min-width: 2em;
    padding: 0px 4px 0px 4px;
}

.dialog-table-column {
    background: transparent;
    border-width: 0px;
    color: black;
}

.dialog-table-column-selected {
    background: transparent;
    border-width: 0px;
    color: black;
	text-decoration: underline; /* fkt nicht. warum?? <u>...</u> geht!*/
}

.dialog-table tr {
	margin: 5px;
}

.dialog-table td {
	/*background-color: rgb(225,225,225);*/
	text-align: left;
	padding: 0px 3px 0px 3px;
}

.dialog-table input {
	font-size: 100%;
}

.dialog-table select {
	font-size: 100%;
}

.dialog-table option {
	font-size: 100%;
}

/*------------------------------------------------------*/

#sheetassi-level0 {
	background-color: rgb(255,215,215); /*ok_red*/
}

#sheetassi-level1 {
	background-color: rgb(215,255,215); /*ok_green*/
}

#sheetassi-level2 {
	background-color: rgb(215,215,255); /*ok_blue*/
}

#sheetassi-level3 {
	background-color: rgb(255,255,209);  /*ok_yellow*/
}

#sheetassi-level4 {
	background-color: rgb(196,196,196); /*gray*/
}

#sheetassi-level5 {
	background-color: rgb(193,173,229); /*hell lila*/
}

#sheetassi-level6 {
	background-color: rgb(229,224,147); /*beige*/
}

#sheetassi-level7 {
	background-color: rgb(0,229,229); /*cyan-artig*/
}

.sheetassi-table {
 	/*background-color: white;*/
	background-color: rgb(255,215,215);
    /*background-color: transparent;*/
	color: black;
	border: solid;
	border-width: 1px;
	margin-top: 1em;
	margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-left: 20px;
	border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/
	box-shadow: 5px 5px 3px #888888; /*nur HTML5/CSS3: shadow         */
}

.sheetassi-table tr {
	/*margin: 5px 5px 5px 20px;*/
	margin: 0px;
	/*background-color: rgb(225,190,190);*/
}

.sheetassi-table td {
	margin-left: auto;
    margin-right: auto;
}

.sheetassi-sheetnr {
	background-color: white;
	color: black;
	border: solid;
	border-width: 1px;
	position: relative;
	top: -1em;
	left: -1em;
	padding-left: 3px;
}

/*------------------------------------------------------*/

.tree-message {
	margin-bottom: 5px;
	/*overflow: hidden;*/
    font: 70%/80% Verdana, Arial, Helvetica, sans-serif;
	color: gray;
}

.font-red {
    color: red;
}

.newnode-mess {
	padding: 20px 0px 20px 0px;
	/*font-size: 120%;*/
	overflow: hidden;
	color: red;
}

.icon-img-overlap {
    /*padding: 0 0 0 4px;*/
    /*align: right;*/
	position: relative;
	left: -5px;
}

/*--- Topic-Infos Formular: ----------------------------*/

.topicinfos-table {
	font: 95%/105% Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
	/*font: 80%/100% Arial, Helvetica, sans-serif;*/
	/*margin-left: auto;
    margin-right: auto;*/
	margin: 0px 5px 0px 5px;
	  /* ...top right bottom left */
    text-align: left;
	overflow: hidden;
	padding-bottom: 5px;
}

.topicinfos-head {
    text-align: left;
    padding: 5px 0px 5px 0px;
	     /* ...top right bottom left */
    border-bottom: 1px solid gray;
}

.topicinfos-top {
    text-align: left;
    color: gray;
    padding: 2px 0px 0px 0px;
        /* ...top right bottom left */
}

.topicinfos-text {
	/*font-weight: bold;*/
	text-align: left;
    color: black;
	padding-left: 1em;
}

/*--- TreeFolder-Baum mit Farbfeldern (ab 23.10.2014, kk): ---*/

#treebox {
	/**background-color: white;
	border: solid;
	border-width: 1px;
	border-radius: 15px;**/    /*nur HTML5/CSS3: rounded corners*/
	/**margin: 5px;**/
    padding: 2px 2px 2px 32px;
           /* ...top right bottom left */
    font-size: inherit!important;
    line-height: unset;
}

.colorbox {
    background-color: transparent;
	/*margin: 5px;*/
	  /* ...top right bottom left */
    /*padding: 4px;*/
	color: transparent;
	border: solid;
	border-color: transparent;
	border-width: 1px;
    border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/
    width: 28px;  /*32px;*/
    height: 14px; /*16px*/
    display: none;
}

/*--- TreeFolder-Baum mit Zusatzinfos statt Farbfeldern (ab 04.01.2021, kk): ---*/


/*--- (1) 'addinfos':                                            ---*/
/*--- "nach-Rechts"-Schiebung des Baums um davor die Zusatzinfos ---*/
/*--- platzieren zu koennen:                                     ---*/

/* Neue Loesung: */
.addinfos {
	/* aktuell noch nichts */
}

.addinfosbox {
    background-color: transparent;
	/*margin: 5px;*/
	  /* ...top right bottom left */
    /*padding: 4px;*/
	color: transparent;
	border: solid;
	border-color: transparent;
	border-width: 1px;
    /*border-radius: 10px; */            /*nur HTML5/CSS3: rounded corners*/
    height: 16px;
    /***display: none;***/
    /*overflow:auto;*/
}

.numberbox {
	float:left;
	text-align: center;
	width: 3em!important;
	font-size: 8pt;
	padding: 1px;
	border-width: 1px;
	/*border: solid;*/
	border-radius: 8px; 
}


.addinfosbox-textwhite {
	color: white;
	font-weight:bold;
}

/*--- Produktionsuebersicht (ab 24.10.2014, kk): -------*/
/*--- Downloadmanager (ab 29.08.2015, kk) benutzt das Design jetzt auch: ---*/

.prodlist-frame, .prodlist-frame-fullscreen {
	background-color: white;
    border: solid;
	border-color: gray;
	border-width: 1px;
    border-radius: 10px; /*25px;*/       /*nur HTML5/CSS3: rounded corners*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    width: 90%;          /* regelt den Rand links und rechts */
    text-align: center;
}

.prodlist-frame-fullscreen {
	width: 97%;          /* regelt den Rand links und rechts */
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 10px;
}

.prodlist-frame-50 {
    width: 50%;          /* regelt den Rand links und rechts */
}
.prodlist-label, .prodlist-empty {
   text-align: left;
   font-weight: bold;
   margin-top: 20px;
   margin-bottom: 10px;
}

.prodlist-label span {
   font-weight: normal;
}

.prodlist-empty {
   margin: 0px;
   color: gray;
}

.prodlist-table {
  	/*background-color: rgb(225,225,225);*/
  	background-color: white;
  	border-collapse: collapse;
  	/*margin: 0 0 0 0;*/
    padding: 0 0;
    margin-left: auto;
    margin-right: auto;
    /*width: 40%;*/ /* d.h. die aktuelle Tabellenbreite richtet sich nach dem
                   laengsten Eintrag in der Tabelle */
}

/* Das folgende sorgt mit obigen 'border-collapse: collapse;' dafuer, das
   die Tabelle der prodlist-Topics nur eine Linie zwischen den Zeilen hat.
   Also keine Rahmen um die Tabelle und auch keine Spaltenabgrenzungen */
.prodlist-table td, th {
	border-bottom: 1px solid DarkGray;
}

.prodlist-header, .prodlist-header-selectable {
	/*background: rgb(215,215,215) url("tile-gray-bg_30px.png") repeat-x left;*/
	font-weight: bold;
	border-width:1px;
    color: black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    min-width: 2em;
    text-align: center;
    padding:5px 5px 5px 5px;
    white-space: nowrap;
}

.prodlist-header-left, .prodlist-header-left-selectable {
	text-align: left;
	font-weight: bold;
	white-space: nowrap;
}

.prodlist-header-selectable:hover,  .prodlist-header-left-selectable:hover {
    /*background-color: LightGray;*/
    border-width:4px;
    /*border-radius: 7px;*/
	border-color: gray;
}


.prodlist-line, .prodlist-line-marked {
    font-family:sans-serif;
    border-width:1px;
    text-align: center;
    color: black;
    margin-left: auto;
    margin-right: auto;
    /*white-space: nowrap;*/
}

.prodlist-line-marked {
    opacity: 0.3;
}

.prodlist-line td {
    padding:5px 5px 5px 5px;
}

.prodlist-cell, .prodlist-cell-nowrap {
    /*padding:5px 5px 5px 5px;*/
    text-align: center;
}

.prodlist-cell-nowrap, .prodlist-cell-nowrap-left, .prodlist-cell-nowrap-right {
    white-space: nowrap;
}

.prodlist-cell-left, .prodlist-cell-nowrap-left {
	text-align: left;
}

.prodlist-cell-right, .prodlist-cell-nowrap-right {
	text-align: right;
}

.prodlist-column {
    /*font-family: sans-serif;*/
    background: transparent;
    border-width: 0px;
    text-align: center;
}

.prodlist-column-selected {
    /*font-family: sans-serif;*/
    background: transparent;
    border-width: 0px;
    text-align: center;
	text-decoration: underline; /* fkt nicht. warum?? <u>...</u> geht!*/
}

.prodlist-progress {
	background-color: gray;
	text-align: left;
	vertical-align:middle;
	border-color: transparent;
	border-width: 1px;
    border-radius: 5px;             /*nur HTML5/CSS3: rounded corners*/
    width: 100px;
    height: 20px;
    z-index: 0;
    overflow: visible;
}

.prodlist-progress-part, .prodlist-progress-part2 {
	padding: 0px;
	vertical-align:middle;
	text-align: left;
	border-color: transparent;
	border-width: 1px;
    border-radius: 5px;             /*nur HTML5/CSS3: rounded corners*/
	height: 20px;
	width: 100px;
	display: none;
	z-index: 1;
}

.prodlist-clickname {
    cursor:pointer;
}

.prodlist-clickname {
    text-align: center;
    background-color: transparent;
    cursor:pointer;
	border-color: transparent;
	border-width: 1px;
    border-radius: 4px;             /*nur HTML5/CSS3: rounded corners*/
}
.prodlist-clickname:hover {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
	font-weight: bold;
	color: white;
	border-color: gray;
}

.newitemlist-statusmenu-nosize,
.prodlist-statusmenu,
.prodlist-statustext {
    background-color: white;
    background-image: none;
    width: 99%;
	/*width: 15em;*/
    overflow: hidden;
    /*font-size: 9pt;   weg: variabel, von aussen vorgegeben */
    padding: 5px;
    border: solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 5px;             /*nur HTML5/CSS3: rounded corners*/
}

/* Status nicht aenderbar, kein Menue, langen Statustext auf mehrere Zeilen
    aufteilen ('newitemlist-statusmenu-nosize' macht immer max. breite Boxen,
    was zu ungleicher Kachelgroesse fuehrt! siehe [issue7046]): */
.newitemlist-statustext {
	overflow: hidden;
    padding: 3px;
    border: solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 5px;             /*nur HTML5/CSS3: rounded corners*/

}

.prodlist-statusmenu, .prodlist-statustext {
    font-size: 9pt;
}

.prodlist-statustext {
    width: 90%;
    white-space: nowrap;
}

.newitemlist-statusmenu-nosize {
	margin: 3px;
	padding: 3px;
    white-space: nowrap;
    border-radius: 4px;             /*nur HTML5/CSS3: rounded corners*/
}

.prodlist-numberbox,
.prodlist-colorbox,
.prodlist-colorbox-tall,
.prodlist-numberbox-red,
.prodlist-numberbox-green,
.prodlist-numberbox-orange,
.newitemlist-proposalcolor {
    text-align: center;
    width: 2em;
    font-size: 9pt; /*8pt*/
    padding: 2px;
    border: solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 8px;             /*nur HTML5/CSS3: rounded corners*/
}

.prodlist-colorbox-tall {
    width: 1em;
}

.prodlist-numberbox-red {
	border-width: 2px;
    border-color: red;
}

.prodlist-numberbox-green {
 	border-width: 2px;
    border-color: lime;
}

.prodlist-numberbox-orange {
 	border-width: 2px;
    border-color: orange;
}

.prodlist-coldist {
    padding-left: 10px;
}

.newitemlist-proposalcolor {
    border-width: 2px;
    border-color: rgb(255, 105, 180);
}

/*------------------------------------------------------*/
/*--- Neues UI (vgl. [issue6432])                    ---*/
/*--- Title- und Sidebars, Menuebar der jew. Listen  ---*/
/*--- sowie Menue-Knoepfe und Menues...              ---*/
/*------------------------------------------------------*/

.menubar-background {
	/*background-color: white;*/
	height: 60px;
	/*width: 98%;*/
    position: fixed;
    z-index: 0;
}

.itemlist-icontext:hover {
	color: white;
}

.itemlist-menubar {
    margin: 4px;
         /*top right bottom left*/
    z-index: 0;
}

.itemlist-menubar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    /*background-color: #333;*/
    background-color: white;
}

.itemlist-menubar ul::after {
	/* clear float: */
	clear: both;
}

.itemlist-menubar li {
    /* links oder rechtsbuendig im Menue? */
    /*float: left;*/
    float: right;
}

.itemlist-menubar li a {
    display: block;
    font: 70%/90% Verdana, Arial, Helvetica, sans-serif;
    color: gray;
    text-align: center;
    padding: 5px 6px;
    text-decoration: none;
    vertical-align: middle;
}

.itemlist-menubar li a:hover {
    /*background-color: #111;*/
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
    color: white;
}

.active {
	background-color: #4CAF50;
}

.hovered:hover {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}

.itemlist-menubar #dropmenu {
    float: left;
    vertical-align: middle;
    color: white;
    padding: 4px;
	z-index:2;
}

.itemlist-menubar #dropmenu .dropdown-sub {
	width: 99%;
}

/*"-dis": fuer die 'Disabled' Anzeige*/
.itemlist-menubar #dropmenu .dropdown-content #menuitem,
.itemlist-menubar #dropmenu .dropdown-content-right #menuitem,
.itemlist-menubar #dropmenu .dropdown-sub-content #menuitem,
.itemlist-menubar #dropmenu .dropdown-content #menuitem-dis,
.itemlist-menubar #dropmenu .dropdown-content-right #menuitem-dis,
.itemlist-menubar #dropmenu .dropdown-sub-content #menuitem-dis {
	/**** 31.10.2018, kk ; vgl. [issue7135]:
	 **** Achtung: unter Safari werden in Sub-Dropdowns keine onclick's ausgeloest
	 ****          wenn 'float: left;' definiert ist. Damit die einzelnen Menuepunkte
	 ****          jetzt ohne float:left nicht successive nach rechts geschoben werden,
	 ****          reicht hier die Spezifikation einer Hoehe 'height:30px'!
	 ****          'height:20px' wuerde nicht reichen :-( Also funktioniert es jetzt
	 ****          zwar auch unter Safari, aber es hinterlaesst trotzdem kein gutes
	 ****          Gefuehl.
	 **** Der Patch waere auch nur fuer Safari schaltbar.
	 **** Siehe dazu HTMLmenuBasics.java:emitMenuItem(), Pattern "Safari-Patch"!
	 **** ...das schlechte Gefuehl taeuschte auch nicht, denn....
	 **** Habe gerade festgestellt, das Edge exakt das selbe Problem hat wie der Safari,
	 **** nur bei diesem hilft der Patch leider nicht, das Problem bleibt...
	 **** ...ich ignoriere den Edge erstmal...
	 ****/
	/****float: left;   ...dieses raus...****/
    height: 30px;  /****...und dies dazu ****/
    /****/
    /*min-width: 155px;*/
    min-width: 300px;
	cursor: pointer;
}

.itemlist-menubar #dropmenu .dropdown-content #menuitem:hover,
.itemlist-menubar #dropmenu .dropdown-content-right #menuitem:hover,
.itemlist-menubar #dropmenu .dropdown-sub-content #menuitem:hover {
    border-style: solid;
    border-radius: 5px;
    border-color:  rgb(215,215,215);
    /**border-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    /**border-color: var(--bigbutt-hover-color, RoyalBlue);**/
}

/*"-dis": fuer die 'Disabled' Anzeige*/
.itemlist-menubar #dropmenu .dropdown-content #menuitem-dis:hover,
.itemlist-menubar #dropmenu .dropdown-content-right #menuitem-dis:hover,
.itemlist-menubar #dropmenu .dropdown-sub-content #menuitem-dis:hover {
    border-style: solid;
    border-radius: 5px;
    border-color:  transparent;
}

.itemlist-menubar #dropmenu .dropdown-content .selected,
.itemlist-menubar #dropmenu .dropdown-content-right .selected,
.itemlist-menubar #dropmenu .dropdown-sub-content .selected {
    padding: 2px;
    border: 2px;
    border-radius: 5px;
    border-style: solid;   /* ...hiermit 'springen' die Icons nicht */
	border-color: transparent;
    /*background-color: rgb(215,215,215);*/ /*#4CAF50;*/
}

.itemlist-menubar #dropmenu .dropdown-content .norm,
.itemlist-menubar #dropmenu .dropdown-content-right .norm,
.itemlist-menubar #dropmenu .dropdown-sub-content .norm {
    padding: 2px;
    border: 2px;
    border-radius: 5px;
    border-style: solid;   /* ...hiermit 'springen' die Icons nicht */
	border-color: transparent;
}

.myslider {
    height: 30px;
    width: 70%;
    left: 15%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    border: 2px;
    border-style: solid;
    border-color: #4CAF50;
    padding: 5px;
}

/*------------*/

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 40px;
    color: white;
    color: var(--side-and-titlebar-color, white);
    background-color: DimGray; /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, DimGray);
    position: fixed;
    /*height: 100%;*/
    /*overflow: hidden;*/
    z-index: 9;
}

ul.sidenav li a {
    display: block;
    /*color: #000;*/
    color: white;
    color: var(--side-and-titlebar-color, white);
    margin-left: auto;
    margin-right: auto;
    vertical-align:middle;
    text-align: center;
    /*padding: 8px 0 8px 16px;*/
    padding: 4px;
    text-decoration: none;
}

ul.sidenav li a.active {
    background-color: #4CAF50;
    /*color: #000;*/
    color: white;
    color: var(--side-and-titlebar-color, white);
}

ul.sidenav li a:hover:not(.active) {
    /*background-color: #111;*/
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}
ul.sidenav li a.red {
    margin-top: 40px;
    color: white;
}

ul.sidenav li a.red:not(.active) {
    /*background-color: #111;*/
    background-color: Salmon;
    color: white;
}

ul.sidenav li a.red:hover:not(.active) {
    /*background-color: #111;*/
    background-color: Red;
    color: white;
}

ul.sidenav li a.redbgonhover {
    margin-top: 40px;
}

ul.sidenav li a.redbgonhover:hover:not(.active) {
    background-color: Red;
    color: white;
}

div.pagecontent {
    /**margin-left: 40px;**/
    padding: 1px 16px;
    /*height: 1000px;*/
}

/***
@media screen and (max-width: 600px){
    ul.sidenav {
        position:relative;
    }
    ul.sidenav li a {
        float: left;
    }

    div.content {
        margin-left:0;
    }
}

@media screen and (max-width: 400px){
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}
***/

/* ----- */

.timeshift {
	list-style-type: none;
}

.timeshift-mid {
 	list-style-type: none;
    text-align: center;
}

.timeshift li {
	float: left;
	/*width: 30px;*/
	padding: 4px;
}

.timeshift-mid li {
	float: none;
	display: inline;
	padding: 4px;
}

.timeshift li input {
	width: 30px;
	/*
	font: 100%/110% Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Arial, Helvetica, sans-serif);
	background-color: white;
	*/
    border: solid;
	border-color: gray;
	border-width: 1px;
    border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/
}

.timeshift-mid li input {
    /*width: 100px;*/
	/*
	font: 100%/110% Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Arial, Helvetica, sans-serif);
	background-color: white;
	*/
    border: solid;
	border-color: gray;
	border-width: 1px;
    border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/

}

.timeshift .litext {
    width: 40px;
    float: left;
}


.mystepper {
	text-decoration: none;
    height: 30px;
    text-align: center;
	font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

.itemlist-titlebar {
    list-style-type: none;
    margin: 0;
    margin-top: 0;
    /*margin-left: 40px;*/
    padding: 0;
    width: 100%;
    height: 40px;
    color: white;
    color: var(--side-and-titlebar-color, white);
    background-color: DimGray; /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, DimGray);
    position: fixed;
    /***overflow: hidden;***/
    overflow: visible;
    vertical-align:middle;
}

ul.titlenav {
	list-style-type: none;
    margin: 0;
    padding: 0;
    height: 40px;
    color: white;
    color: var(--side-and-titlebar-color, white);
    background-color: DimGray; /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, DimGray);
    position: fixed;
    /*overflow: hidden;*/
}

ul.titlenav li {
	float: left;
	padding: 4px;
    color: white;
    color: var(--side-and-titlebar-color, white);
    text-align: center;
	vertical-align: middle;
}

ul.titlenav li img {
	padding: 0px;
}

.itemlist-titlebar #language {
    float: right;
    vertical-align: middle;
    color: white;
    color: var(--side-and-titlebar-color, white);
    padding: 4px;
    z-index: 9;
}

.itemlist-titlebar #language .dropdown-content span,
.itemlist-titlebar #language .dropdown-content div,
.itemlist-titlebar #language .dropdown-content-right span,
.itemlist-titlebar #language .dropdown-content-right div {
    /*text-align: left;*/
    float: left;
	min-width: 155px;
    z-index: 9;
}

.itemlist-titlebar #language img {
	width: 22px;
	height: 16px;
    float: left;
}

.itemlist-titlebar #language .selected {
    padding: 2px;
    border: 2px;
    /**
    border-style: solid;
	border-color:  rgb(215,215,215);
    **/
    border-style: solid;   /* ...hiermit 'springen' die Icons nicht */
	border-color: transparent;
    background-color: #4CAF50; /*rgb(215,215,215);*/

	/*min-width: 155px;*/
}

.itemlist-titlebar #language .norm {
    padding: 2px;
    border: 2px;
    border-style: solid;   /* ...hiermit 'springen' die Icons nicht */
	border-color: transparent;
    /*min-width: 155px;*/
}

.itemlist-titlebar #language .dropdown-content span:hover,
.itemlist-titlebar #language .dropdown-content div:hover,
.itemlist-titlebar #language .dropdown-content-right span:hover,
.itemlist-titlebar #language .dropdown-content-right div:hover {
    /**
    border-style: solid;
    border-color:  rgb(215,215,215);
    border-radius: 5px;
     **/
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}

.itemlist-titlebar #username {
    float: right;
    vertical-align: middle;
    color: white;
    color: var(--side-and-titlebar-color, white);
    padding: 4px;
    margin-right: 10px;
    cursor: pointer;
}

.itemlist-titlebar #searchfield {
    float: right;
    vertical-align: middle;
    padding: 4px;
    margin-right: 10px;
}

.itemlist-titlebar #gotopagenum {
	margin-right: 2px;
}

.itemlist-titlebar #gotoformnum {
	/**border-style: none;**/
	padding: 4px 6px 4px 6px;
	border-color: light-grey;
	border-width: 1px;
    border-radius: 4px;             /*nur HTML5/CSS3: rounded corners*/

	margin-right: 2px;
}

.gotopage:hover {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
    color: white;
}

.itemlist-titlebar #username:hover,
.itemlist-titlebar #searchfield:hover
 {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}

/* ----- */

/* Aufklappmenu per ul und li: */
/* ACHTUNG: vgl. auch ".itemlist-menubar #dropmenu"* usw. weiter oben */

.dropdown, .dropdown-sub {
    position: relative;
    /***display: inline-block;***/
    display: block;
}

.dropdown-sub {
    color: black;
    float: left;
    /*padding: 7px;*/
    /*width: 99%;*/
}

.dropdown-content, .dropdown-content-right, .dropdown-sub-content {
    display: none;
    position: absolute;
    /*background-color: #f9f9f9;*/
    /*background-color: gray;*/
    background-color: gray; /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, gray);
    /*min-width: 160px;*/
    /*min-width: 300px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 12;
    margin-top: -15px;
}

.dropdown-content-right {
    right: 0;
}

.dropdown-sub-content {
    /*margin-left: 150px;*/
    margin-left: 30%;
}


.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-content-right,
.dropdown-sub:hover .dropdown-sub-content {
    display: block;
}

.dropdown:active .dropdown-content,
.dropdown:active .dropdown-content-right,
.dropdown-sub:active .dropdown-sub-content {
	/*display:none;*/
    /***display: inline-block;***/
    display: block;
}

.dropdown-content .selected,
.dropdown-sub-content .selected {
    /*background-color: gray;*/
	background-color: gray; /*Default fuer alte Browser ohne var()*/
    background-color: var(--side-and-titlebar-background-color, gray);
    color: white;
    color: var(--side-and-titlebar-color, white);
}
/*--- ...Ende Neues UI ---------------------------------*/


/* ----- */

/* Nur Firefox */
/**** dieser Patch ist ab FF 35.0 falsch. In 35.0 wurde der Fehler korr. ****
 **** Aus diesem Grund das hier wieder entfernt und dafuer in 'prodovw.jsp',
 **** in der JavaScript-Sektion 'process()' fuer alle Versionen unterhalb
 **** Vers. 35:
 ****   if (browser == "Firefox" && parseInt(browserversion) <= 34) {
 ****       greenbar.style.top = -20 + "px";
 ****    }
@-moz-document url-prefix() {
	.prodlist-progress-part2 {
	    top: -20px;
    }
}
****/

/*------------------------------------------------------*/

.topic-container {
	font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Verdana, Arial, Helvetica, sans-serif);
}

.topic-container-size {
	margin-left:auto;
    margin-right:auto;
    width: 75%;
}

.topic-container-headfont {
	font-size: 150%;
    font-weight: bold;
    margin:16px;
}

.big-butt-frame, .big-butt-frame-blackshadow, .big-butt-frame-production,
.big-butt-frame-i2kportal, .big-butt-frame-invisible {
	font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Verdana, Arial, Helvetica, sans-serif);
	background-color: white;
    border: solid;
	border-color: gray;
	border-width: 1px;
    border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/
	/*box-shadow: 10px 10px 5px #888888; /*nur HTML5/CSS3: shadow         */
    box-shadow: 10px 10px 5px #696969;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    width: 350px; /*...muss zu 'width' in .big-butt passen! */
    width: var(--bigbutt-frame-width, 350px);
    text-align: center;
	overflow: hidden;
}

.big-butt-frame-blackshadow {
	box-shadow: 10px 10px 5px #000000;  /* schwarzer Schatten */
}

/* Breite der Knoepfe der Production-Topics: */
.big-butt-frame-production {
    width: 600px; /*...muss zu 'width' in .big-butt-production passen! */
    width: var(--bigbutt-frame-production-width, 600px);
}

/* Breite der Knoepfe der I2K-Portal-Topics */
.big-butt-frame-i2kportal {
    width: 700px; /*...muss zu 'width' in .big-butt-i2kportal passen! */
    width: var(--bigbutt-frame-i2kportal-width, 700px);
}

.big-butt-frame-invisible {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.big-butt-frame h1, .big-butt-frame-blackshadow h1, .big-butt-frame-production h1,
.big-butt-frame-i2kportal h1, .big-butt-frame-invisible h1 {
	padding-bottom: 10px;
}

.big-butt, .big-butt-sep, .big-input, .big-butt-production, .big-butt-i2kportal,
.big-butt-booklets, .big-butt-disabled, .big-butt-icon{
	font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Verdana, Arial, Helvetica, sans-serif);
	font-weight: bold;
	color: white;
	/*background-color: SteelBlue;*/
	background-color: LightSlateGray;
	background-color: var(--bigbutt-color, LightSlateGray);
	border-color: black;
	border-width: 1px;
    border-radius: 8px;             /*nur HTML5/CSS3: rounded corners*/
	/*margin: 10px;*/
	margin: 2px;
    width: 250px; /*...muss zu 'width' in .big-butt-frame passen! */
    width: var(--bigbutt-butt-width, 250px);
    height: 40px; /*Default fuer alte Browser ohne var()*/
    height: var(--bigbutt-butt-height, 40px);
	text-align: center;
	overflow: hidden;
	vertical-align:middle;
}


.big-butt:hover, .big-butt-sep:hover, .big-butt-production:hover,
.big-butt-booklets:hover, .big-butt-i2kportal:hover {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}

.big-butt-sep {
	margin-bottom: 10px;
}

.big-border {
	border-width: 6px;
}

.big-input {
	border-color: gray;
    background-color: white;
    color: black;
    font-weight: normal;
}

.big-butt a {
	color: white;
	text-align: center;
	vertical-align: middle;
}

.big-butt img {
	/*float: left;*/
	padding-right: 10px; /*...kleiner Abstand zum Text */
    border-width: 0px;
	height: 36px;
}

.big-butt-production {
    width: 450px; /*...muss zu 'width' in .big-butt-frame-production passen! */
    width: var(--bigbutt-butt-production-width, 450px);
}

.big-butt-i2kportal {
    width: 650px; /*...muss zu 'width' in .big-butt-frame-i2kportal passen! */
    width: var(--bigbutt-butt-i2kportal-width, 650px);
}

.big-butt-booklets, .big-butt-disabled {
   width: 100px; /*...muss zu 'width' in .big-butt-production passen! */
   width: var(--bigbutt-butt-booklet-width, 100px);
}

.big-butt-disabled {
   background-color: LightGrey;
}

.big-butt-icon {
	width: 40px;
  	height: 40px;
    background-color: white; /*LightGrey;*/
    border-radius: 0px;             /*nur HTML5/CSS3: rounded corners*/
}

@media (max-width: 600px) {
	.big-butt-frame, .big-butt-frame-blackshadow, .big-butt-frame-production,
	.big-butt-frame-invisible, .big-butt-frame-i2kportal {
		font: 70%/80% Verdana, Arial, Helvetica, sans-serif;
	    border-radius: 12px;             /*nur HTML5/CSS3: rounded corners*/
	    box-shadow: 5px 5px 2px #696969;
        margin-left: 0px;
        margin-right: 0px;
        padding: 5px;
	    width: 100px; /*...muss zu 'width' in .big-butt passen! */
	}
    .big-butt-frame-blackshadow {
	    box-shadow: 5px 5px 2px #000000;  /* schwarzer Schatten */
    }
    .big-butt-frame-production {
        width: 300px; /*...muss zu 'width' in .big-butt-production passen! */
    }
    .big-butt-frame-i2kportal {
        width: 400px; /*...muss zu 'width' in .big-butt-i2kportal passen! */
    }
    .big-butt-frame-invisible {
        border: none;
	    box-shadow: none;
    }
	.big-butt, .big-butt-sep, .big-input, .big-butt-production, .big-butt-booklets,
	.big-butt-disabled, .big-butt-icon, .big-butt-i2kportal {
	    font: 70%/80% Verdana, Arial, Helvetica, sans-serif;
	    width: 70px; /*...muss zu 'width' in .big-butt-frame passen! */
	    height: 20px;
    }
	.big-butt-production {
        width: 150px; /*...muss zu 'width' in .big-butt-frame-production passen! */
    }
    .big-butt-i2kportal {
        width: 250px; /*...muss zu 'width' in .big-butt-frame-i2kportal passen! */
    }
	.big-butt-sep {
	    margin-bottom: 5px;
    }
	.big-butt-booklets, .big-butt-disabled {
       width: 70px; /*...muss zu 'width' in .big-butt-production passen! */
    }
	.big-butt-icon {
	    width: 20px;
	    height: 20px;
	}
}

/* Die folgenden 'valign-parent' und 'valign-child' dienen dazu den Inhalt eines
 * Big-Buttons auf dem Knopfbereich _vertikal_mittig_ auszurichten:
 * Vgl. http://vanseodesign.com/css/vertical-centering/
 *    "We set the parent div to display as a table and the child div to display
 *     as a table-cell. We can then use vertical-align on the child div and
 *     set its value to middle. Anything inside this child div will be vertically
 *     centered"
 *
 * Beispielbenutzung WebCheck siehe: 'HTMLformSelList.emitPageFlipCode()'
 */
#valign-parent {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

#valign-child {
    display: table-cell;
    vertical-align: middle;
}
/*-------------------------------*/

.med-butt, .med-butt-sep, .med-input, .med-select, .med-select-transp {
	font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Verdana, Arial, Helvetica, sans-serif);
	font-weight: bold;
	color: white;
	/*background-color: SteelBlue;*/
	background-color: LightSlateGray; /*Default fuer alte Browser ohne var()*/
	background-color: var(--bigbutt-color, LightSlateGray);
	border-color: black;
	border-width: 1px;
    border-radius: 10px;             /*nur HTML5/CSS3: rounded corners*/
	/*margin: 10px;*/
	margin: 2px;
    /*width: 250px; /*...muss zu 'width' in .big-butt-frame passen! */
	height: 30px;
	text-align: center;
	overflow: hidden;
}

.med-butt:hover, .med-butt-sep:hover, .med-select-transp:hover {
    background-color: RoyalBlue; /*Default fuer alte Browser ohne var()*/
    background-color: var(--bigbutt-hover-color, RoyalBlue);
}

.med-butt-sep {
	margin-bottom: 10px;
}

.med-input, .med-select {
	border-color: gray;
    background-color: white;
    color: black;
    font-weight: normal;
}

.med-select, .med-select-transp {
    text-align: left;
}

.med-select-transp {
    color: white;
    background-color: LightSlateGray; /*Default fuer alte Browser ohne var()*/
	background-color: var(--bigbutt-color, LightSlateGray);
}

.med-text {
    font: 100%/110% Verdana, Arial, Helvetica, sans-serif;
    font: var(--bigbutt-font, 100%/110% Verdana, Arial, Helvetica, sans-serif);
    font-weight: normal;
    color: black;
    height: 30px;
}

.small-input, .small-input-readonly, .small-input-selected {
 	/**font: 80%/90% Verdana, Arial, Helvetica, sans-serif;**/
 	font: 90%/100% Verdana, Arial, Helvetica, sans-serif;
	border-width: 1px;
    border-radius: 5px;             /*nur HTML5/CSS3: rounded corners*/
	/*margin: 10px;*/
	margin: 2px;
    width: 60px;
	height: 25px;
	text-align: center;
	overflow: hidden;

	border-color: gray;
    background-color: white;
    color: black;
    font-weight: normal;
}

.small-input-readonly {
    border-color: transparent;
    color: gray;
}

.small-input-selected {
	/***
	border-color: red;
	border-width: 3px;
	 ***/
	background-color: LightGray;
}

/* Display WebCheck name on login page*: */
.product-name {
	display: block; /*Default fuer alte Browser ohne var()*/
	display: var(--login-display-prodname, block);
}

.oldprefer-cell-right {
	text-align: right;
	padding-right: 5px;
}

.oldprefer-cell-left {
	text-align: left;
	padding-left: 5px;
}

/* Item-Kacheln: gleichmaessiger farbiger Rand um die Kachel */
.outer-module {
	padding: 3px 3px 0px 6px;
	      /* top right bottom left */
}

/* Item-Kacheln: 'content-bar' Inhaltsbalken im oberen Bereich der Kachel */
.content-bar, .content-bar-half {
	background-color: transparent;
    padding-left: 5px;
    height: 6px;
}
.content-bar {
	width: 99%;
}

.content-bar-half {
    width: 49.99%;
}

/* Itemliste mit Gruppierung, Ueberschrift linksbuendig... */
.itemlist-grouping-header {
	text-align: left;
	margin-top: 15px;
	padding-left: 5px;
}

.marker-background {
	/*background-color: PeachPuff;*/
	background-color: LightSalmon;
	/*background-color: rgb(255,199,199); ** ziemlich rosa */
	/*background-color: Salmon; ** sehr markant (dunkel) */
}

/*-------------------------------------------------------*/

/* Versuch: einfache Baumdarstellung mittels ul-li Liste: (momentan unbenutzt) */
.mytreeview,
.mytreeview * {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.mytreeview li ul {
	margin-left: 50px;
}

.mytreeview {
	font: normal 110%/160% Verdana, Arial, Helvetica, sans-serif;
}
.mynowrap {
    white-space: nowrap;
}

/*-------------------------------------------------------*/

/* CSS3-Modal-Formulare. Automatische Hoehenregelung: */

.modal-overflow-scollbar {
    overflow: auto;
    min-width: 300px;
}

.modal-height {
	min-height: 200px;
	height: 500px;
}

.modal-height-half {
	min-height: 200px;
	height: 300px;
}

.modal-height-small {
	min-height: 150px;
	height: 200px;
}

.modal-maxheight {
    max-height: 500px;
}

.modal-maxheight-half {
	max-height: 300px;
}

.modal-maxheight-small {
	max-height: 200px;
}

@media (max-height: 500px) {
    .modal-height {
        height: 300px;
    }
    .modal-height-half {
        height: 250px;
    }
    .modal-maxheight {
        max-height: 350px;
    }
    .modal-maxheight-half {
        max-height: 250px;
    }
    .modal-maxheight-small {
        max-height: 125px;
    }
}

@media (min-height: 501px) {
    .modal-height {
        height: 350px;
    }
    .modal-height-half {
        height: 300px;
    }
    .modal-maxheight {
        max-height: 400px;
    }
    .modal-maxheight-half {
        max-height: 300px;
    }
    .modal-maxheight-small {
	    max-height: 150px;
    }
}

@media (min-height: 700px) {
    .modal-height {
        height: 450px;
    }
    .modal-height-half {
        height: 350px;
    }
    .modal-maxheight {
        max-height: 500px;
    }
    .modal-maxheight-half {
        max-height: 350px;
    }
    .modal-maxheight-small {
	    max-height: 200px;
    }
}

@media (min-height: 900px) {
    .modal-height {
        height: 650px;
    }
    .modal-height-half {
        height: 450px;
    }
    .modal-maxheight {
        max-height: 700px;
    }
    .modal-maxheight-half {
        max-height: 450px;
    }
    .modal-maxheight-small {
	    max-height: 250px;
    }
}

@media (min-height: 1400px) {
    .modal-height {
        height: 1000px;
    }
    .modal-height-half {
        height: 700px;
    }
    .modal-maxheight {
        height: 1100px;
    }
    .modal-maxheight-half {
        max-height: 700px;
    }
    .modal-maxheight-small {
	    max-height: 300px;
    }
}

/*-------------------------------------------------------*/

/* w3.css: Grenzen bei 600, 768 und 992 */

/* In w3-mobile-Aufloesung (<=600px) wird nur eine Spalte bzw. statt horizontal
   wird alles vertikal gruppiert angezeigt. Dann ist horizontal i.d.R. wieder
   mehr Platz. Die folgende definierbare Klasse 'mobile-font' sorgt dafuer,
   das dann die Schrift wieder groesser statt noch kleiner wird:
   BEACHTE: das sollte nur verwendet werden, wenn 'w3-mobile' mit im Spiel ist,
            wenn also tatsaechlich das Layout bei kleiner Aufloesung auf eine
            Spalte zusammenfaellt bzw. vertikal angeordnet wird!
 */
.mobile-font {
}

@media (max-width: 600px) {
	.scaling-font {
	    font: 50%/70% Verdana, Arial, Helvetica, sans-serif;
	}
	.mobile-font {
	    /*font-size:initial;*/
	    font: 180%/200% Verdana, Arial, Helvetica, sans-serif;
	}

}

@media (min-width: 601px) {
	.scaling-font {
	    font: 60%/80% Verdana, Arial, Helvetica, sans-serif;
	}
}

@media (min-width:993px) {
	.scaling-font {
	    font: 80%/100% Verdana, Arial, Helvetica, sans-serif;
	}
}

@media (min-width:1501px){
	.scaling-font {
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
	}
}

/*-------------------------------------------------------*/