/*grid loader height width*/

/* This is the base Kendo class in the validation summary */
.k-validation-summary.k-messagebox {
    width: 100%;
    margin: 0;
    border-width: 4px;
    text-align: left;
    padding-inline: unset;
}

    .k-validation-summary.k-messagebox > dl, ol, ul {
        margin: 0;
    }

.k-grid-container .k-loader-container .k-loader-container-inner .k-loader-canvas {
    width: 1.5rem !important;
    height: 1.2320508076rem !important;
}
    .k-grid-container .k-loader-container .k-loader-container-inner .k-loader-canvas .k-loader-segment {
        width: .5rem !important;
        height: .5rem !important;
    }

/* The reports are setting the wrong color for some labels (with checkboxes). Need to fix the theme for this. */
.k-form .k-form-field .k-form-field-wrap {
    color: inherit;
}

/* These are here for the areas where font is specified. They can be removed once the code is updated. */
@font-face {
    font-family: Roboto-Medium;
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500
}

@font-face {
    font-family: Roboto-Regular;
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400
}


/* This is a copy/paste from the theme file k-label class. If it ever changes, update here too. */
label {
    font-size: 14px;
    font-weight: 400;
    font-family: Roboto;
    font-style: normal;
    line-height: 18px;
}

/*kendo font family*/
/* Sunil, I have modified the fonts to all fall under the Roboto family name, and the weight will determine which file to use. This may mean you don't actually need to set these as I have also defined the Kendo based font family to Roboto so it should apply all over. Please test, and perhaps remove these again if possible. */
.k-font-black {
    font-family: "Roboto" !important;
}
.k-font-thin {
    font-family: "Roboto" !important;
}
.k-font-light {
    font-family: "Roboto" !important;
}
.k-font-normal {
    font-family: "Roboto" !important;
}
.k-font-medium {
    font-family: "Roboto" !important;
}
.k-font-semibold {
    font-family: "Roboto" !important;
}
.k-font-bold {
    font-family: "Roboto" !important;
}

.co-font-family-regular {
    font-family: 'Roboto' !important;
    font-weight: 400; /* 400 is the default weight for Regular */
}
/*cursor pointer*/
.co-cursor-pointer:hover {
    cursor: pointer;
}

/* POS styling preview */
.co-pos-preview {
    padding: 1rem;
}
.co-pos-item {
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    font-size: 16px;
    max-width: 110px;
    min-width: 80px;
    overflow-wrap: anywhere;
}

/*override justify-content at start to end */
.co-tab-strip-item .k-tabstrip-items {
    justify-content: space-between !important;
}

:root {        
    --text-icons-full-emphasis: #3A3A3A;
    --kendo-h5-font-family: Roboto;
}

