/*
Basic styles for the whole application, see @import statements for specific application parts and shared variables
 */

@import "colors.css?version=2026.04.16";
@import "buttons.css?version=2026.03.11";
@import "checkboxes.css?version=2026.03.11";
@import "breakpoints.css?version=2024.10.31";
@import "datatables.css?version=2026.08.20";
@import "loginform.css?version=2026.03.11";
@import "links.css";

@import "sqc.css?version=2026.03.11";

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url('../font/Roboto/Roboto-Regular.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-display: swap;
    font-family: LabGrotesque;
    font-style: normal;
    font-weight: 400;
    src: url('../font/LabGrotesque/LabGrotesqueRegularWeb/LabGrotesque-Regular.woff2') format("woff2"), url('../font/LabGrotesque/LabGrotesqueRegularWeb/LabGrotesque-Regular.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: LabGrotesque;
    font-style: italic;
    font-weight: 400;
    src: url('../font/LabGrotesque/LabGrotesqueItalicWeb/LabGrotesque-Italic.woff2') format("woff2"), url('../font/LabGrotesque/LabGrotesqueItalicWeb/LabGrotesque-Italic.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: LabGrotesque;
    font-style: normal;
    font-weight: 600;
    src: url('../font/LabGrotesque/LabGrotesqueMediumWeb/LabGrotesque-Medium.woff2') format("woff2"), url('../font/LabGrotesque/LabGrotesqueMediumWeb/LabGrotesque-Medium.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: LabGrotesque;
    font-style: normal;
    font-weight: 700;
    src: url('../font/LabGrotesque/LabGrotesqueBlackWeb/LabGrotesque-Black.woff2') format("woff2"), url('../font/LabGrotesque/LabGrotesqueBlackWeb/LabGrotesque-Black.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: Ysoft;
    font-style: normal;
    font-weight: 400;
    src: url('../font/YSoft/YSoft-Regular.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: Ysoft;
    font-style: normal;
    font-weight: 700;
    src: url('../font/YSoft/YSoft-Bold.woff') format("woff");
}

:root {
    --body-color: var(--theme-default-text-default);
    --max-form-width: 60rem;
    /* Required inputs have an :after pseudo element with a '*' text so to not make that required star overflow to a new line, we must make a space for it. */
    --full-width-input: calc(100% - 1rem);
    --default-body-font-family: LabGrotesque, Roboto, Arial, Helvetica;
    /* Shared by the top bar (right column) and the left-menu header so their bottom edges align.
       5rem is the portal's `md:h-20`, so the two apps' headers are the same height. */
    --top-bar-height: 5rem;
    color-scheme: light;
}

html, body {
    font-size: 16px;
    font-family: var(--default-body-font-family), sans-serif;
    height: 100%;
    width: 100%;
    margin: 0;
    font-weight: 400;
    background-color: var(--surface-page);
    color: var(--theme-default-text-default);
}

h1 {
    font-family: Ysoft, Roboto, Arial, Helvetica, sans-serif;
    font-size: 2.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-default-text-headings);
}

h2 {
    font-family: Ysoft, Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-default-text-headings-sub);
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-default-text-headings-sub);
}

hr {
    border: none;
    height: 2px;
    background-color: var(--border-lighter);
}

input[type="file"] {
    width: var(--full-width-input);
}

.eop-link {
    color: var(--body-color) !important;
}

.eop-link:hover {
    color: var(--nav-text-accent) !important;
}

.eop-detail-view .k-button span:hover {
    color: inherit;
}

.eop-form-overview-customer-filter > .eop-search-text-field > .search-input {
    width: 26.25rem;
}

.eop-dropdown {
    max-width: 200px !important;
    margin-left: 10px;
}

.eop-relative-position {
    position: relative;
}

.eop-align-left {
    text-align: left;
}

.eop-display-none {
    display: none;
}

.eop-full-width {
    width: 100%;
}

.eop-half-width {
    width: 50%;
}

.k-notification-wrap {
    padding: 0.5rem;
    white-space: normal;
    padding-left: 2rem
}

.k-textbox {
    width: 100%;
    max-width: var(--full-width-input);
    border-color: var(--border-default) !important;
    padding: 0.65rem 0.8rem;
}

.k-state-selected,
.k-state-selected .k-state-focused,
.k-in.k-state-selected.k-state-focused {
    background-color: var(--nav-bg-active) !important;
    color: var(--nav-text-highlight) !important;
    box-shadow: none
}

.k-state-hover,
.k-state-hover .k-state-focused,
.k-in .k-state-hover,
.k-in.k-state-focused {
    background-color: var(--nav-bg-hover) !important;
    color: var(--nav-text-highlight) !important;
    box-shadow: none
}

.k-list > .k-state-hover {
    background-color: var(--surface-secondary) !important;
    color: var(--text-on-surface) !important;
    box-shadow: none
}

.k-list > .k-state-selected {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-on-surface) !important;
    box-shadow: none
}

.k-pager-numbers .k-link:hover {
    background-color: var(--theme-default-pager-background-hover) !important;
    color: var(--theme-default-pager-text) !important;
    box-shadow: none;
    border-top-color: var(--theme-default-pager-border-top) !important;
}

.k-pager-numbers .k-state-selected {
    background-color: var(--theme-default-pager-background-selected) !important;
    color: var(--theme-default-pager-text) !important;
    box-shadow: none;
    border-top-color: var(--theme-default-pager-border-top) !important;
}

/*k-link*/

.k-combobox .k-input {
	background-color: transparent;
}

.k-dropdown-wrap {
    background-color: var(--surface-primary) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    min-height: 2.6rem;
}

.k-dropdown {
    background-color: var(--surface-primary);
}

.k-notification-wrap {
    font-size: 11px;
    background-color: var(--surface-primary);
}

.k-i-error {
    display: none;
}

.k-i-info {
    display: none;
}

.k-i-warning {
    display: none;
}

.k-i-exception {
    display: none;
}

.k-i-success {
    display: none;
}

.eop-inline-button {
    margin-left: 2rem;
}

span.k-select {
    padding-top: 0.75rem;
}

.k-i-seek-w,
.k-i-arrow-w,
.k-i-seek-e,
.k-i-arrow-e {
    font-size: 1.8rem !important;
    padding-top: 0.6rem;
    color: var(--text-on-surface);
}

/*
 * Login auto fill color
 */

/* Chrome, no yellow color */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--surface-primary) inset;
}

/* WebKit, Blink, Edge */
::-webkit-input-placeholder {
    color: var(--text-disabled);
}

/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: var(--text-disabled);
}

/*
 * EOP form contents
 */

.eop-form-container {
    margin-right: auto;
    padding-bottom: 2rem;
    max-width: var(--max-form-width);
    color: var(--body-color);
    padding-top: 1rem;
    padding-left: 2rem;
}

.eop-form-below-info {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
}

.eop-form-row {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: table;
}

.eop-form-row--width-auto {
    width: auto;
}

.eop-form-row-small-padding {
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    display: table;
}

.eop-form-row-info {
    padding-bottom: 1.0rem;
    padding-left: 16rem;
    display: table;
    font-size: 0.887rem;
    color: var(--theme-default-text-description);
    text-align: justify;
}

.eop-form-row-description {
    font-size: 0.887rem;
    color: var(--theme-default-text-description);
    text-align: justify;
}

.eop-form-row-description .eop-form-col-data {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eop-form-row-description .eop-form-col-data p {
    margin: 0;
}

.eop-form-center-align {
    display: flex;
    align-items: center;
}

.eop-form-header {
    padding-top: 0.0rem;
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-default-text-headings-sub);
}

.eop-form-subheader, .eop-form-subheader-prominent {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-default-text-headings-sub);
    float: left;
}

.eop-form-subheader-prominent {
    font-weight: 600;
    padding-top: 1.5rem;
}

.eop-form-section-spacing {
    padding-top: 4rem;
}

.eop-content-description-title {
    font-size: 1rem;
    color: var(--theme-default-text-description);
    padding-bottom: 2rem;
}

.eop-form-col {
    display: table-cell;
    padding-left: 16px;
    padding-right: 8px;
    vertical-align: middle;
}

.eop-form-col-title {
    width: 15rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    font-weight: 600;
    color: var(--theme-default-text-label);
    padding-right: 1rem;
}

.eop-form-col-title.extra-width {
    width: 16rem;
    padding-right: 0;
}

.eop-form-col-title-top {
    width: 15rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: top;
    font-weight: 600;
    padding-right: 1rem;
}

.eop-form-col-title-normal-noleftpadding {
    width: 15rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    padding-right: 2rem;
}

.eop-form-col-title-wider {
    width: 18rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    font-weight: 600;
    padding-right: 1rem;
}

.eop-form-col-title-wide {
    width: 25rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    font-weight: 600;
    padding-right: 1rem;
}

.eop-form-col-title-normal {
    width: 15rem;
    min-width: 15rem;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    padding-right: 1rem;
    padding-left: 2rem;
}

.eop-form-col-data {
    display: table-cell;
    vertical-align: middle;
    text-align: justify;
}
.light-border .eop-form-col-data {
    border-top: 1px solid var(--border-default);
}

.eop-policy-view .eop-form-col-data {
    width: 1rem;
}

.eop-policy-view .eop-input-login {
    width: 100%;
}

.eop-form-col-data-table{
    border-spacing: 0;
    width: 100%;
}

.eop-form-col-data-table > tbody > tr > td:first-child {
    padding-left: 0;
}

.eop-form-col-data-table .data-header {
    text-align: left;
    width: 120px
}

.eop-form-col-data-table .data-cell {
    display: inline-block;
    overflow: auto;
    width: 120px
}

.eop-form-col-data-table .index-column {
    width: 20px;
}

.eop-form-col-data-table .overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eop-form-col-data ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eop-select-with-button {
    display: inline-block;
    float: left;
    max-width: 20rem;
    white-space: nowrap;
}

.eop-form-col-data-short {
    width: 12.5rem;
}

.eop-form-col-title-long {
    width: var(--max-form-width);
}

.eop-form-col-dim {
    float: left;
    line-height: 30px;
    padding-left: 1rem;
}

.eop-form-row-buttons {
    float: right;
    display: inline-block;
    position: relative;
    left: 1.5rem;
}

.eop-form-col-text {
    white-space: normal !important;
    max-height: 5rem;
    overflow-x: auto;
}

.eop-form-col-container {
    float: left;
    width: var(--full-width-input);
}

.eop-form-row::after {
    content: "";
    display: table;
    clear: both;
}

.eop-form-row .eop-form-authorized {
    display: flex;
    align-items: center;
    width: fit-content;
}

.eop-form-row .checkbox-toggle-width {
    width: 50px;
    padding-right: 5px;
}

.eop-form-editable-by-user {
    margin-top: 5px;
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

.eop-footer-policies {
    display: flex;
    padding-top: 3rem;
    justify-content: space-evenly;
}

.eop-form-feedback-border {
    padding: 0 !important;
    width: 100%;
    display: inline-block;
}

.eop-form-feedback-warning {
    --warning-icon-offset: 1.8em;
    padding-left: var(--warning-icon-offset);
    color: var(--theme-default-text-description);
}

.eop-form-feedback-warning::before {
    content: ' ';
    background: url('img/eop_icon_alert_warning.svg') center no-repeat;
    display: block;
    width: 1em;
    height: 1em;
    margin-bottom: -1em;
    margin-left: calc(-1 * var(--warning-icon-offset));
}

.eop-form-feedback-warning--animated {
    margin-top: 0.4em;
    animation: warningReveal 0.3s ease-out;
    overflow: hidden;
}

@keyframes warningReveal {
    0% {
        max-height: 0;
        opacity: 0;
    }
    100% {
        max-height: 5em;
        opacity: 1;
    }
}

.eop-form-link {
    width: 100%;
    max-width: var(--full-width-input);
    padding: 0.5rem 0.2rem;
}

/*
 * EOP form list
 */
.eop-form-list-container {
    border: 1px solid var(--border-light);
    background-color: var(--surface-page);
    color: var(--theme-default-text-dark);
    width: 44rem;
    margin: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
}

.eop-form-list-title {
    font-weight: bold;
    color: var(--theme-default-text-dark);

}

.eop-form-input-with-unit {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: var(--full-width-input);
}

.eop-form-number-input-with-unit {
    position: relative;
    display: inline-block;
    max-width: var(--full-width-input);
}

.eop-form-input-with-unit input,
.eop-form-number-input-with-unit input {
    padding-right: 3rem;
    max-width: 100% !important;
}

.eop-form-input-with-unit .unit,
.eop-form-number-input-with-unit .number-unit {
    position: absolute;
    top: 0;
    width: 2em;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.unit {
    right: .5em;
}

.number-unit {
    right: 2rem;
}

.eop-form-input-with-unit:has(input[disabled]) .unit,
.eop-form-number-input-with-unit:has(input[disabled]) .unit {
    color: var(--text-disabled);
}

/*
 * EOP table
 */

.eop-table {
    display: table;
    width: 100%;
}

.eop-table-row {
    font-size: 0.887rem;
    display: table-row;
}

.eop-table-hdr {
    display: table-cell;
    padding-bottom: 0.4rem;
    font-style: italic;
    white-space: nowrap;
}

.eop-table-cell {
    display: table-cell;
    border-bottom: 1px solid var(--border-lighter);
}

.eop-table-body {
    display: table-row-group;
}

/*
 * EOP UI
 */
#layout {
    height: 100%;
    overflow: hidden;
}

.eop-form-button-banner {
    height: 0;
    padding-right: 2rem;
    display: flex;
    justify-content: flex-end;
}

.eop-form-button-banner input {
    margin-top: 1rem;
    display: inline;
}

.eop-date-criteria-form .eop-apply-button {
    display: inline;
}

.eop-icon-remove {
    background-image: url('img/eop_icon_remove.svg');
    width: 22px;
    height: 22px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.eop-ui {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 240px auto;
    /* Last row must be 1fr, not auto: the left nav spans all three rows, and an item
       spanning only intrinsic rows would distribute its content height into the
       max-content notification row, pushing the detail view down by the menu's height.
       A flexible track absorbs the spanning item's contribution instead. */
    grid-template-rows: var(--top-bar-height) max-content 1fr;
    grid-template-areas:
            "left-nav-menu top-navigation"
            "left-nav-menu notification"
            "left-nav-menu detail-view";
}

.eop-ui .pane-content {
    padding: 1rem;
}

/* Top nav */

.eop-top-nav {
    width: 100%;
    /* Fixed, not 100%: the class-less <div wicket:id="topNavPanel"> tag sits between
       .pane-content and the inner bar, so a percentage chain breaks there (auto-height
       parent) and the bar would collapse to its tallest item. */
    height: var(--top-bar-height);
    background-color: var(--surface-primary);
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    /* Items (logo, search, user menu) are shorter than the bar; centre them instead of
       relying on per-item vertical padding, which overflowed the fixed-height bar. */
    align-items: center;
    /* The portal's `gap-4` on the header's right cluster. Spacing lives here rather than on each
       item's padding, so adding a bar item cannot get its spacing wrong. */
    gap: 1rem;
    grid-area: top-navigation;
    position: relative;
    z-index: 1000;
}

/*
 * The selector above matches twice - the page wrapper (#top-nav) and the panel root nested inside it - so
 * anchoring the shadow here keeps it from being painted twice along the same edge.
 */
#top-nav.eop-top-nav {
    box-shadow: var(--shadow-header);
}

.eop-top-nav .eop-logo-container {
    max-width: 440px;
    height: 50px;
    padding: 5px 5px 5px 10px;
    text-align: left;
    order: 1;
    margin-right: auto;
    /* Centre the image inside the 50px box even when the box shrinks. */
    display: flex;
    align-items: center;
}

/*
 * The logo gives way before the bar does. It used to be `flex: 0 0 auto` like every other bar item, so a
 * wide account logo held its full width and pushed the row into the 1080px scroll instead; now it shrinks
 * with the row, as the search does.
 *
 * The floor keeps it legible rather than letting it compress away - past this the bar scrolls, which is the
 * old behaviour, just reached much later. Note it is a floor on the box, not on the artwork: a logo whose
 * natural width is already under 6rem gets a box wider than itself, shifting the links right by the
 * difference. Harmless, and the alternative would mean upscaling small logos.
 */
.pane-content .eop-top-nav>.eop-logo-container {
    flex: 0 1 auto;
    min-width: 6rem;
}

.eop-logo {
    height: 50px;
    width: auto;
}

/*
 * Lets the artwork follow the shrinking box. `max-width` is what actually narrows it; `object-fit` is what
 * keeps it in proportion while it does - without it the fixed 50px height would squash the glyph
 * horizontally. Scoped to the bar: `.eop-logo` is also the login page's and the account settings preview's
 * image, where the box is not elastic.
 */
.eop-top-nav .eop-logo {
    max-width: 100%;
    object-fit: contain;
}

.eop-advanced-options-container {
    padding-top: 2.5rem;
}

.eop-advanced-options-container .eop-form-row .eop-form-col-title {
    vertical-align: top;
}

.eop-advanced-options-container .eop-form-row .eop-form-col-data .k-widget .k-dropzone {
    padding: 0 0 0.8rem 0;
}

.eop-logo-container {
    padding-right: 5px;
}

.eop-advanced-options-image-preview-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 10px;
}

