/*#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 Common Elements */
.tabs-container .mud-tab {
    text-transform: none;
}

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

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

/*.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: var(--mud-palette-grey-dark) !important;
}*/

/*#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: 36rem;
        height: 36rem;
    }

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

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

.brand-news {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/BrandNews.png');
    height: 15rem;
    width: 24rem;
}

.respond-to-news {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/RespondToNews.png');
    height: 9rem;
    width: 26rem;
}

.brand-statistics {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/BrandStatistics.png');
    height: 12.7rem;
    width: 12.7rem;
}

.chat-gpt {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/ChatGPT.png');
    height: 14.7rem;
    width: 22.2rem;
}

.webpage-statistics {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/WebpageStatistics.png');
    height: 11.5rem;
    width: 12rem;
}

.google-trends {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url('/images/Wizard/GoogleTrends.png');
    height: 13rem;
    width: 23rem;
}

/*#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 .home-section-top {
        background: rgb(2,0,36);
        background: linear-gradient(180deg, rgb(28 28 28) 0%, rgb(4 4 69) 35%, rgb(19 35 48) 100%);
        padding-top: 0px;
        padding-bottom: 7rem;
    }

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

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

    .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 .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: 12rem;
}

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

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

/*#endregion Home Page */

/*#region Breadcrumb */

/*
    MudBlazor v8: Fix breadcrumb layout after HTML structure change (ul->ol in nav).
    Wrapper ensures breadcrumbs participate in flex layout without taking full width.
*/
.bread-crumbs-wrapper {
    display: contents;
}

.bread-crumbs-wrapper nav {
    display: inline-flex;
}

