/* ========= Sidebar: no-flash init when pinned (class set by script) === Applied before first paint so the sidebar renders at full width instantly. Removed immediately after JS applies .sidebar-pinned, restoring transitions. */ html._sbp .sidebar-nav { width: 260px; transition: none !important; } html._sbp .sidebar-nav .sidebar-nav__brand span { opacity: 1; transition: none !important; } html._sbp .sidebar-nav .sidebar-toggle-label { opacity: 1; transition: none !important; } html._sbp .sidebar-nav .sidebar-nav__toggle { color: #08acde; } html._sbp .sidebar-nav .sidebar-nav__label { opacity: 1; transition: none !important; } html._sbp .sidebar-nav .sidebar-nav__collapse-trigger::after { opacity: 1; transition: none !important; } html._sbp .sidebar-nav .sidebar-nav__logout .sidebar-nav__label { opacity: 1; transition: none !important; } html._sbp .sidebar-nav ~ .main-panel > .content { padding-left: calc(260px + 30px) !important; transition: none !important; } @media (max-width: 991.98px) { html._sbp .sidebar-nav ~ .main-panel > .content { padding-left: 30px !important; } } /* ======================================================================== */ /* ========= Sidebar Nav — flat navbar style, vertical orientation ========= */ .main-panel > .navbar { display: none !important; } .sidebar-nav { position: fixed; top: 0; left: 0; height: 100vh; width: 62px; background: #27293d; border-right: 2px solid #08acde; z-index: 1030; overflow: hidden; transition: width 0.3s ease; display: flex; flex-direction: column; font-family: "Poppins", sans-serif; } .sidebar-nav:hover, .sidebar-nav.sidebar-pinned { width: 260px; } .sidebar-nav__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .sidebar-nav__bottom { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 0; } .sidebar-nav__brand { display: flex; align-items: center; padding: 12px 14px; text-decoration: none; color: #fff; text-transform: uppercase; font-size: 1.125rem; font-weight: 400; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex: 0 0 auto; } .sidebar-nav__brand img { width: 30px; height: 30px; margin-right: 10px; flex-shrink: 0; } .sidebar-nav__brand span { opacity: 0; transition: opacity 0.2s ease 0.1s; } .sidebar-nav:hover .sidebar-nav__brand span, .sidebar-nav.sidebar-pinned .sidebar-nav__brand span { opacity: 1; } .sidebar-nav__toggle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 6px 14px; background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-size: 16px; flex: 0 0 auto; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-nav__toggle:hover { color: #fff; } .sidebar-nav__toggle .sidebar-toggle-label { opacity: 0; margin-left: 10px; font-size: 0.75rem; text-transform: uppercase; transition: opacity 0.2s ease 0.1s; white-space: nowrap; } .sidebar-nav:hover .sidebar-toggle-label, .sidebar-nav.sidebar-pinned .sidebar-toggle-label { opacity: 1; } .sidebar-nav.sidebar-pinned .sidebar-nav__toggle { color: #08acde; } .sidebar-nav__item { display: flex; align-items: center; padding: 8px 18px; color: rgba(255, 255, 255, 0.8); text-decoration: none; white-space: nowrap; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.15s ease, background 0.15s ease; } .sidebar-nav__item:visited, .sidebar-nav__item:active, .sidebar-nav__item:focus { color: rgba(255, 255, 255, 0.8) !important; background: none !important; } .sidebar-nav__item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); text-decoration: none; } .sidebar-nav__item.show:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; text-decoration: none; } .sidebar-nav__item:hover, .sidebar-nav__item.show:hover, .sidebar-nav__item.active:hover, .sidebar-nav__item[aria-expanded="true"]:hover, .sidebar-nav__item.collapsing:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; text-decoration: none; } .sidebar-nav__item i { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; margin-right: 12px; } .sidebar-nav__item .sidebar-nav__label { opacity: 0; transition: opacity 0.2s ease 0.1s; } .sidebar-nav:hover .sidebar-nav__label, .sidebar-nav.sidebar-pinned .sidebar-nav__label { opacity: 1; } .sidebar-nav__collapse-trigger { cursor: pointer; position: relative; } .sidebar-nav__collapse-trigger::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid rgba(255, 255, 255, 0.5); border-bottom: 1.5px solid rgba(255, 255, 255, 0.5); transform: rotate(-45deg); transition: transform 0.2s ease; position: absolute; right: 18px; top: 50%; margin-top: -4px; opacity: 0; } .sidebar-nav:hover .sidebar-nav__collapse-trigger::after, .sidebar-nav.sidebar-pinned .sidebar-nav__collapse-trigger::after { opacity: 1; } .sidebar-nav__collapse-trigger[aria-expanded="true"]::after { transform: rotate(45deg); margin-top: -6px; } .sidebar-nav__sub { padding-left: 0; list-style: none; margin: 0; } .sidebar-nav__sub .sidebar-nav__subitem { display: block; padding: 5px 18px 5px 56px; color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; text-transform: none; text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .sidebar-nav__sub .sidebar-nav__subitem:visited, .sidebar-nav__sub .sidebar-nav__subitem:active, .sidebar-nav__sub .sidebar-nav__subitem:focus { color: rgba(255, 255, 255, 0.6) !important; background: none !important; } .sidebar-nav__sub .sidebar-nav__subitem:hover { color: #fff; background: rgba(255, 255, 255, 0.06); text-decoration: none; } .sidebar-nav__sub .sidebar-nav__subheader { display: block; padding: 6px 18px 2px 56px; color: rgba(255, 255, 255, 0.4); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; } .sidebar-nav__sub .sidebar-nav__divider { border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 4px 56px 4px 56px; } .sidebar-nav__job-spinner { display: flex; align-items: center; justify-content: center; width: 26px; height: 20px; flex-shrink: 0; margin-right: 12px; } .sidebar-nav__job-spinner::after { content: ""; display: block; width: 20px; height: 20px; border: 2px solid #27293d; border-top-color: #08acde; border-top-color: #08acde; border-right-color: #08acde; border-bottom-color: #08acde; border-radius: 50%; animation: sidebar-spin 0.8s linear infinite; } @keyframes sidebar-spin { to { transform: rotate(360deg); } } .sidebar-nav__logout { display: flex; align-items: center; padding: 8px 18px; color: #08acde; text-decoration: none; white-space: nowrap; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; background: none; border: none; width: 100%; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .sidebar-nav__logout:hover { color: #fff; background: rgba(255, 255, 255, 0.06); text-decoration: none; } .sidebar-nav__logout i { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; margin-right: 12px; } .sidebar-nav__logout .sidebar-nav__label { opacity: 0; transition: opacity 0.2s ease 0.1s; } .sidebar-nav:hover .sidebar-nav__logout .sidebar-nav__label, .sidebar-nav.sidebar-pinned .sidebar-nav__logout .sidebar-nav__label { opacity: 1; } .main-panel > .content { padding-left: calc(62px + 30px) !important; padding-top: 15px !important; transition: padding-left 0.3s ease; } .sidebar-nav.sidebar-pinned ~ .main-panel > .content { padding-left: calc(260px + 30px) !important; } .sidebar-nav__mobile-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1070; background: #27293d; border: 1px solid #08acde; border-radius: 4px; color: #fff; font-size: 20px; padding: 6px 10px; cursor: pointer; line-height: 1; } @media (max-width: 991.98px) { .sidebar-nav { transform: translateX(-100%); transition: transform 0.3s ease, width 0.3s ease; width: 260px; } .sidebar-nav.sidebar-open { transform: translateX(0); } .sidebar-nav.sidebar-open .sidebar-nav__label, .sidebar-nav.sidebar-open .sidebar-nav__brand span, .sidebar-nav.sidebar-open .sidebar-toggle-label, .sidebar-nav.sidebar-open .sidebar-nav__collapse-trigger::after, .sidebar-nav.sidebar-open .sidebar-nav__logout .sidebar-nav__label { opacity: 1; } .sidebar-nav__mobile-toggle { display: block; } .main-panel > .content { padding-left: 30px !important; padding-top: 50px !important; } .sidebar-nav.sidebar-pinned ~ .main-panel > .content { padding-left: 30px !important; } .sidebar-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1055; } .sidebar-nav-backdrop.active { display: block; } } /* --- Settings field rows --- */ .settings-field-row { margin-bottom: 4px; } .settings-field-row .form-group { margin-bottom: 0; } .settings-field-row [class*="col-"] { padding-right: 0; } .settings-field-row .col-form-label { font-size: 0.875rem; padding-top: 0.4rem; padding-bottom: 0; } .settings-field-row .form-control:not([type="checkbox"]) { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: inherit; font-size: 0.875rem; padding-left: 8px; } .settings-field-row .form-control:not([type="checkbox"]):hover { border-color: rgba(255, 255, 255, 0.4); } .settings-field-row .form-control:not([type="checkbox"]):focus { border-color: #08acde; background-color: rgba(255, 255, 255, 0.1); } .settings-field-row .form-control[type="checkbox"] { width: auto; height: auto; background-color: transparent; border-color: transparent; padding: 0; margin-top: 0.55rem; display: block; } .settings-field-row.has-danger .form-control { border-color: #ff8d72; color: #ff8d72; } .settings-field-row.has-danger:after { color: #ff8d72; } .settings-field-unit { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); padding-top: 0.4rem; } /* --- Settings description column --- */ .settings-description-col { display: flex; flex-direction: column; } .settings-description-col hr.settings-section-hr { flex-shrink: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 0; margin-bottom: 10px; width: 100%; } .settings-description-col textarea { flex: 1 1 0; min-height: 100px; max-height: none; resize: none; background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: inherit; font-size: 0.875rem; padding-left: 8px; } .settings-description-col textarea:hover { border-color: rgba(255, 255, 255, 0.4); } .settings-description-col textarea:focus { border-color: #08acde; background-color: rgba(255, 255, 255, 0.1); outline: none; } .settings-section-hr { border-color: rgba(255, 255, 255, 0.15); margin-top: 6px; margin-bottom: 10px; } /* --- Settings name field --- */ .settings-name-icon { font-size: 1.1rem; } /* --- Settings layout --- */ .settings-row { column-gap: 15px; align-items: stretch; } #location-row { column-gap: 15px; margin-top: 20px; align-items: stretch; } .col-third { flex: 0 0 32%; } .col-third-wide { flex: 0 0 32.5%; } .col-two-thirds { flex: 0 0 65%; } .col-half { flex: 0 0 49%; } .settings-optimization-section { margin-top: 20px; } .settings-map-col { flex: 0 0 32%; display: flex; padding-top: 2.5rem; } #project-location-map { width: 100%; height: 97% !important; } /* --- Settings form errors --- */ #tab-settings .has-danger .form-control { border-color: #ff8d72; color: #ff8d72; } #tab-settings .has-danger:after { color: #ff8d72; } .form-control-feedback { color: #ff8d72; font-size: 0.875em; } .errorlist { padding-left: 11px; } #id_name_error.errorlist { margin-left: 25px; } /* --- General layout --- */ .nav-link { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 10px !important; padding-right: 10px !important; } .card { margin-bottom: 15px !important; } .tab-content.tab-space { padding-top: 15px !important; } .card-header { padding-top: 15px !important; } .card-body { padding-top: 0px !important; margin-top: -5px !important; margin-bottom: -10px !important; } #components-row, #environment-row { margin-top: 25px !important; } #inputs-row { margin-top: 18px !important; } #tab-settings .table input[type="checkbox"].form-control { width: auto; height: auto; display: inline-block; } /* --- Reusable row layout --- */ .gap-row { column-gap: 15px; } /* --- Dropdown --- */ .dropdown-inline { display: inline-block; } /* --- System schematic --- */ .system-schematic-img { padding: 10px 20px 20px; } /* --- Table header actions (input file / RES data) --- */ .table-header-actions { margin-right: 20%; } /* --- Summary hrules --- */ .hrule-pb { padding-bottom: 10px; } .hrule-mt { margin-top: 20px; } /* --- Overview items --- */ .overview-row { display: flex; margin-bottom: 0; } .overview-item-body { padding: 0; } .overview-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #08acde; margin-bottom: 10px; } .overview-icon-circle i { color: rgba(255, 255, 255, 0.7); font-size: 22px; } .overview-label { min-height: 30px; margin-bottom: 0; font-size: 0.9rem; line-height: 1.8rem; font-weight: 100; color: #ffffff; } .overview-value { font-weight: 300; color: #ffffff; margin-bottom: 10px; } .overview-value-p { margin-bottom: 0; font-size: 1.1rem; } .overview-help-icon { margin-top: -4px; font-size: 0.9rem; } /* --- Economics charts --- */ .economics-chart-row { column-gap: 12px; padding-right: 5px; padding-left: 15px; } .economics-chart-row .triple-plot.col-lg-4 { flex: 0 0 32.5%; } .economics-chart-row .triple-plot.col-lg-6 { flex: 0 0 49.1%; } .revenues-wrapper { margin-left: -15px; } /* --- Technical performance --- */ #efficiency-plot-container { max-height: 375px; } /* --- Sensitivity tab --- */ #tab-sensitivity .table td { border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sensitivity-label-td { width: 65%; } .sensitivity-value-td { width: 50%; } .sensitivity-badge { font-weight: normal; font-size: 1em; background-color: rgba(255, 255, 255, 0.1); color: inherit; } .sensitivity-alert-icon { margin-top: -3px; } /* --- Project detail card and tabs --- */ #project-detail-card, #component-detail-card { border-radius: 0 0 0.2857rem 0.2857rem; } #project-detail-tabs, #component-detail-tabs { border-bottom: none; padding: 0; margin-bottom: 0px; position: relative; z-index: 1; } #project-detail-tabs .nav-item > .nav-link, #component-detail-tabs .nav-item > .nav-link { border-radius: 8px 8px 0 0 !important; border-top: 2px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 2px solid transparent; padding: 6px 14px; margin-right: 2px; color: rgba(255, 255, 255, 0.7); background-color: transparent; transition: none; } #project-detail-tabs .nav-item > .nav-link:hover, #component-detail-tabs .nav-item > .nav-link:hover { border-top: 2px solid #08acde !important; border-left: 1px solid #08acde !important; border-right: 1px solid #08acde !important; border-bottom: 2px solid #27293d !important; color: rgba(255, 255, 255, 0.9); } #project-detail-tabs .nav-item > .nav-link.active, #component-detail-tabs .nav-item > .nav-link.active { border-radius: 8px 8px 0 0 !important; border-top: 2px solid transparent !important; border-left: 1px solid transparent !important; border-right: 1px solid transparent !important; border-bottom: 2px solid #27293d !important; color: #ffffff; background-color: #27293d; } #project-detail-tabs .nav-item > .nav-link.active i, #component-detail-tabs .nav-item > .nav-link.active i { color: #08acde; } .tab-icon { margin-right: 5px; } /* --- Confirm settings modal --- */ .confirm-settings-modal .modal-title { font-size: 25px; } .confirm-settings-modal .card { background-color: white; } .confirm-settings-modal .card-title { color: black; margin-bottom: 0; font-size: 20px; font-weight: 300; } .confirm-settings-modal .modal-body .col-md-4, .confirm-settings-modal .modal-body .col-md-9, .confirm-settings-modal .modal-body .col-md-3 { color: black; } .confirm-settings-modal .modal-body .row-header .col-md-4 { font-weight: bold; } .confirm-settings-modal .asset-values-row { border-bottom: 1px solid grey; margin-bottom: 15px; padding-bottom: 5px; } .confirm-settings-modal .force-hourly-label { color: #222a42; } #force-hourly-selector { color: #222a42; width: 80px; } .btn-primary { color: #fff !important; } /* --- Upload / preview modal (Inputs tab) --- */ /* Custom file input: style the Browse button for dark bg */ #uploadModal .custom-file-label { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } #uploadModal .custom-file-label::after { color: #fff; background-color: #08acde; border-color: #08acde; } /* Form selects inside modal */ #uploadModal select.form-control { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } /* Info box for upload instructions */ #uploadModal .info-box { background-color: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.15); padding: 15px; border-radius: 0.2857rem; margin-bottom: 20px; } #uploadModal .info-box code { color: #e14eca; } /* Upload modal action buttons */ #uploadModal .upload-modal-actions { margin-top: 30px; display: flex; justify-content: space-between; } /* Preview: help text section */ #uploadModal .load-preview-help-text { margin-top: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 15px; } /* Preview: RES download section */ #uploadModal .preview-res-section { border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 25px; } #uploadModal .preview-res-heading { margin-top: 20px; margin-bottom: 5px; font-size: 1rem; } /* Preview: action buttons layout */ #uploadModal .load-generator-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } /* Preview: reserve the full Plotly render height (600px, matching makeBasicPlotLayout / makeTimeSeriesLayout) on the chart target divs. This ensures the afterSwap height measurement already includes chart space so the animation targets the correct final height and Plotly rendering into those divs causes no visible jump. */ #uploadModal #modal-load-profile-plot, #uploadModal #modal-inputs-timeseries-plot { min-height: 600px; } #uploadModal .tab-content.tab-space { min-height: 400px; } /* Body-level upload spinner (hidden by default, shown via JS or hx-indicator) */ #upload-body-spinner { display: none; } #upload-body-spinner.htmx-request { display: block !important; } /* --- Main content blur when upload modal is open --- */ .main-panel > .content, .main-panel > nav, .main-panel > .footer, .sidebar-nav { transition: filter 0.2s ease; } .modal-open-blur .main-panel > .content, .modal-open-blur .main-panel > nav, .modal-open-blur .main-panel > .footer, .modal-open-blur .sidebar-nav { filter: blur(4px); } .modal-body .card-header { background-color: inherit; } /* transform removed: CSS transform on a modal ancestor creates a new stacking context that traps the Bootstrap backdrop behind modal content, preventing dismiss clicks. */ /* --- Component form field groups & formset sections --- */ .component-formset-section { margin-top: 1rem; margin-bottom: 1rem; } .component-formset-section [id$="-component-chart"], #wind-power-curve-chart { width: 100%; min-height: 250px; margin-bottom: 0.75rem; } .component-formset-section .formset-row-header { font-weight: 600; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; } .component-formset-section .formset-row-fields { margin-bottom: 4px; } .component-formset-section .formset-row-fields input.form-control { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: inherit; font-size: 0.875rem; padding-left: 8px; } #component-detail-card .settings-row { margin-top: 0; } #component-detail-card .settings-row + .settings-row { margin-top: 20px; } #component-output-plot-container { margin-top: 2rem; } /* --- Shared list table styles --- */ .list-search { max-width: 300px; } .list-table { table-layout: fixed; } .list-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-table td:last-child { overflow: visible; text-overflow: clip; white-space: normal; } .list-table th.sortable { cursor: pointer; user-select: none; } .list-table th.sortable:hover { color: inherit; } .list-table .sort-icon { font-size: 0.65rem; margin-left: 4px; opacity: 0.5; transition: opacity 0.15s ease; } .list-table th.sortable:hover .sort-icon { opacity: 1; } .list-table tr.filtered-out { display: none; } .list-table tbody tr { cursor: pointer; } .list-table td a { color: #fff; } .list-table tbody tr:hover { background: rgba(8, 172, 222, 0.15); } .list-table .component-btn { padding: 0.15rem 0.35rem; font-size: 0.85rem; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); background: transparent; cursor: default; } .list-table .component-btn:hover { background: rgba(255, 255, 255, 0.1); } .no-results-message { text-align: center; color: rgba(255, 255, 255, 0.5); padding: 2rem 0; font-size: 0.95rem; } .component-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; } /* --- Project list table (column widths) --- */ .project-search { max-width: 300px; } .project-table-wrapper { } .project-table th:nth-child(1) { width: auto; } .project-table th:nth-child(2) { width: 10rem; } .project-table th:nth-child(3) { width: 120px; } .project-table th:nth-child(4) { width: 120px; } .project-table th:nth-child(5) { width: 110px; } .project-table th:nth-child(6) { width: 120px; } .project-table-wrapper .tooltip .tooltip-inner { text-align: center; min-width: 0; } /* --- Component list table (column widths) --- */ .component-search { max-width: 300px; } #subclass-filter { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; } #subclass-filter .btn { flex: 0 0 auto; white-space: nowrap; } .dropdown-menu .dropdown-item .bi { vertical-align: middle; position: relative; top: -2px; } /* Tweak this value to control when filter labels hide (icon-only mode) */ @media (max-width: 1199px) { #subclass-filter .filter-label { display: none; } #subclass-filter .btn { width: 60px; } } .component-table-wrapper { } .component-table th:nth-child(1) { width: auto; } .component-table th:nth-child(2) { width: 140px; } .component-table th:nth-child(3) { width: 110px; } .component-table th:nth-child(4) { width: 130px; } .component-table th:nth-child(5) { width: 130px; } .component-table th:nth-child(6) { width: 120px; } .component-table-wrapper .tooltip .tooltip-inner { text-align: center; min-width: 0; } .component-table-editable td > i.bi { font-size: 2rem; } .table.component-table-editable td:first-of-type { width: 1%; white-space: nowrap; padding: 0 4px; } .table.component-table-editable td:nth-of-type(2) { width: 20%; } #selected-components-table { table-layout: fixed; } #selected-components-table th:first-of-type { width: 2rem; white-space: nowrap; padding: 0 4px; } #selected-components-table th:last-of-type, #selected-components-table td:last-of-type { width: 3.5rem; text-align: center; } .modal-backdrop.show { backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.5); opacity: 1; } .asset-remove-td button { width: 0.75rem; } .add-component-dropdown { margin: -1.75rem 0 1.25rem; text-align: center; } .component-table-add-mode .already-added-badge { font-size: 0.75rem; } .add-component-modal .modal-content { background-color: #ffffff; color: #222a42; } .add-component-modal .modal-title, .add-component-modal label, .add-component-modal .close { color: #222a42; } .add-component-modal .form-control { background-color: #ffffff; border: 1px solid #ced4da; color: #222a42; } .add-component-modal .form-control:focus { background-color: #ffffff; border-color: #08acde; box-shadow: 0 0 0 0.2rem rgba(8, 172, 222, 0.25); color: #222a42; } .add-component-modal .form-control::placeholder { color: #6c757d; } /* --- Unit Capacity & Capacity Figures (detail page) --- */ .capacity-figure { display: block; color: #9a9a9a; font-size: 0.72rem; white-space: nowrap; } .min-max-uc-row td { padding-top: 0.25rem; padding-bottom: 0.5rem; border-top: none; } .unit-capacity-input { max-width: 7rem; } .unit-capacity-unit { color: #9a9a9a; font-size: 0.85rem; white-space: nowrap; } /* --- Add-component modal (create project B wizard) --- */ /* qsystem.css has two coupled rules that cancel for small modals but push large ones off-screen: .modal.show .modal-dialog { transform: translate(0, 30%) } .modal-content { margin-top: -50% } ← % of *width*, not height Both are neutralised here. The modal-body gets its own scroll so the dialog never needs to grow taller than the viewport. */ #addComponentModal .modal-dialog { transform: none !important; transition: none !important; margin-top: 1.75rem; } #addComponentModal .modal-content { margin-top: 0 !important; } #addComponentModal .modal-body { overflow-y: auto; max-height: calc(100vh - 120px); }