body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    background-image: url("/Images/T4T_bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

:root {
    --app-stage-width: min(1920px, calc(100vw - 24px));
}

header {
    background-color: #741e43;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

footer {
    background-color: #741e43;
    width: 100%;
    height: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    color: white;
    padding: 10px;
}

#divForgottenPassword {
    position: absolute;
    width: 420px;
    height: 220px;
    z-index: 15;
    top: 184px;
    left: 52%;
    margin: -100px 0 0 -150px;
    background: #999999;
    display: none;
    border: 2px solid #777777;
    color: white;
}

    #divForgottenPassword a {
        color: white;
    }


#TemporaryPassword {
    position: absolute;
    width: 420px;
    height: 220px;
    z-index: 15;
    top: 184px;
    left: 52%;
    margin: -100px 0 0 -150px;
    background: #999999;
    border: 2px solid #777777;
    color: white;
}

    #TemporaryPassword a {
        color: white;
    }

@font-face {
    font-family: 'CharlesWright-Bold';
    src: url('../fonts/CharlesWright-Bold.ttf') format('truetype'), url('../fonts/CharlesWright-Bold.ttf') format('truetype');
}

.HeaderImage {
    padding: 10px 14px;
}

#TextBoxVRM {
    font-size: 14pt;
    border: 2px solid #000;
    border-radius: 6px;
    background: #f5ee31;
    width: 110px;
    text-transform: uppercase;
    padding: 3px 4px 2px 4px;
    text-align: center;
    font-family: CharlesWright-Bold;
}

.HButton {
    padding: 3px;
    border-radius: 4px;
    font-size: 10pt;
    border: 1px solid white;
    background-color: #741e43;
    color: white;
}

    .HButton:hover {
        background-color: pink;
        color: #000;
        border-color: #000;
    }

#ButtonGo {
    margin: 0px;
    height: 35px;
}

#DropDownListVRMHistory {
    width: 150px;
    font-size: 10pt;
    padding: 2px;
}

#ButtonManualLookup {
    width: 150px;
}

#wrapper {
    margin: 70px;
    text-align: center;
}

.LoginBox {
    width: 400px;
    height: 220px;
    background-color: white;
    border-radius: 6px;
    color: #741e43;
    display: inline-block;
    border: 2px solid white;
    font-size: 10pt;
    text-align: left;
}

.BoxHeader {
    width: 395px;
    font-size: 11pt;
    font-weight: bold;
    color: white;
    background-color: #741e43;
    border-radius: 6px 6px 0 0;
    padding: 8px 0 8px 5px;
    margin-bottom: 15px;
}

.TextBoxLogin {
    width: 380px;
    padding: 4px;
    font-size: 11pt;
    border-radius: 4px;
    background-color: white;
}

.RedText {
    color: #ff0000;
}

.ImageLogo {
    padding: 3px;
    border: 1px solid;
    background-color: #741E43;
    max-width: 200px;
    border-style: none;
    margin-top: 10px;
}

.HeaderButton {
    padding: 10px;
    text-align: center;
    width: 140px;
    color: white;
    margin-top: 20px;
    cursor: pointer;
}

.TopLoginButton {
    background-color: #5B1734;
    text-align: center;
    margin-right: 10px;
}

    .TopLoginButton a:link, .TopLoginButton a:visited, .TopLoginButton a:hover, .TopLoginButton a:active {
        color: white;
        text-decoration: none;
    }

.TopRegisterButton {
    background-color: #0F0F0F;
    color: #FFFFFF;
    margin-right: 10px;
}

    .TopRegisterButton a:link, .TopRegisterButton a:visited, .TopRegisterButton a:hover, .TopRegisterButton a:active {
        color: white;
        text-decoration: none;
    }

#blackbanner {
    background-color: #000000;
    color: #BAB5B5;
    text-align: center;
    padding: 25px;
    font-size: 14pt;
}

    #blackbanner b {
        color: #FFFFFF;
    }

#bgcontainer {
    background-image: url(../Images/backpurple.png);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding-top: 140px;
    padding-bottom: 250px;
    background-color: #5B1734;
}

.TitleText {
    font-size: 48pt;
    color: #FFFFFF;
}

.SubTitleText {
    padding-top: 60px;
    font-size: 26pt;
    color: #FFFFFF;
    margin-bottom: 50px;
}

.SignUpNowBIG {
    padding: 20px;
    background-color: #0F0F0F;
    text-align: center;
    color: #BAB5B5;
    width: 300px;
    margin: 0 auto 80px auto;
}

    .SignUpNowBIG a:link, .SignUpNowBIG a:visited, .SignUpNowBIG a:hover, .SignUpNowBIG a:active {
        color: #BAB5B5;
    }

.PoweredByImage {
    width:500px;
    background-color: white;
    margin-top: -25px;
}

.SignUpNowBIGP {
    padding: 20px;
    background-color: #731D43;
    text-align: center;
    color: #FFFFFF;
    width: 300px;
    margin: 0 auto 80px auto;
}

    .SignUpNowBIGP a:link, .SignUpNowBIGP a:visited, .SignUpNowBIGP a:hover, .SignUpNowBIGP a:active {
        color: #FFFFFF;
    }

.purplebackground {
    background-color: #731D43;
    text-align: center;
}

.greybackground {
    background-color: #EDEDED;
    text-align: center;
}

.movableImage {
    margin: -270px auto 0 auto;
    padding-bottom: 50px;
    width: 75%;
}

.bigblacktext {
    color: #000000;
    font-size: 20pt;
    margin-top: 30px;
}

.smallblacktext {
    color: #000000;
    font-size: 12pt;
    margin-top: 30px;
}

.floatingD {
    background: url(../Images/diamond.png) no-repeat center;
    padding-top: 25px;
    padding-bottom: 125px;
    text-align: center;
}

.whitebackground {
    background-color: #FFFFFF;
    text-align: center;
}

.bigpurpletext {
    padding-top: 130px;
    padding-bottom: 40px;
    color: #5B1734;
    font-size: 32pt;
}

.floatImage {
    padding: 30px;
}

.floatText {
    color: #5B1734;
    font-size: 16pt;
}

.spacer15 {
    height: 15px;
}

.spacer25 {
    height: 25px;
}

.spacer35 {
    height: 35px;
}

.spacer55 {
    height: 55px;
}

.centered {
    text-align: center;
    margin: 0 auto;
}

.tableRowOdd, .tableRowEven {
    height: 70px;
    text-align: left;
    padding: 10px;
    font-size: 10pt;
}

.tableRowOdd {
    background-color: #ECECEC;
}

.tableRowEven {
    background-color: #E4E4E4;
}

.blackbackground {
    background-color: #000000;
    padding-top: 100px;
    color: #FFFFFF;
    text-align: center;
}

.mediumwhite {
    font-size: 20pt;
    color: white;
    margin: 0;
}

.bigwhite {
    font-size: 100pt;
    color: white;
    margin: 0;
}

.smallwhite {
    font-size: 14pt;
    color: white;
    margin: 5px 15px 15px 15px;
    line-height: 1.6em;
}

.CleanTextBox {
    border: 0;
    border-bottom: 2px solid #5B1734;
    padding-left: 5px;
    color: #FFFFFF;
    background-color: #731D43;
    width: 100%;
    font-size: 14pt;
}

.CleanTextBox2 {
    border: 0;
    border-bottom: 2px solid #5B1734;
    padding-left: 5px;
    color: #FFFFFF;
    background-color: #731D43;
    width: 100%;
    font-size: 14pt;
}

.black {
    color: #000000;
}

.SubmitButton {
    padding: 20px;
    background-color: #5B1734;
    text-align: center;
    width: 200px;
    color: #FFFFFF;
    margin: 20px auto;
}

    .SubmitButton a:link, .SubmitButton a:visited, .SubmitButton a:hover, .SubmitButton a:active {
        color: #FFFFFF;
    }

.LoginBoxLabel {
    font-size: 12pt;
    margin: 0;
    padding: 0;
}

.LoginBoxSubmitFrame {
    text-align: center;
}

#PanelUsername, #PanelPassword {
    margin-left: 5px;
}

.PaymentNote {
    width: 860px;
    text-align: center;
}

.PaymentOptionsBox {
    margin: 25px 0 0 25px;
    width: 860px;
    padding: 5px;
    text-align: center;
    position: relative;
    color: #000000;
}

.BoxA {
    background-color: #9E8602;
}

.BoxB {
    background-color: #C0BEBF;
}

.POTitle {
    font-size: 14pt;
    font-weight: bold;
}

.POBody {
    font-size: 10pt;
    color: black;
}

.POPrice {
    font-size: 25pt;
}

.POsmallprint {
    margin: 3px 3px 25px 3px;
    padding: 0;
    font-size: 8pt;
}

.POButtonas {
    text-decoration: none;
    font-weight: bold;
    border: 2px solid;
    border-radius: 4px;
    padding: 11px;
    cursor: pointer;
}

#LeftColumn {
    width: 300px;
    float: left;
    border-radius: 3px;
    background-color: white;
    min-height: 550px;
    height: 100%;
    padding-bottom: 20px;
    margin: 10px 15px;
}

    #LeftColumn p {
        padding: 4px 10px;
    }

.page-pane-right {
    margin-left: 330px;
    margin-right: 15px;
    margin-top: 15px;
    width: auto;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(116, 30, 67, 0.28);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding-bottom: 16px;
    padding: 0px;
}

.page-pane {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(116, 30, 67, 0.28);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding-bottom: 16px;
    padding: 0px;
    margin: 0px;
}

.page-pane-inner {
    padding: 10px;
    min-height: 60vh;
}

