/* Variables */

:root {
    --mud-drawer-width-left: 280px !important;
    --primary-color: #4F41DE;
    --primary-color-hover: #6C61E4;
    --primary-color-light: #8A80E9;
    --primary-color-100: #E2DFFA;
    --primary-color-200: #C4C0F4;
    --primary-color-700: #2D1FB5;
    --secondary-color: #aab9c5;
    --secondary-color-50: #F2F6FA;
    --secondary-color-100: #E7EBEF;
    --secondary-color-200: #DAE1E7;
    --secondary-color-300: #CED7DE;
    --secondary-color-500: #B6C3CD;
    --secondary-color-600: #92A5B5;
    --secondary-color-700: #7991A4;
    --secondary-color-1000: #323F49;
    --secondary-color-light: #F3F4F6;
    --success-color: #a4f4e7;
    --success-color-200: #15B097;
    --success-color-300: #0B7B69;
    --success-color-light: #CAF4EE;
    --warning-color: #F4C790;
    --warning-color-200: #EDA145;
    --warning-color-300: #CC7914;
    --warning-color-light: #f6ebdb;
    --error-color-100: #E4626F;
    --error-color-200: #C03744;
    --error-color-300: #8C1823;
    --error-color-light: #FEE4E2;
    --input-color-text: #323F49;
    --base-black: #0a0a0b;
    --base-white: #fafafa;
    --select-color: #F2F6FA;
    --box-shadow-color: rgba(74, 94, 109, 0.5);
    --font-size-base: 0.875rem; /*16 -> 14*/
    --font-size-sm: 0.7rem; /*12 -> 11.2*/
    --font-size-ml: 1.3rem; /*24 -> 20.8*/
    --font-size-l: 1.8rem; /*32 -> 28.8*/

    --loyalty-primary: #00DDCE;
    --loyalty-primary-light: #ccf8f5;
    --loyalty-secondary: #00103C;
    --loyalty-secondary-light: #003959;
    --loyalty-secondary-outline: rgba(0,16,60,0.2); 
    /*--loyalty-primary-alt: #F66B1A;
    --loyalty-secondary-alt: #FFF0E7;*/
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--base-black);
}

.full-max-height {
    height: auto !important;
    max-height: calc(100vh - 114px) !important;
}

    .full-max-height.mud-table {
        height: 100% !important;
    }

    .full-max-height .mud-table-container {
        max-height: calc(100% - 70px) !important; /* -90px old value */
        height: auto !important;
        overflow-y: auto;
    }

    .full-max-height.full-max-height-datalist {
        max-height: calc(100vh - 240px) !important;
    }

    .full-max-height-integration,
    .full-max-height.full-max-height-integration {
        max-height: calc(100vh - 275px) !important;
    }

    .full-max-height.full-max-height-organization {
        max-height: calc(100vh - 10rem) !important; /*-200px*/
    }

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

.position-relative {
    position: relative !important;
}

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

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

.ba-0 {
    border: 0 !important;
}

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

.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999;
}

/* Base Controls */
/* --- inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--secondary-color-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 60px);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    width: auto;
}

.mud-input-control-input-container:has(.mud-disabled) {
    opacity: 0.6;
}

.mud-input-control .mud-input,
.mud-picker .mud-input {
    //height: 48px;
    height: 2.5rem;
}

.text-area.mud-input-control .mud-input {
    //min-height: 48px;
    min-height: 2.5rem;
    height: auto;
}

.mud-input-control .mud-input {
    //height: 48px;
    height: 2.5rem;
}

    .mud-input-control .mud-input > input.mud-input-root {
        color: var(--secondary-color-1000);
        font-size: var(--font-size-base);
        font-weight: 500;
        padding: 0 0.85rem;
        //height: 48px;
        height: 2.5rem;
    }

        .mud-input-control .mud-input > input.mud-input-root::placeholder,
        .mud-input-control .mud-input > input.mud-input-root::-ms-input-placeholder {
            color: var(--secondary-color-600);
            opacity: 1;
        }

.mud-input.mud-input-outlined {
    border-radius: 12px !important;
}

    .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: 12px !important;
        border-color: var(--secondary-color-600);
    }

    .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-color: var(--primary-color);
    }

    .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
        border-width: 1px;
        border-color: var(--secondary-color-600);
        box-shadow: 0 0 0 3px #DEDBFF;
    }

.text-right input {
    text-align: right !important;
}

.error-input .mud-input-outlined-border {
    border-color: var(--error-color-100) !important;
}

.error-input-message {
    position: absolute;
    left: 0;
    bottom: -18px;
    color: var(--error-color-100);
}

.form-field-error {
    color: var(--error-color-100);
}

.read-only-field .mud-input-control-input-container {
    opacity: 1 !important;
}

.read-only-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--secondary-color-600) !important;
}

.read-only-field .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-primary) !important;
}

.read-only-field .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    box-shadow: none;
}

.read-only-field,
.read-only-field *:hover {
    cursor: default !important;
}

.mud-select:has(.read-only-field.partial-disabled),
.mud-select:has(.read-only-field.partial-disabled) * {
    cursor: default !important;
}

.read-only-field.partial-disabled {
    opacity: 0.6;
}

/* --- input label */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--font-size-base);
    //margin-top: 1px;
}

.mud-input-label-outlined {
    padding: 0 !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -10px) scale(0.75);
    padding: 0 5px !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 1.125rem;
}

/* --- buttons */
.mud-button {
    height: 36px;
    min-width: 124px;
    border-radius: 12px;
    text-transform: none;
}

    .mud-button.btn-size-xl {
        //height: 48px;
        height: 2.75rem; /*44px*/
        padding: 0.75rem 1rem;
        line-height: 1.375rem;
    }

    .mud-button.btn-size-m {
        //height: 40px;
        height: 2.5rem !important; /*40*/
        padding: 10px 16px !important;
        line-height: 22px !important;
    }

        .mud-button.btn-size-m .mud-button-label {
            font-size: 14px;
        }

    .mud-button span {
        font-family: "Manrope", sans-serif;
        //font-size: var(--font-size-base);
        font-size: 0.875rem;
    }

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

    .mud-button-outlined.mud-button-outlined-primary:hover {
        border-color: var(--primary-color-700);
        background: var(--primary-color-700);
    }

    .mud-button-outlined.mud-button-outlined-primary:focus {
        box-shadow: 0 0 0 3px #DEDBFF;
    }

    .mud-button-outlined.mud-button-outlined-primary:disabled {
        background: var(--primary-color-200);
        border-color: var(--primary-color-200);
        color: #fff !important;
    }

.mud-icon-button:hover,
.mud-icon-button:focus-visible {
    background: var(--secondary-color-100);
}

.add-button svg,
.upload-button svg {
    display: none;
}

.add-button .mud-button-icon-end,
.upload-button .mud-button-icon-end {
    width: 30px;
}

.add-button::before {
    content: url('../img/add.png');
    position: absolute;
    top: 0.625rem;
    right: 1rem;
}

.upload-button::before {
    content: url('../img/upload.svg');
    position: absolute;
    top: 0.625rem;
    right: 1rem;
}

.upload-button[disabled]::before {
    opacity: 0.3;
}

/* ---input icons */
.search-input .mud-input-adornment,
.date-input .mud-input-adornment {
    width: 22px;
}

.search-input .mud-input-adornment-end svg,
.date-input .mud-icon-button-edge-end[aria-label="Open Date Picker"] svg {
    display: none;
}

.search-input::before {
    content: url('../img/search.svg');
    position: absolute;
    top: 0.7rem;
    left: 1.125rem;
    height: 20px;
}

.mud-input-control.search-input .mud-input > input.mud-input-root {
    padding-left: 50px;
}

.mud-input-control.search-input .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-control.search-input .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-26px, -4px) scale(0.75);
}

.search-input .mud-input-label {
    margin: -5px 0 0 40px !important;
}

.date-input .mud-icon-button-edge-end[aria-label="Open Date Picker"] {
    position: absolute;
    right: 19px;
    top: 1px;
}

    .date-input .mud-icon-button-edge-end[aria-label="Open Date Picker"]::before {
        content: url('../img/calendar.png');
    }

.date-input button {
    width: 38px;
    height: 38px;
}

.date-input .mud-icon-button-size-small.mud-icon-button-edge-end[aria-label="Clear"] {
    margin-right: 10px;
}

button[aria-label="Clear"] {
    color: var(--secondary-color-600);
}

/* ---date picker */
.mud-picker-datepicker-toolbar {
    display: none;
}

.mud-picker-paper {
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--secondary-color-600);
}

    .mud-picker-paper * {
        font-family: "Manrope", sans-serif !important;
    }

.mud-picker-calendar-header-switch {
    padding: 8px 8px 6px 8px;
}

    .mud-picker-calendar-header-switch .mud-icon-button {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        border: 1px solid var(--secondary-color-600);
    }

        .mud-picker-calendar-header-switch .mud-icon-button .mud-icon-button-label svg {
            display: none;
        }

        .mud-picker-calendar-header-switch .mud-icon-button:first-of-type .mud-icon-button-label::before {
            content: url('../img/chevron-left.png');
            margin-left: -2px;
            margin-top: -1px;
        }

        .mud-picker-calendar-header-switch .mud-icon-button:last-of-type .mud-icon-button-label::before {
            content: url('../img/chevron-right.png');
            margin-right: -2px;
            margin-top: -1px;
        }

    .mud-picker-calendar-header-switch .mud-picker-slide-transition p,
    .mud-picker-calendar-header-switch .mud-picker-slide-transition:hover p {
        color: var(--base-black);
        font-weight: 700 !important;
        font-size: 14px;
        text-transform: capitalize;
    }

.mud-picker-calendar-transition {
    margin-top: 6px;
}

.mud-picker-paper .mud-day-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--secondary-color-700);
    text-transform: capitalize;
}

.mud-picker-paper .mud-selected {
    background-color: var(--primary-color) !important;
}

.mud-picker-paper .mud-current {
    border-color: var(--primary-color) !important;
    background: transparent !important;
    color: var(--primary-color) !important;
}

.mud-picker-month-container {
    padding: 0 8px;
}

.mud-picker-month {
    border-radius: 12px;
}

.mud-picker-year-container .mud-picker-year {
    border-radius: 12px;
    margin: 0 auto;
    width: calc(100% - 32px);
}

.mud-picker-month h5,
.mud-picker-month h6,
.mud-picker-year h5,
.mud-picker-year h6 {
    font-size: 14px !important;
}

.mud-picker-month:has(.mud-picker-month-selected),
.mud-picker-month:has(.mud-picker-month-selected):hover,
.mud-picker-year:has(.mud-picker-year-selected),
.mud-picker-year:has(.mud-picker-year-selected):hover {
    background: var(--primary-color);
}

    .mud-picker-month:has(.mud-picker-month-selected) h5,
    .mud-picker-month:has(.mud-picker-month-selected):hover h5,
    .mud-picker-year:has(.mud-picker-year-selected) h5,
    .mud-picker-year:has(.mud-picker-year-selected):hover h5,
    .mud-picker-year:has(.mud-picker-year-selected) h6,
    .mud-picker-year:has(.mud-picker-year-selected):hover h6 {
        color: #fff !important;
    }

/* ---dropdown */
.form-dd .mud-input-adornment svg {
    display: none;
}

.form-dd .mud-input-adornment::before {
    content: url('../img/dropdown-arrow-alt.png');
    margin-right: 6px;
    margin-top: -2px;
}

.mud-select:has(~ .mud-overlay) .form-dd .mud-input-adornment::before {
    content: url('../img/dropdown-arrow-up-alt.png');
}

.mud-input-control.form-dd.primary-dd .mud-input,
.mud-input-control.form-dd.primary-dd .mud-input > input.mud-input-root {
    color: var(--primary-color);
    font-weight: 500;
}

.form-dd.primary-dd .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--primary-color);
}

.form-dd .mud-input-slot {
    font-size: var(--font-size-base) !important;
    padding: 0 0.85rem !important;
    line-height: 2.75rem !important;
    height: 2.75rem !important;
}

.mud-popover {
    //z-index: 13020 !important;
}

    .mud-popover:has(.dd-select-item) {
        box-shadow: none;
        border: 1px solid var(--secondary-color-600);
        border-radius: 12px;
        margin-top: 0.5rem;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
        //box-sizing: content-box;
        padding: 0.5rem 0.25rem 0.5rem 0.75rem;
        min-width: fit-content;
        overflow: hidden;
    }

        .mud-popover:has(.dd-select-item) .mud-list {
            //overflow: hidden;
            padding-right: 8px;
            max-height: calc(300px - 20px);
        }

    .mud-popover:has(.dd-select-item.dd-select-operator) .mud-list {
        padding-right: 8px;
        max-height: calc(300px - 16px);
        min-height: fit-content;
    }

    .mud-popover:has(.dd-select-item) .mud-list-item.mud-primary-hover,
    .mud-popover:has(.dd-select-item) .mud-list-item.mud-list-item-clickable:hover {
        background: var(--secondary-color-100) !important;
    }

    .mud-popover:has(.dd-select-item) .dd-select-item {
        padding: 8px;
        border-radius: 12px;
        height: 2.15rem;
        margin: 0 auto 0.3rem auto;
        //width: calc(100% - 24px);
        //white-space: nowrap;
        //overflow: hidden;
        //text-overflow: ellipsis;
    }

        .mud-popover:has(.dd-select-item) .dd-select-item:last-of-type {
            margin-bottom: 0;
        }

.dd-select-item p {
    font-family: "Manrope", sans-serif;
    font-size: var(--font-size-base) !important;
    font-weight: 500;
    color: var(--secondary-color-1000);
}

.dd-select-item.mud-list-item-clickable:hover {
    background: transparent;
}

.mud-input-control.form-dd > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--secondary-color-600);
    font-weight: 400;
}

.form-dd .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--secondary-color-600);
}

.form-dd .mud-icon-button-edge-end[aria-label="Clear"] {
    margin-right: 10px;
}

/* ---switch */

.custom-switch .mud-switch-track {
    width: 2rem;
    height: 1.125rem;
    margin: -1px 0px 0 -1px;
}

    .custom-switch .mud-switch-track.mud-primary {
        background-color: var(--primary-color) !important;
        opacity: 1;
    }

.custom-switch .mud-switch-thumb-medium {
    color: #fff;
    width: 0.875rem;
    height: 0.875rem;
    margin: 4px 0px 0 -1px;
}

.custom-switch .mud-switch-track.mud-default {
    background-color: #B5B3B3 !important;
    opacity: 1;
}

.custom-switch .mud-default-text .mud-switch-thumb-medium {
    margin: 4px 0 0 4px !important;
}

.custom-switch .mud-switch-label-medium {
    font-family: "Manrope", sans-serif;
    font-size: var(--font-size-base) !important;
}

.custom-switch .mud-icon-button:hover {
    background: transparent !important;
}

.tenant-switch .custom-switch {
    float: right;
}

    .tenant-switch .custom-switch .mud-switch {
        margin: 0;
    }

/* ---checkbox */
.custom-checkbox .mud-button-root {
    width: 52px !important;
    line-height: 18px !important;
}

.dialog-default .custom-checkbox .mud-button-root {
    width: 47px !important;
}

.custom-checkbox .mud-icon-root {
    color: var(--mud-palette-primary) !important;
    width: 20px !important;
    line-height: 18px !important;
}

/* ---radiobutton */

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

    .custom-radio .mud-button-root {
        width: 46px;
        height: 46px;
    }

    .custom-radio .mud-icon-root {
        width: 16px !important;
        color: var(--primary-color) !important;
    }

    .custom-radio .mud-radio-icon-checked {
        left: 3px;
    }

/* ---tooltip */

.custom-tooltip {
    background: var(--primary-color-100) !important;
    color: var(--secondary-color-1000) !important;
    border-color: var(--primary-color-100) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    padding: 6px !important;
    border-radius: 8px !important;
}

    .custom-tooltip::after {
        border-color: var(--primary-color-100) transparent transparent transparent !important;
    }

    .custom-tooltip.desc-tooltip {
        max-width: 450px !important;
        text-align: left !important;
    }

