.clear { clear: both; }

tr.singleDataset { cursor: pointer; }
[class*="col-"] { float: left; }

.btn.btn-primary {
  background-color: #6f6f6e;
  border-color: #6f6f6e;
}
.btn.btn-primary:hover { opacity: 0.6; }
.aligned-columns {
  display: inline-block;
  white-space: nowrap;
}

.nav-sidebar .nav-header {
    font-size: 1rem;
}

#currentSalesman {
  width: 94%;
  padding: 2px;
  margin: 0 3%;
}

.nav-tabs { border: 0; }
div[role="tabpanel"] > ul + div {
  background-color: #fff;
  border: 1px solid #dadde0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding: 15px;
}
div[role="tabpanel"] > ul > li {
  padding: 10px;
  border: 1px solid #dadde0;
  line-height: 1;
  min-width: 100px;
  text-align: center;
}
div[role="tabpanel"] > ul > li.active { background-color: #fff; }
div[role="tabpanel"] > ul > li:first-of-type { border-top-left-radius: 10px; }
div[role="tabpanel"] > ul > li:last-of-type { border-top-right-radius: 10px; }
div[role="tabpanel"] > ul > li.active > a { color: #000; }

.cssload-thecube {
	width: 73px;
	height: 73px;
	margin: 0 auto;
	margin-top: 49px;
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(103,136,21);
	animation: cssload-fold-thecube 2.76s infinite linear both;
		-o-animation: cssload-fold-thecube 2.76s infinite linear both;
		-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
		-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
		-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
	transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
		-o-transform: scale(1.1) rotateZ(90deg);
		-ms-transform: scale(1.1) rotateZ(90deg);
		-webkit-transform: scale(1.1) rotateZ(90deg);
		-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
		-o-transform: scale(1.1) rotateZ(180deg);
		-ms-transform: scale(1.1) rotateZ(180deg);
		-webkit-transform: scale(1.1) rotateZ(180deg);
		-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
		-o-transform: scale(1.1) rotateZ(270deg);
		-ms-transform: scale(1.1) rotateZ(270deg);
		-webkit-transform: scale(1.1) rotateZ(270deg);
		-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;
		-o-animation-delay: 0.35s;
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		-moz-animation-delay: 0.35s;
}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;
		-o-animation-delay: 0.69s;
		-ms-animation-delay: 0.69s;
		-webkit-animation-delay: 0.69s;
		-moz-animation-delay: 0.69s;
}
.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;
		-o-animation-delay: 1.04s;
		-ms-animation-delay: 1.04s;
		-webkit-animation-delay: 1.04s;
		-moz-animation-delay: 1.04s;
}