.end-of-year-page-pane .page-pane-inner {
    overflow-x: auto;
    padding-top: 0;
}

    .end-of-year-page-pane .page-pane-inner::after {
        clear: both;
        content: "";
        display: block;
    }

    .end-of-year-page-pane #LeftColumn2 {
        width: 165px;
        float: left;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(116, 30, 67, 0.18);
        min-height: 550px;
        height: 100%;
        padding-bottom: 20px;
    }

    .end-of-year-page-pane #RightColumn2 {
        width: 855px;
        margin-left: 190px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(116, 30, 67, 0.18);
        min-height: 550px;
        height: 100%;
    }

    .end-of-year-page-pane .end-of-year-results-content {
        overflow-x: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

.invoice-page-pane .page-pane-inner,
.fixed-document-page-pane .page-pane-inner {
    overflow-x: auto;
}

.invoice-page-pane .invoice-fixed-canvas,
.fixed-document-page-pane .fixed-document-canvas {
    width: 1032px;
    min-width: 1032px;
    margin-left: auto;
    margin-right: auto;
}

.invoice-list-grid,
.customer-list-grid {
    table-layout: fixed;
    border-collapse: collapse;
}

    .invoice-list-grid th,
    .invoice-list-grid td,
    .job-sheet-list-grid th,
    .job-sheet-list-grid td,
    .customer-list-grid th,
    .customer-list-grid td,
    .document-list-table td {
        box-sizing: border-box;
        padding: 5px 6px;
        text-align: left;
        vertical-align: middle;
    }

.job-sheet-list-grid,
.document-list-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .invoice-list-grid th a,
    .job-sheet-list-grid th a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .invoice-list-grid th a::after,
        .job-sheet-list-grid th a::after {
            content: "\f0dc";
            font-family: "Font Awesome 6 Free", "FontAwesome";
            font-size: 9pt;
            font-weight: 900;
            line-height: 1;
        }

.invoice-list-grid th:nth-child(1),
.invoice-list-grid td:nth-child(1) {
    width: 82px;
    text-align: center;
}

.document-list-table .document-list-select-column {
    width: 82px;
    text-align: center;
}

.document-list-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

.service-sheet-list-table .document-list-select-column {
    width: 110px;
    padding-right: 18px;
}

.invoice-list-grid th:nth-child(2),
.invoice-list-grid td:nth-child(2) {
    width: 115px;
}

.invoice-list-grid th:nth-child(3),
.invoice-list-grid td:nth-child(3) {
    width: 96px;
}

.invoice-list-grid th:nth-child(4),
.invoice-list-grid td:nth-child(4) {
    width: 135px;
}

.invoice-list-grid th:nth-child(5),
.invoice-list-grid td:nth-child(5) {
    width: 110px;
}

.invoice-list-grid th:nth-child(7),
.invoice-list-grid td:nth-child(7) {
    width: 44px;
    text-align: center;
}

.invoice-list-grid th:nth-child(8),
.invoice-list-grid td:nth-child(8),
.document-list-delete-column,
.document-list-table td:last-child {
    width: 70px;
    text-align: center;
}

.job-sheet-list-grid th:nth-child(1),
.job-sheet-list-grid td:nth-child(1) {
    width: 82px;
    text-align: center;
}

.job-sheet-list-grid th:nth-child(2),
.job-sheet-list-grid td:nth-child(2) {
    width: 115px;
}

.job-sheet-list-grid th:nth-child(3),
.job-sheet-list-grid td:nth-child(3) {
    width: 96px;
}

.job-sheet-list-grid th:nth-child(4),
.job-sheet-list-grid td:nth-child(4) {
    width: 260px;
}

.job-sheet-list-grid th:nth-child(6),
.job-sheet-list-grid td:nth-child(6) {
    width: 70px;
    text-align: center;
}

.customer-list-grid th:nth-child(1),
.customer-list-grid td:nth-child(1) {
    width: 82px;
    text-align: center;
}

.customer-list-grid th:nth-child(2),
.customer-list-grid td:nth-child(2) {
    width: 115px;
}

.customer-list-grid th:nth-child(3),
.customer-list-grid td:nth-child(3) {
    width: 220px;
}

.customer-list-grid th:nth-child(4),
.customer-list-grid td:nth-child(4),
.customer-list-grid th:nth-child(5),
.customer-list-grid td:nth-child(5) {
    width: 120px;
}

.customer-list-grid th:nth-child(7),
.customer-list-grid td:nth-child(7) {
    width: 70px;
    text-align: center;
}

.customer-list-grid select {
    max-width: 100%;
}

.vrm-link {
    cursor: pointer;
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
}

    .vrm-link:hover {
        background-color: rgba(116, 30, 67, 0.12);
    }

tr.grid-pager td {
    width: auto !important;
    text-align: center;
    padding: 8px 6px;
}

.payment-container {
    border: 1px solid purple;
    margin: 15px;
}

.payment-card-wrap {
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 10px 2px 2px 2px;
}

.payment-options-wrap {
    width: 95%;
    text-align: center;
    padding: 10px 5px 5px 5px;
    margin: 13px 2px 13px 2px;
}

.payment-policy-link {
    font-size: 8pt;
}

.LeftColumnLabel {
    width: 250px;
    margin: 0 15px 5px 15px;
    padding: 0;
    text-align: center;
    background-color: #ab5379;
    border-radius: 5px;
    border: 1px solid #ab5379;
    font-size: 18pt;
    color: white;
}

.TopUp {
    width: 100%;
    font-size: 12pt;
    text-align: center;
    color: blue;
    padding: 10px 0;
    text-decoration: none;
}

.POButton3 {
    padding: 7px 5px;
    background-color: #9e8602;
    color: white;
    font-size: 11pt;
    text-decoration: none;
}

.TallText {
    font-size: 11pt;
    margin-left: 10px;
    font-weight: bold;
}

.LabelGarageAddress {
    font-size: 11pt;
    margin-left: 10px;
}

.MenuButton,
.ServiceMenuSummary {
    width: 100% !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9pt;
    background-color: #741e43;
    color: white;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.ServiceMenuSummary {
    flex-direction: row;
    white-space: nowrap;
}

.MenuButton:hover {
    background-color: rgb(171, 83, 121);
}

#BodySection,
#BodyContainer {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

#BodyContainer {
    max-width: var(--app-stage-width);
    margin: 0 auto;
}


.ColumnHeader,
h1.ColumnHeader {
    margin: 0;
    padding: 10px;
    background-color: #741e43;
    font-weight: bold;
    font-size: 13pt;
    color: white;
    border-radius: 2px 2px 0 0;
    border-top: none;
}

.page-pane > h1.ColumnHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .page-pane > h1.ColumnHeader .page-pane-header-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }

.fa-trash {
    color: #cc0000;
}

.ColumnHeader a.Manual,
.ColumnHeader .Manual {
    color: white !important;
    border: 1px solid white;
    padding: 4px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 11pt;
    font-weight: normal;
    cursor: pointer;
    background: transparent;
}

    .ColumnHeader a.Manual:hover,
    .ColumnHeader .Manual:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

.page-pane > h1.ColumnHeader .page-pane-header-actions .Manual {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.page-pane-print-button {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}

    .page-pane-print-button:hover,
    .page-pane-print-button:focus {
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }

    .page-pane-print-button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

#PopupMenu {
    display: grid;
}

    #PopupMenu .MenuButton {
        float: none;
    }

.ServiceMenuDisclosure {
    position: relative;
    width: 100%;
    display: block;
}

.ServiceMenuSummary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 1px 3px;
    box-sizing: border-box;
    line-height: 1.05;
    margin: 1px 2px;
    list-style: none;
    cursor: pointer;
    text-align: center;
}

    .ServiceMenuSummary::-webkit-details-marker {
        display: none;
    }

    /* Right-pointing when closed */
    .ServiceMenuSummary::after {
        content: " ►";
        display: inline-block;
        margin-left: 4px;
        line-height: 1.0;
        vertical-align: middle;
        transform-origin: center;
    }

/* Down-pointing when open */
.ServiceMenuDisclosure[open] .ServiceMenuSummary::after {
    content: " ▼";
}

.ServiceMenuOptions {
    position: absolute;
    top: calc(100% - 5px);
    width: auto;
    min-width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    z-index: 9999;
    background-color: #80224a;
    opacity: 0.95;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    left: calc(50% + var(--service-menu-offset, 0px));
    transform: translateX(-50%);
    border: solid 1px black;
    border-radius: 5px;
    overflow: hidden;
}

.ServiceMenuOption {
    padding: 8px 15px;
    white-space: nowrap;
    width: 100%;
    display: flex !important;
    min-height: 24px !important;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    box-sizing: border-box;
}

.ServiceMenuOptions li, .MenuButton {
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.ServiceMenuOptions {
    padding: 0;
    overflow: hidden;
}

    .ServiceMenuOptions li {
        border-bottom: 2px solid #601837;
    }

        .ServiceMenuOptions li:last-child {
            margin-bottom: 0;
        }

.ServiceMenuOption > li.premium-package {
}

.ServiceMenuOption, .MenuButton {
    text-decoration: none;
    display: flex !important;
    min-height: 24px !important;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
}

    .ServiceMenuOption:hover,
    .ServiceMenuOption:focus {
        background-color: #ab5379;
    }

.ServiceIcon {
    display: none;
}

.app-header {
    background-color: #741e43;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
    width: 100%;
    margin: 0;
    padding: 0;
}

.header-shell {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
    gap: 18px;
    align-items: center;
    padding: 5px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.header-brand {
    align-self: center;
}

    .header-brand .HeaderImage {
        max-width: 150px;
        height: auto;
        padding: 0;
    }

.header-lookup {
    align-self: center;
}

.lookup-grid {
    display: grid;
    gap: 6px;
    width: 150px;
}

.lookup-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.lookup-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    width: 100%;
}

    .lookup-actions > .HButton {
        display: inline-block;
        white-space: nowrap;
        max-width: 60%;
    }

.header-vehicle-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.header-title {
    font-size: 28px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: break-word;
}

.header-subline {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.9;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-mini-buttons {
    justify-self: end;
    align-self: center;
}

.mini-button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.TopIcons {
    margin: 0 !important;
    width: 24px;
    background: rgba(255, 255, 255, 0.1);
    width: 25px;
    padding: 2px;
}

    .TopIcons:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.legacy-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    align-items: start;
    width: 100%;
    margin: 4px 0 5px 0;
}


.nav-link {
    position: relative;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
}

.nav-badge {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    background: rgba(235, 255, 0, 0.72);
    color: #000;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    pointer-events: none;
}

.ServiceMenuOptionPending {
    opacity: 0.65;
    cursor: default;
    text-decoration: none !important;
}

.nav-live {
    color: #fff;
}

.nav-pending {
    opacity: 0.95;
}

.nav-link.is-active {
    background-color: #ab5379;
}

#MenuSpacer {
    clear: both;
    height: 0;
}

