/*Daterange picker*/
.date-picker-wrapper{
  width: 390px;
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%);
  border-radius: 8px;
  background: var(--colorWhite);
  padding: 24px !important;
  border: none;
  box-shadow: none;
  z-index: 1000;
  box-sizing: border-box;
  font-family: var(--mainFontFamily) !important;
}
.month-wrapper,
.date-picker-wrapper .month-wrapper table{
  width: 100% !important;
}
.date-picker-wrapper .month-wrapper table{
  display: flex;
  flex-direction: column;
}
.date-picker-wrapper .month-wrapper table thead {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}
.date-picker-wrapper .footer{
  display: none;
}
.date-picker-wrapper .month-wrapper{
  border: none;
  padding: 0;
}
.date-picker-wrapper.single-month .month-name{
  display: flex;
  gap: 16px;
  height: 26px;
}
.date-picker-wrapper.single-month .month-name .select-wrapper{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_53785_2757' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_53785_2757)'%3E%3Cpath d='M12 14.9748C11.8667 14.9748 11.7417 14.954 11.625 14.9123C11.5084 14.8706 11.4 14.7998 11.3 14.6998L6.70005 10.0998C6.51672 9.91647 6.42505 9.68314 6.42505 9.3998C6.42505 9.11647 6.51672 8.88314 6.70005 8.6998C6.88338 8.51647 7.11672 8.4248 7.40005 8.4248C7.68338 8.4248 7.91672 8.51647 8.10005 8.6998L12 12.5998L15.9 8.6998C16.0834 8.51647 16.3167 8.4248 16.6 8.4248C16.8834 8.4248 17.1167 8.51647 17.3 8.6998C17.4834 8.88314 17.575 9.11647 17.575 9.3998C17.575 9.68314 17.4834 9.91647 17.3 10.0998L12.7 14.6998C12.6 14.7998 12.4917 14.8706 12.375 14.9123C12.2584 14.954 12.1334 14.9748 12 14.9748Z' fill='%2332734E' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  padding-right: 24px;
  background-position: center right;
  background-repeat: no-repeat;
}
.date-picker-wrapper.single-month .month-name .select-wrapper .year{
  width: 100%;
}
.date-picker-wrapper .drp_top-bar{
  padding: 0;
  margin-top: 48px;
  text-align: center;
}
.date-picker-wrapper table .caption{
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.date-picker-wrapper table .caption th:first-of-type,
.date-picker-wrapper table .caption th:last-of-type{
  width: 32px;
}
.date-picker-wrapper table .caption th:first-of-type span,
.date-picker-wrapper table .caption th:last-of-type span{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--Outline-Outline, #DDD);
  float: left;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.date-picker-wrapper table .caption th:first-of-type span{ 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 12L6 8L10 4' stroke='%23333333' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--colorWhite);
  cursor: pointer; 
}
.date-picker-wrapper table .caption th:last-of-type span{ 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 12L10 8L6 4' stroke='%23333333' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--colorWhite);
  cursor: pointer;
}
.date-picker-wrapper .month-wrapper table .week-name{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-around;
}
.date-picker-wrapper .month-wrapper table .week-name th{
  padding: 8px 7px;
  font-family: var(--mainFontFamily);
  color: var(--fontColorEighty);
  font-family: var(--setupFontFamily);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
}
.date-picker-wrapper .drp_top-bar .default-top{
  color: var(--fontColorEighty);
  font-family: var(--setupFontFamily);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.day.toMonth.invalid{
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.4;
}
.day.toMonth.invalid.tmp{
  cursor: pointer;
  text-decoration: none;
  opacity: 1;
}
.date-picker-wrapper .month-wrapper table .day{
  padding: 8px 16px;
  font-family: var(--mainFontFamily);
  color: var(--fontColorEighty);
  text-align: center;
  font-family: var(--setupFontFamily);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.date-picker-wrapper .month-wrapper table .day.real-today{
  background-color: var(--btnBorderColor);
  border-radius: 8px;
}
.date-picker-wrapper .month-wrapper table .day.checked,
.date-picker-wrapper .month-wrapper table .day.toMonth.hovering{
  border-top: 1px dashed var(--btnColorGreen);
  border-bottom: 1px dashed var(--btnColorGreen);
  background-color: #FFF7F7;
  padding: 7px 16px;
}
.date-picker-wrapper.single-date .month-wrapper table .day.checked,
.date-picker-wrapper.single-date .month-wrapper table .day.toMonth.hovering,
.date-picker-wrapper.single-date .month-wrapper table .day.toMonth.invalid.tmp.hovering{
  border: none;
  background-color: var(--btnColorGreen);
  color: var(--colorWhite);
  border-radius: 8px;
}
.roundedDate,
.date-picker-wrapper .month-wrapper table .day.first-date-selected{
  background-color: var(--btnColorGreen) !important;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.date-picker-wrapper.single-date .month-wrapper table .day.first-date-selected{
  border-radius: 8px;
}
.roundedDate{
  color: var(--colorWhite) !important;
}
.date-picker-wrapper .month-wrapper table .day.last-date-selected{
  background-color: var(--btnColorGreen) !important;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.date-picker-wrapper .month-name{
  color: var(--fontColorEighty);
  font-family: var(--mainFontFamily);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 25.2px */
  text-transform: capitalize;
}
.date-range-length-tip {
  display: none !important;
}
.date-picker-wrapper .month-wrapper table .day.nextMonth, .date-picker-wrapper .month-wrapper table .day.lastMonth {
  display: none;
}
/* Base input field for the picker */
.date-picker {
  width: 170px;
  height: 25px;
  padding: 0;
  border: 0;
  line-height: 25px;
  padding-left: 10px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  color: #303030;
  position: relative;
  z-index: 2;
}

/* Utility */
.dp-clearfix {
  clear: both;
  height: 0;
  font-size: 0;
}

/* Variants */
.date-picker-wrapper.inline-wrapper {
  position: relative;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: inline-block;
}

.date-picker-wrapper.single-date {
  width: auto;
}

.date-picker-wrapper.no-shortcuts {
  padding-bottom: 12px;
}

.date-picker-wrapper.no-topbar {
  padding-top: 12px;
}

/* Generic elements you didn’t have yet */
.date-picker-wrapper b {
  color: #666;
  font-weight: 700;
}

.date-picker-wrapper a {
  color: #6bb4d6;
  text-decoration: underline;
}

.date-picker-wrapper .select-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.date-picker-wrapper .select-wrapper:hover {
  text-decoration: underline;
}

.date-picker-wrapper .month-element {
  display: inline-block;
  vertical-align: middle;
}

.date-picker-wrapper .select-wrapper select {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: -1px;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  opacity: 0.01;
}

/* Gap visuals (not present in your file) */
.date-picker-wrapper .gap {
  position: relative;
  z-index: 1;
  width: 15px;
  font-size: 0;
  line-height: 0;
  float: left;
  top: -5px;
  margin: 0 10px -10px;
  visibility: hidden;
  height: 0;
}

.date-picker-wrapper .gap .gap-lines {
  height: 100%;
  overflow: hidden;
}

.date-picker-wrapper .gap .gap-line {
  height: 15px;
  width: 15px;
  position: relative;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
  z-index: 1;
  height: 0;
  border-left: 8px solid white;
  border-top: 8px solid #eee;
  border-bottom: 8px solid #eee;
}

.date-picker-wrapper .gap .gap-line .gap-2 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid white;
}

.date-picker-wrapper .gap .gap-line .gap-3 {
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 2;
  height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid white;
}

.date-picker-wrapper .gap .gap-top-mask,
.date-picker-wrapper .gap .gap-bottom-mask {
  width: 6px;
  height: 1px;
  position: absolute;
  background-color: #eee;
  z-index: 3;
}

.date-picker-wrapper .gap .gap-top-mask {
  top: -1px;
  left: 1px;
}

.date-picker-wrapper .gap .gap-bottom-mask {
  bottom: -1px;
  left: 7px;
}

/* Hidden elements */
.date-picker-wrapper .selected-days {
  display: none;
}

/* Week number support */
.date-picker-wrapper .week-number {
  padding: 5px 0;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 1px;
  color: #999;
  cursor: pointer;
}

.date-picker-wrapper .week-number.week-number-selected {
  color: #49e;
  font-weight: bold;
}

/* Time picker support (you don’t have these) */
.date-picker-wrapper .time {
  position: relative;
}

.date-picker-wrapper.single-month .time {
  display: block;
}

.date-picker-wrapper .time input[type=range] {
  vertical-align: middle;
  width: 129px;
  height: 20px;
  padding: 0;
  margin: 0;
}

.date-picker-wrapper .time1,
.time2 {
  width: 180px;
  padding: 0 5px;
  text-align: center;
}

.date-picker-wrapper .time1 {
  float: left;
}

.date-picker-wrapper .time2 {
  float: right;
}

.date-picker-wrapper .hour,
.minute {
  text-align: right;
}

.date-picker-wrapper .hide {
  display: none;
}