.eop-button-icon {
    background-repeat: no-repeat;
    min-width: 3rem !important;
    min-height: 3rem !important;
    background-size: 45% 45%;
}

.eop-button-icon--remove {
    background-image: url('img/eop_icon_remove_primary.svg');
}

/*
 * The portal's `px-4`. Logical properties because that is what Tailwind's `px-*` compiles to, so this
 * block and the portal's stay comparable line for line.
 *
 * Only the horizontal half of the portal's `py-3 px-4` transplants. The portal's row is `md:h-20` with
 * `py-3` inside it under border-box; here the bar is pinned to --top-bar-height (shared with the
 * left-menu header so their bottom edges align) and the inner bar takes that height absolutely, so
 * padding-block would push it past the bar instead of shaping it. The 5rem already is the row's
 * `py-3` + content.
 *
 * padding-block is pinned to 0 rather than simply left unset: `.eop-ui .pane-content` above sets the
 * `padding: 1rem` shorthand at the same specificity, so omitting the vertical axis here lets that 1rem
 * back in and overflows the bar.
 */
.eop-top-nav .pane-content {
    padding-block: 0;
    padding-inline: 1rem;
    width: 100%;
    height: 100%;
}

/* The portal's `sm:px-6 lg:px-8`. Min-width queries, so they read in the same direction as the Tailwind classes. */
@media screen and (min-width: 640px) {
    .eop-top-nav .pane-content {
        padding-inline: 1.5rem;
    }
}

@media screen and (min-width: 1024px) {
    .eop-top-nav .pane-content {
        padding-inline: 2rem;
    }
}

.eop-top-nav-links .links-popup {
    z-index: 9999;
    position: fixed;
    /* Fallback only — hcp_showActions() always sets `left` inline from the Add
       button's document offset. 640px = the old 400px fallback shifted by the
       240px left-nav column the top bar no longer spans. */
    left: 640px;
    top: 55px;
    background-color: var(--surface-primary);
    border-right: 3px solid var(--border-lighter);
    display: none;
}

.eop-top-nav-links .links-popup a {
    width: 100%;
    justify-content: left;
    gap: 0.5rem;
    background-color: var(--surface-primary);
    border: 1px solid var(--border-lighter) !important;
}

/* The elevation panel sits in the account-header grid (.eop-left-nav-showtree, columns "1fr 0fr 0fr").
   Span all columns so it is a full-width row directly under the account name, not squeezed into the
   collapsed 0fr column beside it. */
.eop-left-nav-support-slot {
    grid-column: 1 / -1;
}

/* Left-nav "Support mode" elevation row, sharing the account-header band's background: the default
   here, the per-theme shade via the theme groups that also paint .eop-left-nav-showtree-text. The
   label takes the row and pushes the Activate/Deactivate action to the right; the countdown wraps
   to its own line below so its ticking text never reflows the action. */
.eop-left-nav-support {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    font-size: 90%;
    background-color: var(--nav-bg-secondary);
    color: var(--nav-text-highlight);
    /* The account header's own border-bottom is the divider above this row; the one below matches
       it, so all separators in the header band look the same. */
    border-bottom: 1px solid var(--surface-page);
}

.eop-left-nav-support .eop-left-nav-support-text {
    display: flex;
    flex-direction: column;
}

.eop-left-nav-support .eop-left-nav-support-action {
    padding: 0;
    text-align: right;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.eop-left-nav-support .eop-left-nav-support-countdown {
    font-size: 90%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.eop-top-user-info {
    max-width: 48ch;
}

.eop-top-user-company {
    font-size: 90%;
    max-height: 2.4em;
    line-height: 1.2em; /* limits company name to 2 lines only */
    overflow: hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.eop-top-user-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.eop-warning-triangle {
    background-image: url('img/warning_triangle.svg');
}

/*
 * Header search - the sibling SQC portal's customer fulltext search (its `CustomSearchInput`: a PrimeVue
 * `IconField` around an `InputText`, with the `prime:search` glyph drawn inside the field's leading padding).
 *
 * Every metric below is what the portal's input resolves to under its Aura preset's `form.field` tokens:
 * `padding.y`/`padding.x` 0.5rem/0.75rem, `border.radius.md` 6px, a 1px border, `form.field.shadow`, and a
 * 0.2s transition on exactly the properties the hover and focus states move. The portal sizes the wrapper
 * `h-10.5`, hence the 2.625rem height.
 */

/*
 * Elastic width, which is where this departs from the portal: there the search is `flex-none w-96` in a
 * page filter bar, whereas here it shares a fixed-height bar with the logo, the links and the user menu.
 * So it takes the row's free space instead of a fixed width - up to 24rem, the portal's `w-96`, so it never
 * outgrows what the portal shows - and shrinks down to `min-width` before the bar starts scrolling at
 * 1080px. That replaces the old fixed 12rem/6rem pair, which stayed narrow however much room the row had.
 *
 * The logo's `margin-right: auto` still pins it to the row's left edge: flexbox resolves flex-grow before
 * it hands leftover space to auto margins, so the search grows to its cap first and the margin takes only
 * what is left over.
 */
.pane-content .eop-top-nav>.eop-top-search {
    /* A definite basis, not `auto`: `auto` would resolve against the <input>'s intrinsic size (its default
       `size` attribute), which differs between browsers. 8rem is also the floor - below it the bar scrolls
       rather than the field collapsing, which is the 1080px behaviour below. */
    flex: 1 1 8rem;
    min-width: 8rem;
    max-width: 24rem;
}

/*
 * The portal's `.p-iconfield`. Anchored on the <form> rather than on `.eop-search` because the <form> is the
 * element that actually holds the icon and the input, so it is the one the icon can be positioned against.
 */
.eop-top-search .eop-search,
.eop-top-search .eop-search form {
    position: relative;
    display: block;
    height: 2.625rem;
}

/*
 * The portal's `.p-inputtext`, plus the `w-full h-full` its search input carries - `w-full` being what makes
 * the field follow the elastic width above.
 *
 * The leading inset is the portal's `calc((form.field.padding.x * 2) + icon.size)`. That resolves against
 * the 1rem `icon.size` token while the glyph is really 1.25rem (see below), so it clears the glyph by
 * 0.5rem rather than the 0.75rem the portal's own arithmetic suggests. Kept as the portal computes it.
 */
.eop-top-search input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* The portal's `.p-inputtext` inherits its family; a bare <input> would otherwise fall back to the
       UA default rather than the app's body font, as this field used to. */
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-on-surface);
    background: var(--input-bg);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    box-shadow: var(--shadow-input);
    padding-block: 0.5rem;
    padding-inline: 2.5rem 0.75rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* The app's element-level placeholder rules further up use --text-disabled; the portal's
   `form.field.placeholderColor` is a step darker than that, which --text-muted matches. */
.eop-top-search input::placeholder {
    color: var(--text-muted);
}

.eop-top-search input:hover {
    border-color: var(--border-input-hover);
}

/* Aura's form-field focus ring is `none`, so focus is the border colour alone - and it replaces the resting
   shadow rather than adding a ring on top of it. */
.eop-top-search input:focus {
    border-color: var(--theme-default-primary);
    box-shadow: none;
    outline: none;
}

/*
 * The portal's `.p-inputicon`: inert decoration inside the field's leading padding, at
 * `inset-inline-start: form.field.padding.x`, taking its colour from `form.field.iconColor`. Not a button -
 * the search runs on Enter, as it does in the portal.
 *
 * `font-size` is the portal's app-wide `icon.size: '20'`, which every `<Icon>` there carries as an inline
 * `font-size: 20px` over the `1em` box below. Centring is `translateY`, not the portal's
 * `margin-top: calc(-1 * (icon.size / 2))`: that resolves against the 1rem `icon.size` token, so on the
 * 1.25rem glyph it actually sits 2px low.
 *
 * The mask draws the glyph out of `currentColor` instead of the fill baked into the file, which is what
 * keeps it right in both colour schemes with no dark-mode filter.
 */
.eop-top-search-icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    font-size: 1.25rem;
    width: 1em;
    height: 1em;
    color: var(--input-icon);
    /* The input is painted after the glyph in document order, so without this the field's background
       would cover it. Matches the portal's `.p-inputicon` z-index. */
    z-index: 1;
    background-color: currentColor;
    -webkit-mask-image: url('img/prime/prime-search.svg');
    mask-image: url('img/prime/prime-search.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ── New header user menu ──────────────────────────────── */
.eop-user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.eop-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--theme-default-text-dark);
    /* <button> doesn't inherit font metrics by default — match the surrounding nav (and the legacy header). */
    font: inherit;
    white-space: nowrap;
}

.eop-user-menu-trigger:hover {
    background-color: var(--surface-secondary);
}

/* The hover surface (--surface-secondary) is teal in dark mode, where the teal name
   would vanish; drop to the on-hover text colour, as the menu items already do. */
.eop-user-menu-trigger:hover .eop-top-user-name {
    color: var(--theme-default-text-dark);
}

/* Reuse the legacy user-part text styles (.eop-top-user-name / .eop-top-user-company);
   just stack them in a column here. */
.eop-user-menu-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 12rem;
}

/* Truncate long names/companies with an ellipsis (full value shown via title tooltip). */
.eop-user-menu-user-info > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1300px) {
    .eop-user-menu-user-info {
        max-width: 8rem;
    }
}

