/* custome css Start */ /* new root */ :root { --Black: #000000; --White: #ffffff; --BlackOlive: #3b3c3c; --AliceBlue: #f1f4ff; --NewGreen: #50ac81; --NewRed: #fb6f7d; --EvaGreen: #39f6a3; --Red: #eb041a; --Green: #119f5c; --LinkColor: #08a3e9; /* --ThemeColor: #102040; --ThemeColorTwo: #0a0737; */ --ThemeColor: #102040; --ThemeColorTwo: #0B1730; --ThemeColorThree: #6e59a6; --ThemeColorFour: #a189db; --ThemeColorFive: #dadde2; /* --ThemeFont: "Montserrat", sans-serif; */ --ThemeFont: "Outfit", sans-serif; --ThemeFontTwo: "Poppins", sans-serif; --CardShadow: 0px 4px 11px rgba(217, 216, 216, 0.6); --Radius: 8px; --VineGray: #f4f4f4; --Vine: linear-gradient(to bottom, #02ad82, #001510); /* --Vine: linear-gradient(to bottom, #2c3e50, #3498db); */ --WarningText: #ff6807; --InfoText: #08a3e9; --InfoBackground: #08a3e91a; --InfoBackgroundTwo: #0dcaf0; } /* z-index classes start */ .z_n1 { z-index: -1; } .z_0 { z-index: 0; } .z_1 { z-index: 1; } .z_2 { z-index: 2; } .z_3 { z-index: 3; } .z_4 { z-index: 4; } .z_max { z-index: 1040; } /* z-index classes End */ /* font weight class start */ .fw-bold { font-weight: bold; } .fw-semibold { font-weight: 700; } .fw-medium { font-weight: 500; } .fw-normal { font-weight: 400; } /* font weight class End */ /* cursor pointer */ .cursor_pointer { cursor: pointer; } /* cursor pointer */ /* color css start */ .bg_AliceBlue { background: var(--AliceBlue) !important; } .bg_VineGray { background: var(--VineGray) !important; } .bg_Vine { background: var(--Vine) !important; } .text_AliceBlue { color: var(--AliceBlue) !important; } .text_danger { color: var(--Red) !important; } .text_success { color: var(--Green) !important; } .text_primary { color: var(--ThemeColor) !important; } /* no shadow */ .shadow_0 { box-shadow: none !important; } /* line clamp css start */ .lc_1 { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .lc_2 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lc_3 { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* line clamp css End */ body{font-family: var(--ThemeFont) !important;} /* nav slider css start */ .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link, .sidebar-wrapper .sidebar-menu > .nav-item:hover > .nav-link, .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus, .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover), .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav.nav-treeview > .nav-item:hover, .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav.nav-treeview > .nav-item:hover > .nav-link, .sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav.nav-treeview > .nav-item:hover > .nav-link:focus { color: var(--ThemeColor); border-radius: 10px; } .sidebar-wrapper a, .sidebar-wrapper .nav-treeview > .nav-item > a.nav-link {color: var(--BlackOlive);} .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover, .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus { color: var(--ThemeColor); background: #dfe6ff; } /* nav slider css end */ /* css for logo (backend) */ .sidebar-brand .brand-link .brand-image { width: 100px; height: 55px; } /* css for logo (backend) */ /* css for table start */ .maxH_500 {max-height: 75vh;} .cust_dt tbody tr td span.td_description {display: -webkit-box !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .cust_dt tbody tr td {max-width: 300px; padding: 0.6rem 1.5rem !important;} @media (max-width: 1440px) { td[data-label="select2"], th[data-label="select2"]{width: 200px;} td[data-label="action"], th[data-label="action"]{width: 125px;} } @media (max-width: 991px) { .cust_dt tbody tr td {min-width: 150px;} } @media (max-width: 576px) { /* Keep length/search labels readable — font-size:0 caused uneven mobile toolbars. */ .dataTables_filter label, .dataTables_length label { font-size: var(--tk-fs-sm, 0.875rem); } .dataTables_filter label input, .dataTables_length label input { font-size: 14px; } .cust_dt tbody tr td span.td_description {min-width: 150px;} .cust_dt tbody tr td {min-width: 120px;} div.dataTables_wrapper div.dataTables_filter input{margin: 0;} } /* table css End */ /* table css start */ table tr td {vertical-align: middle; font-size: 14px !important;} table tr th { font-size: 12px !important; font-weight: 600 !important; color: #9b9b9b !important; min-width: 80px;} .cust_dt table tr th { padding: 0.6rem 1.5rem !important; } table tr td h6 { font-size: 14px !important;} thead.table-dark th {color: #fff !important;} #comparePricesTable table tr th:first-child{min-width: 90px;} /* table css start */ @media (max-width: 1450px) { .maxH_500{overflow-x: scroll;} } /* custom primary button start */ .btn_primary { background: var(--ThemeColor); border: 1px var(--ThemeColor); --bs-btn-bg: var(--ThemeColor); --bs-btn-border-color: var(--ThemeColor); --bs-btn-hover-bg: var(--ThemeColorTwo); --bs-btn-hover-border-color: var(--ThemeColorTwo); --bs-btn-active-bg: var(--ThemeColorTwo); --bs-btn-active-border-color: var(--ThemeColorTwo); } .btn_primary:hover { background: var(--ThemeColorTwo) !important; border: 1px var(--ThemeColor) !important; } .btn_primary:disabled { background: var(--ThemeColor); border: 1px var(--ThemeColor); } .text_bg_primary { background: var(--ThemeColor); border: 1px var(--ThemeColor); color: #ffff; } .custom_border{ border:1px solid var(--ThemeColor); } .custom_border:hover{ border:1px solid var(--ThemeColor); } /* .custom_link{ color: var(--EvaGreen); } */ .card.card_outline { border-top: 3px solid var(--ThemeColor); } .btn_outline_primary{ border: 1px solid var(--ThemeColor) !important; color: var(--ThemeColor) !important; /* Same fix as .btn_primary above: without these, a click dropped the hover fill back to transparent and the button flashed white. */ --bs-btn-bg: transparent; --bs-btn-border-color: var(--ThemeColor); --bs-btn-hover-bg: var(--ThemeColor); --bs-btn-hover-border-color: var(--ThemeColor); --bs-btn-active-bg: var(--ThemeColor); --bs-btn-active-border-color: var(--ThemeColor); } /* :active as well as :hover — the colour above is !important, so a pressed button would otherwise be theme-coloured text on the theme-coloured fill. */ .btn_outline_primary:hover, .btn_outline_primary:active{ background-color: var(--ThemeColor); color:white !important; } .badge_success { color: #0f5132; background-color: #d1e7dd; border: 1px solid #a3cfbb; } .badge_warning { color: #664d03; background-color: #fff3cd; border: 1px solid #ffeeba; } .badge_danger { color: var(--Red) !important; background-color: #f8d7da; border: 1px solid #f5c2c7; } .badge_secondary { color: #383d41; background-color: #e2e3e5; border: 1px solid #d6d8db; } .custom_link { color: var(--ThemeColor); } .disabled-link { pointer-events: none; opacity: 0.5; } /* custom primary button end */ .mb-12px { margin-bottom: 12px; } input.parsley-success, select.parsley-success, textarea.parsley-success { color: var(--bs-body-color) !important; background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); } /** * Corner Ribbon Component */ .corner-ribbon { position: absolute; top: -3px; left: -3px; height: 5.5em; width: 5.5em; padding: 8px; .cr-inner { position: absolute; inset: 0; background: var(--Green); color: white; border-radius: 16px 8px 0 8px; clip-path: polygon(0 0, 100% 0, 0 100%); } .cr-text { display: block; font-weight: bold; font-size: .8em; line-height: 1.3; transform: rotate(-45deg) translateY(.1em) translateX(-1.8em); strong { display: block; font-weight: normal; text-transform: uppercase; } } } .ck-editor__editable_inline{ min-height:480px; max-height:480px; overflow:auto; } .dropzone { border: 2px dashed rgba(0, 0, 0, 0.3) !important; border-radius: 8px; } .dz-progress { display: none !important; } /* for remove icon */ .dz-remove { position: absolute; top: -5px; right: -5px; color: var(--bs-white); background: var(--Red); border-radius: 50%; font-size: 22px !important; font-weight: bold; line-height: 1; text-align: center; cursor: pointer; z-index: 10; box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); transition: all 0.2s ease-in-out; } /* .dz-remove:hover { background: var(--bs-danger); color: #fff; transform: scale(1.1); } */ .dz-preview .dz-image img { width: 100% !important; height: 100% !important; } .dz-preview { position: relative; } .dz-message{ width: 100%; text-align: center; } .dropzone .dz-preview .dz-remove { z-index: 999; /*cursor: pointer !important;*/ } .dropzone-cursor-default .dropzone.dz-clickable { cursor: default !important; } .dz-image a.glightbox img { cursor: pointer; } .dropzone.dz-clickable .dz-preview .dz-remove, .dropzone.dz-clickable .dz-preview .dz-remove i { cursor: pointer !important; } .dz-preview:hover img { filter: none !important; opacity: 1 !important; transform: none !important; } .dz-details { display: none; } /* For all browsers (Chrome, Safari, Edge, Firefox) */ .input-number-appearance-none { -webkit-appearance: none; /* Chrome, Safari, Edge */ appearance: none; /* Standard */ -moz-appearance: textfield; /* Firefox */ } .input-number-appearance-none::-webkit-inner-spin-button, .input-number-appearance-none::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Spinner — theme navy, true center (listings + estimation + modals) */ #spinner-loader-container, .spinner-loader-container { position: fixed; inset: 0; z-index: 1075; display: none; background-color: rgba(13, 26, 41, 0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Center in the main column only when a real sidebar is present (estimation layout uses sidebar-expand-lg without a rail — do not offset there). */ body.sidebar-expand-lg:not(.sidebar-collapse):has(.app-sidebar) #spinner-loader-container, body.sidebar-expand-lg:not(.sidebar-collapse):has(.app-sidebar) .spinner-loader-container { left: var(--lte-sidebar-width, 284px); width: auto; } body.sidebar-expand-lg.sidebar-collapse:has(.app-sidebar) #spinner-loader-container, body.sidebar-expand-lg.sidebar-collapse:has(.app-sidebar) .spinner-loader-container { left: var(--lte-sidebar-narrow-width, 4.5rem); width: auto; } /* Theme color for page / listing spinners (button spinners keep their own color). */ .spinner-border { --bs-spinner-width: 3.25rem; --bs-spinner-height: 3.25rem; width: 3.25rem; height: 3.25rem; color: var(--tk-primary, var(--ThemeColor, #102040)) !important; border-color: currentColor !important; border-right-color: transparent !important; } .spinner-border-sm { --bs-spinner-width: 1rem; --bs-spinner-height: 1rem; width: 1rem; height: 1rem; color: var(--tk-primary, var(--ThemeColor, #102040)) !important; border-color: currentColor !important; border-right-color: transparent !important; } .btn-primary .spinner-border, .btn_primary .spinner-border, .draw-btn-primary .spinner-border, .btnSaveDraw .spinner-border, .spinner-border.text-white, .spinner-border.text-light { color: #fff !important; border-color: currentColor !important; border-right-color: transparent !important; } /* Center without transform so the Bootstrap spin keyframes keep working. */ #spinner-loader-container .spinner-loader, .spinner-loader-container .spinner-loader, #spinner-loader-container .spinner-border, .spinner-loader-container .spinner-border { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 3.25rem !important; height: 3.25rem !important; margin: auto !important; font-size: 1rem; color: var(--tk-primary, var(--ThemeColor, #102040)) !important; border-color: currentColor !important; border-right-color: transparent !important; border-width: 0.32em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #spinner-loader-container .spinner-border .sr-only, #spinner-loader-container .spinner-border .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Spinner css customisation */ .truncate-one-line { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .truncate-two-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 200px; } .navbar_active{ font-weight: bolder; } .brand-image { max-height: 50px !important; height: auto !important; width: auto !important; object-fit: cover !important; } .ui-w-80 { width: 80px !important; height: auto; } .custom_size{ font-size: 14px; } .gslide-media.gslide-image { transform: none !important; display: flex !important; justify-content: center !important; align-items: center !important; } .gslide-media.gslide-image img { transform-origin: center center !important; } .preview-image { cursor: zoom-in; } .card-img-top.preview-image.custom-preview { max-width: 100%; /* don’t let it overflow card width */ max-height: min(calc(55vh - 20px), 330px); /* limit height */ height: auto; /* keep aspect ratio */ width: auto; /* let browser scale naturally */ object-fit: contain; /* ensures no distortion, fits inside box */ display: block; margin: 0 auto; } .mw-20 { min-width: 20% !important; } .w-90 { width: 90% !important; } .bottom-2px { bottom: 2px !important; } .bottom-3px { bottom: 3px !important; } .left-10px { left: 10px !important; } .img_div_fixed{ position: sticky; width: 100%; top: -16px; z-index: 99; background: #fff; padding: 5px; border-radius:10px; border-top-left-radius:0px ; border-top-right-radius: 0px } /*.img_div_fixed img{ max-width:45vw !important }*/ /*.cust_owl_slider{max-height: 36vh; overflow: hidden;}*/ /*.cust_owl_slider img {height: 300px !important}*/ .owl-carousel { position: relative; } .cust_owl_slider .owl-prev, .cust_owl_slider .owl-next { position: absolute; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 1rem !important; font-weight: 400; line-height: 0 !important; color: #1f2a3d !important; background-color: rgba(255, 255, 255, 0.95) !important; border: 1px solid #d7dbe3 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(16, 32, 64, 0.12); z-index: 20; } .cust_owl_slider .owl-prev span, .cust_owl_slider .owl-next span, .cust_owl_slider .owl-prev i, .cust_owl_slider .owl-next i { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 1.125rem !important; font-style: normal; font-weight: 700; } .cust_owl_slider .owl-dots{ display:none !important } .cust_owl_slider .owl-prev:hover, .cust_owl_slider .owl-next:hover { color: var(--ThemeColor, #102040) !important; background-color: #ffffff !important; border-color: var(--ThemeColor, #102040) !important; } .cust_owl_slider .owl-prev { left: 10px !important; } .cust_owl_slider .owl-next { right: 10px !important; } .overflow_200{ max-height: 215px; overflow: auto; } /* Default cursor for carousel zoomable images */ .plan-container .owl-carousel .preview-image, .plan-container .preview-image { cursor: grab !important; } /* While actively dragging */ .plan-container .owl-carousel .preview-image:active { cursor: grabbing !important; } .readonly-input { cursor: not-allowed; pointer-events: none; opacity: 0.94; background-color: #f8f9fa !important; } .readonly-input:hover{ cursor: not-allowed; } .readonly-radio { cursor: not-allowed; pointer-events: none; opacity: 0.94; } .page-link.active, .active > .page-link { background-color: var(--ThemeColor); border-color: var(--ThemeColor); color: var(--bs-pagination-hover-bg); } .page-item.active .page-link:hover { color: var(--bs-pagination-hover-bg); } .page-link, .page-link:hover { color: var(--ThemeColor); } .page-link:focus { /*box-shadow: var(--bs-pagination-focus-box-shadow);*/ box-shadow: 0 0 0 0.25rem rgb(7 2 71 / 29%); } .estimation-form .estimate-table th{ min-width: 150px; width: 150px; } .estimation-form .estimate-table th:first-child{ min-width: 220px; width: 220px; } .estimation-form .estimate-table .mw-20 { min-width: 20% !important; width: 23% !important; } .estimation-form .estimate-table .mw-48 { min-width: 45% !important; width: 48% !important; } .list-group-item.active { background-color: var(--ThemeColor); border-color: var(--ThemeColor); } .external-link-btn { content: ""; width: 14px; height: 14px; background-image: url("/assets/theme/img/open-external-link.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; } .external-link-btn:hover { color: var(--bs-btn-close-color); text-decoration: none; opacity: var(--bs-btn-close-hover-opacity); } /* select2 css Start */ .max_select_div .select2-container .select2-selection--single{max-width: 150px;} /* select2 css Start */ /* DataTables processing bars — same theme navy as the page spinner */ div.dataTables_processing > div:last-child > div, div.dt-processing > div:last-child > div { background: var(--tk-primary, var(--ThemeColor, #102040)) !important; } div.dataTables_processing, div.dt-processing { top: 50% !important; left: 50% !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 20; } .form-check-input:checked { background-color: var(--tk-primary, var(--ThemeColor, #102040)) !important; border-color: var(--tk-primary, var(--ThemeColor, #102040)) !important; } .form-check-input:focus { border-color: var(--tk-primary, var(--ThemeColor, #102040)) !important; box-shadow: 0 0 0 0.15rem rgba(16, 32, 64, 0.18) !important; } .form-check-input{ cursor: pointer; } body:not(:has(.pw-header)) input:disabled.form-check-input:checked { background-color: #999 !important; border-color: #999 !important; } .link-info {color:var(--ThemeColor) !important;} table.dataTable { width: 100% !important; } .badge .parsley-errors-list { font-size: 0.75rem; line-height: 1.4; font-weight: 500; } .estimation-form .estimate-table .parsley-errors-list { margin-top: 0 !important; } .estimation-form .estimate-table input.parsley-error, select.parsley-error, textarea.parsley-error { color: var(--bs-body-color); background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); } /*.estimation-form .estimate-table { Highlight Select2 when Parsley adds validation error select.parsley-error + .select2 .select2-selection { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; } Optional: on hover/focus keep the error color select.parsley-error + .select2 .select2-selection:focus, select.parsley-error + .select2 .select2-selection:hover { border: 1px solid #EED3D7; background-color: #F2DEDE; } }*/ .register_btn, #submit_login_info, .send_reset_link { transition: transform 0.2s ease, box-shadow 0.2s ease; } .register_btn:hover, .send_reset_link:hover, #submit_login_info:hover { color: white; transform: scale(1.01); } /* Remove arrows (spinners) in Chrome, Edge, Safari */ input.input-type-phone-appearance::-webkit-inner-spin-button, input.input-type-phone-appearance::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Remove arrows in Firefox */ input.input-type-phone-appearance { -moz-appearance: textfield; } /* table.dataTable td.dt-numeric { text-align: right !important; } */ /* Phone columns — beat DataTables dt-type-numeric { text-align:right }. */ table.dataTable th.dt-left, table.dataTable td.dt-left, table.dataTable th.dt-col-phone, table.dataTable td.dt-col-phone, table.dataTable th.dt-left.dt-type-numeric, table.dataTable td.dt-left.dt-type-numeric, table.dataTable th.dt-col-phone.dt-type-numeric, table.dataTable td.dt-col-phone.dt-type-numeric { text-align: left !important; } table.dataTable th.dt-left div.dt-column-header, table.dataTable th.dt-col-phone div.dt-column-header, table.dataTable th.dt-left.dt-type-numeric div.dt-column-header, table.dataTable th.dt-col-phone.dt-type-numeric div.dt-column-header { justify-content: flex-start !important; } .navbar-nav > .user-menu .user-image { margin-top: 2%; } /* scroll container */ .estimate-scroll { max-height: calc(100vh - 64px - 230px); /*655px adjust as needed */ overflow-y: auto; position: relative; z-index: 99; } /* FIX the main header */ .estimate-scroll thead.estimation-header th { position: sticky; top: 0; z-index: 50; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ThemeColor); } .nav-pills .nav-link, .nav-tabs .nav-link { color: var(--ThemeColor); transition: color 0.25s ease, transform 0.2s ease; } .nav-pills .nav-link:hover, .nav-pills .nav-link:focus { color: #050130; transition: background-color 0.25s ease, color 0.25s ease; background-color: rgba(5, 1, 48, 0.08); } .nav-pills .nav-link:hover { /* transform: translateY(-1px); */ background: var(--ThemeColorThree); color: #fff !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--ThemeColor); } .quotationNavs.nav-pills { padding-top: 2px; } /* Starts Horizontal scrollbar height for quotation tab */ .quotationNavs, .planNavs { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.25) transparent; } .quotationNavs::-webkit-scrollbar, .planNavs::-webkit-scrollbar { height: 6px; } .quotationNavs::-webkit-scrollbar-track, .planNavs::-webkit-scrollbar-track { background: transparent; } .quotationNavs::-webkit-scrollbar-thumb, .planNavs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); border-radius: 10px; } .quotationNavs::-webkit-scrollbar-thumb:hover, .planNavs::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); } /* Ends Horizontal scrollbar height */ .dt-srno { white-space: nowrap; text-align: center !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; } /* Shrink Building/Facade Count to header/content width (avoids leftover table space). */ .dt-building-count { width: 1% !important; white-space: nowrap !important; text-align: left !important; } table.dataTable th.dt-building-count div.dt-column-header { justify-content: flex-start !important; } table.dataTable th.dt-building-count span.dt-column-title { flex-grow: 0 !important; } /* .dt-color-column { white-space: nowrap; width: 40px !important; min-width: 40px !important; max-width: 40px !important; } .dt-glass-type-column { white-space: nowrap; width: 50px !important; min-width: 50px !important; max-width: 50px !important; } .dt-ellipsis { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.dataTable { table-layout: fixed !important; }*/ /* project status filter */ .status-filter-container #projectTable_filter { display: flex !important; align-items: center !important; gap: 10px; /* space between search & dropdown */ } .status-filter-container #statusFilter { min-width: 140px; } .form-color-input-full-width { width: 100%; } .price-color-container { width:100%; height:20px; border-radius:4px; border:1px solid #ccc; } .price-color-options-template { border-radius:50%; border:1px solid #ccc; display: inline-block; margin-right: 5px; width: 20px; height: 20px; vertical-align: middle; } .minwidth-50 { min-width: 50px !important; } .minwidth-150 { min-width: 150px !important; } /* .image-card { display: flex; flex-direction: column; } */ .scale-container { margin-top: auto !important; } .lensMagnify { position: absolute; width: 200px; height: 200px; border: 5px solid #fff; border-radius: 5%; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background-repeat: no-repeat; pointer-events: none; z-index: 9999; background-color: #fff; } /* **** Plans Images Schedule PopUp Modal CSS **** */ /* Modal body height fixed */ #imageModal .modal-body { height: 75vh; background: #ffffff; padding: 0; overflow: hidden; } /* Carousel full height */ #imageModal #carouselExampleControls, #imageModal #carouselExampleControls .carousel-inner, #imageModal #carouselExampleControls .carousel-item { height: 100%; } /* Image frame (NO vertical padding) */ #imageModal .image-frame { width: 100%; height: 100%; padding-left: 90px; /* space for prev button */ padding-right: 90px; /* space for next button */ display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; position: relative; } /* Image always fully visible */ #imageModal .image-frame img, #imageModal .preview-img.magnify-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; cursor: zoom-in; } /* Navigation buttons */ #imageModal .custom-nav { width: 70px; top: 0; bottom: 0; margin: auto; background: rgba(0,0,0,0.12); } #imageModal .carousel-control-prev.custom-nav { left: 0; } #imageModal .carousel-control-next.custom-nav { right: 0; } /* Schedule modal header: title left, zoom centered, close right */ #imageModal .schedule-modal-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; } #imageModal .schedule-modal-header .modal-title { justify-self: start; margin-bottom: 0; } #imageModal .schedule-zoom-btns { justify-self: center; } #imageModal .schedule-modal-header .btn-close { justify-self: end; margin: 0; } /* Schedule modal zoom controls (same size as manual draw toolbar buttons) */ #imageModal .inline-zoom-control-btn { width: 40px; height: 40px; padding: 8px; } /* =========================== RESPONSIVE (MOBILE) =========================== */ @media (max-width: 768px) { #imageModal .modal-body { height: 65vh; } .image-frame { padding-left: 60px; padding-right: 60px; } .carousel-control-prev.custom-nav, .carousel-control-next.custom-nav { width: 50px; } } /* //project documents css */ .file-container-wrapper { max-height: 300px; overflow-y: auto; padding-right: 5px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fafafa; } /* Grid layout */ .file-container-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; padding: 15px; } /* Card design */ .file-card { background: white; border-radius: 10px; padding: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; height: 180px; display: flex; flex-direction: column; justify-content: space-between; } .file-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); } /* File thumbnails */ .file-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; cursor: pointer; } /* Icons (centered) */ .icon-file { object-fit: contain !important; padding: 10px; background: #f1f1f1; } /* File name */ .file-name { font-size: 12px; color: #555; margin-top: 6px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* Only for project type dynamic inputs */ .projectTypeSelection .input-group .btn { z-index: 0; } .projectTypeSelection .input-group .invalid-feedback { display: block; } /*.quotation-data-container .planTabPanes.tab-pane, .estimationTabPane .tab-pane { min-height: 640px; }*/ .quotationTabContent .estimate-scroll { max-height: 250px } .quotationTabContent .estimate-scroll.maxH350 { max-height: 350px; } .custom_badge_success { padding: 5px 10px; border-radius: 12px; } .mw_100{min-width: 100px !important;} .compare-row .maxw_150 .slect2-mod.selectBtn{max-width: 150px !important;} .btn_success_light{background-color: #e6f7ee;color: #119f5c;border: 1px solid #119f5c;padding: 2px 6px;padding-bottom: 0;} .btn_success_light:hover{background-color: #119f5c;color: #ffffff;border: 1px solid #119f5c;} .btn_danger_light{background-color: #ffe6e9;color: #eb041a;border: 1px solid #eb041a;padding: 2px 6px;padding-bottom: 0;} .btn_danger_light:hover{background-color: #eb041a;color: #ffffff;border: 1px solid #eb041a;} .estimationTabPane .owl-stage-outer.owl-height { min-height: 360px !important; } /* css to adding placholder in scale modal */ .select2-selection__rendered:empty + .select2-search--inline .select2-search__field { width: 100% !important; } /* Or target when there are no selected items */ .select2-selection__rendered li.select2-search:first-child:last-child .select2-search__field { width: 100% !important; } .readonly_input_box {background-color: #e9ecef !important;cursor: not-allowed;pointer-events: none;opacity: 0.94;} .mh-500 {max-height: 500px !important;overflow-y: auto !important;} .maxW-100 {max-width: 100px !important;} .minwidth-200 {min-width: 200px !important;} .minwidth-250 {min-width: 250px !important;} .minwidth-120 {min-width: 120px !important;} /* Manage.php */ /* ONLY for dynamic project type inputs */ .projectTypeSelection .invalid-feedback { display: none; } .projectTypeSelection .is-invalid ~ .invalid-feedback { display: block; } /* Legacy Step 2 UI Styles – SCOPED */ .step2-container-style .legacy-image-card { border: 1px solid #ddd; border-radius: 6px; overflow: visible; padding: 10px !important; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s; } .step2-container-style .legacy-image-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .step2-container-style .legacy-image-card .card-img-top { width: 100%; height: 350px !important; object-fit: contain; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 10px; } .step2-container-style .legacy-image-card .scale-info { font-size: 0.75rem; color: #666; margin-bottom: 8px; } .step2-container-style .legacy-image-card .card-footer-strip { background-color: #f4f4f4; border-top: 1px solid #eee; padding: 6px; font-weight: 600; font-size: 0.8rem; color: #333; border-radius: 0 0 4px 4px; margin: 0 -10px -6px -10px; } /* Custom Preview Fixed Frame */ .step2-container-style .custom-preview { width: 100%; height: 350px !important; object-fit: contain; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; } .step2-container-style .preview-label { padding: 4px 8px !important; font-size: 0.75rem; z-index: 10; line-height: 1; } .step2-container-style .view-schedule-btn { background-color: #0c0032 !important; color: #ffffff !important; font-size: 0.7rem !important; padding: 5px 12px !important; border-radius: 4px; border: none; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } .step2-container-style .view-schedule-btn:hover { background-color: #190061 !important; } .step2-container-style .legacy-image-card .card-actions { background-color: #f8f9fa; border-top: 1px solid #eee; padding: 8px; margin: 8px -10px -10px -10px; border-radius: 0 0 4px 4px; } /* Accordion */ .step2-container-style .accordion-header .accordion-toggle-icon { transition: transform 0.2s ease; } .step2-container-style .accordion-header[aria-expanded="false"] .accordion-toggle-icon, .step2-container-style .accordion-header.collapsed .accordion-toggle-icon { transform: rotate(-90deg); } .step2-container-style .accordion-item .accordion-header:hover { background-color: #e9ecef !important; } /* Legacy Step 2 UI Styles – SCOPED END */ /* Professional Profile Card */ .professional-profile-card { border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; border-radius: 12px !important; overflow: hidden; margin-top: 10px !important; } .professional-profile-card .card-header .profile-avatar-wrapper { width: 80px; height: 80px; padding: 3px; background: var(--White); border-radius: 50%; /* Subtle professional ring */ border: 1px solid var(--VineGray); box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .professional-profile-card .profile-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--White); } .professional-profile-card .list-group-item { transition: background-color 0.2s ease; border-left: 3px solid transparent; } .professional-profile-card .list-group-item:hover { background-color: var(--AliceBlue) !important; border-left-color: var(--ThemeColor); } .professional-profile-card .list-group-item:hover .icon-box { background-color: transparent !important; color: var(--ThemeColor) !important; } .professional-profile-card .icon-box { color: var(--BlackOlive); background-color: transparent; border: 1px solid var(--VineGray); } .professional-profile-card .card-footer .btn { transition: all 0.2s ease; } .professional-profile-card .card-footer .btn:hover { background-color: var(--ThemeColorTwo) !important; color: var(--White); } /* Professional Card Utilities */ .hover-lift { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; box-shadow: 0 0 1px rgb(0 0 0 / 9%), 0 1px 7px rgb(33 37 41 / 11%); } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 1px 21px rgb(0 0 0 / 11%) !important; } .card-icon-box { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; } .hover-lift:hover .card-icon-box { transform: scale(1.15) rotate(8deg); } /* Card Decoration Stain */ .card-stain { position: absolute; top: -60px; right: -40px; width: 180px; height: 180px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; filter: blur(50px); opacity: 0.15; z-index: 0; pointer-events: none; transition: transform 0.8s ease, opacity 0.4s ease; } .hover-lift:hover .card-stain { transform: scale(1.2) rotate(20deg); opacity: 0.25; } .ls-1 { letter-spacing: 1px; } /* Recent Projects Card */ .dashboard-recent-card { border-radius: 16px; overflow: hidden; } .dashboard-recent-card .card-header { padding: 16px 20px; } .dashboard-recent-card .card-header h3 { font-family: var(--tk-font-heading, inherit); font-weight: var(--tk-fw-semibold, 600); color: var(--tk-text, inherit); letter-spacing: -0.01em; } .dashboard-recent-card .table thead th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; padding: 12px 12px; white-space: nowrap; } .dashboard-recent-card .table tbody tr { transition: background-color 0.2s ease; } .dashboard-recent-card .table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); } .dashboard-recent-card .table tbody td { padding: 0.7rem 0.75rem; vertical-align: middle; font-size: 0.875rem; color: #334155; } .dashboard-recent-card .table tbody td .fw-medium { font-size: inherit; font-weight: 500; } .dashboard-recent-card .table tbody td.text-muted { font-size: 0.875rem; color: #6b7280 !important; } .dashboard-recent-card .tk-status { font-size: 0.62rem; padding: 0.22em 0.65em; } .dashboard-recent-card .project-icon-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 0.9rem; } .project-icon-sm { width: 36px; height: 36px; border-radius: 10px; background: var(--AliceBlue); display: flex; align-items: center; justify-content: center; color: var(--ThemeColor); } /* Project listing / dashboard action icons — fixed slots so rows stay aligned. Hit targets + glyphs are intentionally larger on project listings only. */ .tk-project-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.2rem; flex-wrap: nowrap; vertical-align: middle; } .tk-project-actions .tk-project-action-slot { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; } .tk-project-actions .tk-project-action-slot.is-empty { visibility: hidden; pointer-events: none; } .tk-project-actions .tk-row-action, .tk-project-actions .tk-project-action-slot > .btn, .tk-project-actions .tk-project-action-slot > a.btn, .tk-project-actions .tk-project-action-slot .kebab-toggle { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 2.35rem !important; height: 2.35rem !important; min-width: 2.35rem !important; min-height: 2.35rem !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; border-radius: 0.55rem !important; box-shadow: none !important; flex-shrink: 0; } .tk-project-actions .tk-project-action-slot .kebab-wrap { display: inline-flex !important; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; } .tk-project-actions .tk-row-action i, .tk-project-actions .tk-row-action .fas, .tk-project-actions .tk-row-action .fa, .tk-project-actions .tk-project-action-slot > .btn i, .tk-project-actions .tk-project-action-slot > a.btn i { font-size: 1.25rem !important; line-height: 1 !important; } .tk-project-actions .tk-row-action svg, .tk-project-actions .tk-project-action-slot svg { width: 1.25rem !important; height: 1.25rem !important; display: block; } .tk-project-actions .tk-row-action .coord-row-dot, .tk-project-actions .tk-project-action-slot .coord-row-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; pointer-events: none; } /* Badge Styles */ .badge-success { background-color: rgba(16, 185, 129, 0.1); color: #059669; } .badge-warning { background-color: rgba(245, 158, 11, 0.1); color: var(--WarningText) !important; } .badge-secondary { background-color: rgba(107, 114, 128, 0.1); color: #6b7280; } .cust_app_wrapper{margin: 0;max-height: 100vh;min-height: 100vh;} @media (min-width: 992px){ .sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper{ height: calc(100vh - 70px); } } .btn-secondary { background: var(--ThemeColorFive) !important;border: none !important;color: var(--ThemeColor) !important; } .btn-secondary:hover { background: var(--ThemeColorThree) !important; color: var(--White) !important; } /* Responsive Adjustments */ @media (max-width: 768px) { .dashboard-stat-card .stat-value { font-size: 1.5rem; } .dashboard-stat-card .stat-icon-wrapper { width: 48px; height: 48px; font-size: 1.25rem; } } /* .border-tertiary { --bs-border-opacity: 1; border-color: rgba(var(--ThemeColor), var(--bs-border-opacity)) !important; } */ .min-h-500 { min-height: 500px; } .custom-tooltip { --bs-tooltip-bg: var(--ThemeColorTwo); --bs-tooltip-color: var(--White); } .card-warning, .bg-warning, .text-bg-warning {color: var(--WarningText) !important;} .card-info, .bg-info, .text-bg-info {color: var(--InfoText) !important; background-color: var(--InfoBackground) !important;} .bg_info {background-color: var(--InfoBackgroundTwo) !important;} /* Dashboard Modern UI Utilities */ .rounded-4 { border-radius: 1rem !important; } .ls-1 { letter-spacing: 0.05em; } .cursor-pointer { cursor: pointer; } .table-hover tbody tr:hover { background-color: rgba(0,0,0,.015); transition: background-color 0.2s ease; } /* Form Control Polish */ .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(9, 4, 70, 0.15); /* ThemeColor with opacity */ background-color: #fff !important; } /* Switch & Checkbox Customization */ .form-check-input:checked { background-color: var(--ThemeColor); border-color: var(--ThemeColor); } .form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(9, 4, 70, 0.2); border-color: var(--ThemeColorFour); } /* Button Polish */ .btn-primary.saveRoleButton { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary.saveRoleButton:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--ThemeColor) !important; } .btn-primary.saveRoleButton:active { transform: translateY(0); } /* Table Polish */ .table th { font-family: var(--ThemeFont); letter-spacing: 0.03em; } .bg_theme_color_four { background-color: var(--ThemeColorFour) !important; color: var(--White) !important; } .editPlanBtn:hover svg path, .deletePlanBtn:hover svg path, .deletePlanBtn:focus svg path, .deletePlanBtn:focus-visible svg path, .deletePlanBtn:active svg path, .delete-image-btn:hover svg path, .btn-delete-file:hover svg path, .delete-quotation-btn:hover svg path, .showSentEmailLogs:hover svg path, .btn-delete-folder:hover svg path { stroke: currentColor !important; } /* Folder upload section */ .share-link-box {background: #f8f9fa;border: 1px dashed #dee2e6;border-radius: .375rem;padding: .75rem 1rem;word-break: break-all;} .folder-card {position: relative;border: 1px solid #e9ecef;border-radius: 12px;transition: all .2s ease-in-out;overflow: hidden;} .folder-card:hover {transform: translateY(-2px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);border-color: #dbe4ff;} .folder-card .folder-click-link {z-index: 2;} .folder-card .folder-click-link::after {z-index: 2;} .folder-card .folder-content {position: relative;z-index: 1;padding-top: 1.75rem;} .folder-icon {font-size: 2.15rem;color: #f0ad4e;} .folder-actions {position: absolute;top: 10px;z-index: 3;} .folder-actions-left {left: 10px;} .folder-actions-right {right: 10px;} .folder-action-btn {width: 32px;height: 32px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;border: 1px solid #e9ecef;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);position: relative;z-index: 3;font-size: .9rem;} /* SELECT 2 css customisation */ .agencyContainer .slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__arrow{ top: calc(58px - 25px - 25px); } .agencyContainer .slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:37px } .agencyContainer .slect2-mod.selectBtn .select2-container--default .select2-selection--single { height: 100%; border-radius: var(--bs-border-radius); border: var(--bs-border-width) solid var(--bs-border-color); box-shadow: var(--bs-box-shadow-inset); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .agencyContainer .select2-container--open .select2-dropdown {width: 260px !important;} .agencyContainer .select2-dropdown.select2-dropdown--below, .form_div {background: var(--bs-white);} .agencyContainer .select2-results {display: block;} /* SELECT 2 css customisation */ /* Customer Filter */ .customer_filer_div.slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__arrow {top: calc(58px - 25px - 25px);} .customer_filer_div.slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 37px;} .customer_filer_div.slect2-mod.selectBtn .select2-container--default .select2-selection--single { height: 100%; border-radius: var(--bs-border-radius); border: var(--bs-border-width) solid var(--bs-border-color); box-shadow: var(--bs-box-shadow-inset); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* A long customer email truncates inside the field instead of spilling past it. */ #customerSelect + .select2-container .select2-selection__choice { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Upload Access on phones: the header holds a title plus the customer filter. */ @media (max-width: 575.98px) { .card-header:has(> .customer_filer_div) { flex-wrap: wrap; gap: 0.5rem; } /* Filter drops to its own line, so the title stops wrapping word by word. */ .customer_filer_div { width: 100%; margin-left: 0 !important; } /* Select2 is built with a hardcoded 260px, written inline on the container. */ .customer_filer_div .select2-container { width: 100% !important; } /* Share and Create Customer split the row instead of wrapping their labels. */ #btnShareAccess, #btnShareAccess + .btn { min-width: 0; padding: 0.5rem 1.65rem; white-space: nowrap; } } /* Customer Filter */ button.quotationTabBtns.nav-link { border: var(--bs-btn-border-width) solid var(--ThemeColor); } /* Estimation annonated img accordian */ .estimation-annonated-img-accordian .accordion-button:focus, .estimation-items-accordion .accordion-button:focus { box-shadow: none !important; outline: none !important; } .estimation-annonated-img-accordian .accordion-button:not(.collapsed), .estimation-items-accordion .accordion-button:not(.collapsed) { box-shadow: none !important; background-color: #fff !important; color: inherit !important; } .screen-input-center, .tempered-input-center, .impact-input-center, .compliance-input-center { display: flex; justify-content: space-between; align-items: center; padding: 0 0.5rem; } /* tutorial css styles here */ #tutorialTable tbody.reorder-enabled tr { cursor: move; } #tutorialTable tbody tr { cursor: default; } #tutorialCategoryTable tbody.reorder-enabled tr { cursor: move; } #tutorialCategoryTable tbody tr { cursor: default; } /* DT */ #detectionTypeChecklistSelect + .select2-container{ width:300px !important; } /* custom tutorial page */ .cust_tutorial { margin-bottom: 10px !important; border: 1px solid #f0f0f0 !important; border-radius: 10px !important; overflow:hidden ; } .cust_tutorial .accordion-button {background: #090446; color: var(--White);} .cust_tutorial .accordion-button.collapsed {background: var(--White); color: var(--Black);} .cust_tutorial .accordion-button:not(.collapsed)::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");} .cust_tutorial .accordion-button:focus {box-shadow: none !important;} .cust_tutorial .accord_title { color: var(--tk-text, #1f2a3d); text-decoration: none; opacity: 1; transition: color 0.15s ease; } .cust_tutorial .accord_title:hover, .cust_tutorial .accord_title:focus { color: var(--tk-primary, #102040); text-decoration: none; opacity: 1; } .cust_tutorial .accord_title.active { color: var(--tk-primary, #102040); text-decoration: none; font-weight: 600; opacity: 1; } /* Apply Filter Modal - Image Grid */ #applyFilterModal .plan-images-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } #applyFilterModal .apply-filter-img-item { padding: 0; margin: 0; } #applyFilterModal .apply-filter-img-item .form-check-input { display: none; /* hide native checkbox, we use the card style */ } #applyFilterModal .apply-filter-img-preview { position: relative; border: 2px solid #dee2e6; border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; background: #f8f9fa; } #applyFilterModal .apply-filter-img-preview img { width: 100%; height: 110px; object-fit: cover; display: block; } #applyFilterModal .apply-filter-img-placeholder { width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #adb5bd; } #applyFilterModal .apply-filter-img-meta { padding: 6px 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; } /* Check indicator - hidden by default */ #applyFilterModal .apply-filter-img-check-indicator { display: none; position: absolute; top: 6px; right: 6px; font-size: 1.2rem; background: #fff; border-radius: 50%; line-height: 1; } /* Selected state */ #applyFilterModal .apply-filter-img-item.selected .apply-filter-img-preview { border-color: var(--ThemeColor, #0d6efd); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); } #applyFilterModal .apply-filter-img-item.selected .apply-filter-img-check-indicator { display: block; } /* Hover */ #applyFilterModal .apply-filter-img-preview:hover { border-color: var(--ThemeColor, #0d6efd); } /* Horizontal scrolling tabs */ #applyFilterModal #applyFilterTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #dee2e6 transparent; } #applyFilterModal #applyFilterTabs::-webkit-scrollbar { height: 4px; } #applyFilterModal #applyFilterTabs::-webkit-scrollbar-thumb { background-color: #dee2e6; border-radius: 4px; } #applyFilterModal #applyFilterTabs .nav-item { flex-shrink: 0; } #applyFilterModal #applyFilterTabs .nav-link { white-space: nowrap; } /* Vertical scrolling image grid */ #applyFilterModal .plan-images-list { max-height: 380px; overflow-y: auto; overflow-x: hidden; align-content: start; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #dee2e6 transparent; } #applyFilterModal .plan-images-list::-webkit-scrollbar { width: 4px; } #applyFilterModal .plan-images-list::-webkit-scrollbar-thumb { background-color: #dee2e6; border-radius: 4px; } .product-summary-filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color, #6c757d); display: block; margin-bottom: 4px; } .cust_dt table tr td.superadmin-action-td { padding: 0.6rem 0.5rem !important; white-space: nowrap; } /* DataTable action icon groups — header + icons centred under ACTIONS */ .cust_dt table tr th.dt-actions-col { min-width: 11rem; width: 11rem; white-space: nowrap; vertical-align: middle !important; text-align: center !important; } .cust_dt table tr td.dt-actions-col { min-width: 11rem; width: 11rem; white-space: nowrap; vertical-align: middle !important; text-align: center !important; } /* Status/actions column — wide enough for the accept + reject buttons to stay one line */ .cust_dt table tr th.dt-custom-request-actions-group, .cust_dt table tr td.dt-custom-request-actions-group { min-width: 16rem; white-space: nowrap; vertical-align: middle !important; } /* Accept/reject button pair — keep both buttons the same single-line size */ .dt-custom-request-actions-group { flex-wrap: nowrap; } .dt-custom-request-actions-group .btn { white-space: nowrap; flex-shrink: 0; } .dt-action-group { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: nowrap; } .dt-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 0.65rem; background: #fff; color: #334155; line-height: 1; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.12s ease; } .dt-action-btn:hover, .dt-action-btn:focus { background: #f8fafc; border-color: #c7d2e0; color: var(--ThemeColor, #102040); box-shadow: 0 2px 6px rgba(16, 32, 64, 0.1); transform: translateY(-1px); } .dt-action-btn svg { width: 1.125rem; height: 1.125rem; display: block; } .dt-action-btn .material-symbols-outlined.tk-mi { font-size: 1.2rem; } .dt-action-btn--info { color: #0891b2; } .dt-action-btn--info:hover, .dt-action-btn--info:focus { color: #0e7490; background: #ecfeff; border-color: #a5f3fc; } .dt-action-btn--danger { color: #e11d48; } .dt-action-btn--danger:hover, .dt-action-btn--danger:focus { background: #fff5f5; border-color: #fecaca; color: #be123c; } .dt-empty-action { display: inline-block; min-width: 1.25rem; color: #94a3b8; text-align: center; } .dt-badge-soft { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: 999px; line-height: 1.2; } .dt-badge-soft--success { background: #dcfce7; color: #166534; } .dt-badge-soft--muted { background: #f1f5f9; color: #64748b; } .dt-badge-soft--primary { background: var(--AliceBlue); color: var(--ThemeColor); } .dt-badge-soft--info { background: #e8e3f4; color: var(--ThemeColorTwo); } .agency-users-page .page-subtitle { font-size: 0.95rem; color: #64748b; } .agency-users-page .cust_dt tbody tr td { vertical-align: middle !important; } /* Back button styles live in assets/css/common/app-shell.css (.app-back-btn / .btn-back-primary). */ /* Compact grant/revoke toggle buttons */ .dt-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.8125rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid transparent; line-height: 1; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .dt-toggle-btn svg { flex-shrink: 0; } .dt-toggle-btn--grant { background: var(--ThemeColor); border-color: var(--ThemeColor); color: var(--White); } .dt-toggle-btn--grant:hover:not(:disabled), .dt-toggle-btn--grant:focus:not(:disabled) { background: var(--ThemeColorTwo); border-color: var(--ThemeColorTwo); box-shadow: 0 2px 6px rgba(9, 4, 70, 0.25); } .dt-toggle-btn--grant:disabled { opacity: 0.5; cursor: not-allowed; } .dt-toggle-btn--revoke { background: #fff; border-color: var(--NewRed); color: var(--Red); } .dt-toggle-btn--revoke:hover, .dt-toggle-btn--revoke:focus { background: var(--Red); border-color: var(--Red); color: var(--White); box-shadow: 0 2px 6px rgba(235, 4, 26, 0.2); } .delete-image-btn:disabled, .deletePlanBtn:disabled, .editPlanBtn:disabled { opacity: 45%; } /*added for estimate accordions and full annotated images */ /* When estimation items accordion is closed, owl fills available space */ .estimation-annonated-img-accordian .owl-carousel[style*="height"] .owl-item img, .estimation-annonated-img-accordian .owl-carousel[style*="height"] .project-image { /* max-height: 100%; */ max-height: min(calc(100vh - 37vh), 650px); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; } .estimation-annonated-img-accordian .owl-carousel[style*="height"] .owl-stage-outer { height: 100% !important; } .estimation-annonated-img-accordian .owl-carousel[style*="height"] .owl-stage, .estimation-annonated-img-accordian .owl-carousel[style*="height"] .owl-item { height: 100% !important; } .estimation-items-accordion .collapsing, .estimation-annonated-img-accordian .collapsing { transition: none !important; } .theme-btn { background-color: var(--ThemeColor); color: #fff; border: 1px solid var(--ThemeColor); } .theme-btn:hover { background-color: #060330; color: #fff; border-color: #060330; } .theme-btn-outline { background-color: transparent; color: var(--ThemeColor); border: 1px solid var(--ThemeColor); } .theme-btn-outline:hover { background-color: var(--ThemeColor); color: #fff; } /*legend show hide*/ /* Legend container with fade indicators on edges */ .legend-container { max-width: 100%; display: flex; align-items: center; gap: 10px; position: relative; } .legend-container::before, .legend-container::after { content: ""; position: absolute; top: 0; bottom: 0; width: 20px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.25s ease; } .legend-container::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,0.95), transparent); } .legend-container::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,0.95), transparent); } .legend-container.has-overflow-left::before { opacity: 1; } .legend-container.has-overflow-right::after { opacity: 1; } .legend-label { font-size: 12px; font-weight: 700; color: #1e293b; white-space: nowrap; flex-shrink: 0; } /* Scrollable list */ .horizontal-legend-list { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 4px 2px; margin: 0; list-style: none; flex: 1; min-width: 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .horizontal-legend-list::-webkit-scrollbar { height: 6px; } .horizontal-legend-list::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; transition: background-color 0.2s ease; } .horizontal-legend-list:hover::-webkit-scrollbar-thumb { background-color: #94a3b8; } /* Individual legend chips — premium navy-aligned chips (estimate + quotation) */ .legend-list-item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--tk-font-sans, "Outfit", system-ui, sans-serif); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; color: var(--tk-text, #1f2a3d); white-space: nowrap; flex-shrink: 0; padding: 0.45rem 0.85rem 0.45rem 0.55rem; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%); border: 1px solid rgba(16, 32, 64, 0.14); cursor: default; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(16, 32, 64, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; user-select: none; } .legend-list-item:hover { background: #ffffff; border-color: rgba(16, 32, 64, 0.42); color: var(--tk-primary, #102040); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16, 32, 64, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1); } .legend-list-item:active { transform: translateY(0); box-shadow: 0 2px 6px -3px rgba(16, 32, 64, 0.2); } .legend-list-item:focus-visible { outline: 2px solid rgba(16, 32, 64, 0.45); outline-offset: 2px; } /* Active / selected state — toggle .is-active via JS on click */ .legend-list-item.is-active { background: var(--tk-primary, #102040); border-color: var(--tk-primary, #102040); color: #fff; box-shadow: 0 4px 12px rgba(16, 32, 64, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .legend-list-item.is-active .legend-color-indicator { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2); } /* Dimmed state — when another item is active, fade the rest */ .horizontal-legend-list.has-active .legend-list-item:not(.is-active) { opacity: 0.55; } .horizontal-legend-list.has-active .legend-list-item:not(.is-active):hover { opacity: 1; } /* Color swatch */ .legend-color-indicator { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(16, 32, 64, 0.18); flex-shrink: 0; transition: transform 0.18s ease, box-shadow 0.18s ease; } .legend-list-item:hover .legend-color-indicator { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 2px 4px rgba(16, 32, 64, 0.22); } /*select2*/ span.select2-dropdown { min-width: 200px; } .select2-mod { position: relative; } .theme-v2 .turnkey-project .plan-upload-multiplier-row .plan-upload .tg-pane__label, .theme-v2 .turnkey-project .plan-upload-multiplier-row .plan-upload .file-upload-notes { text-align: left; } .theme-v2 .turnkey-project .v2-base-image-block .v2-per-base-detection > .sticky-top > .row { border: unset; box-shadow: unset; } /* Keep title + sort control on one row (column stack made S.NO look joined). */ .theme-v2 table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer { flex-direction: row; align-items: center; gap: 0.35rem; } .theme-v2 #projectTable_wrapper .dt-length { display: inline-flex; align-items: center; gap: 0.5rem; flex-direction: row; } .theme-v2 #projectTable_wrapper .dt-length label { text-transform: none; } /* Entrance animation when legend items are injected */ @keyframes legendFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .horizontal-legend-list .legend-list-item { animation: legendFadeIn 0.25s ease both; } /*below 768 screen size*/ @media (max-width: 768px) { .legend-container { max-width: 100%; } } /* |-------------------------------------------------------------------------- | Counter Badges — dark navy pill, matches screenshot exactly |-------------------------------------------------------------------------- */ .log-counter-badge { display : inline-flex; align-items : center; padding : 5px 14px; border-radius : 4px; font-size : .8rem; font-weight : 700; letter-spacing : .02em; color : #fff; line-height : 1.4; } .log-counter-badge.lvl-total { background: #0f1b4c; } .log-counter-badge.lvl-critical { background: #0f1b4c; } .log-counter-badge.lvl-emergency{ background: #0f1b4c; } .log-counter-badge.lvl-alert { background: #0f1b4c; } .log-counter-badge.lvl-error { background: #0f1b4c; } .log-counter-badge.lvl-warning { background: #0f1b4c; } .log-counter-badge.lvl-notice { background: #0f1b4c; } .log-counter-badge.lvl-info { background: #0f1b4c; } .log-counter-badge.lvl-debug { background: #0f1b4c; } /* |-------------------------------------------------------------------------- | Toolbar |-------------------------------------------------------------------------- */ .log-toolbar { background : #f8f9fa; border : 1px solid #e9ecef; border-radius : 6px; padding : 10px 14px; } .log-search { width : 240px !important; } /* |-------------------------------------------------------------------------- | Filter Buttons — sharp corners, outline / filled per level |-------------------------------------------------------------------------- */ .level-btn { font-size : .75rem; font-weight : 600; padding : 3px 10px; border-radius : 3px; border-width : 1.5px; letter-spacing: .03em; line-height : 1.6; } /* ALL */ .level-btn[data-level="ALL"].active-btn {background-color: var(--ThemeColor);color: #fff;border: 1px solid var(--ThemeColor); } .level-btn[data-level="ALL"]:not(.active-btn) {background-color: transparent;color: var(--ThemeColor);border: 1px solid var(--ThemeColor); } /* CRITICAL / EMERGENCY / ALERT / ERROR */ .level-btn[data-level="CRITICAL"].active-btn, .level-btn[data-level="EMERGENCY"].active-btn, .level-btn[data-level="ALERT"].active-btn, .level-btn[data-level="ERROR"].active-btn {background-color: var(--ThemeColor);color: #fff;border: 1px solid var(--ThemeColor); } .level-btn[data-level="CRITICAL"]:not(.active-btn), .level-btn[data-level="EMERGENCY"]:not(.active-btn), .level-btn[data-level="ALERT"]:not(.active-btn), .level-btn[data-level="ERROR"]:not(.active-btn) {background-color: transparent;color: var(--ThemeColor);border: 1px solid var(--ThemeColor); } /* WARNING */ .level-btn[data-level="WARNING"].active-btn {background-color: var(--ThemeColor);color: #fff;border: 1px solid var(--ThemeColor); } .level-btn[data-level="WARNING"]:not(.active-btn) {background-color: transparent;color: var(--ThemeColor);border: 1px solid var(--ThemeColor); } /* INFO / NOTICE */ .level-btn[data-level="INFO"].active-btn, .level-btn[data-level="NOTICE"].active-btn {background-color: var(--ThemeColor);color: #fff;border: 1px solid var(--ThemeColor); } .level-btn[data-level="INFO"]:not(.active-btn), .level-btn[data-level="NOTICE"]:not(.active-btn) {background-color: transparent;color: var(--ThemeColor);border: 1px solid var(--ThemeColor); } /* DEBUG */ .level-btn[data-level="DEBUG"].active-btn {background-color: var(--ThemeColor);color: #fff;border: 1px solid var(--ThemeColor); } .level-btn[data-level="DEBUG"]:not(.active-btn) {background-color: transparent;color: var(--ThemeColor);border: 1px solid var(--ThemeColor); } /* |-------------------------------------------------------------------------- | Log Rows — full border all sides, level colour |-------------------------------------------------------------------------- */ .log-row { border : 1.5px solid #dee2e6; border-radius : 5px; margin-bottom : 5px; background : #fff; overflow : hidden; } .log-row.lvl-warning, .log-row.lvl-emergency, .log-row.lvl-alert { border-color: #ffc107; } .log-row.lvl-error, .log-row.lvl-critical { border-color: #d1390a; } .log-row.lvl-info, .log-row.lvl-notice { border-color: #0d6efd; } .log-row.lvl-debug { border-color: #6c757d; } .log-row-header { display : flex; align-items : center; padding : 9px 14px; font-size : .83rem; gap : 8px; } .log-row-header.cp { cursor: pointer; } .log-row-header.cp:hover { background: #fafafa; } /* Level badge inside row */ .log-level-badge { font-size : .68rem; font-weight : 700; padding : 2px 7px; border-radius: 3px; white-space : nowrap; flex-shrink : 0; color : #fff; } .log-level-badge.lvl-error, .log-level-badge.lvl-critical, .log-level-badge.lvl-emergency, .log-level-badge.lvl-alert { background: var(--ThemeColor); color: #ffff; } .log-level-badge.lvl-warning { background: var(--ThemeColor); color: #ffff; } .log-level-badge.lvl-info, .log-level-badge.lvl-notice { background: var(--ThemeColor); } .log-level-badge.lvl-debug { background: var(--ThemeColor); } /* Message text */ .log-msg { flex : 1; word-break : break-word; color : #212529; } /* Chevron */ .log-chevron { color : #6c757d; font-size : .75rem; flex-shrink : 0; transition : transform .15s ease; margin-left : auto; padding-left: 8px; } .log-chevron.open { transform: rotate(90deg); } /* |-------------------------------------------------------------------------- | Trace Block — dark background like screenshot |-------------------------------------------------------------------------- */ .log-trace { display : none; } .log-trace pre { margin : 0; padding : 12px 16px; background : #1a1a2e; color : #e8e8e8; font-family : 'Courier New', Courier, monospace; font-size : .76rem; white-space : pre-wrap; word-break : break-all; border-radius: 0; border-top : 1px solid rgba(255,255,255,.08); } /* |-------------------------------------------------------------------------- | Cursor helper |-------------------------------------------------------------------------- */ .cp { cursor: pointer; } /* Quotation report type modals — between default and modal-lg */ .modal-dialog-quotation-report { max-width: 580px; } @media (max-width: 480px) { .btns-info { flex-direction: column; gap: 1rem !important; /* overrides gap-5 */ width: 100%; } .btns-info > * { width: 100%; } } @media (max-width: 480px) { .estimationTabPane .owl-stage-outer.owl-height { min-height: auto !important; /* adjust as needed */ } } /* |-------------------------------------------------------------------------- | Action "kebab" menu (project listings + dashboard) |-------------------------------------------------------------------------- | Two quick actions stay outside; the rest live behind a 3-dot menu. The menu | is position:fixed and placed by JS (see .kebab-toggle in common.js) so it is | never clipped by the scrollable / max-height DataTable container. */ .kebab-wrap { position: relative; } .kebab-toggle { color: #6b7280 !important; line-height: 1; padding: 0.25rem 0.4rem; border-radius: 8px; transition: background-color .15s ease, color .15s ease; } .kebab-toggle:hover, .kebab-toggle.kebab-active { color: #111827 !important; background: #f3f4f6; } .kebab-menu { position: fixed; z-index: 1080; min-width: 188px; padding: 6px; margin: 0; background: #ffffff; border: 1px solid #e9eaee; border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14); display: flex; flex-direction: column; gap: 2px; animation: kebabMenuIn .12s ease-out; } .kebab-menu[hidden] { display: none; } @keyframes kebabMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .kebab-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #374151; font-size: 13px; font-weight: 500; line-height: 1.2; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .kebab-item:hover, .kebab-item:focus-visible { background: #f3f4f6; color: #111827; outline: none; } .kebab-item svg { width: 18px; height: 18px; flex: 0 0 18px; } /* DOWNLOAD_ICON is white for filled download buttons — restore contrast in light menus. */ .kebab-item .tk-icon-download, body:not(:has(.pw-header)) .kebab-item .tk-icon-download { color: currentColor !important; } .kebab-item-label { flex: 1 1 auto; } .kebab-item-danger { color: #dc2626; } .kebab-item-danger:hover, .kebab-item-danger:focus-visible { background: #fef2f2; color: #dc2626; } /* A blocked entry must LOOK blocked. It is already inert — a disabled Every button in the stack looks the same — solid theme fill, differing only by icon — because they are peers. There is deliberately no "secondary" variant: a stack where one action looks demoted reads as a hierarchy that isn't there. Label BEFORE icon in the markup: the pill is right-anchored and clips at its start edge, so that order is what keeps the icon still while the label unrolls. The stack is laid out row-reverse, so the FIRST button in the DOM sits closest to the corner and the order on screen reads as the reverse of the markup. ========================================================================== */ /* On :root, not on .app-fab-stack: the stack is position:fixed and therefore not an ancestor of the footer or the save bar, so a clearance declared on it would never reach the elements that have to reserve room for it — they would silently fall back to the literal in their own var(). Sized for the three launchers actually rendered. */ :root { --app-fab-size: 44px; --app-fab-gap: 8px; --app-fab-count: 3; --app-fab-clearance: calc( var(--app-fab-count) * var(--app-fab-size) + (var(--app-fab-count) - 1) * var(--app-fab-gap) + 16px ); } .app-fab-stack { /* Sit in the footer bar (right), not floating above the page content. */ position: fixed; right: 16px; bottom: calc((var(--app-footer-height, 56px) - var(--app-fab-size)) / 2); z-index: 1040; display: flex; flex-direction: row-reverse; /* icons in the footer, leftward from the corner */ align-items: center; gap: var(--app-fab-gap); pointer-events: none; } .app-fab-stack > .app-fab { pointer-events: auto; } .takeoff-theme .est-breadcrumb .select2-container--default .select2-selection--single { min-height: 32px; border-radius: 0; } /* Leave room so scrolled content clears the footer + FAB row. */ body:has(.app-fab-stack) .app-main { padding-bottom: calc(var(--app-footer-height, 56px) + 24px) !important; } /* Keep low-sitting actions clear of the FAB (elevation card footers). Page-level Back/Next (.step2-container-style > .tg-wizard-footer) stays flush with the card edges — the FAB lives in the site footer band below. */ body:has(.app-fab-stack) .plan-section > .card-footer.tg-wizard-footer { padding-right: var(--app-fab-clearance, 72px) !important; } body:has(.app-fab-stack) .step2-container-style > .tg-wizard-footer, body:has(.app-fab-stack) .container.select2-card > .tg-wizard-footer, body:has(.app-fab-stack) .container.step2-container-style > .tg-wizard-footer { padding-right: 0 !important; } body:has(.app-drawer.is-open) .app-fab-stack { bottom: calc((var(--app-footer-height, 56px) - var(--app-fab-size)) / 2); } .app-fab { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; height: var(--app-fab-size, 44px); max-width: var(--app-fab-size, 44px); padding: 0; border: 1px solid transparent; border-radius: calc(var(--app-fab-size, 44px) / 2); overflow: hidden; cursor: pointer; text-decoration: none; background: var(--ThemeColor); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); transition: max-width .24s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, border-color .18s ease, background .15s ease; animation: appFabAppear .24s cubic-bezier(.4, 0, .2, 1) both; } .app-fab:hover, .app-fab:focus-visible { max-width: 280px; color: #fff; text-decoration: none; background: var(--ThemeColorTwo, #3d2d75); box-shadow: 0 10px 26px rgba(0, 0, 0, .26); } .app-fab:focus-visible { outline: 2px solid var(--ThemeColor); outline-offset: 3px; } .app-fab-icon { flex: 0 0 calc(var(--app-fab-size, 44px) - 2px); height: calc(var(--app-fab-size, 44px) - 2px); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } /* Never shrink — the label has to be clipped by the pill, not squeezed inside it. */ .app-fab-label { flex: 0 0 auto; white-space: nowrap; padding-left: 18px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .16s ease .06s; } .app-fab:hover .app-fab-label, .app-fab:focus-visible .app-fab-label { opacity: 1; } /* Two independent reasons to hide, so they get two classes: is-hidden for "something is covering this", is-unavailable for "there is nothing to open". */ .app-fab.is-hidden, .app-fab.is-unavailable { display: none; } /* Status dot, e.g. a live job behind the button. Set its colour inline. */ .app-fab-dot { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent; display: none; } .app-fab-dot.show { display: block; } /* These buttons appear mid-session as work completes; popping in with no transition reads as a glitch. */ @keyframes appFabAppear { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .app-fab, .app-fab-label { animation: none; transition: none; } } /* ========================================================================== Drawers -------------------------------------------------------------------------- A right-docked panel that slides in over the page, with an optional fullscreen mode. Opened from an .app-fab or a listing row action. Usage — the component owns the dock, the slide and the header bar; the page supplies only the title and the body:
My Panel
…
State classes are driven by window.AppDrawer (assets/js/app_drawer.js), which also enforces one-drawer-at-a-time and the Escape key. Do not toggle .is-open by hand — two panels docked to the same edge will fight. ========================================================================== */ .app-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 1039; background: #fff; border-left: 1px solid #d3dbe3; box-shadow: -8px 0 24px rgba(0, 0, 0, .10); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease, width .2s ease; } /* Above the base so that when one drawer replaces another, the one arriving always paints over the one leaving — regardless of their order in the DOM. */ .app-drawer.is-open { transform: translateX(0); z-index: 1040; } .app-drawer.is-fullscreen { width: 100vw; } .app-drawer-head { flex-shrink: 0; background: var(--ThemeColor); color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; letter-spacing: .02em; } .app-drawer-head-actions { display: flex; align-items: center; gap: 2px; } .app-drawer-icon-btn { background: transparent; border: 0; color: #fff; font-size: 15px; cursor: pointer; padding: 4px 7px; line-height: 1; border-radius: 4px; text-decoration: none; } .app-drawer-icon-btn:hover, .app-drawer-icon-btn:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; } .app-drawer-body { flex: 1; padding: 12px; overflow-y: auto; } .app-drawer-foot { padding: 8px 12px; border-top: 1px solid #eef1f4; font-size: 11px; color: #6b7280; } /* Fullscreen gives the content room to breathe rather than stretching it to the window edge. */ .app-drawer.is-fullscreen .app-drawer-head, .app-drawer.is-fullscreen .app-drawer-body { padding-left: 37px; padding-right: 37px; } @media (prefers-reduced-motion: reduce) { .app-drawer { transition: none; } } /* -------------------------------------------------------------------------- Estimate Summary category pills (All / Windows / Doors / Garage Doors). -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .offcanvas .product-summary-cat-tabs { min-height: 0; padding: 3px; border-radius: 10px; } .offcanvas .product-summary-cat, .offcanvas .quotation-product-summary-cat { padding: 0.25rem 0.6rem !important; font-size: 0.75rem; line-height: 1.35; } }