/* ============================================================
   Windsor Intranet – Main Stylesheet
   Font: Open Sans (loaded via Google Fonts in master page)
   Colors: Windsor App Color Guide
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties (Windsor Design Tokens)
   ------------------------------------------------------------ */
:root {
    /* Brand Colors */
    --color-primary:         #192754;  /* PRIMARY H1  – navy       */
    --color-secondary:       #007C89;  /* PRIMARY H2  – teal       */
    --color-accent:          #FA9800;  /* PRIMARY ACCENT – orange  */
    --color-text:            #353734;  /* PRIMARY TYPE – dark gray */
    --color-text-muted:      #313134;
    --color-error:           #DA3243;
    --color-success:         #007C89;

    /* Surfaces */
    --color-surface:         #F3F4F6;  /* alt stripe — was #F8F8F8, now matches table */
    --color-surface-alt:     #FFFFFF;
    --color-surface-hover:   #EBF0F8;  /* row hover — was #EEF0F2 */

    /* Borders */
    --color-border:          #E0E0E0;
    --color-border-alt:      #B8B8B8;

    /* Typography */
    --font-primary:          'Open Sans', Arial, sans-serif;
    --font-size-xs:          12px;
    --font-size-sm:          13px;
    --font-size-base:        14px;
    --font-size-md:          16px;
    --font-size-lg:          20px;
    --line-height:           1.5;

    /* Sidebar nav dimensions */
    --nav-expanded:          272px;
    --nav-collapsed:         68px;
}

/* ============================================================
   Base / Reset
   ============================================================ */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: var(--color-surface);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-text);
    line-height: var(--line-height);
    padding: 0;
    margin: 0;
}

h1 { font-weight: 600; font-family: var(--font-primary); }
h2 { font-weight: 600; font-family: var(--font-primary); }
h3 { font-weight: 600; font-family: var(--font-primary); }

a img { border: none; }

textarea {
    font-family: var(--font-primary);
}

ul, li {
    line-height: 150%;
}

/* ============================================================
   Layout
   ============================================================ */
.main_body {
    margin: 20px 0 20px 20px;
}

.main_body .callout1 {
    background-image: url(/images/callout_1.jpg);
    float: right;
    width: 225px;
    margin: 50px 20px 10px 40px;
    padding: 0;
}

.main_body .callout2 {
    background-color: var(--color-surface-alt);
    border-left: 1px solid var(--color-border);
    float: right;
    width: 180px;
    margin: 12px 10px 10px 20px;
    padding: 20px 0;
}

.main_body .contact1 {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background-color: var(--color-secondary);
    color: #ffffff;
    margin-left: 10px;
    padding: 2px 10px 2px 5px;
    display: inline;
}

.main_body .contactBody {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    background-color: var(--color-surface-alt);
    margin-left: 10px;
    padding: 2px 10px 2px 5px;
    display: inline;
    list-style-type: none;
}

.main_body .headlineList {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    background-color: var(--color-surface-alt);
    margin-left: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

.Content10pxMargin {
    padding-left: 10px;
    padding-right: 10px;
}

.clear {
    height: 3px;
    margin: 10px 0;
    width: 780px;
    clear: left;
    float: left;
}

/* ============================================================
   Typography Utilities
   ============================================================ */
.small {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs) !important;
}

.BodyWhite {
    background-color: var(--color-surface-alt);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    padding: 0;
    margin: 0;
}

.defaultfont {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: normal;
}

.SmallSansSerif {
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
}
.SmallSansSerif:hover { text-decoration: none; }

.SmallBoldSansSerif {
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-family: var(--font-primary);
}

.BoldSansSerif {
    font-size: var(--font-size-base);
    font-weight: 700;
    font-family: var(--font-primary);
}

.SmallBoldRedSansSerif {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-family: var(--font-primary);
}

.ExtraSmallSansSerif {
    font-size: 14px;
    font-family: var(--font-primary);
}

.SmallSerifBigSpacing {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    line-height: 200%;
}

.TanBackground {
    background-color: var(--color-surface);
}

.BoldRed {
    color: var(--color-error);
    font-weight: 700;
}

.Red { color: var(--color-error); }

