/*#region Page Layout */

/* Allow the main content area to stretch the whole page. */
.mud-container.body-container {
    max-width: 100%;
    padding-left: 48px;
    padding-right: 48px;
}
/*#endregion Page Layout */

/*#region Utility Classes */

/* 
    Align items stretch for flex containers - used for equal height cards in grids. 
*/
.align-stretch {
    align-items: stretch;
}

/*#endregion Utility Classes */

/*#region Common Elements */
.tabs-container .mud-tab {
    text-transform: none;
}

.mud-fab,
.mud-button {
    text-transform: capitalize !important;
}

.body-container .mud-input,
.mud-dialog-container .mud-input,
.search-result-checkbox .mud-typography-body1 {
    font-size: 0.8rem;
}

.highlight {
    /*color: var(--mud-palette-success);*/
    /*color: var(--mud-palette-primary);*/
    color: #d39beb;
}

.clickable-url a {
    font-size: 0.9rem;
}

.clickable-rows .clickable-url a.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

    .clickable-rows .clickable-url a.mud-primary-text:hover,
    .clickable-rows .clickable-url a.mud-primary-text:focus {
        color: #fff !important;
    }

.clickable-url a {
    color: #fff !important;
}

.scrollable-dialog {
    max-height: 600px;
    overflow-y: scroll;
}

/*
    ProgressIndicator overlay (MudBlazor v8).
    MudOverlay Absolute="true" uses position:absolute within the nearest
    positioned parent. The ProgressIndicator must be placed inside a parent
    element with position:relative so the overlay fills that parent.
    Previously MudOverlay used position:fixed and handled dim/blocking
    automatically; v8 requires explicit CSS for coverage, blocking, and dim.
*/
.progress-indicator-container {
    display: block;
}

.main-editor-container-progress.progress-indicator-container.visible {
    /*
        Ensure the z-index is greater than mud-drawer: var(--mud-zindex-drawer) => 1100.
    */
    z-index: 1110;
}

