.tm-calendar {
  .clndr {
    .clndr-controls {
      text-align: center;

      .clndr-previous-button,
      .clndr-next-button {
        width: 30px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

        &:hover {
          opacity: 0.5;
        }
      }

      .clndr-previous-button {
        float: left;
        text-align: left;
      }

      .clndr-next-button {
        float: right;
        text-align: right;
      }
    }

    .clndr-grid {
      float: left;
      width: 65%;

      .days-of-the-week {
        padding-left: 0;
        padding-right: 0;

        .header-day {
          float: left;
          width: 14.2857%;
          text-align: center;
        }
      }

      .days {
        width: 100%;

        .day,
        .empty {
          float: left;
          width: 14.2857%;
          line-height: 80px;
          text-align: center;
          color: #4f4f4f;
          background-color: #f5f5f5;
          border-bottom: 1px solid #eee;
          border-left: 1px solid #ddd;

          &.adjacent-month .day-number {
            opacity: 0.3;
          }
        }

        .day {
          &.tm-calendar-event {
            background: #fff;
            text-align: center;

            .numberCircle {
              display: inline-block;
              -moz-border-radius: 30px;
              -webkit-border-radius: 30px;
              border-radius: 30px;

              span {
                text-align: center;
                cursor: pointer;
                display: inline-block;
                -moz-border-radius: 30px;
                -webkit-border-radius: 30px;
                border-radius: 30px;
                width: 50px;
                height: 50px;
                line-height: 49px;
                -webkit-transition: background 0.15s ease-out, color 0.15s ease-out;
                -moz-transition: background 0.15s ease-out, color 0.15s ease-out;
                -o-transition: background 0.15s ease-out, color 0.15s ease-out;
                transition: background 0.15s ease-out, color 0.15s ease-out;
              }
            }

            &:hover {
              span {
                background: $accent-color-1;
                color: #fff;
              }
            }
          }

          &.today {
            span {
              display: inline-block;
              border: 2px solid $accent-color-1;
              width: 50px;
              height: 50px;
              line-height: 49px;
              -moz-border-radius: 30px;
              -webkit-border-radius: 30px;
              border-radius: 30px;
            }

            .day-number {
              color: $accent-color-1;
            }
          }
        }
      }
    }
  }

  .jl-height-medium {
    height: 400px;
  }

  .content-inner {
    padding: 20px;
    animation-name: jl-fade;
    animation-duration: 0.8s;
    animation-timing-function: linear;
  }

  .jl-article-meta {
    padding: 5px 0;
  }
}
