<div class="editBackground layer1">
<div class="window editOrder">
<div class="title">Title</div>
<div class="content">
<div class="titleContent">
<div class="orderNumber">
<div class="label editLabel">Number</div>
<div id="editOrderNumber" class="value editTextOutput">123456</div>
</div>
<div class="status">
<div class="label editLabel">Status</div>
<div class="value"><select id="editOrderStatus" class="editSelect">
<option>Test</option>
</select>
</div>
</div>
</div>
<div class="customerContent">
<label class="titleLabel editLabel">Customer</label>
<label class="nameLabel editLabel" for="editOrderCustomerName">Name</label>
<label class="nameValue editTextOutput" id="editOrderCustomerName">Max Mustermann</label>
<label class="address1Label editLabel" for="editOrderCustomerAddress1">Address1</label>
<label class="address1Value editTextOutput" id="editOrderCustomerAddress1">Wallstreet 2</label>
<label class="address2Label editLabel" for="editOrderCustomerAddress2"></label>
<label class="address2Value editTextOutput" id="editOrderCustomerAddress2"></label>
<label class="zipCityLabel editLabel" for="editOrderCustomerZipCity">ZIP / City</label>
<label class="zipCityValue editTextOutput" id="editOrderCustomerZipCity">12345 - Capetown</label>
<label class="countryLabel editLabel" for="editOrderCustomerCountry">Country</label>
<label class="countryValue editTextOutput" id="editOrderCustomerCountry">Germany</label>
</div>
<div class="datesContent">
<label class="titleLabel editLabel">Dates</label>
<label class="rosdLabel editLabel" for="editOrderDatesROSD">ROSD</label>
<label class="rosdValue editTextOutput" id="editOrderDatesROSD">21.Feb.2024</label>
<label class="sosdLabel editLabel" for="editOrderDatesSOSD">SOSD</label>
<label class="sosdValue editTextOutput" id="editOrderDatesSOSD">21.Feb.2024</label>
<label class="aosdLabel editLabel" for="editOrderDatesAOSD">AOSD</label>
<label class="aosdValue editTextOutput" id="editOrderDatesAOSD">21.Feb.2024</label>
<label class="rshdLabel editLabel" for="editOrderDatesRSHD">RSHD</label>
<label class="rshdValue editTextOutput" id="editOrderDatesRSHD">21.Feb.2024</label>
<label class="sshdLabel editLabel" for="editOrderDatesSSHD">SSHD</label>
<label class="sshdValue editTextOutput" id="editOrderDatesSSHD">21.Feb.2024</label>
<label class="ashdLabel editLabel" for="editOrderDatesASHD">ASHD</label>
<label class="ashdValue editTextOutput" id="editOrderDatesASHD">21.Feb.2024</label>
<label class="atdsLabel editLabel" for="editOrderDatesATDS">ATD1</label>
<label class="atdsValue editTextOutput" id="editOrderDatesATDS">21.Feb.2024</label>
<label class="atdaLabel editLabel" for="editOrderDatesATDA">ATD2</label>
<label class="atdaValue editTextOutput" id="editOrderDatesATDA">21.Feb.2024</label>
<label class="ctdsLabel editLabel" for="editOrderDatesCTDS">CTD1</label>
<label class="ctdsValue editTextOutput" id="editOrderDatesCTDS">21.Feb.2024</label>
<label class="ctdaLabel editLabel" for="editOrderDatesCTDA">CDT2</label>
<label class="ctdaValue editTextOutput" id="editOrderDatesCTDA">21.Feb.2024</label>
</div>
<div class="systemContent">
<label class="titleLabel editLabel">Systems</label>
<div id="editOrderSystems" class="content">
<div class="system">
<ul>
<li>Test1<br><span class="systemInfo">SystemId: SystemID<br>SerialNumber: SerialNumber<br>PSI Code: UTG033<br>PSI Description: DontKnow01</span></li>
</ul>
</div>
<div class="system">
<hr>
<ul>
<li>Test2<br><span class="systemInfo">SystemId: SystemID<br>SerialNumber: SerialNumber<br>PSI Code: UTG033<br>PSI Description: DontKnow01</span></li>
</ul>
</div>
<div class="system">
<hr>
<ul>
<li>Test3<br><span class="systemInfo">SystemId: SystemID<br>SerialNumber: SerialNumber<br>PSI Code: UTG033<br>PSI Description: DontKnow01</span></li>
</ul>
</div>
<div class="system">
<hr>
<ul>
<li>Test4<br><span class="systemInfo">SystemId: SystemID<br>SerialNumber: SerialNumber<br>PSI Code: UTG033<br>PSI Description: DontKnow01</span></li>
</ul>
</div>
</div>
</div>
<div class="contactContent">
<label class="titleLabel editLabel">Contacts</label>
<div id="contactsTable" class="table tabulator" role="grid" tabulator-layout="fitColumns" style="height: 100%; max-height: 100%;">
<div class="tabulator-header" role="rowgroup">
<div class="tabulator-header-contents" role="rowgroup">
<div class="tabulator-headers" role="row" style="margin-right: 0px; height: 24px;">
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="type" style="min-width: 40px; width: 137px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">Type</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="sso" style="min-width: 40px; width: 137px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">SSO</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 137px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">Name</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="email" style="min-width: 40px; width: 137px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">Email</div>
</div>
</div>
</div>
</div><br>
<div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div>
</div>
</div>
<div class="tabulator-tableholder" tabindex="0" style="height: calc(100% - 25px); max-height: calc(100% - 25px);">
<div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;">
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="type" style="width: 137px; height: 24px;">Project Manager</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sso" style="width: 137px; height: 24px;">12345679</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 137px; height: 24px;">Tod Miller</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" style="width: 137px; height: 24px;">tod.miller@dontknow.com</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="communicationContent">
<label class="titleLabel editLabel">Communication</label>
<div id="communicationTable" class="table tabulator" role="grid" tabulator-layout="fitColumns" style="height: 100%; max-height: 100%;">
<div class="tabulator-header" role="rowgroup">
<div class="tabulator-header-contents" role="rowgroup">
<div class="tabulator-headers" role="row" style="height: 24px;">
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="action" style="min-width: 40px; width: 161px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">Action</div>
</div>
</div>
</div>
<div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader" aria-sort="none" tabulator-field="sendDate" style="min-width: 40px; width: 95px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">Date</div>
<div class="tabulator-col-sorter">
<div class="tabulator-arrow"></div>
</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="by" style="min-width: 40px; width: 161px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">By</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="sentFrom" style="min-width: 40px; width: 161px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">From</div>
</div>
</div>
</div>
<div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="to" style="min-width: 40px; width: 163px; height: 24px;">
<div class="tabulator-col-content">
<div class="tabulator-col-title-holder">
<div class="tabulator-col-title">To</div>
</div>
</div>
</div>
</div><br>
<div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div>
</div>
</div>
<div class="tabulator-tableholder" tabindex="0" style="height: calc(100% - 25px); max-height: calc(100% - 25px);">
<div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;">
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
<div class="tabulator-cell" role="gridcell" tabulator-field="action" style="width: 161px; height: 24px;">Email Send</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sendDate" style="width: 95px; display: inline-flex; align-items: flex-start; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="by" style="width: 161px; height: 24px;">Do not know</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="sentFrom" style="width: 161px; height: 24px;"> </div>
<div class="tabulator-cell" role="gridcell" tabulator-field="to" style="width: 163px; height: 24px;">This is not important</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<input class="editButton close" type="button" value="Close">
</div>
</div>
</div>.tabulator{background-color:#888;border:1px solid #999;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select{user-select:none}.tabulator .tabulator-header{background-color:#e6e6e6;border-bottom:1px solid #999;box-sizing:border-box;color:#555;font-weight:700;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#e6e6e6;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#cdcdcd;border:1px solid #999;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #aaa;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#cdcdcd;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #666;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-top:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:none;border-top:6px solid #666;color:#666}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{align-items:center;display:flex;justify-content:center;text-orientation:mixed;writing-mode:vertical-rl}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-right:0;padding-top:20px}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{bottom:auto;justify-content:center;left:0;right:0;top:4px}.tabulator .tabulator-header .tabulator-frozen{left:0;position:sticky;z-index:11}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator .tabulator-header .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle,.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;overflow:auto;position:relative;white-space:nowrap;width:100%}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%;min-width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;display:inline-block;font-size:20px;font-weight:700;padding:10px;text-align:center;white-space:normal}.tabulator .tabulator-tableholder .tabulator-table{background-color:#fff;color:#333;display:inline-block;overflow:visible;position:relative;white-space:nowrap}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#e2e2e2!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #aaa}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-footer-contents{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:5px 10px}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important;display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#555;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:hsla(0,0%,100%,.2);border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page.active{color:#d00}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{background:rgba(0,0,0,.2);color:#fff;cursor:pointer}}.tabulator .tabulator-col-resize-handle{display:inline-block;margin-left:-3px;margin-right:-3px;position:relative;vertical-align:middle;width:6px;z-index:10}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{margin-right:0;width:3px}.tabulator .tabulator-alert{align-items:center;background:rgba(0,0,0,.4);display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;display:inline-block;font-size:16px;font-weight:700;margin:0 auto;padding:10px 20px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:4px solid #333;color:#000}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:4px solid #d00;color:#590000}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:22px;position:relative}.tabulator-row.tabulator-row-even{background-color:#efefef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#bbb;cursor:pointer}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{border-bottom:1px solid #aaa;border-top:1px solid #aaa;pointer-events:none;position:absolute;z-index:15}.tabulator-row .tabulator-row-resize-handle{bottom:0;height:5px;left:0;position:absolute;right:0}.tabulator-row .tabulator-row-resize-handle.prev{bottom:auto;top:0}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:14px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{border-right:1px solid #aaa;box-sizing:border-box;display:inline-block;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;display:inline-block;left:0;position:sticky;z-index:11}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:transparent;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#d00}.tabulator-row .tabulator-cell.tabulator-row-handle{align-items:center;display:inline-flex;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;height:3px;margin-top:2px;width:100%}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{display:inline-block;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;color:#fff;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#fff}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;display:inline-block;height:14px;width:14px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #aaa;box-shadow:0 0 5px 0 rgba(0,0,0,.2);box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{border-radius:2px;box-shadow:none;font-size:12px;max-width:Min(500px,100%);padding:3px 5px;pointer-events:none}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;padding:5px 10px;position:relative;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#efefef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#aaa;border-style:solid;border-width:1px 1px 0 0;content:"";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #aaa}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:14px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd;color:#fff}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{background:#1d68cd;color:#fff;cursor:pointer}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;padding:4px;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #aaa;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{direction:rtl;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #aaa;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{margin-left:0;margin-right:-3px;width:3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10000}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}
/*# sourceMappingURL=tabulator.min.css.map */
html
{
// Main
--ge-color: #6400a0;
--ge_text: #fff;
//noinspection CssUnknownProperty
accent-color: var(--ge-color);
--body-bg-color: #f9f9f9;
background: var(--body-bg-color);
// Header
--header-text-color: #fff;
--header-height: 4rem;
--header-title-font-size: 2.5rem;
--header-subtitle-font-size: 1.3rem;
--header-version-font-size: 0.7rem;
--separatorline-bg-color: #000000;
// Footer
--footer-height: 40px;
--footer-bg-color: var(--ge-color);
// Window
--window-border: 1px solid #383838;
--window-border-radius: 4px;
--window-title-height: 1.5rem;
--window-title-bg-color: #d0d0d0;
--window-title-color: #606060;
--window-title-font-size: 1rem;
--window-title-font-weight: bold;
--window-footer-height: 1.5rem;
--window-footer-bg-color: #d0d0d0;
--window-footer-color: #606060;
--window-footer-font-size: 1rem;
--window-footer-font-weight: bold;
--window-content-bg-color: #ffffff;
--window-content-color: #606060;
// Process Panel
--busy-image: url("./images/ge/busy.png");
--busy-bg-color: rgba(255,255,255,0.4);
// Image preview
--image-preview-border-color: #383838;
// Tabs
--tabs_bg-color: var(--window-title-bg-color);
--tabs_tab_inactive_bg_color: #e8e8e8;
--tabs_tab_active_bg_color: var(--window-title-bg-color);
--tabs_tab_color: var(--window-title-color);
// Table
--table-light-bg-color: #e6e6e6;
--table-dark-bg-color: #cdcdcd;
// Calendar
--calendar-border-color: #383838;
--gantt-calendar-header-bg-color: #e8e8e8;
--gantt-calendar-header-bg-weekend-color: #d0d0d0;
--gantt-calendar-header-text-color: #606060;
--gantt-calendar-toolnumber-bg-color: #e8e8e8;
--gantt-calendar-compatible-bg-color: #d0d0d0;
// Deliver List
--deliver-list-late-color: #c41d1d;
--deliver-list-warn-color: #b3921a;
--deliver-list-deliver-color: #45a93e;
--toolsreturn-list-late-color: #c41d1d;
--toolsreturn-list-return-color: #45a93e
}
}
.editBackground
{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(1, 0, 0, 0.6);
}
.layer1
{
z-index: 1000;
}
.window
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
max-height: 100vh !important;
background: var(--window-title-bg-color);
border: var(--window-border);
border-radius: var(--window-border-radius);
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1FR auto;
>.title
{
grid-column: 1;
grid-row: 1;
text-align: center;
height: var(--window-title-height);
line-height: var(--window-title-height);
padding: 5px 10px 5px 10px;
border-radius: var(--window-border-radius);
color: var(--window-title-color);
background: var(--window-title-bg-color);
font-size: var(--window-title-font-size);
font-weight: var(--window-title-font-weight);
}
>.footer
{
grid-column: 1;
grid-row: 3;
height: var(--window-footer-height);
line-height: var(--window-footer-height);
text-align: right;
padding: 5px 10px 5px 10px;
border-radius: var(--window-border-radius);
color: var(--window-footer-color);
background: var(--window-footer-bg-color);
font-size: var(--window-footer-font-size);
font-weight: var(--window-footer-font-weight);
width: calc(100% - 20px);
}
>.content
{
grid-column: 1;
grid-row: 2;
height: auto;
padding: 10px 10px 10px 10px;
color: var(--window-content-color);
background: var(--window-content-bg-color);
overflow-y: auto;
}
}
.editLabel
{
font-size: 0.8rem;
font-weight: bold;
line-height: 1.5rem;
height: 1.5rem;
}
.editInput
{
color: var(--window-content-color);
font-size: 0.8rem;
font-weight: normal;
}
.editInput.fullWidth
{
width: calc(100% - 8px);
}
.dateInput:disabled
{
color: #999;
background-color: #e6e6e6;
}
.dateInput
{
color: var(--window-content-color);
font-size: 0.8rem;
font-weight: normal;
width: 100px;
text-align: center;
}
.editTextOutput
{
color: var(--window-content-color);
line-height: 1.5rem;
}
.editOutput
{
border: 0;
color: var(--window-content-color);
font-size: 0.8rem;
font-weight: normal;
background: transparent;
outline: none;
box-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.editOrder {
min-width: 800px;
height: calc(100vh - 10%) !important;
border: 1px solid #333;
> .content {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto 170px auto 1fr;
grid-gap: 10px;
overflow-y: auto;
font-size: 14px;
> .titleContent {
grid-column: 1/4;
grid-row: 1;
background: var(--window-title-bg-color);
padding: 5px 10px 5px 10px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
> .orderNumber {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
> .label {
grid-column: 1;
grid-row: 1;
}
> .value {
grid-column: 2;
grid-row: 1;
padding-left: 10px;
}
}
> .status {
grid-column: 2;
grid-row: 1;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
> .label {
grid-column: 1;
grid-row: 1;
}
> .value {
grid-column: 2;
grid-row: 1;
padding-left: 10px;
}
}
}
> .customerContent {
grid-column: 1;
grid-row: 2;
background: var(--window-title-bg-color);
padding: 5px 10px 5px 10px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto auto auto auto;
> .titleLabel {
grid-column: 1/3;
grid-row: 1;
text-align: center;
font-size: 16px;
}
> .nameLabel {
grid-column: 1;
grid-row: 2;
white-space: nowrap;
}
> .nameValue {
padding-left: 10px;
grid-column: 2;
grid-row: 2;
white-space: nowrap;
}
> .address1Label {
grid-column: 1;
grid-row: 3;
white-space: nowrap;
}
> .address1Value {
padding-left: 10px;
grid-column: 2;
grid-row: 3;
white-space: nowrap;
}
> .address2Label {
grid-column: 1;
grid-row: 4;
white-space: nowrap;
}
> .address2Value {
padding-left: 10px;
grid-column: 2;
grid-row: 4;
white-space: nowrap;
}
> .zipCityLabel {
grid-column: 1;
grid-row: 5;
white-space: nowrap;
}
> .zipCityValue {
padding-left: 10px;
grid-column: 2;
grid-row: 5;
white-space: nowrap;
}
> .countryLabel {
grid-column: 1;
grid-row: 6;
white-space: nowrap;
}
> .countryValue {
padding-left: 10px;
grid-column: 2;
grid-row: 6;
white-space: nowrap;
}
}
> .datesContent {
grid-column: 2;
grid-row: 2;
background: var(--window-title-bg-color);
padding: 5px 10px 5px 10px;
display: grid;
grid-template-columns: auto 0.5fr auto 0.5fr;
grid-template-rows: auto auto auto auto auto auto;
> .titleLabel {
grid-column: 1/5;
grid-row: 1;
text-align: center;
font-size: 16px;
}
> .rosdLabel {
grid-column: 1;
grid-row: 2;
}
> .rosdValue {
padding-left: 10px;
grid-column: 2;
grid-row: 2;
white-space: nowrap;
}
> .sosdLabel {
grid-column: 1;
grid-row: 3;
}
> .sosdValue {
padding-left: 10px;
grid-column: 2;
grid-row: 3;
white-space: nowrap;
}
> .aosdLabel {
grid-column: 1;
grid-row: 4;
}
> .aosdValue {
padding-left: 10px;
grid-column: 2;
grid-row: 4;
white-space: nowrap;
}
> .rshdLabel {
grid-column: 3;
grid-row: 2;
padding-left: 10px;
}
> .rshdValue {
padding-left: 10px;
grid-column: 4;
grid-row: 2;
white-space: nowrap;
}
> .sshdLabel {
grid-column: 3;
grid-row: 3;
padding-left: 10px;
}
> .sshdValue {
padding-left: 10px;
grid-column: 4;
grid-row: 3;
white-space: nowrap;
}
> .ashdLabel {
grid-column: 3;
grid-row: 4;
padding-left: 10px;
}
> .ashdValue {
padding-left: 10px;
grid-column: 4;
grid-row: 4;
white-space: nowrap;
}
> .atdsLabel {
grid-column: 1;
grid-row: 5;
padding-top: 5px;
}
> .atdsValue {
grid-column: 2;
grid-row: 5;
white-space: nowrap;
padding-left: 10px;
padding-top: 5px;
}
> .atdaLabel {
grid-column: 1;
grid-row: 6;
}
> .atdaValue {
grid-column: 2;
grid-row: 6;
white-space: nowrap;
padding-left: 10px;
}
> .ctdsLabel {
grid-column: 3;
grid-row: 5;
padding-left: 10px;
padding-top: 5px;
}
> .ctdsValue {
grid-column: 4;
grid-row: 5;
white-space: nowrap;
padding-left: 10px;
padding-top: 5px;
}
> .ctdaLabel {
grid-column: 3;
grid-row: 6;
padding-left: 10px;
}
> .ctdaValue {
padding-left: 10px;
grid-column: 4;
grid-row: 6;
white-space: nowrap;
}
}
> .systemContent {
grid-column: 3;
grid-row: 2/4;
background: var(--window-title-bg-color);
padding: 5px 10px 5px 10px;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
> .titleLabel {
grid-column: 1;
grid-row: 1;
text-align: center;
font-size: 16px;
}
> .content {
grid-column: 1;
grid-row: 2;
overflow-y: auto;
white-space: nowrap;
> .system {
white-space: nowrap;
padding-top: 5px;
>hr
{
color: #ddd;
}
> ul {
padding: 0;
margin: 0;
> li {
> .systemInfo {
font-size: 12px;
}
}
}
}
}
}
> .contactContent {
grid-column: 1/3;
grid-row: 3;
background: var(--window-title-bg-color);
padding: 5px 10px 15px 10px;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
max-height: 150px !important;
> .titleLabel {
grid-column: 1;
grid-row: 1;
text-align: center;
font-size: 16px;
}
>.table
{
grid-column: 1;
grid-row: 2;
}
}
> .communicationContent {
grid-column: 1/4;
grid-row: 4;
background: var(--window-title-bg-color);
padding: 5px 10px 15px 10px;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
> .titleLabel {
grid-column: 1;
grid-row: 1;
text-align: center;
font-size: 16px;
}
>.table
{
grid-column: 1;
grid-row: 2;
}
}
}
}
/* changes below */
.customerContent,
.datesContent,
.systemContent{
overflow:auto;
min-height:100px;
}
.contactContent{
overflow:auto;
}
.editOrder > .content> .contactContent {
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
align-self:flex-end;
min-height:125px;
max-height:none!important;
height:calc(100% - 20px);
display:flex;
flex-direction:column;
overflow:hidden;
overflow-y:auto;
}
.editOrder
> .content {
/*grid-template-rows:auto min-content 1fr auto;*/
grid-template-rows: 35px 10rem 1fr 1fr;
}
.editOrder
> .content
> .contactContent >.table {
max-height:250px;
}
.communicationContent{
max-height:250px!important;
min-height:125px;
}
#contactsTable{
height:100%!important;
width:100%;
/* overflow:auto;*/
}
.tabulator .tabulator-tableholder{
overflow:hidden;
overflow-y:auto;
}
#editOrderSystems{
padding-right:16px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.