.flex {
    display: flex;
}

.list-view-split-panel {
    height: 100%;
}

/* This allows checkboxes to appear in the leftmost Search area */
k-search-checkbox {
    width: 80px;
}

/* This forces editor widgets to fit auto-adjust to it's parent Bootstrap column */
.k-dropdown, .k-textbox, .k-datepicker, .k-timepicker, .k-numerictextbox, .k-select {
    width: 100%;
}

.k-datepicker, .k-select {
    max-width: 180px;
}

.k-textarea {
    min-height: 50px;
}

    .k-textarea[readonly] {
        opacity: 0.6;
        filter: grayscale(0.1);
    }

    .k-textarea[readonly] {
        opacity: 0.6;
        filter: grayscale(0.1);
    }

.padding-block-0 .k-input-inner {
    padding-block: 0px;
}

/* Without this fix, MultiSelect items will show the 'X' icon in the wrong position*/
.k-multiselect .k-select {
    width: auto;
}

/* Without this fix, MultiSelect items will seem 'invisible' (white on white):*/
.k-multiselect .k-button {
    background-color: white;
    color: grey;
}
    /* Without this fix, MultiSelect items are unreadable when hovering:*/
    .k-multiselect .k-button:hover {
        color: white;
    }

.k-button-solid-secondary {
    border-color: #525252;
    color: #fff;
    background-color: #666;
    background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
}

.k-textbox::placeholder, .k-input::placeholder {
    color: lightgrey;
}

.inactive-header {
    font-size: 18px;
    color: white;
    background-color: darkred;
}

.attention-header {
    font-size: 16px;
    color: black;
    background-color: gold;
}

.k-grid-norecords-template {
    width: auto;
    height: 2em;
    line-height: 2em;
}

/* Without this fix, data for _selected_ rows is hard to read:*/
.k-grid tr.k-grid-edit-row {
    color: rgba(0, 0, 0, 0.87) !important;
}

/* Without this fix, _edited_ cell data will seem 'invisible' (white on white):*/
td.k-edit-cell {
    color: grey;
}

.k-switch-handle {
    background-color: #1e8de0;
}

/* Reduce the width of buttons in the DataGrid */
.k-grid tbody .k-command-cell {
    padding: 0px;
}

.k-grid tbody .k-button {
    min-width: 40px;
    width: auto;
}

    /* For buttons that are embedded in nested forms inside expandable DataGrid rows */
    .k-grid tbody .k-button.reset-width {
        min-width: initial;
        width: auto;
    }

.k-block {
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
}

/**********************************

    For Glyphicons Halflings icon codes, use https://glyphicons.bootstrapcheatsheets.com and Copy the "CSS rule"

\**********************************

/* This display a new window icon on an Open button within a grid */
[class*="k-grid-OpenNewWindow"]:after {
    font-family: "Glyphicons Halflings";
    content: "\e164";
}

/* This display a close icon on a Remove button within a grid */
.k-grid-Remove:after {
    font-family: "Glyphicons Halflings";
    content: "\e014";
}

/* This display a Copy icon on a button within a grid */
[class*="k-grid-Copy"]:after {
    font-family: "Glyphicons Halflings";
    content: "\e224";
}

/* This display a Print icon on a button within a grid */
.k-grid-Print:after {
    font-family: "Glyphicons Halflings";
    content: "\e045";
}

/* This display a Letter icon on a button within a grid */
.k-grid-Letter:after {
    font-family: "Glyphicons Halflings";
    content: "\e022";
}

/* This display an Envelope icon on a button within a grid */
.k-grid-Envelope:after {
    font-family: "Glyphicons Halflings";
    content: "\2709";
}

/* This display an Owner icon on a button within a grid */
.k-grid-AddOwner:after {
    font-family: "Glyphicons Halflings";
    content: "\2b\e008";
}

/* This display an Edit icon on a button within a grid */
[class*="k-grid-Edit"]:after {
    font-family: "Glyphicons Halflings";
    content: "\270f";
}

/* This display a Download icon on a button within a grid */
.k-grid-Download:after {
    font-family: "Glyphicons Halflings";
    content: "\e025";
}