/* The legacy name was a link (teal); mirror that here (it's a plain label now). */
.eop-user-menu .eop-top-user-name {
    color: var(--theme-default-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

/* One truncated line, unlike the legacy two-line clamp, so the pair fits the bar's height as it does in the portal. */
.eop-user-menu .eop-top-user-company {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    max-height: none;
    color: var(--text-muted);
    white-space: nowrap;
}

/*
 * The portal's icon technique: the SVG is a mask over `currentColor`, so the glyph follows the CSS
 * colour rather than the fill baked into the file, and the box is `1em`, sized by `font-size` below.
 *
 * The assets live in `img/prime/` and are the PrimeIcons the sibling SQC portal renders (`prime:user`,
 * `prime:chevron-down`), copied verbatim from the icons' inline data URIs - 24x24 viewBox included, so
 * each glyph keeps the padding it has there. Reuse them anywhere the portal's icon set is wanted.
 */
.eop-user-menu-icon,
.eop-user-menu-chevron {
    flex: 0 0 auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.eop-user-menu-icon {
    font-size: 1.5rem;
    color: var(--theme-default-primary);
    -webkit-mask-image: url('img/prime/prime-user.svg');
    mask-image: url('img/prime/prime-user.svg');
}

.eop-user-menu-chevron {
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: transform 0.2s;
    -webkit-mask-image: url('img/prime/prime-chevron-down.svg');
    mask-image: url('img/prime/prime-chevron-down.svg');
}

.eop-user-menu--open .eop-user-menu-chevron {
    transform: rotate(180deg);
}

/* Shared card styling for the dropdown and the language flyout. */
.eop-user-menu-dropdown,
.eop-user-menu-submenu {
    display: none;
    position: absolute;
    background-color: var(--surface-primary);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-lighter);
    border-radius: 4px;
    padding: 0.25rem 0;
}

.eop-user-menu-dropdown {
    top: 100%;
    right: 0;
    min-width: 220px;
    z-index: 9999;
}

.eop-user-menu--open .eop-user-menu-dropdown {
    display: block;
}

.eop-user-menu-item,
.eop-user-menu-item:visited {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    color: var(--theme-default-text-dark);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
}

.eop-user-menu-item:hover {
    background-color: var(--surface-secondary);
    color: var(--theme-default-text-dark);
}

/* Put the leading icons in a fixed-width column so all labels line up (SQC-portal style). */
.eop-user-menu-item > .sqc-fa-icon:first-child,
.eop-user-menu-documentation .eop-documentation-button {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    justify-content: center;
}

/* Make the menu-item icons the same light grey as the trigger icon
   (text colour dimmed to 0.7), rather than full-strength text colour. */
.eop-user-menu-item > .sqc-fa-icon:first-child,
.eop-user-menu-documentation .eop-icon {
    opacity: 0.7;
}

.eop-user-menu-item-trailing {
    margin-left: auto;
    opacity: 0.5;
    font-size: 0.75rem;
}

.eop-user-menu-separator {
    border: none;
    border-top: 1px solid var(--border-lighter);
    margin: 0.25rem 0;
}

/* Don't show a separator stranded at the top/bottom when the item above/below it is hidden
   (e.g. My Profile gated by permission). */
.eop-user-menu-dropdown > .eop-user-menu-separator:first-child,
.eop-user-menu-dropdown > .eop-user-menu-separator:last-child {
    display: none;
}

/* Language flyout submenu (SQC-portal style): a "Language ›" item that opens a
   list of locales to the left on hover. */
.eop-user-menu-language-toggle {
    position: relative;
    cursor: pointer;
}

.eop-user-menu-submenu {
    right: 100%;
    top: 0;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
}

.eop-user-menu-language-toggle.eop-user-menu-language-toggle--open .eop-user-menu-submenu {
    display: block;
}

.eop-user-menu-language-option--active {
    font-weight: 600;
}

.eop-user-menu-sign-out {
    color: var(--theme-default-text-dark);
}

.eop-user-menu-documentation {
    position: relative;
}

.eop-user-menu-documentation .eop-documentation-button,
.eop-user-menu-documentation .eop-documentation-button a {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--theme-default-text-dark);
    text-decoration: none;
}

/* Stretch the documentation link over the whole row so the label is clickable too. */
.eop-user-menu-documentation .eop-documentation-button a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The documentation icon is a top-nav icon (1.6rem + margins); resize it and drop
   the margins so its glyph (mask is 80% of the box) matches the other menu-item icons. */
.eop-user-menu-documentation .eop-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

/* Keep menu icons their resting color on hover (no accent shift). Overrides the global
   `.sqc-fa-icon:hover` recolor (incl. the trigger chevron, which isn't a menu item). The
   documentation icon is a currentColor mask, so `inherit` keeps it on the text colour. */
.eop-user-menu .eop-icon:hover,
.eop-user-menu .sqc-fa-icon:hover,
.eop-user-menu-item:hover .sqc-fa-icon {
    color: inherit;
}
/* ── End new header user menu ───────────────────────────── */

.eop-top-notification {
    overflow: hidden !important;
    grid-area: notification;
}

.eop-top-notification-bar {
    display: flex;
    height: 50px;
    background-color: var(--notification-bar-success-bg);
    overflow: hidden !important;
    color: var(--text-inverse);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    &.orange {
        color: var(--text-heading);
        background-color: var(--accent-gold);
    }
    .eop-top-orange-link{
        color: var(--text-heading);
        font-size: 1rem;
    }
}

.eop-top-notification-message {
    max-width: 90%;
    text-align: center;
    font-size: 1rem;
    margin: 0 5px;
}

.eop-top-notification-message a {
    color: var(--text-inverse);
}

.eop-top-notification-cancel {
    font-size: 30px;
    cursor: pointer;
    padding-right: 2rem;
}

.eop-top-notification-cancel:after {
    display: inline-block;
    content: "\00d7";
}

.eop-link-in-text {
    white-space: pre-wrap;
}

.eop-info-text {
    color: var(--nav-text-accent) !important;
    padding-top: inherit;
}

/*
 * EOP responsive
 */
@media screen and (max-width: 1600px)
{
    .eop-top-user-info {
        max-width: 32ch;
    }
}

@media screen and (max-width: 1300px)
{
    .eop-top-user-info {
        max-width: 16ch;
    }
}

/* 840px in the full-width-bar era; the bar is now 240px narrower (the left-menu column
   owns the top-left corner), so the same 840px of bar content overflows at 1080px.
   Below this the bar scrolls horizontally instead of bleeding over the left menu
   (row-reverse flex overflows out of its LEFT edge). Trade-off carried over from the
   old rule: a scroll container clips the user-menu dropdown at these widths. */
@media screen and (max-width: 1080px) {
    .eop-top-nav {
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid;
    }
}

.eop-top-nav .k-button {
    border: 0 !important;
    color: var(--theme-default-text-dark);
    margin-right: 5px;
    box-shadow: unset !important;
}

.eop-top-nav .k-button:hover {
    background-color: var(--theme-default-table-row-hover) !important;
    .sqc-fa-icon {
        color: var(--theme-default-primary);
    }
}

.eop-top-nav .sqc-fa-icon {
    color: var(--theme-default-text-dark);
}

.pane-content .eop-top-nav>div {
    /* No padding at all: horizontal spacing between items is the bar's `gap`, the row's outer
       inset is `.pane-content`'s `padding-inline`, and vertical alignment is `align-items: center`.
       Vertical padding here would overflow the fixed-height bar and cut items off. */
    padding: 0;
    flex: 0 0 auto;
}

.k-splitbar-static-vertical {
    background-color: var(--nav-bg-primary);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px;
}

.k-splitbar .k-resize-handle {
    background-color: var(--scrollbar-thumb);
}

/* Left tree */

.eop-left-tree {
    background-color: var(--nav-bg-secondary);
    position: fixed;
    /* Anchor to the viewport top explicitly: the static position of this fixed element
       moved to y=0 when the left nav column took over the top-left corner, and the
       flyout is meant to span the full viewport height (height:100% resolves against
       the viewport once top is set). */
    top: 0;
    width: 450px;
    height: 100%;
    /* Above the top bar (z-index 1000): the flyout starts at the viewport top, so a
       lower value would leave its first rows and toolbar hidden under the bar. */
    z-index: 1002;
    display: none;
    overflow: auto;
}

.eop-left-tree .k-treeview .k-item {
    background-color: var(--nav-bg-secondary);
    color: var(--nav-text);
    padding-left: 1.5rem;
}

.eop-left-tree .k-treeview .k-in {
    margin: 1px 0 1px .3333em;
    padding: .429em .6667em .429em .429em;
    line-height: 1.3333em;
    text-decoration: none;
    border-style: none;
    border-width: 0;
    color: var(--nav-text-highlight);
    cursor: pointer;
    width: 90%;
}

.eop-left-tree span.small, .small {
    background-color: var(--theme-default-text-dark);
    font-size: 80%;
    color: var(--text-inverse);
    padding: 3px 5px 2px 5px;
    border-radius: 3px;
}

.k-i-error {
    background-image: none !important;
}

span.k-icon.k-i-collapse,
span.k-icon.k-i-expand {
    font-size: 1.5rem;
    margin-left: -1.5rem;
}

span.k-icon.k-i-collapse {
    margin-top: 0.1rem;
}

.k-icon.disabled {
    pointer-events: none; /* Prevents clicking */
    opacity: 0.5;
    cursor: not-allowed;
}

.eop-ui .k-splitbar-horizontal {
    background-color: var(--nav-bg-hover);
    border: 0;
    color: var(--nav-text);
}

/* Left nav */

.eop-left-nav {
    background-color: var(--nav-bg-primary);
    width: 100%;
    margin-right: 1rem;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    grid-area: left-nav-menu;
}

.eop-left-nav a {
    text-decoration: none;
    flex-grow: 2;
    padding: 0.5rem;
    color: var(--nav-text-highlight);
}

.eop-left-nav-item {
    padding: 0.6rem 0.6rem !important;
    font-size: 1rem;
    position: relative;
}

.eop-left-nav-sub-item {
    font-size: 0.887rem;
    padding: 0.25rem 0.8rem 0.25rem 2.8rem !important;
}

.eop-left-nav .loading-wheel {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Reserve the spinner's full slot (16px + 0.5rem gap) even when idle so
   badges/labels to its left do not shift when the spinner toggles on click.
   !important is required because Wicket's DOM.hide() sets `style="display: none"`
   inline (specificity 1,0,0,0) in addition to the `hidden` attribute. */
.eop-left-nav .loading-wheel[hidden] {
    display: inline-block !important;
    visibility: hidden;
}

.eop-left-nav .loading-wheel::before {
    border-width: 2px;
    border-color: var(--text-inverse);
}

.eop-left-nav .eop-left-nav-hdr {
    display: flex;
    flex-flow: row nowrap;
    padding: 0 1rem 0 1rem;
    align-items: center;
}

.eop-left-nav .eop-left-nav-hdr:not(.group):hover {
    background: var(--nav-bg-hover);
}

.eop-left-nav .eop-left-nav-hdr.k-state-selected {
    font-weight: 600;
}

.eop-left-nav-menu {
    overflow: auto !important;
    margin-bottom: 1.2rem;
    margin-top: 1.2rem;
}

.eop-left-nav-showtree-text {
    border-bottom: 1px solid var(--surface-page);
    background-color: var(--nav-bg-secondary);
    color: var(--nav-text-highlight);
    font-size: 1rem;
    /* Above .eop-top-nav (z-index 1000), below the fly-out (1002): keeps the top bar's
       --shadow-header off this header's right edge while the fly-out still covers it. */
    position: relative;
    z-index: 1001;
    /* Pin to the shared bar height so the header's bottom edge lines up with the top bar's. */
    box-sizing: border-box;
    height: var(--top-bar-height);
    /* The home section and the name section sit side by side; each carries its own padding so its
       hover highlight covers the full bar height. */
    display: flex;
    flex-flow: row nowrap;
    /* No overflow clip: this box is in the containing-block chain of both sections' tooltip
       bubbles, which hang below the bar. Line 1 and the account name clamp their own text, and
       .eop-left-nav clips the 240px column. */
}

/* The header's flex rows lay the icon out themselves, so the shared left-nav float and margins
   are dropped here. */
.eop-left-nav-showtree-text .eop-icon-left-nav {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

/* Partner-only section: the home link plus the vertical separator that splits it from the name. */
.eop-topnavbar-home {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid var(--surface-page);
}

/* The link fills the whole section, so the click target is the section rather than the 1rem icon
   inside it. The section's padding lives here, on the same box the hover highlight shades; the
   width it sets is width the name section gives up out of the 240px column. */
.eop-topnavbar-home > a {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 1rem;
}

/* The tooltip bubble hangs off the section, which stretches to the full bar height: top: 100% puts
   it just under the bar, and left: 1rem lines it up with the icon and keeps the whole bubble on
   the page against the window's left edge.
   [data-title] is in the selector for specificity, not for matching: the generic [data-title]:after
   further down sets left/transform too and scores the same (0,1,0). */
.eop-topnavbar-home[data-title]:after {
    top: 100%;
    left: 1rem;
    transform: none;
}

.eop-topnavbar-home .eop-icon-home {
    width: 1rem;
    height: 1rem;
}

/* The text column: label + datacenter on line 1, account name on line 2, vertically centred in
   the bar. It takes the full column width; the pointed edge is drawn outside the column by
   .eop-left-nav-showtree-border. */
.eop-topnavbar-main {
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 1rem;
    /* Lets a long account name ellipsize instead of widening the flex item past the column. */
    min-width: 0;
    flex: 1;
}

.eop-topnavbar-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

/* The name's tooltip bubble hangs off the name line, so it sits just under the name, and is pinned
   to that line's left edge, where the name starts: the line stretches to the full text column, so a
   centred bubble would sit far to the right of a short name. At 10rem it still ends inside the
   240px column that .eop-left-nav clips.
   [data-title] is in the selector for specificity, not for matching: the generic [data-title]:after
   further down sets left/transform too and scores the same (0,1,0). */
.eop-topnavbar-line2[data-title]:after {
    top: 100%;
    left: 0;
    transform: none;
}

/* Click-to-open affordance for the name section; the class is set only while there is a tree to
   expand. */
.eop-topnavbar-main--expandable {
    cursor: pointer;
}

/* A translucent overlay, not a hover colour: the .themed.<color> rules set this header's
   background-color with !important, so the shade has to come from another property, and the
   overlay holds up over every vendor colour. Hover only: the header and the fly-out are
   identically-coloured surfaces that merge while the tree is open. */
.eop-topnavbar-home:hover,
.eop-topnavbar-main--expandable:hover {
    background-image: linear-gradient(var(--nav-hover-overlay), var(--nav-hover-overlay));
}

.eop-topnavbar-line1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    /* Line 1 must never wrap: a second row would push line 2 out of the fixed-height bar. */
    white-space: nowrap;
    /* Lets the datacenter slot shrink below its text width so it ellipsizes instead of pushing
       line 1 past the column. No overflow clip: the slot's tooltip bubble is a child box of this
       row, and the slot clips its own text. */
    min-width: 0;
}

/* Tooltip host for the truncated datacenter, so it must not clip; the label inside does the
   clipping. Sized to its text, which keeps the bubble beside the name, and min-width: 0 lets it
   shrink past that text so a long name ellipsizes instead of pushing line 1 past the column. */
.eop-topnavbar-datacenter-slot {
    min-width: 0;
    flex: 0 1 auto;
}

/* One line, ellipsized: line 1's height is fixed by the bar. Sized here; line 1's own 0.75rem
   sets that row's height and gap. */
.eop-topnavbar-datacenter {
    display: block;
    font-size: 0.625rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The bubble hangs just under line 1, overlaying line 2 while it is up, and is pinned by its right
   edge: the slot sits at the right of line 1, so a right-anchored bubble stays inside the 240px
   column that .eop-left-nav clips, and at 10rem it never reaches the column's left edge either.
   Qualified by the parent line for specificity: the shared [data-title]:after rule sets
   left/transform and scores the same (0,1,1) as a bare .eop-topnavbar-datacenter-slot:after. */
.eop-topnavbar-line1 .eop-topnavbar-datacenter-slot:after {
    top: 100%;
    left: auto;
    right: 0;
    transform: none;
}

/* Both label variants render as the same pill badge; the tree flyout keeps the plain
   .left-nav-product look, so the pill styling is scoped to the top nav bar's line 1. */
.eop-topnavbar-line1 .left-nav-product,
.eop-topnavbar-line1 .small {
    background-color: var(--nav-bg-active);
    color: var(--text-inverse);
    /* In rem, not %: line 1 sets its own 0.75rem, which a percentage here would resolve against. */
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.5px;
    /* Bottom a pixel short of the top: the caps sit high in the line box, so symmetric padding
       reads as bottom-heavy. Horizontal padding is kept tight - line 1 shares a 240px column with
       the datacenter name, which ellipsizes as soon as the badge takes more of it. */
    padding: 3px 5px 2px;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.eop-topnavbar-line2 {
    display: flex;
    align-items: center;
    min-width: 0;
}

.eop-topnavbar-name {
    /* White, not the header's default --nav-text-highlight off-white. */
    color: var(--text-inverse);
    font-size: 1rem;
    line-height: 1;
    /* Long names may take a second line before ellipsizing; the two lines plus line 1 still fit
       within the fixed bar height. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.eop-left-nav-showtree {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr: 1fr means minmax(auto, 1fr), whose auto floor is the
       header's min-content, which lets the track outgrow the 240px column and leaves nothing
       downstream able to ellipsize. */
    grid-template-columns: minmax(0, 1fr) 0fr 0fr;
}

/* The bar's pointed right edge: a CSS triangle beside the 240px column. The two halves add up to
   the bar's own height, so the point sits on its vertical centre. The geometry is held in custom
   properties because the hover overlay below has to draw the very same triangle. */
.eop-left-nav-showtree-border {
    --nav-notch-half-height: calc(var(--top-bar-height) / 2);
    --nav-notch-width: 7px;
    position: fixed;
    width: 20px;
    left: 240px;
    /* Above the top bar (z-index 1000) but below the tree flyout (1002): the notch sits
       beside the header in the bar's row, and the flyout must cover it while open. */
    z-index: 1001;
    border-top: var(--nav-notch-half-height) solid transparent;
    border-bottom: var(--nav-notch-half-height) solid transparent;
    border-left: var(--nav-notch-width) solid var(--nav-bg-secondary);
}

/* The notch is the name section's rectangle carried on to the point, so it has to shade with it.
   It is a sibling of the header rather than part of it, and it is painted by a border, which the
   section's background overlay cannot reach - hence a second triangle of the same geometry, filled
   with the overlay token, laying the same shade over whatever colour the notch is painted in. */
.eop-left-nav-showtree-text:has(.eop-topnavbar-main--expandable:hover) ~ .eop-left-nav-showtree-border:after {
    content: "";
    position: absolute;
    /* Pulled back out over the notch's own borders: this pseudo-element's containing block is the
       content box, which sits inside them. */
    top: calc(-1 * var(--nav-notch-half-height));
    left: calc(-1 * var(--nav-notch-width));
    border-top: var(--nav-notch-half-height) solid transparent;
    border-bottom: var(--nav-notch-half-height) solid transparent;
    border-left: var(--nav-notch-width) solid var(--nav-hover-overlay);
}

.tree-node-move-window {
    max-height: 45vh;
    overflow: auto;
}

.eop-left-nav-hdr-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
}

.eop-left-nav-item.eop-left-nav-item--has-badge {
    display: flex;
    align-items: center;
}

.eop-left-nav-item.eop-left-nav-item--has-badge .eop-icon-left-nav {
    float: none;
    flex-shrink: 0;
    /* The flex container centres the icon; the float-mode nudge would push it low. */
    margin-top: 0;
}

.eop-left-nav-item.eop-left-nav-item--has-badge .eop-left-nav-hdr-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 1;
}

/* Compact line-height for nav items whose label wraps to multiple lines,
   so the wrapped lines do not push the item to twice the height of single-
   line items. Opt-in per nav type via LeftNavContentPanel. */
.eop-left-nav-item--multi-line .eop-left-nav-hdr-text {
    line-height: 1.4;
}

.eop-left-nav-hdr.group {
    color: var(--nav-text-highlight);
    padding: 1rem 0.5rem 0.5rem 1rem;
    font-size: 1.3rem;
}

.eop-left-nav-hdr.group:not(:first-child) {
    padding-top: 1.5rem;
}

.eop-margin-left {
    margin-left: 1rem;
}

.eop-left-nav-link {
    display: inline-block;
    padding: 0.2rem;
    padding-left: 1.25rem;
}

.eop-left-nav-link a span:hover {
    color: var(--nav-text-accent);
}

.eop-left-nav-link a {
    text-decoration: none;
    color: var(--nav-text-highlight);
}

.eop-left-nav ul {
    list-style-type: none;
    padding: 0.4rem;
    margin: 0;
}

.eop-left-nav ul li {
    margin: 0;
}

/* Left nav theme */
/* Breeze blue: #007ea8+white; Green: #228b22+white  */

.themed .icon {
    color: var(--text-inverse);
    font-size: 35px;
}

.eop-account-theme .blue {
    background-color: var(--theme-blue-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}

/* ORANGE Theme */
.eop-account-theme .orange,
.themed.orange .eop-left-nav-showtree-text,
.themed.orange .eop-left-nav-support,
.themed.orange .eop-left-tree,
.themed.orange .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-orange-primary-background) !important;
    color: var(--text-on-surface) !important;
}
.themed.orange .eop-left-nav-showtree-border {
    border-left-color: var(--theme-orange-primary-border) !important;
}
.themed.orange .eop-left-tree .k-treeview .k-in:not(.k-state-selected),
.themed.orange .eop-left-tree .k-treeview .k-in:hover {
    color: var(--text-inverse) !important;
}

/* DARK RED Theme */
.eop-account-theme .red,
.themed.red .eop-left-nav-showtree-text,
.themed.red .eop-left-nav-support,
.themed.red .eop-left-tree,
.themed.red .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-red-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}
.themed.red .eop-left-nav-showtree-border {
    border-left-color: var(--theme-red-primary-border) !important;
}