.admin_content {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.admin_contentLabelBold {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: 700;
    text-align: right;
}

.projectListText {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    line-height: 16pt;
}

.projectListTextNoUnderline {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    line-height: 16pt;
    text-decoration: none;
}

.projectListTitle {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
}

.newsText {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    line-height: 16pt;
}

.appTitle {
    font-weight: 700;
    text-align: left;
    margin-left: 2px;
    font-size: var(--font-size-base);
}

.fieldHelp {
    font-size: var(--font-size-base);
}

.date {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
}

.tableLink {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
}

.center    { text-align: center; }
.bold      { font-weight: 700 !important; }
.redBold   { font-weight: 700 !important; color: var(--color-error); }
.rightText { text-align: right; font-size: var(--font-size-base); }
.right     { float: right; }
.left      { float: left; }
.rightJustify { text-align: right; font-size: var(--font-size-base); }
.hand      { cursor: pointer; }
.hidden    { display: none !important; }

ul.nodot { list-style-type: none; padding: 4px 1px 1px 0; margin: 0; }

a.fullarticle {
    font-family: var(--font-primary);
    font-size: 100%;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* ============================================================
   Headers / Section Titles
   ============================================================ */
.whiteheader {
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: normal;
    padding: 6px 8px;
}

/* ============================================================
   Buttons
   ============================================================ */
.Button {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-alt);
    border-radius: 4px;
    height: auto;
    padding: 3px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.Button:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-secondary);
}
/* Save / Go buttons — teal primary action */
input[type="submit"][value="Save"].Button,
input[type="button"][value="Save"].Button,
input[type="submit"][value="Go"].Button,
input[type="button"][value="Go"].Button {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}
input[type="submit"][value="Save"].Button:hover,
input[type="button"][value="Save"].Button:hover,
input[type="submit"][value="Go"].Button:hover,
input[type="button"][value="Go"].Button:hover {
    background-color: #006672;
    border-color: #006672;
    color: #fff;
}

.greyButton, .greyButton:visited {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-alt);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text);
    padding: 3px 8px;
    cursor: pointer;
}
.greyButton:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-secondary);
}

/* ============================================================
   Progress Panels
   ============================================================ */
.ProgressPanelUserProject {
    background-color: var(--color-surface-alt);
    position: fixed;
    margin-left: 380px;
    margin-top: 10px;
    z-index: 10000;
}

.ProgressPanelSingleProject {
    background-color: var(--color-surface-alt);
    position: fixed;
    margin-left: 380px;
    margin-top: 80px;
    z-index: 10000;
}

/* ============================================================
   Project Border
   ============================================================ */
.projectBorder {
    margin: 1px;
    border: 1px solid var(--color-border-alt);
}

/* ============================================================
   Layout shell (flex, replaces table.layout-root)
   ============================================================ */
.layout-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.site-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 10px 10px 0;
}

.site-footer-row {
    margin-top: auto;
}

/* Sidebar nav + footer styles moved to shared-nav.css / shared-footer.css
   (windsor-intranet-shared-net submodule) */

/* Icon sprites */
.tn_time {
    display: block;
    float: left;
    width: 38px;
    height: 30px;
    margin: 1px 2px 2px 1px;
    background-position: left 0;
    background-image: url(../images/tn_time.png);
}
.tn_expense {
    display: block;
    float: left;
    width: 38px;
    height: 30px;
    margin: 1px 2px 2px 1px;
    background-position: left 0;
    background-image: url(../images/tn_expense.png);
}
.tn_mail {
    display: block;
    float: left;
    width: 38px;
    height: 30px;
    margin: 1px 2px 2px 1px;
    background-position: left 0;
    background-image: url(../images/tn_mail.png);
}
.discThumbs { margin-left: 10px; margin-top: 20px; }
.discThumbs a:hover { background-position: left -30px; }

/* ============================================================
   AJAX Tabs
   ============================================================ */
.CustomTabStyle .ajax__tab_body {
    padding: 8px;
    border: 1px solid var(--color-border-alt);
    border-top: 0;
    background-color: var(--color-surface);
}
.CustomTabStyle .ajax__tab_tab {
    padding: 4px 8px;
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border-alt);
    border-left: 1px solid var(--color-border-alt);
    border-right: 1px solid var(--color-border-alt);
    border-bottom: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}
.CustomTabStyle .ajax__tab_active .ajax__tab_tab {
    padding: 4px 8px;
    background-color: var(--color-surface);
    border-top: 2px solid var(--color-secondary);
    border-left: 1px solid var(--color-border-alt);
    border-right: 1px solid var(--color-border-alt);
    border-bottom: 0;
    font-weight: 600;
}
.CustomTabStyle .ajax__tab_header {
    background-position: bottom;
    background-image: url(/intranet/common/images/line.gif);
    background-repeat: no-repeat;
}
.CustomTabStyle .ajax__tab_hover .ajax__tab_tab {
    background-color: var(--color-surface-hover);
}