/* This display a Find icon on a button within a grid */
.k-grid-Find:after {
    font-family: "Glyphicons Halflings";
    content: "\e003";
}

/* Fixes the left border for the first highlighted tab */
.k-tabstrip .k-first {
    margin-left: 4px;
}

.freeze-header .k-grid-header {
    position: sticky;
    top: 0;
}

.search-filter-area {
    min-width: 150px;
    margin: 10px;
}

    /* Controls the spacing in the search-filter-area */
    .search-filter-area .fieldlist {
        margin: 0 0;
        padding: 0;
    }

        .search-filter-area .fieldlist li {
            list-style: none;
            padding-bottom: 1em;
        }

        .search-filter-area .fieldlist label {
            display: block;
            font-weight: normal;
        }

/* Border and margin for search results list */
.list-view .list-view-inner {
    border: 1px solid #ebebeb;
    min-width: 280px;
    margin: 10px;
}

/* Position the edit buttons in the header of the ReadOnly views */
.list-view .single-searchview-details .header .edit-buttons {
    display: block;
    left: auto;
    right: 60px;
    top: 80px;
}

    .list-view .single-searchview-details .header .edit-buttons .k-button {
        width: 2.14286em;
        line-height: 2.14286em;
    }

/* Add some padding to the search results list */
.searchview-view .header .name {
    padding-left: 10px;
}

/* Login navbar items */
.navbar-right {
    float: right !important;
    margin-right: 20px;
}

.navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 21px;
    margin-left: 100px;
}

/* Generic */

.uppercase {
    text-transform: uppercase;
}

.capitalise {
    text-transform: capitalize;
}

.clientImage {
    max-height: 195px;
}

.imageFitToWidth {
    max-width: 100%;
}

.verticalAlignMiddle {
    vertical-align: middle;
}

.verticalAlignMiddle {
    vertical-align: middle;
}

input[aria-disabled=true] {
    cursor: not-allowed;
}

input[readonly] {
    cursor: not-allowed;
}

.nestedGrid {
    width: 850px;
}

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

/* Used by the Postcode Lookup service */
#output {
    position: relative;
    z-index: 10;
}

.stackDivsHorizontally {
    white-space: nowrap;
    display: inline-block;
}

.nestedPanelBar {
    width: 97%;
    margin-top: 8px;
    margin-left: 16px;
}

/* Allow Bootstrap grids inside Kendo PanelBar. 
   See https://jsbin.com/bivun/3/edit?html,output */
div.panelBarBootstrapContainer,
.panelBarBootstrapContainer > .row > div {
    box-sizing: border-box;
}

.panelBarHeaderIcon {
    margin-right: 10px;
}

.panelBarContent {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 18px;
}

.verticalRowSpacer {
    margin-top: 2px;
    margin-bottom: 2px;
}

.searchResultLeft {
    width: 60%;
}

.searchResultRight {
    width: 20%;
    text-align: right;
}

html .k-info-colored, .k-info-colored .k-panelbar-content {
    background-color: #f2fff4;
}

.k-panelbar .k-panelbar-content {
    color: #50607f;
}

.k-panelbar {
    border-width: 0px !important;
}

.k-window {
    top: calc(50% - 100px) !important;
}

.k-menu.k-menu-horizontal {
    padding-block: unset !important;
}

.k-menu-horizontal .k-menu-link {
    border-width: unset !important;
    border-style: unset !important;
}

.k-menu-item {
    color: #fff !important;
    font-size: 16px;
}

.k-menu-popup .k-menu-group {
    background-color: #317a3b;
}

.k-menu-item.k-state-active {
    background-color: #4a934f !important;
    color: #fff !important;
    border: 1px solid white !important;
}

    .k-menu-item.k-state-active .k-link {
        background-color: #4a934f !important;
        color: #fff !important;
    }

    .k-menu-item.k-state-active:hover {
        background-color: #5aa660 !important;
    }

    .k-menu-item.k-state-active .k-link:hover {
        background-color: #5aa660 !important;
    }

.k-menu-group-md .k-menu-expand-arrow {
    margin-inline-end: -20px;
}

.k-window-content, .k-prompt-container {
    padding-block: 40px !important;
}

