html {
    font-size: var(--brand-font-size-root, 16px);
}

body {
    font-family: var(--brand-font-latin);
    font-size: 1rem;
    font-size: var(--brand-font-size-body, 1rem);
    font-weight: var(--brand-font-weight-normal, 400);
    line-height: var(--brand-line-height-base, 1.5);
}

.sidebar,
.left-panel {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

.sidebar .nav-link,
#left-panel .navbar .navbar-nav li > a {
    font-family: var(--brand-font-latin);
    min-height: 42px;
    line-height: var(--brand-line-height-control, 1.4);
}

body:not(.open) #left-panel .navbar .navbar-nav li > a,
.sidebar .nav-link {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

.form-label,
.control-label,
.col-form-label,
.label-style {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-medium, 500);
    line-height: var(--brand-line-height-control, 1.4);
}

form label {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-medium, 500);
    line-height: var(--brand-line-height-control, 1.4);
}

form input:not([type]),
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
form input[type="search"],
form input[type="tel"],
form input[type="url"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="month"],
form input[type="time"],
form input[type="week"],
form select {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    box-sizing: border-box;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-control, 1.4);
}

form textarea {
    min-height: 42px;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-control, 1.4);
}

.form-control:not(.k-widget),
.form-select:not(.k-widget),
.input-sm:not(.k-widget),
.input-lg:not(.k-widget),
.form-control-sm:not(.k-widget),
.form-control-lg:not(.k-widget),
.form-select-sm:not(.k-widget),
.form-select-lg:not(.k-widget),
input.k-input:not([type="hidden"]):not([hidden]) {
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    padding: 4px 12px;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-control, 1.4);
}

:is(input, select):not(.k-widget):not(.k-input):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
input.k-input:not([type="hidden"]):not([hidden]),
input.k-textbox:not([type="hidden"]):not([hidden]) {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    box-sizing: border-box;
}

.k-widget.form-control,
.k-widget.k-datepicker,
.k-widget.k-datetimepicker,
.k-widget.k-timepicker,
.k-widget.k-dropdown,
.k-widget.k-dropdownlist,
.k-widget.k-multiselect,
.k-widget.k-numerictextbox,
.k-widget.k-combobox,
.k-widget.k-autocomplete {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    padding: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.k-picker-wrap,
.k-dropdown-wrap,
.k-numeric-wrap,
.k-multiselect-wrap {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

.k-dropdown-wrap .k-input,
.k-picker-wrap .k-input,
.k-numeric-wrap .k-input {
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 4px 12px;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-control, 1.4);
}

/* Keep selected Kendo values and multiselect chips at the same size as form input text. */
.k-widget.k-dropdown .k-dropdown-wrap .k-input,
.k-widget.k-dropdownlist .k-dropdown-wrap .k-input,
.k-widget.k-combobox .k-dropdown-wrap .k-input,
.k-widget.k-multiselect .k-multiselect-wrap .k-button,
.k-widget.k-multiselect .k-multiselect-wrap .k-button > span:not(.k-icon) {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

.k-multiselect-wrap input.k-input:not([type="hidden"]):not([hidden]) {
    height: auto;
    min-height: 0;
    padding: 0;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: 32px;
}

.k-dropdown-wrap .k-select,
.k-picker-wrap .k-select,
.k-numeric-wrap .k-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    line-height: 1;
}

/* Kendo 2022 control sizing applies consistently across application pages. */
.k-datepicker.k-input,
.k-dropdownlist.k-picker,
.k-multiselect.k-input {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    font-size: 14px;
    font-size: var(--brand-font-size-base, 0.875rem);
}

/* The date input stretches while its calendar button stays centered at the right edge. */
.k-datepicker.k-input > .k-input-button {
    display: inline-flex;
    flex: 0 0 32px;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin-inline-start: auto;
    padding: 0;
    line-height: 1;
}

.k-dropdownlist.k-picker > .k-input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* The down-chevron glyph sits optically high even when its button is flex-centered. */
.k-dropdownlist.k-picker > .k-input-button > .k-icon.k-i-arrow-60-down,
.k-dropdownlist.k-picker > .k-input-button > .k-icon.k-i-arrow-s,
.k-dropdown-wrap .k-select > .k-icon.k-i-arrow-60-down,
.k-dropdown-wrap .k-select > .k-icon.k-i-arrow-s {
    transform: translateY(1px);
}

input.k-textbox:not([type="hidden"]):not([hidden]) {
    height: 34px;
    height: var(--brand-control-height, 34px);
    min-height: 34px;
    min-height: var(--brand-control-min-height, 34px);
    padding: 4px 12px;
    box-sizing: border-box;
}

/* Login fields own their capsule radius; ordinary application controls use 4 px. */
form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not(.login-input),
input.k-input:not([type="hidden"]):not([hidden]):not(.login-input),
input.k-textbox:not([type="hidden"]):not([hidden]):not(.login-input) {
    border-radius: 4px;
}

.k-list-container,
.k-list,
.k-list .k-item,
.k-list .k-list-item,
.k-popup .k-item,
.k-popup .k-list-item {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

.form-control::placeholder,
.input-sm::placeholder,
.input-lg::placeholder,
.form-control-sm::placeholder,
.form-control-lg::placeholder {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

input.k-input::placeholder,
textarea.k-input::placeholder {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
}

.Content .form-group.row,
.content .form-group.row,
#content .form-group.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;
}

.Content .form-group.row > [class*="col-"],
.content .form-group.row > [class*="col-"],
#content .form-group.row > [class*="col-"] {
    min-width: 0;
}

.Content .form-group.row > [class*="col-"] > label,
.content .form-group.row > [class*="col-"] > label,
#content .form-group.row > [class*="col-"] > label {
    display: flex;
    align-items: center;
    min-height: var(--brand-control-min-height, 34px);
    margin-bottom: 0;
}

.Content .form-group.row > [class*="col-"] > .form-control,
.Content .form-group.row > [class*="col-"] > .form-select,
.Content .form-group.row > [class*="col-"] > .k-widget,
.Content .form-group.row > [class*="col-"] > input.k-input,
.content .form-group.row > [class*="col-"] > .form-control,
.content .form-group.row > [class*="col-"] > .form-select,
.content .form-group.row > [class*="col-"] > .k-widget,
.content .form-group.row > [class*="col-"] > input.k-input,
#content .form-group.row > [class*="col-"] > .form-control,
#content .form-group.row > [class*="col-"] > .form-select,
#content .form-group.row > [class*="col-"] > .k-widget,
#content .form-group.row > [class*="col-"] > input.k-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Keep search criteria rows and their controls consistent across every page. */
.brand-search-form .form-group.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;
}

.brand-search-form .form-group.row > [class*="col-"] {
    min-width: 0;
}

.brand-search-form .form-group.row > [class*="col-"] > label:not([hidden]),
.brand-search-form .form-group.row > [class*="col-"] > .label-style:not([hidden]) {
    display: flex;
    align-items: center;
    min-height: var(--brand-control-min-height, 34px);
    margin-bottom: 0;
}

