:root {
    --text-color: #243142;
    --link-color: #006298;
    --link-hover-color: #00385f;
    --link-bg-color: #edfafd;
    --active-element-color: #990000;
    --active-element-bg-color: #fff3f0;
    --header-logo-bg-color: transparent;
    --footer-bg-color: #990000;
    --footer-text-color: #fff;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.no-text-decoration {
    text-decoration: none;
}

.text-capitalize {
    text-transform: capitalize;
}

div.super-header {
    background-color: var(--active-element-color);
    color: white;
    letter-spacing: 1px;
}

.content-preview {
    border: 1px solid #75838f;
    border-radius: .25rem;
    height: 2.5rem;
    min-width: 2.5rem;
    max-width: 10rem;
    object-fit: contain;
    padding: 4px;
    background-image: linear-gradient(45deg, #ccc 26%, transparent 26%), linear-gradient(135deg, #ccc 26%, transparent 26%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px; /* Must be a square */
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px; /* Must be half of one side of the square */
}

.color-preview {
    height: 2.5rem;
    width: 4.5rem;
    border: 1px solid #75838f;
    border-radius: .25rem;
    background-image: linear-gradient(45deg, #ccc 26%, transparent 26%), linear-gradient(135deg, #ccc 26%, transparent 26%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px; /* Must be a square */
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px; /* Must be half of one side of the square */
}

.footer-content-left {
    justify-content: start !important;
}

.footer-content-center {
    justify-content: center !important;
}

.footer-content-right {
    justify-content: right !important;
}

@media screen and (min-width: 46.25em) {
    .right-footer-border {
        padding-right: 1rem;
        border-right: solid 1px var(--footer-text-color)
    }

    .left-footer-border {
        padding-left: 1rem;
        border-left: solid 1px var(--footer-text-color)
    }
}

rvt-icon.ts-14 {
    padding-bottom: 2px;
}

    rvt-icon.ts-14 > svg {
        transform: scale(.75);
    }

.rvt-switch[disabled] {
    background-color: #e2e7e9;
    border-color: #75838f;
    cursor: not-allowed;
    color: #545454;
}

.rvt-switch[aria-checked=true][disabled]::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23545454" viewBox="0 0 16 16"><path d="m14.914 4-9.47 9.47L1.09 8.393 2.608 7.09l2.948 3.44L13.5 2.585 14.914 4Z"></path></svg>');
}

.rvt-button.platform-button {
    justify-content: center;
}

div.platform-buttons > a:last-of-type {
    margin-right: 0 !important;
}

/* header-only side menu sections (e.g. the catalog's All Software link, which
   has no child links) render as a standalone label rather than a nav, and
   need explicit vertical space before the nav below them */
#section-nav .side-menu-header-link {
    margin-bottom: var(--rvt-spacing-md);
}

span.highlight-text {
    background-color: var(--link-bg-color);
    border-radius: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: 500;
    color: var(--link-hover-color);
}

.rvt-loader.gray-spinner {
    border-top-color: #75838f;
    border-right-color: #75838f;
    border-bottom-color: #75838f;
}

.standard-control-border-color {
    border-color: #75838f !important;
}

.standard-text-color {
    color: var(--text-color) !important;
}

a.rvt-button.disable-link-button, a.rvt-button.disable-link-button:hover {
    background-color: #f8f9fa;
    color: #4c5a69;
    border-color: #75838f;
    cursor: not-allowed;
    pointer-events: none;
    cursor: not-allowed;
}

h2.catalog-section-header {
    font-size: 1.25rem;
    padding-bottom: .75rem;
}

p.catalog-section-content, p.catalog-button {
    --flow-space: 1rem;
}

    p.catalog-button:nth-child(1 of p.catalog-button) {
        --flow-space: 1.5rem;
    }

p.extra-top-spacing:nth-child(1 of p.extra-top-spacing) {
    --flow-space: 2rem;
}

p.product-key-value-container {
    --flow-space: 1rem;
}

    p.product-key-value-container:nth-child(1 of p.product-key-value-container) {
        --flow-space: 1.5rem;
    }

div.product-key-field {
    height: 2.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #e2e7e9;
    border-color: #75838f;
    border: solid 1px;
    border-radius: 0.25rem;
}