.vehicle-page {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(116, 30, 67, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.vehicle-page-body {
    padding: 18px;
}

.vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.vehicle-left-stack,
.vehicle-right-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.vehicle-card {
    background: #fff;
    border: 1px solid #ddd4d8;
    box-shadow: inset 0 0 0 1px #f6f2f4;
    box-sizing: border-box;
    min-width: 0;
}

.vehicle-card-title {
    padding: 12px 16px;
    font-size: 13pt;
    font-weight: bold;
    color: #741e43;
    border-bottom: 1px solid #e7dce1;
    text-transform: uppercase;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 12px 16px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    color: #1563b0;
    text-decoration: none;
    font-size: 10.5pt;
}

.quick-link-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eb2744;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}


.category-cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: 10px;
}

.category-cell {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px 12px;
    border-right: 1px solid #ebe4e7;
}

.category-heading {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: bold;
    color: #888;
}

.category-link,
.category-item-pending {
    display: block;
    margin: 0 0 8px 0;
    color: #1563b0;
    text-decoration: none;
    font-size: 10pt;
}

.category-item-pending {
    color: #7b7080;
}

.vehicle-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px;
    padding: 16px;
    align-items: start;
    box-sizing: border-box;
    min-width: 0;
}

.vehicle-summary-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
    table-layout: fixed;
    min-width: 0;
}

    .vehicle-summary-table th,
    .vehicle-summary-table td {
        padding: 8px 0;
        border-bottom: 1px solid #efe8eb;
        vertical-align: middle;
    }

    .vehicle-summary-table th {
        white-space: nowrap;
        width: 118px;
        padding-right: 16px;
        color: #741e43;
        text-align: left;
        font-weight: bold;
        font-size: 9.5pt;
        text-transform: uppercase;
    }

    .vehicle-summary-table td {
        font-size: 10pt;
        color: #333;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

/* Keep the image compact because this card sits in the right-hand column. */
.vehicle-hero {
    width: 170px;
    min-height: 130px;
    border: 1px solid #e9dde2;
    background: linear-gradient(145deg, #f8f8f8 0%, #ece6e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #444;
    padding: 8px;
    box-sizing: border-box;
}

.vehicle-hero-image-frame {
    width: 100%;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-hero-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.vehicle-hero-badge {
    font-size: 36px;
    line-height: 1;
}

.vehicle-hero-title {
    margin-top: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #741e43;
}

.vehicle-hero-caption {
    margin-top: 4px;
    font-size: 9pt;
}

.service-types-list {
    margin: 0;
    padding: 0 16px 16px 34px;
}

    .service-types-list li {
        margin: 8px 0;
    }

    .service-types-list a {
        color: #1563b0;
        text-decoration: none;
    }

.status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    align-items: start;
    justify-items: center;
}

.status-lookup-pending {
    box-sizing: border-box;
    width: 150px;
    min-height: 150px;
    padding: 16px;
    background: #f4f4f4;
    border: 1px solid #d9d9d9;
    color: #555;
    text-align: center;
    font-size: 10pt;
}

.MOTDate {
    box-sizing: border-box;
    width: 150px;
    height: 183px;
    padding-top: 135px;
    background-image: url('../Images/mot_small2.png');
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
}

.taxdata {
    box-sizing: border-box;
    position: relative;
    width: 150px;
    height: 183px;
    padding-top: 22px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.25;
}

.TaxDate {
    width: 100%;
    padding-left: 1px;
    color: #000;
    text-align: center;
}

.TaxSmall {
    font-size: 20px;
}

.TaxLarge {
    font-size: 30px;
}

.TaxStatus {
    position: absolute;
    top: 138px;
    left: 0;
    right: 0;
    padding: 0 8px;
    text-align: center;
}

.Text100 {
    width: 100px;
}

.Text150 {
    width: 150px;
}

.Text200 {
    width: 200px;
}

.Text250 {
    width: 250px;
}

.Text300 {
    width: 300px;
}

.Text350 {
    width: 350px;
}

.MultiLine {
    height: 180px;
}

.FAQQuestion {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 0 15px 0 15px;
}

.FAQAnswer {
    font-size: 9pt;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 0 15px 0 15px;
}

    .FAQAnswer li {
        padding-left: 25px;
        list-style: none;
    }

.TableSpacing {
    border-spacing: 5px;
}

.BoldHeader {
    font-size: 13pt;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 6px;
    color: #741E43;
    border-bottom: 2px solid #741E43;
}

.TextBoxLarge {
    width: 100%;
}

.DialogModal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;
}

    .DialogModal > div {
        width: 520px;
        position: relative;
        margin: 8% auto;
        padding: 20px 25px;
        border-radius: 8px;
        background: #fff;
    }

.Buttons {
    padding: 5px 10px;
    height: 27px;
    font-size: 10.5pt;
    border: 0;
    background-color: #741E43;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

    .Buttons:hover {
        background-color: #AB5379;
    }

    .Buttons:disabled {
        background-color: #bbbbbb;
        cursor: pointer;
    }

        .Buttons:disabled:hover {
            background-color: #bbbbbb;
            cursor: pointer;
        }

.item-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    padding: 0;
    background-color: #9e4a68;
    color: #ffffff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin: 0 2px;
}

.invoice-items-table {
    table-layout: fixed;
}

    .invoice-items-table .invoice-item-action-col {
        width: 32px;
    }

    .invoice-items-table .invoice-item-spacer-col {
        width: 1%;
    }

    .invoice-items-table td {
        overflow-wrap: anywhere;
    }

.invoice-item-editor-table {
    width: 100%;
    max-width: 100%;
}

    .invoice-item-editor-table td {
        box-sizing: border-box;
    }

    .invoice-item-editor-table tr:first-child td:nth-child(1),
    .invoice-item-editor-table tr:nth-child(2) td:nth-child(1) {
        width: 110px;
    }

    .invoice-item-editor-table tr:first-child td:nth-child(2),
    .invoice-item-editor-table tr:nth-child(2) td:nth-child(2) {
        width: 170px;
    }

    .invoice-item-editor-table tr:first-child td:nth-child(4),
    .invoice-item-editor-table tr:nth-child(2) td:nth-child(4) {
        width: 120px;
    }

    .invoice-item-editor-table tr:first-child td:nth-child(5),
    .invoice-item-editor-table tr:nth-child(2) td:nth-child(5) {
        width: 80px;
    }

    .invoice-item-editor-table tr:first-child td:nth-child(6),
    .invoice-item-editor-table tr:nth-child(2) td:nth-child(6) {
        width: 44px;
    }

    .invoice-item-editor-table input,
    .invoice-item-editor-table select,
    .invoice-item-editor-table textarea {
        box-sizing: border-box;
        max-width: 100%;
    }

    .invoice-item-editor-table .Text350,
    .invoice-item-editor-table .MultiLine {
        width: 100%;
    }

    .invoice-item-editor-table tr:nth-child(2) td:nth-child(6) .Buttons {
        width: 27px;
        min-width: 27px;
        padding-left: 0;
        padding-right: 0;
    }

.item-action-btn:hover {
    background-color: #b55b7a;
}

.item-action-btn i {
    color: #ffffff;
}

.hiddendiv {
    display: none;
}

.printonly {
    display: none !important;
}

#TutorialsContainer {
    padding: 25px;
}

.TutorialBox {
    border: 1px solid #dcdcdc;
    width: 965px;
    padding: 15px;
    cursor: pointer;
    margin-bottom: 25px;
}

.TutorialTitle {
    font-size: 14pt;
    font-weight: bold;
    line-height: 160%;
}

.TutorialBody {
    font-size: 12pt;
    font-style: italic;
}

.motheader {
    padding-top: 15px;
    color: #999999;
}

.motdata {
    color: black;
    font-weight: bold;
}

.FAILED {
    font-size: 36pt;
    color: red;
}

.PASSED {
    font-size: 36pt;
    color: green;
}

.motheader ul {
    padding: 0 0 0 15px;
    font-weight: bold;
}

    .motheader ul li {
        color: black;
        margin: 0;
        padding: 0;
    }

.vehicle-message {
    color: #741e43;
    font-weight: bold;
}

    .vehicle-message:not(:empty) {
        display: block;
        margin: 12px 18px 0 18px;
    }

.legacy-nav-grid {
    grid-template-columns: repeat(14, 1fr);
}

.Message {
    background-color: lightblue;
    color: black;
    border: 1px solid lightblue;
    border-radius: 9px;
    margin: 12px;
    padding: 10px 10px 10px 20px;
    font-size: 10pt;
    text-align: right;
    font-weight: bold;
}

.MessageTimestamp {
    font-size: 8pt;
    padding-right: 5px;
    font-weight: normal;
}

.hidden {
    display: none;
}

.NewPanel {
    padding: 10px;
    margin: 20px;
    border: 1px solid black;
}

.empty-state-message {
    padding: 20px 15px;
    color: #555;
    font-style: italic;
}

.toggle-checkbox {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

    .toggle-checkbox input[type="checkbox"] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-checkbox .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }

        .toggle-checkbox .slider:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

    .toggle-checkbox input:checked + .slider {
        background-color: #80dd60;
    }

    .toggle-checkbox input:focus + .slider {
        box-shadow: 0 0 0.5px #80dd60;
    }

    .toggle-checkbox input:checked + .slider:before {
        transform: translateX(13px);
    }

@media (max-width: 1900px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 1800px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 1600px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(9, 1fr);
    }
}

