html {
	overflow-y: scroll
}
html table {
	border-top: none;
	border-bottom: none
}

.w100p {
	width: 100%;
	max-width: 100%;
}
.w75p {
	width: 75%
}
.w66p {
	width: 66%
}
.w50p {
	width: 50%
}
.w33p {
	width: 33%
}
.w25p {
	width: 25%
}
.w15p {
	width: 15% !important;
}
.w59p {
	width: 59% !important;
}
.w10p {
	width: 10%
}
.w5p {
	width: 5%
}

.ar {
	text-align: right
}
.al {
	text-align: left
}
.ac {
	text-align: center
}

.mr05em {
	margin-right: 0.5em
}
.mr1em {
	margin-right: 1em
}
.ml05em {
	margin-left: 0.5em
}
.ml1em {
	margin-left: 1em
}

.pTop, .pBottom, .pLeft, .pRight {
	position: absolute
}
.pTop {
	top: 0
}
.pBottom {
	bottom: 0
}
.pLeft {
	left: 0
}
.pRight {
	right: 0
}

#tableCon * {
	/*font-family: Arial;*/
}
#tableCon .paginate_button {
	padding: 0px 5px;
}
#tableCon .increase,
#tableCon .decrease{
	margin:2px 0px;
}
#tableCon i.fa {
	font: normal normal normal 1em/1 icomoon
}
#tableCon i.fa-user {
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#eproc #Navigationbar.fixed + .SiteContainer {
	margin-top: 80px
}

#eproc #Navigationbar {
	margin-bottom: 0;
}

#Navigationbar .level_1 > #mainNavEprocure.active {
	border-right: none;
	margin-left: -1px;
	/*background: #F4822D;*/
}

#Navigationbar .level_1 > #mainNavEprocure.active > a {
	/*background: #F4822D;*/
	text-shadow: none;
	color: #333;
}

#eprocMainNavCon {
	border-top: 1px solid #ccc;
	background-color: #fff;
}

#eprocMainNav {
	margin: auto;
	display: block;
	height: 40px;
	padding: 0px;
}

.fixed #eprocMainNavCon {
	background: linear-gradient(to bottom, rgba(255,255,255,1)90%, rgba(255,255,255,0.25)7% ,rgba(0,0,0,0.15)2%);
}
#eprocMainNav > li {
	float: left;
	position: relative;
}

#eprocMainNav li.last {
	float: right;
}
#eprocMainNav li.last span {
	padding: 0;
}
#eprocMainNav a, #eprocMainNav span {
	display: block;
	height: 40px;
	line-height: 40px;
	color: #000;
	padding: 0 1.5em;
	font-size: 14px;
	font-weight: 500;
}
#eprocMainNav a:hover {
	background: #666666;
	color: #fff;
}

#eprocMainNav li ul.subNav li:has(a:hover){
	background: #666666;
	color: #fff;
}

#eprocMainNav .subNav a:hover{
	background: #fff;
	color: #F4822D;
}

/* Navi zweite Ebene */
#eprocMainNav li ul {
	padding: 0px;
	display: none;
	position: absolute;
	top: 40px;
	background: #fff;
	box-shadow: 3px 4px 10px -2px #999;
	z-index: 1
}

#eprocMainNav li:hover ul {
	display: block;
}

#eprocMainNav .subNav a {
	white-space: nowrap;
}

#tableCon {
	position: relative;
	margin-top: 0;
}
#tableCon table tr th.ar, #tableCon table tr td.ar {
	text-align: right
}
#tableCon table tr th.al, #tableCon table tr td.al {
	text-align: left
}
#tableCon table tr th.ac, #tableCon table tr td.ac {
	text-align: center
}

#tableCon .resp-tabs-content {
	border-top: 1px solid #ccc;
	padding-top: 1em
}
#tableCon .resp-tab-content {
	padding: 1em 0 0 0
}

#tableCon .resp-tab-item {
	padding: 0
}
#tableCon .resp-tab-item a {
	display: block;
	padding: 10px 30px
}

#ContentTable td {
	position: relative
}