/* Padding in the card title is making it hard to mix components are various heights. Rather no padding, and just centre align */
.k-card .k-card-header {
    padding-block: 0;
    padding-inline: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

    /* The current card font seems rather large. This is a copy/paste from figma */
    .k-card .k-card-header .k-card-title {
        color: var(--text-icons-full-emphasis, #3A3A3A);
        font-feature-settings: 'liga' off, 'clig' off;
        /* Heading 5 - Headline Medium/Semi bold 18 */
        font-family: Roboto;
        font-size: 18px;
        line-height: 24px; /* 133.333% */

        display: flex;
        align-items: center;
        column-gap: 1rem;
        justify-content: space-between;
        height: 4rem;
    }

/* Buttons by default have the icon on the left. Need CSS to move it to the right if it exists. */
.k-button:has(.k-button-icon):has(.k-button-text) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
}

    .k-button:has(.k-button-icon):has(.k-button-text) .k-button-icon {
        margin-left: 8px;
        margin-right: 0;
    }

    .k-button:has(.k-button-icon):has(.k-button-text) .k-button-text {
        margin-right: auto;
    }

/* Where we embed an image in the TelerikTextbox like with Search users and Search stores, the icon is too far left by default. This pushes it up a bit. */
.k-input-prefix > img {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

:root {
    /* The following are in the order as depicted in https://cosoft.atlassian.net/wiki/spaces/DT/pages/80773121/NextGen+Brand+Guide */
    --palette-12: #003049;
    --palette-02: #006CA5;
    --palette-03: #5D9B00;
    --palette-04: #FCBF49;
    --co-palette-orange: #F77FF0;
    --palette-06: #D62828;
    --palette-07: #333333;
    --palette-08: #464646;
    --palette-09: #A6A6A6;
    --palette-10: #C6C6C6;
    --palette-purple: #9908b0;
    /* Other colors in use */
    --navigation-panel-highlight: var(--palette-02);
    --palette-01: #0A2335;
    --palette-14: #272B32;
    --primary-brand-colour: var(--palette-01);
    --text-color: #212529;
    --px14-normal: normal normal normal 14px/18px Roboto;
    --px16-normal: normal normal normal 16px/20px Roboto;
    --px18-normal: normal normal normal 18px/23px Roboto;
    --navigation-panel-background-color: var(--palette-01);
    --default-content-padding: 0.5rem;
    --default-content-padding_2: 1rem;
    --default-grid-gap: 0.5rem;
    --app-background-color: #E4E7EB;
    --buttons-secondary-border-secondary-button-border: #E4E7EB;
    --content-background-color: #FFFFFF;
    --border-radius: 0.5rem;
    /* Need to handle still */
    --left-panel-padding-left: 0.75rem;
    --submenu-width: 18.125rem; /*290*/
    --top-header-bar-height: 4.5rem;
    --content-area-calculated-height: calc(100% - var(--top-header-bar-height));
    --spacing-system-spacing-md: 1.5rem;
    --colour-base-white: #FFF;
    --spacing-system-spacing-xxxs: .5rem;
    --on-surfaces-on-surface-main-primary: var(--palette-02);
    --on-surfaces-on-surface-main-full-emphasis: var(--palette-14);
    --default-grid-gap-2x: 1rem;
    --x-top-bar-height: 5rem;
    --borders-border-blue: #2C4B65;
    --buttons-horizontal-padding-medium: 1.5rem;
    --buttons-horizontal-padding-small: 1rem;
    --surfaces-primary-secondary: var(--palette-12);
    --surfaces-primary-tertiary: var(--palette-01);
    --parent-menu-width: 18.125rem;
    --spacing-02: 0.25rem;
    --spacing-0: 0;
    --colour-gray-scale-grey-6: #F1F5F9;
    --colour-gray-scale-grey-5: #D3D7D7;
    --on-surfaces-on-surface-main-verylow-emphasis: #F8F8F8;
    --spacing-system-spacing-xs: 1rem;
    --buttons-horizontal-padding-extra-extra-small-icon-only: 0.5rem;
    --buttons-vertical-padding-small: 0.5rem; /*8px*/
    --buttons-vertical-padding-medium: .75rem; /*12px*/

    --borders-default: #F1F5F9;
    --x-left-bar-width: 18.125rem;
    --x-left-bar-collapsed-width: 5.75rem; /* 92px */
    --x-left-bar-current-width: var(--x-left-bar-width);
    --surfaces-surface-main: #FFF;
    --spacing-system-spacing-xs: 1rem;
    --on-surfaces-on-primary-full-emphasis: #FFF;
    --buttons-horizontal-padding-medium: 1.5rem; /*24*/
    --buttons-horizontal-padding-md: 1.25rem; /*20*/
    --buttons-horizontal-padding-small: 1rem; /*16*/
    --buttons-horizontal-padding-xs: .75rem; /*12*/
    --colour-gray-scale-grey-7: #F8F8F8;
    --borders-default: var(--colour-gray-scale-grey-6);
    --buttons-secondary-border-secondary-button-border: var(--app-background-color);
    --buttons-secondary-secondary-button-bg: var(--app-background-color);
    --base-text: #212529;
    --component-border: #DEE2E6;
    --buttons-horizontal-padding-large: 2rem; /*32*/
    --buttons-vertical-padding-medium: .75rem; /*12*/
    --buttons-horizontal-padding-extra-extra-small-icon-only: .5px; /*8*/
    --text-color-success: #A2C856;
    --on-surfaces-on-bg-high-emphasis: #272B32;
    --text-color-danger: #D63327;
    --text-color-orange: #D18C2E;
    --text-color-grey: #8C8E90;
    --surfaces-primary-primary: var(--palette-02);
    --colour-brand-colours-green: #A2C856;
    --colour-gray-scale-grey-4: #CCCFCF;
    --border-colour-gray-scale-grey-3: #B7B9BB;
    --On-Surfaces-on-bg-medium-emphasis: #64748B;
    --success-background-color: #5CB85C;
    --danger-background-color: #dc3545;
    --colour-gray-scale-grey-1: var(--palette-07);
    --form-label-width: 10rem;
    --Borders-border-grey: #F1F5F9;
    --co-grid-tab-row-height: 3.5rem;
    --On-Surfaces-on-bg-primary: #006CA5;
}

* {
    box-sizing: border-box; /* Ensures width is as specified. Padding and Margin are included IN the element, not appended to. */
}

body {
    display: block;
    width: 100%;
    height: 100vh;
    margin: 0; /* prevents scrollbars */
    background: var(--app-background-color) 0% 0% no-repeat padding-box;
    font: var(--px16-normal);
    color: var(--text-color);
}


/* This little trick removes the input:-internal-autofill-selected style that chrome auto injects if a textbox is auto filled */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

a {
    color: var(--primary-brand-colour);
}

    a:hover {
        text-decoration: none;
        color: var(--primary-brand-colour);
    }

h4 {
    font: var(--px18-normal);
    letter-spacing: 0;
    color: var(--text-color);
    opacity: 1;
}

.top-centre-aligned {
    position: fixed;
    top: 0 !important;
    left: 50% !important;
}

#blazor-error-ui {
    background-color: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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;
    }

.no-panel .k-loader-container-panel {
    background-color: transparent;
    border-width: 0;
}

/* Where we have a checkbox and a label side by side, we want them aligned nicely. */
/*div:has(> .k-checkbox):has(> label) {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
}*/

/* This forces the label to centre in the div vertically. The label won't listen to Flex or anything. */
/*div > label {
    margin-top: auto;
    margin-bottom: auto;
}*/

/* START: Used in BasePage */
co-page-container {
    display: flex;
    flex-flow: column;
    min-height: 100%;
}

co-page-title {
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: transparent;
    border-width: 0;
    padding-left: var(--default-content-padding);
    height: 2.5rem;
    font: var(--px18-normal);
    color: black;
}

co-page-content {
    display: flex;
    flex-direction: column;
    /*padding: var(--default-content-padding);*/
    gap: var(--default-grid-gap);
    margin-left: var(--default-content-padding);
    margin-right: var(--default-content-padding);
    margin-top: var(--default-content-padding);
    border-radius: var(--border-radius);
}
/* END: Used in BasePage */

.tooltip-target {
}

/* START: Main Menu Stuff */
.k-menu.co-main-menu {
    width: 100%;
    background-color: transparent;
    transition: 200ms ease height;
}

.co-main-menu-icon {
    width: 24px;
    height: 24px;
}

.co-main-menu-item {
    display: flex;
    flex-direction: row;
    gap: var(--default-grid-gap-2x);
    width: 100%;
    color: white;
    padding-left: 0;
    /* pointer-events: none; */ /* Careful with this. Removes the tooltip! */
}

/* The highlight style as moving over each item */
.k-menu-vertical > .k-menu-item > .k-menu-link:hover {
    background-color: var(--on-surfaces-on-surface-main-primary);
    color: white;
}

.k-menu-link > .k-image {
    width: 24px;
    height: 24px;
}

.k-menu.k-menu-vertical:not(.k-context-menu) {
    padding: 0;
}


.k-menu-popup .k-menu-group, .k-menu-popup .k-menu-vertical {
    background-color: var(--navigation-panel-background-color);
}

/* Sub submenu panel. Tooltips also use the animation container, so must be specific for the menu here */
/* NB: Mobile view overrides this to set the top differently */
.k-animation-container:has(> .k-child-animation-container > .k-menu-popup) {
    top: var(--top-header-bar-height) !important;
    bottom: 0;
    width: var(--submenu-width) !important;
    background-color: var(--navigation-panel-background-color);
    border-left: 1px solid var(--surfaces-primary-secondary);
    border-radius: 0;
}

.k-menu-popup:has(> .k-menu-group .k-item > .k-link > .co-main-menu-item) {
    overflow: hidden;
    background-color: var(--surfaces-primary-secondary);
}
/* The submenu panel that pops up when hovering over a parent item with kids */
.k-menu-popup {
    border-style: none;
    border-radius: 0;
}

/* START: Collapsed tooltip */
.k-animation-container.co-tooltip {
    left: 90px !important;
    z-index: 10007 !important;
    pointer-events: none;
}

.k-tooltip {
    color: black;
    background-color: var(--palette-04);
}

    .k-tooltip .k-callout {
        color: var(--palette-04);
    }
/* END: Collapsed tooltip */
.co-main-menu-collapse-link {
    cursor: pointer;
    font: var(--px16-normal);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    padding-left: 0.75rem;
    height: 100%;
    color: white;
    gap: var(--default-grid-gap-2x);
}


/* END: Main Menu Stuff */
.k-pager-sizes .k-dropdownlist {
    width: 6.25rem;
}

.commandButtons {
    display: flex;
    gap: 0.5em;
    padding-top: 15px;
    justify-content: flex-end;
}

/*.k-form-field:has(label[for="BoolTypeFormItem"]) {
    display: flex;
    align-content: center;
    column-gap: 1rem;
}


.k-form-field > label[for="BoolTypeFormItem"] {
    margin-top: auto;
    margin-bottom: auto;
}

.k-form-field-wrap:has(input[type="checkbox"]) {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}*/

.co-single-command-column {
}

/* Where we have a column with a single button, remove clipping (not a GridCommandButton) */
th:has(.co-single-command-column) {
    text-overflow: clip !important;
}

td:has(.co-single-command-column) {
    text-overflow: clip !important;
}

/* START: Main class for the DataKeyValueDialog component. */
.data-key-value-dialog {
    max-height: 100vh;
    max-width: 100vh;
    height: 50vh;
    width: 50vw;
}

/* END: Main class for the DataKeyValueDialog component. */


co-flex-row {
    display: flex;
    column-gap: 1rem;
}

/*.k-form-field {
    width: 100%;
}*/



.co-global-loading {
    opacity: 0.5;
}

.co-grid-popup-window {
    max-height: 80vh;
}

/* Styles below here must move to the Components library. */
.co-activate-device-code {
    text-transform: uppercase
}

.co-bold-warning {
    padding: 1rem;
    background-color: var(--palette-06);
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.password-input {
    -webkit-text-security: disc; /* For Chrome, Safari, and Opera */
    text-security: disc; /* For Firefox */
}

/* #region Updated Layout */
/*main container grid template update */
x-main-container {
    grid-template-areas: "x-top-header-bar x-top-header-bar"
        "x-left-bar x-content" !important;
    grid-template-rows: auto auto 1fr !important;
}
/*menu right caret icon change */
.co-main-menu span.k-menu-expand-arrow {
    background-image: url(/images/icons/icon_arrow_right.svg);
    background-position: center;
}

    .co-main-menu span.k-menu-expand-arrow .k-svg-icon {
        visibility: hidden;
    }
/*navigation panel bg color */
x-left-bar > x-navigation {
    /*background-color: var(--surfaces-primary-tertiary) !important;*/
}

/*left bar grid template update*/
x-left-bar {
    grid-template-rows: 1fr auto !important;
}

/*top header bar */
x-top-header-bar {
    grid-area: x-top-header-bar;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: var(--default-grid-gap);
    background-color: var(--surfaces-primary-secondary);
    padding: .5rem 2rem;
    height: var(--top-header-bar-height);
    z-index: 5;
}

    /*top header bar sections*/
    x-top-header-bar .co-left-area,
    x-top-header-bar .co-center-area,
    x-top-header-bar .co-right-area {
        display: flex;
        align-items: center;
        gap: var(--default-grid-gap);
    }

    x-top-header-bar .co-left-area {
        justify-content: flex-start;
    }

    /*overriding button style*/
    x-top-header-bar .k-button.k-selected.k-button-solid-base {
        background-color: var(--surfaces-primary-secondary);
        border-bottom-color: var(--surfaces-primary-secondary);
        border-left-color: var(--surfaces-primary-secondary);
        border-right-color: var(--surfaces-primary-secondary);
        border-top-color: var(--surfaces-primary-secondary);
    }

    x-top-header-bar .co-center-area {
        justify-content: center;
    }

    x-top-header-bar .co-right-area {
        justify-content: flex-end;
    }

        x-top-header-bar .co-right-area .co-right-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 1 1 auto;
            gap: var(--buttons-horizontal-padding-extra-extra-small-icon-only);
        }

.co-menu-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

x-top-header-bar .k-button-solid.co-header-button,
x-top-header-bar .co-left-area .co-menu-button,
x-top-header-bar .co-left-area .co-menu-button:hover {
    border: transparent;
    background: transparent;
    padding: 0;
    color: #fff;
    border: transparent;
    gap: var(--spacing-system-spacing-md);
}

x-top-header-bar .co-header-button.k-button:hover.k-button-solid-base,
x-top-header-bar .menu.k-button:hover.k-button-solid-base {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    background-color: transparent;
}

x-top-header-bar .co-left-area .co-menu-button,
x-top-header-bar .co-left-area .co-menu-button:hover {
    display: flex;    
    line-height: 1.5rem;
    background: transparent !important;
    gap: var(--spacing-system-spacing-md);
    text-align: center;
}

    x-top-header-bar .co-left-area .co-menu-button .k-button-text {
        display: flex;
        gap: var(--spacing-system-spacing-md);        
    }

x-top-header-bar .co-center-area .co-logo {
    width: 5rem;
}

/*top header bar right side section style */
.co-user-control {
    display: flex;
    align-items: center;
    gap: var( --spacing-system-spacing-xxxs);
    margin-right: var( --spacing-system-spacing-xxxs);
    color: var(--colour-base-white);
    font-family: "Roboto";
    font-size: 0.875rem; /*14px*/
    line-height: 1.375rem; /*22px*/
}

    .co-user-control a > span {
        color: var(--colour-base-white);
    }

    .co-user-control .co-user-profile-img {
        width: 2.5rem;
        height: 2.5rem;
        background: #fff;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        color: var(--surfaces-primary-secondary);
    }

x-left-bar {
    height: calc(100vh - var(--top-header-bar-height));
}

    x-left-bar .k-animation-container {
        display: grid;
        grid-template-rows: 1fr;
        height: var(--content-area-calculated-height);
    }

    x-left-bar > x-user {
        display: flex;
        align-items: center;
    }

        x-left-bar > x-user .co-menu-expander-container {
            flex: 1 1 auto;
            padding: var(--default-grid-gap-2x) 0;
        }

            x-left-bar > x-user .co-menu-expander-container .co-main-menu-collapse-link {
                padding-top: var(--default-grid-gap-2x);
                padding-bottom: var(--default-grid-gap-2x);
            }

    x-left-bar > .k-animation-container:has(.co-main-menu-container ) {
        z-index: 10005 !important;
        width: var(--parent-menu-width);
    }
/* #region 1st level menu   */
.co-main-menu-container {
    width: 18.125rem;
    background-color: var(--colour-base-white);
    height: 100%;
}
    /*spacing*/
    .co-main-menu-container .k-menu-vertical .k-menu-link {
        padding: var(--buttons-horizontal-padding-medium) var(--buttons-horizontal-padding-small) !important;
    }

/*font family */
.co-main-menu-item span.k-menu-link-text {
    font-family: Roboto;
}

/*text color */
.co-main-menu-container .k-menu-vertical > .k-menu-item .k-menu-link-text {
    color: var(--on-surfaces-on-surface-main-full-emphasis);
}

/*text color  on hover or selected*/
.co-main-menu-container .k-menu-vertical > .k-menu-item .co-selected-menu-item > .k-menu-link-text,
.co-main-menu-container .k-menu-vertical > .k-menu-item .k-menu-link:hover .k-menu-link-text {
    color: var(--colour-base-white);
}

/*icon color change*/
.co-white-icon .co-main-menu-icon,
.co-main-menu-container .k-menu-vertical > .k-menu-item .k-menu-link:hover .co-main-menu-icon,
.co-main-menu-container .k-menu-vertical > .k-menu-item .co-selected-menu-item > .co-main-menu-icon {
    filter: brightness(7) saturate(100%);
}
/* #endregion*/

/* #region 2nd & 3rd level menu spacing  */
.k-menu-popup .k-menu-item,
.co-main-menu .k-menu-item {
    margin-bottom: -1px;
}

.k-menu-popup .k-menu-link:has(> .co-main-menu-item ),
.k-menu-vertical > .k-menu-item > .k-menu-link:has(> .co-main-menu-item ) {
    padding: var(--buttons-horizontal-padding-small);
}

.k-menu-vertical > .k-menu-item > .k-menu-link:has(> .co-main-menu-item ) {
    padding-right: calc(2rem + 23px);
}
/* #endregion*/

/* #region 2nd & 3rd level selection bg color  */
.k-menu-vertical > .k-menu-item > .k-menu-link:has(> .co-selected-menu-item.co-main-menu-item ),
.k-menu-popup .k-menu-link:has(> .co-selected-menu-item.co-main-menu-item),
.k-menu-group .k-item > .k-link:has(> .co-main-menu-item):hover {
    background: var(--on-surfaces-on-surface-main-primary) !important;
}
/* #endregion*/
/* #region 2nd & 3rd text color  */
x-navigation .k-menu:not(.k-context-menu) > .k-item {
    color: var(--colour-base-white);
    font-family: "Roboto"
}
/* #endregion*/

/*#region Globals*/
x-globals span.telerik-blazor.k-combobox.k-input {
    font-family: "Roboto";
}
x-top-header-bar x-globals {
    gap: var(--buttons-horizontal-padding-small);
}
/*#endregion*/

/*Expander button stye*/
.co-left-menu-expanded,
.co-left-menu-collapsed {
    background: var(--on-surfaces-on-surface-main-primary);
    padding: var(--spacing-system-spacing-xxxs);
    border-radius: 100px;
}

.co-left-menu-collapsed {
    position: absolute;
    bottom: 2rem;
    left: 4.25rem;
    z-index: 3;
}

/* #endregion*/

/*#region Mobile*/

x-header-bar .k-panelbar .k-menu-link-text,
x-header-bar .k-panelbar-item-text {
    font-family: 'Roboto';
    color: var(--colour-base-white);
}

x-header-bar .k-panelbar {
    border: none;
}

    x-header-bar .k-panelbar .k-panelbar-item.k-level-0 .k-link {
        padding: 1rem;
    }

    x-header-bar .k-panelbar .k-panelbar-group > .k-panelbar-item .k-link {
        padding: 0.75rem 1rem;
    }
    /*Overriding events*/
    x-header-bar .k-panelbar .k-panelbar-item .k-link,
    x-header-bar .k-panelbar > .k-item > .k-link:focus,
    x-header-bar .k-panelbar > .k-item > .k-link.k-focus,
    x-header-bar .k-panelbar > .k-panelbar-header > .k-link:focus,
    x-header-bar .k-panelbar > .k-panelbar-header > .k-link.k-focus {
        border-bottom: 1px solid var(--borders-border-blue);
        background: var(--navigation-panel-background-color);
        color: var(--colour-base-white);
        padding-left: 1rem !important;
    }

    x-header-bar .k-panelbar > .k-item > .k-link.k-selected
    x-header-bar .k-panelbar > .k-panelbar-header > .k-link.k-selected
    x-header-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-selected
    x-header-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-selected:hover,
    x-header-bar .k-panelbar > .k-panelbar-header > .k-link.k-selected:hover,
    x-header-bar .k-panelbar > .k-item > .k-link.k-selected:hover {
        background: var(--navigation-panel-background-color);
    }

    x-header-bar .k-panelbar .k-panelbar-group > .k-item > .k-link.k-hover,
    .k-panelbar-item .k-animation-container .k-panelbar-group .k-panelbar-item .k-link.k-selected:hover {
        background: var(--navigation-panel-background-color);
    }

    x-header-bar .k-panelbar .k-group > .k-item > .k-link:hover,
    x-header-bar .k-panelbar .k-group > .k-item > .k-link.k-hover,
    x-header-bar .k-panelbar .k-panelbar-group > .k-item > .k-link:hover,
    x-header-bar .k-panelbar .k-panelbar-group > .k-item > .k-link.k-hover,
    .k-panelbar-item .k-animation-container .k-panelbar-group .k-panelbar-item .k-link:has(.co-child-menu-item) {
        background: var(--surfaces-primary-secondary);
    }

    x-header-bar .k-panelbar .k-panelbar-group > .k-panelbar-item.k-level-2 .k-link.k-selected {
        padding-left: 1rem;
    }

x-header-bar .k-panelbar-group .k-panelbar-header .k-svg-icon > svg {
    fill: var(--colour-base-white);
}

x-header-bar .k-panelbar > .k-panelbar-header > .k-link .k-icon {
    color: var(--colour-base-white);
}

.co-menu-link-container {
    display: flex;
    gap: var(--spacing-02);
    color: var(--colour-base-white);
}

.co-parent-menu-item {
    font-family: "Roboto";
    color: var(--colour-gray-scale-grey-5);
}

.co-selected-parent-item > .co-parent-menu-item {
    color: var(--colour-gray-scale-grey-6);
}


/*#endregion*/

/*top header mobile view*/
label.co-global-header-label {
    display: none;
}

.co-header-button-container {
    display: flex;
    align-items: center;
    gap: var(--buttons-horizontal-padding-extra-extra-small-icon-only);
    border-radius: var(--border-radius);
}



.co-global-animation-container .k-animation-container.telerik-blazor {
    width: 100%;
    height: 8rem;
    background: var(--surfaces-primary-secondary);
    left: 0;
    top: 5rem;
}

.co-header-action-button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--buttons-horizontal-padding-extra-extra-small-icon-only);
}