/* Fill the positioned parent, block interaction */
.progress-indicator-container .mud-overlay-absolute {
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

/* Spinner overlay: dim background, spinner renders on top within this layer */
.progress-indicator-container .mud-overlay-absolute.overlay-progress-indicator {
    z-index: 1200;
    background-color: rgba(50, 51, 61, 0.9);
}

/* Text overlay: transparent, sits above spinner layer */
.progress-indicator-container .mud-overlay-absolute.overlay-progress-text {
    z-index: 1201;
}

.progress-indicator-container .mud-overlay-absolute .progress-text {
    transform: translateY(80px);
}

.progress-indicator-container .mud-overlay-absolute .progress-sub-text {
    transform: translateY(200px);
}

.progress-indicator-container .progress-sub-text {
    font-size: 11px;
}

.progress-indicator-container .mud-progress-circular.progress-indicator {
    height: 100px;
    width: 100px;
}

.progress-indicator-container .progress-text {
    font-weight: bold;
}

.tooltip-container .mud-tooltip-root {
    height: fit-content;
}

    .tooltip-container .mud-tooltip-root .mud-icon-root.mud-svg-icon:hover {
        fill: var(--mud-palette-tertiary);
        /*background-color: #fff !important;*/
    }

.step-popover-card-container.mud-paper {
    background-color: #046985;
    min-width: 450px;
    max-width: 450px;
}

div.step-popover-card-container p.mud-typography {
    margin-top: 10px;
}

.select-column {
    width: 20%;
}
/*#endregion Common Elements */
/*#region Data Grid with cell content as anchors */
.mud-data-grid.clickable-rows .mud-table-body .mud-table-cell:hover {
    cursor: pointer !important;
    background-color: var(--mud-palette-action-default-hover);
    color: #fff;
}

    .mud-data-grid.clickable-rows .mud-table-body .mud-table-cell:hover.clickable-url {
        /*background-color: var(--mud-palette-action-default);*/
        /*background-color: var(--mud-palette-primary-lighten);*/
        background-color: rgba(151,141,236,0.5);
        font-weight: bolder;
    }

/* Display an icon button when hovering the row. Stops it repeating per row. */
.mud-data-grid.clickable-rows .mud-table-row:hover .mud-icon-button {
    visibility: visible;
}

/* Hides the alert in the action column. */
.mud-data-grid.clickable-rows .mud-table-row:hover .action-column .mud-alert-position {
    visibility: visible;
}

/* Generic softer striping — apply Class="striped-grid" to any MudDataGrid for
   a subtle primary-tinted stripe instead of the default high-contrast grey. */
.striped-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/*#endregion Data Grid with cell content as anchors */

.item-selected {
    width: 5%;
    max-width: 5%;
}

/*#region Search Results */

.search-result-url a,
.mud-data-grid.search-results .mud-table-cell {
    font-size: 0.8rem;
}

.search-result-url {
    word-break: break-all;
}

.search-result-title,
.search-result-url {
    width: 20%;
    max-width: 20%;
}

.search-result-snippet {
    width: 50%;
    max-width: 50%;
}

.search-result-sourcetype,
.search-result-isrelevant {
    width: 10%;
    max-width: 10%;
}

/* Ensures all checkboxes are visible when hovering the row in search results. */
.mud-data-grid.search-results .mud-table-row:hover .search-result-checkbox.hidden {
    visibility: visible;
}

/* Hides the checkboxes that have not been checked when not hovering the row in search results. */
.mud-data-grid.search-results .mud-table-row .search-result-checkbox.hidden {
    visibility: hidden;
}

/*#endregion Search Results */
/*#region Search Domains */
.search-templates {
    width: 60%;
    max-width: 60%;
}

/*#endregion Search Domains */

/*#region Product Search */

.item-details dt,
.product-details dt {
    font-weight: bold;
}

/*#endregion Product Search */

/*#region Source Signup */

.source-signup dt,
.source-signup dd {
    display: inline-block;
}

a.signup-url {
    font-size: 0.8rem;
    color: #ccc !important;
}

/*#endregion Source Signup */

/*#region Source User Button */

/* Selected User Avatar colors. */
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success:focus,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected:focus {
    background-color: #26a307;
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-success.selected {
    background-color: #2eba0b;
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-default:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default:focus,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected:hover,
.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected:focus {
    background-color: var(--mud-palette-grey-darker);
}

.mud-avatar.mud-avatar-filled.mud-avatar-filled-default.selected {
    background-color: var(--mud-palette-grey-dark);
}


/*#endregion Source User Button */

/*#region Product Mentions */

.auto-respond-chart-container {
    min-height: 15rem;
}

.analytics-dashboard-chart-container,
.mentions-chart-container {
    min-height: 20rem;
}

.mentions-result-count-column {
    width: 25%;
}

/*#endregion Product Mentions */

/*#region Pie Chart */

.pie-chart-container {
    min-height: 30rem;
}

    .pie-chart-container .invisible {
        height: 0px;
    }

/*#endregion Pie Chart */

/*#region Dashboard */

.dashboard-overview-container {
    height: 100%
}

.about-list-container .mud-typography,
.dashboard-overview-detail .mud-typography {
    font-size: 22px;
}

.welcome-wizard-step-container .body-content ol,
.about-list-container ol,
.dashboard-overview-detail ol {
    padding-inline-start: 2em;
}

    .dashboard-overview-detail ol li {
        margin-top: 4rem !important;
    }

.analytics-dashboard-container a.mud-link,
.dashboard-overview-container a.mud-link {
    color: var(--mud-palette-text-primary) !important;
    text-decoration: underline;
}

    .analytics-dashboard-container a.mud-link.mud-link-underline-hover.mud-primary-text:hover
    .dashboard-overview-container a.mud-link.mud-link-underline-hover.mud-primary-text:hover {
        color: #fff !important;
    }

/*#endregion Dashboard */

/*#region Task Status */

.task-status-container {
    width: 15rem;
    height: 15rem;
}

    .task-status-container .task-status-count-text-container {
        font-size: 5.8em;
        line-height: 1em;
    }

    .task-status-container .task-status-count-text-container,
    .task-status-horizontal-count {
        font-family: calibri;
    }

    .task-status-container .task-status-title-container {
        min-height: 4rem;
    }

.task-status-horizontal-description {
    vertical-align: super;
    height: 100%;
}

.task-status-container-small {
    max-width: 8rem;
    max-height: 9rem;
    min-height: 9rem;
}

    .task-status-container-small .mud-typography-h5 {
        font-size: 1rem;
    }

.task-status-items-container {
    min-height: 10rem;
}

.task-status-items-text-container {
    max-height: 10rem;
    overflow-y: scroll;
}

/*#region Task Status */

/*#region Wizards Selector */
.mud-link.mud-link-disabled .mud-paper,
.large-selector-button a.mud-link.mud-link-underline-hover.mud-link-disabled:hover .large-button-text-container {
    color: var(--mud-palette-action-disabled) !important;
}

.large-selector-button {
    width: 20rem;
    height: 20rem;
    position: relative;
    top: 0;
    left: 0;
}

/* Displays a tick image bottom right in the button. */
.wizard-task-completed {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.large-button-text-container {
    min-height: 3rem;
    width: 100%;
    text-align: center;
}

.large-selector-button a.mud-link.mud-link-underline-hover:hover {
    text-decoration: none;
}

    .large-selector-button a.mud-link.mud-link-underline-hover:hover .large-button-text-container {
        color: #fff;
    }

/*#endregion Wizards Selector */

/*#region Wizard Help */

.wizard-help-container,
.wizard-step-container {
    min-height: 30rem;
}

    .privacy-policy ul,
    .welcome-wizard-step-container ul,
    .wizard-step-container ul {
        list-style: disc;
        margin: 0px 1em;
        padding: 1em;
        margin-right: 0px;
    }

.wizard-help-content-container {
    min-height: 25rem;
    max-height: 25rem;
    overflow-y: scroll;
}

.wizard-help-image {
    max-width: 100%;
}

/*#endregion Wizard Help */

/*#region Brand Reputation Wizard */

.mentions-progress-content-container {
    min-height: 17rem;
    max-height: 17rem;
    overflow-y: scroll;
}

    .mentions-progress-content-container ul {
        padding: 0px 1rem;
    }

.mud-progress-linear.horizontal.mud-progress-linear-large {
    height: 20px;
}

.mentions-progress-bar p {
    padding: 4px;
    font-size: 11px;
}

.progress-indicator-container .mud-progress-circular.mentions-progress-indicator {
    height: 70px;
    width: 70px;
}

.brand-name-column {
    width: 60%;
}

.brand-description {
    min-height: 11rem;
}

.brand-wizard .product-details dt {
    font-size: 1rem;
}

/*#endregion Brand Reputation Wizard */

/*#region Competitor Brand Reputation Wizard */

.brand-name-column {
    width: 30%;
}

.brand-search-phrase-column {
    width: 30%;
}

.brand-website-column {
    width: 40%;
}

.fixed-header {
    height: 24rem;
}

/*#endregion Competitor Brand Reputation Wizard */

/*#region Help Button/Dialog */
.mud-fab.mud-fab-extended.help-button {
    background-color: var(--mud-palette-action-disabled-background);
    text-transform: none;
    min-height: 32px;
    box-shadow: none;
}

    .mud-fab.mud-fab-extended.help-button:hover {
        background-color: var(--mud-palette-success);
        color: #fff;
    }

.help-dialog .help-carousel {
    min-height: 40rem;
}

.help-dialog .mud-carousel .help-carousel-item-container {
    height: 100%;
}

.help-dialog .mud-carousel .help-carousel-item-content {
    max-height: 30rem;
    overflow-y: scroll;
    padding-right: 0.5rem;
}

.help-tooltip-text {
    max-width: 300px;
    /* text-align: left; */
}

.help-tooltip-component {
    max-width: 300px;
    /* text-align: left; */
}

/* 
Text / help box helpers
*/
span.help-bold {
    font-weight: bold;
    font-size: larger;
    color: #b0a8f9;
}

span.help-bold-smaller {
    font-weight: bold;
    /* font-size: large; */
    color: #b0a8f9;
}

svg.help-info-icon {
    float: left;
    padding-right: 5px;
    color: lightgreen;
}

ul.help-list {
    padding: 0px
}

div.help-example {
    display: inline-block;
}

    div.help-example p.help-title {
        margin-top: 10px;
    }

    div.help-example p.help-rounded-box {
        padding: 10px;
        margin-top: 20px;
        margin-left: 20px;
        border-color: #766ae6;
        border-style: solid;
        border-width: 2px;
        border-radius: 7px;
    }

/*#endregion Help Button/Dialog */


/*#region Identity pages e.g. login/logout etc. */

#layoutContainer.mud-container-maxwidth-sm #externalLoginContainer {
    flex-grow: 0;
    max-width: 100%;
    flex-basis: 100%;
}

.social-login-container {
    min-height: 20rem;
    max-width: 600px;
}

    .social-login-container.is-welcome {
        max-width: 1280px;
    }

.socialLoginContainer #externalLoginContainer {
    padding: 12px;
    display: flex !important;
    align-content: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.social-login-container.is-welcome #externalLoginContainer {
    top: -2.28rem;
    left: 27rem;
    position: relative;
    position: relative;
    padding: 0px;
}

.social-login-button-container {
    width: 100%;
    text-align: center;
}

    .microsoft-login-container img.social-login-button-image,
    .social-login-button-container img.social-login-button-image {
        position: absolute;
        left: 7rem;
        top: 1rem;
        width: 21px;
        height: 21px;
        z-index: 10;
    }

.social-login-container.is-welcome img.social-login-button-image {
    left: 28rem;
    top: 0.5rem;
}

.microsoft-login-container img.social-login-button-image {
    top: 0.5rem;
    left: 1rem;
}

.social-login-button-inner-container {
    position: relative;
}

.mud-button.social-login-button {
    width: 20rem;
}

.social-login-container.is-welcome .mud-button.social-login-button {
    margin: 0px !important;
}

/*#region Login Welcome Wizard */

@media screen and (min-width: 1280px) {
    .account-container {
        margin-top: 64px !important;
    }

    .welcome-wizard-step-container {
        min-height: 30rem;
        height: 30rem;
    }

    .social-login-container.is-welcome #socialLoginInnerContainer {
        height: 33rem;
    }
}

.welcome-wizard-step-container .body-content {
    max-height: 30.5rem;
    overflow-y: scroll;
    padding-right: 0.5rem;
}

    .welcome-wizard-step-container .body-content ol li {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

.welcome-wizard-step-container .mud-input-label.valid-text {
    transform: translate(14px,-6px) scale(.75);
}

.mud-input-helper-text.mud-input-error.validation-summary-errors {
    font-size: var(--mud-typography-default-size);
}

.mud-input-error .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

.welcome-wizard-step-container .right-body-content h6 {
    font-size: 0.9rem;
}

.welcome-wizard-step-container .right-body-content .gradient-image:hover,
.welcome-wizard-step-container .right-body-content img:hover {
    /*opacity: 0.4;*/
}

.welcome-wizard-step-container .right-body-content .gradient-image {
    background-repeat: no-repeat;
}

.start-journey {
    width: auto;
    max-height: 17rem;
}

/*#endregion Login Welcome Wizard */

/*#region Account Pages Input Styling */
/*
    Styles for standard HTML inputs on SSR Identity pages (Login, Register, etc.)
    that cannot use interactive MudBlazor components.
*/
.account-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.account-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.account-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.account-input.invalid,
.account-input:invalid:not(:placeholder-shown) {
    border-color: var(--mud-palette-error);
}

.account-input.invalid:focus,
.account-input:invalid:not(:placeholder-shown):focus {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}

/* Checkbox styling for account pages */
.account-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
}

/* Validation summary styling for account pages */
ul.mud-alert.mud-alert-text-error,
.validation-summary-errors ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem !important;
    margin: 0;
    list-style-type: disc;
}

    ul.mud-alert.mud-alert-text-error li,
    .validation-summary-errors ul li {
        margin-bottom: 0.25rem;
        margin-top: 0.25rem;
    }