.brand-search-form .form-group.row > [class*="col-"] > .form-control,
.brand-search-form .form-group.row > [class*="col-"] > .form-select,
.brand-search-form .form-group.row > [class*="col-"] > .k-widget,
.brand-search-form .form-group.row > [class*="col-"] > input.k-input,
.brand-search-form .form-group.row > [class*="col-"] > .i-fg-data-entry {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Search and clear actions use the same centered, responsive action row. */
.brand-search-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.brand-search-actions > .btn {
    flex: 0 0 auto;
    width: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 44px;
    min-height: var(--brand-button-min-height, 44px);
    padding: 8px 16px;
    border-radius: var(--brand-button-radius, 4px);
    box-sizing: border-box;
    font-size: var(--brand-button-font-size, 16px);
    font-weight: var(--brand-font-weight-medium, 500);
    line-height: var(--brand-line-height-control, 1.4);
    text-align: center;
    vertical-align: middle;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.btn.btn-block {
    display: flex;
}

.btn:focus-visible:not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light),
.k-grid .k-button:focus-visible,
button.close:focus-visible,
button.otp-modal-close:focus-visible,
button.k-upload-action:focus-visible {
    outline: 2px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

.btn[aria-busy="true"] {
    cursor: progress !important;
}

button.btn[aria-busy="true"]:not(.dropdown-toggle):not(#btn-login):not(.btn-send-otp):not(.otp-confirm-button)::after,
a.btn[aria-busy="true"]:not(.dropdown-toggle)::after {
    content: "";
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: brand-button-spin 750ms linear infinite;
}

@keyframes brand-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    button.btn[aria-busy="true"]::after,
    a.btn[aria-busy="true"]::after { animation: none; }
}

@media (pointer: coarse) {
    :root { --brand-pagination-target-size: 44px; }

    button.close,
    button.otp-modal-close,
    button.k-upload-action {
        min-width: 44px;
        min-height: 44px;
    }
}

.btn-group-xs > .btn,
.btn-xs {
    font-size: var(--brand-button-font-size, 16px);
}

.table {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-base, 1.5);
}

.table th,
.table.table-condensed th {
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-size: var(--brand-font-size-sm, 0.8125rem);
    font-weight: var(--brand-font-weight-semibold, 600);
    line-height: var(--brand-line-height-control, 1.4);
}

.table td,
.table.table-condensed td {
    padding: 10px 12px;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-base, 1.5);
}

.k-grid {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-base, 1.5);
}

.k-grid .k-grid-header th.k-header {
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-size: var(--brand-font-size-sm, 0.8125rem);
    font-weight: var(--brand-font-weight-semibold, 600);
    line-height: var(--brand-line-height-control, 1.4);
}

.k-grid .k-grid-content td {
    padding: 10px 12px;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-base, 1.5);
}

.k-grid .k-button {
    min-height: 44px;
    min-height: var(--brand-button-min-height, 44px);
    padding: 8px 12px;
    font-size: var(--brand-button-font-size, 16px);
    font-weight: var(--brand-font-weight-medium, 500);
    line-height: var(--brand-line-height-control, 1.4);
}

.k-grid .k-grid-norecords td,
.k-grid .k-nodata {
    padding: 12px;
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-medium, 500);
}

.k-pager-wrap,
.pagination,
.pagination-sm,
.pagination-lg {
    font-size: 0.8125rem;
    font-size: var(--brand-font-size-sm, 0.8125rem);
}

.k-pager-info,
.k-pager-sizes {
    font-size: 0.8125rem;
    font-size: var(--brand-font-size-sm, 0.8125rem);
}

.k-pager-wrap .k-link,
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
    min-width: var(--brand-pagination-target-size, 32px);
    min-height: var(--brand-pagination-target-size, 32px);
    font-size: 0.8125rem;
    font-size: var(--brand-font-size-sm, 0.8125rem);
}

.section-title,
.sub-header-title,
.card-header > h1,
.card-header > h2,
.card-header > h3,
.card-header > h4,
.card-header > h5,
.card-header > h6 {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.25rem;
    font-size: var(--brand-font-size-md, 1.25rem);
    font-weight: var(--brand-font-weight-semibold, 600);
    line-height: var(--brand-line-height-control, 1.4);
}