ol.mud-breadcrumbs.document-bread-crumbs {
    display: flex;
    flex-wrap: nowrap;
    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 Backlog — add-child button */

/* Dim the add-child '+' button by default, brighten on row hover */
.backlog-add-child {
    opacity: 0.2;
    transition: opacity 0.15s ease;
}

.mud-table-row:hover .backlog-add-child {
    opacity: 0.7;
}

.backlog-add-child:hover {
    opacity: 1 !important;
}

/*#endregion Backlog — add-child button */

/*#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 Compact Sizing — global density overrides */

/* Root font-size reduction: MudBlazor uses rem, so this scales most elements */
:root {
    font-size: 15px;
}

/* Input fields — tighter padding */
.mud-input-control {
    margin-top: 0px !important;
}

/* Buttons — smaller padding and min-width */
.mud-button-root.mud-button:not(.social-login-button):not(.help-button) {
    padding: 5px 14px;
    min-width: unset;
}

.mud-icon-button.mud-button-root {
    padding: 7px;
}

/* DataGrid / Table — tighter cells */
.mud-table-dense .mud-table-cell {
    padding: 3px 10px !important;
}

.mud-table-dense .mud-table-head .mud-table-cell {
    padding: 5px 10px !important;
    white-space: nowrap;
}

.mud-table-row {
    height: auto !important;
}

.mud-table-pagination {
    padding: 3px 10px !important;
}

/* Tabs — shorter tab headers */
.mud-tab {
    min-height: 40px !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
}

.mud-tabs-header {
    min-height: 40px !important;
}

/* Chips — smaller */
.mud-chip {
    height: 26px !important;
    padding: 0 9px !important;
}

/* Expansion panels — compact headers */
.mud-expand-panel-header {
    padding: 7px 14px !important;
    min-height: 40px !important;
}

/* Dialogs — tighter padding */
.mud-dialog .mud-dialog-title {
    padding: 12px 18px !important;
}

.mud-dialog .mud-dialog-content {
    padding: 10px 18px !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 8px 18px !important;
}

/* AppBar — shorter */
.mud-appbar.mud-appbar-fixed-top {
    height: 52px;
    min-height: 52px;
}

.mud-main-content {
    padding-top: 52px !important;
}

/* Drawer header — tighter */
.mud-drawer-header {
    min-height: 52px !important;
    padding: 0 14px !important;
}

/* Nav items in drawer — tighter */
.mud-nav-item .mud-nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Nav group labels — tighter */
.mud-nav-group .mud-collapse-wrapper .mud-nav-link {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Alert — compact */
.mud-alert {
    padding: 5px 14px !important;
}

/* Toolbar / header spacing */
.mud-toolbar {
    padding: 5px 10px !important;
    min-height: 44px !important;
}

/*#endregion Compact Sizing — global density overrides */

/*#region Radzen HtmlEditor — dark theme overrides */

/* Override Radzen CSS variables on the editor scope */
.rz-html-editor {
    --rz-editor-button-background-color: transparent;
    --rz-editor-button-color: var(--mud-palette-text-primary);
    --rz-editor-button-selected-background-color: var(--mud-palette-primary);
    --rz-editor-button-selected-color: var(--mud-palette-primary-text);
    --rz-editor-button-disabled-color: var(--mud-palette-text-disabled);
    --rz-editor-separator-background-color: var(--mud-palette-lines-default);
    --rz-editor-toolbar-background-color: var(--mud-palette-surface);
    --rz-editor-border: 1px solid var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

/* Dark toolbar matching MudBlazor surface */
.rz-html-editor-toolbar {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Toolbar button backgrounds transparent, icons use MudBlazor text color */
.rz-html-editor-button {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-radius: var(--mud-default-borderradius);
}

.rz-html-editor-button.rz-selected {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* Toolbar icons */
.rz-html-editor-toolbar .rzi {
    color: var(--mud-palette-text-primary) !important;
}

/* Color picker buttons in toolbar */
.rz-html-editor-colorpicker,
.rz-html-editor-colorpicker .rz-colorpicker-trigger,
.rz-html-editor-colorpicker .rz-colorpicker {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-html-editor-colorpicker .rz-colorpicker:hover,
.rz-html-editor-colorpicker .rz-colorpicker-trigger:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* Dropdown items (font name, font size) */
.rz-html-editor .rz-dropdown {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.rz-html-editor-dropdown-items {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Light content area — emails are viewed on white backgrounds */
.rz-html-editor-content {
    background-color: #ffffff !important;
    color: #212121 !important;
}

/* Links inside editor content — blue underline, not white-on-white */
.rz-html-editor-content a {
    color: #1565c0 !important;
    text-decoration: underline !important;
}

/* Lists need padding so bullets/numbers aren't clipped off the left edge */
.rz-html-editor-content ol,
.rz-html-editor-content ul {
    padding-left: 1.5em !important;
    margin-left: 0.5em !important;
}

/* Source view (raw HTML) also light for consistency */
.rz-html-editor-source.rz-textarea {
    background-color: #ffffff !important;
    color: #212121 !important;
}

/* Radzen dialog (used by Link button) — z-index above MudBlazor dialogs + dark theme */
.rz-dialog-wrapper {
    z-index: 1500 !important;
}

.rz-dialog-mask {
    z-index: 1400 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

.rz-dialog-wrapper .rz-dialog {
    z-index: 1501 !important;
}

.rz-dialog {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-titlebar {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.rz-dialog-content .rz-textbox {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.rz-dialog-content label {
    color: var(--mud-palette-text-secondary) !important;
}

.rz-dialog .rz-button {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/*#endregion Radzen HtmlEditor — dark theme overrides */

/*#region Help System */

.help-chip {
    opacity: 0.3;
    transition: opacity 0.2s ease;
    cursor: pointer;
    min-height: 24px !important;
    height: 24px !important;
}

.help-chip:hover {
    opacity: 1;
}

.help-popover {
    z-index: 1300;
}

.help-popover-body {
    font-size: 0.875rem;
    line-height: 1.6;
}

.help-popover-body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.help-popover-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.help-popover-body p {
    margin-bottom: 0.5rem;
}

.help-popover-body ul,
.help-popover-body ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.help-popover-body li {
    margin-bottom: 0.15rem;
}

.help-popover-body code {
    background-color: var(--mud-palette-background-gray);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.help-popover-body img {
    max-width: 100%;
    border-radius: 4px;
    margin: 0.5rem 0;
}

/*#endregion Help System */

/*#region Marketing */

.brand-switcher div.mud-input-slot {
    min-height: 32px;
}

/*#endregion Marketing */