* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
     
    
    font-weight: 300;

}

* h1, h2, h3, h4, h5, h6 {
	/*font-family: 'Roboto Mono', monospace;*/
	font-family: 'Roboto', sans-serif;
}

html{
	margin: 0px;
	padding: 0px;
	font-size: 15px;
	/*overflow-x: hidden;*/

}

body {
	/*overflow-x: hidden;*/
}


.contentArea {
	margin-top: 3rem;
	margin-bottom: 5rem;
}

.contentArea h2 {
	margin-bottom: 1rem;
}

.form-control {
	padding-left: 0px;
}

.form-control.disabled {
	color:#7d8388;
	cursor: not-allowed;
}

.btn-primary:disabled {
	color: #fff;
    background-color: #cacaca;
    border-color: #dddddd;
    cursor: not-allowed;
}

.btn {
	border-radius: 0.6rem;
	padding:0.1rem 2rem 0.5rem 2rem;
	cursor: pointer;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

header{	
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 0px;
	max-width: 100%;
	overflow: hidden;
	/*font-size: 24pt;
	font-weight: bold;
	margin-left: 25%;*/
}	

header.pageColumn {
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;*/
}
body{
	margin: 0px;
	padding: 0px;
	font-size: 1em;
	

}

a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: 400;
	-webkit-transition:all ease 0.25s;
	transition:all ease 0.25s;
	display: block;
}

a:hover{
	/*color: #0055FF;*/
	color: rgb(234,91,12);
	text-decoration: underline;
}

#wrapper{
	/*fixar problemet i mobil men gör annat konstigt*/
	/*display: table;*/
	


}




h1{
	font-size: xx-large;
}

h2{
	font-size: x-large;
	color: rgb(80,80,80);
	
	font-weight: 500;
	margin-bottom: 5px;
	color: black;
}


h3{
	font-size: large;
	
	margin-top: 0px;
	margin-bottom: 50px;
}

h3.no-margin{
	margin-bottom: 5px;
}


p {
	font-weight: 300;
}

p.instructions {
	margin-bottom: 30px;
}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search]{
	cursor: auto;
    outline: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid black;
}

input[type=search]{
	border: 1px solid black;
	padding: 5px;
}

input[type=text], input[type=password], input[type=email], input[type=search], textarea{
	width: 100%;
	margin-top: 5px;
}

input [type=range] {
	width: 400px;
}

textarea{
    outline: none;	
	height:200px;
	margin-top: 20px;
}

input, select, textarea, button:enabled{
	cursor: pointer;
	-webkit-transition:all ease 0.25s;
	transition:all ease 0.25s;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	/*border-color: #0055FF;*/
	border-color: rgb(234,91,12);	
}

select:enabled:hover, button:enabled:hover,
select:enabled:focus, button:enabled:focus {
	/*background-color: #0055FF;*/
	background-color: rgb(234,91,12);
	color: white;
}

select[multiple]{
	height: 4em;
} 

/* IDs */

#logo{
	height: 5.333rem;
	margin: 0px auto;
	
}

/* CLASSES */

.bgRed{
	background-color: #e23434;
	color: white;
}

.borderRed{
	border-color: red;
}

.left{
	text-align: left !important;
}

.right{
	text-align: right !important;
}

.center{
	text-align: center;
}

.justify{
	text-align: justify;
}

.slider {
	margin-top: 20px;
}

.small{
	font-size: small;
}

.smaller{
	font-size: smaller;
}

.title {
	margin-bottom: 10px;
}

.top{
	vertical-align: top;
}

.middle{
	vertical-align: middle;
}

.input_area 
{
	border: solid #E5E5E5 1px;
	padding:35px;
}

.input_area h2 {
	text-align: center;
}

/*.input_area h2 {
	font-weight: 500;
	margin-bottom: 5px;
	color: black;
	text-align: center;
	transition: border .25s ease;
}

.input_area h3{
	margin-top: 0px;
	margin-bottom: 50px;
}*/

.members {
	text-align: center;
	margin-top: 20px;
}
hr {
	border-top: solid #E5E5E5 1px;
	width: 100%;
}
.form{
	border-top: solid #E5E5E5 1px;
	margin-top: 0.5em;
	margin-bottom: 2.5em;
	margin-right: 2%;
	margin-left: 2%; 


}

.formfield {
	margin-left: 11%;
	margin-right: 11%;
	margin-bottom: 30px;
}

.formfield img{
	width: 100%;
}