/* ============================================================
   Sortable Table Headers
   ============================================================ */
th.header {
    background-image: url(images/nosort.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    cursor: pointer;
    text-decoration: none;
}
th.headerSortDown {
    background-image: url(images/desc.png);
    text-decoration: underline;
}
th.headerSortUp {
    background-image: url(images/asc.png);
    text-decoration: underline;
}

/* ============================================================
   DataGrid header border — inline BackColor can't add borders,
   so this CSS rule applies the separator to all DataGrid/table
   headers site-wide (th cells whose background is now white).
   ============================================================ */
.personnel-grid th,
.schedule-grid th,
.org-grid th,
#dgSearchResults th,
table[id$="dgPersonnel"] th {
    border-bottom: 1px solid #B8D9DD;   /* matches light-teal header */
}
/* Hairline row separators for DataGrid rows */
.personnel-grid td,
.schedule-grid td,
.org-grid td,
#dgSearchResults td {
    border-bottom: 1px solid #EBEBEB;
}

/* ============================================================
   Sortable Table
   ============================================================ */
.sortableTable table {
    width: 100%;
    border-collapse: collapse;
}
.sortableTable thead th {
    font-weight: 700;
    font-size: var(--font-size-base);
    border-bottom: 1px solid #B8D9DD;
    padding: 5px 5px 5px 22px;
    background-color: #E0EFF1;           /* light teal tint */
    color: var(--color-primary);
}
.sortableTable tbody {
    border-bottom: 1px solid var(--color-border);
}
/* White / very-light-gray stripe — matches mockup neutral look */
.sortableTable tbody tr          { background: #FFFFFF; }
.sortableTable tbody tr.alt-row  { background: #F3F4F6; }
/* Hairline row separators (matches mockup) */
.sortableTable tbody tr td       { border-bottom: 1px solid #EBEBEB; }
.sortableTable td, .sortableTable th {
    padding: 2px 6px;
    line-height: 1.3em;
}
.sortableTable tfoot td .bulk-actions { padding: 15px 0 5px 0; }
.sortableTable tfoot td .bulk-actions select {
    padding: 4px;
    border: 1px solid var(--color-border);
}
.sortableTable td.lastCol, .sortableTable th.lastCol {
    text-align: right;
    white-space: nowrap;
}
.sortableTable td.lastCol img, .sortableTable th.lastCol img {
    padding-right: 10px;
    border: 0;
}

/* ============================================================
   Billing Tables
   ============================================================ */
.billingTable {
    border-collapse: collapse;
    border-spacing: 0;
}
.billingTable td {
    padding: 2px 6px;
}

#summaryTable td {
    border-collapse: collapse;
    padding: 2px 6px;
    margin: 0;
    vertical-align: top;
}
.laborRow td { line-height: 1.2; }

.summaryBody, .summaryBody td {
    background-color: var(--color-surface-alt);
    font-family: var(--font-primary) !important;
    font-size: 1em !important;
}

.billingTextbox,
.sentDate,
.paidDate {
    background-image: none;
    background-color: var(--color-surface);
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-sm) !important;
    padding: 0 1px !important;
    line-height: normal;
}

/* ============================================================
   Forms
   ============================================================ */
form label, .form label {
    display: block;
    padding: 0 0 1px;
    font-weight: 600;
    font-family: var(--font-primary);
}
form input[type="checkbox"] + label, .form input[type="checkbox"] + label { display: inline; }
form input[type="radio"] + label, .form input[type="radio"] + label { display: inline; }
/* Security role chips override the inline-display rule above */
form .security-roles-list input[type="checkbox"] + label { display: inline-flex; }

form fieldset, .form fieldset {
    border-radius: 4px;
    border: 1px solid var(--color-border);
    padding: 8px;
}
form fieldset legend, .form fieldset legend {
    font-weight: 700;
    margin-bottom: 10px;
    padding-top: 10px;
    font-size: 1.1em;
    color: var(--color-secondary);
}
form p small, .form p small {
    font-size: 0.8em;
    color: var(--color-text-muted);
    padding: 0;
}
form p span, .form p span {
    font-size: 1em;
    color: #777;
    padding: 0 0 1px;
}
form input.showAsCal, .form input.showAsCal {
    width: auto !important;
}
form input[type="text"], form input[type="number"], form input[type="email"], form input[type="password"], form input[type="date"],
form input.text-input, form select, form textarea, form password,
.form input[type="text"], .form input[type="number"], .form input[type="email"], .form input[type="password"], .form input[type="date"],
.form input.text-input, .form select, .form textarea, .form password {
    padding: 3px 6px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form input[type="text"]:focus, form input[type="number"]:focus, form input[type="email"]:focus, form input[type="password"]:focus, form input[type="date"]:focus,
form input.text-input:focus, form select:focus, form textarea:focus, form password:focus,
.form input[type="text"]:focus, .form input[type="number"]:focus, .form input[type="email"]:focus, .form input[type="password"]:focus, .form input[type="date"]:focus,
.form input.text-input:focus, .form select:focus, .form textarea:focus, .form password:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(0,124,137,0.15);
}
input.errorNotify.text-input { border: 1px solid var(--color-error); }
form input.blur, .form input.blur { color: #999; font-size: 80%; }

/* ── Native date inputs: font, minimum width, and calendar icon ── */
input[type="date"] {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text);
    min-width: 140px; /* prevents icon from being pushed off after a date is entered */
    box-sizing: border-box;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    font-family: var(--font-primary);
    color: var(--color-text);
    padding: 0;
}
/* Recolor the calendar icon to Windsor teal; force it always visible */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    opacity: 0.6;
    cursor: pointer;
    filter: invert(38%) sepia(56%) saturate(596%) hue-rotate(151deg) brightness(92%);
    padding-left: 4px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Readonly date: styled as non-editable (Chrome hides the icon automatically on readonly) */
input[type="date"][readonly] {
    background-color: #f0f2f4;
    color: #666;
    cursor: default;
}

form .header-input, .form .header-input {
    width: 120px !important;
    font-size: var(--font-size-xs) !important;
    padding: 4px !important;
}
form .short-input, .form .short-input         { width: 10% !important; }
form .small-input, .form .small-input         { width: 25% !important; }
form .smallish-input, .form .smallish-input   { width: 35% !important; }
form .small-long-input, .form .small-long-input { width: 72% !important; }
form .small-full-input, .form .small-full-input { width: 90% !important; }
form .spaced-input, .form .spaced-input       { display: block; clear: both; margin-bottom: 5px; }
form .medium-input, .form .medium-input       { width: 65% !important; }
form .half-input, .form .half-input           { width: 45% !important; }
form .long-input, .form .long-input           { width: 80% !important; font-size: var(--font-size-md) !important; padding: 4px !important; }
form .longer-input, .form .longer-input       { width: 90% !important; font-size: var(--font-size-md) !important; padding: 4px !important; }
form .longer-input-overridable, .form .longer-input-overridable { width: 90%; font-size: var(--font-size-md); padding: 4px; }
form .longer-input-tabbed, .form .longer-input-tabbed           { width: 90%; font-size: 14px; padding: 4px; }
form .large-input, .form .large-input         { width: 97.5% !important; font-size: var(--font-size-lg) !important; padding: 8px !important; }
form .wide-input, .form .wide-input           { width: 97.5% !important; }
form textarea, .form textarea                 { width: 97.5% !important; font-family: var(--font-primary); border-radius: 4px; }
form select, .form select {
    padding: 4px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    background: var(--color-surface-alt);
    border-radius: 4px;
}
form input[type="checkbox"], form input[type="radio"],
.form input[type="checkbox"], .form input[type="radio"] {
    padding: 0;
    background: none;
    border: 0;
}
form fieldset.left-line, .form fieldset.left-line {
    border-left: 2px solid var(--color-accent);
    padding-left: 10px;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* ============================================================
   Form Panels (Organization, AddResource, etc.)
   ============================================================ */
.form-panel {
    width: 1000px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    border: 1px solid var(--color-border-alt);
    border-radius: 6px;
    float: left;
    clear: left;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}
.form-panel table {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    clear: left;
    float: left;
    text-align: left;
}
.form-panel td {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: normal;
    line-height: normal;
}
.form-panel .field-label {
    width: 125px;
    font-weight: 600;
    color: var(--color-text);
}
.form-panel input[type="text"],
.form-panel input[type="date"],
.form-panel select {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    padding: 2px 4px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    line-height: normal;
}
.form-panel input[type="text"]:focus,
.form-panel input[type="date"]:focus,
.form-panel select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(0,124,137,0.15);
}
.form-panel .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 28px;
    padding: 4px 8px;
    margin-bottom: 3px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 6px 6px 0 0;
}
.form-panel .section-header .sectionTitle,
.form-panel .section-header label {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 28px !important;
    padding-left: 0;
}

