@charset "UTF-8";

/* FORM
/*************************************************/

ul.datum li .calendar,
ul.datum li .calendar[data-align=right]
{
  position : absolute;
  top      : 0.5em;
  left     : 12em;
  bottom   : auto;
}

ul.datum li .calendar[data-align=bottom]
{
  top    : 5.5em;
  left   : 0.5em;
  bottom : auto;
}

ul.datum li .calendar[data-align=top]
{
  top    : auto;
  left   : 0.5em;
  bottom : 6em;
}

@media (max-width : 1365px)
{
  ul.datum li .calendar
  {
    top    : auto;
    left   : 0.5em;
    bottom : 6em;
  }
}

/* MAIN
/*************************************************/

.calendar,
.calendar *
{
  box-sizing : border-box;
}

.calendar
{
  color          : hsl(0 0% 20%);
  font-size      : 10px;

  width          : 26em;
  height         : 25em;

  display        : inline-block;
  vertical-align : top;

  z-index        : 2147483640;
}

.calendar table
{
  background    : hsl(190, 0%, 70%);

  border-radius : 0.2em;
  border        : 0.1em solid hsla(0, 0%, 0%, 0.1);

  box-shadow    : 1px 1px 2px hsla(0, 0%, 0%, 0.2);
}

.calendar .header
{
  font-size      : 1.2em;
  font-weight    : bold;
  letter-spacing : 0.1em;
  text-align     : center;

  display        : inline-block;
}

.calendar .year .header.bottom:hover,
.calendar .decade .header.bottom:hover,
.calendar .century .header.bottom:hover,
.calendar .month .header.top:hover,
.calendar .year .header.top:hover,
.calendar .decade .header.top:hover
{
  cursor    : pointer;
  transform : scale(1.1);
}

.calendar td
{
  text-align     : center;

  cursor         : default;
  vertical-align : middle;

  user-select    : none;
}

.calendar td
{
  font-size        : 1.25em;
  height           : 2.4em;

  background-color : hsla(0, 0%, 85%, 0.5);
}

.calendar .unselected
{
  background-color : hsla(0, 0%, 100%, 0.5);
}

.calendar .selected
{
  cursor           : pointer;
  background-color : hsla(0, 0%, 50%, 0.25)
}

.calendar .selected:hover,
.calendar .selected.active
{
  background-color : hsla(0, 0%, 30%, 0.25)
}

.calendar .selected.next,
.calendar .selected.previous
{
  background-color : hsla(45, 100%, 50%, 0.25);
}

.calendar .selected.next:hover,
.calendar .selected.next:active,
.calendar .selected.previous:hover,
.calendar .selected.previous:active
{
  background-color : hsla(45, 100%, 30%, 0.25);
}

.calendar span.fa
{
  font-size   : 2.25em;
  font-weight : bold;
  margin      : 0 0.3em;
  cursor      : pointer;
}

.calendar span.fa:hover
{
  transform : scale(1.2);
}

/* CALENDAR DAYS
/*************************************************/

.calendar .month .header.top sup
{
  margin-left    : 0.5em;
  font-size      : 0.6em;
  letter-spacing : 0.05em;
}

.calendar .month td.weekend
{
  font-weight : bold;
  color       : hsl(0, 30%, 50%);
}

.calendar .month td
{
  width : 2.9em;
}

.calendar .month tr:nth-child(8) .fa
{
  font-size : 1.8em;
  margin    : 0;
}

/* CALENDAR
/*************************************************/

.calendar .year tr:first-child td:first-child,
.calendar .decade tr:first-child td:first-child,
.calendar .century tr:first-child td:first-child
{
  text-align   : left;
  padding-left : 3rem;
}

.calendar .year .selected,
.calendar .decade .selected,
.calendar .century .selected
{
  font-size : 1.3em;
  height    : 3.45em;
  width     : 6.5em;
}