.jdp-wrap {
  width: 100%;
  position: relative;
}

.jdp-wrap > * {
  width: 100%;
}

.jdp-wrap input {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

.jdp-dark .jdp-wrap input,
.jdp-dark input {
  color: rgba(255, 255, 255, 0.88) !important;
  background-color: #23252b !important;
}

.jdp-ultra .jdp-wrap input,
.jdp-ultra input {
  color: rgba(255, 255, 255, 0.88) !important;
  background-color: #101013 !important;
}

.jdp-dark input::placeholder,
.jdp-ultra input::placeholder {
  color: rgba(255, 255, 255, 0.30) !important;
}

.jdp-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* persian-calendar-suite has no allowClear; overlay our own clear button so
   the Jalali picker matches the Gregorian AntD DatePicker's X affordance. */
.jdp-wrap .jdp-clear {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.2s;
}

.jdp-wrap .jdp-clear:hover {
  color: rgba(0, 0, 0, 0.45);
}

.jdp-dark .jdp-clear {
  color: rgba(255, 255, 255, 0.30);
}

.jdp-dark .jdp-clear:hover,
.jdp-ultra .jdp-clear:hover {
  color: rgba(255, 255, 255, 0.45);
}