@import url('variables.css');

*
{
    font-family: Arial;
    color: #333333;
    font-size: 15.5px;
    font-weight: normal;
}

input[type=submit], input[type=button]
{
    font-weight: normal;
    color: #FFFFFF;
    background-color: #00538d;
    border: None; /* width: 125px; Breite über min-width festlegen, da so die meisten Buttons 125px breit sind und die, die einen längeren Text haben, automatisch breiter werden */
    min-width: 125px;
    height: var(--buttonHeight);
    border-radius: 2px;
}

input[type=submit]:hover, input[type=button]:hover, details > summary
{
    /* background-color: #11649e; */
    cursor: pointer;
}

span
{
    border-radius: 2px;
}

.buttonSmallerWidth
{
    /*durch min-width können die Buttons nicht kleiner werden, was aber an manchen Stellen benötigt wird => min-width überschreiben*/
    min-width: 0 !important;
}

input[type=submit]:disabled, input[type=button]:disabled, input[type=image]:disabled
{
    cursor: not-allowed;
}

textarea
{
    padding: 0;
    border: 1px solid #d9d9d9;
    background-color: #fafafa;
    border-radius: 2px;
    /* sorgt dafür, dass Höhe und Breite wie bei select Elementen berechnet wird und das Element bei gleichen Werten nicht größer wird. Einfacher wäre zwar das box-sizing von select zu änderen, aber dann kann ich das Padding nicht benutzen, das für den CustomArrow benötigt wird. Hat außerdem so den Vorteil, dass die Elemente auch so viel Platz wegnehmen wie angegeben wurde*/
    -moz-box-sizing: border-box; /* fix für Firefox 2.0 - 29.0*/
    -webkit-box-sizing: border-box; /* fix für Chrome 4.0 - 10.0 und Safari 3.2 - 5.1*/
    box-sizing: border-box;
}

input[type=text]
{
    height: 22px;
    padding: 0;
    border: 1px solid #d9d9d9;
    background-color: #fafafa;
    border-radius: 2px;
    /* sorgt dafür, dass Höhe und Breite wie bei select Elementen berechnet wird und das Element bei gleichen Werten nicht größer wird. Einfacher wäre zwar das box-sizing von select zu änderen, aber dann kann ich das Padding nicht benutzen, das für den CustomArrow benötigt wird. Hat außerdem so den Vorteil, dass die Elemente auch so viel Platz wegnehmen wie angegeben wurde*/
    -moz-box-sizing: border-box; /* fix für Firefox 2.0 - 29.0*/
    -webkit-box-sizing: border-box; /* fix für Chrome 4.0 - 10.0 und Safari 3.2 - 5.1*/
    box-sizing: border-box;
}

input[type=password]
{
    height: 22px;
    padding: 0;
    border: 1px solid #d9d9d9;
    background-color: #fafafa;
    border-radius: 2px;
    /* sorgt dafür, dass Höhe und Breite wie bei select Elementen berechnet wird und das Element bei gleichen Werten nicht größer wird. Einfacher wäre zwar das box-sizing von select zu änderen, aber dann kann ich das Padding nicht benutzen, das für den CustomArrow benötigt wird. Hat außerdem so den Vorteil, dass die Elemente auch so viel Platz wegnehmen wie angegeben wurde*/
    -moz-box-sizing: border-box; /* fix für Firefox 2.0 - 29.0*/
    -webkit-box-sizing: border-box; /* fix für Chrome 4.0 - 10.0 und Safari 3.2 - 5.1*/
    box-sizing: border-box;
}

select
{
    height: 22px;
    padding: 0;
    border: 1px solid #d9d9d9;
    background-color: #fafafa;
    border-radius: 2px;
    
    /* würde leider dafür sorgen, dass die Breite durch das, für das ComboBox Design benötigte, padding-right nicht mehr stimmt => box-sizing der anderen Elemente anpassen
    /*-moz-box-sizing: content-box; /* fix für Firefox 2.0 - 29.0*/
    /*-webkit-box-sizing: content-box; /* fix für Chrome 4.0 - 10.0 und Safari 3.2 - 5.1*/
    /*box-sizing: content-box;
    
    /* Design an ComboBox anpassen */
    padding-right: 20px;    /* ansonsten würde der Text über dem CustomArrow liegen, wenn er zu lang ist */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fafafa url('../Scripts/ToxControls/Icons/DropDown.png') calc(100% - 2px) / 20px no-repeat border-box padding-box;
}
/* Design an ComboBox anpassen */
/* Workaround für IE */
select::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}
/* Internet Explorer 9 macht wohl Probleme => CustomArrow wieder entfernen */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    } 
}

/* Nicht mehr notwendig, Firefox hat das angepasst 
@-moz-document url-prefix() {
  select {
    text-indent: -2px;  in Firefox Text in select Element 2 Pixel nach links verschieben, damit er vorne anfängt, sowie bei anderen Controls auch
  }
}
*/

select:disabled {
  background: #dddddd url('../Scripts/ToxControls/Icons/DropDown.png') calc(100% - 2px) / 20px no-repeat border-box padding-box;
}

input:not([type=image]):disabled, textarea:disabled {
  background-color: #dddddd;
}

body
{
    margin: 0;
    background-color: #fafafa;
    /*width: calc(100% - 10px); /* bei 100% würde immer ein horizontaler Scrollbalken entstehen */
    height: 100%;
}

.centerButtonHeight 
{
    line-height: var(--buttonHeight);
}

.centerButtonHeight:has(input[type="text"])::after {
    content: "\00a0";
    /* Leerzeichen erzeugen, wenn kein Text, um Höhe zu erhalten */
}

.masterForm
{
    margin-top: 102px; /* sorgt dafür, dass immer Platz für das Menü bleibt */
    margin-bottom: 40px; /* sorgt dafür, dass immer Platz für den Footer bleibt */
}

.menuitem img
{
    width: 40px;
    height: 40px;
}

.menuContainer
{
    box-shadow: inset 0 -2px 0 #cedbeb;
    background-color: White;
    position: fixed;
    top: 0px;
    padding-top: 2px;
    /*width: calc(100% - 10px); /* bei 100% würde immer ein horizontaler Scrollbalken entstehen */
    width: 100%;
    z-index: 99; /* menü über anderen Inhalten anzeigen*/
}

