@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: 26.07.2023
 */


/******************************************************************************************/
/* ***************** Typografie ***************** */
/******************************************************************************************/
a:hover {text-decoration: none;}
.d-flex {display: flex;}
.justify-content-between {justify-content: space-between;}
.align-items-center {align-items: center;}
.icon-min-width{width: 1.5em;}

/* 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;}*/
.tooltip-inner {background-color: #444; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #444; }
.tooltip.top .tooltip-arrow { border-top-color: #444; }
.tooltip.left .tooltip-arrow { border-left-color: #444; }
.tooltip.right .tooltip-arrow { border-right-color: #444; }


.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;}

.fontSizeSmaller{font-size: smaller}
.fontSizeSmall{font-size: small}

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

.hasLink {cursor: pointer;}

.float-left{float: left;}
.float-right{float: right;}

/* 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 */
.fa.als-icon-minwidth:before {min-width: 27px;}
.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);}

/* für Offline (CUA 0, 1, 5) signalisieren wir die Box gar nicht. */

.panel.cuaMode_2, .wpHeader.cuaMode_2 {box-shadow: 0 0px 4px 0 #005aa1, 0 2px 10px 0 #66b7f5;}

.panel.cuaMode_3, .wpHeader.cuaMode_3 {box-shadow: 0 0px 4px 0 #1c956a, 0 2px 10px 0 #5acda4;}

.panel.cuaMode_3_7, .wpHeader.cuaMode_3_7 {box-shadow: 0 0px 4px 0 #efc720, 0 2px 10px 0 #ffea93;}

.panel.cuaMode_4, .wpHeader.cuaMode_4 {box-shadow: 0 0px 4px 0 #ff2424, 0 2px 10px 0 #ff8f8f;}

.panel.cuaMode_6, .wpHeader.cuaMode_6 {box-shadow: 0 0px 4px 0 #07aacb, 0 2px 10px 0 #81eaff;}
/*.cuaMode_6:before{background: #0DCAF0; 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 ***************** */
/******************************************************************************************/
/* Lizenzbedingungen */
.noVolumeLicence .fa-barcode{display: none;}

.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), .noVolumeLicence .disabledWithoutVolumeLicence{opacity: 0.5;}
.disabled{cursor: not-allowed;}
.dropdown-menu>li.disabled:hover {
  background: inherit;
  cursor: not-allowed;
}
.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;}
.fa-0_9x {font-size: 0.9em;}

.text-center{text-align: center;}
.centerBlock{position: absolute; bottom: 50%; width: 100%;}
/* state of the art solution via flex 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 */

.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; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.fullscreen {position: fixed; top: 0; width: 100%;  height: 100%;}
/*
working example:
<div class="centerFullFitInParent">
  <span> full centered text </span>
</div>
*/
.successFeedbackOverlay{background: rgba(255,255,255,0.5); color: #555555; z-index: 10;}
/* Success Feedback Overlay nicht über das Menu blenden */
.hasMenu.menuOpen .successFeedbackOverlay.skipMenu{width: calc(100% - 365px); left: 365px;}
@media screen and (min-width: 1200px) {
  .hasMenu .successFeedbackOverlay.skipMenu{width: calc(100% - 365px); left: 365px;}
}

.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;}*/


/******************************************************************************************/
/* ***************** 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 {position: fixed; top:0; height: 46px; 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 a{color:#eee; text-decoration: none;}
.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:not(.topbarIconGroup) {width: 38px; font-size: 22px; padding: 8px 10px;}
}
@media screen and (max-width: 355px) { /* 355 */
  .topbarBtn:not(.topbarIconGroup) {width: 36px; font-size: 20px; padding: 10px 8px;}
}

.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);}

.topbarIconWithText{width: auto;}
.topbarIconGroup{float: left; color: #eee; font-size: 16px; white-space: nowrap; margin: 0.3em;}
.topbarIconTxt{font-size: 14px; cursor: default}
.topbarIconTxt:hover{color:#eee !important;}
.topbarLogonGroup{margin-top: 8px; font-style: italic; font-size: 14px; border-radius: 2em; box-shadow: inset 0 0 10px #383838; background: #808080;}
.topbarLogonGroup:hover{color: #eee !important; background: #808080 !important;}
.topbarLogonGroup a{padding: 6px; margin: -2px;}
.topbarLogonGroup a:hover{color: #fff !important;}
.topbarLogonGroup i{font-size: 16px; width: 16px; height: 16px}

/*.appContentPane  {position: fixed; top: 46px; height: calc(100% - 46px); width: 100%;}*/ /* position fixed aboids scrolling in mobiles but can not show bootstrap modals in it */
.appContentPane  {position: absolute; top: 46px; height: calc(100% - 46px); width: 100%;}

.subTopbar{margin: 0 -15px; padding: 4px 8px; line-height: 1.1; color: #484848; background-color:#ececec; border-bottom: 1px solid #d8d8d8; overflow: hidden;}
.subTopbarBrowsePath{line-height: 30px}
.subTopbarMargin{margin-top: 5px;}

/* Badges */
.topbarBtn.nolink{color: #333; cursor: default;}

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

#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*/

/* **** Scroll To Top im Menu - Vus.js/jquery directive *****/
.scroll-to-top-chevron{cursor: pointer; position: sticky; bottom: 10px; left: calc(100% - 26px); display:none; opacity:0.7; width: 20px; height: 20px;}
.scroll-to-top-chevron:hover{color: #fff;}

/* **** Scroll To Top Button Vus.js/jquery directive *****/
.scroll-to-top-button {cursor: pointer; position: sticky; bottom: 0; left: 100%; display:none; opacity:0.7; background: #fafafa;}
.scroll-to-top-button:hover {opacity:0.9;}
.scroll-to-top-button:active {opacity:0.7;}

/* *** 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: 1px; 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 !important; width: 30px; height: 42px; margin-right: 11px; text-align: center; }
.caret_right{cursor: pointer;}
.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;}
#menu .dropdown-menu{color:#555; text-shadow: none;}

/* 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;}

/* 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 td hr { margin-top: 3px; margin-bottom: 3px;}
.documents_table table{margin-bottom: 10px;}

.linkedTableCol, .linkedTableColWithoutIcon{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: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*/

/* Ressourcen Stückliste und ähnliche Tabellen */
.table > tbody > tr.partEntry > td{vertical-align: middle;}
.partEntry.markedRemoved{text-decoration: line-through; opacity: 0.5;}
.partEntryIconCol{width: 2em; max-width: 2em;}
.partEntryTags{width: 38px;}
.table>tbody>tr>td.partEntryTags{padding-left: 4px; padding-right: 4px;}

.table .innerTable{margin-top: 4px; margin-bottom: 0}
.table .innerTable>tbody>tr>td{padding-top: 4px; padding-bottom: 4px}
.table .innerTable>tbody>tr>td:last-child{padding-right: 0}

/* 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% - 72px)}
.wpHeaderResIconsRight{width: 72px;}
.wpHeaderResIcon{float: right;}
.wpHeaderResIcon:after{font-family: 'icomoon' !important; content: "\e96b";}
.wpHeaderResIcon.resType_100100:after{font-family: 'icomoon' !important; content: "\e93f";}

/* NavPanel (Tabs) */
.alsMobileNav{margin-top: 15px; margin-bottom: 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 *!*/
.alsMobileNav.alsMobileSubNav>li>a{padding: 8px 13px; }
/* Nav menu (Nav Pils) responsive anpassen */
@media screen and (max-width: 767px){
  .wpHeader{margin-bottom: 10px;}
  .alsMobileNav{margin-top: 10px; margin-bottom: 10px;}
  .fullscreenBelowTabMenu{top: 130px; height: calc(100vh - 130px);}
}
@media screen and (max-width: 430px){
  .alsMobileNav>li>a>.fa{font-size: 1.1em; min-width: 18px;}
  .alsMobileNav>li>a{padding: 9px 14px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 8px 13px;}
  .fullscreenBelowTabMenu{top: 128px; height: calc(100vh - 128px);}
}
@media screen and (max-width: 415px){
  .alsMobileNav>li>a{padding: 8px 13px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 7px 12px; }
  .fullscreenBelowTabMenu{top: 127px; height: calc(100vh - 127px);}
}
@media screen and (max-width: 395px){
  .alsMobileNav>li>a{padding: 8px 12px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 6px 11px; }
  .fullscreenBelowTabMenu{top: 126px; height: calc(100vh - 126px);}
}
@media screen and (max-width: 375px){
  .alsMobileNav>li>a{padding: 7px 11px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 6px 11px; }
  .fullscreenBelowTabMenu{top: 125px; height: calc(100vh - 125px);}
}
@media screen and (max-width: 355px){
  .alsMobileNav>li>a{padding: 7px 10px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 5px 9px; }
}
@media screen and (max-width: 340px){
  .alsMobileNav>li>a{padding: 6px 9px;}
  .alsMobileNav.alsMobileSubNav>li>a{padding: 5px 8px; }
  .fullscreenBelowTabMenu{top: 124px; height: calc(100vh - 124px);}
}

/* Umbrüche verhindern (aktuell max. 6 pills) */
.alsMobileNav>li>a{white-space: nowrap; overflow: hidden; }

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


.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;}
.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;*!}*/

.errorReasonPictogram{display: inline-block; border: 1px solid #cccccc; margin: 1px 0px -1px 1px; width: 14px; height: 14px; border-radius: 3px;}
.processStatePictogram{display: inline-block; border: 1px solid #cccccc; margin: 0 3px;  width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg);}
.errorReasonPictogram + .errorReasonText{display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: small; font-style: italic; margin-left: 3px; width: calc(100% - 25px);}
/* CUA Modes */
/** Konstante: CUAMODE undefiniert - schwarz */
/*.cuaMode_0{background: #808080; background: linear-gradient(to left, #adadad 0%,#000000 100%);}*/
/** Konstante: CUAMODE offline - grau (stateless + undefined zeigen wir in der terminalwelt auch grau )  */
.cuaMode_1, .cuaMode_5, .cuaMode_0{background: #808080; /*background: linear-gradient(to left, #cbcbcb 0%,#696969 100%); */}
.wpHeader.cuaMode_1, .wpHeader.cuaMode_5, .wpHeader.cuaMode_0{color: #eeeeee;}
/** Konstante: CUAMODE idle - blau */
.cuaMode_2{background: #0063B1; /* background: linear-gradient(to left, #66b7f5 0%,#005aa1 100%); */}
.wpHeader.cuaMode_2{color: #eeeeee;}
/** Konstante: CUAMODE auto -> gruen */
.cuaMode_3{background: #2BAD7F; /* background: linear-gradient(to left, #5acda4 0%,#1c956a 100%); */}
.wpHeader.cuaMode_3{color: #eeeeee;}
/** Konstante: CUAMODE auto + mamode2 7 = Produktion ohne Produktionsfreigabe -> gelb */
.cuaMode_3_7{background: #FFD93E; /* background: linear-gradient(to left, #ffea93 0%,#efc720 100%); */}
/** Konstante: CUAMODE alarm -> rot */
/*.cuaMode_4{background: #FF5208; background: linear-gradient(to left, #ff9898 0%,#d10000 100%);}*/
.cuaMode_4{background: #FF5353; /* background: linear-gradient(to left, #ff8f8f 0%, #ff2424 100%); */}
.wpHeader.cuaMode_4{color: #eeeeee;}
/** Konstante: CUAMODE stateless -> weiß */
/*.cuaMode_5{background: #FFFFFF; background: linear-gradient(to left, #ffffff 0%,#f2f2f2 100%);}*/
/** Konstante: CUAMODE rüsten -> cyan */
.cuaMode_6{background: #0DCAF0; /* background: linear-gradient(to left, #81eaff 0%,#07aacb 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;}
@media screen and (max-width: 430px){
  .panel{margin-top: 10px; margin-bottom: 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{position: relative; height: 4px; margin-bottom: 0; margin-top: 0.75em; border-radius: 0; overflow: visible; background: #d0d0d0; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: none;}
.panel-heading .progress{margin-top: 1.1em;}
.progress>.progress-bar{min-width: 1px; max-width: 100%; font-weight: bold; color: #fff; text-shadow: 0 0 3px #333333; box-shadow: none;}
.progress>.progress-text{position: absolute; top: -1.25em; width: 100%; text-align: center; font-size: 0.75em; font-weight: bold;}

/* Collapsible Panel Body */
.panel.collapsible > .panel-heading > .panel-title:after { font-family: FontAwesome; content: "\f077"; float: right; color: #555; transition: transform 0.4s ease;}
/*.panel.collapsible > .panel-heading.collapsed > .panel-title:after {content: "\f078";} !* ohne Animation *!*/
.panel.collapsible > .panel-heading.collapsed > .panel-title:after {transform: rotate(-180deg);} /* mit Animation (drehender Caret) */
.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 *** */
button.btn.iconPosCorrection{padding: 7px 11px 5px 13px;}
/*button.btn>i.fa{padding-left: 0.2em; padding-right: 0.2em;}*/
button.btn>i.fa + span{padding-left: 0.3em;} /* Wenn im Button Icon + Text ist, bekommt der Text ein Padding */
.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}

.iframeViewerCloseOverlayButton{position: absolute; bottom: 28px; right: 28px; opacity: 0.7; width: 46px; height: 46px; border-radius: 23px;}
.iframeViewerCloseOverlayButton: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: 6px}
.labelPaddingLeft, .paddingLeft{padding-left: 6px}
.btnPaddingBetween{padding-left: 6px; padding-right: 6px;}

.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{margin: 10px 0;}
  .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 .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{min-width: 39px;}
.input-group-sm .input-group-addon.btn{min-width: 33px;}
.input-group-addon.btn.btn-primary{color: #fff;}
.input-group-addon.btn.btn-primary{color: #fff;}
.input-group-addon.btnRoundBorderRight{border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important;}

/******************************************************************************************/
/* ***************** Dialoge, Modals, Alerts ***************** */
/******************************************************************************************/
.modal{overflow: auto;}
.modalTopInfo{ position: relative; padding: 0.5em 0;}
.modalTopInfoIcon{ float: right; width: 1em; margin-left: 0.25em; font-size: 2em; color: #555;}
.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;}
}

.modalBodyNavpills {margin: 15px 0 15px}
.modalBodyInlineLblTxt {top: 14px} /* MaState.html */

/* History Entry Modal etw. breiter, auch damit Freitext TextArea ähnlich wie im ALS Client */
@media (min-width: 768px){#history-modal .modal-dialog {width: 700px;}}

/* 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 - ALS Mobile Ergänzungen */
.alert-sm{padding: 0.75em;}

.alert-gray {
  color:            #696767;
  background-color: rgba(235, 235, 235, 0.78);
  background-image: linear-gradient(to bottom,#f6f6f6 0,#e6e6e6 100%);
  border-color:     #cbcbcb;
}

.alert-white {
  color:            inherit;
  background-color: #f9f9f9;
  background-image: linear-gradient(to bottom,#f6f6f6 0,#fefefe 100%);
  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 */
.panel-heading + .list-group{border-top-left-radius: 0;}
.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;}
.list-group-item {overflow: hidden;}
.list-group-item > .cuaMode{position: absolute; height: 100%; width: 6px; top: 0; left: 0;}

/* *** Forms, Formgroups, Inputgroups *** */
.input-group-margin{margin: 3px;}
.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{width: 100%;} /* Sonderfall für Combobox wenn die Input Group außerhalb Combobox Komponente gebaut wird */
.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:not(.bootstrap-datetimepicker-widget){width: 100%; max-height: 21em;}
.modal.additionalModalBackground{background: rgba(0,0,0,0.2)} /* Bei überlagerten Modals erhält der hintere Modal dadurch eine dunkle Schattierung */
.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{min-height: 34px; 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;
}

.hoverColorSelection>div>div>.dropdown-menu>li>a:focus, .hoverColorSelection>div>div>.dropdown-menu>li>a:hover {
  /*filter: brightness(80%);*/ /* breaks layout of child checkmark*/
  background-image: none;
}

/* ALS Tags */

.form-control.tagPanel{height: auto; width: 100%; max-width: 100%; display: inline-flex; flex-wrap: wrap; padding: 6px 6px;}
/*.tag-span {width: 18px; height: 18px; display: inline-block; position: absolute; border-radius: 50%; border: 2px solid #fefefe;}*/
.tag-span {width: 16px; height: 16px; display: inline-block; position: absolute; border-radius: 50%; border: 1px solid #f8f8f8;}
.tag-sel-span { padding: 0.5em; border-radius: 5px; margin: 0.2em; line-height: 108%; white-space: nowrap; text-shadow: none;}
.tag-sel-span:hover { filter: brightness(80%); cursor: pointer; }
/* Responsive für SMARTPHONE */
@media screen and (max-width: 767px){
  .tag-sel-span {font-size: small; padding: 0.4em;}
}

.dropdownSelect.als_tags li{padding: 4px 10px;}
.dropdownSelect.als_tags li>a{padding: 4px;}
.dropdownSelect.als_tags .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {margin-top: 0;}
.responsiveTagsFilter>.operatorChooser, .responsiveTagsFilter>.tagsChooser{float: left; width: 100%;}
/*.tagsChooser .dropdown-menu>li{width: fit-content;}*/
@media screen and (min-width: 430px) {
  .responsiveTagsFilter>.operatorChooser{width: 120px;}
  .responsiveTagsFilter>.tagsChooser{width: calc(100% - 120px);}
}

/* *** Input Validation *** */
.validationError{box-shadow: 0px 0px 8px #d9534f; background: #fff3f3; border-color: #eba2a2;}


/******************************************************************************************/
/* ***************** 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:not(.noMinWidth), .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:  linear-gradient(to bottom, #f8f8f8 0%, #eeeeee 100%);
  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; padding-right: 6px }
.panel-alsMobile .btn-default {
  text-shadow:      0 1px 0 #fff;
  background-image: linear-gradient(to bottom, #fff 0, #e5e5e5 100%);
}
.panel-alsMobile .btn-default:hover {
  background-color: #eaeaea;
  background-position: 0 0;
  background-image: linear-gradient(to bottom, #f8f8f8 0%, #e0e0e0 100%);
}
.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:  linear-gradient(to bottom, #f0f0f0 0%, #e8e8e8 100%);
}

/*.panel-heading .list-group-item-icon.fa-chevron-down{font-size: 1.1em;}*/
.panel-heading .list-group-item-icon.fa-chevron-circle-down:before {transition: transform 0.4s ease; float: right;}
.panel-heading:not(.collapsed) .list-group-item-icon.fa-chevron-circle-down:before {transform: rotate(180deg);}

.btnDefaultBackground{background-image: linear-gradient(to bottom, #fff 0, #e5e5e5 100%);}


.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.lightgray > .list-group-item{background-color: #f4f4f4;}
.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; }
.list-group-item > .panel-heading.hasLink {margin: -10px -15px; padding: 10px 15px;} /* größere verlinkte klickbare Fläche */

.panel-body .panelExpandBtn{color: #555; width: 100%; text-align: center; margin:-6px 0; padding: 6px; min-height: 32px;}
.panel-body .panelExpandBtn:hover{color: #222; font-weight: bold; cursor: pointer;}

.panel-body .panelExpandBtn:after {position: absolute; left: calc(50% - 0.5em); transition: transform 0.4s ease; font-family: FontAwesome; content: "\f077"; text-align: center;}
.panel-body .panelExpandBtn.collapsed:after {transform: rotate(-180deg)}
.panel-body.collapsing{overflow: hidden;}
/*.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.partType_5000000:before, .alsResourceIcon.mainClassId_5000000:before {content: "\e933";} /*icon-fhm3*/
.alsResourceIcon.PERIPHERY:before {content: "\e90e";} /*icon-periphery*/
.alsResourceIcon.resType_600000:before, .alsResourceIcon.partType_600000:before, .alsResourceIcon.partType_690000:before, .alsResourceIcon.mainClassId_600000:before {content: "\e90e";} /*icon-periphery*/
.alsResourceIcon.resType_20000000:before, .alsResourceIcon.mainClassId_20000000:before {content: "\e952";} /*icon-material4*/
.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: "\e96d";} /* icon-sgm_8 */
.alsResourceIcon.resType_100100:before, .alsResourceIcon.mainClassId_100100:before, .alsResourceIcon.mainClassId_100100 > a > i.jstree-icon:before, .alsResourceIcon.partType_100100:before  {content: "\e93f";} /* icon-manual_wp */
.alsResourceIcon.resType_100200:before, .alsResourceIcon.mainClassId_100200:before, .alsResourceIcon.mainClassId_100200 > a > i.jstree-icon:before {content: "\e96d";} /* icon-sgm_8 */

.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: "\e96d";}   /* icon-sgm_8 */
.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-top: 5px; /*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;}

.btn-group-responsive > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

@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 > .progress-text{font-size: 0.65em;}
  .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;}
}

@media screen and (min-width: 1200px) /* larges */ {
  .btn-group-responsive > .btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
  }
}


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