/*#################UPLOAD-START#########################*/ .ajax-file-upload-statusbar { border: 1px solid #dedede; margin: 5px 0px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px; } .ajax-file-upload-filename { height: auto; margin: 0 5px 5px 0px; } .ajax-file-upload-filesize { width: 50px; height: auto; margin: 0 5px 5px 0px; display: inline-block; vertical-align:middle; } .ajax-file-upload-progress { margin: 5px 10px 5px 0px; position: relative; width: 250px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; display: inline-block; color:#FFFFFF; } .ajax-file-upload-bar { background-color: #dedede; width: 0; height: 20px; border-radius: 3px; color:#FFFFFF; } .ajax-file-upload-percent { position: absolute; display: inline-block; top: 3px; left: 48% } .ajax-file-upload-red { -moz-box-shadow: inset 0 39px 0 -24px #e67a73; -webkit-box-shadow: inset 0 39px 0 -24px #e67a73; box-shadow: inset 0 39px 0 -24px #e67a73; background-color: #e4685d; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; display: inline-block; color: #fff; font-family: arial; font-size: 13px; font-weight: normal; padding: 4px 15px; text-decoration: none; text-shadow: 0 1px 0 #b23e35; cursor: pointer; vertical-align: top; margin: 5px 10px 5px 0px; } .ajax-file-upload-green { background-color: #77b55a; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0; padding: 0; display: inline-block; color: #fff; font-family: arial; font-size: 13px; font-weight: normal; padding: 4px 15px; text-decoration: none; cursor: pointer; text-shadow: 0 1px 0 #5b8a3c; vertical-align: top; margin: 5px 10px 5px 0px; } .ajax-file-upload { cursor:pointer; display: inline-block; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 6px 10px 4px 10px; color: #fff; background: #2f8ab9; border: none; vertical-align: middle; } .ajax-upload-dragdrop{ text-align:left; vertical-align:middle; } .ajax-upload-dragdrop span b {padding-left:10px;} .state-hover{ border:2px solid #A5A5C7; } /*#################UPLOAD-END#########################*/ .bootstrap-select .dropdown-menu li small { display: block; white-space: normal; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background: #777; border: 1px solid #dad55e; } input[type="search"]:focus { background:none; background-color:#ffffff; } input[type="search"] { background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; background-position:right; } .cursor-pointer tbody tr {cursor:pointer;} table.table-bordered.dataTable {padding-top:10px;} div.dataTables_wrapper div.dataTables_info, .dataTables_wrapper .dataTables_length {float: left;} div.dt-buttons {float: left;margin-right: 10px;} .nav-link-sm {padding:3px 7px;} .btn.dropdown-toggle.btn-light{border-color: #dee2e6;background-color: #FFF;} .ui-datepicker {z-index: 2051 !important;} .ui-datepicker .ui-state-highlight {color:#FFF;} .dt-buttons .btn-secondary{} .info-label, .light {white-space: nowrap;} @media screen and (max-width: 767px) { .form-signin {max-width: 100%!important;} div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { text-align: center; width: 100%; margin-bottom: 5px; float: none; } } .widget-content table.dataTable{margin-top:0px!important;margin-bottom:0px!important;padding-top:0px!important;} /* Global HubDix Modal Action Standardization (docs/reviews/global-modal-action-standardization.md, structurally revised in docs/reviews/modal-actions-scroll-footer-bugfix.md). Canonical modal-wide action bar for every Bootstrap modal footer in the app: left = navigation/neutral actions (Schließen/Zurück/Abbrechen), right = state-changing/decision actions (Speichern/Genehmigen/Ablehnen/Löschen/ ...), primary action always rightmost. Geometry (Footer Width Regression Fix, see the review doc "Footer width regression fix"): NO horizontal negative margins and NO width/calc() compensation - a block-level element already fills its parent's content width by default. Horizontal padding matches the modal's own standard spacing (1rem, the same --bs-modal-padding used by .modal-body/ .modal-header) so the row is never wider than - and its buttons never touch the edge of - modal-content. Never a viewport-relative (100vw) or negative-margin-driven "full bleed" trick. Scroll/footer structure (Modal Actions Scroll/Footer Bugfix): this class is no longer made to *look* like a footer via `position:sticky` while physically remaining a child of the scrolled `.modal-body` - a real screenshot showed table rows/pagination visible behind it on a long DataTable, because a floated DataTables toolbar child could leave `.dataTables_wrapper`'s own auto-height short of its true rendered content in some row-count/viewport combinations, and the sticky element would then simply paint over whatever the scroll position put there. `hdxSetModalBodyHtml()` (system/js/javascript.js) now physically relocates a fragment's `.hdx-modal-actions` out of `.modal-body` to a sibling position inside `.modal-content`, immediately after `.modal-body` - i.e. exactly where Bootstrap's own `.modal-footer` would sit in `.modal-content`'s `display:flex;flex-direction:column` layout. No `position:sticky`/`fixed`/`absolute` is needed there at all: a normal flex-column sibling below a `flex:1 1 auto;overflow-y:auto` `.modal-body` can never overlap it, by construction - `flex-shrink:0` only guarantees this footer never gets visually squeezed if the body content is tall. No second parallel sticky implementation, no global .modal-footer/.btn-group override - a modal fragment with no `.hdx-modal-actions` at all, or a target with no `.modal-content` ancestor (e.g. the Project Workspace page's own section container), is unaffected by the relocation. */ .hdx-modal-actions { flex-shrink: 0; padding: .75rem 1rem; background: var(--bs-card-bg); border-top: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .hdx-modal-actions-left, .hdx-modal-actions-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hdx-modal-actions-right { margin-left: auto; } /* Unified HubDix tab panel look (Post-Approval UX Polish Pass "Unified Tabs"). Bootstrap nav-tabs is already the project's one and only tab mechanism (Maintenance/Inspections/Contracts/Hotels/Defects all already use it - the single project-wide jQuery UI .tabs() usage on users/infoaccordion.tpl's #usertabs is a separate, unrelated legacy widget, out of scope here and left untouched); no second tab library was introduced. Before this pass, some pages copy-pasted the "bg-body-tertiary + border + rounded panel" utility-class recipe Maintenance/Contracts already used inline (e.g. maintenance/edit.tpl), while others (Approvals index/limits, the Approval detail modal) had no panel styling at all - a plain