/*#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 Quill legacy content shim — read this before deleting any ql-* rule */
/*
    Quill stored alignment, indentation and sizing as CLASSES (ql-align-center,
    ql-indent-3, ql-size-large) rather than as inline styles. RadzenHtmlEditor, which
    replaced it, writes standard HTML and knows nothing about those classes — so every
    R&D document authored before the switch would have rendered as flat, left-aligned,
    unindented text, and nobody would have seen an error. The content was not lost; it
    was being displayed wrongly, which is worse because it looks like the content.

    These rules are what make that content keep rendering as it was authored. They are
    DISPLAY ONLY: nothing writes ql-* classes any more, so this set can only shrink,
    and it shrinks when a document is re-saved through the new editor rather than on a
    schedule.

    Deliberately not a migration. Rewriting ql-* to inline styles would mean a sweep
    across every product's database (ProgramBase runs migrations in all of them), to fix
    something a stylesheet fixes with no write at all. If that sweep is ever wanted, this
    block is the specification for it.

    Scoped to .rich-text-editor and .rich-text-content so it cannot leak into unrelated
    markup that happens to carry a similar class.
*/
.rich-text-editor .ql-align-center,
.rich-text-content .ql-align-center { text-align: center; }

.rich-text-editor .ql-align-right,
.rich-text-content .ql-align-right { text-align: right; }

.rich-text-editor .ql-align-justify,
.rich-text-content .ql-align-justify { text-align: justify; }

/* Quill indents in 3em steps, 1..9. Written out rather than generated: there is no
   loop in plain CSS, and a partial set would silently flatten deep indentation. */
.rich-text-editor .ql-indent-1,  .rich-text-content .ql-indent-1  { padding-left: 3em; }
.rich-text-editor .ql-indent-2,  .rich-text-content .ql-indent-2  { padding-left: 6em; }
.rich-text-editor .ql-indent-3,  .rich-text-content .ql-indent-3  { padding-left: 9em; }
.rich-text-editor .ql-indent-4,  .rich-text-content .ql-indent-4  { padding-left: 12em; }
.rich-text-editor .ql-indent-5,  .rich-text-content .ql-indent-5  { padding-left: 15em; }
.rich-text-editor .ql-indent-6,  .rich-text-content .ql-indent-6  { padding-left: 18em; }
.rich-text-editor .ql-indent-7,  .rich-text-content .ql-indent-7  { padding-left: 21em; }
.rich-text-editor .ql-indent-8,  .rich-text-content .ql-indent-8  { padding-left: 24em; }
.rich-text-editor .ql-indent-9,  .rich-text-content .ql-indent-9  { padding-left: 27em; }

/* Right-to-left paragraphs. Quill pairs this with an alignment class, so both apply. */
.rich-text-editor .ql-direction-rtl,
.rich-text-content .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* Quill's four named sizes. 'normal' has no class, so there is nothing to shim for it. */
.rich-text-editor .ql-size-small, .rich-text-content .ql-size-small { font-size: 0.75em; }
.rich-text-editor .ql-size-large, .rich-text-content .ql-size-large { font-size: 1.5em; }
.rich-text-editor .ql-size-huge,  .rich-text-content .ql-size-huge  { font-size: 2.5em; }

/* Code blocks: Quill marks them .ql-syntax and relies on its own stylesheet for the
   monospace and the panel. Without this they render as ordinary prose, which loses the
   distinction the author was making. */
.rich-text-editor .ql-syntax,
.rich-text-content .ql-syntax {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-caption-family, monospace);
    white-space: pre-wrap;
    border-radius: var(--mud-default-borderradius);
    padding: 0.75em 1em;
    overflow-x: auto;
}

/*
    Embedded images MUST keep rendering. Quill stored a pasted screenshot as
    <img src="data:image/png;base64,...">, at whatever pixel size it was pasted, with no
    class and no inline width — Quill's own stylesheet constrained it. Unconstrained, a
    1600px screenshot inside a 700px field overflows the column and pushes the page wide.

    So this is not cosmetic: without it, existing R&D documents containing screenshots
    display broken. The data URI itself survives untouched — nothing on the RAND path
    sanitises it (SupportHtmlSanitiser covers only the Support and Projects surfaces).
*/
.rich-text-editor img,
.rich-text-content img {
    max-width: 100%;
    height: auto;
}
/*#endregion*/

/*#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);
}

/*#region Rich text editor placeholder */
/*
    RadzenHtmlEditor has no Placeholder parameter, and RichTextContainer passes one on 56 R&D
    pages, so dropping it would have quietly blanked a prompt everywhere. Rendered from the
    wrapper's data-placeholder attribute instead.

    :empty alone does not work: a contenteditable that has been focused and cleared contains a
    <br>, so it is not empty by the CSS definition. The :has() clause covers that case, which
    is the one a user actually produces by selecting all and deleting.
*/
/*
    Set from the wrapper as a custom property, NOT read with attr(). attr() resolves only
    against the element the pseudo-element belongs to, and the attribute is on the wrapper
    while ::before is on Radzen's inner content div - so attr(data-placeholder) here returns
    nothing and the placeholder is silently blank. Custom properties inherit; attributes do not.
*/
.rich-text-editor .rz-html-editor-content:empty::before,
.rich-text-editor .rz-html-editor-content:has(> br:only-child)::before {
    content: var(--rte-placeholder, "");
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    display: block;
}
/*#endregion*/

/*#region Rich text editor legibility — do not rely on Radzen's base theme for this */
/*
    The editing surface states BOTH its colours, together, in our own stylesheet.

    Reported from ExaRDTI on 12 Oct 2026: white text on a white editor, while ExaBusiness was
    fine. The reason the two differed is that legibility was coming entirely from
    _content/Radzen.Blazor/css/default-base.css, which ExaBusiness linked and ExaRDTI did not.
    Measured in ExaBusiness: rgb(33,33,33) on rgb(255,255,255), both from that file. Without it
    the surface has no background of its own and no colour, so it takes the page's background and
    inherits MudBlazor's text colour - and in dark mode that is near-white text on whatever sits
    behind it. The missing link is fixed in every app's App.razor, but a stylesheet that has to be
    present in four places for text to be readable is a failure waiting to recur.

    So these two values are stated here, as a pair, deliberately matching what Radzen produces
    today - so this changes nothing visually in ExaBusiness - and they are stated TOGETHER because
    setting one alone is how white-on-white happens. If the editor is ever restyled, move both or
    neither.

    Not taken from the MudBlazor palette (--mud-palette-surface / --mud-palette-text-primary),
    which would make the editor follow the app's theme and is arguably nicer: that is a visual
    change nobody asked for, and in dark mode it would repaint an editor that reads correctly
    today. Worth doing deliberately, not as part of a legibility fix.
*/
.rich-text-editor .rz-html-editor-content {
    background-color: #ffffff;
    color: #212121;
}

/* The toolbar sits on the same surface and takes its colours from the same file. */
.rich-text-editor .rz-html-editor-toolbar {
    background-color: #f5f5f5;
    color: #212121;
}
/*#endregion*/