.has-datepicker {
  position: relative;
  line-height: 1.2;
}
.has-datepicker input {
  position: absolute;
  z-index: 1;
  opacity: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
div.datepicker {
  text-align: center;
  border-radius: 25px;
  border: 0 !important;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
  letter-spacing: 0;
  font-weight: normal;
  transition: opacity 0.2s linear, transform 0.3s ease, height 0.3s ease;
  user-select: none;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  padding: 15px;
}
div.datepicker.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
div.datepicker:not(.is-visible) {
  pointer-events: none;
}
div.datepicker:not(.is-visible) td {
  opacity: 0;
}
div.datepicker table {
  user-select: none;
  padding: 5px 15px 15px;
  transition: opacity 0.1s linear, transform 0.2s ease;
  border-spacing: 0 !important;
}
div.datepicker table tr::before {
  display: none;
}
div.datepicker table.animate-out {
  position: absolute;
  top: 60px;
  left: 0;
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
}
div.datepicker table.animate-in {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}
div.datepicker table.animate-out.animate-right {
  transform: translate3d(20px, 0, 0);
}
div.datepicker table.animate-in.animate-right {
  transform: translate3d(-20px, 0, 0);
}
div.datepicker table tr {
  display: table-row !important;
}
div.datepicker table tr th {
  padding-bottom: 10px;
  font-weight: 500;
  text-align: center;
  color: var(--sense-text);
}
div.datepicker table tr td {
  position: relative;
  width: 20px;
  height: 30px;
  padding: 2px 4px !important;
  box-sizing: border-box;
  margin-bottom: 0;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s linear, transform 0.3s ease, color 0.2s linear;
}
div.datepicker table tr td:active {
  opacity: 0.7;
  transform: scale3d(0.8, 0.8, 1);
}
@media (min-width: 1025px) {
  div.datepicker table tr td:hover {
    opacity: 0.8;
  }
}
div.datepicker td, div.datepicker th {
  font-size: 15px;
  font-family: var(--sense-text-font);
  box-shadow: 0 0 0 black !important;
  color: var(--sense-text);
}
div.datepicker td:not(.filler)::before {
  top: 0;
  left: 0;
  width: 30px;
  padding: 2px;
  z-index: -1;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 99px;
  transition: background 0.1s linear, border-color 0.1s linear;
}
div.datepicker td.is-active::before {
  font-weight: bold;
}
div.datepicker td.is-active::before, div.datepicker td:hover::before {
  color: var(--sense-orange);
}
div.datepicker td:hover::before {
  color: var(--sense-orange);
}
div.datepicker td.is-disabled {
  pointer-events: none;
  color: var(--sense-light-grey);
}
div.datepicker td.filler {
  pointer-events: none;
}
div.datepicker div.title-bar {
  position: relative;
  margin: 0;
  margin-bottom: 25px;
  color: var(--sense-text);
  font-family: var(--sense-text-font);
  font-size: 17px;
  letter-spacing: -0.8px;
  user-select: none;
}
div.datepicker div.title-bar label {
  font-size: 18px;
  display: inline-block;
  letter-spacing: -0.6px;
  margin: 0;
  line-height: 27px;
  text-transform: none;
}
div.datepicker div.title-bar .arrow {
  content: "";
  display: block;
  position: absolute;
  background: white;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -25px, 0) rotate(45deg);
  z-index: -2;
  width: 20px;
  height: 20px;
}
div.datepicker div.title-bar a {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 4px;
  width: 27px;
  height: 27px;
  border-radius: 99px;
  cursor: pointer;
  transition: opacity 0.2s linear;
}
div.datepicker div.title-bar a::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/img/sense/sense-dash.svg) no-repeat center center;
  background-size: 12px;
  width: 100%;
  height: 100%;
  filter: brightness(0);
  opacity: 0.6;
  transition: opacity 0.2s linear, transform 0.3s ease;
}
@media (min-width: 1025px) {
  div.datepicker div.title-bar a:hover::before {
    opacity: 1;
  }
}
div.datepicker div.title-bar a:active::before {
  opacity: 1;
  transform: scale3d(0.8, 0.8, 1);
}
div.datepicker div.title-bar a.is-disabled {
  opacity: 0.2;
  pointer-events: none;
}
div.datepicker div.title-bar a.previous::before {
  transform: scaleX(-1);
}
div.datepicker div.title-bar a.next {
  left: auto;
  right: 5px;
}
html.darkmode div.datepicker {
  background: var(--darkmode-medium);
  box-shadow: var(--darkmode-shadow-light);
}
html.darkmode div.datepicker table tr td, html.darkmode div.datepicker table tr th, html.darkmode div.datepicker label {
  color: var(--darkmode-text);
}
html.darkmode div.datepicker table tr td.is-disabled {
  color: var(--dark-shade);
}
html.darkmode div.datepicker a.next::before, html.darkmode div.datepicker a.previous::before {
  filter: brightness(0) invert(1);
}
html.darkmode div.datepicker .arrow {
  background: var(--darkmode-medium);
}
.text-center .has-datepicker .datepicker {
  left: 50%;
  transform: translateX(-50%);
}
.text-center .has-datepicker .title-bar::before {
  left: 50%;
}
.text-center .has-datepicker .datepicker:not(.is-visible) {
  transform: translate3d(-50%, -10px, 0);
}