/*	CSS element styles for the entire document.
	These elements supply the basic functionality
	of the boolet */

body {
   background: #1C140D;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
}

html, body {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

#book {
	background: #1C140D;
}

hr {
	border: 1.5px solid #CBE86B;
}

#titleTxt {
   background: #1C140D;
   color: #FFFFE6;
}

#titleDE {
   background: #1C140D;
   color: #FFFFE6;	
}

#titleEN {
   background: #1C140D;
   color: #FFFFE6;	
}

#titleMen {
   background: #1C140D;
   color: #FFFFE6;	
}

.but { 
	background: #1C140D;
	color: #FFFFE6;
}

.page {
	background: #FFFFE6;   
	color: #1C140D;
}

.leftArrow {
	position: -webkit-sticky;
	position: sticky;
	top: 15px;
	float: left;
	width: 5%;	
	font-weight: bolder;
	font-size: xx-large;
	text-align: left;
	color: #CBE86B;
}

.rightArrow {
	position: -webkit-sticky;
	position: sticky;
	top: 15px;
	float: right;
	width: 5%;
	font-weight: bolder;
	font-size: xx-large;
	text-align: right;
	color: #CBE86B;
}

.card {
  width: 100%;
  height: 100%;
  top: 0;
  transition: transform 0.7s;
  transition-timing-function: ease-out;  
  transform-style: preserve-3d;
  position: abolute;  
}

.card.is-flipped-forward {
  transform-origin: center;
  transform: rotateY(-180deg);
}

.card.is-flipped-back {
  transform-origin: center;	
  transform: rotateY(180deg);
}

.card.right-is-opened {
  transform-origin: top right;	
  transform: rotateY(86.4deg);
}

.card.left-is-opened {
  transform-origin: top left;	
  transform: rotateY(-86.4deg);
}

.card.left-before-close {
  transform-origin: top left;	
  transform: rotateY(-82deg);
}

.card.right-before-close {
  transform-origin: top right;	
  transform: rotateY(82deg);
}

.card.left-before-close.left-is-closed {
  transform-origin: top left;	
  transform: rotateY(0deg);
}

.card.right-before-close.right-is-closed {
  transform-origin: top right;	
  transform: rotateY(0deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.leftHalf {
   clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%); 
}

.rightHalf {
   clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);  
}

.card__face--front {
	background: #FFFFE6; 	
}

.card__face--back {
	background: #FFFFE6;
    transform-origin: center;	
	transform: rotateY(-180deg);
}

ul { 
	list-style-type: square;
	list-style-type: "➽  ";
}

li {
   margin-left: 7%;
   margin-right: 7%;
   margin-bottom: 3%;
   list-style-position: outside;
}

p {
   margin-left: 7%;
   margin-right: 7%;
}

.Hyperlink {
	font-style: italic;
	color: #003366;
}

table {
	border-collapse: collapse;
	font-family: Calibri, sans-serif;
	font-size: smaller;
}

.back {
	position: relative;
	float: left;
	top: 20px;
	margin-left: 7%;	
	opacity: 70%;
}

.slidecontainer {
	width: 330px;
	text-align: left;
	font-family: Calibri, sans-serif;
	font-size: smaller;	
}

.slidecontainer div{
	padding-left: 10px;;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

label {
	position: relative;
	top: -40%;
	font-family: Calibri, sans-serif;
	font-size: smaller;
	float: left;
}

/*	CSS element styles for title page */

#titleBackground {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* CSS for Author page */

figure {
	margin-right: 5%;
	margin-left: 7%;
	margin-bottom: 10px;
	background-color: #636363;
	float: left;
	max-width: 45%;
}

#author {
	object-fit: contain;
	width: 100%;
}

figure figcaption {
	padding: 2px 4px 6px 4px;
	background-color: #636363;
	color: #cccccc;
	font-style: italic;
}


/*	CSS element styles for chapter 
	"P&L" */

