/**********************************************
Common Datepicker Colours
*************************************************/

:root {
  /*common*/
  --whatsock-red: #a6192e;
  --whatsock-blue: rgba(2, 133, 103, 1.0);
  --whatsock-orange-main: #ffcc00;
  --whatsock-orange-highlight: #fce7c7;
  --whatsock-gray: #b8b7ab;
  --whatsock-contrast-red: #cb4a48;
  --whatsock-black: #2e3135;
  --whatsockBeige: #f2d3a1;
  --bodyText: #fff;
  --elementBlack: #1f1f23;
  --globalWhite: #ffffff;
  --offWhite: #f7f7f7;
  --apexDarkGreen: #006400;

  /*datepickers*/
  --datepicker-pink: #db7093;
  --datepicker-dayInMonth: #6b6b6b;
  --datepicker-day: #ffffff;
  --datepicker-darkGrey: #49182e;
  --datepicker-lightGrey: #cccccc;
  --datepicker-lmGrey: #bdbdbd;
  --datepicker-mmGrey: #c2c2c2;
  --datepicker-dGrey: #3d4043;
  --datepicker-codeBGrey: #e4e4e4;
}

/**********************************************
Common Datepicker styles
*************************************************/

.dateField {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  position: relative;
}

.dateField .dateField--flex-item {
  display: flex;
  align-items: center;
  position: relative;
}

.accCalendar {
  background: none;
  border: none;
}

a.accCalendar {
  display: inline-block;
  background: transparent;
}

div.calendar {
  position: absolute;
  margin-top: 20px;
  margin-bottom: 3000px;
  width: 898px;
  font-size: 2.7em;
  text-align: center;
  color: var(--globalWhite);
  background: var(--elementBlack);
  padding: 0.5em;
  border-radius: 0.3em;
  -webkit-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  -moz-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  z-index: 10;
}

table.calendar {
  border-collapse: separate;
  border-spacing: 1px;
}

table.calendar td,
table.calendar th {
  padding: 0.3em 0.43em;
  border-radius: 0.15em;
  width: 122px;
  text-align: center;
  height: 94px;
}

td.empty {
  background: rgba(255, 255, 255, 0.07);
}

th.week {
}

td.nav {
  font-size: 1.4em;
  padding: 0 !important;
}

td.day {
  color: var(--bodyText);
  background: var(--whatsock-blue);
}

td.dayToday, td.day:hover {
  color: var(--whatsock-red);
  background: var(--datepicker-day);
  font-weight: bold;
}

td.dayInPrevMonth,
td.dayInNextMonth {
  color: var(--bodyText);
  background: var(--datepicker-dayInMonth);
}

td[aria-current="date"] {
  background: var(--datepicker-day);
}

div.calendar *:focus,
div.commentAdd *:focus {
  outline: var(--whatsock-red) 3px solid;
}

td.month {
  font-weight: 600;
  color: var(--whatsock-blue);
}

td.comment {
  position: relative;
}
td.comment span::after {
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 0.2em;
  right: 0.2em;
  content: "";
  background: var(--datepicker-darkGrey);
  border-radius: 7px;
}

td.comment.selected {
  background: var(--datepicker-day);
}

td.disabled,
td.disabled:hover {
  color: var(--datepicker-darkGrey);
  background: var(--datepicker-lmGrey);
}

td.disabled.selected {
  background: var(--datepicker-mmGrey);
}

div.commentTooltip {
  width: 271px;
  padding: 0.5em;
  color: var(--globalWhite);
  background: var(--datepicket-dGrey);
  font-size: 0.8em;
  font-weight: bold;
  max-height: 50px;
  overflow-x: hidden;
  overflow-y: auto;
  word-wrap: break-word;
  text-align: left;
}

div.commentAdd {
  background: var(--elementBlack);
  border-radius: 0.3em;
  top: 22.9em;
  z-index: 10;
}

div.commentAdd button {
  text-transform: uppercase;
  color: var(--globalWhite);
  background: var(--elementBlack);
  padding: 0.5em;
  margin-top: -5px;
  border: none;
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  -webkit-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  -moz-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
}

div.commentAdd textarea {
  width: 270px;
  height: 2em;
  overflow: auto;
  word-wrap: break-word;
  text-align: left;
  padding: 0.2em;
  margin: 0.5em 0.5em 0;
}

div.monthMessage {
  padding-top: 0.5em;
}

div.monthMessage p {
  font-size: 1.4rem;
  margin-bottom: 0;
}


/************************
! Force CSS top as the auto position makes the calendar jump down the page
**************************/

select.nav.current.select.year {
  color: var(--globalWhite);
  background-color: var(--button-blueGrey);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
}

span.nav.current.btn.year {
  color: var(--globalWhite);
  background-color: var(--button-blueGrey);
  padding: 3px 5px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  cursor: pointer;
}

span.nav.current.btn.year:hover,
span.nav.current.btn.year:focus {
  color: var(--globalWhite);
  background-color: var(--whatsock-red);
  box-shadow: none;
  border-radius: 0;
}

select.nav.current.select.month {
  color: var(--globalWhite);
  background-color: var(--button-blueGrey);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
}

span.nav.current.btn.month {
  color: var(--globalWhite);
  background-color: var(--button-blueGrey);
  padding: 3px 5px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  cursor: pointer;
}

span.nav.current.btn.month:hover,
span.nav.current.btn.month:focus {
  color: var(--globalWhite);
  background-color: var(--whatsock-red);
  box-shadow: none;
  border-radius: 0;
}

.calendar .btn.year:hover, .calendar .btn.year:focus {
  color: var(--whatsock-blue);
}
.calendar .btn.month:hover, .calendar .btn.month:focus {
  color: #fff;
}

.dateCalendarButton {
  position: relative;
  vertical-align: middle;
  text-align: center;
  float: right;
  padding: 19px 20px;
  background: #e5e5e5;
  border: 1px solid #4f4f4f;
  margin-top: -1px;
}

.searchTablePadding label {
  font-size: 1.6rem;
}