/**
 * rome - Customizable date (and time) picker. Opt-in UI, no jQuery!
 * @version v2.1.22
 * @link https://github.com/bevacqua/rome
 * @license MIT
 */
@import '../scss/init.scss';


.dateTimeRangePicker_dialog .dialog_front {
  width: 300px;
  background-color: $c_paper;
  color: $c_text_primary;
}

.rd-container {
  display: none;
  text-align: center;
  width: 100%;
  position: relative;
}
.rd-container-attachment {
  position: absolute;
}
.rd-month {
  display: inline-block;
  width: 100%;
  height: 303px;
  margin-right: 25px;
  padding: $s_gutter;
  padding-top: 0;
}
.rd-month:last-child {
  margin-right: 0;
}
.rd-back,
.rd-next {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 36px;
  height: 36px;
  @include center;
}
.rd-back[disabled],
.rd-next[disabled] {
  cursor: default;
}
.rd-back {
  float: left;
  background-image: url('data:image/svg+xml;utf8, <svg fill="#{$c_icon}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg>'); background-repeat: no-repeat;
  background-position: center;
}
.rd-next {
  float: right;
  background-image: url('data:image/svg+xml;utf8, <svg fill="#{$c_icon}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg>'); background-repeat: no-repeat;
  background-position: center;
}

.rd-month-label {
  height: 36px;
  @include center;
}

.rd-day-body {
  cursor: pointer;
  text-align: center;
  width: 36px;
  height: 36px;
  @include circle;
  font-size: 12px;
}
.rd-day-selected,
.rd-time-selected,
.rd-time-option:hover {
  background-color: $c_accent;
  cursor: pointer;
  color: #fff;
}
.rd-day-prev-month,
.rd-day-next-month {
  color: #999;
}
.rd-day-disabled {
  cursor: default;
  color: #fcc;
}
.rd-time {
  display: inline-block;
  margin-top: 5px;
  min-width: 80px;
}
.rd-time-list {
  display: none;
  position: absolute;
  @include allowScroll('y');
  background-color: $c_paper;
  @include depth(12);
  top: 16px;
  bottom: 40px;
  left: 16px;
  right: 16px;
}
.rd-time-selected {
  height: 36px;
  @include center;
}
.rd-time-option {
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.rd-day-concealed {
  visibility: hidden;
}

.rd-days {
  width: 100%;
  margin-top: $s_gutter;
}

.rd-day-head {
  padding-bottom: $s_gutter;
}