div.product-key-value {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.product-key-assigned {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

th.expand, td.expand {
    width: 30%
}

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

table.dont-wrap td, table.dont-wrap th {
    text-wrap: nowrap;
}

/* Per-cell opt-out of dont-wrap for long, flexible values (revealed key values,
   emails, urls, user-entered names and labels) so they wrap instead of forcing
   the table wider than the page. overflow-wrap lets unbroken tokens like emails
   and urls break mid-value as a last resort. The min-width is a floor for the
   column when the table is squeezed: without it, "anywhere" reduces the column's
   minimum width to a single character and narrow screens crush the wrapped cells
   to confetti. At the floor the table stops shrinking, so the pager's horizontal
   scroll region takes over instead. */
table.dont-wrap td.allow-wrap, table.dont-wrap th.allow-wrap {
    text-wrap: wrap;
    overflow-wrap: anywhere;
    min-width: 10rem;
}

table.align-top td, table.align-top th {
    vertical-align: top;
}

/* Fieldsets refuse to shrink below their content's natural width by default
   (min-inline-size: min-content), which defeats any horizontal scroll container
   inside them, e.g. the pager's responsive table region on ListProductKeys. */
fieldset.allow-shrink {
    min-inline-size: 0;
}

/* RivetPagerFilter's search row (input group + Filter Options) neither wraps nor
   shrinks, so on narrow screens it overflows the container and breaks the page's
   right-edge alignment. Scoped override into the package's markup (the id and
   search-group class are RivetPagerFilter's own): let the row wrap and the search
   input shrink. Remove once RivetBlazor handles narrow widths natively. */
#pager-filter-container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.search-group {
    min-width: 0;
}

.search-group input {
    min-width: 0;
    width: 100%;
}

td.hide-overflow {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

textarea.extra-height {
    height: 14rem;
}

.rvt-link-hub__link.featured-title-link {
    padding-top: 0;
}

    .rvt-link-hub__link.featured-title-link:after {
        top: .25rem;
    }

.featured-title-thumbnail {
    height: 4rem;
    width: 4rem;
    margin-right: 1.25rem;
}

.featured-titles-link-hub {
    grid-gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

div.search-description p:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.url-entry:after {
    content: ",";
    padding-right: .5rem;
}

.url-entry:first-of-type:before {
    content: "(";
    padding-left: .5rem;
}

.url-entry:last-of-type:after {
    content: ")";
}

.limit-height {
    overflow: hidden;
    max-height: 7.5rem;
}

.fade-overflow {
    -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);
}

@media screen and (min-width: 67.5em) {
    .rvt-header-global__search.extra-wide {
        width: 25rem;
    }
}

button.signin-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

button.search-result {
    display: block;
    text-decoration: none;
    color: #243142;
    padding: .375rem .5rem;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

    button.search-result[aria-current]:not([aria-current=false]) {
        background-color: #006298 !important;
        color: #fff !important;
        text-decoration: none;
    }

    button.search-result:focus {
        background-color: #006298 !important;
        color: #fff !important;
        text-decoration: none;
    }

    button.search-result:hover {
        background-color: #edfafd;
        color: #006298;
        text-decoration: none;
    }

.rvt-header-global__search[aria-hidden="true"] {
    display: none;
}

/* override rivet blazor's position variable for search box */
.rvt-header-global__search.enable-outside-click-detection {
    position: absolute;
}

/* if top banners are visible, then reduce padding between banner element and layout content  */
.rvt-header-global:has(.top-banner-container) ~ .rvt-layout__wrapper .rvt-layout__content.reduce-top-padding-when-banners-present {
    padding-top: 1rem !important;
}

/* if top banners are visible, then reduce padding between banner element and sidebar content  */
.rvt-header-global:has(.top-banner-container) ~ .rvt-layout__wrapper .rvt-layout__sidebar.reduce-top-padding-when-banners-present {
    padding-top: 1rem !important;
}

.top-banner {
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (min-width: 46.25em) {
    .top-banner:last-of-type {
        margin-bottom: 1.5rem;
    }
}

.top-banner-container:first-of-type{
    padding-top: 1.5rem;
}

.top-banner-container > .rvt-alert {
    margin-bottom: 1.5rem;
}

.top-banner-container > .rvt-alert:last-of-type {
    margin-bottom: 0;
}

.sidenav_disabled {
    font-size: 0.875rem;
    color: var(--text-color);
    flex-grow: 1;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
    text-decoration: none;
    opacity: .75;
    cursor: not-allowed
}

/* Rivet sizes inline code at a flat 1rem (.rvt-code, .rvt-prose :where(code)), which is
   taller than the surrounding prose text and stretches the line height; size it to the
   text instead. The :where() in Rivet's selector carries no specificity, so this wins. */
.rvt-prose code {
    font-size: .875em;
}

code.has-icon {
    display: inline-flex;
    align-items: center;
}

    code.has-icon > rvt-icon {
        margin-right: .25rem;
        margin-left: .25rem;
        line-height: 1;
    }

        /* size the icon to the surrounding code text so it doesn't stretch the line height */
        code.has-icon > rvt-icon > svg {
            width: .875em;
            height: .875em;
            display: block;
        }

.appear-disabled-when-read-only:read-only {
    background-color: #e2e7e9;
    border-color: #75838f;
}

/* Field help text comes from RivetBlazor's Description component, which renders a
   standalone inline alert with no class hook of its own -- the message span's id
   suffix is the only stable selector.

   Rivet's inline alert is built for validation messages, so it leads with a
   decorative caution icon and sets line-height: 1 on the message. Neither suits
   always-visible help text: hide the icon (the background and left border already
   read as informational) and give the text room to wrap. Font size and padding stay
   at Rivet's defaults so help text stays subordinate to the field it describes.
   Remove once RivetBlazor styles Description as help text rather than an alert. */
.rvt-inline-alert:has(> .rvt-inline-alert__message[id$="-description-message"]) .rvt-inline-alert__icon {
    display: none;
}

.rvt-inline-alert__message[id$="-description-message"] {
    margin-left: 0;
    line-height: var(--rvt-line-height-base);
}

a {
    text-underline-offset: .25rem;
}

.rvt-button-group.tight > *:not(:last-child) {
    margin-right: .5rem;
}

.has-accessibility-issue {
    box-shadow: 0 0 15px 2px #ffaa00;
    animation: accessibility-issue-pulse 2s ease-in-out 2;
}

@keyframes accessibility-issue-pulse {
    0% {
        box-shadow: 0 0 15px 2px #ffaa00;
    }

    50% {
        box-shadow: 0 0 0 0 #ffaa00;
    }

    100% {
        box-shadow: 0 0 15px 2px #ffaa00;
    }
}

rvt-icon.smaller > svg {
    width: 14px;
    height: 14px;
}

.rvt-disclosure__toggle.smaller {
    padding-left: 1.25rem;
}

    .rvt-disclosure__toggle.smaller:before {
        width: .85rem;
        height: .85rem;
    }

.rvt-badge.smaller {
    border: none;
}

.accessibility-node-text {
    max-width: 500px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.no-bottom-margin-for-last-item:last-of-type {
    margin-bottom: 0 !important;
}