.flatpickr-trigger {
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-event-74716E.svg');
  background-position: left 10px bottom 8px;
  background-size: 16px 16px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}
.date-calendar-container {
  .form-control[readonly].flatpickr-trigger {
    background-color: #fff;
  }
}
.form-group label:not(.sr-only)+.flatpickr-trigger {
  padding-left: 36px;
}
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  &.open, &.inline {
    opacity: 1;
    max-height: 640px;
    visibility: visible
  }
  &.open {
    display: inline-block;
    z-index: 99999;
    &.animate {
      animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1)
    }
  }
  &.inline {
    display: block;
    position: relative;
    top: 2px
  }
  &.static {
    position: absolute;
    top: calc(100% + 2px);
    &.open {
      z-index: 999;
      display: block
    }
  }
  &.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    box-shadow: -2px 0 0 $interactive-color-light, 5px 0 0 $interactive-color-light;
  }

  .hasWeeks .dayContainer, .hasTime .dayContainer {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
  }

  .hasWeeks .dayContainer {
    border-left: 0
  }

  &.hasTime .flatpickr-time {
    height: 40px;
    border-top: 1px solid #e6e6e6
  }

  &.noCalendar.hasTime .flatpickr-time {
    height: auto
  }

  &:before, &:after {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    /*rtl:ignore*/
    left: 22px
  }

  &.rightMost:before, &.arrowRight:before, &.rightMost:after, &.arrowRight:after {
    /*rtl:ignore*/
    left: auto;
    /*rtl:ignore*/
    right: 22px
  }

  &.arrowCenter:before, &.arrowCenter:after {
    left: 50%;
    right: 50%
  }

  &:before {
    border-width: 5px;
    margin: 0 -5px
  }

  &:after {
    border-width: 4px;
    margin: 0 -4px
  }

  &.arrowTop:before, &.arrowTop:after {
    bottom: 100%
  }

  &.arrowTop:before {
    border-bottom-color: #e6e6e6
  }

  &.arrowTop:after {
    border-bottom-color: #fff
  }

  &.arrowBottom:before, &.arrowBottom:after {
    top: 100%
  }

  &.arrowBottom:before {
    border-top-color: #e6e6e6
  }

  &.arrowBottom:after {
    border-top-color: #fff
  }

  &:focus {
    outline: 0
  }
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block
}

.flatpickr-months {
  display: flex;
  .flatpickr-month {
    background: transparent;
    color: rgba(0, 0, 0, 0.9);
    fill: rgba(0, 0, 0, 0.9);
    height: 34px;
    line-height: 1;
    text-align: center;
    position: relative;
    user-select: none;
    overflow: hidden;
    flex: 1
  }

  .flatpickr-prev-month, .flatpickr-next-month {
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    height: 34px;
    padding: 10px;
    z-index: 3;
    color: $interactive-color;
    fill: $interactive-color;
    &.flatpickr-disabled {
      color: rgba(0, 0, 0, 0.2);
      fill: rgba(0, 0, 0, 0.2);
    }
    i {
      position: relative
    }
    &.flatpickr-prev-month {
      left: 0
    }
    &.flatpickr-next-month {
      right: 0
    }
    &:hover {
      color: #959ea9
    }
    &:hover svg {
      fill: $interactive-color;
    }
    svg {
      width: 14px;
      height: 14px;
      path {
        transition: fill .1s;
        fill: inherit
      }
    }
  }
}
/* rtl:ignore */
[dir="rtl"] .flatpickr-months .flatpickr-next-month svg, [dir="rtl"] .flatpickr-months .flatpickr-prev-month svg {
  transform: rotate(180deg);
}



.numInputWrapper {
  position: relative;
  height: auto;
  input, span {
    display: inline-block
  }

  input {
    width: 100%;
    &::-ms-clear {
      display: none
    }
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none
    }
  }

  span {
    position: absolute;
    right: 0;
    width: 14px;
    padding: 0 4px 0 2px;
    height: 50%;
    line-height: 50%;
    opacity: 0;
    cursor: pointer;
    border: 1px solid rgba(57, 57, 57, 0.15);
    box-sizing: border-box;
    &:hover {
      background: rgba(0, 0, 0, 0.1)
    }

    &:active {
      background: rgba(0, 0, 0, 0.2)
    }

    &:after {
      display: block;
      content: "";
      position: absolute
    }

    &.arrowUp {
      top: 0;
      border-bottom: 0;
      &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid rgba(57, 57, 57, 0.6);
        top: 26%
      }
    }
    &.arrowDown {
      top: 50%;
      &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba(57, 57, 57, 0.6);
        top: 40%
      }
    }
    svg {
      width: inherit;
      height: auto;
      path {
        fill: rgba(0, 0, 0, 0.5)
      }
    }
  }
  &:hover {
    background: rgba(0, 0, 0, 0.05);
    span {
      opacity: 1
    }
  }
}