/*#endregion Account Pages Input Styling */

/*#endregion Identity pages e.g. login/logout etc. */

/*#region Terms and Conditions */

.terms-and-conditions-container ul {
    padding-inline-start: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}

[data-custom-class='body'], [data-custom-class='body'] * {
    background: transparent !important;
}

[data-custom-class='title'], [data-custom-class='title'] * {
    font-size: 26px !important;
}

[data-custom-class='subtitle'], [data-custom-class='subtitle'] * {
    font-size: 14px !important;
}

[data-custom-class='heading_1'], [data-custom-class='heading_1'] * {
    font-size: 19px !important;
}

[data-custom-class='heading_2'], [data-custom-class='heading_2'] * {
    font-size: 17px !important;
}

[data-custom-class='body_text'], [data-custom-class='body_text'] * {
    font-size: 14px !important;
}

[data-custom-class='link'], [data-custom-class='link'] * {
    font-size: 14px !important;
    word-break: break-word !important;
}

/*#endregion Terms and Conditions */


/*#region Tables */

div.row-highlight table tbody tr:hover {
    background-color: #3283c3 !important;
}
/*#endregion Tables  */

/*#region Product Summary */

.product-summary .task-status-title-container {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/*#endregion Product Summary */

/*#region Analytics Dashboard */

.analytics-dashboard-container .bottom-row {
    min-height: 32rem;
}

.analytics-dashboard-container .analytics-panel-container .task-status-title-container {
    min-height: 3rem;
}

.analytics-dashboard-container .analytics-panel-container .task-status-title-text-container {
    font-size: 0.8rem;
}

.analytics-dashboard-container .panel-header {
    min-height: 4rem;
}

.google-rank {
    min-height: 17rem;
}

.general-news-container {
    max-height: 31rem;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .advertising-tabs-container .clickable-url a.mud-link,
    .general-news-container .clickable-url a.mud-link {
        text-decoration: none;
        font-weight: bold;
    }

        .advertising-tabs-container .clickable-url a.mud-link:hover,
        .advertising-tabs-container .clickable-url a.mud-link:focus
        .general-news-container .clickable-url a.mud-link:hover,
        .general-news-container .clickable-url a.mud-link:focus {
            text-decoration: underline;
        }

/*#endregion Analytics Dashboard */

/*#region Source Post */

.logo-outer-container {
    padding: 1rem;
}

.logo-inner-container {
    background-color: #fff;
}

    .logo-inner-container.stackoverflow-logo {
        padding: 1rem;
    }

    .logo-inner-container.reddit-logo {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .logo-inner-container img {
        width: 100%;
        height: 3rem;
    }

/*#endregion Source Post */

/*#region Progress Panel */

.mud-paper.skeleton-card {
    /*background-color: rgba(255,255,255,0.05);*/
}

.progress-panel-content-container {
    overflow-y: scroll;
    overflow-x: hidden;
}

    .progress-panel-content-container .mud-grid-item:last-child {
        margin-bottom: 0px !important;
    }

/*#endregion Progress Panel */

/*#region Rank Results */

.query-rank-data-grid-container .clickable-url a.mud-link.mud-primary-text {
    /*color: var(--mud-palette-primary) !important;*/
    color: var(--mud-palette-primary-lighten) !important;
}

.query-rank-data-grid-container .clickable-url a.mud-link.mud-secondary-text {
    /*color: var(--mud-palette-secondary) !important;*/
    color: var(--mud-palette-secondary-lighten) !important;
}

.query-rank-title {
    width: 40%;
}

.query-rank-query {
    width: 50%;
}

.query-rank-position {
    width: 10%;
}

/*#endregion Rank Results */

/*#region Home Link */

.mud-link.mud-typography-body1.home-link {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 200;
    font-family: 'Exo', 'sans-serif';
}

    .mud-link.mud-typography-body1.home-link:hover,
    .mud-link.mud-typography-body1.home-link:focus {
        text-decoration: none;
    }

/*#endregion Home Link */

/*#region Landing Layout */

@media (min-width: 1536px) {

    /*
        Match styling from https://actiongpt.io/ where the width is greater then MudBlazor.
    */
    .landing-layout-container .mud-container-maxwidth-lg {
        max-width: 1320px;
    }
}

/*
    Ensures the background is black where the main layout uses a grey background.
    Landing layout form labels need the same background as the label is animated
    and appears over the border
*/
.landing-layout-container .main-content .microsoft-login-container .mud-input-label,
.landing-layout-container,
.landing-layout-container .mud-appbar {
    background-color: rgb(28, 28, 28);
}

.landing-layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

    .landing-layout-container .main-content {
        flex-grow: 1;
        overflow-y: auto;
    }

        /*
            Adds padding to the bottom to allow the scrolling of the page above
            and ensure the full content of the page can be displayed.
        */
        .landing-layout-container .main-content .main-content-container {
            display: flex;
            /*
                272px accounts for the header/footer (104px each) and extra
                space from padding/margin somewhere. Ensures the height of the
                page forces the footer to the bottom of the page.
            */
            min-height: calc(100vh - 272px);
            flex-direction: column;
        }

    .landing-layout-container .footer-container,
    .landing-layout-container .footer-container .mud-appbar {
        background-color: #222222;
    }

    /*.landing-layout-container .footer-container {
            height: 104px;  
        }*/

    .landing-layout-container h1,
    .landing-layout-container h2,
    .landing-layout-container h3,
    .landing-layout-container h4 {
        color: #ffca00;
    }

    .landing-layout-container .main-content .mud-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .landing-layout-container .main-content .section-top {
        padding-top: 0px;
    }

    .landing-layout-container a {
        font-family: "Heebo", "sans-serif";
    }

    .jira-layout-container .text-center,
    .landing-layout-container .text-center {
        text-align: center;
    }

    .landing-layout-container .mud-appbar div.mud-nav-link-text {
        display: inline-block;
        margin: 0;
    }

    .landing-layout-container .mud-appbar .footer-page-menu,
    .landing-layout-container .mud-appbar .header-page-menu {
        display: flex;
        justify-content: center !important;
        align-items: center !important;
    }

/* 
    Mobile view.
*/
@media (max-width: 600px) {

    .mud-link.mud-typography-body1.home-link {
        font-size: 1.0rem;
    }

    .landing-layout-container .mud-appbar .footer-page-menu {
        display: block;
        justify-content: unset;
        align-items: unset;
    }

    .landing-layout-container .mud-appbar .social-media {
        justify-content: center !important;
    }
}

.landing-layout-container .mud-appbar .mud-nav-item {
    display: inline-block;
}

.landing-layout-container .mud-drawer-content .mud-nav-item {
    display: block;
}

.landing-layout-container .mud-appbar .mud-nav-item,
.landing-layout-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .mud-appbar .mud-nav-item.active a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-button {
    width: auto;
    font-size: 16px;
    font-weight: 600 !important;
}

.landing-layout-container .header-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-nav-item.active a.mud-nav-link,
.landing-layout-container .header-container .mud-appbar .mud-button {
    color: #fff;
}

.landing-layout-container .header-container .mud-appbar .mud-button {
    font-size: 14px;
    line-height: 20px;
    height: 34px;
    padding: 3px 16px;
}

.landing-layout-container .header-container .mud-appbar .mud-button-outlined:hover,
.landing-layout-container .header-container .mud-appbar .mud-button-outlined:focus-visible {
    background-color: rgb(255 255 255);
    color: rgb(4 4 4);
}

.landing-layout-container .footer-container .mud-appbar .mud-nav-item a.mud-nav-link,
.landing-layout-container .footer-container .mud-appbar .mud-nav-item.active a.mud-nav-link {
    color: rgb(180, 175, 182);
    font-weight: 400 !important;
}

.landing-layout-container .footer-container .mud-appbar .social-media .mud-button {
    background-color: #fff;
    color: rgb(4 4 4);
    height: 2.25rem;
    width: 2.25rem;
}

/*#endregion Landing Layout */

/*#region Home Page */

.landing-layout-container .main-content .home-section-top {
    padding-top: 0px;
    padding-bottom: 7rem;
    z-index: 10;
}
    
.home-page-container {
    background: rgba(2,0,36);
    background: linear-gradient(180deg, rgb(28 28 28) 0%, rgb(4 4 69) 35%, rgb(19 35 48) 100%);
    position: relative;
    z-index: 20;
}

.video_outer-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30;
}

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .video-container,
    .home-page-content-container .top-paragraph {
        height: 32rem;
    }

.video-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page-content-container {
    position: relative;
    z-index: 40;
}

    .home-page-content-container .top-paragraph h1 {
        font-weight: 600;
    }

    .home-page-content-container .top-paragraph p {
        font-weight: 400;
    }

    .home-page-content-container .top-paragraph h1,
    .home-page-content-container .top-paragraph h4,
    .home-page-content-container .top-paragraph p {
        color: #02284a;
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    }

.landing-layout-container .main-content .mud-button {
    background-color: #f1bf00d9;
    color: rgb(4 4 4);
    font-weight: 600 !important;
}

.landing-layout-container .main-content .microsoft-login-container .mud-button {
    background-color: var(--mud-palette-primary);
    color: #fff;
}

    .landing-layout-container .main-content .microsoft-login-container .mud-button:hover,
    .landing-layout-container .main-content .microsoft-login-container .mud-button:focus-visible {
        background-color: var(--mud-palette-primary-darken);
    }

.landing-layout-container .main-content .mud-button:hover,
.landing-layout-container .main-content .mud-button:focus-visible {
    background-color: #84b1f1;
    transition: background-color 0.25s ease;
    color: #fff;
    transition: color 0.5s ease;
}

.landing-layout-section img {
    max-width: 100%;
    height: auto;
}

.section-gradient {
    background-image: linear-gradient(to bottom,var(--tw-gradient-stops));
    --tw-gradient-from: #222222 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 34 34 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #1c1c1c var(--tw-gradient-to-position);
    --tw-gradient-from-position: 0.53%;
    --tw-gradient-to-position: 83.28%;
}

.testimonial-block .mud-paper {
    background-color: rgb(34 34 34);
    border-radius: 12px;
}

.testimonial-block blockquote {
    font-size: 16px;
    min-height: 16rem;
}

.testimonial-block .quote-image,
.testimonial-block .testimonial-author {
    color: #fff;
}

.font-semibold {
    font-weight: 600 !important;
}

/*#endregion Home Page */

/*#region New Patent Project Wizard */

.patent-project-summary {
    min-height: 24rem;
    max-height: 24rem;
    overflow-y: scroll;
}

.wizard-summary dt,
.patent-project-summary dt {
    margin-bottom: 0.5rem;
}

    .patent-project-summary dd {
        font-size: smaller;
    }
/*#endregion New Patent Project Wizard */

/*#region Project Explorer */

.project-list-container p {
    display: flex !important;
}

.project-description {
    font-size: smaller !important;
}

/*#endregion Project Explorer */


/*#region New R&D Project Wizard */

.project-wizard .wizard-help-container, 
.project-wizard .wizard-step-container {
    min-height: 20rem;
}

.project-wizard .wizard-help-content-container {
    min-height: 15rem;
    max-height: 15rem;
    overflow-y: scroll;
}

.project-summary {
    min-height: 14rem;
    max-height: 14rem;
    overflow-y: scroll;
}

.wizard-type-selector .mud-chip-selected.mud-chip-color-success {
    color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-success);
}

.wizard-type-selector .mud-chip-text.mud-chip-selected.mud-chip-color-success:hover:not(.mud-disabled) {
    background-color: var(--mud-palette-success-darken);
}

.wizard-type-selector .mud-chip-filled.mud-chip-color-info {
    color: var(--mud-palette-info);
    background-color: var(--mud-palette-info-hover);
}

    .wizard-type-selector .mud-chip-filled.mud-chip-color-info:hover:not(.mud-disabled) {
        background-color: rgba(var(--mud-palette-info-rgb), 0.12);
    }

/*#endregion New R&D Project Wizard */

/*#region Breadcrumb */

/*
    MudBlazor v8: Fix breadcrumb layout after HTML structure change (ul->ol in nav).
    - Wrapper uses display:contents so nav becomes a direct flex child of the parent.
    - Nav does NOT grow (flex-grow:0) — only MudSpacer grows, pushing siblings right.
    - Nav CAN shrink (flex-shrink:1, min-width:0) — long breadcrumb trails shrink the
      nav and the internal ol's flex-wrap:wrap handles crumb wrapping.
    - Parent MudItem must NOT have flex-wrap (removed in razor files) so siblings
      (Help button, Print button) always stay on the same row.
*/
.bread-crumbs-wrapper {
    display: contents;
}

.bread-crumbs-wrapper nav {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
}

ol.mud-breadcrumbs.document-bread-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

ol.mud-breadcrumbs.document-bread-crumbs li {
    display: flex;
    align-items: center;
}

ol.mud-breadcrumbs.document-bread-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/*
    Restrict the width if the print button is displayed.
*/
.is-print-visible .mud-breadcrumbs.document-bread-crumbs {
    max-width: 85%;
}

/*#endregion Breadcrumb */

/*#region Main Editor */

/*
    Make the MudPaper the containing block for the absolutely positioned drawer.
    Without this, the aside resolves against .main-editor-container (which
    includes the breadcrumbs), causing the drawer to overlap them.
*/
.document-editor-container {
    position: relative;
    min-height: calc(100vh - 11.5rem);
}

/*
    Ensure the left drawer stretches to match the editor/tab content height.
    The aside is position: absolute (MudBlazor) with height: 100%, but the
    percentage chain breaks because ancestors have no explicit height.
    Use top/bottom: 0 to stretch the aside to its new containing block
    (.document-editor-container) instead.
*/
.document-editor-container .mud-drawer {
    height: auto !important;
    top: 0;
    bottom: 0;
}

/*
    Make the right-hand tabs column a flex container so the MudCard
    fills the full column height, matching the left column.
    Sticky is applied to the inner card so it stays visible when scrolling.
*/
.document-editor-tabs {
    display: flex;
    flex-direction: column;
}

.document-editor-tabs > .mud-card {
    flex: 1;
    position: sticky;
    top: 4rem;
}

/*
    Getting-started / key-dates banner on the Project Explorer, and the reusable
    inline-SVG guidance diagrams. The banner uses a subtle primary tint that reads
    in both light and dark mode; the diagrams are centred and given breathing room.
*/
.rdti-intro-banner {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
    border-color: rgba(var(--mud-palette-primary-rgb), 0.30) !important;
}

.rdti-diagram {
    width: 100%;
    overflow-x: auto;
    margin: 0.5rem 0;
    text-align: center;
}

.rdti-diagram svg {
    height: auto;
}

/*
    Highlight the dynamically-added field-specific AI Support tab (the Transform /
    Generate category that appears for the field the user clicked on) in green so it
    stands out from the standard categories. Uses the theme success colour plus a
    translucent green tint so it reads correctly in BOTH light and dark mode.
    MudTabPanel.Class is applied to the .mud-tab header button.
*/
.ai-field-tab.mud-tab {
    color: var(--mud-palette-success) !important;
    background-color: rgba(76, 175, 80, 0.14) !important;
    border-radius: 6px 6px 0 0;
}

.ai-field-tab.mud-tab .mud-icon-root {
    color: var(--mud-palette-success) !important;
}

/*
    Stop scrollbars showing when navigator is in mini closed mode.
*/
.document-editor-container .mud-drawer-mini.mud-drawer--closed hr {
    max-width: 1.5rem;
}

/*
    Shift Navigation Group expand/collapse to the left when in mini closed mode.
*/
.document-editor-container .mud-drawer-mini.mud-drawer--closed .mud-nav-group .mud-nav-link-expand-icon {
    margin-left: -0.25rem;
}

/*
    Ensure the progress spinner appears fixed from left/top and in the centre
    of the visible height of the page in the browser.
*/
.main-editor-container-progress.progress-indicator-container {
    top: 0px;
    left: 0px;
}   

/*
    Guide tab fieldsets (Export, E-Signature) and their action chips.
*/
.guide-fieldset {
    border: 1px solid var(--mud-palette-action-disabled);
    border-radius: 4px;
    padding: 12px 16px 16px;
    margin: 16px 16px 0;
}

.guide-legend {
    font-size: 0.8rem;
    padding: 0 6px;
}

.guide-chip-row {
    gap: 16px;
    margin-top: 12px;
}

/* Override MudChip small size for more presentable action chips in the Guide tab */
.guide-fieldset .mud-chip.mud-chip-size-small {
    padding: 0 12px;
    height: 30px;
    font-size: 0.8125rem;
}

.guide-fieldset .mud-chip.mud-chip-size-small .mud-chip-icon {
    font-size: 1.1rem;
    margin-right: 6px;
}

/*#endregion Main Editor */

/*#region Rich Text Editor (Quill) */
/* 
    Placeholder color. 
    Otherwise, the default the color is black using:
      color: var(--quill-placeholder-color);
*/
.mud-main-content .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary);
}

