.bp-element-event-calendar {
  .wrap-calendar {
    max-width: 350px;

    .ui-datepicker-inline {
      background: #f6f6f6;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;

      .ui-datepicker-header {
        height: 40px;
        background: #fff;
        border-top: 3px solid #e1e1e1;
        border-bottom: 2px solid #e1e1e1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .ui-datepicker-title {
          .ui-datepicker-month {
            font-weight: 500;
            font-size: 13px;
            line-height: 1.3;
            color: #292929;
            text-transform: uppercase;
          }

          .ui-datepicker-year {
            font-weight: 500;
            font-size: 11px;
            line-height: 1.3;
            color: #747474;
            text-transform: uppercase;
          }
        }

        .ui-datepicker-prev,
        .ui-datepicker-next {
          position: absolute;
          display: block;
          width: 25px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 0;
          cursor: pointer;

          .ui-icon {
            display: none;
          }

          &:hover:after {
            color: darken(#f8b944,10%);
          }
        }

        .ui-datepicker-next {
          right: 0;

          &::after {
            content:'\f10a';
            font-family: Ionicons;
            font-size: 14px;
            color: #f8b944;
          }
        }

        .ui-datepicker-prev {
          left: 0;

          &::after {
            content:'\f107';
            font-family: Ionicons;
            font-size: 14px;
            color: #f8b944;
          }
        }
      }

      .ui-datepicker-calendar {
        width: calc(100% - 30px);
        margin: 15px 15px 0 15px;

        thead {
          th {
            font-weight: 500;
            font-size: 11px;
            color: #292929;
            text-transform: uppercase;
            text-align: center;
            width: calc(100% / 7);
            padding-bottom: 3px;
          }
        }

        tbody {
          &, tr, td {
            border: 1px solid #dadada;
          }

          td {
            background: #fff;
            padding: 0;
            width: calc(100% / 7);

            a {
              font-weight: 500;
              font-size: 11px;
              color: #292929;
              line-height: 16px;
              display: block;
              text-align: center;
              padding-top: 8px;
              padding-bottom: 8px;
              width: 100%;

              &.ui-state-highlight {
                background: #f8b944;
                color: #fff;
              }
            }

            &.ui-state-disabled {
              background: transparent;
            }

            &.have-event {
              position: relative;

              &::after {
                content: '';
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #f8b944;
                position: absolute;
                right: 2px;
                bottom: 2px;
              }
            }
          }
        }
      }
    }
  }
}