@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-o-keyframes cssload-fold-thecube {
	0%, 10% {
		-o-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-o-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-o-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-ms-keyframes cssload-fold-thecube {
	0%, 10% {
		-ms-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-ms-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-ms-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-moz-keyframes cssload-fold-thecube {
	0%, 10% {
		-moz-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-moz-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-moz-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

.superload {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(255,255,255,0.8);
  padding-top: 10rem;
}

.superload.inner {
  position: absolute;
  background: transparent;
  min-width: 82%;
  left: 17%;
  width: auto;
}

.superload .text {
  text-align: center;
  margin-top: 2rem;
  font-family: "Segoe UI";
  font-weight: 300;
  font-size: 2em;
}

.superload.inner .text { display: none; }

.superload .text:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

.superload .microtext {
  text-align: center;
  font-family: "Segoe UI";
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 1.7px;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: rgba(0,0,0,0.5);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 rgba(0,0,0,0.5),
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 rgba(0,0,0,0.5),
      .5em 0 0 rgba(0,0,0,0.5);}
}


.nav-pills .nav-link.dropdown-toggle[aria-expanded="true"]:not(.active):hover {
    color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #678815;
}

.nav-pills .nav-link:not(.active):hover {
    color: #678815;
}

.nav-link { padding: .5rem .5rem; }

.small-box h3 { font-size: 26px; }
.small-box h3 sup { font-size: 15px; }

.connectionfailed {
  position: absolute;
  top: 1.3em;
  left: 1.9em;
  color: red;
  font-size: 0.5em;
  display: none;
}

.connectionok {
  position: absolute;
  top: 1.3em;
  left: 1.9em;
  color: lime;
  font-size: 0.5em;
  display: none;
}

th[data-l10n] {
  white-space: nowrap;
}

.table-striped tbody tr:nth-of-type(odd):hover,
.table-striped tbody tr:nth-of-type(even):hover {
  background-color: rgba(0,0,0,0.2);
}

table.dataTable tbody tr { cursor: pointer; }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  color: #343a40;
  background-color: rgba(255, 255, 255, 0.9);
}

.card-info.card-outline {
  border-top: 3px solid #678815;
}

.user-panel img {
  width: 3.5rem;
  height: 3.5rem;
}

.badge {
  display: inline-block;
  padding: 0.10em 0.47em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50%;
  margin: 1px 0 0 4px;
  width: 15px;
  height: 15px;
  position: absolute;
}

.badge-info {
  color: #ffffff;
  background-color: #FF9800;
}


.orderct, .purchaseorderct { float: left; }
.orderct + p, .purchaseorderct + p { margin-left: 0.5em; display: inline-block; font-size: 1.3em; }
.small-box .icon { font-size: 50px; }
.small-box:hover .icon { font-size: 60px; }
.dataTables_paginate.paging_simple_numbers { width: 100%; }

.btn-app { min-height: 60px; height: inherit; }
.btn-app span { font-size: 18px; }

.btn-gilde {
    color: #ffffff;
    background-color: #688816;
    border-color: #688816;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-gilde.active {
  background-color: #516913;
}

.modal-header button.close {
  position: absolute;
  right: 1rem;
  font-size: 2em;
}

.dataTables_wrapper .dataTables_filter label.searchfilter {
  width: auto;
}

#daterange-btn {
  float: left !important;
  padding: 2.5px 0.75rem;
}

#daterange-btn > span { margin-left: .5em; }

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  background-color: #688816;
  border-color: #688816;
}

.daterangepicker .ranges li {
  color: #688816;
}

.range_inputs button.btn-success {
  background-color: #688816;
  border-color: #688816;
}

.span[data-l10n="DateRange"] { padding: 0 0.75rem; }

#functions a#saveorder { pointer-events: inherit; }
/*#functions a#saveorder:hover { cursor: not-allowed; }*/

@media and (max-width: 992px) {
  #functions .btn.btn-app { width: 94%; }
}

.fa.btn-small {
  padding: 0.1rem 0.4rem 0 0.4rem;
  margin-right: 4px;
}

.menu_offer_badge,
.menu_purchase_badge,
.menu_order_badge { padding: .1em .4em; border-radius: 4px; width: auto; }
.badge.realright { right: 1.5rem; top: 1em; }

/*
td.risk[data-field="amount"] { background-color: rgba(220, 53, 69, 0.5); }
td.ok[data-field="amount"] { background-color: rgba(40, 167, 69, 0.5); }
*/

.fa-exclamation-triangle.red { color: #dc3545; margin-left: .3rem; }

span.editicon {
 cursor: pointer;
 color: #ffc107;
 margin-top: 2px;
}

.sD.deleted {
  opacity: 0.2;
  filter: grayscale(0.9) blur(0.8px);
}

.sD.deleted:after {
  content: "";
  border-bottom: 1px dotted #333;
  position: absolute;
  width: 98%;
  left: 1%;
  margin-top: 22px;
  right: 1%;
}

button.ui-dialog-titlebar-close:after {
    content: "\f00d";
    font: normal normal normal 16px/1 FontAwesome;
    position: absolute;
    left: 2px;
    top: 2px;
}

.ui-widget-overlay { background: #000; }

.ui-dialog {
  transition: transform 0.3s ease-out;
}

.ui-dialog .ui-dialog-titlebar-close {
  background: transparent;
  border: none;
}

.ui-widget.ui-widget-content {
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
    outline: 0;
}

.ui-widget-header {
  padding: 10px 16px !important;
  border: none;
  border-bottom: 1px solid #dddddd;
  background: transparent;
}

textarea#comment {
  width: 100%;
}

.nav-item.has-treeview .nav-item {
  margin-left: 10px;
  width: calc(100% - 12px);
}

/* Lists */
td[data-mandantpk]:before {
  content: "";
  width: 20px;
  height: 20px;
  float: right;
  background-size: contain;
  margin: 3px;
}
td[data-mandantpk='3']:before { background-image: url(../_images/mandanten/gilde.png); }
td[data-mandantpk='4']:before { background-image: url(../_images/mandanten/casablanca.png); }
td[data-mandantpk='17']:before { background-image: url(../_images/mandanten/gilde-casa.png); }

.infofromagento {
  float: right;
  font-style: italic;
  font-size: 0.9em;
  padding-top: 1rem;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

[class*="sidebar-dark"] .currentFair {
  border-bottom: 1px solid #4f5962;
}

.currentFair { color: #d0d4db; }

tr.sD[data-purchaseorderpk] td[data-status]:after,
tr.sD[data-orderpk] td[data-status]:after {
  content: "Status";
  float: right;
  padding: 0px 5px;
  font-size: 9px;
  margin-top: 7px;
  border-radius: 6px;
  color: #fff;
}
tr.sD[data-purchaseorderpk] td[data-status="1"]:after { background: #00a65a; } /* Bestellung angelegt */
tr.sD[data-purchaseorderpk] td[data-status="2"]:after { background: #3c8dbc; } /* Bestellung geprüft */
tr.sD[data-purchaseorderpk] td[data-status="3"]:after { background: #3c8dbc; } /* Bestellung freigegeben */
tr.sD[data-purchaseorderpk] td[data-status="4"]:after { background: #dc3545; } /* Auftrag erstellt */
tr.sD[data-purchaseorderpk] td[data-status="5"]:after { background: #00a65a; } /* Bestellung storniert */
tr.sD[data-purchaseorderpk] td[data-status="6"]:after { background: #dc3545; } /* Bestellung abgelehnt */
tr.sD[data-purchaseorderpk] td[data-status="7"]:after { background: #FF9800; } /* Bestellung ohne Positionen */
tr.sD[data-purchaseorderpk] td[data-status="9"]:after { background: #dc3545; } /* Bestellung in Bonitätssperre */

tr.sD[data-orderpk] td[data-status="0"]:after { background: #00a65a; } /* Auftrag angelegt */
tr.sD[data-orderpk] td[data-status="1"]:after { background: #00a65a; } /* wird kommissioniert (1) */
tr.sD[data-orderpk] td[data-status="2"]:after { background: #3c8dbc; } /* Auftrag freigegeben */
tr.sD[data-orderpk] td[data-status="3"]:after { background: #3c8dbc; } /* wird kommissioniert (3) */
tr.sD[data-orderpk] td[data-status="4"]:after { background: #dc3545; } /* Rechnung gedruckt */
tr.sD[data-orderpk] td[data-status="5"]:after { background: #00a65a; } /* Rechnung bewertet */
tr.sD[data-orderpk] td[data-status="6"]:after { background: #DB34CA; } /* wartet auf Zahlungseingang */
tr.sD[data-orderpk] td[data-status="7"]:after { background: #FF9800; } /* Auftrag storniert */
tr.sD[data-orderpk] td[data-status="8"]:after { background: #dc3545; } /* Auftrag abgelehnt */

td.ui-datepicker-week-col {
  border: 1px solid #8da963;
  background: #c9e69e;
  margin: 0.6px 4px 0.4px 1px;
  display: block;
  padding: 3px 3px;
  text-align: center;
  font-weight: bold;
}

td.ui-datepicker-week-col:hover {
  border-color: #999;
  background: #e6c49e;
  cursor: pointer;
}

.dataTables_wrapper .customheader {
  float: left;
  width: auto;
  font-weight: bold;
  color: #444;
  padding-left: 1em;
  margin: 3.5px 0;
}

#updateManual {
  float: right;
  padding: 2.5px 0.75rem;
  margin-right: 0.5em;
}

.dataTables_length {
  margin: 3.5px 0;
}

#functions > a {
  margin-bottom: 1vh;
}

/* Sonderpreis */
tr.sD td[data-type="5"]:after {
  content: "\f005";
  color: #ffbc00;
  position: absolute;
  font: normal normal normal 10px/1 FontAwesome;
}

#general-chart div.col-lg-2 {
  white-space: nowrap;
}

td.dotted {
  text-decoration: underline dotted 1px;
}

.box {
    padding: .5em 0;
}

table[id*="activities"] td:nth-child(n+2) { white-space: nowrap; }
table[id*="activities"] td:last-child { white-space: inherit; }

.chart.tab-pane.active.show > div {
  min-height: 180px;
}

.chart.tab-pane.active.show > div .superload.inner {
    position: relative;
    left: inherit;
    display: inline;
}

tr[data-customerpk].sD td:first-child {
    white-space: nowrap;
    font-size: 0.97em;
    line-height: 1.7em;
}

a.btn.back-btn {
    float: right;
    display: inline-block;
    width: auto;
    margin: -2em 0.5em;
}

.filterButtons {
  margin: 0px 0px 10px 10px;
}
.higherValue {
  color: green;
}
.lowerValue {
  color: red;
}

li.has-treeview.nav-item>a:after {
    content: "➧";
    color: #fff;
    float: right;
    transform: rotate(-180deg);
    position: absolute;
    right: 0.5em;
    transition: 0.4s all;
}

li.nav-item.has-treeview.menu-open>a:after {
    transform: rotate(-270deg);
}

.reportingButtons {
  padding: 0 10px 10px 10px;
}
.reportingButtons .toggle-vis {
  margin-right: 5px;
}

.casaTd {
  background-color: rgba(0, 60, 255, 0.15);
}

.deliveryicons > .box {
    background: #eee;
    padding: .5em;
    border-radius: 5px;
    border: .5em solid #fff;
}

.deliveryicons > .box > i.fa {
    position: absolute;
    right: 1em;
    top: 1em;
    color: #ccc;
    transform: scale(1.5);
}

#modal-trackorder .superload.inner {
  display:inline-block;position:relative;left:0;min-width:100%;padding:0 0 2em 0;
}

#pwInfo, #confirmPWInfo {
  font-size: 0.8rem;
}
#confirmPWInfo {
  display: none;
  color: red;
}

.catalogButton {
  margin: 10px 10px !important;
}
.catalogImg {
  margin: 10px 10px 0px 10px;
}

.focusRow {
  box-shadow:inset 0 0 1px 2px #36f
}

.catalogLink {
  display: block !important;
  margin: auto;
  width: 220px;
}

@media only screen and (min-width: 992px) {
  .bottomAlign > * {
    position: absolute;
    bottom: 0;
  }
}

.btn-three-splits {
  margin-left: 10px;
}

.customH {
  margin-left: 10px;
  font-weight: bold;
}


/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('/_css/loading.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}