.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: 60%;
    max-height: 60%;
    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: 30px;
    bottom: 5px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-button,
.tchmi-timespan-picker-template-button {
    position: relative;
    width: 60px;
    height: 35px;
}

.TcHmi_Controls_Beckhoff_TcHmiTimespanPicker-template-textbox,
.tchmi-timespan-picker-template-textbox {
    position: relative;
    width: 60px;
    height: 30px;
}

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

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

.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;
}