.sptest
{
color:#00aa00;
}


.spa_testbox
{
background:#ffffff; 
overflow:auto;
/*border:1px solid #ebe3d7;*/

-moz-box-shadow: 0 0 15px #bdaf9c;
-webkit-box-shadow: 0 0 15px #bdaf9c;
box-shadow: 0px 0px 15px #bdaf9c;

}

.spa_testbox_inner
{
 
padding-top:30px;
padding-bottom:30px;
padding-left:30px;
padding-right:30px;

}

.spa_testbutton
{
background:#ebe3d6;
}

.spa_mn
{
text-align:right;
font-size:14px;
color:#bfb9af;
}

.spa_noselect
{
   -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


.spa_clear
{
clear:both;
}

.spa_radiobox
{
width:20%;
text-align:center;
float:left;
}



.spa_abstand20
{
height:20px;
} 

.spa_weiter_gray
{
background:#eeeeee;
color:#999999;
 
text-align:center;


margin-top:40px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
 
/*font-size:24px;*/
font-style: italic; 

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; 

-webkit-transition: all 0.2s ease-in-out;  
-moz-transition: all 0.2s ease-in-out;  
transition: all 0.2s ease-in-out;
}


.spa_weiter
{
background:#ebe3d6;

text-align:center;
 

margin-top:40px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;

/*font-size:24px;*/
font-style: italic; 

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; 

cursor:pointer;

-webkit-transition: all 0.2s ease-in-out;  
-moz-transition: all 0.2s ease-in-out;  
transition: all 0.2s ease-in-out;
}

.spa_weiter:hover
{
background:#d0c9be;
-webkit-transition: all 0.2s ease-in-out;  
-moz-transition: all 0.2s ease-in-out;  
transition: all 0.2s ease-in-out;
}

.spay_gray
{
background:#cccccc;
}


.spa_likert_txt0
{

height:50px;
width:100%;
}

.spa_likert_txt1
{
 
text-align:left; 
float:left;
width:40%;
height:50px;
}

.spa_likert_txt2
{
 
float:right;
text-align:center;
 
width:20%;
height:50px;
}





@media (min-width: 0px) and (max-width: 1023px) 
{

.spa_question
{
padding-top:20px;
font-size:30px;
/*font-weight:bold;*/
min-height:210px;
line-height:43px;
}

.spa_info
{
font-size:40px;
}


.spa_textinput
{
font-family: Arial, "Helvetica New";
width:70%;
font-size:40px;
}

.spa_weiter_font
{
width:300px;
font-size:40px;
}

.spa_weiter_gray_font
{
width:300px;
font-size:40px;
}



.spa_radfield
{
width:100%; 
}

.spa_radfield_a
{
width:70%;
font-size:35px;
float:left;
text-align:left;
}

.spa_radfield_b
{
width:30%;
float:left;
text-align:center;
}


/* ---------------------- */
.spa_radiobox_inner
{
/*border:1px solid #ff0000;*/

margin-left:auto;
margin-right:auto;
width:52px;
height:52px;
text-align:center;
}

.spa_radiotext
{
font-size:30px;
/*font-weight:bold;*/
}

/* RADIO Cusomize */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

 /* border:1px solid #ff0000;*/
}

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

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
/*  background-color: #2196F3;*/
/*  background-color: #e562a2;*/
  background-color: #996e26;
  
  
}

/* 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: 16px;
  left: 16px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: white;
}
/* ---------------------- */


.spa_submit
{
 
font-size:60px;
}

} /* @media (min-width: 0px) and (max-width: 1023px)  */


 


@media (min-width: 1023px) and (max-width: 1223px)
{

.spa_question
{
padding-top:20px;
font-size:25px;
/*font-weight:bold;*/
min-height:210px;
line-height:33px;
}

.spa_info
{
font-size:28px;
}

.spa_textinput
{
font-family: Arial, "Helvetica New";
width:70%;
font-size:30px;
}

.spa_weiter_font
{
width:200px;
font-size:30px;
}

.spa_weiter_gray_font
{
width:200px;
font-size:30px;
}




.spa_radfield
{
width:100%; 
}

.spa_radfield_a
{
width:70%;
font-size:25px;
float:left;
text-align:left;
}

.spa_radfield_b
{
width:30%;
float:left;
text-align:center;
}


/* ---------------------- */
.spa_radiobox_inner
{
/*border:1px solid #ff0000;*/

margin-left:auto;
margin-right:auto;
width:32px;
height:32px;
text-align:center;
}

.spa_radiotext
{
font-size:25px;
/*font-weight:bold;*/
}

/* RADIO Cusomize */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

 /* border:1px solid #ff0000;*/
}

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

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  width: 34px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
/*  background-color: #2196F3;*/
/*  background-color: #e562a2;*/
  background-color: #996e26;
  
  
}

/* 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: 11px;
  left: 11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
}
/* ---------------------- */


.spa_submit
{
 
font-size:30px;
}

} /* @media (min-width: 1023px) and (max-width: 1223px) */





@media (min-width: 1223px) and (max-width: 221523px) 
{

.spa_question
{
padding-top:20px;
font-size:25px;
/*font-weight:bold;*/
min-height:210px;
line-height:33px;
}

.spa_info
{
font-size:28px;
}

.spa_textinput
{
font-family: Arial, "Helvetica New";
width:70%;
font-size:30px;
}

.spa_weiter_font
{
width:200px;
font-size:30px;
}

.spa_weiter_gray_font
{
width:200px;
font-size:30px;
}



.spa_radfield
{
width:100%; 
}

.spa_radfield_a
{
width:70%;
font-size:25px;
float:left;
text-align:left;
}

.spa_radfield_b
{
width:30%;
float:left;
text-align:center;
}

/* ---------------------- */
.spa_radiobox_inner
{
/*border:1px solid #ff0000;*/
margin-left:auto;
margin-right:auto;
width:32px;
height:32px;
text-align:center;
}

.spa_radiotext
{
font-size:25px;
/*font-weight:bold;*/
}


/* RADIO Cusomize */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

 /* border:1px solid #ff0000;*/
}

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

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
   height: 34px;
  width: 34px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
/*  background-color: #2196F3;*/
/*  background-color: #e562a2;*/
  background-color: #996e26;
  
  
}

/* 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: 11px;
  left: 11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
}
/* ---------------------- */


.spa_submit
{
 
font-size:40px;
}

} /* @media (min-width: 1223px) and (max-width: 221523px)  */


.spa_progress
{
 width:90%;
 margin-left:auto;
  margin-right:auto;
background:#ffffff;
/*color:#e562a2;*/
color:#ffffff;
border:2px solid #996e26;
/*margin-top:40px;*/
margin-bottom:40px;

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

overflow:hidden;
}

.spa_progress_inner
{
text-align:center;
background:#996e26;

}



.spa_ds
{

 -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
/*
font-size:30px; 
border:2px solid #ff0000;
*/
}




/*

-moz-box-shadow: 0 0 15px #999999;
-webkit-box-shadow: 0 0 15px #999999;
box-shadow: 0px 0px 15px #999999;
 
 
  
    
ebe3d7

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
*/