/* PURPLE  Theme */
.eop-account-theme .purple,
.themed.purple .eop-left-nav-showtree-text,
.themed.purple .eop-left-nav-support,
.themed.purple .eop-left-tree,
.themed.purple .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-purple-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}
.themed.purple .eop-left-nav-showtree-border {
    border-left-color: var(--theme-purple-primary-border) !important;
}

/* GREEN Theme */
.eop-account-theme .green,
.themed.green .eop-left-nav-showtree-text,
.themed.green .eop-left-nav-support,
.themed.green .eop-left-tree,
.themed.green .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-green-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}
.themed.green .eop-left-nav-showtree-border {
    border-left-color: var(--theme-green-primary-border) !important;
}

/* BREEZE Theme */
.eop-account-theme .breeze,
.themed.breeze .eop-left-nav-showtree-text,
.themed.breeze .eop-left-nav-support,
.themed.breeze .eop-left-tree,
.themed.breeze .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-breeze-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}
.themed.breeze .eop-left-nav-showtree-border {
    border-left-color: var(--theme-breeze-primary-border) !important;
}

/* KMBLUE Theme */
.eop-account-theme .kmblue,
.themed.kmblue .eop-left-nav-showtree-text,
.themed.kmblue .eop-left-nav-support,
.themed.kmblue .eop-left-tree,
.themed.kmblue .eop-left-tree .k-treeview .k-item {
    background-color: var(--theme-kmblue-primary-background) !important;
    color: var(--nav-text-highlight) !important;
}
.themed.kmblue .eop-left-nav-showtree-border {
    border-left-color: var(--theme-kmblue-primary-border) !important;
}

.eop-account-theme .ths {
    border:3px solid var(--text-inverse);
    width: 20px;
    height: 20px;
    cursor:pointer;
    float: left;
}
.eop-account-theme .ths.selected {
    border: 3px solid var(--text-heading);
}

/* Detail view */

.eop-detail-view {
    overflow-y: scroll;
    background-color: var(--surface-page);
    grid-area: detail-view;
    /* Half of the 2rem the portal leaves between the header and the breadcrumbs; the other half is the
       shared `.eop-ui .pane-content` padding. Composed from the two rather than set in one place because
       .pane-content is used by other views, which should keep their current spacing. */
    margin-top: 1rem;
}

.k-grid tbody .k-button,
.k-grid tbody .k-button:hover {
    background-color: transparent;
}

.k-grid-footer, .k-grid-header {
    padding-right: 0 !important;
}

.k-toolbar {
// override changed theme in Kendo UI 2019 R2 SP1 which defaults to left side buttons
    display: block;
    float: right;
}

.eop-wide-button {
    min-width: 15rem !important;
}

.eop-wide-button > a {
    min-width: 15rem !important;
}

.eop-pull-right {
    float: right;
}

.eop-list-toolbar {
    text-align: right;
    padding-right: 2.55rem;
    padding-top: 1rem;
    padding-left: 2rem;
    margin-bottom: 2px;
}

.eop-list-toolbar.less-padding {
    padding-right: 2rem;
}

.eop-list-toolbar.no-top-padding {
    padding-top: 0;
}

.eop-list-toolbar input {
    display: inline;
}

.eop-list-toolbar-override-permissions {
    line-height: 3rem;
    padding-right: 2rem;
}

.eop-detail-view .pane-content {
	position: relative;
	min-height: calc(100% - 2rem);
	border: 0;
}

.eop-detail-view .pane-content .detail-footer {
	position: absolute;
	display: grid;
	width: 100%;
	height: 30px;
	bottom: 0;
	right: 0;
	padding-right: 3rem;
	font-size: 10px;
	justify-items: end;
}
.eop-detail-view .pane-content .detail-footer .trace-id {
    display: none;
}

.eop-detail-view .eop-detail-header {
    background-color: var(--surface-page);
    color: var(--theme-default-text-headings);
    border: 0;
    border-radius: 0;
    width: 100%;
    font-family: Ysoft, Roboto, Arial, Helvetica, sans-serif;
    /* Keep this in sync with sqc-portal: 2.25rem is Tailwind's `text-4xl`, which is what the portal's
       AppPageTitle resolves to from `sm:` upwards. (It steps down to `text-3xl` on the narrowest
       screens; this stays flat.) */
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 1rem;
}

.eop-detail-view .k-block {
    border: 0;
    background-color: var(--surface-primary);
    padding: 0;
}

.eop-detail-view .eop-detail-content {
    color: var(--theme-default-text-default);
    padding: 0 2rem 2rem;
}

.eop-control-button-container {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    text-align: right;
}

.eop-control-button-container input {
    display: inline;
}

/* EOP - List */

.k-block {
    color: var(--theme-default-text-default);
}

.k-header {
    background-color: var(--surface-primary);
    border: 0;
}

.k-header:after {
    display: none !important;
}

.k-grid .k-header .k-button {
    background-color: var(--status-success-bg);
    float: right;
}

.k-widget {
    border: 0;
}

.k-grid-header {
    background-color: var(--surface-primary) !important;
}

.k-grid-header .k-header {
    color: var(--theme-default-text-title);
    background-color: var(--surface-primary);
}

.k-grid-header .k-header .k-link {
    color: var(--theme-default-text-title);
}

.k-grid-header th.k-header {
    color: var(--theme-default-text-title);
    border: 0;
}

.k-grid-toolbar {
    border: 0;
    margin-top: -1.5rem;
    background-color: transparent;
}

.k-grid .k-command-cell {
    padding: 0 1rem;
    text-align: right;
}

.k-grid-view,
.k-grid-deploy,
.k-grid-viewObjects,
.k-grid-clickTree,
.k-grid-duplicate,
.k-grid-copy,
.k-grid-rollback,
.k-grid-download,
.k-grid-delete,
.k-grid-showTransactions,
.k-grid-topUp,
.k-grid-withdraw {
    &.k-button {
        background-color: transparent !important;
        padding: 0;
        opacity: 1;
        min-width: 2.375rem !important;
        min-height: 2.375rem;
        height: 2.375rem;
        margin: 0.25rem 0;
        font-size: 1rem;
    }

    &.k-button::before {
        display: grid;
        align-items: center;
        text-rendering: auto;
        opacity: 1;
        background-color: transparent;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-solid);
        color: var(--theme-default-primary);
    }
    &:hover {
        color: var(--theme-default-link-hover-opacity);
        background-color: var(--theme-default-button-secondary-background-active) !important;
    }

    &.k-state-disabled {
        display: none;
    }
}

.k-grid-view.k-button::before {
    content: '\f044';
}

.k-grid-view.k-grid-readonly-view::before {
    content: '\f06e';
}

.k-grid-view.k-grid-no-view {
    display: none;
}

.k-grid-rollback::before {
    content: '\f3e5';
}

.k-grid-clickTree.k-button::before {
    content: '\f044';
}

.k-grid-deploy.k-button::before {
    content: '\f14d';
}

.k-grid-download.k-button::before {
    content: '\f019';
}

.k-grid-excel:hover {
    background-color: var(--status-warning-accent) !important;
}

.k-grid-csv:hover {
    background-color: var(--status-warning-accent) !important;
}

.k-grid-delete.k-button::before {
    content: '\f2ed';
}

.k-grid-viewObjects.k-button::before {
    content: '\f247';
}

.k-grid-duplicate.k-button::before,
.k-grid-copy.k-button::before {
    content: '\f0c5';
}