.flatpickr-current-month {
  font-size: 16px;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 10px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0, 0, 0);

  span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin-left: .5ch;
    padding: 0;
    &:hover {
      background: rgba(0, 0, 0, 0.05)
    }
  }

  .numInputWrapper {
    width: 6ch;
    width: 7ch \0;
    display: inline-block;
    span.arrowUp:after {
      border-bottom-color: rgba(0, 0, 0, 0.9)
    }
    span.arrowDown:after {
      border-top-color: rgba(0, 0, 0, 0.9)
    }
  }
  input.cur-year {
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 .5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    line-height: inherit;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    appearance: textfield;
    &:focus {
      outline: 0
    }
    &[disabled], &[disabled]:hover {
      font-size: 100%;
      color: rgba(0, 0, 0, 0.5);
      background: transparent;
      pointer-events: none
    }
  }
  .flatpickr-monthDropdown-months {
    appearance: menulist;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    height: auto;
    line-height: inherit;
    margin: -1px 0 0 0;
    outline: none;
    padding: 0 0 0 .5ch;
    position: relative;
    vertical-align: initial;
    -webkit-box-sizing: border-box;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    width: auto;
    &:focus, &:active {
      outline: none
    }
    &:hover {
      background: rgba(0, 0, 0, 0.05)
    }
    .flatpickr-monthDropdown-month {
      background-color: transparent;
      outline: none;
      padding: 0
    }
  }
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
  .flatpickr-weekdaycontainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-bottom: 1px solid #ccc;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 5px;
  }
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: $brand-grey-dark;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  @include medium-weight;
}

.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
  padding-bottom: 5px;
  &:focus {
    outline: 0
  }
  .hidden {
    display: block !important;
  }
}

.dayContainer {
  padding: 0 5px;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: $brand-grey-dark;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
  &.inRange,
  &.prevMonthDay.inRange,
  &.nextMonthDay.inRange,
  &.today.inRange,
  &.prevMonthDay.today.inRange,
  &.nextMonthDay.today.inRange,
  &:hover,
  &.prevMonthDay:hover,
  &.nextMonthDay:hover,
  &:focus,
  &.prevMonthDay:focus,
  &.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background-color: $interactive-color-light;
    border-color: $interactive-color-light;
  }

  &.selected, &.startRange, &.endRange, &.selected.inRange, &.startRange.inRange, &.endRange.inRange, &.selected:focus, &.startRange:focus, &.endRange:focus, &.selected:hover, &.startRange:hover, &.endRange:hover, &.selected.prevMonthDay, &.startRange.prevMonthDay, &.endRange.prevMonthDay, &.selected.nextMonthDay, &.startRange.nextMonthDay, &.endRange.nextMonthDay {
    background: $interactive-color;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: $interactive-color
  }

  &.selected.startRange, &.startRange.startRange, &.endRange.startRange {
    border-radius: 50px 0 0 50px
  }

  &.selected.endRange, &.startRange.endRange, &.endRange.endRange {
    border-radius: 0 50px 50px 0
  }

  &.selected.startRange + .endRange:not(:nth-child(7n+1)), &.startRange.startRange + .endRange:not(:nth-child(7n+1)), &.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 $interactive-color
  }

  &.selected.startRange.endRange, &.startRange.startRange.endRange, &.endRange.startRange.endRange {
    border-radius: 50px
  }

  &.inRange {
    border-radius: 0;
    box-shadow: -5px 0 0 $interactive-color-light, 5px 0 0 $interactive-color-light
  }

  &.flatpickr-disabled, &.flatpickr-disabled:hover, &.prevMonthDay, &.nextMonthDay, &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay {
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    border-color: transparent;
    cursor: default
  }

  &.flatpickr-disabled, &.flatpickr-disabled:hover {
    cursor: not-allowed;
    color: #ccc;
  }

  &.week.selected {
    border-radius: 0;
    box-shadow: -5px 0 0 $interactive-color, 5px 0 0 $interactive-color
  }

  &.hidden {
    visibility: hidden
  }
}

.rangeMode .flatpickr-day {
  margin-top: 1px
}

