/* id mit #   , class mit . -----------------------------------------------  */

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* variable definieren */
:root {
  --color1:  var(--colordarkgrey)   ;  /*  dunkelrot   rgb(220, 20, 60) */
  --color2: rgb( 51, 205, 51) ; /* farbe 2 */
  
  --colorred:  rgb(220, 20, 60) ;  /*   rot */
  --colorlightgrey1:  rgb(213, 213, 213)  ;   /*  hellgrau */    
  --colorbackground: rgb(244, 244, 244);  /*    Hintergrund   */
  --colorempty: rgb(244, 244, 244) ;   /*    leere Felder  hellgrau  */   

}
/*-------------------------------------------------------------------------------------------------------------------------------*/



#CalendarControlIFrame {
  display: none;
   /*
  left: 0px; 
  position: absolute;
  
  top: 0px;
  height: 250px;
  width: 250px;
  
  z-index: 99;
  */
}

#CalendarControl {
  border: 1px solid var(--color1);  /*  Rahmen */
  padding: 5px;   /* neu Abstand   */

  position:fixed;
  background-color: var(--colorbackground);
  margin-top: 10px;
   

  
  width: 250px;
  left: 0;
  right: 0;
	margin-left: auto;
	margin-right: auto;

  display:none;
  z-index: 100;
  font-size: 1em;
}

#CalendarControl table {
  font-family: arial, sans-serif;

  /* border-left: 1px solid #336;
  border-right: 1px solid #336;  */
  
  /* Linien aussen     dunkelrot */
/*  border-bottom: 2px solid var(--color1) ;  
  border-top: 2px solid var(--color1)  ;   */
}

#CalendarControl th {
  font-weight: normal;
 
}


#CalendarControl td {
  text-align: center;
}

/* Year, Month */
#CalendarControl .header {
 background-color:  var(--colorlightgrey1) ;  
}

#CalendarControl .weekday {
  background-color: var(--colorlightgrey1) ;
  color: black;
}

#CalendarControl .weekend {
  background-color: var(--colorlightgrey1);
  color: var(--colorred) ;   /*  rot */
}


#CalendarControl .weekend_header {
  background-color: var(--colorempty) ;  
  color: var(--colorred) ;    /*  rot */
}


#CalendarControl .current {
  border: 1px solid var(--color2) ;
  background-color: var(--color2) ;   /* angezeigter Tag */
  color: white;
}

#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {
  display: block;
  text-decoration: none;
  border: 1px solid #FFF;
  width: 2em;
}

#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {

  border: 1px solid var(--color1);  /*  Rahmen  */
}

#CalendarControl .previous {
  text-align: left;
}

#CalendarControl .next {
  text-align: right;
}

#CalendarControl .previous,
#CalendarControl .next {
   padding: 1px 3px 1px 3px;
}

#CalendarControl .previous a,
#CalendarControl .next a {
   color: black;
  text-decoration: none;
  font-weight: bold;
    display:block;
}

#CalendarControl .title {
  text-align: center;
  font-weight: bold;
  color: black;
  background-color: var(--colorempty) ;     /* neu !!! */
}

#CalendarControl .empty {
  background-color: var(--colorempty) ;
  border: 1px solid var(--colorempty) ;
}

.Calendar_Icon {
	margin: 0;
	padding: 0;
	height: 20px ;
	text-align: bottom ;  
	border: 0px solid rgb(100,100,100);
}


/* --------------angefuegt */
.hidden_white {
background: white ; 
color:var(--colorlightgrey1) ; 
font-size:10px;
 font-style:normal; 
 border:0; 
 width:0px
 }
 
 
.visible_black {
background: rgb(246,247,242) ; 
color: black ; 
font-style:normal; 
border:1; 
width:120px
 }
 
 

  /* neu !!! */
#CalendarControl .calendearbutton {
  padding: 1px 3px 1px 3px;
  color: black;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
 /* background-color:  var(--colorlightgrey1);  */ /* hellgrau */ 
}

#CalendarControl .abstand {
padding-top: 5px;
}

#CalendarControl .Calendar_Button_Icon {
	height: 16px ;
	position: relative;
	top: 0px;
}