x-top-header-bar .co-header-action-button .k-button {
    padding: var(--buttons-horizontal-padding-extra-extra-small-icon-only) var(--buttons-vertical-padding-small);
    align-items: center;
}

.co-mobile-logout-button-container {
    position: static;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: var(--buttons-vertical-padding-medium) var(--buttons-horizontal-padding-extra-extra-small-icon-only);
    padding-left: 0;
    padding-right: 0;
    color: var(--on-surfaces-on-bg-high-emphasis);
    visibility: hidden;
}

.co-logout-button.k-button {
    border: none;
    background-color: transparent !important;
    padding: var(--spacing-0);
    color: var(--on-surfaces-on-surface-main-full-emphasis) !important;
    font-family: 'Roboto';
    width: 100%;
    display: flex;
    justify-content: start;
}

.co-user-action:hover .co-logout-button.k-button {
    background-color: transparent !important;
    color: var(--colour-base-white) !important;
}

.co-logout-button.k-button:hover.k-button-solid-base {
    background-color: transparent !important;
}

.co-logout-button.k-button:active.k-button-solid-base {
    background-color: transparent !important;
}

.co-user-action:hover .co-logout-button.k-button .logout-icon {
    filter: brightness(7) saturate(100%);
}

.co-mobile-logout-button-container .co-logout-button.k-button {
    justify-content: center;
    padding: var(--buttons-vertical-padding-medium) var(--buttons-horizontal-padding-extra-extra-small-icon-only)
}

    .co-mobile-logout-button-container .co-logout-button.k-button .k-button-text,
    .co-user-details-container .co-logout-button.k-button .k-button-text {
        display: flex;
        gap: 0.5rem;
        text-align: center;
    }