.card-header,
.k-card-header {
    padding: 0.25rem 1.25rem !important;
    color: #212529;
    background-color: var(--brand-fibre-green, #7DC341);
    background-image: linear-gradient(
        90deg,
        var(--brand-fibre-green, #7DC341) 0%,
        var(--brand-fibre-green, #7DC341) 90%,
        var(--brand-fibre-orange, #F5781E) 100%
    );
}

.Header-title,
.brand-header-metadata {
    font-size: 0.875rem;
    font-size: var(--brand-font-size-base, 0.875rem);
    line-height: var(--brand-line-height-control, 1.4);
}

/* Center the application name and account details within the shared top-header row. */
.right-panel header.header .header-menu {
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .right-panel header.header .header-menu {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .Content .form-group.row > [class*="col-"] > label,
    .content .form-group.row > [class*="col-"] > label,
    #content .form-group.row > [class*="col-"] > label {
        min-height: auto;
        margin-bottom: 6px;
    }
}

.helper-text,
.small,
small {
    font-size: var(--brand-font-size-xs, 0.75rem);
}

.text-style-data-not-found {
    padding: 12px;
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-medium, 500);
    line-height: var(--brand-line-height-base, 1.5);
}

.field-validation-error,
.validation-summary-errors,
.invalid-feedback {
    font-size: var(--brand-font-size-sm, 0.8125rem);
    line-height: var(--brand-line-height-control, 1.4);
}

.user-area .user-info .name {
    font-size: var(--brand-font-size-sm, 0.8125rem);
}

.user-area > a,
.user-area .user-menu,
.user-area .user-menu .nav-link {
    font-size: var(--brand-font-size-sm, 0.8125rem);
}

.navbar-nav li span.count,
.user-area .count,
.header-left .dropdown .dropdown-toggle .count {
    min-width: 18px;
    min-height: 18px;
    font-size: var(--brand-font-size-xs, 0.75rem);
    line-height: 18px;
}

.header-left .dropdown .dropdown-menu .dropdown-item .message .time {
    font-size: var(--brand-font-size-xs, 0.75rem);
}

.brand-logo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--brand-logo-safe-space);
    vertical-align: middle;
}

.brand-logo {
    display: block;
    width: var(--brand-logo-display-width);
    max-width: 100%;
    height: auto;
}

/* Keep the full-ratio lockup near the legacy IDS banner's desktop height. */
.brand-ids-auth-masthead .brand-logo-wrapper {
    --brand-logo-display-width: clamp(150px, 14.55vw, 280px) !important;
    --brand-logo-safe-space: clamp(15px, 1.455vw, 28px) !important;
}

.brand-default-masthead {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--brand-surface-light, #FFFFFF);
}

/* Keep keyboard focus visible across the shared login layout without changing
   the meaning or color of validation and status states. */
.Login :is(a[href], button, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

/* OTP field rules use a more specific legacy focus selector and suppress the
   browser outline, so give those fields an explicit accessible override. */
.Login .otp-modal .otp-input-group .otp-input:focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

/* Content links only; controls, navigation widgets, and status-color links keep their existing treatments. */
:is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):is(:link, :visited) {
    color: var(--brand-text-primary, #414141);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

:is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):hover:not(:focus-visible) {
    color: var(--brand-action-primary, #00341A);
    text-decoration-thickness: 0.14em;
}

:is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):active {
    color: var(--brand-action-primary, #00341A);
    text-decoration-style: double;
}

:is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

@media (forced-colors: active) {
    .Login :is(a[href], button, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
    .Login .otp-modal .otp-input-group .otp-input:focus-visible {
        outline-color: Highlight !important;
    }

    :is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):link {
        color: LinkText !important;
    }

    :is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):visited {
        color: VisitedText !important;
    }

    :is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):hover:not(:focus-visible) {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        text-decoration-thickness: 0.14em !important;
    }

    :is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    :is(.Content, .content, #content, body.Login) a[href]:not(.btn):not([role="button"]):not(.nav-link):not(.dropdown-toggle):not(.dropdown-item):not(.navbar-brand):not(.k-link):not(.k-button):not(.page-link):not(.disabled):not(.disabled-button):not([aria-disabled="true"]):not([data-toggle]):not([data-dismiss]):not([onclick]):not([class*="text-"]):not(.icon-link-color):not(.r-link):not([data-content-type]):not(.brand-logo-wrapper):active {
        text-decoration-style: double !important;
    }
}

/* Keep Bootstrap success states within the Fibre palette. */
:root {
    --green: var(--brand-fibre-green, #7DC341);
    --success: var(--brand-fibre-green, #7DC341);
}

.btn-success {
    color: #00341A !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.btn-success:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: #004D26 !important;
    border-color: #004D26 !important;
}

.btn-success:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.btn-success.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: #001A0D !important;
    border-color: #001A0D !important;
}

.btn-success:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    outline: 2px solid #00341A !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

.btn-success:disabled,
.btn-success[disabled],
.btn-success.disabled,
.btn-success[aria-disabled="true"] {
    color: #414141 !important;
    background-color: #FFFFFF !important;
    border-color: #414141 !important;
    border-style: dashed !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.text-success {
    color: #00341A !important;
}

.bg-success,
.badge-success,
.label-success,
.progress-bar-success {
    color: #00341A !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
}

.border-success {
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.switch-success > .switch-input:checked ~ .switch-label,
.switch-success-outline > .switch-input:checked ~ .switch-label,
.switch-success-outline-alt > .switch-input:checked ~ .switch-label {
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.switch-success > .switch-input:checked ~ .switch-label {
    color: #00341A !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
}

.switch-success-outline > .switch-input:checked ~ .switch-label,
.switch-success-outline-alt > .switch-input:checked ~ .switch-label {
    color: #00341A !important;
    background-color: #FFFFFF !important;
}

.switch-success > .switch-input:checked ~ .switch-handle,
.switch-success-outline > .switch-input:checked ~ .switch-handle {
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.switch-success-outline-alt > .switch-input:checked ~ .switch-handle {
    background-color: var(--brand-fibre-green, #7DC341) !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.navbar-nav li span.count,
.bg-flat-color-5 {
    color: #00341A !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
}

.stat-widget-eight .stat-content .ti-arrow-up {
    color: #00341A !important;
}

.alert-success,
.panel-success > .panel-heading,
.list-group-item-success,
.table-success,
.table-success > th,
.table-success > td {
    color: #00341A !important;
    background-color: rgba(125, 195, 65, .12) !important;
    border-color: rgba(125, 195, 65, .32) !important;
}

.panel-success {
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.panel-success > .panel-heading {
    background-color: var(--brand-fibre-green, #7DC341) !important;
}

.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback,
.alert-success .alert-link {
    color: #00341A !important;
}

.has-success .form-control {
    border-color: var(--brand-fibre-green, #7DC341) !important;
}

.k-list .k-state-selected,
.k-list .k-state-focused,
.k-list .k-state-hover,
.k-popup .k-item.k-state-selected,
.k-button.k-state-hover,
.k-button:hover {
    color: #00341A !important;
}

/* Shared neutral components keep their existing status colors and behavior. */
:is(.Content, .content, #content) :is(.card, .panel-default, .k-card) {
    color: var(--brand-text-primary, #414141);
    background-color: var(--brand-surface-light, #FFFFFF);
}

/* Keep Bootstrap and Kendo card content padding consistent on every page. */
.card-body,
.k-card-body {
    padding: 1.25rem !important;
}

:is(.Content, .content, #content) .badge {
    border: 1px solid currentColor;
}

:is(.Content, .content, #content) :is(.alert, .toast) {
    border-left: 4px solid currentColor;
}

:is(.Content, .content, #content) .k-grid .k-grid-header th {
    color: var(--brand-text-primary, #414141);
    background-color: var(--brand-surface-light, #FFFFFF);
    background-image: none;
}

:is(.Content, .content, #content) .k-grid tr.k-state-selected > td,
:is(.Content, .content, #content) .k-grid td.k-state-selected {
    box-shadow: inset 0 1px 0 currentColor, inset 0 -1px 0 currentColor;
}

:is(.Content, .content, #content) .k-grid tr.k-state-focused {
    outline: 3px solid var(--brand-focus-indicator, #00341A);
    outline-offset: -3px;
}

:is(.Content, .content, #content) .k-pager-wrap .k-state-selected,
:is(.Content, .content, #content) .pagination > .active > a,
:is(.Content, .content, #content) .pagination > .active > span,
:is(.Content, .content, #content) .page-item.active .page-link {
    color: var(--brand-ink-on-dark, #FFFFFF);
    background-color: var(--brand-action-primary, #00341A);
    border-color: var(--brand-action-primary, #00341A);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

:is(.Content, .content, #content, body.Login) :is(.modal-content, .k-window) {
    color: var(--brand-text-primary, #414141);
    background-color: var(--brand-surface-light, #FFFFFF);
}

:is(.Content, .content, #content, body.Login) .k-window-titlebar {
    color: var(--brand-text-primary, #414141);
    background-color: var(--brand-surface-light, #FFFFFF);
    background-image: none;
}

:is(.Content, .content, #content, body.Login) .modal-body,
:is(.Content, .content, #content, body.Login) .k-window-content {
    overscroll-behavior: contain;
}

:is(.Content, .content, #content) .modal :is(a[href], button, input, select, textarea, [tabindex]):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible,
:is(.Content, .content, #content, body.Login) .k-window :is(a[href], button, input, select, textarea, [tabindex]):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible,
:is(body.Login) .modal :is(a[href], button, input, select, textarea, [tabindex]):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible,
:is(.Content, .content, #content) .k-pager-wrap :is(a[href], button):focus-visible,
:is(.Content, .content, #content) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    :is(.Content, .content, #content) .k-grid tr.k-state-focused,
    :is(.Content, .content, #content) .modal :is(a[href], button, input, select, textarea, [tabindex]):focus-visible,
    :is(.Content, .content, #content, body.Login) .k-window :is(a[href], button, input, select, textarea, [tabindex]):focus-visible,
    :is(body.Login) .modal :is(a[href], button, input, select, textarea, [tabindex]):focus-visible,
    :is(.Content, .content, #content) .k-pager-wrap :is(a[href], button):focus-visible,
    :is(.Content, .content, #content) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-default):not(.btn-info):not(.btn-light):focus-visible {
        outline-color: Highlight;
    }

    :is(.Content, .content, #content) .k-pager-wrap .k-state-selected,
    :is(.Content, .content, #content) .pagination > .active > a,
    :is(.Content, .content, #content) .pagination > .active > span,
    :is(.Content, .content, #content) .page-item.active .page-link {
        color: HighlightText;
        background-color: Highlight;
        border-color: HighlightText;
    }
}

/* Native content form controls keep their existing border and validation styles;
   only add a visible keyboard-focus cue. */
:is(.Content, .content, #content) :is(input, select, textarea):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([data-role]):not(.k-input):not(.k-textbox):not(.kendo_files):not(.kendo_datepicker):not(.linkDropdown):not(.quiz_answer_select):not(.quiz_role_multiselect):not(.btn):focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

@media (forced-colors: active) {
    :is(.Content, .content, #content) :is(input, select, textarea):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([data-role]):not(.k-input):not(.k-textbox):not(.kendo_files):not(.kendo_datepicker):not(.linkDropdown):not(.quiz_answer_select):not(.quiz_role_multiselect):not(.btn):focus-visible {
        outline-color: Highlight !important;
    }
}

/* Light application navbar: preserve Bootstrap menus and expose link states. */
.brand-light-navbar {
    background-color: var(--brand-surface-light, #FFFFFF);
}

/* The existing dropdown script opens the parent; the loaded theme expects .show on the menu. */
.brand-light-navbar .dropdown.open > .dropdown-menu {
    display: block;
}

.brand-light-navbar .navbar-nav > li > a,
.brand-light-navbar .navbar-nav > li > button.dropdown-toggle,
.brand-light-navbar .dropdown-menu > li > a[href] {
    display: block;
    color: var(--brand-text-primary, #414141);
}

.brand-light-navbar .navbar-nav > li > button.dropdown-toggle {
    padding: 15px 10px;
    font: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.brand-light-navbar .navbar-nav > li > a:hover,
.brand-light-navbar .navbar-nav > li > a:focus-visible,
.brand-light-navbar .navbar-nav > .open > a,
.brand-light-navbar .navbar-nav > li > button.dropdown-toggle:hover,
.brand-light-navbar .navbar-nav > li > button.dropdown-toggle:focus-visible,
.brand-light-navbar .navbar-nav > .open > button.dropdown-toggle,
.brand-light-navbar .dropdown-menu > li > a[href]:hover,
.brand-light-navbar .dropdown-menu > li > a[href]:focus-visible {
    color: var(--brand-action-primary, #00341A);
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

.brand-light-navbar :is(.navbar-brand, .navbar-toggle, .navbar-nav a[href], .navbar-nav button):focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A) !important;
    outline-offset: 2px !important;
}

@media (forced-colors: active) {
    .brand-light-navbar .navbar-nav > li > a:hover:not(:focus-visible),
    .brand-light-navbar .navbar-nav > li > button.dropdown-toggle:hover:not(:focus-visible),
    .brand-light-navbar .dropdown-menu > li > a[href]:hover:not(:focus-visible) {
        outline: 2px solid Highlight !important;
        outline-offset: -2px !important;
    }

    .brand-light-navbar :is(.navbar-brand, .navbar-toggle, .navbar-nav a[href], .navbar-nav button):focus-visible {
        outline-color: Highlight !important;
    }
}

/* The main shell combines Bootstrap v4 beta CSS with the existing v3 collapse script. */
@media (max-width: 1200px) {
    .brand-light-navbar > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .brand-light-navbar .navbar-header {
        display: flex;
        flex: 0 0 100%;
        align-items: center;
        justify-content: space-between;
        float: none;
        width: 100%;
    }

    .brand-light-navbar .navbar-brand {
        display: flex;
        order: 1;
        align-items: center;
        float: none;
        height: auto;
        margin-left: 0 !important;
        margin-right: auto;
        padding: 10px 15px;
    }

    .brand-light-navbar .navbar-toggle {
        display: inline-flex;
        order: 2;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        float: none;
        margin: 8px 15px 8px auto;
        padding: 9px 10px;
        color: var(--brand-text-primary, #414141);
        background-color: var(--brand-surface-light, #FFFFFF);
        border: 1px solid var(--brand-text-primary, #414141);
        border-radius: 4px;
    }

    .brand-light-navbar .navbar-toggle:hover {
        color: var(--brand-action-primary, #00341A);
        border-color: var(--brand-action-primary, #00341A);
    }

    .brand-light-navbar .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: currentColor;
    }

    .brand-light-navbar .navbar-collapse {
        flex: 0 0 100%;
        width: 100%;
        padding-top: 0 !important;
        border-top: 1px solid #DADADA;
        box-shadow: none;
    }

    .brand-light-navbar .navbar-collapse .navbar-nav {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
    }

    .brand-light-navbar .navbar-collapse .navbar-nav > li {
        float: none;
    }

    .brand-light-navbar .navbar-collapse .navbar-nav > li > a,
    .brand-light-navbar .navbar-collapse .dropdown-menu > li > a[href],
    .brand-light-navbar .navbar-collapse .navbar-nav > li > button {
        min-height: 44px;
        padding: 12px 16px;
        white-space: normal;
    }

    .brand-light-navbar .navbar-collapse .navbar-nav > li > button.dropdown-toggle {
        width: 100%;
    }

    .brand-light-navbar .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 0 0 12px;
        background-color: var(--brand-surface-light, #FFFFFF);
        border: 0;
        box-shadow: none;
    }
}

@media (min-width: 1201px) {
    .brand-light-navbar > .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .brand-light-navbar .navbar-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
    }

    .brand-light-navbar .navbar-brand {
        margin-left: 0 !important;
    }

    .brand-light-navbar .navbar-toggle {
        display: none !important;
    }

    .brand-light-navbar .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        padding-top: 0 !important;
    }

    .brand-light-navbar .navbar-nav {
        display: flex;
        flex-direction: row;
        margin: 0 0 0 auto;
    }

    .brand-light-navbar .navbar-nav > li {
        float: none;
    }

    .brand-light-navbar .navbar-nav > li > a {
        padding: 15px 10px;
    }

    .brand-light-navbar .navbar-nav .dropdown-menu {
        position: absolute;
        float: left;
        width: auto;
    }
}

@media (forced-colors: active) {
    .brand-light-navbar .navbar-toggle {
        color: ButtonText;
        background-color: ButtonFace;
        border-color: ButtonText;
    }

    .brand-light-navbar .navbar-toggle .icon-bar {
        background-color: currentColor;
    }
}

.brand-error-page {
    width: 100%;
    max-width: 64rem;
    margin: 5vh auto 0;
    padding: 0 1rem 2rem;
    color: var(--brand-text-primary, #414141);
    font-family: var(--brand-font-latin, "AIS Rubik", "AIS DB Heavent", Arial, sans-serif);
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
}

.brand-error-page--centered {
    display: flex;
    box-sizing: border-box;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
}

.brand-error-icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
    padding: 0.5rem;
    fill: #FFFFFF;
    background-color: #CA2735;
    border-radius: 50%;
}

.brand-error-page h1 {
    margin: 0 0 1rem;
    color: var(--brand-text-primary, #414141);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.25;
}

.brand-error-page p {
    margin: 0 auto 1rem;
    max-width: 58rem;
}

.brand-error-page a[href] {
    color: var(--brand-text-primary, #414141);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.brand-error-page a[href]:hover,
.brand-error-page a[href]:focus-visible {
    color: var(--brand-action-primary, #00341A);
}

.brand-error-page a[href]:focus-visible {
    outline: 3px solid var(--brand-focus-indicator, #00341A);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .brand-error-page a[href] {
        color: LinkText;
    }

    .brand-error-page a[href]:focus-visible {
        outline-color: Highlight;
    }
}

/* Dark application sidebars: preserve menu behavior and add brand state cues. */
#left-panel .navbar .navbar-nav li > a:hover,
#left-panel .navbar .navbar-nav li > a:focus-visible {
    box-shadow: inset 3px 0 0 var(--brand-action-accent, #7DC341) !important;
    color: var(--brand-ink-on-dark, #FFFFFF) !important;
}

#left-panel .navbar .navbar-nav li > a:hover .menu-icon,
#left-panel .navbar .navbar-nav li > a:focus-visible .menu-icon {
    color: var(--brand-ink-on-dark, #FFFFFF) !important;
}

#left-panel .navbar .navbar-nav li.active > a,
#left-panel .navbar .navbar-nav li.active > a:hover,
#left-panel .navbar .navbar-nav li.active > a:focus,
#left-panel .navbar .navbar-nav li.active > a:focus-visible {
    background: var(--brand-action-primary, #00341A) !important;
    box-shadow: inset 3px 0 0 var(--brand-action-accent, #7DC341) !important;
    color: var(--brand-ink-on-dark, #FFFFFF) !important;
}

#left-panel .navbar .navbar-nav a[href]:focus,
#left-panel .navbar .navbar-nav button:focus,
#left-panel .navbar .navbar-nav input[type="submit"]:focus,
#left-panel .navbar .navbar-nav [tabindex]:not([tabindex="-1"]):focus,
#left-panel .navbar .navbar-nav a[href]:focus-visible,
#left-panel .navbar .navbar-nav button:focus-visible,
#left-panel .navbar .navbar-nav input[type="submit"]:focus-visible,
#left-panel .navbar .navbar-nav [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 1px solid var(--brand-action-accent, #7DC341) !important;
    outline-offset: 2px !important;
    border-color: var(--brand-action-accent, #7DC341) !important;
}

@media (forced-colors: active) {
    #left-panel .navbar .navbar-nav li > a {
        border-inline-start: 3px solid transparent !important;
    }

    #left-panel .navbar .navbar-nav li > a:hover:not(:focus-visible) {
        outline: 2px solid Highlight !important;
        outline-offset: -2px !important;
    }

    #left-panel .navbar .navbar-nav li.active > a,
    #left-panel .navbar .navbar-nav li.active > a:hover,
    #left-panel .navbar .navbar-nav li.active > a:focus-visible {
        background: Highlight !important;
        border-inline-start-color: HighlightText !important;
        color: HighlightText !important;
    }

    #left-panel .navbar .navbar-nav a[href]:focus-visible,
    #left-panel .navbar .navbar-nav button:focus-visible,
    #left-panel .navbar .navbar-nav input[type="submit"]:focus-visible,
    #left-panel .navbar .navbar-nav [tabindex]:not([tabindex="-1"]):focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }
}

/* Dark sidebar sizing and navigation hierarchy. Menu markup, routes, and permissions stay server-generated. */
#left-panel {
    box-sizing: border-box;
    width: var(--brand-sidebar-expanded-width, 272px) !important;
    min-width: var(--brand-sidebar-expanded-width, 272px) !important;
    max-width: var(--brand-sidebar-expanded-width, 272px) !important;
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    background-color: #272C33;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease;
}

body.open #left-panel {
    width: var(--brand-sidebar-collapsed-width, 68px) !important;
    min-width: var(--brand-sidebar-collapsed-width, 68px) !important;
    max-width: var(--brand-sidebar-collapsed-width, 68px) !important;
}

body.open #right-panel {
    margin-left: calc(var(--brand-sidebar-collapsed-width, 68px) - var(--brand-sidebar-expanded-width, 272px));
}

#left-panel .sidebar-toggle-row {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 31px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

#left-panel #menuToggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: #D9DEE4 !important;
    background-color: transparent !important;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

#left-panel #menuToggle:hover {
    color: var(--brand-action-accent, #7DC341) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}

#left-panel #menuToggle:active {
    color: var(--brand-action-accent, #7DC341) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

#left-panel #menuToggle i {
    font-size: var(--brand-menu-icon-size, 16px);
    line-height: 1;
}

#left-panel #menuToggle:focus-visible {
    outline: 1px solid var(--brand-action-accent, #7DC341) !important;
    outline-offset: 2px !important;
}

#left-panel > .navbar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none !important;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
}

#left-panel .navbar-header {
    box-sizing: border-box;
    height: var(--brand-sidebar-header-height-expanded, 107px);
    min-height: var(--brand-sidebar-header-height-expanded, 107px);
    border-bottom: 1px solid #4E555D;
}

#left-panel .navbar .navbar-brand {
    box-sizing: border-box;
    justify-content: flex-start;
    min-height: var(--brand-sidebar-header-height-expanded, 107px);
    height: var(--brand-sidebar-header-height-expanded, 107px);
    padding: 0 var(--brand-sidebar-horizontal-padding, 20px);
    border-bottom: 0;
}

#left-panel .navbar .navbar-brand .brand-logo-wrapper {
    margin-block: var(--brand-logo-safe-space);
    padding-block: 0;
}

#left-panel .navbar .navbar-brand .brand-logo {
    max-width: 100%;
}

#left-panel #main-menu {
    box-sizing: border-box;
    flex: 1 1 auto;
    /* Bootstrap centers navbar-collapse children vertically unless overridden here. */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: none !important;
    min-height: 0;
    max-height: calc(100vh - var(--brand-sidebar-header-height-expanded, 107px));
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#left-panel .sidebar-version {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    padding: 0.625rem var(--brand-sidebar-horizontal-padding, 20px);
    border-top: 1px solid #4E555D;
    color: #AAB3BC;
    font-size: var(--brand-font-size-xs, 0.75rem);
    line-height: var(--brand-line-height-control, 1.4);
    text-align: left;
}

body.open #left-panel .sidebar-version {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 0.625rem;
    text-align: center;
}

#left-panel #main-menu ul.tree.nav.navbar-nav {
    box-sizing: border-box;
    float: none;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 10px 0 20px;
}

#left-panel #main-menu ul.tree li {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    list-style: none;
}

#left-panel #main-menu ul.tree li > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--brand-menu-icon-text-gap, 12px);
    width: 100%;
    min-height: var(--brand-menu-row-height, 46px);
    height: auto;
    padding: 4px var(--brand-sidebar-horizontal-padding, 20px);
    color: #D9DEE4 !important;
    font-family: var(--brand-font-latin, "AIS Rubik", "AIS DB Heavent", Arial, sans-serif);
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-normal, 400);
    line-height: var(--brand-line-height-control, 1.4);
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#left-panel #main-menu ul.tree li > a > i:first-child,
#left-panel #main-menu ul.tree li > a > form > i:first-of-type {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 var(--brand-menu-icon-container, 24px);
    align-items: center;
    justify-content: center;
    width: var(--brand-menu-icon-container, 24px);
    height: var(--brand-menu-icon-container, 24px);
    margin: 0;
    position: relative;
    z-index: 1;
    color: #AAB3BC;
    font-size: var(--brand-menu-icon-size, 16px);
    line-height: 1;
    text-align: center;
}

#left-panel #main-menu ul.tree li > a > form {
    display: flex;
    align-items: center;
    gap: var(--brand-menu-icon-text-gap, 12px);
    width: 100%;
    min-width: 0;
    margin: 0;
}

#left-panel #main-menu ul.tree li.has-child > a {
    color: #F0F3F5 !important;
    font-weight: var(--brand-font-weight-normal, 400);
}

#left-panel #main-menu ul.tree li.has-child > a::after {
    box-sizing: border-box;
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
}

#left-panel #main-menu ul.tree li.has-child > a::before {
    display: none !important;
    content: none !important;
}

#left-panel #main-menu ul.tree li.has-child.open > a::after {
    transform: rotate(45deg);
}

#left-panel #main-menu ul.tree li > ul.tree {
    display: none;
}

#left-panel #main-menu ul.tree.nav.navbar-nav li > ul.tree.nav.navbar-nav {
    box-sizing: border-box;
    width: 100% !important;
    margin: 4px 0 8px;
    padding: 4px 0;
    border-left: 2px solid rgba(125, 195, 65, 0.42);
    background-color: rgba(0, 0, 0, 0.12);
}

#left-panel #main-menu ul.tree li.open > ul.tree {
    display: block;
}

#left-panel #main-menu ul.tree ul.tree li > a {
    min-height: var(--brand-submenu-row-height, 42px);
    padding: 3px 12px 3px 18px;
    color: #BCC5CE !important;
    font-weight: var(--brand-font-weight-normal, 400);
}

#left-panel #main-menu ul.tree ul.tree li > a > i:first-child {
    color: #9EAEB8;
    font-size: 14px;
}

#left-panel #main-menu ul.tree ul.tree li > a > i.sidebar-inherited-icon {
    opacity: 0.78;
}

#left-panel #main-menu ul.tree li.has-child.open > a,
#left-panel #main-menu ul.tree li.sidebar-flyout-open > a,
#left-panel #main-menu ul.tree li > a:hover,
#left-panel #main-menu ul.tree li > a:focus-visible {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: var(--brand-ink-on-dark, #FFFFFF) !important;
}

#left-panel #main-menu ul.tree li.active > a,
#left-panel #main-menu ul.tree li.active > a:hover,
#left-panel #main-menu ul.tree li.active > a:focus-visible {
    background-color: var(--brand-action-primary, #00341A) !important;
    box-shadow: inset 3px 0 0 var(--brand-action-accent, #7DC341) !important;
    color: var(--brand-ink-on-dark, #FFFFFF) !important;
    font-weight: var(--brand-font-weight-normal, 400);
}

#left-panel #main-menu ul.tree li.active > a > i:first-child,
#left-panel #main-menu ul.tree li.active > a > form > i:first-of-type,
#left-panel #main-menu ul.tree li > a:hover > i:first-child,
#left-panel #main-menu ul.tree li > a:focus-visible > i:first-child {
    color: currentColor !important;
}

body.open #left-panel .navbar-header {
    height: var(--brand-sidebar-header-height, 76px);
    min-height: var(--brand-sidebar-header-height, 76px);
}

@media (min-width: 576px) {
    body.open #left-panel .navbar-header {
        display: none;
    }

    body.open #left-panel .sidebar-toggle-row {
        position: static;
        width: 100%;
        height: var(--brand-sidebar-header-height, 76px);
    }

    body.open #left-panel #main-menu > ul.tree.nav.navbar-nav {
        width: var(--brand-sidebar-collapsed-width, 68px) !important;
        flex-shrink: 0;
    }
}

body.open #left-panel .navbar .navbar-brand {
    height: var(--brand-sidebar-header-height, 76px);
    min-height: var(--brand-sidebar-header-height, 76px);
    padding-right: 0;
    padding-left: 0;
}

body.open #left-panel #main-menu {
    max-height: calc(100vh - var(--brand-sidebar-header-height, 76px));
}

body.open #left-panel #main-menu ul.tree li > a {
    position: relative;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100% !important;
    padding: 0;
    font-size: 0;
    white-space: nowrap;
}

body.open #left-panel #main-menu ul.tree li > ul.tree {
    display: none !important;
}

body.open #left-panel #main-menu ul.tree li > a > i:first-child,
body.open #left-panel #main-menu ul.tree li > a > form > i:first-of-type {
    flex-basis: var(--brand-menu-icon-container, 24px);
    font-size: var(--brand-menu-icon-size, 16px);
}

body.open #left-panel #main-menu ul.tree li > a > form {
    width: auto;
    gap: 0;
}

body.open #left-panel #main-menu ul.tree li > a .sidebar-collapsed-fallback {
    display: inline-flex;
    flex: 0 0 var(--brand-menu-icon-container, 24px);
    align-items: center;
    justify-content: center;
    width: var(--brand-menu-icon-container, 24px);
    height: var(--brand-menu-icon-container, 24px);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: var(--brand-font-weight-semibold, 600);
    line-height: 1;
}

#left-panel #main-menu ul.tree li > a .sidebar-collapsed-fallback {
    display: none;
}

body.open #left-panel #main-menu ul.tree li > a input.btn-link-ext {
    position: absolute;
    z-index: 2;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0;
    cursor: pointer;
}

body.open #left-panel #main-menu ul.tree li > a input.btn-link-ext:focus-visible {
    outline: 3px solid #FFFFFF !important;
    outline-offset: -3px;
}

body.open #left-panel #main-menu ul.tree li.has-child > a::after {
    display: none;
}

.sidebar-flyout[hidden] {
    display: none !important;
}

.sidebar-flyout {
    box-sizing: border-box;
    position: fixed;
    z-index: 1100;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    background-color: #272C33;
    border: 1px solid #4E555D;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.sidebar-flyout > ul.tree,
.sidebar-flyout ul.tree {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.sidebar-flyout ul.tree li {
    position: relative;
    width: 100%;
    margin: 0;
    list-style: none;
}

.sidebar-flyout ul.tree li > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--brand-submenu-row-height, 42px);
    padding: 6px 12px;
    color: #D9DEE4 !important;
    font-family: var(--brand-font-latin, "AIS Rubik", "AIS DB Heavent", Arial, sans-serif);
    font-size: var(--brand-font-size-base, 0.875rem);
    font-weight: var(--brand-font-weight-normal, 400);
    line-height: var(--brand-line-height-control, 1.4);
    text-decoration: none;
    white-space: normal;
}

.sidebar-flyout ul.tree li > a > i:first-child,
.sidebar-flyout ul.tree li > a > form > i:first-of-type {
    flex: 0 0 var(--brand-menu-icon-container, 24px);
    color: #AAB3BC;
    font-size: 14px;
    text-align: center;
}

.sidebar-flyout ul.tree li > a:hover,
.sidebar-flyout ul.tree li > a:focus-visible,
.sidebar-flyout ul.tree li.has-child.open > a {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #FFFFFF !important;
}

.sidebar-flyout ul.tree li.active > a {
    background-color: var(--brand-action-primary, #00341A) !important;
    box-shadow: inset 3px 0 0 var(--brand-action-accent, #7DC341);
    color: #FFFFFF !important;
}

.sidebar-flyout ul.tree li > a:focus-visible {
    outline: 1px solid var(--brand-action-accent, #7DC341);
    outline-offset: -3px;
}

.sidebar-flyout ul.tree li > a::before {
    display: none !important;
    content: none !important;
}

.sidebar-flyout ul.tree li > ul.tree {
    display: none;
    margin-left: 12px;
    padding-left: 8px;
    border-left: 2px solid rgba(125, 195, 65, 0.42);
}

.sidebar-flyout ul.tree li.open > ul.tree {
    display: block;
}

.sidebar-flyout ul.tree li > a > form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sidebar-flyout ul.tree li > a input.btn-link-ext {
    color: inherit;
    background: transparent;
    font-size: inherit;
}

@media (max-width: 767px) {
    #left-panel {
        width: min(var(--brand-sidebar-expanded-width, 272px), 86vw) !important;
        min-width: min(var(--brand-sidebar-expanded-width, 272px), 86vw) !important;
        max-width: min(var(--brand-sidebar-expanded-width, 272px), 86vw) !important;
    }

    body.open #right-panel {
        margin-left: calc(var(--brand-sidebar-collapsed-width, 68px) - min(var(--brand-sidebar-expanded-width, 272px), 86vw));
    }
}

@media (max-width: 575.99px) {
    #left-panel,
    body.open #left-panel {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    #left-panel > .navbar {
        display: block;
        width: 100%;
        max-width: 100% !important;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
    }

    #left-panel .navbar-header,
    body.open #left-panel .navbar-header {
        display: block;
        width: 100%;
        height: var(--brand-sidebar-header-height-expanded, 107px);
        min-height: var(--brand-sidebar-header-height-expanded, 107px);
        padding: 0 var(--brand-sidebar-horizontal-padding, 20px);
    }

    #left-panel .sidebar-toggle-row {
        display: none;
    }

    #left-panel .navbar .navbar-brand,
    body.open #left-panel .navbar .navbar-brand {
        display: inline-flex !important;
        float: left;
        align-items: center;
        height: var(--brand-sidebar-header-height-expanded, 107px);
        min-height: var(--brand-sidebar-header-height-expanded, 107px);
        margin: 0;
        padding: 0;
    }

    #left-panel .navbar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: right;
        width: 44px;
        height: 44px;
        margin: 31px 0 0;
        padding: 0;
        color: #D9DEE4;
        border: 1px solid #4E555D;
        border-radius: 8px;
    }

    #left-panel .navbar .navbar-toggler:hover {
        color: #FFFFFF;
        background-color: rgba(255, 255, 255, 0.07);
    }

    #left-panel .navbar .navbar-toggler:focus-visible {
        outline: 1px solid var(--brand-action-accent, #7DC341);
        outline-offset: 2px;
    }

    #left-panel #main-menu,
    body.open #left-panel #main-menu {
        width: 100%;
        flex: none;
        max-height: calc(100vh - var(--brand-sidebar-header-height-expanded, 107px));
    }

    #left-panel #main-menu ul.tree li > a,
    body.open #left-panel #main-menu ul.tree li > a {
        justify-content: flex-start;
        gap: var(--brand-menu-icon-text-gap, 12px);
        padding: 4px var(--brand-sidebar-horizontal-padding, 20px);
        font-size: var(--brand-font-size-base, 0.875rem);
        white-space: normal;
    }

    #left-panel #main-menu ul.tree li.has-child > a::after,
    body.open #left-panel #main-menu ul.tree li.has-child > a::after {
        display: inline-block;
    }

    body.open #left-panel #main-menu ul.tree li.open > ul.tree {
        display: block !important;
    }

    body.open #left-panel #main-menu ul.tree li > a .sidebar-collapsed-fallback {
        display: none;
    }

    body.open #left-panel #main-menu ul.tree li > a > form {
        width: 100%;
        gap: var(--brand-menu-icon-text-gap, 12px);
    }

    body.open #left-panel #main-menu ul.tree li > a input.btn-link-ext {
        position: static;
        z-index: auto;
        inset: auto;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        font-size: inherit;
    }

    #right-panel,
    body.open #right-panel {
        display: block;
        width: 100%;
        margin-left: 0 !important;
    }
}