.k-grid-showTransactions.k-button::before {
    content: '\e528';
}

.k-grid-topUp.k-button::before {
    content: '\f055';
}

.k-grid-withdraw.k-button::before {
    content: '\f056';
}

.k-grid-plus {
    background-color: transparent !important;
    background-image: url('img/eop_icon_add_circle.svg');
    background-repeat: no-repeat;
    background-size: 14px 15px !important;
    color: transparent !important;
    box-shadow: unset;
    width: 8px !important;
}

.k-grid-plus:hover {
    background-color: transparent !important;
    background-image: url('img/eop_icon_add_circle_active.svg');
    background-repeat: no-repeat;
    box-shadow: unset;
}

.k-grid-plus:focus {
    box-shadow: none;
}

.k-grid-qrcode {
    background-color: transparent !important;
    background-image: url('img/eop_icon_qrcode.svg');
    background-repeat: no-repeat;
    background-size: 16px 13px;
    width: 18px !important;
}

.k-grid-qrcode:hover {
    background-color: transparent !important;
    background-image: url('img/eop_icon_qrcode_active.svg');
    background-repeat: no-repeat;
    box-shadow: unset;
}


.k-grid-grayscale {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: 15px 15px !important;
    color: transparent !important;
    box-shadow: unset;
    width: 18px !important;
}

.k-grid-bw {
    background-image: url('img/eop_icon_bw.svg');
}

.k-grid-color {
    background-image: url('img/eop_icon_color.png');
}

.k-grid {
    padding: 2rem;
}

.k-grid-content {
    min-height: 20rem;
    overflow: hidden;
    font-size: 0.887rem;
    color: var(--theme-default-text-description);
    overflow-y: visible;
    overflow-x: clip;
}

.search-results-layer {
    min-height: 40rem;
}

.search-result-row {
    padding: 0 2rem;
    font-size: 0.9rem;
}

.search-result-row .clickable-row {
    cursor: pointer;
}

.search-result-row .clickable-row td:first-child {
    background-image: url('img/eop_icon_link.svg');
    background-repeat: no-repeat;
    background-position: 0.2rem 1.2rem;
    background-size: 1rem 1rem;
    padding-left: 2rem;
}

.search-result-row .eop-list-table-container tbody tr:hover {
    background-color: var(--surface-tertiary);
}

.search-result-row .eop-list-table-container {
    padding: 0 1rem;
}

.search-result-row .search-result-header {
    padding-top: 1rem;
}

.search-no-results-for {
    padding: 2rem;
    font-weight: 600;
}

.k-grid-content .k-auto-scrollable {
}

.k-grid-header-wrap {
    border-color: var(--surface-primary);
}

.k-button-iconxtext {
    background-color: transparent !important;
}

.w-messagewindow-buttons > BUTTON {
    height: 39px;
    width: 130px;
}

/* Icons */

.eop-icon {
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.sqc-fa-icon {
    color: var(--theme-default-primary);
    text-decoration: none;

    &:hover {
        color: var(--theme-default-link-hover-opacity);
    }

    &.sqc-top-nav {
        color: var(--theme-default-text-dark);
        align-content: center;
        width: 2rem;
        height: 2rem;
    }
}

.eop-icon-text-bottom-align {
    vertical-align: text-bottom;
}

.eop-icon:HOVER {
    color: var(--nav-text-accent);
}

.eop-icon-inline {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
    margin-left: 0.1rem;
}

.eop-icon-top-nav {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.6rem;
    margin-left: 0.3rem;
}

/* The left-nav artwork is authored at 14px; the 1rem box is kept close to that so the strokes are
   not scaled up into a heavier weight than they were drawn for. Box plus margin-right totals
   2.2rem, which is what keeps the menu labels aligned - change one and compensate in the other. */
.eop-icon-left-nav {
    width: 1rem;
    height: 1rem;
    margin-right: 1.2rem;
    margin-top: 0.3rem;
    float: left;
}

.eop-left-nav-collapsible {
    cursor: pointer;
}

.eop-icon-left-nav-right {
    width: 1.3rem;
    height: 1.3rem;
    background-size: contain;
    margin: 0 0 0 1rem;
    position: absolute;
    left: 175px;
    top: 50%;
    transform: translateY(-50%);
}

.eop-icon-chevron-down {
    background-image: url('img/left_menu_icon_chevron_down.svg');
}

.eop-icon-chevron-up {
    background-image: url('img/left_menu_icon_chevron_up.svg');
}

.eop-icon-home {
    background-image: url('img/left_menu_icon_home.svg');
}

.eop-icon-content-description-panel {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.8rem;
}

.eop-icon-user {
    background-image: url('img/eop-icon-user.svg');
}

.eop-icon-add-vendor {
    background-image: url('img/eop_icon_add_vendor.svg');
}

.eop-icon-add-account {
    background-image: url('img/eop_icon_add_account.svg');
}

.eop-icon-add-container {
    background-image: url('img/eop_icon_add_container.svg');
}

.eop-icon-add-server {
    background-image: url('img/eop_icon_add_server.svg');
}

.eop-icon-add-service {
    background-image: url('img/eop_icon_add_service.svg');
}

.eop-icon-add-user {
    background-image: url('img/eop_icon_add_user.svg');
}

.eop-icon-add-printer {
    background-image: url('img/eop_icon_add_printer.svg');
}

.eop-icon-manage-services {
    background-image: url('img/eop_icon_manage_services.svg');
}

.eop-icon-info {
    background-image: url('img/eop_icon_info.svg');
}

.eop-icon-refresh {
    background-image: url('img/eop_icon_refresh.svg');
}

.eop-icon-overview {
	background-image: url('img/nav_icon_overview.svg');
}

.eop-icon-left-nav-download {
    background-image: url('img/nav_icon_download.svg');
}

.eop-icon-download {
    background-image: url('img/eop_icon_download.svg');
}

.eop-icon-settings {
    background-image: url('img/nav_icon_settings.svg');
}

.eop-icon-reports {
    background-image: url('img/nav_icon_reports.svg');
}

.eop-icon-my-documents {
    background-image: url('img/nav_icon_my_documents.svg');
}

.eop-icon-pc-client {
    background-image: url('img/nav_icon_pc_client.svg');
}

.eop-icon-scanning {
    background-position: center;
    background-image: url('img/nav_icon_scanning.svg');
}

.eop-icon-sales-tools {
    background-image: url('img/nav_icon_sales_tools.svg');
}

.eop-icon-security {
    background-image: url('img/nav_icon_security.svg');
}

.eop-icon-services {
    background-position-y: 0.2rem;
    background-image: url('img/eop_icon_services.svg');
}

.eop-icon-location {
    background-image: url('img/eop_icon_location.svg');
}

.eop-icon-balance {
    background-position: center;
    background-image: url('img/nav_icon_balance.svg');
}

.eop-icon-printers {
    background-image: url('img/nav_icon_printers.svg');
}

.eop-icon-users {
    background-image: url('img/nav_icon_users.svg');
}

.eop-icon-my-profile {
    background-image: url('img/nav_icon_personal.svg');
}

.eop-icon-search {
    background-image: url('img/search.svg');
}

.eop-icon-account-servers {
    background-image: url('img/eop_icon_server.svg');
}

.eop-icon-access-control {
    background-image: url('img/eop_icon_access_control.svg');
}

.eop-icon-logs {
    background-position-y: 0.2rem;
    background-image: url('img/eop_icon_list.svg');
}

.eop-icon-embedded {
    background-image: url('img/eop_icon_embedded.svg');
}

.eop-icon-triggers {
    background-image: url('img/eop_icon_triggers.svg');
}

.eop-icon-api-keys {
    background-image: url('img/eop_icon_api_keys.svg');
}

.eop-icon-endpoints {
    background-position: center;
    background-image: url('img/nav_icon_endpoints.svg');
}

.eop-icon-template-inverse {
    background-image: url('img/eop_icon_template_inverse.svg');
}

.eop-icon-email {
    background-image: url('img/eop_icon_email.svg');
}

.eop-icon-logout {
    background-image: url('img/eop_icon_logout.svg');
    background-size: 80% 80%;
    margin-top: 0.6rem;
}

.eop-icon-logout:hover {
    background-image: url('img/eop_icon_logout_active.svg');
}

.eop-icon-documentation {
    background-image: url('img/eop_icon_documentation.svg');
    filter: invert(58%) sepia(94%) saturate(4924%) hue-rotate(161deg) brightness(96%) contrast(99%);
    background-size: 80% 80%;
}

.eop-icon-documentation-horizontal-margin {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.eop-icon-top-nav.eop-icon-documentation {
    filter: none;
}

/* Only inside the new header menu: tint the documentation icon with the current (theme)
   text colour via a mask, so it matches the other menu icons in light and dark mode.
   Scoped to the menu because there the link colour is controlled; in the legacy header
   the link colour would be the browser's visited-link colour (violet). */
.eop-user-menu .eop-icon-top-nav.eop-icon-documentation,
.eop-user-menu .eop-icon-top-nav.eop-icon-documentation:hover {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url('img/eop_icon_documentation.svg') no-repeat center / 80% 80%;
    mask: url('img/eop_icon_documentation.svg') no-repeat center / 80% 80%;
    filter: none;
}

.eop-icon-documentation:hover {
    filter: invert(24%) sepia(82%) saturate(630%) hue-rotate(141deg) brightness(100%) contrast(105%);
}

.error .alert-icon, .eop-error-state-icon  {
    background-image: url('img/eop_icon_alert_error.svg');
}

.warning .alert-icon, .eop-warning-state-icon {
    background-image: url('img/eop_icon_alert_warning.svg');
}

.info .alert-icon {
    background-image: url('img/eop_icon_alert_info.svg');
}

.check-alert {
    margin: 0.5rem 0;
    padding: 1rem;
    border-radius: 0.25rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    color: var(--text-on-surface);
}

.check-alert.withinDescriptionRow {
    padding: 0;
    margin: 0 15px 0 0;
    background-color: initial;
    color: inherit;
    border: 0;
}

.check-alert .alert-icon, .check-alert .solve-btn {
    flex-shrink: 0;
}

.check-alert .alert-body {
    flex: 1;
    margin-top: 5px;
}

.alert-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}

.check-alert ul {
    margin: 0;
    padding: 0 0 0 0.75rem;
}

.check-alert ul li:not(:first-of-type){
    margin-top: 0.7rem;
}

/*
 * Tree icons
 */
.eop-icon-tree {
    background-size: contain;
    height: 13px;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 6px !important;
    margin-top: 2px;
    color: var(--nav-text);
}

.eop-icon-tree-output-port {
    background-image: url('img/eop_icon_tree_output_port.svg');
}

.eop-icon-tree-document-output {
    background-image: url('img/eop_icon_tree_document_output.svg');
}

.eop-icon-tree-vendor {
    background-image: url('img/eop_icon_tree_vendor.svg');
}

.eop-icon-tree-container {
    background-image: url('img/eop_icon_tree_container.svg');
}

.eop-icon-tree-customer {
    background-image: url('img/eop_icon_tree_customer.svg');
}

.eop-icon-tree-input-port {
    background-image: url('img/eop_icon_tree_input_port.svg');
}

.eop-icon-tree-server {
    background-image: url('img/eop_icon_tree_server.svg');
}

.eop-icon-tree-api {
    background-image: url('img/eop_icon_tree_api.svg');
}

.eop-icon-tree-authentication {
    background-image: url('img/eop_icon_tree_authentication.svg');
}

.eop-icon-tree-terminal-client {
    background-image: url('img/eop_icon_tree_terminal_client.svg');
}

.eop-icon-tree-ipp {
    background-image: url('img/eop_icon_tree_ipp.svg');
}

.eop-icon-tree-storage {
    background-image: url('img/eop_icon_tree_storage.svg');
}

.eop-icon-tree-mobile-print {
    background-image: url('img/eop_icon_tree_mobile_print.svg');
    height: 16px !important;
    margin-top: 0 !important;
    margin-left: 4px;
    margin-right: 2px !important;;
}

.eop-mobile-print-description-container {
    padding: 2rem;
}

.eop-icon-tree-conversion {
    background-image: url('img/eop_icon_tree_conversion.svg');
}

.eop-icon-tree-messaging {
    background-image: url('img/eop_icon_tree_messaging.svg');
}

.eop-icon-tree-wps {
    background-image: url('img/eop_icon_tree_wps.svg');
}

.eop-icon-tree-external-device-management {
    background-image: url('img/eop_icon_tree_external_device_management.svg');
}

/* Servers state */
.eop-online-server-state-icon {
    background-image: url('img/eop_icon_greencheck.svg');
}

.eop-offline-server-state-icon {
    background-image: url('img/eop_icon_redcross.svg');
}

.eop-disabled-server-state-icon {
    background-image: url('img/eop_icon_server_disabled.svg');
}

.eop-starting-server-state-icon {
    background-image: url('img/eop_icon_server_starting.svg');
}

.eop-error-server-state-icon {
    background-image: url('img/eop_icon_server_error.svg');
}

/* State icons */
.eop-state-icon {
    min-height: 1.2rem;
    min-width: 1.2rem;
    background-size: 100% 100%;
}

.eop-success-state-icon {
    background-image: url('img/eop_icon_greencheck.svg');
}

.eop-failed-state-icon {
    background-image: url('img/eop_icon_redcross.svg');
}

.eop-disabled-state-icon {
    background-image: url('img/eop_icon_server_disabled.svg');
}

.eop-progress-state-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.eop-progress-state-icon::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--status-warning-accent);
    animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

.eop-processing-state-icon {
    background-image: url('img/eop_icon_server_starting.svg');
}

.terminal-deploy-status-container {
    display: flex;
    align-items: center;
}

.terminal-deploy-status {
    margin-left: 0.5rem;
}

.terminal-deploy-status-container--with-message {
    display: flex;
    align-items: flex-start;
}

.terminal-deploy-status--stage {
    display: flex;
    align-items: center;
}

.terminal-deploy-status--message {
    margin-top: 0.3rem;
    font-style: italic;
}

/*
 * Common html
 */