.co-user-details-container .co-logout-button.k-button .k-button-text {
    gap: 1rem;
}

x-top-header-bar .k-animation-container:has(.co-user-details-container) {
    width: 12.25rem;
    height: 3.5rem;
    top: 4.5rem;
    right: 1.25rem;
    text-align: center;
}

    x-top-header-bar .k-animation-container:has(.co-user-details-container) :hover {
        border-width: 0;
    }

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

.co-user-action {
    border-radius: var(--spacing-0) var(--spacing-0) var(--border-radius) var(--border-radius);
    border-color: var(--borders-default);
    background: var(--colour-base-white);
    box-shadow: 0 0.25rem 0.313rem 0 rgba(0, 0, 0, 0.04), 0 0.125rem .25rem 0 rgba(0, 0, 0, 0.03);
    background-color: var(--colour-base-white);
    padding: 1rem 0.5rem 1rem 1rem;
    color: var(--on-surfaces-on-bg-high-emphasis);
    display: flex;
    justify-content: start;
}

    .co-user-action:hover {
        background-color: var(--on-surfaces-on-surface-main-primary) !important;
    }

x-header-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link:hover, x-header-bar .k-panelbar .k-group > .k-panelbar-item > .k-link:hover {
    background-color: var(--navigation-panel-background-color);
}

/*#endregion*/

x-main-container x-header-bar {
    padding: 0;
}

    x-main-container x-header-bar .co-mobile-menu {
        display: block;
        padding-bottom: 0;
        padding-bottom: 0;
    }

.co-header-action-button,
.co-menu-global-section {
    display: block;
}

.co-mobile-menu .k-panelbar > .k-item > .k-link:hover,
.co-mobile-menu .k-panelbar > .k-item > .k-link.k-hover,
.co-mobile-menu .k-panelbar > .k-panelbar-header > .k-link:hover,
.co-mobile-menu .k-panelbar > .k-panelbar-header > .k-link.k-hover {
    background-color: var(--navigation-panel-background-color);
}

.k-animation-container:has(.co-main-menu-container ) {
    z-index: 3;
}

/*#region Permission */
.co-content-section {
    background: var(--colour-base-white);
}

    .co-content-section .co-content-header {
        display: flex;
        padding: var(--spacing-system-spacing-md) var(--spacing-system-spacing-xs);
        align-items: center;
        gap: 1.5rem;
        align-self: stretch;
        border-bottom: 1px solid var(--borders-default);
    }

        .co-content-section .co-content-header h3 {
            color: var(--on-surfaces-on-surface-main-full-emphasis);
            font-family: 'Roboto';
            font-size: 1.25rem;
            line-height: 1.5rem;
            margin-bottom: 0;
            width: 100%;
        }

    .co-content-section .co-content-sub-header {
        display: flex;
        padding: var(--spacing-system-spacing-xs);
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--borders-default);
    }
/*#region chart tooltip pop up*/
.k-chart-tooltip-wrapper {
    pointer-events: none;
}
/*#endregion*/
/*#region refund form*/
.refund-form .k-form-legend {
    display: none !important;
}

.co-bold-success {
    padding: 1rem;
    background-color: var(--success-background-color);
    color: black;
    font-weight: bold;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.co-selection-section-role {
    grid-template-columns: 1.5fr 3.5fr;
}

.co-dropdown, .co-dropdown .k-input-button, .co-dropdown .k-input-button:hover {
    background-color: #F8F8F8 !important;
    border-radius: 0.5rem;
}

.co-content-section .co-content-sub-header {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--spacing-system-spacing-xs);
}

    .co-content-section .co-content-sub-header > label {
        font-family: Roboto;
        color: var(--colour-gray-scale-grey-1);
        font-size: 0.875rem;
        line-height: 1.125rem;
        width: 100%;
    }

