.field-calendardatetime {
  table {
    thead {
      th {
        background-color: #fff;
      }
    }
  }
  .is-recurring {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .is-recurring-item {
      input[type="radio"] {
        position: absolute;
        opacity: 0;
        + .is-recurring-label {
          &:before {
            content: '';
            background: #f4f4f4;
            border-radius: 100%;
            border: 1px solid darken(#f4f4f4, 25%);
            display: inline-block;
            width: 15px;
            height: 15px;
            position: relative;
            top: 3px;
            margin-right: 10px;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
          }
        }
        &:checked {
          + .is-recurring-label {
            &:before {
              background-color: #3197EE;
              box-shadow: inset 0 0 0 4px #f4f4f4;
            }
          }
        }
        &:focus {
          + .is-recurring-label {
            &:before {
              outline: none;
              border-color: #3197EE;
            }
          }
        }
        &:disabled {
          + .is-recurring-label {
            &:before {
              box-shadow: inset 0 0 0 4px #f4f4f4;
              border-color: darken(#f4f4f4, 25%);
              background: darken(#f4f4f4, 25%);
            }
          }
        }
        + .is-recurring-label {
          &:empty {
            &:before {
              margin-right: 0;
            }
          }
        }
      }
      label {
        font-size: 16px;
        font-weight: normal;
      }
      & + .is-recurring-item {
        margin-left: 20px;
      }
    }
  }
  .form_datetime{
    width: 100%;
    margin: 20px auto;
    table {
      th, td {
        border: none;
        padding: 9px;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          font-size: 14px;
          padding: 5px;
        }
      }
    }
    @media (max-width: 575.98px) {
      .datepicker {
        margin-bottom: 20px;
      }
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      .datepicker {
        margin-bottom: 20px;
        .datepicker-days {
          padding: 0 10%;
        }
      }
      .timepicker {
        .timepicker-picker {
          padding: 0 10%;
        }
      }
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .datepicker {
        margin-bottom: 20px;
        .datepicker-days {
          padding: 0 10%;
        }
      }
      .timepicker {
        .timepicker-picker {
          padding: 0 10%;
        }
      }
    }
  }
  .block-add-recurring {
    .block-type-of-recurring {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #cccccc;
      padding: 30px 0;
      @media (max-width: 575.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      .title  {
        width: 30%;
        @media (max-width: 575.98px) {
          width: 100%;
          margin-bottom: 10px;
        }
        h5 {
          font-size: 16px;
          margin: 0;
          text-align: left;
        }
      }
      .block-input {
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        width: 70%;
        @media (max-width: 575.98px) {
          width: 100%;
          grid-template-columns: 1fr 1fr;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          grid-template-columns: 1fr 1fr 1fr;
        }
        @media (min-width: 992px) and (max-width: 1199.98px) {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .type-recurring-item {
          input[type="radio"] {
            position: absolute;
            opacity: 0;
            + .type-recurring-label {
              &:before {
                content: '';
                background: #f4f4f4;
                border-radius: 100%;
                border: 1px solid darken(#f4f4f4, 25%);
                display: inline-block;
                width: 15px;
                height: 15px;
                position: relative;
                top: 3px;
                margin-right: 10px;
                vertical-align: top;
                cursor: pointer;
                text-align: center;
                transition: all 250ms ease;
              }
            }
            &:checked {
              + .type-recurring-label {
                &:before {
                  background-color: #3197EE;
                  box-shadow: inset 0 0 0 4px #f4f4f4;
                }
              }
            }
            &:focus {
              + .type-recurring-label {
                &:before {
                  outline: none;
                  border-color: #3197EE;
                }
              }
            }
            &:disabled {
              + .type-recurring-label {
                &:before {
                  box-shadow: inset 0 0 0 4px #f4f4f4;
                  border-color: darken(#f4f4f4, 25%);
                  background: darken(#f4f4f4, 25%);
                }
              }
            }
            + .type-recurring-label {
              &:empty {
                &:before {
                  margin-right: 0;
                }
              }
            }
          }
          label {
            font-size: 16px;
            font-weight: normal;
          }
        }
      }
    }
    .block-select-allday {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #cccccc;
      padding: 30px 0;
      @media (max-width: 575.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      .title  {
        width: 30%;

        @media (max-width: 575.98px) {
          width: 100%;
          margin: 0 0 10px 0;
        }
        h5 {
          font-size: 16px;
          margin: 0;
          text-align: left;
        }
      }
      .block-input {
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr;
        width: 70%;
        @media (max-width: 575.98px) {
          width: 100%;
          grid-template-columns: 1fr 1fr;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          grid-template-columns: 1fr 1fr 1fr;
        }
        @media (min-width: 992px) and (max-width: 1199.98px) {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .all-day-item {
          input[type="radio"] {
            position: absolute;
            opacity: 0;
            + .all-day-label {
              &:before {
                content: '';
                background: #f4f4f4;
                border-radius: 100%;
                border: 1px solid darken(#f4f4f4, 25%);
                display: inline-block;
                width: 15px;
                height: 15px;
                position: relative;
                top: 3px;
                margin-right: 10px;
                vertical-align: top;
                cursor: pointer;
                text-align: center;
                transition: all 250ms ease;
              }
            }
            &:checked {
              + .all-day-label {
                &:before {
                  background-color: #3197EE;
                  box-shadow: inset 0 0 0 4px #f4f4f4;
                }
              }
            }
            &:focus {
              + .all-day-label {
                &:before {
                  outline: none;
                  border-color: #3197EE;
                }
              }
            }
            &:disabled {
              + .all-day-label {
                &:before {
                  box-shadow: inset 0 0 0 4px #f4f4f4;
                  border-color: darken(#f4f4f4, 25%);
                  background: darken(#f4f4f4, 25%);
                }
              }
            }
            + .all-day-label {
              &:empty {
                &:before {
                  margin-right: 0;
                }
              }
            }
          }
          label {
            font-size: 16px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .day-off-week {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 30px 0;
    @media (max-width: 575.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    .title  {
      width: 30%;
      @media (max-width: 575.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      h5 {
        font-size: 16px;
        margin: 0;
        text-align: left;
      }
    }
    .block-input {
      width: 70%;
      display: grid;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      @media (max-width: 575.98px) {
        width: 100%;
        grid-template-columns: 1fr 1fr;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (min-width: 992px) and (max-width: 1199.98px) {
        grid-template-columns: 1fr 1fr 1fr;
      }
      input[type="checkbox"] {
        margin: 0 10px 0 0;
        position: relative;
        width: 15px;
        height: 15px;
        color: #363839;
        border: 1px solid #bdc1c6;
        border-radius: 2px;
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        &::before {
          position: absolute;
          content: '';
          display: block;
          top: -1px;
          left: 4px;
          width: 6px;
          height: 13px;
          border-style: solid;
          border-color: #fff;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
          opacity: 0;
        }
        &:checked {
          color: #fff;
          border-color: #1D72EA;
          background: #1D72EA;
          &::before {
            opacity: 0;
          }
          ~ label::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          }
        }
        &:disabled {
          background-color: #999999;
        }
      }
      label {
        font-size: 16px;
        font-weight: normal;
      }
    }
  }
  .block-number-week-recurring,.block-number-month-recurring {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 30px 0;
    @media (max-width: 575.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    @media (min-width: 992px) and (max-width: 1199.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    .title  {
      width: 30%;
      @media (max-width: 575.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      @media (min-width: 992px) and (max-width: 1199.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      h5 {
        font-size: 16px;
        margin: 0;
        text-align: left;
      }
    }
    .block-input {
      width: 70%;
      @media (max-width: 575.98px) {
        width: 100%;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        width: 100%;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        width: 100%;
      }
      @media (min-width: 992px) and (max-width: 1199.98px) {
        width: 100%;
      }
      input {
        width: 30%;
        border: none;
        border-bottom: 1px solid #cccccc;
        height: 34px;
        padding: 5px 0;
        &:active, &:focus {
          outline: none;
        }
      }
    }
  }

  .month-of-year {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 15px 0;
    @media (max-width: 575.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    .title  {
      width: 30%;
      @media (max-width: 575.98px) {
        width: 100%;
        margin-bottom: 10px;
      }
      h5 {
        font-size: 16px;
        margin: 0;
        text-align: left;
      }
    }
    .block-input {
      width: 70%;
      display: grid;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      input[type="checkbox"] {
        margin: 0 15px 0 0;
        position: relative;
        width: 15px;
        height: 15px;
        color: #363839;
        border: 1px solid #bdc1c6;
        border-radius: 2px;
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        &::before {
          position: absolute;
          content: '';
          display: block;
          top: -1px;
          left: 4px;
          width: 6px;
          height: 13px;
          border-style: solid;
          border-color: #fff;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
          opacity: 0;
        }
        &:checked {
          color: #fff;
          border-color: #1D72EA;
          background: #1D72EA;
          &::before {
            opacity: 1;
          }
          ~ label::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          }
        }
      }
      label {
        font-size: 16px;
        font-weight: normal;
      }
    }
  }
  .block-specific-day-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 15px 0;
    @media (max-width: 575.98px) {
      flex-flow: column;
      align-items: flex-start;
    }
    .title  {
      width: 30%;
      @media (max-width: 575.98px) {
        width: 100%;
        margin: 0 0 10px 0;
      }
      h5 {
        font-size: 16px;
        margin-bottom: 0;
        text-align: left;
      }
    }
    .block-input {
      width: 70%;
      .wrapper-day-specific {
        &:nth-child(1) {
          margin-bottom: 20px;
        }
        width: 100%;
        h6.title-specific-day {
          font-size: 14px;
          text-transform: capitalize;
          margin: 0 0 10px 0;
        }
        .wrapper-date-specific {
          width: 100%;
          display: grid;
          grid-column-gap: 10px;
          grid-row-gap: 10px;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          input[type="checkbox"] {
            margin: 0 10px 0 0;
            position: relative;
            width: 15px;
            height: 15px;
            color: #363839;
            border: 1px solid #bdc1c6;
            border-radius: 2px;
            appearance: none;
            outline: 0;
            cursor: pointer;
            transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
            &::before {
              position: absolute;
              content: '';
              display: block;
              top: 1px;
              left: 6px;
              width: 6px;
              height: 13px;
              border-style: solid;
              border-color: #fff;
              border-width: 0 2px 2px 0;
              transform: rotate(45deg);
              opacity: 0;
            }
            &:checked {
              color: #fff;
              border-color: #1D72EA;
              background: #1D72EA;
              &::before {
                opacity: 0;
              }
              ~ label::before {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
              }
            }
          }
          label {
            font-size: 16px;
            font-weight: normal;
          }
        }
      }

    }
  }
  .block-set-recurring-time {
    border-bottom: 1px solid #cccccc;
    padding: 30px 0 10px 0;
    .block-recurring-date {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      @media (max-width: 575.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      @media (min-width: 992px) and (max-width: 1199.98px) {
        flex-flow: column;
        align-items: flex-start;
      }
      .block-left, .block-right {
        width: 50%;
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: 1fr 1fr;
        @media (max-width: 575.98px) {
          width: 100%;
          grid-template-columns: 1fr;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          width: 100%;
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
          width: 100%;
        }
        @media (min-width: 992px) and (max-width: 1199.98px) {
          width: 100%;
        }
        h5 {
          font-size: 16px;
          margin: 0;
          text-align: left;
        }
        input[type="text"] {
          width: 100%;
          height: 40px;
          padding: 12px;
          border: 1px solid #E2E5EC;
          box-shadow: none;
        }
        .dropdown-menu {
          width: 200px;
          .timepicker-picker,.timepicker-hours,.timepicker-minutes {

            width: 100%;
            table {
              width: 100%;
              th, td {
                border: none;
                height: 25px;
                line-height: 25px;
                width: 25px;
                padding: 0;
                font-size: 16px;
                &.hour {
                  padding: 0;
                }
                span {
                  font-size: 16px;
                  font-weight: normal;
                  &.glyphicon, &.timepicker-hour, &.timepicker-minute {
                    height: 25px;
                    line-height: 25px;
                    width: 25px;
                  }
                }
              }
            }
          }
          ul {
            list-style: none;
            padding: 0;
          }

        }
      }
      .block-right {
        margin-left: 30px;
        @media (max-width: 575.98px) {
          margin-left: 0;
          margin-top: 20px;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          margin-left: 0;
          margin-top: 20px;
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
          margin-left: 0;
          margin-top: 20px;
        }
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-left: 0;
          margin-top: 20px;
        }
      }
    }
  }
  .comment-addition {
    padding: 30px 0 0 0;
    h5 {
      font-size: 16px;
      text-align: left;
      margin: 0 0 20px 0;
    }
    textarea {
      width: 100%;
      font-size: 16px;
      height: 185px;
      border: 1px solid #E2E5EC;
      box-shadow: none;
    }
  }

}
.datetimepicker {
  &.dropdown-menu {
    width: 350px;
    @media (max-width: 575.98px) {
      width: 100%;
      transform: translateX(40px);
    }
    .prev {
      transform: rotate(90deg);
    }
    .next {
      transform: rotate(-90deg);
    }
  }
}