/*Ein Selektor wählt das Element aus*/
Selektor {
	Attribut1: wert;
	Attribut2: wert;	
}

/* allgemeine Einstellungen */

* {
	margin: 0;
	padding: 0;	
	
	font-family: Raleway,sans-serif;
	font-size: 16px;
	text-align: left;
	
	color: #595959;
}

p {
	float: none;
	margin: auto;
	// font-weight: bold;
	text-align: center;
	// font-size: 1.2em;
}

html,
body {
	height: 100%;
	background: whitesmoke;
}

#container {
   position: relative;
   padding: 10px;
}

#wrapper {
    display: inherit;
	vertical-align: top;
    margin: 0 auto;
    width: 1250px;
    max-width: 100%;
	z-index: 1;
	border-collapse: collapse;
	background: #ffffff;
}

#content {
    display: inherit;
    vertical-align: top;
    margin: 0 auto;
    padding: 8px;
    min-height: 564px;
    max-height: 100%;
    max-width: 100%;
    z-index: 1;
}

#footer {
	display: flex;
	height: 60px;
	max-width: 100%;
	/* background-color: #666666; */
}

#bottom1 {
	display: inline-block;
	height: 60px;
	width: 30%;
	/* min-width: 100px; */
	max-width: 100%;
	/* background-color: #666666; */
}

#bottom2 {
	display: inline-block;
	text-align: center;
	height: 60px;
	width: 40%;
	/* min-width: 100px; */
	max-width: 100%;
	/* background-color: #666666; */
}

#bottom3 {
	display: inline-block;
	height: 60px;
	width: 30%;
	/* min-width: 100px; */
	max-width: 100%;
	/* background-color: #666666; */
}

#continuebutton{
    display: inline-block;
    text-align: center;
    margin: 5px 0px 5px 0px;
    /* padding: 8px 2px; */
    height: auto;
    width: 100px;
    max-width: 99%;
    color: #131313;
    font-size: 2.0em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background: #c3c3c3;
}
#continuebutton:hover{
    color: #f8f8ff;
    background: #b8e08a;

    /* box-shadow: 0px -10px 20px -4px rgba(0,0,0,0.4); */
    /* transform: translate(0px, 4px); */
    /* transition: ease-in-out all, 200ms; */
}

#backbutton{
	display: inline-block;
	text-align: center;
	/* padding: 8px 2px; */
	margin: 5px 0px 5px 0px;
	height: auto;
	width: 100px;
    max-width: 30%;
    color: #666666;
    font-size: 2.0em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background: #c3c3c3;
}
#backbutton:hover{
    color: #f8f8ff;
    background: #ef6868;
	
    /* box-shadow: 0px -10px 20px -4px rgba(0,0,0,0.4); */
    /* transform: translate(0px, 4px); */
    /* transition: ease-in-out all, 200ms; */
}

#logo {
    float: right;
    margin: 5px;
    max-width: 80%;
    border-radius: inherit;	
}

#pic {
	margin-top: 15px;
    border-radius: inherit;	
}

#fortschritt-balken {
    position: relative;
    margin: 5px;
    height: 20px;
    max-width: 90%;
    border: 1px solid #cacaca;
    border-radius: 8px;
    background: #c3c3c3;	
}

#fortschritt {
    float: right;
    position: inherit;
    margin: 2px;
    color: white;
}

#pBar {
  	position: absolute; 
  	height: 20px;
}  

img {
    display: block;	
    margin: auto;	
    max-width: 100%;
    border-radius: 6px;
}

.icon {
    display: block;	
    margin: 10px 0px;	
    width: 100px;
    max-width: 100%;
}

a {
	color: inherit;
    font-size: inherit;
}

#video {
	margin: auto;
    display: table;	
}

.qtext {
	margin-bottom: 15px;
	/* padding: 5px 0px; */
	font-weight: bold;
	font-size: 1.2em;
	/* border-radius: 4px; */
	/* border: 2px solid #013B67; */
	/* box-shadow: 0 4px 8px #7d7d7d; */
}

