/** Styles for the theme: Base-Dark */
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
.tchmi-date-time-picker,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
.tchmi-date-time-picker-template-overlay {
    --tchmi-overlay-background: #1b1b1f;
    --tchmi-background: #1b1b1f;
    --tchmi-color: #ffffff;
    --tchmi-border: #4c6374;
    --tchmi-label-color: #ffffff;
    --tchmi-header-background: #2775be;
    --tchmi-header-color: #ffffff;
    --tchmi-weekends-background: #2a3845;
    --tchmi-weekends-color: #ffffff;
    --tchmi-days-background: #2b2b2c;
    --tchmi-days-color: #ffffff;
    --tchmi-days-background-active: #2775be;
    --tchmi-days-color-active: #ffffff;
    --tchmi-year-background: #ededed;
    --tchmi-year-color: #2775be;
    --tchmi-datatimepicker-error: rgba(255, 0, 0, 0.4);
    --tchmi-color-disabled: #a3b0bb;
}

.tchmi-system-topmostlayer-container .TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay,
.tchmi-system-topmostlayer-container .tchmi-date-time-picker-template-overlay {
    box-shadow: 0px 0px 6px 1px rgba(89, 89, 89, 0.75);
    background: var(--tchmi-overlay-background);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-selected-area-template,
.tchmi-date-time-picker-selected-area-template {
    border: 1px solid var(--tchmi-border);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template,
.tchmi-date-time-picker-calendar-template {
    border: 1px solid var(--tchmi-border);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-button-area-template,
.tchmi-date-time-picker-button-area-template {
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-label,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-value,
.tchmi-date-time-picker-template-label,
.tchmi-date-time-picker-template-value {
    color: var(--tchmi-label-color);
}

/* calendar style */
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header,
.tchmi-date-time-picker-calendar-template-header {
    background: var(--tchmi-header-background);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul,
.tchmi-date-time-picker-calendar-template-header ul {
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-header ul li,
.tchmi-date-time-picker-calendar-template-header ul li {
    color: var(--tchmi-header-color);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-next,
.tchmi-date-time-picker-calendar-template-next {
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays,
.tchmi-date-time-picker-calendar-template-weekdays {
    background-color: var(--tchmi-weekends-background);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-weekdays li,
.tchmi-date-time-picker-calendar-template-weekdays li {
    color: var(--tchmi-weekends-color);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days,
.tchmi-date-time-picker-calendar-template-days {
    background: var(--tchmi-days-background);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days li,
.tchmi-date-time-picker-calendar-template-days li {
    color: var(--tchmi-days-color);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template-days .active,
.tchmi-date-time-picker-calendar-template-days .active {
    background: var(--tchmi-days-background-active);
    color: var(--tchmi-days-color-active);
}

/* year style */
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-year-template-year-element,
.tchmi-date-time-picker-year-template-year-element {
    color: var(--tchmi-year-color);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-year-template .active,
.tchmi-date-time-picker-year-template .active {
    background-color: var(--tchmi-year-background);
}

/* time style */
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-label,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-textbox,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-template-colon,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-time-label,
.tchmi-date-time-picker-time-template-label,
.tchmi-date-time-picker-time-template-textbox,
.tchmi-date-time-picker-time-template-colon,
.tchmi-date-time-picker-template-time-label {
    color: var(--tchmi-color);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-template-overlay .TcHmi_Controls_Beckhoff_TcHmiTextbox-template-border,
.tchmi-date-time-picker-template-overlay .tchmi.textbox-template-border {
    box-shadow: initial;
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-time-area-template,
.tchmi-date-time-picker-time-area-template {
    border: 1px solid var(--tchmi-border);
}

/** Direct Display styles*/
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker,
.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-direct-display.tchmi-date-time-picker {
    background: var(--tchmi-background);
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-invalid-notification {
    background-image: url('Images/invalid-notification.svg');
    background-size: 200% 200%;
    background-color: red;
    background-position: 50% 50%;
}

.TcHmi_Controls_Beckhoff_TcHmiDateTimePicker-calendar-template .tchmi-disabled {
    color: var(--tchmi-color-disabled);
}
