. When already has id="body-pd", body#body-pd.body-pd already
handles the header push via `position: fixed; left: 240px; width: calc(100% - 240px)`.
The package's fallback rule ALSO adds `padding-left: calc(240px + 9px)` to
`.header.body-pd` (for consumers whose body LACKS the id). Both rules fire
at once, pushing the burger and header contents ~489px in. Cancel the fallback
padding when body has the id — the fixed positioning is already correct. */
body#body-pd #header.body-pd,
body#body-pd .header.body-pd {
padding-left: 0 !important;
}
/* Strip body-pd padding entirely — content-side spacing is handled by
.inner-layout below. Header's fixed positioning (left: --body-pd-expanded)
still pushes it past the menu; only the body-side gutters are removed. */
body#body-pd,
body#body-pd.body-pd {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The package's layout.css sets body#body-pd { overflow: hidden }. That is now
the DESIRED behavior again: the Works Order list scrolls inside its own
.wo-page/.wo-list container, so a document scrollbar would only add a second,
useless bar. (A temporary override here restored body scrolling while the
list still scrolled with the document — removed once the list became its own
scroll container.) */
/* Page content wrapper (MainLayout's ).
Higher specificity than Bootstrap's .container-fluid (which sets padding via
--bs-gutter-x) so 5px wins. margin-left keeps content beside (not under) the
fixed-positioned left menu: matches the menu width when open (--body-pd-expanded,
280px) and collapses to the small gutter when closed (--body-pd-collapsed, 25px).
The W6_left_menu component toggles the .body-pd class on . */
div.container-fluid.inner-layout {
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: var(--body-pd-collapsed) !important;
width: calc(100% - var(--body-pd-collapsed)) !important;
max-width: calc(100% - var(--body-pd-collapsed)) !important;
}
body.body-pd div.container-fluid.inner-layout {
margin-left: var(--body-pd-expanded) !important;
width: calc(100% - var(--body-pd-expanded)) !important;
max-width: calc(100% - var(--body-pd-expanded)) !important;
}
/* Removed the legacy `.dxbl-popup-cell { margin-top: -64.5px }` hack that used to
pull DxComboBox / DxDateEdit dropdowns up against their input boxes in
DevExpress 25.1.x. Under DevExpress 25.2.7 the same class also wraps the
modal popup dialogs (DxPopup) — the -64.5px shifted every popup off-screen
at the top. Native positioning in 25.2+ is correct for both cases. */
.cw-300 {
height: 37.6px !important;
}
.bi-x-lg {
transform: scale(1.5);
}
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
position: relative;
background-color: var(--dxbl-grid-selection-focus-bg,unset);
color: black !important;
}
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
position: relative;
background-color: var(--dxbl-grid-focus-bg,unset);
color: black !important;
}
.dxbl-dropdown {
top: 100% !important;
left: 0 !important;
width: auto !important;
position: relative;
}
#printGrid .dxbl-field-woj_Signiture {
display: none !important;
}
#printGrid .dxgvHeader td:last-child,
#printGrid .dxgvDataRow td:last-child {
display: none;
}
.jobsheet-margin{
margin-top: 15px !important;
}
.jobsheet-checkbox-caption{
/* width: 20% !important;*/
}
.jobsheet-popup-body-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.jobsheet-popup-scroll-content {
flex: 1;
overflow-y: auto;
padding-right: 8px;
}
.disabled-badge {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none; /* fully disable click events */
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
code {
color: #c02d76;
}
/* Ilario Cutajar Custom CSS */
@media only screen and (min-width: 1400px) {
.header {
z-index: 9 !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.header {
z-index: 9 !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header {
z-index: 9 !important;
}
.formMobileCOL2 {
width: 50% !important;
margin-bottom: 9px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header {
z-index: 9 !important;
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
.formMobileCOL2 {
width: 50% !important;
margin-bottom: 9px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.header {
z-index: 9 !important;
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
body#body-pd {
margin-left: unset !important;
margin-top: 20px;
}
.inner-layout {
margin-top: 40px !important;
}
}
@media only screen and (min-width: 0px) and (max-width: 576px) {
.header {
z-index: 9 !important;
}
body#body-pd {
margin-left: unset !important;
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: end;
gap: 8px;
margin-left: 10px;
}
.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}
/* Fluent Themes */
.alt-item {
--dxbl-grid-row-bg: var(--DS-color-surface-neutral-subdued-rest);
}
.box-height {
height: 37.6px !important;
background-color: #f8f9fa !important;
}
dxbl-grid.dxbl-grid {
height: calc(100vh - 155px);
}
#CommentsGridWithoutBorder.dxbl-grid {
height: 50vh !important;
}
#CommentsGridWithoutBorder > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody {
border: var(--grid-border);
}
#GridWithoutBorder > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody {
border: var(--grid-border);
}
.DxgridWOTitle {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 95%;
width: min-content;
text-align: left;
font-size: 16px;
}
.DxgridWOTitle .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
.DxgridWOTitle .status {
flex-shrink: 0;
margin-left: 5px;
}
.DxgridWOTitle .billingMethod {
flex-shrink: 0;
margin-left: 5px;
}
.DxgridWOTitle .percentage {
flex-shrink: 0;
margin-left: 5px;
}
.DxgridWOTitle .employeeAssign {
flex-shrink: 0;
margin-left: 5px;
}
.circlewrapperDX {
background-color: white;
border-radius: 50%;
border: 2px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0));
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
body#body-pd {
margin-left: -30px;
background-color: white!important;
}
body#body-pd.body-pd {
margin-left: -56px;
}
.inner-layout {
margin-top: 64.5px!important;
}
.custom-row-spacing .dxgvDataRow {
margin-bottom: 10px;
border-bottom: 2px solid gray !important;
}
.badge {
display: flex!important;
flex-direction: row!important;
align-items: center!important;
font-weight: 400!important;
line-height: unset!important;
}
.no-data-wrapper[b-japavqogj0] {
height: calc(100vh - 65px)!important;
}
#body-pd > div > div.d-flex.justify-content-end.align-items-center.gap-0.p-2.mb-3.pt-3 > div > select,
#body-pd > div > div.d-flex.justify-content-end.align-items-center.gap-0.p-2.mb-3.pt-3 > div > input
{
height: 40px;
}
#body-pd > div > div.d-flex.justify-content-end.align-items-center.gap-0.p-2.mb-3.pt-3 > div > select {
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
}
#body-pd > div > div.d-flex.justify-content-end.align-items-center.gap-0.p-2.mb-3.pt-3 > div > input {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
}
#body-pd > div > div.d-flex.justify-content-end.align-items-center.gap-0.p-2.mb-3.pt-3 > div > select {
width: 400px!important;
}
.search-box {
position: relative;
display: flex;
align-items: center;
}
.search-query {
padding: 10px;
width: 43px;
height: 40px;
background-color: #4723D9;
color: transparent;
font-size: 1em;
transition: all 0.4s ease;
cursor: pointer;
border-radius: .25rem !important;
border: none!important;
}
.search-query:focus {
width: 300px;
background-color: transparent;
border: 1px solid #ced4da;
color: black;
}
.search-query:focus::placeholder {
color: black;
border: none;
}
.search-query:focus + .search-btn,
.search-query:not(:placeholder-shown) + .search-btn {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.search-btn {
border: 0;
background: transparent !important;
padding: 0;
position: absolute;
left: 0px;
cursor: unset;
pointer-events: none;
transition: opacity 0.4s ease;
}
.search-btn i {
color: white;
font-size: 1em;
pointer-events: none;
}
.search-query:not(:placeholder-shown) {
width: 300px;
background-color: transparent;
border: 1px solid #ced4da !important;
color: black;
}
select.form-select {
appearance: none;
background-color: #f8f9fa;
}
.wo-header button,
.wo-header select,
.wo-header .search-btn {
height: 40px;
width: 43px;
}
div.wo-header { margin-bottom: 20px; margin-right: 10px; }
.circlewrapperoptionsDX {
background-color: transparent;
color: var(--first-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.circlewrapperoptionsDX i{
font-size: 30px;
transition: 0.5s;
}
.circlewrapperoptionsDX i:hover {
font-size:32px;
cursor: pointer;
}
.DxgridWODescription {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 14px !important;
color: gray !important;
margin-top: 5px;
width: 100%;
}
.DxgridWODescription .referenceText {
white-space: nowrap;
flex-shrink: 0;
}
.DxgridWODescription .separator {
text-align: center;
flex-shrink: 0;
}
.contactInformationText, .companyContactInformation {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.header {
z-index: 9 !important;
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
body#body-pd {
margin-left: unset !important;
margin-top: 20px;
}
.inner-layout {
margin-top: 40px !important;
}
.formMobileCOL2 {
width: 50% !important;
margin-bottom: 9px;
}
div.JobsPageWrapper div.DxgridWOTitle {
flex-wrap: wrap;
justify-content: flex-start;
max-width: 95%;
}
div.JobsPageWrapper .FiltersTabHeader[b-rxg8wc70jz] {
flex-wrap: wrap;
justify-content: space-between;
}
}
@media only screen and (min-width: 0px) and (max-width: 576px) {
.header {
z-index: 9 !important;
}
body#body-pd {
margin-left: unset !important;
}
.wo-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
.formMobileCOL2 {
width: 50% !important;
margin-bottom: 9px;
}
div.JobsPageWrapper div.DxgridWOTitle {
flex-wrap: wrap;
justify-content: flex-start;
max-width: 95%;
}
div.JobsPageWrapper .FiltersTabHeader[b-rxg8wc70jz] {
flex-wrap: wrap;
justify-content: flex-start;
}
div.JobsPageWrapper .DxgridWOTitle {
max-width: 95%!important;
}
}
.contactInformationText, .companyContactInformation {
max-width: min-content;
}
.worksordernormallist .dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
display: none;
}
.worksordernormallist .dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tbody > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > tfoot > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > thead > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header) {
border-bottom: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
border-top: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.worksordernormallist .dxbl-grid > .dxbl-grid-top-panel:first-of-type {
border-bottom: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
}
.worksordernormallist .dxbl-grid .dxbl-grid-table > tbody > tr {
transition: 0.5s;
}
.worksordernormallist .dxbl-grid .dxbl-grid-table > tbody > tr:hover {
background-color: #f0f0f0;
}
.worksorderselectlist .dxbl-grid .dxbl-grid-table > tbody > tr:hover {
background-color: #a7e3ca !important;
}
div#nav-tabContent.tab-content .dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
/* border: unset;*/
}
div#nav-tabContent.tab-content .dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tbody > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > tfoot > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > thead > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header) {
border-bottom: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
border-top: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
div#nav-tabContent.tab-content .dxbl-grid > .dxbl-grid-top-panel:first-of-type {
border-bottom: 0.5px solid hsla(210,33.33%,calc(94.12% + calc(0 * 1%)), calc(1 + 0)) !important;
}
div#nav-tabContent.tab-content .dxbl-grid .dxbl-grid-table > tbody > tr {
transition: 0.5s;
}
div#nav-tabContent.tab-content.dxbl-grid .dxbl-grid-table > tbody > tr:hover {
background-color: #f0f0f0;
}
.dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th {
background: #ffffffba!important;
/* border-left: unset!important;
border-right: unset!important;*/
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
background: #ffffffba !important;
/* border-right: unset!important;*/
}
.dxbl-checkbox.dxbl-checkbox-display-view-indeterminate > div::after {
background-color: unset!important;
}
.DxGridButtonsWO {
gap: 30px;
font-size: 25px;
color: #939598;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
margin-right: 30px;
}
.DxGridButtonsWO .successhover:hover {
color: #23dc8e !important;
}
.DxGridButtonsWO .primaryhover:hover {
color: #4723D9 !important;
}
.DxGridButtonsWO .infohover:hover {
color: #0dcaf0 !important;
}
.DxGridButtonsWO .favourites:hover {
color: #ffc107 !important
}
.DxGridButtonsWO i:hover {
color: #4723D9;
transition: 0.25s;
cursor: pointer;
}
.DxGridButtonsWO .dangerhover:hover {
color: #dc3545!important;
}
.TimeFormsCustomLeft {
border-top-right-radius: unset!important;
border-bottom-right-radius: unset!important;
}
.TimeFormsCustomRight {
border-top-left-radius: unset !important;
border-bottom-left-radius: unset !important;
}
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav-bar > nav > div.bottom-links > a:nth-child(2) {
display: none !important;
}
.dxbl-grid td:nth-child(n+3):nth-child(-n+11).dxbl-align-center {
padding: 0 !important;
}
.invalid-feedback {
display: block !important;
}
/* Works Order redesign — companion styles for the W6_action_bar host page.
The action bar itself is themed by W6_action_bar.css; these rules only style
custom slot content (action-cluster icon buttons, filter fields). */
.wo-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--tpl-text, #212529);
background: var(--tpl-surface, #ffffff);
border: 1px solid var(--tpl-border-strong, #dee2e6);
border-radius: var(--tpl-radius-md, 8px);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wo-action-btn:hover:not(:disabled) {
color: var(--color-primary, var(--tpl-primary, #1946ba));
border-color: var(--color-primary, var(--tpl-primary, #1946ba));
}
.wo-action-btn:disabled {
opacity: .55;
cursor: not-allowed;
}
.wo-action-btn--fav-on {
color: #f59e0b;
border-color: #f59e0b;
}
.wo-action-btn--fav-on:hover:not(:disabled) {
color: #d97706;
border-color: #d97706;
}
/* Filter panel — one card per filter inside the W6_action_bar panel slots.
Height matches the DxTagBox inline sizing to keep vertical rhythm. */
.wo-filter-field {
display: flex;
flex-direction: column;
}
/* Works Order redesign — popover primitives + animations (design literals). */
@keyframes woFdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes woFadeBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes woPopIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes woSpinOnce { to { transform: rotate(360deg); } }
.wo-pop-backdrop {
position: fixed;
inset: 0;
z-index: 69;
}
.wo-pop-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 70;
background: var(--tpl-surface, #ffffff);
border: 1px solid var(--tpl-border-strong, #dee2e6);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(33, 37, 41, 0.16);
animation: woFdIn .15s cubic-bezier(.2, .7, .2, 1);
font-family: inherit;
}
/* Shared micro-heading inside popovers (design: 12px 600 caps grey). */
.wo-pop-heading {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tpl-text-subtle, #6c757d);
}
/* Design badge base — every inline pill (status/billing/assignee/hours/pct). */
.wo-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 3px 9px;
border-radius: 5px;
white-space: nowrap;
line-height: 1.4;
border: none;
cursor: pointer;
transition: filter .15s;
}
.wo-badge:hover:not(:disabled) { filter: brightness(0.96); }
.wo-badge:disabled { cursor: not-allowed; opacity: .7; }
.wo-badge--muted { background: #f1f3f5; color: #6c757d; }
/* Popover option rows (status/billing lists). */
.wo-opt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
font-size: 13.5px;
font-weight: 500;
color: var(--tpl-text, #212529);
background: none;
border: none;
cursor: pointer;
padding: 8px 9px;
border-radius: 6px;
transition: background .15s;
}
.wo-opt:hover { background: #f8f9fa; }
.wo-opt--active { background: #f1f6ff; }
/* Checkbox visual used in multiselects + assignee list. */
.wo-check {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
flex: 0 0 auto;
background: #ffffff;
border: 1px solid #ced4da;
}
.wo-check--on { background: #0d6efd; border-color: #0d6efd; }
/* Filter-panel view buttons (design green). */
.wo-view-btn {
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: #198754;
border: 1px solid #198754;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background .2s;
}
.wo-view-btn:hover { background: #157347; border-color: #157347; }
.wo-fav-count {
position: absolute;
top: -6px;
right: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 100px;
background: #f59e0b;
color: #ffffff;
font-size: 11px;
font-weight: 700;
border: 2px solid #ffffff;
}
.wo-action-btn { position: relative; }
/* Flex column filling the viewport below the header (64.5px, per .inner-layout's
margin-top) so the toolbar — and the filter panel when open — stay in place
while only .wo-list scrolls. The old DxGrid used calc(100vh - 155px); flex
handles the variable toolbar/panel height instead of a fixed offset. */
.wo-page {
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
min-height: 0;
}
/* NoData hardcodes height: calc(100vh - 65px) (see .no-data-wrapper below), which
overflows the fixed-height flex page — let it flex instead inside .wo-page. */
.wo-page .no-data-wrapper {
height: auto !important;
flex: 1 1 auto;
min-height: 0;
}
.wo-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
margin-top: 14px;
background: var(--tpl-surface, #ffffff);
border: 1px solid var(--tpl-border, #e9ecef);
border-radius: 12px;
}
.wo-list .wo-row-item:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.wo-list .wo-row-item:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom: none;
}
.wo-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 56px 24px;
color: #adb5bd;
}
.wo-empty i { font-size: 28px; margin-bottom: 12px; }
.wo-empty-title { font-weight: 700; font-size: 16px; color: #212529; }
.wo-empty-sub { font-size: 13.5px; margin-top: 6px; }
/**
* Modal shell rules — shared backdrop, container, header, close button.
* Component-specific styles (layout, spacing) go in component .razor.css files.
*/
.wo-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1100;
background: rgba(10, 22, 40, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
animation: woFadeBg .2s ease;
overflow: auto;
}
.wo-modal {
width: 100%;
max-width: 1000px;
min-height: 520px;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 24px 60px rgba(33, 37, 41, 0.28);
overflow: hidden;
animation: woPopIn .22s cubic-bezier(.2, .7, .2, 1);
display: flex;
flex-direction: column;
}
.wo-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 26px;
border-bottom: 1px solid #e9ecef;
}
.wo-modal-headline {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex-wrap: wrap;
}
.wo-modal-title { font-weight: 700; font-size: 17px; color: #212529; }
.wo-modal-sub { font-size: 15px; color: #6c757d; }
.wo-modal-source {
font-size: 13px;
font-weight: 600;
color: #ffffff;
background: #0d6efd;
border-radius: 6px;
padding: 4px 11px;
}
.wo-modal-close {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: none;
border: none;
cursor: pointer;
color: #6c757d;
transition: background .15s;
}
.wo-modal-close:hover { background: #f1f0ee; color: #212529; }
.wo-modal-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6c757d;
}
/* ══ Scheduler page (Claude Design "Scheduler" 1:1) ══════════════════════════
Static styles + hover/focus states live here; per-card colors, lane geometry
and utilization widths are computed inline in Scheduler.razor. */
.sch-page { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: #f8f9fa; color: #212529; padding: 12px; }
.sch-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.sch-scroll::-webkit-scrollbar-thumb { background: #d3d8de; border-radius: 100px; border: 2px solid #ffffff; }
.sch-card { transition: box-shadow .15s, transform .15s; }
.sch-card:hover { box-shadow: 0 4px 12px rgba(33,37,41,0.12) !important; transform: translateY(-1px); }
@keyframes schFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes schPop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.sch-filterbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-size: 14px; font-weight: 500; color: #ffffff; background: #0d6efd; border: none; border-radius: 100px; cursor: pointer; height: 34px; padding: 0 12px; transition: background .2s, transform .2s; }
.sch-filterbtn:hover { background: #0b5ed7; }
.sch-filterbtn:active { transform: scale(0.96); }
.sch-filterbtn--badged { padding: 0 14px 0 11px; }
.sch-filterbtn-count { position: absolute; top: -5px; left: -5px; background: #212529; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; font-size: 11px; font-weight: 600; color: #ffffff; border: 2px solid #f8f9fa; }
.sch-iconbtn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: #ffffff; border: 1px solid #dee2e6; cursor: pointer; color: #6c757d; transition: border-color .15s, color .15s; }
.sch-iconbtn:hover { border-color: #0d6efd; color: #0d6efd; }
.sch-iconbtn--xs { width: 26px; height: 26px; border-radius: 6px; }
.sch-latest { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #212529; background: #ffffff; border: 1px solid #dee2e6; border-radius: 8px; padding: 0 16px; height: 34px; cursor: pointer; transition: border-color .15s, color .15s; }
.sch-latest:hover { border-color: #0d6efd; color: #0d6efd; }
.sch-seg { font-size: 13px; font-weight: 600; border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; background: transparent; color: #6c757d; }
.sch-seg--on { background: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(33,37,41,0.14); }
.sch-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #0d6efd; background: rgba(13,110,253,0.10); border-radius: 100px; padding: 6px 8px 6px 13px; white-space: nowrap; }
.sch-chip-x { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 100px; background: transparent; border: none; cursor: pointer; color: #0d6efd; padding: 0; transition: background .2s; }
.sch-chip-x:hover { background: rgba(13,110,253,0.20); }
.sch-btn-grey { font-size: 14px; font-weight: 500; color: #495057; background: #e9ecef; border: 1px solid #dde0e3; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: background .2s; }
.sch-btn-grey:hover { background: #dde0e3; }
.sch-btn-blue { font-size: 14px; font-weight: 600; color: #ffffff; background: #0d6efd; border: 1px solid #0d6efd; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: background .2s; }
.sch-btn-blue:hover { background: #0b5ed7; border-color: #0b5ed7; }
.sch-quick { flex: 1; font-size: 11.5px; font-weight: 600; color: #212529; background: #f1f3f5; border: none; border-radius: 6px; padding: 7px 0; cursor: pointer; transition: background .15s; }
.sch-quick:hover { background: #e7eaee; }
.sch-quick--free { flex: 1.4; color: #1a7f4b; background: rgba(26,127,75,0.10); }
.sch-quick--free:hover { background: rgba(26,127,75,0.18); }
.sch-input { box-sizing: border-box; font-size: 14px; color: #212529; padding: 9px 11px; border: 1px solid #dee2e6; border-radius: 8px; outline: none; background: #ffffff; }
.sch-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13,110,253,0.2); }
.sch-modal-cancel { font-size: 14px; font-weight: 500; color: #6c757d; background: transparent; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px 18px; cursor: pointer; transition: background .15s, color .15s; }
.sch-modal-cancel:hover { background: #f1f0ee; color: #212529; }
.sch-modal-save { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #ffffff; background: #0d6efd; border: 1px solid #0d6efd; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: background .15s; }
.sch-modal-save:hover { background: #0b5ed7; border-color: #0b5ed7; }
.sch-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: none; border: none; cursor: pointer; color: #6c757d; transition: background .15s, color .15s; }
.sch-modal-close:hover { background: #f1f0ee; color: #212529; }
/* ══ Scheduler — responsive layer ════════════════════════════════════════════
Column widths are CSS vars consumed by the inline grid templates built in
Scheduler.razor's BuildVm(), so phones get narrower sticky columns and day
cells without touching the computed styles. Grids keep their own horizontal
pan (overflow: auto) — the page itself never scrolls sideways. */
.sch-page {
--sch-empcol: 210px; /* week view: sticky employee column */
--sch-cellw: 150px; /* week view: day cell minimum */
--sch-timecol: 62px; /* birds-eye: sticky time gutter */
--sch-becolw: 152px; /* birds-eye: employee column minimum */
/* body#body-pd is overflow:hidden (core-layout 2026), so the page must own
its height like .wo-page does — 80px = fixed header. dvh keeps the grid
fully reachable on mobile when the browser URL bar collapses/expands. */
height: calc(100vh - 80px);
height: calc(100dvh - 80px);
min-height: 0;
}
.sch-scroll { overscroll-behavior: contain; }
.sch-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sch-picker-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 61; width: 310px; background: #ffffff; border: 1px solid #dee2e6; border-radius: 12px; box-shadow: 0 12px 32px rgba(33,37,41,0.18); padding: 12px; animation: schFade .15s ease; }
.sch-needs-row { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid #f4f0ea; cursor: pointer; }
.sch-needs-missing { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; flex-wrap: wrap; }
.sch-empcell { position: sticky; left: 0; z-index: 4; background: #ffffff; display: flex; align-items: flex-start; gap: 11px; padding: 16px 18px; border-right: 1px solid #dee2e6; }
.sch-empcell-head { position: sticky; left: 0; z-index: 6; background: #ffffff; display: flex; align-items: flex-end; padding: 14px 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #adb5bd; border-right: 1px solid #dee2e6; }
.sch-modal-ov { position: fixed; inset: 0; z-index: 100; background: rgba(10,22,40,0.45); display: flex; align-items: center; justify-content: center; padding: 24px; animation: schFade .18s ease; }
.sch-modal-card { width: 100%; max-width: 460px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: #ffffff; border-radius: 16px; box-shadow: 0 24px 60px rgba(33,37,41,0.28); overflow: hidden; animation: schPop .22s cubic-bezier(.2,.7,.2,1); }
.sch-dates-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sch-dates-row .sch-input { flex: 1 1 0; min-width: 0; }
@media (max-width: 768px) {
.sch-page {
padding: 8px;
--sch-empcol: 138px;
--sch-cellw: 138px;
--sch-timecol: 48px;
--sch-becolw: 138px;
}
.sch-empcell { padding: 12px 10px; }
.sch-empcell-head { padding: 14px 10px; }
.sch-needs-row { flex-wrap: wrap; row-gap: 8px; }
.sch-needs-hint { display: none; }
.sch-modal-ov { padding: 12px; }
.sch-modal-card { max-height: 94vh; max-height: 94dvh; }
}
@media (max-width: 620px) {
/* the picker no longer fits anchored under its button — pin it to the
viewport instead (its sibling fixed backdrop still closes on tap-out) */
.sch-picker-panel { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 20px)); }
}
@media (max-width: 480px) {
.sch-dates-row { flex-wrap: wrap; }
.sch-dates-arrow { display: none; }
.sch-dates-row .sch-input { flex: 1 1 100%; }
}