@charset "utf-8";
/*
 * ALS Mobile 2 - CSS
 * Allgemeines gemeinsames CSS für ALS Mobile 2 Terminals (Apps)
 * Dieses CSS File soll Basis für das Coorporate Design in allen ALS Mobile Apps sein
 * Voraussetzung und Basis ist das bootstrap.css (v3)
 * author:  rm
 * lastmod: 10.07.2023
 */


/******************************************************************************************/
/* ***************** Typografie ***************** */
/******************************************************************************************/
/* Colors */
body{background: #fefefe;}

.bs-blue{color: #016ECD;}
.bs-lightblue{color: #4AAFCD;}
.bs-green{color: #5AB75C;}
.bs-yellow{color: #FAA632;}
.bs-red{color: #DA4F4A;}
.bs-grey{color: #868E96;}
.bs-dark{color: #343A40;}
.bs-light{color: #F8F9FA;}

.tooltip > *{border: 1px solid #999; background: #444;}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{background-color: #fefefe;} /* body bg color übernehmen */

.marginOuter1{margin: 1px}
.padding-left{padding-left: 0.5em;}
.padding-right{padding-right: 0.5em;}
.margin-left{margin-left: 0.5em;}
.margin-right{margin-right: 0.5em;}
.formGroupIndented{margin-left: 20px}

.badge.paddingContent>*{padding: 2px}
.badge.paddingContent>.padding-right{padding-right: 0.5em}
.badge.bordered{border: 1px solid #878787;}

.smallLabel{font-size: smaller; margin-right: 0.25em;}

.hidden{display: none;}
.shown{display: block;}
.textAlignRight, .align-right{text-align: right;}
.margin-bottom-sm{margin-bottom: 5px;}
.margin-top{margin-top: 15px;}
.move5pxToTop{margin-bottom: 5px; margin-top: -5px;}

/* Line Breaks, Tabs, etc. anzeigen */
.showControlCharacters{white-space: pre-wrap;}

.hasLink {cursor: pointer;}

/* Hervorhebung von dunklem Text auf möglichen auch dunklen / dynamischen Farben (Status bspw) */
.alsMobileTextGlow {
  text-shadow: 0 0 0.2em #ffffff;
  text-shadow: 0 0.1em 0.5em rgb(255 255 255), 0 -0.1em 0.5em rgb(255 255 255), 0 0 0.1em #ffffff;
}
.alsMobileTextGlowLight{
  text-shadow: 0 0 0.2em #ffffff;
  text-shadow: 0px 0.05em 0.2em #ffffff, 0px -0.05em 0.2em #ffffff;
}

/* Font sizes / Margins */
h1, h2, h3, h4, h5, h6 { text-shadow: 0 1px rgba(255, 255, 255, 0.9); }
.h3, h3 {font-size: 20px;}
h3:not(.panel-title, .modal-title){font-size: 19px; margin-top: 14px; margin-bottom: 8px;}
h4:not(.panel-title, .modal-title){font-size: 16px; margin-top: 8px; margin-bottom: 8px;}
h4{margin-top: 8px; margin-bottom: 6px;}
h5{font-size: 17px; margin-top: 6px; margin-bottom: 6px;}

.breakLineDotted{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.smaller{font-size: smaller}
.italic{font-style: italic}

.errorHeading{color: #A94442;}

.panel-alsMobile .tooltip > .tooltip-inner {background: #444;}
.panel-alsMobile .tooltip > .tooltip-arrow {border-bottom-color: #444;}

.tooltipHtmlList{margin: 5px;}

.customWidgetBranding{position: absolute; right:5px; top:5px; color: rgba(30,30,30,0.4);}
.gaugeWidgetBranding{position: absolute; right:5px; top:5px; font-size: 125%; color: rgba(30,30,30,0.4);}

.removeMarginTop{margin-top: 0;}
.removeMarginBottom{margin-bottom: 0;}

/* ICONS */
/*.fa, [class^="icon-"], [class*=" icon-"] {line-height: inherit;} /* Icons Line Height ist sonst auf 1 */
.iconHeightInherit{line-height: inherit;}
.fixedIconWidthCentered{width: 1.5em; text-align: center;}
.fixedIconWidth{width: 1.5em;}
/* Sonder Layout bei best. Icons */
.icon-prodvariant {margin-top: 5px; margin-left: 1px;}

/* h3 Header with icon (right) */
.headerWithIconRight{margin-top: 5px}
.headerWithIconRight > h3{display: inline-block; margin-top: 10px;}
.headerWithIconRight > button{float: right; /*margin-top: 4px;*/ padding: 5px 10px;}

/* Box Shadow von Paneln, Listen, wpHeader*/
/*.alsMobileBoxShadow, .panel, .list-group-alsMobile, .wpHeader {-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1);  box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1);}*/
.wpHeader {-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1);  box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1);}
/*.alsMobileBoxShadow, .panel {box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.26), 0 2px 14px 0 rgba(0, 0, 0, 0.22);}*/
/*.alsMobileBoxShadow, .panel, .list-group, .table {box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20), 0 2px 10px 0 rgba(0, 0, 0, 0.16);}*/
.alsMobileBoxShadow, .panel, .list-group, .table {box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.20), 0 2px 10px 0 rgba(0, 0, 0, 0.16);}
.panel.cuaMode_2, .wpHeader.cuaMode_2{box-shadow: 0 0px 4px 0 rgba(44, 92, 179, 0.75), 0 2px 10px 0 rgba(158, 187, 236, 1);}
.panel.cuaMode_3, .wpHeader.cuaMode_3{box-shadow: 0 0px 4px 0 rgba(54, 145, 55, 0.75), 0 2px 10px 0 rgba(159, 218, 161, 1);}
.panel.cuaMode_3_7, .wpHeader.cuaMode_3_7{box-shadow: 0 0px 4px 0 rgba(255, 189, 14, 0.75), 0 2px 10px 0 rgba(252, 216, 122, 1);}
.panel.cuaMode_4, .wpHeader.cuaMode_4{box-shadow: 0 0px 4px 0 rgba(232, 7, 5, 0.75), 0 2px 10px 0 rgba(251, 144, 144, 1);}
.panel.cuaMode_6, .wpHeader.cuaMode_6{box-shadow: 0 0px 4px 0 rgba(0, 164, 202, 0.75), 0 2px 10px 0 rgba(145, 229, 248, 1);}
/*.cuaMode_6:before{background: #00DDFF; background: linear-gradient(to bottom, #91e5f8 0%,#00a4ca 100%);}*/
.panel-body .table, .item_content .table, .panel .list-group {box-shadow: none;} /* not selector above is not working with combinator selectors */

.alsColorBubble{padding: 0 1em; margin-right: 0.8em; border: 1px solid #c8c8c8; border-radius: 0.2em;}
.alsMobileTable td .alsColorBubble{padding: 0 0.6em;}

.panelBackdrop{ position: fixed; width: 100%; height: 100%; } /* fullscreen backdrop zum screen sperren + backdrop klicks abfangen */
.panelBackdropUnderTopbar{ position: fixed; width: 100%; width: 100%; height: calc(100% - 46px); top: 46px; } /* fullscreen backdrop zum screen sperren + backdrop klicks abfangen */
/*.panelContent{ pointer-events: none;} !* fullscreen backdrop zum screen sperren + backdrop klicks abfangen *!*/

/******************************************************************************************/
/* ***************** Generals / helpers ***************** */
/******************************************************************************************/
.fontWeightNormal{font-weight:normal;}
.safariIFrameWidth{width: 1px; min-width: 100%}
.overflowscroll{overflow: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
.halfTransparent, .disabled:not(.noOpacity), .form-control[disabled]:not(.noOpacity){opacity: 0.5;}
.semiTransparent {opacity: 0.70;}

.bold{font-weight: bold;}
.nomargin{margin: 0;}
.nowrap{white-space: nowrap;}
.positionRelative{position: relative;}
.breakWords{word-break: break-word;}
.disableGrayed{/*background: rgba(0,0,0,0.1);*/ background: rgba(255,255,255,0.4);}
.ellipsis{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
a{cursor: pointer;}
a.nolink{text-decoration: none; color: #333; cursor: default;}
.linkPaddingHorizontal{padding-left: 5px; padding-right: 5px;}
.linkPaddingLeft{padding-left: 5px;}
.linkPaddingRight{padding-right: 5px;}
/* font-awesome Icon Größen Erweiterung */
.fa-1_9x {font-size: 1.9em;} .fa-1_8x {font-size: 1.8em;} .fa-1_7x {font-size: 1.7em;} .fa-1_6x {font-size: 1.6em;}
.fa-1_5x {font-size: 1.5em;} .fa-1_4x {font-size: 1.4em;} .fa-1_3x {font-size: 1.3em;} .fa-1_2x {font-size: 1.2em;} .fa-1_1x {font-size: 1.1em;}
.fa-10x {font-size: 10em;}

.text-center{text-align: center;}
.centerBlock{position: absolute; bottom: 50%; width: 100%;}
/* New solution for centering vertical and horizontal with flex box for centering the direct childs*/
.centerFlex {display: flex; align-items: center; justify-content: center; } /* centers children horizontally */
.fullscreen {position: fixed; top: 0; width: 100%;  height: 100%;}
/*.centerFlex > * { flex: 1; }*/
.centerInParent {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.verticalCentered{display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; display: -moz-box; -moz-box-orient: vertical; -moz-box-pack: center; display: box; box-orient: vertical; box-pack: center; }
.verticalCenter{display: inline-block; vertical-align: middle; line-height: normal;} /* vertical center span under parent div - !important: line-height muss im parent div absolut (px) gesetzt werden (ggf. calc) */
.verticalCenteredFlexBox{display: flex;  flex-direction: column; justify-content: center;}
.centerFullFitInParent{position: absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
/*
working example:
<div class="centerFullFitInParent">
  <span> full centered text </span>
</div>
*/
.successFeedbackOverlay{background: rgba(255,255,255,0.6); color: #555555; z-index: 10;}
.btnIconText i {width: 1em;}
.btnIconText span{padding-left: 0.5em;}
.dlgBtnIcon{padding-right: 0.5em;}
.dlgBtn{min-width: 4em;}
/*.invisibleInput, #hiddenScanInput{height: 0; margin: 0; padding: 0; border: none; opacity: 0;}*/

/* Lizenzbedingungen */
.noVolumeLicence .cameraScanBtn{display: none;}
.noVolumeLicence .fa-barcode{display: none;}

/******************************************************************************************/
/* ***************** ALS Mobile App Frame Wrappers (Grundgerüst) ***************** */
/******************************************************************************************/

.appContent{margin-top: 46px; margin-bottom: 20px}
.scrollWrap{height: calc(100% - 46px); position: fixed; top: 46px; width: 100%; overflow-y: auto;}
/*.appLockOverlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 1000; !* display: none; *!}*/
/*.visibleInAppLockOverlay{z-index:1001;}*/
.appOutlineOverlay{position: relative; z-index:1001; outline: 9999px solid rgba(0,0,0,0.1);} /*or position sticky*/

/* ***** Topbar ***** */
.appTopbar { height: 46px; position: fixed; top:0; width: 100%; text-align: center; background-color: #444; overflow: hidden; color: white; z-index: 1000; box-shadow: 0 2px 1px 0 #333; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-top: 2px solid #4fb88c; text-shadow: 0 0.1em rgba(0,0,0,0.5);} /* z-index 1050 haben bootstrap modals, diese müssen noch davor sein */
.appTopbar>.topbarBranding{position: absolute; top:-2px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 12px 12px 6px 12px; font-size: 18px; text-shadow: 0 0.1em 0.1em #111111, 0 0 0.2em #111111;}
.appTopbar>.iconsLeft{     position: absolute; top:-2px; left: 0; max-width: 50%;}
.appTopbar>.iconsRight{    position: absolute; top:-2px; right: 0; max-width: 50%;}
.topbarBtn{width: 45px; padding: 6px 12px; float: left; color: #eee; font-size: 24px; white-space: nowrap;}
@media screen and (max-width: 400px) { /* 355 */
  .topbarBtn {width: 38px; font-size: 22px; padding: 8px 10px;}
}
@media screen and (max-width: 355px) { /* 355 */
  .topbarBtn {width: 36px; font-size: 20px; padding: 10px 8px;}
}
/*.topbarBtn > i {width: 24px; height: 24px;}*/
.topbarBtn:hover:not(.nolink) {background-color: #333; color: #fff;}
.topbarBtn:active:not(.nolink) {background-color: #282828; color: #e8e8e8;}
.topbarBtn:focus{color: #eee;}
.topbarBtn{ background: #444;} /*Btns non-transparent (overflowing title)*/
.topbarBtn .badge{margin-bottom: 3px; color: #444; text-shadow: 0 0.5px rgba( 255, 255, 255, .6 ); box-shadow: 0 0.1em rgba(0,0,0,0.5);}
.fullscreenBelowTopbar{position: fixed; top: 46px; left: 0; width: 100vw; height: 100vh; height: calc(100vh - 46px);}
.fullscreenBelowWpHeader{position: fixed; top: 91px; left: 0; width: 100vw; height: 100vh; height: calc(100vh - 91px);}
.fullscreenBelowTabMenu{position: fixed; top: 135px; left: 0; width: 100vw; height: 100vh; height: calc(100vh - 135px);}

/* ***** Menu    (Navigationspanel left, smartphone top fullscreen) ***** */
#menu, #contentFrame {float:left; position: relative; min-height: 1px; padding: 0 15px 15px 15px;}
#menu {width:30%; width:calc(365px + 0px);}
#menuScrollWrap{width:30%; width:calc(365px + 0px); height: 100%; overflow-y: auto; overflow-x: hidden;} /* damit bei collapse animation die inhaltskomponenten fix bleiben */
#contentFrame{width:70%; width:calc(100% - 365px);}
#pageContainer  {height: calc(100% - 46px);}
#pageRow        {height: 100%; position: relative;}
#navigationPanel { overflow-y: hidden; padding: 0; background-color: #444; color: #ccc; height: 100%; }

.navigationPanelCollapsed #navMenuBtn > i:before{content: "\f0c9"; /*fa-bars*/} /* navbarBtn hamburgerMenu Icon*/


/* *** Menu Controls *** */
.collapsibleNavMenuPanel{margin: 0 5px 5px; padding: 0 37px; text-shadow: none;}
.navMenuItemCollapsed .dropdown_caret{-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-o-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);} /*180° Rotation*/
#navPanelUl{margin-top: 5px; margin-bottom: 20px; padding: 0; list-style: none;}
.navPanelLiItemText{ position: absolute; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 41px);}
.navPanelLiItem { position: relative; font-size: 14px; line-height: 42px; display: block; height: 42px; margin: 0 5px; padding: 0 0px; text-align: left; }
.navPanelLiItem:hover{color: #fff; cursor: pointer;}
.navPanelLi:not(:first-child){ border-top: 1px solid #383838;}
.navPanelLi:last-child { border-bottom: 1px solid #383838; }
.navPanelLiItemIcon { font-size: 18px; line-height: 42px; width: 30px; height: 42px; margin-right: 11px; text-align: center; }
.dropdown_caret { position: absolute; font-size: 18px; line-height: 42px; width: 30px; right: 0; height: 42px; text-align: center; }
.dropdown.dropdown-xs {max-width: 100px;}
.dropdown.dropdown-xs > .dropdown-menu {max-width: 100px; min-width: 100px;}

#navigationPanel .dropdown-menu{color:#555; padding: 5px; text-shadow: none;}
/*.dropdown-menu>li:hover{background:#f0f0f0; cursor: pointer;}*/
/*.dropdown-menu>li{padding: 5px;}*/

/* Responsive für SMARTPHONE */
@media screen and (max-width: 767px){
  #navigationPanel, #navigationPanelScrollWrap, #contentFrame{width:100%;}
  .navigationPanelCollapsed #navigationPanel{ height: 0; opacity: 0; }
  #navMenuBtn > i:before{content: "\f077"; /*fa-chevron-up*/} /* navbarBtn changes to chevronUp Icon */
  .panel-alsMobile .panel-title {font-size: 15px;} /* Smartphone kleinere Panel Title */
}
/* Responsive für TABLET */
@media screen and (min-width: 768px) and (max-width: 1199px){
  .navigationPanelCollapsed #navigationPanel{width: 0;}
  .navigationPanelCollapsed #contentFrame{width: 100%;}
  #navMenuBtn > i:before{content: "\f053"; /*fa-chevron-left*/} /* navbarBtn changes to chevronleft Icon */
}



/******************************************************************************************/
/* ***************** Inhalt ***************** */
/******************************************************************************************/

/* Hervorgehobener Bereich für Inhalt*/
.contentPanel{background: #f9f9f9; padding: 0.2em; border: 1px solid #ddd;}

/* NavPanel (Tabs) */
.alsMobileNav{margin-top: 15px;}
.alsMobileNav>li>a{height: 43px;} /* Höhe Nav Icon Panes damit die border darunter untsichtbar wird */
.alsMobileNav>li>a>.fa{min-width: 20px; text-align: center; font-size: 1.2em;} /* Icons in Tabs */
.alsMobileNav .alsmobileTabDesc {padding-left: 0.3em;} /* Icons in Tabs */
/*.alsMobileNav>li>a>.fa.als-icon-order:before{margin-right: 2px;} !* Icons in Tabs *!*/

/* Tables */
.alsMobileTable>tbody>tr:first-child>td{border-top: none;}
.alsMobileTable>tbody>tr>td:first-child{font-weight: bold;}
.alsMobileTable>tbody>tr>td.fontWeightNormal{font-weight: normal;}
.alsMobileTable.fixed{table-layout: fixed;}
.alsMobileTable th{min-width: 2.5em; text-overflow: ellipsis; overflow-x: hidden;}
.alsMobileTable td{overflow-x: hidden; word-break: break-word; overflow-x: hidden;}
.alsMobileTable td.ellipsis{text-overflow: ellipsis; overflow-x: hidden;}
/*.alsMobileTable{word-break: break-word;}*/

.alsMobileTable tr.linkedTableRow{cursor: pointer;}
.alsMobileTable tr.linkedTableRow:hover{text-decoration: none; background-color: #eeeeee !important;}

.alsMobileTable td.infoColumn{width: 1.5em; cursor: pointer; color: #555; text-align: right}
.alsMobileTable + .alsMobileTable{}

.alsMobileTable td hr { margin-top: 3px; margin-bottom: 3px;}

.linkedTableCol{cursor: pointer; color:#337ab7;}
.linkedTableCol:not(.reportLink):after { font-family: FontAwesome; content: "\f054"; float: right;}
.linkedTableCol:hover{color: #23527c; text-decoration: none; background-color: #eeeeee;}
.linkedTableColWithoutIcon{cursor: pointer; color:#337ab7;}
.linkedTableColWithoutIcon:not(.reportLink):after { font-family: FontAwesome; content: ""; float: right;}
.linkedTableColWithoutIcon:hover{color: #23527c; text-decoration: none; background-color: #eeeeee;}
.linkedTableColBlack{cursor: pointer;}
.linkedTableColBlack:not(.reportLink):after { font-family: FontAwesome; content: "\f054"; color:#337ab7; float: right;}
.linkedTableColBlack:hover{color: #23527c; text-decoration: none; background-color: #eeeeee;}
.reportLink>.repLinkImg, .list-group-item>.repLinkImg{float: right; margin-top: -2px; height: 22px;}
.buttonTableCol{width: 18px; padding: 5px !important;}
/*.hasLink{cursor: pointer; text-decoration: none; color:#337ab7;} !* blau wäre richtig, wirkt aber etwas überflutet*!*/
.hasLink{cursor: pointer; text-decoration: none;} /* blau wäre richtig, wirkt aber etwas überflutet*/

/* wpHeader = Header Panel der aktuelle ausgewählten Maschine (workingPlace) - gray on top under topbar */
.wpHeader + .panel{margin-top: 20px;}
.wpHeader{display: flex; margin: auto -15px 15px; padding: 4px 8px; line-height: 1.1; color: #555; font-size: 18px; background-color:#ececec; border: 1px solid #d8d8d8; } /*wpHeader im Content Flow*/
.wpHeaderResNameDescPane{width: calc(100% - 66px)}
.wpHeaderResIconsRight{width: 62px;}
.wpHeaderResIcon{float: right;}
.wpHeaderResIcon:after{font-family: 'icomoon' !important; content: "\e919";}
.wpHeaderResIcon.resType_100100:after{font-family: 'icomoon' !important; content: "\e93f";}
.wpHeaderBarcodeIcon{padding: 5px; margin: -4px 2px; float: right; cursor: pointer;}
.hideBarcodeLinks .alsMobileBarcodeLink, .hideBarcodeLinks .wpHeaderBarcodeIcon, .hideBarcodeLinks .buttonTableCol{cursor: initial; width: 0; padding: 0 !important; margin: 0;}
.hideBarcodeLinks .alsMobileBarcodeLink > .fa-barcode, .hideBarcodeLinks .wpHeaderBarcodeIcon{display: none;}
.hideBarcodeLinks .wpHeaderResIconsRight{width: 45px}
.buttonTableCol > .alsMobileBarcodeLink{padding: 5px; margin: -5px;}

.showBarcodeLinks.hideMachine .barcodeMachine {display: none;}
.showBarcodeLinks.hideMold .barcodeMold {display: none;}
.showBarcodeLinks.hidePeriphery .barcodePeriphery {display: none;}
.showBarcodeLinks.hideEquipment .barcodeEquipment {display: none;}
.showBarcodeLinks.hideManufactAid .barcodeManufactAid {display: none;}
.showBarcodeLinks.hideOrder .barcodeOrder {display: none;}
.showBarcodeLinks.hideOrdCharge .barcodeOrdCharge {display: none;}
.showBarcodeLinks.hideMaterial .barcodeMaterial {display: none;}
.showBarcodeLinks.hideArticle .barcodeArticle {display: none;}
.showBarcodeLinks.hideResourceInfo .barcodeResourceInfo {display: none;}
.showBarcodeLinks.hidePartlistParts .barcodePartlistParts {display: none;}

.wpHeaderResNameDescPane > .wpdesc{font-size: 14px; font-style: italic;}
/* Responsive für SMARTPHONE */
@media screen and (max-width: 767px){
  .wpHeaderResNameDescPane > .wpdesc{font-size: 12px;}
}

.wpHeader.cuaMode_0:before, .wpHeader.cuaMode_1:before, .wpHeader.cuaMode_2:before, .wpHeader.cuaMode_3:before, .wpHeader.cuaMode_3_7:before, .wpHeader.cuaMode_4:before, .wpHeader.cuaMode_5:before, .wpHeader.cuaMode_6:before, .malist_item_header.cuaMode_0:before, .malist_item_header.cuaMode_1:before, .malist_item_header.cuaMode_2:before, .malist_item_header.cuaMode_3:before, .malist_item_header.cuaMode_3_7:before, .malist_item_header.cuaMode_4:before, .malist_item_header.cuaMode_5:before, .malist_item_header.cuaMode_6:before
{content: " "; float: left; margin-top: 1px; margin-right: 6px; width: 15px; height: 15px; border-radius: 3px; /*box-shadow: 0 0px 2px 0 #333;*/ /*border: 1px solid #d8d8d8;*/}


/* CUA Modes */
/** Konstante: CUAMODE undefiniert - schwarz */
/*.cuaMode_0:before{background: #808080; background: linear-gradient(to bottom, #adadad 0%,#000000 100%);}*/
/** Konstante: CUAMODE offline - grau (stateless + undefined zeigen wir in der terminalwelt auch grau )  */
.cuaMode_1:before, .cuaMode_5:before, .cuaMode_0:before{background: #808080; background: linear-gradient(to bottom, #cbcbcb 0%,#696969 100%);}
/** Konstante: CUAMODE idle - blau */
.cuaMode_2:before{background: #3873E0; background: linear-gradient(to bottom, #a5c2f1 0%,#2358b2 100%);}
/** Konstante: CUAMODE auto -> gruen */
.cuaMode_3:before{background: #46BE46; background: linear-gradient(to bottom, #a7e0a8 0%,#2e8f30 100%);}
/** Konstante: CUAMODE auto + mamode2 7 = Produktion ohne Produktionsfreigabe -> gelb */
.cuaMode_3_7:before{background: #FFC215; background: linear-gradient(to bottom, #ffdd80 0%,#f5b300 100%);}
/** Konstante: CUAMODE alarm -> rot */
/*.cuaMode_4:before{background: #FF5208; background: linear-gradient(to bottom, #ff9898 0%,#d10000 100%);}*/
.cuaMode_4:before{background: #FF5208; background: linear-gradient(to bottom, #ff9898 0%, #e80000 100%);}
/** Konstante: CUAMODE stateless -> weiß */
/*.cuaMode_5:before{background: #FFFFFF; background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);}*/
/** Konstante: CUAMODE rüsten -> cyan */
.cuaMode_6:before{background: #00DDFF; background: linear-gradient(to bottom, #91e5f8 0%,#00a4ca 100%);}

/* ALS spezifische Unterscheidungen (bspw. Maschinentypen) */
.malist_mastate>.machmanu{display: none;}
.malist_mastate.MACHMANU>.machmanu{display: block;}
.malist_mastate.MACHMANU>.stdma{display: none;}
.malist_mastate.STDMA>.machmanu{display: none;}

.prodvariantIcon{font-size: 1.3em; margin: -4px; padding: 4px; padding-right: 0.2em;}
.prodvariantIcon.grey{color: #9A9A9A;}
.prodvariantIcon.blue{color: #087888;}
.prodvariantIcon.green{color: #70B870;}
.prodvariantDesc{font-weight: bold;}

/******************************************************************************************/
/* ***************** Panels, Buttons, Labels ***************** */
/******************************************************************************************/
.panel{margin-top: 15px;}
.panel.removeMarginTop{margin-top: 0px;}
.panelBodyMargin{margin-top: 15px;}
.panel hr {margin-top: 15px; margin-bottom: 15px;}
.panel-body > *:last-child{ margin-bottom: 0px;}
.panel-title, .label { text-shadow: none; }
.panel-title small {/*font-size: 66%;*/ font-size: 75%;}
h3 + .panel, .headerWithIconRight ~ .panel{margin-top: 0;}
/* Progressbar  */
.panel-heading>.panel-title+.row{margin-top: 5px}
.progress{margin-bottom: 0; background-image: linear-gradient(to bottom,#d0d0d0 0,#d8d8d8 100%); /*border: 1px solid #ddd;*/}
.progress>.progress-bar{min-width: 1px; max-width: 100%; font-weight: bold; color: #fff; text-shadow: 0 0 3px #333333;}

/* Collapsible Panel Body */
.panel.collapsible > .panel-heading > .panel-title:after { font-family: FontAwesome; content: "\f077"; float: right; color: #555}
.panel.collapsible > .panel-heading.collapsed > .panel-title:after { font-family: FontAwesome; content: "\f078"; float: right; color: #555}
.alsMobilePanelEntry{margin: 5px 0;}

/* Linked Table Header */
.panel > .panel-heading.linkedTableHeader > .panel-title:after { font-family: FontAwesome; content: "\f054"; float: right; color: #555}


/* *** Labels *** */
.alsMobileLabel{display: inline-block; font-size: 77%; text-align: left; white-space: inherit; padding: 0.3em 0.6em;}
.alsMobileLabel>.fa{margin-right: 3px; /*font-size: initial*/}
.alsMobileLabelWrap{margin-bottom: 10px}
@media only screen and (min-width: 768px){.label.alsMobilePanelEntry{display: inline-block; font-size: 84%;}}

/* *** Buttons *** */
.rowButtonRight{padding-left: 5px; float: right;}
.rowButtonLeft{padding-left: 5px; float: left;}
.buttonPanelRight{text-align: right;}
.btn-margin-right{margin-right: 5px;}
.btn-margin-left{margin-left: 5px;}
.btn-margin{margin-left: 3px; margin-right: 5px;}
.btn-default>i.fa{color:#555;}
.headerButtonOverPanel{}
.panel-heading>button{margin-left: 6px; min-width: 40px}
.panel-heading>button.imageBtn.pull-left{margin-left: 0px; margin-right: 10px; margin-bottom: 5px}
/*.imageBtn{padding: 2px 4px;}*/
.imageBtn>img{height: 24px; margin: -6px}
.imageBtn>span{padding-left: 6px}

.pdfViewerCloseOverlayButton{position: absolute; bottom: 28px; right: 28px; opacity: 0.7; width: 46px; height: 46px; border-radius: 23px;}
.pdfViewerCloseOverlayButton:hover{opacity: 0.85;}

/* Paddings für Icons und Labels bei kombinierten Buttons (Icon + Label) */
.btnMargin{margin: 3px}
.btnMarginLeftRight{margin: 0px 3px}
.btnMarginLeft{margin-left: 6px}
.btnMarginRight{margin-right: 6px}
.btnPaddingRight, .paddingRight{padding-right: 5px}
.labelPaddingLeft, .paddingLeft{padding-left: 5px}
.btnPaddingBetween{padding-left: 5px; padding-right: 5px;}

.touchPadding{margin: -8px; padding: 8px;}
.touchPaddingSmall{margin: -5px -8px; padding: 5px 8px;}

td > .btn-als-xs {margin: -2px 0px;}
.btn-als-xs {padding: 6px; line-height: initial; width: 28px; height: 28px; /*border-radius: 3px;*/}
.btn-als-xs .fa {width: 12px; height: 12px;}
.smallerButtonPadding{padding: 6px 11px;} /* für Buttons mit breiteren icons (Scanner bspw) */

/* ALS Mobile Button Gruppen (Rechteckig bzw. rund und ohne Text auf smartphone) */
.alsMobileBtnGroup button{ width: 100%; min-height: 38px; min-width: 38px;}
/* Button Gruppen innerhalb von ALS Mobile Panels */
.panel-body .alsMobileBtnGroup{margin: 15px 0;}
.panel-body .alsMobileBtnGroup>button{margin: 6px; width: auto; overflow: hidden;}
@media (min-width: 768px) { .panel-body .alsMobileBtnGroup > button {min-width: 176px; max-width: 25%; min-height: 57px;} }
@media screen and (max-width: 767px) {
  .panel-body .alsMobileBtnGroup > button { padding: 0; border-radius: 50%; height: 46px; width: 46px; }
  .panel-body .alsMobileBtnGroup > button > span { display: none; }
  .panel-body .alsMobileBtnGroup > button > i { width: 44px; text-align: center; }
  .panel-body .alsMobileBtnGroup > button > i.fa-play:before { margin-left: 2px; }
}
.input-group-btn button{min-width: 40px; }
.input-group-btn .btn-bigIcon{ height: 34px; }
.btn-bigIcon > i.fa{ font-size: 1.4em; }

.als-mobile-barcode{width: 100%;}
.als-mobile-qrcode > img{max-width: 100%;}
.input-group-addon.btn.btn-primary{color: #fff;}

.input-group-addon.btn.btn-primary{color: #fff;}

/******************************************************************************************/
/* ***************** Dialoge, Modals, Alerts ***************** */
/******************************************************************************************/
.modal{overflow: auto;}
.modal.fullscreenModal{height: 100% !important;}
.modal.fullscreenModal > .modal-dialog {height: 95% !important; height: calc(100% - 20px) !important; width: 95%; width: calc(100% - 20px);}
/*.modal-alsMobile > .modal-content{overflow: hidden;}*/ /* Vorsicht! Dropdowns bspw. laufen über den modal hinaus! */
@media (min-width: 768px) {
  .modal.fullscreenModal > .modal-dialog {height: calc(100% - 60px) !important; width: calc(100% - 40px);}
}
.modal.fullscreenModal > .modal-dialog > .modal-content {height: 100%; border-radius: 0;}
@media (max-width: 768px) {
  .modal > .modal-dialog.backdropmargin {margin: 20px;}
}
/* ALS MOBILE ALERTS */
.alsMobileAlert { margin: 20px 0 }
.alsMobileAlertHeader{font-size: 1.5em}
.alsMobileAlertHeader>.fa{font-size: 1.5em}
.alsMobileAlertHeader>span:after{content: "\00a0"}
.alsMobileAlertContent{margin: 10px 0}
.alsMobileAlertBtnPanel{text-align: right; margin-top: 15px;}
.alsMobileAlertBtnPanel > button{margin-left: 10px; margin-top: 15px; min-width: 50px}
.alsMobileAlertBtnPanel > form{margin-top: 15px; min-width: 50px}
.alsMobileAlertBtnPanel > button.pull-left{margin-left: 0px; margin-right: 10px;}
@media (min-width: 768px) {
  .alsMobileBtnGroup:not(.fixedSmall) > button, .alsMobileAlertBtnPanel:not(.fixedSmall) > button {min-width: 150px}
}
@media (max-width: 992px) {
  .alsMobileBtnGroup.fixedSmallUntilMd > button, .alsMobileAlertBtnPanel.fixedSmallUntilMd > button {width: 50px; min-width: 50px}
}
.alsMobileAlertBtnPanelLeft{text-align: left}
.alsMobileAlertBtnPanelLeft > button{margin-right: 10px; margin-top: 15px; min-width: 50px}
.alsMobileAlertBtnPanelLeft > form{margin-top: 15px; min-width: 50px}

.alsMobileAlertBtnPanel.sticky
{
  position: sticky;
  float: right;
  bottom: 10px;
  right: 0;
  margin: 0 !important;
}
.alsMobileAlertBtnPanel.sticky > .btn {margin-top: 0;}

/* Bootbox Popup Modals (Alerts / Confirms) */
.bootbox .modal-header{border-top-left-radius: 6px; border-top-right-radius: 6px; padding: 10px 15px;}
.bootbox .modal-header > .modal-title:before{font-family: FontAwesome; content: "\f05a"; font-size: 120%; margin-right: 8px;}
.bootbox.bootbox-confirm .modal-header > .modal-title:before{content: "\f059";}
.bootbox .modal-header.alert-default, .bootbox .modal-header.confirm-default{background: #efefef; color: #555;}
.bootbox .modal-header.alert-danger  > .modal-title:before{content: "\f06a";}
.bootbox .modal-header.alert-warning > .modal-title:before{content: "\f06a";}
.bootbox .modal-header.alert-success > .modal-title:before{content: "\f058";}
.bootbox .modal-header.confirm > .modal-title:before{content: "\f059";}

/*.modal-backdrop + .bootbox.modal{background: rgba(0,0,0,0.1);} !* Sonderfall wenn Alert / Confirm über einem bestehenden Modal angezeigt werden, zum abheben*!*/
.bootbox.modal{background: rgba(0,0,0,0.1);} /*generell */

/* Bootstrap 3 Alert - Eigene Theme Ergänzung für grau */
.alert-gray {
  background-image: -webkit-linear-gradient(top, rgba(241, 241, 241, 0.49) 0, #e6e6e6 100%);
  background-image: -o-linear-gradient(top, #f6f6f6 0, #e6e6e6 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#e6e6e6));
  background-image: linear-gradient(to bottom,#f6f6f6 0,#e6e6e6 100%);
  background-repeat: repeat-x;
  border-color: #cbcbcb;
}

.alert-gray {
  color:            #696767;
  background-color: rgba(235, 235, 235, 0.78);
  border-color:     #cbcbcb;
}

.popover-title{margin: 0 !important;} /* Safari Fix, hier greift das bootstrap nicht. */

/******************************************************************************************/
/* ***************** Ajax Loading Overlay ***************** */
/******************************************************************************************/
#loadingOverlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.1); z-index: 1050; display:none;}
#loadingOverlay:not(.overlayTopbar){height: calc(100% - 46px); top: 46px;} /* when topbar shall be accessible in loading mode */
#loadingOverlayWithMsg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.1); z-index: 1050; display:none;}
#loadingOverlayWithMsg:not(.overlayTopbar){height: calc(100% - 46px); top: 46px;} /* when topbar shall be accessible in loading mode */
#loadingOverlay .loadingIconPanel{padding: 55px 40px 25px 40px; border-radius: 10px; background: #f5f5f5; background: rgba(240,240,240,0.95); border: 1px solid rgba(200,200,200,0.3);}
#loadingOverlayWithMsg .loadingIconPanel{display: inline-block; min-width: 180px; max-width: 320px; padding: 20px; border-radius: 10px; background: #f5f5f5; background: rgba(240,240,240,0.95); border: 1px solid rgba(200,200,200,0.3);}
/*.panel-alsMobile .loadingIconPanel{padding: 10px 20px; border-radius: 5px; background: #f5f5f5; background: rgba(240,240,240,0.7); border: 1px solid rgba(200,200,200,0.2);}*/
#loadingOverlayWithMsg .centerBlock{bottom: calc(50% - 50px);}
.loadingIcon{opacity: 0.7}
.loadingPanelMsg{margin-top: 15px; font-style: italic;}

#ajaxLoadingScreenLock{position: fixed; height: 100%; width: 100%; top: 0;background: rgba(0,0,0,0.1); z-index: 99;}
.loadingAnimationWrapper{padding: 50px; background: rgb(232, 232, 232); background: rgba(232, 232, 232, 0.9); border: 1px solid #cacaca; border-radius: 20px; color: #444444;}

/******************************************************************************************/
/* ***************** Controls (Inputs, Selects,...) ***************** */
/******************************************************************************************/

/* *********************** ALS Form-Group (Label + Input) *********************** */
.als-form-group{margin-bottom: 0.5em;}
.als-form-group-label{padding-top: 7px;}
@media (max-width: 767px) {
  .als-form-group-label.col-xs-12{padding-top: 0px;}
}

.small-fixed-input{min-width: 132px; max-width: 196px;}
.formControlMarginBottomSmall{margin-bottom: 8px;}

/* Lists */
.list-group-item-icon{font-size: 1.5em; /*color: #2c689d;*/}
.list-group-item-text-before-arrow{width: calc(100% - 18px);}
.list-group-item > .panel-heading, .list-group-item > .panel-body {margin: 0; padding: 0;}


/* *** Forms, Formgroups, Inputgroups *** */
.form-group:last-child{margin-bottom: 0;}
.bootstrap-touchspin > .input-group-addon:first-child + .input-group-btn > button {border-radius: 0;}
.input-group-addon btn btn-primary{color: #ffffff;}
.dropdownSelect.input-group.additional-btn-right > .caret_right{right: 43px; z-index: 3}
.dropdownSelect.input-group.additional-btn-right > input{padding-right: 28px;}

.combobox-container.input-group-child .form-control, .combobox-container.input-group-child .input-group-addon{border-radius: unset;} /* Sonderfall für Combobox wenn die Input Group außerhalb Combobox Komponente gebaut wird */

.dropdown.bootstrap-select>.btn.dropdown-toggle{min-height: 34px;} /* Min Höhe für keine Auswahl, dass Form Controll nicht zusammenfällt */
.dropdown.bootstrap-select .dropdown-menu.inner > li > .opt.selected > .text{    max-width: calc(100% - 22px); overflow: hidden;} /* dropdown multiselect, dass Checkmark rechts nicht Text überdeckt */
.dropdown.bootstrap-select .dropdown-menu.inner > li > .opt.selected {height: 34px} /* dropdown multiselect, dass beim checked die Höhe sich nicht ändert */
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { top: 10px; } /* dropdown multiselect, dass checkmark vertikal zentriert steht */

/* fix for ios safari inputs width */
.fixIosInputLayout{display: flex;}
.fixIosInputLayout>input.form-control[type="date"], .fixIosInputLayout>input.form-control[type="time"]{display:flex; display:-webkit-flex; flex: 1 0 0; -webkit-flex: 1 0 0; border-radius: 4px; }
.input-group>.fixIosInputLayout>input.form-control[type="date"], .input-group>.fixIosInputLayout>input.form-control[type="time"] { border-radius: 4px 0 0 4px; }
/* Bootstrap Dropdown Select Extension mit caret immer ganz rechts*/
.modal .dropDownButton, .form-group .dropDownButton{width: 100%;}
.modal .dropdown-menu, .form-group .dropdown-menu{width: 100%; max-height: 21em;}

.dropdownSelect .dropdownSelectMenuItem{min-height: 28px;}
.dropdownSelect .dropDownButton, .dropdownSelect .caret_right{color: #555555;}
.dropdownIcon{/*font-size:smaller;*/ padding-right: 6px;}
.dropdownSelect .dropDownButton{position: relative; height: 34px;}
.dropdownSelect .dropdownSelectHeader{position: absolute; text-overflow: ellipsis; overflow: hidden; line-height: 32px; text-align: left; left: 12px; height: 32px; top: 0; width: calc(100% - 30px);}
.navPanelLiItem .dropdownSelectHeader{position: inherit; text-align: inherit; line-height: inherit;}
.dropdownSelect .caret_right{position: absolute; line-height: 32px; width: 30px; right: 0; height: 32px; text-align: center; top: 0;}

.dropdown-menu{ max-height:20em; overflow-y: auto; overflow-x: hidden;}
.dropdown-menu>li:hover{background:#f0f0f0; cursor: pointer;}
/*.dropdown-menu>li{padding: 5px 10px;}*/ /* dieses padding greift im anchor nicht */
/*.dropdown-menu>li{padding: 7px 14px;}*/
/*.dropdown-menu>li:not(.dropdown-header){padding: 0;}*/
.dropdown-menu.padLiElements>li{padding: 7px 14px;}
.dropdown-menu>li>a{padding: 7px 14px;}
.dropdown-menu>.input-group{padding: 7px;}
.dropdown-menu .dropdownItemAdditionalContent{margin-left: 0.5em; color: #aaaaaa; font-size: small; font-style: italic;}
.dropdown-menu .dropdownItemName{left: 0; margin-right: 0.5em;}
/*.dropdown-menu .dropdownItemAdditionalContent{margin-left: 0.5em; font-weight: initial; background-color: #4d7690; font-size: 11px;}*/
.dropdown-menu>.active .dropdownItemAdditionalContent{color: #d8d8d8; }
.dropdown-menu>li.locked .dropdownItemName{text-decoration: line-through;}
.dropdown-menu>li.locked>a:hover {cursor: not-allowed;}
.dropDownInput {position: relative;}
.dropdownSelect>.caret_right, .dropDownInput>.caret_right{cursor: pointer; z-index: 3;}
.dropdownItemIcon{min-width: 20px;}

.dropdown-menu>li>a:empty {
  background-color: initial !important;;
  background-image: initial !important;
  filter: none;
  background-repeat: initial !important;
}

/* *** Input Validation *** */
.validationError{box-shadow: 0px 0px 8px #d9534f;}


/******************************************************************************************/
/* ***************** ALS Mobile Bootstrap Theme (für Panels + Modals )***************** */
/* (Erweiterung der severity themes (default, primary, warning, info, danger) um alsMobile (= graues Theme)*/
/******************************************************************************************/
.panel-alsMobile { background: #f8f8f8; border-color: #c8c8c8; }
/*.panel-alsMobile { background: #f8f8f8; }*/
.modal-alsMobile > .modal-content{ background: #f8f8f8; }
.panel-alsMobile > .panel-heading { color: #333; background-color: #f8f8f8; border-color: #c8c8c8; }
/*.panel-alsMobile > .panel-heading { color: #333; background-color: #f8f8f8; border-color: #dcdcdc; }*/
.modal-alsMobile > .modal-content > .modal-header { color: #333; background-color: #f8f8f8; border-color: #c8c8c8; border-radius: 6px 6px 0px 0px}
.modal-alsMobile > .modal-content .modal-footer { border-color: #c8c8c8; }
.modal-content .modal-footer > button, .alsMobileAlertBtnPanel > button  { min-width: 75px; }
.panel-alsMobile > .panel-heading + .panel-collapse > .panel-body { border-top-color: #c8c8c8; }
.panel-alsMobile > .panel-heading .row > div {overflow: hidden;}
.panel-alsMobile > .panel-heading .badge { color: #f8f8f8; background-color: #333; }
.panel-alsMobile > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #c8c8c8; }
.panel-alsMobile > .panel-heading, .modal-alsMobile > .modal-content > .modal-header {
  background-image:  -webkit-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background-image:  -o-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background-image:  -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#eeeeee));
  background-image:  linear-gradient(to bottom, #f8f8f8 0%, #eeeeee 100%);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffeeeeee', GradientType=0);
  background-repeat: repeat-x;
}
.panel-alsMobile > .panel-body .list-group-item { border: 1px solid #c8c8c8; }
.panel-alsMobile h3.panel-title > .fa, .modal-alsMobile .modal-title > .fa, .alsIconGray { color: #555; }
.panel-alsMobile .btn-default {
  text-shadow:      0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0, #e5e5e5 100%);
  background-image: -o-linear-gradient(top, #fff 0, #e5e5e5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
  background-image: linear-gradient(to bottom, #fff 0, #e5e5e5 100%);
  filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
  filter:           progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.panel-alsMobile .table-striped > tbody > tr:nth-of-type(odd), .modal-alsMobile .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fefefe; }
[data-toggle="collapse"] {cursor: pointer;}
.panel-alsMobile.collapsible > .panel-heading:hover { cursor: pointer; background-color: #eaeaea; /*background-position: 0 -15px;*/ /*border-color: #adadad;*/
  background-image:  -webkit-linear-gradient(top, #f0f0f0 0%, #e8e8e8 100%);
  background-image:  -o-linear-gradient(top, #f0f0f0 0%, #e8e8e8 100%);
  background-image:  -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e8e8e8));
  background-image:  linear-gradient(to bottom, #f0f0f0 0%, #e8e8e8 100%);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#ffe8e8e8', GradientType=0);
}
.panel-heading:not(.collapsed) .list-group-item-icon:before {content: "\f139";}


.panel-alsMobile > .panel-body .input-group-addon:not(.btn), .modal-alsMobile .input-group-addon:not(.btn) { background-color: #e8e8e8; /*ADDON LEFT LABEL */ }
.panel-alsMobile .form-control[disabled], .panel-alsMobile .form-control[readonly], .panel-alsMobile fieldset[disabled] .form-control { background-color: #e8e8e8; }
.list-group.list-group-alsMobile > .list-group-item { background-color: #f8f8f8; border: 1px solid #c8c8c8; }
.panel-alsMobile > .list-group.list-group-alsMobile > .list-group-item {border-right: none; border-left: none  }
.list-group-alsMobile.stribed > .list-group-item:nth-of-type(odd){background-color: #f4f4f4;}
.list-group-alsMobile.stribed > .list-group-item:nth-of-type(even){background-color: #f9f9f9;}
.list-group.list-group-alsMobile > .list-group-item:hover { background-color: #eee; }
.panel-alsMobile > .panel-heading.linkedTableHeader:hover { cursor: pointer; background-color: #eaeaea; background-position: 0 -15px; }
/*.panel-alsMobile > .panel-body.linkedPanelBody:hover { background-color: #eee; }*/
.list-group.list-group-alsMobile > .list-group-item:active:not(.panel-alsMobile .list-group-item:active) { background-color: #e0e0e0; }

.panel-alsMobile .panelExpandBtn{color: #555; width: 100%; text-align: center; margin:-6px; padding: 6px;}
.panel-alsMobile .panelExpandBtn:hover{color: #23527c; color: #222; font-weight: bold; cursor: pointer;}

.panel-alsMobile .panelExpandBtn:after { font-family: FontAwesome; content: "\f077"; text-align: center;}
.panel-alsMobile .panelExpandBtn.collapsed:after { font-family: FontAwesome; content: "\f078"; text-align: center;}
/*.expandablePanel.collapsed{display:none;}*/
.panel-alsMobile .panel-body.linked:hover{background-color: #eee; cursor: pointer;}
.panel-alsMobile .panel-body.linked:active{background-color: #e0e0e0;}

/* Dialog mit Alert Statusmeldung direkt unter dem modal-header */
.modal-alsMobile > .modal-content > .modal-header + .alert {border-radius: 0; border-top: none; border-left: none; border-right: none;}

#alsMobileAuthenticationModal button{min-width: 4em;}

.well-small{padding: 4px;}
.alsMobileWell {
  min-height:         20px;
  padding:            10px;
  margin-bottom:      20px;
  background-color:   #f9f9f9;
  color:              #444444;
  border:             1px solid #d8d8d8;
  border-radius:      4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow:         inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.alsMobileWell > .fa { color: #707070; }
.panel-alsMobile .alsMobileWell { background-color: #fefefe; }
.panel-alsMobile .alsMobileBlockquote { padding: 8px 16px; margin: 0 0 16px; }
.progress-bar.progress-bar-alsMobile {
  background-color:  #666666;
  background-image:  -webkit-linear-gradient(top, #b5b5b5 0, #5d5d5d 100%);
  background-image:  -o-linear-gradient(top, #b5b5b5 0, #5d5d5d 100%);
  background-image:  -webkit-gradient(linear, left top, left bottom, from(#b5b5b5), to(#5d5d5d));
  background-image:  linear-gradient(to bottom, #b5b5b5 0, #5d5d5d 100%);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb5b5b5', endColorstr='#ff5d5d5d', GradientType=0);
  background-repeat: repeat-x;
}

/** ALS Ressource Icons  */
/*.alsResourceIcon:before {font-family: 'icomoon' !important; content: "\e922"; float: left; color: #444; margin-bottom: -2px; }*/
.alsResourceIcon, .orderIcon {font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
/*.alsResourceIcon:before {content: "\e922"; }*/ /* Default Icon - gibts keins mehr 08.06.2022 */
.alsResourceIcon.MANUFACTURING_AID:before {content: "\e933";} /*icon-fhm3*/
.alsResourceIcon.resType_5000000:before, .alsResourceIcon.mainClassId_5000000:before {content: "\e933";} /*icon-fhm3*/
.alsResourceIcon.PERIPHERY:before {content: "\e90e";} /*icon-periphery*/
.alsResourceIcon.resType_600000:before, .alsResourceIcon.mainClassId_600000:before {content: "\e90e";} /*icon-periphery*/
.alsResourceIcon.TOOL_OR_TOOLPART:before {content: "\e904";} /*icon-WZ2*/

.alsResourceIcon.resType_100000:before, .alsResourceIcon.mainClassId_100000:before, .alsResourceIcon.mainClassId_100000 > a > i.jstree-icon:before {content: "\e919";} /* icon-SGM_Q4 */
.alsResourceIcon.resType_100100:before, .alsResourceIcon.mainClassId_100100:before, .alsResourceIcon.mainClassId_100100 > a > i.jstree-icon:before {content: "\e93f";} /* icon-manual_wp */
.alsResourceIcon.resType_100200:before, .alsResourceIcon.mainClassId_100200:before, .alsResourceIcon.mainClassId_100200 > a > i.jstree-icon:before {content: "\e919";} /* icon-SGM_Q4 */
.alsResourceIcon.resType_700000:before, .alsResourceIcon.mainClassId_700000:before, .alsResourceIcon.mainClassId_700000 > a > i.jstree-icon:before {content: "\e905";} /* icon-compressor */

.alsResourceIcon.resType_1000000:before,.alsResourceIcon.mainClassId_1000000:before, .alsResourceIcon.mainClassId_1000000 > a > i.jstree-icon:before {content: "\e958";} /*icon-wrench*/
.alsResourceIcon.resType_1000025:before,.alsResourceIcon.mainClassId_1000025:before, .alsResourceIcon.mainClassId_1000025 > a > i.jstree-icon:before {content: "\e904";} /*icon-WZ2*/
.alsResourceIcon.resType_1000050:before,.alsResourceIcon.mainClassId_1000050:before, .alsResourceIcon.mainClassId_1000050 > a > i.jstree-icon:before {content: "\e920";} /*icon-stanz_wz2*/

/*.alsResourceIcon.partType_1000100:before, .alsResourceIcon.partType_1000100 > a > i.jstree-icon:before {content: "\e904";} !* icon-WZ2 *!*/ /* raus genommen - überschreibt stanzWZ*/
.alsResourceIcon.resType_1000101:before, .alsResourceIcon.mainClassId_1000101:before, .alsResourceIcon.partType_1000101:before, .alsResourceIcon.partType_1000101 > a > i.jstree-icon:before {content: "\e924";} /* icon-WZ_kombi */             /* Kombi WZ */

.alsResourceIcon.resType_1000102:before, .alsResourceIcon.mainClassId_1000102:before, .alsResourceIcon.partType_1000102:before, .alsResourceIcon.partType_1000102 > a > i.jstree-icon:before {content: "\e94c";} /* icon-kombiMaster */     /* Stammform */
.alsResourceIcon.resType_1000103:before, .alsResourceIcon.mainClassId_1000103:before, .alsResourceIcon.partType_1000103:before, .alsResourceIcon.partType_1000103 > a > i.jstree-icon:before {content: "\e94e";} /* icon-kombiInset */      /* Einsatz */
.alsResourceIcon.resType_1000104:before, .alsResourceIcon.mainClassId_1000104:before, .alsResourceIcon.partType_1000104:before, .alsResourceIcon.partType_1000104 > a > i.jstree-icon:before {content: "\e948";} /* icon-kombiAddon */      /* Zubehör */

.alsResourceIcon.resType_5000100:before, .alsResourceIcon.mainClassId_5000100:before, .alsResourceIcon.partType_5000100:before, .alsResourceIcon.partType_5000100 > a > i.jstree-icon:before {content: "\e93b";} /* icon-cylinder */
.alsResourceIcon.resType_5000200:before, .alsResourceIcon.mainClassId_5000200:before, .alsResourceIcon.partType_5000200:before, .alsResourceIcon.partType_5000200 > a > i.jstree-icon:before {content: "\e93a";} /* icon-screw */

.alsResourceIcon.machine:before {content: "\e919";}   /* icon-SGM-Q4 */
.alsResourceIcon.user:before {content: "\e965";}      /* icon-user */
.alsResourceIcon.periphery:before {content: "\e90e";} /* icon-periphery */
.listEntryIconLeft {width: 30px; margin-top: 2px; color: #555;}

.orderIcon:before {content: "\e94b";} /* default: icon-order */
.orderIcon.ordPassType_0:before {content: "\e94b";} /* icon-order */
.orderIcon.ordPassType_6:before {content: "\e960";} /* icon-orderIconInst */
.orderIcon.ordPassType_15:before {content: "\e95b";} /* icon-orderIconMuster */
.orderIcon.ordPassType_100:before {content: "\e95c";} /* icon-orderIconCollection */
.orderIcon.ordPassType_101:before {content: "\e95e";} /* icon-orderIconCombi */



/******************************************************************************************/
/* ***************** jsTree ***************** */
/******************************************************************************************/

/* größere Expand Pfeile damit im touch gut erwischt wird */

.jstree-default-large>.jstree-wholerow-ul.jstree-no-dots .jstree-ocl{width: 28px;}

/* Resource Type Icons -> alsMobile.css */
.jstree-icon.treeFolderIcon{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jstree-icon.treeFolderIcon:before{content: "\f07c";}

.panel-alsMobile .jstree-icon.treeFolderIcon{color:#ebb419;}

.jsTreeWrap{overflow-x: auto; overflow-y: hidden; /*margin-right: -35px;*/}
.menuCollapsed .jsTreeWrap{overflow-x: hidden;}
.jstree-default>ul{margin-left: -24px; width: calc(100% + 24px);}
.jstree-default-small>ul{margin-left: -18px;}
.treeFolderIcon{color: #E0C88D;}
.treeLeafIcon{ margin-right: 4px;}
.treeLeafIcon.all{ color: #e0a88d;}/* #8db2e0 #7fa7da*/
.jstree-default{text-shadow: none;}
.jstree-default .jstree-hovered{background: none; color: #fff; box-shadow: none;}
.jstree-default .jstree-clicked{background: #eee; color: #444;}
.jstree-default .jstree-clicked .treeFolderIcon{color:#5f81bf;}
.jstree-default .jstree-clicked .treeLeafIcon{color:#486190;}
/* Whole Row Plugin nutzen, damit auch weiter rechts selektiert werden kann, das gesamte Einfärben der Zeile aber verhindern */
.jstree-default .jstree-wholerow-hovered{background: none; color: #fff; box-shadow: none;}
.jstree-default .jstree-wholerow-clicked{background: none; color: #fff; box-shadow: none;}
.jstree-default > .jstree-wholerow-ul .jstree-hovered {background: none; color: #fff; box-shadow: none;}
.jstree-default > .jstree-wholerow-ul .jstree-clicked {background: #eee; color: #444; border-radius: 2px;}
.jstree-default .jstree-wholerow-clicked .treeFolderIcon{color:#5f81bf;}
.jstree-default .jstree-wholerow-clicked .treeLeafIcon{color:#486190;}
.jstree-default .jstree-search {font-style: italic; /*color: #65a765;*/ color: #ffffff; background: #5f81bf; font-weight: inherit;}
.jstree-default .jstree-search:hover {background: #3b5688; color: #ffffff !important;}

/* Layout Anpassungen für large theme (touch) */
.jstree-default-large .jstree-icon:empty {width: 24px;}
.jstree-default-large .jstree-node {min-width: 24px; margin-left: 24px;}

/* whole row select plugin: keine hintergrundfarbe der selektierten Reihe anzeigen*/
.jstree-default .jstree-wholerow-clicked{background: none;}

/******************************************************************************************/
/* ***************** ALS Mobile Bootstrap Extender ***************** */

.form-horizontal .checkbox, .form-horizontal .radio {min-height: 20px;}

/******************************************************************************************/
/******************************************************************************************/
/* ***************** ALS Mobile Bootstrap Responsive Extender ***************** */
/******************************************************************************************/
.visible-xxs{display:none;}
.visible-xxxs{display:none;}
.visible-xxxxs{display:none;}
@media screen and (max-width: 430px) /* Mobile Portrait*/ {
  .hidden-xxs{display:none; width: 0; padding: 0; opacity: 0;} /* trick width + padding : 0, falls die display property von wo anders her überschrieben wurde*/
  .visible-xxs{display:block;}
  .responsiveFontSize, .responsiveFontSize .dropdown-menu{font-size: small !important;}
  .progress.responsiveSize{height: 17px;}
  .progress.responsiveSize > .progress-bar{font-size: 11px; line-height: 17px;}
  .modal-title.responsiveFontSize{font-size: larger !important;}

  /* Erweiterung der Raster Umbrüche auf noch kleinere Devices. col-xxs-12 reicht, wir regulieren größer dann einfach mit col-cs-X */
  .col-xxs-12{width: 100%;}
}
@media screen and (max-width: 330px) /* Mobile Portrait*/ {
  .hidden-xxxs{display:none;}
  .visible-xxxs{display:block;}
}
@media screen and (max-width: 319px) /* Mobile Portrait (Iphone 4 + 5 melden 320px, sie rendern aber 640px */ {
  .hidden-xxxxs{display:none;}
  .visible-xxxxs{display:block;}
  .responsiveFontSize, .responsiveFontSize .dropdown-menu{font-size: smaller !important;}
}



/*************************************************************************
*************** ADDONS AOK, BEGINN 11.02.2020 - UNSTRUKTURIERT ***********
**************************************************************************/
.modalBodyNavpills {margin: 15px 0 15px} /* MaState.html */
.modalBodyInlineLblTxt {top: 14px} /* MaState.html */

/*************************************************************************
*************************** ADDONS / LIBRARIES ***************************
**************************************************************************/
.qrscanner{text-align: center;}
.qrscanner video {
  max-width: 95%;
  max-height: 75%;
}