/*
 * HTML5 sortable
 */
.sortable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sortable li {
  list-style: none;
  border: 1px solid #CCC;
  background: #F6F6F6;
  color: #1C94C4;
  margin: 5px;
  padding: 5px;
}

.handle {
  cursor: move;
}

/*************************

   screen.css modifications

*************************/
table tr td input.radio.no-margin {
    margin: 0px;
}
td.xcol1, th.xcol1 { width: 10px; }

/*************************

   jQuery modifications

*************************/
ul.ui-autocomplete li {
  padding: 5px;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px 0.4em;
    line-height: 1.5;
    zoom: 1;
    font-weight: normal;
}

a.ui-icon {
  display: inline-block !important;
}

.ui-icon {
  display: inline-block;
}

a.awesome {
    color: #337ab7;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

#header {
  background: #FFF url(../img/bmw_ngi_header.jpg) no-repeat bottom left !important;
}

#content ul.unstyled {
    padding-left: 0;
}

ul.unstyled>li {
  list-style: none;
  margin: 0 !important;
  padding: 2px !important;
}


/*************************

   jQuery ui autocomplete

*************************/
.autocomplete-activity.ui-autocomplete-loading {
  background: white url('../img/activity_basic_16x16.gif') right center no-repeat;
}

.ui-autocomplete {
  max-height: 250px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
}

/***
  progress bar
***/
.progressBar {
  width: 100%;
  background-color: grey;
  height: 4px;
}
.myProgress {
  background-color: #4CAF50;
  height: inherit;
}

.myProgressRed {
  background-color: #ff0000;
  height: inherit;
}

/*************************

   #qmt

*************************/
.popup_content {
  margin: 10px;
  padding: 5px 10px;
  max-width: 95%;
  border: 2px solid #444;
  background: #e6e6e6;
}

.qmt-value-ok {
  color: green;
  text-decoration: none;
}
.qmt-value-notok {
  color: orange;
  text-decoration: none;
}
.qmt-value-reimported {
  color: orange;
  text-decoration: none;
  cursor: pointer;
}
.qmt-value-productionerror {
  text-decoration: line-through;
  color: red;
  text-decoration: none;
}

/*************************

   #waitingbar

*************************/
#waitingbar {
  position: fixed;
  top: 0%;
  background-color: #666666;
  z-index: 1110;
  overflow: hidden;
  filter:alpha(opacity=80);
  opacity:0.8;
  -moz-opacity:0.8;
}
#waitingActivity {
  padding: 17px 0px 0px 10px;
  float:left;
}
#waitingMessage {
  padding: 20px 10px 10px 0px;
  color: #FFFFFF;
  font-weight:bold;
  font-family: Arial, Helvetica, sans-serif;
  padding: 20px 15px 20px 55px;
}
#waitingbarShadow {
  position:absolute;
  z-index:1109;
  display:none;
  filter:alpha(opacity=40);
  opacity:0.4;
  -moz-opacity:0.4;
  background-color:#CCCCCC;
}

/***
acea
***/
.aceaBlock-LTS_SEQUENCE_VG {
  color: olive;
}

.aceaBlock-VALVETRAIN_WEAR {
  color: green;
}

.aceaBlock-VW_TDI {
  color: orange;
}

.aceaBlock-ENGINE_SLUDGE {
  color: maroon;
}

/*************************

   forms

*************************/
input.verysmall { width: 12px; w\idth: 10px; }
div.container-box input.button, div.container-box>button {
  margin-left: 6px;
}

input.smallbutton, button.smallbutton {
  background: url(../img/form_button_114.png) no-repeat;
  width: 70px;
  padding: 0 4px 3px 4px;
}

input.bigbutton, button.bigbutton {
  background: url(../img/form_button_150.png) no-repeat;
  width: 150px;
  padding: 0 4px 3px 4px;
}

input.biggerbutton, button.biggerbutton {
  background: url(../img/form_button_175.png) no-repeat;
  width: 175px;
  padding: 0 4px 3px 4px;
}

input.biggestbutton, button.biggestbutton {
  background: url(../img/form_button_200.png) no-repeat;
  width: 200px;
  padding: 0 4px 3px 4px;
}

input.evenbiggerbutton, button.evenbiggerbutton {
  background: url(../img/form_button_225.png) no-repeat;
  width: 225px;
  padding: 0 4px 3px 4px;
}

input.date_picker {
  background-image: url("../img/form_calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
}

input.upload {
  width: 100%;
}

select[multiple] {
  height: auto !important;
}

table.data td.header-bottom {
  background-color: transparent;
  border-top: 1px solid #666;
  font-weight: bold;
  padding: 2px 6px;
  text-align: left;
}

.width100 {
  width: 100%;
}

tr.padd td {
  padding-left: 18px !important;
  line-height: 20px !important;
}

tr.padd td input {
  margin-left: 2px !important
}

tr.lineHeight td {
  line-height: 20px !important;
}

div.container-box p {
  padding: 3px 6px;
}

div.container p {
  padding: 3px 6px;
}

/*************************

   GLOBAL MESSAGES, ERRORS

*************************/
div#errorMessages {
  display: none;
  z-index: 2000;
  width: 400px;
  padding: 8px;
  background: red;
  color: #FFFFFF;
}