/*
    Hide buttons that are not required.
      - Video Button.
      - Attach file button: DIV after the video button.
      - Start Recording button: last ql-formats span.
*/
.mudex-richtexteditor .ql-toolbar button.ql-video,
.mudex-richtexteditor .ql-toolbar button.ql-video + div,
.mudex-richtexteditor .ql-toolbar span.ql-formats:last-of-type {
    display: none;
}

.mudex-richtexteditor .ql-find-replace svg {
    fill: var(--mud-palette-text-primary);
}

    .mudex-richtexteditor .ql-find-replace svg:hover,
    .mudex-richtexteditor .ql-find-replace svg:focus {
        fill: var(--quill-primary-color);
    }

.mudex-richtexteditor .ql-find-replace-dialog {
    background-color: var(--quill-bg-color);
    border: 1px solid var(--quill-border-color);
    color: var(--quill-dark-text-color);
    box-shadow: 0px 0px 5px #ddd;
    padding: 5px 12px;
    white-space: nowrap;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    max-width: 98%;
}

    .mudex-richtexteditor .ql-find-replace-dialog input {
        border: 1px solid #ccc;
        font-size: 13px;
        height: 26px;
        margin: 0px;
        padding: 3px 5px;
        max-width: 26%;
    }

    .mudex-richtexteditor .ql-find-replace-dialog  input.ql-replace-input, 
    .mudex-richtexteditor .ql-find-replace-dialog a.ql-action {
        margin-left: 16px;
    }

    .mudex-richtexteditor .ql-find-replace-dialog a {
        cursor: pointer;
        text-decoration: none;
    }

    .mudex-richtexteditor .ql-find-replace-dialog .ql-find-replace-message {
        margin-top: 8px;
        color: var(--mud-palette-error);
    }

        .mudex-richtexteditor .ql-find-replace-dialog .ql-find-replace-message.success {
            color: var(--mud-palette-success);
        }

/*#endregion Rich Text Editor (Quill) */

/*#region File Attachments */

.file-attachments-scrollable-grid {
    min-height: 10rem;
    max-height: 24rem;
    overflow-y: auto;
}

/*.scrollable-area {
    min-height: 8.5rem;
    max-height: 8.5rem;
    overflow-y: auto;
}*/

/*#endregion File Attachments */

/*#region Discussions */

.discussion-container .mud-icon-button {
    visibility: hidden;
}

.discussion-container:hover .mud-icon-button {
    visibility: visible;
}

.discussion-container .full-name {
    font-weight: bold;
}

/*#endregion Discussions */

/*#region Times */

.time-entry-grid .date-column {
    min-width: 4rem;
}

.time-entry-grid .hours-column {
    min-width: 3rem;
    max-width: 5rem;
}

.time-entry-grid .description-column {
    min-width: 20rem;
}

/*#endregion Times */

/*#region Guidance */

.guidance-expand-panel.mud-expand-panel .mud-expand-panel-header.mud-expand-panel-header-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

.guidance-expand-panel.mud-expand-panel .mud-expand-panel-content {
    padding: 0px 16px;
}

/*#region Bullet points in guidance */

div.exa-bullet div.mud-list-item-icon {
    min-width: 40px;
}

div.exa-bullet .mud-list-item-text p {
    font-size: var(--mud-typography-body2-size);
    font-family: var(--mud-typography-body2-family);
    font-weight: var(--mud-typography-body2-weight);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
    text-transform: var(--mud-typography-body2-text-transform);
    margin-bottom: 0px;
}

/*#endregion Bullet points in guidance */

/*#endregion Guidance */


/*#region Location Highlighter */

.location-item-container {
    position: relative;
    width: 100%;
    height: 100px;
}

.location-item {
    position: absolute;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}

.location-active {
    background-color: #8babc9;
    color: #1b1b20;
    border-radius: 6px;
    height: 24%
}

.location-inactive {
    background: rgba(0, 0, 0, 0.5);
    color: inherit;
}

/*#endregion Location Highlighter */

/*#region Editable Data Grids */

.data-table-editor tbody .mud-icon-button {
    visibility: hidden;
}

.data-table-editor .mud-table-cell {
    font-size: 0.65rem;
}

.data-table-editor .mud-table-cell.date-property {
    min-width: 9rem;
}

.data-table-editor .mud-table-cell.date-range-property {
    min-width: 16rem;
}

    .data-table-editor .mud-table-cell.resource-detail {
        min-width: 17rem;
    }

    .data-table-editor .mud-table-cell.search-item-number,
    .data-table-editor .mud-table-cell.term-set,
    .data-table-editor .mud-table-cell.class-number,
    .data-table-editor .mud-table-cell.search-operator {
        max-width: 2rem;
        min-width: 2rem;
    }

.data-table-editor .mud-table-row .mud-table-cell.action-column {
    max-width: 0.5rem;
    padding: 6px 6px 6px 6px;
    padding-inline-start: 6px;
    padding-inline-end: 18px;
}

/*#endregion Editable Data Grids */

/*#region Document Nav Menus */

.mud-divider.document-page-navigator {
    max-width: 13rem;
}

/*#endregion Document Nav Menus */

/*#region Form Field Container */

.field-label {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(14px, -6px) scale(0.75);
    color: var(--mud-palette-text);
    line-height: 18px;
    background-color: var(--mud-palette-surface);
    padding: 0px 5px !important;
    font-size: 1rem;
}

.field-inner-container {
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--mud-palette-action-disabled);
    padding: 18.5px -6px;
    width: 100%;
    transition: border-width, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .field-inner-container:hover {
        border-color: var(--mud-palette-text);
    }