@media (max-width: 1550px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 1550px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (max-width: 1050px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1050px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1080px) {
    :root {
        --app-stage-width: calc(100vw - 20px);
    }

    .header-shell {
        grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
        gap: 12px;
    }

    .header-title {
        font-size: 22px;
    }
}

@media (max-width: 1030px) {
    .vehicle-summary-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-hero {
        max-width: none;
        width: 100%;
        margin-top: 15px;
    }

    .vehicle-hero-image {
        max-width: 240px;
    }
}

@media (max-width: 850px) {
    :root {
        --app-stage-width: 100%;
    }

    #wrapper {
        margin: 20px;
    }

    .vehicle-layout,
    .status-grid,
    .category-columns {
        grid-template-columns: 1fr;
    }

    #BodyContainer {
        max-width: none;
    }
}

@media (max-width: 675px) {
    .header-brand .HeaderImage {
        display: none;
    }

    .legacy-nav-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 650px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 450px) {
    .header-shell {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mini-button-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (max-width: 350px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mini-button-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 250px) {
    .legacy-nav-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 185px) {
    .header-vehicle-summary {
        display: none;
    }
}

/* Technical information content
   Shared presentation for Autodata-backed pages. These selectors are kept
   more specific than the page-local style blocks so this central layer can
   normalise output without changing the app shell/menu/title scaffolding. */

:root {
    --tech-surface: #f7f7f7;
    --tech-panel: #ffffff;
    --tech-border: #d9d9d9;
    --tech-border-soft: #e8e8e8;
    --tech-text: #2f3337;
    --tech-muted: #6f7479;
    --tech-heading: #741e43;
    --tech-link: #741e43;
    --tech-link-soft: #f5edf1;
    --tech-link-soft-hover: #ecdce4;
    --tech-link-border: #d8b8c7;
    --tech-link-border-hover: #bd8fa3;
    --tech-note: #fff7dd;
    --tech-row-alt: rgba(116, 30, 67, 0.035);
    --tech-row-base: rgba(255, 255, 255, 0.42);
}

.page-pane .page-pane-inner,
#SingleColumn.ab-wrap .ab-inner,
#SingleColumn.ct-wrap .ct-inner,
#SingleColumn.cl-wrap .cl-inner {
    color: var(--tech-text);
    font-size: 10pt;
    line-height: 1.42;
    box-sizing: border-box;
}

    .page-pane .page-pane-inner *,
    #SingleColumn.ab-wrap *,
    #SingleColumn.ct-wrap *,
    #SingleColumn.cl-wrap * {
        box-sizing: border-box;
    }

#SingleColumn.ab-wrap,
#SingleColumn.ct-wrap,
#SingleColumn.cl-wrap {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(116, 30, 67, 0.28);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 0 !important;
    min-height: 0;
}

    #SingleColumn.ab-wrap .ab-title,
    #SingleColumn.ct-wrap .ct-title,
    #SingleColumn.cl-wrap .cl-title {
        margin: 0;
        padding: 10px;
        background-color: #741e43;
        color: #fff;
        border-radius: 2px 2px 0 0;
        font-size: 13pt;
        font-weight: bold;
        text-transform: none;
    }

.page-pane .ac-section,
.page-pane .pc-sidebar,
.page-pane .pc-main,
.page-pane .tr-section,
.page-pane .service-detail-left,
.page-pane .service-detail-right,
.page-pane .wa-detail-shell,
.page-pane .ebc-related,
.page-pane .ebr-precautions,
.page-pane .ebr-variant,
.page-pane .edtc-result,
.page-pane .ecl-nav,
.page-pane .ecl-main,
.page-pane .ecl-group,
.page-pane .ecl-fig,
.page-pane .efr-img-wrap,
.page-pane .ewd-nav,
.page-pane .ewd-related,
.page-pane .ewdv-panel,
.page-pane .ewdv-diagram-wrap {
    background: var(--tech-surface) !important;
    border: 1px solid var(--tech-border) !important;
    border-radius: 3px;
    box-shadow: none;
}

.page-pane .ac-section,
.page-pane .pc-sidebar,
.page-pane .pc-main,
.page-pane .tr-section {
    padding: 10px;
}

.page-pane .eo-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
}

.page-pane .card {
    min-width: 0;
    overflow-x: auto;
}

.page-pane .eo-right-title,
.page-pane .tr-card-title,
.page-pane .tr-section h3,
.page-pane .ac-section h3,
.page-pane .pc-sidebar h3,
.page-pane .pc-header,
.page-pane .pcl-subtitle,
.page-pane .pcl-selector-title,
.page-pane .pda-subtitle,
.page-pane .si-proc-title,
.page-pane .ab-proc-title,
.page-pane .biac-subtitle,
.page-pane .biac-tech-title,
.page-pane .cl-card-header,
.page-pane .ct-card-header,
.page-pane .kp-subtitle,
.page-pane .ebc-subtitle,
.page-pane .ebc-related-title,
.page-pane .ebr-precautions-title,
.page-pane .ebr-variant-header,
.page-pane .edtc-side-title,
.page-pane .edtc-search-title,
.page-pane .edtc-section-title,
.page-pane .ecl-system-title,
.page-pane .ecl-group-title,
.page-pane .efr-sidebar-head,
.page-pane .ewd-section-title,
.page-pane .ewd-group-title,
.page-pane .ewd-related-title,
.page-pane .ewdv-panel-title {
    color: var(--tech-heading) !important;
    font-size: 13pt !important;
    line-height: 1.25;
    margin: 0 0 8px 0;
    text-transform: none;
}

.page-pane .eo-label,
.page-pane .ct-torque-name,
.page-pane .ct-torque-name {
    color: var(--tech-muted) !important;
    font-size: 10pt !important;
}

.page-pane .eo-value,
.page-pane .eo-torque-list strong,
.page-pane .ct-torque-val {
    color: var(--tech-text) !important;
    font-size: 22pt !important;
    line-height: 1.05;
}

.page-pane a:not(.MenuButton):not(.ServiceMenuOption):not(.quick-link):not(.category-link):not(.Buttons):not(.mid-menu-btn),
#SingleColumn.ab-wrap a,
#SingleColumn.ct-wrap a,
#SingleColumn.cl-wrap a {
    color: var(--tech-link);
    text-decoration: none;
}

    .page-pane a:not(.MenuButton):not(.ServiceMenuOption):hover,
    .page-pane a:not(.MenuButton):not(.ServiceMenuOption):focus,
    #SingleColumn.ab-wrap a:hover,
    #SingleColumn.ab-wrap a:focus,
    #SingleColumn.ct-wrap a:hover,
    #SingleColumn.ct-wrap a:focus,
    #SingleColumn.cl-wrap a:hover,
    #SingleColumn.cl-wrap a:focus {
        text-decoration: underline;
    }

.page-pane a[class$="-back"],
.page-pane a[class*="-back "],
#SingleColumn a[class$="-back"],
#SingleColumn a[class*="-back "],
.page-pane .tr-back,
.page-pane .pc-back,
.page-pane .wa-back,
.page-pane .service-back-option {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 8px 0 10px 0 !important;
    padding: 5px 10px !important;
    border: 1px solid var(--tech-link-border);
    border-radius: 3px;
    background: var(--tech-link-soft) !important;
    color: var(--tech-link) !important;
    font-size: 9.5pt !important;
    font-weight: 600;
    text-decoration: none !important;
}

    .page-pane a[class$="-back"]::before,
    .page-pane a[class*="-back "]::before,
    #SingleColumn a[class$="-back"]::before,
    #SingleColumn a[class*="-back "]::before,
    .page-pane .tr-back::before,
    .page-pane .pc-back::before,
    .page-pane .wa-back::before,
    .page-pane .service-back-option::before {
        content: none;
    }

    .page-pane a[class$="-back"]:hover,
    .page-pane a[class*="-back "]:hover,
    #SingleColumn a[class$="-back"]:hover,
    #SingleColumn a[class*="-back "]:hover,
    .page-pane .tr-back:hover,
    .page-pane .pc-back:hover,
    .page-pane .wa-back:hover,
    .page-pane .service-back-option:hover {
        background: var(--tech-link-soft-hover) !important;
        border-color: var(--tech-link-border-hover);
    }

.page-pane .service-type-title,
.page-pane .pc-list-title,
.page-pane .wa-picker-title,
.page-pane .ct-card-header {
    background: #ececec !important;
    color: var(--tech-text);
    font-size: 10pt !important;
    font-weight: 700;
    padding: 8px 10px;
}

.page-pane .service-type-option,
.page-pane .pc-list-option,
.page-pane .pc-nav a,
.page-pane .wa-option {
    background: var(--tech-panel) !important;
    border-top: 1px solid var(--tech-border-soft);
    color: var(--tech-link) !important;
    font-size: 10pt !important;
    min-height: 34px;
}

    .page-pane .service-type-option:hover,
    .page-pane .pc-list-option:hover,
    .page-pane .pc-nav a:hover,
    .page-pane .wa-option:hover {
        background: var(--tech-link-soft) !important;
        text-decoration: none !important;
    }

.page-pane .ill-openall,
.page-pane .sb-openall,
.page-pane .pc-openall,
.page-pane .pc-openbar,
.page-pane .pcl-openbar,
.page-pane .pda-openbar,
.page-pane .wa-openbar,
.page-pane .ab-openbar,
.page-pane .biac-openbar,
.page-pane .ct-tpms-openbar,
.page-pane .kp-openbar,
.page-pane .ebc-openbar,
.page-pane .gjm-openbar,
.page-pane .gkb-toolbar,
.page-pane .grt-toolbar,
.page-pane .gwls-openbar {
    text-align: right;
    padding: 6px 8px;
    margin: 0 0 4px 0;
}

    .page-pane .ill-openall a,
    .page-pane .sb-openall a,
    .page-pane .pc-openall a,
    .page-pane .pc-openbar a,
    .page-pane .pcl-openbar a,
    .page-pane .pda-openbar a,
    .page-pane .wa-openbar a,
    .page-pane .ab-openbar a,
    .page-pane .biac-openbar a,
    .page-pane .ct-tpms-openbar a,
    .page-pane .kp-openbar a,
    .page-pane .ebc-openbar a,
    .page-pane .gjm-openbar a,
    .page-pane .gkb-toolbar a,
    .page-pane .grt-toolbar a,
    .page-pane .gwls-openbar a {
        display: inline-block;
        margin-left: 8px;
        font-size: 9pt !important;
        font-weight: 600;
    }

.page-pane details.ill-item,
.page-pane details.sb-section,
.page-pane details.sb-rt-group,
.page-pane details.sb-rt-row-details,
.page-pane details.pc-acc,
.page-pane details.pcl-section,
.page-pane details.pda-section,
.page-pane details.wa-group,
.page-pane details.ab-section,
.page-pane details.biac-section,
.page-pane details.ct-acc,
.page-pane details.kp-section,
.page-pane details.ebc-section,
.page-pane details.gjm-section,
.page-pane details.gkb-area,
.page-pane details.gkb-problem,
.page-pane details.grt-group,
.page-pane details.grt-subgroup,
.page-pane details.gwls-group,
.page-pane details.cepb-section {
    border-top: 1px solid var(--tech-border) !important;
}

    .page-pane details.ill-item:first-child,
    .page-pane details.sb-section:first-child,
    .page-pane details.pc-acc:first-child,
    .page-pane details.pcl-section:first-child,
    .page-pane details.pda-section:first-child,
    .page-pane details.wa-group:first-child,
    .page-pane details.ab-section:first-child,
    .page-pane details.biac-section:first-child,
    .page-pane details.ct-acc:first-child,
    .page-pane details.kp-section:first-child,
    .page-pane details.ebc-section:first-child,
    .page-pane details.gjm-section:first-child,
    .page-pane details.gkb-area:first-child,
    .page-pane details.gkb-problem:first-child,
    .page-pane details.grt-group:first-child,
    .page-pane details.grt-subgroup:first-child,
    .page-pane details.gwls-group:first-child,
    .page-pane details.cepb-section:first-child {
        border-top: none !important;
    }

    .page-pane details.ill-item > summary,
    .page-pane details.sb-section > summary,
    .page-pane details.sb-rt-group > summary,
    .page-pane details.sb-rt-row-details > summary,
    .page-pane details.pc-acc > summary,
    .page-pane details.pcl-section > summary,
    .page-pane details.pda-section > summary,
    .page-pane details.wa-group > summary,
    .page-pane details.ab-section > summary,
    .page-pane details.biac-section > summary,
    .page-pane details.ct-acc > summary,
    .page-pane details.kp-section > summary,
    .page-pane details.ebc-section > summary,
    .page-pane details.gjm-section > summary,
    .page-pane details.gkb-area > summary,
    .page-pane details.gkb-problem > summary,
    .page-pane details.grt-group > summary,
    .page-pane details.grt-subgroup > summary,
    .page-pane details.gwls-group > summary,
    .page-pane details.cepb-section > summary {
        position: relative;
        cursor: pointer;
        list-style: none;
        padding: 9px 28px 9px 10px !important;
        color: var(--tech-link) !important;
        font-size: 10pt !important;
        font-weight: 600 !important;
    }

    .page-pane details.ill-item:nth-of-type(even) > summary,
    .page-pane details.sb-section:nth-of-type(even) > summary,
    .page-pane details.sb-rt-group:nth-of-type(even) > summary,
    .page-pane details.sb-rt-row-details:nth-of-type(even) > summary,
    .page-pane details.pc-acc:nth-of-type(even) > summary,
    .page-pane details.pcl-section:nth-of-type(even) > summary,
    .page-pane details.pda-section:nth-of-type(even) > summary,
    .page-pane details.wa-group:nth-of-type(even) > summary,
    .page-pane details.ab-section:nth-of-type(even) > summary,
    .page-pane details.biac-section:nth-of-type(even) > summary,
    .page-pane details.ct-acc:nth-of-type(even) > summary,
    .page-pane details.kp-section:nth-of-type(even) > summary,
    .page-pane details.ebc-section:nth-of-type(even) > summary,
    .page-pane details.gjm-section:nth-of-type(even) > summary,
    .page-pane details.gkb-area:nth-of-type(even) > summary,
    .page-pane details.gkb-problem:nth-of-type(even) > summary,
    .page-pane details.grt-group:nth-of-type(even) > summary,
    .page-pane details.grt-subgroup:nth-of-type(even) > summary,
    .page-pane details.gwls-group:nth-of-type(even) > summary,
    .page-pane details.cepb-section:nth-of-type(even) > summary {
        background: rgba(116, 30, 67, 0.035);
    }

    .page-pane details.ill-item:nth-of-type(odd) > summary,
    .page-pane details.sb-section:nth-of-type(odd) > summary,
    .page-pane details.sb-rt-group:nth-of-type(odd) > summary,
    .page-pane details.sb-rt-row-details:nth-of-type(odd) > summary,
    .page-pane details.pc-acc:nth-of-type(odd) > summary,
    .page-pane details.pcl-section:nth-of-type(odd) > summary,
    .page-pane details.pda-section:nth-of-type(odd) > summary,
    .page-pane details.wa-group:nth-of-type(odd) > summary,
    .page-pane details.ab-section:nth-of-type(odd) > summary,
    .page-pane details.biac-section:nth-of-type(odd) > summary,
    .page-pane details.ct-acc:nth-of-type(odd) > summary,
    .page-pane details.kp-section:nth-of-type(odd) > summary,
    .page-pane details.ebc-section:nth-of-type(odd) > summary,
    .page-pane details.gjm-section:nth-of-type(odd) > summary,
    .page-pane details.gkb-area:nth-of-type(odd) > summary,
    .page-pane details.gkb-problem:nth-of-type(odd) > summary,
    .page-pane details.grt-group:nth-of-type(odd) > summary,
    .page-pane details.grt-subgroup:nth-of-type(odd) > summary,
    .page-pane details.gwls-group:nth-of-type(odd) > summary,
    .page-pane details.cepb-section:nth-of-type(odd) > summary {
        background: rgba(255, 255, 255, 0.42);
    }

    .page-pane details.ill-item > summary:hover,
    .page-pane details.sb-section > summary:hover,
    .page-pane details.sb-rt-group > summary:hover,
    .page-pane details.sb-rt-row-details > summary:hover,
    .page-pane details.pc-acc > summary:hover,
    .page-pane details.pcl-section > summary:hover,
    .page-pane details.pda-section > summary:hover,
    .page-pane details.wa-group > summary:hover,
    .page-pane details.ab-section > summary:hover,
    .page-pane details.biac-section > summary:hover,
    .page-pane details.ct-acc > summary:hover,
    .page-pane details.kp-section > summary:hover,
    .page-pane details.ebc-section > summary:hover,
    .page-pane details.gjm-section > summary:hover,
    .page-pane details.gkb-area > summary:hover,
    .page-pane details.gkb-problem > summary:hover,
    .page-pane details.grt-group > summary:hover,
    .page-pane details.grt-subgroup > summary:hover,
    .page-pane details.gwls-group > summary:hover,
    .page-pane details.cepb-section > summary:hover {
        background: rgba(116, 30, 67, 0.07);
    }

    .page-pane details.ill-item > summary::-webkit-details-marker,
    .page-pane details.sb-section > summary::-webkit-details-marker,
    .page-pane details.sb-rt-group > summary::-webkit-details-marker,
    .page-pane details.sb-rt-row-details > summary::-webkit-details-marker,
    .page-pane details.pc-acc > summary::-webkit-details-marker,
    .page-pane details.pcl-section > summary::-webkit-details-marker,
    .page-pane details.pda-section > summary::-webkit-details-marker,
    .page-pane details.wa-group > summary::-webkit-details-marker,
    .page-pane details.ab-section > summary::-webkit-details-marker,
    .page-pane details.biac-section > summary::-webkit-details-marker,
    .page-pane details.ct-acc > summary::-webkit-details-marker,
    .page-pane details.kp-section > summary::-webkit-details-marker,
    .page-pane details.ebc-section > summary::-webkit-details-marker,
    .page-pane details.gjm-section > summary::-webkit-details-marker,
    .page-pane details.gkb-area > summary::-webkit-details-marker,
    .page-pane details.gkb-problem > summary::-webkit-details-marker,
    .page-pane details.grt-group > summary::-webkit-details-marker,
    .page-pane details.grt-subgroup > summary::-webkit-details-marker,
    .page-pane details.gwls-group > summary::-webkit-details-marker,
    .page-pane details.cepb-section > summary::-webkit-details-marker {
        display: none;
    }

    .page-pane details.ill-item > summary::after,
    .page-pane details.sb-section > summary::after,
    .page-pane details.sb-rt-group > summary::after,
    .page-pane details.sb-rt-row-details > summary::after,
    .page-pane details.pc-acc > summary::after,
    .page-pane details.pcl-section > summary::after,
    .page-pane details.pda-section > summary::after,
    .page-pane details.wa-group > summary::after,
    .page-pane details.ab-section > summary::after,
    .page-pane details.biac-section > summary::after,
    .page-pane details.ct-acc > summary::after,
    .page-pane details.kp-section > summary::after,
    .page-pane details.ebc-section > summary::after,
    .page-pane details.gjm-section > summary::after,
    .page-pane details.gkb-area > summary::after,
    .page-pane details.gkb-problem > summary::after,
    .page-pane details.grt-group > summary::after,
    .page-pane details.grt-subgroup > summary::after,
    .page-pane details.gwls-group > summary::after,
    .page-pane details.cepb-section > summary::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 6px;
        height: 6px;
        border-right: 2px solid #8c949b;
        border-bottom: 2px solid #8c949b;
        color: #8c949b;
        transform: translateY(-65%) rotate(45deg);
    }

    .page-pane details.ill-item:not([open]) > summary::after,
    .page-pane details.sb-section:not([open]) > summary::after,
    .page-pane details.sb-rt-group:not([open]) > summary::after,
    .page-pane details.sb-rt-row-details:not([open]) > summary::after,
    .page-pane details.pc-acc:not([open]) > summary::after,
    .page-pane details.pcl-section:not([open]) > summary::after,
    .page-pane details.pda-section:not([open]) > summary::after,
    .page-pane details.wa-group:not([open]) > summary::after,
    .page-pane details.ab-section:not([open]) > summary::after,
    .page-pane details.biac-section:not([open]) > summary::after,
    .page-pane details.ct-acc:not([open]) > summary::after,
    .page-pane details.kp-section:not([open]) > summary::after,
    .page-pane details.ebc-section:not([open]) > summary::after,
    .page-pane details.gjm-section:not([open]) > summary::after,
    .page-pane details.gkb-area:not([open]) > summary::after,
    .page-pane details.gkb-problem:not([open]) > summary::after,
    .page-pane details.grt-group:not([open]) > summary::after,
    .page-pane details.grt-subgroup:not([open]) > summary::after,
    .page-pane details.gwls-group:not([open]) > summary::after {
        transform: translateY(-50%) rotate(-45deg);
    }

