bodyxx{font-family:"Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial", sans-serif;}
h1xx{font-size:1.4em;}
.kalenderbox{width:100%;margin:0;padding:0;}
/*table{border:none;padding:0;margin:0;font-size:11px;text-align:center;font-family:"Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial", sans-serif;font-size:8pt;font-weight:normal;color:#333333;background:#ffffff;}
td{width:15px;height:15px;border:none;padding:0;margin:0;background-repeat:no-repeat;background-position:center;font-size:11px;}
*/

wtag{background-color:#BBBBBB;}
/*td.heute{}*/
.samstag{color:#FF0000;}
.sonntag{color:#FF0000;}
span.samstag{color:#FF0000;}
span.sonntag{color:#FF0000;}

#umbruch{clear:both;}
td a{display:block;width:100%;}

td.unbekannt{background-color:#FFFFFF;}

.s1{background-color:#95dc94;}
.s2{background-color:#FF8080;}
.s3{background-color:#FFFF80;}
.s4{background-color:#777777;}

.bg {background: url('/bilder/webseite/csg-4bd9864077120.png') no-repeat top left;width:15px;height:15px;}
.s22{background-position: 0 0;}
.s21{background-position: 0 -20px;}
.s24{background-position: 0 -40px;}
.s23{background-position: 0 -60px;}
.s12{background-position: 0 -80px;}
.s14{background-position: 0 -100px;}
.s13{background-position: 0 -120px;}
.s42{background-position: 0 -140px;}
.s41{background-position: 0 -160px;}
.s44{background-position: 0 -180px;}
.s43{background-position: 0 -200px;}
.s32{background-position: 0 -220px;}
.s31{background-position: 0 -240px;}
.s34{background-position: 0 -260px;}
.s33{background-position: 0 -280px;}

/*.legende{background-color:#ffffff;}*/
.legende{background:none;}
td.leg{width:60px;}
td.txt{text-align:left;color:#666666;}
p.stand{color:#666666;font-size:8pt;}
th.monat, td.monat{width:80px;text-align:right;}
td.grau{background-color:#ddd;}
th.oben{background-color:#aaa;}
td.links{background-color:#ddd;}
th.monat.oben{background-color:#fff;}
a:link{text-decoration:none;color:#666666;}

.blk_textdaten td{border:1px solid #999999;line-height:15px;}

.zOCLabel{
    width: 25%;
    font-size: 11px;
}

.zOCSelectBox
{
    margin: 0 auto; 
    width:48%; 
    font-size:small;
}

.zOCTimeSlot
{
  position: fixed;
  float:left;
  display: none;
  width: 80%;
  top: 40%;
  left: 15%;
  right: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer;   
}

.timeSlotForm
{
  max-height: 80%;
  overflow-y: scroll;
  /*max-width: 80%;*/
}

.zOCTable{
    display:flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
}

.zOCTableRow{
    display:table-row;
}

.zOCTableRowGroup{
    display:table-row-group;
    position:relative;
}

.zOCTableColumn{
    display: table-column;
}

.zOCTableColumnGroup{
    display: table-column-group;
}

.zOCTableHeaderGroup{
    display: table-header-group;
}

.zOCTableCell{
    display: table-cell;
    width: 22px;
    height: 22px;
    text-align: center;
    font-size: 11px;
}

.zOccAColor{
  color:#333;
}

.zOccAColor:link
{
  text-decoration:none;
}

.zOCRedFrame{
        border: thin solid red;
}

.zOCTableCellTT{
    display: table-cell;
    max-width: 200px;
    max-height: 40px;
    text-align: center;
    font-size: 20px; 
    padding: 5px;
}

div.zOCkalendermonat{
    float:left;
    text-align:center;
    margin:0px 10px 10px 0px;
    padding:0;
    border:none;
    line-height:22px;
    background-color:#EEEEEE;
    position:relative;
}

.zOccupationTable{
    display: table;
    position: relative;
    min-width: 100%;
    max-width: 300px !important;
    width: 300px !important;
    /*height: 60px;*/
    text-align: center;
    border: 1px solid #D3DCE3;    
}


.zOccTab {
	tab-size:30; 
	-moz-tab-size:30; 
	-ms-tab-size:30;
	white-space: pre;
}

.zOccupationTableRowGroup{
    width:15px;
    line-height: 25px;
    display:table-row-group;
    padding: 0 !important;
    position:relative;
}

.zOccupationTableCell{
    display: table-cell;
    width: 15px;
    height: 15px;
    text-align: center;
    /*font-size: 15px;*/
    border: 1px solid #D3DCE3;
}
.monat_jahr{
            font-size: 16px;
            text-align: center;
            background-color: black;
            color:white;
}

.zOCButton{
    padding: 5px;
    text-align: center;
    background-color:#EEEEEE;
    color:#222; 
    cursor:pointer;
    border:0;
    font-weight:bolder;
    border-radius: 10px;
    width:48%;
    margin: 40px 1px 0px 0px;
}

.filterLabel{
  display: inline-block;
  width: 80px;
  text-align: right; 
}

div.zOccFilterDiv{
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:10px;    
}

.zOccFilterDiv label:after { content: ":"; }

.zOccFilterDiv label       { text-align:right; width:150px;}
.zOccFilterDiv input[type="checkbox"] + label:after {
  font-family: FontAwesome;
  display: inline-block;
}
@media only screen and (max-width: 600px) {
.zOCTimeSlot
{
  position:fixed;
  float:left;
  display: none;
  width: 95%;
  top: 30%;
  left: 2.5%;
  right: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer; 
}
} 

@media print {
  body, .legende {background-color:#ffffff ! important;}
}

/* styles for the combobox */

/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */
.combobox {
  /* Border slightly darker than Chrome's <select>, slightly lighter than FireFox's */
  border: 1px solid #999;
  padding-right: 1.25em; /* leave room for ▾ */
}
.dropdown, .combobox { 
  /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
  position: relative;
  display: inline-block;
}
.combobox > .downarrow, .dropdown > .downarrow {
  /* ▾ Outside normal flow, relative to container */
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.25em;
  
  cursor: default;
  nav-index: -1; /* nonfunctional in most browsers */

  border-width: 0px;          /* disable by default */
  border-style: inherit; /* copy parent border */
  border-color: inherit; /* copy parent border */
}
/* Add a divider before the ▾ down arrow in non-dropdown comboboxes */
.combobox:not(.dropdown) > .downarrow {
  border-left-width: 1px;
}
/* Auto-down-arrow if one is not provided */
.downarrow:empty::before {
  content: '▾';
}
.downarrow::before, .downarrow > *:only-child {
  text-align: center;
  
  /* vertical centering trick */
  position: relative;
  top: 50%;
  display: block; /* transform requires block/inline-block */
  transform: translateY(-50%);
}
.combobox > input {
  border: 0
}
.dropdown > *:last-child,
.combobox > *:last-child {
  /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
  display: block;
  opacity: 0;
  pointer-events: none;
  
  transition: 0.4s; /* fade out */
  position: absolute;
  left: 0;
  top: 100%;
  border: 1px solid #888;
  background-color: #fff;
  box-shadow: 1px 2px 4px 1px #666;
  box-shadow: 1px 2px 4px 1px #4448;
  z-index: 9999;
  min-width: 100%;
  box-sizing: border-box;
}
/* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .downarrow:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus:not(.less-sticky),
.dropdown > *:last-child:focus:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}
/* focus-within not supported by Edge/IE. Unsupported selectors cause 
   the entire block to be ignored, so we must repeat all styles for 
   focus-within separately. */
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}
.dropdown:not(.sticky) > *:not(:last-child):focus,
.downarrow:focus, .dropdown:focus {
  pointer-events: none; /* Causes second click to close */
}
.downarrow:focus {
  outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
  outline: 2px solid #48F8;
}

/* ------------------------------------------ */
/* ----- Optional extra styling for combobox / dropdown */
/* ------------------------------------------ */
*, *:before, *:after {
  /* See https://css-tricks.com/international-box-sizing-awareness-day/ */
  box-sizing: border-box; 
}
.combobox > *:first-child {
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* so 100% includes border & padding */
}
/* `.combobox:focus-within { outline:...}` doesn't work properly 
   in Firefox because the focus box is expanded to include the 
   (possibly hidden) drop list. As a workaround, put focus box on 
   the focused child. It is barely-visible so that it doesn't look
   TOO ugly if the child isn't the same size as the parent. It
   may be uglier if the first child is not styled as width:100% */
.combobox > *:not(:last-child):focus {
  outline: 2px solid #48F8;
}
.combobox {
  margin: 5px; 
}

/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */
body {
  font-family: "Verdana", sans-serif;
}
select {
  font: inherit;
}
input {
  font: inherit;
  padding: 3px;
}
.formrow {
  display: flex;
  align-items: center;
}
.formrow > span:first-child,
.formrow > label > span:first-child {
  display: inline-block;
  width: calc(4em + 8%);
}
.combobox .color {
  width: 60px; height: 40px;
  display: inline-block;
}
.color:hover {
  outline: 2px solid #888; /* Edge/IE can't do outline transparency */
  outline: 3px solid #4448;
}
.colorlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cb-item {
  display: block;
  margin: 0px;
  padding: 2px;
  color: #000;
}
.cb-item:hover, .cb-item:hover > a:visited {
  color: #fff;
  background-color: #88f;
}

/* ------------------------------------------ */
/* ----- Collapsable Documentation            */
/* ------------------------------------------ */
.collapsable > input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.collapsable > input[type=checkbox] ~ * {
  max-height: 1000em;
  transition: 0.6s cubic-bezier(1,0,1,0);
  overflow: hidden;
}
.collapsable > input[type=checkbox]:not(:checked) ~ * {
  max-height: 0;
  transition: 0.6s cubic-bezier(0,1,0,1);
}
.collapsable label > span {
  text-decoration: underline dotted gray;
}