.co-edit-remove-button {
    /*border-radius: var(--border-radius, 8px);
    padding: var(--buttons-vertical-padding-medium, 12px) var(--buttons-horizontal-padding-small, 16px);
    text-align: center;
    font-family: 'Roboto';
    font-size: 14px;
    font-style: normal;
    height: 40px;
    border: none;
    background-color: var(--on-surfaces-on-primary-full-emphasis);*/
}

    .co-edit-remove-button:hover {
        border-color: var(--borders-default);
        background-color: var(--on-surfaces-on-primary-full-emphasis) !important;
        color: var(--on-surfaces-on-bg-high-emphasis);
    }

.co-grid-column {
    justify-content: space-between;
}

.co-grid-column {
    background-color: white;
    Width: 75%;
}

.co-role-permission {
    display: grid;
    grid-auto-flow: column;
    padding: var(--spacing-system-spacing-none, 0px);
    align-items: center;
    gap: var(--spacing-08, 32px);
}

.co-text-success {
    color: var(--text-color-success,#A2C856);
}

.co-text-danger {
    color: var(--text-color-danger,#D63327);
}

.co-text-orange {
    color: var(--text-color-orange,#D18C2E);
}

.co-text-grey {
    color: var(--text-color-grey,#8C8E90);
}

.co-permission-list-item {
    display: flex;
    gap: var(--default-grid-gap);
    color: var(--on-surfaces-on-surface-main-full-emphasis);
    font-family: "Roboto";
    font-size: 0.875rem;
    line-height: 1.125rem;
}

/*#region Role Assignment */
.co-input {
    border: none;
}

    .co-role-selection .co-combobox .k-input-inner,
    .co-combobox .k-input-inner,
    .co-input .k-input-inner {
        font-family: "Roboto";
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
    }

.co-role-selection {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--spacing-system-spacing-xs);
    width: 368px;
    margin-bottom: 0.5rem;
}

    .co-role-selection .k-combobox.co-combobox .k-input-inner {
        background: var(--colour-base-white);
    }

    .co-role-selection .k-combobox.co-combobox .k-button {
        border: none;
        background: var(--colour-base-white);
    }

        .co-role-selection .k-combobox.co-combobox .k-button:hover,
        .co-role-selection .k-combobox.co-combobox .k-button:active {
            background-color: transparent !important;
        }

        .co-role-selection .k-combobox.co-combobox .k-button .k-svg-icon > svg {
            fill: #000;
        }

.co-user-role-container .k-grid .telerik-blazor.k-grid-toolbar {
    display: none;
}

.co-role-assignment-container .k-table-td.k-group-cell {
    background: var(--colour-base-white);
}

.co-grid-group-header .co-header-group-check-box {
    margin-left: 3.2rem;
}

.co-grid-group-header .co-header-subgroup-check-box {
    margin-left: 2.2rem;
}

.co-grid-group-header .co-header-brand-check-box {
    margin-left: 1.2rem;
}

.k-table-tbody .k-checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

    .k-table-tbody .k-checkbox.k-checked,
    .k-table-tbody .k-checkbox:checked {
        border-bottom-color: var(--text-color-success) !important;
        border-left-color: var(--text-color-success) !important;
        border-right-color: var(--text-color-success) !important;
        border-top-color: var(--text-color-success) !important;
        background-color: var(--text-color-success) !important;
    }

    .k-table-tbody .k-checkbox:indeterminate,
    .k-table-tbody .k-checkbox.k-indeterminate {
        border-color: var(--borders-default) !important;
        background-color: var(--border-colour-gray-scale-grey-3) !important;
    }

    .k-table-tbody .k-checkbox.k-checked.k-hover,
    .k-table-tbody .k-checkbox:checked.k-hover,
    .k-table-tbody .k-checkbox.k-checked.k-state-hover,
    .k-table-tbody .k-checkbox.k-checked.k-state-hovered,
    .k-table-tbody .k-checkbox.k-checked:hover,
    .k-table-tbody .k-checkbox:checked.k-state-hover,
    .k-table-tbody .k-checkbox:checked.k-state-hovered,
    .k-table-tbody .k-checkbox:checked:hover {
        background-color: var(--text-color-success) !important;
    }



/*#endregion*/

.co-bold-primary {
    padding: 1rem;
    background-color: var(--on-surfaces-on-surface-main-primary);
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

co-page-container .filter-invoice {
    display: flex;
    flex-flow: wrap;
    gap: 1rem;
}

.co-role-form .k-form-buttons,
.co-store-group-form .k-form-buttons {
    display: flex;
}

    .co-role-form .k-form-buttons .telerik-blazor.k-button,
    .co-store-group-form .k-form-buttons .telerik-blazor.k-button {
        width: 100%
    }

/*#region Bootstrap*/
.co-bootstrap-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.co-bootstrap-logo {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    grid-area: bootstrapLogo;
}

.bootstrapper-container {
    grid-area: bootstrapContainer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--default-content-padding);
}

.initialisation-screen-container {
    display: grid;
    grid-template-areas: "bootstrapLogo"
        "bootstrapContainer";
}

.co-mobile-view-not-present {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: .5rem;
}

    .co-mobile-view-not-present img {
        width: 250px
    }

    .co-mobile-view-not-present div {
        height: 79px;
    }
/*#endregion*/



.co-content-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00000061;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

*:has(.co-content-loader) {
    position: initial;
    overflow-y: hidden;
}

    *:has(.co-content-loader) x-left-bar {
        position: revert;
        z-index: 4;
    }

    *:has(.co-content-loader) .k-animation-container:has(.co-main-menu-container ) {
        z-index: 4;
    }

@media (min-width: 1200px) {
    x-top-header-bar {
        grid-area: x-top-header-bar;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: var(--default-grid-gap);
        background-color: var(--surfaces-primary-secondary);
        padding: .5rem 2rem;
        height: var(--top-header-bar-height);
        z-index: 5;
    }
}
@media (max-width: 1200px) {
    x-top-header-bar {
        display: grid;
        overflow: hidden;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "header-left-area  header-right-area"
            "header-global-area header-global-area";
        grid-gap: var(--default-grid-gap);
        background-color: var(--surfaces-primary-secondary);
        padding: .5rem 2rem;
        height: 6.875rem;
        z-index: 5;
    }
    .co-left-area {
        grid-area: header-left-area;
    }

    x-globals {
        grid-area: header-global-area;
    }

    .co-right-area {
        grid-area: header-right-area;
    }
    x-store {
        margin-right: unset !important;
    }
}

@media (max-width: 991.98px) {
    .co-user-control, .co-desktop-menu, x-main-container x-top-header-bar x-globals, x-main-container x-left-bar {
        display: none;
    }

    x-globals x-company,
    x-globals x-brand,
    x-globals x-store {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-02);
        align-self: stretch;
        max-width: none;
    }

    x-main-container {
        grid-template-areas: "x-top-header-bar"
            "x-global"
            "x-header-bar"
            "x-content" !important;
        grid-template-rows: auto auto auto 1fr !important;
        grid-template-columns: auto !important;
    }

        x-main-container > * {
            min-width: 0;
        }

        x-main-container:has(.co-main-menu-container) {
            overflow: hidden;
            margin: 0;
            touch-action: none;
            -ms-touch-action: none;
            height: 100vh;
        }

        x-main-container .k-animation-container:has(.co-main-menu-container) {
            border-right: 1px solid #ccc;
        }

    .co-main-menu-container ul.k-header {
        display: inline-block;
        height: 100vh;
        overflow-y: auto;
    }

    x-top-header-bar {
        height: var(--x-top-bar-height);
        grid-template-columns: 1fr 1fr;
        background-color: var(--surfaces-primary-secondary);
        padding: var(--buttons-horizontal-padding-small);
        padding-top: var(--buttons-horizontal-padding-medium);
    }

    x-left-bar {
        top: var(--x-top-bar-height);
        height: calc(100vh - var(--x-top-bar-height));
        border: none;
    }

    .k-animation-container:has(.co-main-menu-container ) {
        background-color: #fff;
        position: absolute;
        top: var(--x-top-bar-height);
        height: calc(100% - var(--x-top-bar-height));
    }

    .co-global-animation-container label.co-global-header-label {
        display: block;
        color: #fff;
        font-family: 'Roboto';
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 0;
    }

    x-header-bar {
        z-index: 4;
    }

    .co-global-animation-container {
        grid-area: x-global;
        z-index: 4;
    }

        .co-global-animation-container x-globals {
            display: grid;
            grid-template-areas: "x-company x-brand"
                "x-store x-store";
            width: 100%;
            height: auto;
            grid-template-columns: 1fr 1fr;
            background: var(--surfaces-primary-secondary);
            padding: 1rem;
            padding-top: 0;
            gap: 0.75rem;
        }

            /*.co-global-animation-container x-globals.co-company-store {
                grid-template-areas: "x-company"
                    "x-store";
                grid-template-columns: 1fr;
            }

            .co-global-animation-container x-globals.co-brand-store {
                grid-template-areas: "x-brand"
                    "x-store";
                grid-template-columns: 1fr;
            }

            .co-global-animation-container x-globals.co-store-only {
                grid-template-areas: "x-store";
                grid-template-columns: 1fr;
            }*/

        .co-global-animation-container x-company {
            grid-area: x-company;
        }

        .co-global-animation-container x-brand {
            grid-area: x-brand;
        }
            
        .co-global-animation-container x-store {
            grid-area: x-store;
            max-width: none;
        }

        .co-global-animation-container x-globals span.telerik-blazor.k-combobox.k-input {
            border-radius: var(--border-radius);
            background: var(--on-surfaces-on-surface-main-verylow-emphasis);
            font-family: "Roboto";
            height: 2.25rem;
        }


        .co-global-animation-container x-globals span.k-input-solid:focus-within {
            background-color: transparent;
        }

        .co-global-animation-container x-globals span.k-clear-value span.k-svg-icon {
            color: var(--on-surfaces-on-surface-main-full-emphasis);
        }

        .co-global-animation-container x-globals input.k-input-inner {
            border-radius: 0;
            background: var(--on-surfaces-on-surface-main-verylow-emphasis);
            color: var(--on-surfaces-on-surface-main-full-emphasis);
            padding: 0.5rem 0 0.5rem 0.75rem;
            font-family: 'Roboto';
            font-size: 14px;
            line-height: 18px;
        }

        .co-global-animation-container x-globals button.k-button {
            border-radius: 0;
            background: var(--on-surfaces-on-surface-main-verylow-emphasis);
            border: none;
            color: var(--on-surfaces-on-surface-main-full-emphasis);
            padding: 0.5rem 0.375rem 0.5rem 0.4375rem;
        }

    .co-global-language-selector {
        padding: var(--spacing-system-spacing-xs);
        padding-bottom: 0;
        color: var(--on-surfaces-on-surface-main-full-emphasis);
    }

        .co-global-language-selector .k-dropdownlist {
            border-radius: 0.25rem;
            border: 0.0625rem solid var(--borders-default);
            gap: 0.5rem;
            color: var(--on-surfaces-on-surface-main-full-emphasis);
        }
    .k-menu-vertical > .k-menu-item > .k-menu-link:has(> .co-selected-menu-item.co-main-menu-item ),
    .k-menu-popup .k-menu-link:has(> .co-selected-menu-item.co-main-menu-item),
    .k-menu-group .k-item > .k-link:has(> .co-main-menu-item):hover {
        background: var(--palette-02) !important;
    }

    .co-combobox .k-input-inner {
        padding: 0.5rem 0 0.5rem 0.75rem !important;
    }

    .co-global-selector-popup .k-child-animation-container,
    .co-global-selector-popup .k-child-animation-container .k-popup {
        max-height: 15rem;
    }

    .k-animation-container:has(.co-main-menu-container ) {
        z-index: 100;
    }
}

@media only screen and (min-width: 1367px) {

    .header-global-container {
        display: grid;
        grid-template-columns: 1050px auto;
    }

        .header-global-container #loggedInUser {
            justify-content: flex-start;
            padding-left: 0;
            padding-right: 0;
        }
}

@media (max-width: 991.98px) {

    /* mobile overlay*/
    #overlay {
        position: fixed;
        display: none;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
    }

    body:has(.co-main-menu-container) #overlay {
        display: block;
    }
}

