body *{ font-family: "Open Sans", Arial, sans-serif}
p.hidden, span.hidden, h2.hidden, h3.hidden, h4.hidden, h5.hidden, div.hidden {display:none;}

h3.subtitle {margin-top: 3em!important;padding: 0.5em 0 0.5em 2em; background-color: #cccccc; font-size: 100%!important; text-decoration: underline; }

html {
  --scrollbarBG: #E6E6E6;
  --thumbBG: #969696;
}
body::-webkit-scrollbar {
  width: 18px;
}
body {
  scrollbar-width: 3px;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 12px;
  border: 3px solid var(--scrollbarBG);
}

a.i-info{color: white!important;}
/*********************
 ***  Header && Footer
 *********************/
.header-container {/*border-bottom: solid 1px #949494;*/  box-shadow: 1px 4px 14px 1px #909090fa}
.header-container, .footer-container {max-height: 12em; background-color: #e6e6e6; padding:2em 0.8em; /*border-bottom: 0.2em solid #cecece;*/}
.header-container img.logo {width: 3.5em; margin-left: 7.5%;}
.header-container .menu.top-menu { margin-top: 0.5em;}
.header-container .menu.top-menu li {margin-left: .1em;}
@media screen and (max-width: 1366px) and (min-width: 641px){
  .header-container .menu.top-menu li a { font-size: 90%; margin-left: .1em; padding: .7em;}
}
@media screen and  (max-width: 641px){
  .header-container .menu.top-menu {width: 100%;}
  .header-container .menu.top-menu li  { width: 45%; margin-bottom: .1em;}
  .header-container .menu.top-menu li a {width: 100%;  font-size: 70%;}
}
.footer-container { margin-top: 3em;}

.header-container.with-tbsoft-logo {padding: 0  0 1.2em 0;}
.header-container.with-tbsoft-logo .profile-nav { height: 0.1em;}
.header-container.with-tbsoft-logo .profile-nav ul.menu {z-index: 50;}
.header-container.with-tbsoft-logo .profile-nav ul.menu li { min-width: 12em; margin-bottom: 1px; margin-right: 2em; background-color: #656565; font-weight: bold;  font-size: 11px; -webkit-transform: skew(-29deg, 0deg); -ms-transform: skew(-29deg, 0deg); transform: skew(-29deg, 0deg);}   
.header-container.with-tbsoft-logo .profile-nav ul.menu li a { display: inline-block; width: 100%; color: white; text-align: center; text-transform: uppercase; -webkit-transform: skew(29deg, 0deg); -ms-transform: skew(29deg, 0deg); transform: skew(29deg, 0deg);}
.header-container.with-tbsoft-logo img.logo.tbsoft-logo {float: right;display: block; width: 15%; min-width: 50px; margin-top: 2.5em;  margin-right: 0.5em;}



.header-container span.username {display: block; margin: auto; text-align: center; background-color: white; border: solid thin grey;}
.header-container i.fi-torso:before {height: 1.2em; width: 1.2em; margin-left: 1.75%; margin-bottom: 0.1em; padding: 0.05em 0.2em 0.2em 0.25em; font-size: 3em; border: solid thin; border-radius: 15em; background-color: white; cursor: pointer;}
.header-container i.fi-torso {display: block; width: 3.7em; height: 3.7em; margin: auto; color: grey;}
.header-container ul.account {display: none; position: relative; z-index: 5; margin: auto; margin-top: 0.2em;}
.header-container ul.account li {padding: 0; width: 100%; list-style: none; text-align: center; background-color: #ffffff; border: solid thin black;}
.header-container ul.account li.main { color: gainsboro; background-color: #4c4c4c!important;}
.header-container ul.account li a {display: block; width: 100%; color: grey; padding: 0.2em;}
.header-container ul.account li a:hover {background-color: #14679e; color: white;}

.header-container .navigation-container i.fi-x {display: none;}
/*.header-container .navigation-container li {width: 90%;}*/
.header-container .navigation-container li a,
.header-container .navigation-container li a:hover {height: 2.2em; padding: 0.5em 3em; margin-left: 1em; color: white; font-size: 16px; line-height: 1.2; background-color: #7324b0;}
.header-container .navigation-container li a.active {font-weight: bold;}

.header-container .navigation-container .menu.responsive { margin-top: 1em;}
.header-container .navigation-container .menu.responsive li a,
.header-container .navigation-container .menu.responsive li a:hover {background-color: #656565;}

.header-container p.application-title {display: block; float: right; margin-top: 1em; margin-right: 1em; font-weight: bold;}
.header-container p.application-title span.company-name {display: inline-block; width: 100%; text-align: center; color: dimgrey; font-style: oblique;}
.header-container p.application-title a, .header-container p.application-title a:hover {color: #414141;}

.header-container i.fi-list {display: none; float: none; clear: both; font-size: 2em; color: #656565;}

.header-container ul.menu.secondary-nav.responsive {border-top: solid thin black; float: none; clear: both; margin-top: 0.5em; padding-top: 0.5em;}
.header-container ul.menu.secondary-nav.responsive:before {content: attr(title); display: block; width: 100%; font-size: 15px; font-weight: 600;}
.header-container ul.menu.secondary-nav.responsive li { float:none; clear: both;}
.header-container ul.menu.secondary-nav.responsive li a {background-color: #4c4c4c;}
.header-container ul.menu.secondary-nav.responsive li a.active {background-color: #33a4bd;}

 /* Powered by Info */
.header-container p.powered-by { font-size: 0.85em; font-style: italic;  color: gray;}
.header-container p.powered-by span {display: block;  margin-left: 5em;}
.header-container p.powered-by span.powered-by-txt {margin-top: -5em;}
.header-container p.powered-by span.company {  font-weight: bold; margin-top: -1em;}
.header-container p.powered-by img {width: 4em; }

.header-container .set-fixed  p.powered-by { padding: 0.2em;  }
/*********************
 ***  Scrolled Header
 *********************/
.header-container .set-fixed, .inner-header .set-fixed {position: fixed; z-index: 21;}
.header-container .set-fixed {top: 0; left: 0; z-index: 22; width: 100%; height: 5em;/* padding: 0.5em; */background-color: #e6e6e6; /*border-bottom: solid 1px #949494;*/ box-shadow: 1px 4px 22px 1px #d8d8d8;}
/*.header-container .set-fixed:not(.no-boxshadow) { margin-top: 2.6em;}*/
.inner-header.sc-mod {min-height: 20em;}
.inner-header .set-fixed {left: 0; top: 4em; width: 100%; background-color: #e6e6e6; /*border-bottom: solid 1px #949494;*/ box-shadow: 1px 4px 14px 1px #909090fa}
.inner-header .set-fixed div.cell {width: 50%; margin: auto;}
.inner-header .set-fixed div.cell h3 {display: none;} 
.inner-header .set-fixed div.cell .calendar-container > div {margin: 0;}
.inner-header .set-fixed div.cell .calendar-container input {width: 75%; font-size: 12px; height: 2em;}
.inner-header .set-fixed div.cell .calendar-container .date-picker.till:before {font-size: 1.5em; line-height: 0.5;}
.inner-header .set-fixed div.cell .calendar-container .date-picker.till input { float: right;}

.inner-header .set-fixed .button-group a {height: 5px; line-height: 0.2; font-size: 13px;}
.main.factory .inner-header .set-fixed h1 {display: none;}
.main.factory .inner-header .set-fixed .factory-name {font-size: 16px; margin-bottom: 1em;}
.inner-header .set-fixed .btn-back::before {font-size: 2.5em;}
.header-container .set-fixed i.fi-torso {display: block; width: 2.5em; height: 2.5em;}
.header-container .set-fixed i.fi-torso:before {width: 1.2em; height: 1.2em; margin-left: -15%; font-size: 2em;}
.header-container .set-fixed ul.account {top:0;}
.header-container .application-container {margin-top: 0.25em;}
@media screen and (max-width: 1366px) and (min-width: 641px){
  .header-container .navigation-container .top-bar {padding: 2.3em 0 0 0; }
  .header-container .navigation-container .top-bar li a { font-size: 80%;}
}

@media screen and (max-width: 1023px) {
  .header-container .navigation-container .top-bar {padding: 2.3em 0 0 0; }
  .header-container {/* max-height: 7.5em; */ padding-top: 1em;}

  .header-container img.logo {margin-left: 2.5%;}
  .header-container p.application-title {font-size: 14px; margin-top: 1.35em; margin-right: 45%;}
  .header-container .application-container i.fi-list {display: inline; position: relative; top: 0.25em; left: 0.2em;}
  .header-container .navigation-container { position: fixed; top: 0; left: -100%; z-index: 11; background-color: rgba(245, 245, 245, 0.78); width: 100%; height: 100%;}
  .header-container .navigation-container i.fi-x {display: block; position: absolute; right: 15%; top: 2em; z-index: 1; padding: 0.3em 0.47em; border: solid thin #656565;
    border-radius: 2em; background-color: #656565; font-size: 20px; font-weight: 100; color: white}
  
  .header-container .navigation-container .top-bar {position: absolute; top: 0; height: 100%; width: 90%; padding: 0; border-right: solid 2px rgba(128, 128, 128, 0.65); overflow-y: auto;}
  .header-container .navigation-container .top-bar .top-bar-left { position: absolute;  top: 3%; left: 2%;}
  .header-container .navigation-container .top-bar .top-bar-left li {width: 80%; margin-top: 0.25em;}
  .header-container .navigation-container .top-bar .top-bar-left li a {font-size: 13px; text-align: left;}
  .header-container span.username {width: 100%; padding: 0.2em; font-size: 10px;}
  .header-container i.fi-torso {display: block; width: 2.5em; height: 2.5em;}
  
  .header-container i.fi-torso:before {width: 1.25em; height: 1.25em; font-size: 2em;}
}
@media screen and (max-width: 640px) {
  .header-container p.application-title {margin: 0;}
  .main.factory .inner-header .set-fixed .factory-name{margin-top: 2.7em;}
  .header-container p.application-title {width: 70%; margin-right: 1em;}
  .main.factory .inner-header .set-fixed .factory-name {margin-bottom: 3em;}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
   .header-container .set-fixed i.fi-torso, .header-container .set-fixed i.fi-torso:before {font-size: 0.6em; /*display: block!important;height: 45px; width: 10px;*/}
   .header-container .set-fixed span.username {margin-top: 1.1em;}
}
/*********************
 ***  Breadcrumbs
 *********************/
.factory .breadcrumbs {margin-top: 1rem;}

/*********************
 ***  Login Mask
 ***    Reset Password
 ***    && other security issues
 *********************/
.main.reset-password h1 { padding-bottom: 2em;}

.login-mask .form-container {margin-top: 3em; padding: 2em; border-radius: 2em; background-color: #e6e6e6; }
.login-mask .request-link-container {margin-top: 6em; clear: both; float: none;}
.login-mask .request-link-container a {font-weight: bold; font-size: 0.9em;}


/*********************
 ***  Factory Navigation
 *********************/
.nav-factories {background-color: #c1c1c1; color: white; font-weight: bold;}
.nav-factories .nav-header {min-height: 7em; background-color: #656565; text-align: center}
.nav-factories .nav-header p {margin-bottom: 0; padding-left: 4.5%; font-size: 25px;}
.nav-factories .nav-header .search-container {padding: 0.5em;}
.nav-factories .nav-header .search-container i.search-factories {margin: 0 -1.2em;; padding: 0 1em;}
.nav-factories .nav-header .search-container i.search-factories:hover{cursor: pointer;}
.nav-factories .nav-header .search-container input.factory-search {float: left; width: 0; margin: 0; padding: 0; border: none;}
.nav-factories .nav-header .search-container span.not-found { display: block; clear: both; float: none; padding: 1em; text-align: left; font-size: 0.7em; font-weight: 100;}

.nav-factories .nav-header i.fi-list::before{ display: block; float: left; margin-left: 1em; margin-top: 0.35em;}
.nav-factories .nav-header i.fi-list:hover {cursor: pointer;}
.nav-factories ul {clear: both; float: none;}
.nav-factories li { border: solid thin white; list-style: none; text-align: center}
.nav-factories li p {margin-bottom: 0;}
.nav-factories li span.name {font-size: 12px; line-height: 2.5;}
.nav-factories li a.factory-nav-anchor { display:block; color: #4c4c4c;}
.nav-factories li a.factory-nav-anchor span.name {display: inline-block; padding-top: 0.5em; font-size: 16px; }
.nav-factories li .factory-details {display: none;}

.main.factory p.empty-data {padding: 2em; text-align: center;}
/*
  Factory Settings
*/
.nav-factories a.factory-options.fi-widget {color: black; font-size: 1.3em;}
.alertifyjs-headline span {font-size: 80%; color: grey;}
@media screen and (max-width: 1023px) {
  .nav-factory-container {margin-top: 3em;}
}
/*********************
 ***  Main Container
 *********************/
.grid-x.main {padding: 1em 2.5em; max-width: 105em; margin: auto; padding-bottom: 10em;}
.main h1 {text-align: center; font-size: 22px; font-weight: 600; padding: 0.5em 0 0 0;}
.main.user-management h1 {margin-bottom: 2em;}
.main.factory h1 {padding: 0.75em;  font-size: 24px; }
.main h1:after {position: relative; bottom: 8px; content: '_________'; display: block;  line-height: 0.1;  font-weight: 900;}
.main h1 ~ h2 {font-size: 120%; font-weight: 600; text-align: center; margin-top: 1em;}
.main .breadcrumbs a {color: grey; font-size: 1.2em;}
.main ul.menu.align-right {margin-bottom: 2em;}

form {margin-top: 2em;}
form label {font-weight: bold;}
form a.button {width: 98%; margin-left: 2%;}
form button.button { width: 35%; float: right;} 

form input.error,
form select.error,
form input.error:focus,
form select.error:focus { border-color: #de2323; border-width: 2px;}
form input.error:focus,
form select.error:focus {box-shadow: 1px 2px 10px 1px #d69292;}

form p.error,
.main .flash-notice p.error,
p.error {padding: 0.3em 1em; background-color: #ff7070; color: white!important;}

p.error {padding: 1em;}
p.error a {font-weight: bold; color: #0c00bd; text-decoration: underline;}
p.warning { color: rgb(169, 2, 2); font-size: 110%; font-weight: bold;}

form input.success,
form select.success,
form input.success:focus,
form select.success:focus {border-color: #77bf77; border-width: 2px;}
form input.success:focus,
form select.success:focus {box-shadow: 1px 2px 10px 1px #b1c7b1;}

.main .flash-notice p.success,
form p.success,
p.success {margin-top: 1em; padding: 0.25em 1em; color: white; background-color: #77bf77;}

p.success {padding: 1em;}
p.success a {font-weight: bold; color: #0c00bd; text-decoration: underline;}


.main form select { color: black;}
.main form select option { color: black!important;}
.main form select option[value=""] { color: grey!important;}

.main.factory .menu.secondary-nav { margin-bottom: 2em;}
.main.factory .menu.secondary-nav li {margin-right: 0.5em;}
.main.factory .menu.secondary-nav li a {min-width: 8em; background-color: #4c4c4c;}
.main.factory .menu.secondary-nav li a.active {background-color: #33a4bd;}
.no-boxshadow {box-shadow: none!important;}
@media screen and (max-width: 640px) {
  .grid-x.main {padding-bottom: 20em;}
}
/*********************
 ***  Breadcrumbs
 *********************/
.breadcrumbs li.disabled a:hover {text-decoration: none; cursor: pointer;}
/*********************
 ***  Factory Container
 *********************/
.nav-factories.active-factory {display: none;}
.factory-container {display: none; min-height: 30em;}
.factory-container.active-factory {display: block;}
.factory-container .btn-back { position: absolute; left: 8.5%; display: block; height: 3rem; width: 7rem;}
.factory-container .btn-back::before {font-size: 3.5em; font-weight: 100; color: #989898;}
.factory-container .set-fixed .btn-back {margin-top: 2.5em;}
.factory-container h2 {font-size: 1.75em;}
.factory-container h2.factory-name {text-align: center; }
.factory-container h3 { font-size: 1.2em; margin-top: 1em;}
.factory-container .menu li { margin-right: 2em;}
.factory-container .button-group .button {font-size: 0.79em; padding: 1em;}
.factory-container table thead th {padding: 0.4em; font-size: 0.9em; text-align: center;}
.factory-container table td {padding: 0.8em; font-size: 0.8em;}
.factory-container .calendar-container input { font-size: 0.8em; height: 2.3em;}

.factory-container .cell.inner-container { margin-top: 3em; }

.factory-container .order-container table p {line-height: 1.5;}
.factory-container .order-container table .details {display: none;}
.factory-container .order-container tbody tr:first-of-type td {width: 50%;}
.factory-container .order-container .order-more-con {display: none; clear: both; float: none;}
.factory-container .order-container .details-container ul {font-size: 1em;}
.factory-container .order-container .details-container ul li {list-style: none; padding: 1px;}
.factory-container .order-container .details-container ul li:before {content: '>'; display: inline-block; margin-right: 1em; font-size: 1.3em; font-weight: bold; line-height: 1.2;}
.factory-container .order-container .order-more-con h3 {display: inline-block; margin-left: 2.3em; font-size: 1.2em; font-weight: bold; }
.factory-container .order-container .button {font-size: 1em;}

/****************************
 ** category-selector && category-container
 ****************************/
 .factory-container .tb-category-seperator ul {clear: both;}
 .factory-container .tb-category-seperator li {  font-style: italic;}
 .factory-container .tb-category-seperator li label { position: relative; bottom: 0.1em; display: inline-block; margin-left: 1em; padding-bottom: 2.2em;   font-weight: bold; }
 .factory-container .tb-category-seperator li span.move-to { cursor:pointer; position: relative; display: inline-block;left: -.5em; top: .65em; width: 2em; height: 2em; border: solid thin gray; border-radius: 2em;}
 .factory-container .tb-category-seperator li#li-item-rohmaterial span, .factory-container .tb-category-seperator li#li-item-rohmaterial-andere span {background-color: #f1d48375;}
 .factory-container .tb-category-seperator li#li-item-mischgut span {background-color: #8098b76b;}

 .factory-container .category-box { clear: both; border: solid 2px #bdbdbd; padding: 0.25%; width: 101%; /* border-radius: 1em; */background-color: #eaeaea30;}
 .factory-container .category-box.rohmaterial, .factory-container .category-box.rohmaterial-andere  { background-color: #f1d48375;}
 .factory-container .category-box.mischgut {margin-top: 1em; background-color: #8098b76b;}
/****************************
 ** Status update, added, removed
 ****************************/
 .factory-container .status-update, .factory-container .status-added, .factory-container .status-add {    border: solid thin green; background-color: #b8e0b8; pointer-events: none;}
 .factory-container .status-update:not(tr):before, .factory-container .status-added:not(tr):before , .factory-container .status-add:not(tr):before,
 .factory-container tr.status-update td:last-of-type:before, .factory-container tr.status-added td:last-of-type:before , .factory-container tr.status-add td:last-of-type:before {
  content: '✓'; 
  float: right;
  background: white;
  padding: 1.2em;
  border: solid thin gray;
  color: green;
  cursor: pointer;
  pointer-events: all;
}

 .factory-container .status-delete, .factory-container .status-removed {    border: solid thin #bf00008f; background-color: #ff6e6eab; pointer-events: none;}
 .factory-container .status-delete:not(tr):before, .factory-container .status-removed:not(tr):before , .factory-container .status-removed:not(tr):before,
 .factory-container tr.status-delete td:last-of-type:before, .factory-container tr.status-removed td:last-of-type:before , .factory-container tr.status-removed td:last-of-type:before {
  content: '✗'; 
  float: right;
  background: white;
  padding: 1.2em;
  border: solid thin gray;
  color: #bf00008f;
  font-weight: bold;
  cursor: pointer;
  pointer-events: all;
}

/****************************
 ** App Control
 ****************************/
 .app-control ul.corporation-list li, .app-control ul.factory-list li {margin-top: 0.5em; padding: 0.3em 2em; background-color: #8852b1; border: solid 2px  #8852b1; font-weight: bold;  color:white;}
 .app-control ul.corporation-list li .restriction-action, .app-control ul.factory-list li .restriction-action{ cursor: pointer; display:inline-block; height: 2em; width: 2em; padding: 0.5em 0.2em; text-align: center; color: white; border-radius: 2em;}
 .app-control ul.corporation-list li .restricted, .app-control ul.factory-list li .restricted{background-color: #bf00008f;}
 .app-control ul.corporation-list li .non-restricted, .app-control ul.factory-list li .non-restricted{background-color: green;} 
 .app-control .corporation-block .fa-selector {color: gray; background-color: white;  border-radius: 2em;}

 .app-control .factory-block {padding-left: 1em;}


@media screen and (max-width: 640px) {
  .header-container img.logo {margin: 0;}
  .calendar-container .date-picker.till:before { position: relative!important; left: 50%; top:-.3em;}
  .inner-header .set-fixed div.cell {width: 80%;}
  .inner-header .set-fixed .button-group { margin-top: 0.2em;}
  .inner-header .set-fixed .button-group a {line-height: 1; height: 3.5em;}
  .inner-header .set-fixed div.cell .calendar-container .date-picker {margin: 0;}
  .inner-header .set-fixed div.cell .calendar-container .date-picker.till input {float: none;}
  .inner-header .set-fixed .calendar-container .date-picker.till:before {display: block; position: relative; right: 0; bottom: 0.15em; left: 35%!important; top: 0!important; margin: 0;}
  .inner-header .set-fixed .btn-back::before {font-size: 1.9em; margin-left: 0.5em;}
  
  .factory-container .set-fixed .btn-back {margin-top: 4em;}
  .main.factory .inner-header .factory-name {padding-left: 2.7em;}
  .main.factory .inner-header .set-fixed .factory-name {margin-top: 4.2em; margin-bottom: 1.5em; }
  .factory-container .order-container .s_orders .responsive-card-table tr:first-of-type td:not([colspan="2"]):after { width: 90%; }
  
}
@media screen and (max-width: 1023px) {
  .wrapper.visual-completeness {font-size: 4.5em;}
}

/*********************
 ***  ALERTIFY
 *********************/
.ajs-message.ajs-visible {padding: 2em; color: white; width: 20em;}

/*********************
 ***  table container
 *********************/
.table-container .date-info {margin-left: 1em; font-size: 1.3em; font-weight: bold; color: #3c3b48;}
.table-container table {table-layout: fixed; font-size: 90%;}
.table-container table th,
.table-container table td {border: 1px solid #d0d0d0; width: 100px; overflow: hidden;}

.table-container table tr.status-D,
.table-container table tr.status-G,
.table-container table tr.status-N,
.table-container table tr.status-S,
.table-container table tr.status-S-M,
.table-container table tr.status-U,
.table-container table tr.sum-line {color: white; text-shadow: 2px 2px black; font-weight: bold;}

.table-container table tr.status-D,
.table-container table tr.status-N,
.table-container table tr.status-S,
.table-container table tr.status-U {background-color: rgba(217,92,92,.95);}
.table-container table tr.status-G {background-color: #77bf77;}
/*.table-container table tr.status-S {background-color: #717171;}*/
.table-container table tr.status-S-M {background-color: #1392ff;}
/*.table-container table tr.status-S-M a:hover {cursor: default;}*/
.table-container table tr td[data-label="Status"] span.status-message,
.table-container table tr td[data-label="Status"] a.btn-cement-action { display: block; width: 2.25em; margin: auto; text-align: center;}
.table-container table tr td[data-label="Status"] a.btn-cement-action.txt-link { width: 100%; margin-top: 0.5em;}
.table-container table tr td[data-label="Status"] span.status-message { width: 100%; font-size: 1.5em; }
.table-container table tr td[data-label="Status"] a.btn-cement-action {color: white;}  
.table-container table tr td[data-label="Status"] a.btn-cement-action::before {font-size: 2em;}
/*.table-container table tr td.changed { border: 2px solid rgba(0, 0, 0, 0.28) !important; background-color: rgb(160, 160, 160);}*/
.table-container table tr.sum-line {background-color: #9a9a9a; }
.table-container table tr.sum-line span.right-side {float: right; display: inline-block; width: 50%; text-align: right;}

 /* vertical-align: sub;}*/
/*********************
 ***  Responsive Table(s)
 *********************/
.table-container {overflow-x:auto; margin-bottom: .2em;}
@media screen and (max-width: 640px) {
  .table-container.set-max-width {width: 310px;}
}
@media screen and (max-width: 1023px) {
  .table-container.set-max-width {width: 725px;}
}

/* old version */
.responsive-card-table {border-collapse: collapse;}
.responsive-card-table.unstriped tbody {background-color: transparent; }
.responsive-card-table th {background-color: #e6e6e6;}
.responsive-card-table tr,
.responsive-card-table th,
.responsive-card-table td {border: 1px solid #0a0a0a;}

@media screen and (max-width: 640px) {
  .responsive-card-table thead tr {position: absolute; top: -9999em; left: -9999em;}
  .responsive-card-table tr {border: 1px solid #0a0a0a; display: block;}
  .responsive-card-table tr + tr {margin-top: 1.5rem; }
  .responsive-card-table td:not([colspan="2"]) { border: none; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 1px solid #0a0a0a; padding-left: 50%; position: relative;}
  .responsive-card-table td:not([colspan="2"]):before {content: attr(data-label); display: inline-block; font-weight: bold; line-height: 1.5; width: 100%; position: absolute; left: 10px; z-index: 1;}
  .responsive-card-table td:not([colspan="2"]):after {content: ''; position: absolute; background: #e6e6e6; width: 45%; height: 95%; left: 1px; top: 1px; z-index: 0; }
}

/*********************
 ***  scroll to elem(s)
 *********************/    
.scroll-to-container .large {font-size: 2.5em; color: grey; }
.scroll-to-container .scroll-to {position: fixed; bottom: 0.25em; right: 0.5em; width: 1.2em; height: 1.2em; background-color: hsla(0, 2%, 75%, 0.70); border-radius: 7em; border: solid thin rgba(128, 128, 128, 0.475);}
.scroll-to-container .scroll-to:hover {cursor: pointer;}
.scroll-to-container .scroll-to:before {position: relative; bottom: 0.22em; left: 0.08em; width: 1em; color: #969696; text-align: center;}
@media screen and (max-width: 640px) {
  .scroll-to-container .scroll-to { right: 0.1em;}
}
/*******
 *  visual option for completeness
 *    -> see order details
 *******/
.wrapper.visual-completeness { float: right; }
.wrapper.visual-completeness.c100:hover > span { width: 4.42em; line-height: 4.52em; font-size: 0.222em; color: #307bbb;}
/*********************
 ***  Gantt Options
 *********************/
/*.fn-gantt .rightPanel {min-height: 27em;}*/
.fn-gantt-loader {position: fixed!important; display: none!important;}
.gantt-set-modification .fn-gantt .fn-content .header,
.gantt-set-modification .fn-gantt .fn-content .dataPanel,
.gantt-set-modification .fn-gantt .fn-content .dataPanel > .header > .row:not(.day) { width: 100%!important;}
.gantt-set-modification .fn-gantt .fn-content .leftPanel { width: 25%;}
.gantt-set-modification .fn-gantt .fn-content .bar {border: solid thin grey;}
.gantt-set-modification .fn-gantt .fn-content .dataPanel .after{content:''; display:block; width: 100%; position: relative; background-image: url(../plugins/jquery.gantt/img/grid.png);}
.gantt-set-modification .fn-gantt .bottom, .gantt-set-modification .fn-gantt .fn-label span.hidden { display: none;}

/* netronic version */
.gantt-info.netronic-version {margin-top: 4em;}
.gantt-info.netronic-version tspan.ntexthelper-wrapping-line { font-size: 9px;}
div.extra-message {display: none; position: absolute; z-index: 10; left: 33%; height: 5.5em; width: 33%; margin: auto; margin-top: 3em; padding: 0.5em; background-color: #6f6f75;  border: solid thin white; border-radius: 4em; color: white; text-align: center; font-size: 1.2em; box-shadow: 0.1em 0.1em 0em 0.05em #585858;
}}

/*********************
 ***  Tooltip(s)
 *********************/
a.i-info{color: white!important;}
a.i-info { float: left; display: inline-block; margin-top: 0.75em; margin-left: 2em; width: 1.5em; height: 1.5em; color: white; line-height: 1.3; text-align: center; font-weight: 600; border: white solid 2px; border-radius: 2em; background-color: #949191; }
a.i-info.user-roles, a.i-info.password {float: none;}

.i-information-tooltip { background-color: #949191; color: white; border: solid thin grey; border-radius: 0.5em;  padding: 1em; width: 30%;}
.nav-info-tooltip-container { background-color: white; color: black; border: solid thin black; padding: 1em; width: 30%;}
.ui-helper-hidden-accessible { display: none;}
.ui-tooltip-content .detail-title {font-weight: bold;}

@media screen and (max-width: 640px) {
  a.i-info { float: none; margin-left: 0em;}
  
  .nav-info-tooltip-container {width: 85%;}
  
}
/*********************
 ***  Datepicker
 *********************/
.calendar-container .date-picker.till:before {content: '-'; font-size: 2em; line-height: 1; position: absolute; right: 50%;}
.ui-datepicker {display: none; background-color: white; border: solid thin black;}
.ui-datepicker-header {height: 4em;background-color: grey; color: white; }
.ui-datepicker-header a {position: relative; top: 1.3em; color: white; padding: 0 1.5em}
.ui-datepicker-header a.ui-datepicker-next {float: right;}
.ui-datepicker-title {text-align: center;}
.ui-datepicker .ui-state-active {display: inline-block; background-color: #1779ba; color: white; width: 1.7em; height: 1.7em; padding: 0.2em;}
#ui-datepicker-div {top: 150px!important;}

/****************************
 *****  User Management
 ****************************/
.user-management.multiple-modules div.module-selection {display: none;}

/****************************
 *****  Error
 ****************************/
.main.error .text-center { margin-top: 2em;}

/****************************
 *****  Search Filers
 ****************************/
/*.tb-search-filter:hover, .tb-search-filter *:not(input):hover {cursor: pointer;}*/

.sc-mod  .tb-search-filter-container.set-fixed {
    position: fixed;
    right: 0;
    top: 5em;
    border: solid;
    background: white;
}

/****************************
 *****  BAG
 ****************************/
body[corporateidentity="bag"] .button:not(.secondary),
body[corporateidentity="bag"] .header-container .navigation-container li a.active,
body[corporateidentity="bag"] .header-container ul.menu.secondary-nav.responsive li a.active,
body[corporateidentity="bag"] .main .secondary-nav.corporations .button.active { background-color: #000080; }
body[corporateidentity="bag"] .header-container .navigation-container li a,
body[corporateidentity="bag"] .header-container ul.menu.secondary-nav.responsive li a,
body[corporateidentity="bag"] .main .secondary-nav.corporations .button {background-color: #99ADC2; }
/****************************
 *****  GFROERER
 ****************************/
body[corporateidentity="gfroerer"] header,
body[corporateidentity="gfroerer"] header .top-bar,
body[corporateidentity="gfroerer"] header .top-bar .top-bar-left ul{background-color: white;}
body[corporateidentity="gfroerer"] header .application-container img.logo { width: 7em;}

body[corporateidentity="gfroerer"] .header-container p.application-title { margin-top: 0;}
body[corporateidentity="gfroerer"] .header-container p.application-title span.company-name {color: #A7783E;}
body[corporateidentity="gfroerer"] .header-container .navigation-container .menu:not(.responsive) li:nth-of-type(1n) a {background-color: #A7783E;}
body[corporateidentity="gfroerer"] .header-container .navigation-container .menu:not(.responsive) li:nth-of-type(2n) a {background-color: #0152A4;}
body[corporateidentity="gfroerer"] .header-container .navigation-container .menu:not(.responsive) li:nth-of-type(3n) a {background-color: #00A550;}

body[corporateidentity="gfroerer"] .header-container .set-fixed,
body[corporateidentity="gfroerer"] .inner-header .set-fixed {background-color: white;}

body[corporateidentity="gfroerer"] .main h1 {padding-bottom: 0.2em; font-weight: 700; font-size: 35px; color: #A7783E;}
body[corporateidentity="gfroerer"] .main h2 {font-weight: bold; color: #656565;}
body[corporateidentity="gfroerer"] .main p {color: #949494;}
body[corporateidentity="gfroerer"] .main .button.secondary {background-color: #949494;}
body[corporateidentity="gfroerer"] .main .button {background-color: #0152A4;}
body[corporateidentity="gfroerer"] .main tbody tr:nth-child(even) {background-color: #e4e4e4;}
body[corporateidentity="gfroerer"] .nav-factories .nav-header {background-color: #28272D;}
body[corporateidentity="gfroerer"] .nav-factories .nav-header p {color: white;}

@media screen and (max-width: 1023px) {
  body[corporateidentity="gfroerer"] .header-container p.application-title span.company-name { width: 50%;}
  body[corporateidentity="gfroerer"] .header-container .application-container i.fi-list { top: inherit; bottom: 1.5em;}
  body[corporateidentity="gfroerer"] .header-container .application-container { position: relative; bottom: 1.25em; }
}

@media screen and (min-width: 641px) and (max-width: 1023px){

  body[corporateidentity="gfroerer"] .header-container p.application-title { float: none;}
  body[corporateidentity="gfroerer"] .header-container .application-container {margin-top: 0; position: relative; bottom: 1em;}
  body[corporateidentity="gfroerer"] header .application-container img.logo { margin-top: 1em;}
  body[corporateidentity="gfroerer"] .header-container .application-container i.fi-list {margin-left: 0.5em;}
}

@media screen and (max-width: 641px){
  body[corporateidentity="gfroerer"] .header-container .application-container i.fi-list { top: 0.25em; bottom: inherit;}
  body[corporateidentity="gfroerer"] .main h1 { font-size: 20px;}
}
/****************************
 *****  Valet und Ott
 ****************************/
body[corporateidentity="valet"] header .application-container img.logo {width: 13em; margin-top: 0.85em;}
body[corporateidentity="valet"] .header-container .navigation-container li a { background-color: #29468f; }

@media screen and (max-width: 1023px) and (min-width: 641px) {
  body[corporateidentity="valet"] .header-container .application-container i.fi-list { top: 0.4em; }
  body[corporateidentity="valet"] header .application-container img.logo { width: 8em;}
}

@media screen and (max-width: 640px) {
  body[corporateidentity="valet"] .header-container .application-container i.fi-list {top: 0.3em;  }
  body[corporateidentity="valet"] header .application-container img.logo{ margin-top: 0;}
  body[corporateidentity="valet"] header .application-container {position: relative; bottom: 0.75em;}*/
}