/*                            styled radio/checkbox                        */


/* Hide actual radio/checkbox */
input[type=radio], input[type=checkbox]
{
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio/checkbox */
input[type=radio] + span::before, input[type=checkbox] + span::before
{
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Fake radio */
input[type=radio] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    font-size: 24px;
    
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
input[type=radio]:checked + span::before
{
    content: "•";
}

/* Fake checkbox */
input[type=checkbox] + span::before
{
    content: "";
    width: 30px;
    height: 30px;
    font-size: 33px;    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
input[type=checkbox]:checked + span::before
{
    content: "✓";
    color: green;
}


.input-container-span   {
width:23%; 
text-align:left; 
float:right; 
margin-bottom:15px
}

.input-container-span  span {
font-family: NewFont;
font-size: 14px;
}


/*                            popup area                        */



.box {
  width: 90%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0ms;
  visibility: hidden;
  opacity: 0;
  z-index: 30000;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  text-align:left;
  border: 2px solid black;
}

.popup .close {
font-family: NewFont; 
font-size: 18px; 
color: red; 
text-decoration:none; 
font-weight:normal; 
margin: 15px 4px 4px 2px; 
padding: 4px 8px 4px 8px;  
background-color: white; 
border: 1px red solid; 
border-radius: 3px 3px 3px;
cursor:pointer;
display:inline;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

.button-empty {
font-family: NewFont; 
font-size: 18px; 
color: white; 
text-decoration:none; 
font-weight:normal; 
margin: 15px 4px 4px 4px; 
padding: 4px 4px 4px 4px;  
background-color: red; 
border: 1px red solid; 
border-radius: 3px 3px 3px;
cursor:pointer;
}

.content .text{
    font-family:NewFont;
    font-size:15px; 
    line-height:30px;
    text-decoration:none;
    color: black; 
    padding: 0px 0px 0px 0px;
}

.h1 {
    font-family:NewFont;
    font-size:30px; 
    line-height:26px;
    text-decoration:none;
   font-weight: normal;
    color: gray; 
    padding: 0px 0px 0px 0px;
    float: left;
  }


.hr {
border:none; 
border-top: 1px dotted gray; 
color: transparent;   
background-color: transparent; 
height: 1px; 
margin: 20px 0px 20px 0px;
  }
  
  
.popup-ajax{
display:inline; 
float:right; 
margin-top:20px

}

#ingredients-footer-respo-display-ingredients{
display:inline; 
width:50%; 
float:left; 
margin:20px 0px 20px 0px
}


/* ok, weiter button*/

#ingredients-footer-respo-popup-ajax{
display:inline; 
float:; 
margin-top:20px;
}

#weiter{
font-family: NewFont; 
font-size: 18px; 
color: white; 
text-decoration:none; 
font-weight:normal; 
margin: 15px 4px 4px 2px; 
padding: 4px 8px 4px 8px;  
background-color: green; 
border: 1px green solid; 
border-radius: 3px 3px 3px;
cursor:pointer;
display:inline;
}

/* ok, weiter button*/

#ingredients-footer-respo-button-send {
display:inline; 
float:left;
font-family: NewFont; 
font-size: 18px; 
color: white; 
text-decoration:none; 
font-weight:normal; 
margin: 15px 4px 4px 4px; 
padding: 4px 4px 4px 4px;  
background-color: gray; 
border: 1px gray solid; 
border-radius: 3px 3px 3px;
cursor:pointer;
}