/* id mit #   , class mit . -----------------------------------------------  */
/* padding Vier Werte:   Abstand oben, rechts,  unten  links */

/* icons für Kontakt */
#sendermail_x{
background: url(../Images/cancel.png) no-repeat 1px center; 
}

#subject_x{
background: url(../Images/cancel.png) no-repeat 1px center; 
}

#message_x{
background: url(../Images/cancel.png) no-repeat 1px  top; 
}


 /*  Start ----------------------------------------------------------------------------------------------------------------  */
span.Start_active {
        color: #FFFFFF;
        background-color: var(--colordark1) ;  
		border: solid 2px var(--colordark1) ;
}

.Start fieldset{
  /*  width: 100%;    */
	margin-top: 0px;
	padding-left: 10px;
	background: rgb(246, 247, 242) ; /* hellgrau  */
	border: solid 1px var(--colordark1)  ;
}

.Start legend{
    /* width: 100%;   */
	font-weight: bold;
	margin: 0px ;
	padding: 5px 10px 5px 10px;
	background-color: #DCDCDC;  /* hell beige */
	border: solid 1px var(--colordark1) ;
	color: black;
}


.Start legend span{
  padding: 5px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: yellow;
  text-align: left;
  border: 1px solid var(--colordark1) ; /* Rahmen */
}


.Start  a { 
	color: var(--colordark1) ;  /* grau */
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
}

.Start a:hover { 
	text-decoration: underline;
}



 /*  Anmeldung ----------------------------------------------------------------------------------------------------------------  */
span.Anmeldung_active {
        color: #FFFFFF;
        background-color: var(--colordark6) ;  
		border: solid 2px var(--colordark6) ;
}

.Anmeldung fieldset{
  /*  width: 100%;    */
	margin-top: 0px;
	padding-left: 10px;
	background: rgb(246, 247, 242) ; /* hellgrau  */
	border: solid 1px var(--colordark6) ;
}

.Anmeldung legend{
    /* width: 100%;   */
	font-weight: bold;
	margin: 0px ;
	padding: 5px 10px 5px 10px;
	background-color: var(--colorlight6);  
	border: solid 1px var(--colordark6) ;
	color: black;
}

.Anmeldung  a { 
	color: var(--colordark6) ;  /* dunkel beige */
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
}

.Anmeldung a:hover { 
	text-decoration: underline;
}



 /*  patient ----------------------------------------------------------------------------------------------------------------  */
.patient fieldset{
  /*  width: 100%;    */
	margin-top: 0px;
	padding-left: 10px;
	border: 1px solid  var(--colordark5);
    background: rgb(246, 247, 242) ; /* hellgrau  */
	background-color:  var(--colorlightgrey) ;  /* hell grau */
}

.patient legend{
    /* width: 100%;   */
	font-weight: bold;
	margin: 0px ;
	padding: 5px 10px 5px 10px;
	border: 1px solid  var(--colordark5);
	background:  var(--colordark3) ; /* orange  */
	background-color: var(--colorlight5)   ; /* hell graublau */
	color: black;
}



/*  therapeut ----------------------------------------------------------------------------------------------------------------  */
span.therapeut_active {
        color: #FFFFFF;
        background-color: var(--colordark4) ;  
		border: solid 2px var(--colordark4) ;
}

.therapeut fieldset{
  /*  width: 100%;    */
	margin-top: 0px;
	padding-left: 10px;
	background: rgb(246, 247, 242) ; /* hellgrau  */
	border: solid 1px var(--colordark4) ;
}

.therapeut legend{
    /* width: 100%;   */
	font-weight: bold;
	margin: 0px ;
	padding: 5px 10px 5px 10px;
	background-color: var(--colorlight4); 
	border: solid 1px var(--colordark4) ; /* hell grün */
	color: black;
}

.therapeut  a { 
	color: var(--colordark4) ;  /* dunkel grün */
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
}

.therapeut a:hover { 
	text-decoration: underline;
}


 /*  ----------------------------------------------------------------------------------------------------------------  */
  Form {
  background-color: transparent;
  margin: 0 ;
  padding: 0;

}


.FormCaption {
  color: white;
  background: #6B8CA5 ; /* Hintergrund */
  font-weight: bold;
  margin: 1.25em 1em;
  padding:  0.6em 0  0px  5px;
  text-align: left;
}

label {
	/* font-weight: bold; */
	color: rgb(100,100,100);   /* grau */
	/* width: 100%;  */
	margin: 0px ;
	padding: 0px;
	font-size: 1em;  
}

input {
    /* border: 1px solid #B3B3B3;   *******************************************************/
    width: 100%; 
	text-align: left;  
	font-family: arial, sans-serif;
	font-size: 1em;  
}

select.width100 {
    width: 100%; 
	text-align: left;  
	font-size: 1em;  
}

select.widthnone
{
    /* width: 100%;  */
	text-align: left;  
	font-size: 1em;  
}


textarea {
    resize: vertical;
    width: 100%;
	text-align: left;  
	font-family: arial, sans-serif;
	font-size: 1em;  
}


input.checked {
    width: 0%;
   margin: 5px 5px 5px 5px;
   font-size: 1em;  
}   

label.radio{
	text-align: center;
	font-weight: bold;
	margin: 0px ;
	padding: 0px;
	font-size: 1em;  
}

input.radio{
   text-align: center;
   width: 0%;
   margin: 5px 5px 5px 5px;  
   font-size: 1em;  
}


input:focus  {
			border: 1px solid rgb(255,0,0) ;     /*  focus  farbig */
			padding: 1px ; 
			/* background: yellow;  */
}

select:focus , textarea:focus {
			border: 1px solid rgb(255,0,0) ;     /*  focus  farbig */
			padding: 1px ; 
			/* background: yellow;  */
}

.asterisk {
color:#ec0000 ; 
/* font-size:24px;  */
font-style: normal;
}

input.widthnone {
    width: 0%;  
	text-align: left;  
}


/* ---------------------------------------------------------------*/
/* multiple_select  */
.multiple_select_div {
border: 2px solid var(--colordarkgrey) ;   
padding: 5px ; 
}

.multiple_checkbox_width {
    width: 10px;
	text-align: left;  
	font-family: arial, sans-serif;
	font-size: 1em;  
}

.multiple_checkbox_input {
margin-bottom:12px;

}

.custom_multiple_checkbox {
    display: none; 
}

.custom_multiple_checkbox + label {
    margin-top:5px; /* Abstand oben */
	background-color: white;  /* Hintergrund un checked */  
	border-bottom: 2px solid   var(--colormiddlegrey)  ; /* Ramen un checked */
	border-right: 2px solid   var(--colormiddlegrey)  ;
	box-shadow: -2px -2px 0 0 var(--colordarkgrey)   ;  /* optional Schatten  */

	padding: 18px; /* Groesse Checkbox */
	padding: 0.6em;
    
	border-radius: 0px;  /* fuer Rechteck */
	
    display: inline-block;
    position: relative;
	cursor:pointer;
}
 
.custom_multiple_checkbox:checked + label {
	background: rgb(0, 204, 0);   /* Farbe grün Button  checked */
	border-bottom: 2px solid   var(--colormiddlegrey)  ; /* Ramen un checked */
	border-right: 2px solid   var(--colormiddlegrey)  ;
}

.custom_multiple_checkbox:active + label {
	border: 1px solid red;   /* optional Ramen active */
	box-shadow: 0px 0px 0 0 var(--colordarkgrey)   ;  /* optional Schatten  */
}
/* ---------------------------------------------------------------*/