.dateRange-range {
  position:absolute;
  z-index:1;
  border:1px solid #bfbfbf;
  background-color:#efefef;
  padding:5px 12px;
  font-size:12px;
  line-height:20px;
  color:#aaa;
  font-family:"Segoe UI",Arial;
  box-shadow:3px 3px 10px rgba(0,0,0,0.5);
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;
}

.dateRange-wrapper {
  width:100%;
  display:table;
}

.dateRange-month {
  display:table-cell;
  vertical-align:top;
  width:210px;
  padding:10px;
}

.dateRange-month::after {
  content:'';
  display:block;
  clear:left;
}

.dateRange-monthLabel {
  width:100%;
  font:bold 14px/30px "Segoe UI",Arial;
  text-align:center;
  color:#333;
}

.dateRange-day,.dateRange-dayEmpty {
  width:30px;
  height:20px;
  float:left;
  display:block;
  font:14px/20px "Segoe UI",Arial;
  text-align:center;
}

.dateRange-day {
  cursor:pointer;
}

.dateRange-dayCurrent {
  background:#FFE684;
  font-weight:bold;
  color:#777;
}

.dateRange-inRange {
  background:#00C6FF;
  color:#fff;
}

.dateRange-inRangeStart {
  background:#7FE2FF;
  color:#fff;
}

.dateRange-dateLabel {
  width:30px;
  float:left;
  display:block;
  font:bold 14px/20px "Segoe UI",Arial;
  text-align:center;
  color:#777;
  padding-bottom:5px;
  border-bottom:1px solid rgba(0,0,0,0.1);
  margin-bottom:5px;
}

.dateRange-left {
  display:table-cell;
  vertical-align:top;
  width:36px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABbklEQVQ4jc2UTUrDQBiG328maqIWeoIeoFdwoy60QfKjOOAyIHQleBUXHqBLsZiMLdq6cqNXsAdw2U0XaqNpGRetEEImCa46y4f3fch84Rtg1Q+vGmy322uNRuO82Wxao9HoXZejKjLbtjdM07wDcARgrpQ6lVLKvCwrkwVBYJqmGS1lwOJWZ7p8oVAIYU0mEwnATuEpEV3rOtoZuq5bAzAkov0U/gDQiqLoRdfLnaHrujXO+QDATkZmF8mAnCs7jrPJOb/PyGIAokwGAEYWcM4vAeyl0LdS6kRKOSyT5X4hYyw7hoQx9llFlitMkuQKwHMKbQN49H1/91/Cfr//ZRhGC0DvjymltojoyfM8p0yo3RQhxPpsNrsF4KXwDxGJMAx7ul7h6gkhrCRJIiI6TOEpgAPdHy/clG63O63X6z6AQQpbSqkLXad0lzudThzH8TGAhyWaA7jR5Su9NsDi+RqPxwERvYVh+Fq1t3rnF6EobROAB1HRAAAAAElFTkSuQmCC') no-repeat 50% 50%;
  cursor:pointer;
}

.dateRange-right {
  display:table-cell;
  vertical-align:top;
  width:36px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABSElEQVQ4jdWTzUrDQBDH/5MMgiI99RE8+AyiaHsSJYZdxY+H6Mv0mJsgFJpDk6Y0J0EQfCHxY3XNeLAtOaSb1F50brMz/9/OzO4Af93IFdRad0Rkh5nv4jh+Wwuotb4QkeEs58Fae5pl2Wsd0HPErksXHjHzJAiCrXWAfQDvJb/TBOqcoVJqH0AOYHshIHqy1h6Px+PnlYEAEIbhged506ZQV8sAgDRNH0XkEoCZn4nInu/7SVX7tUAASJIkJ6LzMhRAl5l7vwICQFEUL0Rk6/K4CUwp1QWQiUi5xXtm7q9codb6DD8vXYalzHxStT113yYEMASwsRAQJb7vX8Vx/FGlWVqhUuoQwKAMA5C3Wq2bZTDAMUMi6onI5twXkakxRo9GI7NM46ywKIoBgK+ZOzHG6DzPnTCgweoR0W673b6NouizDvY/7BuU8Hgiy295WAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  cursor:pointer;
}

.dateRange-left:hover,.dateRange-right:hover {
  background-color:rgba(0,0,0,0.1);
}