div#resultMessages {
  display: none;
  z-index: 2000;
  width: 400px;
  padding: 8px;
  background: green;
  color: #FFFFFF;
}

#resultMessages, #errorMessages {
  background-color: #00ab1c !important;
  -webkit-box-shadow: 1px 1px 5px 0px !important;
  -moz-box-shadow: 1px 1px 5px 0px !important;
  margin: 0 auto;
  box-shadow: 1px 1px 5px 0px;
  padding: 14px 21px 0 21px;
  position: fixed;
  top: 0;
  width: 400px !important;
  width: 428px;
}

#errorMessages {
  background-color: #c82127 !important;
  padding: 14px 21px 35px 21px;
}

#resultMessages>ul, #errorMessages>ul {
  margin: 0;
  padding: 0;
}

#resultMessages>ul>li, #errorMessages>ul>li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 14px 22px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  background: url('../img/green_check.png') no-repeat left top !important;
}

#resultMessages>ul>li *, #errorMessages>ul>li * {
  color: #ffffff !important;
}

#errorMessages>ul>li {
  background: url('../img/red_x.png') no-repeat left top !important;
}

#resultMessages button, #errorMessages button {
  border: 0;
  background-color: white;
  color: black;
  font-weight: bold;
  float: right;
  font-size: 11px;
  padding: 4px 7px;
  cursor: pointer;
  background-image: none;
  width: 85px;
}

#paymentDiv {
  z-index: 2000;
}

iframe {
  z-index: 2000;
}

#errorBackground {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  z-index: 1999;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity = 50);
}

/*************************

   workflow steps

*************************/
ul#workflowSteps {
  padding: 0;
  height: 40px;
  border: 0;
  border-bottom: 1px solid #999999;
  border-top: 1px solid #999999;
  width: 100%;
  margin-bottom: 20px;
}

ul#workflowSteps>li {
  list-style: none;
  display: block;
  float: left;
  padding: 0;
  height: 40px;
  overflow: hidden;
  border-right: 1px solid #999999;
  position: relative;
}

ul#workflowSteps>li.four {
  width: 200px;
}

ul#workflowSteps>li.five {
  width: 159px;
}

ul#workflowSteps>li.active {
  background-color: #ededed;
}

ul#workflowSteps>li.last {
  border-right: none;
}

ul#workflowSteps>li.done {
  background-color: #fafafa;
}

ul#workflowSteps>li>a.info {
  position: absolute;
  top: 7px;
  right: 7px;
  height: 13px;
}

ul#workflowSteps>li>div {
  margin-left: 10px;
  margin-top: 8px;
}

ul#workflowSteps>li .number {
  display: block;
  height: 22px;
  width: 22px;
  border: 1px solid #999999;
  color: #999999;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
  float: left;
  text-decoration: none;
}

