/* ###### 4.12 Datetimepicker ###### */

/* Amaze UI Datetimepicker */

.datetimepicker {
  box-shadow: none;
  border-radius: 0;
  border-width: 1px;
  border-color: #{$border};
  min-width: 270px;
  padding: 0 10px 10px;
  border-radius:5px;
  box-shadow:0px 4px 7px rgba(154, 154, 204, .1);
  &::before {
    display: none;
  }

  table {
    width: 100%;

    th {
      &.prev, &.next, &.switch {
        background-color: rgb($white) ;
        color: #{$default-color};
      }

      &.prev, &.next {
        position: relative;
      }

      &.prev span, &.next span {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      &.prev span::before, &.next span::before {
        font-family: 'Ionicons';
        position: absolute;
        inset-block-start: 50%;
        font-size: 16px;
        color: #{$muted};
        line-height: 0;
      }

      &.prev {
        &:hover, &:focus {
          background-color: rgb($white) ;
        }
      }

      &.next {
        &:hover, &:focus {
          background-color: rgb($white) ;
        }
      }

      &.prev {
        &:hover span::before, &:focus span::before {
          color: #{$primary};
        }
      }

      &.next {
        &:hover span::before, &:focus span::before {
          color: #{$primary};
        }
      }

      &.prev span::before {
        content: '\f3cf';
        inset-inline-start: 0;
      }

      &.next span::before {
        content: '\f3d1';
        inset-inline-end: 0;
      }

      &.switch {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1px;
        color: #{$gray-900};

        &:hover, &:focus {
          background-color: rgb($white) ;
          color: #{$primary};
        }
      }
    }

    td {
      font-size: 0.875rem;
      text-align: center;

      &.old, &.new {
        color: #{$gray-500};
      }

      &.active {
        background-color: #{$primary};
        color: rgb($white) ;

        &:hover, &:focus {
          background-color: #{$primary};
          color: rgb($white) ;
        }
      }
    }

    span.active {
      background-color: #{$primary};
      color: rgb($white) ;

      &:hover, &:focus {
        background-color: #{$primary};
        color: rgb($white) ;
      }
    }
  }

  .datetimepicker-days table thead tr {
    &:first-child th {
      height: 38px;
    }

    &:last-child th {
      height: 25px;
      text-transform: uppercase;
      color: #{$gray-700};
      font-weight: 700;
      font-size: 11px;
    }
  }
}

/* jQuery Simple Datetimepicker */

.main-datetimepicker {
  box-shadow: 0px 4px 7px rgba(154, 154, 204 , .1);
  border-radius: 4px;
  border-color: #{$border};
  margin-block-start: 0px;

  > {
    .datepicker_header {
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > .icon-home {
        display: none;
      }

      a {
        &:nth-child(2), &:last-child {
          display: block;
          position: relative;
          text-indent: -999999px;
        }

        &:nth-child(2)::before, &:last-child::before {
          font-family: 'Ionicons';
          position: absolute;
          inset-block-start: 50%;
          line-height: 0;
          text-indent: 0;
          font-size: 13px;
        }

        &:nth-child(2)::before {
          content: '\f3cf';
          inset-inline-start: 0;
        }

        &:last-child::before {
          content: '\f3d1';
          inset-inline-end: 0;
        }
      }

      span {
        font-family: inherit;
        text-transform: uppercase;
      }
    }

    .datepicker_inner_container {
      border-radius: 0;
      box-shadow: none;
      border-width: 0;
      display: flex;
      height: 225px;
      margin: 0;
      background-color: rgb($white) ;

      &::after {
        display: none;
      }

      > {
        .datepicker_calendar {
          width: 230px;
          border-width: 0;
          border-radius: 0;
          font-family: inherit;
          padding: 5px;
          float: none;
          margin: 0;

          > table {
            width: 100%;
            height: 100%;
          }

          th {
            font-size: 11px;
            text-transform: uppercase;
            color: #{$gray-900};
            font-weight: 700;
            text-align: center;
            padding: 8px 5px;
          }

          td {
            font-size: 0.875rem;
            font-weight: 400;
            text-align: center;
            padding: 5px;

            &.day_another_month {
              color: #{$gray-500};
            }

            &.hover {
              background-color: #{$gray-200};
              cursor: pointer;
            }

            &.active {
              background-color: #{$primary};
              color: rgb($white) ;
			  border-radius: 2px;
            }
          }
        }

        .datepicker_timelist {
          float: none;
          width: 70px;
          height: 100% !important;
          border-inline-start: 1px solid #{$border};

          > div.timelist_item {
            padding: 5px 8px;
            margin-block-start: 0;
            margin-inline-end: 0;
            margin-block-end: 0;
            margin-inline-start: 1px;

            &:hover, &:focus {
              background-color: #{$bg-hover};
            }

            &.active {
              background-color: #{$primary};
              color: rgb($white) ;
            }
          }
        }
      }
    }
  }
}

/* Picker JS */

.picker-title {
  font-size: 15px;
  font-weight: 500;
}

.picker-cell__header {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .4px;
}

.picker-item {
  font-family: inherit;
}

.picker-picked {
  font-weight: 500;
  color: #{$primary};
}