html, body { height: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-image: var(--pulse-theme-bg); background-size: cover; background-repeat: no-repeat; background-position: center center; } /* Printing: strip the app chrome and neutralize the fixed-height/overflow shell so tall content (e.g. stickers) flows and paginates instead of being clipped to one viewport. */ @media print { .no-print { display: none !important; } .MasterLayoutHeader, .MasterLayoutFooter, .PulseZoneMenubar { display: none !important; } html, body, .MasterLayoutParent, .MasterLayoutContent, .PulseZoneParent, .PulseZoneContent { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: #fff !important; background-image: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } } .pulse-offCanvas-BG { background-color: rgba(0,0,0,0) !important; background-image: var(--pulse-theme-bg); background-size: cover; background-repeat: no-repeat; background-position: center center; } .divShadow { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .myContentDiv { border: 1px solid black; border-radius: 10px; background-color: rgba(255,255,255,0.5); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } /*#region Z-Index Settings*/ .fluent-dialog-overlay { z-index: 9999 !important; pointer-events: auto !important; } fluent-dialog { z-index: 10000 !important; pointer-events: auto !important; } .fluent-dialog { z-index: 10000 !important; pointer-events: auto !important; } .rz-dialog-wrapper { z-index: 2000 !important; } .rz-dialog { z-index: 2005 !important; pointer-events: auto !important; } /* Radzen popups (dropdown, autocomplete, datepicker, overlay) are appended to with a default z-index of 2000. Because the dialog above is forced to 10000, any popup opened inside a dialog would render behind it and have its clicks intercepted by the dialog content. Raise all Radzen popups above the dialog so they work. */ .rz-dropdown-panel, .rz-autocomplete-panel, .rz-datepicker-panel, .rz-datetime-panel, .rz-datatable-filter, .rz-overlaypanel, .rz-popup, .rz-tooltip { z-index: 10001 !important; } /* Fluent UI default overlay z-index */ /*::backdrop { z-index: 9998 !important; pointer-events: auto !important; }*/ /*#endregion Z-Index Settings*/ /*#region Layout for AI Pages*/ .aiParent { display: flex; flex-direction: column; /* Stack children vertically */ height: 100vh; background-color: var(--pulse-light-colour); } .aiHeader, .aiFooter { width: 100%; height: 56px; background-color: var(--pulse-dark-colour) !important; text-align: center; /* background: lightgray; */ } .aiMenu { min-height: 50px; /* Or min-height if you want flexibility */ border-bottom: 1px solid black; } .aiContent { flex: 1; padding: 10px; overflow: hidden; display: flex; background-color: white; gap: 10px; } .aiSidebar { flex-shrink: 0; width: 450px; overflow: auto; padding: 10px; /*border: 1px solid var(--pulse-dark-colour);*/ border-radius: 8px; } .aiBox { border: 1px solid black; border-radius: 10px; background-color: var(--pulse-light-2-colour); overflow-x: hidden; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .aiAssistBox { border-bottom: 1px solid white; margin-bottom: 5px; margin-top: -5px; /*border: 1px solid black;*/ background-color: var(--pulse-light-2-colour); overflow-x: hidden; } /*#endregion Layout for AI Pages*/ /*#region Pulse Menu Buttons*/ .nbMainSel { background-color: var(--pulse-light-colour) !important; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor:pointer; } .nbMainSel svg[part="icon-active"] { fill: var(--pulse-dark-colour) !important; } .nbMainSel svg[part="icon-rest"] { fill: var(--pulse-dark-colour) !important; } .nbMainSel div[part="label"] { color: var(--pulse-dark-colour) !important; } .nbMainUnSel { background-color: var(--pulse-dark-colour) !important; cursor: pointer; } .nbMainUnSel svg[part="icon-rest"] { /* fill: white !important; */ fill: var(--pulse-light-colour) !important; } .nbMainUnSel svg[part="icon-active"] { /* fill: white !important; */ fill: var(--pulse-light-colour) !important; } .nbMainUnSel div[part="label"] { /* color: white !important; */ color: var(--pulse-light-colour) !important; } .nbZoneUnSel { background-color: var(--pulse-light-colour) !important; border-top-left-radius: 10px; border-top-right-radius: 10px; } .nbZoneUnSel svg[part="icon-rest"] { fill: var(--pulse-dark-colour) !important; } .nbZoneUnSel svg[part="icon-active"] { fill: var(--pulse-dark-colour) !important; } .nbZoneUnSel div[part="label"] { color: var(--pulse-dark-colour) !important; } .nbZoneSel { background-color: var(--pulse-dark-colour) !important; border-radius:10px; } .nbZoneSel svg[part="icon-active"] { /* fill: white !important; */ fill: var(--pulse-light-colour) !important; } .nbZoneSel svg[part="icon-rest"] { /* fill: white !important; */ fill: var(--pulse-light-colour) !important; } .nbZoneSel div[part="label"] { /* color: white !important; */ color: var(--pulse-light-colour) !important; } /*#endregion Pulse Menu Buttons*/ /*#region Layout for Pulse Zones */ .PulseZoneParent { display: flex; flex-direction: column; /* Stack children vertically */ height: calc(100vh - 112px); /* Or whatever height your parent should be, like 100% */ } .PulseZoneMenubar { width: 100%; height: 56px; } .PulseZoneContent { /* flex: 1; */ /* width: 100%; */ height: calc(100vh - 188px); margin: 10px; padding: 10px; background-color: var(--pulse-dark-t25-colour); border-radius: 10px; overflow: hidden; } /*#endregion Layout for Pulse Zones */ /*#region Pulse Grids */ .pulse-column-grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /*grid-auto-rows: 100%; */ gap: 12px; margin: 16px 0; overflow-x: auto; overflow-y: hidden; } .pulse-grid-item { border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 0 12px 0; background: white; transition: box-shadow 0.2s ease; } .pulse-grid-item:last-child { margin-bottom: 0; } .animated-border { padding: 20px 40px; font-size: 1.5rem; color: white; border: 5px solid transparent; border-radius: 12px; background: #111; border-image: linear-gradient(45deg, #ff0057, #ff7b00, #00ffcc, #007bff) 1; animation: border-rotate 4s linear infinite; } @keyframes border-rotate { 0% { border-image-source: linear-gradient(0deg, #ff0057, #ff7b00, #00ffcc, #007bff); } 100% { border-image-source: linear-gradient(360deg, #ff0057, #ff7b00, #00ffcc, #007bff); } } @media (max-width: 768px) { .permission-grid { grid-auto-flow: row; grid-auto-columns: 1fr; max-height: none; overflow-x: hidden; overflow-y: auto; } } /*#endregion Pulse Grids */ /*#region Pulse Buttons*/ .btnShadow { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0); } .btnShadow:hover { cursor: pointer; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .myAccentBtn { --pulse-accent-btn-bg: var(--pulse-accent-btn-theme-colour); --pulse-accent-btn-colour: var(--pulse-accent-btn-theme-bg); border: 1px solid var(--pulse-accent-btn-colour); background-color: var(--pulse-accent-btn-bg); color: var(--pulse-accent-btn-colour); cursor: pointer; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0); } .myAccentBtn:hover { --pulse-accent-btn-bg: var(--pulse-accent-btn-theme-bg); --pulse-accent-btn-colour: var(--pulse-accent-btn-theme-colour); border: 1px solid var(--pulse-accent-btn-colour); background-color: var(--pulse-accent-btn-bg); color: var(--pulse-accent-btn-colour); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .myOkBtn { --pulse-ok-btn-bg: rgb(255,255,255); --pulse-ok-btn-colour: var(--success); border: 1px solid var(--pulse-ok-btn-colour); background-color: var(--pulse-ok-btn-bg); color: var(--pulse-ok-btn-colour); cursor: pointer; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0); } .myOkBtn:hover { --pulse-ok-btn-bg: var(--success); --pulse-ok-btn-colour: rgb(255,255,255); border: 1px solid var(--pulse-ok-btn-colour); background-color: var(--pulse-ok-btn-bg); color: var(--pulse-ok-btn-colour); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .myCancelBtn { --pulse-cancel-btn-bg: rgb(255,255,255); --pulse-cancel-btn-colour: var(--error); border: 2px solid var(--pulse-cancel-btn-colour); background-color: var(--pulse-cancel-btn-bg); color: var(--pulse-cancel-btn-colour); cursor: pointer; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0); } .myCancelBtn:hover { --pulse-cancel-btn-bg: var(--error); --pulse-cancel-btn-colour: rgb(255,255,255); border: 1px solid var(--pulse-cancel-btn-colour); background-color: var(--pulse-cancel-btn-bg); color: var(--pulse-cancel-btn-colour); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); } .myModeBtnOn { --pulse-mode-btn-bg: var(--pulse-mode-btn-on-bg); --pulse-mode-btn-item-colour: var(--pulse-mode-btn-on-item-colour); border: 1px solid var(--pulse-mode-btn-item-colour); } .myModeBtnOn:hover { cursor: not-allowed; } .myModeBtnOff { --pulse-mode-btn-bg: var(--pulse-mode-btn-off-bg); --pulse-mode-btn-item-colour: var(--pulse-mode-btn-off-item-colour); border: 1px solid var(--pulse-mode-btn-item-colour); } .myModeBtnOff:hover { box-shadow: 5px 5px 15px rgba(0, 0, 0, 1); cursor: pointer; } /*#endregion Pulse Buttons*/ .stagger-item { opacity: 0; transform: translateY(50px); transition: all 0.5s ease; } .stagger-item.visible { opacity: 1; transform: translateY(0); } /*#region Factory Zone Formatting*/ /* Pulsing red border for zones behind schedule */ .zone-behind { animation: pulse-behind 2s infinite ease-in-out; /*2s infinite;*/ stroke: #ef4444 !important; /*stroke-opacity: 0.95;*/ } @keyframes pulse-behind { 0%, 100% { stroke-width: 4; stroke-opacity: 0.95; } 50% { stroke-width: 8; stroke-opacity: 0.05; } } .zone-behind-warning { animation: warning-pulse 2s infinite ease-in-out; } @keyframes warning-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /*#endregion Factory Zone Formatting*/ /*#region Radzen Table Formatting*/ .rz-grid-table { cursor: pointer; } .rz-group-header-drop { flex: auto; text-align: center; border: 1px dashed var(--rz-text-tertiary-color); height: 100% !important; align-content: center; } .rz-group-header-items { flex: auto; text-align: center; border: 1px dashed var(--rz-text-tertiary-color); height: 100% !important; justify-content: center; padding: 5px; } .rz-group-header-item { border-color: var(--pulse-dark-colour) !important; } .rz-group-header-item:hover { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); cursor: pointer; } .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { font-weight: bolder; font-style: italic; /*--rz-grid-hover-background-color: var(--pulse-light-colour) !important; color: var(--pulse-dark-colour) !important;*/ } .rz-selectable tbody tr.rz-data-row.rz-state-highlight { font-weight: bolder; font-style: italic; /*background-color: var(--pulse-dark-colour) !important; color: var(--pulse-light-colour) !important;*/ } /*.rz-selectable tbody tr.rz-data-row.rz-state-highlight { color: white;*/ /*text-shadow: 0 1px 0 #000;*/ /*--border-angle: 0turn;*/ /* // For animation. */ /*--main-bg: conic-gradient( from var(--border-angle), #213, #112 5%, #112 60%, #213 95% ); --rz-grid-selected-background-color: var(--main-bg);*/ /* border-color: transparent; border-style: solid; border: 5px 1px 5px 1px;*/ /*border: 1px solid transparent; border-radius: 8px; --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent); background: var(--main-bg) padding-box,*/ /* // border-box extends this background to the border space */ /*var(--gradient-border) border-box,*/ /* // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background. */ /*var(--main-bg) border-box; background-position: center center; animation: bg-spin 3s linear infinite; }*/ .rz-column-drag:active { color: var(--pulse-dark-colour) !important; } .rz-grid-table thead th > div:not(.rz-cell-filter) { background-color: var(--pulse-dark-colour) !important; color: var(--pulse-light-colour) !important; } .rz-grid-table thead th .rz-column-title { color: var(--pulse-light-colour) !important; } .rz-grid-table thead th .rz-textbox { border: 1px solid var(--pulse-dark-colour) !important; } .rz-grid-table thead th .rz-numeric-input { border: 1px solid var(--pulse-dark-colour) !important; } thead tr { background-color: var(--pulse-dark-colour) !important; } /*.rz-group-header { justify-content: flex-end !important; }*/ .rz-cell-filter { background-color: var(--pulse-light-colour) !important; } /*#endregion Radzen Table Formatting*/ /*#region Radzen Dialog Formatting*/ .rz-dialog { border-radius: 10px !important; background-color: var(--pulse-light-colour) !important; } .rz-dialog-titlebar { background-color: var(--pulse-dark-colour) !important; padding-block: 0px 0px !important; padding-inline: 0px 0px !important; padding: 15px !important; } .rz-dialog-title { color: var(--pulse-light-colour) !important; } .rz-dialog-mask { opacity: 0.8 !important; } .rz-dialog-content { padding: 0.5em !important; flex: 1 1 !important; } .pulseDialogParent { display: flex; flex-direction: column; /* Stack children vertically */ height: 100%; /* Or whatever height your parent should be, like 100% */ overflow: hidden; } .pulseDialogHeader, .pulseDialogFooter { /* Fixed sizes; flexbox will respect these */ height: 60px; /* Or min-height if you want flexibility */ background: var(--pulse-dark-t50-colour); } .pulseDialogContent { flex: 1; /* This magic makes it grow to fill the space */ overflow: auto; } /*#endregion Radzen Dialog Formatting*/ /*#region Pulse Card Formatting*/ .pulseCard { border-radius: 10px; background-color: var(--pulse-light-colour); border: 1px solid var(--pulse-dark-colour); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); margin: 10px; } .pulseCard:hover { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); cursor: pointer; } .pulseCardHeader { background-color: var(--pulse-dark-colour); color: var(--pulse-light-colour); width: 100%; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .pulseCardContent { padding: 10px; } .pulseCardFooter { background-color: var(--pulse-dark-t50-colour); color: var(--pulse-light-colour); padding: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /*#endregion Pulse Card Formatting*/ .div-center-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; } .div-center-element { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 100%; min-height: 100%; } .ai-toprow { background-color: var(--pulse-dark-colour); height: 56px; } .paginator { background-color: var(--pulse-dark-t75-colour) !important; color: var(--pulse-light-colour); } .zone-toprow { background-color: var(--pulse-light-colour); border-bottom: 1px solid var(--pulse-dark-colour); height: 56px; } .ai-Mnu { background-color: #f7f7f7; background-image: linear-gradient(90deg, rgb(54,91,102) 20%, #bcd1d4 70%); border-bottom: 1px solid rgb(54,91,102); /*min-height: 3.5rem;*/ } .myCardHdr { background-color: var(--pulse-dark-colour); color: var(--pulse-light-colour); } a, .btn-link { color: #006bb7; } .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; } .fdgbrd { border-radius: 30px; box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .fdgrselected { background-color: var(--pulse-dark-t50-colour) !important; /* blue !important;*/ color: white !important; /* var(--pulse-dark-colour) !important;*/ cursor: pointer; } .card-body { padding: 1px !important; } .fdgrunselected { background-color: white; color: var(--pulse-dark-colour) !important; cursor: pointer; } .fdgrunselected :hover { cursor: pointer; } .table-virtualize-demo { /*height: auto;*/ margin: 15px; } .table-virtualize-demo .table-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-virtualize-demo .table-fixed-body { overflow-x: hidden !important; } h1:focus { outline: none; } tr[row-type='sticky-header'] > th { position: sticky; top: 0; /*background-color: var(--accent-fill-rest) !important;*/ background-color: var(--pulse-dark-colour) !important; /*color: var(--foreground-on-accent-rest) !important;*/ color: white !important; align-content: center; border-color: white !important; z-index: 2; } .col-sort-button { width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; /*background: linear-gradient(90deg, rgb(54,91,102) 20%, #bcd1d4 70%) !important;*/ /*background-color: #365b66 !important;*/ color: var(--pulse-dark-colour) !important; opacity: 0.85; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50260; } .validation-message { color: #e50260; } .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." } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .pulseSelectedCard { color: white; /*text-shadow: 0 1px 0 #000;*/ --border-angle: 0turn; /* // For animation. */ --main-bg: conic-gradient( from var(--border-angle), #213, #112 5%, #112 60%, #213 95% ); border: solid 5px transparent; border-radius: 8px; --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent); background: /* // padding-box clip this background in to the overall element except the border. */ var(--main-bg) padding-box, /* // border-box extends this background to the border space */ var(--gradient-border) border-box, /* // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background. */ var(--main-bg) border-box; background-position: center center; animation: bg-spin 3s linear infinite; } @keyframes bg-spin { to { --border-angle: 1turn; } } &:hover { animation-play-state: paused; } @property --border-angle { syntax: ""; inherits: true; initial-value: 0turn; }