div#calendar {
  text-align: center;
  position: absolute;
  visibility: hidden;
  z-index: 5;
}
div#calendar table{
  border: solid #808080 2px;
  border-collapse: collapse;
  padding: 0;
  margin: 0 auto;
  user-select: none;
}
/**/
div#calendar table th{
  font-weight: bold;
  font-size: 1.05em;
  color: #BFBFC1;
  text-align: center;
  vertical-align: middle;
  background-color: #444;
  padding: .4em;
}

div#calendar table th.monthyear{
  color: #444;
  background-color: lightskyblue;
  border: 1px solid #444;
  cursor: pointer;
}
div#calendar table th.nav{
  color: white;
  cursor: pointer;
  background-color: navy;
}

div#calendar table th.wdnames{
  color: #444;
  background-color: #D3D3D3;
  border: 1px solid #444;
}
/**/
div#calendar table td{
  font-weight: normal;
  font-size: 1em;
  color: #0E224B;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #D3D3D3;
  padding: .4em;
  background-color: #F6F6F6;
}
div#calendar table td.today{
  background-color: #A7B5C7;
}
div#calendar table td.weekday
  {
    color: #0E224B;
  }
div#calendar table td.saturday{
  font-weight: normal;
}
div#calendar table td.sunday,
div#calendar table td.holiday
{
  font-weight: bold;
  color: #9A2525;
}
input.holiday
{
  text-decoration: underline;
  text-decoration-style: dashed;
}
div#calendar table td.weekend{
  /*color: #9A2525;*/
}
/**/
div#calendar table td.click{
  cursor: pointer;
}
div#calendar  table td.noclick{
  background-color: #FDD;
  color: grey;
}
div#calendar table td.click:hover{
  background-color: #CCC;
}
/**/
div#calendar table td.prevmonth, div#calendar table td.nextmonth {
  color:   #a3afc4;
}
div#calendar table td.selectedDay{
  background-color: #C0CED3;
}

.calendar_selector
  {
    background: grey;
    border-radius: .3em;
    display: inline-block;

    /*! overflow: hidden; */
  }
.calendar_selector input.datefield,
.calendar_selector input.timefield
  {
    border: none;
	/* width: 5em; */
  }
.calendar_selector input.datefield
  {
	/* width: 6.2em; */
    text-align: center;
  }
.calendar_selector font
  {
    position: absolute;
    top: 0;
    right: .3em;
    bottom: 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    visibility: visible;
  }
.calendar_selector input:placeholder-shown + font
  {
    visibility: hidden;
  }
.calendar_selector > div
  {
		display: table;
		/*! overflow: hidden; */
  }
.calendar_selector > div > div
  {
		display: table-cell;
    vertical-align: middle;
    padding: 1px;
		/*! overflow: hidden; */
		position: relative;
		/*! width: 1em; */
  }
.calendar_selector > div > div > div
  {
    /*! display: table-row; */
  }
.calendar_selector > div > div > div > div
  {
    display: table;
    width: 100%;
  }
.calendar_selector > div > div > div > div > div
  {
    display: table-cell;
  }
.calendar_selector > div > div > div + div
  {
    display: none;
    width: inherit;
    position: absolute;
    width: 100%;
    margin: 0 -1px;
  }
.calendar_selector > div:hover > div > div + div
  {
    display: table-row;
  }


.calendar_selector div span
  {
    cursor: pointer;
    color: lightgrey;
    padding: .7em;
    display: block;
    /* background: #008700;*/
    background: green;
    font-size: .7em;
    user-select: none;
  }
.calendar_selector div span:hover
  {
    color: white;
    background: #009C00;
  }