/* interviewer-anweisung */
.qprehelptext {
	margin-bottom: 8px;
    padding: 5px;
    font-weight: bold;
    font-size: 1.2em;
    color: #013B67;
    text-align: center;
    border-bottom: 4px solid #013B67;
}

/* hinweise */
.qposthelptext {
    padding: 5px;
    font-weight: bold;
    font-size: 1.2em;
	color: #FF6600;
    text-align: center;
}

.qhtmlposttext {
	margin-bottom: 15px;
	padding: 5px;
    color: #505050;
	border-radius: 4px;
    border: 1px solid #dddddd;
}

/* fragetext */
.qtitle {
	margin-bottom: 15px;
	padding: 5px;
	font-size: 1.5em;
	/* font-weight: bold; */
	/* border-radius: 4px; */
	/* background: #f6f6f6; */
}

/* fehlermeldungen */
.qerror{
	margin-bottom: 5px;
	padding: 5px;
	color:#ffffff;
	border-radius: 4px;
	background: #FC2C2C;
}

/* fragenummer */
.qname {
    color: #E91E63;
    font-weight: bold;
    padding: 5px;
}

/* tabelle */
.qtable {
	margin-bottom: 15px;
	padding: 5px;
    width: 100%;
    max-width: 100%;
	border-collapse: collapse;
}

.numqtable {
    margin: 25px 5px;
    padding: 5px;
    max-width: 100%;
    border-collapse: collapse;
}

.uploadq .qtable{ 
	width:auto; 
}

.qscreen {
	width: 100%;
}

.flex-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    height: auto;
    padding: 5px;
    margin: auto;
}
.flex-item {
    flex: auto;
	margin-bottom: 15px;	
    margin-right: 25px;	
    padding-right: 25px;	
    width: 300px;
    max-width: 100%;
    font-size: 1.5em;
}

.box {
    box-sizing: border-box;
    float: left;
    width: 50%;
    color: #444444;
    font-size: 1.2em;
    font-weight: normal;
}

/* listen */
.qrowclass1, .qrowclass2, .qrowclass3{
    height: 33px;
    padding: 5px;
    border-top: 1px solid #013B67;
    border-bottom: 1px solid #013B67;
}

.qrowclass1:hover{
    color: #f8f8ff;
    background: #82cef3;
}

.qrowclass2:hover{
    color: #f8f8ff;
    background: #82cef3;
}

.qrowclass3:hover{
    color: #f8f8ff;
    background: #82cef3;
}

.qcolseparator {
    width: 5px;
}

/* zelle mit button */
.qbuttoncell {
	cursor:pointer;
	width:30px;
}

/* textlabel */
.qtextlabelcell {
    padding: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #9E9E9E;
}

.banner {
    padding: 200px 0px 200px 0px;
    width: 99%;
    background: url(./start.jpg) no-repeat 50% 50%;
}

h1 {
    margin: auto;
    padding: 25px 5px 25px 5px;
    max-width: 80%;
    font-size: 1.5em;
    text-align: center;
    color: white;
    background-color: #274263cc;
}

.headline {
	display: block;
    margin-bottom: 20px;
    text-transform: uppercase;	
    font-weight: bold;
    font-size: 1.5em;
    color: #013B67;
    text-align: center;	
}

.textitem {
	display: block;
	padding: 15px 0px;
	font-weight: bold;
	font-size: 1.2em;
	color: #013B67;
	text-align: center;
}

u {    
	font-size: inherit; 
}

b {    
	font-size: inherit; 
}

.blau {    
	font-size: inherit; 
	color: #013B67;
}
.rot {
    font-size: inherit; 
	color: #FC2C2C;
}
.grün {
    font-size: inherit; 
	color: #04B404;
}
.orange {
	font-size: inherit;
	color: #FF6600;
}
.petrol {
	font-size: inherit;
	color: #009688;
}

.line {
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 99%;
    border-top: 4px solid #013B67;
}

