.wsf-datetime-picker {
background: var(--wsf-field-color-background);
border: var(--wsf-field-border);
padding: var(--wsf-field-datetime-padding);
z-index: 999999;
}
.wsf-datetime-picker.xdsoft_inline {
display: flex;
}
.wsf-datetime-picker.xdsoft_inline .xdsoft_datepicker {
float: none;
width: 100%;
}
.wsf-datetime-picker.xdsoft_inline .xdsoft_datepicker.active + .xdsoft_timepicker {
width: 25%;
}
.wsf-datetime-picker.xdsoft_inline .xdsoft_datepicker:not(.active) + .xdsoft_timepicker {
width: 100%;
}
.wsf-datetime-picker.xdsoft_inline .xdsoft_timepicker {
float: none;
}
.wsf-datetime-picker .xdsoft_datepicker,
.wsf-datetime-picker .xdsoft_timepicker {
margin: 0;
}
.wsf-datetime-picker .xdsoft_datepicker {
width: auto;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker {
align-content: space-between;
display: flex;
height: var(--wsf-field-datetime-nav-icon-size);
margin-bottom: var(--wsf-field-datetime-padding-vertical);
flex-direction: column;
flex-wrap: wrap;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_prev {
background: none;
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-right: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color) !important;
height: var(--wsf-field-datetime-nav-icon-size);
margin: 0 var(--wsf-field-datetime-nav-icon-gap) 0 0;
opacity: 1;
width: 0;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_today_button {
background: none;
background-color: var(--wsf-field-datetime-nav-icon-color);
border: none;
cursor: pointer;
height: calc(var(--wsf-field-datetime-nav-icon-size) * 0.6);
margin: 0 var(--wsf-field-datetime-nav-icon-gap) 0 0;
opacity: 1;
overflow: visible;
position: relative;
top: calc(var(--wsf-field-datetime-nav-icon-size) * 0.4);
width: var(--wsf-field-datetime-nav-icon-size);
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_today_button::before {
content: "";
position: absolute;
top: calc(-1 * var(--wsf-field-datetime-nav-icon-size) * 0.4);
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-left: calc(var(--wsf-field-datetime-nav-icon-size) * 0.5) solid transparent;
border-right: calc(var(--wsf-field-datetime-nav-icon-size) * 0.5) solid transparent;
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) * 0.41) solid var(--wsf-field-datetime-nav-icon-color);
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_today_button::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(var(--wsf-field-datetime-nav-icon-size) * 0.2);
height: calc(var(--wsf-field-datetime-nav-icon-size) * 0.4);
background-color: white;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_next {
align-self: flex-end;
background: none;
width: 0;
height: var(--wsf-field-datetime-nav-icon-size);
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-left: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color) !important;
margin: 0 0 0 var(--wsf-field-datetime-nav-icon-gap);
opacity: 1;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label {
background-color: var(--wsf-field-color-background);
color: var(--wsf-field-datetime-nav-color);
font-family: var(--wsf-field-datetime-nav-font-family);
font-size: var(--wsf-field-datetime-nav-font-size);
font-style: var(--wsf-field-datetime-nav-font-style);
font-weight: var(--wsf-field-datetime-nav-font-weight);
height: var(--wsf-field-datetime-nav-font-size);
letter-spacing: var(--wsf-field-datetime-nav-letter-spacing);
line-height: var(--wsf-field-datetime-nav-line-height);
margin: 0;
padding: 0;
-webkit-text-decoration: var(--wsf-field-datetime-nav-text-decoration);
text-decoration: var(--wsf-field-datetime-nav-text-decoration);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
text-transform: var(--wsf-field-datetime-nav-text-transform);
text-wrap: nowrap;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label i {
background: none;
width: 0;
height: 0;
border-left: calc(var(--wsf-field-datetime-nav-icon-size) / 3) solid transparent !important;
border-right: calc(var(--wsf-field-datetime-nav-icon-size) / 3) solid transparent !important;
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 3) solid var(--wsf-field-datetime-nav-color) !important;
margin: 0 0 0 calc(var(--wsf-field-datetime-nav-icon-gap) / 2);
opacity: 1;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select {
border: var(--wsf-field-datetime-nav-border-width) var(--wsf-field-datetime-nav-border-style) var(--wsf-field-datetime-nav-border-color);
top: calc(var(--wsf-field-datetime-nav-height) - (var(--wsf-field-datetime-nav-height) - var(--wsf-field-datetime-nav-icon-size)) / 2);
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option {
background-color: var(--wsf-field-color-background);
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option.xdsoft_current {
background-color: var(--wsf-field-datetime-nav-current-color-background) !important;
box-shadow: none;
color: var(--wsf-field-datetime-nav-current-color) !important;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option:hover {
background-color: var(--wsf-field-datetime-nav-hover-color-background) !important;
color: var(--wsf-field-datetime-nav-hover-color) !important;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar th {
background-color: var(--wsf-field-datetime-calendar-heading-color-background);
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color);
color: var(--wsf-field-datetime-calendar-heading-color);
font-size: var(--wsf-field-datetime-calendar-font-size);
line-height: var(--wsf-field-datetime-calendar-font-size);
padding: var(--wsf-field-datetime-calendar-padding);
height: auto;
opacity: 1;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td {
background-color: var(--wsf-field-datetime-calendar-color-background);
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color);
color: var(--wsf-field-datetime-calendar-color);
font-size: var(--wsf-field-datetime-calendar-font-size);
line-height: var(--wsf-field-datetime-calendar-font-size);
padding: var(--wsf-field-datetime-calendar-padding);
height: auto;
opacity: 1;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_today {
background-color: var(--wsf-field-datetime-calendar-today-color-background) !important;
color: var(--wsf-field-datetime-calendar-today-color) !important;
font-weight: bold;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_current {
background: var(--wsf-field-datetime-calendar-current-color-background) !important;
box-shadow: none;
color: var(--wsf-field-datetime-calendar-current-color) !important;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_disabled, .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_other_month {
color: var(--wsf-field-datetime-calendar-disabled-color) !important;
}
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:hover {
background: var(--wsf-field-datetime-calendar-hover-color-background) !important;
color: var(--wsf-field-datetime-calendar-hover-color) !important;
}
.wsf-datetime-picker .xdsoft_datepicker.active + .xdsoft_timepicker {
margin: 0;
}
.wsf-datetime-picker .xdsoft_datepicker.active + .xdsoft_timepicker.active {
margin: var(--wsf-field-datetime-padding-vertical) 0 0 var(--wsf-field-datetime-padding-horizontal);
}
.wsf-datetime-picker.xdsoft_showweeks .xdsoft_datepicker {
width: auto;
}
.wsf-datetime-picker .xdsoft_timepicker {
width: auto;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_prev {
background: none;
border-left: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-right: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color) !important;
bottom: calc(var(--wsf-field-datetime-nav-icon-size) / 3);
height: var(--wsf-field-datetime-nav-icon-size);
margin: 0 auto;
opacity: 1;
width: 0;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_next {
background: none;
height: var(--wsf-field-datetime-nav-icon-size);
border-left: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-right: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid transparent !important;
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color) !important;
margin: 0 auto;
opacity: 1;
top: calc(var(--wsf-field-datetime-nav-icon-size) / 3);
width: 0;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box {
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color);
height: calc(6 * (var(--wsf-field-datetime-calendar-padding-vertical) * 2 + var(--wsf-field-datetime-calendar-font-size) + var(--wsf-field-datetime-calendar-border-width)));
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div {
background-color: var(--wsf-field-color-background);
border-top: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color);
color: var(--wsf-field-color);
font-size: var(--wsf-field-datetime-calendar-font-size);
line-height: var(--wsf-field-datetime-calendar-font-size);
padding: var(--wsf-field-datetime-calendar-padding);
height: auto;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
background: var(--wsf-field-datetime-calendar-current-color-background) !important;
box-shadow: none;
color: var(--wsf-field-datetime-calendar-current-color) !important;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
background: var(--wsf-field-datetime-calendar-hover-color-background) !important;
color: var(--wsf-field-datetime-calendar-hover-color) !important;
}
.wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled {
opacity: 0.25;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker {
background: var(--wsf-field-color-background-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_prev {
border-right: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_today_button {
background-color: var(--wsf-field-datetime-nav-icon-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_today_button::before {
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) * 0.41) solid var(--wsf-field-datetime-nav-icon-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_next {
border-left: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label {
background-color: var(--wsf-field-color-background-alt);
color: var(--wsf-field-datetime-nav-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label i {
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 3) solid var(--wsf-field-datetime-nav-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select {
border: var(--wsf-field-datetime-nav-border-width) var(--wsf-field-datetime-nav-border-style) var(--wsf-field-datetime-nav-border-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option {
background-color: var(--wsf-field-color-background-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option.xdsoft_current {
background-color: var(--wsf-field-datetime-nav-current-color-background-alt) !important;
color: var(--wsf-field-datetime-nav-current-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_monthpicker .xdsoft_label > .xdsoft_select > div > div.xdsoft_option:hover {
background-color: var(--wsf-field-datetime-nav-hover-color-background-alt) !important;
color: var(--wsf-field-datetime-nav-hover-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar th {
background-color: var(--wsf-field-datetime-calendar-heading-color-background-alt);
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color-alt);
color: var(--wsf-field-datetime-calendar-heading-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td {
background-color: var(--wsf-field-datetime-calendar-color-background-alt);
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color-alt);
color: var(--wsf-field-datetime-calendar-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_today {
background-color: var(--wsf-field-datetime-calendar-today-color-background-alt) !important;
color: var(--wsf-field-datetime-calendar-today-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_current {
background: var(--wsf-field-datetime-calendar-current-color-background-alt) !important;
color: var(--wsf-field-datetime-calendar-current-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:hover {
background: var(--wsf-field-datetime-calendar-hover-color-background-alt) !important;
color: var(--wsf-field-datetime-calendar-hover-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_disabled, html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_other_month {
color: var(--wsf-field-datetime-calendar-disabled-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_prev {
border-bottom: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_next {
border-top: calc(var(--wsf-field-datetime-nav-icon-size) / 2) solid var(--wsf-field-datetime-nav-icon-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box {
border: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div {
background-color: var(--wsf-field-color-background-alt);
border-top: var(--wsf-field-datetime-calendar-border-width) var(--wsf-field-datetime-calendar-border-style) var(--wsf-field-datetime-calendar-border-color-alt);
color: var(--wsf-field-color-alt);
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
background: var(--wsf-field-datetime-calendar-current-color-background-alt) !important;
color: var(--wsf-field-datetime-calendar-current-color-alt) !important;
}
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-datetime-picker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
background: var(--wsf-field-datetime-calendar-hover-color-background-alt) !important;
color: var(--wsf-field-datetime-calendar-hover-color-alt) !important;
}