@import url('https://fonts.googleapis.com/css?family=Abel');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;  
    font-family:  'Abel', 'Lato', 'Arial', 'sanserif';
}

body, html{
    background-color: #ccc;
    height: 100%;
}

.showWhenFM{
    display: none;    
}

.tableFlex.auftragAnsicht.preise .preis_rabatt {
 color: crimson;
}
.tableFlex.auftragAnsicht.preise .preis_rabatt > .rightContent_float{
  text-align: right;
    padding-right: 5px;  
}

.content.main{
    height: 100%; 
    display: flex;
    flex-flow: column wrap;
    align-items: stretch; 
    align-content: stretch; 
}

.menueMain.head{
    background-color: #3e3e3e;
    order: 1;  
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 320px;
}

.headitem{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;
    position: relative;
}

.menueMain.child{
    width: 190px;  
    display: flex;
    flex-flow: column nowrap;
}

.content.child{
    order: 2;
    height: 100%;
    flex: 2;
    display: flex;  
}

.contentdata{ 
    flex: 2; 
    background-color: #f0f0f0;
    overflow: auto;
    box-shadow: inset 3px 3px 3px -2px rgba(180, 180, 180, 1);
    min-width: 155px;
}

.menueHeader.head{
    min-width: 113px;
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 16px; 
    position: relative;
    display: inline-block;
    padding: 10px;
    padding-top: 9px;
    text-align: center;
    color: #f0f0f0;
    background-repeat: repeat-x;
    border-right: 1px solid #5b5b5b;
    order: 1;
}

.activeMenue{
    color: #444444 !important;
    background-color: #e1e1e1 !important;
    font-weight: 300 !important;
    background-image: url('../images/menueitems/mainpointmenue.png') !important;
    background-repeat: repeat-x !important;
    box-shadow: -30px 0 80px -30px #ffffff !important;
}

.menueHeader.sub{
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    position: relative;
    background-color: #e1e1e1;
    color: #444444;
    padding-right: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    z-index: 200;
    height: 33px;
    flex: 2 0 100%;
    order: 2;  
    display: none; 
    min-width: 320px;
}

.menueHeader.child{
    overflow: auto;
    max-height: 100%;
    display: none;
    align-items: stretch;
    flex-wrap: wrap;
    order: 1;
    flex: 2 0 auto;
}

.menuePunkt{
    flex: 1 0 100%;  
}

.menuePunkt, .cursorHand{
    cursor: pointer !important;  
}

.menuePunkt > .headitem{
    background-image: url('../images/menueitems/pointofmenue.png');
    color: #ffffff;
    background-repeat: repeat-x;
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    line-height: 36px;
    padding-left: 10px;
}

.menuePunkt.sub > .headitem{
    background-image: url('../images/menueitems/pointofmenuesub.png');
    color: #444444 !important;
}

.menuePunkt.sub.open > .headitem{
    color: #ffffff !important;
}
.menuePunkt.sub.open.leaf > .headitem{ 
    background-image: url('../images/menueitems/pointofmenuesub.png');
    color: #ffffff !important;
}
.menuePunkt.open > .headitem{
    background-image: url('../images/menueitems/pointofmenueopen.png');
}
.menuePunkt.open.leaf > .headitem{
    color: #000 !important; 
    background-image: url('../images/menueitems/pointofmenue.png');
}
.menuePunkt > .subitems{
    height: 0px;
    overflow: hidden;  
    transition: height 0.2s ease-in-out;
}

#verlauf{
    flex: 0 2 100%;
    order: 5;
    background-image: linear-gradient(#484848 40px, #2a2b2d 100%);
}

.fontBold{
    font-weight: 700;
    color: #ffffff;
}

.hideSearchString, .sortInfo, .hideOption{
    display: none;
}

.menuePunkt > .headitem.subChilds{
    color: #fefefe !important;
}

.dreieck{
    display: inline-block;
    visibility: hidden;
    width: 0px;
    height: 0px;
    margin-right: 4px;
    margin-bottom: 1px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 4px 0 4px 4.1px;
    border-color: transparent transparent transparent #fdfdfd;
}

.tableFlex {
    margin-top: 20px;
    display: flex; 
    flex: 0 1 auto;    
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 16px;     
    flex-wrap: nowrap;   
}

.tableFlex.kundeAnsicht input{
    border: none;
    border-bottom: solid 1px #cfcfcf;  
    margin-bottom: 1px;
    background: none;  
    outline: none;
    width: 70%;
}
.tableFlex.kundeAnsicht input:focus{
    margin-bottom: 1px;
    border-bottom: solid 1px #333;   
    position: relative;
}

.tableFlex.kundeAnsicht{
    flex-wrap: wrap;   
    max-width: 700px;
}

.tableFlex.kundeAnsicht .rowFlex{
    display: flex;  
    flex: 0 0 50%; 
    align-content: flex-start;
    flex-wrap: wrap;
    margin: 0 auto;
    min-width: 280px;
}

.tableFlex.kundeAnsicht .rowflex h3{
    flex: 0 0 100%;   
    text-align: center;
    padding-bottom: 10px;
}

.tableFlex.kundeAnsicht .rowFlexAll{
    display: flex;  
    flex: 0 0 100%; 
    align-content: flex-start;
    flex-wrap: wrap; 
    padding-bottom: 20px;
}

.tableFlex.kundeAnsicht .rowFlexAll button{
    margin: 0 auto;
    padding: 4px;
}

