.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template,
.tchmi-timespan-picker-template {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
.tchmi-timespan-picker-template-overlay {
    position: absolute;
    padding: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow-x: auto;
    overflow-y: auto;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-first-block,
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-second-block,
.tchmi-timespan-picker-template-first-block,
.tchmi-timespan-picker-template-second-block {
    position: relative;
    float: left;
    margin: 5px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-label,
.tchmi-timespan-picker-template-label {
    position: relative;
    width: 100%;
    height: 24px;
    bottom: 5px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area,
.tchmi-timespan-picker-template-editable-area {
    float: left;
    margin: 5px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput {
    position: relative;
    width: 60px;
    height: 100px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area
    .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before:not(:empty),
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-editable-area
    .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after:not(:empty) {
    flex-basis: 35px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-millisecond-template,
.tchmi-timespan-picker-millisecond-template {
    margin: 10px 5px;
    width: 70px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-action-button,
.tchmi-timespan-picker-template-action-button {
    position: relative;
    width: 80px;
    height: 35px;
    float: right;
    margin: 10px;
}

/** Show in View styles **/
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display
    .TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-overlay,
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-direct-display .tchmi-timespan-picker-template-overlay {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker .TcHmi_Controls_Beckhoff_TcHmiTextblock,
.tchmi-timespan-picker .tchmi-textblock,
.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker
    .TcHmi_Controls_Beckhoff_TcHmiTextblock
    .TcHmi_Controls_Beckhoff_TcHmiTextblock-template-text-container,
.tchmi-timespan-picker .tchmi-textblock .tchmi-textblock-template-text-container {
    overflow: visible;
}