#PuL-graph-1 {
	object-fit: contain;
	width: 150px;
	height: 180px;
	margin-right: 10px;
	margin-bottom: 6px;
	background: #FFFFE6;
	float: left;
}

#PuL-graph-2 {
	object-fit: contain;
	width: 200px;
	height: 200px;
	background: #FFFFE6;
}

#PuL-graph-3 {
	object-fit: contain;
	width: 84%;
	height: auto;
	background: #FFFFE6;
}

#PuL-graph-4 {
	object-fit: contain;
	width: 84%;
	height: auto;
	background: #FFFFE6;
}

.PuL .C1 {
	border-left: 1.5px solid #1C140D;
	padding-left: 5px;
	width: 128px;
	text-align: left;
}

.PuL .C2 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid lightgrey;
	padding-right: 4px;
	width: 40px;
	text-align: right;
}

.PuL .C3 {
	border-left: 1.5px solid #1C140D;
	padding-right: 4px;
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.PuL .C4a {
	border-left: 1.5px solid #1C140D;	
	width: 30px;
	text-align: center;
	font-size: smaller;
	font-weight: bold;
}

.PuL .C4 {
	padding-right: 5px;
	width: 40px;
	text-align: right;
}

.PuL .C5 {
	border-left: 1.5px solid lightgrey;
	border-right: 1.5px solid #1C140D;
	padding-right: 4px;
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.PuL .C1.R1 {
	padding-left: 4px;
	text-align: left;
	font-size: smaller;
}

.PuL .CS2 {
	border-left: 1.5px solid #1C140D;
	font-weight: bold;
	text-align: center;
}

.PuL .CS4 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	font-weight: bold;
	text-align: center;
	background: #FFE699;
}

.PuL .R1 {
	border-top: 1px solid lightgrey;
	border-bottom: 1.5px solid #1C140D; 
}

.PuL .R2 {
	border-bottom: 1px solid lightgrey;
	font-weight: bold;	
}

.PuL .R3 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
}

.PuL .R4 {
	border-bottom: 1px solid lightgrey;
	font-weight: bold;
}

.PuL .R5 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
}

.PuL .R6 {
	border-bottom: 1px solid lightgrey; 
	font-weight: bold;
}

.PuL .R7 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
}

.PuL .R8 {
	border-bottom: 1px solid lightgrey; 
	font-weight: bold;
}

#mySliderPreis::-webkit-slider-thumb {
  background: #CBE86B;
}

#mySliderPreis::-moz-range-thumb {
  background: #CBE86B;
}

#mySliderMenge::-webkit-slider-thumb {
  background: #F2E9E1;
}

#mySliderMenge::-moz-range-thumb {
  background: #F2E9E1;
}

/*	CSS element styles for chapter Marktpreis für Ersatzteile */

#MPfET_graph-1 {
	object-fit: contain;
	width: 83%;
	height: auto;
	background: #FFFFE6;
}


.MPfET .C1 {
	border-left: 1.5px solid #1C140D;
	padding-left: 5px;
	width: 95px;
	text-align: left;
}

.MPfET .C2 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid lightgrey;
	padding-right: 4px;
	width: 50px;
	text-align: right;
}

.MPfET .C3 {
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.MPfET .C4 {
	border-left: 1.5px solid #1C140D;
	width: 42px;
	text-align: center;
}

.MPfET .C5 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid lightgrey;
	padding-right: 4px;
	width: 50px;
	text-align: right;
}

.MPfET .C6 {
	border-right: 1.5px solid #1C140D;
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.MPfET .CS2 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
}

.MPfET .CS5 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
	background: #FFE699;
}

.MPfET .CS7 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
	background: #FFE699;
}

.MPfET .R1.C4 {
	background: #FFE699;
	text-align: center;
}

.MPfET .R2.C4 {
	background: #FFE699;
	text-align: center;
}

.MPfET .R1 {
	border-top: 1px solid lightgrey;
	border-bottom: 1.5px solid #1C140D;
	font-weight: bold;
}

.MPfET .R2 {
	border-bottom: 1px solid lightgrey;
	font-weight: bold;
}