ul#workflowSteps>li.active .number {
  background: #868686;
  background: -moz-linear-gradient(top, #868686 0%, #575757 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #868686), color-stop(100%, #575757));
  background: -webkit-linear-gradient(top, #868686 0%, #575757 100%);
  background: -o-linear-gradient(top, #868686 0%, #575757 100%);
  background: -ms-linear-gradient(top, #868686 0%, #575757 100%);
  background: linear-gradient(top, #868686 0%, #575757 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#868686', endColorstr='#575757', GradientType=0);
  color: #ffffff;
}

ul#workflowSteps>li div.text {
  float: left;
  font-size: 12px;
  line-height: 22px;
  margin-left: 7px;
  color: #999999;
  padding-top: 1px;
}

ul#workflowSteps>li div.text strong {
  color: #999999;
}

div.floatNone {
  float: none !important;
}

/*************************

   TABLESORTER

*************************/
table.tablesorter thead tr .header {
  background-image: url(../img/bg.gif);
  background-repeat: no-repeat;
  background-position: left center;
  cursor: pointer;
}

table.tablesorter thead tr .right.header {
  background-image: url(../img/bg.gif);
  background-repeat: no-repeat;
  background-position: right center;
  cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
  background-image: url(../img/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
  background-image: url(../img/desc.gif);
}

table.tablesorter th.sortable {
  padding-left: 22px !important;
}

table.tablesorter th.right.sortable {
  padding-right: 22px !important;
}

/*************************

   workflow progress bar

*************************/
ol.progtrckr {
  margin: 6px 6px;
  padding: 0;
  list-style-type: none;
}

ol.progtrckr li {
  display: block;
  text-align: center;
  float: left;
  height: 3em;
  margin-bottom: 26px !important;
  position: relative;
}

ol.progtrckr li div {
  width: 100%;
  display: block;
  text-align: center;
}

ol.progtrckr li div.completionDate {
  position: absolute;
  bottom: -2em;
}

ol.progtrckr[data-progtrckr-steps="2"] li {
  width: 20%;
}

ol.progtrckr[data-progtrckr-steps="3"] li {
  width: 20%;
}

ol.progtrckr[data-progtrckr-steps="4"] li {
  width: 20%;
}

ol.progtrckr[data-progtrckr-steps="5"] li {
  width: 19%;
}

ol.progtrckr[data-progtrckr-steps="6"] li {
  width: 16%;
}

ol.progtrckr[data-progtrckr-steps="7"] li {
  width: 14%;
}

ol.progtrckr[data-progtrckr-steps="8"] li {
  width: 12%;
}

ol.progtrckr[data-progtrckr-steps="9"] li {
  width: 11.11%;
}

ol.progtrckr[data-progtrckr-steps="10"] li {
  width: 10%;
}

ol.progtrckr li.progtrckr-done {
  color: black;
  border-bottom: 4px solid blue;
}

ol.progtrckr li.progtrckr-done.rejected {
  border-bottom: 4px solid red;
}

ol.progtrckr li.progtrckr-todo {
  color: silver;
  border-bottom: 4px solid silver;
}

ol.progtrckr li:after {
  content: "\00a0\00a0";
}

ol.progtrckr li:before {
  position: relative;
  bottom: -2.5em;
  float: left;
  left: 50%;
  line-height: 1em;
}

ol.progtrckr li.progtrckr-done:before {
  content: "\2713";
  color: white;
  background-color: blue;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  border: none;
  border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-done.rejected:before {
  background-color: red;
}

ol.progtrckr li.progtrckr-todo:before {
  content: "\039F";
  color: silver;
  background-color: white;
  font-size: 1.5em;
  bottom: -1.6em;
}

ol.progtrckr li.progtrckr-todo div {
  color: silver;
}

ol.progtrckr+div {
  clear: both;
}

/*************************

   others

*************************/
.oilChildren {
  color: orange;
  font-weight: bold;
}

.oilParent {
  color: green;
  font-weight: bold;
}

div.halfspace {
  font-size: 0;
}

.spinner {
  background: url("../img/ui-anim_basic_16x16.gif") no-repeat !important;
}

td label {
    text-align: right;
    clear: both;
    float:left;
    margin-right:2px;
    margin-top:5px;
}

button.right, input.right, a.right {
  float: right !important;
}

.highlight {
  font-weight: bold;
}

.bold {
    font-weight: bold;
}

.ui-icon.editElement, .ui-icon.readElement {
  font-size: 75%;
  cursor: pointer;
}
.errorTooltip {
  padding: 2px !important;
  box-shadow: none !important;
  border-color: #cc3333 !important;
  border-width: 1px !important;
  color: #cc3333 !important;
}

.helpTooltip {
  padding: 4px !important;
  box-shadow: none !important;
  border-width: 1px !important;
}

.error {
  color: #cc3333;
}

.readonly {
  background-image: none !important;
  background-color: #F2F2F2 !important;
}

.hidden {
  display: none;
}

.watermarkColor {
  color: #999999;
}

.limitField {
  width: 35px;
}

#content div.notAvailableBlock {
  background-color: WhiteSmoke;
  opacity:0.6;
  -moz-opacity:0.6;
  filter: alpha(opacity=60);
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.noieHint {
  color: #ff8000;
  font-weight: bold;
}

.green {
  color: green;
}

.grey {
  color: grey;
}

.smallText {
  font-size: small;
}

/*************************

 customizing styles from screen.css

*************************/
#content div.tabcontainer ul.tabs li {
  border: none;
}

div.container-content ul.list {
  margin-top: 5px;
}

div.container-content form.noMargin {
  margin-bottom: 0px;
}

button:disabled {
  background-position: 0 -42px;
}

div.half {
  width: 393px;
}

div.half {
  float: left;
  display: inline;
  overflow: hidden;
}

div.half.right {
  float: right;
}

div.red {
  color: red;
}

div.clear {
  clear: both;
}

input.limitViolation {
  border-color: red;
}

#switchedModeOn, #switchedModeOn a {
  color: #f00000 !important;
  font-weight:bold;
}

/*************************

 customizing jquery ui styles

*************************/
.ui-widget-header {
  border: 0px;
  background: none;
  margin-left: .5em;
}

/* taken from https://stackoverflow.com/questions/32233489/does-bootstrap-have-builtin-padding-and-margin-classes */
/* such spacings will be availble in v4 (see https://v4-alpha.getbootstrap.com/utilities/spacing/) */
.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }