/* DEFAULTS
----------------------------------------------------------*/

body {
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited {
    color: #034af3;
}

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: normal;
    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: 500;
}

:root {
    --brand-navy: #20282f;
    --brand-blue: #3f515f;
    --brand-gold: var(--rcs-yellow);
    --brand-gold-tint: var(--rcs-yellow-tint);
    --brand-border: #d9e0e5;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> 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: 99%;
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 1px solid #496077;
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.main {
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 100%;
}

.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%;
}

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: #bfcbd6;
                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;
}

div.accountInfo {
    width: 42%;
}

/* 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 {
    font-weight: bold;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}

.proposal-panel {
    border: 1px solid #999999;
    background-color: #ffffff;
    color: #696969;
    padding: 8px;
    min-height: 230px;
    overflow: auto;
}

.proposal-form-table td {
    padding: 2px 4px;
    vertical-align: middle;
}

.proposal-label {
    width: 185px;
    white-space: nowrap;
}

.proposal-input {
    width: 156px;
}

.input-group {
    display: inline-table;
    border: 1px solid #999999;
    background: #ffffff;
    width: 160px;
    height: 21px;
    white-space: nowrap;
    border-collapse: collapse;
    vertical-align: middle;
}

.input-group-text {
    display: table-cell;
    color: #696969;
    background: #eeeeee;
    border-right: 1px solid #999999;
    padding: 2px 6px;
    width: 14px;
    text-align: center;
    vertical-align: middle;
}

.input-group .form-control {
    display: table-cell;
    border: 0;
    width: 128px;
    height: 17px;
    padding: 1px 2px;
    vertical-align: middle;
}

.input-group-disabled {
    background: #eeeeee;
}

    .input-group-disabled .form-control {
        background: #eeeeee;
    }

.proposal-reimbursement-options {
    line-height: 1.8em;
}

    .proposal-reimbursement-options label {
        display: inline-block;
        width: 210px;
    }

.proposal-validation {
    color: #b00000;
    font-weight: bold;
}

.proposal-message {
    color: #2f5f2f;
    font-weight: bold;
}

/*
   Shared application presentation
   ----------------------------------------------------------
   The Daily Log introduced the current blue/slate visual language.  These
   rules let the remaining Web Forms pages use that language without changing
   their controls, postbacks, or legacy table layouts.
*/
body {
    background: #eef3f8;
    color: #17243a;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.page {
    background: transparent;
    border: 0;
    margin: 0;
    max-width: none;
    min-height: 100vh;
    width: 100%;
}

.header {
    background: #4b6c9e;
    box-shadow: none;
}

div.hideSkiplink {
    background-color: #3a4f63;
}

div.menu ul li a, div.menu ul li a:visited {
    background-color: #465c71;
    border: 1px solid #4e667d;
    border-radius: 0;
    color: #dde4ec;
    font-weight: 400;
    margin-right: 2px;
}

    div.menu ul li a:hover {
        background-color: #bfcbd6;
        color: #465c71;
    }

.main {
    background: #f4f7fb;
    box-sizing: border-box;
    margin: 0;
    min-height: calc(100vh - 108px);
    padding: 24px;
}

    /* Legacy pages use a top-level layout table.  Treat that table as the page
   surface while leaving its nested tables free to retain their form layout. */
    .main > table,
    .main > div > table {
        background: #ffffff;
        border: 1px solid #d8e1ec;
        border-collapse: separate;
        border-radius: 10px;
        border-spacing: 0;
        box-shadow: 0 10px 24px rgba(20, 35, 55, .08);
        max-width: 1180px;
        padding: 18px;
        width: 100%;
    }

        .main > table > tbody > tr > td,
        .main > div > table > tbody > tr > td {
            padding: 8px 12px;
            vertical-align: top;
        }

    .main table {
        color: #17243a;
    }

    .main td {
        line-height: 1.4;
    }

    .main input[type="text"],
    .main input[type="date"],
    .main input[type="number"],
    .main input[type="password"],
    .main input[type="file"],
    .main select,
    .main textarea {
        background: #ffffff;
        border: 1px solid #c4cfdc;
        border-radius: 7px;
        box-sizing: border-box;
        color: #17243a;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        font-size: 14px;
        min-height: 36px;
        padding: 7px 10px;
    }

    .main textarea {
        line-height: 1.45;
        min-height: 96px;
        resize: vertical;
    }

        .main input[readonly],
        .main textarea[readonly],
        .main input[disabled],
        .main select[disabled] {
            background: #f5f7fb;
            color: #526173;
        }

    .main input[type="submit"],
    .main input[type="button"],
    .main button {
        background: #1f5f99;
        border: 1px solid #174c7c;
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 600;
        min-height: 36px;
        padding: 7px 14px;
    }

        .main input[type="submit"]:hover,
        .main input[type="button"]:hover,
        .main button:hover {
            background: #174c7c;
        }

    /* DataGrid renders ordinary tables, with presentational attributes supplied by
   the legacy markup.  Override those attributes as one consistent data table. */
    .main table[bordercolor] {
        border: 1px solid #d8e1ec !important;
        border-collapse: collapse;
        box-shadow: none;
        width: 100%;
    }

        .main table[bordercolor] th,
        .main table[bordercolor] tr:first-child td {
            background: #223a58 !important;
            color: #ffffff !important;
            font-size: 12px;
            font-weight: 600;
            padding: 9px 10px;
            text-align: left;
        }

        .main table[bordercolor] td {
            background: #ffffff !important;
            border-bottom: 1px solid #e5ebf3;
            color: #17243a !important;
            font-size: 13px;
            padding: 9px 10px;
            vertical-align: middle;
        }

        .main table[bordercolor] tr:nth-child(even) td {
            background: #f8fafc !important;
        }

    .main a,
    .main a:visited,
    .main .loginTable {
        color: #1f5f99;
        font-weight: 400;
    }

    .main .proposal-panel {
        border: 1px solid #d8e1ec;
        border-radius: 10px;
        box-shadow: none;
    }

    .main .proposal-form-table td {
        padding: 6px 8px;
    }

    .main .proposal-label {
        color: #4a5a6d;
        font-size: 12px;
        font-weight: 400;
        text-transform: none;
    }

    /* Project billing and related subform labels retain readable sentence case. */
    .main .proposal-form-table .proposal-label {
        font-weight: 400 !important;
        text-transform: none !important;
    }

    /* Search results and inspection history are legacy nested table controls.
   Keep their scroll region compact and light rather than inheriting the old
   black panel treatment. */
    .main .search-details-panel > table {
        background: transparent;
        border: 0;
        box-shadow: none;
        display: table;
        max-width: 580px;
        padding: 0;
        width: auto;
    }

    .main .search-inspection-panel {
        background: #ffffff;
        border: 1px solid #d8e1ec;
        border-radius: 8px;
        box-sizing: border-box;
        color: #17243a;
        height: 300px;
        max-width: 580px;
        overflow: auto;
        padding: 8px;
        width: 100%;
    }

@media (max-width: 900px) {
    .main {
        padding: 16px;
    }

        .main > table,
        .main > div > table {
            display: block;
            overflow-x: auto;
            padding: 10px;
        }

    div.menu ul li a, div.menu ul li a:visited {
        padding: 4px 10px;
    }
}

/* RCS identity and entry experience -------------------------------------- */
.brand-logo {
    background: #fff;
    border-radius: 5px;
    display: block;
    height: auto;
    margin: 0;
    max-width: 148px;
    padding: 4px;
}

.header {
    background: #20282f;
}

div.menu ul li a.nav-active,
div.menu ul li a.nav-active:hover,
div.menu ul li a.nav-active:focus {
    background: #3d5060;
    box-shadow: inset 3px 0 0 var(--rcs-yellow);
}

    div.menu ul li a.nav-active:before {
        color: var(--rcs-yellow);
    }

.project-new-button,
.main input.project-new-button {
    background: var(--rcs-yellow);
    border-color: var(--rcs-yellow);
}

/* Ajax Control Toolkit Project tabs: replace the inherited XP image tabs
   with a compact, accessible tab bar that matches the shared RCS shell. */
#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_header {
    background: transparent !important;
    border-bottom: 1px solid #d9e0e5;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    height: auto !important;
    margin: 0 0 18px;
    padding: 0;
}

