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

.calendar {
/* 
border:1px navy solid; */
  position: relative;
  margin-top:20px;
  margin-left:-70px;
  display: none;
  font-size: 12px;
  color: #000;
  cursor: default;
 font-family: tahoma,verdana,sans-serif;
}
.calendar table {
  font-size: 12px;
  color: #000;
  cursor: default;
  background: white;
  font-family: tahoma,verdana,sans-serif;
  border-collapse:collapse;
  width:100%;
}
/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;
}

.calendar .nav {
   font-size:40px;
   line-height:40px;
   
}
.calendar thead .title { /* This holds the current "month, year" */
  padding-top: 5px;
  color:#2c467c;
  text-align: center;
  font-size:20px;
}
.calendar thead tr.headrow td { /* Row <TR> containing navigation buttons */
	/* padding:13px; Causes uneven col widths when colspan > 1 */ 
 }
 tr.headrow td:first-child {
 text-align:left !important;
 padding-left:5px;
 }
 tr.headrow td:nth-child(3) {
 /* text-align:right !important; */
 padding-right:5px; 
}

.calendar thead .todaytext {
  font-size: 20px; 
  color: #2c467c;
}
.calendar thead .monthnav {
 font-size: 24px; 
 color: #2c467c;	
}
.calendar thead .closecal {
 font-size: 24px; 
 color: #2c467c;	
}
.calendar thead .daynames { /* Row <TR> containing the day names */
border-bottom:1px #aaaaaa solid;
}
.calendar thead .name { /* Cells <TD> containing the day names */
border-bottom:1px #aaaaaa solid;
  padding: 1px;
  text-align: center;
  vertical-align:middle;
  font-size:14px;
  color:#98a6c4;
}
.calendar thead .weekend { /* How a weekend day name shows in header */
}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
  /* padding: 0px; */
   /* background-color: #e4e0d8;*/
}
.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: white;
}
/* The body part -- contains all the days in month. */

.calendar tbody td.day { /* Cells <TD> containing month days dates */
  width: 2em;
  padding: 3px 5px;
  height:55px;
  color:#2c467c;
  font-size:16px;
  vertical-align:top;
  text-align:left;
}
tr.daysrow td {
 border-top:1px #aaaaaa solid;
  border-bottom:1px #aaaaaa solid;
   border-left:2px white solid;
   border-right:2px white solid;
}
.calendar tbody .day.othermonth {
background:white;
color:white;
}
/*
.calendar tbody .day.othermonth.oweekend {
  color: #faa;
}*/

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border: 1px silver solid;
  background: #f4f0e8;
}
/*
.calendar tbody .rowhilite td {
  background: #e4e0d8;
}

.calendar tbody .rowhilite td.wn {
  background: #d4d0c8;
}

.calendar tbody td.hilite { /* Hovered cells <TD> 
  font-weight:bold;
  color:#4eb8ff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> 
  border: 1px silver solid;
}
*/


.calendar tbody td.today { /* Cell showing today date */
  font-weight: bolder;
  color: #3584b9;
  vertical-align:top;
  text-align:left;
  font-size:18px;
}

.calendar tbody .disabled {
	color: #7484a9;
	background:#efefef;
} 

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

.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) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #2c467c;
  padding: 3px;
  color: #fff;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  border: 1px silver solid;
  padding: 1px;
  background: #e4e0d8;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  padding: 2px 0px 0px 2px;
  border: 1px white solid;
}

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

.calendar .combo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border: 1px silver solid; 
  background: #e4e0d8;
  font-size: 90%;
  padding: 1px;
}

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

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .active {
  background: #c4c0b8;
  padding: 0px;
  border: 1px white solid;
}

.calendar .combo .hilite {
  background: #048;
  color: #fea;
}

.calendar td.time {
  border-top: 1px white solid;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

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

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

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

.calendar td.time span.hilite {
  border-color: white;
  background-color: #766;
  color: #fff;
}

.calendar td.time span.active {
  border-color: white;
  background-color: #000;
  color: #0f0;
}


/* 
WhenToWork-specific common calendar characteristics
Remove: row and cell hover effects, selected effects, today effects 
*/
.calendar{
	margin-left:0 !important;
	margin-top:0 !important;
}
.calendar tbody td.selected { /* Cell showing selected date in other months */
	color:#2c467c;
}
/*
.calendar tbody .rowhilite td {
  background: inherit;
}*/
.calendar tbody td.hilite { /* Hovered cells <TD> */
 
}
.calendar tbody .timeoffcell  {
	background:#2c467c;
	color: white !important;
}
 .calendar tbody .timeoffcell.blackoutcell{
	background:#2c467c !important;
	color: white !important;
}
 
.calendar tbody .blackoutcell.timeoffcell::after, .calendar tbody .timeoffcell.blackoutcell::after { /*for x on blocked day when picked on layer cal */
	content:"\f00d";
	font-family: "Font Awesome 5 Pro";
	font-weight:400;
	color: #db0000 !important;
	display: block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size:23px;
  text-align:center;
}

.calendar tbody .blackoutcell  {
	background:#db0000;
	color: white !important;
}
.calendar tbody .limitedblackoutcell {
	background:#ffd4d1 !important;
	color: black !important;
}
.calendar tbody .pastdate, .blackoutcellpastdate {
	color: gray !important;
	background:silver !important;
}

.calendar tbody .focuscell  { /*to picked date */
	background:#2c467c !important;
	color: white !important;

}
.calendar tbody ._today  { /* after .selected */
 color: #3584b9 !important;
}
/* Change calendar weekend cell font from red to black on all calendars */
.calendar tbody td.weekend { /* Cells showing weekend days */
 /* color: black;*/
}
div.toadddate input {
	border:1.5px #2c467c solid;
	height: 35px !important;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px; 
	border-top-left-radius:0;
	border-top-right-radius:0; 
	padding: 3px;
	text-align:center;
}