.dateRange-time {
  padding:10px 10px 10px 40px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDE1MEUxQzVDOEJFMTFFNDg2QzY4RUExRTczQjc1OTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDE1MEUxQzZDOEJFMTFFNDg2QzY4RUExRTczQjc1OTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MTUwRTFDM0M4QkUxMUU0ODZDNjhFQTFFNzNCNzU5MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MTUwRTFDNEM4QkUxMUU0ODZDNjhFQTFFNzNCNzU5MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsHwW+0AAAHGSURBVHjajJXLK4RhFMa/+VwXJImkRINkw44NO+WSRk0uC6JE2foDXMrC7Q+Qko0VO5RLyWYYKQljio1GISJRVpTxnHq+Or293/DUb+ad9zvnfO/lnDMBx65sEAKtoA4Ucv4ZXIAdsAW+TMeA5XcYjIMiJ7WewBTY9AuYDmZAn5p7BUcgAZKgHDSBAmWzCqbBpxl4ATySS9APKkGesbIM0Atiyn7eXH5YPTwAQc4Pcfs2VYCI8uvQF3DOyRgNPckWb0COT9AqEKfvKVfv9Ki3DFqcDsFIisvpV/6dLlND9AY2LA77YNh7u0Xr4IPjNpd5JoqCd5+ApaDLJ6Dk4jHHta5K2jsfhxd+z4JqH5sEv4tdNZm0GKaBMY5/zFxT8uIkXZaTqMxiOMoSXAON4MEnYFCVprPMG4obB98MbpmLqVTA1JIYiy4LXZRvHHw9GAArfwTsBrkcb8tHFjjjG65Ybv9VDbim74neYUglZ4QV8J9gUeXXYhrMqYdxVkCmz5mNqpUJk7b2JfU6wUCePpi0CaaG3GaDOjPREtvXj63BOuwa0jhL/tjyPTvRXqqOrXteu9SmlJNUABPf+wuQ29wF36bjrwADACfja26Ds8mFAAAAAElFTkSuQmCC') 10px 50% no-repeat rgba(0,0,0,0.1);
  color:#333;
  font-size:14px;
  display:none;
}

.dateRange-time > * {
  vertical-align: middle;
}

.dateRange-timeNoInterval span, .dateRange-timeNoInterval input:last-of-type {
  display: none;
}

.dateRange-input {
  background:#fff;
  border:1px solid #bfbfbf;
  font:14px "Segoe UI";
  padding:4px 7px;
  width:50px;
}

.dateRange-reset {
  display:inline-block;
  cursor:pointer;
  width:20px;
  height:20px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mzg3RjJBQjFEMzI1MTFFNTkzRjhDMkUzRkNENTI3MzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mzg3RjJBQjJEMzI1MTFFNTkzRjhDMkUzRkNENTI3MzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozODdGMkFBRkQzMjUxMUU1OTNGOEMyRTNGQ0Q1MjczNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozODdGMkFCMEQzMjUxMUU1OTNGOEMyRTNGQ0Q1MjczNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuwRoksAAACeSURBVHjarJNLDoAgDEQbIwf0c0aNQT2gLLCQooDlY7TJrOwbWhwA7hpRM6qFdAnUgurjDwZWKI2SCRMD79SjfBMfdlojEx/WnskANLZmtBHIwU4T0ElromHPwMGqLZ2oK8XeU27UIlxr8oAb+LE+rVALszkRhV8lCzmx2c6NmsuJYW2mVWFPLicHqnMN/cvHFMCuBsp2zXO+4FOAAQAlHodOg9fg/QAAAABJRU5ErkJggg==') 0 50% no-repeat;
}

.dateRange-clear {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAM1BMVEUAAAA/Pz9mZmZOTk5NTVBMTE9OTk5OTk5MTE9OTk5NTVBOTlBOTk9NTVBMTE5OTlBOTlAOzI2nAAAAEHRSTlMABAVRUlNUpqepq6ytrvr7ztsAQAAAAGdJREFUGJVlj+sWgCAIg6d5Sa3c+z9tQaZW+4PfEM4AEFYDlU1OSqjM6tid1SmTxSiT1WOlaLPKZIQp+thvlmGzsasve/FwHv4Z35HBU56rmVsepPa55Ulwdc5zLBCnLxMGfOznX3wC1isJDPaOcP8AAAAASUVORK5CYII=') 50% 50% no-repeat;
  background-size:66%;
  background-color:#fff;
  width:16px;
  height:16px;
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  cursor:pointer;
}

.dateRange-wrap {
  position:relative;
}

@media (max-width:640px) {
  .dateRange-dateLabel {
    width:25px;
    font-size:13px;
    line-height:18px;
    padding-bottom:5px;
    margin-bottom:5px;
  }

  .dateRange-day,.dateRange-dayEmpty {
    width:25px;
    height:25px;
    font-size:13px;
    line-height:25px;
  }

  .dateRange-month {
    width:175px;
  }

  .dateRange-left,.dateRange-right {
    width:auto;
  }
}