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


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

.padding-left{padding-left: 0.5em;}
.padding-right{padding-right: 0.5em;}

.hidden{display: none;}
.shown{display: block;}
.textAlignRight{text-align: 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;}

.errorHeading{color: #A94442;}

/* ICONS */
/*.fa, [class^="icon-"], [class*=" icon-"] {line-height: inherit;} /* Icons Line Height ist sonst auf 1 */
.iconHeightInherit{line-height: inherit;}

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

/* 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;}
/******************************************************************************************/
/* ***************** Generals / helpers ***************** */
/******************************************************************************************/
.fontWeightNormal{font-weight:normal;}
.safariIFrameWidth{width: 1px; min-width: 100%}
.overflowscroll{overflow: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
.disabled, .form-control[disabled]{opacity: 0.5;}

.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;}
/* 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;}
.centerBlock{position: absolute; top: 50%; top: calc(50% - 28px); 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; }
.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) */
.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;}
/*.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 { 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;}
/*.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);}

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

#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 */
}
/* 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>.fa{min-width: 1.4em; text-align: center; font-size: 1.2em} /* 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{}

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

/* wpHeader = Header Panel der aktuelle ausgewählten Maschine (workingPlace) - gray on top under topbar */
.wpHeader + .panel{margin-top: 20px;}
.subTopbar{margin: 0 -15px; padding: 5px 8px 4px 8px; line-height: 1.1; color: #484848; background-color:#ececec; border-bottom: 1px solid #d8d8d8; } /*wpHeader im Content Flow*/
.wpHeader{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*/
.wpHeader:after{font-family: 'icomoon' !important; content: "\e919"; float: right;}
.wpHeader.resType_100100:after{font-family: 'icomoon' !important; content: "\e93f"; float: right;}

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


/******************************************************************************************/
/* ***************** Panels, Buttons, Labels ***************** */
/******************************************************************************************/
.panel{margin-top: 15px;}
.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}
.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 *** */
.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}

/* 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: 3px}
.labelPaddingLeft, .paddingLeft{padding-left: 3px}
.btnPaddingBetween{padding-left: 3px; padding-right: 3px;}

.btn-als-xs {padding: 3px 6px; /*line-height: 1.5;*/ /*width: 28px;*/ height: 28px; /*border-radius: 3px;*/}
.btn-als-xs .fa {width: 14px; height: 14px;}
.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 2px;}
.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; }

/******************************************************************************************/
/* ***************** Dialoge, Modals, Alerts ***************** */
/******************************************************************************************/
.modal{overflow: auto;}

/* 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}
.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 > button, .alsMobileAlertBtnPanel > button {min-width: 150px} }
.alsMobileAlertBtnPanelLeft{text-align: left}
.alsMobileAlertBtnPanelLeft > button{margin-right: 10px; margin-top: 15px; min-width: 50px}
.alsMobileAlertBtnPanelLeft > form{margin-top: 15px; min-width: 50px}

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

/*.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.05); z-index: 1050; display:none;}
#loadingOverlay{height: calc(100% - 46px); top: 46px;} /* when topbar shall be accessible in loading mode */
.loadingIconPanel{padding: 55px 40px 25px 40px; border-radius: 10px; background: #f5f5f5; background: rgba(240,240,240,0.7); border: 1px solid rgba(200,200,200,0.2);}
/*.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);}*/
.loadingIcon{opacity: 0.7}

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


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

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


/* Bootstrap Dropdown Select Extension mit caret immer ganz rechts*/
.modal .dropDownButton{width: 100%;}
.modal .dropdown-menu{width: 100%; max-height: 21em;}

.dropdownSelect .dropdownSelectMenuItem{min-height: 28px;}
.dropdownSelect .dropDownButton{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{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;}

/* *** 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 { 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; }
.panel-alsMobile.collapsible > .panel-heading:hover { cursor: pointer; background-color: #eaeaea; background-position: 0 -15px; /*border-color: #adadad;*/ }
.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 { 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;}

.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 {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"; }
.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.partType_1000101:before, .alsResourceIcon.partType_1000101 > a > i.jstree-icon:before {content: "\e924";} /* icon-WZ_kombi */             /* Kombi WZ */

.alsResourceIcon.resType_1000102:before, .alsResourceIcon.partType_1000102:before, .alsResourceIcon.partType_1000102 > a > i.jstree-icon:before {content: "\e94c";} /* icon-kombiMaster */     /* Stammform */
.alsResourceIcon.resType_1000103:before, .alsResourceIcon.partType_1000103:before, .alsResourceIcon.partType_1000103 > a > i.jstree-icon:before {content: "\e94e";} /* icon-kombiInset */      /* Einsatz */
.alsResourceIcon.resType_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.partType_5000100:before, .alsResourceIcon.partType_5000100 > a > i.jstree-icon:before {content: "\e93b";} /* icon-cylinder */
.alsResourceIcon.resType_5000200:before, .alsResourceIcon.partType_5000200:before, .alsResourceIcon.partType_5000200 > a > i.jstree-icon:before {content: "\e93a";} /* icon-screw */



/******************************************************************************************/
/* ***************** 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;}
  .visible-xxs{display:block;}
  .responsiveFontSize, .responsiveFontSize .dropdown-menu{font-size: small;}
}
@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;}
}

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