/************** Für Einbettung AUSSERHALB der PSI-Webseite 2022 **************/


/* Schriften */

@font-face{
font-family:"DIN Pro";
font-weight: normal;
src: url('../fonts/dinpro/DINPro-Regular.eot'); /* IE9 Compat Modes */
src: local(''),
     url('../fonts/dinpro/DINPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/dinpro/DINPro-Regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/dinpro/DINPro-Regular.woff') format('woff') /* Modern Browsers */
}

@font-face{
font-family:"DIN Pro";
font-weight: bold;
src: url('../fonts/dinpro/DINPro-Bold.eot'); /* IE9 Compat Modes */
src: local(''),
     url('../fonts/dinpro/DINPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/dinpro/DINPro-Bold.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/dinpro/DINPro-Bold.woff') format('woff') /* Modern Browsers */
}



/*** ALLGEMEIN ***/

html {
	font-family: 'DIN Pro', DIN, sans-serif;
	font-weight: normal;
	font-size: 17px;
	color: #4a4a49;
	background: 
	line-height: 1.3;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

p.disclaimer {
	max-width: 650px;
	margin: 0 auto;
	padding: 1em 2em 2em;
	font-size: 0.8em;
}



/************** Für Einbettung INNERHALB der PSI-Webseite 2022 **************/
/*

#link-seal-view {
	font-size: 0.85em;
}

/* Tablet */
/*
@media (max-width:1000px) {	
	#link-seal-view {margin-top: 1em;}	
} 
*/
/* Ende Tablet */
/*



*/
/************** Für Einbettung innerhalb UND außerhalb der PSI-Webseite 2022 **************/

#link-seal-view {
	max-width: 650px;
	display: block;
	margin: 0 auto;
	padding: 1em 2em 2em;
	border-radius: 0.5em;
	background: white;
}

.configurator-header {
  margin-bottom: 2em;
  padding: 1em;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #dddddd;
}

.configurator-header p:first-child {font-weight: bold; color: #003567;}

hr {color: lightgrey;}

#wall-sleeve-pane-website,
#carrier-pipe-pane-website {text-align: center; font-weight: bold;}

#inner-diameter-pane-website,
#outer-diameter-pane-website {text-align: center; margin-bottom: 1em;}

#wall-sleeve-pane-website p,
#carrier-pipe-pane-website p {margin-bottom: 0.5em;}

#inner-diameter-pane-website p,
#outer-diameter-pane-website p {margin: 0.5em;}

.buttonConfigurator {margin: 1em 0;}

#info-button {
	display: inline-block;
	margin-left: 0.5em;
	width: 1rem;
	height: 1rem;
	font-size: 0.7rem;
	line-height: 1rem;
	color: #fff;
	background: #003567;
	border-radius: 1em;
	vertical-align: bottom;
	cursor: help;
}
#info-button:hover {background: #2ab0f7;}

.button-container {
    display: grid;
    grid-template-columns: 9em auto auto auto;
    align-items: center;
}

.button-container div {margin-left: 0.5em;}
/*.button-container div:first-of-type {margin-left: 0;}*/
button.mat-flat-button {background: #2ab0f7;}
button.mat-raised-button {background: #d0e7f2;}
button.mat-raised-button:hover {background-color: #2ab0f7;}
button.mat-stroked-button {color: grey; background: lightgrey; border: none; cursor: not-allowed;}

.bottom-button {
    width: 100%;
    margin-top: 0.5em;
    padding: 0.4em;
    color: white;
    font-weight: bold;
    border: none; 
    border-radius: 6px;
    background: #003567;
}

.bottom-button:not([disabled]):hover {background: #2ab0f7;}

h3, h4, h5 {
  text-align: center;
  color: #033869;
  margin: 10px 0;
}
h5 {font-size: 1em; padding-top: 2em;}

#results-header div {
  display: block;
  position: relative;
  float: left;
  clear: none;
  color: #033869;
  margin-bottom: 10px;
}

#results-list {clear: both;}

#result-view p {margin: 0.2em 0;}

.solution {
  padding: 5px 5%;
  height: 30%;
}
.solution div {
  display: block;
  float: left;
  clear: none;
}

.hr-top {
    border-top: 1px solid #033869;
    margin-top: 1em;
}

.red {
  color: #3388ee;
}

.sol-col-1 {
  width: 100%;
}
.sol-col-2 {
  width: 50%;
}

#result-inputs .ng-binding {
  color: black !important;
}
#result-inputs #product-variation .ng-binding {
  color: #033869 !important;
}

.centered-text {
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
}












/************ RESPONSIVE ************/

/* Tablet */
@media (max-width:1000px) {	
	
	#link-seal-view {margin-top: 1em;}	
	
} /* Ende Tablet */

/* Mobil */
@media (max-width:600px) {
	
	#link-seal-view {margin-top: 1em; padding: 0.5em 1em 1em;}
	.button-container {display: block;}
    .button-container div {display: inline-block; margin: 0 0.5em 0.5em 0;}
	
} /* Ende Mobil */