/*#region Overview Styling*/


.duplicate-Confirm {
    background-color: var(--kendo-color-primary, #1274AC);
    color: var(--kendo-color-on-primary, white);
}

.card-default {
}

    .card-default .k-card-header {
        background-color: var(--kendo-color-primary, #1274AC);
        color: var(--kendo-color-on-primary, white);
        /*font-weight: bold;*/
    }

    .card-default ul {
        padding-left: 0px;
        margin-bottom: 0;
    }

    .card-default li {
        list-style: none;
    }

.card-default-li-header {
    color: var(--kendo-color-on-app-surface, #424242);
}

.custom-link {
    color: var(--kendo-color-primary, #1274AC) !important;
    cursor: pointer;
}

.k-card-subtitle {
    color: var(--kendo-color-on-primary, white);
}

.k-window-titlebar {
    background-color: var(--kendo-color-primary, #1274AC);
}

.k-window-title {
    color: var(--kendo-color-on-primary, white);
}

/*#endregion Overview Styling*/
.custom-break-thin {
    height: 1px;
    border: none;
}

.grid-link {
    color: var(--kendo-color-primary, #1274AC) !important;
    cursor: pointer;
}


/*#region My Profile Styling*/
.my-button,
.my-button:hover {
    width: 200px;
    height: 50px;
}

/*#endregion My Profile Styling*/

/*#region Form Styling*/

.custom-form.k-form .k-form-buttons {
    justify-content: flex-end;
}

.form-control-label {
    display: block;
    margin: 5px 0;
    font-size: 13px;
    color: var(--kendo-color-subtle, #8a8a8a);
}

/*#endregion Form Styling*/

/*#region Login Styling*/

.login-styling {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--kendo-color-surface, #fafafa);
}

.login-height {
    min-height: 88.8vh !important;
}

.login-content {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: calc(100vh - 5vh - 6px);
    max-height: calc(100vh - 5vh - 6px);
}

.login-container {
    margin: 9em auto 0;
    align-content: center;
    width: 15vw;
}

/*#endregion Login Styling*/

/*#region Dashboard Styling*/

.panel-body {
    padding: 15px;
}

.thin {
    font-weight: 300;
}

.dashboard-button {
    color: var(--kendo-color-on-primary, white);
    background-color: var(--kendo-color-primary, #1274AC);
    width: 100%;
}

/*#endregion Dashboard Styling*/

/*#region Dashboard Tiles*/

.dashboard-tile {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    height: 100%;
    box-sizing: border-box;
}

.tile-title {
    font-size: 1.2vw;
    font-weight: bold;
    text-align: right;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tile-number {
    font-size: 1.5vw;
    /*font-weight: bold;*/
    text-align: right;
}

.tile-icon {
    float: left;
    vertical-align: central;
}


.k-tilelayout-item-body > button {
    width: 100%;
}

.dashboard-button > .k-button-text {
    width: 100%;
    padding: 0px 10px;
}

.dashboard-tile-favourite > .k-tilelayout-item-header {
    display: none;
}
/*.dashboard-tile-favourite {
    color: var(--kendo-color-on-primary, white);
    background-color: var(--kendo-color-primary, #1274AC);
    width: 100%;
}*/

/*.dashboard-tile-favourite button,
.dashboard-tile-favourite button:hover {
    background-color: var(--kendo-color-surface, #fafafa);
    color: var(--kendo-color-on-app-surface, #424242);
}*/


/*#region Layout Styling*/

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

.app-header,
.app-footer {
    min-height: 5vh;
}

.k-drawer-container {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    min-height: calc(100vh - 10vhx);
    max-height: calc(100vh - 10vhx);
}

.k-tabstrip {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.content {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 10vh - 40px);
}

.nav-content {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 10vh - 26px);
    max-height: calc(100vh - 10vh - 26px);
}

.nav-left-menu {
    padding-left: 0;
}

/*#endregion Layout Styling*/


/*#region Theme Toggle*/

.theme-toggle {
    background-color: transparent;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

    .theme-toggle .k-icon {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
    }


/*#endregion Theme Toggle*/

/*#region Create Order styling*/

.create-order-card-body {
    padding-top: 0;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/*#endregion*/

/*#region app.css*/

/* Light and dark both come from the Telerik swatch, which defines its colours on :root.
   Bootstrap knows nothing about it and would keep its own white page, white cards and light
   borders in dark, so its variables are pointed at the Kendo ones here. That is most of the
   page chrome themed in one place rather than chased screen by screen.

   Every one of these keeps a fallback: during a swatch swap the Kendo variable is briefly
   undefined, and without one the property computes to black or transparent. */
:root {
    --bs-body-bg: var(--kendo-color-app-surface, #ffffff);
    --bs-body-color: var(--kendo-color-on-app-surface, #424242);
    --bs-emphasis-color: var(--kendo-color-on-app-surface, #212529);
    --bs-secondary-color: var(--kendo-color-subtle, #6c757d);
    --bs-border-color: var(--kendo-color-border, #dee2e6);
    --bs-secondary-bg: var(--kendo-color-surface, #e9ecef);
    --bs-tertiary-bg: var(--kendo-color-surface-alt, #f8f9fa);
    --bs-card-bg: var(--kendo-color-surface, #ffffff);
    --bs-card-border-color: var(--kendo-color-border, #dee2e6);
    --bs-list-group-bg: var(--kendo-color-surface, #ffffff);
    --bs-list-group-color: var(--kendo-color-on-app-surface, #212529);
    --bs-list-group-border-color: var(--kendo-color-border, #dee2e6);
}

/* The status badge palette, used by EnumDisplay.

   The enums name their colours in plain words -- green, wheat, steelblue -- and EnumDisplay
   resolves those words to these variables rather than to the css colours themselves. Light is
   exactly what the enums have always produced, so nothing changes there.

   Background and text are separate sets because the same word means opposite things in each.
   "white" is a background on three enum values and a text colour on thirteen: in dark the
   background has to become dark while the text stays light. One variable could not do both,
   and using one would have turned every white label on a green badge dark grey.

   The dark values keep each hue recognisable at a lightness that works on a #141414 page, and
   every pairing the enums actually use was checked for contrast: wheat/black, yellow/black,
   orange/black, white/black, green/white, steelblue/white, red/white.

   data-theme is set on <html> by js/theme.js before anything is drawn. */
:root {
    --enum-bg-steelblue: steelblue;
    --enum-bg-wheat: wheat;
    --enum-bg-green: green;
    --enum-bg-white: white;
    --enum-bg-red: red;
    --enum-bg-yellow: yellow;
    --enum-bg-orange: orange;
    --enum-bg-black: black;
    --enum-bg-blue: blue;

    --enum-fg-white: white;
    --enum-fg-black: black;
    --enum-fg-green: green;
    --enum-fg-blue: blue;
    --enum-fg-steelblue: steelblue;
    --enum-fg-wheat: wheat;
    --enum-fg-red: red;
    --enum-fg-yellow: yellow;
    --enum-fg-orange: orange;
}

:root[data-theme="dark"] {
    --enum-bg-steelblue: #3f6c8f;
    --enum-bg-wheat: #6b5d2f;
    --enum-bg-green: #2e7d32;
    --enum-bg-white: #3d3d3d;
    --enum-bg-red: #b3261e;
    --enum-bg-yellow: #7a6500;
    --enum-bg-orange: #9c5c00;
    --enum-bg-black: #1f1f1f;
    --enum-bg-blue: #2b4f8a;

    /* Black text sits on wheat, yellow, orange and white, every one of which is now dark, so
       the text that was black has to become light. */
    --enum-fg-white: #f5f5f5;
    --enum-fg-black: #f5f5f5;
    --enum-fg-green: #81c784;
    --enum-fg-blue: #8ab4f8;
    --enum-fg-steelblue: #8fb8d4;
    --enum-fg-wheat: #e8d9a8;
    --enum-fg-red: #f28b82;
    --enum-fg-yellow: #e8d44d;
    --enum-fg-orange: #ffb570;
}

html, body {
    background-color: var(--kendo-color-app-surface, #ffffff);
    color: var(--kendo-color-on-app-surface, #424242);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border-radius: 0px;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

ul {
    margin-bottom: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--kendo-color-success, #26b050);
}

.invalid {
    outline: 1px solid var(--kendo-color-error, red);
}

.validation-message {
    /*color: red;*/
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--kendo-color-base-subtle, #e0e0e0);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--kendo-color-primary, #1b6ec2);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.k-grid tr.no-hierarchy td.k-hierarchy-cell * {
    display: none;
}

.k-grid tr.no-hierarchy td.k-hierarchy-cell {
    pointer-events: none;
}

/*#endregion app.css*/


/*#region styles.css*/

.k-hierarchy-cell .k-svg-icon.k-svg-i-minus svg path {
    d: path("m382.059 158.059-126.06 126.06-126.061-126.06L96 192l159.999 160L416 192z");
}

.k-hierarchy-cell .k-svg-icon.k-svg-i-plus svg path {
    d: path("m158.059 129.941 126.06 126.06-126.06 126.061L192 416l160-159.999L192 96z");
}

td.k-table-td.k-command-cell,
k-detail-row td.k-table-td.k-command-cell {
    padding: 8px;
}

.k-form-field.required .k-form-label::after,
.required:not(.k-form-field)::after {
    content: "*";
    font-weight: bold;
    color: red;
    display: inline;
    margin-left: .25em;
}

.k-card-media {
    max-height: 300px;
}

.listSelection {
    margin-top: 20px;
}

.listContainer {
    list-style: none;
    margin: 0;
    padding: 0
}

.listOption {
    text-decoration: none;
}


.header-image {
    width: 90px;
    height: 40px;
}

html, body {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.culture-button {
    margin: 5px;
}

    .culture-button.selected {
        font-weight: bold;
    }

.list-group-item {
    background-color: inherit;
}


.settings-list {
    text-decoration: none;
    transition: color 0.3s ease;
}

    .settings-list:hover {
        filter: brightness(0.85);
    }


.custom-menu-styles.k-menu > .k-item:hover {
    filter: brightness(0.85);
}

.table {
    --bs-table-color: var(--kendo-color-on-primary, #424242);
}

.custom-break {
    height: 5px;
    border: none;
}

.text-uppercase input {
    text-transform: uppercase;
}

.fit-content {
    width: fit-content;
}

.fit-content-label {
    width: fit-content;
    margin: auto 0;
}

.k-grid .k-table-row.item-pending-auth:not(.k-selected),
.k-grid .k-table-row.k-table-alt-row.item-pending-auth:not(.k-selected) {
    background-color: color-mix(in srgb, var(--kendo-color-primary) 20%, transparent);
}

.item-pending-auth-text {
    color: var(--kendo-color-primary);
}

.k-grid .k-table-row.item-invoiced:not(.k-selected),
.k-grid .k-table-row.k-table-alt-row.item-invoiced:not(.k-selected) {
    background-color: color-mix(in srgb, var(--kendo-color-secondary) 20%, transparent);
}

.item-invoiced-text {
    color: var(--kendo-color-secondary);
}

.k-grid .k-table-row.item-nsr:not(.k-selected),
.k-grid .k-table-row.k-table-alt-row.item-nsr:not(.k-selected) {
    background-color: color-mix(in srgb, var(--kendo-color-tertiary, #1274AC) 20%, transparent);
}

.item-nsr-text {
    color: var(--kendo-color-tertiary);
}

.k-grid .k-table-td.price-cost-pending-confirmation:not(.k-selected),
.k-grid .k-table-td.k-table-alt-td.price-cost-pending-confirmation:not(.k-selected) {
    background-color: color-mix(in srgb, var(--kendo-color-error) 20%, transparent);
}

.price-cost-pending-confirmation-text {
    color: var(--kendo-color-error);
}

.centered-horizontally {
    margin: 0 auto;
}

.buttons-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: var(--kendo-spacing-2, 0.5rem)
}

.push-right {
    margin-left: auto;
}

.primary-text {
    color: var(--kendo-color-primary);
}

.summary-card strong {
    color: var(--kendo-color-primary);
}

.overview-header {
    color: Rgb(51, 122, 183)
}

.sub-header {
    font-size: 18px
}

.MyTelerikNotification .k-notification-container .k-notification {
    width: fit-content;
    height: fit-content;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    align-self: center;
    margin-top: 50px;
    z-index: 9999;
}

.sidebarKpi {
    background-color: #c1a662;
    color: #262014;
    font-weight: bold;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 14px;
    margin-right: 20px;
    width: 30px;
    text-align: center;
    display: inline-block;
}

.active-filter .k-grid-header-menu {
    background-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

    .active-filter .k-grid-header-menu:hover {
        background-color: var(--kendo-color-primary);
    }

.global-search {
    position: relative;
    z-index: 1000;
}

.global-search-support-text {
    padding: 4px 8px;
}

.global-search-results {
    width: 100%;
    background-color: var(--kendo-color-surface, #fafafa);
    position: absolute;
}

.global-search-results-list {
    background-color: var(--kendo-color-surface, #fafafa);
}

.global-search-results-list-item {
    text-align: start;
    justify-content: start;
    width: 100%;
    background-color: var(--kendo-color-surface, #fafafa);
    border: none;
}

/* #region Star ratings */
.ratings {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    color: var(--kendo-color-subtle, #b1b1b1);
    overflow: hidden;
}

.full-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--kendo-color-primary);
}

    .empty-stars:before,
    .full-stars:before {
        content: "\2605\2605\2605\2605\2605";
        font-size: 20pt;
    }

.empty-stars:before {
    -webkit-text-stroke: 1px var(--kendo-color-subtle, #848484);
}

.full-stars:before {
    -webkit-text-stroke: 1px var(--kendo-color-primary);
}

/* #endregion */

.custom-form-buttons {
    float: right;
}

.export-grid .k-grid-table .k-master-row.k-alt {
    background-color: #fff;
}

.float-right {
    float: right;
}

/* #region Filters */

.standalone-filter.k-filter .k-filter-container {
    margin-block-end: 0;
}

.standalone-filter button:has(.k-svg-i-filter-add-group) {
    display: none;
}

.standalone-filter__toolbar.k-toolbar {
    overflow: visible;
}

/* #endregion */

.favourites-toolbar {
    min-height: 48px;
}

.terms-form {
    width: 20em;
}

/* Bordered panel shared by the customer detail screens (Customer, Licences,
   Locations, Employees). .nav-content is a flex column, so align-self keeps the
   panel sized to its content instead of stretching to the window. */
.detail-panel {
    align-self: flex-start;
    max-width: 100%;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 4px;
    padding: 16px 20px;
}

.detail-table {
    width: auto;
    max-width: 100%;
}

.detail-table td {
    padding: 2px 16px 2px 0;
}

/* action buttons would otherwise sit flush against each other */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}