@media (min-width: 992px) {
    .co-menu-global-section,
    .co-header-action-button,
    .co-mobile-menu,
    .co-mobile-logout-button-container,
    .co-global-animation-container,
    .co-global-language-selector,
    .co-mobile-logout-button-container,
    x-main-container x-header-bar {
        display: none;
    }

    .co-parent-navigation-container {
        display: block;
        position: absolute;
        top: 4.5rem;
        bottom: 0;
        width: 18.125rem;
    }

        .co-parent-navigation-container .k-animation-container.telerik-blazor {
            background: var(--colour-base-white);
            height: 100%;
        }

    .co-main-menu-container {
        margin-top: 4.5rem;
    }

    .co-main-menu.co-menu {
        overflow-y: auto;
    }

    x-main-container .k-animation-container:has(.co-main-menu-container ) {
        top: 0;
        bottom: 0;
        background-color: var(--colour-base-white);
    }

    x-top-header-bar x-globals {
        display: flex;
        flex-flow: row;
        column-gap: var(--default-grid-gap);
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: inherit;
        background: none;
        border: none;
    }

    x-main-container x-left-bar {
        display: grid;
        gap: 0;
        grid-template-areas:
            "x-navigation"
            "x-user";
        grid-template-rows: 1fr auto !important;
        border: none;
        position: inherit;
        z-index: auto;
        height: calc(100vh - var(--top-header-bar-height));
        background: none;
    }

    x-main-container {
        display: grid;
        grid-template-columns: var(--x-left-bar-current-width);
    }


    .x-main-container-left-bar-collapsed {
        --x-left-bar-current-width: var(--x-left-bar-collapsed-width);
    }

    x-left-bar x-user,
    x-left-bar x-navigation {
        width: var( --x-left-bar-current-width);
        background-color: var(--navigation-panel-background-color);
    }

    x-left-bar x-navigation {
        overflow-y: auto;
        z-index: auto;
    }

    .x-main-container-left-bar-collapsed x-left-bar x-user,
    .x-main-container-left-bar-collapsed x-left-bar x-navigation {
        width: var(--x-left-bar-collapsed-width);
    }



    x-content {
        max-height: 94vh;
        overflow: scroll;
    }

    .co-user-role-container {
        height: calc(100vh - 224px);
    }
}

@media (max-width: 768px) {
    .co-role-permission {
        grid-auto-flow: row;
        width: 100%;
        gap: 0.75rem;
    }

    .co-content-section .co-content-header {
        display: none;
    }

    .co-user-role-container .k-grid .k-table-th:nth-child(3) {
        color: #fff;
        cursor: no-drop;
        pointer-events: none;
    }

    .co-user-role-container .k-grid .k-table-th:nth-child(2) span {
        display: none;
    }

    /*#region Permission*/
    .co-role-permission-container .k-table-tbody .k-grouping-row.k-table-row,
    .co-role-permission-container .k-table-tbody .k-master-row {
        height: 3rem;
    }    

    .co-role-permission-container .co-grid-group-header .co-permission-selection-container,
    .co-role-permission-container .co-permission-selection-container {
        justify-content: end;
        width: auto;
    }

    .co-role-permission-container .co-grid-group-header .co-permission-selection-container {
        padding-right: .50rem;
    }

    .co-role-permission-container .co-permission-selection-container .co-dropdown-list .co-permission-icon {
        display: block;
    }

    .co-role-permission-container .co-permission-icon-container .co-permission-icon {
        display: none;
    }

    .co-role-permission-container .co-permission-selection-container .co-dropdown-list .k-input-inner {
        justify-content: end;
    }

    .co-role-permission-container .co-permission-selection-container .co-dropdown-list .k-input-button,
    .co-role-permission-container .co-permission-selection-container .co-permission-text {
        display: none;
    }

    .co-confirm-window-permission {
        width: 90% !important
    }

    .co-role-assignment-container td.k-table-td:has(input.k-checkbox-md) {
        text-align: right;
        padding-right: 0.5rem;
    }

    .co-grid-popup-window {
        width: 80% !important;
    }
}

