<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>
      </div>
      <div class="contactContent">
        <label class="titleLabel editLabel">Contacts</label>
        <div id="contactsTable" class="table"></div>
      </div>
      <dic class="communicationContent">
        <label class="titleLabel editLabel">Communication</label>
        <div id="communicationTable" class="table"></div>
      </dic>
    </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;
  overflow:auto;
  align-self:flex-end;
  min-height:100px;
  max-height:250px;
}
.editOrder
> .content {
  grid-template-rows:auto min-content 1fr auto;
}

.editOrder
> .content
> .contactContent >.table {
   max-height:250px;
}
.communicationContent{
  max-height:250px!important;
}
#contactsTable{
  height:auto!important;
  width:100%;
}
function createOfflineTable(
  element,
  data,
  height,
  maxHeight,
  selectAble = false,
  columns,
  settingsName = null,
  pagination = false,
  sort = null
) {
  return new Tabulator(element, {
    data: data,
    maxHeight: maxHeight,
    height: height,
    movableColumns: true,
    layout: "fitColumns",
    columns: columns,
    initialSort: sort
  });
}


let data = {
  systems: [
    {
      name: "Test1",
      systemId: "SystemID",
      serialNumber: "SerialNumber",
      psiCode: "UTG033",
      psiDescription: "DontKnow01"
    },
    {
      name: "Test2",
      systemId: "SystemID",
      serialNumber: "SerialNumber",
      psiCode: "UTG033",
      psiDescription: "DontKnow01"
    },
    {
      name: "Test3",
      systemId: "SystemID",
      serialNumber: "SerialNumber",
      psiCode: "UTG033",
      psiDescription: "DontKnow01"
    },
    {
      name: "Test4",
      systemId: "SystemID",
      serialNumber: "SerialNumber",
      psiCode: "UTG033",
      psiDescription: "DontKnow01"
    }
  ]
};

let firstOne = true;
for (const system of data.systems) {
  const sys = document.createElement("div");
  sys.classList.add("system");
  let html = "";
  if (!firstOne) html += "<hr>";
  firstOne = false;
  html += `<ul><li>` + system.name + `</br>`;
  html += `<span class = "systemInfo">`;
  html += `SystemId: `;
  if (system.systemId) html += system.systemId;
  else html += " N/A";
  html += `</br>SerialNumber: `;
  if (system.serialNumber) html += system.serialNumber;
  else html += "N/A";
  html += `</br>PSI Code: `;
  if (system.psiCode) html += system.psiCode;
  else html += "N/A";
  html += `</br>PSI Description: `;
  if (system.psiDescription) html += system.psiDescription;
  else html += "N/A";
  html += `</span></li></ul>`;

  sys.innerHTML = html;
  document.getElementById("editOrderSystems").appendChild(sys);
}

data.contacts = 
[
  {
    type: "Project Manager",
    sso: "12345679",
    name: "Tod Miller",
    email: "tod.miller@dontknow.com"
  }
]  

const contactsTable = createOfflineTable(
  "#contactsTable",
  data.contacts,
  "100%",
  "100%",
  false,
  [
    {
      title: "Type",
      field: "type",
      resizable: false,
      headerSort: false
    },
    {
      title: "SSO",
      field: "sso",
      resizable: false,
      headerSort: false
    },
    {
      title: "Name",
      field: "name",
      resizable: false,
      headerSort: false
    },
    {
      title: "Email",
      field: "email",
      resizable: false,
      headerSort: false
    }
  ],
  "edit_order_contacts",
  false
);

data.emails = 
  [
  {
    action: "Email Send",
    date: "21. Feb. 2024",
    by: "Do not know",
    from : "Do not know either",
    to: "This is not important"
  }
]

        const communicationTable = createOfflineTable("#communicationTable", data.emails, "100%", "100%",true,
            [
                {
                    title: "Action",
                    field: "action",
                    resizable: false,
                    headerSort: false
                },
                {
                    title: "Date",
                    vertAlign: "top",
                    field: "sendDate",
                    resizable: false,
                    width: "95",
                    sorter: "string"
                },
                {
                    title: "By",
                    field: "by",
                    resizable: false,
                    headerSort: false
                },
                {
                    title: "From",
                    field: "sentFrom",
                    resizable: false,
                    headerSort: false
                },
                {
                    title: "To",
                    field: "to",
                    resizable: false,
                    headerSort: false
                }
            ]
        )
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.6.1/js/tabulator.min.js