body:has(.loyalty-theme) .custom-tooltip {
    background: var(--loyalty-primary-light) !important;
}

    body:has(.loyalty-theme) .custom-tooltip::after {
        border-color: var(--loyalty-primary-light) transparent transparent transparent !important;
    }

/* Grid */

.mud-table-cell {
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

.mud-table-row .mud-table-cell:first-of-type:has(button[disabled]) .mud-icon-button-label {
    display: none;
}

.mud-table-cell:has(.promotion-description) {
    color: var(--secondary-color-700) !important;
    cursor: text;
}

.mud-table-body .mud-table-row .mud-table-cell:first-of-type .mud-icon-button-label svg {
    //display: none;
    opacity: 0;
}

.mud-table-body .mud-table-row .mud-table-cell:first-of-type .mud-icon-button-label::before {
    content: url(../img/chevron-right.svg);
    position: absolute;
    top: 6px;
    left: 8px;
    transition: all 0.3s ease-in-out;
}

.mud-table-body .mud-table-row:has(+.mud-table-row .promotion-description) .mud-table-cell:first-of-type .mud-icon-button-label::before {
    transform: rotate(90deg);
    left: 4px;
}

.grid-container {
    position: relative;
}

    .grid-container .mud-table-container {
        border: 1px solid var(--secondary-color-300);
        border-radius: 12px;
    }

    .grid-container .mud-data-grid .mud-table-cell .column-header {
        align-items: start;
        justify-content: start;
    }

        .grid-container .mud-data-grid .mud-table-cell .column-header .sortable-column-header {
            width: auto;
        }

        .grid-container .mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
            opacity: 1;
        }

        .grid-container .mud-data-grid .mud-table-cell .column-header .mud-icon-root {
            color: var(--secondary-color-600);
        }

    .grid-container.roles-grid .mud-table-container,
    .grid-container.owners-grid .mud-table-container {
        border: 0;
        border-radius: unset;
    }

    .grid-container.roles-grid .mud-table-head,
    .grid-container.owners-grid .mud-table-head {
        display: none;
    }

    .grid-container.roles-grid .mud-table-cell,
    .grid-container.owners-grid .mud-table-cell {
        border: 0;
        font-weight: 500;
        height: 50px;
        padding: 0 8px;
    }

    .grid-container.owners-grid .mud-table-cell {
        height: 46px;
    }

    .grid-container.roles-grid .mud-table-row:hover,
    .grid-container.owners-grid .mud-table-row:hover {
        background: transparent;
        cursor: default;
    }

.mud-table-toolbar {
    height: 2.75rem;
    margin-bottom: 1rem;
    padding: 0;
}

.empty-grid .mud-table-container {
    border: 0;
    border-radius: 0;
}

.empty-grid .mud-table-root {
    border: 1px solid var(--secondary-color-300);
    border-radius: 12px 12px 0 0;
}

.empty-grid th.mud-table-cell {
    border-radius: 12px 12px 0 0 !important;
}

.mud-table-root .mud-table-head .mud-table-cell {
    border-bottom-color: var(--primary-color);
}

.mud-data-grid .mud-table-cell .column-header {
    color: var(--secondary-color-600);
    font-size: var(--font-size-base);
}

.mud-table-row:hover {
    background: var(--select-color);
    cursor: pointer;
}

.grid-container tbody tr:last-of-type .mud-table-cell {
    border-bottom: 0;
}

.mud-table-cell {
    height: 3.1rem; /*56*/
    padding: 0.7rem 1.3rem;
    border-bottom: 1px solid var(--secondary-color-300);
    font-size: var(--font-size-base);
}

.mud-table-root .mud-table-body .mud-table-cell {
    color: var(--secondary-color-1000);
}

.mud-table-cell:has(.grid-button) {
    padding: 0;
}

.grid-button {
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    margin: 0 10px;
}

    .grid-button:hover {
        background: var(--secondary-color-100);
    }

    .grid-button[disabled] {
        opacity: 0.3;
    }

    .grid-button img {
        //width: 19px !important;
    }

.grid-action-icon {
    vertical-align: middle;
}

.grid-toolbar-item {
    margin: 0 12px 0 0;
    max-width: 412px;
}

    .grid-toolbar-item.search-input {
        max-width: 250px;
    }

        .grid-toolbar-item.search-input.loyalty-filter-input {
            max-width: 100%;
            margin: 0;
        }

.loyalty-filter-input .mud-input.mud-input-outlined {
    //height: 3rem;
}

.loyalty-filter-input .mud-input-label {
    //line-height: 1.5rem !important;
}

.loyalty-filter-input.search-input::before {
    //top: 0.9rem;
}

.grid-toolbar-item.date-input {
    max-width: 220px;
}

.grid-toolbar-item.integration-search-input {
    //max-width: 372px;
}

#dateValidFrom,
#dateValidTo {
    margin-top: 60px;
}

input#dateValidFrom,
input#dateValidTo {
    margin-top: 0;
}

.no-grid-items {
    text-align: center;
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
}

    .no-grid-items.no-members {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .no-grid-items img {
        margin: 0 auto 24px auto;
    }

    .no-grid-items h3 {
        font-size: 18px;
        color: var(--secondary-color-1000);
        margin: 0 0 32px 0;
    }

.mud-table-pagination-toolbar {
    border: 0;
    padding: 0;
}

.mud-table-pagination-spacer {
    display: none;
}

.mud-table-pagination-caption {
    padding: 0;
    font-family: "Manrope", sans-serif;
    color: #718096;
    font-weight: 600;
    font-size: 14px;
}

.mud-table-pagination-select {
    width: 62px;
    max-width: 70px;
    height: 2.2rem;
    border: 1px solid var(--secondary-color-300);
    padding: 1px 0px;
    border-radius: 12px;
}

    .mud-table-pagination-select .mud-input {
        text-align: center;
    }

    .mud-table-pagination-select .mud-input-slot {
        color: #111827 !important;
        font-weight: 600 !important;
        font-size: 0.78rem !important;
    }

    .mud-table-pagination-select svg {
        display: none;
    }

    .mud-table-pagination-select .mud-input-adornment::after {
        content: url('../img/chevron-down-sm.png');
        position: absolute;
        top: 5px;
        right: 12px;
    }

.mud-table-pagination-toolbar .mud-button-root[_bl_13] svg,
.mud-table-pagination-toolbar .mud-button-root[_bl_14] svg,
.mud-table-pagination-toolbar .mud-button-root[_bl_15] svg,
.mud-table-pagination-toolbar .mud-button-root[_bl_16] svg {
    opacity: 0;
}

.mud-table-pagination-toolbar .mud-button-root[disabled] {
    opacity: 0.4;
}

.mud-table-pagination-actions button {
    width: 38px;
    height: 38px;
}

    .mud-table-pagination-actions button svg {
        display: none;
    }

    .mud-table-pagination-actions button .mud-icon-button-label::after {
        top: 2px;
        position: relative;
    }

    .mud-table-pagination-actions button:first-of-type .mud-icon-button-label::after {
        content: url('../img/pagination-first.png');
        //position: absolute;
    }

    .mud-table-pagination-actions button:nth-child(2) .mud-icon-button-label::after {
        content: url('../img/pagination-left.png');
        //position: absolute;
    }

    .mud-table-pagination-actions button:nth-child(3) .mud-icon-button-label::after {
        content: url('../img/pagination-right.png');
        //position: absolute;
    }

    .mud-table-pagination-actions button:nth-child(4) .mud-icon-button-label::after {
        content: url('../img/pagination-last.png');
        //position: absolute;
    }

.mud-table-cell:has(.grid-row-description) {
    max-width: 28vw !important;
    text-overflow: unset;
}

.grid-row-description {
    display: block;
    max-width: 30vw !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* App Bar */
.mud-appbar {
    //height: 80px;
    height: 3.75rem;
    background: transparent;
    color: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--secondary-color-200);
}

    .mud-appbar h5 {
        font-family: "Manrope", sans-serif;
        color: var(--primary-color);
        font-weight: 700;
        //font-size: var(--font-size-l);
        font-size: 1.55rem;
    }

    .mud-appbar .mud-toolbar {
        //height: 80px;
        height: 3.75rem;
        padding: 0 1.1rem;
    }

.user-main-dropdown {
    width: 68px;
    height: 40px;
    background: var(--select-color);
    border-radius: 2rem;
    border: 0;
}

    .user-main-dropdown .mud-menu-activator {
        display: block !important;
        width: 100%;
        height: 40px;
        border-radius: 32px;
        padding: 4px;
    }

    .user-main-dropdown .dropdown-icon {
        margin: 6px 0 0 0;
        display: inline-block;
        height: 20px;
    }

        .user-main-dropdown .dropdown-icon .dd-arrow-up,
        .mud-menu.user-main-dropdown:has(.mud-overlay) .dropdown-icon .dd-arrow-down {
            display: none;
        }

.mud-menu.user-main-dropdown:has(.mud-overlay) .dropdown-icon .dd-arrow-up {
    display: block;
}

.dd-arrow-down,
.dd-arrow-up {
    height: 20px;
    width: 20px;
}

.dd-arrow-up {
    //margin-top: 7px;
    transform: rotate(180deg);
}

.mud-popover:has(.user-info-label) {
    border-radius: 12px;
    margin-top: 8px;
    max-width: 1000px;
    min-width: 100px;
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.15);
}

    .mud-popover:has(.user-info-label) .mud-list {
        padding: 1rem 0.8rem 0.5rem 0.8rem;
    }

.user-info-label {
    width: 100%;
    height: 35px;
    width: 100%;
    border-bottom: 1px solid var(--secondary-color-200);
    margin-bottom: 6px;
    box-sizing: content-box;
    padding: 0 0 16px 0;
}

.user-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    text-align: center;
    vertical-align: top;
}

.user-info {
    width: calc(100% - 48px);
    height: 35px;
    display: inline-block;
    padding-left: 0.5rem;
}

    .user-info h4 {
        width: 100%;
        font-weight: 500;
        color: var(--secondary-color-1000);
        font-size: var(--font-size-base);
        line-height: 19.2px;
        margin: 0;
        white-space: nowrap;
    }

    .user-info small {
        font-size: var(--font-size-sm);
        font-weight: 400;
        color: var(--secondary-color-600);
        line-height: 14.4px;
    }

.logout-button {
    padding: 0;
    width: 100%;
    text-align: left;
    border-radius: 0;
}

    .logout-button img {
        margin-right: 8px;
    }

.logout-icon {
    width: 20px;
    height: 20px;
    background: url('../img/logout-alt.svg');
    margin-right: 8px;
}

.logout-button:hover .logout-icon {
    background: url('../img/logout-hover.svg');
}

.logout-button span {
    justify-content: left;
    font-size: var(--font-size-base);
    color: var(--secondary-color-1000);
}

.logout-button:hover {
    background: transparent;
}

    .logout-button:hover span {
        color: var(--primary-color);
    }

.current-tenant-field {
    height: 40px;
    background: var(--select-color);
    border-radius: 32px;
    margin: 0 32px 0 0;
    max-width: max-content;
    padding: 8px 16px;
    font-size: var(--font-size-base);
}

    .current-tenant-field div.mud-input-slot.mud-input-root {
        font-size: var(--font-size-base);
    }

    .current-tenant-field .mud-input.mud-input-underline:before,
    .current-tenant-field .mud-input.mud-input-underline:after {
        display: none;
    }

    .current-tenant-field .mud-input {
        margin: 0 !important;
    }

    .current-tenant-field .mud-input-slot {
        cursor: default;
        padding: 0 !important;
    }

.change-organization-dd {
    height: 40px;
    background: var(--select-color);
    border-radius: 32px;
    margin: 0 1rem 0 0;
}

    .change-organization-dd .mud-input-control-input-container,
    .change-organization-dd.mud-input-control .mud-input {
        height: 40px;
    }

    .change-organization-dd .mud-input > input.mud-input-root-outlined,
    .change-organization-dd div.mud-input-slot.mud-input-root-outlined {
        padding: 8px 16px;
        margin-top: 1px;
    }

    .change-organization-dd .mud-input.mud-input-outlined .mud-input-outlined-border {
        display: none;
    }

    .change-organization-dd .mud-input-slot {
        font-size: var(--font-size-base) !important;
        line-height: 1.125rem !important;
    }

.custom-dd {
    padding-right: 16px;
}

    .custom-dd .mud-input-slot {
        margin-right: 10px !important;
    }

    .custom-dd .mud-input-adornment svg {
        display: none;
    }

    .custom-dd .mud-input-adornment::after {
        content: url('../img/chevron-down.svg');
        position: absolute;
        right: 0;
        height: 20px;
    }

.mud-select:has(~ .mud-overlay) .custom-dd .mud-input-adornment::after {
    //content: url('../img/dropdown-arrow-up.png');
    transform: rotate(180deg);
}

.mud-popover:has(.select-tenant-item) {
    border-radius: 12px;
    margin-top: 8px;
    max-width: max-content !important;
    min-width: 100px;
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.15);
    padding: 0.8rem 0.8rem 0.8rem 0.8rem;
}

    .mud-popover:has(.select-tenant-item) .mud-list,
    .mud-popover:has(.select-tenant-item) .mud-list-item {
        padding: 0;
    }

    .mud-popover:has(.select-tenant-item) .mud-list-item {
        padding: 8px;
        border-radius: 12px;
        height: 35px;
        margin-bottom: 0.3rem;
    }

        .mud-popover:has(.select-tenant-item) .mud-list-item:last-of-type {
            margin-bottom: 0;
        }

        .mud-popover:has(.select-tenant-item) .mud-list-item.mud-primary-hover,
        .mud-popover:has(.select-tenant-item) .mud-list-item.mud-list-item-clickable:hover {
            background: var(--secondary-color-100) !important;
        }

        .mud-popover:has(.select-tenant-item) .mud-list-item .mud-list-item-text p {
            color: var(--secondary-color-1000);
            font-size: var(--font-size-base);
            font-weight: 400;
            width: max-content;
            padding: 0 8px;
        }

    .mud-popover:has(.module-switch-item) .mud-tooltip-root,
    .mud-popover:has(.select-tenant-item) .mud-tooltip-root {
        display: block;
        width: 100% !important;
        margin-bottom: 0.3rem;
    }

    .mud-popover:has(.module-switch-item) .mud-popover-cascading-value,
    .mud-popover:has(.select-tenant-item) .mud-popover-cascading-value {
        z-index: 999999;
    }

.module-switch-item.mud-list-item-disabled,
.select-tenant-item.mud-list-item-disabled {
    opacity: 0.4;
}

.module-switch .mud-avatar,
.module-switch button {
    background: var(--select-color);
}

    .module-switch .mud-avatar:hover {
        background: var(--secondary-color-100);
    }

.mud-menu.module-switch {
    margin-right: 0.8rem !important;
}

.mud-popover:has(.module-switch-item) {
    border-radius: 12px !important;
    padding-bottom: 0.8rem;
    margin-top: 8px !important;
}

.module-switch .mud-avatar img {
    width: 20px;
    height: auto;
}

.mud-list:has(.module-switch-item) {
    min-width: 200px;
    padding: 0 !important;
}

    .mud-list:has(.module-switch-item) h5 {
        padding: 0.6rem 1rem 0.6rem 1rem;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--secondary-color-100);
        margin-bottom: 0.4rem;
    }

.module-switch-item {
    border-radius: 12px;
    height: 35px;
    width: calc(100% - 1.6rem);
    margin: 0 auto 0.3rem auto;
}

    .module-switch-item.selected-item {
        background: var(--secondary-color-100) !important;
    }

    .module-switch-item p {
        font-family: "Manrope", sans-serif;
        font-size: 0.8rem !important;
        color: var(--secondary-color-1000);
        padding-left: 24px;
    }

.module-icon {
    height: 20px;
    width: auto;
    position: absolute;
    top: 7px;
    left: 10px;
}