select {
    width: 100%;
    border: 1px solid var(--border-light);
    font-size: 1rem;
    font-family: var(--default-body-font-family) sans-serif;
}

select option {
    padding: 0.2rem;
    height: 1.4rem;
}

select option:checked {
    background: var(--info-highlight);
}

/*
 * Wicket Palette
 */
.palette-choices {
    float: left;
    width: 40%;
}

.palette-choices select {
    width: 100%;
    height: 26rem;
    border: 1px solid var(--border-light);
    font-size: 1rem;
    font-family: var(--default-body-font-family) sans-serif;
}

.palette-choices select option {
    padding: 0.2rem;
    height: 1.4rem;
}

.palette-choices option:checked {
    color: var(--theme-default-text-default);
    background: var(--theme-default-palette-choices-background-selected);
}

.palette-selected {
    float: left;
    width: 40%;
}

.palette-selected select {
    width: 100%;
    height: 26rem;
    border: 1px solid var(--border-light);
    font-size: 1rem;
    font-family: var(--default-body-font-family) sans-serif;
}

.palette-selected select option {
    padding: 0.2rem;
    height: 1.4rem;
}

.palette-selected option:checked {
    color: var(--theme-default-text-default);
    background: var(--theme-default-palette-choices-background-selected);
}

.palette-header {
    display: block;
    text-align: center;
    padding: 2px;
}

.palette-buttons {
    padding-top: 3rem;
    float: left;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.palette-buttons button {
    display: block;
    padding: 5px;
    background-color: var(--theme-default-palette-button-background);
    border: 0;
    margin: 1rem;
    cursor: pointer;
    align-content: center;
}

.palette-buttons button div {
    height: 1.5rem;
    width: 3rem;
    background-color: var(--theme-default-palette-button-background);
    color: var(--theme-default-text-dark);
    align-content: center;
}

.palette-buttons button:hover,
.palette-buttons button:hover div {
    background-color: var(--theme-default-palette-button-background-hover);
}

.palette-buttons button.palette-add div:after {
    content: '>';
}

.palette-buttons button.palette-remove div:after {
    content: '<';
}

.palette-buttons button.palette-up div:after {
    content: '\21D1';
}

.palette-buttons button.palette-down div:after {
    content: '\21D3';
}

.palette-buttons button.palette-addAll div:after {
    content: '>>';
}

.palette-buttons button.palette-removeAll div:after {
    content: '<<';
}

.palette-clearer {
    clear: both;
}

/*
 * EOP - Overview
 */

.eop-overview-row {
	width: 100%;
	margin-bottom: 2rem;
}
.eop-overview-row > tbody {
	margin: -10px;
	border-spacing: 10px;
}

.eop-overview-col2 {
	width: 50%;
	vertical-align: top;
    clip-path: inset(0px 5px -24px 0px);
}
.eop-overview-col2:first-child {
	border-right: 5px solid var(--surface-page)
}
.eop-overview-col2:last-child {
	border-left: 5px solid var(--surface-page)
}

.eop-overview-quick-start {
    width: 20%;
    vertical-align: top;
    flex-basis: 435px;
    flex-shrink: 0;

    &.eop-overview-report {
        margin-bottom: 0;
    }
}

.eop-overview-usage {
    width: 100%;
    vertical-align: top;
}

.eop-overview-report {
    padding: 2rem;
    background-color: var(--surface-primary);
    margin-bottom: 2rem;
    align-content: start;
}

.eop-overview-report h1 {
    margin-top: 0;
    margin-left: 0.5rem;
}

.eop-overview-report h2 {
    margin-top: 0;
}

.eop-overview-stats {
    flex-grow: 1;
}

.eop-overview-list-table  {
	border-spacing: 0;
}

.eop-overview-list-table thead th {
	border-bottom: 1px solid var(--border-light);
	padding: 1rem;
	text-align: right;
	text-transform: uppercase;
}

.eop-overview-list-table tbody td {
	border-bottom: 1px solid var(--border-light);
	padding: 1rem;
	text-align: right;
}

.eop-overview-list-table tbody tr:hover {
	background-color: var(--border-light);
}

.eop-customer-dashboard .eop-overview-summary-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

.eop-customer-dashboard .eop-overview-summary-table td:first-child {
    grid-row: span 2;
    grid-column: span 1;
    min-width: 150px;
    flex-wrap: wrap;
}

.eop-overview-summary-table {
    padding: 2rem 0 2rem;
    background-color: var(--surface-primary);
}

.eop-overview-summary-table tr {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: row;
}

.eop-overview-summary-table td {
	font-size: inherit;
	text-align: center;
    flex: 1;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 0.5rem;
    min-width: 100px;
    background-color: var(--surface-tertiary);
    color: var(--text-on-surface);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.eop-overview-summary-table .eop-device-list {
    text-align: start;
    font-size: 0.887rem;
    align-self: self-end;
    flex-basis: 100%;
    overflow: hidden auto;
    max-height: 80px;
}

.eop-overview-summary-table th {
	text-transform: uppercase;
	color: var(--nav-text);
	text-align: right;
	font-weight: normal;
}

.eop-overview-summary-table td .desc {
    flex: 0.8;
    text-align: start;
}

.eop-overview-summary-table td .value {
    font-size: 30px;
    font-family: Ysoft, Arial, sans-serif;
    font-weight: bold;
}

.eop-overview-summary-table td .label {
    font-size: 1rem;
    color: var(--theme-default-text-description);
}

.eop-overview-summary-table td .icon {
    display: inline-block;
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;
    font-size: 36px;
    color: var(--status-info-accent);
}

.k-chart .k-line-series {
    stroke: var(--theme-default-text-red);
}

.eop-list-table-container {
    padding: 2rem;
    background-color: var(--surface-primary);
    margin-bottom: 2rem;
}

.eop-list-table-title {
    float: left;
    margin-right: 2rem;
    height: 4rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-default-text-headings-sub);
}

.eop-list-table-container table {
    border-collapse: collapse;
    width: 100%;
}

.eop-list-table-container td {
    height: 45px;
    font-size: 0.887rem;
    border-top: 1px solid var(--border-divider);
    border-bottom-width: 0;
}

.eop-list-table-container tbody tr:hover {
    background-color: var(--theme-default-table-row-hover);
}

.eop-list-table-container tbody tr.selected {
    background-color: var(--theme-default-table-row-selected);
}

.eop-list-table-container th, .k-grid-header th.k-header {
    text-align: left;
    font-style: normal;
    font-size: 0.887rem;
    font-weight: 600 !important;
    height: 35px !important;
    vertical-align: middle !important;
}

.eop-list-table-inline {
    padding-left: 0;
    padding-right: 0;
    box-shadow: none !important;
}

.eop-certificate-button {
    float: right;
    line-height: 3rem;
    margin-left: 1rem;
}

.eop-top-left-button {
    float: right;
    margin-left: 1rem;
    margin-right: 2rem;
    background-color: var(--status-success-bg);
    color: var(--text-inverse);
    font-size: 0.887rem;
    height: 3rem;
    min-width: 10rem;
    border: none;
}

.eop-form-button-banner .wicket-ajax-indicator {
    float: right;
    margin-top: 1rem;
}

.eop-certificate-button:hover {
    background-color: var(--status-warning-accent);
}

.eop-certificate-button span:hover {
    color: var(--text-inverse);
}

.eop-certificate-container {
    padding: 2rem;
    padding-bottom: 4rem;
    background-color: var(--surface-primary);
    margin-bottom: 2rem;
}

.eop-state-list {
    padding: 2rem;
    font-size: 0.887rem;
}

.eop-state-list table {
    border-collapse: collapse;
    width: 100%;
}

.eop-state-list td {
    height: 4rem;
    border-top: 1px solid var(--border-lighter);
    border-bottom: none;
}

.eop-state-list th {
    text-align: left;
    font-weight: 600;
    font-style: normal;
    height: 2rem;
}

.eop-state-list .terminal-deploy-status-container--with-message .wicket-ajax-indicator {
    margin-left: 0.3rem;
}

.eop-preformatted {
    line-height: 1.6rem;
}

.eop-border {
    border: 1px solid var(--border-light);
    border-radius: 5px;
    padding: 1rem;
}

.eop-dropdown-editable {
    width: 390px;
}

.eop-full-max-width {
    max-width: 96%;
}

/* Drop down menu */

.eop-export-menu .k-button {
    min-width: 12rem;
}

.eop-dropdown-button {
    color: var(--text-inverse);
    padding: 16px;
    cursor: pointer;
}

.eop-dropdown-menu {
    display: inline-block;
}

.eop-dropdown-menu-content {
    display: none !important;
    position: absolute;
    z-index: 100;
}

.eop-dropdown-menu-content a {
    display: block !important;
    padding-top: 14px;
}

.eop-dropdown-menu:hover .eop-dropdown-menu-content {
    display: block !important;
}

.eop-sorted-by-column {
    background-color: var(--status-warning-bg) !important;
}

/* Calendar */

.k-calendar-container {
    width: 338px;
}

.k-calendar > .k-header {
    background-color: var(--surface-primary);
}

.k-i-calendar:before {
    content: "\f133";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

.k-datepicker .k-picker-wrap.k-state-default:hover,
.k-timepicker .k-picker-wrap.k-state-default:hover {
    color: var(--theme-default-button-primary-text) !important;
    background-color: var(--theme-default-button-primary-background-dark) !important;
}

.k-header :hover,
.k-calendar td:hover {
    background-color: var(--surface-primary) !important;
}

.k-calendar .k-link {
    border: none !important;
    box-shadow: none !important;
}

.k-calendar .k-today .k-link {
    color: var(--theme-default-text-default) !important;
    background-color: var(--theme-default-calendar-background-today);
}

.k-calendar td.k-state-selected .k-link {
    color: var(--theme-default-button-primary-text) !important;
    background-color: var(--theme-default-calendar-background-selected);
}

.k-calendar td.k-state-hover .k-link {
    color: var(--theme-default-text-default) !important;
    background-color: var(--theme-default-calendar-background-hover);
}

.k-calendar .k-footer .k-nav-today,
.k-calendar .k-footer .k-nav-today:hover {
    color: var(--theme-default-primary);
}

.k-calendar .k-header .k-button {
    color: var(--theme-default-text-default) !important;
}

.k-calendar .k-header .k-button {
    color: var(--text-on-surface) !important;
}

.k-nav-prev {
    padding: 0.6rem !important;
}

.k-nav-next {
    padding: 0.6rem !important;
}

.k-window-titlebar {
    color: var(--theme-default-text-default);
    background-color: var(--surface-tertiary);
}

.k-window-content {
    margin: 1rem;
}

.w-messagewindow {
    padding: 2rem;
}

.w-messagewindow:has(> .eop-less-padding-window) {
    padding: 2rem 0.5rem;
}

.w-messagewindow-icon {
    font-size: 1.2rem;
    color: var(--theme-default-text-red);
}

.k-window-action > .k-i-close {
    font-size: 1.6rem;
}

/*
 * TabStrip
 */

.k-tabstrip {
    background-color: var(--surface-primary);
    border: 0;
}

.k-tabstrip-items-wrapper {
    background-color: transparent;
}

.k-tabstrip .k-tabstrip-items > .k-item > .k-link {
    color: var(--theme-default-text-default);
}

.k-tabstrip-top .k-tabstrip-items > .k-item {
    border-bottom: 1px solid var(--border-input);
    margin: 0.5rem 0.5rem 0 0;
}

.k-tabstrip-top .k-tabstrip-items > .k-item.k-state-active,
.k-tabstrip-top .k-tabstrip-items > .k-item:hover {
    background-color: transparent !important;
    border-color: transparent;
    border-bottom: 2px var(--border-input-focus) solid;
}

.k-tabstrip-items .k-item.k-hover {
    border-color: transparent;
}

.k-tabstrip-items .k-item {
    background: var(--surface-primary);
    border-bottom-color: transparent;
    color: var(--theme-default-text-default);
}

.k-tabstrip-items .k-item > span {
    color: var(--theme-default-text-default);
}

.k-panelbar .k-tabstrip-items .k-state-active, .k-tabstrip-items .k-state-active {
    background-color: var(--border-light);
    background-image: none;
    border-bottom-color: unset;
}


.k-tabstrip .k-content.k-state-active td {
    border-color: var(--border-divider) !important;
    color: var(--theme-default-text-dark) !important;
}

.k-tabstrip > .k-content {
    border: 1px solid var(--border-light) !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.k-tabstrip .eop-form-container {
    padding: 0;
}

.k-tabstrip:focus {
    box-shadow: unset;
}

.eop-reorder-hint {
    background-color: var(--text-disabled);
    opacity: 0.7;
    width: 40rem;
    border-radius: 1rem;
    padding: 0.5rem;
}

.eop-reorder-hint td {
    background-color: var(--text-disabled) !important;
}

.eop-reorder-placeholder {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--focus-outline);
}

.eop-tree-toolbar {
    position: absolute;
    top: 13px;
    left: 210px;
    z-index: 10;
}

/*
 * Wicket feedback
 */
.feedbackPanel {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.6rem;
}

.feedbackPanelERROR {
    color: var(--theme-default-text-red);
    font-size: 0.887rem;
}

/*
 * Scrollbars
 */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--scrollbar-thumb);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--scrollbar-thumb);
}

/*
* {
    scrollbar-base-color: var(--scrollbar-thumb);
    scrollbar-arrow-color: var(--scrollbar-thumb);
    border-color: var(--scrollbar-thumb);
}
*/


.eop-row-nodelete {
}

.eop-row-nodelete .k-grid-delete {
    display: none;
}

.eop-auth-provider {
    min-width: 300px;
}

.eop-auth-provider-custom-attributes-button {
    padding-top: 0.9rem;
}

.eop-expand-collapse-all {
    background-repeat: no-repeat;
    background-size: 18px 16px;
    width: 18px !important;
    height: 20px;
    margin-right: 4px;
    margin-top: 2px;
    display: inline-block;
}

.eop-icon-expand-all {
    background-image: url('img/eop_icon_expand.svg');
}

.eop-icon-collapse-all {
    background-image: url('img/eop_icon_collapse.svg');
}