@media (max-width: 575.98px) {
    .co-content-section .co-content-sub-header {
        display: flex;
        gap: var(--spacing-system-spacing-md) var(--spacing-system-spacing-xs);
        border-bottom: 1px solid var(--borders-default);
        background: var(--colour-base-white);
        align-items: flex-start;
        align-content: flex-start;
        flex-flow: column;
    }

    .co-display-button {
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

    .co-save-button {
        width: 100%;
        text-align: center;
    }

    .co-primary-button {
        width: 100%;
        text-align: center;
    }

    .co-confirm-box {
        width: 320px !important;
    }

    .co-permission-selection {
        width: 10rem !important;
        right: 3.2rem;
        left: auto !important;
    }

        .co-permission-selection .k-input-button {
        display: none;
    }

    /*#region user detail*/
    .co-save-button.co-save-hover,
    .co-save-button.co-save-hover:hover {
        border-color: var(--On-Surfaces-on-bg-medium-emphasis) !important;
        padding: 0.75rem 1.5rem !important;
    }


    .co-confirm-user-details .k-window-titlebar {
        padding: 0.438rem 1rem !important;
    }

    .co-primary-button.k-button.k-button-md {
        padding: 0.75rem 1.5rem !important;
    }
    /*endregion*/

    .co-confirm-window-permission .k-window-titlebar {
        padding: 0.438rem 1rem !important;
    }

    .refund-form .k-grid-cols-2 {
        display: block !important;
    }
}

@media (min-width: 300px) {
    .co-user-role-container {
        background: var(--on-surfaces-on-surface-main-verylow-emphasis);
        padding: var(--spacing-system-spacing-xs);
    }

        .co-user-role-container .k-grid .k-grid-header {
            border-style: none;
            border-bottom: 1px solid var(--borders-default);
            font-weight: 600;
        }

        .co-user-role-container .k-grid tr.k-master-row td {
            background-color: white !important;
            padding: 12px 16px;
            justify-content: space-between;
            border-bottom: 1px solid var(--borders-default);
        }

            .co-user-role-container .k-grid tr.k-master-row td.k-command-cell {
                text-align: right;
                border-style: none;
                border-bottom: 1px solid var(--borders-default);
            }

        .co-user-role-container .k-grid .k-table-th {
            background-color: white !important;
            padding: 12px 16px;
            border-style: none;
        }
}
/*#region Role Assignment */

.co-confirm-window-assignment .k-window-titlebar {
    padding: 0.438rem 1rem; /* 7px 16px*/
    height: 3.938rem; /*63px*/
}

.co-user-assignment.co-combobox .k-input-inner,
.co-user-assignment .co-combobox .k-input-inner,
.co-user-assignment .co-input .k-input-inner {
    padding: 0.5rem 0 0.5rem 0.75rem;
}

.k-combobox.co-combobox span.k-clear-value {
    display: none !important;
}


.co-role-assignment-grid-section .k-tabstrip-items .k-link {
    padding: 0.5rem 1rem 0.75rem 1rem !important;
}

.co-user-assignment.co-combobox-assignment .k-input-inner,
.co-user-assignment .co-combobox-assignment .k-input-inner,
.co-user-assignment .co-input .k-input-inner {
    padding: 0.5rem 0 0.5rem 0.75rem;
}

.co-role-assignment-container .k-grid {
    border-color: var(--borders-default) !important;
}

.k-combobox.co-combobox-assignment {
    border: none;
    background: var(--content-background-color);
}

    .k-combobox.co-combobox-assignment .k-button {
        border: none;
        background: var(--content-background-color);
        padding: 0.625rem 0.375rem 0.625rem 0.438rem;
    }

        .k-combobox.co-combobox-assignment .k-button:hover {
            background-color: var(--content-background-color) !important;
        }

    .k-combobox.co-combobox-assignment .k-svg-icon > svg {
        fill: var(--primary-brand-colour) !important;
    }


    .k-combobox.co-combobox-assignment span.k-clear-value {
        display: none !important;
    }

.context-menu {
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .context-menu .k-popup {
        box-shadow: none !important;
    }

        .context-menu .k-popup .k-menu.k-context-menu {
            display: flex !important;
            flex-flow: row;
            width: 100%;
            gap: 0.5rem;
            padding-left: 0;
            padding-right: 0;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: var(--content-background-color) !important;
        }

    .context-menu .k-item > .k-link:hover {
        color: var(--text-color) !important;
        background-color: var(--on-surfaces-on-surface-main-verylow-emphasis) !important;
    }


    .context-menu .k-popup .k-menu.k-context-menu .k-menu-link {
        padding: 0.75rem 1rem;
        box-shadow: none !important;
    }

        .context-menu .k-popup .k-menu.k-context-menu .k-menu-link:hover {
            box-shadow: none !important;
        }

    .context-menu .k-popup .k-menu:focus-visible {
        box-shadow: none !important;
    }
/*#endregion*/
.co-user-role .co-combobox .k-input-inner {
    padding: 0.438rem 0 0.438rem 0.813rem;
}

.co-user-role .k-combobox.co-combobox {
    gap: 0.75rem;
}

.co-stake-holder {
    grid-template-columns: 1fr 1.5fr;
}

.co-dropdown-min-width {
    min-width: 10rem;
}

.co-user-role-container .k-grid {
    border-color: var(--borders-default) !important;
}

.co-primary-button.k-button.k-button-md {
    padding: 0.75rem 2rem;
}

/*#region user detail*/

.co-user-detail .co-combobox .k-input-inner {
    padding: 0.5rem 0 0.5rem 0.75rem !important;
}

.co-confirm-user-details .k-window-title.k-dialog-title {
    padding: 0;
}

.co-confirm-user-details .k-window-titlebar {
    padding: 1.25rem 7.5rem 1.188rem 1rem;
}

/*endregion*/

.co-dropdown-phone-number {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: #fff;
    border-radius: 0.5rem
}

/*#region role assignment*/
.co-roles-grid-container .curr-grid-data .k-grid-aria-root .k-grid-header {
    display: none !important;
}

.co-roles-grid-container .custom-icons .k-grid-aria-root .k-grid-header {
    display: block;
}

.co-roles-grid-container .k-grid {
    border-color: #ffffff;
}

    .co-roles-grid-container .k-grid td {
        border-width: 0;
        border-bottom: 1px solid var(--borders-default);
    }

.k-grid-content {
    overflow-y: unset;
}

.co-roles-grid-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row,
.co-roles-grid-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row td:first-child,
.co-roles-grid-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row > td,
.co-role-permission-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row,
.co-role-permission-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row td:first-child,
.co-role-permission-container .k-grid .k-grid-container .k-grid-content .k-grid-table .k-master-row > td {
    border-color: var(--borders-default) !important;
    background-color: #FFFFFF;
    padding: .75rem 1rem .75rem 1.5rem;
}

.co-roles-grid-container .k-table-td.k-group-cell {
    background: var(--colour-base-white);
}

.co-roles-grid-container .k-header .k-checkbox-wrap {
        display: none;
    }

.co-roles-grid-container .k-grid .k-table .k-table-thead {
    background-color: #ffffff !important;
}

.co-roles-grid-container .k-grid-header {
    background-color: #ffffff;
    border-color: #ffffff;
    border-bottom: 1px solid var(--borders-default);
}

.co-roles-grid-container .k-grid th,
.co-roles-grid-container .k-grid td {
    padding: .75rem 1rem;
}

.co-roles-grid-container .k-grid-header .k-grid-header-menu {
    height: calc(1.5rem + 0.75rem + 15px);
}

.co-role-assignment-container .alert-primary {
    color: var(--On-Surfaces-on-bg-full-emphasis, #272B32);
    background-color: #E4F0F9;
    border-color: #E4F0F9
}

.co-role-assignment-text {
    color: #94A3B8;
    margin-left: 10px
}
/*#endregion*/

/*Header Body align*/
.k-grid-header, .k-grid-footer {
    -webkit-padding-end: 0 !important;
    padding-inline-end: 0 !important;
}

/*.k-chip-list-md .k-chip-solid .k-chip-content:has(.option-disabled) + .k-chip-actions {
        display: none;
}*/

.k-chip-list-md .k-chip-solid:has(.option-disabled) {
    background-color: #80808069;
}

.no-data-panel {
    padding: 1rem;
    /*margin: 1rem;*/
    background-color: var(--surfaces-primary-primary);
    color: white;
    width: 100%;
}

.k-breadcrumb-root-link {
    text-decoration: none;
    gap: 1.5rem;
    padding-inline: 0 !important;
    padding-right: 0.75rem !important;
    font: var(--px18-normal);
}

.k-breadcrumb, .k-breadcrumb-container, .k-breadcrumb-item, .k-breadcrumb-link {
    font: var(--px18-normal);
}

.co-grid-name-column-min-width {
    min-width: 15rem;
}

.co-grid-column-centered-text {
    text-align: center !important;
}

.co-grid-column-for-support-only {
    color: var(--palette-04) !important;
}

.co-gap {
    gap: .5rem;
}

.co-gap-1 {
    gap: 1rem;
}

.co-gap-2 {
    gap: 1.5rem;
}

.co-gap-3 {
    gap: 2.5rem;
}

.co-menu-category-section .co-section-body .k-form .k-form-fieldset {
    margin: 0;
}

.co-menu-category-section .co-section-body .k-form .k-color-picker, .k-colorpicker {
    width: 100%;
    border-color: #E4E4E4;
    height: auto !important;
}

.co-menu-category-section .co-section-body .k-picker-solid:hover {
    border-color: #E4E4E4;
    color: #272B32 !important;
    background-color: #F8F8F8;
}


.co-info-text {
    color: var(--text-icons-low-emphasis, #B7B9BB);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

.w-max-content {
    width: max-content;
}

.co-adjust-prices {
    right: 0;
    transform: none;
    top: 0;
    background-color: #ffffff;
}

.co-item-setting-window {
    background-color: #FFFFFF;
}

.co-tooltip-edit {
    color: var(--text-icons-full-emphasis, #272B32);
    font-family: 'Roboto';
    font-size: 16px;
    border: 1px solid #E4E4E4;
}

    .co-tooltip-edit .k-tooltip,
    .co-tooltip-edit .k-tooltip .k-callout {
        background-color: #ffffff;
    }

        .co-tooltip-edit .k-tooltip .k-callout {
        display: none;
    }

.co-width-100-percent {
    width: 100%;
}

.co-action-button {
    width: 8rem;
}

.no-inline-padding {
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

/* Where we have a grid in a card or in a tabstrip, we typically want the grid to fill the container. Both card and tabstrip content have default padding so we need to get around it for the grid */
.k-card-body > .k-grid, .k-tabstrip-content > .co-grid-content > .k-grid {
    /* This commented out code here was causing a problem with the ingredients grid in manufacture. It does not make sense anyway, so commenting out for now to see if anything else breaks before removing */
    /*margin-left: -1rem;
    width: calc(100% + 2rem);*/
    padding-block: 0 !important;
    outline-offset: 0;
    outline-style: none;
}

.k-card-title label {
    color: var(--Colour-Gray-Scale-grey-1, #333);
    font-feature-settings: 'liga' off, 'clig' off;
    /* Body 02/Medium 14 */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    margin-bottom: 0;
    align-content: center;
}

.co-card-header-filters {
    display: flex;
    column-gap: 1rem;
}

/*override pagination button color */
.co-custom-pagination .k-button,
.co-custom-pagination .k-button:hover {
    border: 1px solid var(--Borders-border-grey);
    color: var(--palette-14);
    font-family: Roboto;
    background-color: transparent;
}
/* for Search icon in text box*/
.tb-icon-container {
    position: relative;
}

.tb-icon-container .k-input.k-input-solid {
    border-radius: 8px;
}

.tb-icon-container .k-svg-icon {
    position: absolute;
    z-index: 2;
    left: 0.75em;
    top: 0.188rem
}

.tb-icon-container .k-textbox input,
.k-floating-label-container.k-empty:not(.k-focus) .k-label {
    padding-left: 2.125em !important;
}
/*for hide button in numeric text box*/
.co-form-numeric-text .k-input .k-button.k-button-md {
        display: none;
    }

.co-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*border-bottom: 1px solid var(--Borders-Line-02, #E4E4E4);*/
    padding-bottom: 0.5rem;
}

.co-panel > .k-flex-row {
    display: flex;
    min-height: 1.5rem;
    justify-content: space-between;
}

.co-panel > .k-flex-row > div {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.grid-with-pointer-cursor .k-table-row.k-master-row {
    cursor: pointer;    
}

.co-form-layout div {
    display: flex;
    align-items: center;
    gap: var(--default-grid-gap)
}

    .co-form-layout div label:first-child {
        text-align: right;
        margin-bottom: 0;
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }

/* This Kendo override is intended to make the icon in grid buttons twice the original size. When stable, this will go into the theme */
.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg {
    width: 2rem;
    height: 2rem;
}

.k-form .k-form-field {
    justify-content: flex-start; /* This is set in the theme, but it won't export for some reason. Have to override it. May need config for Horiz form item */
}

.co-form-label {
    justify-content: right;         
}

.co-form .k-form-legend {
    display: none !important;
}

.co-form .k-tabstrip-content {
    padding-block: inherit;
    padding-inline: inherit;
}

.co-form .k-form-fieldset {    
    padding: 0;
    margin: 0;
}

/* Struggling to force the font for the inactive tab item. Overriding for now. Without this, it is 16px which is too big. */
.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset .k-item.k-tabstrip-item .k-link {
    font-family: Roboto;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0px;
}

/*.k-form-layout.k-d-grid {    
    column-gap: 1.5rem;
}*/

.k-form-horizontal .k-form-field-wrap {
    max-width: inherit; /* Components are not filling the available space. Default in the theme is */    
}

/* For TelerikGrids with Center or Right aligned headers and text, we need to set the header labels correctly. Use k-text-center or k-text-right in HeaderClass to have these take effect */
.k-grid.k-grid-md .k-table-thead .k-table-row .k-header.k-table-th.k-text-center,
.k-grid.k-grid-md .k-grid-header .k-table-row .k-header.k-table-th.k-text-center {
    padding-left: 0;    
}

    .k-grid.k-grid-md .k-table-thead .k-table-row .k-header.k-table-th.k-text-center .k-cell-inner .k-link,
    .k-grid.k-grid-md .k-grid-header .k-table-row .k-header.k-table-th.k-text-center .k-cell-inner .k-link {
        justify-content: center;        
    }

.k-grid.k-grid-md .k-table-thead .k-table-row .k-header.k-table-th.k-text-right,
.k-grid.k-grid-md .k-grid-header .k-table-row .k-header.k-table-th.k-text-right {
    padding-right: 0.5rem;
}

    .k-grid.k-grid-md .k-table-thead .k-table-row .k-header.k-table-th.k-text-right .k-cell-inner .k-link,
    .k-grid.k-grid-md .k-grid-header .k-table-row .k-header.k-table-th.k-text-right .k-cell-inner .k-link {
        justify-content: right;        
    }

/* Target a label that immediately follows a k-checkbox-wrap element */
.k-checkbox-wrap + label {
    margin-bottom: 0;
    margin-top: 0.25rem;    
}

/* Update notification styles */
.update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-brand-colour, #007bff);
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.update-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.update-notification button {
    background-color: white;
    color: var(--primary-brand-colour, #007bff);
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.update-notification button:hover {
    background-color: #f0f0f0;
}

.co-grid-no-side-margins-or-borders-in-card {
    margin-left: -1rem;
    margin-right: -1rem;
    border: none !important;
    outline-width: 0;
}