.page-pane .ill-body,
.page-pane .sb-body,
.page-pane .pc-acc-body,
.page-pane .pcl-body,
.page-pane .pda-body,
.page-pane .wa-group-body,
.page-pane .ab-body,
.page-pane .biac-body,
.page-pane .ct-acc-body,
.page-pane .kp-body,
.page-pane .ebc-body,
.page-pane .gjm-body,
.page-pane .gkb-area-body,
.page-pane .gkb-problem-body,
.page-pane .grt-subgroup-body,
.page-pane .gwls-group-body,
.page-pane .edtc-result-body,
.page-pane .cepb-body {
    padding: 0 10px 10px 10px !important;
}

.page-pane .eo-table,
.page-pane .advisor-table,
.page-pane .ac-table,
.page-pane .tr-table,
.page-pane .wa-table,
.page-pane .sb-table,
.page-pane .sb-rt-table,
.page-pane .pcl-table,
.page-pane .ab-torque-table,
.page-pane .biac-kv-table,
.page-pane .biac-table,
.page-pane .biac-tech-table,
.page-pane .ct-pressure-table,
.page-pane .ebc-table,
.page-pane .ebr-table,
.page-pane .edtc-cause-table,
.page-pane .ecmpd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tech-panel) !important;
}

    .page-pane .eo-table th,
    .page-pane .eo-table td,
    .page-pane .advisor-table th,
    .page-pane .advisor-table td,
    .page-pane .ac-table th,
    .page-pane .ac-table td,
    .page-pane .tr-table th,
    .page-pane .tr-table td,
    .page-pane .wa-table th,
    .page-pane .wa-table td,
    .page-pane .sb-table th,
    .page-pane .sb-table td,
    .page-pane .sb-rt-table th,
    .page-pane .sb-rt-table td,
    .page-pane .pcl-table th,
    .page-pane .pcl-table td,
    .page-pane .ab-torque-table th,
    .page-pane .ab-torque-table td,
    .page-pane .biac-kv-table th,
    .page-pane .biac-kv-table td,
    .page-pane .biac-table th,
    .page-pane .biac-table td,
    .page-pane .biac-tech-table th,
    .page-pane .biac-tech-table td,
    .page-pane .ct-pressure-table th,
    .page-pane .ct-pressure-table td,
    .page-pane .ebc-table th,
    .page-pane .ebc-table td,
    .page-pane .ebr-table th,
    .page-pane .ebr-table td,
    .page-pane .edtc-cause-table th,
    .page-pane .edtc-cause-table td,
    .page-pane .ecmpd-table th,
    .page-pane .ecmpd-table td {
        border: 1px solid var(--tech-border-soft) !important;
        padding: 7px 8px !important;
        color: var(--tech-text);
        font-size: 9.5pt !important;
        line-height: 1.35;
        vertical-align: top;
    }

    .page-pane .eo-table th,
    .page-pane .advisor-table th,
    .page-pane .sb-rt-table th,
    .page-pane .pcl-table th,
    .page-pane .ab-torque-table th,
    .page-pane .biac-kv-table th,
    .page-pane .biac-table th,
    .page-pane .biac-tech-table th,
    .page-pane .ct-pressure-table th,
    .page-pane .ebc-table th,
    .page-pane .ebr-table th,
    .page-pane .edtc-cause-table th,
    .page-pane .ecmpd-table th {
        background: #f0f0f0 !important;
        color: #4f565c;
        font-weight: 700;
        text-align: left;
    }

.page-pane .ewd-links,
.page-pane .ewd-additional {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .page-pane .ewd-links > li,
    .page-pane .ewd-additional > li {
        margin: 0 !important;
        padding: 6px 8px !important;
        border-top: 1px solid var(--tech-border-soft);
    }

        .page-pane .ewd-links > li:first-child,
        .page-pane .ewd-additional > li:first-child {
            border-top: none;
        }

.page-pane .ewd-additional {
    margin-top: 6px !important;
    border: 1px solid var(--tech-border-soft);
}

    .page-pane .cl-components-list li:nth-child(odd),
    .page-pane .ewd-nav a:nth-child(odd),
    .page-pane .ewd-links > li:nth-child(odd),
    .page-pane .ewd-additional > li:nth-child(odd),
    .page-pane .ecl-nav a:nth-child(odd),
    .page-pane .ewdv-list li:nth-child(odd),
    .page-pane .ecmpd-table tbody tr:nth-child(odd) td {
        background: var(--tech-row-base) !important;
    }

    .page-pane .cl-components-list li:nth-child(even),
    .page-pane .ewd-nav a:nth-child(even),
    .page-pane .ewd-links > li:nth-child(even),
    .page-pane .ewd-additional > li:nth-child(even),
    .page-pane .ecl-nav a:nth-child(even),
    .page-pane .ewdv-list li:nth-child(even),
    .page-pane .ecmpd-table tbody tr:nth-child(even) td {
        background: var(--tech-row-alt) !important;
    }

    .page-pane .cl-components-list li:hover,
    .page-pane .ewd-nav a:hover,
    .page-pane .ewd-links > li:hover,
    .page-pane .ewd-additional > li:hover,
    .page-pane .ecl-nav a:hover,
    .page-pane .ewdv-list li:hover {
        background: var(--tech-link-soft) !important;
    }

.page-pane .advisor-table-wrap,
.page-pane .ct-pressure-right,
.page-pane .ebr-right {
    overflow-x: auto;
}

.page-pane .eo-preferred td,
.page-pane .si-step-note,
.page-pane .pc-step-note,
.page-pane .pcl-note,
.page-pane .pda-note,
.page-pane .biac-note,
.page-pane .ct-step-note,
.page-pane .ct-note-block,
.page-pane .kp-note,
.page-pane .ebc-note {
    background: var(--tech-note) !important;
    border-left: 3px solid #d3a326;
}

.page-pane .eo-badge,
.page-pane .advisor-note-badge,
.page-pane .pc-ref-badge,
.page-pane .pcl-ref-badge,
.page-pane .pda-ref-badge,
.page-pane .wa-badge,
.page-pane .ab-ref-badge,
.page-pane .biac-ref-badge,
.page-pane .ct-ref-badge,
.page-pane .kp-ref-badge,
.page-pane .ebc-ref-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 2px 7px !important;
    border-radius: 999px;
    background: var(--tech-link) !important;
    color: #fff !important;
    font-size: 8.5pt !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
}

.page-pane .ac-image-card,
.page-pane .ill-image-card,
.page-pane .sb-illustration-card,
.page-pane .tr-ill-item,
.page-pane .pcl-figure,
.page-pane .pda-figure,
.page-pane .ab-layout-figure,
.page-pane .ab-components-preview,
.page-pane .biac-image-wrap,
.page-pane .biac-layout-figure,
.page-pane .ct-jacking-item,
.page-pane .ct-fig,
.page-pane .kp-image-wrap,
.page-pane .ebc-image-wrap,
.page-pane .ebc-inline-image-wrap {
    background: var(--tech-panel) !important;
    border: 1px solid var(--tech-border) !important;
    border-radius: 3px;
    padding: 7px !important;
}

    .page-pane .ac-image-card img,
    .page-pane .ill-image-frame img,
    .page-pane .sb-illustration-card img,
    .page-pane .tr-ill-item img,
    .page-pane .pc-hero img,
    .page-pane .pcl-figure img,
    .page-pane .pda-figure img,
    .page-pane .si-inline-image,
    .page-pane .wa-image-link-icon,
    .page-pane .ab-layout-img,
    .page-pane .ab-components-preview-img,
    .page-pane .biac-image,
    .page-pane .biac-layout-img,
    .page-pane .ct-jacking-item img,
    .page-pane .ct-fig img,
    .page-pane .kp-image,
    .page-pane .ebc-image,
    .page-pane .ebc-inline-image,
    .page-pane .ebr-body-image,
    .page-pane .ebr-guide-image,
    .page-pane .ecl-img,
    .page-pane .efr-img {
        max-width: 100%;
        height: auto;
        background: #fff;
        border: 1px solid var(--tech-border-soft) !important;
    }

    .page-pane .ac-image-caption,
    .page-pane .ill-caption,
    .page-pane .sb-illustration-caption,
    .page-pane .pcl-figure figcaption,
    .page-pane .pda-figure figcaption,
    .page-pane .ab-layout-cap,
    .page-pane .biac-layout-cap,
    .page-pane .ct-jacking-cap,
    .page-pane .ct-fig figcaption,
    .page-pane .ecl-cap,
    .page-pane .efr-img-cap {
        color: var(--tech-muted);
        font-size: 9pt;
    }

.page-pane select,
.page-pane input[type="text"],
#SingleColumn.ab-wrap select,
#SingleColumn.ct-wrap select,
#SingleColumn.cl-wrap select {
    max-width: 100%;
    min-height: 28px;
    border: 1px solid #cfd5da;
    border-radius: 3px;
    background: #fff;
    color: var(--tech-text);
    font-size: 10pt;
}

body #acLightbox,
body #abLightbox,
body #ctLightbox,
body #illLightbox,
body #pcLightbox,
body #pclLightbox,
body #pdaLightbox,
body #siLightbox,
body #trLightbox,
body #waLightbox,
body #clLightbox,
body #ebcLightbox,
body #ebrLightbox {
    background: rgba(0, 0, 0, 0.86) !important;
    padding: 20px !important;
    z-index: 2147483647;
}

    body #acLightboxImg,
    body #abLightboxImg,
    body #ctLightboxImg,
    body #illLightbox img,
    body #pcLightboxImg,
    body #pclLightboxImg,
    body #pdaLightboxImg,
    body #siLightboxImg,
    body #trLightboxImg,
    body #waLightboxImg,
    body #clLightboxImg,
    body #ebcLightboxImg,
    body #ebrLightboxImg {
        background: #fff !important;
        border: 1px solid var(--tech-border) !important;
        padding: 6px !important;
    }