@media (forced-colors: active) {
    #left-panel #main-menu ul.tree li.has-child.open > a {
        border: 1px solid LinkText;
    }

    #left-panel #main-menu ul.tree li.active > a,
    #left-panel #main-menu ul.tree li.active > a:hover,
    #left-panel #main-menu ul.tree li.active > a:focus-visible {
        background-color: Highlight !important;
        box-shadow: inset 3px 0 0 HighlightText !important;
        color: HighlightText !important;
    }

    #left-panel #main-menu ul.tree.nav.navbar-nav li > ul.tree.nav.navbar-nav {
        border-left-color: Highlight;
    }

    #left-panel #menuToggle {
        color: ButtonText !important;
        background-color: ButtonFace !important;
        border-color: ButtonText;
    }

    #left-panel #menuToggle:hover {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    #left-panel #menuToggle:focus-visible {
        outline-color: Highlight !important;
    }

    #left-panel #menuToggle:active {
        color: HighlightText !important;
        background-color: Highlight !important;
        border-color: Highlight;
    }
}

/* Kendo toolbar and row commands use the same action hierarchy as app buttons. */
.k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--brand-button-min-height, 44px);
    border: 1px solid var(--brand-text-primary, #414141) !important;
    border-radius: var(--brand-button-radius, 4px);
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: var(--brand-text-primary, #414141) !important;
    text-align: center;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:hover:not(.k-disabled):not(.k-state-disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-button-secondary-hover, #595959) !important;
    background-color: var(--brand-button-secondary-hover, #595959) !important;
    color: #FFFFFF !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) :is(.k-grid-add, .k-grid-update, .k-grid-save-changes) {
    border-color: var(--brand-action-primary, #00341A) !important;
    background-color: var(--brand-action-primary, #00341A) !important;
    color: #FFFFFF !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) :is(.k-grid-add, .k-grid-update, .k-grid-save-changes):hover:not(.k-disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-button-primary-hover, #004D26) !important;
    background-color: var(--brand-button-primary-hover, #004D26) !important;
    color: #FFFFFF !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) :is(.k-grid-add, .k-grid-update, .k-grid-save-changes):active:not(.k-disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-button-primary-active, #001A0D) !important;
    background-color: var(--brand-button-primary-active, #001A0D) !important;
}

.k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete) {
    border-color: var(--brand-button-danger, #B42318) !important;
    background-color: var(--brand-button-danger, #B42318) !important;
    color: #FFFFFF !important;
}

.k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete):hover:not(.k-disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-button-danger-hover, #8F1D14) !important;
    background-color: var(--brand-button-danger-hover, #8F1D14) !important;
    color: #FFFFFF !important;
}

.k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete):active:not(.k-disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-button-danger-active, #6F160F) !important;
    background-color: var(--brand-button-danger-active, #6F160F) !important;
}

.k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete):focus-visible {
    outline-color: var(--brand-button-danger, #B42318) !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:is(.k-disabled, .k-state-disabled, [aria-disabled="true"]) {
    border-style: dashed !important;
    border-color: var(--brand-text-primary, #414141) !important;
    background-color: #FFFFFF !important;
    color: var(--brand-text-primary, #414141) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Fibre + action hierarchy: primary, supporting, optional, and destructive. */
.btn.btn-primary,
.Login #btn-login.btn-primary,
body.Login .otp-modal .btn-send-otp,
body.Login .otp-modal .otp-confirm-button {
    color: #FFFFFF !important;
    background-color: var(--brand-action-primary, #00341A) !important;
    background-image: none !important;
    border-color: var(--brand-action-primary, #00341A) !important;
}

:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light) {
    color: var(--brand-text-primary, #414141) !important;
    background-color: var(--brand-surface-light, #FFFFFF) !important;
    background-image: none !important;
    border-color: var(--brand-text-primary, #414141) !important;
}

.btn.btn-primary:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.Login #btn-login.btn-primary:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .btn-send-otp:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .otp-confirm-button:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-primary-hover, #004D26) !important;
    background-image: none !important;
    border-color: var(--brand-button-primary-hover, #004D26) !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-secondary-hover, #595959) !important;
    background-image: none !important;
    border-color: var(--brand-button-secondary-hover, #595959) !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.btn.btn-primary:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.Login #btn-login.btn-primary:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .btn-send-otp:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .otp-confirm-button:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: #00341A !important;
    background-image: none !important;
    border-color: #00341A !important;
    outline: 2px solid #00341A !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
    text-decoration: none !important;
}

/* The login view's older OTP rules must not turn Cancel into a filled action. */
body.Login .otp-modal .btn.otp-cancel-button {
    color: var(--brand-text-primary, #414141) !important;
    background-color: #FFFFFF !important;
    border-color: var(--brand-text-primary, #414141) !important;
}

body.Login .otp-modal .btn.otp-cancel-button:hover:not(:disabled) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background: none !important;
    background-image: none !important;
    border-color: var(--brand-fibre-dark-green, #00341A) !important;
    box-shadow: none !important;
}

.btn.btn-primary:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.btn.btn-primary.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.Login #btn-login.btn-primary:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.Login #btn-login.btn-primary.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .btn-send-otp:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .btn-send-otp.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .otp-confirm-button:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.Login .otp-modal .otp-confirm-button.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-primary-active, #001A0D) !important;
    background-image: none !important;
    border-color: var(--brand-button-primary-active, #001A0D) !important;
}

/* Destructive actions retain a separate high-contrast warning treatment. */
.btn.btn-danger {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger, #B42318) !important;
    background-image: none !important;
    border-color: var(--brand-button-danger, #B42318) !important;
}

.btn.btn-danger:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger-hover, #8F1D14) !important;
    border-color: var(--brand-button-danger-hover, #8F1D14) !important;
}

.btn.btn-danger:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.btn.btn-danger.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger-active, #6F160F) !important;
    border-color: var(--brand-button-danger-active, #6F160F) !important;
}

.btn.btn-danger:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    outline: 2px solid var(--brand-button-danger, #B42318) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

/* Optional actions read as text controls without competing with the main action. */
.btn.btn-link {
    color: var(--brand-action-primary, #00341A) !important;
    background: transparent !important;
    border-color: transparent !important;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.btn.btn-link:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-button-primary-hover, #004D26) !important;
    text-decoration-thickness: 2px;
}

.btn.btn-link:active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-button-primary-active, #001A0D) !important;
}

.btn.btn-link:is(:disabled, [disabled], .disabled, [aria-disabled="true"]) {
    color: var(--brand-text-primary, #414141) !important;
    text-decoration: none;
    cursor: not-allowed !important;
}

.btn.btn-primary:disabled,
.btn.btn-primary[disabled],
fieldset[disabled] .btn.btn-primary,
.btn.btn-primary.disabled,
.btn.btn-primary[aria-disabled="true"],
.btn.btn-danger:disabled,
.btn.btn-danger[disabled],
fieldset[disabled] .btn.btn-danger,
.btn.btn-danger.disabled,
.btn.btn-danger[aria-disabled="true"],
:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):disabled,
:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light)[disabled],
fieldset[disabled] :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light),
:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light).disabled,
:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light)[aria-disabled="true"],
.Login #btn-login.btn-primary:disabled,
.Login #btn-login.btn-primary[disabled],
.Login #btn-login.btn-primary.disabled,
.Login #btn-login.btn-primary[aria-disabled="true"],
body.Login .otp-modal .btn-send-otp:disabled,
body.Login .otp-modal .btn-send-otp[disabled],
body.Login .otp-modal .btn-send-otp.disabled,
body.Login .otp-modal .btn-send-otp[aria-disabled="true"],
body.Login .otp-modal .otp-confirm-button:disabled,
body.Login .otp-modal .otp-confirm-button[disabled],
body.Login .otp-modal .otp-confirm-button.disabled,
body.Login .otp-modal .otp-confirm-button[aria-disabled="true"] {
    color: #414141 !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-color: #414141 !important;
    border-style: dashed !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

body.Login #btn-login[aria-busy="true"] .otp-button-loader,
body.Login .otp-modal .btn-send-otp[aria-busy="true"] .otp-button-loader,
body.Login .otp-modal .otp-confirm-button[aria-busy="true"] .otp-button-loader {
    border-color: transparent !important;
    border-top-color: currentColor !important;
}

@media (forced-colors: active) {
    .btn.btn-primary,
    .btn.btn-success,
    .btn.btn-danger,
    .btn.btn-link,
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light),
    body.Login .otp-modal .btn.otp-cancel-button,
    .Login #btn-login.btn-primary,
    body.Login .otp-modal .btn-send-otp,
    body.Login .otp-modal .otp-confirm-button {
        color: ButtonText !important;
        background-color: ButtonFace !important;
        background-image: none !important;
        border-color: ButtonText !important;
    }

    .btn.btn-primary:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-success:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-danger:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-link:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .Login #btn-login.btn-primary:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .btn-send-otp:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .otp-confirm-button:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
        text-decoration: underline !important;
    }

    .btn.btn-primary:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-primary.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-success:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-success.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-danger:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-danger.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-link:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light).active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .Login #btn-login.btn-primary:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .Login #btn-login.btn-primary.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .btn-send-otp:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .btn-send-otp.active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .otp-confirm-button:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .otp-confirm-button.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
        color: HighlightText !important;
        background-color: Highlight !important;
        border-color: HighlightText !important;
        box-shadow: none !important;
        text-decoration: underline double !important;
    }

    .btn.btn-primary:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-success:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-danger:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    .btn.btn-link:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .btn.otp-cancel-button:focus-visible,
    .Login #btn-login.btn-primary:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .btn-send-otp:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    body.Login .otp-modal .otp-confirm-button:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px Canvas !important;
    }

    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]),
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light).disabled:focus-visible,
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light)[aria-disabled="true"]:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    .btn.btn-primary:disabled,
    .btn.btn-primary[disabled],
    fieldset[disabled] .btn.btn-primary,
    .btn.btn-primary.disabled,
    .btn.btn-primary[aria-disabled="true"],
    .btn.btn-success:disabled,
    .btn.btn-success[disabled],
    .btn.btn-success.disabled,
    .btn.btn-success[aria-disabled="true"],
    .btn.btn-danger:disabled,
    .btn.btn-danger[disabled],
    fieldset[disabled] .btn.btn-danger,
    .btn.btn-danger.disabled,
    .btn.btn-danger[aria-disabled="true"],
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):disabled,
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light)[disabled],
    fieldset[disabled] :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light),
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light).disabled,
    :is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light)[aria-disabled="true"],
    .Login #btn-login.btn-primary:disabled,
    .Login #btn-login.btn-primary[disabled],
    .Login #btn-login.btn-primary.disabled,
    .Login #btn-login.btn-primary[aria-disabled="true"],
    body.Login .otp-modal .btn-send-otp:disabled,
    body.Login .otp-modal .btn-send-otp[disabled],
    body.Login .otp-modal .btn-send-otp.disabled,
    body.Login .otp-modal .btn-send-otp[aria-disabled="true"],
    body.Login .otp-modal .otp-confirm-button:disabled,
    body.Login .otp-modal .otp-confirm-button[disabled],
    body.Login .otp-modal .otp-confirm-button.disabled,
    body.Login .otp-modal .otp-confirm-button[aria-disabled="true"] {
        color: GrayText !important;
        background-color: ButtonFace !important;
        border-color: GrayText !important;
        border-style: dashed !important;
        opacity: 1 !important;
    }
}

@media (forced-colors: active) {
    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button,
    .k-grid :is(.k-grid-toolbar, .k-grid-content) :is(.k-grid-add, .k-grid-update, .k-grid-save-changes),
    .k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete) {
        color: ButtonText !important;
        background-color: ButtonFace !important;
        border-color: ButtonText !important;
    }

    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:focus-visible,
    .k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete):focus-visible {
        outline-color: Highlight !important;
    }

    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:is(.k-disabled, .k-state-disabled, [aria-disabled="true"]) {
        color: GrayText !important;
        border-color: GrayText !important;
    }
}

/* Fibre pill-button treatment uses solid brand colors with clear interaction states. */
.btn {
    gap: 0.5rem;
    min-height: var(--brand-button-min-height, 44px);
    padding: 10px 22px;
    border-radius: var(--brand-button-radius, 999px) !important;
    font-size: var(--brand-button-font-size, 16px) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, color 160ms ease, background-color 160ms ease;
}

.k-grid .k-button,
.ids-auth-button,
#BtnReprintSNDummy {
    font-size: var(--brand-button-font-size, 16px) !important;
}