.k-numerictextbox {
    background-color: #fff !important;
    border-color: #dbdbdb !important;
}

.k-rounded-md {
    border-radius: 0px;
}

.k-input-solid {
    border-bottom-right-radius: unset !important;
    border-bottom-left-radius: unset !important;
    border-width: 0px;
}

.k-tabstrip-items .k-item {
    border-color: #dbdbdb;
    background-position: 50% 50%;
    background-color: #fff;
    list-style-type: none;
    display: inline-block;
    position: relative;
    border-style: solid;
    border-width: 1px 1px 0;
    margin: 0 -1px 0 0;
    padding: 0;
    vertical-align: top;
}

.k-button-flat-primary {
    color: #50607f;
}

.k-button.k-primary:disabled {
    background-color: lightgrey !important;
    cursor: not-allowed !important;
    color: #a1a1a1 !important;
    border-color: lightgrey !important;
}

.k-toolbar-md {
    padding-block: 2px !important;
    padding-inline: 2px !important;
}

.k-menu {
    line-height: 1;
}

/* Fixes menu selected icon to remove gap */
#mainMenu .k-state-highlight:before {
    display: none;
}

/* Fixes colour and borders of drop down lists to match other controls */
.k-dropdownlist:not(.k-invalid) {
    background-color: field !important;
    border-color: rgb(118, 118, 118) !important;
    border: solid 1px !important;
}

/* Forces loading to center of screen */
.k-loading-mask {
    position: fixed;
    top: 60% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, 70%) !important;
    transform: translate(-50%, 70%) !important;
    width: 100%;
    height: 100%;
}

/* Forces loading label to center of screen */
.k-window, .k-window.k-focus {
    width: auto !important;
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
}

/* Grid size fixes */

/* Below all reduce row/header heights to fit grid to screen */
.k-grid-md .k-grouping-header {
    margin-block: 4px;
}

.k-grid-md .k-grouping-header,
.k-grouping-header > .k-grouping-drop-container,
.k-grid-md .k-hierarchy-cell > .k-icon,
.k-grid-md .k-drag-cell > .k-icon {
    padding-block: 0px;
}

.k-grid .k-grid-toolbar,
.k-grouping-header .k-grouping-drop-container {
    height: 36px;
}

    .k-grid .k-grid-toolbar .k-button-md {
        padding-block: 4px;
    }

.k-filter-row th,
.k-grid-header th.k-header {
    padding: 4px 8px;
}

.k-grid-md td,
.k-grid-md .k-table-td {
    padding-block: 0.525rem;
}

/* Reduce size of arrow icons in grid */
.k-grid .k-hierarchy-cell > .k-icon {
    width: 90%;
    height: 90%;
}

/* Fixes filter text box style, excluse k-valid because kendo sometimes add nested spans for certain properties */
.k-input.k-input-md.k-rounded-md.k-input-solid:not(.k-input-inner) {
    border-color: rgb(118, 118, 118) !important;
    border: solid 1px !important;
}

/* Shrinks the filtered icon/colour to fit in columns */
.k-grid-header .k-grid-header-menu.k-active {
    background-color: #3c8545 !important;
    width: calc(1.4285714286em + 9px) !important;
    height: calc(1.4285714286em + 9px) !important;
}

/* Makes the datetime input visible */
input[data-role=datetimepicker] {
    width: 155px;
    font-size: 14px;
}

/* Error box design fix */
/* Targets the container of the error box */
.k-child-animation-container:has(> [role="alert"]) {
    width: 400px !important;
}

/* Fixes the positioning of the elements inside the error box */
[role="alert"], [role="alert"] .notification {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    gap: 10px;
    background-image: none !important;
}

    [role="alert"] .k-notification-actions {
        display: none;
    }

    [role="alert"] .k-button {
        background: #20bd5f;
        border-color: #20bd5f;
    }

.k-notification-error {
    background-color: #FFB8A9;
}

.notification-error {
    background-color: #FFB8A9 !important;
    border-color: #FFB8A9 !important;
    color: #50607f;
}

.k-notification-info {
    background-color: #b5d1f7;
}