@media (max-width: 850px) {
    .page-pane .eo-grid,
    .page-pane .tr-layout,
    .page-pane .pc-layout,
    .page-pane .service-detail-layout,
    .page-pane .ab-layout-wrap,
    .page-pane .ct-pressure-layout,
    .page-pane .ct-grid-2,
    .page-pane .ebr-variant-layout,
    .page-pane .edtc-layout,
    .page-pane .ecl-layout,
    .page-pane .efr-layout,
    .page-pane .ewd-layout,
    .page-pane .ewdv-layout {
        grid-template-columns: 1fr !important;
    }

    .page-pane .pc-sidebar,
    .page-pane .card,
    .page-pane .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .page-pane .eo-value,
    .page-pane .eo-torque-list strong,
    .page-pane .ct-torque-val {
        font-size: 18pt !important;
    }
}

.ServiceMenuDisclosure.ServiceMenuDisabled .ServiceMenuSummary {
    opacity: 0.55;
    cursor: not-allowed !important;
}

    .ServiceMenuDisclosure.ServiceMenuDisabled .ServiceMenuSummary::after {
        content: "";
    }

.ServiceMenuDisclosure.ServiceMenuDisabled .ServiceMenuOptions {
    display: none !important;
}

/* Service Sheets */
.ss-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: start;
}

    .ss-layout:has(.ss-sheet:only-child) {
        grid-template-columns: 1fr;
    }

.ss-panel {
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    padding: 10px;
}

.ss-panel-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.ss-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 10px 0;
}

.ss-readonly-field {
    min-height: 27px;
    padding: 5px 7px;
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #333;
}

.ss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    .ss-actions .Buttons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
    }

.service-sheet-search-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .service-sheet-search-panel input[type="text"] {
        height: 27px;
        box-sizing: border-box;
    }

    .service-sheet-search-panel .Buttons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 27px;
        line-height: 1;
        margin: 0;
        vertical-align: middle;
    }

.ss-sheet {
    background: #fff;
    border: 1px solid #d6d6d6;
    padding: 14px;
    min-height: 520px;
    overflow: auto;
}

.ss-message {
    display: block;
    margin: 0 0 10px 0;
}

.ss-print-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ss-summary {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

    .ss-summary td {
        border-bottom: 1px solid #e1e1e1;
        padding: 5px 6px;
        vertical-align: top;
    }

    .ss-summary th {
        white-space: nowrap;
        width: 118px;
        padding-right: 16px;
        color: #741e43;
        text-align: left;
        font-weight: bold;
        font-size: 9.5pt;
        text-transform: uppercase;
    }

    .ss-summary td {
        font-size: 10pt;
        color: #333;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

.ss-op-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

    .ss-op-table th,
    .ss-op-table td {
        border-bottom: 1px solid #d7d7d7;
        padding: 6px;
        vertical-align: top;
    }

    .ss-op-table th {
        text-align: left;
        background: #ececec;
    }

.ss-check-col {
    width: 90px;
    text-align: center;
}

.ss-group-row th {
    background: #dcdcdc;
}

.ss-inspection-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
}

    .ss-inspection-table th,
    .ss-inspection-table td {
        border: 1px solid #d3d5d8;
        padding: 5px;
        text-align: center;
    }

        .ss-inspection-table th:first-child,
        .ss-inspection-table td:first-child {
            text-align: left;
        }

.ss-notes {
    border: 1px solid #000;
    min-height: 100px;
}

.ss-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}

@media print {
    .noprint {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Master popup menu hard-disabled option state */
.ServiceMenuOptionDisabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
    text-decoration: none !important;
}

/* Service Sheets */
.ss-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: start;
}

    .ss-layout:has(.ss-sheet:only-child) {
        grid-template-columns: 1fr;
    }

.ss-panel {
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    padding: 10px;
}

.ss-panel-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.ss-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 10px 0;
}

.ss-readonly-field {
    min-height: 27px;
    padding: 5px 7px;
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #333;
}

