body , div {
    font-size: 16px;
}

p {
	margin-bottom:0;
}

body , div, p, input, label, select, option {
    color: #333;
}

/*
#bs_msgbox, #confirmbox h2, #confirmbox2 h2  {
    background: none repeat scroll 0 0 #fff;
    border: 5px solid #00592c;
    border-radius: 0;
    color: #333;
    padding: 5px 10px;
    width: 500px;
    z-index: 9999;
    float: left;
    margin-right:15px;
}

#bs_msgbox h2, #confirmbox h2, #confirmbox2 h2 {
/*    border-bottom: 4px solid #333333;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 2px;
}

#bs_msgbox-content {
margin-bottom: 15px;
}

#bs_msgbox-content a {
    color: #fff;
}
*/
@media only screen and (min-width:661px) {
	 #container_4 {
	 min-width: 640px;
	 max-width: 640px;
	 width: 640px;
	
	 }
	 #logo {
		 min-width: 180px;
		 max-width: 180px;
		 width: 180px;
		 height: 123px;
		 border: 1px solid #efefef;
	 }
	 .paym_method {
		 min-width: 128px;
		 max-width: 128px;
		 width: 128px; 
		 margin-right:10px;
		 margin-top: 10px;
		 display: inline-block;
		border: solid 2px #fff;
	}
	 .org_name_adress p {
	 	font-size:18px;
	 }
	 .org_name_adress .org_name {
	 	font-size:22px;
	 }
}

/* @media only screen and (min-width:320px) and (max-width: 640px)  { */
@media only screen and (max-width: 660px)  {	
	body {
	-webkit-text-size-adjust:none;
	}
	
	 #container_4 {
	/* 
		min-width: 320px;
		max-width: 320px; 
		width: 320px;
	*/	
	 }
	 #logo {
		 min-width: 90px;
		 max-width: 90px;
		 width: 90px;
		 height: 62px;
		 border: 1px solid #efefef;
	 }
	 .paym_method {
		 min-width: 90px;
		 max-width: 90px;
		 width: 90px; 
		 margin-right:5px;
		 margin-top: 10px;
		border: solid 2px #fff;
	 }	 
	 
	 .org_name_adress p {
	 	font-size:16px;
	 }
	 
	  #bs_msgbox, #confirmbox, #confirmbox2 {
	      width: 92%;
	  }
	  
	  #bs_msgbox-popup {
	      width: 80%;
	      left: 10%;
	      right: 10%
	  }
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.paym_selected {
border: solid 2px #00592c;
border-radius: 10px;
}

:root { --field-h: 40px; } /* gemeinsame Höhe für alle Controls */

.don_form input[type="text"],
.don_form select {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  border: 1px solid #c6c6c6;
  border-radius: 3px;
  height: var(--field-h);     /* gleiche Höhe */
  padding: 0 12px;            /* vertikal über die Höhe, horizontal über Padding */
}

/* Select normalisieren + Platz für den Pfeil */
.don_form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;           /* damit Höhe & Padding wie bei input greifen */
  line-height: normal;
  padding-right: 2rem;        /* Platz für Pfeil */
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 10px 6px;
  /* optional eigener Pfeil (SVG): */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Textarea nicht angleichen (mehrzeilig), ggf. eigene Mindesthöhe setzen */
.don_form textarea { min-height: 120px; }

.don_form input[type="text"],
.don_form select,
.don_form textarea {
  display: block;         /* verhindert Edge-Cases */
  margin-bottom: 10px;    /* Abstand unten */
}

