kr-date-picker {
  .parent {
    width: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
  }

  input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' fill='%236a6d70' height='20' viewBox='0 0 22 22'><g><rect fill='none' height='24' width='24'/></g><g><path d='M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M19,20 H5V10h14V20z M9,14H7v-2h2V14z M13,14h-2v-2h2V14z M17,14h-2v-2h2V14z M9,18H7v-2h2V18z M13,18h-2v-2h2V18z M17,18h-2v-2h2V18z'/></g></svg>");
    background-position: right 0.75rem center, center right 2.25rem;
    background-repeat: no-repeat;
  }

  .parent.is-invalid {
    input { border-color: #dc3545; }
  }

  /*.form-control:read-only { background-color: #fff; }*/

  .date-picker-box.show { display: block !important; }
  .date-picker-box {
    overflow: hidden;
	display: none;
	padding: 0 0.5rem;
	position: absolute;
	z-index: 1000;
	top: 100%;
	background: #fff;
	color: #000;
	border: 1px solid #aaa;
	border-radius: 0 0 4px 4px;
    width: 330px;
    user-select: none;

    .day {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      text-size-adjust: 100%;
      white-space: nowrap;
      float: left;
      display: block;
      overflow: hidden;
      box-sizing: border-box;
      margin: 2px;
      border-radius: 4px;
    }

    .day-names {
      .day-name {
        color: #6a6d70;
        height: 20px;
        line-height: 20px;
      }
    }

    .week {
      display: table;
      width: 100%;
      clear: both;
      margin-left: 2px;

      .workday {
        background-color: #f5f5f5;
      }

      .weekend {
        background-color: #dedede;
      }

      .workday:hover, .weekend:hover { background-color: #0854a0; color: #fff; }

      .day-selected { background-color: #0854a0; color: #fff; }
    }

    .week:last-child { margin-bottom: 10px }

    .paging {
      display: flex;
      padding: 5px 10px;

      width: 100%;
      color: #0854a0;
      text-align: center;
      align-content: center;

      .material-icons { display: block; line-height: 30px; box-sizing: border-box; }
      .material-icons:hover { background-color: #0854a0; color: #fff; border-radius: 4px; }
      .month, .year { display: block; width: 100px; line-height: 30px; margin: 0 20px; border-radius: 4px; }
      // .month:hover, .year:hover { background-color: #0854a0; color: #fff; }
    }
  }

  .invalid-feedback { display: block !important; }
}