/*#region COMMON STYLE*/

html {
    /* 1rem = 13.6px. Kendo 2026/Meridian is rem-based (default 1rem = 16px, too big
       for this dense app). 85% scales Kendo content + spacing to the app's density;
       app's own px/em sizes are unaffected. */
    font-size: 85%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--surface);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: var(--label-font-size);
    font-weight: 400;
    height: 100%;
    image-rendering: -webkit-optimize-contrast;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums
}

a {
    color: var(--accent);
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

select {
    border: 1px solid var(--border-strong);
}

textarea {
    font-family: arial, helvetica, sans-serif;
    resize: none;
}

/* ===== Standardisierter Lade-Indikator (global, design-konform) ===== */
.busy {
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2000000000;
    cursor: progress;
}

/* dark mode: dim with a dark scrim instead of a white haze */
body.dark-theme .busy {
    background-color: rgba(0, 0, 0, 0.4);
}

    .busy > .loader {
        -webkit-animation: spin .8s linear infinite;
        animation: spin .8s linear infinite;
        border: 3px solid var(--border-strong, rgba(0, 0, 0, .12));
        border-top-color: var(--accent);
        border-radius: 50%;
        bottom: 0;
        height: 22px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 22px;
    }

.width-100 {
    width: 100% !important;
}

.height-100 {
    height: 100% !important;
}

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

.margin-0 {
    margin: 0 !important;
}

.margin-left-0 {
    margin-left: 0 !important;
}

.margin-right-0 {
    margin-right: 0 !important;
}

.margin-top-0 {
    margin-top: 0 !important;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-25 {
    margin-bottom: 25px;
}

.padding-0 {
    padding: 0 !important;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-right-0 {
    padding-right: 0 !important;
}

.padding-5 {
    padding: 5px !important;
}

.line-height-18 {
    line-height: 18px;
}

.line-height-normal {
    line-height: normal;
}

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

.text-center {
    text-align: center !important;
}

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

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

.text-underline {
    text-decoration: underline !important;
}

.noTextDecoration {
    text-decoration: none;
    /*never set improtant*/
}

.label {
    line-height: 26px;
}

.bold {
    font-weight: bold;
}

.normal-font {
    font-weight: normal !important;
}

.break-word {
    word-wrap: break-word;
}

.hidden {
    display: none;
}

.font-18 {
    font-size: 18px;
}

.font-17 {
    font-size: 17px;
}

.title,
.font-16 {
    font-size: 16px;
}

.sub-title,
.font-14 {
    font-size: 14px;
}

.font-13 {
    font-size: 13px;
}

.capitalize {
    text-transform: capitalize;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.no-float {
    float: none !important;
}

.cursor-hand {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline;
}

.no-border {
    border: none !important;
}

.clear-both {
    clear: both;
}

.display-block {
    display: block;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.text-gray {
    color: var(--color-font-light);
}

.color-red {
    color: red;
}

.gray-bg {
    background-color: var(--color-medium-gray);
}

.position-relative {
    position: relative;
}

pre {
    font-family: arial, helvetica, sans-serif !important;
}

input[disabled],
textarea[disabled],
input[readonly],
textarea[readonly] {
    background-color: var(--color-light-gray) !important;
}

.k-disabled,
.k-disabled .k-input {
    background-color: var(--color-light-gray);
    opacity: 1;
}

li.k-disabled.k-hover {
    background-color: var(--color-light-gray);
    color: var(--color-font-light);
}

/*for donut center custom label */
.k-chart > svg > text {
    fill: var(--text);
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

label {
    white-space: nowrap;
}

input[type=text],
input[type=password],
input[type=email],
textarea {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    outline: 0;
}

input::-ms-clear {
    display: none;
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}

.ul-parent ul {
    list-style: disc outside none;
    padding-left: 2.5em;
}

.sortable-placeholder {
    outline: 1px solid var(--color-corporate);
}

.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.gap-3 {
    gap: 3px;
}

.gap-5 {
    gap: 5px;
}

.gap-7 {
    gap: 7px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}

/*#endregion*/

/*#region GENERAL*/

.tool-separator {
    border-left: 1px solid var(--color-border);
    height: 20px;
}

/* === System-Settings: Action-Toolbars als eigene Zeile UNTER der Tab-Leiste
   (per JS hinter die .k-tabstrip-items-wrapper verschoben; waren in Site.css absolut positioniert) === */
.analysis__tab > .analysis__tools,
.library__tabstrip > .library__actions,
#defaultViewTab > .default-view-actions {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    width: auto;
    border-left: none;
}

    /* führender Separator in der eigenen Zeile ist überflüssig */
    .analysis__tab > .analysis__tools > .tool-separator:first-child {
        display: none;
    }

/* Suggestion-Count als kleines Badge direkt am "Suggestion box"-Tab (rechts neben dem Label) */
.library__tabstrip .library__sugg-count {
    height: 16px !important;
    min-width: 16px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    padding: 0 5px !important;
}

/* === Default-Views: schlichte no-header Listen-Grids → moderne Karten-Zeilen === */
.default-view-holder .k-grid td {
    padding: 10px 14px;
    vertical-align: middle;
}

.default-view-holder .k-grid .title {
    font-weight: 600;
    color: var(--text);
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .default-view-holder .k-grid .title + div {
        color: var(--text-muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Zeilen-Action (…) erst beim Hover/Selektion zeigen – ruhigere Liste */
.default-view-holder .k-grid .inlineAction {
    opacity: 0;
    transition: opacity .12s;
}

.default-view-holder .k-grid tr:hover .inlineAction,
.default-view-holder .k-grid tr.k-selected .inlineAction {
    opacity: 1;
}

.small-box {
    display: inline-block;
    height: 10px;
    width: 10px;
}

.sq-round-box {
    border: 1px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.open,
.status-0 {
    background-color: #5F5E5A;
}

.inprogress,
.status-1 {
    background-color: #317EAA;
}

.closed,
.status-2 {
    background-color: #42803F;
}

.red,
.rag-0 {
    background-color: red;
}

.amber,
.rag-1 {
    background-color: #FFC200;
}

.green,
.rag-2 {
    background-color: green;
}

.rag-undefined,
.rag-3 {
    background-color: gray;
}

.cp-color-0 {
    background-color: #A6A6A6;
    color: #404040;
}

.cp-color-1 {
    background-color: #5B9BD5;
    color: #404040;
}

.cp-color-2 {
    background-color: #FFC000;
    color: #FFF;
}

.cp-color-3 {
    background-color: #C00000;
    color: #FFF;
}

.cp-color-4 {
    background-color: #000000;
    color: #FFF;
}

.cp-color-5 {
    background-color: #00B050;
    color: #FFF;
}

.cp-kind-color-0 {
    background-color: #F9DFE1;
}

.cp-kind-color-1 {
    background-color: #A5FDBC;
}

.dep-type-color-0 {
    background-color: #F86887;
}

.dep-type-color-1 {
    background-color: #BDD7EE;
}

.dep-status-color-0 {
    background-color: #BFBFBF;
}

.dep-status-color-1 {
    background-color: #00B0F0;
}

.dep-status-color-2 {
    background-color: #00B050;
}

.border-red {
    border-color: red !important;
}

.border-amber {
    border-color: #ffc200 !important;
}

.border-green {
    border-color: green !important;
}

.line-through {
    text-decoration: line-through;
}

.critical {
    background-color: red;
}

.serious {
    background-color: #EAB200;
}

.moderate {
    background-color: yellow;
}

.low_priority {
    background-color: green;
}

.planned {
    background-color: #78ACDA;
}

.accomplished {
    background-color: #00AF50;
}

.archived {
    background-color: #808080;
}

.rag-num {
    padding-left: 6px;
}

.rag-type {
    display: inline-block;
    padding-left: 3px;
}

.tall-box {
    display: inline-block;
    height: 13px;
    position: relative;
    top: 2px;
    width: 5px;
}

.rag-box {
    box-sizing: border-box;
    color: #ffffff;
    float: left;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90px;
}

.rag-box-round {
    border-radius: 5px;
}

.rounded-box {
    border-radius: 12px;
    display: inline-block;
    line-height: normal;
    padding: 2px 11px;
    text-align: center;
}

.rounded-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 13px;
    box-shadow: 4px 3px 14px var(--color-box-shadow-light);
    box-sizing: border-box;
}

.file-item {
    background-color: var(--color-medium-gray);
    box-sizing: border-box;
    margin: 0 0 3px 0;
    padding: 6px 5px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .file-item .cross-icon {
        cursor: pointer;
    }

    .file-item .fileName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1 1 auto;
    }

.file-table > table {
    color: #ffffff;
    table-layout: fixed;
}

.file-table .k-grid-header {
    display: none;
}

.file-table .del-btn {
    float: right;
}

.file-table td a:hover {
    text-decoration: underline;
}

.file-table td a {
    color: #ffffff;
    text-decoration: none;
}

.file-table td:nth-child(3) {
    text-align: right;
}

.file-table tr td {
    border-bottom: 6px solid var(--surface) !important;
    padding: 3px 10px 3px 5px;
    white-space: nowrap;
}

.req-field::after {
    content: "*";
    color: red;
}

.json-key {
    color: #2E75B6;
}

.json-value {
    color: #006400;
}

.json-string {
    color: #A31515;
}

.val-type-0 {
    color: #ec3838;
}

.val-type-1 {
    color: #ed7d31;
}

.val-type-2 {
    color: var(--accent);
}

.val-badge-0 {
    background-color: #ec3838;
}

.val-badge-1 {
    background-color: #ed7d31;
}

.val-badge-2 {
    background-color: var(--accent);
}

/*#endregion*/

/*#region SHAPES*/

.symbol {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
}

.symbol-default {
    background-color: var(--text);
}

.symbol1 {
    -webkit-mask: url(/Images/Shapes/1.svg);
    mask: url(/Images/Shapes/1.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol2 {
    -webkit-mask: url(/Images/Shapes/2.svg);
    mask: url(/Images/Shapes/2.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol3 {
    -webkit-mask: url(/Images/Shapes/3.svg);
    mask: url(/Images/Shapes/3.svg);
    -webkit-mask-size: 18px 20px;
    mask-size: 18px 20px;
    width: 18px;
    height: 20px;
}

.symbol4 {
    -webkit-mask: url(/Images/Shapes/4.svg);
    mask: url(/Images/Shapes/4.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol5 {
    -webkit-mask: url(/Images/Shapes/5.svg);
    mask: url(/Images/Shapes/5.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol6 {
    -webkit-mask: url(/Images/Shapes/6.svg);
    mask: url(/Images/Shapes/6.svg);
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    width: 22px;
    height: 22px;
}

.symbol7 {
    -webkit-mask: url(/Images/Shapes/7.svg);
    mask: url(/Images/Shapes/7.svg);
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    width: 22px;
    height: 22px;
}

.symbol8 {
    -webkit-mask: url(/Images/Shapes/8.svg);
    mask: url(/Images/Shapes/8.svg);
    -webkit-mask-size: 18px 22px;
    mask-size: 18px 22px;
    width: 18px;
    height: 22px;
}

.symbol9 {
    -webkit-mask: url(/Images/Shapes/9.svg);
    mask: url(/Images/Shapes/9.svg);
    -webkit-mask-size: 22px 18px;
    mask-size: 22px 18px;
    width: 22px;
    height: 18px;
}

.symbol10 {
    -webkit-mask: url(/Images/Shapes/10.svg);
    mask: url(/Images/Shapes/10.svg);
    -webkit-mask-size: 18px 22px;
    mask-size: 18px 22px;
    width: 18px;
    height: 22px;
}

.symbol11 {
    -webkit-mask: url(/Images/Shapes/11.svg);
    mask: url(/Images/Shapes/11.svg);
    -webkit-mask-size: 22px 18px;
    mask-size: 22px 18px;
    width: 22px;
    height: 18px;
}

.symbol12 {
    -webkit-mask: url(/Images/Shapes/12.svg);
    mask: url(/Images/Shapes/12.svg);
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    width: 22px;
    height: 22px;
}

.symbol13 {
    -webkit-mask: url(/Images/Shapes/13.svg);
    mask: url(/Images/Shapes/13.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol14 {
    -webkit-mask: url(/Images/Shapes/14.svg);
    mask: url(/Images/Shapes/14.svg);
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    width: 22px;
    height: 22px;
}

.symbol15 {
    -webkit-mask: url(/Images/Shapes/15.svg);
    mask: url(/Images/Shapes/15.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

.symbol16 {
    -webkit-mask: url(/Images/Shapes/16.svg);
    mask: url(/Images/Shapes/16.svg);
    -webkit-mask-size: 24px 20px;
    mask-size: 24px 20px;
    width: 24px;
    height: 20px;
}

/*#endregion*/

/*#region LIBRARY-FOLDER-TREE*/

.library__folder-tree {
    flex: 1;
    margin: 15px 0 0 0;
}

    .library__folder-tree input {
        display: block;
        margin: 2px 0;
        width: calc(100% - 33px);
    }

        .library__folder-tree input + .k-tooltip-validation {
            left: 30px;
            position: relative;
            top: -5px;
        }

    .library__folder-tree .inlineAction {
        font-size: 14px;
        height: 19px;
        margin: 0;
    }

    .library__folder-tree .k-treeview-item-content.k-selected .inlineAction,
    .library__folder-tree .k-treeview-item-content:hover .inlineAction {
        display: inline-block;
    }


    .library__folder-tree .drop-hover {
        background: var(--accent-tint);
        border-radius: 6px;
        outline: 1px dashed var(--accent);
    }

    .library__folder-tree .k-treeview-group {
        min-width: 0;
    }

    .library__folder-tree .k-treeview-item-content {
        display: flex;
        align-items: center;
    }

    .library__folder-tree .k-treeview-leaf {
        flex: 1;
        min-width: 0;
        padding-left: 0;
    }

    .library__folder-tree .nodeDropTarget {
        border: 1px dashed transparent;
        padding: 1px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

        .library__folder-tree .nodeDropTarget .name {
            font-size: 13px;
            flex: 1;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/*#endregion*/

/*#region GRID*/

.k-grid .status-circle {
    width: 10px;
    height: 10px;
    position: static;
    margin-right: 3px;
    vertical-align: middle;
}

.k-grid-content td ul {
    list-style: disc outside none;
    padding-left: 2.5em;
}

.k-grid-content td .k-widget ul {
    padding: 0;
}

.boldHeaderGrid .k-grid-header .k-table-th {
    font-weight: 900;
}

.noBorderGrid,
.noBorderGrid .k-grouping-header,
.noBorderGrid .k-grid-header,
.noBorderGrid .k-grid-header-wrap,
.noBorderGrid .k-grid-header th,
.noBorderGrid tbody td {
    border: none;
}

.noBorderHeaderGrid .k-grid-header,
.noBorderHeaderGrid .k-grid-header-wrap,
.noBorderHeaderGrid .k-grid-header th {
    border: none;
}

.header-noborder .k-grid-header-wrap,
.header-noborder .k-grid-header-wrap .k-header {
    border: none;
}

.grid-row-right-border tbody td {
    border-right: 1px solid var(--border) !important;
}

.grid-row-bottom-border tbody td {
    border-bottom: 1px solid var(--border) !important;
}

.k-grid.td-nowrap tbody td {
    white-space: nowrap;
}

.k-grid.td-relative tbody td {
    position: relative;
}

.tr-bg-white tr.k-alt {
    background-color: transparent;
}

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

.k-grid-header .select-all {
    display: none;
}

.k-grid-header .check-box,
.k-grid-content .check-box {
    background-image: url("/Images/AppImages/unchecked-circle.png");
    position: relative;
    top: 3px;
}

.k-grid-content .check-box {
    visibility: hidden;
}

.k-grid-content tr:hover .check-box,
.k-grid-content tr.k-selected .check-box {
    visibility: visible;
}

.k-grid-header input:checked + .check-box,
.k-grid-content tr.k-selected .check-box {
    background-image: url("/Images/AppImages/checked-circle.png");
}

tr:hover .trHoverUnderline,
tr.k-selected .trHoverUnderline {
    cursor: pointer;
    text-decoration: underline;
}

    tr:hover .trHoverUnderline.blue,
    tr.k-selected .trHoverUnderline.blue {
        color: var(--accent);
    }

.k-grid .grid__action {
    cursor: pointer;
    display: none;
    float: left;
}

.k-grid tr:hover .grid__action,
.k-grid tr.k-selected .grid__action {
    display: inline-block;
}

.k-dirty-cell .k-dirty {
    display: none;
}

.grid-total-row {
    background-color: var(--color-medium-gray);
    border-radius: 12px;
    margin-left: 5px;
    padding: 2px 11px;
    position: relative;
    top: -2px;
}

.transparent-grid.k-grid,
.transparent-grid.k-grid .k-grouping-header,
.transparent-grid.k-grid .k-grid-header,
.transparent-grid.k-grid .k-table,
.transparent-grid.k-grid .k-grid-container,
.transparent-grid.k-grid .k-grid .k-grouping-row {
    background-color: transparent;
}

    .transparent-grid.k-grid .k-grid-content tbody tr:hover {
        background-color: var(--hover);
    }

.k-grid.multi-select .inlineAction {
    display: none;
}

.k-grid .k-grid-header-locked,
.k-grid .k-grid-content-locked {
    border-right-color: var(--border);
}

.wrap-header.k-grid .k-grid-header th.k-header {
    position: relative;
    vertical-align: top;
}

    .wrap-header.k-grid .k-grid-header th.k-header,
    .wrap-header.k-grid .k-grid-header th.k-header > .k-link {
        white-space: normal;
    }

        .wrap-header.k-grid .k-grid-header th.k-header > .k-link > .k-icon {
            position: absolute;
            top: 5px;
            right: 0;
        }

.k-grid .open-new-tab {
    background-color: transparent !important;
    cursor: pointer;
    float: right;
    margin: 1px 5px 0 0;
}

.skeleton-grid .grid-skeleton-loader .k-loading-image {
    display: none;
}

.grid-skeleton-loader {
    background-color: var(--color-primary-bg);
    overflow: hidden;
}

    .grid-skeleton-loader table {
        border-collapse: collapse;
        pointer-events: none;
        table-layout: fixed;
        width: 100%;
    }

        .grid-skeleton-loader table td {
            padding: 5px 0 5px 10px !important;
        }

            .grid-skeleton-loader table td span {
                background-color: var(--surface-2);
                animation: skeleton-animation 1.5s infinite;
                border-radius: 4px;
                display: block;
                height: 19.5px;
            }

@keyframes skeleton-animation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

/*#endregion*/

/*#region GRID NAME BUTTON*/
.beforeInlineAction {
    display: inline-block;
    max-width: calc(100% - 45px);
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    .beforeInlineAction.no-wrap {
        line-height: normal;
        word-wrap: normal;
        white-space: nowrap;
    }

    .beforeInlineAction.small {
        max-width: calc(100% - 40px);
    }

.inlineAction {
    display: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    min-width: 0;
    padding: 0;
    margin: 0 0 0 8px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .1s, color .1s;
}

    .inlineAction:hover {
        background: var(--hover);
        color: var(--text);
    }

    /* Defensive: falls doch mal als k-button gerendert → Kendo-Look neutralisieren */
    .inlineAction.k-button {
        background-image: none;
        box-shadow: none;
    }

    .inlineAction.smallInlineAction {
        white-space: nowrap;
    }

    .inlineAction.fillHeight {
        position: absolute;
        right: 6px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 28px;
        height: 24px;
        border: none;
    }

        .inlineAction.fillHeight:hover {
            background-color: var(--hover) !important;
        }

tr:hover .inlineAction,
tr.k-selected .inlineAction {
    display: inline-flex;
}

.blue-underline {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.blue-text {
    color: var(--accent);
}

.grid__name-btn {
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .grid__name-btn .grid__name {
        color: var(--accent);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .grid__name-btn .grid__name-underline {
        cursor: pointer;
    }

tr:hover .grid__name-underline,
tr.k-selected .grid__name-underline {
    text-decoration: underline;
}

.grid__name-btn .grid__btn {
    cursor: pointer;
    display: none;
    flex: 0 0 25px;
    font-size: 19px;
    margin: 0 0 0 auto;
    text-align: center;
}

tr:hover .grid__btn,
tr.k-selected .grid__btn {
    display: flex;
}

/*#endregion*/

/*#region add-arrow-box*/
.add-arrow-box {
    padding: 10px !important;
    overflow: visible !important;
}

    .add-arrow-box .pointer {
        background-color: var(--surface);
        border-color: var(--border);
        border-style: solid;
        border-width: 0 0 2px 2px;
        height: 20px;
        left: -13px;
        position: absolute;
        top: 16px;
        transform: rotate(45deg);
        width: 20px;
    }

    .add-arrow-box > div {
        float: left;
        position: relative;
    }

    .add-arrow-box .name-label {
        margin: 9px 20px 0 0;
        z-index: 1;
    }

    .add-arrow-box .k-tooltip-validation {
        position: absolute;
        left: 0;
        top: 35px;
    }

    .add-arrow-box .add-holder {
        width: 85px;
        margin-left: 10px;
    }

    .add-arrow-box .btn_save {
        box-sizing: border-box;
        height: 35px;
        margin: 0;
        width: 100%;
    }

/*#endregion*/

/*#region BUTTON*/

.k-button.active {
    background-color: var(--kendo-color-base-active) !important;
    border-color: var(--kendo-color-base-active) !important;
}

button[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

button.btn_save[disabled],
button.btn_save_new[disabled] {
    background-color: var(--surface-2);
    color: var(--text-muted);
}

/*#endregion*/

/*#region SWITCH*/

.switch {
    display: none;
}

    .switch + label {
        background-color: var(--text-subtle);
        border-color: var(--text-subtle);
        border: 2px solid var(--text-subtle);
        border-radius: 10px;
        box-sizing: content-box;
        cursor: pointer;
        float: left;
        display: inline-block;
        height: 14px;
        position: relative;
        width: 28px;
    }

    .switch:checked + label {
        background-color: var(--color-corporate);
        border-color: transparent;
    }

    .switch:disabled + label {
        cursor: default;
        opacity: 0.6;
    }

    .switch + label > span {
        background-color: var(--color-font-white);
        border-radius: 50%;
        display: inline-block;
        height: 10px;
        left: 2px;
        position: absolute;
        top: 2px;
        transition: left 0.2s ease 0s;
        width: 10px;
    }

    .switch:checked + label > span {
        left: calc(100% - 12px);
    }

.text-switch {
    background-color: var(--color-secondary-bg);
    border-radius: 100px;
    padding: 2px;
    display: flex;
}

    .text-switch input {
        display: none;
    }

    .text-switch label {
        border-radius: 100px;
        color: var(--color-font-light);
        font-size: 12px;
        font-weight: bold;
        padding: 4px 12px;
    }

    .text-switch input:checked + label {
        background: var(--color-primary-bg);
    }

/*#endregion*/

/*#region DROPDOWN && DROPDOWN TREE*/

.transparentDropdown.k-picker,
.transparentDropdown.k-picker .k-input-inner {
    background-color: transparent;
    border-color: transparent;
    outline: none;
}

    .transparentDropdown.k-picker.k-hover {
        background-color: var(--hover);
    }

    .transparentDropdown.k-picker.k-disabled {
        background-color: var(--surface-2);
    }

.user-dropdown-item {
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .user-dropdown-item > .userImageDisplay.random-colored {
        flex: 0 0 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-dropdown-item > .user-name {
        flex: 1;
        line-height: normal;
        overflow: hidden;
        text-indent: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-dropdown-item.user-dropdown-value {
        box-sizing: border-box;
        float: left;
        padding: 0 0 0 3px;
        width: calc(100% - 5px);
    }

        .user-dropdown-item.user-dropdown-value > .userImageDisplay.random-colored {
            font-size: 9px;
            height: 20px;
            text-indent: 0;
            flex: 0 0 20px;
        }

.dropdown-group-list .k-list-group-item {
    background-color: var(--surface-2);
    box-shadow: 0 1px 0 var(--kendo-color-border);
    color: var(--kendo-color-on-app-surface);
    font-size: 1rem;
}

/*#endregion*/

/*#region WINDOW*/
.semyouWindow {
    display: none;
    overflow-x: hidden !important;
}

    .semyouWindow .contentSection {
        padding: 10px 20px 25px 20px;
        height: calc(100% - 35px);
    }

    /* Dialog footer: discrete real Kendo Buttons (Save = primary, Cancel = base),
       right-aligned with a gap + top divider. btnSave/btnCancel are auto-converted
       by Global.InitButtons. */
    .semyouWindow .buttonSection {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        padding-top: 14px;
    }

        /* Kendo Buttons keep the app's .disabled state */
        .semyouWindow .buttonSection .k-button.disabled {
            opacity: .6;
            pointer-events: none;
        }

/* The .semyouWindow element IS the .k-window-content. Lay it out as a flex
       column so .buttonSection is a TRUE footer and .contentSection scrolls
       above it. Fixes buttons overlapping content: Meridian's taller titlebar +
       larger fonts made the old `height: calc(100% - Npx)` reserves overflow,
       so content spilled over the footer (e.g. #deleteKeypointWindow). */
.k-window-content.semyouWindow {
    /* !important: Kendo sets an inline display on the content to override the
           initial `.semyouWindow{display:none}`; we must beat that inline value.
           Safe because open/close is toggled on the .k-window wrapper, not here. */
    display: flex !important;
    flex-direction: column;
}

.semyouWindow .contentSection {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

.semyouWindow .buttonSection {
    flex: 0 0 auto;
}

.k-window.big-title .k-window-titlebar .k-window-title {
    color: var(--text);
    display: inline-block;
    font-size: 21px;
    height: auto;
    position: relative;
    text-transform: none;
    z-index: 1;
}

.k-window.big-title .k-window-content {
    padding-top: 0;
}

.k-window-titlebar.uppercase .k-window-title {
    text-transform: uppercase;
}

#warningPopUp,
#AlertPopup {
    overflow: hidden;
}

    #warningPopUp .contentSection > table,
    #AlertPopup .contentSection > table {
        height: 100%;
        width: 100%;
        table-layout: fixed;
        vertical-align: middle;
    }

        #warningPopUp .contentSection > table .text .label {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }

        #warningPopUp .contentSection > table .text2 {
            border-top: 1px solid var(--border);
            margin-top: 10px;
            padding-top: 10px;
        }

    #AlertPopup .contentSection .text {
        line-height: 20px;
    }

.k-window.k-window-maximized .maximize-btn .enlarge-icon::before {
    content: "\f166";
}

.max-close-buttons {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
}

    .max-close-buttons > div {
        border-radius: 8px;
        color: var(--text-muted);
        cursor: pointer;
        height: 30px;
        width: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .max-close-buttons > div:hover {
            background-color: var(--hover);
            color: var(--text);
        }

.save-cancel-buttons {
    position: absolute;
    right: 92px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.proj-link-title > span {
    cursor: pointer;
    font-weight: 600;
}

    .proj-link-title > span:hover {
        text-decoration: underline;
    }

    .proj-link-title > span > span:nth-child(1) {
        font-family: var(--mono, "JetBrains Mono", monospace);
        font-size: 11.5px;
        color: var(--text-subtle);
    }

    .proj-link-title > span > span:nth-child(2) {
        color: var(--accent);
        font-size: 12.5px;
    }

.pcp__popup {
    display: none;
}

.pcp__popup__content {
    box-sizing: border-box;
    height: 100%;
    padding: 0 0 5px 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pcp__popup__body {
    overflow: auto;
    padding: 0 15px 0 0;
    flex: 1 1 auto;
}

.pcp__popup__actions {
    display: flex;
    gap: 10px;
}

    .pcp__popup__actions button {
        margin: 0;
    }

/*#endregion*/

/*#region RATING*/
.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-block;
}

    .rating.readonly {
        pointer-events: none;
    }

    .rating > span {
        cursor: pointer;
        display: inline-block;
        font-size: 18px;
        position: relative;
        width: 16px;
    }

        .rating > span.active:before,
        .rating > span.active ~ span:before {
            content: "\2605";
            position: absolute;
        }

        .rating > span:hover,
        .rating > span:hover ~ span {
            color: var(--color-corporate);
        }

            .rating > span:hover:before,
            .rating > span:hover ~ span:before {
                content: "\2605";
                position: absolute;
                color: var(--color-corporate);
            }

    .rating .overlay-star {
        background-color: var(--surface);
        display: inline-block;
        height: 100%;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
    }

    .rating > span:hover > .overlay-star,
    .rating > span:hover ~ span > .overlay-star {
        display: none;
    }

tr.k-selected .overlay-star,
tr:hover .overlay-star {
    background-color: var(--color-secondary-bg);
}

/*#endregion*/

/*#region SEARCH BOX*/

.topSearchHolder {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    float: left;
    height: 30px;
    margin-left: 15px;
    overflow: hidden;
    width: 250px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .topSearchHolder .searchText {
        background-color: transparent;
        border: none;
        color: var(--text);
        height: 100%;
        min-width: 0;
        text-indent: 7px;
        flex: 1;
    }

    .topSearchHolder .searchIcon {
        color: var(--text-subtle);
        cursor: pointer;
        font-family: FluentSystemIcons-Regular;
        font-style: normal;
        height: 100%;
        line-height: normal;
        flex: 0 0 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .topSearchHolder .searchIcon::before {
            content: "\f690";
        }

    .topSearchHolder.filter-active {
        border-color: var(--color-corporate);
    }

/*#endregion*/

/*#region  CHECKBOX & RADIO BUTTON*/

/*in "checkBoxHolder" this could be either radio or checkbox*/
.checkBoxHolder input {
    display: none;
}

.checkBoxHolder label {
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding-left: 25px;
    position: relative;
}

    .checkBoxHolder label:before {
        background-color: var(--surface);
        border: 1px solid var(--border-strong);
        bottom: 1px;
        content: "";
        display: inline-block;
        height: 14px;
        left: 0;
        margin-right: 10px;
        position: absolute;
        width: 15px;
    }

.checkBoxHolder input:checked + label:before {
    background-image: var(--image-tick);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px auto;
}

.checkBoxHolder input:disabled + label:before {
    background-color: var(--surface-2);
    cursor: default;
}

.checkBoxHolder-big label:before {
    height: 18px;
    width: 18px;
}

.checkBoxHolder-big input:checked + label:before {
    background-size: 14px auto;
}

.checkBoxHolder-green label:before {
    border-color: var(--red);
}

.checkBoxHolder-green input:checked + label:before {
    border-color: #00b050;
}

.checkBoxHolder-green input:checked + label:before,
.checkBoxHolder-bg-green input:checked + label:before {
    background-image: url("/Images/AppImages/tick-green.png");
}

.checkBoxHolder-bg-green label:before {
    background-color: var(--green-t);
    border-color: var(--green-t);
}

.checkBoxHolder-round label:before {
    border-radius: 4px;
}

.normalRadio {
    display: none;
}

    .normalRadio + label {
        background-image: url("/Images/AppImages/radio_button_off.png");
        background-repeat: no-repeat;
        background-size: 18px 18px;
        cursor: pointer;
        font-size: 12px;
        padding: 2px 15px 2px 20px;
        position: relative;
        top: -2px;
    }

    .normalRadio:checked + label {
        background-image: url("/Images/AppImages/radio_button_on.png");
    }

    .normalRadio.bigRadio + label {
        background-size: 24px 24px;
        margin-right: 15px;
        padding: 5px 0 5px 25px;
    }

    .normalRadio:disabled + label {
        cursor: default;
    }

/*#endregion */

/*#region WINDOW RIGHT*/

.panel-window {
    /* Right-aligned full-height drawer: square corners (revert Meridian xxl rounding),
       border + shadow per UI redesign draft (.filterdrawer). */
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    left: auto !important;
    height: calc(100% - 3px);
    padding-top: 0 !important;
    transition: right 0.3s ease 0s;
}

    .panel-window.k-focus {
        box-shadow: var(--shadow-pop);
    }

    .panel-window.sub-window,
    .panel-window.sub-window.k-focus {
        box-shadow: none;
    }

    .panel-window .k-window-title {
        font-size: 16px;
        text-transform: none;
    }

    .panel-window .k-window-content {
        overflow: hidden;
        padding: 15px 0 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .panel-window .body {
        overflow: auto;
        padding: 0 15px 0 5px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .panel-window .action-buttons {
        display: flex;
        gap: 8px;
    }

/*#endregion*/

/*#region SLIDER KENDO*/

.custom-slider.k-slider-horizontal .k-draghandle {
    border-radius: 3px;
    height: 12px;
    width: 6px;
}

/*#endregion*/

/*#region CUSTOM SPLITTER*/

.k-splitter {
    border: none;
}

    .k-splitter > .k-splitbar,
    .k-splitter > .k-ghost-splitbar {
        border: none;
    }

    .k-splitter .k-splitbar .k-collapse-next,
    .k-splitter .k-splitbar .k-collapse-prev,
    .k-splitter .k-splitbar .k-expand-next,
    .k-splitter .k-splitbar .k-expand-prev,
    .k-splitter .k-splitbar .k-resize-handle {
        display: none;
    }

    .k-splitter > .k-splitbar {
        background-color: var(--border-strong);
    }

    .k-splitter.splitbar-onactive > .k-splitbar {
        background-color: transparent;
    }

        .k-splitter.splitbar-onactive > .k-splitbar.k-splitbar-draggable-horizontal,
        .k-splitter.splitbar-onactive > .k-splitbar.k-splitbar-draggable-vertical {
            background-color: var(--border-strong);
        }

    .k-splitter > .k-splitbar.k-splitbar-horizontal,
    .k-splitter > .k-ghost-splitbar-horizontal {
        width: 2px;
    }

    .k-splitter > .k-splitbar.k-splitbar-vertical,
    .k-splitter > .k-ghost-splitbar-vertical {
        height: 2px;
    }

/*#endregion*/

/*#region CUSTOM TAB*/

.k-tabstrip .tab-count {
    background-color: var(--color-medium-gray);
    border-radius: 10px;
    line-height: normal;
    margin: 0 0 0 5px;
    padding: 1px 8px;
}

    .k-tabstrip .tab-count:empty {
        display: none;
    }

.customTabstrip {
    height: 100%;
}

    .customTabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item {
        border-radius: 8px;
    }

        .customTabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-focus {
            outline: none;
        }

        .customTabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active {
            background-color: var(--surface-2);
            border-color: transparent;
            margin: 0;
        }

        .customTabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item:hover {
            background-color: var(--surface-2);
        }

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

    .customTabstrip > .k-tabstrip-content {
        border-color: transparent;
        border-radius: 0;
    }

.customTabstrip4 {
    height: 100%;
}

    .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items {
        border-bottom: 1px solid var(--border);
        padding: 0 12px;
        gap: 2px;
    }

        .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item {
            border: none;
            color: var(--text-muted);
            font-weight: 500;
        }

            .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-focus {
                outline: none;
            }

            .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item:hover {
                color: var(--text);
            }

            .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item .k-link {
                padding: 9px 12px 12px;
            }

            .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item .npx-ic {
                width: 16px;
                height: 16px;
            }

            .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active {
                color: var(--text);
                font-weight: 600;
            }

                .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active::after {
                    background-color: var(--accent);
                    content: '';
                    position: absolute;
                    left: 3px;
                    right: 3px;
                    bottom: -1px;
                    height: 2px;
                }

                .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active .k-link-text {
                    color: var(--text);
                }

                    .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active .k-link-text .site-icon,
                    .customTabstrip4 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active .npx-ic {
                        color: var(--accent);
                        font-weight: normal;
                    }

    .customTabstrip4 > .k-tabstrip-content {
        border-color: transparent;
        border-radius: 0;
    }

.customTabstrip5 {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

    .customTabstrip5 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item {
        border-color: transparent;
        margin: 0;
        outline: none;
    }

        .customTabstrip5 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-focus {
            outline: none;
        }

        .customTabstrip5 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active::after {
            background: var(--accent);
            bottom: -2px;
            content: '';
            height: 2px;
            position: absolute;
            left: 8px;
            right: 8px;
        }

        .customTabstrip5 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active > .k-link {
            color: var(--text-muted);
            padding: 10px;
        }

        .customTabstrip5 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active > .k-link {
            font-weight: 600;
        }

    .customTabstrip5 > .k-tabstrip-content {
        border-color: transparent;
        border-radius: 0;
        padding: 0;
    }

.customTabstrip6 {
    height: 100%;
}

    .customTabstrip6 > .k-tabstrip-items-wrapper {
        border-bottom: none;
        padding: 10px 15px;
        gap: 12px;
    }

        .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items {
            background: var(--surface-2);
            border-radius: 8px;
            margin: 0 0 0 auto;
            padding: 2px;
            width: auto;
            order: 2;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }

            .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item {
                border-radius: 6px;
                margin: 0;
                padding: 0;
            }

                .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-focus {
                    outline: none;
                }

                .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active {
                    background-color: var(--surface);
                    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
                    outline: none;
                }

                .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item .k-link {
                    height: 28px;
                    padding: 0 12px;
                }

                .customTabstrip6 > .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item.k-active .k-link-text .text {
                    font-weight: 550;
                }

    .customTabstrip6 > .k-tabstrip-content {
        border-color: transparent;
        border-radius: 0;
        padding: 10px 0 0 10px;
    }

/*#endregion*/

/*#region CUSTOM TOOLBAR*/

.customToolbar {
    border: none;
    min-height: fit-content;
}

    .customToolbar .k-split-button:hover {
        background-color: var(--hover);
        border-radius: var(--r-btn);
    }

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

/*#endregion*/

/*#region CUSTOM GANTT*/

.custom-gantt .k-gantt-toolbar {
    display: none;
}

.custom-gantt .k-gantt-splitter {
    height: 100% !important;
}

/*#endregion*/

/*#region VERTICAL TAB*/
.vertical-tab-splitter {
    height: 100%;
}

    .vertical-tab-splitter > .k-pane.k-scrollable {
        overflow: visible;
    }

    .vertical-tab-splitter > .k-collapsed + .k-splitbar {
        background-color: transparent;
    }

.vertical-tab-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .vertical-tab-menu .expand-btn {
        cursor: pointer;
        margin-bottom: 12px;
    }

.k-collapsed .vertical-tab-menu .expand-btn {
    margin-top: 16px;
    transform: rotate(180deg);
}

.vertical-tab-menu ul li {
    cursor: pointer;
    font-size: var(--value-font-size);
    padding: 8px 5px 8px 15px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .vertical-tab-menu ul li:hover,
    .vertical-tab-menu ul li.selected {
        background-color: var(--color-hover-bg);
    }

.vertical-tab-menu .section {
    border-bottom: 1px solid var(--border);
    font-weight: bold;
    line-height: 26px;
    margin: 15px 5px 10px 15px;
}

.k-collapsed .vertical-tab-menu > div {
    display: none;
}

/* Portfolio cockpit menu — modern line icons (replaced legacy .site-icon sprites)
   + on-brand selection state, matching the global left main-menu pane (.pcp-sidenav). */
.menu-p-cockpit .overflow-auto {
    padding-top: 10px; /* breathing room (the "Portfolio cockpit" heading was removed) */
}

.menu-p-cockpit ul li .pcc-ic {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-subtle);
    transition: color .12s;
}

.menu-p-cockpit ul li:hover {
    background-color: var(--hover);
}

    .menu-p-cockpit ul li:hover .pcc-ic {
        color: var(--text-muted);
    }

.menu-p-cockpit ul li.selected {
    background-color: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

    .menu-p-cockpit ul li.selected .pcc-ic {
        color: var(--accent);
    }

.menu-p-cockpit .section {
    border-bottom-color: var(--border);
    color: var(--text-muted);
}

.vertical-tab-content-wrapper {
    height: 100%;
}

.vertical-tab-tools {
    height: 33px;
    margin: 0 0 0 5px;
    padding: 0 0 0 20px;
}

    .vertical-tab-tools > div {
        display: none;
    }

.vertical-tab-content {
    box-sizing: border-box;
    height: calc(100% - 33px);
    padding: 12px 0 0 20px;
}

    .vertical-tab-content > div {
        display: none;
        height: 100%;
    }

/*#endregion*/

/*#region GROUP TAB*/

.tab__group {
    height: 100%;
    overflow: hidden;
    display: flex;
}

.tab__group__menu {
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 0 10px 0;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lang-de .tab__group__menu {
    flex: 0 0 300px;
}

.tab__group__title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-indent: 20px;
}

.tab__group__item {
    font-size: var(--value-font-size);
    flex-shrink: 0;
}

    .tab__group__item > div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .tab__group__item > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tab__group__item li {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        /* menu entry icons inherit the item color (incl. the blue active state) */
        .tab__group__item li .site-icon {
            flex: 0 0 16px;
            opacity: .85;
        }

    /* fixed row height, aligned with the main-menu nav pane (.pcp-nav-item: 38px) */
    .tab__group__item > div,
    .tab__group__item li {
        cursor: pointer;
        height: 38px;
        padding: 0 5px 0 20px;
    }

        .tab__group__item li:hover,
        .tab__group__item li.active {
            background-color: var(--color-secondary-bg);
        }

        .tab__group__item li.active {
            color: #2578D1;
        }

    .tab__group__item.collapsed ul {
        display: none;
    }

.tab__group__body {
    overflow: hidden;
    padding: 22px 10px 10px 22px;
    flex: 1;
}

    .tab__group__body > div {
        display: none;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

/*#endregion*/

/*#region RAG LIGHT*/
.rag-light-template {
    height: 18px;
}

    .rag-light-template > span {
        border-radius: 50%;
        display: inline-block;
        height: 18px;
        margin-right: 3px;
        width: 18px;
    }

        .rag-light-template > span.off {
            background-color: var(--surface-2);
        }

/*#endregion*/

/*#region CUSTOM DRAGDROP*/

.customDragDrop {
    height: 100%;
    width: 100%;
}

.customDragDropHolder {
    position: relative;
}

    .customDragDropHolder .k-upload-button .k-button-text {
        background-image: url("/Images/AppImages/upload.png");
        background-repeat: no-repeat;
        background-size: 18px auto;
        padding: 0 0 0 22px;
    }

    .customDragDropHolder .k-disabled .k-upload-button {
        opacity: 0.6;
    }

    .customDragDropHolder .k-upload .k-upload-files,
    .customDragDropHolder .k-upload .k-actions,
    .customDragDropHolder .k-dropzone em {
        display: none;
    }

/*#endregion*/

/*#region CUSTOM DONUT CHART*/
.legend-box {
    float: left;
    height: 40px;
    margin-right: 5px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    width: 65px;
}

    .legend-box .color {
        float: left;
        height: 100%;
        width: 7px;
    }

    .legend-box .text {
        float: left;
        font-weight: bold;
        padding-left: 4px;
        width: calc(100% - 11px);
    }

    .legend-box .value {
        float: left;
        font-size: 20px;
        font-weight: bold;
        padding-left: 4px;
        width: calc(100% - 11px);
    }

.legend-right {
    float: left;
    width: calc(100% - 95px);
}

    .legend-right + .donut-legend {
        float: left;
        width: 95px;
    }

        .legend-right + .donut-legend .legend-box {
            margin-bottom: 5px;
        }

.donut-legend.text-center .legend-box {
    display: inline-block;
    float: none;
}

/*#endregion*/

/*#region TREEVIEW*/

.custom-treeview .k-treeview-group {
    min-width: 0;
}

.custom-treeview .k-treeview-leaf {
    cursor: pointer;
    padding: 1px 0;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.custom-treeview .name {
    overflow: hidden;
    padding: 5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.custom-treeview .inlineAction {
    font-size: 14px;
    margin: 0 5px 0 0;
    position: static;
}

.custom-treeview .k-treeview-item-content.k-selected .inlineAction,
.custom-treeview .k-treeview-item-content:hover .inlineAction {
    display: inline-block;
}

.customTreeView .k-treeview-leaf {
    background-color: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    line-height: 28px;
    margin: 0 0 1px;
    padding: 1px 0;
    position: relative;
    width: 100%;
}

    .customTreeView [role="treeitem"] div > span.k-selected,
    .customTreeView .k-treeview-leaf:hover {
        background-color: var(--color-hover-bg);
    }

.k-treeview .check-box {
    visibility: hidden;
    position: relative;
    top: 3px;
    background-image: url("/Images/AppImages/unchecked-circle.png");
}

.k-treeview .k-hover .check-box,
.k-treeview .k-selected .check-box {
    visibility: visible;
}

.k-treeview .k-selected .check-box {
    background-image: url("/Images/AppImages/checked-circle.png");
}

/*#endregion*/

/*#region CHART & STAT HOLDER*/
.anylasisStatHolder {
    background-color: var(--color-widget-bg);
    border: 1px solid var(--color-border);
    float: left;
    height: 257px;
    margin: 0 10px 10px 0;
    padding: 10px;
}

    /* Kendo 2026 setzt nach async-Daten teils ein verirrtes "No data available"-Overlay ÜBER
   Charts, die längst Daten/Balken zeigen (Race: Resize vor Daten-Ankunft, je nach Bau-Pfad).
   Auf Dashboard-Widgets generell ausblenden — pfad-unabhängig, deckt alle Chart-Bau-Wege ab. */
    .anylasisStatHolder .k-chart-overlay,
    .dashboardViewPanel .k-chart-overlay,
    .kp-anl-box .k-chart-overlay {
        display: none !important;
    }

    .anylasisStatHolder.smaller {
        height: 115px;
        margin: 0 5px 5px 0;
        padding: 10px 5px;
        width: 125px;
    }

    .anylasisStatHolder .title {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .anylasisStatHolder .body {
        box-sizing: border-box;
        height: calc(100% - 22px);
        position: relative;
    }

    .anylasisStatHolder .bigText {
        font-size: 30px;
        font-weight: normal;
    }

    .anylasisStatHolder .table {
        border-collapse: collapse;
        width: 100%;
    }

        .anylasisStatHolder .table td {
            border-bottom: 1px solid var(--border);
            border-top: 1px solid var(--border);
            height: 24px;
            padding: 0;
        }

/*#endregion*/

/*#region EXPANDABLE AREA*/

.expandable-area {
    position: relative;
}

    .expandable-area .arrow {
        /* icon-* class from arrow could be remove in code*/
        cursor: pointer;
        display: none;
        position: absolute;
        right: 15px;
        height: 16px;
        width: 16px;
        font-size: 16px;
    }

    .expandable-area .enlarge {
        cursor: pointer;
        display: none;
        position: absolute;
        right: 39px;
        height: 16px;
        width: 16px;
        font-size: 16px;
    }

    .expandable-area:hover .arrow,
    .expandable-area:hover .enlarge,
    .expandable-area.collapsed .arrow,
    .expandable-area.collapsed .enlarge,
    .expandable-area.enlarged .enlarge {
        display: block;
    }

    .expandable-area.enlarged:hover .arrow {
        display: none;
    }

    .expandable-area.enlarged .enlarge {
        right: 0;
    }

        .expandable-area.enlarged .enlarge::before {
            content: "\f166";
        }

    .expandable-area .body {
        height: auto;
        margin-bottom: 10px;
        overflow: auto;
        padding: 0;
        position: relative;
    }

    .expandable-area.collapsed .body {
        display: none;
    }

    .expandable-area.enlarged,
    .expandable-container .expandable-parent.enlarged {
        float: none;
        width: 100% !important;
    }

    .expandable-area.hidden,
    .expandable-parent.hidden {
        display: none;
    }

.full-expand .expandable-parent.enlarged,
.full-expand .expandable-area.enlarged {
    height: 100%;
    margin-bottom: 0 !important;
    max-height: none !important;
}

.full-expand .expandable-area .body {
    height: calc(100% - 38px);
}

.expand-collapse-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

    .expand-collapse-area > .ec-header {
        border-bottom: 1px solid var(--border);
        padding-bottom: 5px;
        display: flex;
        align-items: center;
    }

        .expand-collapse-area > .ec-header > .title {
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }

        .expand-collapse-area > .ec-header > .actions {
            margin: 0 0 0 auto;
            display: flex;
            align-items: center;
            gap: 5px;
        }

    .expand-collapse-area .actions > .arrow {
        cursor: pointer;
        display: none;
    }

    .expand-collapse-area:hover .actions > .arrow,
    .expand-collapse-area.collapsed .actions > .arrow {
        display: block;
    }

    .expand-collapse-area > .ec-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .expand-collapse-area.collapsed > .ec-body {
        display: none;
    }

/*#endregion*/

/*#region FILTER MENU*/
.filter-action-menu {
    float: left;
}

.filter-dropdown-list .k-list-optionlabel {
    display: none;
}

.filter-dropdown-list .k-list-scroller {
    height: calc(100% - 28px) !important;
}

.filter-dropdown-list.no-filter .k-list-scroller {
    height: 100% !important;
}

.filter-dropdown-list li {
    padding: 3px 4px !important;
}

    .filter-dropdown-list li.k-hover,
    .filter-dropdown-tree span.k-hover {
        background-color: var(--color-hover-bg);
        border-color: var(--border);
        color: var(--text);
    }

.filter-dropdown-tree span.k-focus {
    border-color: transparent;
}

.filter-dropdown-tree li > div:hover {
    background-color: var(--color-hover-bg);
}

.filter-dropdown-list li .checkBoxHolder label,
.filter-dropdown-tree li .checkBoxHolder label {
    padding-left: 20px;
}

.filter-action-menu > ul.k-menu > li > span {
    min-width: 150px;
}

.filter-action-menu .k-menu.filter-active > li > span {
    font-weight: bold;
}

.filter-action-menu .k-animation-container {
    min-width: 100%;
}

    .filter-action-menu .k-animation-container > ul {
        min-width: calc(100% - 4px);
    }

    .filter-action-menu .k-animation-container .k-item > .k-link {
        overflow: hidden;
        padding: 3px 10px 4px;
        text-overflow: ellipsis;
    }

.filter-action-menu .normalRadio + label {
    float: left;
    margin-top: 1px;
    padding-left: 6px;
}

/*#endregion*/

/*#region TAB LIKE BUTTON*/

.tab-button-holder {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--border);
}

    .tab-button-holder button {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: auto;
        min-width: 0;
        margin: 0;
        padding: 9px 14px 12px;
        background-color: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }

        .tab-button-holder button:hover {
            color: var(--text);
        }

        .tab-button-holder button.active {
            color: var(--text);
            font-weight: 600;
        }

        .tab-button-holder button .npx-ic {
            width: 16px;
            height: 16px;
        }

        .tab-button-holder button .active-indicator {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -1px;
            border-bottom: 2.5px solid transparent;
            border-radius: 3px 3px 0 0;
            width: auto;
        }

        .tab-button-holder button.active .active-indicator {
            border-color: var(--accent);
        }

    .tab-button-holder .seperator {
        display: none;
    }

.tab-button-holder2 {
    border-radius: 8px;
    background: var(--surface-2);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    .tab-button-holder2 button {
        background-color: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 500;
        height: 28px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .tab-button-holder2 button .npx-ic {
            height: 15px;
            width: 15px;
        }

        .tab-button-holder2 button:hover {
            color: var(--text);
        }

        .tab-button-holder2 button.active {
            background: var(--surface);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            color: var(--text);
            font-weight: 600;
        }

            .tab-button-holder2 button.active .npx-ic,
            .tab-button-holder2 button.active .site-icon {
                color: var(--accent);
                font-weight: normal;
            }

/*#endregion*/

/*#region NO DATA TEMPLATE*/

.no-data-template {
    flex: 1;
    color: var(--text-muted);
    padding: 56px 30px;
    text-align: center;
}

    .no-data-template .title {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 5px 0;
    }

    .no-data-template .sub-title {
        margin: 0 0 15px 0;
        font-size: 12.5px;
    }

    .no-data-template button {
        min-width: 110px;
    }

/*#endregion*/

/*#region EDITOR*/

.customEditorTool {
    background-color: var(--kendo-color-base);
    border-radius: var(--kendo-border-radius-md);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .16);
    box-sizing: border-box;
    cursor: pointer;
    height: 32.58px;
    width: 32.58px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1px;
    justify-content: center;
}

    .customEditorTool:hover {
        color: var(--kendo-color-on-base);
        background-color: var(--kendo-color-base-hover);
    }

    .customEditorTool.custom-template {
        width: 40px;
    }

#editorEmojiMenus {
    width: 180px;
}

    #editorEmojiMenus li {
        float: left;
        height: 20px;
        padding: 5px;
        text-align: center;
        width: 20px;
    }

.editorToolbarWindow {
    background-color: var(--surface-2);
}

    .editorToolbarWindow .k-tool {
        border-color: transparent;
    }

    .editorToolbarWindow button {
        min-width: 0;
    }

.k-window.k-editor-widget {
    box-shadow: 1px 1px 7px 1px rgba(128, 128, 128, 0.298039)
}

#editorMentionMenus {
    min-height: 218px;
    width: 250px;
}

    #editorMentionMenus .k-picker {
        display: none;
    }

    #editorMentionMenus .k-animation-container {
        position: static !important;
    }

    #editorMentionMenus .k-list-filter > .k-textbox {
        width: 100% !important;
    }

    #editorMentionMenus .k-list-container {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        padding: 8px;
        height: 100% !important;
        width: 100% !important;
    }

    #editorMentionMenus li .mention-template {
        font-weight: normal;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    #editorMentionMenus li .userImageDisplay {
        border-color: transparent;
        flex: 0 0 32px;
    }

    #editorMentionMenus li .mention-template__name {
        flex: 1;
        line-height: normal;
        overflow: hidden;
    }

        #editorMentionMenus li .mention-template__name > div {
            text-overflow: ellipsis;
            overflow: hidden;
        }

            #editorMentionMenus li .mention-template__name > div:nth-child(2) {
                color: var(--text-muted);
                font-size: 11.5px;
            }

.user-mention {
    color: var(--accent);
    font-weight: bold;
}

/*#endregion*/

/*#region STYLE FOR CONTENT FROM EDITOR*/

.editor-body {
    font-weight: 400;
    line-height: 20px;
}

    .editor-body p {
        margin: 0;
    }

    .editor-body ul {
        list-style: disc outside none;
        padding-left: 2.5em;
    }

    .editor-body .k-table,
    .editor-body .k-grid .k-table {
        border-collapse: collapse;
        margin: 0 0 5px 0;
    }

        .editor-body .k-table td,
        .editor-body .k-table th {
            border: 1px solid var(--border);
        }

.template-table tr.header {
    background-color: var(--surface-2);
    height: 35px;
    font-weight: bold;
    text-align: center;
}

.object-table tr {
    height: 32px;
}

.object-table td:first-child {
    background-color: var(--surface-2);
    width: 85px;
}

.object-table td:last-child {
    width: 150px;
}

.template-kp-table tr td {
    border: 1px solid var(--border) !important;
    padding: 2px 3px;
}

    .template-kp-table tr td:first-child {
        background-color: var(--surface-2);
        font-weight: bold;
    }

.editor-panel > div:first-child {
    border: 1px solid var(--border);
    padding: 10px;
}

.editor-panel > div:last-child {
    border-color: var(--border);
    border-style: none solid solid;
    border-width: 1px;
    min-height: 50px;
    padding: 10px;
}

.editor-pre {
    background-color: var(--surface-2);
    padding: 10px 5px;
    margin: 0;
}

.editor-checkbox input {
    pointer-events: none;
}

/*#endregion*/

/*#region RAG LIGHT*/

.traffic-light {
    background-color: var(--surface-2);
    height: 55px;
    padding: 5px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 20px;
}

    .traffic-light input {
        display: none;
    }

    .traffic-light label {
        background-color: var(--surface);
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
        height: 16px;
        width: 16px;
    }

    /* RAG colours = CSS theme variables (.pcp-pill palette) — theme/dark-mode adaptive */
    .traffic-light input:checked + label.red {
        background-color: var(--red);
    }

    .traffic-light input:checked + label.amber {
        background-color: var(--amber);
    }

    .traffic-light input:checked + label.green {
        background-color: var(--green);
    }

/* Modern RAG project-status beacon (replaces the legacy .traffic-light in the
   dashboard "Project status" widget). Theme-coloured dot + soft pulsing halo +
   label. Colours via per-status --rag* vars → light/dark adaptive (.pcp-pill palette). */
.rag-beacon {
    --rag: var(--text-subtle);
    --rag-t: var(--surface-2);
    --rag-tx: var(--text);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 4px 10px 4px 14px;
    box-sizing: border-box;
}

    .rag-beacon[data-rag="0"] {
        --rag: var(--red);
        --rag-t: var(--red-t);
        --rag-tx: var(--red-tx);
    }

    .rag-beacon[data-rag="1"] {
        --rag: var(--amber);
        --rag-t: var(--amber-t);
        --rag-tx: var(--amber-tx);
    }

    .rag-beacon[data-rag="2"] {
        --rag: var(--green);
        --rag-t: var(--green-t);
        --rag-tx: var(--green-tx);
    }

.rag-beacon__dot {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rag);
    box-shadow: 0 0 0 4px var(--rag-t);
}

    /* outward "radar" pulse */
    .rag-beacon__dot::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--rag-t);
        animation: rag-beacon-pulse 2.4s ease-out infinite;
    }

.rag-beacon__label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--rag-tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes rag-beacon-pulse {
    0% {
        box-shadow: 0 0 0 3px var(--rag-t);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 10px var(--rag-t);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 10px var(--rag-t);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rag-beacon__dot::after {
        animation: none;
    }
}

/*#endregion*/

/*#region SCALE BUTTONS*/
.scale-btns input {
    display: none;
}

.scale-btns label {
    background-color: var(--surface-2);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    float: left;
    line-height: 18px;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}

.scale-btns input:checked + label {
    background-color: var(--accent);
    color: var(--color-font-white);
}

/*#endregion*/

/*#region FILTER BUTTONS*/

/* Keypoint-Grid Filter-Header (war 2022 k-dropdown-Markup → jetzt schlichter Inline-Button) */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: normal;
}

    .filter-btn:hover {
        color: var(--text);
    }

    .filter-btn .k-icon {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }

.filter-btn-holder {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .filter-btn-holder button {
        background-color: var(--color-light-gray);
        border-color: transparent;
        border-radius: 4px;
        height: 18px;
        margin: 0;
        min-width: 0;
        padding: 0 7px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .filter-btn-holder button .count {
            border-radius: 9px;
            color: var(--color-font-white);
            font-size: 11px;
            line-height: 18px;
            min-width: 12px;
            padding: 0 3px;
            position: absolute;
            right: -5px;
            top: -13px;
        }

        .filter-btn-holder button:hover,
        .filter-btn-holder button.active {
            background-color: var(--color-corporate) !important;
            color: var(--color-font-white);
        }

    .filter-btn-holder.h-20 button {
        height: 20px;
    }

.filter-dark-item {
    min-width: 115px;
    display: flex;
}

    .filter-dark-item input {
        display: none;
    }

    .filter-dark-item label {
        background-color: var(--surface-2);
        border: 1px solid var(--border-strong);
        border-radius: 15px;
        color: var(--text);
        cursor: pointer;
        padding: 6px 10px;
        text-align: center;
        flex: 1 1 auto;
    }

    .filter-dark-item input:checked + label {
        background-color: var(--text);
        border-color: var(--text);
        color: var(--surface);
    }

/*#endregion*/

/*#region FILTER WINDOW*/

.filter-btn-round {
    background-color: var(--color-light-gray);
    border-radius: 6px;
    margin: 0;
    min-width: 102px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-all-count {
    background-color: #EC3838;
    border-radius: 9px;
    box-sizing: border-box;
    color: var(--color-font-white);
    font-size: 11px;
    position: absolute;
    left: calc(100% - 9px);
    top: -1px;
    text-align: center;
    line-height: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
}

.flt-total-count {
    margin: 0 15px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .flt-total-count .filter-all-count,
    .filter-btn-round .filter-all-count {
        position: static;
    }

.filter-btn-round .filter-all-count {
    margin: 0 0 0 auto;
}

.filter-panel {
    background-color: var(--surface);
    display: flex;
    flex-flow: column;
    height: 100%;
}

    .filter-panel.filter-window {
        border: 1px solid var(--border);
        box-shadow: var(--shadow-pop, 0 10px 30px rgba(0, 0, 0, .14));
        border-radius: 12px;
        overflow: hidden;
        max-height: calc(100vh - 80px);
        height: auto;
        display: none;
        position: fixed;
        width: 300px;
        z-index: 101;
    }

        .filter-panel.filter-window .body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

    .filter-panel .header,
    .filter-panel .body {
        display: flex;
    }

    .filter-panel .header {
        padding: 15px;
        align-items: center;
    }

    .filter-panel .flt-close {
        cursor: pointer;
        margin: 0 0 0 8px;
    }

    .filter-panel .title {
        font-size: 13px;
        font-weight: 600;
    }

    .filter-panel .flt-clear {
        cursor: pointer;
        color: var(--accent);
    }

    .filter-panel .title + .flt-clear {
        margin-left: auto;
    }

    .filter-panel .title + .flt-apply {
        height: 20px;
        margin: 0 15px 0 auto;
    }

    .filter-panel .body {
        overflow: auto;
        flex-flow: column;
        flex-grow: 1;
        gap: 5px;
        padding: 0 14px;
    }

    .filter-panel .body,
    .flt-section .customTreeView .k-treeview-leaf {
        font-size: 13.5px;
        color: var(--text-muted);
    }

    .filter-panel .flt-text-search {
        height: 32px;
        width: 100%;
        margin: 2px 0;
    }

        .filter-panel .flt-text-search:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-tint);
        }

.flt-section {
    display: flex;
    flex-flow: column;
}

.flt-sec-head {
    cursor: pointer;
    display: flex;
    min-height: 18px;
    padding: 6px 0;
}

    .flt-sec-head .text {
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .flt-sec-head .flt-count {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .flt-sec-head .flt-count .count {
            background-color: #EC3838;
            border-radius: 9px;
            box-sizing: border-box;
            color: var(--color-font-white);
            font-size: 11px;
            font-weight: normal;
            text-align: center;
            line-height: 18px;
            height: 18px;
            min-width: 18px;
            padding: 0 4px;
        }

    .flt-sec-head .up-down {
        margin: 0 8px 0 auto;
    }

        .flt-sec-head .up-down::before {
            content: "\f2b7";
        }

.flt-section.collapsed .flt-sec-head .up-down::before {
    content: "\f2a4";
}

.flt-sec-body > .k-picker,
.flt-sec-body > .project-dropdown,
.flt-sec-body > .flt-list-search {
    box-sizing: border-box;
    float: none;
    margin: 10px 8px 0 8px;
    width: calc(100% - 16px);
}

.flt-sec-body > .customTreeView,
.flt-sec-body > ul {
    max-height: 240px;
    overflow-y: auto;
}

.flt-sec-body .customTreeView .k-treeview-group {
    min-width: 0;
}

.flt-section .customTreeView .k-treeview-leaf {
    line-height: 1.3;
    padding: 0 5px 0 0;
}

    .flt-section .customTreeView .k-treeview-leaf:hover {
        background-color: transparent;
    }

.flt-section .customTreeView .k-treeview-item-content:has(input:checked) {
    background-color: var(--accent-tint) !important;
    color: var(--accent) !important;
}

.flt-sec-body > .flt-items {
    margin-top: 5px;
    max-height: 230px;
    overflow: auto;
}

.flt-section.collapsed .flt-sec-body {
    display: none;
}

.flt-sec-body > ul > li {
    padding: 0 5px 0 0;
    border-radius: 6px;
}

    .flt-sec-body > ul > li:hover {
        background-color: var(--hover);
    }

    .flt-sec-body > ul > li:has(input:checked) {
        background-color: var(--accent-tint);
    }

.flt-items li input {
    display: none;
}

.flt-items li label {
    cursor: pointer;
    overflow: hidden;
    padding: 5px;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .flt-items li label .content {
        overflow: hidden;
        display: flex;
        align-items: center;
        flex: 1;
        gap: 5px;
    }

    .flt-items li label .name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flt-items li label .count {
        margin-left: auto;
        color: var(--text-subtle);
        font-weight: normal;
    }

.flt-items li input:checked + label {
    color: var(--accent);
}

    .flt-items li input:checked + label .count {
        color: var(--accent);
    }

.flt-items li .tall-box {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    position: static;
    top: 0;
}

    .flt-items li .tall-box.critical {
        background-color: var(--red);
    }

    .flt-items li .tall-box.serious {
        background-color: #ed8a2e;
    }

    .flt-items li .tall-box.moderate {
        background-color: var(--amber);
    }

    .flt-items li .tall-box.low_priority {
        background-color: var(--green);
    }

.filter-panel .count {
    font-size: 11.5px;
}

.flt-items li .site-icon {
    /*float: left;
    margin: -2px 8px 0 0;*/
}

.flt-items li label.flt-custom-date,
.flt-custom-date > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flt-custom-date .text {
    text-indent: 10px;
    flex: 0 0 60px;
}

.flt-custom-date .date {
    flex: 0 0 99px;
}

    .flt-custom-date .date .k-datepicker {
        width: 100%;
    }

.flt-custom-date.long-text {
    flex-wrap: wrap;
}

    .flt-custom-date.long-text .text {
        flex: auto;
    }

    .flt-custom-date.long-text > div {
        margin-left: 10px;
    }

/*#endregion*/

/*#region CALENDAR*/

.calendar-bar table,
.calendar-bar2 table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 1px;
    position: relative;
}

    .calendar-bar table thead td {
        border-color: transparent var(--color-border) transparent transparent;
        border-style: solid;
        border-width: 1px;
        vertical-align: bottom;
    }

    .calendar-bar table tbody td {
        border: 1px solid transparent;
    }

    .calendar-bar table td {
        height: 20px;
        overflow: hidden;
        padding: 0;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-bar2 table tbody tr {
        height: 95px;
    }

    .calendar-bar2 table td {
        border: 1px solid var(--color-border);
        height: 25px;
        overflow: hidden;
        padding: 0;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-bar2 table tfoot tr:first-child {
        background-color: var(--color-light-gray);
    }

    .calendar-bar2 table tfoot tr:last-child td {
        border-bottom-color: transparent;
    }

/*#endregion*/

/*#region INLINE MENU, ACTION MENU & CONTENTX MENU*/

.inlineActionMenus {
    background-color: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    color: var(--text);
    display: none;
    font-size: 12.5px;
    max-height: calc(100% - 3px);
    min-width: 130px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    position: fixed;
    z-index: 20000;
}

    .inlineActionMenus li {
        border-radius: 7px;
        cursor: pointer;
        font-weight: 500;
        padding: var(--menu-item-py, 10px) var(--menu-item-px, 12px);
        position: relative;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .inlineActionMenus li:hover {
            background-color: var(--hover);
        }

        .inlineActionMenus li .site-icon.sub-menu-arrow {
            margin: 0 0 0 auto;
        }

        .inlineActionMenus li .sub-context-menu {
            background-color: var(--surface);
            border-radius: 12px;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-pop);
            display: none;
            min-width: 130px;
            padding: 5px;
            position: fixed;
        }

        .inlineActionMenus li.disabled:hover {
            background-color: transparent;
            cursor: default;
        }

        .inlineActionMenus li.border-top {
            border-top: 1px solid var(--color-border);
        }

        .inlineActionMenus li.border-bottom {
            border-bottom: 1px solid var(--color-border);
        }

.sub-context-menu li {
    color: var(--text);
}

    .sub-context-menu li .status-circle {
        position: static;
    }

/*action menu*/
.kendoAction {
    float: left;
}


/*context menu*/
.custom-context-menu,
.custom-context-menu ul {
    min-width: 175px;
    max-width: 400px;
}

    .custom-context-menu .k-menu-group .k-item.k-focus > .k-link {
        outline: none;
    }

    .custom-context-menu .k-image {
        height: 16px;
        width: 16px;
        flex: 0 0 16px;
    }

    /* themed line icons (npx-ic) inside Kendo menus (create menu, toolbar menu
       headers, submenu rows). encoded:false puts the svg inside the same
       .k-menu-link-text span as the label, so the flex gap doesn't separate
       them — space it explicitly with margin-right. */
    .custom-context-menu .npx-ic,
    .k-menu .npx-ic,
    .k-menu-popup .npx-ic {
        width: 18px;
        height: 18px;
        flex: none;
        margin-right: 9px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
        color: var(--text-subtle);
    }

    .custom-context-menu li.k-hover .npx-ic {
        color: var(--text);
    }

/*#endregion*/

/*#region NOTIFICATION*/

.k-notification-wrap {
    color: var(--color-font-white);
    font-size: 14px;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 290px;
    white-space: normal;
}

    .k-notification-wrap > .k-i-success {
        flex: 0 0 20px;
        font-size: 20px;
    }

.k-notification-success .k-notification-wrap {
    background-color: #61b324;
}

.k-notification-button .k-notification-wrap {
    padding-right: 30px;
}

/*#endregion*/

.k-pdf-export .k-grouping-header,
.k-pdf-export .k-header-column-menu {
    display: none;
}

.filter-bar {
    background-color: var(--surface-2);
    display: none;
    padding: 5px 5px 2px;
}

    .filter-bar > .site-icon {
        float: left;
        margin: 6px 6px 0 0;
    }

.status-circle {
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    position: relative;
    top: 3px;
    width: 14px;
}

.status-circle-dropdown {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
}

/*#region PILLS & DOTS*/

/* ── status / RAG pills (global) ───────────────────────────────────────────
   Reusable tinted badge: a coloured dot + label on a soft tint of the status
   colour (one step lighter). Colours are defined centrally in tokens.css
   (data palette). Render via SemPCPApp.RagPill(value) / .ProgressPill(value). */
.pcp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.pcp-pill__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* RAG status: Red / Amber / Green / Undefined */
.pcp-pill.red {
    background: var(--red-t);
    color: var(--red-tx);
}

    .pcp-pill.red .pcp-pill__dot {
        background: var(--red);
    }

.pcp-pill.amber {
    background: var(--amber-t);
    color: var(--amber-tx);
}

    .pcp-pill.amber .pcp-pill__dot {
        background: var(--amber);
    }

.pcp-pill.green {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.green .pcp-pill__dot {
        background: var(--green);
    }

.pcp-pill.rag-undefined {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

    .pcp-pill.rag-undefined .pcp-pill__dot {
        background: var(--text-subtle);
    }

/* Progress status: Open / In progress / Closed */
.pcp-pill.open {
    background: var(--blue-t);
    color: var(--blue-tx);
}

    .pcp-pill.open .pcp-pill__dot {
        background: var(--blue);
    }

.pcp-pill.inprogress {
    background: var(--amber-t);
    color: var(--amber-tx);
}

    .pcp-pill.inprogress .pcp-pill__dot {
        background: var(--amber);
    }

.pcp-pill.closed {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.closed .pcp-pill__dot {
        background: var(--green);
    }

/* Project status: Active / Archived / Draft / Deferred */
.pcp-pill.pstatus-0 {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.pstatus-0 .pcp-pill__dot {
        background: var(--green);
    }

.pcp-pill.pstatus-1 {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

    .pcp-pill.pstatus-1 .pcp-pill__dot {
        background: var(--text-subtle);
    }

.pcp-pill.pstatus-2 {
    background: var(--blue-t);
    color: var(--blue-tx);
}

    .pcp-pill.pstatus-2 .pcp-pill__dot {
        background: var(--blue);
    }

.pcp-pill.pstatus-3 {
    background: var(--amber-t);
    color: var(--amber-tx);
}

    .pcp-pill.pstatus-3 .pcp-pill__dot {
        background: var(--amber);
    }

/* Risk status: 0 New / 1 Verified / 2 Mitigation planned / 3 Mitigated */
.pcp-pill.rstatus-0 {
    background: var(--red-t);
    color: var(--red-tx);
}

    .pcp-pill.rstatus-0 .pcp-pill__dot {
        background: var(--red);
    }

.pcp-pill.rstatus-1 {
    background: var(--amber-t);
    color: var(--amber-tx);
}

    .pcp-pill.rstatus-1 .pcp-pill__dot {
        background: var(--amber);
    }

.pcp-pill.rstatus-2 {
    background: var(--c-teal-t);
    color: var(--c-teal-tx);
}

    .pcp-pill.rstatus-2 .pcp-pill__dot {
        background: var(--c-teal);
    }

.pcp-pill.rstatus-3 {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.rstatus-3 .pcp-pill__dot {
        background: var(--green);
    }

/* Risk type — neutral tag chip (types are project-defined → no fixed colour, like Keypoint .kp-type-tag) */
.risk-type-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Priority: Critical / Serious / Moderate / Low — severity scale red→orange→amber→green */
.pcp-pill.prio-critical {
    background: var(--red-t);
    color: var(--red-tx);
}

    .pcp-pill.prio-critical .pcp-pill__dot {
        background: var(--red);
    }

.pcp-pill.prio-serious {
    background: rgba(234, 124, 30, .15);
    color: #f0a85a;
}

    .pcp-pill.prio-serious .pcp-pill__dot {
        background: #ed8a2e;
    }

.pcp-pill.prio-moderate {
    background: var(--amber-t);
    color: var(--amber-tx);
}

    .pcp-pill.prio-moderate .pcp-pill__dot {
        background: var(--amber);
    }

.pcp-pill.prio-low_priority {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.prio-low_priority .pcp-pill__dot {
        background: var(--green);
    }

/* Deployment Center: pipeline status (0 Draft / 1 Pending / 2 Done) */
.pcp-pill.dep-status-0 {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

    .pcp-pill.dep-status-0 .pcp-pill__dot {
        background: var(--text-subtle);
    }

.pcp-pill.dep-status-1 {
    background: var(--blue-t);
    color: var(--blue-tx);
}

    .pcp-pill.dep-status-1 .pcp-pill__dot {
        background: var(--blue);
    }

.pcp-pill.dep-status-2 {
    background: var(--green-t);
    color: var(--green-tx);
}

    .pcp-pill.dep-status-2 .pcp-pill__dot {
        background: var(--green);
    }

/* Deployment Center: execution type (0 Live / 1 Simulation) */
.pcp-pill.dep-type-0 {
    background: var(--red-t);
    color: var(--red-tx);
}

    .pcp-pill.dep-type-0 .pcp-pill__dot {
        background: var(--red);
    }

.pcp-pill.dep-type-1 {
    background: var(--blue-t);
    color: var(--blue-tx);
}

    .pcp-pill.dep-type-1 .pcp-pill__dot {
        background: var(--blue);
    }

/* standalone colour dot (e.g. in dropdown options) — same priority palette */
.pcp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--text-subtle);
}

    .pcp-dot.prio-critical {
        background: var(--red);
    }

    .pcp-dot.prio-serious {
        background: #ed8a2e;
    }

    .pcp-dot.prio-moderate {
        background: var(--amber);
    }

    .pcp-dot.prio-low_priority {
        background: var(--green);
    }

/*#endregion*/

.child-table-border table th,
.child-table-border table td {
    border: 1px solid var(--border);
}

.child-table-border table {
    border-collapse: collapse;
}

.row {
    line-height: 20px;
    margin-bottom: 10px;
    min-height: 20px;
}

.status-box {
    color: var(--color-font-white);
    cursor: pointer;
    display: inline-block;
    line-height: 18px;
    overflow: hidden;
    padding: 0 4px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

.details-title {
    padding: 10px 10px 10px 15px;
    position: relative;
}

    .details-title .ragLine {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 5px;
    }

    .details-title .details-close {
        cursor: pointer;
        position: absolute;
        right: 11px;
        top: 5px;
    }

    .details-title .details-action {
        font-weight: bold;
        height: 24px;
        position: absolute;
        right: 10px;
        top: 40px;
    }

.details-general {
    border-bottom: 1px solid var(--border);
    padding: 10px 0 15px 15px;
    flex: 0 0 auto;
}

    .details-general td {
        overflow: hidden;
        padding: 3px 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.details-general-val > table td:nth-child(2n) {
    font-size: var(--value-font-size);
}

.k-window .details-title {
    padding: 15px 20px 13px 20px;
}

.k-window .details-general {
    padding: 16px 20px 14px 20px;
}

.userImageDisplay {
    background-color: var(--color-medium-gray);
    border: 1px solid transparent;
    border-radius: 50%;
    float: left;
    height: 30px;
    overflow: hidden;
    text-transform: uppercase;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}

    .userImageDisplay img {
        max-width: calc(100% - 4px);
        border: 2px solid transparent;
        border-radius: 50%;
    }

    .userImageDisplay.flat {
        border: none;
    }

        .userImageDisplay.flat img {
            border: none;
            height: 100%;
            max-width: 100%;
            width: 100%;
        }

    .userImageDisplay.dark-gray {
        background-color: #737373;
        border: none;
        color: var(--color-font-white);
        font-weight: bold;
        height: 32px;
        width: 32px;
    }

        .userImageDisplay.dark-gray img {
            border-width: 0;
            max-width: 100%;
        }

    .userImageDisplay.random-colored {
        border: none;
        color: var(--color-font-white);
        height: 32px;
        width: 32px;
        line-height: 32px;
    }

        .userImageDisplay.random-colored img {
            border: none;
            max-width: 100%;
        }

.semPCP_tooltip:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid var(--border-strong);
    bottom: -10px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
}

.semPCP_tooltip {
    background-color: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    opacity: 1;
    padding: 10px;
    position: absolute;
    text-align: left;
    word-wrap: break-word;
    z-index: 20001;
}

    .semPCP_tooltip td {
        padding-right: 5px;
    }

    .semPCP_tooltip > table {
        width: 100%;
    }

.customTooltip8px {
    box-shadow: 0 0 5px 2px var(--color-box-shadow);
    margin-top: -8px;
}

.tag-tooltip .k-tooltip-content {
    white-space: normal;
}

.overflow-tooltip:before {
    content: none !important;
}

.panel-view .title {
    margin: 15px 0 10px;
}

.panel-view .toggle-panel {
    cursor: pointer;
    float: left;
    margin-right: 10px;
}

ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

/*#region jQuery ui resizable*/

.ui-resizable-handle {
    position: absolute;
    z-index: 1;
    background-color: var(--surface);
    font-size: 0;
    line-height: 6px;
    opacity: 0;
    zoom: 1;
}

.ui-resizable-n {
    top: -3px;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: n-resize;
}

.ui-resizable-s {
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: s-resize;
}

.ui-resizable-e {
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: e-resize;
}

.ui-resizable-w {
    top: 0;
    left: -3px;
    width: 6px;
    height: 100%;
    cursor: w-resize;
}

.ui-resizable-se {
    bottom: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    cursor: se-resize;
}

.ui-resizable-sw {
    bottom: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    cursor: sw-resize;
}

.ui-resizable-nw {
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    cursor: nw-resize;
}

.ui-resizable-ne {
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    cursor: ne-resize;
}

/*#endregion*/

/*#region jCloud*/

.jqcloud {
    font: 10px "Helvetica", "Arial", sans-serif;
    line-height: normal;
    overflow: hidden;
    position: relative;
}

.jqcloud-word.w1 {
    color: #993333;
    font-size: 100%;
}

.jqcloud-word.w2 {
    color: #216BCC;
    font-size: 150%;
}

.jqcloud-word.w3 {
    color: #439922;
    font-size: 200%;
}

.jqcloud-word.w4 {
    color: #7B0099;
    font-size: 250%;
}

.jqcloud-word.w5 {
    color: #993333;
    font-size: 300%;
}

.jqcloud-word.w6 {
    color: #216BCC;
    font-size: 350%;
}

.jqcloud-word.w7 {
    color: #439922;
    font-size: 400%;
}

.jqcloud-word.w8 {
    color: #7B0099;
    font-size: 450%;
}

.jqcloud-word.w9 {
    color: #7B0099;
    font-size: 500%;
}

.jqcloud-word.w10 {
    color: #7B0099;
    font-size: 550%;
}

/*#endregion*/

/*#region Webkit scrollbar*/
/* global scrollbar - wider + higher-contrast thumb so it stays visible on white
   surfaces in light mode (thumb mixes the subtle text colour, hover darkens) */

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

::-webkit-scrollbar-track {
    border-radius: 4px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-subtle) 55%, transparent);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-subtle);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-subtle) 65%, transparent) transparent;
}

/*#endregion*/