.svghover:hover{ filter: invert(1) saturate(5) hue-rotate(65deg); }
.stop-scrolling{height:100%; max-width:100%; max-height:100%; touch-action:none; overflow:hidden;}
.container1 > div, .container2 > div, .container3 > div{background-color:black;}
.loader-text{color:black;}
#schlauchTriggerDiv,#paramOverlayMiddle{bottom:0px; left:40%;}
#laengeRefresh:hover{background-color:cornflowerblue; border:1px solid #ccc;}
.first-description-element{padding-left:75px;}
.loader-layer{background:none;}
#sliderRight,#sliderLeft{border:none!important;}
#laenge-error{display:none;}
#Verdrehwinkel-Content{margin-top:27px;}
#loaderRightArmatur,#loaderLeftArmatur,#loaderLeftPictoArmaturDialog,#loaderRightPictoArmaturDialog
,#loaderPictoSchlauchDialog{background:rgba(47, 47, 47, 0.42); position:absolute;}
#loaderRightArmatur{left:66.7%;}
#rightLoaderText,#leftLoaderText,#loaderLeftPictoArmaturDialog-Text,#loaderRightPictoArmaturDialog-Text
, #loaderPictoSchlauchDialog-Text{color:white; font-size:14px; font-weight:bold;}
#loaderRightArmatur div.loader-container div,#loaderLeftArmatur div.loader-container div,#loaderLeftPictoArmaturDialog div.loader-container div,
#loaderRightPictoArmaturDialog div.loader-container div,#loaderPictoSchlauchDialog div.loader-container div{background-color:white;}
#laenge-format-error{display:none;}
#verdrehwinkel-error{display:none;}
#Verdrehwinkel-Hinweis{height:154px;}
#Schutz-Bild{visibility:hidden;}
#Verdrehwinkel-Hinweis{display:none;}
#option-container{width:100%;}
#Bild-Layer{display:none;}
#DetailsLayer{display:none;}
#Schutz-Bild{left:0px;}
#linke-Armatur-Groesse,#rechte-Armatur-Groesse,#mittel-Text{min-width: 50px;
    height: 25px;
    border-radius: 5px;
    font-size: 17px;
    font-weight: bold;
    color: #444242;}