.ss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.invoice-page-pane .invoice-fixed-canvas,
.fixed-document-page-pane .fixed-document-canvas {
    width: auto !important;
    min-width: 0 !important;
}

    .invoice-page-pane .invoice-fixed-canvas .NewPanel,
    .fixed-document-page-pane .fixed-document-canvas .NewPanel {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

@media print {
    body.print-page-pane-active > form > * {
        display: none !important;
    }

    body.print-page-pane-active > form > #BodySection,
    body.print-page-pane-active > form > #BodySection > #BodyContainer,
    body.print-page-pane-active > form > #BodySection > #BodyContainer > .page-pane.is-print-target {
        display: block !important;
    }

    body.print-page-pane-active > form > #BodySection {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.print-page-pane-active > form > #BodySection > #BodyContainer {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.print-page-pane-active > form > #BodySection > #BodyContainer > * {
        display: none !important;
    }

    body.print-page-pane-active > form > #BodySection > #BodyContainer > .page-pane.is-print-target {
        display: block !important;
    }

    body.print-page-pane-active .page-pane.is-print-target {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    body.print-page-pane-active .page-pane.is-print-target > h1.ColumnHeader {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    body.print-page-pane-active .page-pane.is-print-target > .page-pane-inner {
        break-before: avoid !important;
        page-break-before: avoid !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .Buttons,
    body.print-page-pane-active .page-pane.is-print-target a[class*="-image-link"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-openall"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-closeall"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-toggleall"],
    body.print-page-pane-active .page-pane.is-print-target [class*="-lightbox-close"],
    body.print-page-pane-active .page-pane.is-print-target [class*="-modal-close"],
    body.print-page-pane-active .page-pane.is-print-target a[class$="-back"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-back "],
    body.print-page-pane-active .page-pane.is-print-target a[class$="-zoom"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-zoom "],
    body.print-page-pane-active .page-pane.is-print-target a[class$="-ref-badge"],
    body.print-page-pane-active .page-pane.is-print-target a[class*="-ref-badge "],
    body.print-page-pane-active .page-pane.is-print-target a[href="#"][onclick*="openAll"],
    body.print-page-pane-active .page-pane.is-print-target a[href="#"][onclick*="closeAll"],
    body.print-page-pane-active .page-pane.is-print-target a[href="#"][onclick*="toggleAll"],
    body.print-page-pane-active .page-pane.is-print-target a[id$="ToggleAll"],
    body.print-page-pane-active .page-pane.is-print-target a[id$="OpenAllLink"],
    body.print-page-pane-active .page-pane.is-print-target a[id$="CloseAllLink"],
    body.print-page-pane-active .page-pane.is-print-target .tr-back,
    body.print-page-pane-active .page-pane.is-print-target .pc-back,
    body.print-page-pane-active .page-pane.is-print-target .wa-back,
    body.print-page-pane-active .page-pane.is-print-target .service-back-option,
    body.print-page-pane-active .page-pane.is-print-target .ewdv-back-link,
    body.print-page-pane-active .page-pane.is-print-target .cl-back-link,
    body.print-page-pane-active .page-pane-print-button,
    body.print-page-pane-active .PrinterIcon,
    body.print-page-pane-active .page-pane.is-print-target button,
    body.print-page-pane-active .page-pane.is-print-target input[type="button"],
    body.print-page-pane-active .page-pane.is-print-target input[type="submit"],
    body.print-page-pane-active .page-pane.is-print-target input[type="reset"],
    body.print-page-pane-active .page-pane.is-print-target select,
    body.print-page-pane-active .page-pane.is-print-target textarea {
        display: none !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .service-sheet-list-table .document-list-select-column {
        display: none !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .taxdata,
    body.print-page-pane-active .page-pane.is-print-target .MOTDate,
    body.print-page-pane-active .page-pane.is-print-target .taxdata *,
    body.print-page-pane-active .page-pane.is-print-target .MOTDate * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .taxdata {
        background-image: url('../Images/pink-roadtax.png') !important;
        background-repeat: no-repeat !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .MOTDate {
        background-image: url('../Images/mot_small2.png') !important;
        background-repeat: no-repeat !important;
    }

    body.print-page-pane-active .page-pane.is-print-target .vehicle-layout {
        display: block !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target > h1.ColumnHeader,
    body.print-page-pane-active .end-of-year-page-pane.is-print-target #LeftColumn2,
    body.print-page-pane-active .end-of-year-page-pane.is-print-target .EndOfYearSendInvoicesMessage {
        display: none !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target .page-pane-inner {
        padding: 0 !important;
        overflow: visible !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target #RightColumn2 {
        width: auto !important;
        margin-left: 0 !important;
        border: 0 !important;
        background: transparent !important;
        min-height: 0 !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target .end-of-year-results-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        width: 950px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target .printonly {
        display: block !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target table.printonly {
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.print-page-pane-active .end-of-year-page-pane.is-print-target #MainContent > table {
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

.service-sheet-search-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .service-sheet-search-panel input[type="text"] {
        height: 27px;
        box-sizing: border-box;
    }

    .service-sheet-search-panel .Buttons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 27px;
        line-height: 1;
        margin: 0;
        vertical-align: middle;
    }

.ss-sheet {
    background: #fff;
    border: 1px solid #d6d6d6;
    padding: 14px;
    min-height: 520px;
    overflow: auto;
}

.ss-message {
    display: block;
    margin: 0 0 10px 0;
}

.ss-print-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ss-summary {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

body.print-page-pane-active .invoice-page-pane.is-print-target h1.ColumnHeader,
body.print-page-pane-active .fixed-document-page-pane.is-print-target h1.ColumnHeader {
    display: none !important;
}

/* Service Sheets Print Styles */
@page {
    margin: 15mm;
}

#serviceschedule {
    font-size: 11pt;
    page-break-before: avoid;
}

.ss-print-header {
    font-size: 10pt;
}

.ss-summary {
    font-size: 11pt;
}

.ss-op-table {
    font-size: 10pt;
}

.ss-inspection-table {
    font-size: 10pt;
}

.ss-health-check {
    font-size: 12px;
    min-width: 0;
}

    .ss-health-check .tableReport,
    .ss-health-check .tableReport2,
    .ss-health-check .tableReport3 {
        width: 100%;
        margin-bottom: 10px;
        border-collapse: collapse;
        font-size: 12px;
    }

        .ss-health-check .tableReport th,
        .ss-health-check .tableReport td,
        .ss-health-check .tableReport2,
        .ss-health-check .tableReport2 th,
        .ss-health-check .tableReport3 th,
        .ss-health-check .tableReport3 td {
            border: 1px solid #000 !important;
            padding: 2px 5px;
            font-size: 12px;
        }

            .ss-health-check .tableReport th,
            .ss-health-check .tableReport2 th,
            .ss-health-check .tableReport3 th {
                background-color: #ddd;
                text-align: left;
                padding-left: 5px;
                font-size: 12px;
                font-weight: bold;
            }

    .ss-health-check .Traffic,
    .ss-health-check .Green,
    .ss-health-check .Amber,
    .ss-health-check .Red {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    .ss-health-check .cbox {
        margin: 10px 20px;
    }

    .ss-health-check .Green {
        background-image: url('../Images/TrafficGreen.png') !important;
    }

    .ss-health-check .Amber {
        background-image: url('../Images/TrafficAmber.png') !important;
    }

    .ss-health-check .Red {
        background-image: url('../Images/TrafficRed.png') !important;
    }

    .ss-health-check .flex-container {
        display: flex;
        width: 100%;
    }

    .ss-health-check .textFull {
        flex: 1;
        border: 0 !important;
        border-style: none !important;
        min-height: 0;
        margin-left: 10px;
        margin-right: 10px;
        background: transparent;
    }

    .ss-health-check .GarageDetailsBox {
        border: 1px solid #000;
        padding: 10px;
        width: 350px;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    .ss-health-check .page-break {
        break-before: page;
        page-break-before: always;
        height: 0;
    }

/* Wheel alignment note content */
.autodata-wheelalignment .cwa-note-cell {
    background: #f7e6b8;
    padding: 10px 12px;
}

.autodata-wheelalignment .tech-note-block {
    display: block;
}

.autodata-wheelalignment .tech-note-table {
    border-collapse: collapse;
    width: auto;
    min-width: 320px;
    margin-bottom: 10px;
    font-size: 9.5pt;
    color: #2f3338;
}

    .autodata-wheelalignment .tech-note-table th,
    .autodata-wheelalignment .tech-note-table td {
        border: 1px solid #d9c27a;
        padding: 4px 8px;
        text-align: left;
        vertical-align: top;
    }

    .autodata-wheelalignment .tech-note-table th {
        background: #f1d98f;
        font-weight: 700;
    }

.autodata-wheelalignment .tech-note-compound {
    display: block;
}

.autodata-wheelalignment .tech-note-inline-text {
    display: inline;
}

.autodata-wheelalignment .tech-note-figure {
    margin: 8px 0 0 0;
}

.autodata-wheelalignment .tech-note-image {
    max-width: 320px;
    height: auto;
    border: 1px solid #d8d8d8;
    background: #fff;
}

.autodata-wheelalignment .tech-note-image-link {
    display: inline-block;
    cursor: zoom-in;
    text-decoration: none;
}

    .autodata-wheelalignment .tech-note-image-link:hover .tech-note-image,
    .autodata-wheelalignment .tech-note-image-link:focus .tech-note-image {
        outline: 2px solid var(--tech-link);
        outline-offset: 2px;
    }

.diary-react-root #SingleColumn,
.diary-react-root .diary-layout,
.diary-react-root .calendar-section,
.diary-react-root .calendar-shell,
.diary-react-root .sidebar-section {
    background: #fff;
}

#PopupMenu li.ServiceMenuItemDisabled {
    cursor: not-allowed;
}

    /* Disable links inside menu li marked as disabled */
    #PopupMenu li.ServiceMenuItemDisabled > a.ServiceMenuOption {
        pointer-events: none;
        opacity: 0.45;
        cursor: inherit;
        text-decoration: none;
        position: relative;
        padding-left: 27px; /* room for icon */
    }

        /* Icon pinned to the same left offset every time */
        #PopupMenu li.ServiceMenuItemDisabled > a.ServiceMenuOption::before {
            content: "";
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background: url("../Images/locked-icon.png") no-repeat center center;
            background-size: 14px 14px;
        }

.ServiceMenuOptions > li {
    border: 2px solid #601837;
}

    .ServiceMenuOptions > li.PremiumPackage {
        border-color: gold;
        border-radius: 5px;
        margin-bottom: 2px;
        box-shadow: inset 0 0 10px gold, inset 0 0 40px #601837;
    }

        .ServiceMenuOptions > li.PremiumPackage.ServiceMenuItemDisabled {
            border-color: darkgoldenrod;
        }

        .ServiceMenuOptions > li.PremiumPackage > a.ServiceMenuOption {
            color: lightyellow;
        }

.quick-link.vehicle-link-disabled,
.category-link.vehicle-link-disabled {
    cursor: not-allowed !important;
    text-decoration: none !important;
}

    .quick-link.vehicle-link-disabled .link-label,
    .category-link.vehicle-link-disabled .link-label {
        opacity: 0.6;
    }

    .quick-link.vehicle-link-disabled .xtra-badge,
    .category-link.vehicle-link-disabled .xtra-badge {
        opacity: 1 !important;
        filter: none !important;
    }

    /* non-XTRA disabled links blocked */
    .quick-link.vehicle-link-disabled:not(.xtra-upgrade-required),
    .category-link.vehicle-link-disabled:not(.xtra-upgrade-required) {
        pointer-events: none;
    }

    /* XTRA-disabled links still receive onclick handler */
    .quick-link.vehicle-link-disabled.xtra-upgrade-required,
    .category-link.vehicle-link-disabled.xtra-upgrade-required {
        pointer-events: auto;
    }

        .quick-link.vehicle-link-disabled.xtra-upgrade-required .xtra-badge,
        .category-link.vehicle-link-disabled.xtra-upgrade-required .xtra-badge {
            pointer-events: auto;
            cursor: pointer !important;
        }

.xtra-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 2px;
    line-height: 10px;
    font-size: 6pt;
    font-weight: 700;
    color: #8a6a00;
    border: 1px solid #c9a227;
    border-radius: 3px;
    background: #fffaf0;
    vertical-align: middle;
    margin-top: -2px;
    padding-top: 2px;
    opacity: 1; /* always full opacity */
}

.xtra-upgrade-modal {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2147483646;
}

    .xtra-upgrade-modal.is-open {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
    }

.xtra-upgrade-modal-card {
    position: relative;
    z-index: 2147483647;
    width: 440px;
    max-width: calc(100vw - 30px);
    background: linear-gradient(180deg, #fffdf6 0%, #fff7df 100%);
    border: 2px solid #d7a726;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 213, 77, 0.25) inset;
    padding: 16px 16px 14px 16px;
}

    .xtra-upgrade-modal-card h3 {
        margin: 0 0 8px 0;
        color: #7a5300;
        font-size: 15pt;
    }

    .xtra-upgrade-modal-card p {
        margin: 0 0 12px 0;
        color: #4c3a13;
        font-size: 10pt;
    }

.xtra-upgrade-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.vehicle-type-warning-banner {
    margin: 12px 18px 0 18px;
    border: 3px solid #ef3b44;
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 2px 3px 0px rgba(8, 8, 8, 0.40);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.vehicle-type-warning-copy {
    padding: 10px 12px;
    min-width: 0;
}

.vehicle-type-warning-title {
    color: #111;
    font-size: 12pt;
    font-weight: 700;
    margin: 0 0 3px 0;
}

.vehicle-type-warning-text {
    color: #4f5660;
    font-size: 10pt;
    line-height: 1.35;
}

@media (max-width: 700px) {
    .vehicle-type-warning-banner {
        margin-left: 12px;
        margin-right: 12px;
    }

    .vehicle-type-warning-icon {
        width: 40px;
        min-width: 40px;
        font-size: 19px;
    }
}

.vehicle-type-warning-icon {
    width: 46px;
    min-width: 46px;
    background: #ef3b44;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ef3b44;
    padding: 6px;
    box-sizing: border-box;
}

    .vehicle-type-warning-icon svg {
        display: block;
        width: 40px;
        height: 36px;
    }

.vehicle-type-warning-link {
    color: #1563b0;
    text-decoration: none;
    font-weight: 600;
    margin-left: 2px;
}

    .vehicle-type-warning-link:hover,
    .vehicle-type-warning-link:focus {
        text-decoration: underline;
    }

.vehicle-type-warning-modal {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2147483646;
    padding: 18px;
    box-sizing: border-box;
}

    .vehicle-type-warning-modal.is-open {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.vehicle-type-warning-modal-card {
    position: relative;
    width: 860px;
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: 16px;
}

.vehicle-type-warning-modal-close {
    position: absolute;
    top: 0px;
    right: 0px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    margin-top: -5px;
}

.vehicle-type-warning-modal-body h4 {
    margin: 0 0 6px 0;
    font-size: 12pt;
    color: #111;
    font-weight: 700;
}

.vehicle-type-warning-modal-body p,
.vehicle-type-warning-modal-body li {
    font-size: 10.5pt;
    line-height: 1.45;
    color: #222;
}

.vehicle-type-warning-modal-body ul {
    margin: 6px 0 10px 20px;
    padding: 0;
}

/* faint bordered container around modal banner + body text */
.vehicle-type-warning-modal-content-box {
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    background: #fff;
    padding: 10px;
}

/* modal banner should sit flush inside content box */
.vehicle-type-warning-banner--modal {
    margin: 0 0 12px 0;
}

/* keep close + accept clearly outside bordered content box */
.vehicle-type-warning-modal-close {
    z-index: 2;
}

.vehicle-type-warning-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}