.eop-location-info {
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: 10px;
}

.eop-location-header {
    font-size: 0.887rem;
    color: var(--theme-default-text-default);
}

.eop-translated-dropdown {
    width: fit-content;
    min-width: 20rem;
}

.eop-big-select {
    width: var(--full-width-input);
}

input[type=file]::-ms-value {
    background-color: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: 2px;
    outline: none;
    height: 24px;
}

.eop-select-wider {
    width: 20rem !important;
}

.eop-breadcrumbs a {
    color: var(--text-muted);
    font-size: 0.887rem;
    text-decoration: none;
    transition: color 0.2s;
}

.eop-breadcrumbs a:hover {
    color: var(--theme-default-text-default);
}

.eop-detail-content-tabs .eop-tabs {
    margin: 0 !important;
}

.eop-tabs {
    color: var(--theme-default-tab-text);
    margin: 1rem auto 1rem 1rem;
}

.eop-tabs, .eop-detail-content-tabs {
    --tab-padding-vertical: 0.625rem;
}

.eop-tabs .tab-row ul {
    list-style-type: none;
    padding: 1rem 0;
}

.eop-tabs .tab-row li, .eop-detail-content-tabs .tab-row li {
    display: inline-block;
    padding: var(--tab-padding-vertical) 0;
    border-bottom: 1px solid var(--theme-default-tab-border-bottom);
}

:not(.eop-detail-content-tabs) .eop-tabs .tab-row li {
    margin-right: -0.25rem;
}

.eop-tabs .tab-row li.selected, .eop-detail-content-tabs .tab-row li.selected {
    border-bottom: 2px var(--theme-default-tab-border-bottom-selected) solid;
}

.eop-tabs .tab-row li:hover, .eop-detail-content-tabs .tab-row li:hover {
    background-color: var(--theme-default-tab-hover);
}

.eop-tabs .tab-row li a, .eop-detail-content-tabs .tab-row li a  {
    color: var(--theme-default-tab-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--tab-padding-vertical) 1rem
}

.eop-tabs .tab-row li.selected a, .eop-detail-content-tabs .tab-row li.selected a {
    color: var(--theme-default-tab-text-selected) !important;
}

.eop-tabs .tab-row li:disabled a, .eop-detail-content-tabs .tab-row li:disabled a {
    color: var(--theme-default-tab-text-disabled);
}

.eop-tabs .eop-detail-header {
    padding-bottom: 0;
}

.eop-detail-content-tabs {
    margin-right: auto;
    padding-bottom: 2rem;
    color: var(--theme-default-tab-text);
}

.eop-detail-content-tabs .tab-row ul {
    list-style-type: none;
    padding-top: 1rem;
    padding-left: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--surface-primary);
}

.eop-detail-content-tabs .eop-detail-header {
    padding-bottom: 0;
}

.tab-panel .eop-detail-header {
    background-color: inherit;
    padding: 0 0 0 27px;
    color: var(--theme-default-text-headings-sub);
    font-weight: 600;
    font-size: 1.25rem;
    font-family: var(--default-body-font-family) sans-serif;
    width: 95%;
}

.eop-feedback-panel {
    display: grid;
    gap: 8px;
    padding: 0 2rem 0 2rem;
}

:not(.k-window) form .eop-feedback-panel .k-notification:first-child {
    padding-top: 2rem;
}

:not(.k-window) .eop-feedback-panel .k-notification:last-child {
    padding-bottom: 1rem;
}

.eop-breadcrumbs-panel {
    padding-inline: 2rem;
    margin-bottom: 1rem;
}

.eop-icon-rollback {
    background-image: url('img/eop_icon_rollback.svg');
    margin-left: 7px;
}

.k-notification > .k-notification-wrap {
    padding: 16px 16px;
}

.k-notification-error, .k-notification-success, .k-notification-warning, .k-notification-info {
    background-color: transparent;
}

.k-notification-error > .k-notification-wrap,
.k-notification-success > .k-notification-wrap,
.k-notification-warning > .k-notification-wrap,
.k-notification-info > .k-notification-wrap {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    color: var(--text-heading);
    border-radius: 5px;
    font-size: inherit;
}

.k-notification-error > .k-notification-wrap:before,
.k-notification-success > .k-notification-wrap:before,
.k-notification-warning > .k-notification-wrap:before,
.k-notification-info > .k-notification-wrap:before {
    background-size: 18px 18px;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 16px;
    content: "";
}

.k-notification-error > .k-notification-wrap {
    background-color: var(--theme-default-message-error-background);
    border: 2px solid var(--theme-default-message-error-border);
}

.k-notification-error > .k-notification-wrap:before {
    background-image: url("img/eop_icon_alert_error.svg");
}

.k-notification-success > .k-notification-wrap {
    background-color: var(--theme-default-message-success-background);
    border: 2px solid var(--theme-default-message-success-border);
}

.k-notification-success > .k-notification-wrap:before {
    background-image: url("img/eop_icon_greencheck.svg");
}

.k-notification-warning > .k-notification-wrap {
    background-color: var(--theme-default-message-warning-background);
    border: 2px solid var(--theme-default-message-warning-border);
}

.k-notification-warning > .k-notification-wrap:before {
    background-image: url("img/eop_icon_alert_warning.svg");
}

.k-notification-info > .k-notification-wrap {
    background-color: var(--theme-default-message-info-background);
    border: 2px solid var(--theme-default-message-info-border);
}

.k-notification-info > .k-notification-wrap:before {
    background-image: url("img/eop_icon_alert_info.svg");
}

.description-link-input-port {
    background-color: var(--surface-code-block);
    border-radius: 5rem;
    padding: 0.5rem;
    max-width: 200px;
    text-align: center;
}

.description-link-input-port a {
    color: var(--text-on-code);
}

.description-link-input-port a:visited {
    color: var(--text-on-code);
}

.k-grid td.k-state-selected:hover, .k-grid tr.k-state-selected:hover td {
    color: var(--theme-default-text-description);
    background-color: var(--theme-default-table-row-hover) !important;
}

.k-grid td.k-state-selected, .k-grid tr.k-state-selected > td {
    color: var(--theme-default-text-description);
    border-color: var(--theme-default-table-row-border-selected) !important;
    background-color: var(--theme-default-table-row-selected) !important;
}

.k-grid td {
    overflow-y: visible;
    overflow-x: clip;
}

.k-grid tr:hover {
    background-color: var(--theme-default-table-row-hover);
}

[data-required]:after {
    content: " *";
    color: var(--theme-default-tab-border-bottom);
}

.eop-form-input-required {
    display: flex;
}

.eop-indicator-icon {
    height: 1.4rem;
    width: 1.4rem;
    display: block;
    background-size: contain;
}

.eop-indicator-icon.greencheck {
    background-image: url('img/eop_icon_greencheck.svg');
}

.eop-indicator-icon.redcross {
    background-image: url('img/eop_icon_redcross.svg');
}

.input-port-content-desc-panel .k-button {
    border: 0 !important;
    color: var(--theme-default-text-dark);
    margin-left: 0.5rem;
    height: 2.5rem;
    box-shadow: unset !important;
    background-color: var(--text-disabled);
}

.input-port-content-desc-panel .k-button:hover {
    background-color: var(--text-disabled);
}

.input-port-content-desc-panel .input-port-store-download {
    display: flex;
    height: 3rem;
    align-items: center;
}

.input-port-content-desc-panel .store-download {
    background-repeat: no-repeat;
    display: inline-block;
    background-size: contain;
}

.app-download-graphic {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 230px;
    height: 110px;
}

.app-download-graphic-desktop {
    background-image: url('img/eop_app_desktop_graphic.png');
}

.app-download-graphic-mobile {
    background-image: url('img/eop_app_mobile_graphic.png');
    position: relative;
}

.app-mobile-qr-code {
    width: 77px;
    position: absolute;
    bottom: -8px;
}

.app-mobile-qr-code-left {
    left: 8px
}

.app-mobile-qr-code-right {
    right: 8px
}

.app-mobile-qr-code-left.app-mobile-qr-code-zoomed {
    z-index: 1000;
    margin-left: 68px;
}

.app-mobile-qr-code-right.app-mobile-qr-code-zoomed {
    z-index: 1000;
    margin-right: 68px;
}

.app-download-twin-buttons {
    display: flex;
    margin-block-start: 0.5em;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1em;
    width: 285px;
}

.app-downloads-link-button {
    width: 8.3rem;
    height: 2.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    background-color: var(--surface-code-block);
    color: var(--text-on-code);
    border-radius: 4px;
    cursor: pointer;
}

.app-downloads-link-button.disabled {
    background-color: var(--surface-code-inline);
    color: var(--text-on-code);
    pointer-events: none;
}

.app-downloads-link {
    width: 8.5rem;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.download-img {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    display: inline-block;
    background-image: url('img/eop_icon_download.svg');
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(100%);
}

.download-img-windows {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    display: inline-block;
    background-image: url('img/os_windows.svg');
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(100%);
}

.download-img-mac {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    display: inline-block;
    background-image: url('img/os_mac.svg');
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(100%);
}

.eop-privacy-description ul {
    list-style: disc;
    padding-left: 15px;
}

.eop-privacy-description li {
    margin-bottom: 0.5rem;
}

.eop-privacy-hidden {
    color: var(--text-muted);
}

.eop-shared-secret-key-input {
    white-space: nowrap;
}

.feedbackBorderERROR {
    color: var(--theme-default-text-red);
}

.eop-loader-block {
    display: table;
}
.eop-loader-spin,.eop-loader-message {
    display: table-cell;
    vertical-align: middle;
}
.eop-loader-message {
    padding-left: 10px;
}

#search-input-container {
    padding: 0 0 0 43px;
}

#search-input-row {
    position: absolute;
    width: min-content;
    z-index: 2;
    margin-top: 4px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
}

.table-cell-subtext {
    font-size: 80%;
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-y: visible;
    overflow-x: clip;
    max-width: fit-content;
    padding-right: 1.25rem;
    min-width: 3.5rem;
}

.table-cell-subtext:after {
    margin-top: 1rem !important;
}

#search-input-row .eop-form-col-title {
    min-width: auto;
    white-space: nowrap;
}

/*
* Confirmation window
*/
.confirmation-window.k-window-content {
    margin: 6px;
}

.confirmation-window .container-button {
    float: right;
    display: inline-block;
}

.confirmation-window .group-button {
    display: inline-block;
}

.confirmation-window .group-button-cancel {
    background-color: var(--theme-default-button-secondary-background);
    color: var(--theme-default-button-secondary-text);
    border-radius: 0.3rem;
    border: 1px solid var(--theme-default-button-secondary-border);
    height: 3rem;
    min-width: 10rem;
}

.confirmation-window .group-button-cancel:hover {
    background-color: var(--theme-default-button-secondary-background-active);
}

.confirmation-window .group-button-cancel:focus:active {
    background-color: var(--theme-default-button-secondary-background-active);
    color: var(--theme-default-button-secondary-text);
    box-shadow: var(--shadow-inset-active) !important;
}

.confirmation-window .group-button-link {
    background-color: var(--theme-default-button-primary-background);
    color: var(--theme-default-button-primary-text);
    height: 3rem;
    min-width: 10rem;
}

.confirmation-window .group-button-link:hover {
    background-color: var(--theme-default-button-primary-background-dark);
}

.confirmation-window .group-button-link:focus {
    color: var(--theme-default-button-primary-text);
}

.confirmation-window .group-button-link:focus:active {
    box-shadow: var(--shadow-inset-heavy) !important;
}

.confirmation-window .message-label {
    font-weight: bold;
}

.confirmation-window .message-label-detail {
    margin: 6px 0px 0px 0px;
}

.confirmation-window .form-container {
    max-width: var(--max-form-width);
    color: var(--body-color);
}

.confirmation-window .form-row {
    width: 100%;
    padding-bottom: 24px;
}

.confirmation-window .feedback-panel-info {
    width: 240px;
}

.button-row {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: right;
}

.button-row-left-justify {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-start;
}

.button-row .k-dropzone {
    padding: 0;
}

.my-document-status-row img {
    margin-left: 5px;
    position: relative;
    top: 3px;
}

.k-block form, .eop-list-table-container, .upload-and-download-block, .document-collect-panel, .eop-overview-report, .superset-error-panel {
    box-shadow: var(--shadow-card)
}

.account-access-reason-display-popup-link{
    display: none;
}


/*
 Overlay
*/
.loading-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--surface-overlay);
    animation: fadeIn 1s;
    z-index: 999;
}

.loading-overlay .loading-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*
 Spinners, loaders
*/

/* New CSS based spinner */
.loading-wheel,
span.k-icon.k-i-expand.k-i-loading {
    position: relative;
    animation: spin 1s linear infinite;
}

.loading-wheel::before,
span.k-icon.k-i-expand.k-i-loading::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid var(--status-warning-accent);
    animation: wheelClip 2s linear infinite;
}

