*
{
    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: 30px;
    border-radius: 2px;
}

input[type=submit]:hover, input[type=button]:hover
{
    /* 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;
    } 
}
@-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 */
  }
}

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

.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;
}

.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;
}

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

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

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

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

.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
{
    text-align: left;
    text-align-last: left;
}

.gridHeader input[type=text], .gridHeader select
{
    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;
}

.gridSortParent
{
    height: 35px;
    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: #97bf0d;
}

.colorItemLGK[value="-"]
{
    background-color: #c10040;
}

.colorItemLGK[value="1"], .colorItemLGK[value="2"], .colorItemLGK[value="3"], .colorItemLGK[value="4"], .colorItemLGK[value="5"], .colorItemLGK[value="6"], .colorItemLGK[value="7"]
{
    background-color: #ffcc00;
}

.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: #00CCFF;
}

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

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

.outerGridRemoveFilterParent3Lines
{
    position: relative;
    height: 70px;
    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: #d9d9d9;
}

.colorItemGefahr[value="A"], .colorItemGefahr[value="HA"], .colorItemGefahr[value="g"]
{
    background-color: #97bf0d;
}

.colorItemGefahr[value="B"], .colorItemGefahr[value="HB"], .colorItemGefahr[value="1"]
{
    background-color: #fee96d;
}

.colorItemGefahr[value="C"], .colorItemGefahr[value="HC"], .colorItemGefahr[value="2"], .colorItemGefahr[value="m"]
{
    background-color: #ffcc00;
}

.colorItemGefahr[value="D"], .colorItemGefahr[value="HD"], .colorItemGefahr[value="3"]
{
    background-color: #ff4e00;
}

.colorItemGefahr[value="E"], .colorItemGefahr[value="HE"], .colorItemGefahr[value="4"], .colorItemGefahr[value="h"]
{
    background-color: #c10040;
}

.pointer
{
    cursor: pointer;
}

.defaultCursor
{
    cursor: default;
}

.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;
}

.colorItemJN
{
    /*width: 35px;     height: 35px;     border-radius: 50%;     background-color: #d9d9d9;     display: flex;     justify-content: center;     align-items: center;*/
}

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

.colorItemStatus
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffcc00;
}

.colorItemStatus[value="F"]
{
    background-color: #97bf0d;
}

.colorItemStatus[value="B"]
{
    background-color: #ffcc00;
}

.colorItemStatus[value="A"]
{
    background-color: #C0C0C0;
}

.colorItemStatus[value="E"]
{
    background-color: #c10040;
}

.colorItemGespSubst
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #c10040;
}

.colorItemGespSubst[value="F"]
{
    background-color: #97bf0d;
}

.colorItemGespSubst[value="B"]
{
    background-color: #ffcc00;
}

.colorItemGespSubst[value="V"]
{
    background-color: #00B7EF;
}

.colorItemGespSubst[value="G"]
{
    background-color: #c10040;
}

.colorItemGesp
{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #c10040;
}

.colorItemGesp[value="F"], .colorItemGesp[value="N"]
{
    background-color: #97bf0d;
}

.colorItemGesp[value="V"]
{
    background-color: #ffcc00;
}

.colorItemGesp[value="G"]
{
    background-color: #c10040;
}

.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
{
    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;
}

.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
{
    font-size: 19px;
    font-weight: bold;
}

.bold
{
    font-weight: bold;
}

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

#headnumbers
{
    width: 150px;
}

#stoffinfoHead
{
    width: 500px;
}

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

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

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

#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: 500px;
}

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

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

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

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

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

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

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

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

.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;
}

.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: 670px;
    float: left;
}

.stoffinfoAllgemeinHeadRight
{
    width: 340px;
    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: 650px;
}

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

.stoffinfoAllgemein .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;
}

.stoffinfoSicherheitHeadLeft
{
    width: 510px;
}

.stoffinfoSicherheitHeadRight
{
    width: 510px;
}

.stoffinfoSicherheitHeadRightSub
{
    width: 244px;
}

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

.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;
}

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

.signalpicture img
{
    width: 75px;
}

.signalpicture span
{
    font-weight: bold;
}

.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;
}

.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;
}

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

.subHeadlineStoffinfo 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%;
}

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

.rowMargin10 > 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;
}

.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;
}

.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: #c10040 !important;
    color: #ffffff;
    border: none !important;
    text-align: center;
}

.colorItemLgBestGesp[value="Freigegeben"]
{
    background-color: #97bf0d !important;
    color: #ffffff;
}

.colorItemLgBestGesp[value="Stoff noch in Bearbeitung"]
{
    background-color: #ffcc00 !important;
    color: #333333;
}

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

.divtable div div
{
    float: left;
}

.divtable div
{
    display: table;
}

.ajax__tab_header
{
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #cedbeb;
}

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

.ajax__tab_active span
{
    color: #00538d;
}

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

.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: 20px;
    background-color: Gray;
    position: relative;
}

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

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

.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: #ffdd00;
}

.colorItemAP[value="hoch"]
{
    background-color: #ff7700;
}

.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 .widthText1
{
    width: 100px;
}

.freigabeTable .widthText2
{
    width: 200px;
}

.freigabeTable .widthText3
{
    width: 395px;
}

.freigabeTable .widthText4
{
    width: 85px;
}

.freigabeTable .widthText5
{
    width: 290px;
}

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

.colorItemLgBestGespFreigabe[value="Freigegeben"]
{
    background-color: #97bf0d !important;
}

.colorItemLgBestGespFreigabeHaltbar
{
    background-color: #c10040 !important;
    color: #ffffff;
    border: none !important;
    text-align: center;
}

.colorItemLgBestGespFreigabeHaltbar[Value="F"]
{
    background-color: #97bf0d !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 > .rowDiv > div:first-child
{
    padding-left: 0px;
}

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

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

.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;
}


/* The Modal (background) */
.modalLoader {
    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.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*/
}

.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;
}