.MPfET .R3 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
}

.MPfET .R4 {
	border-bottom: 1px solid lightgrey;
	font-weight: bold;
}

.MPfET .R5 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
}

.MPfET .R6 {
	border-bottom: 1px solid lightgrey; 
	font-weight: bold;
}

.MPfET .R7 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
	font-weight: bold;
}

.MPfET .R8 {
	border-bottom: 1.5px solid #1C140D;
	font-weight: bold;
	background: #FFE699;
}

.MPfET .R8.CS1 {
	border-left: 1.5px solid #1C140D;
	padding-right: 4px;
	font-weight: bold;
	text-align: right;
}

#mySliderWE::-moz-range-thumb {
  background: #CBE86B;
}

#mySliderWE::-webkit-slider-thumb {
  background: #CBE86B;
}


/*	CSS element styles for chapter Subjektive Preisfalle */

.Kundenverteilung {
	margin-left: 7%;
	margin-right: 7%;	
}

.Kundenverteilung .R1 {
	padding-bottom: 3%;
	font-size: smaller;
	
}

.colorF95D25 {
	display: inline-block;
	position: relative;
	top: 4px;
	height: 15px;
	width: 15px;
	margin-right: 8px;
	margin-left: 5px;
	background: #F95D25;
}
.colorF2E9E1 {
	display: inline-block;
	position: relative;
	top: 4px;
	height: 15px;
	width: 15px;
	margin-right: 8px;
	margin-left: 5px;
	background: #F2E9E1;
}
.colorCBE86B {
	display: inline-block;
	position: relative;
	top: 4px;
	height: 15px;
	width: 15px;
	margin-right: 8px;
	margin-left: 5px;
	background: #CBE86B;
}

#SPF-graph-1 {
	object-fit: contain;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 6px;
	background: #FFFFE6;
	float: left;
}

#SPF-graph-2 {
	object-fit: contain;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 6px;
	background: #FFFFE6;
	float: left;
}

#SPF-graph-3 {
	object-fit: contain;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 6px;
	background: #FFFFE6;
	float: left;
}

/*	CSS element styles for chapter Preisdifferenzierung */

#PrD-graph-1 {
	object-fit: contain;
	width: 83%;
	height: auto;
	background: #FFFFE6;
}

.PrD .C1 {
	border-left: 1.5px solid #1C140D;
	padding-left: 5px;
	width: 87px;
	text-align: left;
}

.PrD .C2 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid lightgrey;
	padding-right: 4px;
	width: 40px;
	text-align: right;
}

.PrD .C3 {
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.PrD .C4 {
	border-left: 1.5px solid #1C140D;
	width: 42px;
	text-align: center;
}

.PrD .C5 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid lightgrey;
	padding-right: 4px;
	width: 40px;
	text-align: right;
}

.PrD .C6 {
	border-right: 1.5px solid #1C140D;
	width: 30px;
	text-align: right;
	font-size: smaller;
}

.PrD .CS2 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
}

.PrD .CS5 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
}

.PrD .CS7 {
	border-left: 1.5px solid #1C140D;
	border-right: 1.5px solid #1C140D;
	text-align: center;
}

.PrD .R1.C1 {
	font-size: smaller;
	font-weight: normal;
}

.PrD .R1.C4 {
	text-align: center;
}

.PrD .R3.C4 {
	text-align: center;
	font-weight: bold;
}

.PrD .R1 {
	background: #FFE699;
	border-top: 1px solid lightgrey;
	border-bottom: 1.5px solid #1C140D;
	font-weight: bold;
}

.PrD .R2 {
	border-bottom: 1px solid lightgrey;
}

.PrD .R3 {
	border-bottom: 1px solid lightgrey;
}

.PrD .R4 {
	border-bottom: 1px solid lightgrey;
	font-weight: bold;
	font-size: smaller;

}

.PrD .R5 {
	border-bottom: 1px solid lightgrey;
	padding-top: 8px;
	font-size: smaller;
}