/* ============================================================
   Search / Filter Toolbar
   ============================================================ */
.search-toolbar,
.search-toolbar td,
.search-toolbar label,
.search-toolbar span,
.search-toolbar input[type="text"],
.search-toolbar select {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    color: var(--color-text);
}
.search-toolbar td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 4px 6px;
}
.search-toolbar td:first-child {
    padding-left: 0;
}
.search-toolbar td:last-child {
    padding-right: 0;
}
/* Checkbox alignment */
.search-toolbar .cb,
.search-toolbar .cbLabel {
    vertical-align: middle !important;
}
.search-toolbar .cb input[type="checkbox"] {
    vertical-align: middle !important;
    margin: 0 3px 0 0;
    position: relative;
    top: -1px;
}
.search-toolbar .cb label {
    vertical-align: middle !important;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Search Results
   ============================================================ */
#dgSearchResults a {
    color: var(--color-secondary);
    text-decoration: none;
}
#dgSearchResults a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}
/* Row hover highlight — skip header row (first tr) */
#dgSearchResults tr:not(:first-child):hover td,
table[id$="dgPersonnel"] tr:not(:first-child):hover td,
.sortableTable tbody tr:hover td {
    background-color: #EBF0F8;   /* light neutral blue-gray — was #E0E2E8 */
}
/* Footer/total row — top border for visual separation */
#dgSearchResults tr:last-child td {
    border-top: 2px solid var(--color-primary);
}