/* Main Sidebar */
#btnOpenMenu {
    display: none;
}

.mud-drawer.mud-drawer-responsive.main-sidebar {
    width: var(--mud-drawer-width-left);
    background: var(--primary-color) url('../img/sidebar-sphere.png') no-repeat center bottom;
    color: #fff;
    padding: 2.5rem 1rem 1rem 1rem;
    overflow-x: hidden;
    z-index: 1303;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover { /* new */
    //position: absolute;
    width: var(--mud-drawer-width-left);
    transition: all 0.1s ease-in-out;
    box-shadow: 5px 0 15px 0px var(--box-shadow-color);
}

.main-sidebar.mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer--initial) {
    animation: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar {
    width: 6rem;
    transition: all 0.1s ease-in-out; /* new */
    left: 0;
}

.main-sidebar .mud-drawer-header {
    padding: 0;
    width: 206px;
    height: 42px; /* new */
    margin: 0 0 0 10px;
    min-height: 0;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .mud-drawer-header {
    width: 64px;
    display: block;
}

    .mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .mud-drawer-header img {
        margin: 0;
    }

.qerdos-logo-icon {
    //display: none; /* new */
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .qerdos-logo {
    display: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .qerdos-logo-icon {
    display: none; /* new */
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .qerdos-logo { /* new */
    display: block;
}

.mud-main-content {
    //padding-top: 80px !important;
    padding-top: 3.75rem !important;
}

.mud-drawer-open-responsive-md-left .mud-main-content {
    margin-left: var(--mud-drawer-width-left);
}

.mud-drawer-close-responsive-md-left .mud-main-content {
    width: calc(100% - 6rem);
    margin-left: 6rem;
}

.mud-drawer-close-responsive-md-left .mud-appbar {
    width: calc(100% - 6rem);
    margin-left: 6rem;
}

/* Main Navigation */

.main-navigation {
    //margin-top: 100px;
    margin-top: 5rem;
}

.mud-nav-link .mud-nav-link-text {
    white-space: nowrap; /* new */
}

.main-navigation .mud-nav-item.mud-ripple {
    //height: 56px;
    height: 3rem;
    border-radius: 12px;
    //margin-bottom: 12px;
    margin-bottom: 0.4rem;
}

.main-navigation .mud-nav-link {
    //height: 56px;
    height: 3rem;
    width: 100%;
    border-radius: 12px;
    padding: 0.8rem 0.6rem 0.8rem 0.5rem;
    font-size: var(--font-size-base);
    font-weight: 500;
}

    .main-navigation .mud-nav-link:hover,
    .navigation-button:hover {
        background: var(--primary-color-hover);
        cursor: pointer;
    }

    .main-navigation .mud-nav-link img {
        vertical-align: middle;
        margin-right: 12px;
        width: 24px;
        position: relative;
        top: -2px;
    }

.main-navigation.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #fff;
    background: var(--primary-color-light) !important;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .mud-nav-link img {
    margin: 0 auto;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .mud-nav-link img {
    margin: 0 12px 0 0;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .mud-nav-link span,
.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .navigation-button .mud-button-label span {
    display: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .mud-nav-link span,
.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .navigation-button .mud-button-label span {
    display: inline;
}

.bottom-menu {
    position: absolute;
    width: calc(100% - 48px);
    bottom: 24px;
}

.lang-btn-wrapper,
.navigation-button {
    width: 100%;
    height: 56px;
    width: 100%;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: var(--font-size-base);
    white-space: nowrap; /* new */
}

.navigation-button {
    margin-top: 12px;
    text-align: left;
    color: #fff;
    text-transform: capitalize;
    font-size: var(--font-size-base);
    font-weight: 500;
}

    .navigation-button .mud-button-label {
        display: block;
    }

    .navigation-button span {
        font-size: var(--font-size-base);
    }

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .lang-btn-wrapper {
    padding: 16px 20px 16px 22px;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .lang-btn-wrapper {
    display: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .lang-btn-wrapper {
    display: block;
}

.lang-btn-wrapper img,
.navigation-button img {
    vertical-align: text-bottom;
    margin-right: 12px;
    position: relative;
    top: 1px;
}

.lang-btn {
    font-weight: 600;
    width: 50px;
    display: inline-block;
    text-align: center;
    color: var(--primary-color-light);
    text-transform: uppercase;
}

    .lang-btn.active {
        color: #fff;
    }

    .lang-btn:hover {
        cursor: pointer;
        color: #fff;
    }

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .lang-btn {
    display: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .lang-btn { /* new */
    display: inline-block;
}

.navigation-lang-selector {
    width: 64px;
    height: 56px;
    border-radius: 12px;
    font-size: var(--font-size-base);
    display: none;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar .navigation-lang-selector {
    display: block;
}

.mud-drawer.mud-drawer-responsive.mud-drawer--closed.main-sidebar:hover .navigation-lang-selector {
    display: none; /* new */
}

.navigation-lang-selector:hover {
    background: var(--primary-color-hover);
    cursor: pointer;
}

.navigation-lang-selector .mud-input-control {
    width: 100%;
    flex-basis: 100%;
    height: 56px;
}

    .navigation-lang-selector.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text,
    .navigation-lang-selector .mud-input > input.mud-input-root.mud-input-root-margin-dense {
        padding: 0;
        margin: 0;
        height: 56px;
    }

.navigation-lang-selector::before {
    content: url('../img/language.svg');
    position: absolute;
    top: 19px; /* 17 */
    //left: calc(50% + 1px);
    left: 32px; /* new */
    transform: translateX(-50%);
}

.navigation-lang-selector .mud-svg-icon,
.navigation-lang-selector .mud-input-slot {
    display: none !important;
}

.navigation-lang-selector .mud-input.mud-input-underline:after,
.navigation-lang-selector .mud-input.mud-input-underline:before {
    display: none;
}

.navigation-lang-selector .mud-list {
    background: var(--primary-color-hover);
}

.mud-popover:has(.lang-select-item) {
    background: var(--primary-color-hover);
    box-shadow: none;
    border-radius: 8px;
}

.lang-select-item.mud-list-item {
    padding: 4px 0;
}

    .lang-select-item.mud-list-item:hover {
        background: transparent;
    }

        .lang-select-item.mud-list-item:hover p {
            color: #fff;
        }

.lang-select-item .mud-list-item-text p {
    text-align: center;
    text-transform: uppercase;
    color: #A7A0EF;
}

.lang-select-item.active .mud-list-item-text p {
    color: #fff;
}

.mud-nav-link:focus:not(.mud-nav-link-disabled) {
    background-color: transparent !important;
}

.programs-wrapper {
    margin-bottom: 3rem;
}

.main-navigation .mud-divider {
    margin-bottom: 0.4rem;
}

.main-navigation .mud-nav-item.active a {
    color: #fff;
    background: var(--primary-color-light) !important;
}

/*.main-navigation .program {
    height: 2.5rem !important;
}

.main-navigation .program .mud-nav-link {
    padding-block: 0 !important;
    height: 2.5rem !important;
    line-height: 2.5rem !important;
}*/
/* Dialog */
/*.dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--secondary-color-50);
}

.dialog-mask-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .dialog-mask-content img {
        width: 600px;
        filter: invert(1);
        opacity: 0.1;
    }*/
.dialog-default {
    width: 414px;
    min-height: 200px;
    padding: 1.8rem;
    border-radius: 1rem;
}

    .dialog-default.dialog-roles {
        width: 530px;
    }

    .dialog-default .mud-dialog-title {
        background: transparent;
        padding: 0;
    }

    .dialog-default h6 {
        display: none;
    }

    .dialog-default .mud-dialog-content {
        padding: 0 1.8rem;
    }

        .dialog-default .mud-dialog-content span:not(.mud-button-label) {
            font-size: 1rem;
            display: block;
            text-align: center;
            font-weight: 600;
            line-height: 21.6px;
        }

.dialog-icon {
    width: 100%;
    text-align: center;
    margin: 0 auto 1rem auto;
    width: 36px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.dialog-default .date-intpu .mud-input-control .mud-input > input.mud-input-root {
    padding: 0 0 0 14px;
}

.dialog-default.mud-dialog .mud-dialog-actions {
    justify-content: center;
    margin-top: 1.3rem;
    padding: 0 2rem;
}

    .dialog-default.mud-dialog .mud-dialog-actions button {
        width: 50%;
        height: 2.75rem;
    }

.dialog-title {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: 21.6px;
    margin-bottom: 1.5rem;
}

label.confirm-cancel-button span.mud-button-label {
    font-size: var(--font-size-base);
    padding-right: 40px;
}

button.mud-button-filled {
    box-shadow: none !important;
}

.file-upload-btn {
    width: 100%;
    margin-top: -6px;
}

    .file-upload-btn.confirm-button,
    button.confirm-button {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #fff;
    }

        .file-upload-btn.confirm-button:hover,
        button.confirm-button:hover {
            background: var(--primary-color-700) !important;
        }

        .file-upload-btn.confirm-button:focus,
        .file-upload-btn.confirm-button:active,
        .file-upload-btn.confirm-button:focus-visible,
        button.confirm-button:focus,
        button.confirm-button:active,
        button.confirm-button:focus-visible {
            box-shadow: 0 0 0 3px #DEDBFF !important;
        }

        button.confirm-button[disabled] {
            background: var(--primary-color-200) !important;
            color: #fff !important;
            border-color: var(--primary-color-200) !important;
        }

label.confirm-cancel-button,
button.confirm-cancel-button {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

button.mud-button-filled.success-button {
    background: var(--success-color-200);
}

    button.mud-button-filled.success-button:hover {
        background: var(--success-color-300);
    }

button.success-button:focus,
button.success-button:active,
button.success-button:focus-visible {
    box-shadow: 0 0 0 3px var(--success-color-light) !important;
}

button.success-cancel-button {
    border-color: var(--success-color-200);
    color: var(--success-color-200);
}

button.mud-button-filled.warning-button {
    background: var(--warning-color-200);
}

    button.mud-button-filled.warning-button:hover {
        background: var(--warning-color-300);
    }

button.warning-button:focus,
button.warning-button:active,
button.warning-button:focus-visible {
    box-shadow: 0 0 0 3px var(--warning-color-light) !important;
}

button.warning-cancel-button {
    border-color: var(--warning-color-200);
    color: var(--warning-color-200);
}

button.mud-button-filled.error-button {
    background: var(--error-color-100);
}

    button.mud-button-filled.error-button:hover {
        background: var(--error-color-200);
    }

button.error-button:focus,
button.error-button:active,
.button.error-button:focus-visible {
    box-shadow: 0 0 0 3px var(--error-color-light) !important;
}

button.error-cancel-button {
    border-color: var(--error-color-100) !important;
    color: var(--error-color-100) !important;
}

    button.confirm-cancel-button:hover,
    button.succes-cancel-button:hover,
    button.warning-cancel-button:hover,
    button.error-cancel-button:hover {
        background: var(--secondary-color-light) !important;
    }

    button.confirm-cancel-button:focus,
    button.confirm-cancel-button:active,
    button.confirm-cancel-button:focus-visible,
    button.success-cancel-button:focus,
    button.success-cancel-button:active,
    button.success-cancel-button:focus-visible,
    button.warning-cancel-button:focus,
    button.warning-cancel-button:active,
    button.warning-cancel-button:focus-visible,
    button.error-cancel-button:focus,
    button.error-cancel-button:active,
    button.error-cancel-button:focus-visible {
        box-shadow: 0 0 0 3px var(--secondary-color-light) !important;
    }

    button.error-cancel-button[disabled] {
        border-color: var(--secondary-color-100) !important;
    }

button span {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.dialog-default .mud-button-close {
    padding: 0;
}

.dialog-default .mud-icon-button-label {
    width: 24px;
    height: 24px;
    //display: none;
}

.dialog-default .mud-icon-root {
    width: 16px;
    color: var(--secondary-color-1000);
}

.dialog-default .column-header .mud-icon-root {
    width: 1em;
    color: var(--secondary-color-600);
}

.dialog-default button[aria-label="Clear"] .mud-icon-root {
    width: 1em;
    color: var(--secondary-color-600);
}

.dialog-default button[aria-label="Clear"] .mud-icon-button-label {
    font-size: var(--font-size-base);
    line-height: 34px;
}

.dialog-action-column .mud-dialog-actions {
    flex-flow: column;
}

.full-row-btn {
    width: 100% !important;
    margin-bottom: 16px;
}

.mud-dialog-content .org-role span.mud-chip-content {
    line-height: 32px;
}

.confirm-cancel-button.confirm-cancel-button-alt {
    background: #fff !important;
}

    .confirm-cancel-button.confirm-cancel-button-alt span {
        text-decoration: none;
    }

/* Promotion Create */
.center-panel {
    position: absolute;
    top: calc(50% - 280px);
    left: calc(50% - 250px);
    width: 500px;
}

    .center-panel h1 {
        font-size: var(--font-size-l);
        font-weight: 700;
        color: var(--secondary-color-1000);
        margin: 0 0 2rem 0;
        text-align: center;
    }

    .center-panel .buttons {
        margin-top: 2rem;
    }

        .center-panel .buttons button {
            width: calc(50% - 5px);
            margin-right: 7px;
            display: inline-block;
        }

            .center-panel .buttons button:last-of-type {
                margin-right: 0;
            }

    .center-panel .mud-input-control {
        margin-top: 8px;
    }

        .center-panel .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
        .label-fix.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
            margin-top: -8px;
        }

    .center-panel .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
    .center-panel .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
    .label-fix .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
    .label-fix .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(14px, -3px) scale(0.75);
    }

/* Promotion Edit */

.fade-top,
.fade-top-30,
.fade-bottom,
.fade-bottom-30 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 10px);
    height: 50px;
    background: url('../img/fade-top.png') repeat-x;
    z-index: 99;
    pointer-events: none;
}

    .fade-top.fade-top-alt {
        content: '';
        height: 30px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

        .fade-top.fade-top-alt.fade-top-alt-gray {
            background: linear-gradient(to bottom, rgba(242, 246, 255, 1) 0%, rgba(242, 246, 255, 0) 100%);
            pointer-events: none;
        }

.fade-bottom {
    background: url('../img/fade-bottom.png') repeat-x;
    top: auto;
    bottom: 260px;
    pointer-events: none;
}

.fade-top-20 {
    position: absolute;
    z-index: 999;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 20px;
    width: calc(100% - 20px);
    pointer-events: none;
}

.fade-top-30 {
    background: url('../img/fade-top-30.png') repeat-x;
    height: 30px;
    width: calc(100% - 30px);
    top: 84px;
    pointer-events: none;
}

.fade-bottom-30 {
    background: url('../img/fade-bottom-30.png') repeat-x;
    width: calc(100% - 30px);
    height: 30px;
    top: auto;
    bottom: 30px;
    pointer-events: none;
}

.fade-bottom.fade-bottom-alt {
    content: '';
    height: 30px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

    .fade-bottom.fade-bottom-alt.fade-bottom-alt-gray {
        background: linear-gradient(to top, rgba(242, 246, 255, 1) 0%, rgba(242, 246, 255, 0) 100%);
        pointer-events: none;
    }

.custom-carousel.custom-carousel-alt {
    padding-top: 0;
    margin-top: 5px !important;
}

    .custom-carousel.custom-carousel-alt .mud-carousel-item {
        padding-top: 30px;
    }

.close-btn {
    min-width: 100px;
    height: 36px;
    border: 1px solid var(--secondary-color-300);
    color: var(--secondary-color-700);
    font-weight: 600;
    font-size: 14px;
    border-radius: 12px;
    position: absolute;
    top: 17px;
    right: 8px;
    padding: 8px 12px;
    background: #fff;
}

    .close-btn img {
        margin-left: 8px;
        vertical-align: bottom;
    }

    .close-btn:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

.promotion-toolbar .close-btn {
    top: 15px;
    right: 24px;
}

.promotion-toolbar {
    //margin: 16px 0 0 0;
    width: 100%;
    display: block;
    background: #fff;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    position: relative;
    margin-bottom: 1.3rem;
}

.promotion-edit-dialog .mud-input-control-helper-container {
    display: none;
}

.promotion-body {
    height: calc(100vh - 11.3rem);
}

.promotion-sidebar,
.promotion-content {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    position: relative;
    min-width: 300px !important;
    max-width: 300px !important;
    height: calc(100vh - 11.3rem);
}

.promotion-sidebar {
    margin-right: 1.3rem;
    padding: 1rem 0.6rem 1rem 1.2rem;
}

.promotion-content {
    min-width: calc(100% - (300px + 1.3rem)) !important;
    max-width: calc(100% - (300px + 1.3rem)) !important;
}

.definitions-list {
    padding: 0.875rem 0.75rem 0.3rem 0 !important;
    height: calc(100vh - 19.375rem);
    margin-top: 0.25rem;
    margin-bottom: 0.625rem;
    overflow-y: auto;
    position: relative;
}

.definition {
    height: 46px;
    border-radius: 12px;
    width: 100%;
    position: relative;
    border: 1px solid var(--secondary-color-200);
    font-size: var(--font-size-base);
    margin-bottom: 0.9rem;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

    .definition.active {
        border-color: var(--primary-color);
        height: 84px;
    }

.definition-actions {
    //display: none;
    opacity: 0;
    height: 36px;
    line-height: 36px;
    background: var(--secondary-color-50);
    border-radius: 0 0 12px 12px;
    transition: all 0.3s ease-in-out;
}

.definition.active .definition-actions {
    //display: block;
    opacity: 1;
}

.definition-actions .mud-tooltip-root {
    width: calc(100% / 3);
    float: left;
    text-align: center;
}

.definition-actions.no-delete .mud-tooltip-root {
    width: calc(100% / 2);
}

.definition-actions .mud-tooltip-root button {
    width: 100%;
    height: 36px;
    vertical-align: baseline;
}

    .definition-actions .mud-tooltip-root button:hover {
        background: var(--secondary-color-100);
    }

.definition-actions .mud-tooltip-root img {
    height: 18px;
}

.definition.error {
    border-color: var(--error-color-200);
    //color: var(--error-color-200);
}

.definition.active.error {
    border-color: var(--primary-color);
}

.definition:hover {
    cursor: pointer;
    //background: var(--secondary-color-light);
}

.definition-title {
    //width: calc(100% - 70px);
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 46px;
    padding: 12px 24px 12px 24px;
}

.definition.error .definition-title {
    color: var(--error-color-200);
}

.definition-tools-wrapper {
    position: absolute;
    display: none;
    height: 46px;
    //padding-left: 25px;
    right: 0;
    top: -1px;
    text-align: left;
    z-index: 5;
    width: max-content;
}

.definition-tools {
    /*position: absolute;
    top: -1px;
    right: -70px;*/
    height: 46px;
    padding: 10px 6px 10px 0;
    line-height: 22px;
    border-radius: 12px;
    //background: #fff;
    //border: 1px solid var(--secondary-color-600);
    text-align: left;
}

.definition:hover .definition-tools-wrapper {
    display: block;
}

.definition-tools button {
    margin: 0 4px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

    .definition-tools button:hover {
        background: var(--secondary-color-100);
        border-radius: 50%;
    }

.arrow-left {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
    position: absolute;
    left: 18px;
    top: 15px;
}

    .arrow-left::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-right: 9px solid var(--secondary-color-600);
        position: absolute;
        left: -1px;
        top: -9px;
        z-index: -1;
    }

.new-definition {
    padding: 0 14px 0 0 !important;
}

.back-button {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

    .back-button img {
        margin-right: 8px;
        margin-top: -4px;
        vertical-align: middle;
    }

    .back-button:hover {
        cursor: pointer;
    }

.promotion-header {
    font-size: 1rem;
    display: inline-block;
    margin-right: 1.5rem;
    height: 2rem;
    line-height: 2rem;
}

.promotion-valid-dates {
    margin-left: 1.5rem;
}

.promotion-header-icon {
    display: inline-block;
    margin-right: 8px;
}

    .promotion-header-icon span {
        display: block;
        cursor: pointer;
        width: 32px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        vertical-align: bottom;
    }

        .promotion-header-icon span:hover {
            background: var(--secondary-color-100);
        }

    .promotion-header-icon img {
        vertical-align: middle;
        //max-width: 23px;
    }

.promotion-tabs {
    width: calc(100% - 220px);
}

.promotion-tab-panel {
    width: calc(100% + 220px);
    padding-top: 0 !important;
    //border-top: 1px solid var(--secondary-color-300);
}

/*.promotion-tabs .mud-tabs-toolbar {
    border-bottom: 1px solid var(--secondary-color-300);
}*/

/*.promotion-tabs .mud-tabs-toolbar-inner {
    width: calc(100% - 170px);
}*/

.promotion-tabs .mud-tabs-toolbar-content {
    //padding: 24px 0;
    overflow: visible; /* new */
    overflow-x: clip; /* new */
    position: relative; /* new */
    z-index: 99; /* new */
}

.promotion-tabs .mud-tabs-scroll-button {
    padding-top: 22px;
}

    .promotion-tabs .mud-tabs-scroll-button .mud-icon-button-label svg {
        display: none;
    }

    .promotion-tabs .mud-tabs-scroll-button:first-of-type .mud-icon-button-label::before {
        content: url('../img/chevron-left-alt.png');
    }

    .promotion-tabs .mud-tabs-scroll-button:last-of-type .mud-icon-button-label::before {
        content: url('../img/chevron-right-alt.png');
    }

    .promotion-tabs .mud-tabs-scroll-button:first-of-type .mud-icon-button-label::before,
    .promotion-tabs .mud-tabs-scroll-button:last-of-type .mud-icon-button-label::before {
        margin-top: 5px;
    }

    .promotion-tabs .mud-tabs-scroll-button button {
        width: 52px;
    }

        .promotion-tabs .mud-tabs-scroll-button button[disabled] .mud-icon-button-label::before {
            opacity: 0.4;
        }

/*.promotion-tabs .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
    gap: 24px;
    display: block;
    padding-right: 170px;
}*/
.promotion-tabs .mud-tab-slider.mud-tab-slider-horizontal {
    display: none;
}

/*.promotion-tabs .mud-tooltip-root {
    padding-left: 24px;
}*/

.promotion-tabs .mud-tab {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 0 12px !important;
    min-width: 120px !important;
    overflow: visible;
    height: 96px;
}

    .promotion-tabs .mud-tab:hover {
        cursor: default;
    }

.promotion-tabs .tab-header-content {
    min-width: 120px !important;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    //padding: 12px 16px;
    border-radius: 10px;
    //background: var(--secondary-color-50);
    background: #fff;
    border: 1px solid var(--secondary-color-200);
    //margin-right: 24px;
    font-size: 15px;
    margin: 0;
    font-weight: 400;
}

.mud-tabs-toolbar-wrapper:has(.tab-header-content) .tab-header-title:hover {
    //background: var(--secondary-color-100);
    background: var(--primary-color-100);
    border-color: var(--primary-color-100);
    cursor: pointer;
    //color: #fff;
}

.mud-tabs-toolbar-wrapper:has(.tab-header-content) .tab-header-title:has(~ .tab-header-options:hover) {
    background: var(--primary-color-100);
    border-color: var(--primary-color-100);
    //color: #fff;
}

.promotion-tabs .mud-tab.mud-tab-active .tab-header-content {
    border: 1px solid var(--primary-color);
    color: #000;
}

.promotion-tabs .mud-ripple:after {
    display: none !important;
}

.tab-header-options {
    height: 39px;
    display: none;
    position: absolute;
    top: -14px;
    padding: 0;
    right: 0px;
    //transform: translateX(-50%);
}

    .tab-header-options > div {
        //background: var(--secondary-color-100);
        background: var(--primary-color-100);
        border-radius: 32px;
    }

        .tab-header-options > div img {
            //filter: brightness(0) invert(1);
        }

    /*.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}*/
    .tab-header-options:hover,
    .mud-tabs-toolbar-wrapper:has(.tab-header-content) .tab-header-title:hover ~ .tab-header-options {
        display: block;
    }

    .tab-header-options button {
        text-align: center;
        width: 32px;
        height: 32px !important;
        line-height: 32px;
        border: 0;
        background: transparent;
        border-radius: 50%;
        //margin: 0 5px;
    }

        .tab-header-options button:hover {
            //background: var(--primary-color-700);
        }

.promotion-tabs .mud-tab .tab-header-content .tab-header-options button span {
    margin: 0;
}

.promotion-tabs .mud-tab .tab-header-content .tab-header-options button svg {
    margin-top: 8px;
}

.promotion-tabs .new-tab {
    display: none;
    position: absolute;
    top: 24px;
    right: -60px;
    width: 48px;
    height: 48px;
    line-height: 50px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid var(--secondary-color-200);
}

.mud-tabs-toolbar-wrapper:last-child .new-tab {
    display: block;
}

.promotion-tabs .new-tab:hover {
    //background: var(--secondary-color-100);
    background: var(--primary-color-100);
    border-color: var(--primary-color-100);
    cursor: pointer;
}

    .promotion-tabs .new-tab:hover img {
        //filter: brightness(0) invert(1);
    }

/*.promotion-tabs .mud-tabs-toolbar-wrapper::after {
    content: url('../img/add-alt.png');
    margin-top: 12px;
    cursor: pointer;
    height: 22px;
}*/
.promotion-tab-actions {
    //position: absolute;
    //height: 70px;
    //height: 48px;
    //padding: 24px 24px 24px 0;
    //padding: 0 24px 0 16px;
    //right: 0px;
    //top: -71px;
    //z-index: 996;
    //border-left: 1px solid var(--secondary-color-300);
    height: 2.5rem;
    padding: 0 4px !important;
}

    .promotion-tab-actions > div {
        display: inline-block;
        margin-right: 10px;
        vertical-align: bottom;
        height: 2.5rem;
    }

        .promotion-tab-actions > div .mud-tooltip-root {
            height: 2.5rem;
        }

    .promotion-tab-actions span {
        display: inline-block;
        height: 40px;
        text-align: center;
        margin-top: 4px;
    }

        .promotion-tab-actions span:hover {
            cursor: pointer;
        }

            img.hover-img,
            .promotion-tab-actions span:hover .default-img,
            .test-toolbar-actions span:hover .default-img {
                display: none;
            }

            .promotion-tab-actions span:hover .hover-img,
            .test-toolbar-actions span:hover .hover-img {
                display: block;
            }

.icon-button {
    width: 27px;
    min-width: 27px;
    height: 36px
}

    .icon-button:hover {
        background: transparent !important;
    }

.promotion-tabs .tab-header-content span.tab-header-title {
    padding: 12px 16px 11px 16px;
    display: inline-block;
    width: 100%;
    border-radius: 9px;
    font-family: "Manrope", sans-serif;
}

.promotion-tabs .tab-header-content button {
    padding: 0;
    height: 24px;
}

    .promotion-tabs .tab-header-content button span.mud-icon-button-label {
        margin: 0;
        display: inline-block;
    }

.promotion-tabs .tab-header-content .mud-icon-root.mud-svg-icon {
    height: 18px;
}

.mud-tabs-scroll-button .mud-button-root {
    width: 32px !important;
    height: 32px;
    position: relative;
    top: 11px;
    padding: 0;
}

.mud-tabs-scroll-button:last-of-type .mud-button-root {
    left: 15px;
}

.new-promotion img {
    margin-top: 9px;
    cursor: pointer;
}

/* Calculation Trigger */

.calculation-trigger-message {
    padding: 0 8px;
}

    .calculation-trigger-message p {
        color: var(--secondary-color-1000);
        font-size: var(--font-size-base);
        font-weight: 600;
        background: var(--primary-color-100);
        padding: 16px 24px;
        border-radius: 16px;
        margin: 24px 0 0 0;
        width: auto;
        display: inline-block;
    }

/* ---condition block */

.calculation-toolbar {
    width: 100%;
    //height: 50px;
    padding: 0;
    //margin-bottom: 32px;
    height: 49px;
}

.carousel-panel-title span {
    display: inline-block;
    height: 46px;
    font-weight: 700;
    font-size: 28px;
    margin-right: 24px;
    color: var(--secondary-color-500);
}

    .carousel-panel-title span.active {
        color: var(--primary-color);
        box-shadow: 0 1px var(--primary-color);
    }

    .carousel-panel-title span:hover {
        cursor: pointer;
    }

.custom-tree.mud-treeview {
    padding: 0 12px 0 12px;
}

.condition-block {
    border-radius: 1rem;
    border: 1px solid var(--secondary-color-1000);
    padding: 0.6rem 1rem 1rem 1rem;
    margin-bottom: 1rem;
    position: relative;
}

    .condition-block.padded-block {
        width: calc(100% - 3rem);
        margin-left: 3rem;
    }

.remove-block,
.copy-block {
    position: absolute;
    top: 7px;
    right: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    z-index: 100;
}

.copy-block {
    right: 64px;
}

    .remove-block:hover,
    .copy-block:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

    .remove-block img,
    .copy-block img {
        margin-top: 6px;
    }

.condition-block-title {
    width: 100%;
    height: 2.2rem;
    border-bottom: 1px solid var(--secondary-color-300);
    margin-bottom: 1rem;
    padding-left: 42px;
}

    .condition-block-title .mud-input-control {
        display: inline-block;
    }

    .condition-block-title .condition-row-logic {
        position: absolute;
        top: -3px;
        left: -3.5rem;
        width: 3rem;
        height: 3rem;
    }

        .condition-block-title .condition-row-logic span {
            height: 3rem;
            line-height: 3rem;
        }

    .condition-block-title .mud-input-control .mud-input > input.mud-input-root {
        padding: 0;
    }

    .condition-block-title .mud-input-control.mud-input-control-margin-dense,
    .condition-block-title .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
        margin: 0;
    }

    .condition-block-title .mud-input-control.mud-input-control-margin-dense {
        width: 80%;
        //margin-left: 32px;
    }

    .condition-block-title .mud-input.mud-input-underline:before,
    .condition-block-title .mud-input.mud-input-underline:after {
        display: none;
    }

.custom-tree .condition-block .mud-treeview-item .mud-treeview-item-content {
    position: absolute;
    left: 13px;
    top: 3px;
    height: 40px;
    width: 40px;
    padding: 0;
    border-radius: 50%;
}

.custom-tree .mud-treeview-item-arrow .mud-treeview-item-arrow-expand {
    transform: rotate(-90deg);
}

    .custom-tree .mud-treeview-item-arrow .mud-treeview-item-arrow-expand.mud-transform {
        transform: none;
    }

.custom-tree .condition-block .mud-treeview-item .mud-treeview-item-content svg {
    display: none;
}

.custom-tree .condition-block .mud-treeview-item .mud-treeview-item-content .mud-icon-button-label::before {
    content: url('../img/chevron-down.svg');
    margin-top: 5px;
}

.custom-tree .condition-block .mud-treeview-item .mud-treeview-item-content button {
    padding: 0;
    width: 2rem;
    height: 2rem;
}

.condition-row-wrapper {
    margin-bottom: 1rem;
}

.condition-label-wrapper {
    width: 100%;
    display: block;
}

.condition-label {
    width: 264px;
    margin-right: 12px;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    display: inline-block;
}

.data-field-selector {
    width: 264px;
    display: inline-block;
    margin-right: 0.6rem;
    position: relative;
}

.data-operator-selector {
    width: 150px;
    display: inline-block;
    margin-right: 0.6rem;
    vertical-align: bottom;
}

.mud-popover:has(.dd-select-item.dd-select-operator) {
    //padding: 12px 12px 4px 12px;
    padding: 8px 4px 4px 12px;
    max-height: 400px !important;
    min-width: 170px !important;
    width: fit-content;
    max-width: 200px !important;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
}

    .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-select-operator {
        height: 2.75rem;
        padding: 8px 12px;
        margin-bottom: 7px;
        border-radius: 12px;
        border: 1px solid var(--secondary-color-600);
    }

        .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-select-operator:last-child {
            margin-bottom: 0;
        }

        .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-select-operator:hover,
        .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-select-operator.mud-selected-item {
            border-color: var(--primary-color);
            background: transparent !important;
        }

            .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-select-operator.mud-selected-item p,
            .mud-popover:has(.dd-select-item.dd-select-operator) .dd-select-item.dd-sel.data-field-selectorect-operator:hover p {
                color: var(--primary-color) !important;
            }

.operator-sign-wrapper {
    width: 24px;
    height: 24px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.primary-dd .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 0;
}

.primary-dd .mud-input-slot {
    padding: 0 12px !important;
    height: 48px !important;
    line-height: 48px !important;
    position: relative;
}

.operator-sign-wrapper img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dd-select-item.dd-select-operator.mud-selected-item .operator-sign.operator-sign-active,
.primary-dd .mud-input-slot .operator-sign.operator-sign-active,
.dd-select-item .operator-sign {
    display: inline-block;
}

    .primary-dd .mud-input-slot .operator-sign,
    .dd-select-item:hover .operator-sign,
    .dd-select-item .operator-sign.operator-sign-active {
        display: none;
    }

        .dd-select-item:hover .operator-sign.operator-sign-active {
            display: inline-block;
        }

.dd-select-operator .mud-list-item-text,
.dd-select-operator p {
    height: 2.75rem;
    line-height: 2.75rem;
}

.operator-display-name {
    display: inline-block;
    vertical-align: baseline;
    width: 100%;
    padding-left: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-dd .mud-input-adornment {
    display: none;
}

.data-value-input {
    width: 264px;
    display: inline-block;
    margin-right: 0.6rem;
    vertical-align: bottom;
    position: relative;
}

    .data-value-input.short-input {
        width: 64px;
    }

        .data-value-input.short-input input {
            text-align: center !important;
        }

    .data-value-input.dd-w-input {
        min-width: 370px;
    }

        .data-value-input.dd-w-input:not(.percent-input) {
            min-width: 450px;
        }

        .data-value-input.dd-w-input .mud-select {
            width: 280px;
            float: left;
        }

            .data-value-input.dd-w-input .mud-select .mud-input.mud-input-outlined .mud-input-outlined-border {
                border-radius: 12px 0 0 12px !important;
            }

        .data-value-input.dd-w-input .mud-input-number-control {
            width: 160px;
            float: left;
        }

        .data-value-input.dd-w-input.percent-input .mud-input-number-control {
            width: 90px;
        }

        .data-value-input.dd-w-input .mud-input-number-control .mud-input-outlined .mud-input-outlined-border {
            border-radius: 0 12px 12px 0 !important;
            border-left: 0;
        }

        .data-value-input.dd-w-input:not(.percent-input) input {
            text-align: right;
        }

    .data-value-input .date-input .mud-input-control {
        margin: 5px 0 0 0;
    }

.dd-image {
    vertical-align: middle;
}

.percent-field,
.percent-input .numeric-field {
    display: none;
}

.percent-input .percent-field::after {
    content: '%';
    position: absolute;
    top: 0.68rem;
    right: 14px;
    font-size: var(--font-size-base);
    color: var(--secondary-color-500);
    font-weight: 500;
}

.numeric-field,
.percent-input .percent-field {
    display: block;
}

.data-description-input {
    width: 320px;
    display: inline-block;
    margin-right: 0.6rem;
    height: 46px;
    vertical-align: bottom;
    position: relative;
}

.condition-row-logic {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-block;
    border-radius: 1rem;
    border: 1px solid var(--success-color-200);
    color: var(--success-color-200);
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-right: 0.6rem;
    vertical-align: bottom;
}

    .condition-row-logic.row-logic-or {
        border-color: var(--warning-color-200);
        color: var(--warning-color-200);
    }

    .condition-row-logic span {
        display: block;
        width: 100%;
        line-height: 2.7rem;
        padding: 0;
        text-align: center;
    }

    .condition-row-logic:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

.condition-row-delete {
    width: 2.75rem;
    height: 2.75rem;
    padding: 8px 0;
    display: inline-block;
    vertical-align: bottom;
}

    .condition-row-delete span {
        display: block;
        width: 1.8rem;
        height: 1.8rem;
        line-height: 1.6rem;
        border-radius: 50%;
        text-align: center;
    }

        .condition-row-delete span:hover {
            background: var(--secondary-color-100);
            cursor: pointer;
        }

        .condition-row-delete span img {
            vertical-align: middle;
        }

.condition-toolbar {
    width: 100%;
    margin-bottom: 14px;
}

.custom-accordion .condition-toolbar {
    margin-bottom: 0;
}

.condition-toolbar button img,
.simple-button img {
    margin-left: 8px;
}

.condition-toolbar button[disabled] img {
    filter: brightness(0);
    opacity: 0.2;
}

.condition-toolbar button .mud-button-label,
.simple-button .mud-button-label {
    justify-content: start;
    font-size: 14px;
}

.benefit-block {
    //background: var(--primary-color-100);
    border: 1px solid var(--secondary-color-1000);
    padding: 24px;
    border-radius: 16px;
    margin-top: 12px;
}

.benefit-step,
.benefit-row {
    display: inline-block;
}

.benefit-step {
    width: 56px;
    height: 74px;
    margin-right: -3px;
    position: relative;
}

.step-item {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background: var(--primary-color-100);
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 34px;
}

.step-line {
    width: 1px;
    background: var(--secondary-color-300);
    height: 49px;
    position: absolute;
    left: 16px;
    bottom: -50px;
}

.benefit-row {
    width: calc(100% - 56px);
}

.condition-desc {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    top: calc(50% + 4px);
    left: 6px;
    transform: translateY(-50%);
}

/* Custom Data */

.custom-data-wrapper {
    border-radius: 16px;
    border: 1px solid var(--secondary-color-1000);
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
}

    .custom-data-wrapper h3 {
        font-size: 18px;
        font-weight: 500;
        color: var(--secondary-color-1000);
    }

.custom-accordion .mud-expand-panel {
    border-radius: 16px !important;
    border: 1px solid var(--secondary-color-1000);
    padding: 0;
    margin-bottom: 16px;
    position: relative;
    box-shadow: none;
    max-height: 54px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.category-content .custom-accordion .mud-expand-panel {
    max-height: 40px;
}

.category-content .mud-expand-panel .mud-expand-panel-header {
    min-height: 40px;
    height: 40px !important;
    padding: 0 24px;
    padding-left: 56px;
}

.category-content .custom-accordion .mud-expand-panel-text::before {
    top: 0.6rem;
}

.custom-accordion.single-accordion .mud-expand-panel,
.custom-accordion.single-accordion .mud-expand-panel.mud-panel-expanded:last-child {
    margin-bottom: 0px !important;
}

.custom-accordion .mud-expand-panel.mud-panel-expanded:last-child {
    margin-bottom: 16px !important;
}

.custom-accordion .mud-expand-panel.mud-panel-expanded {
    max-height: 10000px;
    transition: all 0.3s ease-in-out;
}

.custom-accordion .mud-expand-panel-header {
    height: 3.125rem;
    padding-left: 56px;
}

.custom-accordion .mud-expand-panel-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-color-1000);
}

.custom-accordion .mud-expand-panel-icon {
    position: absolute;
    left: 32px;
    opacity: 0;
}

.custom-accordion .mud-expand-panel-text::before {
    content: url('../img/chevron-right.svg');
    position: absolute;
    top: 1rem;
    left: 1.8rem;
    transition: all 0.3s ease-in-out;
}

.custom-accordion .mud-expand-panel.mud-panel-expanded .mud-expand-panel-text::before {
    transform: rotate(90deg);
}

.custom-accordion .accordion-content {
    border-top: 1px solid var(--secondary-color-300);
    padding-top: 16px;
}

.custom-accordion .mud-input-control {
    margin-top: 3px;
}

.custom-accordion .mud-collapse-container {
    max-height: none !important;
}

.input-wrap-w-button {
    position: relative;
}

    .input-wrap-w-button .form-dd {
        width: 100%;
        max-width: calc(100% - 70px) !important;
    }

.save-field-btn {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 42px;
    border: 0;
    text-align: center;
    margin-top: 0;
    border-radius: 50%;
    //position: absolute;
    //top: 5px;
    //right: -40px;
}

.custom-field-confirm,
.custom-field-remove {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 43px;
    //position: absolute;
    top: 16px;
    right: 0;
    border: 0;
    text-align: center;
    margin-top: 5px;
    border-radius: 50%;
}

.custom-field-confirm {
    right: 36px;
}

    .save-field-btn:hover,
    .custom-field-confirm:hover,
    .custom-field-remove:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

.custom-data-indicator-column {
    text-align: center;
    font-weight: 600;
}

.custom-data-indicator-field {
    text-align: center;
    height: 61px;
    line-height: 61px;
    box-shadow: -1px 0 var(--secondary-color-100) inset;
    position: relative;
}

    .custom-data-indicator-field img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
    }

.custom-data-indicator {
    display: block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: var(--secondary-color-100);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px var(--secondary-color-100);
}

    .custom-data-indicator.active {
        background: var(--success-color-200);
        box-shadow: 0 0 0 1px var(--success-color-200);
    }

img.inactive {
    filter: brightness(0);
    opacity: 0.1;
}

.dialog-default:has(.edit-custom-field-dialog) {
    width: 460px;
    padding-inline: 0 !important;
    /*transition: all 0.15s ease-in-out;*/
}

.dialog-default:has(.edit-custom-field-dialog.field-usage-dialog) {
    width: 800px;
    /*transition: all 0.15s ease-in-out;*/
}

.field-usage-title {
    text-align: center;
}

.field-usage-desc {
    text-align: center;
    width: 60%;
    margin: 5px auto 10px auto;
}

.field-usage-content {
    max-height: calc(60vh);
    overflow-y: auto;
}

.check-progress-title {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 21.6px;
}

.custom-field-usage-msg {
    display: block;
    width: 100%;
    padding: 1rem !important;
    border-radius: 1rem;
    background: var(--secondary-color-100);
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.list-usage-msg {
    display: block;
    padding: 0.6rem 3rem 0.6rem 1rem !important;
    border-radius: 1rem;
    background: var(--secondary-color-100);
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    flex-basis: auto;
    position: relative;
    top: 6px;
    left: 10px;
}

    .custom-field-usage-msg:hover,
    .list-usage-msg:hover {
        box-shadow: 0 0 0 1px var(--secondary-color-1000) inset !important;
        cursor: pointer;
    }

.custom-field-usage-msg span {
    text-decoration: underline;
    cursor: pointer;
    color: var(--primary-color);
}

.custom-field-usage-arrow {
    text-align: center;
    position: relative;
}

.list-usage-msg .custom-field-usage-arrow {
    position: absolute;
    right: 1.8rem;
    top: 21px;
}

.custom-field-usage-arrow img,
.list-usage-msg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .custom-field-usage-msg:hover img:not(.hover-img),
    .list-usage-msg img:not(.hover-img)
    .custom-field-usage-arrow img.hover-img {
        display: none;
    }

.custom-field-usage-msg:hover img.hover-img,
.list-usage-msg:hover img.hover-img {
    display: block;
}

.check-panel {
    width: 460px;
    height: 200px;
    padding: 1.8rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    z-index: 9999;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
}

.mud-dialog-actions:has(.field-usage-close) {
    justify-content: flex-end !important;
}

.field-usage-close {
    width: 25% !important;
}

/* Integration */
.external-data-block {
    width: 900px;
    max-width: 100%;
    border: 1px solid var(--secondary-color-1000);
    border-radius: 1rem;
    padding: 1.3rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

    .external-data-block:has(.role-info-item) {
        margin-bottom: 0.6rem;
    }

        .external-data-block:has(.role-info-item):last-of-type {
            margin-bottom: -1.3rem;
        }

.external-data-actions {
    margin-top: 0.5rem;
}

    .external-data-actions button {
        width: calc(25% - (0.9rem / 2)) !important;
        margin-right: 0.45rem;
    }

        .external-data-actions button:last-child {
            margin-right: 0;
        }

.delete-button img,
.test-button img {
    margin-left: 8px;
}

/* Organizations */

.organization-actions {
    margin-top: 1.1rem;
}

.status-indicator-wrapper {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: bottom;
    top: 2px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning-color-200);
}

    .status-indicator.status-active {
        background: var(--success-color-200);
    }

    .status-indicator.status-expired {
        background: var(--error-color-200);
    }

.leave-button img {
    margin-left: 8px;
}

.numeric-label-fix .mud-input-label-outlined,
.user-edit-dialog .mud-input-label-outlined {
    transform: translate(14px, 11px) scale(1);
}

.roles-grid {
    margin-top: 0.75rem;
}

    .roles-grid .mud-table-container {
        //min-height: 200px;
        padding-bottom: 10px;
    }

.role-description {
    height: 50px;
    border-radius: 12px;
    padding: 0 8px;
    width: 150px;
}

    .role-description:hover {
        background: var(--secondary-color-100);
        cursor: pointer;
    }

    .role-description > div {
        float: left;
    }

.role-description-icon {
    height: 50px;
    line-height: 60px;
    width: 30px;
}

.role-description-info {
    width: calc(100% - 30px);
    height: 50px;
    line-height: 50px;
    color: var(--secondary-color-600);
}

.role-description:hover .role-description-info {
    color: var(--secondary-color-1000);
}

.role-description:hover .info-icon,
.info-icon-alt {
    display: none;
}

.role-description:hover .info-icon-alt {
    display: inline-block;
}

.return-btn {
    position: absolute;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 39px;
    text-align: center;
    border: 1px solid #CCCBCB;
    top: -5px;
}

    .return-btn:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

    .return-btn.subpage {
        position: relative;
        margin-right: 12px;
        top: 1px;
    }

    .dialog-description {
        font-size: var(--font-size-base);
        font-weight: 500;
        line-height: 19.2px;
        margin: -10px auto 1.3rem auto;
        text-align: center;
        width: 75%;
    }

.roles-section-title {
    text-align: center;
    margin-bottom: 0.6rem;
}

.role-info-item .mud-icon-button {
    padding: 4px 12px;
}

.role-info-item .custom-checkbox .mud-checkbox.mud-disabled p {
    color: var(--secondary-color-1000);
    font-size: var(--font-size-base);
}

.role-info-item .custom-checkbox .mud-input-control-input-container:has(.mud-disabled) {
    opacity: 1;
}

.role-info-item .custom-checkbox .mud-checkbox.mud-disabled * .mud-checkbox-input {
    color: var(--primary-color) !important;
}

.role-info-item .custom-checkbox .mud-input-control-input-container:has(.mud-disabled) svg {
    //opacity: 0.7;
}

.role-info-item .custom-checkbox .mud-checkbox.mud-disabled path {
    color: var(--primary-color) !important;
}

.user-dialog-roles {
    color: var(--secondary-color-600);
    padding: 0 15px;
    display: inline-block;
}

.organization-selection-item {
    border: 1px solid var(--secondary-color-1000);
    border-radius: 16px;
    padding: 16px;
    //margin-bottom: 8px;
    position: relative;
}

    .organization-selection-item h4 {
        width: calc(100% - 60px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .organization-selection-item small {
        display: block;
        width: 100%;
        width: calc(100% - 50px);
    }

.organization-selection-roles {
    padding: 4px 8px;
    margin-right: 4px;
    margin-top: 4px;
    background: var(--secondary-color-50);
    border-radius: 6px;
    display: inline-block !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
}

.organization-selection-radio {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
}

.disabled-org h4,
.disabled-org .organization-selection-roles {
    opacity: 0.4;
}

.organization-selection-item:has(.disabled-org) {
    border-color: rgba(0,0,0,0.15);
}

.mud-tooltip-root:has(.organization-selection-item) {
    width: 100% !important;
    margin-bottom: 8px;
}

.custom-tooltip.org-tooltip {
    transform: translateY(-5px) !important;
}

    .tenant-invitation-item {
        font-size: var(--font-size-base);
    }

.current-user-icon {
    width: 20px;
    vertical-align: bottom;
}

/* --subscription plan */

.subscription-plan-wrapper {
    height: calc(100% - 50px);
}

.subscription-plan-header {
    width: 100%;
    margin-bottom: 1rem;
}

.subscription-plan-header,
.spend-api,
.subscription-plan-message {
    border: 1px solid var(--secondary-color-100);
    padding: 1.2rem !important;
    border-radius: 1rem;
}

.subscription-plan-header {
    padding: 1.2rem 1.6rem !important;
}

.organization-toolbar {
    padding-top: 4px;
}

.subscription-plan-header h1.organization-name {
    font-size: 2rem;
    line-height: 2rem;
    min-height: 3rem;
    margin-bottom: 0.75rem !important;
    border-bottom: 1px dashed rgba(0,0,0,0.15);
    padding-bottom: 1.25rem !important;
    outline: none !important;
}

.edit-org-btn {
    margin-top: 5px !important;
}

.subscription-plan-header h1 {
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
}

.subscription-plan-price {
    float: right;
    font-size: 1.4rem;
    padding-top: 0.2rem;
}

.base-price {
    color: #2979FF;
}

.subscription-plan-date {
    display: inline-block;
    margin-right: 0.6rem;
    background: var(--secondary-color-50);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--success-color-light);
    font-size: 0.75rem;
}

    .subscription-plan-date.subscription-plan-end {
        background: var(--error-color-light);
    }

.no-billing-message {
    display: inline-block;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--secondary-color-50);
    font-size: 0.75rem;
}

.subscription-plan-sidebar {
    flex-basis: 600px !important;
    max-width: 600px !important;
    margin-right: 1.3rem !important;
}

.spend-api {
    margin-bottom: 1rem;
}

    .spend-api h2 {
        font-size: 1.2rem;
        font-weight: 400;
    }

.spend-api-row {
    padding: 0 12px;
}

.additional-expenses-wrapper {
    margin-top: 10px;
    border-radius: 12px;
    padding: 12px;
    background: var(--secondary-color-50);
}

    .additional-expenses-wrapper * {
        font-size: 1rem !important;
    }

.spend-api h2.additional-spend-api {
    //font-size: 1.1rem;
    margin: 4px 0;
}

.spend-api-amount {
    text-align: right;
    font-size: 1.2rem;
}

.additional-spend-api-amount {
    //font-size: 1.1rem;
    //margin-top: 10px;
}

.total-billing {
    margin-top: 10px;
}

.expended,
.spend-api-amount span.expended,
.mud-grid-item span.expended {
    color: var(--warning-color-200);
}

.expired,
.spend-api-amount span.expired,
.mud-grid-item span.expired {
    color: var(--error-color-100);
}

.spend-api-amount span.valid {
    color: var(--success-color-200);
}

.spend-api-history {
    flex-basis: calc(100% - 600px - 1.3rem) !important;
    max-width: calc(100% - 600px - 1.3rem) !important;
    background: var(--secondary-color-50);
    overflow: hidden;
    border: 1px solid var(--secondary-color-100);
    border-radius: 1rem;
    height: 100% !important;
}

.spend-api-items-header {
    padding: 1.2rem 2.4rem !important;
    min-height: 30px;
    border-bottom: 1px solid var(--secondary-color-100);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
}

    .spend-api-items-header .mud-grid-item,
    .spend-api-item .mud-grid-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px;
    }

.subscription-table-header span {
    float: left;
    width: calc(100% - 30px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.header-info {
    float: right;
    width: 20px;
    //margin-left: 10px;
    cursor: pointer;
}

.plan-info {
    margin-left: 7px;
}

    .plan-info .header-info {
        float: none;
        position: relative;
        top: 3px;
    }

.spend-api-items {
    height: calc(100% - 60px) !important;
    max-height: calc(100% - 60px) !important;
    min-height: calc(100% - 60px) !important;
    overflow-y: auto;
    padding: 1.2rem !important;
}

.spend-api-item {
    background: #fff;
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    padding: 1.2rem !important;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem !important;
    height: 60px;
    cursor: pointer;
}

    .spend-api-item:last-of-type {
        margin-bottom: 0 !important;
    }

    .spend-api-item:hover {
        box-shadow: 0 0 0 1px var(--secondary-color-300), 0 0 15px 5px rgba(146, 165, 181, 0.15);
    }

.spend-api-item-plan {
    font-weight: 600;
}

.subscription-plan-message {
    border: 0;
    color: #fff;
    margin-bottom: 1rem;
}

    .subscription-plan-message.plan-expires-soon-message {
        background: var(--warning-color);
        color: var(--secondary-color-1000);
    }

    .subscription-plan-message.plan-expired-message {
        background: var(--error-color-100);
    }

.dialog-default.subscription-item-dialog {
    width: 720px;
}

.subscription-dialog-header {
    margin-bottom: 2.2rem;
    text-align: center;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

    .subscription-dialog-header small {
        font-size: 1rem;
        display: block;
        margin-bottom: 0.4rem;
    }

.subscription-dialog-info {
    //padding-top: 2rem;
    font-size: 0.9rem;
    position: relative;
}

    .subscription-dialog-info > .mud-grid {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding-right: 1.8rem;
        height: 100%;
    }

.subscription-item-date {
    margin-bottom: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscription-dialog-total {
    font-weight: 600;
    margin-top: 1.3rem;
    font-size: 1.6rem;
    /**/
    background: var(--secondary-color-50);
    padding: 1.2rem;
    width: 90%;
    border-radius: 1rem;
    text-align: center;
}

    .subscription-dialog-total small {
        display: block;
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

.subscription-dialog-chart {
    border: 1px solid var(--secondary-color-100);
    border-radius: 1rem;
}

.mud-chart-donut .mud-donut-segment {
    stroke-width: 8px !important;
}

.mud-chart-serie:hover {
    filter: none !important;
}

.mud-chart.mud-chart-legend-bottom .mud-chart-legend {
    margin-top: 0;
    padding-top: 0;
}

.mud-chart .mud-chart-legend .mud-chart-legend-item {
    margin: 2px 15px;
}

    .mud-chart .mud-chart-legend .mud-chart-legend-item .mud-chart-legend-marker {
        margin-right: 5px;
    }

.mud-alert-filled-info:has(.subscription-notification-btn) {
    background-color: var(--error-color-100) !important;
}

button.confirm-button.subscription-notification-btn {
    margin-left: 10px;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    box-shadow: none !important;
}

    button.confirm-button.subscription-notification-btn:hover {
        background: rgba(255,255,255,0.2) !important;
    }

    button.confirm-button.subscription-notification-btn:focus {
        box-shadow: 0 0 0 3px rgba(255,255,255,0.2) !important;
    }

/*.donut-inner-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}*/
/* Test */
.main-wrapper {
    background: var(--secondary-color-50);
    position: absolute;
    //top: 80px;
    top: calc(3.5rem + 4px);
    left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem);
}

.main-content-wrapper {
    flex-direction: row;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.test-parameters-sidebar {
    flex-direction: column;
    gap: 1.3rem;
    height: 100%;
}

.test-parameters-header,
.test-parameters-panel,
.test-results-panel {
    background: #fff;
    padding: 1.3rem;
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    position: relative;
}

.test-parameters-header {
    width: 450px;
    flex-basis: 110px;
    margin-right: 1.3rem;
    max-width: 450px;
    //height: 152px;
}

.test-parameters-panel {
    padding: 24px 12px 24px 24px;
}

.test-parameters-panel {
    width: 450px;
    flex-basis: calc(100% - 126px - 1.3rem);
    margin-right: 1.3rem;
    max-width: 450px;
    height: 500px;
}

.test-results-panel {
    width: calc(100% - 450px);
    flex-basis: calc(100% - 450px - 1.3rem);
    max-width: calc(100% - 450px - 1.3rem);
}

.test-toolbar {
    height: 30px;
}

.test-toolbar-actions {
    height: 30px;
    line-height: 30px;
    padding: 0 4px !important;
}

.test-toolbar .promotion-header-icon span {
    height: auto;
    width: auto;
}

    .test-toolbar .promotion-header-icon span:hover {
        background: transparent;
    }

.test-toolbar-actions span {
    display: inline-block;
    margin-right: 12px;
}

    .test-toolbar-actions span img {
        //vertical-align: middle;
        vertical-align: top;
        width: 30px;
    }

.test-action-btn {
    min-width: 30px;
    padding: 0;
    height: 32px;
    line-height: 32px;
    vertical-align: bottom;
    border-radius: 0;
    background: transparent !important;
}

    .test-action-btn[disabled] {
        opacity: 0.3;
    }

.test-toolbar-actions .test-action-btn span {
    margin-right: 0;
}

.test-toolbar-actions .test-action-btn img {
    width: 30px;
    height: auto;
}

.loaded-test-wrapper {
    display: inline-block;
    width: 100%;
    background: var(--secondary-color-50);
    border-radius: 12px;
    padding: 0 0 0 12px;
    height: 35px;
}

.loaded-test {
    display: inline-block;
    text-align: left;
    font-size: 0.75rem;
    height: 35px;
    line-height: 35px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 40px);
    float: left;
    color: #4A5E6D;
}

.remove-loaded-test {
    display: inline-block;
    height: 35px;
    line-height: 45px;
    vertical-align: top;
    width: 40px;
    float: left;
    text-align: center;
    border-left: 1px solid var(--secondary-color-100);
    border-radius: 0 12px 12px 0;
}

    .remove-loaded-test:hover {
        cursor: pointer;
        background: var(--secondary-color-100);
    }

    .remove-loaded-test svg {
        color: var(--secondary-color-1000) !important;
        width: 14px;
        margin-left: -4px;
    }

.promotion-select-dropdown {
    margin-top: 8px;
}

    .promotion-select-dropdown .mud-divider {
        display: none;
    }

.all-promotions p {
    font-weight: 700;
}

.mud-popover .mud-divider {
    margin: 0 auto 0.3rem auto;
    border-color: var(--secondary-color-300);
    width: calc(100% - 24px);
}

.categories {
    //margin-top: 12px;
    padding-right: 12px;
}

.expansion-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 34px;
}

.expansion-title-actions {
    position: absolute;
    top: 3px;
    right: 16px;
}

.test-parameter-btn {
    border-radius: 12px;
    text-align: center;
    height: 72px;
    width: 72px;
    padding: 12px 8px;
    background: var(--secondary-color-50);
}

    .test-parameter-btn:hover {
        cursor: pointer;
    }

    .test-parameter-btn:hover {
        background: var(--secondary-color-100);
    }

    .test-parameter-btn.selected-category {
        background: var(--primary-color-100);
    }

    .test-parameter-btn img {
        filter: brightness(0);
    }

    .test-parameter-btn.selected-category img {
        filter: none;
    }

    .test-parameter-btn h4 {
        text-align: center;
        margin: 4px 0 0 0;
        font-size: 14px;
        color: var(--secondary-color-1000);
        line-height: 16.8px;
        font-weight: 600;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .test-parameter-btn.selected-category h4 {
        color: var(--primary-color);
    }

.category-content {
    width: calc(100% + 24px);
    flex-basis: calc(100% + 24px);
    max-width: calc(100% + 24px);
    //height: calc(100vh - 335px);
    height: calc(100vh - 432px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 5px;
    padding-top: 16px;
    padding-bottom: 27px;
    position: relative;
    padding-right: 12px;
}

    .category-content.dialog-panel-category-content {
        width: calc(100% + 12px);
        flex-basis: calc(100% + 12px);
        max-width: calc(100% + 12px);
        height: calc(100% - 100px);
        margin: 0;
        padding: 5px 12px 0 0;
    }

.dialog-panel-category-content .mud-checkbox span {
    text-align: center !important;
}

.parameter-row {
    margin-bottom: 16px;
}

.test-new-item button img {
    margin-left: 8px;
}

.test-parameters-panel-footer {
    height: 96px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 24px;
}

    .test-parameters-panel-footer .mud-tooltip-root {
        width: 100%;
    }

.test-parameters-panel .custom-accordion.single-accordion {
    margin-bottom: 1.3rem;
}

.test-expected-dd.data-value-input {
    margin: 0;
    min-width: 100% !important;
    max-width: 100% !important;
}

    .test-expected-dd.data-value-input.dd-w-input .mud-select {
        width: calc(100% - 100px);
        min-width: calc(100% - 100px) !important;
    }

    .test-expected-dd.data-value-input.dd-w-input.percent-input .mud-select {
        width: calc(100% - 80px);
        min-width: calc(100% - 80px) !important;
    }

    .test-expected-dd.data-value-input.dd-w-input .mud-input-number-control {
        width: 100px;
    }

    .test-expected-dd.data-value-input.dd-w-input.percent-input .mud-input-number-control {
        width: 80px;
    }

.test-result-receipt {
    border: 1px solid var(--secondary-color-600);
    border-radius: 16px;
    padding: 1.3rem;
    margin-bottom: 1.3rem;
    height: 163px;
}

.test-result-items {
    position: relative;
}

    .test-result-receipt h1,
    .test-result-items h1,
    .receipt-validation h1 {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 24px;
        color: var(--secondary-color-1000);
        margin-bottom: 0.8rem;
        display: inline-block;
    }

    .test-result-items h1 {
        //height: 3rem;
        //line-height: 3rem;
        margin-bottom: 0;
    }

.receipt-title {
    background: var(--primary-color-100);
    border-radius: 12px;
    color: #4A5E6D;
    padding: 12px;
}

.receipt-data-wrapper .receipt-title {
    font-weight: 500;
}

.receipt-result {
    border-radius: 12px;
    border: 1px solid var(--secondary-color-100);
    color: var(--secondary-color-700);
    padding: 12px;
}

.receipt-data-wrapper .receipt-result {
    background: var(--secondary-color-50);
    border: 0;
    color: #4A5E6D;
    font-weight: 500;
}

.discount-price {
    border-radius: 12px;
    padding: 12px;
    background: var(--secondary-color-50);
    color: #4A5E6D;
    font-weight: 500;
    padding-inline: 20px;
}

.discount-indicator {
    float: right;
    margin-right: 15px;
    margin-top: -4px;
    position: relative;
    top: 2px;
}

.final-price {
    float: right;
}

.receipt-title .mud-grid-item,
.receipt-result .mud-grid-item {
    padding: 0 4px;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-validation {
    padding: 1.3rem;
    border-radius: 16px;
    color: #4A5E6D;
    font-weight: 500;
    background: var(--secondary-color-50);
    height: 163px;
    margin-right: 1.3rem;
    text-align: center;
}

    .receipt-validation.test-success {
        border-color: var(--success-color-200);
    }

    .receipt-validation.test-fail {
        border-color: var(--error-color-200);
    }

.receipt-validation-title {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.receipt-result-message {
    margin-bottom: 12px;
    font-size: 16px;
    margin-top: 3px;
}

.item-validator {
    display: block;
    //height: 36px;
    line-height: 36px;
    background: #C2FFF5;
    color: var(--success-color-300);
    font-weight: 500;
    border-radius: 8px;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .item-validator.failed {
        background: #FFBEC5;
        color: var(--error-color-300);
    }

    .item-validator img {
        vertical-align: middle;
        margin-right: 8px;
        position: relative;
        top: -1px;
    }

.item-cards-wrapper {
    /*overflow: hidden;
        overflow-y: auto;
        padding: 10px;
        max-height: calc(100vh - 545px) !important;*/

    overflow: hidden;
    overflow-y: auto;
    padding: 20px 4px 4px 4px;
    height: calc(100vh - 400px) !important;
    margin-right: -8px !important;
    flex-basis: calc(100% + 20px);
    max-width: calc(100% + 26px);
    padding-right: 14px;
}

    .item-cards-wrapper .mud-grid-spacing-xs-1 > .mud-grid-item {
        padding: 8px;
    }

.result-item-wrapper {
    border: 1px solid var(--secondary-color-600);
    border-radius: 1rem;
    padding: 1rem;
}

.test-result-items {
    border: 1px solid var(--secondary-color-600);
    border-radius: 16px;
    padding: 24px;
    //height: calc(100vh - 410px);
    height: calc(100vh - 297px - 1.3rem);
}

.result-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-item-indicator-wrapper {
    float: left;
    margin: 0 5px 0 4px;
    position: relative;
    width: 16px;
    height: 16px;
    top: 6px;
}

    .result-item-indicator-wrapper.receipt-indicator {
        display: inline-block;
        float: none;
        position: relative;
        top: 5px;
        left: 12px;
    }

    .result-item-indicator-wrapper.condition-indicator,
    .result-item-indicator-wrapper.calculation-indicator {
        top: 19px;
        position: absolute;
        left: 163px;
    }

    .result-item-indicator-wrapper.calculation-indicator {
        left: auto;
        right: 0px;
    }

        .result-item-indicator-wrapper.condition-indicator span,
        .result-item-indicator-wrapper.calculation-indicator span {
            height: 8px;
            display: block;
        }

    .result-item-indicator-wrapper.definition-indicator {
        position: absolute;
        top: 18px;
        left: 4px;
    }

.result-item-indicator {
    width: 8px;
    height: 8px;
    background: var(--success-color-200);
    border-radius: 50%;
    display: block;
}

    .result-item-indicator.failed {
        background: var(--error-color-200);
    }

.mud-input-label[for=ddSelectPromotion] {
    margin-top: -5px !important;
}

.search-input .mud-input-label.mud-input-label-outlined {
    transform: translate(14px, 17px) scale(1);
}

.datalist-name-input .mud-input-label.mud-input-label-outlined {
    transform: translate(14px, 12px) scale(1);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined[for=ddSelectPromotion],
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined[for=ddSelectPromotion] {
    transform: translate(14px, -3px) scale(0.75) !important;
}

.test-panel .redirect-msg-box.perform-test-indicator {
    border-radius: 16px;
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-top: 32px;
}

.test-panel .redirect-msg-box.success {
    background: #C2FFF5;
    color: var(--success-color-300);
}

.test-panel .redirect-msg-box.fail {
    background: #FFBEC5;
    color: var(--error-color-300);
}

.accordion-subblock {
    border: 1px solid var(--secondary-color-300);
    padding: 24px;
    border-radius: 16px;
    width: calc(100% - 56px) !important;
    flex-basis: calc(100% - 56px) !important;
    position: relative;
}

.test-item-actions {
    position: absolute;
    top: 0;
    right: -68px;
    text-align: center;
    width: 56px;
}

.test-item-icon {
    display: block;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    vertical-align: bottom;
    margin-bottom: 4px;
}

    .test-item-icon:hover {
        background: var(--secondary-color-50);
    }

    .test-item-icon img {
        vertical-align: middle;
        //max-width: 23px;
    }

.test-panel.result {
    margin-block: 32px;
    border: 1px solid var(--secondary-color-500);
    border-radius: 16px;
    width: 100%;
    padding: 0 !important;
}

.test-result-item-header {
    font-weight: 500;
    color: var(--secondary-color-500);
    border-bottom: 1px solid var(--primary-color);
}

    .test-result-item-header .mud-grid-item {
        padding: 16px 24px !important;
        font-size: var(--font-size-base);
    }

.test-result-total {
    padding: 0 !important;
}

    .test-result-item-row .mud-grid-item,
    .test-result-total .mud-grid-item {
        padding: 0 24px !important;
        font-size: var(--font-size-base);
        height: 56px;
        line-height: 56px;
    }

.test-totals {
    border-top: 1px solid var(--secondary-color-200);
}

.test-item-indicator {
    width: 18px;
    top: 2px;
    position: relative;
}

.dialog-selected-item {
    color: var(--primary-color);
}

.owners-grid .mud-table-cell span {
    text-align: left !important;
}

    .owners-grid .mud-table-cell span.mud-radio-icons {
        text-align: center !important;
        margin-top: -1px;
    }

.dialog-default .mud-dialog-content .owners-grid span {
    font-size: var(--font-size-base);
}

/* ---Test dialog */

.dialog-panel {
    border: 1px solid var(--secondary-color-100);
    border-radius: 1.3rem;
    padding: 1.3rem;
}

    .dialog-panel .mud-table-container {
        border: 1px solid var(--secondary-color);
        border-radius: 1.3rem;
    }

    .dialog-panel .column-header span {
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        line-height: 1.5rem !important;
        width: 20px;
        height: 20px;
    }

.dialog-default.test-dialog .mud-dialog-content span:not(.mud-button-label) {
    display: inline;
    text-align: left;
}

.dialog-default.test-dialog .mud-dialog-content span.column-header,
.dialog-default.test-dialog .mud-dialog-content span.column-options {
    display: flex;
}

.dialog-default.test-dialog .mud-dialog-content span.mud-icon-button-label {
    text-align: center;
    display: flex;
}

.mud-table-row:has(.selected-row) {
    background: var(--secondary-color-50);
}

.grid-cell-text {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dialog-panel-categories {
    height: calc(100% - 30px);
}

    .dialog-panel-categories .test-parameter-btn {
        margin: 0 auto;
        width: 100%;
    }

.dialog-panel .custom-accordion {
    margin-bottom: 0.6rem !important;
}

/* Custom Tabs */
.tabs {
    display: flex;
    position: relative;
    padding: 6px;
    border-radius: 12px;
    background: var(--secondary-color-50);
    height: 47px;
    width: fit-content;
    margin-bottom: 0;
}

    .tabs * {
        z-index: 2;
    }

    .tabs input[type="radio"],
    .tabs input[type="checkbox"] {
        display: none;
    }


    .tabs .mud-input-control-boolean-input {
        opacity: 0;
    }

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 180px;
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 12px;
    transition: color 0.15s ease-in;
    cursor: pointer;
    color: var(--secondary-color-1000);
}

.tabs input[type="radio"]:checked + label,
tabs input[type="checkbox"]:checked + label {
    color: var(--secondary-color-1000);
}


.tabs input[id="radio-1"]:checked ~ .glider {
    transform: translateX(0);
}

.tabs input[id="radio-2"]:checked ~ .glider {
    transform: translateX(100%);
}

.tabs input[id="radio-3"]:checked ~ .glider {
    transform: translateX(200%);
}

.glider.glider-left {
    transform: translateX(0) !important;
}

.glider.glider-right {
    transform: translateX(100%) !important;
}

.glider {
    position: absolute;
    display: flex;
    height: 34px !important;
    width: 180px;
    background-color: #fff;
    z-index: 1;
    border-radius: 10px;
    transition: 0.25s ease-out;
    //box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
}

@media (max-width: 700px) {
    .tabs {
        transform: scale(0.6);
    }
}

/* Snackbar */

.mud-snackbar {
    border-radius: 12px;
    padding-block: 0 !important;
    height: 56px;
}

    .mud-snackbar:has(.subscription-notification-msg) {
        max-width: fit-content;
        width: fit-content;
    }

.mud-alert-filled-success {
    background: var(--success-color-200);
}

.mud-alert-filled-error .mud-snackbar-icon svg {
    display: none;
}

.mud-alert-filled-error .mud-snackbar-icon::before {
    content: url('../img/notification-success.png');
    margin-top: 7px;
}

.mud-alert-filled-error {
    background: var(--error-color-100);
}

    .mud-alert-filled-error .mud-snackbar-icon svg {
        display: none;
    }

    .mud-alert-filled-error .mud-snackbar-icon::before {
        content: url('../img/notification-error.png');
        margin-top: 7px;
    }

.mud-snackbar .mud-icon-button:hover {
    background: rgba(0,0,0,0.06);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--primary-color-100);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color-700);
    }

body:has(.loyalty-theme) ::-webkit-scrollbar-thumb {
    background: var(--loyalty-secondary);
}

/* Loader */

.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255,255,255,0.4);
    z-index: 998;
}

.loader {
    position: fixed;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    z-index: 999;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid var(--primary-color);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader svg {
        display: none;
    }

body:has(.loyalty-theme) .loader {
    border-top: 3px solid var(--loyalty-secondary);
}

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

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

/* Templates */

.test-dialog,
.tpl-dialog {
    width: 80%;
    max-width: 1600px;
    overflow: hidden;
    height: calc(80vh + 64px);
    position: relative;
}

.tpl-dialog {
    background: var(--secondary-color-50);
}

    .test-dialog .mud-dialog-content,
    .tpl-dialog .mud-dialog-content {
        height: 80vh;
    }

.test-dialog-content,
.tpl-dialog-content {
    max-height: calc(80vh - 84px);
    overflow-y: auto;
    margin-top: 10px;
    //padding-right: 8px;
    padding: 15px;
}

.tpl-definition-block {
    //padding-block: 20px !important;
    background: #fff;
    padding: 24px !important;
    border-radius: 16px;
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    margin-bottom: 16px;
}

.tpl-definition-description {
    font-weight: 600;
    font-size: var(--font-size-base);
    //border: 1px solid var(--secondary-color-700);
    border: 1px solid var(--primary-color);
    border-radius: 16px;
    margin-top: 16px;
    padding: 12px 22px !important;
    flex-basis: calc(100% - 20px);
    margin-left: 10px;
    //background: var(--primary-color-100);
}

.tpl-phase-title {
    font-weight: 600;
    margin: 16px 0 22px 0;
    //padding-left: 16px;
    font-size: var(--font-size-base);
    border-radius: 12px;
    background: var(--secondary-color-50);
    min-width: 170px;
    height: 47px;
    line-height: 47px;
    display: inline-block;
    padding: 0 32px;
    flex-basis: auto;
    text-align: center;
}

.tpl-expression-block {
    border-radius: 16px;
    border: 1px solid var(--secondary-color-1000);
    padding: 16px;
    margin-bottom: 6px;
    position: relative;
}

    .tpl-expression-block * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tpl-block-description {
    height: 30px;
    border-bottom: 1px solid var(--secondary-color-300);
    margin-bottom: 10px;
    font-weight: 600;
}

.tpl-expression-label {
    font-weight: 600;
}

.tpl-operator-field {
    color: var(--primary-color);
}

.test-dialog-btn-block,
.tpl-btn-block {
    height: 44px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    padding: 0 !important;
}

.tpl-btn-block {
    box-shadow: 0 0 15px 5px rgba(146, 165, 181, 0.15);
    padding: 12px 24px !important;
    background: #fff;
    border-radius: 16px;
    height: 70px;
    width: calc(100% - 80px);
    bottom: 0;
}

.tpl-expression {
    margin: 2px 0;
    height: 34px;
    line-height: 34px;
}

.tpl-logical-operator {
    border: 1px solid var(--success-color-200);
    color: var(--success-color-200);
    text-align: center;
    width: 40px;
    border-radius: 12px;
    height: 32px;
    line-height: 30px;
}

    .tpl-logical-operator.tpl-logical-operator-or {
        border-color: var(--warning-color-200);
        color: var(--warning-color-200);
    }

.tpl-block-logical-operator {
    margin-bottom: 6px;
}

.tpl-separator {
    height: 1px;
    background: var(--secondary-color-200);
    margin-block: 4px;
}

.tpl-operator-icon {
    //filter: brightness(0);
    margin-left: 6px;
    max-width: 12px;
    max-height: 12px;
    vertical-align: middle;
}

/* Loyalty Program */

.empty-programs-wrapper {
    position: relative;
}

.empty-programs-panel {
    position: absolute;
    top: calc(50% - 60px);
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    .empty-programs-panel h2 {
        margin-bottom: 2rem;
        font-size: 1.2rem;
        font-weight: 400;
    }

.loyalty-program-info {
    border: 1px solid var(--secondary-color-100);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.4rem;
}

h1.loyalty-program-name {
    font-size: 1.2rem;
    line-height: 2rem;
    min-height: 3rem;
    margin-bottom: 0 !important;
    color: var(--secondary-color-1000);
}

    h1.loyalty-program-name small {
        display: block;
        width: 100%;
        font-size: 0.8rem;
        margin-top: -10px;
    }

.loyalty-program-action-grid {
    //margin-inline: -0.4rem;
}

.loyalty-program-action {
    text-align: center;
    padding: 0.4rem !important;
}

.loyalty-program-action-wrapper {
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 0 0 1px var(--secondary-color-100);
    transition: all 0.3s ease-in-out;
}

    .loyalty-program-action-wrapper:hover {
        cursor: pointer;
        background: var(--secondary-color-50);
    }

    .loyalty-program-action-wrapper a {
        display: block;
        padding: 1.2rem 1rem !important;
    }

.loyalty-program-action img {
    width: 28px;
    height: auto;
}

.loyalty-program-action h3 {
    margin-block: 0.4rem;
}

.loyalty-program-quick-action {
    border-radius: 12px;
    //padding: 0.8rem;
    max-width: fit-content;
    transition: all 0.3s ease-in-out;
}

    .loyalty-program-quick-action:hover {
        //cursor: pointer;
        //background: var(--secondary-color-50);
    }

    .loyalty-program-quick-action img {
        margin-right: 8px;
        vertical-align: middle;
        width: 16px;
        height: auto;
    }

    .loyalty-program-quick-action button[disabled] img {
        opacity: 0.6;
    }

    .loyalty-program-quick-action button:not([disabled]) .mud-button-label {
        color: var(--secondary-color-1000);
        font-weight: 400;
    }

    .loyalty-program-levels {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid var(--secondary-color-100);
    }

    .loyalty-program-levels h5 {
        margin-bottom: 0.6rem;
        font-size: 0.8rem;
        color: var(--secondary-color-1000);
    }

    .loyalty-program-levels span {
        color: var(--primary-color);
    }

.loyalty-program-level {
    display: inline-block;
    margin: 0 6px 6px 0;
    border: 1px solid var(--secondary-color-300);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    text-align: center;
    font-size: 0.75rem;
}

/* Loyalty Members */

/*.grid-with-filter-panel .mud-toolbar {
    height: 200px;
    text-align: center;
}*/

.loyalty-members-filter-wrapper {
    background: var(--secondary-color-50);
}

.loyalty-members-filter {
    max-width: 95%;
    flex-basis: 1400px;
    //padding: 2rem;
    //border: 1px solid var(--primary-color-100);
    //border-radius: 1rem;
    margin: 2rem auto 1.5rem auto;
}

.loyalty-members-filter-title {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0 0.8rem;
    font-size: 1.1rem;
    //margin-bottom: 0.2rem;
    margin-bottom: 1rem;
    padding-top: 0.4rem;
}

.loyalty-members-count {
    text-align: center;
    //font-size: 1rem;
    //margin-top: 0.4rem;
    //margin-bottom: 0.6rem;
    font-size: 0.8rem;
    border: 1px solid var(--secondary-color-600);
    width: fit-content;
    margin: 0.8rem auto 0.2rem auto;
    padding: 6px 14px;
    border-radius: 20px;
    //background: rgba(0, 0, 0, 0.03);
}

.mud-select:has(.loyalty-level-dd) {
    flex-grow: unset;
    min-width: 250px;
}

.loyalty-level-dd {
    margin: 0 !important;
    max-width: 100%;
    min-width: auto !important;
}

.loyalty-memeber-filter-inputs {
    border: 1px solid var(--secondary-color-600);
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
}

.filter-or-register {
    position: relative;
    text-align: center;
    box-shadow: -1px 0 var(--secondary-color-300) inset;
}

    .filter-or-register span {
        display: block;
        font-size: 1.1rem;
        position: absolute;
        top: calc(50% + 0.2rem);
        right: 0;
        transform: translate(50%, -50%);
        //display: none;
        border-radius: 50%;
        border: 1px solid var(--secondary-color-300);
        height: 40px;
        line-height: 38px;
        width: 40px;
        text-align: center;
        background: #fff;
    }

.loyalty-members-filter-title.register-title {
    margin-bottom: 2rem;
}

.register-loyalty-member {
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.register-loyalty-member-content {
    /*width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.register-loyalty-member button {
    //position: absolute;
    //top: 50%;
    //left: 50%;
    //transform: translateX(-50%);
    //bottom: 0;
}

.register-loyalty-member .add-button::before {
    top: 0.5rem;
}

.total-members-label {
    margin-left: 24px;
}

/* Loyalty Program Config */

.loyalty-config-section {
    border: 1px solid var(--secondary-color-100);
    padding: 1.5rem;
    border-radius: 1rem;
    height: calc(100vh - 94px);
    overflow: hidden;
}

.config-section-title {
    font-size: 1.6rem;
    line-height: 1.6rem;
    min-height: 2.8rem;
    margin-bottom: 1rem !important;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
    padding-bottom: 1.25rem !important;
}

.mud-list-subheader {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: 21.6px;
    color: var(--secondary-color-1000);
}

.drop-container-wrapper {
    margin-bottom: 1rem;
    position: relative;
}

    .drop-container-wrapper,
    .drop-container-wrapper * {
        user-select: none !important;
    }

        .drop-container-wrapper .mud-background-gray {
            background: var(--secondary-color-50) !important;
        }

.loyalty-tiers-container {
    width: 100%;
    margin-top: 1.5rem !important;
    border-radius: 1rem !important;
}

    /*.loyalty-tiers-container .mud-drop-zone {
        padding-top: 20px;
    }*/

    .loyalty-tiers-container .mud-list.mud-list-padding {
        padding-bottom: 4px;
    }

    .loyalty-tiers-container .mud-drop-item:not(.mud-drop-item-preview-start) {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--secondary-color-300);
        margin-bottom: 0.4rem;
        width: calc(100% - 100px);
        cursor: default;
        position: relative;
    }

        .loyalty-tiers-container .mud-drop-item:not(.mud-drop-item-preview-start) p {
            font-size: 0.8rem;
        }

.loyalty-tier-item {
    padding: 0px 8px;
    cursor: grab;
    position: relative;
    height: 40px;
    line-height: 40px;
}

.tier-order {
    float: left;
    border: 1px solid var(--secondary-color-500);
    border-radius: 50%;
    text-align: center;
    width: 26px;
    height: 26px;
    line-height: 26px;
    margin-right: 8px;
    font-size: 0.6rem;
    margin-top: 7px;
}

.loyalty-tier-actions {
    position: absolute;
    top: 0;
    right: -100px;
    height: 40px;
    line-height: 50px;
    width: 100px;
    text-align: center;
}

    .loyalty-tier-actions .mud-tooltip-root {
        display: none;
    }

.loyalty-tiers-container .mud-drop-item:not(.mud-drop-item-preview-start):hover .loyalty-tier-actions .mud-tooltip-root {
    display: inline-block;
}

.loyalty-tier-actions .grid-button {
    height: 40px;
    width: 40px;
    position: relative;
    top: -5px;
}

    .loyalty-tier-actions .grid-button::after {
        display: none;
    }

    .loyalty-tier-actions .grid-button span {
        display: block;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

        .loyalty-tier-actions .grid-button span img {
            margin: 0;
        }

.loyalty-tier-actions > div {
    display: inline-block;
    text-align: center;
    height: 40px;
}

    .loyalty-tier-actions > div img {
        cursor: pointer;
        margin-left: 10px;
    }

        .loyalty-tier-actions > div img:hover {
            //background: var(--secondary-color-100);
        }

.tier-delete-message {
    text-align: center;
    font-weight: 400;
    margin: 0.6rem auto 1rem auto;
    font-size: 1rem;
}

.disabled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255, 0.4);
    z-index: 4;
}

/* Loyalty Policy */
.policy-column {
    border: 1px solid var(--secondary-color-100);
    border-radius: 1rem;
    padding: 1rem;
    width: fit-content;
    height: calc(100vh - 90px);
}

.policy-col-title {
    margin-bottom: 1rem;
}

.policy-desc {
    margin-bottom: 1rem;
}

.policy-options {
    border-radius: 1rem;
    background: var(--secondary-color-50);
    padding: 1rem;
    width: fit-content;
}

.vertical-radio-btns .mud-icon-button {
    padding: 6px !important;
    margin-left: 6px;
}

.policy-form {
    margin-top: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--secondary-color-50);
    padding: 1rem;
    width: 100%;
}

    .policy-form h4 {
        margin-bottom: 0.6rem;
    }

    .policy-column button {
        margin-top: 1rem !important;
    }

    .policy-section {
        //padding: 0 0.6rem;
    }

.policy-section-header {
    margin-bottom: 1rem;
}

.section-parameter {
    margin-bottom: 1rem;
    border: 1px solid var(--secondary-color-100);
    border-radius: 1rem;
    padding: 1rem;
}

.section-parameter-header .mud-tooltip-root {
    position: relative;
    top: 6px;
    left: 10px;
}

.section-parameter .mud-input-control.form-dd {
    margin-top: 0;
}

.policy-section-table {
    display: flex;
    width: 100%;
    background: var(--secondary-color-50);
    border-radius: 1rem;
    padding: 1rem;
}

.policy-table-column,
.policy-table-cell {
    display: inline-block;
    padding: 6px 0;
}

    .policy-table-column {
        padding: 10px 6px;
    }

.policy-table-column h4 {
    margin-bottom: 0.8rem;
}

.policy-table-cell {
    width: 100%;
}

    .policy-table-cell .mud-input {
        background: #fff;
    }

    .policy-table-cell .mud-input-control {
        margin: 0;
    }

.policy-selection {
    margin-bottom: 1rem;
    padding: 0 0.6rem !important;
}

.policy-config-param-label {
    line-height: 46px;
}

.section-parameter .mud-input-control-helper-container {
    /*position: relative;
    margin-bottom: -5px;*/
    margin: 0 !important;
}

/* Misc */
.opacity-0, .opacity-0 body {
    color: #fff;
}

.redirect-msg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 999999999;
    color: var(--secondary-color-1000);
}

    .redirect-msg > div {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 60%;
        background: var(--secondary-color-50);
        text-align: center;
        padding: 1.3rem;
        border-radius: 16px;
        font-size: 1rem;
    }

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

.input-w-btn-inline {
    width: calc(100% - 39px);
    display: inline-block;
    margin-right: 4px;
}

.icon-btn-wrapper {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    text-align: center;
    top: 10px;
}

    .icon-btn-wrapper.save-organization-wrapper {
        position: absolute;
        right: -35px;
    }

.mud-progress-linear.mud-progress-linear-color-info:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--primary-color);
}

body:has(.loyalty-theme) .mud-progress-linear.mud-progress-linear-color-info:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--loyalty-secondary);
}

.custom-tooltip.subscription-exp-msg {
    background: var(--warning-color) !important;
    z-index: 1304 !important;
}

    .custom-tooltip.subscription-exp-msg::after {
        border-color: var(--warning-color) transparent transparent transparent !important;
    }

.mud-popover-provider .custom-tooltip.subscription-exp-msg {
    z-index: 1401 !important;
}

.ping-animation {
    animation: ping 1s cubic-bezier(0,0,0.2,1) infinite !important;
    opacity: 0.3 !important;
    border-radius: 9999px !important;
    position: absolute !important;
    width: 8px;
    height: 8px !important;
    display: inline-flex !important;
}

    .ping-animation:has(~ .status-invited) {
        background-color: var(--warning-color) !important;
    }

    .ping-animation:has(~ .result-item-indicator.failed), .ping-animation:has(~ .status-expired) {
        background-color: var(--error-color-100) !important;
    }

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.dialog-default .mud-input-control-helper-container {
    margin: 0 !important;
}

.validation-error-panel {
    margin-top: 1rem;
    background: #FFBEC5;
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    color: var(--error-color-300);
}

.loyalty-config-section .validation-error-panel {
    margin-top: 0;
    margin-bottom: 1rem;
}

.mud-dialog:has(.no-scroll),
.no-scroll {
    overflow: hidden !important;
}

/* Responsive */
/*@media screen and (max-width: 2030px) {
    .grid-row-description {
        max-width: calc(30vw - 30px) !important;
    }
}

@media screen and (max-width: 1980px) {
    .grid-row-description {
        max-width: calc(30vw - 50px) !important;
    }
}*/
@media screen and (max-width: 1800px) {
    .item-cards-wrapper .result-item-box {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}
/* Rescaling */
/* 125% / 150% Scaling on 96dpi monitors - vraceno na default */
@media (min-resolution: 120dpi) {
    :root {
        --font-size-base: 1rem; /*16*/
        --font-size-sm: 0.75rem; /*12*/
        --font-size-ml: 1.5rem; /*24*/
        --font-size-l: 2rem; /*32*/
    }
}

.qerdos-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1399;
    background: var(--secondary-color-50);
}

.qerdos-loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .qerdos-loader-content img {
        width: 600px;
        filter: invert(1);
        opacity: 0.1;
        margin-bottom: 60px;
    }

/* Intro JS */
.introjs-tooltipReferenceLayer * {
    font-family: "Manrope", sans-serif;
}

.introjs-tooltip {
    border-radius: 24px;
    padding: 24px;
    min-width: 300px;
}

.introjs-tooltip-header {
    position: static;
    padding: 0;
}

.introjs-skipbutton {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

    .introjs-skipbutton:hover {
        background: var(--secondary-color-100);
    }

.introjs-tooltiptext {
    font-size: var(--font-size-base);
}

.introjs-tooltipbuttons {
    padding: 0;
    border-top: 0;
}

    .introjs-tooltipbuttons .introjs-button {
        border-radius: 12px;
        height: 48px;
        line-height: 48px;
        width: calc(50% - 5px);
        text-align: center;
        padding: 0;
        float: left;
        text-shadow: none;
        font-size: var(--font-size-base);
    }

        .introjs-tooltipbuttons .introjs-button:not(.introjs-disabled) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .introjs-tooltipbuttons .introjs-button:first-child {
            margin-right: 5px;
        }

.introjs-bullets ul li a.active {
    background: var(--primary-color);
}

.introjs-arrow.top {
    left: 24px;
}

.introjs-helperLayer {
    box-shadow: var(--primary-color) 0px 0px 1px 2px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}


/* LOYALTY THEME */

body:has(.loyalty-theme) .mud-primary-text {
    color: var(--loyalty-secondary) !important;
}

.loyalty-theme .mud-drawer.mud-drawer-responsive.main-sidebar {
    background: var(--loyalty-secondary) url(../img/sidebar-sphere.png) no-repeat center bottom;
}

.loyalty-theme .main-navigation.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--loyalty-secondary-light) !important;
}

.loyalty-theme .main-navigation.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--loyalty-primary);
}

.loyalty-theme .main-navigation .mud-nav-link {
    transition: none !important;
}

    .loyalty-theme .main-navigation .mud-nav-link:hover,
    .loyalty-theme .navigation-button:hover {
        //background: var(--loyalty-primary) !important;
        background: var(--loyalty-secondary-light) !important;
        //color: var(--loyalty-secondary);
        color: var(--loyalty-primary);
    }

.loyalty-theme .main-navigation .mud-nav-link {
    //color: var(--loyalty-primary);
}

    .loyalty-theme .main-navigation .mud-nav-link .mud-nav-link-text img,
    .loyalty-theme .lang-btn-wrapper img{
        //filter: brightness(0) saturate(100%) invert(69%) sepia(51%) saturate(883%) hue-rotate(121deg) brightness(91%) contrast(100%);
    }

    .loyalty-theme .main-navigation.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text img,
    .loyalty-theme .main-navigation .mud-nav-link:hover .mud-nav-link-text img {
        //filter: brightness(0) saturate(100%) invert(11%) sepia(19%) saturate(4032%) hue-rotate(196deg) brightness(99%) contrast(115%);
        filter: brightness(0) saturate(100%) invert(69%) sepia(51%) saturate(883%) hue-rotate(121deg) brightness(91%) contrast(100%);
    }


/*.loyalty-theme .navigation-lang-selector::before {
    content: url('../img/language-loyalty.svg');
}*/

.loyalty-theme .mud-appbar h5 {
    color: var(--loyalty-secondary);
}

body:has(.loyalty-theme) .user-icon {
    background: var(--loyalty-secondary);
}

.loyalty-theme .lang-btn:hover,
.loyalty-theme .lang-btn.active {
    color: var(--loyalty-primary);
}

    .loyalty-theme .lang-btn {
        color: #fff;
    }

.loyalty-theme .mud-button-outlined.mud-button-outlined-primary {
    background: var(--loyalty-secondary);
    border-color: var(--loyalty-secondary);
}

.loyalty-theme .custom-switch .mud-switch-track.mud-primary {
    background-color: var(--loyalty-secondary) !important;
}

.loyalty-theme .mud-button-outlined.mud-button-outlined-primary:disabled {
    opacity: 0.6;
}

.loyalty-theme .mud-table-root .mud-table-head .mud-table-cell {
    border-bottom-color: var(--loyalty-secondary);
}

.loyalty-theme .loyalty-program-levels span {
    color: var(--loyalty-secondary);
}

body:has(.loyalty-theme) .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    //border-color: var(--loyalty-secondary) !important;
    box-shadow: 0 0 0 3px var(--loyalty-secondary-outline) !important;
}

body:has(.loyalty-theme) button.confirm-button {
    background: var(--loyalty-secondary) !important;
    border: 1px solid var(--loyalty-secondary) !important;
}

    body:has(.loyalty-theme) button.confirm-button:hover,
    body:has(.loyalty-theme) .mud-button-outlined.mud-button-outlined-primary:hover {
        background: #000 !important;
    }

    body:has(.loyalty-theme) button.confirm-button:focus,
    body:has(.loyalty-theme) button.confirm-button:active {
        box-shadow: 0 0 0 3px var(--loyalty-secondary-outline) !important;
    }

body:has(.loyalty-theme) .mud-button-outlined.mud-button-outlined-primary:hover,
body:has(.loyalty-theme) .mud-button-outlined.mud-button-outlined-primary:focus-visible {
    border: 1px solid var(--loyalty-secondary);
}

body:has(.loyalty-theme) button.confirm-cancel-button {
    border-color: var(--loyalty-secondary);
    color: var(--loyalty-secondary);
}

body:has(.loyalty-theme) .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--loyalty-secondary);
}

body:has(.loyalty-theme) .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--loyalty-secondary);
}

body:has(.loyalty-theme) .mud-picker-paper .mud-current {
    border-color: var(--loyalty-secondary) !important;
    color: var(--loyalty-secondary) !important;
}

body:has(.loyalty-theme) .mud-picker-paper .mud-selected {
    background: var(--loyalty-secondary) !important;
}

body:has(.loyalty-theme) .mud-button-outlined.mud-button-outlined-primary:focus {
    box-shadow: 0 0 0 3px var(--loyalty-secondary-outline);
}

body:has(.loyalty-theme) .mud-picker-month:has(.mud-picker-month-selected),
body:has(.loyalty-theme) .mud-picker-month:has(.mud-picker-month-selected):hover,
body:has(.loyalty-theme) .mud-picker-year:has(.mud-picker-year-selected),
body:has(.loyalty-theme) .mud-picker-year:has(.mud-picker-year-selected):hover {
    background: var(--loyalty-secondary) !important;
}

body:has(.loyalty-theme) .logout-button:hover span {
    color: var(--loyalty-primary) !important;
}

body:has(.loyalty-theme) .logout-button:hover .logout-icon {
    background: url(../img/logout-loyalty-hover.svg);
}

body:has(.loyalty-theme) .custom-switch .mud-switch-track.mud-primary {
    background-color: var(--loyalty-secondary) !important;
}

body:has(.loyalty-theme) .role-info-item .custom-checkbox .mud-icon-root.mud-svg-icon {
    fill: var(--loyalty-secondary) !important;
}

body:has(.loyalty-theme) .base-price {
    color: var(--loyalty-secondary);
}