.PrD .R6 {
	border-bottom: 1px solid lightgrey; 
	text-align: right;
}

.PrD .R7 {
	border-bottom: 1.5px solid #1C140D;
	text-align: right;
}

.PrD .R8 {
	border-bottom: 1px solid lightgrey; 
	padding-top: 10px;
	font-size: smaller;
	font-weight: bold;
	background: #FFE699;
}

#mySliderPreisEinzelkunden::-webkit-slider-thumb {
  background: #CBE86B;
}
#mySliderPreisEinzelkunden::-moz-range-thumb {
  background: #CBE86B;
}
#mySliderAnteilEinzelkunden::-webkit-slider-thumb {
  background: #F2E9E1;
}
#mySliderAnteilEinzelkunden::-moz-range-thumb {
  background: #F2E9E1;
}
#mySliderAnteilSeltenVerkauft::-webkit-slider-thumb {
  background: #F2E9E1;
}
#mySliderAnteilSeltenVerkauft::-moz-range-thumb {
  background: #F2E9E1;
}

#LabelPreisEinzelkunden {
	position: relative;
	top: -40%;
	font-family: Calibri, sans-serif;
	font-size: smaller;
	float: left;
}
#LabelAnteilEinzelkunden {
	position: relative;
	top: -40%;
	font-family: Calibri, sans-serif;
	font-size: smaller;
	float: left;
}
#LabelAnteilSeltenVerkauft {
	position: relative;
	top: -40%;
	font-family: Calibri, sans-serif;
	font-size: smaller;
	float: left;
}

/*	CSS element styles for chapter Verschleißteile */

#VerT-graph-1 {
	object-fit: contain;
	width: 86%;
	height: auto;
	background: #FFFFE6;
}

/*	CSS element styles for chapter Teufelskreis der Qualitätskosten */

#TdQ-graph-1 {
	object-fit: contain;
	width: 86%;
	height: auto;
	background: #FFFFE6;
}

#TdQ-graph-2 {
	object-fit: contain;
	width: 200px;
	height: 120px;
	margin-right: 10px;
	margin-bottom: 6px;
	background: #FFFFE6;
	float: left;
}

/*	CSS element styles for chapter Teufelskreis der Qualitätskosten */

#EwZ-graph-1 {
	object-fit: contain;
	width: 215px;
	height: auto;
	background: #FFFFE6;
}

#EwZ-graph-2 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}

#EwZ-graph-3 {
	object-fit: contain;
	width: 240px;
	height: auto;
	background: #FFFFE6;
}

#EwZ-graph-4 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}

/*	CSS element styles for chapter Baukastenentwicklung */

#Bau-graph-1 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}
#Bau-graph-2 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}
#Bau-graph-3 {
	object-fit: contain;
	width: 160px;
	height: auto;
	background: #FFFFE6;
}
#Bau-graph-4 {
	object-fit: contain;
	width: 240px;
	height: auto;
	background: #FFFFE6;
}
#Bau-graph-5 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}

/*	CSS element styles for chapter Preiselastizität */

#PEl-graph-1 {
	object-fit: contain;
	width: 320px;
	height: auto;
	background: #FFFFE6;
}
#PEl-graph-2 {
	object-fit: contain;
	width: 200px;
	height: auto;
	background: #FFFFE6;
}

/*	CSS element styles for chapter Meine Unternehmensanalyse */

.red {
	color: red;
}

.row {
	width: 100%;
} 

.frage {
	width: 150px;
	font-size: smaller;
	display: inline-block;
	text-align: left;	
}

.tnz {	
	width: 25px;
	font-size: xx-small;
	display: inline-block;
	text-align: right;
}
.radios {
	height: 100%;
	display: inline-block;
}

.tvz {
	width: 22px;
	font-size: xx-small;
	display: inline-block;
	text-align: left
}

.radioLabel {
	width: 100px;
	padding-left: 20px;
	font-size: smaller;
	display: inline-block;
	text-align: left	
}

#myCanvas {
	margin-top: 50px;
}