.btn .brand-action-icon,
.k-grid .k-button .brand-action-icon,
.ids-auth-button .brand-action-icon {
    display: inline-block;
    flex: 0 0 1.15em;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    vertical-align: -0.16em;
    pointer-events: none;
}

.brand-action-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    vertical-align: middle;
}

.brand-action-input-wrap > input.btn {
    padding-left: 2.5rem !important;
}

.brand-action-input-wrap > .brand-action-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.875rem;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.btn.btn-success {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    background-image: none !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
    box-shadow: 0 2px 5px rgba(0, 52, 26, 0.12) !important;
}

.btn.btn-success:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    background-image: none !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.btn.btn-success:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.btn.btn-success.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    background-image: none !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
    box-shadow: inset 0 2px 5px rgba(0, 52, 26, 0.3) !important;
    transform: translateY(1px);
}

.btn.btn-success:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-image: none !important;
    outline: 2px solid var(--brand-fibre-dark-green, #00341A) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light) {
    color: var(--brand-fibre-gray, #414141) !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-color: rgba(65, 65, 65, 0.6) !important;
    box-shadow: 0 1px 3px rgba(65, 65, 65, 0.1) !important;
}

:is(.btn.btn-secondary, .btn.btn-default:not(.btn-primary), .btn.btn-info, .btn.btn-light):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-secondary-hover, #595959) !important;
    background-image: none !important;
    border-color: var(--brand-button-secondary-hover, #595959) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.btn.btn-secondary:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background: none !important;
    background-image: none !important;
    border-color: var(--brand-fibre-dark-green, #00341A) !important;
    box-shadow: none !important;
}

.btn.btn-danger {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger, #B42318) !important;
    background-image: none !important;
    border-color: var(--brand-button-danger, #B42318) !important;
    box-shadow: 0 2px 5px rgba(111, 22, 15, 0.2) !important;
}

.btn.btn-danger:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger-hover, #8F1D14) !important;
    background-image: none !important;
    border-color: var(--brand-button-danger-hover, #8F1D14) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.btn.btn-danger:active:not(:disabled):not(.disabled):not([aria-disabled="true"]),
.btn.btn-danger.active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger-active, #6F160F) !important;
    background-image: none !important;
    border-color: var(--brand-button-danger-active, #6F160F) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32) !important;
    transform: translateY(1px);
}

.btn.btn-danger:focus-visible:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    outline: 2px solid var(--brand-button-danger, #B42318) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

.btn.btn-link {
    border-radius: var(--brand-button-radius, 999px) !important;
    background-color: rgba(125, 195, 65, 0.14) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.btn.btn-link:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: rgba(125, 195, 65, 0.24) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.btn:is(:disabled, [disabled], .disabled, [aria-disabled="true"]) {
    box-shadow: none !important;
    filter: grayscale(0.7);
    opacity: 0.66 !important;
    transform: none !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button {
    min-height: var(--brand-button-min-height, 44px);
    padding: 9px 18px;
    border-radius: var(--brand-button-radius, 999px) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:hover:not(.k-disabled):not(.k-state-disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px);
    box-shadow: none !important;
}

.k-grid :is(.k-grid-toolbar, .k-grid-content) :is(.k-grid-add, .k-grid-update, .k-grid-save-changes) {
    color: #FFFFFF !important;
    background-color: var(--brand-action-primary, #00341A) !important;
    background-image: none !important;
    border-color: var(--brand-action-primary, #00341A) !important;
}

.k-grid .k-grid-content :is(.k-grid-delete, .k-grid-Delete) {
    color: #FFFFFF !important;
    background-color: var(--brand-button-danger, #B42318) !important;
    background-image: none !important;
    border-color: var(--brand-button-danger, #B42318) !important;
}

.ids-auth-button {
    min-height: 48px;
    gap: 0.6rem;
    padding: 12px 22px;
    border-radius: var(--brand-button-radius, 999px) !important;
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    background-image: none !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
    font-size: var(--brand-button-font-size, 16px) !important;
    box-shadow: 0 2px 5px rgba(0, 52, 26, 0.12);
}

.ids-auth-button:hover {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-color: var(--brand-fibre-green, #7DC341) !important;
    background-image: none !important;
    border-color: var(--brand-fibre-green, #7DC341) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.ids-auth-button:active {
    color: var(--brand-fibre-dark-green, #00341A) !important;
    background-image: none !important;
    box-shadow: inset 0 2px 5px rgba(0, 52, 26, 0.3);
    transform: translateY(1px);
}

.ids-auth-button:focus-visible {
    outline: 2px solid var(--brand-fibre-dark-green, #00341A) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button,
    .ids-auth-button {
        transition: none !important;
    }

    .btn:hover,
    .btn:active,
    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:hover,
    .ids-auth-button:hover,
    .ids-auth-button:active {
        transform: none !important;
    }
}

@media (forced-colors: active) {
    .btn,
    .ids-auth-button,
    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button {
        color: ButtonText !important;
        background-color: ButtonFace !important;
        background-image: none !important;
        border-color: ButtonText !important;
        box-shadow: none !important;
    }

    .btn:focus-visible,
    .ids-auth-button:focus-visible,
    .k-grid :is(.k-grid-toolbar, .k-grid-content) .k-button:focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
    }
}