/* Farben */
.bg-ec1 {
	background-color: #eee
}
.bg-ec2 {
	background-color: #eee
}
.bg-ec3 {
	background-color: #eee
}
.bg-ec4 {
	background-color: #eee
}
.fg-ec1 {
	color: #222
}
.fg-ec2 {
	color: #222
}
.fg-ec3 {
	color: #222
}
.fg-ec4 {
	color: #222
}

/* Besteller */
.orderUser a {
	display: inline-block;
	padding: 0;
	white-space: nowrap;
}

.editedByAdmin {
	display: inline-block;
	cursor: help;
	margin-right: 10px;
}

td.amount .editedByAdmin {
	height: 30px;
	line-height: 30px;
	position: absolute;
	left: 0px;
	top: 12px;
}

.editedByAdmin i {
	color: #F4822D;
}

body .ui-tooltip, body .ui-tooltip-content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

body .ui-tooltip {
	max-width: 200px;
	border-radius: 2px;
	border: 1px solid #aaa;
	box-shadow: 3px 3px 3px 0px #aaa;
}

.hasTooltip {
	cursor: help;
}

.wideTooltip {

	max-width: 400px;
}

.wideTooltip .ui-tooltip-content {
	width: 99%;
	max-width: 99%;
}

/* Betrag / Positionen */
.orderAmount, .orderPositions {
	text-align: right
}

/* Status */
#tableCon th.orderStatus, #tableCon td.orderStatus, #tableCon th.status, #tableCon td.status {
	text-align: center;
	padding: 8px 0;
}
.orderStatus span, span.status {
	display: inline-block;
	color: #fff;
	width: 70px;
	height: 26px;
	font-size: .85em;
	line-height: 26px;
	display: inline-block;
	text-align: center;
	text-shadow: 0 0 1px #000;
}
.orderStatus .offen, span.status-green, .status-green, .status-green i {
	color: #fff;
	background-color: #3e8600
}

.orderStatus .abgelehnt, span.status-red, .status-red, .status-red i {
	color: #fff;
	background-color: #7f0000
}

span.status-orange, .status-orange, .status-orange i {
	color: #fff;
	background-color: orange
}

#eproc h3 {
	margin: 1.5em 0 .5em 0;
}
#eproc h3.first {
	margin: .5em 0 .75em 0;
}

/* Panels Startseite */

#eprocPanels a {
	display: block;
	position: relative;
	padding: .5em;
	height: 5em;
	font-size: 1.85em;
	letter-spacing: -.05em;
	line-height: 1.2;
	border-radius: 3px;
	transition: margin ease 0.2s;
}
#eprocPanels a:hover {
	box-shadow: 3px 4px 10px -2px #999;
	margin-top: -3px;
	margin-bottom: 3px;
	background: #F4822D;
	color: #fff;
}

#eprocPanels a i {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	color: #ccc;
	font-size: 1.5em
}
#eprocPanels a:hover i {
	color: #fff
}

#eprocPanels a i.c1 {
	right: 4rem;
	bottom: .75rem;
	font-size: 1.2em;
	color: rgba(204,204,204,1);
}
#eprocPanels a i.c2 {
	right: 2.3 rem;
	bottom: 2rem;
	font-size: 1em;
	color: rgba(204,204,204,.75);
}
#eprocPanels a i.c3 {
	right: 1rem;
	bottom: 3.1 rem;
	font-size: .75em;
	color: rgba(204,204,204,.5);
}
#eprocPanels a:hover i.c1 {
	color: rgba(255,255,255,1)
}
#eprocPanels a:hover i.c2 {
	color: rgba(255,255,255,.75)
}
#eprocPanels a:hover i.c3 {
	color: rgba(255,255,255,.5)
}

/* Startseite Bestellungen */

td.dCostCenter span:after {
	display: inline-block;
	content: "/";
	padding: 0 .25em;
}
td.dCostCenter span:last-child:after {
	content: "";
	padding: 0;
}

#eproc table {
	border: none;
}

#eproc #ContentTable thead th:first-child {
	border-top-left-radius: 3px
}
#eproc #ContentTable thead th:last-child {
	border-top-right-radius: 3px
}
#eproc #ContentTable tr:last-child td:first-child {
	border-bottom-left-radius: 3px
}
#eproc #ContentTable tr:last-child td:last-child {
	border-bottom-right-radius: 3px
}

