:host {
  width: 200px;
  height: 0;
  display: none;
  position: relative;
  z-index: 100000000000; }
  :host.show {
    display: block; }
  :host > div {
    display: flex;
    padding: 10px;
    font-size: 12px;
    z-index: 10000000;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0px 1px 3px 0 #999; }
  :host .header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px; }
    :host .header > * {
      flex: 1;
      text-align: center; }
  :host .content {
    position: relative; }
  :host .weekDays {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd; }
    :host .weekDays > * {
      flex: 1;
      text-align: center; }
  :host .days {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 10px; }
    :host .days .day {
      transition: background-color 300ms ease, color 300ms ease; }
      :host .days .day:hover {
        background-color: rgba(230, 230, 230, 0.5); }
    :host .days > * {
      width: calc(14.28571428571429%);
      text-align: center;
      padding: 5px;
      box-sizing: border-box; }
      :host .days > *.active {
        background-color: #1d9781 !important;
        color: #fff; }
  :host .month-dialog, :host .year-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    transform: scale(0); }
    :host .month-dialog.show, :host .year-dialog.show {
      transform: scale(1); }
  :host .month-dialog > * {
    width: 33.33333%;
    height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; }
    :host .month-dialog > *:hover {
      background-color: rgba(230, 230, 230, 0.5); }
    :host .month-dialog > *.active {
      color: #fff;
      background-color: #1d9781 !important; }

/*# sourceMappingURL=jdatepicker.component.css.map */