.notification-info {
    background-color: #b5d1f7 !important;
    border-color: #b5d1f7 !important;
    color: #50607f;
}

/* VOID */

.is-voided-light {
    background-color: #f7e6e6 !important;
}

.is-voided-dark {
    background-color: #ffadad !important;
}

.is-void-text {
    color: #FF0000;
}

.void-label-base {
    display: inline-block;
    background-color: #ff9387;
    border: 2px solid #e75369;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #FF0000;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
    filter: blur(0.5px);
}

/* Specific styles for large void-label */
.void-label-large {
    padding: 5px 15px;
    font-size: 14px;
}

/* Specific styles for small void-label */
.void-label-small {
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
    filter: blur(0.3px);
}

.glyphicon {
    vertical-align: middle;
}

k-button.k-button-icon, .k-icon-button {
    width: calc(1.4em);
    height: calc(1em);
}

#unvoid-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    #unvoid-buttons .demo-section {
        margin-right: 10px; /* Space between the toggle and the label */
    }

.toggle-label {
    margin-left: 10px;
    margin-right: 20px; /* Space between the label and the "Un Void" button */
}

.ml-3 {
    margin-left: 20px;
}

.k-switch-on .k-switch-thumb {
    border-color: #34ad45 !important;
    color: #34ad45 !important;
    background-color: #34ad45 !important;
}

/* File Upload Modal */
.upload-container {
    padding: 20px;
}

.upload-dropzone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.upload-icon {
    display: block;
    font-size: 24px;
    color: #28a745;
    margin-bottom: 10px;
}

.choose-file-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    width: 100%;
    margin-top: 10px;
}

.k-upload-custom .k-dropzone {
    display: none; /* Hide default dropzone, use custom one */
}

.k-upload-files {
    margin-top: 10px;
}

.k-file-progress {
    width: 100%;
}

.k-file-name {
    display: inline-block;
    width: 200px;
}

.k-file-size {
    display: inline-block;
    width: 100px;
}

.k-file-status {
    display: inline-block;
    width: 100px;
}

/* =================================================================
   REPORTING COMPONENTS - Common Reporting Styles
   ================================================================= */

/* Gauge container for dashboard gauges */
.gauge-container {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Count box styling for dashboard metrics */
.count-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px;
    background-color: #f9f9f9;
    text-align: center;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
    padding: 5px;
}

    .count-box h6 {
        margin: 0;
        font-size: 0.75em;
        /*color: #333;*/
    }

    .count-box p {
        margin: 0;
        font-size: 0.9em;
        font-weight: bold;
        /*color: #000;*/
    }

/* TileLayout styling for reporting dashboards */
.k-tilelayout {
    padding: 10px;
}

.k-tilelayout-item {
    padding: 5px;
}

/* DatePicker overrides for reporting forms */
.k-datepicker {
    background-color: field !important;
    border-color: rgb(118, 118, 118) !important;
    border: solid 1px !important;
    padding-block: unset;
    padding-inline: unset;
}

/* Chart container for dashboard charts */
.chart-container {
    width: 100%;
    height: 100%;
}

/* Tile row layout for dashboard tiles */
.tile-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
}

/* =================================================================
   DASHBOARD COMPONENTS - Horses Dashboard Specific Styles
   ================================================================= */

/* Ensure tile layout containers use available space efficiently */
.k-tilelayout-item {
    display: flex;
    flex-direction: column;
}

.k-tilelayout-item-body {
    flex: 1;
    overflow: hidden;
}

.k-tilelayout-item-header.k-card-header {
    padding-block: 5px;
}

.k-card-title {
    font-size: 20px;
}

