.yu-date-picker-option {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  display: inline-block;
  width: 330px;
  background-color: #fff;
  border: 1px solid #E4E7ED;
  padding: 14px;
  border-radius: 4px;
  color: #606266;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
  .yu-date-picker-option > .head {
    text-align: center; }
    .yu-date-picker-option > .head > a {
      display: inline-block;
      padding: 8px; }
      .yu-date-picker-option > .head > a:hover {
        color: #409EFF;
        cursor: pointer; }
    .yu-date-picker-option > .head > div {
      display: inline-block;
      padding: 8px;
      font-size: 14px; }
      .yu-date-picker-option > .head > div > span:hover {
        color: #409EFF;
        cursor: pointer; }
    .yu-date-picker-option > .head > .left {
      float: left; }
    .yu-date-picker-option > .head > .right {
      float: right; }
  .yu-date-picker-option > table.date {
    width: 100%;
    margin: 0 auto; }
    .yu-date-picker-option > table.date > thead > tr > th {
      border-bottom: 1px solid #E4E7ED;
      font-size: 14px;
      width: 40px;
      height: 40px;
      font-weight: normal;
      color: #606266; }
    .yu-date-picker-option > table.date > tbody > tr td {
      text-align: center;
      font-size: 14px;
      width: 40px;
      height: 40px;
      font-weight: normal;
      color: #606266;
      vertical-align: middle; }
      .yu-date-picker-option > table.date > tbody > tr td:hover:not(.other-month):not(.disabled) {
        color: #409EFF;
        cursor: pointer; }
      .yu-date-picker-option > table.date > tbody > tr td.other-month {
        color: #C0C4CC; }
      .yu-date-picker-option > table.date > tbody > tr td.current-day {
        color: #409EFF;
        font-weight: bold; }
      .yu-date-picker-option > table.date > tbody > tr td.active:not(.disabled) > div {
        display: inline-block;
        text-align: center;
        line-height: 24px;
        width: 24px;
        height: 24px;
        background-color: #409EFF;
        border-radius: 100%;
        color: #fff; }
      .yu-date-picker-option > table.date > tbody > tr td.disabled {
        color: #C0C4CC;
        cursor: not-allowed; }
    .yu-date-picker-option > table.date.month > tbody > tr td, .yu-date-picker-option > table.date.year > tbody > tr td {
      width: 80px;
      height: 60px; }
      .yu-date-picker-option > table.date.month > tbody > tr td.active:not(.disabled) > div, .yu-date-picker-option > table.date.year > tbody > tr td.active:not(.disabled) > div {
        width: 80px;
        height: 60px;
        border-radius: 0;
        background-color: #fff;
        line-height: 60px;
        font-weight: bold;
        color: #409EFF; }
      .yu-date-picker-option > table.date.month > tbody > tr td.disabled, .yu-date-picker-option > table.date.year > tbody > tr td.disabled {
        color: #C0C4CC;
        cursor: not-allowed; }