@zohodesk/components/lib/DateTime/DateTime.module.css

In this Package, we Provide Some Basic Components to Build Web App

.semibold {
  font-family: var(--zd_semibold);
}

[dir=ltr] .boxPadding {
  padding-right: var(--zd_size19) ;
  padding-left: var(--zd_size19) ;
}

[dir=rtl] .boxPadding {
  padding-left: var(--zd_size19) ;
  padding-right: var(--zd_size19) ;
}

.container {
  font-size: var(--zd_font_size16) ;
  composes: offSelection from '../common/common.module.css';
  border-radius: 3px;
  background-color: var(--zdt_datetime_default_bg);
}

.header {
  min-height: var(--zd_size36) ;
  composes: boxPadding;
  text-align: center;
  background-color: var(--zdt_datetime_header_bg);
  border-radius: 0 0 2px 2px;
  border-bottom: 1px solid var(--zdt_datetime_header_border);
}

.datesStr {
  font-family: var(--zd_regular);
}

.grid {
  width: var(--zd_size28) ;
  height: var(--zd_size28) ;
  line-height: 1.3846;
  text-align: center;
  padding: var(--zd_size4) 0 ;
  border-radius: 50%;
  border: 1px solid transparent;
}

.thArrow,
.datesStr {
  font-size: var(--zd_font_size13) ;
  color: var(--zdt_datetime_datestr_text);
}

.thArrow, .datesStr {
  cursor: pointer;
}

.thArrow:hover,
.datesStr:hover {
  color: var(--zdt_datetime_datestr_text);
}

.thArrow:hover, .datesStr:hover {
  background: var(--zdt_datetime_datestr_hover_bg);
}

[dir=ltr] .navigation {
  margin-left: var(--zd_size2) ;
}

[dir=rtl] .navigation {
  margin-right: var(--zd_size2) ;
}

.thMonYear {
  font-size: var(--zd_font_size13) ;
  line-height: 1.8462;
  color: var(--zdt_datetime_datestr_text);
  composes: semibold;
  display: initial
}

.dateContainer {
  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
}

.separator {
  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
}

.days {
  min-height: var(--zd_size36) ;
  composes: boxPadding;
  composes: alignBetween from '../common/common.module.css';
  padding-top: var(--zd_size7) ;
}

.daysStr {
  composes: dotted from '../common/common.module.css';
  font-size: var(--zd_font_size10) ;
  color: var(--zdt_datetime_daystr_text);
  text-transform: uppercase;
  composes: semibold;
  width: var(--zd_size31) ;
}

.dateRow {
  height: var(--zd_size28) ;
  composes: alignBetween from '../common/common.module.css';
  margin: var(--zd_size1) 0 var(--zd_size5) ;
}

.dateRow:last-child {
  margin-bottom: 0 ;
}

.holiday,
.holiday:hover,
.invalidDate.holiday:hover {
  color: var(--zdt_datetime_invalid_hover_text);
}

.invalidDate {
  color: var(--zdt_datetime_invalid_text);
}

.invalidDate.holiday,.inActiveDate.holiday:hover {
  color: var(--zdt_datetime_invaliddate_text);
}

.today {
  border: 1px solid var(--zdt_datetime_today_border);
  border-radius: 50%;
}

.today:hover {
  border: 1px solid var(--zdt_datetime_today_border);
  background-color: var(--zdt_datetime_datestr_hover_bg);
}

.active,
.active:hover,
.active.today,
.active:hover.today:hover {
  color: var(--zdt_datetime_today_text);
}

.active, .active:hover, .active.today, .active:hover.today:hover {
  background-color: var(--zdt_datetime_selected_bg);
  border-radius: 50%;
}
.inActiveDate{
color: var(--zdt_datetime_invalid_text);
cursor: no-drop;
}
.inActiveDate:hover
{
  color: var(--zdt_datetime_invalid_text);
}
.inActiveDate:hover, .inActiveDate.holiday:hover{
  background-color: var(--zdt_datetime_inactivedate_hover_bg);

}


.timesection {
  padding-top: var(--zd_size5) ;
  padding-bottom: var(--zd_size10) ;
}

.dropDownContainer {
  padding: 0 var(--zd_size5) ;
}

.dropDown {
  width: var(--zd_size60) ;
  display: inline-block;
  position: relative;
  margin: 0 var(--zd_size4) ;
}

.footer {
  margin-top: var(--zd_size10) ;
  padding-bottom: var(--zd_size12) ;
}

.timesection,
.footer {
  composes: boxPadding;
}

.space {
  display: inline-block;
  width: var(--zd_size15) ;
}

.downArrow {
  color: var(--zdt_datetime_daystr_text);
}

[dir=ltr] .downArrow {
  margin-left: var(--zd_size2) ;
}

[dir=rtl] .downArrow {
  margin-right: var(--zd_size2) ;
}

.dateText {
  cursor: pointer;
}

.dateText:hover .downArrow {
  color: var(--zdt_datetime_datestr_text);
}

.text {
  composes: boxPadding;
  font-size: var(--zd_font_size11) ;
  text-transform: uppercase;
  color: var(--zdt_datetime_text);
  composes: semibold;
  display: block;
  margin-top: var(--zd_size14) ;
}

.yearContainer {
  position: absolute;
  top: 0 ;
  width: 100% ;
  height: 100% ;
}

[dir=ltr] .yearContainer {
  left: 0 ;
}

[dir=rtl] .yearContainer {
  right: 0 ;
}

.subContainer {
  position: relative;
}

.dropBox {
  width: 100% ;
  border-radius: 3px;
  box-shadow: var(--zd_bs_dropbox_bottom);
  background-color: var(--zdt_dropbox_default_bg);
}