#linke-Armatur-Groesse-Container{left:50%;}
#rechte-Armatur-Groesse-Container{right:50%;}
.armatur-groesse{top:160px; z-index:99; font-size:13px; color:#444242; font-weight:bold;}
#option-container{position:relative; margin-bottom:-45px; z-index:90;}
.only-small-device{display:none;}
.add-to-basket-button{margin-left:0px;}
.filter-container{width:315px;} /*muss so breit sein da im Expertenmodus manche Armaturenarten sehr lange Namen haben und ansonsten das Layout brechen w�rden*/
.filter-container-schlauch{width:240px;}
#RoundSlidersToStandard{right:0px; bottom:0px;}
#confirmBox{position:fixed; width:294px; left:43%; top:27%; background-color:white; z-index:99999;}
div.confirm-message{padding:15px; font-size:14px; border-bottom:1px solid #ccc;}
.div-header{height:4%; min-height:26px; border-bottom: 1px solid #ccc; padding-left:5px; padding-top:5px;}
#confirmBox div.div-header{color:white; background-color: #f3f3f3; color: #1c1c1c;}      
#AuswahlDialoge div.div-header{background-color:#f3f3f3; color: #1c1c1c;} 
#ExpertenmodusHilfeContainer div.div-header, #VerdrehwinkelHilfe-Text div.div-header{background-color:#f3f3f3;}        
div.div-header span{vertical-align:middle; padding-left:15px; font-size:16px;}
div.div-header img{width:20px; height:20px; vertical-align:middle;}
.top-none{top:0px;}
.liste-fieldset{box-sizing:border-box; height:79%;  padding-top:0px; margin-top:5px; padding-bottom:0px;}
.selects-fieldset{box-sizing:border-box;}
.liste-schlauch-fieldset{height:80%;}
.selects-schlauch-fieldset{height:auto;}
.armatur-wk-button{font-size:15px; border-radius:3px; margin-top:2px; cursor:pointer;}
.form-dialog{height:89%; min-height:350px;}
.image-close{right:6px; top:5px; width:20px; height:20px;}       
#SchlauchTriggerDiv, #paramOverlayMiddle{left:33.3%;}
#rechteArmaturTriggerDiv, #paramOverlayRight{left:66.7%;}
.list-item-description{width:90%; height:100%;}
.list-item-description-single{padding-top:36px;}
.bedienungs-text{padding-left:5px; padding-right:5px;}
.bedienung-dropdown{padding:5px; box-sizing:border-box; cursor:pointer;}
#schlauchkonfig-bedienung{right: 10px; font-size:14px; background-color:white; top: 278px; width: 400px; border: 1px solid #ccc;}
#ExpertenmodusLinkeArmaturHilfeImage,#ExpertenmodusRechteArmaturHilfeImage,#ExpertenmodusSchlauchHilfeImage{vertical-align:top; cursor:pointer; margin-left:15px;}
#ExpertenmodusHilfeContainer{position:fixed; top:21%; left:40%; width:400px; z-index:999999; background-color:white;}
#ExpertenmodusArmaturHilfeText,#ExpertenmodusSchlauchHilfeText{width:100%; font-size:14px;}
/*Background color und opacity sind für den Hover Effekt noetig*/
.onclick-trigger-div{cursor:pointer; box-sizing:border-box; z-index:99; background-color:#003399; opacity:0; position:absolute;}
#linkeArmaturenListe li,#rechteArmaturenListe li{height:auto; cursor:pointer;}
#schlauchListe li{height:100px; cursor:pointer;}
#linkeArmaturenListe li:hover{background-color:rgba(0, 138, 203, 0.25);}
#rechteArmaturenListe li:hover{background-color:rgba(0, 138, 203, 0.25);}
#schlauchListe li:hover{background-color:rgba(0, 138, 203, 0.25);}
.padding-top-20{padding-top:20px;}
.padding-left-20{padding-left:20px;}
.list-selected{background-color:rgba(0, 138, 203, 0.32);}
.show{display:block;}
.armatur-image{width:9%; height:100%;}
.armaturen-liste-images{
    /*width: 53px;
    height: 67px;*/
    width:100%;}
div.mobile-suche{display:none;}
.dialog-bottom-layer{height:5%; padding-top:0px; min-height:36px; padding-right:3px; padding-left:3px;}
div.schlauch-beschreibung, div.erste-beschreibung, div.center-beschreibung{padding-top:13px;}
.label-select-SchlauchContainer, .label-select-ArmaturContainer{padding:5px;}
.label-select-ArmaturContainer label{display:inline-block; width:110px;}
.label-select-SchlauchContainer label{display:inline-block; width:100px;}
.label-select-SchlauchContainer select, .label-select-ArmaturContainer{display:inline-block;}
.CheckoutField{padding-bottom:1px; padding-top:1px;}
.option-header{ padding:5px; background: #f3f3f3;}
.CheckoutField{margin-top:0px;}
.top-50{top:50px;}
.top-10{top:10px;}
label{cursor:pointer;}
input[type=radio]{cursor:pointer;
-ms-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3); }
.padding-top-5{padding-top:5px;}  
.padding-top-10{padding-top:10px;}
#Laenge-Schlauch{bottom:15px; width:300px; left:35%;} 
#schlauchNennweite{width:50px;}
#schlauchTyp{width:50px;}
.sprunggroesse-container{padding-top:10px;}
#ArtNrDisplay{font-size:13px; border-bottom:1px solid #ccc;}
#Verdrehwinkel-RechterText{width:48%;}
#Details-Liste{padding-top:5px; font-size:14px; padding-bottom:5px;}
#Verdrehwinkel-Slider{box-sizing:border-box; padding-top:15px;}
#Verdrehwinkel-Input{padding-left:15px; padding-top:5px;}
#PreisWK{padding-top:5px; padding-left:70px;}
#AuswahlDialoge{
	overflow-x:hidden; 
	overflow-y:hidden; 
	border:1px solid #ccc; 
	position:fixed; 
	top:5%; 
	min-height:600px; 
	max-height: 860px;
	border-radius:5px; 
	height:90%; 
	background-color:white; 
	z-index:9999;
	width: 65%;
	max-width: 1200px;
	min-width: 380px;
}
#LinkeArmatur-Dialog,#RechteArmatur-Dialog,#Schlauch-Dialog{height:100%;}
#AuswahlDialoge,#LinkeArmatur-Dialog,#RechteArmatur-Dialog,#Schlauch-Dialog{display:none;}
#linkeArmaturenListe, #rechteArmaturenListe{height:95%;}
#linkeArmaturenListe,#rechteArmaturenListe,#schlauchListe{min-height:150px; margin-top:0px; margin-bottom:0px; padding-left:0px; overflow-y:scroll;}
#schlauchListe{height:95%;}
.schlauchSchutz-list-images{top:0px;}
#verdrehwinkel-helpSymbol{display:none; text-align:right; width:100%;}
#VerdrehwinkelHilfe-Text{display:none; position:fixed; height:410px; width:100%; left:0px; top:30%; z-index:9999; border:1px solid #ccc; background:white;}
.only-mobile-portrait{display:none;}/*wird nur auf Handys im Portrait Modus angezeigt*/
.only-none-mobile-portrait{display:initial;} /*wird auf allen anderen Ger�ten angezegit*/
#verdrehwinkel-error{padding:5px; padding-left:0px; color:#bf0000; position:relative; background:white; z-index:999; width:200px;}
.schlauch-beschreibung{height:100%;}
.div-header{cursor:pointer; background-color:#f3f3f3;}
.rs-seperator{display:none!important;}

.cancel-button{width:100px;}
.add-to-basket-button{margin-right:0px;}
#ArmaturFixierenLinks,#ArmaturFixierenRechts,#ArmaturFixierenBeide{margin-left:0px;}
.fixieren-Container{padding-top:5px;}
#AnschlussartenAlert, #NennweitenAlert{width: 300px;
    font-family: arial;
    font-weight: bold;
    background-color: #32943e;
    font-size: 16px;
    color: white;
    padding: 10px;
    border: 1px solid #32943e;
    border-radius: 4px;
    z-index: 9999;
    right: 33%;
    top: 8%;}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
    #Verdrehwinkel{padding:0px;}
}

@media only screen and (max-width: 2100px){
     #schlauchkonfig-bedienung{right:0px; width:18%;}
}
@media only screen and (max-width: 2000px){
     #schlauchkonfig-bedienung{right:0px; width:17%;}
}
@media only screen and (max-width: 1900px){
     #schlauchkonfig-bedienung{right:0px; width:16%;}
}
@media only screen and (max-width: 1800px){
     #schlauchkonfig-bedienung{right:0px; width:15%;}
}
@media only screen and (max-width: 1750px){
     #schlauchkonfig-bedienung{width:14%;}
}
@media only screen and (max-width: 1700px){
     #schlauchkonfig-bedienung{width:13%;}
}
/*Monitor zu klein f�r die FAQ/Hilfe*/
@media only screen and (max-width: 1650px){
     #schlauchkonfig-bedienung{display:none;}
}
@media only screen and (max-width:1600px){
    #AuswahlDialoge{left:17.5%;}
    #Verdrehwinkel-Input{padding-left:0px;}  
    #schlauchkonfig-bedienung{display:none;}
}
@media only screen and (max-width:1200px){
    #AuswahlDialoge{width: 92%; left: 4%;}    
}
/*iPad Querformat*/
@media only screen and (max-width:1024px){   
    #AnschlussartenAlert, #NennweitenAlert{
        right:25%;
    }
    .mobile-no-padding-top{padding-top:0px;}
    .center-beschreibung{padding-left:20px; padding-top:28px;}
    div.schlauch-beschreibung div.erste-beschreibung{padding-bottom:0px; padding-top:0px;}
    .list-item-description-single{padding-top:20px;}
    .armaturen-liste-images{width:53px; height:67px;}
    #confirmBox{top:30%;}
    .first-description-element{padding-left:50px;}
    #AuswahlDialoge{min-height: auto;}
    .form-dialog{height:85%; min-height:auto;}
    .liste-fieldset{height:79%; padding-right:0px;}   
    .schlaeuche-list-images{width:100%;}
    .selects-schlauch-fieldset{height:auto;}
    .liste-schlauch-fieldset{height:69%;}
    #schlauchListe{min-height:auto;}
    .schlauchSchutz-list-images{top:6px; width:50%;}
    #confirm-box{top:32%;} 
    #verdrehwinkel-helpSymbol{display:block;}
    #Verdrehwinkel-Input{padding-left:15px;}
	#Schutz-Bild{margin-left: 20px;}
}/*iPad Hochformat */
@media only screen and (max-width: 820px){
	.mobile-flex-end {
		display: flex;
		justify-content: flex-end;
	}
}
@media only screen and (max-width: 815px){  
    #AnschlussartenAlert,#NennweitenAlert{top:16%;}
    #confirmBox{top:34%;}
    .liste-fieldset{height:80%; padding-right:0px; padding-bottom:0px;}
    #linkeArmaturenListe,#rechteArmaturenListe{height:90%;}
     .armatur-wk-button{height:90%;}
    #Verdrehwinkel-RechterText{width:100%;}
    #confirm-box{left:31%; top:35%;}
    .schlauch-beschreibung{font-size:14px;}
    #AuswahlDialoge{width:95%; left:2.5%;}
    #linkeArmaturTriggerDiv,#rechteArmaturTriggerDiv, #paramOverlayLeft{height:100%; top:0px;}
    #SchlauchTriggerDiv{height: 85%; top: 0px;}
	#paramOverlayMiddle{height: 100%; top: 0px;}
    #ExpertenmodusHilfeContainer{width:95%; left:2.5%; top:28%;}           
    #AuswahlDialoge h2{margin:0px; padding-top:5px; padding-bottom:5px;}
    .only-big-device{display:none; /*Wird überall ausser auf kleinen Tablets und Handys angezeigt(max. 768px width)*/}
    .only-small-device{display:block!important; /*Wird nur(!) auf kleinen Tablets und Handys angezeigt(max. 768px width)*/}
    .mobile-width-25{width:25%;}
    .mobile-width-50{width:50%;}     
    .mobile-padding-top-50{padding-top:50px;}
    #Verdrehwinkel-Slider{padding-left:0px; }
    .mobile-top-50{top:50px;}
    .image-headers{top:0px; width:100%;}
    .sprunggroesse-container,.armatur-groesse,.image-headers{font-size:11px;}
    .mobile-no-absolute{position:initial;}
    #linke-Armatur-Groesse-Container{left:initial;}
    #rechte-Armatur-Groesse-Container{right:initial;}
    .armatur-groesse{top:initial; word-wrap:break-word;}
    #Laenge-Schlauch{left:30%; bottom:5px; width:300px;}
    #mittleres-Bild div.position-absolute{left:0%;}
    #rechtes-Bild{word-wrap:break-word;}
    #linkes-Bild{word-wrap:break-word;}
    
    #Beschreibung{width:100%; display:block;}
    #ArtNrDisplay{padding-left:0px; padding-right:0px;}
    #ArtNrDisplay,#PreisWK{width:100%; display:block;}
    .sprunggroesse-container{display:block;}
    #Schutz-Bild{width: 110%; top: 12px; margin-left: -28px;}
    .schlauchSchutz-list-images{top:15px; width:50%;}
    #Details-Liste{overflow-x:scroll; border-bottom:1px solid #ccc;}   
    #VerdrehwinkelHilfe-Text{top:18%;}  
    #Verdrehwinkel-Input{padding-left:20px;}
}
@media only screen and (max-device-width: 786px){
	#Schutz-Bild{width: 110%; top: 5px; margin-left: -30px;}	
}
@media only screen and (max-device-width: 668px){
	.filter-container select {
		max-width: 133px;
	}
	.filter-container {
		width: 257px;
	}
}
@media only screen and (max-device-width: 610px){
	.filter-container {
		width: 140px;
	}
	.expertenmodus {
		position: relative;
	}
	.expertenmodus img {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.liste-fieldset {
		height: 73%;
	}
}
@media only screen and (max-device-height: 604px){
    #AuswahlDialoge{top:2%;}
	.svghover{order:2}
}
@media only screen and (max-device-width: 604px){    
    #RoundSlidersToStandard{width:100px;}
    #rechteArmaturOptionen div.option-header{padding-left:0px; padding-right:0px;}
}
/*Handys Hochformat*/
@media only screen and (max-device-width: 480px){
    #AnschlussartenAlert,#NennweitenAlert{right:0%;}
    #linke-Armatur-Groesse, #rechte-Armatur-Groesse, #mittel-Text{font-size:14px;}
    #linke-Armatur-Groesse, #rechte-Armatur-Groesse{max-width:102px;}
    #mittel-Text{max-width:176px;}
    .information-scroll{display:none;}
    div.schlauch-beschreibung, div.erste-beschreibung{padding-top:0px;}
    div.center-beschreibung{display:none; padding-top:0px;}
    .first-description-element{padding-left:23px;}
    #Verdrehwinkel-Content{margin-top:13px;}
    .schlaeuche-list-images{width:90%;}
    .filter-container{width:157px;}
    #linkeGewindeart, #rechteGewindeart{max-width:133px;}
    #ExpertenmodusSchlauchHilfeImage{position:absolute; right:4px; top:135px;}
    .filter-container-schlauch{width:122px;}
    div.expertenmodus{padding-left:0px;}
    #RoundSlidersToStandard{right:6px; width:50px;}
    winkel-graphical-checkbox-container{padding-top:7px;}
    .information-scroll{width:150px;}
    #confirmBox{left:10%; top:25%;}   
    #ExpertenmodusLinkeArmaturHilfeImage,#ExpertenmodusRechteArmaturHilfeImage,#ExpertenmodusSchlauchHilfeImage{display:block; padding-top:10px;}
    .expertenmodus{text-align:center; padding-top:7px; padding-left:19px;}
    .onclick-trigger-div{top: 0px; height: 168px;}            
    .list-item-description{width:83%;}
    .only-mobile-portrait{display:initial;}
    .only-none-mobile-portrait{display:none;}
    #Schutz-Bild{top:26px; width:100%; margin-left:0px}
    #LinkeArmatur-Bild,#RechteArmatur-Bild{padding-top:20px;}
    #Laenge-Schlauch{width:150px; bottom:15px;}
    .mobile-padding-19{padding-top:19px;}
    .mobile-padding-20{padding-top:20px;}  
    .mobile-portrait-padding-left-20{padding-left:20px;}
    .mobile-portrait-padding-left-none{padding-left:0px;}
    #linkeArmaturenListe, #rechteArmaturenListe,#schlauchListe{height:93%;}
    .schlauch-beschreibung{width:48%;}
    .schlauchSchutz-list-images{top:34px; width:45%;}
    .schlaeuche-list-images{top:11px;}
    #Verdrehwinkel{padding:0px; margin:0px; box-sizing:border-box; width:100%;}
    #Verdrehwinkel-Input{padding-left:0px;}
    #loaderLeftArmatur #leftLoaderText,#loaderRightArmatur #rightLoaderText{font-size:12px; width:150px; margin-left:-77px; margin-top:62px;}
    .liste-fieldset{height:70%; padding-right:0px;}
    .selects-fieldset{height:29%;}
    .liste-schlauch-fieldset{height:55%;}
    .selects-schlauch-fieldset{height:auto;}
	.dialog-bottom-layer{padding-top:5px;}
}   

@media only screen and (max-device-width: 444px){
	.selects-fieldset {
		height: auto;
	}
	.liste-fieldset {
		height: 67%;
	}
	.filter-container {
		width: auto;
	}
	.expertenmodus img {
		bottom: 27px;
		right: -40px
	}
	.form-dialog {
		height: 87%;
	}
	
	
	#ExpertenmodusSchlauchHilfeImage {
		right: -40px;
		bottom: 0px;
		top: unset;
	}
	.selects-schlauch-fieldset {
		height: auto;
	}
	.liste-schlauch-fieldset {
		height: 68%;
	}
	.filter-container-schlauch {
		width: 100%;
		display: flex;
	}
	.text-align-left.padding-top-20 {
		padding-top: 6px;
	}

}

  /*Kleine Handys im Querformat bspw. Lumia  Hoch:360x640 Quer:640x360 oder iPhone6/Plus*/
@media only screen and (max-device-height:414px){
    #linke-Armatur-Groesse, #rechte-Armatur-Groesse, #mittel-Text{font-size:14px;}
    #linke-Armatur-Groesse, #rechte-Armatur-Groesse{max-width:initial;}
    #mittel-Text{max-width:initial;}
    .first-description-element{padding-left:77px;}
    .liste-fieldset{height:67%; padding-right:0px;}
    .form-dialog{min-height:auto; height:69%;}
    .schlauchSchutz-list-images{top: 15px; width: 50%;}
    .armatur-wk-button{height:100%;}
    #Schutz-Bild{top:4px;}
    #AuswahlDialoge fieldset{margin-top:0px;}
    .form-dialog{height:80%;}
    #AuswahlDialoge{overflow-y:scroll; width:95%; top:4px; height:351px; left:2.5%; box-sizing:border-box;}
    .scrollHeader{display:none;}
    #linkeArmaturenListe,#rechteArmaturenListe{height:90%;}
    #schlauchListe{height:90%;}
    #confirmBox{top:19%; left:28%;}
    #VerdrehwinkelHilfe-Text{height:331px; top:4%; overflow-y:scroll;}
    .selects-schlauch-fieldset{height:auto;}
    .liste-schlauch-fieldset{height:53%;}    
    .dialog-bottom-layer{min-height:28px; padding-top:6px;}
	#LinkeArmatur-Bild,#RechteArmatur-Bild{padding-top:2px;}
}
	/*iPhone X landscape (wenn H�he nicht extra abgefragt, trifft Tablet-Query zu)*/
@media only screen and (max-device-height: 375px) and (min-width: 800px){
	#Schutz-Bild{margin-top: 6px;}	
}
	/*iPhone 4 landscape*/
@media only screen and (max-device-width: 480px) and (max-device-height: 320px){
	 #LinkeArmatur-Bild,#RechteArmatur-Bild{padding-top: 19.5px;}
	#Schutz-Bild{width: 110%; margin-left: -23px; margin-top: 17.5px;}
}

#MainContent {
	position: relative;
}
#PageLevel {
	margin-bottom: 15px;
}

.truncate-overflow {
	position: relative;
	max-height: calc(1.2rem * 3);
	overflow: hidden;
	padding-right: 1rem; /* space for ellipsis */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
}