.tableFlex.kundeAnsicht .rightContent {
    flex: 1 1 60%;
    padding: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tableFlex.kundeAnsicht .rightContent .smallFLex{
    width: 15%;
}

.tableFlex.kundeAnsicht .rightContent .hoeheFLex{
    height: 50px;
}

.tableFlex.kundeAnsicht .leftContent{
    flex: 1 0 40%; 
    text-align: right;
    padding: 5px;  
    align-items: center;
}

.tableFlex.kundeAnsicht .abstandRow{
    padding-bottom: 35px;
}

.einzel_preislinie{
    border-bottom: 1px solid #000;
}
.doppel_preislinie{
    border-bottom: 4px double #000;
}

.tableFlex.login{ 
    margin-left: auto; 
    margin-right: auto;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
    background-color: #efefef;
    flex-wrap: wrap;     
    flex: 0 1 90%; 
    width: 90%;
    justify-content: center;
    max-width: 1200px;
    min-width: 200px;
}
.tableFlex.login input {
    border: none;
    font-size: 1.2em;
    border-bottom: solid 1px #cfcfcf; 
    margin-bottom: 1px;
    margin-top: 1px;
    background: none;
    outline: none;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}
.tableFlex.login .rowFlex{
    display: flex;  
    flex: 0 1 100%; 
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
}
.tableFlex.login input:focus{
    margin-bottom: 1px;
    border-bottom: solid 1px #333;   
    position: relative;
}
.tableFlex.login > div img, .tableFlex.login > div div, .tableFlex.login > div form {
    margin: 20px !important; 
    padding: 20px !important; 
    text-align: center;
}
.tableFlex.login > div img{
    flex: 0 1 100%;
    order: 1;
    width: 100%;
    align-self:flex-start;
    max-width: 700px;
}
.tableFlex.login > div div {
    flex: 0 1 100%;
    order: 2;
    max-width: 700px;
}
.tableFlex.login > div form {
    padding-left: 0px !important;
    padding-right: 0px !important;flex: 0 1 100%;
    order: 3;
    max-width: 700px;
}

.tableFlex.login > div form .button {
    outline: none;
    *box-shadow: 0px 0px 2px 1px rgba(150,150,150,0.25);
    box-shadow: 0 2px 1px -2px gray;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: relative;
    margin: 0px;
    padding: 3px;
    border: solid 1px #aaa;
    border-radius: 2%;
    margin-top: 20px;
    margin-bottom: 1px;
    max-width: 200px;
}

.tableFlex.login > div form .button:hover {
    outline: none;
    background: #f0f0f0;
    *box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0 2px 1px -2px black;
    border: solid 1px #000;
}




.tableFlex.auftragAnsicht{
    flex-wrap: wrap;     
    flex: 0 0 100%; 
    justify-content: space-between;
}
.tableFlex.auftragAnsicht.preise{
    flex-flow: row nowrap;
}
.tableFlex.auftragAnsicht .rowFlex{
    flex: 0 0 265px; 
    min-width: 265px;
    align-content: flex-start;
    flex-wrap: wrap;
    display: flex;   
    margin-right: 10px;
}
.tableFlex.auftragAnsicht .rowFlex.system180{
    *border: 1px solid #000;
    box-shadow: 0 0px 2px 1px rgba(0,0,0,0.15);
    background-color: #fefefe;
    margin-left: 10px;
    margin-right: 0;    
    align-self: flex-start;
    padding: 4px;
}

.tableFlex.auftragAnsicht .rowFlex.system180 > div{
    *font-size: 13px;
}

.tableFlex.auftragAnsicht .fieldset.rowFlex{
    flex: 0 1 100%;
    margin-right: 0;
    justify-content: center;
}

.tableFlex.auftragAnsicht .fieldset .rowFlex{
    background-color: #fefefe;  
    flex: 0 1 100%;
    min-width: 250px; 
    max-width: 480px;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
    margin-right: 0;
    margin-bottom: 20px;
    padding: 10px;
}

.tableFlex.auftragAnsicht .fieldset, .tableFlex.auftragAnsicht .fieldset > div{
    padding-bottom: 10px !important; 
}


.tableFlex.auftragAnsicht .fieldset .rightContent {
    flex: 0 1 25%;
    padding: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
 max-width: none;
 text-align: left;
    min-width: 25%;
}

.tableFlex.auftragAnsicht .fieldset .leftContent{
    flex: 1 0 75%; 
    text-align: right;
    padding: 5px;  
    align-items: center;
max-width: none;
 text-align: left;
    min-width: 75%;
}
.tableFlex.auftragAnsicht .fieldset .noFiles{
    flex: 0 0 100%;   
    text-align: center;
    padding-bottom: 10px;
}


.tableFlex.auftragAnsicht .rowflex h3, .tableFlex.auftragAnsicht .rowflex legend{
    flex: 0 0 100%;   
    text-align: center;
    padding-bottom: 10px;
}

.tableFlex.auftragAnsicht .rowflex legend{
    padding-right: 4px;
    padding-left: 4px;
}

.tableFlex.auftragAnsicht .rowFlexAll{
    display: flex;  
    flex: 0 0 100%; 
    align-content: flex-start;
    flex-wrap: wrap; 
    padding-bottom: 10px;
}

.tableFlex.auftragAnsicht .rowFlexAll button{
    margin: 0 auto;
    padding: 4px;
}

.tableFlex.auftragAnsicht .rightContent {
    *font-size: 13px;
    flex: 0 1 51%;
    max-width: 51%;
    padding-right: 5px;  
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tableFlex.auftragAnsicht .rightContent .smallFLex{
    width: 30px;
    max-width: 30px;
}

.tableFlex.auftragAnsicht .rightContent .hoeheFLex{
    height: 50px;
    max-height: 50px;
}

.tableFlex.auftragAnsicht .leftContent{
    *font-size: 13px;
    padding-bottom: 1px;
    flex: 0 0 49%;    
    max-width: 50%;
    min-width: 49%;
    text-align: right;
    padding-right: 5px;  
    align-items: center;
}

.tableFlex.auftragAnsicht .abstandRow{
    padding-bottom: 35px;
}

.tableFlex.auftragAnsicht input, .tableFlex.auftragAnsicht select{
    *font-size: 13px;
    align-self: stretch;
    border: none;
    border-bottom: solid 1px #cfcfcf;  
    background: none;  
    outline: none;
    flex: 1;
    width: 0;
    padding-left: 4px;
}
.tableFlex.auftragAnsicht .optionZeile select{
    width: auto;
}
.tableFlex.auftragAnsicht input:disabled, .tableFlex.auftragAnsicht select:disabled{
    *font-size: 13px;
    align-self: stretch;
    text-decoration: none;
    border: none;
    filter: brightness(200%);
    border-bottom: solid 1px transparent;  
}

.tableFlex.auftragAnsicht .fieldset input:disabled, .tableFlex.auftragAnsicht .fieldset select:disabled{
    *font-size: 13px;
    align-self: stretch;
    text-decoration: none;
    border: none;
    filter: brightness(-200%);
    border-bottom: solid 1px transparent;  
}

.tableFlex.auftragAnsicht  .positionAnsichtHead, .tableFlex.auftragAnsicht  .artikelAnsichtHead{
    background-color:#e1e1e1; 
}
.tableFlex.auftragAnsicht .position, .tableFlex.auftragAnsicht  .positionAnsichtHead, .tableFlex.auftragAnsicht .artikel, .tableFlex.auftragAnsicht  .artikelAnsichtHead {
    display: flex;
    margin-bottom: 5px; 
    box-shadow: 0 2px 1px -1px gray;
}
.containerTab .sub .positionAnsichtGesamt , .tableFlex.auftragAnsicht  .positionAnsichtHead, .containerTab .sub .artikelAnsichtGesamt , .tableFlex.auftragAnsicht  .artikelAnsichtHead{
    width: 100%; 
    overflow-y: scroll; 
    scrollbar-base-color: #fefefe;
}
.containerTab .sub .positionAnsichtGesamt , .containerTab .sub .artikelAnsichtGesamt {
    flex: 1;
}
.containerTab .sub .positionAnsichtGesamt::-webkit-scrollbar, .tableFlex.auftragAnsicht  .positionAnsichtHead::-webkit-scrollbar, .containerTab .sub .artikelAnsichtGesamt::-webkit-scrollbar, .tableFlex.auftragAnsicht  .artikelAnsichtHead::-webkit-scrollbar {
    background-color: #fefefe;
}
.containerTab .sub .positionAnsichtGesamt::-webkit-scrollbar-thumb, .tableFlex.auftragAnsicht  .positionAnsichtHead::-webkit-scrollbar-thumb, .containerTab .sub .artikelAnsichtGesamt::-webkit-scrollbar-thumb, .tableFlex.auftragAnsicht  .artikelAnsichtHead::-webkit-scrollbar-thumb {

    background-color: #8e8e8e;
}

.tableFlex.auftragAnsicht  .positionAnsichtHead::-webkit-scrollbar, .tableFlex.auftragAnsicht  .artikelAnsichtHead::-webkit-scrollbar {
    background-color: #e1e1e1;
}
.tableFlex.auftragAnsicht  .positionAnsichtHead::-webkit-scrollbar-thumb, .tableFlex.auftragAnsicht  .artikelAnsichtHead::-webkit-scrollbar-thumb {
    background-color: #8e8e8e;
}
.tableFlex.auftragAnsicht .position > div, .tableFlex.auftragAnsicht  .positionAnsichtHead > div, .tableFlex.auftragAnsicht .artikel > div, .tableFlex.auftragAnsicht  .artikelAnsichtHead > div  { 
    padding-left: 2px;
    padding-right: 2px;
    word-break:break-all;
    max-height: 100px;
    overflow: hidden;
}

.tableFlex.auftragAnsicht .position > div img, .tableFlex.auftragAnsicht  .positionAnsichtHead > div img, .tableFlex.auftragAnsicht .artikel > div img, .tableFlex.auftragAnsicht  .artikelAnsichtHead > div img { 
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.tableFlex.auftragAnsicht .position > div:nth-child(1), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(1)  { 
    flex: 0 1 35px;  
    max-width: 35px;
    text-align: right;
}
.tableFlex.auftragAnsicht .position > div:nth-child(2), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(2) { 
    flex: 0 1 65px;
    max-width: 65px;
    text-align: right;
}
.tableFlex.auftragAnsicht .position > div:nth-child(3), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(3) {  
    flex: 1;
    max-width: 80px;
    width: 100%;
    position: relative;

}
.tableFlex.auftragAnsicht .position > div:nth-child(4), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(4) {  
    flex: 3;
}
.tableFlex.auftragAnsicht .position > div:nth-child(5), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(5) {   
    flex: 3;
}
.tableFlex.auftragAnsicht .position > div:nth-child(6), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(6) {  
    flex: 0 1 40px;
    max-width: 40px;
    text-align: right;
}
.tableFlex.auftragAnsicht .position > div:nth-child(7), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(7) {  
    flex: 0 1 100px;     
    max-width: 100px;
    text-align: right;
}
.tableFlex.auftragAnsicht .position > div:nth-child(8), .tableFlex.auftragAnsicht  .positionAnsichtHead > div:nth-child(8) {  
    flex: 0 1 100px;     
    max-width: 100px;
    text-align: right;    
    padding-right: 2px;
}

.tableFlex.auftragAnsicht .rightContent.leftsmall {
    *font-size: 13px;
    flex: 0 1 61%;
    max-width: 60%;
    padding-right: 5px;  
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.tableFlex.auftragAnsicht .leftContent.leftsmall {
    *font-size: 13px;
    padding-bottom: 1px;
    flex: 0 0 39%;    
    max-width: 40%;
    min-width: 35%;
    text-align: right;
    padding-right: 5px;  
    align-items: center;
}






.stuecklisteAnsicht{
    min-height: 0;
    display: flex;
    flex-direction: column;   
    height: 100%;
    width: 100%;
}

.stuecklisteAnsicht  .stuecklistenAnsichtHead{
    background-color:#e1e1e1; 
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 100%;
    min-height: 0;
    height: 30px;
    max-height: 30px;
    width: 100%;
    align-items: center;
}
.stuecklisteAnsicht .stueckliste, .stuecklisteAnsicht  .stuecklistenAnsichtHead {
    box-shadow: 0 2px 1px -1px gray;
}
.tableFlex.stuecklisteAnsicht  .stuecklistenAnsichtGesamt , .stuecklisteAnsicht  .stuecklistenAnsichtHead{
    overflow-y: scroll; 
    scrollbar-base-color: #fefefe;
}
.stuecklisteAnsicht .stuecklistenAnsichtGesamt {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
}
.stuecklisteAnsicht .stuecklistenAnsichtGesamt::-webkit-scrollbar, .stuecklisteAnsicht  .stuecklistenAnsichtHead::-webkit-scrollbar{
    background-color: #fefefe;
}
.stuecklisteAnsicht .stuecklistenAnsichtGesamt::-webkit-scrollbar-thumb, .stuecklisteAnsicht  .stuecklistenAnsichtHead::-webkit-scrollbar-thumb {

    background-color: #8e8e8e;
}

.stuecklisteAnsicht  .stuecklistenAnsichtHead::-webkit-scrollbar {
    background-color: #e1e1e1;
}
.stuecklisteAnsicht  .stuecklistenAnsichtHead::-webkit-scrollbar-thumb{
    background-color: #8e8e8e;
}
.stuecklisteAnsicht .stueckliste  { 
    flex: 0 1 100%;
    min-height: 0;
    padding:5px;
    width: 100%;
    display: flex;
}


.stuecklisteAnsicht .stueckliste > div, .stuecklisteAnsicht  .stuecklistenAnsichtHead > div { 
    padding-left: 2px;
    padding-right: 2px;
    word-break:break-all;
    overflow: hidden;
}

.stuecklisteAnsicht .stueckliste > div:nth-child(1), .stuecklisteAnsicht  .stuecklistenAnsichtHead > div:nth-child(1)  { 
    flex: 0 1 70px;  
    max-width: 70px;
    text-align: right;
}
.stuecklisteAnsicht .stueckliste > div:nth-child(2), .stuecklisteAnsicht  .stuecklistenAnsichtHead > div:nth-child(2) { 
    flex: 0 1 120px;
    max-width: 120px;
    text-align: right;
}
.stuecklisteAnsicht .stueckliste > div:nth-child(3), .stuecklisteAnsicht  .stuecklistenAnsichtHead > div:nth-child(3) {  
    flex: 1;
    padding-left: 20px;
    max-width: 500px;
    text-align: left;
    position: relative;
}







.tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(1)  { 
    flex: 1; 
    max-width: 110px; 
    width: 100%;
}
.tableFlex.auftragAnsicht .artikel > div:nth-child(1)  { 
    flex: 1;
    max-width: 110px;
    min-width: 50px;
    min-height: 45px;
    max-height: 65px;
    text-align: center;
    width: 100%;
    position: relative;

}
.tableFlex.auftragAnsicht .artikel > div:nth-child(2), .tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(2) { 
    flex: 0 1 75px;
    max-width: 75px;
    text-align: right;
    padding-right: 6px;
}
.tableFlex.auftragAnsicht .artikel > div:nth-child(3), .tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(3) {  
    flex: 1;
}
.tableFlex.auftragAnsicht .artikel > div:nth-child(4), .tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(4) {  
    flex: 3;
}
.tableFlex.auftragAnsicht .artikel > div:nth-child(5), .tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(5) {   
    flex: 0 1 110px;     
    max-width: 110px;
    text-align: right;    
    padding-right: 2px;
}
.tableFlex.auftragAnsicht .artikel > div:nth-child(6), .tableFlex.auftragAnsicht  .artikelAnsichtHead > div:nth-child(6) {  
    flex: 1;
    min-width: 250px;    
    text-align: center; 
    vertical-align: top;
}

.tableFlex.auftragAnsicht input:focus{
    border-bottom: solid 1px #333;   
    position: relative;
}

.tableFlex.auftragAnsicht.containerTab .suchFeld{
    height: 24px;
    width: auto;
    text-align: right;
    padding-right: 0px;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    background-color: #dcdcdc;
    border: none;
    border-bottom: 1px solid #afafaf;
    outline: none;
}

.tableFlex.auftragAnsicht.containerTab .suchFeld:focus{
    background-color: #ececec;
    border-bottom: 1px solid #222;
}


.tableFlex.auftragAnsicht input.right{
    text-align: center;
    padding-right: 4px;
    padding-left: 4px;
}

.tableFlex.auftragAnsicht.preise input {
    text-align: right;
    margin-right: 2px;
    text-align: right; 
    width:80px; 
}
.tableFlex.auftragAnsicht.preise, .tableFlex.auftragAnsicht.preise .rowFlex {
    justify-content: flex-end;
}


.tableFlex.auftragAnsicht.preise .rowFlex > div{
    display:block;
    padding-top: 0px; 
    font-size: 14px; 
    line-height: 15px;
}
.tableFlex.auftragAnsicht.preise .leftContent_float {
    float: left; 
    width: 135px;    
    display:block;
    max-width:none;
    padding: 3px;     
    *font-size: 13px;
}
.tableFlex.auftragAnsicht.preise .rightContent_float {
    float: left; 
    width: 100px;    
    display:block;
    max-width:none;
    padding: 3px;
    *font-size: 13px;
    text-align: right;
    align-self: stretch;
}





.tableFlex.artikelAnsicht{
    align-content:center;
    justify-content: space-around;
    flex-wrap: wrap;
    display: flex;   
    margin: 20px;
}

.tableFlex.artikelAnsicht .rowFlex.artikel{
    box-shadow: 0 0px 2px 1px rgba(0,0,0,0.15);
    background-color: #fefefe;
    align-self: center;
    padding: 4px;
    width: 250px; 
    height: 200px;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-width: 0;
    align-items: stretch;
    position: relative;
}

.tableFlex.artikelAnsicht .rowFlex.artikel img{
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.tableFlex.artikelAnsicht .rowFlex.artikel > div:nth-child(1)   {
    display: flex;
    flex-wrap: wrap;
}
.tableFlex.artikelAnsicht .rowFlex.artikel> div:nth-child(2) { 
    flex: 1;  
    width: 100%;
    position: relative;
    align-self: stretch;
}
.tableFlex.artikelAnsicht .rowFlex.artikel > div > div:nth-child(1)  { 
    flex: 0 1 20%;   
    text-align: right;
    display: inline-block;   
    align-self: flex-start; 
    padding: 4px;
    color: #666666;
}
.tableFlex.artikelAnsicht .rowFlex.artikel> div > div:nth-child(2) { 
    flex: 0 1 auto; 
    align-self: flex-start;
    padding: 4px;
}
.tableFlex.artikelAnsicht .rowFlex.artikel> div > div:nth-child(3) { 
    flex: 0 0 100%;  
    width: 100%;
    align-self: flex-start;
    padding: 4px;
}








.tableFlex.artikelEinzelAnsicht{
    flex-wrap: wrap;     
    flex: 0 0 100%; 
    justify-content: space-between;
}
.tableFlex.artikelEinzelAnsicht.preise{
    flex-flow: row nowrap;
}
.tableFlex.artikelEinzelAnsicht .rowFlex{
    flex: 0 1 30%; 
    min-width: 265px;
    align-content: flex-start;
    flex-wrap: wrap;
    display: flex;   
}

.tableFlex.artikelEinzelAnsicht .rowFlex.artikelbilder{
    flex: 0 1 70%; 
    min-width: 265px;
    align-content: space-around;
    flex-wrap: wrap;
    display: flex;   
    margin-right: 0px;  
    max-width: 765px;
}

.tableFlex.artikelEinzelAnsicht .rowFlex.artikelbilder > div{
    min-width: 250px;
    flex: 1;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
    padding-top: 0;
}
.tableFlex.artikelEinzelAnsicht .rowFlex.artikelbilder > div:first-child{
    flex: 0 1 100%;
}
.tableFlex.artikelEinzelAnsicht .rowFlex.artikelbilder img{
    display: block;
    max-width: 100%;
    margin: auto;
}

.tableFlex.artikelEinzelAnsicht .rowFlexAll{
    display: flex;  
    flex: 0 0 100%; 
    align-content: flex-start;
    flex-wrap: wrap; 
    padding-bottom: 10px;
}

.tableFlex.artikelEinzelAnsicht .rowFlexAll button{
    margin: 0 auto;
    padding: 4px;
}

.tableFlex.artikelEinzelAnsicht .rightContent {
    flex: 0 1 50%; 
    *font-size: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tableFlex.artikelEinzelAnsicht .artikelbilder .leftContent {   
    flex: 0 1 auto;    
    justify-content: space-around;
    align-content: flex-start;
    align-self: flex-start;
}

.tableFlex.artikelEinzelAnsicht .artikelbilder .rightContent { 
    flex: 2; 
    display: inline-block;
    width: 100%;
    padding: 5px;
}

.tableFlex.artikelEinzelAnsicht .rightContent .smallFLex{
    width: 30px;
    max-width: 30px;
}

.tableFlex.artikelEinzelAnsicht .rightContent .hoeheFLex{
    height: 50px;
    max-height: 50px;
}

.tableFlex.artikelEinzelAnsicht .leftContent{
    *font-size: 13px;
    padding-bottom: 1px;
    flex: 0 1 50%;    
    text-align: right;
    padding-right: 5px;  
    align-items: center;
}

.tableFlex.artikelEinzelAnsicht .abstandRow{
    padding-bottom: 35px;
}

.tableFlex.artikelEinzelAnsicht input, .tableFlex.artikelEinzelAnsicht select{
    *font-size: 13px;
    align-self: stretch;
    border: none;
    border-bottom: solid 1px #cfcfcf;  
    background: none;  
    outline: none;
    flex: 1;
    width: 0;
    padding-left: 4px;
}
.tableFlex.artikelEinzelAnsicht .optionZeile select{
    width: auto;
}

.tableFlex.artikelEinzelAnsicht input:disabled, .tableFlex.artikelEinzelAnsicht select:disabled{
    *font-size: 13px;
    align-self: flex-start;
    text-decoration: none;
    border: none;
    filter: brightness(200%);
    border-bottom: solid 1px transparent;  
}

.tableFlex.artikelEinzelAnsicht input:focus{
    border-bottom: solid 1px #333;   
    position: relative;
}

.tableFlex.artikelEinzelAnsicht input.right{
    text-align: center;
    padding-right: 4px;
    padding-left: 4px;
}







.tableFlex.haendlerAnsicht input{
    border: none;
    border-bottom: solid 1px #cfcfcf;  
    margin-bottom: 1px;
    background: none;  
    outline: none;
    width: 70%;
}

.tableFlex.haendlerAnsicht input:focus{
    margin-bottom: 1px;
    border-bottom: solid 1px #333;   
    position: relative;
}

.tableFlex.haendlerAnsicht{
    flex-wrap: wrap;   
}

.tableFlex.haendlerAnsicht .rowFlex{
    display: flex;  
    flex: 0 0 45%; 
    align-content: flex-start;
    flex-wrap: wrap;
    margin: 0 auto;
    min-width: 280px;
}

.tableFlex.haendlerAnsicht .rowflex h3{
    flex: 0 0 100%;   
    text-align: center;
    padding-bottom: 10px;
}

.tableFlex.haendlerAnsicht .rowflex h4{
    flex: 0 0 100%;   
    text-align: center;
    padding-bottom: 10px;
}

.tableFlex.haendlerAnsicht .rowFlexAll{
    display: flex;  
    flex: 0 0 100%; 
    align-content: flex-start;
    flex-wrap: wrap; 
    padding-bottom: 20px;
}

.tableFlex.haendlerAnsicht .rowFlexAll button{
    margin: 0 auto;
    padding: 4px;
}

.tableFlex.haendlerAnsicht .rightContent {
    flex: 0 1 60%;
    padding: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tableFlex.haendlerAnsicht .rightContent .miniFLex{
    width: 27px;
    max-width: 27px;
    margin-right: 5px;
}
.tableFlex.haendlerAnsicht .rightContent .smallFLex{
    width: 45px;
    max-width: 45px;   
    margin-left: 4px;
    margin-right: 4px;
}
.tableFlex.haendlerAnsicht .rightContent .middleFLex{
    width: 80px;
    max-width: 80px; 
    margin-left: 5px;
}
.tableFlex.haendlerAnsicht .rightContent .hoeheFLex{
       height: 120px;
    width: 335px;
}
.tableFlex.haendlerAnsicht .rightContent .right{
    text-align: center;
    padding-right: 4px;
    padding-left: 4px;
}
.tableFlex.haendlerAnsicht .rightContent img{
    width: 100%;
    max-width: 150px;
}
 .tableFlex.haendlerAnsicht .rightContent input{
font-size: 16px;
}   

.tableFlex.haendlerAnsicht .leftContent{
    flex: 1 0 40%; 
    text-align: right;
    padding: 5px;  
    align-items: center;  
    word-break: break-all;
}

.tableFlex.haendlerAnsicht .abstandRow{
    padding-bottom: 35px;
}
.tableFlex.haendlerAnsicht .logo_upload{
    margin: 0 auto;
    overflow: auto; 
    position: relative; 
    border: 2px solid #5f5f5f; 
    background: url('../images/globalitems/upload_hintergrund_inaktiv.png'); 
    flex: 0 1 50%;
    height: 150px;  
    cursor:pointer;
}

.tableFlex.haendlerAnsicht .logo_upload:hover, .tableFlex.haendlerAnsicht .logo_upload.active{
    background: url('../images/globalitems/upload_hintergrund_aktiv.png'); 
}

.tableFlex.haendlerAnsicht .logo_upload .plusButton{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -7px; 
    margin-top: -7px; 
}
.tableFlex.haendlerAnsicht .logo_upload:hover .plusButton, .tableFlex.haendlerAnsicht .logo_upload.active .plusButton {
    outline: none;
    background: #ececec;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    border: solid 1px #000;
}
.tableFlex.haendlerAnsicht .logo_upload:hover .plusButton:before, .tableFlex.haendlerAnsicht .logo_upload.active .plusButton:before {   
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}
.tableFlex.haendlerAnsicht .logo_upload:hover .plusButton:after, .tableFlex.haendlerAnsicht .logo_upload.active .plusButton:after { 
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}

.containerTab{
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
    margin-top: 15px; 
    width: 100%;  
}
.containerTab .head{
    width:100%; 
    vertical-align: top;  
}
.containerTab .sub{
    overflow: hidden; 
    width: 100%;
    height: 283px; 
    padding: 2px; 
    background-color: #fefefe;
}
.containerTab .head .tab{
    padding: 5px; 
    display: inline-block;
    background-color: #8e8e8e;

    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}
.containerTab .head .aktiv{
    background-color: #fefefe;
}

.containerTab .sub .tab{
    display: none;
}

.containerTab .sub .tab.aktiv{
    background-color: #fefefe;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}

.containerTab .sub .head{
    vertical-align: top; 
    background-color: #afafaf; 
    padding: 5px; 
}

.containerTab .sub .optionZeile{
    vertical-align: top; 
    padding: 5px; 
}

.containerTab .sub .wrapperInput{
    margin-left: 25px; 
    margin-right: 25px;
    padding-left: 5px; 
    width: 145px;
}

.containerTab .sub .wrapperButton{
    text-align: right; 
    padding: 3px;
    margin: 0;
    margin-left: 10px;
}



.inhalt {
    padding: 20px;   
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 16px;   
}

.inhalt > button, .containerTab button{
    /* margin-top: 20px;
     margin-bottom: 1px;
     left: 10px;
     outline: none;
     -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
     -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
     box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
     background-color: #e1e1e1;
     -moz-border-radius: 1px;
     -webkit-border-radius: 1px;
     border-radius: 1px;
     border: none;
     border-bottom: 1px solid #1e1e1e;
     display: inline-block;
     cursor: pointer;
     color: #1e1e1e;
     font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
     font-weight: 300;
     font-size: 14px;
     padding: 1px 5px;
     text-decoration: none;
     margin-right: 5px;*/
}
.logout, .inhalt > button, .containerTab button {
    outline: none;
    *box-shadow: 0px 0px 2px 1px rgba(150,150,150,0.25);
    box-shadow: 0 2px 1px -2px gray;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: relative;
    margin: 0px;
    padding: 3px;
    border: solid 1px #aaa;
    border-radius: 2%;
    margin-top: 20px;
    margin-bottom: 1px;
    margin-right: 5px;
}

.logout:hover, .inhalt > button:hover, .containerTab button:hover {
    outline: none;
    background: #ececec;
    *box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0 2px 1px -2px black;
    border: solid 1px #000;
}

.logout:active, .inhalt > button:active, .containerTab button:active{
    background-color: #fbfbfb;               
}

.logout{
    z-index: 8000;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 5px;
}


.speicherFunktionFeld{
    position: absolute;
    right: 0;
}

.auftragAnsicht .speicherFunktionFeld{
    position: absolute;
    right: -20px;
    top: -9px;
}

.invisible{
    display: none !important;        
}

#infofenster{   
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    border: 1px solid;
    display: inline-block;
    width: 600px;
    z-index: 2000;
    color: #fefefe;
    position: absolute;
    top: -208px;
    left: 50%;
    margin-left: -300px;
    background-color: #3e3e3e;
    box-shadow: 0 0 6px #fff;
}
#infofenster > div { 
    top: 0px;
    position: relative;
    padding: 20px;
}

.suchFeld{
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.07);
    font-size:14px; 
    background-color: #dcdcdc;
    padding-left: 22px;
    padding-right: 8px;
    height:100%;
    *border-radius: 31px;
    border: none;
    border-bottom: 1px solid #afafaf;
    outline: none;
}

.suchFeld:focus{ 
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.17);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.17);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.17);
    background-color: #ececec;
    font-size:14px; 
    padding-left: 22px;
    padding-right: 8px;
    height:100%;
    *border-radius: 31px;
    border: none;
    border-bottom: 1px solid #222;
    outline: none;
}

.suchFeldWrapper, .sortierButtonWrapper, .optionButtonWrapper{
    margin-right: 12px;
}

.sortierButtonWrapper, .optionButtonWrapper{
    display: flex;
    align-self: stretch;
    align-content: space-between;
    align-items: stretch;
}
.suchFeldWrapper{
    margin-left: 5px;    
}
.optionButtonWrapper{
    margin-right: 0px !important;
}

.button {  
    outline: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    background-color:#3e3e3e;
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:1px;
    border: none;
    border-bottom:1px solid #0e0e0e;
    display:flex;
    cursor:pointer;
    color:#ffffff;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    padding:1px 5px;
    text-decoration:none;
    align-content: center;
    align-items: center;
    margin-right: 5px;
}
.button:last-child{
    margin-right: 0px;    
}

.button:hover {
    background-color:#5e5e5e;
}
.button:active {
    position:relative;
    top:1px;
}

.buttonText{
    margin-right: 5px;
}
.button .buttonText{
    margin-right: 0px;
}
.button {
    font-size:  calc(0.6vw + 0.3vh );
}
.buttonIcon{
    display: flex;
    height: 100%;
    margin-right: 5px;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.button .buttonIcon{
    margin-right: 5px;  
    width: 20px;
}
.danger {  
    background-color:#9f3e3e;
    border-bottom:1px solid #5f0e0e;
    color:#ffffff;
}

.good {  
    background-color:#3e9f3e;
    border-bottom:1px solid #0e5f0e;
    color:#ffffff;
}


.error {  
    background-color:#9f3e3e;
    border:1px solid #5f0e0e;
    color:#ffffff;
}

.passwort_hinweis{
    margin-top: 10px;
    padding: 10px;
}
.passwort_hinweis_container{
    flex: 0 1 100%;
    text-align: center;
    margin: 0 auto;
    min-width: 280px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.speichereFeld{
    position: relative;
}


.overlayblocker{
    display: none;
    left: 0;
    top: 0;
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: #eeeeef; 
    z-index: 500; 
    background: rgba(125,125,125,0.9); 
}
.overlayblocker.aktiv{
    display: block; 
}


.kundenauswahl{
    z-index: 800;
    position: relative; 
    width: 1030px; 
    margin-top: 0px; 
    vertical-align: top;
    font-family: 'Abel', 'Lato', 'Arial', 'sanserif';
    font-size: 11px;    
}

.kundenauswahl input {
    border: none;
    border-bottom: solid 1px #cfcfcf;
    margin-bottom: 1px;
    margin-top: 1px;
    background: none;
    outline: none;
}
.kundenauswahl input:focus{
    margin-bottom: 1px;
    border-bottom: solid 1px #333;   
    position: relative;
}
.kundenauswahl select{
    width: 130px; 
    margin-left: 5px; 
    margin-right: 25px;
    padding-left: 5px; 
    vertical-align: top; 
    display: inline-block;
}
.kundenauswahl button{
    text-align: right;
    padding: 3px; 
    vertical-align: top;
    display: inline-block;
}

.kundenauswahl .reiter{
    width:100%; 
    vertical-align: top;
}
.kundenauswahl .reiter > div {
    padding: 5px; 
    display: inline-block;
    box-shadow: inset 0px 1px 1px 1px rgba(250,250,250,0.5), 0px -2px 1px 1px rgba(0,0,0,0.3), 0px 1px 10px 7px rgba(90,90,90,0.1);
}
.kundenauswahl .tab{
    overflow: hidden; 
    height: 185px; 
    box-shadow: inset 0px -1px 1px 1px rgba(250,250,250,0.8), 0px 2px 1px 1px rgba(0,0,0,0.3), 0px 1px 10px 7px rgba(90,90,90,0.1);
}
.kundenauswahl .reiter div:nth-child(even) {
    background-color: #8e8e8e;
}

.kundenauswahl .reiter div:nth-child(odd) {
    background-color: #f0f0f0;
}
.kundenauswahl .tab div:nth-child(even) {
    display: none;
}
.kundenauswahl .tab div:nth-child(odd) {
    background-color: #f0f0f0;
    width: 100%;
    height: 100%;
    padding: 10px; 
}




.imagesave {
    color: #cfcfcf;
    display: block; 
    position: relative;  
    width: 20px;
    height: 20px;
}
.imagesave:before {
    color: #cfcfcf;
    display: inline-block;
    content: '';
    position: absolute;
    margin-left: 3px;
    margin-top: 6px;    
    top: 2px;
    width: 14px;
    height: 8px;
    border-bottom: solid 1px currentColor;
    border-left: solid 1px currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.imagesave:hover {
    color: #333;
    display: block; 
    position: relative;  
    width: 20px;
    height: 20px;
}
.imagesave:hover:before {
    color: #333;
    display: inline-block;
    content: '';
    position: absolute;
    margin-left: 3px;
    margin-top: 6px;    
    top: 2px;
    width: 14px;
    height: 8px;
    border-bottom: solid 2px currentColor;
    border-left: solid 2px currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.imageUndo {
    color: #cfcfcf;
    display: block;
    width: 20px;
    height: 20px;   
    padding-top: 15px;
    position: relative;
    margin-left: 3px;
}
.imageUndo:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.imageUndo:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.imageUndo:hover {
    color: #333;
    display: block;
    width: 20px;
    height: 20px;   
    padding-top: 15px;
    position: relative;
    margin-left: 3px;
}
.imageUndo:hover:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.imageUndo:hover:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.searchIcon {
    color: #000;
    position: absolute;
    margin-top: 4px;
    margin-left: 4px;
    width: 11px;
    height: 11px;
    border: solid 1px currentColor;
    border-radius: 100%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.searchIcon:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 4px;
    height: 7px;
    width: 1px;
    background-color: currentColor;
}

.profileIcon {     
    position: relative;
    width: 16px;
    height: 16px;
}
.profileIcon:before {     
    text-shadow:1px 1px 2px #fff;
    box-shadow: 0px 0px 3px 1px rgba(255,255,255,0.25);
    content: '';
    position: absolute; 
    width: 8px;
    top: 0px;
    left: 3px;
    height: 8px;
    border-radius: 50%;
    border: solid 1px currentColor;
}
.profileIcon:after {   
    text-shadow:1px 1px 2px #fff;
    box-shadow: 0px 0px 3px 1px rgba(255,255,255,0.25);
    color: #fff;
    position: absolute;
    content: '';
    left: 0px;
    top: 9px;
    width: 14px;
    height: 6px;
    border-left: solid 1px currentColor;
    border-right: solid 1px currentColor;
    border-top: solid 1px currentColor;
    border-bottom: solid 1px transparent;
    border-radius: 6px 6px 0 0;
}
.printIcon {
    color: #fff;
    position: absolute;
    width: 15px;
    height: 8px;
    border-left: solid 1px currentColor;
    border-right: solid 1px currentColor;
    border-top: solid 1px currentColor;
    border-bottom: solid 1px transparent;
    border-radius: 1px 1px 0 0;
}
.printIcon:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    height: 7px;
    width: 7px;
    border: solid 1px currentColor;
    background-color: transparent;
    box-shadow: 0px 0px 3px 1px rgba(255,255,255,0.25);
}
.printIcon:after {
    content: '';
    position: absolute;
    left: 1px;
    top: 2px;
    width: 12px;
    height: 1px;
    border-top: solid 1px currentColor;
    box-shadow: 0px 0px 3px 1px rgba(255,255,255,0.25);
}

.trashIcon {
    color: #fff;
    position: relative;
    width: 12px;
    height: 16px;
    border: solid 1px currentColor;
    border-radius: 3px;
}
.trashIcon:before {
    content: '';
    position: absolute;
    left: -3px;
    top: 2px;
    width: 16px;
    height: 1px;
    background-color: currentColor;
}

.cardIcon {
    color: #fff;
    position: relative;
    width: 18px;
    height: 14px;
    border-radius: 1px;
    border: solid 1px currentColor;
}
.cardIcon:before {
    content: ''; 
    position: absolute;
    top: 1px;
    left: -1px;
    width: 17px;
    height: 2px;
    background-color: currentColor;
}
.cardIcon:after {
    content: '';
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 4px;
    height: 1px;
    background-color: currentColor;
}

.sortIcon {
    color: #3e3e3e;
    position: relative;
    display: inline-block;
    width: 17px;
    height: 10px;  
    margin-left: 8px;
    margin-right: 0px !important;
    border-top: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
}

.sortIcon:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 2px;
    border-radius: 0 2px 2px 0;
    border-top: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    border-right: solid 1px currentColor;
}

.sortIcon:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 0;
    height: 0;
    border-left: solid 3px transparent;
    border-right: solid 3px currentColor;
    border-top: solid 3px transparent;
    border-bottom: solid 3px transparent;
}


.sendIcon {
    color: #fff;
    position: relative;
    margin-left: 4px;
    margin-top: 3px;
    width: 11px;
    height: 11px;
    border: solid 1px currentColor;
    border-bottom: 1px solid transparent;
    border-radius: 1px;
}
.sendIcon:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 1px;
    height: 10px;
    border-left: solid 1px white;
}
.sendIcon:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 2px;
    height: 2px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.moreIcon {
    color: #000;
    position: relative;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: solid 1px currentColor;
}

.moreIcon:before {
    content: '';
    position: absolute;
    left: -1px;
    top: -7px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    border: solid 1px currentColor;
}

.moreIcon:after {
    content: '';
    position: absolute;
    left: -1px;
    top: 5px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    border: solid 1px currentColor;
}

.mapIcon {
    color: #fff;
    position: relative;
    width: 6px;
    height: 12px;
    border-radius: 1px;
    border: solid 1px currentColor;
    transform: skewX(-35deg) rotate(90deg);
}

.mapIcon:before {
    content: '';
    position: absolute;
    left: -6px;
    top: 3px;
    width: 4px;
    height: 10px;
    border-radius: 1px;
    border: solid 1px currentColor;
    transform: skewY(-60deg);
}

.mapIcon:after {
    content: '';
    position: absolute;
    left: 4px;
    top: -5px;
    width: 4px;
    height: 10px;
    border-radius: 1px;
    border: solid 1px currentColor;
    transform: skewY(-60deg);
}
.containerTab .plusButton, .plusButton {
    outline: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: relative;
    margin: 0px;
    padding: 0;
    width: 15px;
    height: 15px;
    border: solid 1px #aaa;
    border-radius: 50%;
}
.plusButton:before {
    content: '';
    position: absolute;
    height: 1px;
    left: 2px;
    top: 6px;
    width: 9px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}
.plusButton:after {
    content: '';
    position: absolute;
    height: 9px;
    top: 2px;
    left: 6px;
    width: 1px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}
.plusButton:hover {
    outline: none;
    background: #ececec;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    border: solid 1px #000;
}
.plusButton:hover:before {   
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}
.plusButton:hover:after { 
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}


.containerTab .minusButton {
    outline: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: relative;
    margin: 0px;
    padding: 0;
    width: 15px;
    height: 15px;
    border: solid 1px #aaa;
    border-radius: 50%;
}
.minusButton:before {
    content: '';
    position: absolute;
    height: 1px;
    left: 2px;
    top: 6px;
    width: 9px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}

.containerTab .minusButton:hover {
    outline: none;
    background: #ececec;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    border: solid 1px #000;
}
.minusButton:hover:before {   
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}




.containerTab .loeschButton {
    outline: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: relative;
    margin: 0px;
    padding: 0;
    width: 15px;
    height: 15px;
    border: solid 1px #aaa;
    border-radius: 50%;
}
.loeschButton:before {
    content: '';
    position: absolute;
    height: 1px;
    left: 0px;
    top: 6px;
    width: 13px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
    transform: rotate(45deg);
}
.containerTab .loeschButton:hover {
    outline: none;
    background: #ececec;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);
    border: solid 1px #000;
}
.loeschButton:hover:before {   
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
}


.kategorieContainer{
    padding: 5px;   
    margin: 0 auto; 
}
.kategorieContainer > .button{
    padding: 5px; 
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    display: block;
}

.modal_dialog input{
    border: none;
    border-bottom: solid 1px #cfcfcf;  
    margin-top: 10px;
    margin-bottom: 1px;
    background: none;  
    outline: none;
    width: 70%;
}
.modal_dialog input:focus{
    margin-bottom: 1px;
    border-bottom: solid 1px #333;   
    position: relative;
}

.loeschButtonKonfiguratorKategorie {
    outline: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    box-shadow: 0px 0px 3px 1px rgba(150,150,150,0.25);
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    background-color: #e1e1e1;
    cursor:pointer;
    font-family:   'Abel', 'Lato', 'Arial', 'sanserif';
    font-weight: 300;
    font-size: 14px;
    text-decoration:none;
    display: inline-block;
    color: #000;
    position: absolute;
    margin: 0px;
    padding: 0;
    width: 15px;
    height: 15px;
    border: solid 1px #aaa;
    border-radius: 50%;
    right: 5px;
    top: 50%;
    margin-top: -7px;
}
.loeschButtonKonfiguratorKategorie:before {
    content: '';
    position: absolute;
    height: 1px;
    left: 0px;
    top: 6px;
    width: 13px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);    
    background-color: #000; 
    transform: rotate(45deg);
}

.modal_dialog{
    position: fixed;
    display: flex;
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    z-index: 8000;
    background-color: rgba(50,50,50,0.85);
    justify-content: center;
    align-items: center;
    align-content: center;
}
.modal_dialog .box{
    flex: 0 1 auto;
    display: flex;
    background-color: #ccc;
    min-width: 350px;
    min-height: 160px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    flex-direction: column;
    height: 50%;
    max-width: 90%;
    max-height: 700px;
}

.modal_dialog .textContainer{
    display: flex;
    flex: 0 1 100%;
    min-height: 0;
    height: 100%;
    width: 100%;      
}

.modal_dialog .buttonContainer{
    flex: 0 1 auto;
    width: 100%;
    display: flex;
    padding-top: 10px;
    justify-content: space-between;
}

.modal_dialog .buttonContainer .anwenden{
    flex: 0 1 auto;   
    justify-content: center;
    justify-items: center;
    align-items: normal;
}

.modal_dialog .buttonContainer .abbruch{
    flex: 0 1 auto;  
    justify-content: center;
    justify-items: center;
    align-items: normal;
}

@media screen and (max-width: 880px) {
    .button .buttonIcon, .buttonIcon{
        display: none;
    } 

    .suchFeldWrapper, .sortierButtonWrapper, .optionButtonWrapper{
        margin-right: 8px;
    }
    .tableFlex.auftragAnsicht .rowFlex{
        margin: 10px;
    }
}

@media screen and (max-width: 750px) {
    .button .buttonIcon, .buttonIcon{
        display: flex;
    }
    .button .buttonIcon{
        width: 20px;
        margin-right: 0;
    }
    .buttonText{
        display: none;
    }

    .suchFeldWrapper, .sortierButtonWrapper, .optionButtonWrapper{
        margin-right: 5px;
    }   

    .suchFeld{
        width: 110px;
    }

    .tableFlex.auftragAnsicht{
        justify-content: center;
    }
}

@media screen and (max-width: 600px) {

    .menueHeader.head{
        min-width: 100px;
        font-size: 14px; 
        padding: 4px;
        padding-top: 5px;
    }
    .tableFlex.kundeAnsicht .rowFlex{
        min-width: 180px;
    }
    .tableFlex.kundeAnsicht .leftContent {
        flex: 1 0 35%;
    }

    .tableFlex.kundeAnsicht .rightContent {
        flex: 0 0 100%;
    }

    .tableFlex.kundeAnsicht  .leftContent {
        text-align: left;
        margin-top: 10px;
    }
}

@media screen and (max-width: 505px) {  
    .menueHeader.head{
        min-width: 63px;
        font-size: 11px; 
        padding: 1px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .menueHeader.sub .button{
        font-size: 11px; 
    }  


}

pathjs, jsfiles{
    display: none;
}