/* ============================================================
   Form Panel
   ============================================================ */
.form-panel {
    text-align: left;
    float: none;
    clear: none;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 1000px;
    min-width: 0;
}
.form-panel table {
    float: none;
    clear: none;
}
.form-panel .section-title {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 10px;
    padding-left: 2px;
    padding-bottom: 6px;
}
.form-panel table {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text);
}
.form-panel td {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text);
    padding: 7px 10px;
    vertical-align: middle;
}
.form-panel td.field-label {
    width: 140px;
    font-weight: 600;
    white-space: nowrap;
}
/* Required field — "Required" placeholder hint text */
.form-panel input[type="text"]::placeholder,
.form-panel textarea::placeholder {
    color: #aaa;
    font-style: italic;
    font-size: 14px;
}
.form-panel input[type="text"],
.form-panel select,
.form-panel textarea {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 3px 5px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
}
.form-panel .Button {
    margin-top: 6px;
}

/* ============================================================
   BlockUI – Loading Overlay
   ============================================================ */
.blockOverlay {
    background-color: var(--color-primary) !important;
    opacity: 0.35 !important;
}
.blockMsg,
.blockPage {
    border: none !important;
    background: var(--color-surface) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
    padding: 28px 40px !important;
    width: auto !important;
    max-width: 280px !important;
    color: var(--color-text) !important;
    font-family: var(--font-primary) !important;
}
.blockMsg h1,
.blockPage h1 {
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.blockMsg h1::before,
.blockPage h1::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: windsor-spin 0.8s linear infinite;
}
@keyframes windsor-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Login Page
   ============================================================ */