#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_outer,
#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_inner,
#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_tab {
    background: transparent !important;
    display: block;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_tab {
    border: 1px solid transparent !important;
    border-radius: 7px 7px 0 0;
    color: #53626c !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 650;
    line-height: 1.25;
    padding: 10px 12px !important;
    text-decoration: none;
}

#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {
    background: var(--rcs-yellow-tint) !important;
    color: #20282f !important;
}

#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {
    background: #20282f !important;
    border-color: #20282f !important;
    color: #fff !important;
}

#MainContent_TabCtl0.ajax__tab_xp .ajax__tab_body {
    background: #fff;
    border: 1px solid #d9e0e5 !important;
    border-radius: 10px;
    padding: 18px !important;
}

/* The login screen intentionally removes authenticated navigation and makes
   the RCS identity the first element a user sees. */
body.login-screen .page {
    display: block;
}

body.login-screen .header {
    display: none;
}

body.login-screen .main {
    align-items: center;
    background: linear-gradient(135deg, #20282f 0%, #344550 46%, #eef1f3 46%, #f6f8f9 100%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 36px;
}

    body.login-screen .main > .login-page {
        width: min(100%, 460px);
    }

.login-card {
    background: #fff;
    border: 1px solid rgba(255,255,255,.7);
    border-top: 5px solid var(--rcs-yellow);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(20,31,38,.22);
    padding: 34px;
}

.login-logo {
    display: block;
    height: auto;
    margin: 0 0 22px;
    max-width: 190px;
}

.login-kicker {
    color: #9a6b00;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.login-card h1 {
    color: #20282f;
    font-size: 28px;
    font-weight: 750;
    margin: 7px 0 6px;
}

.login-card p {
    color: #697983;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.login-field {
    margin: 0 0 17px;
}

    .login-field label {
        color: #344550;
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin: 0 0 7px;
    }

    .login-field input {
        box-sizing: border-box;
        font-size: 15px;
        min-height: 42px;
        padding: 9px 11px;
        width: 100%;
    }

.login-submit,
.main input.login-submit {
    background: #20282f;
    border-color: #20282f;
    color: #fff !important;
    margin-top: 5px;
    min-height: 42px;
    padding: 9px 18px;
    width: 100%;
}

    .login-submit:hover,
    .main input.login-submit:hover {
        background: #3d5060;
        border-color: #3d5060;
    }

@media (max-width: 640px) {
    body.login-screen .main {
        background: #eef1f3;
        padding: 18px;
    }

    .login-card {
        padding: 26px;
    }

    #MainContent_TabCtl0.ajax__tab_xp .ajax__tab_tab {
        padding: 9px 10px !important;
    }
}

/* Client Administration: page-specific layout retained in the shared stylesheet. */
.client-admin-shell {
    background: #f4f6f9;
    color: #17243a;
    font-family: "Segoe UI",Arial,sans-serif;
    margin: -8px;
    min-height: calc(100vh - 90px);
    padding: 22px;
}

.client-admin-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.client-admin-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.client-admin-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(300px,.95fr) minmax(380px,1.35fr);
}

.client-card {
    background: #fff;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    padding: 16px;
}

.client-card-title {
    color: #17243a;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
}

.client-list-wrap {
    max-height: 690px;
    overflow: auto;
}

.client-grid {
    border-collapse: collapse;
    max-width: 100%;
    min-width: 520px;
    width: auto;
}

    .client-grid th,
    .client-grid-header {
        background: #fff;
        border-bottom: 1px solid #dce5ef;
        color: #164d8f;
        font-size: 12px;
        padding: 8px;
        text-align: left;
    }

    .client-grid td {
        border-bottom: 1px solid #e5ebf3;
        color: #17243a;
        font-size: 13px;
        padding: 8px;
        vertical-align: middle;
    }

    .client-grid a {
        color: #164d8f;
        font-weight: 400;
        margin-right: 8px;
        text-decoration: none;
    }

.client-grid-row {
    cursor: pointer;
    transition: background .14s ease;
}

    .client-grid-row:hover td, .client-grid-row:focus td {
        background: var(--brand-gold-tint) !important;
    }

    .client-grid-row:focus {
        outline: 2px solid rgba(249,188,5,.5);
        outline-offset: -2px;
    }

.client-form-grid {
    display: grid;
    gap: 13px 16px;
    grid-template-columns: repeat(6,minmax(0,1fr));
}

.client-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.client-field {
    grid-column: span 3;
}

.client-field-wide {
    grid-column: 1 / -1;
}

.client-field-location {
    grid-column: span 2;
}

.client-label {
    color: #4a5a6d;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
}

.client-input,
.client-card input[type="text"],
.client-card textarea {
    background: #fff;
    border: 1px solid #c4cfdc;
    border-radius: 7px;
    box-sizing: border-box;
    color: #17243a;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    min-height: 36px;
    padding: 7px 10px;
    width: 100%;
}

.client-card textarea {
    line-height: 1.45;
    min-height: 98px;
    resize: vertical;
}

    .client-input[readonly],
    .client-card textarea[readonly] {
        background: #f5f7fb;
        color: #334155;
    }

.client-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.client-primary,
.client-secondary {
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    min-height: 36px;
    padding: 8px 14px;
}

.client-primary {
    background: #164d8f;
    color: #fff;
}

.client-secondary {
    background: #e8eef6;
    color: #17243a;
}

.client-validation {
    color: #b42318;
    font-weight: 600;
}

.client-contact-wrap {
    margin-top: 16px;
    overflow-x: auto;
}

/* Shared report popup used by the Photo and Punch List subforms. */
.overlay {
    background: #000;
    display: none;
    filter: alpha(opacity=50);
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: 100%;
}

.popup {
    background: var(--rcs-yellow);
    display: none;
    height: 200px;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 300px;
}