.deniosConnect
{
    background-color: #00538d;
    height: 30px;
    margin-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

.deniosConnect span
{
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 30px;
}

.deniosConnect #branding
{
    width: calc(100% - 310px);
}

.customSubMenu
{
    display: none;
    visibility: hidden;
    position: absolute; /* padding: 2px 5px 2px 5px;     border: 2px solid #FFFFFF; */
    z-index: 99; /* menü über anderen Inhalten anzeigen*/
    padding-top: 3px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    background-color: White;
    border: 1px solid #cedbeb;
    cursor: default;
}

.customSubMenu a
{
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    border: 2px solid #FFFFFF;
}

.customSubMenu a:hover
{
    /* border-bottom: none;     margin-bottom: 0px; */
    background-color: #cedbeb;
    padding: 2px 5px 2px 5px;
    border: 2px solid #000000;
}

.menu
{
    position: relative;
    border-bottom: 2px solid #cedbeb;
    z-index: 1;
    background-color: White;
}

a.selected.static
{
    border-bottom: 2px solid #00538d !important;
    margin-bottom: -2px;
}

.menuitem
{
    background-color: White; /* width: 8em; */
    text-align: center;
    border-bottom: 12px solid #cedbeb;
    padding-bottom: 3px;
    cursor: default;
}

/* .menu li:before
{
    content: "\022BD";
} */

a.level1.menuitem:after
{
    /* content: "⌄"; */
    content: url('../Resources/Icons/expandMainMenu.gif');
    color: #6298c4;
    vertical-align: text-top;
}

li.static
{
    margin-left: 20px;
}

.menu li:hover
{
    /*border-bottom: 2px solid #00538d; */ /*margin-bottom: -2px; */
}

.menufont a
{
    font-size: 13px; /*color: #6298c4; */
}

.menufont hr
{
    color: #cedbeb;
}

.lvl1menuitem
{
    padding-top: 4px;
    padding-left: 3px;
    padding-right: 3px;
    margin-top: 3px !important;
    background-color: White;
    border: 1px solid #cedbeb;
    cursor: default;
}

.menufont a
{
    /*color: #6298c4; */
}

.menufont a:visited
{
    /*color: #6298c4; */
}

.lvl2menuitem
{
    background-color: White;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 0.2em;
    border: 1px solid #cedbeb;
}

.lvl1menuitem li
{
    padding: 2px 5px 2px 5px;
    border: 2px solid #FFFFFF;
}

.lvl1menuitem li:hover
{
    /* border-bottom: none;     margin-bottom: 0px; */
    background-color: #cedbeb;
    padding: 2px 5px 2px 5px;
    border: 2px solid #000000;
}

.disabledMenuItem a
{
    color: Gray;
}

.disabledMenuItem:hover
{
    background-color: transparent !important;
    border-color: transparent !important;
}

.noHoverMenu
{
    padding: 0 !important;
    border: none !important;
}

.noHoverMenu:hover
{
    background-color: transparent !important;
}

div.maincontent
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.pageHeader
{
    width: 100%; /* margin-top: 20px; */
}

.pageHeader select
{
    min-width: 200px;
}

.pageHeader::after 
{
    /*clearfix, damit das div die Höhe der inneren Divs mit float berücksichtigt und man Elementer unter diesem div mit margin-top positionieren kann*/
    content: "";
    display: table;
    clear: both;
}

.alignHead
{
    /* text-align: right; */
}

.alignHead span
{
    text-align: left;
}

.alignHead select
{
    margin-left: 30px;
}

.alignHead input[type=image]
{
    margin-left: 20px;
}

.footer
{
    color: #ACACAC;
    font-size: 12px;
    text-align: center;
    background-color: #EBEBEB;
    height: 20px;
}

.hiddenItem
{
    visibility: hidden;
    width: 0;
    display: none;
}

.hiddenItem2
{
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
    border-style: hidden; /* margin-top: -10px; */
}

.pageTitle
{
    font-size: 22px;
    font-weight: bold;
    color: #00538d;
}

.textColor
{
    color: #00538d;
}

.gridParent
{
    overflow: auto;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 10px;
}

.gridParent > div > table
{
    width: 100%;
}

.grid
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.gridParent .grid
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.grid, .grid th, .grid td, .grid tr
{
    border-color: #d9d9d9;
    border-left: none;
    border-right: none;
    padding-left: 7px;
    padding-right: 7px;
}

.grid:not(.exclude) th:last-child, .grid:not(.exclude) td:last-child
{
    padding-right: 10px;
}

.gridLinePadding tr > td
{
    padding-top: 10px;
    padding-bottom: 10px;
}

/*
sieht blöd aus
.gridLinePadding tr:nth-child(2) > td
{
    padding-top: 0px;
}

.gridLinePadding tr:last-child > td
{
    padding-bottom: 0px;
}
*/

.gridNoMargin
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.gridItem
{
    height: 40px;
    white-space: nowrap;
}

.gridItem span, .gridItem input[type=text], .gridItem textarea, .gridItem select, .gridItem option
{
    font-size: 14.5px;
    width: 100%;
}

.gridItem input[type=text], .gridItem select
{
    min-width: 50px;
}

.gridItem input[type=text].datepicker 
{
    min-width: 70px;
}

.gridItemCenter span
{
    width: 100%;
    display: inline-block;
    text-align: center !important;
    text-align-last: center !important;
}

.gridHeader, .gridHeader th
{
    text-align: left;
    text-align-last: left;
}

.gridHeader input[type=text], .gridHeader select, .gridHeader span
{
    min-width: 50px;
}

.gridHeader a
{
    text-decoration: none;
    font-size: 14.5px;
}

.gridHeader span, .gridHeader div, .gridHeader input[type=text], .gridHeader select, .gridHeader option
{
    font-size: 14.5px;
}

.gridHeaderTop
{
    border-bottom: none !important;
}

.gridHeaderBottom
{
    border-top: none !important;
}

.gridSortParentOhneFilter
{
    height: 25px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.gridSortParent
{
    height: 35px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.gridSortParent2Lines
{
    height: 45px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.gridSortParent3Lines
{
    height: 55px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.gridLGK, .gridLGK th, .gridLGK td, .gridLGK tr
{
    border-color: #d9d9d9;
    border-left: none;
    border-right: none;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14.5px;
}

.gridLGK td:first-child, .gridLGK th:first-child
{
    border-right: 1px solid #d9d9d9;
}

.gridItemLGKHead
{
    text-align: center;
    cursor: default;
    white-space: nowrap;
}

.gridItemLGKHead th
{
    height: 30px;
}

.gridItemLGK
{
    text-align: center;
    height: 25px;
    vertical-align: middle;
}

.gridItemLGK span
{
    font-size: 14.5px;
}

.colorItemLGK
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.colorItemLGK[value="+"]
{
    background-color: var(--colorItemGreen);
}

.colorItemLGK[value="-"]
{
    background-color: var(--colorItemRed);
}

.colorItemLGK[value="1"], .colorItemLGK[value="2"], .colorItemLGK[value="3"], .colorItemLGK[value="4"], .colorItemLGK[value="5"], .colorItemLGK[value="6"], .colorItemLGK[value="7"]
{
    background-color: var(--colorItemYellow);
}

.subtitleLGK
{
    font-weight: bold;
    line-height: 2;
}

.colorItemLgLGK
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.colorItemLgLGK[value="True"]
{
    background-color: var(--colorItemBlue);
}

.lgLGKMark
{
    border-left: 3px solid #0000FF !important;
    border-right: 3px solid #0000FF !important;
}

.outerGridRemoveFilterParentEmpty 
{
    position: relative;
    height: 70px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParentEmpty2
{
    position: relative;
    height: 50px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParentEmpty2 input[type=image]
{
    display: none;
}

.outerGridRemoveFilterParentEmpty2 a
{
    font-weight: normal;
    color: #FFFFFF;
    background-color: #00538d;
    border: None; /* width: 125px; Breite über min-width festlegen, da so die meisten Buttons 125px breit sind und die, die einen längeren Text haben, automatisch breiter werden */
    min-width: 125px;
    height: 30px;
    border-radius: 2px;
    
    display: block;
    text-align: center;
    line-height: 30px;
}

.outerGridRemoveFilterParent
{
    position: relative;
    height: 50px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParent2Lines
{
    position: relative;
    height: 60px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParent3Lines
{
    position: relative;
    height: 70px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParentPageSize
{
    position: relative;
    height: 35px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParentPageSize2Lines
{
    position: relative;
    height: 45px;
    width: 55px;
    text-align: left;
}

.outerGridRemoveFilterParentPageSize3Lines
{
    position: relative;
    height: 55px;
    width: 55px;
    text-align: left;
}

.innerGridRemoveFilterParent
{
    position: absolute;
    bottom: 0;
    white-space: normal;
}

.innerGridRemoveFilterParent a
{
    text-decoration: none;
}

.filterStyle
{
    width: 100%;
    margin-bottom: 10px;
}

.colorItemGefahr
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--colorItemSilver);
}

.colorItemGefahr[value="A"], .colorItemGefahr[value="HA"], .colorItemGefahr[value="g"]
{
    background-color: var(--colorItemGreen);
}

.colorItemGefahr[value="B"], .colorItemGefahr[value="HB"], .colorItemGefahr[value="1"]
{
    background-color: var(--colorItemLightYellow);
}

.colorItemGefahr[value="C"], .colorItemGefahr[value="HC"], .colorItemGefahr[value="2"], .colorItemGefahr[value="m"]
{
    background-color: var(--colorItemYellow);
}

.colorItemGefahr[value="D"], .colorItemGefahr[value="HD"], .colorItemGefahr[value="3"]
{
    background-color: var(--colorItemOrange);
}

.colorItemGefahr[value="E"], .colorItemGefahr[value="HE"], .colorItemGefahr[value="4"], .colorItemGefahr[value="h"]
{
    background-color: var(--colorItemRed);
}

.pointer
{
    cursor: pointer;
}

.defaultCursor
{
    cursor: default;
}

.helpCursor
{
    cursor: help;
}

.pageFooter
{
    /* margin-left: 20px; */
    margin-right: 10px;
    float: left;
    white-space:nowrap;
}

.pageFooter span
{
    margin-left: 5px;
    margin-right: 5px;
}

.pageFooter input[type=image]
{
    height: 12px;
}

.legende
{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.legende > span:last-child 
{
    margin-right: 0;
}

.labelColorItem
{
    margin-left: 5px;
    margin-right: 15px;
}

.colorItemJNx
{
    /*width: 35px;     height: 35px;     border-radius: 50%;     background-color: var(--colorItemSilver);     display: flex;     justify-content: center;     align-items: center;*/
}

.colorItemJNx[value=Ja]
{
    /*background-color: #CCFFCC;*/
}

.colorItemJN
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--colorItemYellow);
}

.colorItemJN[value=Ja], .colorItemJN[value=1]
{
    background-color: var(--colorItemGreen);
}

.colorTextBoxJN
{
    background-color: var(--colorItemYellow);
}

.colorTextBoxJN[value=Ja], .colorTextBoxJN[value=1]
{
    background-color: var(--colorItemGreen);
}

.colorItemStatus
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--colorItemYellow);
}

.colorItemStatus[value="F"], .colorItemStatus[value="FG"]
{
    background-color: var(--colorItemGreen);
}

.colorItemStatus[value="B"]
{
    background-color: var(--colorItemYellow);
}

.colorItemStatus[value="A"], .colorItemStatus[value="AG"]
{
    background-color: var(--colorItemSilver);
}

.colorItemStatus[value="E"]
{
    background-color: var(--colorItemRed);
}

.colorItemGespSubst
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--colorItemRed);
}

.colorItemGespSubst[value="F"]
{
    background-color: var(--colorItemGreen);
}

.colorItemGespSubst[value="B"]
{
    background-color: var(--colorItemYellow);
}

.colorItemGespSubst[value="V"]
{
    background-color: var(--colorItemBlue);
}

.colorItemGespSubst[value="G"]
{
    background-color: var(--colorItemRed);
}

.colorItemGesp, .colorItemGespFH
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--colorItemRed);
}

.colorItemGesp[value="F"], .colorItemGesp[value="N"], .colorItemGespFH[value="F"], .colorItemGespFH[value="N"]
{
    background-color: var(--colorItemGreen); /*#97bf0d;*/
}

.colorItemGesp[value="V"], .colorItemGesp[value="R"], .colorItemGespFH[value="V"], .colorItemGespFH[value="R"]
{
    background-color: var(--colorItemYellow);
}

.colorItemGesp[value="G"], .colorItemGespFH[value="G"]
{
    background-color: var(--colorItemRed);
}

.docImageButton
{
    border: 1px solid #00538d; /* BorderWidth="1px" zu ImageButton hinzufügen, da dieser sonst immer auf 0 gesetzt wird */
    padding: 3px 5px 3px 5px; /*float: right;*/
}

div.title, div.title span
{
    color: #00538d;
    font-weight: bold;
    font-size: 22px;
}

div.radioButtons:not(.exclude)
{
    margin: 5px 0px 5px 100px;
}

div.radioButtons input[type=radio], div.radioButtons input[type=image] /* image für die ersetzten radio buttons */
{
    margin-left: 20px;
}

div.radioButtons input[type=radio]:first-child, div.radioButtons input[type=image]:first-child /* erstes Element nicht einrücken */
{
    margin-left: 0px;
}

/* wenn das Element disabled wurde, entsteht noch ein span */
div.radioButtons span input[type=radio], div.radioButtons span input[type=image] /* image für die ersetzten radio buttons */
{
    margin-left: 20px !important;
}

div.radioButtons span:first-child input[type=radio], div.radioButtons span:first-child input[type=image] /* erstes Element nicht einrücken */
{
    margin-left: 0px !important;
}

.searchBox > table.radioButtonList
{
    margin: 5px 0px 5px 100px;
}

table.radioButtonList
{
    white-space: nowrap;
}

table.radioButtonList tr td
{
    padding-left: 20px;
}

table.radioButtonList tr td:first-child /* erstes Element nicht einrücken */
{
    padding-left: 0px;
}

label.search
{
    display: inline-block;
    width: 100px;
    font-weight: bold;
}

span.search
{
    display: inline-block;
    width: 100px;
    font-weight: bold;
}

div.searchBox
{
    margin-top: 15px;
    margin-bottom: 15px;
}

div.box
{
    border: 1px solid #d9d9d9;
    background-color: White;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

div.box div.title
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #cedbeb;
}

.subheadline
{
    font-size: 19px;
    border: none;
    font-weight: bold;
}

input[type=text].subheadline
{
    height: 27px;
}

.subheadline span:not(.exclude)
{
    font-size: 19px;
    font-weight: bold;
}

.subheadlineSmall
{
    border: none;
    font-weight: bold;
}

.exclude 
{
    /* nur dafür da, um Elemente auszuschließen */
}

.bold
{
    font-weight: bold;
}

#headnumbers label
{
    display: inline-block;
    width: 70px;
}

#headnumbers
{
    width: 150px;
}

#stoffinfoHead
{
    width: 570px;
}

#stoffinfoHead .row div:first-child, #stoffinfoHead .row div:nth-child(3)
{
    width: 115px;
}

#stoffinfoHead .row div:nth-child(2)
{
    width: 190px;
}

#stoffinfoHeadBorderLeft
{
    border-left: 2px solid #d9d9d9;
    height: 100%;
    position: absolute;
    left: 590px; /* 20px mehr als die Breite des divs davor, wegen padding*/
}

#stoffinfoToxDBHeadBorderLeft
{
    border-left: 2px solid #d9d9d9;
    height: 100%;
    position: absolute;
    left: 600px; /* 20px mehr als die Breite des divs davor, wegen padding*/
}

#stoffinfoToxDBHead
{
    width: 580px;
}

#stoffinfoToxDBHead .row div:first-child, #stoffinfoToxDBHead .row div:nth-child(3)
{
    width: 120px;
}

#stoffinfoToxDBHead .row div:nth-child(2)
{
    width: 190px;
}

#headsignalsBorderLeft
{
    border-left: 2px solid #d9d9d9;
    height: 100%;
    position: absolute;
    left: 170px; /* 20px mehr als die Breite des divs davor, wegen padding*/
}

.headsignals
{
    width: 500px;
}

#headsignalsBorderRight
{
    border-right: 2px solid #d9d9d9;
    height: 100%;
    position: absolute;
    left: 690px; /* 20px mehr als die Breite des divs davor, wegen padding*/
}

#headwarnings
{
    width: 250px;
}

#headwarnings span
{
    margin-left: 20px;
    width: 200px;
    display: block;
}

#headwarningsStoffinfo
{
    width: 430px;
}

#headwarningsStoffinfo span
{
    margin-left: 20px;
    width: 380px;
    display: block;
}

#headwarningsStoffinfoToxDB
{
    width: 420px;
}

#headwarningsStoffinfoToxDB span
{
    margin-left: 20px;
    width: 370px;
    display: block;
}

.stoffinfoGHSEdit .row div:first-child
{
    width: 110px;
}

.stoffinfoGHSEdit .row div:nth-child(2)
{
    width: 20px;
}

.stoffinfoGHSEdit .row:not(.customRow) div:nth-child(2) input[type=image]
{
    margin-top: 3px;
}

.stoffinfoGHSEdit .row:not(.customRow) div:nth-child(3)
{
    width: 360px;
}

.stoffinfoGHSEdit .row:not(.customRow) div:nth-child(3) select, .stoffinfoGHSEdit .row:not(.customRow) div:nth-child(3) textarea
{
    width: 360px;
}

.stoffinfoGHSEdit .row:not(.customRow) div:nth-child(3) input[type=text]
{
    width: 340px;
}

.stoffinfoGHSEdit .row:not(.customRow) div:nth-child(3) input[type=image]
{
    width: 20px;
    height: 22px;
    float: right;
}

.stoffinfoGHSEdit .row.customRow div:nth-child(3) input[type=text]
{
    width: 235px;
}

.stoffinfoGHSEdit .row.customRow div:nth-child(4)
{
    width: 20px;
}

.stoffinfoGHSEdit .row.customRow div:nth-child(5)
{
    width: 80px;
}

.stoffinfoGHSEdit .row.customRow div:nth-child(6)
{
    width: 20px;
}

.stoffinfoGHS .row div:first-child
{
    width: 110px;
}

.stoffinfoGHS .row div:nth-child(2)
{
    width: 20px;
}

.stoffinfoGHS .row div:nth-child(2) input[type=image]
{
    margin-top: 1px;
}

.stoffinfoGHS .row div:nth-child(3)
{
    width: 360px;
}

.stoffinfoGHS .row div:nth-child(3) span
{
    width: 360px;
}

.stoffinfoVetterEinst .row div:first-child
{
    width: 150px;
}

.stoffinfoVetterEinst .row div:nth-child(2)
{
    width: 340px;
}

.stoffinfoVetterEinst .row div:nth-child(2) span
{
    width: 340px;
}

.stoffinfoVetterEinst .row div:nth-child(2) input[type=text]
{
    width: 340px;
}

.gesGef .row > div:first-child
{
    width: 240px;
}

.gesGef .row > div:nth-child(2)
{
    width: 100px;
}

.gesGef .row > div:nth-child(2) input[type=text]
{
    width: 90px;
    text-align: center;
    font-weight: bold;
}

.gesGef .row > div:nth-child(3)
{
    width: 150px;
}

.stoffinfoAllgemeinHeadLeft
{
    width: 720px;
    float: left;
}

.baeditAllgemeinHeadLeft
{
    min-width: 600px;   /* Je nach Länge der Bereichsnamen muss der Platz evtl vergrößert werden */
    float: left;
}

.stoffinfoAllgemeinHeadRight
{
    width: 300px;
    float: right;
}

.baeditAllgemeinHeadRight
{
    width: 380px;
    float: right;
}

.twoInfoColumns > div:first-child
{
    float: left;
}

.twoInfoColumns > div:last-child
{
    float: right;
}

.twoInfoColumns:after
{
    clear: both; /* clear fix */
    display: block;
    content: "\a0 "; /*   - just a space doesn't uncollapse margins */
    height: 0px;
}

.stoffinfoAllgemein
{
    width: 700px;
}

.stoffinfoAllgemein .table:first-child .row div:first-child
{
    width: 150px;
}

.stoffinfoAllgemein .table:first-child .row div:nth-child(2)
{
    width: 150px;
}

.stoffinfoAllgemein .table:nth-child(2) .row div:first-child
{
    width: 200px;
}

.stoffinfoAllgemein .table:nth-child(2) .row div:nth-child(2)
{
    width: 150px;
}

.stoffinfoAllgemeinEdit .row div:nth-child(2) select, .stoffinfoAllgemeinEdit .row div:nth-child(2) input[type=text]
{
    width: 148px;
}

.stoffinfoAllgemeinEdit .row div:nth-child(2) span
{
    width: 43px;
    text-align: right;
    display: inline-block;
}

.stoffinfoAllgemeinEdit .row div:nth-child(2) input[type=checkbox]
{
    float: left;
}

.stoffinfoInnerWidth
{
    width: 1022px;
}

.stoffinfoOuterWidth
{
    width: 1044px;
}

.baeditOuterWidth
{
    width: 1000px;
}

.stoffinfoSicherheitHeadLeft
{
    width: 510px;
}

.stoffinfoSicherheitHeadRight
{
    width: 510px;
}

.stoffinfoSicherheitHeadRightSub
{
    width: 244px;
}

.stoffinfoSicherheit input[type=image]
{
    margin-top: 3px;
}

.chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(2) input, .chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(4) input
{
    width: 120px;
}

.chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(2) span, .chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(4) span
{
    width: 120px;
    display: inline-block;
}

.chemPhyEig .tableDiv:first-child .rowDiv:nth-child(2) div:nth-child(2) input, .chemPhyEig .tableDiv:first-child .rowDiv:nth-child(3) div:nth-child(2) input, .chemPhyEig .tableDiv:first-child .rowDiv:nth-child(4) div:nth-child(2) input
{
    width: 95px;
}

.chemPhyEig .tableDiv:first-child .rowDiv:nth-child(2) div:nth-child(2) span, .chemPhyEig .tableDiv:first-child .rowDiv:nth-child(3) div:nth-child(2) span, .chemPhyEig .tableDiv:first-child .rowDiv:nth-child(4) div:nth-child(2) span
{
    width: 95px;
    display: inline-block;
}

.chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(6) input
{
    width: 275px;
}

.chemPhyEig .tableDiv:first-child .rowDiv div:nth-child(6) span 
{
    width: 275px;
    display: inline-block;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv div:nth-child(2) input
{
    width: 210px;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv div:nth-child(2) span 
{
    width: 210px;
    display: inline-block;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(2) div:nth-child(2) input, .chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(3) div:nth-child(2) input, .chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(4) div:nth-child(2) input
{
    width: 160px;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(2) div:nth-child(2) span, .chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(3) div:nth-child(2) span, .chemPhyEig .tableDiv:nth-child(2) .rowDiv:nth-child(4) div:nth-child(2) span 
{
    width: 160px;
    display: inline-block;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv div:nth-child(4) input
{
    width: 440px;
}

.chemPhyEig .tableDiv:nth-child(2) .rowDiv div:nth-child(4) span 
{
    width: 440px;
    display: inline-block;
}

.schutzSym img
{
    height: 75px;
}

.schutzSym img[src=""]
{
    height: 0;
}

.dot
{
    height: 0.7em;
    width: 0.7em;
    border-radius: 50%;
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0.3em;
}

.btnEinstufung
{
    display: inline;
}

.left
{
    float: left;
}

.right
{
    float: right;
}

.alignRight
{
    text-align: right;
}

div.clearfix
{
    clear: both;
}

.signalword
{
    display: inline-block;
    background-color: #FF0000;
    color: White;
    text-align: center;
    margin-left: 30px;
    font-weight: bold;
    width: 120px;
    padding: 5px;
}

.signalwordEtikettenRedux
{
    display: inline-block;
    background-color: #FF0000;
    color: White;
    text-align: center;
    font-weight: bold;
    width: 120px !important;
    padding: 5px;
}

.signalpicture
{
    /* display: inline-block;
    margin-bottom: 8px; */
    text-align: center;
    width: 90px;
    vertical-align: top;
}

.signalpicture img
{
    width: 75px;
}

.signalpicture span
{
    font-weight: bold;
}

.signalpictureEtikettenRedux
{
    /* display: inline-block;
    margin-bottom: 8px; */
    text-align: center;
    width: 116px;
    vertical-align: top;
}

.signalpictureEtikettenRedux img
{
    width: 110px;
}

.fullwidth
{
    width: 100%;
}

.cnt
{
    margin-left: auto;
    margin-right: auto;
}

.twoColumns
{
    width: 49%;
}

tr.highlight td
{
    background-color: #e4ffe4;
}

.details
{
    margin-top: 0.3em;
}

.topAligned
{
    vertical-align: top;
    padding-top: 0.2em;
}

.line
{
    width: 100%;
    height: 2px;
    background-color: #d9d9d9;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.verticalLine
{
    height: 100%;
    width: 2px;
    background-color: #d9d9d9;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
    margin-right: 10px;
}

.gridRow
{
    border-bottom: 1px solid #d9d9d9;
}

.gridView
{
    margin-top: 0.3em;
    margin-left: auto;
    margin-right: auto;
}

.gridViewEditStretch 
{
    /* ist nicht zu sehen, sorgt aber dafür, dass sich die Breite einer Spalten an den Inhalt anpasst, wenn diese eine Textbox, statt einem Label enthält */
    display: block;
    height: 0;
    visibility: hidden;
}

table.twoColumns tr td:first-child
{
    width: 5.5em;
    min-width: 5.5em;
    max-width: 5.5em;
}

.headlineBackground
{
    background-color: #cedbeb;
}

.headerBackground
{
    background-color: #f3f3f3;
}

.headlinePadding
{
    padding: 10px;
}

.subheadlinePadding
{
    padding: 10px;
}

.subheadlinePaddingSmall
{
    padding: 5px;
}

.subHeadlineStoffinfo, .subHeadlineBAEdit
{
    /* height: 50px;
    line-height: 50px; denios */
    position: relative;
}

.subHeadlineStoffinfo img, .subHeadlineBAEdit img
{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
}

.inhaltBackground
{
    background-color: #ffffff;
}

.inhaltDiv
{
    border: 1px solid #d9d9d9;
}

.contentWidth 
{
    display: inline-block;
}

.inhaltPadding
{
    padding: 10px;
}

.boxBorderRadius
{
    border-radius: 4px 4px 4px 4px;
}

.boxBorderRadiusTop
{
    border-radius: 4px 4px 0px 0px;
}

.boxBorderRadiusBottom
{
    border-radius: 0px 0px 4px 4px;
}

.row:after
{
    clear: both; /* clear fix */
    display: block;
    content: "\a0 "; /*   - just a space doesn't uncollapse margins */
    height: 0px;
}

.row
{
    zoom: 1; /* solves it all for IE < 8, and doesn't hurt other browsers */
}

.row > div
{
    float: left;
    min-height: 1px; /* so kann auch für leere divs eine breite festgelegt werden */
}

.stretchHeight > div
{
    height: 100%;
}

.stretchHeightAuto 
{
    /* die wahre Magie passiert im JS*/
}

.rowMargin10 > div
{
    margin-left: 10px;
}

.rowMargin10 > div:first-child
{
    margin-left: 0px;
}

.rowMargin15 > div
{
    margin-left: 15px;
}

.rowMargin15 > div:first-child
{
    margin-left: 0px;
}

.rowMargin20 > div
{
    margin-left: 20px;
}

.rowMargin20 > div:first-child
{
    margin-left: 0px;
}

.rowMargin40 > div
{
    margin-left: 40px;
}

.rowMargin40 > div:first-child
{
    margin-left: 0px;
}

.table > div
{
    margin-bottom: 10px; /* Abstand zur nächsten Zeile */
}

.table > div:last-child
{
    margin-bottom: 0px; /* Danach kommt keine Zeile mehr */
}

.wrap
{
    white-space: normal;
}

.nowrap
{
    white-space: nowrap;
}

.breakSpaces
{
    white-space: break-spaces;
}

.colorItemWarn
{
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    font-size: 0 !important;
    border: 2px solid Grey !important;
}

.colorItemWarn:disabled
{
    cursor: default;
}

.colorPicker tr, .colorPicker td
{
    padding: 0; /* sonst würde durch das padding des grids der colorPicker kaputt gemacht */
}

.fullWidthFix
{
    width: calc(100% - 1px); /* bei 100% würde immer ein horizontaler Scrollbalken entstehen */
}

.colorItemInventur
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.colorItem
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.height30
{
    height: 30px;
}

.txtAsLabel
{
    border: none !important;
    background-color: transparent !important;
    margin-top: -1px;
}

.middleButtonAlign span
{
    height: 30px;
    line-height: 30px;
}

.middleButtonAlign select, .middleButtonAlign input[type=text]
{
    margin-top: 5px;
}

.colorItemLgBestGesp
{
    padding: 5px !important;
    margin-top: 20px;
    font-weight: bold;
    min-width: 400px;
    width: calc(100% - 10px);
    background-color: var(--colorItemRed) !important;
    color: #ffffff;
    border: none !important;
    text-align: center;
}

.colorItemLgBestGesp[value="Freigegeben"], .colorItemLgBestGesp[value="Released"]
{
    background-color: var(--colorItemGreen) !important;
    color: #ffffff;
}

.colorItemLgBestGesp[value="Stoff noch in Bearbeitung"], .colorItemLgBestGesp[value="Substance still in process"], .colorItemLgBestGesp[value="Registriert"]
{
    background-color: var(--colorItemYellow) !important;
    color: #333333;
}

.dt5em div div:first-child
{
    min-width: 5em;
}

.baPhrasenTabs
{
    margin-top: 25px;
    max-height: 550px;
    width: 650px;
}

.baPhrasenTabs  > .ajax__tab_header
{
    justify-content: flex-start;
}

.baPhrasenTabs  > .ajax__tab_header > span
{
    margin-left: 50px;
}

.baPhrasenTabs  > .ajax__tab_header > span:first-child
{
    margin-left: 0px;
}

.ajax__tab_header
{
    font-weight: bold;
    display: inline-flex;
    justify-content: space-between;
    /* border-bottom: 2px solid #cedbeb; */
    -webkit-box-shadow: inset 0px -2px 0px 0px #cedbeb;
    -moz-box-shadow: inset 0px -2px 0px 0px #cedbeb;
    box-shadow: inset 0px -2px 0px 0px #cedbeb;
    overflow: hidden;
    width: 100%;
}

.ajax__tab_active
{
    border-bottom: 2px solid #00538d;
}

.ajax__tab_active span
{
    color: #00538d;
}

.ajax__tab_tab
{
    font-size: 19px;
    font-weight: bold;
    padding-bottom: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.ajax__tab_header > span
{
    margin-left: 15px;  /*sorgt dafür, dass die Tabs nicht zu eng zusammenrutschen, wenn der Platz eng wird*/
}

.ajax__tab_header > span:first-child
{
    margin-left: 0;
}

.ajax__tab_panel
{
    padding-top: 30px;
}

.myBarVal
{
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: white;
    position: absolute;
}

.myProgress
{
    width: 100%;
    height: 30px;
    background-color: Gray;
    position: relative;
}

.myBar
{
    width: 0%;
    height: 30px;
    background-color: Green;
    text-align: center;
    line-height: 30px;
    color: white;
    position: absolute;
}

.myProgressStoffinfo
{
    width: 100%;
    height: 20px;
    background-color: Gray;
    position: relative;
}

.myBarStoffinfo
{
    width: 0%;
    height: 20px;
    background-color: Green;
    text-align: center;
    line-height: 30px;
    color: white;
    position: absolute;
}

.myModalBackground
{
    background-color: Black;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.myModalPopup
{
    background-color: #FFFFFF;
    padding: 10px 10px 10px 10px;
    border-radius: 4px;
    /* border: 5px solid #d9d9d9; */
    -webkit-box-shadow: 0px 0px 0px 5px #d9d9d9;
    -moz-box-shadow: 0px 0px 0px 5px #d9d9d9;
    box-shadow: 0px 0px 0px 5px #d9d9d9;
}

.modalGridParent 
{
    overflow: auto;
    width: 100%;
    max-height: 500px;
}

.modalGridParent table
{
    border-top: none;
    border-bottom: none;
}

.modalGridParent table tr:first-child
{
    border-top: none;
}

.modalGridParent table tr:last-child
{
    border-bottom: none;
}

.colorItemAP
{
    width: 20px;
    height: 18px;
    padding-top: 2px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.colorItemAP[value="mittel"]
{
    background-color: var(--colorItemYellow);
}

.colorItemAP[value="hoch"]
{
    background-color: var(--colorItemOrange);
}

.datenPflege > .row
{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #cedbeb;
}

.datenPflege > .row:last-child
{
    padding-top: 5px;
    padding-bottom: 0px;
    border-bottom: none;
}

.datenPflege > .row > div:first-child
{
    width: 670px;
    padding-top: 6px;
}

.datenPflege > .row > div:nth-child(2)
{
    width: 80px;
    text-align: center;
}

.middleImageHelper
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.datenPflege input[type=image]
{
    vertical-align: middle;
}

.gridRemovePaddingRight
{
    padding-right: 0 !important;
}

.freigabeTable input[type=text], .freigabeTable textarea
{
    width: 100%;
}

.freigabeTable input[type=text]:-moz-read-only
{
    /* For Firefox */
    border: none !important;
    background-color: transparent !important;
}

.freigabeTable input[type=text]:read-only
{
    border: none !important;
    background-color: transparent !important;
}

.freigabeTable span
{
    display: block;
}

.freigabeTable .widthHead
{
    width: 285px;
}

.freigabeTable .widthLabel1
{
    width: 85px;
}

.freigabeTable .widthLabel2
{
    width: 190px;
}

.freigabeTable .widthLabel3
{
    width: 110px;
}

.freigabeTable .widthLabel4
{
    width: 100px;
}

.freigabeTable .widthText1
{
    width: 100px;
}

.table > .row > div 
{
    /* border: 1px solid #000000; */
    }

.freigabeTable .widthText2
{
    width: 200px;
}

.freigabeTable .widthText3
{
    width: 395px;
}

.freigabeTable .widthText4
{
    width: 85px;
}

.freigabeTable .widthText5
{
    width: 290px;
}

.freigabeTable .widthText6
{
    width: 185px;
}

.freigabeTable .widthText7
{
    width: 380px;
}

.entsorgungTable input[type=text], .entsorgungTable textarea
{
    width: 100%;
}

.table > .row > div 
{
    /* border: 1px solid #000000; */
}

.entsorgungTable input[type=text]:-moz-read-only
{
    /* For Firefox */
    border: none !important;
    background-color: transparent !important;
}

.entsorgungTable input[type=text]:read-only
{
    border: none !important;
    background-color: transparent !important;
}

.entsorgungTable span
{
    display: block;
}

.entsorgungTable .widthLabel1
{
    width: 85px;
}

.entsorgungTable .widthLabel2
{
    width: 120px;
}

.entsorgungTable .widthLabel3
{
    width: 100px;
}

.entsorgungTable .widthLabel4
{
    width: 50px;
}

.entsorgungTable .widthText1
{
    width: 140px;
}

.entsorgungTable .widthText2
{
    width: 80px;
}

.entsorgungTable .widthText3
{
    width: 410px;
}

.entsorgungTable .widthText4
{
    width: 68px;
}

.entsorgungTable .widthText5
{
    width: 375px;
}

.entsorgungTable .widthText6
{
    width: 125px;
}

.colorItemLgBestGespFreigabe
{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-weight: bold;
    background-color: var(--colorItemRed) !important;
    color: #ffffff;
    border: none !important;
    text-align: center;
}

.colorItemLgBestGespFreigabe[value="Freigegeben"], .colorItemLgBestGespFreigabe[value="Released"]
{
    background-color: var(--colorItemGreen) !important;
}

.colorItemLgBestGespFreigabeHaltbar
{
    background-color: var(--colorItemRed) !important;
    color: #ffffff;
    border: none !important;
    text-align: center;
}

.colorItemLgBestGespFreigabeHaltbar[Value="F"]
{
    background-color: var(--colorItemGreen) !important;
}

.tableDiv
{
    display: table;
}

.tableDiv .rowDiv
{
    display: table-row;
}

.tableDiv .rowDiv > div
{
    display: table-cell;
}

.tableDiv .rowDiv > div.colspanFull
{
    display: none;
}

.tableDiv.cellSpacing4pro > .rowDiv > div
{
    padding-left: 4%;
}

.tableDiv.cellSpacing5 > .rowDiv > div
{
    padding-left: 5px;
}

.tableDiv.cellSpacing10 > .rowDiv > div
{
    padding-left: 10px;
}

.tableDiv.cellSpacing20 > .rowDiv > div
{
    padding-left: 20px;
}

.tableDiv.cellSpacing30 > .rowDiv > div
{
    padding-left: 30px;
}

.tableDiv.cellSpacing40 > .rowDiv > div
{
    padding-left: 40px;
}

.tableDiv.cellSpacing50 > .rowDiv > div
{
    padding-left: 50px;
}

.tableDiv.cellSpacingEven10 > .rowDiv > div:nth-child(even)
{
    padding-left: 10px;
}

.tableDiv.cellSpacingEven20 > .rowDiv > div:nth-child(even)
{
    padding-left: 20px;
}

.tableDiv.cellSpacingEven30 > .rowDiv > div:nth-child(even)
{
    padding-left: 30px;
}

.tableDiv.cellSpacingEven40 > .rowDiv > div:nth-child(even)
{
    padding-left: 40px;
}

.tableDiv.cellSpacingEven50 > .rowDiv > div:nth-child(even)
{
    padding-left: 50px;
}

.tableDiv.cellSpacingEven60 > .rowDiv > div:nth-child(even)
{
    padding-left: 60px;
}

.tableDiv.cellSpacingEven70 > .rowDiv > div:nth-child(even)
{
    padding-left: 70px;
}

.tableDiv.cellSpacingOdd10 > .rowDiv > div:nth-child(odd)
{
    padding-left: 10px;
}

.tableDiv.cellSpacingOdd20 > .rowDiv > div:nth-child(odd)
{
    padding-left: 20px;
}

.tableDiv.cellSpacingOdd30 > .rowDiv > div:nth-child(odd)
{
    padding-left: 30px;
}

.tableDiv.cellSpacingOdd50 > .rowDiv > div:nth-child(odd)
{
    padding-left: 50px;
}

.tableDiv.cellSpacingOdd60 > .rowDiv > div:nth-child(odd)
{
    padding-left: 60px;
}

.tableDiv.cellSpacingOdd70 > .rowDiv > div:nth-child(odd)
{
    padding-left: 70px;
}

.tableDiv > .rowDiv > div:first-child
{
    padding-left: 0px !important;   /* important, um odd spacing zu überschreiben*/
}

.tableDiv.rowSpacing5 > .rowDiv > div
{
    padding-top: 5px;
}

.tableDiv.rowSpacing10 > .rowDiv > div
{
    padding-top: 10px;
}

.tableDiv.rowSpacing20 > .rowDiv > div
{
    padding-top: 20px;
}

.rowDiv.rowPadding20 > div
{
    padding-top: 20px !important;   /* important, um rowSpacing zu überschreiben*/
}

.rowDiv.rowPadding30 > div
{
    padding-top: 30px !important;   /* important, um rowSpacing zu überschreiben*/
}

.tableDiv > .rowDiv:first-child > div
{
    padding-top: 0px;
}

.tableDiv.alignTop > .rowDiv > div
{
    vertical-align: top;
}

.tableDiv.alignTop > .rowDiv > div > *
{
    vertical-align: top;
}

.tableDiv.alignMiddle > .rowDiv > div
{
    vertical-align: middle;
}

.tableDiv.alignBottom > .rowDiv > div
{
    vertical-align: bottom;
}

.tableDiv.removeEmptySpace > .rowDiv > div
{
    font-size: 0;
}

.tableDiv.reportsTable .rowDiv:first-child > div
{
    font-weight: bold;
}

.tableDiv.reportsTable .rowDiv:first-child > div span
{
    font-weight: bold;
}

.tableDiv.reportsTable .rowDiv.reportHeader > div
{
    font-weight: bold;
    height: 50px;
    vertical-align: bottom;
}

.tableDiv.reportsTable .rowDiv.reportHeader > div span
{
    font-weight: bold;
}

.tableDiv.datenPflege > .rowDiv > div
{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #cedbeb;
}

.tableDiv.datenPflege > .rowDiv:last-child > div
{
    padding-top: 5px;
    padding-bottom: 0px;
    border-bottom: none;
}

.tableDiv.datenPflege > .rowDiv > div
{
    vertical-align:middle;
}

.tableDiv.datenPflege > .rowDiv > div:last-child
{
    text-align: center;
}


/* The Modal (background) */
.modalLoader {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalLoader-content 
{
    position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 50px;
}

.modalLoader-content > p
{
    margin-bottom: 0;
    margin-top: 50px;
    text-align: center;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.maxWidth200 
{
    max-width: 200px;
}

.keepInline 
{
    display:inline-block;
    width: 100%;
    /* die wahre Magie passiert im JS*/
}

.retainEmptyColumns 
{
    /* die wahre Magie passiert im JS*/
}

.retainEmptyRow
{
    /* manchmal sinnvoll, damit sich etwas nicht unschön nach links verschiebt, wenn alle Zeilen leer sind*/
    /* die wahre Magie passiert im JS*/
}

.legendeContainer 
{
    overflow: auto;
    padding-bottom: 10px;
}

.legendeContainer > div
{
    width: 100%;
}

.legendeContainer > div.buttonContainer
{
    margin-top: 20px;
    width: auto;
}

div.searchBox2 > span
{
    font-weight: bold;
    vertical-align: middle;
    margin-right: 20px;
}

.paperStyle 
{
    background-color: #ffffff;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    border: 1px solid #c0c0c0;
    padding: 5px;
}

.underlinedTextBox 
{
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #000000 !important;
    background-color: transparent !important;
}

/* The Modal (background) */
.customConfirmBox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.45); /* Black w/ opacity */
}

/* Modal Content/Box */
.customConfirmBox-content
{
    position:absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border: 1px solid #666666;
}

.customConfirmBox-body
{
    text-align: center;
    padding: 40px;
    font-size: 12px;
    color: #000000;
}

.customConfirmBox-footer
{
    border-top: 1px solid #e9e9e9;
    background-color: #f2f2f2;
    padding: 20px 50px;
}

.customConfirmBox-footer > button
{
    font-size: 12px;
    color: #000000;
    height: 25px;
    margin-left: 10px;
}

.customConfirmBox-footer > button:first-child
{
    margin-left: 0px;
}

.zoom img {
    transition: transform 0.2s; /* Animation */
}

.zoom:hover img 
{
    margin-left: 15px;
    margin-top: -15px;
    position: absolute;
    border: 3px solid #a3a3a3 !important;
    border-radius: 2px;
    transform: scale(2.0);
}

.buttonDropDown > img
{
    margin-left: -1px;
}

.cutText 
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cutTextMultiline
{
    overflow: hidden;
     display: -webkit-box;
    -webkit-box-orient: vertical;
}

.cutTextMultiline2 
{
    -webkit-line-clamp: 2;
}

.GridHeaderSortDESC
{
    white-space: nowrap;
}

.GridHeaderSortDESC:after
{
    /* content: "⌄"; */
    content: url('/Resources/Icons/sortDown.gif');
    margin-left:3px;
}

.GridHeaderSortASC
{
    white-space: nowrap;
}

.GridHeaderSortASC:after
{
    /* content: "⌄"; */
    content: url('/Resources/Icons/sortUp.gif');
    margin-left:3px;
}

.PageMenu 
{
    position: absolute;
    overflow: auto;
    background-color : #fafafa;
    border: 1px solid #d9d9d9;
    max-height: 400px;
}

.PageMenu table
{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.PageMenu td
{
    cursor : pointer;
    padding-left: 8px;
    padding-right: 8px;
}

.PageMenu td:hover
{
    background-color: Highlight;
    color: HighlightText;
}

.BestForm_FH input[type=text], .BestForm_FH textarea, .BestForm_FH select
{
    width: 200px;
}


.flex-table {
  display: flex;
  flex-direction: column;
}

.flex-table-row {
  display: flex;
  align-items: flex-start;
}

/*Column*/
.flex-table > .flex-table-row > div
{
  flex: 1;
  white-space: nowrap;
  /*border: 1px solid #000000;
  min-height:20px;*/
}

.flex-table > .flex-table-row > div > *
{
    width: 100%;
}

.flex-table > .flex-table-row > div.colspan2
{
    flex: 2;
}

.flex-table > .flex-table-row > div.colspan3
{
    flex: 3;
}

.flex-table > .flex-table-row > div.colspan4
{
    flex: 4;
}

.flex-table > .flex-table-row > div.colspan5
{
    flex: 5;
}

.flex-table > .flex-table-row > div.colspan7
{
    flex: 7;
}

.flex-table > .flex-table-row > div.colspan8
{
    flex: 8;
}

.flex-table > .flex-table-row > div.colspan9
{
    flex: 9;
}

.flex-table.cellSpacing10 > .flex-table-row > div
{
    padding-left: 10px;
}

.flex-table.cellSpacing10 > .flex-table-row > div.colspan2
{
    padding-left: 5px;  /* Aus irgendeinem Grund liegen die Spalten nicht direkt übereinander, wenn man mit gleichem Padding und flex:2 arbeitet */
}

.flex-table > .flex-table-row > div:first-child
{
    padding-left: 0px;
}

.flex-table.rowSpacing10 > .flex-table-row > div
{
    padding-top: 10px;
}

.flex-table > .flex-table-row:first-child > div
{
    padding-top: 0px;
}

.forceLineBreak
{
    overflow-wrap: anywhere;
}

.GridHeaderSortDESC:after
{
    /* content: "⌄"; */
    content: url('/Resources/Icons/sortDown.gif');
    margin-left:3px;
}

.GridHeaderSortASC:after
{
    /* content: "⌄"; */
    content: url('/Resources/Icons/sortUp.gif');
    margin-left:3px;
}

.gridParent .grid tr:first-child > th
{
    background-color: inherit;  /* Sonst sieht man die dahinter geschobenen Zeilen */
    position: sticky;
    /*box-shadow: 0px 1px 0px 0px #D9D9D9, 0px -1px 0px 0px #D9D9D9; /* borders gehen verloren, also hiermit imitieren */
    filter: drop-shadow(0px 1px 0px #D9D9D9) drop-shadow(0px -1px 0px #D9D9D9); /* Chrome zeigt den box-shadow bei sticky Zellen nicht an, also hiermit machen */
    top: 0px;   /* Bei 0 wird die border in Firefox überdeckt. Per JS lösen */
    z-index: 1; /* Sonst schieben sich die fixierten Spalten über den Header */
}

th.freezeColumn 
{
    z-index: 2 !important; /* Sonst schieben sich die anderen Header-Spalten über die fixierten Header-Spalten */
}

td.freezeColumn /* header hat diese Angaben bereits. box-shadows würden sich sonst addieren */
{
    background-color: inherit;  /* Sonst sieht man die dahinter geschobenen Spalten */
    position: sticky;
    /*box-shadow: 0px 1px 0px 0px #D9D9D9, 0px -1px 0px 0px #D9D9D9; /* borders gehen verloren, also hiermit imitieren */
    filter: drop-shadow(0px 1px 0px #D9D9D9) drop-shadow(0px -1px 0px #D9D9D9); /* Chrome zeigt den box-shadow bei sticky Zellen nicht an, also hiermit machen */
}

/*.freezeColumn.scrolled 
{
    filter: drop-shadow(10px 0px 5px #D9D9D9);
} */

/*.freezeColumn.scrolled::after 
{
    background-color: inherit;  /* Sonst sieht man die dahinter geschobenen Spalten 
    content: ""; /* Pseudo-Element für den Schatten 
    position: absolute;
    top: 0;
    left: calc(100% - 7px); /* Schatten beginnt rechts vom Element. 7px abziehen wegen margin 
    width: 10px; /* Breite des Schattens 
    height: 100%; /* Gleiche Höhe wie das Element 
    box-shadow: 10px 0px 5px 0px #D9D9D9;
}*/

.errorMessage
{
    color: Red;
    background-color: White;
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 5px;
    display: block;
}

.errorMessage:not(:first-child)
{
    margin-top: 5px;
}

.grid-container {
    display: grid;
    row-gap: 10px;
}

.grid-container > .cell {

}

.cell.a1 {
    grid-column: 1;
    grid-row: 1;
}
.cell.a2 {
    grid-column: 2;
    grid-row: 1;
}
.cell.a3 {
    grid-column: 3;
    grid-row: 1 / span 2; /* entspricht rowspan="2" */
}
.cell.b1 {
    grid-column: 1;
    grid-row: 2;
}
.cell.b2 {
    grid-column: 2;
    grid-row: 2;
}


.gefahr-box {
  display: grid;
  grid-template-columns: 70px 70px;
  float: right;
  border: 1px solid #C0C0C0;
  background-color: #cedbeb;
  text-align: center;
  border-radius: 6px;
  overflow: hidden;
}

.gefahr-header {
    grid-column: span 2;
    color: #00538d;
    font-weight: bold;
    padding: 5px 0
}

.gefahr-cell {
    padding: 2px;
}

.gefahr-cell:nth-of-type(even) {
    padding: 3px 2px 3px 3px;
}

.gefahr-cell:nth-of-type(even) > span {
    border-bottom-left-radius: 5px;
}

.gefahr-cell:nth-of-type(odd) {
    padding: 3px 3px 3px 2px;
}

.gefahr-cell:nth-of-type(odd) > span {
    border-bottom-right-radius: 5px;
}