.flatpickr-weekwrapper {
  float: left;
  .flatpickr-weeks {
    padding: 0 12px;
    box-shadow: 1px 0 0 #e6e6e6
  }

  .flatpickr-weekday {
    float: none;
    width: 100%;
    line-height: 28px
  }

  span.flatpickr-day, span.flatpickr-day:hover {
    display: block;
    width: 100%;
    max-width: none;
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    cursor: default;
    border: none
  }
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  &:after {
    content: "";
    display: table;
    clear: both
  }
  .numInputWrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40%;
    height: 40px;
    float: left
  }

  .numInputWrapper span.arrowUp:after {
    border-bottom-color: $brand-grey-dark
  }

  .numInputWrapper span.arrowDown:after {
    border-top-color: $brand-grey-dark
  }

  &.hasSeconds .numInputWrapper {
    width: 26%
  }

  &.time24hr .numInputWrapper {
    width: 49%
  }

  input {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    line-height: inherit;
    color: $brand-grey-dark;
    font-size: 14px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
  }

  input.flatpickr-hour {
    font-weight: bold
  }

  input.flatpickr-minute, input.flatpickr-second {
    font-weight: 400
  }

  input:focus {
    outline: 0;
    border: 0
  }

  .flatpickr-time-separator, .flatpickr-am-pm {
    height: inherit;
    float: left;
    line-height: inherit;
    color: $brand-grey-dark;
    font-weight: bold;
    width: 2%;
    user-select: none;
    -ms-flex-item-align: center;
    align-self: center
  }

  .flatpickr-am-pm {
    outline: 0;
    width: 18%;
    cursor: pointer;
    text-align: center;
    font-weight: 400
  }

  input:hover, .flatpickr-am-pm:hover, input:focus, .flatpickr-am-pm:focus {
    background: #eee
  }
}



.flatpickr-input[readonly] {
  cursor: pointer
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0)
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0)
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}


/* Nuevo codigo */

.date-calendar-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  max-height: 100vh;
  background: #fff;
  z-index: 100002;
  margin: 0;
  width: auto;
  display: none;
  &.open {
    display: block;
  }
  &-header {
    display: flex;
    align-items: center;
    padding: 15px 0;
  }
  &-close-bt {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: auto;
    border: 0;
    background: transparent;
    padding: 0 15px;
    vertical-align: middle;
    .icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin: 0;
      padding: 0;
      vertical-align: middle;
      &, & * {
        fill: $brand-grey-dark;
      }
    }
  }
  &-close-txt {
    font-size: 18px;
    color:$brand-grey-dark;
    font-weight: 300;
    width: 100%;
  }
  &-body {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto;
  }

  .flatpickr-calendar {
    border-radius: 0;
    box-shadow: none;
    max-height: unset;
    top: 0;
    width: 100% !important;
    .flatpickr-months {
      flex-direction: column;
      justify-content: flex-start;
      .flatpickr-prev-month, .flatpickr-next-month {
        display: none;
      }
    }
    .flatpickr-month {
      position: absolute;
      width: 100%;
      z-index: 1;
      /* Posicionar en absoluto el nombre del mes verticalmente en funcion del numero de orden. El primero esta a 70px: 70 + 300 * 0*/
      @for $i from 0 through 12 {
        &:nth-of-type(#{$i+1}) {
          top: (54px + (300px * $i));
        }
      }
    }
    .flatpickr-innerContainer {
      padding-top: 0;
      padding-top: 89px;
    }
    .flatpickr-rContainer {
      display: block;
      width: 100%;
      margin-top: 0;
    }
    .flatpickr-weekdays {
      background-color: #fff;
      padding-top: 16px;
      height: auto;
      width: 100%;
      position: fixed;
      top: 58px;
      z-index: 1;
      .flatpickr-weekdaycontainer {
        display: none;
        &:nth-child(1) {
          display: flex;
        }
      }
    }
    .flatpickr-days {
      flex-direction: column;
      width: 100% !important;
    }
    .dayContainer {
      margin-bottom: 60px;
      width: 100%;
      min-width: 0;
      max-width: none;
      min-height: 240px;
      .flatpickr-day {
        max-width: none;
      }
    }
  }
}
.dates {
  > .calendar_switcher {
    padding: 10px 0 0 0;
    overflow: hidden;
    clear: both;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    .gregorian, .local {
      color: $interactive-color;
      cursor:pointer;
      font-size: $font-size-base;
      @include medium-weight;
      &.selected {
        cursor:default;
        color: $brand-grey-dark;
      }
    }
    .gregorian.selected:before, .local.selected:after {
      content: '';
      width: 14px;
      height: 14px;
      display: inline-block;
      background-image: url("/headers/ilusion/sunrise/dist/svg/icon-ownfill-graph-check-027a02.svg"), none;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 5px;
      vertical-align: middle;
    }
  }
}