.dashboard-tabs {
    margin-top: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    /* Make TabStrip fill available height */
    .dashboard-tabs .k-tabstrip {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .dashboard-tabs .k-tabstrip-content {
        flex: 1;
        padding: 0;
        overflow: hidden;
    }

.tab-content-container {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.test-types-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 1;
    align-items: stretch;
}

.test-type-tile {
    flex: 1;
    min-width: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

    .test-type-tile h3 {
        margin: 0 0 15px 0;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    /* Make grids fill their containers */
    .test-type-tile .k-grid {
        flex: 1;
        min-height: 0; /* Important for flexbox scrolling */
    }

.selection-criteria-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .selection-criteria-container .k-grid {
        flex: 1;
        min-height: 0; /* Important for flexbox scrolling */
    }

/* Filter container styling */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

    .filter-container > * {
        flex-shrink: 0;
    }

/* Remove fixed heights from grids to let them fill containers */
.test-type-tile .k-grid,
.selection-criteria-container .k-grid {
    height: auto !important;
}

/* =================================================================
   SAMPLES DASHBOARD COMPONENTS
   ================================================================= */

/* Summary boxes container - 4 column grid layout for dashboard metrics */
.summary-boxes-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Individual summary box styling */
.summary-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.summary-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 28px;
    font-weight: bold;
    color: #495057;
}

.grids-container {
    display: grid;
    gap: 20px;
    height: 100%;
}

/* Grids container - 3 column layout for hierarchical grids */
.column-3-repeat-grids-container {
    grid-template-columns: repeat(3, 1fr);
}

/* Grids container - 3 column layout for hierarchical grids */
.column-1fr-2fr-grids-container {
    grid-template-columns: 1fr 2fr;
}

/* Individual grid tile styling */
.grid-tile {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
}

    .grid-tile h3 {
        margin: 0 0 15px 0;
        font-size: 16px;
        font-weight: 600;
        color: #495057;
        text-align: center;
    }

/* Hierarchical grid styling */
.hierarchical-grid {
    width: 100%;
}

.k-grid-content.k-auto-scrollable {
    height: 100%;
}

/* Enhanced tab content container for samples dashboard */
.tab-content-container {
    height: 100%;
    padding: 10px;
}

/* Additional TileLayout overrides for samples dashboard */
.k-tilelayout .k-tilelayout-item {
    overflow: hidden;
}

.k-tilelayout .k-tilelayout-item-body {
    height: 100%;
    overflow: hidden;
}

/* Enhanced dashboard tabs styling */
.dashboard-tabs {
    height: 100%;
}

    .dashboard-tabs .k-tabstrip {
        height: 100%;
    }

        .dashboard-tabs .k-tabstrip .k-content {
            height: calc(100% - 40px);
            overflow: hidden;
        }

/* =================================================================
   RESULTS DASHBOARD - QUARTERLY FILTER BUTTONS
   ================================================================= */

.quarterly-filters {
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.quarterly-label {
    margin-right: 10px;
    font-weight: bold;
}

.quarterly-buttons-container {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
}

.quarterly-filter-btn {
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

    .quarterly-filter-btn:hover {
        background: #e9ecef;
        border-color: #999;
    }

    .quarterly-filter-btn.active {
        background: #34ad45;
        color: white;
        border-color: #34ad45;
    }

/* =================================================================
   DASHBOARD NAVIGATION TOOLBAR
   ================================================================= */

.dashboard-navigation-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 2px solid #2d6e35;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #317a3b;
    background-image: linear-gradient(90deg, transparent, #34ad45);
}

.dashboard-nav-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dashboard-nav-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .dashboard-nav-button:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .dashboard-nav-button.active {
        background-color: #fff;
        border-color: #fff;
        color: #317a3b;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

        .dashboard-nav-button.active:hover {
            background-color: #f8f9fa;
            color: #2d6e35;
            transform: translateY(-1px);
        }

    .dashboard-nav-button .k-icon {
        font-size: 14px;
        line-height: 1;
    }

.dashboard-nav-text {
    line-height: 1;
}

.dashboard-nav-info {
    display: flex;
    align-items: center;
}

.dashboard-nav-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .dashboard-navigation-toolbar {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .dashboard-nav-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dashboard-nav-button {
        padding: 6px 12px;
        font-size: 12px;
    }

    .dashboard-nav-text {
        display: none;
    }

    .dashboard-nav-button .k-icon {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .dashboard-nav-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .dashboard-nav-button {
        justify-content: center;
    }
}

.k-tilelayout-item-header.k-card-header {
    display: flex;
    align-items: center;
}

.tooltip-icon {
    margin-left: 8px;
    cursor: help;
}

.k-tooltip {
    max-width: 450px !important;
}

.k-tooltip-content {
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
}