/*.pageStats {
		  margin: 0 auto;
	      padding-left: 5%;
	      padding-right: 20px;

}

.border {
	border: solid #E5E5E5 0.2px;
}

.filters {
	position:fixed;
    margin-left:60%;
    margin-right: 10%;
    


}

.graphs {
	width: 60%;
	margin-top: 0.5em;
	margin-bottom: 2.5em;
	margin-right: 2%;
	margin-left: 2%; 
}
*/


.graphs h2 {
	text-align: center;
}
input[type=radio].margin-bottom{
	margin-bottom: 1em;

}

.genderpick, .treval {
	margin-top:15px;
	width: 100%;
	display: table;
	table-layout: fixed;

}
.genderpick label, .treval label {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	position: relative;

}




.genderpick input[type=radio]{
display: block;
	margin-left: 46%;
	margin-bottom: 5%;
	position: relative;

}

/*.treval {
	margin-top:15px;
	width: 100%;
	display: table;
	table-layout: fixed;

}

.treval label {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;

}

.treval label input[type=radio]{
	display: block;
	margin-left: 46%;
	cursor: pointer;
}
*/
select{
	outline: none;	
	background: rgb(240,240,240);
	border: 0;
	border-radius: 2px;
	height: 2em;
	margin: 2px;
}



button{
	background: rgb(240,240,240);
	border: 1px solid black;
	border-width: 1px;
	border-radius: 4px;
	height: 2em;
	margin: 0px auto;
}

#main{
	/*margin-bottom: 50px;*/
	/*height: 100%;*/

}

footer{
	padding: 0px;
	border-top: 0px solid black;
}

.pageColumn{
	/*margin: 0 auto;
	padding-left: 25%;
	padding-right: 25%;
	-webkit-transition: padding-left .25s linear;
	transition: padding-left .25s linear;
	-webkit-transition: padding-right .25s linear;
	transition: padding-right .25s linear;
	display: block;
	justify-content:center;
    align-items:center;
    width: 100vw;*/



}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

}

.flex-item {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
    white-space: nowrap;
}

.formGroup{
	margin: 30px 0px 50px 0px;
}

.formQuestion{
	margin-bottom: 30px;
	margin-top: 20px;
}


.formQuestion img{
	width: 100%;
}

.hide{
	display: none;
}

.infoPopup{
	display: inline-block;
	position: relative;
}

.infoPopup img{
	width: 1em;
	height: 1em;


}

.infoPopupText{
	background: #E8EAEA;
	border-radius: 4px;
	padding: 5px;
	display: none;
	position:absolute;
	width: 320px;
	left: 20px;
	top: -130px;
	z-index: 1;
	text-align: left;
	padding: 15px;

}

.largePresentation{
	text-align: center;
	font-family: "Roboto Mono", monospace;
	font-weight: 800;
	font-size: 3rem;
	color: rgb(234,91,12);
	-webkit-transition: font-size .25s linear;
	transition: font-size .25s linear;
	
}

.subnumber {
	font-size: 2rem;
	font-weight: 400;
	font-family: "Roboto Mono", monospace;
}

/*.headerpresentation {
	font-family: "Roboto Mono", monospace;
}*/
.mediumPresentation *{
	text-align: center;
	font-size: 1rem;

}

.mediumPresentation h6 {
	/*font-family: 'Roboto Mono', monospace;*/
	font-weight: 500;
	margin-bottom: 1rem;
	
}

.mediumPresentation p {

}

.quote{
	text-align: center;
	font-weight: 400;
	font-size: 1.7rem;
	color: rgb(234,91,12);
	font-style: italic;
}





/*Flex-box statistics*/









@media only screen and (max-width: 1024px) and (min-width: 768px) {

.pageColumn{
	margin: 0px auto;
    padding-left: 15%;
	padding-right: 15%;
}






}

@media only screen and (max-width: 768px) and (min-width: 414px) {



.pageColumn{
	margin: 0px auto;
    padding-left: 10%;
	padding-right: 10%;
}

.input_area 
{
	border: none;
	padding:10px;
}
.formfield {
	margin-left: 7%;
	margin-right: 7%;

}



}

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



	.pageColumn{
		margin: 0px auto;
	    padding-left: 5%;
		padding-right: 5%;
	}
	.input_area 
	{
		border: none;
		padding:5px;
	}
	
	.infoPopupText{
		width: 320px;
		position: relative;
		margin-right: 10px;
	
	
	}
	.formfield {
		margin-left: 0%;
		margin-right: 0%;
	
	}


}