/* DEFAULTS
----------------------------------------------------------*/
/* The site font: IBM Plex Sans + its Hebrew and Arabic companions (+ Cyrillic, Latin-ext), self-hosted in fonts/ (Fontsource, OFL),
weights 400 / 600 / 700 - switched from Open Sans on 2026-10-06; every font-family in the site, the inline Font.Name of
BasePage_UI and the ECharts theme name it. ascent-override / descent-override are Open Sans's vertical metrics
(2189 / 600 of 2048), kept on purpose: the line box and the baseline stay exactly where the old font put them, so every
page kept its vertical rhythm through the switch and text meets icons as before (without them Plex text sat 1px higher).
Greek, Vietnamese and the math / symbol blocks the old font carried fall back to the system font. */
/* arabic 400 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic 400 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew 400 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext 400 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 400 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic 600 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic 600 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew 600 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-hebrew-hebrew-600-normal.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext 600 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 600 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic 700 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic 700 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew 700 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-hebrew-hebrew-700-normal.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext 700 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 700 */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
ascent-override: 106.9%;
descent-override: 29.3%;
line-gap-override: 0%;
src: url(fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter self-hosted (variable font, weights 100-900) — no internet dependency */
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body {
font-size: .80em;
font-family: 'IBM Plex Sans', "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #333333;
}
button, input[type="button"], input[type="submit"], input[type="text"], textarea {
font-family: 'IBM Plex Sans', "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* The DevExpress default theme and the AjaxControlToolkit calendar pin Tahoma on their parts (menu bar, language menu, editors,
combo dropdown lists, popups, calendars, buttons, loading panels, tabs) - the site font instead; family only, sizes and
weights stay the theme's. `body` in front of every selector outranks the theme rule whatever the stylesheet order
(selectors from a stylesheet scan of the rendered pages, 2026-10-06). */
body .dxeBase, body .dxeButtonEdit, body .dxeTextBox, body .dxeMemo, body .dxeListBox, body .dxeCalendar, body .dxeCalendarButton,
body .dxeHyperlink, body .dxeRadioButtonList, body .dxeCheckBoxList, body .dxeErrorCell, body .dxeTrackBar, body .dxeTBValueToolTip,
body .dxeHelpText, body .dxvsValidationSummary, body .dxeBinImgSys, body .dxeBinImgProgressPnlSys,
body .dxbButton, body .dxmLite, body .dxnbLite, body .dxpLite, body .dxpcLite, body .dxdpLite, body .dxtcLite, body .dxpnlControl,
body .dxrpControl, body .dxrpControlGB, body .dxsmControl, body .dxtvControl, body .dxtiControl, body .dxsplControl,
body .dxucControl, body .dxucEditArea, body input[type="text"].dxucEditArea, body .dxucInlineDropZoneSys,
body .dxccControl, body .dxdvControl, body .dxhlControl, body .dxncControl, body .dxfmControl, body .dxfmControl .dxfm-rInput,
body .dxisControl, body .dxigControl, body .dxizControl .dxiz-hint > span, body .dxflFormLayout, body .dxrControl, body .dxhControl,
body .dxfabControl, body .dxfcControl, body .dxlpLoadingPanel, body .dxlpLoadingPanelWithContent, body .dxgvPRB .dxgvPRBL,
body .ajax__calendar_container {
font-family: 'IBM Plex Sans', "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}
a:link, a:visited {
color: #034af3;
text-align: center;
}
a:hover {
color: #1d60ff;
text-decoration: none;
}
a:active {
color: #034af3;
}
p {
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1 {
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 1.5em;
font-weight: 600;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
/* this rule styles and tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page {
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header {
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1 {
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main {
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
text-align: left;
}
.leftCol {
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer {
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink {
background-color: #3a4f63;
width: 100%;
text-align: left;
}
div.menu {
padding: 4px 0px 4px 8px;
}
div.menu ul {
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited {
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover {
background-color: #465c71;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active {
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset {
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p {
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label {
display: block;
}
fieldset label.inline {
display: inline;
}
legend {
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry {
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry {
width: 320px;
border: 1px solid #ccc;
}
/* MISC
----------------------------------------------------------*/
.clear {
clear: both;
}
.title {
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay {
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link {
color: white;
}
.loginDisplay a:visited {
color: white;
}
.loginDisplay a:hover {
color: white;
}
.failureNotification {
font-size: 1.2em;
color: Red;
}
.bold {
}
.submitButton {
text-align: right;
padding-right: 10px;
}
.undoreset * {
line-height: 1.2em;
}
.Invalid_characters_label {
background-color: #EA4335;
color: white;
}
.green_label {
background-color: mediumspringgreen;
padding: 3px;
}
.Topic_DropDownList {
background-color: white;
border: 1px solid #C0C0C0;
border-radius: 7px;
padding: 3px;
width: 307px;
display: inline-table;
}
.DropDownList_noborder {
background-color: white;
border: none;
padding: 3px;
display: inline-table;
}
.DropDownList {
background-color: white;
border: 1px solid #C0C0C0;
border-radius: 7px;
padding: 3px;
display: inline-table;
}
.DropDownList_300 {
background-color: white;
border: 1px solid #C0C0C0;
border-radius: 7px;
padding: 3px;
width: 307px;
display: inline-table;
}
.ASPxComboBox_ButtonStyle {
background: none !important;
border-color: transparent;
}
.Textbox {
border: 1px solid #C0C0C0;
border-radius: 7px;
padding: 5px;
}
.shadow1 {
-webkit-box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px; /* WebKit */
-moz-box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px; /* Firefox */
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px; /* Standard */
}
.DetailsView_general {
border: None;
color: Blue;
}
.DetailsView_general td, DetailsView_general th {
border: None;
}
.DetailsView_FieldHeaderStyle {
padding: 5px 20px 5px 20px;
color: black;
white-space: nowrap;
}
.Update_by {
color: #EA4335;
Font-Size: Small;
}
.Created_by {
color: #EA4335;
Font-Size: Small;
}
.table {
padding: 10px;
background: rgb(252,252,252);
background: radial-gradient(circle, rgba(252,252,252,1) 0%, rgba(245,245,245,1) 100%);
border-radius: 7px;
}
.table2 {
display: inline-block;
margin: 5px;
padding: 10px;
border-radius: 7px;
border: 1px solid #D8D8D8;
}
.table_no_shadow {
padding: 10px;
background: rgb(209,231,255);
background: linear-gradient(90deg, rgba(209,231,255,1) 0%, rgba(232,243,255,1) 100%);
border-radius: 7px;
}
.Required {
background-color: #EA4335;
color: white;
}
.columns_select {
border: 1px solid #D8D8D8;
background-color: #D9F4FF;
width: 100%;
}
.Delete_Button {
background-color: #C1362C;
color: white;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 0px 1px 5px 0px #C0C0C0; /* WebKit */
-moz-box-shadow: 0px 1px 5px 0px #C0C0C0; /* Firefox */
box-shadow: 0px 1px 5px 0px #C0C0C0; /* Standard */
border-radius: 7px;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.Delete_Button:hover {
background-color: #EA4335;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0px 4px 12px 0px rgba(193, 54, 44, 0.4);
}
.Delete_Button:active {
transform: translateY(0px);
box-shadow: 0px 1px 3px 0px rgba(193, 54, 44, 0.3);
}
.Edit_Button {
background-color: #ff6a00;
color: white;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 0px 1px 5px 0px #C0C0C0; /* WebKit */
-moz-box-shadow: 0px 1px 5px 0px #C0C0C0; /* Firefox */
box-shadow: 0px 1px 5px 0px #C0C0C0; /* Standard */
border-radius: 7px;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.Edit_Button:hover {
background-color: #ff8731;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0px 4px 12px 0px rgba(255, 106, 0, 0.4);
}
.Edit_Button:active {
transform: translateY(0px);
box-shadow: 0px 1px 3px 0px rgba(255, 106, 0, 0.3);
}
.Update_Button {
background-color: #34A853;
color: white;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 0px 1px 5px 0px #C0C0C0; /* WebKit */
-moz-box-shadow: 0px 1px 5px 0px #C0C0C0; /* Firefox */
box-shadow: 0px 1px 5px 0px #C0C0C0; /* Standard */
border-radius: 7px;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.Update_Button:hover {
background-color: #43C567;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0px 4px 12px 0px rgba(52, 168, 83, 0.4);
}
.Update_Button:active {
transform: translateY(0px);
box-shadow: 0px 1px 3px 0px rgba(52, 168, 83, 0.3);
}
.Update_Button_down {
background-color: #43C567;
color: white;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 7px;
}
.Cancel_Button {
border: None;
background-color: transparent;
color: blue;
padding: 7px;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 7px;
}
.Cancel_Button:hover {
text-decoration: underline;
cursor: pointer;
}
.Cancel_Button_no_padding {
border: None;
background-color: transparent;
color: blue;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 7px;
}
.Cancel_Button_no_padding:hover {
text-decoration: underline;
cursor: pointer;
}
.myButton {
border: None;
background-color: #2758a3;
color: white;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
-webkit-box-shadow: 0px 1px 5px 0px #C0C0C0; /* WebKit */
-moz-box-shadow: 0px 1px 5px 0px #C0C0C0; /* Firefox */
box-shadow: 0px 1px 5px 0px #C0C0C0; /* Standard */
border-radius: 7px;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.myButton:hover {
background-color: #387de8;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0px 4px 12px 0px rgba(37, 88, 163, 0.4);
}
.myButton:active {
transform: translateY(0px);
box-shadow: 0px 1px 3px 0px rgba(37, 88, 163, 0.3);
}
.myButton_down {
background-color: #387de8;
color: white;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 7px;
}
.myButton_gray {
border: None;
background-color: #CCCCCC;
padding: 4px;
border-radius: 7px;
}
.myButton_gray:hover {
background-color: #387de8;
color: white;
cursor: pointer;
}
.myButton_gray_down {
border: None;
background-color: #387de8;
color: white;
padding: 4px;
border-radius: 7px;
}
/* ASPxButton (Theme="Metropolis") vs plain asp:Button: the dx theme sets
font 12px Segoe UI, a 1px border + 1px outer padding, and 3px 8px 4px
padding on the inner div.dxb, so a dx button next to a myButton /
Delete_Button / Cancel_Button asp:Button never rendered the same size.
Normalize the theme metrics to the house metrics (7px 15px, no border,
browser-default 13.33px site font). !important per the house dx pattern -
the theme stylesheet styles the inner element itself.
Scoped to dx buttons that carry a house button class - a bare
.dxbButton_Metropolis rule also strips the border off the big image-tile
menu buttons (General/Default5 ASPxButton1). */
.dxbButton_Metropolis.myButton, .dxbButton_Metropolis.myButton_down, .dxbButton_Metropolis.Cancel_Button, .dxbButton_Metropolis.Delete_Button, .dxbButton_Metropolis.Edit_Button {
border: none !important;
padding: 0 !important;
margin-top: 3px;
margin-bottom: 3px;
font: 13.3333px 'IBM Plex Sans', "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
vertical-align: middle !important;
}
/* plain buttons sit on the text baseline while the dx button is
middle-aligned, so side by side they end up on different levels.
Give the house button classes the same middle alignment. */
.myButton, .myButton_down, .Cancel_Button, .Delete_Button, .Edit_Button {
vertical-align: middle;
}
.dxbButton_Metropolis.myButton div.dxb, .dxbButton_Metropolis.myButton_down div.dxb, .dxbButton_Metropolis.Cancel_Button div.dxb, .dxbButton_Metropolis.Delete_Button div.dxb, .dxbButton_Metropolis.Edit_Button div.dxb {
padding: 7px 15px !important;
/* the dx SYSTEM stylesheet (not the theme) sets .dxbButtonSys > div
{ line-height: 100%; } - plain buttons use line-height normal, and
that alone leaves the dx button ~5px shorter. */
line-height: normal !important;
}
.dxbButton_Metropolis.myButton div.dxb span.dx-vam, .dxbButton_Metropolis.myButton_down div.dxb span.dx-vam, .dxbButton_Metropolis.Cancel_Button div.dxb span.dx-vam, .dxbButton_Metropolis.Delete_Button div.dxb span.dx-vam, .dxbButton_Metropolis.Edit_Button div.dxb span.dx-vam {
/* the caption span carries its own 2px padding + reduced line-height,
adding ~1px over a plain button and shifting the internal baseline. */
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: normal !important;
}
.myButton_menu {
border: None;
color: white;
background-color: transparent;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 3px;
padding-left: 3px;
border-radius: 7px;
}
.myButton_menu:hover {
background-color: #387de8;
cursor: pointer;
}
.myButton_menu_down {
border: None;
color: white;
background-color: #387de8;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
border-radius: 7px;
}
.myButton_menu_disable {
border: None;
color: Gray;
background-color: transparent;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 3px;
padding-left: 3px;
}
.myButton_light_gray {
border: None;
background-color: transparent;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
border-radius: 7px;
}
.myButton_light_gray:hover {
background-color: #F7F7F7;
cursor: pointer;
}
.myButton_light_gray_down {
background-color: #F7F7F7;
border: None;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
padding-left: 15px;
border-radius: 7px;
}
.myButton_white {
background-color: transparent;
border: None;
color: blue;
border-radius: 7px;
}
.myButton_white:hover {
text-decoration: underline;
cursor: pointer;
}
.Button_Reset_filter {
background-color: transparent;
border: None;
color: blue;
border-radius: 7px;
}
.Button_Reset_filter:hover {
text-decoration: underline;
cursor: pointer;
}
.Button_filter {
background-color: transparent;
border: None;
color: gray;
border-radius: 7px;
}
.Button_filter:hover {
text-decoration: underline;
cursor: pointer;
}
/***************************************************************************************************************************/
.gridview {
color: black;
border: none;
}
.gridview_centered {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
color: black;
}
/* שינוי צבע עמודות פוגע בבחירת תאריך מתוך יומן */
.gridview_header_not_sticky {
background-color: #2758a3;
}
.gridview_header_not_sticky th {
font-weight: normal;
}
/* צבע לבן גם לכותרות ללא מיון */
.gridview_header_not_sticky th a, .gridview_header_not_sticky th {
text-decoration: none;
color: white;
}
.gridview_header {
background-color: #2758a3;
position: sticky;
z-index: 10;
top: 105px;
}
.gridview_header th {
font-weight: normal;
}
/* צבע לבן גם לכותרות ללא מיון */
.gridview_header th a, .gridview_header th {
text-decoration: none;
color: white;
}
.gridview_header_2 {
background-color: #2758a3;
position: sticky;
z-index: 10;
top: 49px;
}
.gridview_header_2 th {
font-weight: normal;
}
/* צבע לבן גם לכותרות ללא מיון */
.gridview_header_2 th a, .gridview_header_2 th {
text-decoration: none;
color: white;
}
/* print / PDF export: the sticky header stays in the flow. The PDF exports (Exp_manager export_To_Pdf, ABCpdf 14 with the
Chrome 146 engine, print media) embed this sheet whole and put the grid at the very top of the document - a sticky row
there is shoved down by its top offset (105px / 49px) and covers the first data rows (Manpower/Default13 PDF, 2026-10-01).
The engine before ABCpdf 14 did not apply sticky to table rows, so it never showed. Browser printing gets the same rule. */
@media print {
.gridview_header, .gridview_header_2 {
position: static;
}
}
.gridview_pager {
border: none;
}
.gridview_pager > td {
padding: 10px 0;
border: none;
}
.gridview_pager table {
margin: 0 auto;
border-spacing: 4px;
border: none;
}
.gridview_pager table td {
padding: 0;
}
.gridview_pager a {
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
padding: 0 5px;
font-size: 0.8em;
text-align: center;
text-decoration: none;
color: #2758a3;
background-color: white;
border: none;
border-radius: 7px;
font-weight: 500;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.gridview_pager a:hover {
background-color: #2758a3;
color: white;
box-shadow: 0 2px 6px rgba(39, 88, 163, 0.3);
text-decoration: none;
}
.gridview_pager span {
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
padding: 0 5px;
font-size: 0.8em;
text-align: center;
color: white;
background-color: #2758a3;
border: none;
border-radius: 7px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(39, 88, 163, 0.3);
}
.gridview_row {
background-color: white;
border-bottom: 1px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
}
.gridview_row_divider {
border-top: 1px solid #EBEBEB;
}
.gridview_AlternatingRow {
background-color: white;
border-bottom: 1px solid #EBEBEB;
}
.gridview_EditRow {
background-color: #f1df13;
}
.gridview_SelectedRow {
background-color: yellow;
}
.gridview_Footer {
}
.gridview_SortedAscendingCell {
background-color: #E9E7E2;
}
.gridview_SortedAscendingHeader {
background-color: #506C8C;
}
.gridview_SortedDescendingCell {
background-color: #FFFDF8;
}
.gridview_SortedDescendingHeader {
background-color: #6F8DAE;
}
.gridview_border {
border: 1px solid #D4D4D4;
}
.DetailsView_FieldHeaderStyle {
width: 100px;
min-width: 100px;
white-space: nowrap;
vertical-align: top;
}
/***************************************************************************************************************************/
.Master_page_background {
background-color: #EFEFEF;
min-height: 700px;
height: auto;
padding: 0px;
margin: 0px;
top: 0px;
width: 100%;
}
.myDiver {
min-height: 667px;
height: auto;
}
.menu_position_fixed_on {
width: 100%;
position: fixed;
top: 0px;
z-index: 1000;
}
.menu_position_fixed_off {
width: 100%;
z-index: 1000;
}
.search_textbox {
border: 3px solid #DCAE10;
border-radius: 7px;
padding: 3px;
}
.Chapter_title {
color: midnightblue;
font-size: x-large;
}
.footer_menu {
border-width: thin;
border-color: #999999;
padding: 10px;
margin: 0px;
width: 100%;
background-color: white;
border-top-style: solid;
}
.ChkBoxClass input {
/*width: 20px;
height: 20px;*/
margin: 5px;
-ms-transform: scale(1.5); /* IE */
-moz-transform: scale(1.5); /* FF */
-webkit-transform: scale(1.5); /* Safari and Chrome */
-o-transform: scale(1.5); /* Opera */
}
.status_bar {
text-align: center;
padding: 3px;
}
.Lock_Div {
width: 100vw;
height: 100vh;
z-index: 2000000001;
position: fixed;
top: 0;
left: 0;
}
.zoom1_5 {
transition: transform .2s;
}
.zoom1_5:hover {
transform: scale(1.5);
}
.zoom2 {
transition: transform .2s;
}
.zoom2:hover {
transform: scale(2);
}
.print_Button {
height: 50px;
width: 50px;
}
.linear_top_menu_background {
background: rgb(39,88,163);
background: linear-gradient(90deg, rgba(39,88,163,1) 0%, rgba(66,156,200,1) 50%, rgba(39,88,163,1) 100%);
}
.linear_top_menu_background_1 {
background: rgb(173,24,251);
background: linear-gradient(45deg, rgba(173,24,251,1) 0%, rgba(2,30,184,1) 100%);
}
.linear_top_menu_background_2 {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.linear_top_menu_background_3 {
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.linear_top_menu_background_4 {
background: rgb(176,131,236);
background: linear-gradient(84deg, rgba(176,131,236,1) 0%, rgba(247,164,216,1) 100%);
}
.linear_top_menu_background_5 {
background: rgb(128,251,184);
background: linear-gradient(127deg, rgba(128,251,184,1) 0%, rgba(55,209,123,1) 100%);
}
.linear_top_menu_background_6 {
background-image: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
}
.linear_top_menu_background_7 {
background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
}
.linear_top_menu_background_8 {
background: #31075D;
background: linear-gradient(90deg, rgba(49, 7, 93, 1) 0%, rgba(74, 139, 255, 1) 33%, rgba(255, 64, 190, 1) 66%, rgba(254, 114, 96, 1) 100%);
}
.linear_top_menu_background_9 {
background: rgb(177,140,245);
background: linear-gradient(129deg, rgba(177,140,245,1) 0%, rgba(113,149,245,1) 99%);
}
.linear_top_menu_background_10 {
background: rgb(90,152,247);
background: linear-gradient(45deg, rgba(90,152,247,1) 0%, rgba(124,127,246,1) 15%, rgba(193,104,227,1) 30%, rgba(212,106,169,1) 45%, rgba(222,105,101,1) 60%, rgba(226,121,74,1) 75%, rgba(234,171,63,1) 100%);
}
.linear_top_menu_background_11 {
background: rgb(82,86,247);
background: linear-gradient(90deg, rgba(82,86,247,1) 0%, rgba(30,68,175,1) 100%);
}
.linear_top_menu_background_12 {
background: rgb(110,11,212);
background: linear-gradient(90deg, rgba(110,11,212,1) 0%, rgba(1,162,178,1) 100%);
}
.linear_top_menu_background_13 {
background: rgb(6,4,51);
background: linear-gradient(120deg, rgba(6,4,51,1) 0%, rgba(51,1,122,1) 100%);
}
.linear_top_menu_background_14 {
background: rgb(83,101,0);
background: linear-gradient(55deg, rgba(83,101,0,1) 0%, rgba(115,139,0,1) 100%);
}
.linear_top_menu_background_15 {
background: rgb(26,48,97);
background: linear-gradient(90deg, rgba(26,48,97,1) 0%, rgba(144,7,155,1) 100%);
}
.linear_top_menu_background_16 {
background: rgb(2,120,108);
background: linear-gradient(90deg, rgba(2,120,108,1) 0%, rgba(127,157,57,1) 100%);
}
.linear_top_menu_background_17 {
background: rgb(114,0,54);
background: linear-gradient(130deg, rgba(114,0,54,1) 0%, rgba(148,2,67,1) 100%);
}
.linear_top_menu_background_18 {
background: rgb(0,166,84);
background: linear-gradient(120deg, rgba(0,166,84,1) 0%, rgba(0,201,155,1) 100%);
}
.linear_top_menu_background_19 {
background: rgb(33,68,126);
background: linear-gradient(120deg, rgba(33,68,126,1) 0%, rgba(44,88,163,1) 80%);
}
.linear_top_menu_background_20 {
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.linear_top_menu_background_21 {
background: rgb(34,34,34);
background: linear-gradient(45deg, rgba(34,34,34,1) 0%, rgba(196,196,196,1) 100%);
}
.linear_top_menu_background_22 {
background-color: #FAD961;
background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
}
.linear_top_menu_background_23 {
background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
}
.linear_top_menu_background_24 {
background: rgb(13,103,94);
background: linear-gradient(84deg, rgba(13,103,94,1) 0%, rgba(15,163,101,1) 94%);
}
.linear_top_menu_background_25 {
background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%);
}
.linear_top_menu_background_26 {
background: rgb(255,19,6);
background: linear-gradient(137deg, rgba(255,19,6,1) 0%, rgba(255,164,7,1) 100%);
}
.linear_top_menu_background_27 {
background: rgb(250,193,78);
background: linear-gradient(164deg, rgba(250,193,78,1) 0%, rgba(253,95,205,1) 100%);
}
.linear_top_menu_background_28 {
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}
.linear_top_menu_background_29 {
background: rgb(124,221,180);
background: linear-gradient(165deg, rgba(124,221,180,1) 0%, rgba(0,38,97,1) 68%, rgba(0,38,97,1) 100%);
}
.linear_top_menu_background_30 {
background-image: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);
}
.linear_top_menu_background_31 {
background: rgb(2,0,187);
background: radial-gradient(circle, rgba(2,0,187,1) 0%, rgba(0,0,57,1) 100%);
}
.linear_top_menu_background_32 {
background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
}
.linear_top_menu_background_34 {
background: rgb(71,114,148);
background: linear-gradient(90deg, rgba(71,114,148,1) 0%, rgba(149,244,210,1) 100%);
}
.linear_top_menu_background_35 {
background: rgb(62,244,167);
background: linear-gradient(90deg, rgba(62,244,167,1) 0%, rgba(14,125,217,1) 100%);
}
.linear_top_menu_background_36 {
background: rgb(159,55,56);
background: linear-gradient(90deg, rgba(159,55,56,1) 0%, rgba(71,7,7,1) 100%);
}
.linear_top_menu_background_37 {
background: rgb(21,44,74);
background: radial-gradient(circle, rgba(21,44,74,1) 50%, rgba(32,68,116,1) 100%);
}
.linear_top_menu_background_38 {
background: rgb(102,62,122);
background: linear-gradient(90deg, rgba(102,62,122,1) 0%, rgba(252,41,122,1) 100%);
}
.linear_top_menu_background_39 {
background: rgb(33,126,35);
background: linear-gradient(90deg, rgba(33,126,35,1) 0%, rgba(156,239,59,1) 100%);
}
.linear_top_menu_background_40 {
background: rgb(255,0,0);
background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,0,219,1) 100%);
}
.linear_button_menu_background {
background: rgb(59,59,59);
background: radial-gradient(circle, rgba(59,59,59,1) 0%, rgba(29,29,29,1) 100%);
}
.plus {
vertical-align: middle;
margin-bottom: 10px;
height: 25px;
width: 25px;
transition: transform .1s;
}
.plus:hover {
transform: scale(1.2);
}
.lds-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #003399;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ltr {
direction: ltr;
}
.RadioButtonList_training_category {
padding: 10px;
background-image: linear-gradient(-225deg, #321575 0%, #8D0B93 50%, #FF057C 100%);
color: white;
border-radius: 7px;
}
.RadioButtonList_training_category [type="radio"] {
margin-left: 10px;
}
.RadioButtonList_training_category input[type=radio]:checked + label {
color: gold;
font-weight: bold;
font-size: medium;
}
.RadioButtonList_training_category_rtl {
padding: 10px;
background-image: linear-gradient(-225deg, #321575 0%, #8D0B93 50%, #FF057C 100%);
color: white;
border-radius: 7px;
}
.RadioButtonList_training_category_rtl [type="radio"] {
margin-right: 10px;
}
.RadioButtonList_training_category_rtl input[type=radio]:checked + label {
color: gold;
font-weight: bold;
font-size: medium;
}
.ASPxButton1 {
border-radius: 7px;
margin: 5px;
}
/* the tile pages' group wrapper (General/Default5: one div around the report row, one around the module tiles). The new
shell lays each group out as a fluid grid (Styles/new_ui.css .dw-tiles); the classic interface keeps the tiles centred
as the old table cell did, with the old two-
gap between the groups */
.dw-tiles {
text-align: center;
}
.dw-tiles + .dw-tiles {
margin-top: 24px;
}
.ASPxButton2 {
border-radius: 7px;
}
.left_buttons {
left: -2px;
z-index: 1000000;
margin: 0;
padding: 0;
position: fixed;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.button-support {
background-image: linear-gradient( 135deg, #FD6E6A 10%, #FFC600 100%);
color: white;
border-radius: 7px;
}
.button-settings {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 90px;
margin-bottom: 5px;
}
.loader {
width: 60px;
aspect-ratio: 4;
--_g: no-repeat radial-gradient(circle closest-side,#FFC300 90%,#0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100%/3) 100%;
animation: l7 1s infinite linear;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2000000002;
color: #FFC300;
}
@keyframes l7 {
33% {
background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%
}
50% {
background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%
}
66% {
background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%
}
}
.eng_eye {
position: absolute;
right: 0;
top: 10px;
border: none;
background-color: transparent;
filter: brightness(80%) opacity(0.6);
cursor: pointer;
}
input[type="checkbox"]:disabled {
cursor: not-allowed;
}
input[type="checkbox"] {
appearance: none; /* Remove default styling */
-webkit-appearance: none; /* For WebKit browsers */
-moz-appearance: none; /* For Mozilla browsers */
width: 16px; /* Slightly larger for better visibility */
height: 16px;
border: 2px solid #ccc; /* Softer border color for disabled state */
border-radius: 3px; /* Rounded corners */
background-color: #f9f9f9; /* Light background for disabled checkbox */
display: inline-block;
position: relative;
cursor: not-allowed; /* Disabled cursor */
vertical-align: middle;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
transition: background-color 0.2s, border-color 0.2s; /* Smooth transitions */
cursor: pointer;
}
input[type="checkbox"]:checked {
background-color: #007bff; /* Blue background for checked state */
border-color: #007bff; /* Match border with background */
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg); /* Center and rotate the checkmark */
width: 5px; /* Slightly larger for better visibility */
height: 10px;
border: solid white;
border-width: 0 2px 2px 0; /* Create the checkmark using borders */
box-sizing: border-box; /* Ensure consistent sizing */
}
/* radio */
input[type="radio"]:disabled {
appearance: none; /* Remove default styling */
-webkit-appearance: none;
-moz-appearance: none;
width: 12px;
height: 12px;
border: 1px solid gray;
border-radius: 50%; /* Make it circular for radio buttons */
display: inline-block;
position: relative;
vertical-align: middle;
}
input[type="radio"]:disabled:checked {
background-color: white;
border: 1px solid #007bff;
}
input[type="radio"]:disabled:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px; /* Inner circle size */
height: 6px;
background-color: #007bff;
border-radius: 50%; /* Make inner dot circular */
}
/* Sections card: white card with title + action header, holds a .switch-grid */
.sections-card {
background: #ffffff;
border: 1px solid #e3e7ee;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
padding: 14px 18px;
}
.sections-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.sections-card-title {
font-size: 15px;
font-weight: 600;
color: #344054;
}
/* Toggle switch: put CssClass="switch-item" on an asp:CheckBox (renders span > input + label),
or CssClass="switch-list" on an asp:CheckBoxList (renders every item as input + label).
Logical properties keep the knob direction correct in RTL. */
.switch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 4px 18px;
}
.switch-item {
display: inline-block;
position: relative;
vertical-align: middle;
}
.switch-grid .switch-item {
display: block;
}
.switch-list {
display: inline-block;
position: relative;
vertical-align: middle;
}
.switch-list td {
padding-inline-end: 10px;
}
.switch-item input[type="checkbox"],
.switch-list input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.switch-item label,
.switch-list label {
position: relative;
display: inline-block;
padding-inline-start: 32px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 18px;
color: #475467;
cursor: pointer;
user-select: none;
}
.switch-item label:hover,
.switch-list label:hover {
color: #1d2939;
}
.switch-item label::before,
.switch-list label::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 14px;
border-radius: 7px;
background: #e1e5ea;
transition: background 0.2s ease;
}
.switch-item label::after,
.switch-list label::after {
content: "";
position: absolute;
inset-inline-start: 2px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
transition: inset-inline-start 0.2s ease;
}
.switch-item input[type="checkbox"]:checked + label::before,
.switch-list input[type="checkbox"]:checked + label::before {
background: #2758a3;
}
.switch-item input[type="checkbox"]:checked + label::after,
.switch-list input[type="checkbox"]:checked + label::after {
inset-inline-start: 12px;
}
.switch-item input[type="checkbox"]:focus-visible + label::before,
.switch-list input[type="checkbox"]:focus-visible + label::before {
outline: 2px solid #387de8;
outline-offset: 2px;
}
/* Text-less CheckBox renders - no label to draw on,
so the input itself becomes the switch (input is :last-child only when no label follows). */
.switch-item input[type="checkbox"]:last-child {
position: relative;
opacity: 1;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 24px;
height: 14px;
border: none;
border-radius: 7px;
background-color: #e1e5ea;
box-shadow: none;
margin: 0;
vertical-align: middle;
cursor: pointer;
transition: background-color 0.2s ease;
}
.switch-item input[type="checkbox"]:last-child::after {
content: "";
position: absolute;
top: 50%;
left: auto;
inset-inline-start: 2px;
transform: translateY(-50%);
width: 10px;
height: 10px;
border: none;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
transition: inset-inline-start 0.2s ease;
}
.switch-item input[type="checkbox"]:last-child:checked {
background-color: #2758a3;
border-color: transparent;
}
.switch-item input[type="checkbox"]:last-child:checked::after {
inset-inline-start: 12px;
}
.switch-item input[type="checkbox"]:last-child:focus-visible {
outline: 2px solid #387de8;
outline-offset: 2px;
}
.switch-item input[type="checkbox"]:last-child:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Column chooser modal (columns-chooser-modal skill, pilot Project_Tracking/Default1): the page lays the
column toggles on a fixed N-column grid (div.columns_grid, inline grid-template-columns: repeat(N, auto));
each checkbox is one cell through its switch-item wrapper span and its caption never wraps. */
.columns_grid .switch-item {
white-space: nowrap;
display: flex; /* no inline line-box strut under the label - the row is exactly the toggle's height */
align-items: center;
}
/* the popup shrink-wraps to the grid's content, then the vertical scrollbar appears and steals its width -
reserve the gutter up front so the grid never overflows sideways by exactly one scrollbar */
.columns_grid {
scrollbar-gutter: stable;
}
/* Permission-matrix toggle buttons (System/Default3): server logic is keyed to BackColor
(White=off, Blue/Orange=on) - restyle by inline-style state, keep the button element.
Knob is a radial-gradient (pseudo-elements are unreliable on input[type=submit]);
!important beats the rendered inline background-color/border. */
input.perm-switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 24px !important;
height: 14px !important;
padding: 0 !important;
border: none !important;
border-radius: 7px !important;
font-size: 0 !important;
color: transparent !important;
cursor: pointer;
vertical-align: middle;
background: radial-gradient(circle 5px at 7px 50%, #ffffff 98%, transparent) #e1e5ea !important;
transition: background-color 0.2s ease;
}
input.perm-switch[style*="Blue"] {
background: radial-gradient(circle 5px at 17px 50%, #ffffff 98%, transparent) #2758a3 !important;
}
input.perm-switch[style*="Orange"] {
background: radial-gradient(circle 5px at 17px 50%, #ffffff 98%, transparent) #e8871e !important;
}
/* RTL: knob rests on the right when off, travels left when on */
[dir="rtl"] input.perm-switch {
background: radial-gradient(circle 5px at calc(100% - 7px) 50%, #ffffff 98%, transparent) #e1e5ea !important;
}
[dir="rtl"] input.perm-switch[style*="Blue"] {
background: radial-gradient(circle 5px at calc(100% - 17px) 50%, #ffffff 98%, transparent) #2758a3 !important;
}
[dir="rtl"] input.perm-switch[style*="Orange"] {
background: radial-gradient(circle 5px at calc(100% - 17px) 50%, #ffffff 98%, transparent) #e8871e !important;
}
/* =============================================================
Modal (dx:ASPxPopupControl) - shared modern look for ALL modals.
Usage: add CssClass="modal" to the popup control.
Optional content helpers: modal_body, modal_label, modal_check,
modal_disclaimer, modal_footer, modal_btn + modal_btn_primary /
modal_btn_secondary.
Dark-mode rules live in dark_mode.css.
============================================================= */
/* Pinned to the viewport rather than trusting the coordinates DevExpress computes for
PopupHorizontalAlign/PopupVerticalAlign="WindowCenter". Those are document coordinates on a
position:absolute element, but the content column lives inside .Panel5, which is itself
position:absolute and so becomes the containing block - the popup then lands outside the view
and only the backdrop is visible. left/top/position/margin need !important to beat the inline
styles DevExpress writes; transform must NOT, so the entrance animation below can still run.
Consequence: every popup using this class must be AllowDragging="false", because dragging
writes the same inline left/top these rules override. */
.modal {
border: none !important;
border-radius: 14px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: 0 24px 60px rgba(15, 40, 80, 0.28) !important;
position: fixed !important;
left: 50% !important;
top: 50% !important;
margin: 0 !important;
max-width: 96vw; /* a wide popup (column chooser at 1500px) never runs off a small screen */
transform: translate(-50%, -50%);
z-index: 2147483000 !important;
animation: modal_in 0.22s ease-out;
}
@keyframes modal_in {
from {
opacity: 0;
transform: translate(-50%, calc(-50% + 14px)) scale(0.97);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
.modal::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, #0066CC, #7c3aed);
}
.modal .dxpc-headerWrapper,
.modal .dxpc-header {
background: #ffffff !important;
border: none !important;
}
.modal .dxpc-headerWrapper {
border-bottom: 1px solid #e8edf3 !important;
}
.modal .dxpc-header {
padding: 12px 16px !important;
}
.modal .dxpc-header,
.modal .dxpc-header td,
.modal .dxpc-headerText {
color: #16324f !important;
font-size: 15px !important;
font-weight: 600 !important;
}
/* close button: hide the stock image, draw a modern round-hover X instead */
.modal .dxpc-closeBtn,
.modal .dxpc-closeBtn > * {
background-image: none !important;
}
.modal .dxpc-closeBtn img {
display: none !important;
}
.modal .dxpc-closeBtn {
width: 28px !important;
height: 28px !important;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.15s ease;
}
.modal .dxpc-closeBtn::before {
content: '\00D7';
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #7a8699;
transition: color 0.15s ease;
}
.modal .dxpc-closeBtn:hover {
background-color: #eef2f7;
}
.modal .dxpc-closeBtn:hover::before {
color: #16324f;
}
.modal .dxpc-contentWrapper,
.modal .dxpc-content {
background: #ffffff !important;
border: none !important;
}
.modal .dxpc-content {
padding: 18px 20px !important;
}
/* opt-in for modals hosting a combo / date picker: their drop-down lists render inside the popup and would be
cut by the overflow clip above; the rounded corners move to the bar and the content wrapper instead */
.modal.modal_overflow,
.modal.modal_overflow .dxpc-contentWrapper,
.modal.modal_overflow .dxpc-content {
overflow: visible !important;
}
.modal.modal_overflow::before {
border-radius: 14px 14px 0 0;
}
.modal.modal_overflow .dxpc-contentWrapper,
.modal.modal_overflow .dxpc-content {
border-radius: 0 0 14px 14px;
}
.modal_body {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 330px;
max-width: 420px;
}
.modal_label {
display: block;
font-size: 12px;
font-weight: 600;
color: #5a6b7f;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.modal_check {
color: #33475b;
}
.modal_check label {
cursor: pointer;
}
.modal_check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #0066CC;
vertical-align: -3px;
margin-inline-end: 8px;
cursor: pointer;
}
.modal_disclaimer {
color: #7a8699;
}
.modal_disclaimer label {
font-size: 12px;
line-height: 1.5;
}
.modal_footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 14px;
border-top: 1px solid #eef1f5;
}
.modal_btn {
border-radius: 8px !important;
padding: 9px 18px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.modal_btn_primary {
background: linear-gradient(135deg, #0066CC, #7c3aed) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 4px 14px rgba(0, 102, 204, 0.35);
}
.modal_btn_primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 102, 204, 0.45);
}
.modal_btn_secondary {
background: #f1f4f8 !important;
color: #33475b !important;
border: 1px solid #d9e1ea !important;
}
.modal_btn_secondary:hover {
background: #e6ebf2 !important;
}
.modal .dxeButtonEdit {
border-radius: 8px !important;
border: 1px solid #d9e1ea !important;
}
/* dimmed + blurred backdrop behind every modal popup */
.dxpcModalBackLite,
.dxpclModalBackLite,
.dxpc-modalBack {
background-color: rgba(15, 23, 42, 0.45) !important;
opacity: 1 !important;
backdrop-filter: blur(2px);
}
/* ===== two-column modal (System/Default5 company card, 2026-09-27) =====
an add / edit modal with more than ~10 field rows splits them into two
blocks inside this
wrapper (popup Width="1000px"): always side by side, as the owner asked - not a viewport-dependent auto-fit (a zoomed
or narrow window must not stack them). The definite width matters: inside the popup's shrink-to-fit content an
indefinite grid container collapses to one column. 940px = the popup minus its content padding; the calc() keeps
the grid inside a popup capped by .modal's max-width: 96vw. No @media (STANDARDS section 10); the direction follows
the page (Hebrew = first column on the right) */
.modal-cols {
width: min(940px, calc(96vw - 60px));
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
align-items: start;
}
/* =============================================================
Export toolbar (user_controls/Export_Toolbar.ascx, 2026-09-30)
A Columns button and ONE Export button; the Export button is a native whose menu holds the four
formats (Word / Excel / PDF portrait / PDF landscape) and the Download / Email choice. The format controls
stay asp:ImageButtons with the original image URLs - BasePage.FlattenHierachy1 keys the full-postback
registration on those URLs - drawn at 20px; each caption is an asp:Label with AssociatedControlID, so the
caption activates its image button and the whole row reads as one item. The RadioButtonList renders in Flow
layout: its radios are visually hidden and their labels draw the two-segment toggle (input:checked + label).
Every selector is scoped under .dw-export so the class rules beat this sheet's generic input[type="submit"]
rule and the shell sheets; logical properties keep the menu on the row's end side in RTL. Close on outside
click / Escape and the clipped-container fallback live in Scripts/datwise_site.js; dark palette in
dark_mode.css.
============================================================= */
/* A toolbar above a NARROW grid (no Width="100%"): the host wraps the toolbar table and the GridView in this block.
The block shrinks to the grid (fit-content), so the toolbar's 100% table is exactly as wide as the grid and the
toolbar sits on the grid's end edge instead of the page's - the same place it has above a full-width grid. A block,
not inline-block, so the line breaks the table had before and after it stay (owner, 2026-10-13). */
.dw-grid-block {
width: fit-content;
max-width: 100%;
}
.dw-export {
display: inline-flex;
align-items: center;
gap: 8px;
vertical-align: middle;
}
.dw-export .dw-export-columns {
display: inline-flex;
}
/* the Columns button is a LinkButton (an ): no link underline, the button's own colour */
.dw-export .dw-export-columns a.dw-export-btn {
text-decoration: none;
}
.dw-export .dw-export-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
box-sizing: border-box;
margin: 0;
padding: 0 12px;
border: 1px solid #c9d0dc;
border-radius: 8px;
background-color: #ffffff;
color: #2758a3;
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease;
}
.dw-export .dw-export-btn:hover {
background-color: #eaf0ff;
}
.dw-export .dw-export-btn:focus-visible {
outline: 2px solid #387de8;
outline-offset: 1px;
}
.dw-export .dw-export-menu {
position: relative;
}
/* the summary is the button: no disclosure triangle (list-style per the standard, the -webkit marker for Safari) */
.dw-export .dw-export-menu > summary {
list-style: none;
user-select: none;
}
.dw-export .dw-export-menu > summary::-webkit-details-marker {
display: none;
}
.dw-export .dw-export-menu > summary svg {
flex-shrink: 0;
}
.dw-export .dw-export-menu[open] > summary {
background-color: #eaf0ff;
}
/* the menu: below the button, flush with its end edge; z-index above the sticky grid header (10) */
.dw-export .dw-export-list {
position: absolute;
top: calc(100% + 6px);
inset-inline-end: 0;
z-index: 20;
width: 236px;
box-sizing: border-box;
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
background-color: #ffffff;
border: 1px solid #e2e6ef;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
text-align: start;
font-weight: 400;
}
.dw-export .dw-export-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
border-radius: 6px;
}
.dw-export .dw-export-item:hover {
background-color: #f7f9fc;
}
.dw-export .dw-export-icon {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.dw-export .dw-export-icon:focus-visible {
outline: 2px solid #387de8;
outline-offset: 2px;
border-radius: 4px;
}
.dw-export .dw-export-caption {
flex-grow: 1;
padding: 9px 0;
color: #1f2937;
font-size: 13px;
cursor: pointer;
}
.dw-export .dw-export-sep {
height: 1px;
margin: 4px 2px;
background-color: #e2e6ef;
}
.dw-export .dw-export-cap {
display: block;
padding: 4px 8px 6px;
color: #6b7280;
font-size: 11px;
font-weight: 600;
}
.dw-export .dw-export-deliver {
position: relative;
display: flex;
height: 32px;
box-sizing: border-box;
margin: 0 4px 4px;
border: 1px solid #c9d0dc;
border-radius: 8px;
background-color: #ffffff;
overflow: hidden;
}
/* the radios stay in the tab order and keep the RadioButtonList's postback value; only their labels are seen */
.dw-export .dw-export-deliver input {
position: absolute;
width: 0;
height: 0;
margin: 0;
opacity: 0;
pointer-events: none;
}
.dw-export .dw-export-deliver label {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.dw-export .dw-export-deliver label:hover {
background-color: #f7f9fc;
}
.dw-export .dw-export-deliver label + input + label {
border-inline-start: 1px solid #e2e6ef;
}
.dw-export .dw-export-deliver input:checked + label {
background-color: #eaf0ff;
color: #2758a3;
}
.dw-export .dw-export-deliver input:focus-visible + label {
box-shadow: inset 0 0 0 2px #387de8;
}
/* === Wide grids (Scripts/datwise_site.js: dwWide / the floating scrollbar) =============================================
.dw-wide - the content card (Site.master Main_div) while a grid is wider than it: a horizontal scroll container, so
the far columns stay reachable in a right-to-left page (the overflow otherwise runs past the left edge of the window,
which the left-to-right document cannot scroll to). overflow-y stays hidden. A scroll container captures the sticky
grid header; with top:0 it holds at the card's top instead of pushing down by its page offset (.gridview_header
top:105px above) - on a wide grid the header scrolls with the card, a narrow grid keeps the page-anchored one.
Shell-only in new_ui.css until 2026-09-30.
.dw-hscroll - the scrollbar pinned to the bottom of the window while a wide grid is in view; the script places it over
the container's on-screen width and sizes the spacer. Under the classic corner buttons (#scroll_buttons and the
WhatsApp button sit at bottom:20px), above the sticky headers (z-index 10), below popups and toasts. */
.dw-wide {
overflow-x: auto;
overflow-y: hidden;
}
.dw-wide .gridview_header, .dw-wide .gridview_header_2 {
top: 0;
}
.dw-hscroll {
display: none;
position: fixed;
bottom: 0;
left: 0;
height: 14px; /* owner 2026-09-30: 22px was too thick */
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
background-color: #f3f5f9;
border-top: 1px solid #c9d0dc;
box-shadow: 0 -3px 10px rgba(15, 40, 80, 0.18);
z-index: 500;
}
.dw-hscroll > div {
height: 1px;
}
/* the bar has to catch the eye (owner, 2026-09-30: the default grey was too discreet): a grey track with a blue pill
thumb in the brand colour, no arrow buttons. Chromium ignores the ::-webkit-scrollbar rules once scrollbar-color /
scrollbar-width are set on the element, so the standard properties go only to browsers without the pseudo-elements
(Firefox) through @supports - a feature query, not a media query */
.dw-hscroll::-webkit-scrollbar, .dw-grid-scroll::-webkit-scrollbar {
height: 12px;
}
.dw-hscroll::-webkit-scrollbar-track, .dw-grid-scroll::-webkit-scrollbar-track {
background-color: #dde3ec;
border-radius: 6px;
margin: 0 6px;
}
.dw-hscroll::-webkit-scrollbar-thumb, .dw-grid-scroll::-webkit-scrollbar-thumb {
background-color: #2758a3;
border-radius: 6px;
border: 2px solid #dde3ec;
min-width: 60px;
}
.dw-hscroll::-webkit-scrollbar-thumb:hover, .dw-grid-scroll::-webkit-scrollbar-thumb:hover {
background-color: #387de8;
}
.dw-hscroll::-webkit-scrollbar-button, .dw-grid-scroll::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
@supports not selector(::-webkit-scrollbar) {
.dw-hscroll, .dw-grid-scroll {
scrollbar-width: auto;
scrollbar-color: #2758a3 #dde3ec;
}
}
/* the wide grid's own scroll wrapper (datwise_site.js wrapGrids): only the table slides, the filters and the toolbar
above it stay put. overflow-y hidden as for .dw-wide - a popup opened from an inline-edit row near the bottom is
clipped at the grid's edge. The sticky header holds at the wrapper's top (see .dw-wide). Its own scrollbar, at the
grid's bottom and shown while the floating one is not, is styled like the floating one above */
.dw-grid-scroll {
overflow-x: auto;
overflow-y: hidden;
}
.dw-grid-scroll .gridview_header, .dw-grid-scroll .gridview_header_2 {
top: 0;
}
/* a .gridview_centered table is a column flex container that CENTRES its tbody: once the tbody is wider than the
table, half the overflow hangs off the start edge, where no scrolling reaches (the first columns of a wide
employee list were simply gone). While the grid scrolls sideways the tbody starts at the start edge instead */
.dw-grid-scroll > .gridview_centered, .dw-wide .gridview_centered {
align-items: flex-start;
}
/* the row bar: the same bar over an empty client-side row right after the wide grid's header (datwise_site.js
rowBar / place) - the bar lives in the body, placed in document coordinates over the spacer row, so the table
scrolling under it never carries it away; the spacer cell drops the grid's cell padding and borders */
.dw-hscroll-top {
display: block;
position: absolute;
bottom: auto;
border-top: none;
border-bottom: 1px solid #c9d0dc;
box-shadow: none;
z-index: 5;
}
tr.dw-hscroll-row > td {
height: 14px;
padding: 0;
border: 0;
background: transparent;
line-height: 0;
}
/* the floating copy of a wide grid's header (datwise_site.js buildHead / floatHead): pinned where the sticky header
of a narrow grid sits (.gridview_header top:105px, _2 at 49px), clipped to the wrapper's width and scrolled with it.
The copied row keeps its gridview_header* class for the colours - its sticky positioning must not act inside the
clip, hence static */
.dw-hscroll-head {
display: none;
position: fixed;
top: 105px;
overflow: hidden;
z-index: 9;
box-shadow: 0 3px 8px rgba(15, 40, 80, 0.18);
}
.dw-hscroll-head.dw-head-2 {
top: 49px;
}
.dw-hscroll-head > table {
margin-top: 0;
margin-bottom: 0;
table-layout: fixed;
}
.dw-hscroll-head .gridview_header, .dw-hscroll-head .gridview_header_2 {
position: static;
}
/* ===== Card pages: section heads, add buttons, actions (Event/Default4 first, 2026-09-30) =====
The shared controls user_controls/Section_head.ascx (a chapter head: title, "Add" button, tools) and
Card_actions.ascx (Edit / send email / Export menu) and the page's own .dw-card / .dw-groups / .dw-group-head /
.dw-add-row panels take their classic look from here - one place for every card, the tokens for the colours.
The new UI shell restyles the same classes in Styles/new_ui.css section 9; App.css carries the head rules for the
mobile pages that host the GPS control. */
:root {
--card-accent: #2758a3;
--card-accent-soft: #eaf0ff;
--card-border: #e2e6ef;
--card-muted: #6b7280;
}
.dw-section-head {
display: flex;
align-items: center;
gap: 10px;
margin: 24px 0 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--card-border);
}
.dw-section-tools {
display: inline-flex;
align-items: center;
gap: 8px;
margin-inline-start: auto;
}
.dw-section-tools .print_Button {
width: 24px;
height: 24px;
}
.dw-add-pill {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid var(--card-accent);
border-radius: 14px;
background-color: #fff;
color: var(--card-accent);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.dw-add-pill:hover {
background-color: var(--card-accent-soft);
}
.dw-group-head {
display: block;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--card-border);
font-size: 14px;
font-weight: 600;
}
.dw-add-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0;
}
.dw-add-row-cap {
color: var(--card-muted);
font-size: 12.5px;
}
.dw-card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.dw-card-actions .dw-export {
margin-inline-start: auto;
}
/* System update notice (Scripts/datwise_site.js dwSysUpdate block, App_Code/System_update.vb): the countdown bar every open
page shows once an update is scheduled on Management/Default96. Fixed at the top centre, above the page chrome and the new
interface layers (1500), below the postback lock and the modals. Yellow = coming, red = last 5 minutes / in progress,
green = done (click reloads). Site.css and App.css carry the same block; dark palette in dark_mode.css. */
.dw-sysupdate-bar {
position: fixed;
top: 8px;
/* centred by auto margins between two insets, not left: 50% + translate - that shape caps the width at half the screen */
left: 4vw;
right: 4vw;
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
max-width: 920px;
z-index: 1600;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
padding: 8px 14px;
border: 1px solid #e0b93c;
border-radius: 8px;
background-color: #fff3cd;
color: #5c4400;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
.dw-sysupdate-bar.dw-sysupdate-final {
border-color: #8e1c1c;
background-color: #c62828;
color: #fff;
}
.dw-sysupdate-bar.dw-sysupdate-done {
border-color: #1b5e20;
background-color: #2e7d32;
color: #fff;
cursor: pointer;
}
.dw-sysupdate-close {
flex: none;
padding: 0 2px;
border: 0;
background: transparent;
color: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
/* System update notice - attention (owner, 2026-10-05: the bar was not noticeable enough). The bar drops in when it appears,
then keeps pulsing: a slow amber halo while the update is still ahead, a faster red beat with a small "breath" in the last
5 minutes and while the update runs. Turning red replays an entrance (drop + shake) under its own name, so the change of
state is seen even by somebody who stopped looking at the yellow bar. The green "complete" bar only drops in.
.dw-sysupdate-still = the visitor asked the operating system for reduced motion (set by the script - this sheet carries
no media queries): no movement at all. transform is free for this: the bar is centred by insets + auto margins. */
@keyframes dw-sysupdate-in {
0% {
transform: translateY(-140%);
opacity: 0;
}
60% {
transform: translateY(6px);
opacity: 1;
}
80% {
transform: translateY(-3px);
}
100% {
transform: translateY(0);
}
}
@keyframes dw-sysupdate-alert {
0% {
transform: translateY(-140%);
opacity: 0;
}
35% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateX(-10px);
}
65% {
transform: translateX(10px);
}
80% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
@keyframes dw-sysupdate-halo {
0% {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 170, 0, 0.85);
}
60%, 100% {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(255, 170, 0, 0);
}
}
@keyframes dw-sysupdate-beat {
0% {
transform: scale(1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(229, 57, 53, 0.9);
}
12% {
transform: scale(1.04);
}
24% {
transform: scale(1);
}
70%, 100% {
transform: scale(1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(229, 57, 53, 0);
}
}
.dw-sysupdate-bar {
animation: dw-sysupdate-in 0.6s ease-out, dw-sysupdate-halo 2.2s ease-out 0.6s infinite;
}
.dw-sysupdate-bar.dw-sysupdate-final {
animation: dw-sysupdate-alert 0.8s ease-out, dw-sysupdate-beat 1.3s ease-out 0.8s infinite;
}
.dw-sysupdate-bar.dw-sysupdate-done {
animation: dw-sysupdate-in 0.6s ease-out;
}
.dw-sysupdate-bar.dw-sysupdate-still {
animation: none;
}
/* Soft badge (tasks list, 2026-10-18): status / priority / days left / overdue due date / closure / tags drawn as a tinted pill.
The colours (background, text, border) come inline from BasePage.soft_badge so exports keep them; this only shapes the pill. */
.dw-badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px; /* 19102026 a pill, like the filter chips (.dw-lk-chip) - owner; was 6px */
font-weight: 500;
line-height: 1.25;
white-space: nowrap;
}
/* the status date under the badge */
.dw-badge-sub {
display: block;
font-size: 0.78em;
color: #6b7280;
margin-top: 3px;
}
/* a badge that fills its column (the two header boxes of the equipment card share one width, 2026-10-18); set in the markup, soft_badge keeps it */
.dw-badge.dw-badge-wide {
display: block !important; /* against the inline display:inline-block ASP.NET adds to a span with a border */
text-align: center;
}
/* ---- multi-select filter lookups, variant D (owner 2026-10-18): chips inside the box (each X removes one value), the DevExpress
"A;B" text hidden (dw-lk-has), no checkbox column in the dropdown - a picked row gets a check mark and a bar at its start edge,
picked rows first, a title bar with "Select all" and "Selected n of t". The .dw-lk wrapper comes from
BasePage_Filters.filter_lookups_render; the new UI shell has its own copy in new_ui.css, dark mode in dark_mode.css. */
.dw-lk {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
box-sizing: border-box;
width: 307px;
max-width: 100%;
min-height: 32px;
padding: 3px 6px;
border: 1px solid #C0C0C0;
border-radius: 7px;
background-color: white;
vertical-align: middle;
cursor: text;
}
.dw-lk > table.DropDownList_300,
.dw-lk > table.DropDownList_100p {
flex: 1 1 90px;
width: auto !important; /* against the width and border of the class BasePage assigns to the lookup */
min-width: 90px;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.dw-lk.dw-lk-has > table [class*="dxeEditArea"] {
color: transparent !important; /* the chips are the value; the text stays for DevExpress (ValidateSelectedValue) */
caret-color: transparent;
text-shadow: none;
}
.dw-lk-chip {
display: inline-flex;
align-items: center;
gap: 2px;
max-width: 100%;
min-height: 24px;
padding-inline-start: 10px;
padding-inline-end: 3px;
border-radius: 999px;
background-color: #e8f0fb;
color: #1a5fb4;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.dw-lk-chip > span {
overflow: hidden;
text-overflow: ellipsis;
}
.dw-lk-chip-x,
.dw-lk-chip-x:link,
.dw-lk-chip-x:visited {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: #1a5fb4;
font-size: 15px;
line-height: 1;
text-decoration: none;
}
.dw-lk-chip-x:hover {
background-color: #1a5fb4;
color: #ffffff;
text-decoration: none;
}
.dw-lk-hint {
color: #6b7280;
font-size: 12px;
white-space: nowrap;
}
.dw-lk [class*="dxgvDataRow"] > td.dxgv {
position: relative;
padding-inline-start: 28px !important; /* room for the check mark on every row (against the skin's cell padding) */
}
.dw-lk [class*="dxgvSelectedRow"] > td.dxgv {
border-inline-start: 4px solid #1a5fb4 !important;
padding-inline-start: 24px !important;
}
.dw-lk [class*="dxgvSelectedRow"] > td.dxgv::before {
content: "";
position: absolute;
inset-inline-start: 9px;
top: 50%;
width: 5px;
height: 10px;
margin-top: -7px;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.dw-lk.dw-lk-has > table [class*="dxeEditArea"]::selection {
color: transparent; /* the focused editor's selected text would show through - keep it invisible too */
background-color: transparent;
}
/* variant D refinements (owner 2026-10-19): the chip X is a filled circle, the chips are a size up, a picked row is bold,
"Select all" lives in the filter row's last cell (the condition-menu cell, funnel hidden) and the counter in the bottom pager */
.dw-lk-chip {
min-height: 28px;
padding-inline-start: 12px;
padding-inline-end: 5px;
gap: 5px;
font-size: 14px;
}
.dw-lk-chip-x,
.dw-lk-chip-x:link,
.dw-lk-chip-x:visited {
background-color: #1a5fb4;
color: #ffffff;
font-size: 13px;
}
.dw-lk-chip-x:hover {
background-color: #134a8e;
}
/* the "+n" chip after the first eight picks (no X) */
.dw-lk-more {
background-color: #f3f4f6;
border-color: #d1d5db;
color: #6b7280;
}
.dw-lk .dw-lk-allcell {
white-space: nowrap;
padding: 0 8px !important; /* against the skin's cell padding */
width: 1%;
}
.dw-lk .dw-lk-all,
.dw-lk .dw-lk-all:link,
.dw-lk .dw-lk-all:visited {
display: inline-block;
padding: 5px 10px;
border: 1px solid #1a5fb4;
border-radius: 7px;
color: #1a5fb4;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.dw-lk .dw-lk-all:hover {
background-color: #1a5fb4;
color: #ffffff;
text-decoration: none;
}
.dw-lk .dw-lk-count {
color: #374151;
font-size: 13px;
white-space: nowrap;
}
.dw-lk [class*="dxgvSelectedRow"] > td.dxgv {
font-weight: 600;
}
/* the dropdown window inherits the width of the (now flex-sized) editor: dwLookupDrop gives it the box's exact width and start edge
when it opens; this is the fallback without script (the box is 307px) */
.dw-lk [id$="_DDD_PW-1"] {
min-width: 307px !important; /* against the inline width DevExpress sets from the editor */
}
/* the grid fills the dropdown window */
.dw-lk [id$="_DDD_gv"],
.dw-lk [id$="_DDD_gv_DXMainTable"] {
width: 100% !important; /* against the inline width DevExpress copies from the editor */
}
/* the footer line under the list: the counter at the start, the page numbers at the end (the DevExpress pager is hidden - its
mixed buttons were "not aesthetic", owner 2026-10-19); drawn by dwLookupCount / dwLookupPages */
.dw-lk .dw-lk-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-top: 1px solid #e5e7eb;
background-color: #fafafa;
font-size: 13px;
}
.dw-lk .dw-lk-pages {
display: inline-flex;
align-items: center;
gap: 3px;
}
.dw-lk .dw-lk-pg {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 22px;
height: 22px;
padding: 0 4px;
border-radius: 6px;
color: #374151;
font-size: 13px;
line-height: 22px;
text-decoration: none;
}
.dw-lk a.dw-lk-pg:hover {
background-color: #e8f0fb;
}
.dw-lk .dw-lk-pg-cur {
background-color: #1a5fb4;
color: #ffffff;
font-weight: 600;
}
.dw-lk .dw-lk-pg-dots {
min-width: 12px;
padding: 0;
color: #6b7280;
}
.dw-lk .dw-lk-pg-prev::before,
.dw-lk .dw-lk-pg-next::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border: solid currentColor;
border-width: 0 2px 2px 0;
}
.dw-lk .dw-lk-pg-prev::before,
.dw-lk .dw-lk-rtl .dw-lk-pg-next::before {
transform: rotate(135deg); /* points left */
margin: 0 0 0 3px;
}
.dw-lk .dw-lk-pg-next::before,
.dw-lk .dw-lk-rtl .dw-lk-pg-prev::before {
transform: rotate(-45deg); /* points right */
margin: 0 3px 0 0;
}
.dw-lk .dw-lk-pg-off {
opacity: .35;
pointer-events: none;
}