.field-container:focus,
.field-container:focus-within .field-inner-container {
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

.field-container:focus-within .field-label {
    color: var(--mud-palette-primary);
}

/*#endregion Form Field Container */


/*#region AI Helper */

.category-picker .mud-tabs-toolbar .mud-tabs-toolbar-inner {
    min-height: 40px;
}

.category-picker .mud-tab {
    font-size: 0.75rem;
    padding: 0px 12px;
    min-height: 40px;
}

    .category-picker .mud-tab .mud-icon-size-medium {
        font-size: 1.0rem;
    }

/*#endregion AI Helper */


/*#region Project Overview */

.project-list-container:hover .project-item-delete,
.project-list-container:focus-within .project-item-delete,
.project-item-container:hover .project-item-edit,
.project-item-container:focus-within .project-item-edit {
    visibility: visible;
}

.project-item-container .property-name {
    min-width: 7rem;
}

.project-list-container .project-item-delete,
.project-item-container .project-item-edit {
    top: 0;
    right: 0;
    visibility: hidden;
}

/*#endregion Project Overview */


/*#region Subscriptions */

.add-subscription-dialog.mud-dialog  {
    min-height: 33rem;
}

.payment-description {
    min-height: 27rem;
}

.subscription-total-price {
    font-weight: 700 !important;
    color: var(--mud-palette-success);
    font-size: 1rem;
}

/* Display a button when hovering the row. Stops it repeating per row. */
.mud-data-grid.clickable-rows.active-subscriptions .mud-table-row:hover .mud-button {
    visibility: visible;
}

/*#endregion Subscriptions */

/*#region Law Document Cards */

div.mud-card.mud-paper.law-card {
    height: 100%;
    border-left: 3px solid var(--mud-palette-primary);
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

div.mud-card.mud-paper.law-card:hover {
    background-color: var(--mud-palette-background-gray);
}

/* Card content fills the card and uses flex column to push description down */
.law-card .law-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Remove default MudChip margin so justify-space-between works in the header row */
.law-card .mud-chip {
    margin: 0;
}

/* Min height on title row so descriptions align across cards (accommodates up to 2 lines) */
.law-card .law-card-title-row {
    min-height: 3.6rem;
}

/* Category-specific left borders (extend as new categories are added). */
div.mud-card.law-card.category-estate-planning {
    border-left-color: var(--mud-palette-primary);
}

.law-documents-empty-icon {
    font-size: 4rem;
    opacity: 0.4;
}

.law-documents-empty-text {
    opacity: 0.7;
}

/*#endregion Law Document Cards */

/*#region Project Navigator */

.project-navigator-tree {
    max-height: calc(100vh - 180px);
}

/*
    Hide buttons by default - display as the user hovers.
*/
.project-navigator div.mud-card.document-card div.mud-card-actions {
    visibility: hidden;
}

    /*
    Always display thead first card.
*/
.project-navigator div.mud-card.document-card:first-of-type div.mud-card-actions {
    visibility: visible;
}

/**
    Displays when hovering over any document cards displayed
    to the right of the Project Navigator tree view. 
    When the Add button displays a menu, the menu is displayed
    when hovering over the document card so also need to cater
    for when the menu is open => active class is added.
*/
    .project-navigator div.mud-card.document-card div.mud-card-actions.active,
    .project-navigator div.mud-card.document-card:hover div.mud-card-actions {
        visibility: visible;
    }

.project-navigator .mud-chip .mud-chip-icon {
    margin-left: 0px;
}

/*#endregion Project Navigator */

/*#region Switches */

span.mud-switch-track.mud-dark,
span.mud-switch-track.mud-default {
    background-color: var(--mud-palette-grey-default) !important;
}

/*#endregion Switches */

/*#region Privacy Policy */

.privacy-policy .mud-typography-body1 {
    padding-top: 16px;
    padding-bottom: 16px;
}

/*#endregion Privacy Policy */

/*#region Checklists */

.checklist-date-completed.mud-picker-inline {
    max-width: 12rem;
}

/*
    Ensure the title is truncated with ellipsis when the title is too long.
*/
.checklist-item .checklist-title {
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*#endregion Checklists */

/*#region Jira Plugin */

.jira-layout-container {
    max-height: 12rem;
}

.jira-plugin.mud-container {
    padding: 0px;
}

.jira-plugin .column-name {
    max-width: 170px;
    min-width: 170px;
}

.jira-plugin .column-value {
    width: 60%;
}

/*#endregion Jira Plugin */

/*#region Move Document */

.move-item-type {
    max-width: 2rem;
    min-width: 2rem;
}

.move-item-code {
    max-width: 3rem;
    min-width: 3rem;
}

/*#endregion Move Document */

/*#region Signup */

.mud-input-control-boolean-input .mud-input-error .me-auto {
    padding-left: 16px;
}

/*#endregion Signup */

/*#region Adverts */

.advert-carousel {
    min-height: 21rem;
}

.advert-carousel-navigation {
    padding-top: 12rem;
}

/*#endregion Adverts */


/*#region Print */
/**
    Used to clear the floats when displaying HTML from Rich Text Editors
    where the user may have floated items.
*/
.clear-both {
    clear: both;
}

.table-print {
    width: 100%;
    border-collapse: collapse;
}

    .table-print th,
    .table-print td {
        padding: 6px 24px 6px 16px;
    }

.table-print thead tr {
    background-color: #66a3e0;
    
}
    .table-print tbody tr {
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .table-print tbody td:not(:last-child) {
        border-right: 1px solid var(--mud-palette-table-lines);
    }

.print-item-container a {
    color: var(--mud-palette-primary) !important;
}

.print-item-container ol {
    margin-top: 1rem;
    margin-left: 2rem;
}

.header,
.footer {
    display: none;
}

@media print {
    /**
        Ensure the background color is black when printing.
    */
    body, p, div, td, span {
        color: black !important;
    }

    /*
        Hide the following:
          - Header (Top Nav)
          - Document Editor Header
            - Breadcrumbs
            - Print Button
          - Document Editor Tabs: Right hand tab controls:
            - Guide
            - File Upload etc.
          - Document Editor Content Actions: buttons e.g. Save
          - Quill Editor Toolbar
          - New Discussion control
    */
    header,
    .mud-drawer,
    .document-editor-header,
    .document-editor-tabs,
    .mud-grid-item.document-editor-content-actions,
    .ql-toolbar,
    .new-discussion,
    .print-document-buttons .mud-fab,
    .print-button {
        display: none !important;
    }

    /*
        Content is shifted to the left to display the left hand document page navigator.
        Remove the margin when printing.
    */
    .document-editor-inner-container {
        margin-left: 0px !important;        
    }

    .mud-main-content {
        /*border: solid 1px #000 !important;*/
    }

    .body-container {
        /*border: solid 1px #26a307 !important;*/
    }

    .mud-main-content,
    .body-container {
        padding-top: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin: 0px !important;
    }

    /*
        Removes the border from the MudPaper controls for the document editor container and 
        content areas when printing.
    */
    .mud-paper.document-editor-container,
    .document-editor-content .mud-paper {
        border: none !important;
        box-shadow: none !important;
    }

    /*
        Ensures the document editor content is full width when printing.
    */
    .document-editor-content-inner {
        width: 100% !important;
    }

    /*
        Ensures the Quill editor fields are full height so they 
        are shown fully when printing.
    */
    .ql-container,
    .ql-container .ql-editor {
        height: auto !important;
    }

    /*
        Ensures the document editor is full width when printing.
        Adding margins to top and bottom to ensure the content is
        not too close to the header/footer of the page.
    */
    @page {
        /*size: landscape;*/
        margin: 0mm 10mm;
    }

    .header {
        top: 0;
        padding-bottom: 60px;
    }

    .header,
    .footer {
        position: fixed;
        text-align: center;
        width: 100%;
        display: block !important;
    }

    .footer {
        bottom: 0;
        padding-top: 60px;
    }

    .print-content-container {
        /*position: relative;
        padding: 40px 0px;
        border: solid 1px #26a307 !important;*/
    }

        .print-content-container img {
            /*max-width: 100%;*/
        }

    /**
        Adds padding to the top so that when there are page breaks it doesn't 
        bleed into the header.
    */
    .print-item-container {
        padding-top: 60px;
    }

    /**
        Remove padding from the first item in the page as padding is applied 
        to the print-document-title.
    */
    .top-print-item-container {
        padding-top: 0px;
    }

    /**
        Adds padding to top to place beneath the heading.
        Adds padding to the bottom to ensure there is space before the 
        first item e.g. top-print-item-container.
    */
    .print-document-title {
        padding: 24px 0px;
    }

    /**
        Ensure the background colors are used when printing.
    */
    table {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /**
        Ensure table borders are displayed when printing.
    */
    .table-print tbody tr {
        border-bottom: 1px solid var(--mud-palette-grey-light) !important;
    }

    /**
        Ensure table borders are displayed when printing.
    */
    .table-print tbody td:not(:last-child) {
        border-right: 1px solid var(--mud-palette-grey-light) !important;
    }

    /**
        Try to keep section titles with the content.
        Note: This isn't guaranteed to work and of the following content is more 
        than a page then it must flow over.
    */
    .no-page-break {
        page-break-inside: avoid;
    }
}

/*#endregion Print */

/*#region Patents */

.search-results .search-result {
    width: calc(100% - 64px);
}

.ellipsis {
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;
    width: 100%;*/
}

.patent-dates {
    color: var(--mud-palette-action-default) !important;
    font-size: x-small !important;
}

/*#endregion Patents */

/*#region Adverts Landing Page */

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-success {
    color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-success);
}

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-info {
    color: var(--mud-palette-info-text);
    background-color: var(--mud-palette-info);
}

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.landing-layout-container .main-content .advert-signup .mud-button:hover,
.landing-layout-container .main-content .advert-signup .mud-button:focus-visible {
    transition: none;
}

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-success:hover,
.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-success:focus-visible {
    background-color: var(--mud-palette-success-darken);
    color: var(--mud-palette-success-text);
}

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-info:hover,
.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-info:focus-visible {
    background-color: var(--mud-palette-info-darken);
    color: var(--mud-palette-info-text);
}

.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-primary:hover,
.landing-layout-container .main-content .advert-signup .mud-button.mud-button-filled-primary:focus-visible {
    background-color: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
}

.advert-landing-page :is(h4,h6) {
    color: #13c332 !important;
}

.link-small {
    font-size: smaller !important;
}

.advert-landing-page .agreement .mud-typography-body1 {
    font-size: 0.7rem;
}

.top-banner :is(h4,h6) {
    min-width: max-content;
}

.advert-landing-page .search-result a.patent-title.mud-primary-text {
    color: var(--mud-palette-info) !important;
}

.feature-box {
    min-height: 2rem;
}

/*#endregion Adverts Landing Page */

/*#region MudBlazor v8 Workarounds */

/* Workaround for MudCheckBox Color not applied with ReadOnly (https://github.com/MudBlazor/MudBlazor/issues/9524) */
.checkbox-success .mud-icon-button {
    color: var(--mud-palette-success) !important;
}

.checkbox-error .mud-icon-button {
    color: var(--mud-palette-error) !important;
}

/*#endregion MudBlazor v8 Workarounds */


/*#region StepWizard */

/*
    The step wizard's own styling, shipped with the component rather than left to each page.

    MudBlazor centres tab labels. In a left-positioned strip of numbered steps that reads as
    ragged: "1. Your business" and "4. Where customers gather" start at different x positions,
    so the eye has no column to follow down. Left-aligning them gives the numbers a single edge.

    This lived in Marketly's site.css keyed to .marketing-plan-steps, so when the wizard was
    factored into SharedUI the alignment stayed behind and the next page to use it (Plans) came
    out centred. Keyed to the component's own class now, so every consumer gets it by default.
*/
.exa-step-wizard .mud-tab {
    justify-content: flex-start;
    text-align: left;
}

/*
    Hovering a step turns it green — the same green the ticks use, so "green" reads as one
    idea in this control: done, or about to be. Colour is set on the tab and inherited by its
    label; the icon is targeted explicitly because MudBlazor gives .mud-icon-root its own
    colour, which would otherwise win.
*/
.exa-step-wizard .mud-tab:hover {
    color: var(--mud-palette-success);
    background-color: var(--mud-palette-success-hover);
}

.exa-step-wizard .mud-tab:hover .mud-icon-root {
    color: var(--mud-palette-success);
}

/*
    A completed step's tick is green whether or not the row is hovered or active. The active
    tab carries MudBlazor's own colour, so this needs the extra specificity to hold.
*/
.exa-step-wizard .mud-tab.exa-step-done .mud-icon-root,
.exa-step-wizard .mud-tab.exa-step-done.mud-tab-active .mud-icon-root {
    color: var(--mud-palette-success);
}

/*#endregion StepWizard */

/* ------------------------------------------------------------------
   Environment banner — a full-width strip naming the environment.

   Rendered from each host's App.razor by Shared/EnvironmentBanner.razor,
   and only when EnvironmentBanner:Enabled is set. Production shows nothing.

   Lives here rather than in a host's own site.css because more than one
   product now has deployed UAT and DEV1 environments — ExaBusiness and
   ExaStrata — and the component itself is in SharedUI. A copy per host is
   the arrangement the .exa-step-wizard rules were moved out of Marketly to
   escape: the second product to adopt it renders the strip unstyled, which
   looks like the banner is simply switched off. That is the one failure
   this feature exists to prevent.

   The strip is position:fixed so it survives scrolling, which means the
   MudBlazor app bar and drawer — also fixed at top:0 — would sit behind
   it. The three offset rules below push them down by exactly the strip's
   height. That height comes from --env-banner-h, set on <body> from
   EnvironmentBanner:HeightPx, so changing the setting moves the strip and
   the app chrome together.

   pointer-events:none matters: the strip overlays the top of the app bar's
   region, and without it the banner would swallow clicks aimed at the
   controls beneath. The banner is decorative and must never intercept one.
   ------------------------------------------------------------------ */
.env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--env-banner-h, 28px);
    line-height: var(--env-banner-h, 28px);
    /* Above MudBlazor's app bar (1100) and drawer, below its modals. */
    z-index: 2100;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
}

body.has-env-banner .mud-appbar {
    top: var(--env-banner-h, 28px) !important;
}

body.has-env-banner .mud-drawer {
    top: var(--env-banner-h, 28px) !important;
    height: calc(100% - var(--env-banner-h, 28px)) !important;
}

/* margin, not padding: MudBlazor already sets padding-top here to clear the
   app bar, and overriding it would put the page body under the app bar. */
body.has-env-banner .mud-main-content {
    margin-top: var(--env-banner-h, 28px);
}