/*************************************************** GlobalsCustom ******/
body { font-family:  Montserrat, Arial,sans-serif; }
h1{font-size:1em;}
.ui-btn{font-family:  Montserrat, Arial,sans-serif;}

/************************************************** mediaQueries *******/
/*Stack the two content containers 
#bloc-a-Main,
#bloc-b-Main{ display:block; width:100%; }*/

.MainGrid { display:block; width:100%; }
/*
@media screen and (max-width: 600px) {
 
}

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


 First breakpoint at 576px 
/* floats bloc-b-Main to make columns 
@media all and (max-width: 36em){	
	#detallOpcio { display:none; }
	
}*/
@media screen and (min-width: 36em){	
	.MainGrid { margin:auto; width:80%; }
	  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
 .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/*@media all and (min-width: 50em){	
	#bloc-a-Main {width:50%; float:left;}
	#bloc-b-Main {width:50%; float:left;}
	h1 { font-size:1.125em; }	
}*/
@media screen and (min-width: 46em){	
	.MainGrid  { margin:auto; width:65%;}

	
	.canvasBlockA {margin:auto;width:48%;float:left;}
	.canvasBlockB {margin:auto;width:48%;float:right}
	h1 { font-size:1.125em; }
}
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media screen and (min-width: 64em){
	.MainGrid { margin:auto;width:60%;max-width:30em;}
	.canvasBlockA {margin:auto;width:48%;float:left;}
	.canvasBlockB {margin:auto;width:48%;float:right}
	/*#bloc-a-Main {float:left ; width:50%; max-width:50em; }
	#bloc-b-Main { float:left ; width:50%;max-width:50em;}*/
	h1 {  font-size:1.2495em; }
}
/***************************************** Override JQm Styles *******/

.mainBloc{
margin:auto; 
padding: 10px; "	
}
.Titol{
padding-left:1.5em;
padding-bottom:0.5em;
vertical-align:middle;
}
.finestra{
background-color:white;   
border: 1px solid #000000;
padding:10px;
}
.NformLine {
margin-left:0.5em;
border-bottom:1px solid grey;"	
}
.subLabel{
margin-left:1em;
}

#iTextStep{font-size:0.85em;}

.selBtnStyle{
width:70%;
max-width:20em;
margin:auto;
margin-top:2em;
}
.okBtnStyle{
max-width:6em;
margin-left:auto;
margin-right:auto;
margin-bottom:2em;
}
.introPage{
/*background-color:#000000;*/
 background-image: url(../css/images/carbon2.png);
  background-position: left top;
  background-repeat: repeat;
}
.introBox{
margin:auto;
margin-top:15%;
width:80%;
max-width:350px;
}
.center{
text-align:center;
}
.hidden{
display:none;
}
.introCard{
width:60%;
max-width:150px;
}
.wholeCanvasPdf{width:100%;}	
.bottomLine{
border-bottom: 2px solid #D3D3D3;
}
.fakeInput{
border: 2px solid #D3D3D3;
margin-bottom:0.5em;
}
.colQuantity{
	margin-left:0.2em;
  margin-right: auto;
	width: 70px;}	
	/* Style the form */
#regForm {
  background-color: #ffffff;
  margin: 50px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}
/* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 1em;
  font-family:  Montserrat, Arial,sans-serif;;
  border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
  display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none; 
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
/* Mark the active step: */
.step.active {
  opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
#typeSelect{
min-height:12em;
}
.quadrat{
margin:3px;
padding:0.625em;
text-align:center;
vertical-align:middle;
/*line-height:2.25em;*/
}
.labelLine{
padding:5px;
text-align:center;
vertical-align:middle;
}
.modelListview{
	font-size:1.10em;
}
.sectionTable{
	font-size:0.85em;
}
.headerBtn{
width:74.925%;
/*max-width: 84.925%;*/
}
.sectionTable .ui-block-a{
float:left;
width:19.925%;
}
.sectionTable .ui-block-b{
float:left;
width:19.925%;
}
.sectionTable .ui-block-c{
float:left;
width:29.925%;
}
.sectionTable .ui-block-d{
float:left;
width:29.925%;
}
.sectionTable2{
	font-size:0.75em!important;
	text-align:center !important;
}
.sectionTable2 .ui-block-a{
clear:left;
width:33.333%;

}
.sectionTable2 .ui-block-b{
float:left;
width:33.333%;

}
.sectionTable2 .ui-block-c{
float:left;
width:33.333%;

}

 #IqLabel {
 margin:auto;
 max-width:8em;
background-color:#D3D3D3;
}
#modelLabel{
margin:5px;
}
.topLine{
border-top-style:solid;
border-top-color:#D3D3D3;
border-top-width:0.5px;
border-bottom-style:solid;
border-bottom-color:#D3D3D3;
border-bottom-width:0.5px;
}
.ui-li-quants {
	position: relative;
	background-color:#D3D3D3;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	padding: 0 .48em;
	line-height: 1.6em;
	min-height: 1.6em;
	min-width: .64em;
	/*margin-right: 5em;
	margin-left: 5em;*/
	top: 50%;
	margin-top: -.88em;
}	
.stepLine{
	font-weight:bold;
	margin-left:1.5em;
}	
.instruccioLine{
	font-weight:bold;
	font-size:0.85em;
	text-align:center;
}
.capital{
	font-size:1.5em;
}

.top10{
	padding-top:10px;
}
.labelMargin{
	margin-left:1em;
}
.pngIcon{
	width:25px ;
	height:25px;
	margin-top:2px;
	margin:4px;
	padding:2px;
	/*border-radius:50%;*/
}

.warningCol.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
       background:#FFD700 !important; 
	   border-bottom-color:#FFFFFF !important;
	   border-bottom-width:3px;
}
.warningCol .ui-collapsible-heading-toggle {
       background:#FFD700 !important;
}
.LlegendaDades{
	padding:00.25em;
	margin-bottom: 15px;
	margin-top:5px;
	font-size:0.85em;
	border-top: 0.5px solid #000000 ;
	border-bottom: 0.5px solid #000000 ;
	
}
.Contingut{
	margin-top: 10 px;
	margin-bottom: 5px;
	font-size:1em;
}
.LineaDades{
	margin-top: 10 px;
	margin-bottom: 5px;
	font-size:1em;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
#myProgress {
  width: 100%;
  background-color: white;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: grey;
}