@media (max-width: 980px) {
    .client-admin-grid,
    .client-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Daily Log: page-specific presentation, kept in the shared stylesheet so
   visual refinements are maintained in one place. */
.daily-log-shell {
    background: #f4f7fb;
    color: #1c2430;
    font-family: "Segoe UI",Arial,sans-serif;
    min-height: calc(100vh - 108px);
    padding: 28px;
}

    .daily-log-shell .daily-log-page {
        margin: 0 auto;
        max-width: 1180px;
    }

    .daily-log-shell .daily-log-hero {
        align-items: flex-start;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .daily-log-shell .daily-log-kicker {
        color: #5b6b80;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .daily-log-shell .daily-log-title {
        color: #132238;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
        margin: 4px 0 8px;
    }

    .daily-log-shell .daily-log-subtitle {
        color: #526173;
        font-size: 14px;
    }

    .daily-log-shell .daily-log-actions {
        display: flex;
        justify-content: flex-end;
        min-width: 140px;
        padding-top: 10px;
    }

    .daily-log-shell .daily-log-grid {
        align-items: start;
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .daily-log-shell .modern-card {
        background: #fff;
        border: 1px solid #d8e1ec;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(20,35,55,.08);
        margin-bottom: 18px;
        padding: 18px;
    }

        .daily-log-shell .modern-card h2 {
            color: #182a41;
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 14px;
        }

        .daily-log-shell .modern-card h3 {
            color: #26374d;
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 10px;
        }

    .daily-log-shell .modern-form-grid {
        display: grid;
        gap: 14px 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-log-shell .modern-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .daily-log-shell .modern-field-wide {
        grid-column: 1 / -1;
    }

    .daily-log-shell .modern-label {
        color: #4a5a6d;
        font-size: 12px;
        font-weight: 700;
        padding-left: 2px;
        text-transform: uppercase;
    }

    .daily-log-shell .modern-value {
        color: #17243a;
        font-size: 14px;
        line-height: 1.4;
    }

    .daily-log-shell .modern-input,
    .daily-log-shell .modern-card input[type="text"],
    .daily-log-shell .modern-card textarea,
    .daily-log-shell .modern-card select {
        background: #fff;
        border: 1px solid #c4cfdc;
        border-radius: 7px;
        box-sizing: border-box;
        color: #17243a;
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 14px;
        min-height: 36px;
        padding: 7px 10px;
        width: 100%;
    }

    .daily-log-shell .modern-card textarea {
        line-height: 1.45;
        min-height: 112px;
        resize: vertical;
    }

        .daily-log-shell .modern-input[readonly],
        .daily-log-shell .modern-card textarea[readonly] {
            background: #f5f7fb;
            color: #334155;
        }

    .daily-log-shell .modern-time-card {
        border: 1px solid #d8e1ec;
        border-radius: 9px;
        padding: 14px;
    }

    .daily-log-shell .modern-time-grid,
    .daily-log-shell .modern-time-row {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-log-shell .modern-pill-row {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .daily-log-shell .modern-radio label {
        margin-right: 14px;
    }

    .daily-log-shell .modern-text-actions {
        align-items: center;
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    .daily-log-shell .modern-checkbox {
        color: #425269;
        font-size: 13px;
    }

    .daily-log-shell .modern-button input,
    .daily-log-shell input.modern-button,
    .daily-log-shell .modern-button {
        background: #1f5f99;
        border: 1px solid #174c7c;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        min-height: 36px;
        padding: 7px 14px;
    }

    .daily-log-shell .modern-secondary input,
    .daily-log-shell input.modern-secondary,
    .daily-log-shell .modern-secondary {
        background: #eef4fb;
        border: 1px solid #b7cadf;
        border-radius: 8px;
        color: #24517b;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        min-height: 34px;
        padding: 6px 12px;
    }

    .daily-log-shell .modern-metric-value input {
        background: #f6f9fd;
        border: 1px solid #c4cfdc;
        color: #17243a;
        font-size: 15px;
        font-weight: 700;
    }

    .daily-log-shell .modern-validation {
        background: #fff2f2;
        border: 1px solid #e6b6b6;
        border-radius: 8px;
        color: #9f1d1d;
        display: block;
        font-weight: 700;
        margin-bottom: 14px;
        padding: 10px 12px;
    }

    .daily-log-shell .modern-field-hint {
        color: #6b7788;
        display: block;
        font-size: 12px;
        margin-top: 5px;
    }

    .daily-log-shell .modern-input-error,
    .daily-log-shell .modern-input-error:focus {
        border-color: #b42318;
        box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
    }

        .daily-log-shell .modern-validation:empty {
            display: none;
        }

    .daily-log-shell .modern-pdf table {
        width: 100%;
    }

    .daily-log-shell .modern-pdf td {
        background: #eef4fb;
        border: 1px solid #c7d8ea;
        border-radius: 8px;
        color: #24517b;
        padding: 10px 12px;
    }

.legacy-time-fields,
.legacy-hidden-fields {
    display: none;
}

/* Shingle inspection details: turn the legacy question grid into compact,
   readable field groups while retaining the same server controls and data. */
.shingle-details-shell {
    padding: 0;
}

.shingle-details-form {
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 12px;
    border-top: 4px solid #206bc4;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 3px 16px rgba(31,48,70,.06);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: none;
    padding: 26px 38px;
    width: 100%;
}

    .shingle-details-form > tbody {
        display: block;
        max-width: 1000px;
    }

        .shingle-details-form > tbody > tr {
            display: block;
        }

            .shingle-details-form > tbody > tr > td {
                box-sizing: border-box;
                display: block;
                padding: 0;
            }

    .shingle-details-form .shingle-section {
        border-bottom: 1px solid #e5ebf2;
        margin: 24px 0 18px;
        padding-bottom: 10px;
    }

        .shingle-details-form .shingle-section:first-child {
            margin-top: 0;
        }

        .shingle-details-form .shingle-section td {
            color: #182433;
            font-size: 17px;
            font-weight: 700;
        }

    .shingle-details-form .shingle-question {
        align-items: center;
        background: #f5f8fc;
        border: 1px solid #e0e7ef;
        border-radius: 8px;
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(0,1fr) auto;
        margin: 0 0 10px;
        padding: 13px 15px;
    }

        .shingle-details-form .shingle-question td:first-child {
            color: #31445d;
            font-size: 14px;
            font-weight: 600;
        }

        .shingle-details-form .shingle-question td:last-child {
            white-space: nowrap;
        }

    .shingle-details-form input[type="radio"] {
        accent-color: #206bc4;
        margin: 0 4px 0 10px;
    }

    .shingle-details-form .shingle-field {
        margin: 0 0 18px;
    }

    .shingle-details-form .shingle-field-control {
        margin-left: auto;
        max-width: 820px;
    }

        .shingle-details-form .shingle-field-control label {
            color: #526277;
            display: block;
            font-size: 12px;
            font-weight: 650;
            margin: 0 0 6px;
        }

        .shingle-details-form .shingle-field-control textarea {
            box-sizing: border-box;
            display: block;
            max-width: 820px !important;
            min-height: 108px;
            width: 100% !important;
        }

    .shingle-details-form .shingle-options {
        background: var(--rcs-yellow-tint);
        border: 1px solid var(--rcs-yellow);
        border-radius: 8px;
        margin: 0 0 18px;
        padding: 13px 15px;
    }

        .shingle-details-form .shingle-options > td > table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }

            .shingle-details-form .shingle-options > td > table td {
                color: #31445d;
                font-size: 13px;
                padding: 0 16px 0 0;
            }

        .shingle-details-form .shingle-options label {
            font-weight: 600;
        }

    .shingle-details-form .shingle-metrics {
        background: #f7faff;
        border: 1px solid #d9e7f7;
        border-radius: 8px;
        margin: 24px 0;
        overflow: auto;
        padding: 15px;
    }

        .shingle-details-form .shingle-metrics > td > table {
            border: 0 !important;
            border-collapse: separate;
            border-spacing: 8px;
            min-width: 690px;
            width: 100%;
        }

            .shingle-details-form .shingle-metrics > td > table td {
                border: 0;
                color: #526277;
                font-size: 12px;
                padding: 2px 4px;
                text-align: left;
            }

        .shingle-details-form .shingle-metrics input {
            max-width: 100px !important;
            width: 100% !important;
        }

    .shingle-details-form .shingle-signoff {
        display: grid;
        gap: 12px;
        grid-template-columns: 180px minmax(220px,1fr) 60px minmax(120px,.45fr);
        margin: 16px 0;
    }

        .shingle-details-form .shingle-signoff td {
            align-self: center;
            color: #526277;
            font-size: 13px;
            font-weight: 600;
        }

        .shingle-details-form .shingle-signoff input,
        .shingle-details-form .shingle-signoff select {
            max-width: 100% !important;
            width: 100% !important;
        }

    .shingle-details-form .shingle-actions {
        border-top: 1px solid #e5ebf2;
        margin-top: 24px;
        padding-top: 18px;
    }

        .shingle-details-form .shingle-actions td {
            display: inline-block;
            margin-right: 8px;
        }

@media (max-width:720px) {
    .shingle-details-form {
        padding: 20px;
    }

        .shingle-details-form .shingle-question, .shingle-details-form .shingle-signoff {
            display: block;
        }

            .shingle-details-form .shingle-question td:last-child {
                margin-top: 10px;
            }

            .shingle-details-form .shingle-signoff td {
                margin: 0 0 8px;
            }
}

/*
   Elevated application shell
   ----------------------------------------------------------
   A Tabler-inspired administration workspace: a stable navigation rail,
   spacious content surface, and a consistent control system.  This layer is
   deliberately CSS-only so the existing Web Forms postbacks and DataGrids
   retain their behavior while the preview has a clearly distinct visual
   direction.
*/
body {
    background: #f5f7fb;
    color: #27364a;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

.page {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.header {
    background: #182433;
    box-shadow: 8px 0 28px rgba(15, 23, 42, .10);
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    position: sticky;
    top: 0;
    z-index: 10;
}

.title {
    box-sizing: border-box;
    float: none;
    padding: 28px 20px 22px;
}

.brand-context {
    color: #b8c8d8;
    display: block;
    font-size: 12px;
    margin-top: 9px;
}

.loginDisplay {
    color: #b8c8d8;
    float: none;
    font-size: 13px;
    margin-top: auto;
    order: 3;
    padding: 18px 20px 22px;
    text-align: left;
}

    .loginDisplay a,
    .loginDisplay a:visited {
        color: #d7e3ef;
        text-decoration: none;
    }

        .loginDisplay a:before {
            color: #9fb4ca;
            display: inline-block;
            font-family: "Font Awesome 7 Free";
            font-size: 14px;
            font-weight: 900;
            margin-right: 8px;
            width: 16px;
        }

#lnkLogOut:before {
    content: "\f2f5";
}

#lnkLogIn:before {
    content: "\f2f6";
}

div.hideSkiplink {
    background: transparent;
    margin: 0 10px;
    order: 2;
    width: auto;
}

div.menu {
    padding: 0;
}

    div.menu ul {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        div.menu ul li {
            display: block;
            width: 100%;
        }

            div.menu ul li a,
            div.menu ul li a:visited {
                background: transparent;
                border: 0;
                border-radius: 7px;
                box-sizing: border-box;
                color: #c4d1df;
                font-size: 13px;
                font-weight: 500;
                line-height: 1.35;
                margin: 0;
                padding: 10px 12px;
                transition: background .15s ease, color .15s ease;
                width: 100%;
            }

                div.menu ul li a:hover,
                div.menu ul li a:focus {
                    background: #2c3d51;
                    color: #fff;
                }

                div.menu ul li a:before {
                    color: #9fb4ca;
                    display: inline-block;
                    font-family: "Font Awesome 7 Free";
                    font-size: 14px;
                    font-weight: 900;
                    margin-right: 10px;
                    text-align: center;
                    width: 16px;
                }

                div.menu ul li a[href$="frmClient.aspx"]:before {
                    content: "\f0c0";
                }

                div.menu ul li a[href$="frmRoofingContractor.aspx"]:before {
                    content: "\f1ad";
                }

                div.menu ul li a[href$="frmProject.aspx"]:before {
                    content: "\f07c";
                }

                div.menu ul li a[href$="Users.aspx"]:before {
                    content: "\f4fe";
                }

                div.menu ul li a[href$="Universal.aspx"]:before {
                    content: "\f0e0";
                }

                div.menu ul li a[href$="frmInspector.aspx"]:before {
                    content: "\f2c1";
                }

                div.menu ul li a[href$="Holidays.aspx"]:before {
                    content: "\f133";
                }

                div.menu ul li a[href$="frmSearch.aspx"]:before {
                    content: "\f002";
                }

                div.menu ul li a[href$="frmArchived.aspx"]:before {
                    content: "\f187";
                }

                div.menu ul li a[href$="Reports.aspx"]:before {
                    content: "\e0e3";
                }

                div.menu ul li a[href$="ReportsWork.aspx"]:before {
                    content: "\f017";
                }

                div.menu ul li a.nav-active,
                div.menu ul li a.nav-active:hover,
                div.menu ul li a.nav-active:focus {
                    background: #294c72;
                    box-shadow: inset 3px 0 0 var(--rcs-yellow);
                    color: #fff;
                }

                    div.menu ul li a.nav-active:before {
                        color: var(--rcs-yellow);
                    }

.main {
    background: #f5f7fb;
    margin: 0;
    min-height: 100vh;
    padding: 32px 28px;
}

    .main > table,
    .main > div > table {
        background: #fff;
        border: 1px solid #e4eaf1;
        border-radius: 12px;
        box-shadow: 0 3px 16px rgba(31, 48, 70, .06);
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        padding: 26px;
    }

        .main > table > tbody > tr > td,
        .main > div > table > tbody > tr > td {
            padding: 9px 14px;
        }

    .main h1,
    .main h2,
    .main h3 {
        color: #182433;
        font-family: Inter, "Segoe UI", Arial, sans-serif;
        font-weight: 650;
        letter-spacing: -.015em;
    }

    .main h1 {
        font-size: 26px;
        margin: 0 0 22px;
    }

    .main h2 {
        font-size: 19px;
        margin: 4px 0 16px;
    }

.workspace-page-heading {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px;
    border-left: 5px solid var(--rcs-yellow);
    max-width: none;
    padding-left: 16px;
}

    .workspace-page-heading h2 {
        font-size: 27px;
        margin: 0 0 5px;
    }

    .workspace-page-heading p {
        color: #697a90;
        font-size: 14px;
        margin: 0;
    }

/* Standardize legacy server controls whose Width attributes otherwise render
   as mismatched inline styles.  The max width keeps compact forms readable. */
.main input[type="text"],
.main input[type="date"],
.main input[type="number"],
.main input[type="password"],
.main input[type="file"],
.main select,
.main textarea {
    border-color: #cdd7e3;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20, 32, 48, .03);
    font-size: 14px;
    min-height: 40px;
    padding: 8px 11px;
}

    .main input[type="text"][style],
    .main input[type="date"][style],
    .main input[type="number"][style],
    .main input[type="password"][style],
    .main select[style],
    .main textarea[style] {
        max-width: 360px !important;
        width: 100% !important;
    }

    .main input[type="text"]:focus,
    .main input[type="date"]:focus,
    .main input[type="number"]:focus,
    .main input[type="password"]:focus,
    .main select:focus,
    .main textarea:focus {
        border-color: #206bc4;
        box-shadow: 0 0 0 3px rgba(32, 107, 196, .14);
        outline: 0;
    }

.main input[type="submit"],
.main input[type="button"],
.main button {
    background: #206bc4;
    border-color: #206bc4;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(32, 107, 196, .18);
    font-weight: 600;
    min-height: 40px;
    padding: 8px 15px;
    color: #fff !important;
}

    .main input[type="submit"]:hover,
    .main input[type="button"]:hover,
    .main button:hover {
        background: #1859a4;
        border-color: #1859a4;
        color: #fff !important;
    }

.main table[bordercolor] {
    border: 1px solid #e1e8f0 !important;
    border-radius: 8px;
    overflow: hidden;
}

    .main table[bordercolor] th,
    .main table[bordercolor] tr:first-child td {
        background: #206bc4 !important;
        color: #fff !important;
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .035em;
        padding: 11px 12px;
    }

    .main table[bordercolor] td {
        border-bottom-color: #e8edf3;
        padding: 11px 12px;
    }

    .main table[bordercolor] tr:nth-child(even) td {
        background: #f4f8fd !important;
    }

    .main table[bordercolor] tr:hover td {
        background: #e9f2fc !important;
    }

/* Legacy DataGrids render a bordercolor attribute.  Treat them as compact
   data tables, rather than stretching their action column across the page. */
.main table[bordercolor],
.main .modern-data-grid,
.main .client-grid {
    display: inline-table;
    max-width: 100%;
    min-width: min(100%, 420px);
    width: fit-content !important;
}

.main .modern-data-grid {
    background: #fff;
    border: 0 !important;
    border-collapse: collapse;
    color: #18324c;
    font-size: 13px;
}

    .main .modern-data-grid thead th,
    .main .modern-data-grid thead td,
    .main .modern-data-grid > tbody > tr:first-child > th,
    .main .modern-data-grid > tbody > tr:first-child > td {
        background: #fff !important;
        border-bottom: 1px solid #dbe5ef !important;
        color: #164d8f !important;
        font-size: 12px;
        font-weight: 500;
        padding: 10px 11px !important;
    }

    .main .modern-data-grid thead a,
    .main .modern-data-grid > tbody > tr:first-child a {
        color: #164d8f !important;
    }

    .main .modern-data-grid > tbody > tr:not(:first-child) > td {
        background: #fff !important;
        border-bottom: 1px solid #e3eaf2 !important;
        color: #18324c !important;
        padding: 9px 11px !important;
    }

    .main .modern-data-grid th,
    .main .modern-data-grid td {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
    }

    .main .modern-data-grid > tbody > tr:nth-child(odd):not(:first-child) > td {
        background: #f7faff !important;
    }

    .main .modern-data-grid a {
        color: #0758a6;
        font-size: 12px;
        margin-right: 8px;
        text-decoration: none;
    }

        .main .modern-data-grid a:hover {
            color: var(--rcs-charcoal);
            text-decoration: underline;
        }

    .main table[bordercolor] td:last-child,
    .main table[bordercolor] th:last-child,
    .main .modern-data-grid td:last-child,
    .main .modern-data-grid th:last-child,
    .main .client-grid td:last-child,
    .main .client-grid th:last-child {
        white-space: nowrap;
        width: 1%;
    }

    .main table[bordercolor] > tbody > tr:not(:first-child):hover td,
    .main .modern-data-grid > tbody > tr:not(:first-child):hover td,
    .main .client-grid-row:hover td,
    .main .client-grid-row:focus td {
        background: var(--brand-gold-tint) !important;
    }

.main .grid-row-clickable {
    cursor: pointer;
}

    .main .grid-row-clickable:focus td {
        background: var(--brand-gold-tint) !important;
        outline: 2px solid rgba(249,188,5,.5);
        outline-offset: -2px;
    }

.main .proposal-panel {
    background: #fbfcfe;
    border-color: #e0e7ef;
    border-radius: 10px;
    padding: 14px;
}

.main .project-admin-layout,
.main .project-admin-layout > tbody {
    display: block;
    width: 100%;
}

.main .project-admin-layout {
    border-top: 4px solid #206bc4;
}

.main .project-list-mode {
    border-top-color: transparent;
}

.main .project-edit-mode {
    border-top-color: #206bc4;
}

.main .project-admin-layout > tbody > tr:first-child {
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    width: 100%;
}

    .main .project-admin-layout > tbody > tr:first-child > td {
        display: block;
        min-width: 0;
        padding: 0;
        width: auto !important;
    }

.main .project-list-mode > tbody > tr:first-child,
.main .project-edit-mode > tbody > tr:first-child {
    grid-template-columns: minmax(0, 1fr);
}

    .main .project-list-mode > tbody > tr:first-child > td:last-child,
    .main .project-edit-mode > tbody > tr:first-child > td:first-child {
        display: none;
    }

.main .project-list-mode table[bordercolor] {
    max-width: none;
    width: 100%;
}

.main .project-admin-layout > tbody > tr:first-child > td:first-child > table {
    width: 100% !important;
}

.project-list-heading,
.project-editor-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
}

    .project-list-heading > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .project-list-heading strong,
    .project-editor-heading strong {
        color: #182433;
        font-size: 15px;
        font-weight: 700;
    }

    .project-list-heading span,
    .project-editor-heading span {
        color: #75869b;
        font-size: 11px;
    }

.project-editor {
    border-left: 1px solid #e5ebf2;
    padding-left: 24px;
}

.project-edit-mode .project-editor {
    border-left: 0;
    padding-left: 0;
}

.project-new-button,
.main input.project-new-button {
    background: var(--rcs-yellow);
    border-color: var(--rcs-yellow);
    box-shadow: 0 2px 5px rgba(249,188,5,.25);
}

    .project-new-button:hover,
    .main input.project-new-button:hover {
        background: var(--rcs-yellow-hover);
        border-color: var(--rcs-yellow-hover);
    }

.main input.project-cancel-button {
    background: #fff;
    border-color: #cbd6e2;
    color: #40536b !important;
    margin-left: 8px;
}

    .main input.project-cancel-button:hover {
        background: var(--rcs-yellow-tint);
        border-color: var(--rcs-yellow);
        color: var(--rcs-charcoal) !important;
    }

.main .project-admin-layout table[bordercolor] {
    display: block;
    max-height: 700px;
    overflow: auto;
}

    .main .project-admin-layout table[bordercolor] td:first-child {
        min-width: 210px;
    }

    .main .project-admin-layout table[bordercolor] td:last-child {
        min-width: 82px;
    }

.main .project-admin-layout > tbody > tr:first-child > td:last-child > table.project-editor-form {
    display: block;
    margin: 0;
    max-width: none;
    width: 100% !important;
}
/* Project details use a conventional stacked form: every label belongs directly
   above its field, eliminating the unused middle column in the legacy table. */
.main .project-editor-form tbody,
.main .project-editor-form td {
    display: block;
    width: 100% !important;
}

.main .project-editor-form tbody {
    display: grid;
    gap: 15px 18px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.main .project-editor-form tr {
    display: block;
    margin: 0;
}

    .main .project-editor-form tr:nth-child(1),
    .main .project-editor-form tr:nth-child(2),
    .main .project-editor-form tr:nth-child(9),
    .main .project-editor-form tr:nth-child(10),
    .main .project-editor-form tr:nth-child(11),
    .main .project-editor-form tr:nth-child(12),
    .main .project-editor-form tr:nth-child(14),
    .main .project-editor-form tr:nth-child(15),
    .main .project-editor-form tr:nth-child(16),
    .main .project-editor-form tr:nth-child(17),
    .main .project-editor-form tr:nth-child(18),
    .main .project-editor-form tr:nth-child(19) {
        grid-column: span 3;
    }

    .main .project-editor-form tr:nth-child(3),
    .main .project-editor-form tr:nth-child(4),
    .main .project-editor-form tr:nth-child(5),
    .main .project-editor-form tr:nth-child(13),
    .main .project-editor-form tr:nth-child(20),
    .main .project-editor-form tr:nth-child(21) {
        grid-column: 1 / -1;
    }

    .main .project-editor-form tr:nth-child(6),
    .main .project-editor-form tr:nth-child(7),
    .main .project-editor-form tr:nth-child(8) {
        grid-column: span 2;
    }

    .main .project-editor-form tr.project-editor-row-archived,
    .main .project-editor-form tr.project-editor-row-billable-summary {
        grid-column: 1 / -1;
    }

    .main .project-editor-form tr > td:first-child,
    .main .project-editor-form .modern-label {
        color: #31445d;
        font-size: 12px;
        font-weight: 650;
        letter-spacing: .01em;
        margin: 0 0 6px;
        min-width: 0;
    }

    .main .project-editor-form tr > td:nth-child(2) {
        padding: 0;
    }

.main .project-editor-form input[type="text"],
.main .project-editor-form input[type="date"],
.main .project-editor-form input[type="number"],
.main .project-editor-form select {
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
}

.main .project-editor-form input[type="checkbox"] {
    margin: 2px 0 0;
}

.main .form-date-picker,
.main .form-date-picker table {
    width: 100% !important;
}

.main .form-date-picker td {
    display: table-cell;
    padding: 0;
    width: auto !important;
}

.main .form-date-picker .riTextBox {
    box-sizing: border-box;
    min-height: 40px;
    width: 100% !important;
}

/* The project form uses a grid for its legacy table rows. Restore the table
   display model inside Telerik date pickers so their calendar button stays inline. */
.main .project-editor-form .form-date-picker table {
    display: table !important;
}

.main .project-editor-form .form-date-picker tbody {
    display: table-row-group !important;
    width: auto !important;
}

.main .project-editor-form .form-date-picker tr {
    display: table-row !important;
    grid-column: auto !important;
    margin: 0;
}

.main .project-editor-form .form-date-picker td {
    display: table-cell !important;
    width: auto !important;
}

.main .project-editor-form tr:has(input[type="checkbox"]) {
    margin-bottom: 7px;
}

.main .project-editor-form tr:has(input[type="submit"]) {
    border-top: 1px solid #e5ebf2;
    margin-top: 18px;
    padding-top: 18px;
}

.main .proposal-form-table td {
    padding: 8px 10px;
}

.main .proposal-label,
.main .proposal-form-table .proposal-label {
    color: #526277;
    font-size: 13px;
    font-weight: 500 !important;
}

.main .input-group {
    align-items: stretch;
    border-color: #cdd7e3;
    border-radius: 6px;
    display: inline-flex;
    height: 40px;
    overflow: hidden;
    width: min(100%, 360px);
}

.main .input-group-text {
    align-items: center;
    background: #f1f5f9;
    border: 0;
    border-right: 1px solid #cdd7e3;
    display: flex;
    justify-content: center;
    padding: 8px 10px;
}

.main .input-group .form-control,
.main .project-editor-form .input-group .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    height: 38px;
    min-width: 0;
    padding: 7px 10px;
    width: 100%;
}

.main .input-group:focus-within {
    border-color: #7b9fca;
    box-shadow: 0 0 0 2px rgba(66, 116, 173, .14);
}

.main .proposal-reimbursement-options {
    display: grid;
    gap: 8px;
    line-height: normal;
}

.main .proposal-reimbursement-option {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 220px 156px;
}

    .main .proposal-reimbursement-option label {
        margin: 0;
        width: auto;
    }

    .main .proposal-reimbursement-option .reimbursement-checkbox {
        align-items: center;
        display: inline-flex;
        gap: 6px;
        min-width: 0;
    }

        .main .proposal-reimbursement-option .reimbursement-checkbox input[type="checkbox"] {
            flex: 0 0 auto;
            margin: 0;
        }

        .main .proposal-reimbursement-option .reimbursement-checkbox label {
            display: inline;
            font-weight: 500;
        }

    .main .proposal-reimbursement-option .reimbursement-input {
        box-sizing: border-box;
        margin: 0;
        max-width: 156px !important;
        width: 156px !important;
    }

.main .billing-form {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: repeat(2, minmax(0, 360px));
    padding: 4px 0;
}

.main .billing-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.main .billing-field-wide {
    grid-column: 1 / -1;
}

.main .billing-rate-row {
    display: grid;
    gap: 18px;
    grid-template-columns: 160px 160px minmax(0, 1fr);
}

    .main .billing-rate-row .input-group {
        max-width: 160px;
        width: 100%;
    }

.main .billing-overnight-checkbox {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    margin-top: 10px;
}

    .main .billing-overnight-checkbox input[type="checkbox"] {
        flex: 0 0 auto;
        margin: 0;
    }

    .main .billing-overnight-checkbox label {
        font-weight: 500;
        margin: 0;
    }

.main .billing-field > label,
.main .billing-field-label {
    color: #526277;
    font-size: 13px;
    font-weight: 500;
}

.main .billing-field > .form-control {
    box-sizing: border-box;
    height: 40px;
    max-width: 360px;
    padding: 7px 10px;
    width: 100%;
}

.main .billable-summary {
    background: #f7faff;
    border: 1px solid #d8e5f4;
    border-left: 4px solid #206bc4;
    border-radius: 8px;
    margin-top: 2px;
    padding: 14px 18px;
}

.main .billable-summary > .modern-label {
    display: block;
    margin-bottom: 7px;
}

.main .billable-summary-controls {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) auto;
}

.main .billable-summary-action {
    padding-bottom: 1px;
}

.main .billable-summary-calculate {
    margin: 0 !important;
    min-height: 40px;
}

.main .billable-summary-results {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.main .billable-summary-results > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.main .billable-summary-results span {
    color: #61738a;
}

.main .billable-summary-results strong {
    color: #21364d;
    font-size: 14px;
}

/* Bootstrap-compatible utility retained locally; this application does not load Bootstrap. */
.font-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

@media (max-width: 700px) {
    .main .billable-summary-controls {
        grid-template-columns: 1fr;
    }

    .main .billable-summary-action {
        padding: 0;
    }

    .main .billable-summary-results {
        flex-direction: column;
        gap: 14px;
    }
}

/* Site-wide visual skin ----------------------------------------------------
   The legacy pages remain server-rendered tables, but these patterns turn the
   common administration and inspection screens into clear browse/edit workspaces. */
.nav-toggle {
    align-items: center;
    align-self: stretch;
    background: #21364d;
    border: 1px solid #3b5067;
    border-radius: 7px;
    box-shadow: none;
    color: #dce7f3;
    cursor: pointer;
    display: inline-flex;
    font: 600 12px Inter, "Segoe UI", Arial, sans-serif;
    gap: 7px;
    justify-content: center;
    margin: 12px 10px 8px;
    min-height: 34px;
    padding: 6px 10px;
    transition: background .18s ease;
}

    .nav-toggle:hover {
        background: #2c4660;
    }

.nav-toggle-icon,
.nav-toggle-icon:before,
.nav-toggle-icon:after {
    background: currentColor;
    display: block;
    height: 2px;
    position: relative;
    width: 14px;
}

    .nav-toggle-icon:before,
    .nav-toggle-icon:after {
        content: "";
        left: 0;
        position: absolute;
    }

    .nav-toggle-icon:before {
        top: -5px;
    }

    .nav-toggle-icon:after {
        top: 5px;
    }

body.nav-collapsed .page {
    grid-template-columns: 60px minmax(0,1fr);
}

body.nav-collapsed .header {
    overflow: visible;
}

    body.nav-collapsed .header .title {
        display: none;
    }

    body.nav-collapsed .header .hideSkiplink {
        display: block;
        margin: 0 10px;
    }

body.nav-collapsed .nav-toggle {
    margin: 12px 9px 8px;
    padding: 6px;
}

body.nav-collapsed .nav-toggle-text {
    display: none;
}

body.nav-collapsed div.menu ul li a,
body.nav-collapsed div.menu ul li a:visited {
    display: block;
    font-size: 0;
    min-height: 40px;
    padding: 8px 0;
    text-align: center;
    width: 40px;
}

    body.nav-collapsed div.menu ul li a:before {
        font-size: 16px;
        margin: 0;
    }

    body.nav-collapsed div.menu ul li a[data-tooltip],
    body.nav-collapsed .loginDisplay a[data-tooltip] {
        position: relative;
    }

        body.nav-collapsed div.menu ul li a[data-tooltip]:hover:after,
        body.nav-collapsed div.menu ul li a[data-tooltip]:focus:after,
        body.nav-collapsed .loginDisplay a[data-tooltip]:hover:after,
        body.nav-collapsed .loginDisplay a[data-tooltip]:focus:after {
            background: #17283a;
            border: 1px solid #42566a;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
            color: #fff;
            content: attr(data-tooltip);
            font: 600 12px Inter, "Segoe UI", Arial, sans-serif;
            left: 48px;
            line-height: 1.2;
            padding: 7px 9px;
            pointer-events: none;
            position: absolute;
            text-align: left;
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            z-index: 20;
        }

body.nav-collapsed .loginDisplay {
    display: block;
    margin-top: auto;
    padding: 10px;
    text-align: center;
}

    body.nav-collapsed .loginDisplay a,
    body.nav-collapsed .loginDisplay a:visited {
        display: inline-block;
        font-size: 0;
        height: 40px;
        line-height: 40px;
        width: 40px;
    }

        body.nav-collapsed .loginDisplay a:before {
            font-size: 16px;
            margin: 0;
            vertical-align: middle;
        }

.maintenance-workspace,
.maintenance-workspace > tbody {
    display: block;
    width: 100%;
}

.main .maintenance-workspace {
    border-top: 4px solid #206bc4;
    padding: 16px;
}

.main .maintenance-list-mode {
    border-top-color: transparent;
}

.main .maintenance-edit-mode {
    border-top-color: #206bc4;
}

.maintenance-workspace > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    width: 100%;
}

    .maintenance-workspace > tbody > tr > td {
        display: block;
        min-width: 0;
        padding: 0;
        width: auto !important;
    }

.maintenance-list-mode > tbody > tr > td:last-child,
.maintenance-edit-mode > tbody > tr > td:first-child {
    display: none;
}

.maintenance-list-heading,
.maintenance-editor-heading {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 0 16px;
}

    .maintenance-list-heading > div,
    .maintenance-editor-heading > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .maintenance-list-heading strong,
    .maintenance-editor-heading strong {
        color: #182433;
        font-size: 16px;
        font-weight: 700;
    }

    .maintenance-list-heading span,
    .maintenance-editor-heading span {
        color: #74859a;
        font-size: 12px;
    }

.maintenance-list-panel table {
    width: 100% !important;
}

    .maintenance-list-panel table[bordercolor] {
        display: block;
        max-height: 680px;
        overflow: auto;
        width: 100%;
    }

        .maintenance-list-panel table[bordercolor] td:first-child {
            min-width: 220px;
        }

.maintenance-editor {
    max-width: 920px;
}

.main .maintenance-editor-form,
.main .simple-setup-form,
.main .users-workspace > tbody > tr > td:last-child > .maintenance-editor-form {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100% !important;
}

    .main .maintenance-editor-form > tbody,
    .main .simple-setup-form > tbody {
        display: grid;
        gap: 16px 18px;
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

        .main .maintenance-editor-form > tbody > tr,
        .main .simple-setup-form > tbody > tr {
            display: block;
            grid-column: span 3;
            margin: 0;
        }

            .main .maintenance-editor-form > tbody > tr:nth-child(2),
            .main .maintenance-editor-form > tbody > tr:nth-child(3),
            .main .maintenance-editor-form > tbody > tr:last-child,
            .main .simple-setup-form > tbody > tr {
                grid-column: 1 / -1;
            }

                .main .maintenance-editor-form > tbody > tr > td,
                .main .simple-setup-form > tbody > tr > td {
                    display: block;
                    padding: 0;
                    width: 100% !important;
                }

                    .main .maintenance-editor-form > tbody > tr > td:first-child,
                    .main .simple-setup-form > tbody > tr > td:first-child {
                        color: #31445d;
                        font-size: 12px;
                        font-weight: 650;
                        margin: 0 0 6px;
                    }

    .main .maintenance-editor-form input[type="text"],
    .main .maintenance-editor-form input[type="password"],
    .main .maintenance-editor-form select,
    .main .maintenance-editor-form textarea,
    .main .simple-setup-form input[type="text"],
    .main .simple-setup-form textarea {
        box-sizing: border-box;
        max-width: 100% !important;
        width: 100% !important;
    }

    .main .maintenance-editor-form > tbody > tr:last-child {
        border-top: 1px solid #e5ebf2;
        margin-top: 4px;
        padding-top: 18px;
    }

    .main .maintenance-editor-form > tbody > tr:nth-child(4),
    .main .maintenance-editor-form > tbody > tr:nth-child(5),
    .main .maintenance-editor-form > tbody > tr:nth-child(6) {
        grid-column: span 2;
    }

    .main .maintenance-editor-form > tbody > tr:nth-child(4) {
        grid-column: 1 / span 2;
    }

    .main .maintenance-editor-form > tbody > tr:nth-child(7) {
        grid-column: 1 / -1;
    }

.main .inspector-editor-form > tbody > tr:nth-child(1),
.main .inspector-editor-form > tbody > tr:nth-child(2) {
    grid-column: span 3;
}

.main .inspector-editor-form > tbody > tr:nth-child(3),
.main .inspector-editor-form > tbody > tr:nth-child(4),
.main .inspector-editor-form > tbody > tr:nth-child(5) {
    grid-column: span 2;
}

.main .inspector-editor-form > tbody > tr:nth-child(6),
.main .inspector-editor-form > tbody > tr:nth-child(7) {
    grid-column: 1 / -1;
}

.users-workspace > tbody > tr:first-child > td {
    color: #182433;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 18px;
}

.main .users-edit-mode {
    border-top: 4px solid #206bc4;
}

.users-workspace > tbody > tr:first-child input {
    float: right;
}

.users-workspace > tbody > tr:last-child {
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr);
}

    .users-workspace > tbody > tr:last-child > td {
        min-width: 0;
        vertical-align: top;
    }

        .users-workspace > tbody > tr:last-child > td:first-child table {
            width: 100% !important;
        }

.users-list-mode > tbody > tr:last-child > td:not(:first-child),
.users-edit-mode > tbody > tr:last-child > td:first-child {
    display: none;
}

.users-edit-mode > tbody > tr:last-child {
    grid-template-columns: minmax(0,1fr);
}

.users-workspace .maintenance-editor-form > tbody > tr {
    grid-column: span 3;
}

    .users-workspace .maintenance-editor-form > tbody > tr:nth-child(1),
    .users-workspace .maintenance-editor-form > tbody > tr:nth-child(2),
    .users-workspace .maintenance-editor-form > tbody > tr:nth-child(3),
    .users-workspace .maintenance-editor-form > tbody > tr:nth-child(6) {
        grid-column: 1 / -1;
    }

.client-card-heading {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 15px;
}

    .client-card-heading .client-card-title {
        margin: 0;
    }

.client-card-helper {
    color: #74859a;
    font-size: 12px;
}

.client-list-mode .client-admin-grid {
    display: block;
    max-width: none;
}

.client-list-mode .client-card {
    box-sizing: border-box;
    width: 100%;
}

.client-list-mode .client-list-wrap {
    max-height: 720px;
    width: 100%;
}

.client-list-mode .client-grid {
    min-width: 100%;
}

.client-edit-mode .client-admin-grid {
    display: block;
    max-width: 980px;
}

.client-edit-mode .client-card {
    border-top: 4px solid #206bc4;
    width: 100%;
}

.client-contact-layout,
.client-contact-layout > tbody,
.client-contact-layout > tbody > tr,
.client-contact-layout > tbody > tr > td {
    display: block;
    width: 100% !important;
}

.client-contact-panel {
    margin-top: 22px;
    width: 100%;
}

.client-contact-heading {
    color: #182433;
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 10px;
}

.client-contact-panel > tbody > tr:last-child {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr);
}

    .client-contact-panel > tbody > tr:last-child > td {
        display: block;
        min-width: 0;
        padding: 0;
        vertical-align: top;
    }

.client-contact-form,
.client-contact-form > tbody {
    display: block;
    width: 100%;
}

    .client-contact-form > tbody {
        display: grid;
        gap: 14px 16px;
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

        .client-contact-form > tbody > tr {
            display: block;
            grid-column: span 3;
        }

            .client-contact-form > tbody > tr:nth-child(3),
            .client-contact-form > tbody > tr:nth-child(4),
            .client-contact-form > tbody > tr:nth-child(5) {
                grid-column: span 2;
            }

            .client-contact-form > tbody > tr:nth-child(6),
            .client-contact-form > tbody > tr:last-child {
                grid-column: 1 / -1;
            }

            .client-contact-form > tbody > tr > td {
                display: block;
                padding: 0;
                width: 100% !important;
            }

                .client-contact-form > tbody > tr > td:first-child {
                    color: #31445d;
                    font-size: 12px;
                    font-weight: 650;
                    margin-bottom: 6px;
                }

    .client-contact-form input[type="text"] {
        box-sizing: border-box;
        max-width: 100% !important;
        width: 100% !important;
    }

    .client-contact-form > tbody > tr:last-child {
        border-top: 1px solid #e5ebf2;
        margin-top: 4px;
        padding-top: 16px;
    }

/* Inspection step pages: the legacy workflow used black/red scrolling boxes
   and inline field text.  These shared roles make each child page read as one
   focused step with a clear entry area, list, and navigation bar. */
.main .inspection-child-workspace {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 1180px;
    padding: 0;
    width: 100%;
}

    .main .inspection-child-workspace > tbody > tr > td {
        padding: 0;
    }

.inspection-child-entry {
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 12px;
    border-top: 4px solid #206bc4;
    box-shadow: 0 3px 16px rgba(31,48,70,.06);
    padding: 22px !important;
}

    .inspection-child-entry h1 {
        font-size: 22px;
        margin: 0 0 18px;
    }

.inspection-entry-grid {
    align-items: end;
    display: grid;
    gap: 15px 18px;
    grid-template-columns: repeat(6,minmax(0,1fr));
}

.inspection-entry-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: span 2;
}

.inspection-entry-field-wide {
    grid-column: span 3;
}

.inspection-entry-field label {
    color: #31445d;
    font-size: 12px;
    font-weight: 650;
}

.inspection-entry-field input[type="text"], .inspection-entry-field input[type="file"] {
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
}

.inspection-entry-upload {
    grid-column: span 2;
}

.inspection-entry-actions {
    grid-column: span 1;
}

.inspection-child-grid {
    background: #fff !important;
    border: 1px solid #e0e8f1 !important;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(31,48,70,.06);
    box-sizing: border-box;
    color: #18324c !important;
    margin-top: 18px;
    max-height: 520px;
    overflow: auto;
    padding: 0 !important;
    width: 100% !important;
}

    .inspection-child-grid .modern-data-grid {
        margin: 0;
        min-width: 100%;
        width: 100% !important;
    }

        .inspection-child-grid .modern-data-grid input[type="text"], .inspection-child-grid .modern-data-grid select {
            box-sizing: border-box;
            max-width: 100% !important;
            min-height: 34px;
            width: 100% !important;
        }

.inspection-child-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

    .inspection-child-actions input[id*="cmdPrevious"] {
        background: #fff;
        border-color: #cbd6e2;
        color: #40536b !important;
    }

        .inspection-child-actions input[id*="cmdPrevious"]:hover {
            background: var(--rcs-yellow-tint);
            border-color: var(--rcs-yellow);
            color: var(--rcs-charcoal) !important;
        }

@media (max-width: 760px) {
    .inspection-entry-grid {
        grid-template-columns: 1fr;
    }

    .inspection-entry-field, .inspection-entry-field-wide, .inspection-entry-upload, .inspection-entry-actions {
        grid-column: 1;
    }
}

.main .search-workspace-form,
.main .reports-filter-form {
    max-width: 960px;
    width: 100%;
}

.main .simple-setup-form {
    border-top: 4px solid #206bc4;
}

.main .search-workspace-form > tbody,
.main .reports-filter-form > tbody {
    display: grid;
    gap: 16px 20px;
    grid-template-columns: repeat(6,minmax(0,1fr));
}

    .main .search-workspace-form > tbody > tr,
    .main .reports-filter-form > tbody > tr {
        display: block;
        grid-column: 1 / -1;
    }

        .main .search-workspace-form > tbody > tr:first-child {
            grid-column: span 3;
        }

        .main .search-workspace-form > tbody > tr > td,
        .main .reports-filter-form > tbody > tr > td {
            display: block;
            padding: 0;
            width: 100% !important;
        }

        .main .search-workspace-form > tbody > tr:first-child > td:first-child {
            color: #31445d;
            font-size: 12px;
            font-weight: 650;
            margin-bottom: 6px;
        }

        .main .search-workspace-form > tbody > tr:first-child > td:nth-child(2) select {
            box-sizing: border-box;
            max-width: 100%;
            width: 100%;
        }

.main .search-workspace-form table[bordercolor] {
    max-width: 100%;
    width: 100%;
}

.main table[bordercolor] tr:hover td {
    background: var(--brand-gold-tint) !important;
}

.main .reports-filter-form > tbody {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

    .main .reports-filter-form > tbody > tr {
        grid-column: span 1;
    }

        .main .reports-filter-form > tbody > tr:nth-child(4),
        .main .reports-filter-form > tbody > tr:nth-child(5),
        .main .reports-filter-form > tbody > tr:nth-child(6),
        .main .reports-filter-form > tbody > tr:nth-child(7),
        .main .reports-filter-form > tbody > tr:nth-child(8) {
            grid-column: 1 / -1;
        }

.main .reports-filter-label {
    color: #31445d;
    display: block;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 6px;
}

.reports-shell .modern-validation {
    display: block;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #fff2f2;
    border: 1px solid #e6b6b6;
    border-radius: 8px;
    color: #9f1d1d;
    font-weight: 700;
}

.reports-shell .modern-validation:empty {
    display: none;
}

.main .reports-filter-form select {
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
}

.main .reports-filter-form input[type="submit"] {
    margin: 0 8px 8px 0;
}

.inspection-details-shell {
    margin: 0 auto;
    max-width: 1180px;
}

    .inspection-details-shell .inspection-details-form {
        background: #fff;
        border: 1px solid #e0e8f1;
        border-radius: 12px;
        border-top: 4px solid #206bc4;
        box-shadow: 0 3px 16px rgba(31,48,70,.06);
        box-sizing: border-box;
        padding: 24px;
        width: 100% !important;
    }

        .inspection-details-shell .inspection-details-form > tbody > tr > td {
            padding: 9px 12px;
        }

.checklist-details-shell .inspection-details-form > tbody > tr > td {
    padding: 10px 0;
}

.checklist-details-shell .inspection-details-form table[border] {
    border: 1px solid #dce5ee !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100% !important;
}

    .checklist-details-shell .inspection-details-form table[border] td {
        border-color: #dce5ee !important;
        padding: 8px 10px;
    }

    .checklist-details-shell .inspection-details-form table[border] tr:first-child td {
        background: #213a57;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .checklist-details-shell .inspection-details-form table[border] tr:nth-child(even) td {
        background: #f6f9fc;
    }

.checklist-details-shell .inspection-details-form input[type="radio"] {
    margin: 0 3px;
}

.metal-details-shell .inspection-details-form > tbody {
    display: grid;
    gap: 15px 20px;
    grid-template-columns: repeat(6,minmax(0,1fr));
}

    .metal-details-shell .inspection-details-form > tbody > tr {
        display: block;
        grid-column: 1 / -1;
    }

        .metal-details-shell .inspection-details-form > tbody > tr > td {
            display: block;
            padding: 0;
        }

            .metal-details-shell .inspection-details-form > tbody > tr > td:first-child {
                color: #31445d;
                font-size: 13px;
                font-weight: 650;
                margin: 0 0 7px;
            }

            .metal-details-shell .inspection-details-form > tbody > tr > td + td {
                margin-top: 7px;
            }

.metal-details-shell .inspection-details-form textarea {
    box-sizing: border-box;
    max-width: 680px !important;
    width: 100% !important;
}

.main .shingle-details-form .shingle-field-control textarea[style] {
    display: block;
    max-width: 820px !important;
    width: 100% !important;
}

.client-admin-shell,
.daily-log-shell {
    background: transparent;
    padding: 0;
}

    .client-card,
    .daily-log-shell .modern-card {
        border-color: #e1e8f0;
        border-radius: 12px;
        box-shadow: 0 3px 16px rgba(31,48,70,.06);
        padding: 22px;
    }

    .client-admin-title,
    .daily-log-shell .daily-log-title {
        font-size: 27px;
        font-weight: 650;
        letter-spacing: -.02em;
    }

    .client-card-title,
    .daily-log-shell .modern-card h2 {
        font-size: 17px;
        font-weight: 650;
    }

    .client-label,
    .daily-log-shell .modern-label {
        color: #526277;
        font-size: 12px;
        font-weight: 500;
        text-transform: none;
    }

    .client-primary,
    .daily-log-shell .modern-button {
        background: #206bc4;
        border-color: #206bc4;
        border-radius: 6px;
    }

@media (max-width: 980px) {
    .page {
        display: block;
    }

    .header {
        min-height: auto;
        position: static;
    }

    .title {
        padding: 20px 22px 14px;
    }

    .loginDisplay {
        display: none;
    }

    div.hideSkiplink {
        margin: 0 14px 14px;
        overflow-x: auto;
    }

    div.menu ul {
        flex-direction: row;
        min-width: max-content;
    }

        div.menu ul li {
            width: auto;
        }

            div.menu ul li a, div.menu ul li a:visited {
                width: auto;
            }

    .main {
        padding: 22px 16px;
    }

    .nav-toggle {
        display: none;
    }

    body.nav-collapsed .header {
        overflow: visible;
    }

    .main .project-admin-layout > tbody > tr:first-child {
        grid-template-columns: 1fr;
    }
}

/* Keep the working area usable on a laptop-sized window.  At this point the
   project picker moves above the form instead of introducing a page-wide
   horizontal scrollbar. */
@media (max-width: 1180px) and (min-width: 981px) {
    .main {
        padding: 26px 24px;
    }

        .main .project-admin-layout > tbody > tr:first-child {
            grid-template-columns: 1fr;
        }

        .main .project-admin-layout table[bordercolor] {
            max-height: 280px;
        }
}

@media (max-width: 720px) {
    .main > table,
    .main > div > table {
        max-width: 100%;
        padding: 18px;
    }

    .workspace-page-heading {
        max-width: 100%;
    }

    .project-editor {
        border-left: 0;
        border-top: 1px solid #e5ebf2;
        margin-top: 18px;
        padding: 18px 0 0;
    }

    .main .project-admin-layout > tbody > tr:first-child > td:last-child > table.project-editor-form {
        max-width: 100%;
        width: 100% !important;
    }

    .main .project-editor-form tbody {
        grid-template-columns: 1fr;
    }

    .main .project-editor-form tr,
    .main .project-editor-form tr:nth-child(n) {
        grid-column: 1;
    }

    .main .billing-form,
    .main .billing-rate-row {
        grid-template-columns: 1fr;
    }

    .main .maintenance-editor-form > tbody,
    .main .simple-setup-form > tbody {
        grid-template-columns: 1fr;
    }

        .main .maintenance-editor-form > tbody > tr,
        .main .maintenance-editor-form > tbody > tr:nth-child(n),
        .main .simple-setup-form > tbody > tr {
            grid-column: 1;
        }

    .users-workspace > tbody > tr:last-child {
        grid-template-columns: 1fr;
    }

    .inspection-details-shell .inspection-details-form {
        overflow-x: auto;
        padding: 16px;
    }

    .checklist-details-shell .inspection-details-form table[border] {
        min-width: 660px;
    }
}

@media (max-width: 900px) {
    .daily-log-shell {
        padding: 18px;
    }

        .daily-log-shell .daily-log-hero,
        .daily-log-shell .daily-log-grid {
            display: block;
        }

        .daily-log-shell .daily-log-actions {
            justify-content: flex-start;
        }

        .daily-log-shell .modern-form-grid,
        .daily-log-shell .modern-time-grid,
        .daily-log-shell .modern-time-row {
            grid-template-columns: 1fr;
        }
}

/* Keep the Login action on the RCS charcoal palette after legacy button
   rules later in this stylesheet have been applied. */
body.login-screen .main input.login-submit {
    background: #20282f;
    border-color: #20282f;
    color: #fff !important;
}

    body.login-screen .main input.login-submit:hover {
        background: #3d5060;
        border-color: #3d5060;
    }


.required-label {
    color: #9f1d1d !important;
    font-weight: 700 !important;
}

.required-marker {
    font-weight: 800;
}

.holiday-admin-shell .modern-validation {
    background: #fff2f2;
    border: 1px solid #e6b6b6;
    border-radius: 8px;
    color: #9f1d1d;
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 16px;
    padding: 10px 12px;
}

.holiday-admin-shell .modern-validation:empty {
    display: none;
}

.holiday-admin-shell .holiday-editor-form > tbody > tr:last-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}