ul {
    margin: 25px;
    font-size: inherit;
    font-style: inherit;
    line-height: 1.2em;
}

li {
    font-size: inherit;
    font-style: inherit;
}

/* Zelle mit offenem Inputfeld / Inputfeld selbst */
.qopencell {
	text-align:left;
}
.qlabelopen {
	width: 75%;
	line-height: 18px;
	font-size: 16px;
	text-align: left;
	padding: 5px;
	margin: 5px 0 5px 0;
	background-color: #ffffff;
	border: 1px solid #000000;
	border-radius: 4px;
}

/* Selectinputs */
.qselect { 
	-webkit-appearance: menulist-button; 
	border: none;
	border-radius: 4px;	 
}

.qselect, .qselect option {
    max-width: 100%;
    min-width: 100%;
    margin-bottom: 20px;
    line-height: 40px;
    height: 40px;
    border-top: 1px solid #013B67;
    border-bottom: 1px solid #013B67;
    border-radius: inherit;
}

/*** Eingabefelder OpenQ ***/
.qopenfield {
    padding: 4px;
    width: 99%;
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.numinput {
    padding: 5px;
    margin: 5px 5px 5px 0px;
    width: 75px;
    border: none;
    border-bottom: 1px solid #013B67;
    text-align: left;
    line-height: 18px;
}

/*** Grids ***/
.qanchortext, .qgridheader {
    font-weight: bold;
    font-size: 0.9em;
    padding-bottom: 10px;
    text-align: center;
}

.qitemtextcell { 
	text-align: left; 
}

.qrightitemtextcell { 
	padding-right: 8px;
	text-align: right; 
}

.singlegridq .qtextitemcell, .multigridq .qtextitemcell,
.singlegridq .qtextlabelcell, .multigridq .qtextlabelcell{
	font-weight: bold;
	color: #ffffff;
	background-color: #666666;
} 

.singlegridq .qlabeltextcell, .multigridq .qlabeltextcell{
    padding: 5px 0px 5px 0px;
    width: 80px;
	max-width: 100%;
    text-align: center;
    vertical-align: bottom;
}

.qgriderrorcell{
	background-color:#FC2C2C;
}

.qgridspacing {
	width:8px;
}

/************************************/
/********     Configurator   ********/
/************************************/

#configurator {
    width: 100%;
	min-height: 564px;
    max-width: 100%;
    max-height: 100%;
}

.ccabutton {
	font-weight: bold;
	font-size: 28px;
	vertical-align: middle;
	width: 200px;
	height: 50px;
}