/* Bearbeiten */
.tableTools {
	width: 180px;
	min-width: 180px;
	text-align: right;
}
.tableTools i {
	color: inherit
}

.tableTools a,
.tableTools button{
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 20px;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	color: #333;
}

.tableTools a:hover,
.tableTools button:hover {
	color: #F4822D;
}

.tableTools a.disabled, .tableTools a.disabled:hover {
	color: #bfbfbf;
	cursor: default;
}
.tableTools .link_form button{
	background: none;
	border: none;
}

/* Abgeschlossene Bestellungen */
.orderValueAll {
	font-weight: bold;
	text-align: right;
}

/* Kostenstellen - Import */
pre#importLog {
	height: 20em;
	overflow-x: hidden;
}

/* Kostenstellen Übersicht/Bearbeitung */
td.ccmode.dateMode {
	display: block;
	font-size: 0.85em;
	line-height: 23.4375px;
}

/* Forms */

input[readonly="readonly"] {
	box-shadow: none;
	cursor: not-allowed;
}

#eproc label {
	position: relative
}

#eproc .required {
	font-weight: bold;
	color: #f00;
}

#userform .form-group {
	display: block;
	margin: 0 0 2em 0;
	padding: 0 0 2em 0;
	border-bottom: 1px solid #ccc;
}

#userform .form-group.last {
	margin: 0 0 2em 0;
	padding: 0 0 2em 0;
	border-bottom: none;
}

#userform .form-row:before, #userform .form-row:after {
	content: " ";
	display: table;
}

#userform .form-row:after {
	clear: both;
}

#userform .form-row {
	*zoom: 1;
}

#userform .form-row:last-child {
	margin-bottom: 0;
}

#userform h2 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}

#userform select, #userform input {
	font-size: 0.875em;
}
#userform input.lplz, #userform input.pplz, #userform input.rplz {
	width: 85px;
}
#userform input.lort, #userform input.port, #userform input.rort {
	width: 210px;
}

#userform label, #userform label.w100p span {
	display: inline-block;
	width: 120px;
	margin-bottom: 0.35714em;
	color: #717c8e;
}
#userform label.w75p.secondlabel{
	width:75%;
}
#userform.userParams label, #userform.userParams label.w100p span {
	float: left;
	display: block;
	width: 220px;
	height: 32px;
	line-height: 32px;
	margin-bottom: 0;
}

.main-content .userParams input, .main-content .userParams textarea, .main-content .userParams select, .main-content .userParams fieldset {
	float: right;
	width: 63%;
	height: 32px;
}

#userform label.w100p span, #userform label.w100p input {
	font-size: 1em;
}

#userform label.mandatory:after {
	content: "!";
	float: right;
	color: #f00;
	font-weight: bold;
}

#userform label i.inner-icon {
	right: 20px;
	top: 7px;
}

#userform .form-group.display .form-row {
	margin-top: 0;
	margin-bottom: 0;
}

#userform .form-group.display h2+ .form-row {
	margin-top: 1.125em;
}

#userform .form-row > span {
	padding: 3px;
	box-sizing: border-box;
	color: #000;
	padding: 0.5em;
	font-size: 0.875em;
	line-height: normal;
}

#userform .button span.count {
	display: block;
	margin: .25em auto;
	font-weight: bold;
}

#userform .optional .form-row {
	display: none
}

#userform .optional h2 {
	cursor: pointer
}

#userform .optional h2:after {
	font-family: "icomoon";
	content: "\ea3e";
	float: right;
	margin-right: 14px;
	color: #aaa;
}
#userform .optional.open h2:after {
	content: "\ea3a";
}

#userform .optional h2:hover:after {
	color: inherit
}

#userform .datepickerCon {
	position: relative;
}

#userform .datepickerCon:after {
	font-family: "icomoon";
	content: "\e953";
	position: absolute;
	top: 4px;
	right: 25px;
}

/* Inline-Hilfe */
div.help {
	display: none;
	clear: both;
	width: 63%;
	float: right;
	margin: 0;
	font-size: 0.875em;
	padding-top: 1.125em;
	position: relative;
}
div.help * {
	font-size: 1em;
}

