/* The main calendar widget.  DIV containing a table. */

.calendar {
  position: relative;
  display: none;
  font-size: 11px;
  cursor: default;
  background: white;
  color: black;
  font-family: tahoma,verdana,sans-serif;
  z-index: 5;
}

.calendar table {
  border: 1px solid;
  border-color: #bbb;
  font-size: 11px;
  cursor: default;
  color: #3e3e3e;
  font-family: tahoma,verdana,sans-serif;
  border-spacing: 2px;
  border-radius: 3px;
  border-collapse: separate;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .calendarbutton { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;
  padding: 1px;
  cursor: pointer;
}

.calendar .calendar-nav {
  font-weight: bold;
  cursor: pointer;
}

.calendar thead .calendartitle { /* This holds the current "month, year" */
  font-weight: bold;
  padding: 1px;
  color: Black;
  text-align: center;
}

.calendar thead tr:first-child, .calendar thead tr.headrow{
  background-color: #E1E1E1;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .daynames td:first-child {
  cursor: pointer;
}

.calendar thead .name { /* Cells <TD> containing the day names */
  padding: 2px;
  text-align: center;
  color: black;
  font-weight: bold;
  min-width: 25px;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
}

.calendar thead .active { /* Active (pressed) buttons in header */
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  cursor: pointer;
  border: 1px solid #D3D3D3;
  border-spacing: 20px;
  margin: 1px;
  padding: 1px 1px 1px 1px;
  text-align: right;
  width: 21px;
  background-color: #EAEAEA;
  background-image: linear-gradient(bottom, #EAEAEA 50%, #EEEEEE 0%);
  background-image: linear-gradient(bottom, #E6E6E6 50%, #EDEDED 0%);
  background-image: -o-linear-gradient(bottom, #E6E6E6 50%, #EDEDED 0%);
  background-image: -moz-linear-gradient(bottom, #E6E6E6 50%, #EDEDED 0%);
  background-image: -webkit-linear-gradient(bottom, #E6E6E6 50%, #EDEDED 0%);
  background-image: -ms-linear-gradient(bottom, #E6E6E6 50%, #EDEDED 0%);

  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, #E6E6E6),
    color-stop(0, #EDEDED)
  );
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid ButtonShadow;
  color: ButtonText;
}

.calendar tbody .rowhilite td {
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
}

.calendar tbody td.selected { /* Cell showing selected date */
  font-weight: bold;
  background-color: #148d6c;
  background-image: none;
  color: white;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
}

.calendar tbody td.today { /* Cell showing today date */
  font-weight: bold;
  text-decoration: underline;
}

.calendar tbody td.disabled { color: GrayText; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  /* visibility: hidden; */
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  display: none;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  padding: 1px;
  border: 1px solid;
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  color: ButtonText;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendarcombo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border: 1px solid;
  border-color: #D3D3D3;
  background: white;
  color: #3e3e3e;
  font-size: 11px;
  padding: 1px;
}

.calendarcombo .label,
.calendarcombo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendarcombo .label-IEfix {
  width: 4em;
}

.calendarcombo .active {
}

.calendarcombo .hilite {
  background-color: #E6E6E6;
  cursor: pointer;
}

.calendar td.time {
  padding: 1px 0px;
  text-align: center;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: Menu;
  cursor: pointer;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
}

.calendar td.time span.active {
}

@media only screen and (max-width: 767px) {

  .calendar {
    width: 100vw;
    left: 0px !important;
  }

  DIV.calendar TABLE {
    width: 100%;
    font-size: 15px !important;
    font-family: "Open Sans", Arial !important;
  }

  .daysrow {
    height: 45px;
  }

  DIV.calendar TABLE THEAD .name {
    font-family: "Open Sans";
    text-transform: uppercase;
    font-size: 14px;
  }

  DIV.calendar TABLE THEAD .calendartitle {
    font-size: 15px;
    font-family: "Open Sans", Arial;
  }

  DIV.calendar TABLE THEAD TR.headrow {
    height: 45px;
  }

  .calendar-nav {
    font-size: 20px !important;
  }
  DIV.calendar .calendarbutton {
    font-size: 20px !important;
  }

  .calendar tbody td.today {
    text-decoration: none;
  }


}