.don_form::-webkit-input-placeholder {color:#c6c6c6; }
.don_form::-moz-placeholder {color:#c6c6c6; } /* firefox 19+ */
.don_form:-ms-input-placeholder {color:#c6c6c6; } /* ie */
.don_form input:-moz-placeholder {color:#c6c6c6; }


.don_form .form_error[type=text] , .agb .form_error {
   background-color: #FFB3B3;
   border: 1px solid #BC0707 !important;
}

.don_form .form_error[type=checkbox] {
   outline: 3px solid #BC0707;
}

.placeholder
{
  color: #c6c6c6;
}

.agb table {
margin-bottom:5px;
font-size: 16px;
}

.agb a {
font-size: 16px;
}
.button_new {
   font-size: 16px;
   border-radius: 5px;
}

#paym_details {
 margin-bottom:10px;
}


/****************** checkbox **********/
input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

label {
display: inline-block;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
background-color: #fafafa;
border: 3px solid #a6a6a6;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
margin-bottom:0;
}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked + label {
background-color: #e9ecee;
border: 3px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 3px;
left: 0;
color: #00592c;
}
.big-checkbox + label {
padding: 12px;
}
.big-checkbox:checked + label:after {
font-size: 28px;
left: 0;
}
.tag {
font-family: Arial, sans-serif;
width: 200px;
position: relative;
top: 5px;
font-weight: bold;
text-transform: uppercase;
display: block;
float: left;
}


/************** popup ***************/
.bs_msgbox, #confirmbox h2, #confirmbox2 h2  {
    background: none repeat scroll 0 0 #fff;
    color: #333;
    padding: 5px 10px;
    width: 518px;
    z-index: 9999;
/*    float: left; 
    margin-right:15px;
*/
	margin: 0 auto;
}

.bs_msgbox h2, #confirmbox h2, #confirmbox2 h2 {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 2px;
}

.bs_msgbox-content {
margin-bottom: 15px;
}

.bs_msgbox-content a {
    color: #fff;
}

.bs_msgbox_close, #bs_msgbox_login_close , .mfp-close {
	right:10px; 
	top:10px;
	height: 24px;
	float: right;
	padding-top: 2px;
}


/****************************************** checkbox **********************************/
input[type=checkbox]:checked ~ div label{
    background: url(../images/checkbox.png);
    background-size: 100%;
}

label {
display: inline-block;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
background-color: #fafafa;
border: 3px solid #a6a6a6;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
margin-bottom:0;
}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked + label {
background-color: #e9ecee;
border: 3px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 3px;
left: 0;
color: #00592c;
}
.big-checkbox + label {
padding: 12px;
}
.big-checkbox:checked + label:after {
font-size: 28px;
left: 0;
}

input[type=radio].css-checkbox {
							display:none;
						}

						input[type=radio].css-checkbox + label.css-label {
							padding-left:25px;
							height:19px; 
							display:inline-block;
							line-height:19px;
							background-repeat:no-repeat;
							background-position: 0 0;
							font-size:16px;
							vertical-align:middle;
							cursor:pointer;

						}

						input[type=radio].css-checkbox:checked + label.css-label {
							background-position: 0 -19px;
						}
						label.css-label {
				background-image:url(../images/radiobox.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

input[type=checkbox].css-checkbox2 {
							display:none;
						}

						input[type=checkbox].css-checkbox2 + label.css-label2 {
							padding-left:35px;
							display:inline-block;
							/*
							height:30px; 
							line-height:30px;
							*/
							min-height:33px;
							background-repeat:no-repeat;
				background-image:url(../images/checkbox_off.png);
							font-size:16px;
							vertical-align:middle;
							cursor:pointer;

						}

						input[type=checkbox].css-checkbox2:checked + label.css-label2 {
				background-image:url(../images/checkbox_on.png);
						}
						label.css-label2 {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
.don_form label.agb-check-label  {
			border: 3px solid #fff;
}
			
/* Betrag-Feld wieder inline neben dem Text "Euro" zeigen */
#donation,
input[name="donation"] {
  display: inline-block !important;  /* nicht als Block umbrechen */
  width: 7em;                        /* Breite nach Wunsch (z. B. 6–8em) */
  margin: 0 6px;                     /* kleiner Abstand links/rechts */
  vertical-align: middle;            /* sauber auf gleicher Höhe */
  /* falls du eine feste Feldhöhe nutzt: */
  /* height: var(--field-h); */
}

/* Generelle Felder: Abstand beibehalten, aber nicht erzwingen, dass alles block ist */
.don_form input[type="text"],
.don_form select,
.don_form textarea {
  margin-bottom: 10px;               /* vertikaler Abstand zwischen Feldern */
  /* kein display:block hier */
}