span.helpTrigger, span.noHelp {
	float: left;
}

span.helpTrigger i {
	color: #999
}
span.helpTrigger:hover i {
	color: inherit
}

span.helpTrigger {
	cursor: pointer
}

/* Bestellung bearbeiten - Bestellinformationen */

#orderInfo * {
	font-size: 12px
}

#orderInfo th:not(:first-child), #orderInfo td:not(:first-child) {
	border-left: 1px solid #ccc;
	padding-left: 2em;
}

#orderInfoMisc {
	padding-right: 2em;
}

#orderInfoMisc > span {
	display: block;
	text-align: right
}

#orderInfoMisc > span strong {
	float: left
}

form.dataEdit {
}

.toggleEdit .fa, .editComment .fa, .saveComment .fa {
	display: inline-block;
	line-height: 1.5625em;
	height: 1.5625em;
	width: 1.5625em;
	margin-left: .5em;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #222;
	background: #f3f3f3;
	text-align: center;
	cursor: pointer;
}

.toggleEdit.view .cancel, .toggleEdit.view .save {
	display: none
}
.toggleEdit.view .edit {
	display: inline-block
}

.toggleEdit.edit .cancel, .toggleEdit.edit .save {
	display: inline-block
}
.toggleEdit.edit .edit {
	display: none
}

form.dataEdit.view label span {
	display: none;
}

form.dataEdit.view input {
	line-height: 1.5625;
	border: none;
	box-shadow: none;
	padding: 0;
	color: #000;
}

form.dataEdit.view input.ib {
	display: inline-block
}


form.dataEdit.edit label span {
	display: inline-block;
	line-height: 28px;
	width: 25%;
	margin-bottom: 3px;
}
form.dataEdit.edit input {
	margin-bottom: 3px
}

/* Bestellung bearbeiten - gekürzte Bemerkung */
#emCon th, #emCon td {
	padding-bottom: 30px
}
em {
	max-width: 600px
}
em.open {
	display: block;
	cursor: pointer
}
em.collapsed {
	display: block;
	position: absolute;
	height: 45px;
	overflow: hidden;
	cursor: pointer;
}
em.collapsed:after {
	content: "";
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 45px;
	display: block;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

/* Bestellung bearbeiten - Toolbar */

#userform.toolbar {
	margin: 2em 0;
}
#userform.toolbar .form-group {
	padding: 0;
}

#userform.toolbar .button {
	padding: 0.64286em 1.42857em;
}

#userform.toolbar.medium .button {
	font-size: 0.875em
}
#userform.toolbar.medium .button i {
	font-size: 1.125em;
}

#userform.toolbar .button.status-green:hover {
	border: 1px solid #1f4300;
}

#userform.toolbar .button.status-red:hover {
	border: 1px solid #3f0000;
}

/* Bestellung bearbeiten - Kommentar */

.editable.disabled {
	position: relative
}
.editable.disabled:after {
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff url(/tradepro/layout/wait.gif) center no-repeat;
	opacity: .5;
}

#comment[readonly="readonly"], #comment.readOnly {
	border: none;
	padding: 0;
	box-shadow: none;
}

/* Bestellung bearbeiten - Direktbestellung */

.addProduct #FFqueryDO {
	width: 330px;
}

.addProduct select#directorder {
	width: 100%;
}

.addProduct #MengeWert {
	width: 50px;
}

.addProduct button {
	margin: 0;
}

span.suggestTextQuery, span.suggestTextQueryTyped {
	font-size: 12px;
	font-weight: normal
}

/* Bestellung bearbeiten - Tabelle */

#orderInfo td.orderStatus {
	padding: 0.375em 0.625em
}

td.artPos {
	color: #888;
}

td.rowPriceline {
	white-space: nowrap;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
	margin-top: 0;
	border: 1px solid #666;
	border-radius: 2px;
}
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
	margin-top: -8px;
	color: #F4822D;
}

table.dataTable.cell-border tbody tr.tfoot th, table.dataTable.cell-border tbody tr.tfoot td {
	border: none;
	background: none;
}