@keyframes wheelClip {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

/* Override Kendo's tree expand spinner */
span.k-icon.k-i-expand.k-i-loading {
    background: none;
}

span.k-icon.k-i-expand.k-i-loading::after {
    inset: 4px;
    border-width: 2px;
    border-color: var(--text-inverse);
}

/* Old existing spinners */
.spinner {
    border: 5px solid var(--spinner-track);
    border-top: 5px solid var(--spinner-fill);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wait-for-download {
    background-image: url("img/loader.gif");
    filter: saturate(100%) invert(100%);
}

.search-loader-message {
    padding: 1rem 3rem;
    font-weight: 600;
    background-image: url('img/loader.gif');
    background-repeat: no-repeat;
    background-position: 0.5rem 1rem;
    background-size: 1.2rem 1.2rem;
    font-size: 1.2rem;
}

.eop-loader {
    background-image: url('img/loader.gif');
    width: 22px;
    height: 22px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Override Kendo's image loading spinner */
.k-loading-image {
    background-image: url('img/loader.gif') !important;
    background-size: 32px 32px;
    background-position: center;
    background-color: transparent !important;
}

.k-loading-mask {
    background-color: transparent !important;
}


/*
* Tooltip
*/
[data-title], .tooltip-link {
    position: relative;
}

[data-title]:not([data-title=""]):hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.2s;
    visibility: visible;
}

/* MUST stay after the show rule above: both score (0,3,0), so this one wins on source order alone.
   Set by the truncation measurer in eop.js on hosts whose text is not clipped, where the bubble
   would only repeat what is already fully readable. */
.eop-tooltip-suppressed[data-title]:hover:after {
    visibility: hidden;
    opacity: 0;
}

[data-title]:after {
    content: attr(data-title);
    visibility: hidden;
    max-width: 10rem;
    width: max-content;
    background-color: var(--theme-default-text-headings-sub);
    color: var(--text-inverse);
    text-align: center;
    line-height: 0.85rem;
    font-size: 0.75rem;
    font-weight: normal;
    padding: 0.25rem 0.5rem 0.15rem 0.5rem;
    border-radius: 0.25rem;
    white-space: normal;
    pointer-events: none;

    position: absolute;
    z-index: 99999;
    margin-top: 0.75rem;
    left: 50%;
    transform: translate(-50%, 0);
}

.tooltip-element-fit {
    width: fit-content;
    height: fit-content;
}

.tooltip-element:after {
    top: 100%;
}

/* A disabled form control is not hit-tested by the browser, so hovering it never sets :hover on the wrapper span that
   TooltipWrapperBehavior puts around it and the tooltip never appears. Let the pointer through to the wrapper, which is
   what carries the bubble. */
.tooltip-element > :disabled,
.tooltip-element > .k-state-disabled {
    pointer-events: none;
}

/* .eop-form-button-banner is a zero-height flex row, so the wrapper span would be stretched to 0px with the button
   hanging outside it - nothing left to hover, and ".tooltip-element:after { top: 100% }" would put the bubble above the
   button. Size the span to the button and let it carry the button's offset instead. */
.eop-form-button-banner > .tooltip-element {
    align-self: flex-start;
    margin-top: 1rem;
}

.eop-form-button-banner > .tooltip-element > input {
    margin-top: 0;
}

.k-command-cell:has(> .tooltip-element) {
    overflow-x: visible;
}

.k-pager-wrap {
    font-size: 0.887rem;
}

.eop-empty-state-icon {
    background-image: url('img/eop_icon_triangle_exclamation.svg');
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.eop-empty-state-icon--pc-client {
    background-image: url('img/eop_icon_empty_state_pc_client.svg');
}

.eop-empty-state-icon--wide-area-mobile-print {
    background-image: url('img/eop_icon_empty_state_mobile.svg');
}

.eop-empty-state-icon--my-authorizations {
    background-image: url('img/eop_icon_empty_state_connectors.svg');
}

.eop-empty-state-icon--printers {
    background-image: url('img/eop_icon_empty_state_print.svg');
}

.eop-empty-state-icon--endpoints {
    background-image: url('img/eop_icon_empty_state_endpoints.svg');
}

.eop-empty-state-icon--servers {
    background-image: url('img/eop_icon_empty_state_servers.svg');
}

.eop-empty-state-icon--certificates {
    background-image: url('img/eop_icon_empty_state_certificates.svg');
}

.eop-empty-state-icon--locations {
    background-image: url('img/eop_icon_empty_state_location.svg');
}

.eop-empty-state-icon--sessions {
    background-image: url('img/eop_icon_empty_state_pc_client.svg');
}

.eop-empty-state-icon--users {
    background-image: url('img/eop_icon_empty_state_search.svg');
}

.eop-empty-state-icon--waiting-jobs {
    background-image: url('img/eop_icon_empty_state_print.svg');
}

.eop-empty-state-icon--printed-jobs {
    background-image: url('img/eop_icon_empty_state_print.svg');
}

.eop-empty-state-icon--scan-jobs {
    background-image: url('img/eop_icon_empty_state_scan.svg');
}

.eop-empty-state-icon--web-upload {
    background-image: url('img/eop_icon_empty_state_upload.svg');
}

.eop-empty-state-icon--scan-workflows {
    background-image: url('img/eop_icon_empty_state_scan.svg');
}

.eop-empty-state-icon--scan-connectors {
    background-image: url('img/eop_icon_empty_state_connectors.svg');
}

.eop-empty-state-icon--scan-access-control {
    background-image: url('img/eop_icon_empty_state_scan.svg');
}

.eop-empty-state-icon--messaging {
    background-image: url('img/eop_icon_empty_state_envelope.svg');
}

.eop-empty-state-icon--templates {
    background-image: url('img/eop_icon_empty_state_envelope.svg');
}

.eop-empty-state-icon--error {
    background-image: url('img/eop_icon_empty_state_error.svg');
}

.eop-empty-state-icon--secured {
    background-image: url('img/eop_icon_empty_state_secured.svg');
}

.eop-empty-state-icon--search {
    background-image: url('img/eop_icon_empty_state_search.svg');
}

.eop-empty-state-icon--zonal-ocr {
    background-image: url('img/eop_icon_empty_state_scan.svg');
}

.left-nav-product {
    background-color: var(--nav-bg-active);
    font-size: 80%;
    color: var(--text-inverse);
    padding: 3px 5px 2px 5px;
    border-radius: 3px;
}

.video-flex-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.video-flex-container .full-width {
    width: 100%;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-description {
    height: 4.25rem;
    background-color: var(--surface-primary);
    padding: 1.375rem 1rem;
    font-size: 1.125rem;
}

.relative-container {
    position: relative;
}

.k-button-overview {
    position: absolute;
    right: 0;
    background-color: transparent;
    height: 2.5rem;
    min-width: 11rem;
    font-size: 0.875rem;
}

.k-button-overview.top {
    top: 0;
}
.k-button-overview.bottom {
    bottom: 0;
}

.k-button-copy {
    box-shadow: none !important;
}

.k-button-copied {
    background-repeat: no-repeat;
    box-shadow: none !important;
    background-image: url('img/eop_icon_greencheck.svg');
}
.k-button-copy-failed {
    background-repeat: no-repeat;
    background-image: url('img/eop_icon_redcross.svg');
    box-shadow: none !important;
}

.audit-logs-disabled {
    background-color: var(--surface-page) !important;
}

/* Block: eop-floating-input - Floating label input component */
.eop-floating-input {
    position: relative;
    max-width: 100%;
    max-height: 3.375rem;
}

.eop-floating-input__label {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    font-weight: lighter;
    color: var(--theme-default-disabled);
    transition: all 0.2s ease-in-out;
}

.eop-floating-input__field {
    box-sizing: border-box;
    border-radius: 0.3125rem;
    width: 100%;
    height: 3.375rem;
    background-color: var(--theme-default-primary-background);
    border: 0.0625rem solid var(--theme-default-disabled);
    margin-bottom: 0.625rem;
    padding: 1rem 1.25rem;
}

/* separated to increase specificity */
input.eop-floating-input__field {
    text-indent: 0;
}

.eop-floating-input__field::placeholder {
    color: var(--theme-default-disabled);
}

.eop-floating-input__field:focus {
    border-color: var(--theme-default-primary);
    box-shadow: none;
    background-color: var(--theme-default-primary-background);
    outline: none;
}

.eop-floating-input__field:focus,
.eop-floating-input__field:not(:placeholder-shown) {
    padding: 1.75rem 1.25rem 0.75rem 1.25rem;
}

.eop-floating-input__field:focus + .eop-floating-input__label,
.eop-floating-input__field:not(:placeholder-shown) + .eop-floating-input__label {
    top: 0.5rem;
    transform: translateY(0);
    font-size: 0.75rem;
    color: var(--theme-default-text-description);
}

.eop-floating-input__field:focus + .eop-floating-input__label {
    color: var(--theme-default-primary);
}

.eop-floating-input__info {
    font-size: 0.75rem;
    color: var(--theme-default-text-description);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    line-height: 135%;
}

.eop-floating-input__label.error {
    background: none;
    border: none;
    color: var(--theme-red-primary);
}

.eop-floating-input:has(.eop-floating-input__label.error) .eop-floating-input__field {
    border-color: var(--theme-red-primary) !important;
}

.button-primary {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-inverse);
    background-color: var(--theme-default-primary);
    border-radius: 0.25rem;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
}

.button-primary.k-state-active {
    background-color: var(--theme-default-link-hover);
    color: var(--text-inverse);
}

.button-primary--hover-dark, .button-primary--hover-dark.k-button {
    background-color: var(--theme-default-button-primary-background-dark);
    color: var(--theme-default-button-primary-text);
}

.k-button.right-aligned {
    float: right;
    margin-left: 1rem;
    margin-top: 1rem;
}

.block {
    display: block;
}

.tooltip-element .tooltip-element:after {
    display: none;
}

.k-list-filter {
    display: flex;
    margin-bottom: .286em;
}

.k-list-filter>.k-textbox {
    margin-left: 0.3rem;
    margin-right: 2rem;
}

.uppercase {
    text-transform: uppercase;
}

/* Beta tag badge */
.eop-beta-tag {
    display: inline-block;
    font-size: 12px;
    font-family: var(--default-body-font-family), sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--theme-default-primary);
    background-color: var(--theme-default-palette-button-background);
    border: 1px var(--theme-default-primary) solid;
    padding: 2px 8px;
    border-radius: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: 8px;
}

/* Dark mode: Kendo widget overrides
   :root.dark prefix bumps specificity to (0,N+1,0) so these beat
   Kendo Material theme rules that may load after eop.css. */
:root.dark .k-widget, :root.dark .k-grid, :root.dark .k-window {
    background-color: var(--surface-primary);
    color: var(--text-on-surface);
}
:root.dark .k-grid-header, :root.dark .k-grid-footer {
    background-color: var(--surface-secondary);
}
:root.dark .k-textbox, :root.dark .k-input, :root.dark .k-dropdown {
    background-color: var(--input-bg);
    color: var(--text-on-surface);
    border-color: var(--border-default);
}
/* Base Kendo button - override Material theme's hardcoded #f5f5f5 */
:root.dark .k-button {
    background-color: var(--surface-secondary);
    color: var(--text-on-surface);
    border-color: var(--border-default);
}
/* Secondary buttons must remain outline-style in dark mode */
:root.dark .eop-detail-view .eop-bg-secondary,
:root.dark .k-window .eop-bg-secondary {
    background-color: var(--theme-default-button-secondary-background);
    color: var(--theme-default-button-secondary-text);
    border-color: var(--theme-default-button-secondary-border);
}
:root.dark .k-state-hover {
    background-color: var(--surface-secondary);
}
/* Input wrapper default states - override Kendo's hardcoded #fafafa/#f0f0f0 */
:root.dark .k-autocomplete,
:root.dark .k-colorpicker .k-picker-wrap,
:root.dark .k-dropdown-wrap.k-state-default,
:root.dark .k-numeric-wrap.k-state-default,
:root.dark .k-picker-wrap.k-state-default {
    background-color: var(--input-bg);
    border-color: var(--border-input);
}
:root.dark .k-numerictextbox .k-select {
    background-color: var(--input-bg);
    border-color: var(--border-input);
}
/* Input wrapper hover states - override Kendo's hardcoded #fff */
:root.dark .k-autocomplete.k-state-hover,
:root.dark .k-dropdown-wrap.k-state-hover,
:root.dark .k-numeric-wrap.k-state-hover,
:root.dark .k-picker-wrap.k-state-hover {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    box-shadow: none;
}
:root.dark .k-textbox:hover {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    box-shadow: none;
}
:root.dark .k-state-selected {
    background-color: var(--surface-tertiary);
}
/* Active/focus state wrappers */
:root.dark .k-autocomplete.k-state-active,
:root.dark .k-dropdown-wrap.k-state-active,
:root.dark .k-multiselect.k-header.k-state-active,
:root.dark .k-numeric-wrap.k-state-active,
:root.dark .k-picker-wrap.k-state-active,
:root.dark .k-textbox:focus {
    background-color: var(--input-bg);
    border-color: var(--border-input-focus);
    box-shadow: none;
}

/* Grid alternating rows */
:root.dark .k-grid .k-alt {
    background-color: var(--surface-primary);
}

/* Combobox, datepicker, timepicker backgrounds */
:root.dark .k-combobox,
:root.dark .k-combobox .k-input,
:root.dark .k-datepicker,
:root.dark .k-datepicker .k-input,
:root.dark .k-datetimepicker,
:root.dark .k-datetimepicker .k-input,
:root.dark .k-timepicker,
:root.dark .k-timepicker .k-input {
    background-color: var(--input-bg);
    color: var(--text-on-surface);
}

/* Dropdown input text color and menu popup */
:root.dark .k-dropdown .k-input,
:root.dark .k-dropdown .k-state-focused .k-input,
:root.dark .k-menu .k-popup {
    color: var(--text-on-surface) !important;
    background-color: var(--surface-primary);
}

/* Menu and group overrides */
:root.dark .k-group,
:root.dark .k-menu,
:root.dark .k-menu .k-group,
:root.dark .k-popup.k-widget.k-context-menu {
    color: var(--text-on-surface);
    background-color: var(--surface-primary);
}

/* Dropdown list popup */
:root.dark .k-popup.k-list-container {
    background-color: var(--surface-primary);
    color: var(--text-on-surface);
    border-color: var(--border-default);
}

/* Kendo grid td border */
:root.dark .k-grid td {
    border-color: var(--border-default);
}

/* Kendo button base */

/* Kendo chart background */
:root.dark .k-chart {
    background-color: var(--surface-primary);
    color: var(--text-on-surface);
}

/* Multi-select */
:root.dark select[multiple] {
    background-color: var(--input-bg);
    color: var(--text-on-surface);
    border-color: var(--border-input);
}

/* Icon inside Kendo buttons — primary color is invisible on teal surface-secondary */
:root.dark .k-button .sqc-fa-icon {
    color: var(--theme-default-button-primary-text);
}

/* Tooltips - invert for dark mode (light gray bg + white text is unreadable) */
:root.dark [data-title]:after {
    background-color: var(--surface-tertiary);
    color: var(--text-on-surface);
}