/**********************************************
Common Datepicker Colours - update in colors.css
*************************************************/
/*

--combobox-midGrey; #777777;
--combobox-lightGrey2; #e0e0e0;
--datepicker-lmGrey; #bdbdbd;
--datepicker-darkGrey; #49182e;
--datepicker-mmGrey; #c2c2c2;
--datepicket-dGrey; #3d4043;
--globalWhite; #ffffff;
--elementBlack; #1f1f23;
--bodyText; #262626;
--whatsock-blue; #63b7c2;
--whatsock-red; #c13836;
--datepicker-pink; #db7093;
--datepicker-dayInMonth; #e6e6e6;
--datepicker-day; #e2a037;

*/

/**********************************************
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;
}

#datepicker-demo {
  background: var(--combobox-lightGrey2);
  padding: 1em;
  margin: 1em 0 2em;
}

#datepicker-demo em {
  display: block;
  font-size: 90%;
}

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

div.calendar {
  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);
  position: absolute;
  left: 4em;
  top: 3em;
  z-index: 10;
}

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

table.calendar td,
table.calendar th {
  padding: 0.3em 0.5em;
  border-radius: 0.15em;
}

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

th.week {
  background-color: white !important;
}

td.day {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--bodyText);
  background: var(--whatsock-blue);
}

td.dayToday {
  color: var(--bodyText);
  background: var(--datepicker-pink);
}

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

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

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

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

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: 0.8rem;
  margin-bottom: 0;
}

/************************
! Force CSS top as the auto position makes the calendar jump down the page
**************************/
div.calendar {
  top: 3em !important;
}

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;
}

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;
}

/*To properly render YSS Styles for Gravity Form - Datepicker HT14SEP2026*/
.gravity-theme .gform-datepicker-calendar th,td {
  border: none !important;
}

.gravity-theme .gform-datepicker-calendar .nav.next, .gravity-theme .gform-datepicker-calendar .nav.prev {
  vertical-align: middle !important;
}

.gravity-theme .gform-datepicker-calendar table tbody>tr:nth-child(odd)>td {
  background-color: unset !important;
}

.gravity-theme .gform-datepicker-calendar table tbody tr:hover>td {
  background-color: unset !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar .selected:not(.disabled) span {
  background-color: #ffe5cc !important;
  border: 1px solid #bb4f27 !important;
  border-radius: 50%;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar .day.selected.dayMarked span {
  background-color: #bb4f27 !important;
  color: #fff !important;
  border: 1px solid #ffe5cc !important;
  border-radius: 50%;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar .day:not(.dayToday):not(.disabled):not(.selected):not(.dayMarked) span:hover {
  background-color: #ffe5cc !important;
  border: 1px solid #bb4f27 !important;
  border-radius: 50%;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar .dayToday:not(.disabled) span {
  background: 0 0 !important;
  border-color: #bb4f27 !important;
  box-shadow: 0 .125rem .125rem rgba(58, 58, 87, .0596411) !important;
  color: #2f4054 !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar .disabled span:hover {
  background-color: #f2f3f5 !important;
  border: 1px solid rgba(32,32,46,.079) !important;
  outline: unset !important;
  cursor: not-allowed !important;
}

.gravity-theme .gform-datepicker-calendar table.calendar td span:focus, .gravity-theme .gform-datepicker-calendar table.calendar td span:hover {
  background: #fff !important;
  border-color: #fff !important;
}

.gravity-theme .gform-datepicker-calendar .yearSelector .year {
  font-size: 16px !important;
  text-align: center !important;
  border: 1px solid hsla(0, 0%, 50%, .502) !important;
}
.gravity-theme .gform-datepicker-calendar .yearSelector .year span {
  width: 100% !important;
}

.gravity-theme .gform-datepicker-calendar .monthSelector .month {
  font-size: 16px !important;
  text-align: center !important;
  border: 1px solid hsla(0, 0%, 50%, .502) !important;
}
.gravity-theme .gform-datepicker-calendar .monthSelector .month span {
  width: 100% !important;
}

.gravity-theme .gform-datepicker-calendar .nav.next,.gravity-theme .gform-datepicker-calendar .nav.prev {
  font-size: 26px !important;
  border: none !important;
}

@-webkit-keyframes pulse {
	0% { opacity: 0.6; }
	50% { opacity: 0.1; }
	100% { opacity: 0.6; }
}

@keyframes pulse {
	0% { opacity: 0.6; }
	50% { opacity: 0.25; }
	100% { opacity: 0.6; }
}

.gform-datepicker-toggle-icon::before {
  color: #000 !important;
}

.gform-datepicker-toggle:disabled {
  .gform-datepicker-toggle-icon::before {
    -webkit-animation: gppa-pulse 1s infinite ease-in-out !important;
    animation: gppa-pulse 1s infinite ease-in-out !important;
    color: #B4B3B3 !important;
    cursor: wait !important;
  }
}

.gform-datepicker:disabled {
  opacity: 0.6 !important;
  cursor: wait !important;
}

@media (max-width: 640px) {
    .gravity-theme .gform-datepicker-calendar {
        width: 325px !important;
        max-width: 325px !important;
    }

    .gravity-theme .gform-datepicker-calendar table.calendar td span,.gravity-theme .gform-datepicker-calendar table.calendar th span {
        height: 35px !important;
        width: 35px !important;
    }
}
/*To properly render YSS Styles for Gravity Form - Datepicker HT14SEP2026