.uidatepicker {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 120px;
  max-width: 100%;
  height: auto;
  font-size: 14px;
  border-bottom: 2px solid #CCC;
  transition: all ease-in-out .2s;
}
.uidatepicker:focus {
  outline: none;
  border-bottom: 2px solid #3467b1;
}
.uidatepicker .date {
  display: inline-block;
  width: 100%;
  color: #333;
  padding: .2em .5em;
  font-size: 14px;
  text-align: left;
	background-image: url('/image/icon-dropdown.png');
	background-size: auto 50%;
	background-position: right center;
	background-repeat: no-repeat;
  cursor: pointer;
}
.uidatepicker .date.placeholder {
  color: #999;
  font-style: italic;
}
.uidatepicker .dropbox {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  min-width: 240px;
  padding: 10px 15px;
  background-color: #FFF;
  box-shadow: 0 0 3px rgba(0, 0, 0, .25);
  opacity: 0;
  transition: all ease-in-out .2s;
  z-index: 500;
}
.uidatepicker:focus .dropbox {
  display: inline-block;
  opacity: 1;
}
.uidatepicker .dropbox .cal-info-row,
.uidatepicker .dropbox .cal-row, {
	display: inline-block;
	width: 100%;
  margin-bottom: 0;
  padding: 5px 0;
  font-size: 0;
  text-align: left;
}
.uidatepicker .dropbox .yearmonth {
  display: inline-block;
  padding: .4em 0;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
.uidatepicker .dropbox .arrow-list {
  display: inline-block;
  float: right;
}
.uidatepicker .dropbox .arrow-list .arrow {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: auto 12px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  cursor: pointer;
  transition: all ease-in-out .2s;
  z-index: 600;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}
.uidatepicker .dropbox .arrow-list .arrow:hover {
  background-color: var(--theme-color-light);
}
.uidatepicker .dropbox .arrow-list .arrow:active {
  background-color: var(--theme-color);
}
.uidatepicker .dropbox .arrow-list .arrow.left {
  background-image: url('/image/icon-arrow-left.png');
}
.uidatepicker .dropbox .arrow-list .arrow.right {
  background-image: url('/image/icon-arrow-right.png');
}
.uidatepicker .dropbox .calbody {
  display: inline-block;
  position: relative;
  width: 100%;
  font-size: 0;
}
.uidatepicker .dropbox .calcell-list {
  display: inline-block;
  width: 100%;
  font-size: 0;
}
.uidatepicker .dropbox .calcell-list .cal-row {
  padding: 0;
}
.uidatepicker .dropbox .calcell {
  display: inline-block;
  float: left;
  width: 14.2857%;
  padding: .5em 0 .6em 0;
  color: #333;
  font-size: 12px;
  text-align: center;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all ease-in-out .2s;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}
.uidatepicker .dropbox .calcell.caltitle {
  color: #888;
  font-weight: bold;
}
.uidatepicker .dropbox .calcell.holiday {
  color: #F00;
}
.uidatepicker .dropbox .calcell.outrange {
  opacity: .6;
}
.uidatepicker .dropbox .calcell.disabled {
  color: #CCC;
  cursor: not-allowed;
}
.uidatepicker .dropbox .calcell.calday:hover,
.uidatepicker .dropbox .calcell.outrange:hover {
  background-color: var(--theme-color-light);
}
.uidatepicker .dropbox .calcell.calday.selected,
.uidatepicker .dropbox .calcell.calday:active,
.uidatepicker .dropbox .calcell.outrange:active {
  background-color: var(--theme-color);
}
.uidatepicker .dropbox .calcell.calday.selected {
  font-weight: 600;
}