#Login {
    background: var(--color-surface);
    width: 420px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    text-align: center;
    padding-left: 0;
    left: 50%;
    margin: 120px auto auto -210px;
    position: absolute;
    font-size: var(--font-size-md);
    font-family: var(--font-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.inner {
    width: 335px;
    padding: 30px 50px;
    padding-left: 48px;
    border-radius: 8px;
}

.inner .logo-center {
    text-align: center;
    font-family: var(--font-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary);
    padding-right: 10px;
}
.inner .logo-center .titleText { padding-left: 0; }
.logo-center img { padding-bottom: 8px; }
.logo-center .titleText { padding-top: 5px; padding-bottom: 5px; font-size: 14px; font-weight: 600; }

.LoginButton {
    background: url("/intranet/common/images/login-sprite.png") repeat scroll 0 0 transparent;
    border: 0;
    display: block;
    height: 40px;
    margin: 5px 0;
    padding: 0;
    text-indent: -9999px;
    width: 88px;
    float: left;
}
.LoginButton.hover, .LoginButton:hover { background-position: -110px 0; }
.LoginButton.down, .LoginButton:active { background-position: -222px 0; }
#Login button { cursor: pointer; }

.Remember { clear: none; float: right; margin-top: 10px; }
.loginMessage {
    display: block;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    line-height: 1.5;
    text-align: left;
}
.loginMessage:empty { display: none; }
.loginMessage-success { color: #1C4303; background: #ECFFD5; border-color: #a3d977; }

#Login .LoginUser, #Login .LoginPass {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    padding: 12px 15px;
    width: 300px;
    line-height: normal;
    font-size: 100%;
    font-family: var(--font-primary);
    margin: 5px 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#Login .LoginUser:focus, #Login .LoginPass:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(0,124,137,0.15);
}
#Login .LoginUser { margin-top: 10px; }

:-moz-placeholder { color: #aaa; }

/* ============================================================
   AJAX Tabs misc
   ============================================================ */
.ajax__tab_inner { cursor: pointer; }

/* ============================================================
   Misc Helpers (kept for backward compat)
   ============================================================ */
.spacer { height: 1px; clear: both; display: block; }
.highlightedColumn { background-color: #FFF8BA; }
.projectTitle { background-color: #EEF4FF; }
.arrow { vertical-align: middle; margin-top: -3px; }
.handCursor { cursor: pointer; }

/* ============================================================
   Responsive layout
   ============================================================ */

/* Override hardcoded HTML width attribute on master-page layout table */
table.layout-root {
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
    table-layout: auto;
    box-sizing: border-box;
}

/* Save buttons use inline SVG disk icons; no ::before pseudo-element needed */

/* ── Alert banners (warning / error — nCORE style) ───────── */

.alert-warning,
div[id$="divWarning"] {
    background-color: rgba(250, 152, 0, 0.14) !important;
    border: none !important;
    border-left: 4px solid #FA9800 !important;
    border-radius: 3px 6px 6px 3px !important;
    color: #8B5E00 !important;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 10px 16px !important;
    margin-bottom: 10px;
    min-width: 0 !important;
    box-sizing: border-box;
}

.alert-error,
div[id$="divError"] {
    background-color: rgba(218, 50, 67, 0.10) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #9B1C2A !important;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 10px 16px !important;
    margin-bottom: 10px;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Hide alert divs when they have no content */
div[id$="divError"]:empty,
div[id$="divWarning"]:empty {
    display: none !important;
}

/* Header details panel (project summary) — match section-group style */
.headerDetails .section-group {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.headerDetails .section-group table,
.headerDetails .section-group td {
    border: none !important;
}

/* ── Section group (field grouping panels — nCORE style) ──── */

.section-group {
    background-color: #ECEEF1 !important;
    border: none !important;
    padding: 12px 14px;
    margin-top: 10px;
    float: left;
    clear: left;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;          /* contain floated children */
}

/* Child tables/cells must be transparent so grey background shows */
.section-group table,
.section-group td,
.section-group th {
    background-color: transparent !important;
}

/* Preserve white background on form inputs inside section groups */
.section-group input[type="text"],
.section-group textarea,
.section-group select {
    background-color: #fff !important;
}

.section-group-header {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
    padding-left: 2px;
    padding-bottom: 6px;
    margin-bottom: 4px;
}

/* ── Tablets and smaller (≤ 768 px) — hamburger menu ────────── */
@media (max-width: 768px) {
    /* Content goes full-width; sidebar is a fixed overlay via shared-nav.css */
    .layout-shell { display: block; }
    .layout-shell .site-content { margin-left: 0 !important; padding-top: 56px; }

    /* Prevent horizontal overflow from shifting the fixed mobile bar */
    html, body, .layout-shell, .site-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Let the body scroll instead of an inner container */
    body { overflow-y: auto !important; }

    /* Full-width content area */
    .Content10pxMargin {
        padding: 8px !important;
    }

    /* White background to eliminate grey band below content */
    body { background: #fff !important; }

    /* Hide footer on all mobile pages — branding is in the mobile bar */
    #siteFooter, #footer, .site-footer, .site-footer-row,
    div[id="footer"], div[id="trFooter"] {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove grey dead space below mobile bar */
    .site-content {
        padding-top: 56px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Mobile phones (≤ 600 px) ─────────────────────────────── */
/* ===== Filter chips — shared across all search toolbars ===== */
/* asp:CheckBox puts CssClass on a <span> wrapper, so target input inside the div wrapper */
.status-toggle-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.status-toggle-wrap input[type="checkbox"] + label {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1.5px solid #B7B9BE;
    background: #fff;
    color: #3B3D42;
    font-size: 14px;
    font-family: var(--font-primary);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.status-toggle-wrap input[type="checkbox"] + label:hover {
    border-color: #005F5F;
    color: #005151;
    background: #EBF5F6;
}
.status-toggle-wrap input[type="checkbox"]:checked + label {
    background: #005F5F;
    border-color: #005F5F;
    color: #fff;
}
.status-toggle-wrap input[type="checkbox"]:checked + label:hover {
    background: #005151;
    border-color: #005151;
}
/* Navigation chip — pill arrow button matching pd-btn-hdr style, light-bg variant */
.status-toggle-nav {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    background: var(--color-secondary);
    color: #fff;
    font-size: 14px;
    font-family: var(--font-primary);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background .15s;
}
.status-toggle-nav:hover {
    background: #005f6b;
    border-color: #005f6b;
    color: #fff;
    text-decoration: none;
}

/* ===== Segmented toggle (Active/Inactive, Tasks/Resource, etc.) ===== */
.seg-toggle {
    display: inline-flex;
    border: 1.5px solid #d1d5db;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.seg-toggle span {
    display: inline-flex;
}
.seg-toggle span + span {
    border-left: 1.5px solid #d1d5db;
}
.seg-toggle input[type="radio"],
.seg-toggle input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.seg-toggle label {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    font-size: 14px;
    font-family: var(--font-primary);
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.seg-toggle label:hover {
    background: #f0f9fa;
    color: #007C89;
}
.seg-toggle input:checked + label {
    background: #007C89;
    color: #fff;
}
.seg-toggle input:checked + label:hover {
    background: #005f6b;
}
.seg-toggle input:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}
.seg-toggle input:disabled:checked + label {
    background: #007C89;
    border-color: #007C89;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

/* ===== Chip group — individual pill chips for multi-select filters ===== */
.chip-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.chip-group span {
    display: inline-flex;
}
.chip-group input[type="radio"],
.chip-group input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.chip-group label {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-size: 14px;
    font-family: var(--font-primary);
    color: #3B3D42;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    border: 1.5px solid #B7B9BE;
    border-radius: 20px;
    background: #fff;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.chip-group label:hover {
    background: #EBF5F6;
    color: #005151;
    border-color: #005F5F;
}
.chip-group input:checked + label {
    background: #005F5F;
    color: #fff;
    border-color: #005F5F;
}
.chip-group input:checked + label:hover {
    background: #005151;
    border-color: #005151;
}

/* ===== Filter bar — shared toolbar band across all list pages ===== */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 10px;
}
.filter-bar .filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-right: 14px;
    white-space: nowrap;
}
.filter-bar .filter-group {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 6px;
}
.filter-bar .filter-group + .filter-group {
    padding-left: 16px;
    border-left: 1px solid #ddd;
    margin-left: 16px;
}
.filter-bar .field-name {
    font-size: 14px;
    color: #777;
    margin-right: 5px;
}
/* Search input with magnifying glass icon */
.filter-bar .search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
    padding-left: 32px !important;
}
/* Overflow (⋯) menu — far-right of every filter bar */
.filter-bar .overflow-menu-wrap {
    margin-left: auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.overflow-trigger {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    font-size: 18px;
    line-height: 1;
    padding: 2px 7px;
}
.overflow-trigger:hover { background-color: #eee; border-color: #ccc; color: #192754; }
.overflow-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    z-index: 200;
    min-width: 140px;
}
.overflow-dropdown input[type="submit"] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #353734;
    font-family: inherit;
}
.overflow-dropdown input[type="submit"]:last-child { border-bottom: none; }
.overflow-dropdown input[type="submit"]:hover { background-color: #f5f5f5; color: #192754; }

/* ===== Personnel — Security Role Chips ===== */
/* asp:CheckBoxList RepeatLayout="UnorderedList" renders <ul class="security-roles-list">
   with one <li> per role containing <input><label>. Checkbox is hidden; label is styled
   as a pill chip — outlined when unchecked, solid teal when checked. */
.security-roles-box {
    padding: 4px 0;
}
.security-roles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.security-roles-list li {
    display: inline-flex;
}
.security-roles-list input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.security-roles-list label {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    font-family: var(--font-primary);
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.security-roles-list label:hover {
    border-color: #007C89;
    color: #007C89;
    background: #f0f9fa;
}
.security-roles-list input:checked + label {
    background: #007C89;
    border-color: #007C89;
    color: #fff;
}
.security-roles-list input:checked + label:hover {
    background: #005f6b;
    border-color: #005f6b;
}

@media (max-width: 600px) {
    /* Make data tables horizontally scrollable */
    table:not(.layout-root) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack form controls */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stack header buttons on mobile */
    .header-buttons {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .header-buttons > div {
        width: 100%;
        margin-top: 8px;
    }

}

/* ── WSI Modal (native <dialog>) ──────────────────────────────────────── */
dialog.wsi-modal {
    border: none;
    border-radius: 10px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    margin: auto;
}
dialog.wsi-modal::backdrop {
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(1px);
}
.wsi-modal-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    width: 100%;
}
.wsi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}
.wsi-modal-title {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-primary);
}
.wsi-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1;
    font-family: var(--font-primary);
    transition: background .15s, color .15s;
}
.wsi-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.wsi-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #f9f9f9;
}
.wsi-modal-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
/* Size variants — max-height caps the panel; JS sets actual height after iframe content loads */
dialog.wsi-modal.size-sm { width: 480px; }
dialog.wsi-modal.size-md { width: 600px; }
dialog.wsi-modal.size-lg,
dialog.wsi-modal.size-lg-tall { width: 760px; }
.wsi-modal.size-sm .wsi-modal-panel { max-height: min(420px, 90vh); }
.wsi-modal.size-md .wsi-modal-panel { max-height: min(500px, 90vh); }
.wsi-modal.size-lg .wsi-modal-panel { max-height: min(620px, 90vh); }
.wsi-modal.size-lg-tall .wsi-modal-panel { max-height: min(880px, 90vh); }

/* ── WSI Typeahead dropdown (replaces jQuery UI autocomplete) ─────────── */
.wsi-typeahead-drop {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--color-border, #E0E0E0);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 2px 0 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    font-family: var(--font-primary);
    font-size: 13px;
}
.wsi-typeahead-drop li {
    padding: 7px 12px;
    cursor: pointer;
    color: var(--color-text, #353734);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wsi-typeahead-drop li:hover {
    background: var(--color-secondary, #007C89);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   HOME PAGE
   ════════════════════════════════════════════════════════════ */
.home-wrap {
    max-width: 1200px;
    margin: 28px auto 56px;
    padding: 0 32px;
    font-family: var(--font-primary);
    color: var(--color-text);
}
.home-intro { margin-bottom: 32px; }
.home-intro h2 {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 10px;
    padding: 0;
    border: none;
}
.home-intro p {
    font-size: 14px;
    line-height: 1.75;
    color: #313134;
    margin: 0;
}

/* Section label */
.home-section-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: #1D1D1F;
    margin: 0 0 14px;
    line-height: 1.2;
}

/* Primary card grid */
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
.home-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 18px 20px 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.home-card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 4px 16px rgba(0,124,137,.13);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.home-card.d-none { display: none; }
.home-card-icon {
    width: 42px;
    height: 42px;
    background: #F1F2F3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    flex-shrink: 0;
}
.home-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
    fill: var(--color-secondary);
    stroke: none;
}
.home-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0 0 5px;
    line-height: 1.2;
}
.home-card-desc {
    font-size: 14px;
    color: #313134;
    line-height: 1.55;
    margin: 0;
}

/* Secondary (compact) card grid */
.home-sec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.home-sec-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.home-sec-card:hover {
    background: #E2E3E5;
    text-decoration: none;
    color: inherit;
}
.home-sec-card.d-none { display: none; }
.home-sec-icon {
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.home-sec-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: var(--color-secondary);
}
.home-sec-title {
    font-size: 14px;
    font-weight: 700;
    color: #1D1D1F;
    display: block;
    line-height: 1.2;
}
.home-sec-meta {
    font-size: 14px;
    color: #313134;
    display: block;
    line-height: 1.3;
    margin-top: 2px;
}

@media (max-width: 800px) {
    .home-card-grid { grid-template-columns: repeat(2, 1fr); }
    .home-sec-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .home-card-grid { grid-template-columns: 1fr; }
    .home-sec-grid  { grid-template-columns: 1fr; }
}