.cccatdiv_std { 
	width: 100%;
}
.cccatdiv_err { border: solid 2px #FF0000; }

.cccatdiv_flt { 
	display: none; 
    max-width: 100%;
}

.financetable { 
	border-collapse: collapse; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	cursor: pointer; 
	font-weight: normal; 
}
	
.cctable { 
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.ccsectiontitlediv2 {
	display: none;	
}

.cctitle { 
    display: inherit;
    margin: 20px 0px;
    padding-left: 2px;
    font-weight: normal;
}

.cctableheaderrow { 
    max-width: 100%;
	color: #9E9E9E;
}

.ccheadercell { 
    padding: 8px 4px;
    max-width: 99%;
	font-size: 0.8em;	
}

.cctabletextrow {
	max-width: 100%;
}

.cctabletexcell {
	max-width: 100%;
}

.cctabletextdiv {
    max-width: 100%;
    padding: 2px 0px 2px 42px;
    color: #013B67;
    margin: 20px 0px;
}


.cctablerow1 { 
	max-width: 99%; 
}

.cctablerow2 { 
	max-width: 99%; 
}

.cctablerow3 { 
	max-width: 99%; 
}

.cctablecell { 
    max-width: 100%;
    padding: 10px 4px;
    font-weight: normal;
	font-size: 0.9em;
    text-align: left;
    border-top: solid 1px #013B67;
    border-bottom: solid 1px #013B67;
}

.cctextl { 
	padding: 1px;
	font-size: 0.9em;
}

.cctextr { 
    padding: 2px;
    min-width: 55px;
    text-align: right;
	font-size: 0.9em;	
}

.cctextlistprice { color: #000000; background-color: #CCCCCC; }
.totalprice { background-color: #666666; font-weight: bold; color: ghostwhite; }
.monthrate { color: #000000; background-color: #CCCCCC; font-weight: normal; }
.baseprice { color: #000000; background-color: #DDDDDD; }
	
.ccthumb { 
    max-width: 95%;
}

.ccidiv { background: #CCCCCC; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; }

.ccbutton { 
	width: 30px;
	text-align: center 
}

.ccname { width: 150px; }
.ccimg { width: 60px; text-align: center }
.ccdesc { width: 400px; }

.cc_pricecell { 
    padding: 0px 2px;
    width: 50px;
    max-width: 99%;
    color: #5d5d5d;
    font-weight: bold;
	font-size: 0.9em;
}

.cc_price_neg { 
    padding: 0px 2px;
    width: 50px;
    max-width: 99%;
    color: #ff3939;
    font-weight: bold;
	font-size: 0.9em;
 }

.cc_ratecell { width: 50px; text-align: right; font-style: italic; background-color: #BBBBCC; }
.cctabs { 
    width: 100%;
    max-width: 100%;
}

.cctabi { 
    margin: 0px;
	padding: 5px;
	max-width: 99%;
    font-weight: normal;
    color: darkgray;
    border-radius: 6px;
    text-align: center;
    background-color: #dddddd;
}

.cctaba { 
    margin: 0px;
	padding: 5px;
    width: 200px;
	max-width: 99%;
    font-weight: normal;
    color: ghostwhite;
    border-radius: 6px;
    text-align: center;
    background-color: #013B67;
}

.ccshowleft { 
    vertical-align: top;
    position: relative;
    left: -5px;
    padding: 5px;
    width: 250px;
	max-width: 99%;
    border-radius: 6px;
    background-color: #ececec;
}

.cchideleft { 
	width: 0px; 
}

.cctir { 
	height: 2px; 
}

.ccratediv { 
    padding: 2px;
    border: solid 1px;
    border-radius: 4px;
    font-size: 0.6em;
}

	
.hkmtable1 {
	border: solid 1px;
	font-weight: normal;
	border-collapse: collapse;
}
.hkmtable1 td { border: solid 1px; }

/*******************************************/
/********     Reiz-Reaktions-Test   ********/
/*******************************************/

.qtachitable { 
	margin-left: auto; 
	margin-right: auto; 
}

.qtachibuttonfit { 
	width: 300px; 
	height: 140px; 
	border-radius: 4px;	
	box-shadow: 0 4px 8px #7d7d7d;
	text-align: center; 
	background-color: #04B404; 
	font-size: 2.5em; 
	color: white;
}

.qtachibuttonnotfit { 
	width: 300px; 
	height: 140px; 
	border-radius: 4px;	
	box-shadow: 0 4px 8px #7d7d7d;	
	text-align: center; 
	background-color: #FC2C2C; 
	font-size: 2.5em; 
	color: white;
}
  
  /* .qtachibuttonfit_fra { width: 300px; height: 140px; text-align: center; background-color: #04B404; font-size: 30px; } */
  /* .qtachibuttonnotfit_fra { width: 300px; height: 140px; text-align: center; background-color: #FC2C2C; font-size: 30px; } */
  
  /* .qtachibuttonConvient { width: 300px; height: 140px; text-align: center; background-color: #04B404; font-size: 30px; } */
  /* .qtachibuttonnotConvient { width: 300px; height: 140px; text-align: center; background-color: #FC2C2C; font-size: 30px; } */
  
  .qtachidist { width: 200px; }
  .qtachiwort { height: 100px; font-size: 2.5em; color: #013B67;}
  .qtachiprogr {
		background: #CCCCCC;
		position: fixed; 
		top: 0; left: 0; bottom: 0; right: 0;
		z-index: 2;
		opacity: 0.7;
	}