table.dataTable.stripe tbody tr.tfoot.even, table.dataTable.display tbody tr.tfoot.even, table.dataTable.stripe tbody tr.tfoot.odd, table.dataTable.display tbody tr.tfoot.odd {
	background-color: #fff
}

.DataTable #ContentTable thead th {
	background-color: #f1f1f1;
	color: #000;
	font-size: 14px;
	font-weight: bold;
}

table.dataTable thead th, table.dataTable thead td {
	padding: 8px 10px;
}
#tableCon {
	opacity: 0;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter {
	display: block;
	height: 40px;
	line-height: 40px;
	margin-bottom: 1em;
}
table.dataTable.stripe tbody tr.odd {
	background-color: #fff !important; /* Fix Issue :- Purchaser Cockpit: Multiadmin edits order / Selectbox missing : By Santhosh on 24 June 2022 */
}
table.dataTable.stripe tbody tr.even {
	background-color: #f1f1f1 !important; /* Fix Issue :- Purchaser Cockpit: Multiadmin edits order / Selectbox missing : By Santhosh on 24 June 2022 */
}

.dataTables_wrapper .dataTables_paginate {
	float: left;
	text-align: left;
	padding-top: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0 1em;
	height: 40px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	visibility: hidden;
}

.dataTables_paginate span {
	height: 40px;
	line-height: 40px;
	display: inline-block;
}

.dataTables_wrapper .dataTables_info {
	display: block;
	clear: none;
	float: left;
	height: 40px;
	line-height: 40px;
	margin-bottom: 1em;
	padding: 0;
}
.dataTables_wrapper .dataTables_filter {
	float: right;
}

.dataTables_wrapper .dt-buttons {
	margin-top: 1em;
}
.dataTables_wrapper .dt-buttons:before {
	content: "Daten exportieren:";
	position: relative;
	display: block;
	float: left;
	box-sizing: border-box;
	margin-right: 0.333em;
	padding: 0.5em 1em;
	font-size: 1em;

	top: -1px;
}
.dataTables_wrapper .dt-buttons .dt-button {
	margin-top:0px;
}

#tableCon button.dt-button:hover {
	background: #F4822D;
	border-color: #F4822D;
}
/* Export */

table.ContentTable.ExportTable th {
	font-weight: normal
}

/* ************************************
 * Statistik
 * ********************************** */

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
#chartjs-tooltip {
	opacity: 1;
	position: absolute;
	background: rgba(0, 0, 0, .7);
	color: white;
	border-radius: 3px;
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
	pointer-events: none;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: 20000;
}

.chartjs-tooltip-key {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
}

#sGen .rs-column label {
	position: absolute;
	display: block;
	width: 100%;
	font-weight: bold;
	line-height: 2em;
}

.fixedHeight .rs-column {
	position: relative;
	display: block;
	height: 9em;
}

#chartCon {
	position: relative;
	padding: 0 0 3em 0;
	min-height: 400px;
}
#chartCon p {
	margin: 0;
}

#chartTools {
	display: none;
	clear: both;
	margin: 0;
	padding-top: 3em
}

#nullLabels .fa-eye-slash, #shortLabels .fa-minus-square {
	display: inline-block
}
#nullLabels .fa-eye, #shortLabels .fa-plus-square {
	display: none
}
#nullLabels.hideLabels .fa-eye-slash, #shortLabels.hideLabels .fa-minus-square {
	display: none
}
#nullLabels.hideLabels .fa-eye, #shortLabels.hideLabels .fa-plus-square {
	display: inline-block
}

#loader {
	background: #ffffff7f url(/tradepro/shop/layout/wait.gif) center center no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#sGenTableCon div.dt-buttons {
	clear: both;
}

table.dataTable.stripe tbody tr.selected {
	background-color: #b0bed9 !important; /* Fix Issue :- Purchaser Cockpit: Multiadmin edits order / Selectbox missing : By Santhosh on 24 June 2022 */
}

#chartTools .button{
	border: none;
}

#chartTools .button:hover{
	color: #F4822D;
	background: #fff;
}

form.dataEdit.view {
	pointer-events: none;
}

.customer #tableCon .iconparade > div {
	display: inline-flex;
	column-gap: 0.5em;
}