/* Remove the navbar's default margin-bottom and rounded borders */

    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }



    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */

    .row.content {
		height: 450px;
		margin-top: 20px;
	}



    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }



    /* Set black background color, white text and some padding */

    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }


    /* On small screens, set height to 'auto' for sidenav and grid */

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

      .sidenav {
        height: auto;
        padding: 15px;

      }

      .row.content {height:auto;}

	  img.bild {
		height: 25px;
	  }

	  div#myNavbar {
		  border: none;
	  }

	  img.talk {
		width: 100%;
		height: auto;
	  }

	  .footer p.foottext {
		text-align: center;
	  }
    }



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

      nav.navbar-inverse {
		margin-left: 20%;
		height: 108px;
	  }

	  div#myNavbar {
		margin-left: 225px;
		margin-top: 57px;
	  }

	  img.bild {
		height: 75px;
	  }

	  img.talk {
		width: 70%;
		height: auto;
	  }

	  p.termin {
		margin-left: 275px;
		font-weight: bold;
	  }

	  .footer p.foottext {
		margin-left: 397px;
	  }

	  .col-sm-6 {
		margin-top: 20px;
	  }


    }

	.col-sm-6 {
		margin-bottom: 55px;
	}

	.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #666666;
    color: white;
    text-align: left;
	height: 45px;
	}

	.footer p {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 11px;
	}



	nav.navbar-inverse {
		background-color: white;
		border: none;
	}



	.navbar-inverse .navbar-nav > li > a {
		color: #666666;
		font-size: 12px;
	}



	.navbar-inverse .navbar-nav > li > a:hover {
		color: black;
	}



	#no > span {
				cursor: pointer;
				font-size: 2em;
				opacity: 0.4;
				transition: opacity 0.3s ease-in-out;
				width:50px;
			}



			#yes > span {
				cursor: pointer;
				font-size: 2em;
				opacity: 0.4;
				transition: opacity 0.3s ease-in-out;
			}



			#back > span {
				cursor: pointer;
				font-size: 2em;
				opacity: 0.4;
				transition: opacity 0.3s ease-in-out;
			}



			#backs > span {
				cursor: pointer;
				font-size: 2em;
				opacity: 0.4;
				transition: opacity 0.3s ease-in-out;
			}



			#back {
				float: right;
				margin-top: 15px;
			}



			#no {
				float: left;
				margin-top: 15px;
			}



			#yes {
				float: left;
				margin-right: 15px;
				margin-top: 15px;
			}



			#next {
				padding-bottom: 10px;
			}



			#next > span{
				cursor: pointer;
				font-size: 2em;
				opacity: 0.4;
				transition: opacity 0.3s ease-in-out;
			}



			#yes:hover > span{
				opacity: 0.9;
				color: green;
			}



			#no:hover > span{
				opacity: 0.9;
				color: red;
			}



			#next:hover > span{
				opacity: 0.9;
			}



			#back:hover > span{
				opacity: 0.9;
			}



			#backs:hover > span{
				opacity: 0.9;
			}



			input {
				width: 32.9%;
			}



			input {
				background: none;
				border: 1px solid #666666;
				padding: 5px;
			}


			input[type=submit] {
				background: rgba(255,0,0,0.1);
				color: black;
			}

			input[type=submit]:hover {
				background: rgba(255,0,0,0.75);
				color: white;
			}



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

				input {
					width: 100%;
					margin-bottom: 10px;
				}

			}



			textarea {
				width: 100%;
				background: none;
				border: 1px solid #666666;;
				padding: 5px;
			}



		div.sidenav {
			background-color: white;
		}






div.title_survey {
	padding-top: 10px;
	margin: 0 0 5px 0;
	background-color: #D3D3D3;
	border: 1px solid;
	border-radius: 2.5px;
	display: flex;
	align-items: center;
	font-size: 11px;
}

div.backgroundradiobuttons {
	padding: 10px;
	margin: 0 0 5px 0;
	border: 1px solid;
	border-radius: 2.5px;
	display: flex;
	align-items: center;
}

div#question {
	float: left;
	width: 75%;
}

input.radio {
	margin: 0 -40px;
}

p.legend {
	width: 124px;
	margin-left: 24px;
	margin-right: 16px;
}

.meter {
	padding: 5px;
	margin: 0 0 25px 0;
	height: 10px;
	background-color: #bfbfbf;
	border-radius: 2.5px;
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: 2.5px;
  background-color: #292426;
}


input#hide {
	display: none;
}

div#box_customer {
	padding: 15px;
	margin:  0 0 30px 0;
}

div#box_customer_content {
	float: left;
}

div#pdf {
	float: right;
}

button.button_filter {
	padding: 10px 10px;
	margin-top: 20px;
	border: 1px solid white;
	border-radius: 2.5px;
}

button.button_filter:hover {
	padding: 10px 10px;
	background-color: #292426;
	color: #f2f2f2;
	cursor: pointer;
}

button.buttons_box {
	background: none;
	color: #292426;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	border: none;
	float: right;
}

button.buttons_box:hover {
	background-color: #292426;
	color: #f2f2f2;
	cursor: pointer;
}

div#data_chart {
	margin-bottom: 25px;
	float: left;
}

div#canvas-holder-bar {
	margin-top: 75px;
}

div.showall {
	margin-bottom: 25px;
}

div.showall > a{
	padding: 5px;
	text-decoration: none;
	border: 1px solid black;
}


.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

div#data_chart {
	margin-bottom: 25px;
	float: left;
}



div#canvas-holder-bar {
	margin-top: 75px;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: rgba(255,0,0,0.1);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgba(255,0,0,0.3);
}


/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: red;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 5px;
	left: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}

div.form_form {
  float: left;
  padding-right: 10%;
  margin-right: 5%;
  width: 45%;
}
@media only screen and (max-width: 700px) {
  div.form_form {
    width: 100%;
    padding-bottom: 10px;
    height: auto;
  }
}