:root {
    /* Primary */
    --dl-primary-color: #5E2FBC;
    --dl-primary-dark-color: #4B2696;
    --dl-primary-darker-color: #381C71;
    --dl-primary-light-color: rgba(94, 47, 188, 0.50);
    --dl-primary-lighter-color: rgba(94, 47, 188, 0.35);
    --rz-primary: var(--dl-primary-color);
    /* Secondary */
    --dl-secondary-color: rgba(94, 47, 188, 0.25);
    --dl-secondary-light-color: rgb(212,192,252);
    --rz-secondary: var(--dl-secondary-color);
    --rz-secondary-lighter: var(--dl-secondary-light-color);
    /*RadzenChart*/
    --rz-series-1: var(--dl-primary-darker-color);
    --rz-series-2: var(--dl-primary-dark-color);
    --rz-series-3: var(--dl-primary-color);
    --rz-series-4: var(--dl-primary-light-color);
    --rz-series-5: var(--dl-primary-lighter-color);
    --rz-series-6: var(--dl-secondary-color);
    --rz-series-7: var(--dl-secondary-light-color);
    /*Selectbar*/
    --rz-selectbar-selected-color: var(--dl-primary-color);
    --rz-selectbar-selected-background-color: var(--dl-secondary-light-color);
    /* RadzenLayout*/
    --rz-sidebar-background-color: var(--dl-secondary-light-color);
    --rz-panel-menu-background-color: var(--dl-primary-color);
    --rz-panel-menu-color: #fff;
    --rz-panel-menu-icon-color: #fff;
    --rz-header-background-color: var(--dl-primary-color);
    /* tooltips */
    --rz-tooltip-background-color: var(--dl-primary-darker-color);
    /* Info */
    --dl-info-color: #009DDB;
    --dl-info-light-color: rgba(0, 157, 219, 0.15);
    --dl-info-lighter-color: rgba(0, 157, 219, 0.04);
    /*--dl-info-lightest-color: #f5f9fb;*/
    /* Success */
    --dl-success-color: #00A053;
    --dl-success-light-color: rgba(0, 160, 83, 0.15);
    /* Warning */
    --dl-warning-color: rgba(252, 147, 40, 1);
    --dl-warning-light-color: rgba(252, 147, 40, 0.15);
    /* Danger */
    --dl-danger-color: rgba(224, 32, 32, 1);
    --dl-danger-light-color: rgba(224, 32, 32, 0.15);
    /*Upload Button*/
    --rz-upload-button-bar-background-color: "";
    /* Shade */
    --dl-shade-color: #D9D9DA;
    --dl-shade-200-color: #F6F6F7;
    --rz-grid-selected-color: #F6F6F7;
    --dl-shade-300-color: #F0F0F1;
    --dl-shade-800-color: #717175;
    --dl-shade-900-color: #333340;
    /* Gradient4*/
    --dl-Gradient4-color50: rgba(221, 241, 221, 0.5);
    --dl-Gradient4-color100: rgba(221, 241, 221, 1);
    /* Gradient5*/
    --dl-Gradient5-color50: rgba(249, 237, 217, 0.5);
    --dl-Gradient5-color100: rgba(254, 247, 234, 1);
    /* Gradient6*/
    --dl-Gradient6-color50: rgba(232, 239, 250, 0.5);
    --dl-Gradient6-color100: rgba(240, 246, 255, 1);
    /* Gradient7*/
    --dl-Gradient7-color50: rgba(250, 232, 232, 0.5);
    --dl-Gradient7-color100: rgba(255, 240, 240, 1);
    /*Datagrid*/

    --rz-dropdown-item-selected-color: #fff;
    --rz-grid-hover-background-color: var(--dl-secondary-light-color);
    --rz-grid-hover-color: #424242;
    --rz-grid-header-color: #fff;
    --rz-grid-header-background-color: var(--dl-primary-color);
    /*Dialog*/
    --rz-dialog-title-color: var(--dl-shade-200-color);
    --rz-dialog-title-background-color: var(--dl-primary-color);
    --rz-dialog-title-padding: 1rem;
    --rz-dialog-title-padding-block: 1rem;
    /*Radiobutton*/
    --rz-radio-checked-background-color: #fff;
    --rz-radio-checked-hover-background-color: var(--dl-secondary-light-color);
    --rz-radio-circle-background-color: var(--dl-primary-color);
    /*Radiobutton*/

    --rz-radio-checked-background-color: #fff;
    --rz-radio-checked-hover-background-color: var(--dl-secondary-light-color);
    --rz-radio-circle-background-color: var(--dl-primary-color);
    /*Progressbar*/
    --rz-progressbar-value-background-color: var(--rz-primary);
    --rz-progressbar-background-color: var(--rz-base-200);
    --rz-progressbar-font-size: var(--rz-body-font-size);
    --rz-progressbar-height: 1.25rem;
    --rz-progressbar-border-radius: var(--rz-border-radius);
}
/*Dropdown Menu*/
.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link {
    color: var(--rz-panel-menu-color);
    white-space: nowrap;
    background-color: var(--dl-primary-color);
}

.rz-menu
a.rz-navigation-item-link.active {
    color: var(--rz-secondary);
}

    .rz-menu
    a.rz-navigation-item-link.active
    i.rzi.rz-navigation-item-icon {
        color: var(--rz-secondary);
    }

.navigation-item-wrapper-active:before {
    background-color: var(--dl-secondary-color);
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-menu {
    background-color: var(--dl-primary-color);
    border-radius: 0px 0px 3px 3px;
}

    .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) {
        color: var(--rz-panel-menu-color);
    }


html, body {
    color: var(--dl-shade-900-color) !important;
    font-family: 'Red Hat Text', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dl-shade-900-color);
    font-family: 'Red Hat Text', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--dl-shade-900-color);
    font-family: 'Red Hat Text', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/*Dialog*/
.rz-dialog-titlebar-close .rzi-times {
    color: #fff !important;
}

.rz-dialog-titlebar-close:hover .rzi-times:hover {
    color: var(--rz-secondary-lighter) !important;
}
/*HeaderTemplate Button*/

.rz-group-header button {
    background: #fff !important;
    border: 1px solid var(--dl-primary-light-color) !important;
    color: var(--dl-primary-color) !important;
}

    .rz-group-header button:hover {
        background: var(--rz-secondary-lighter) !important;
    }

/* Scrollbar */
body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb {
    background: var(--dl-primary-light-color) !important;
}

/* Input */
.rz-textbox, .rz-spinner-input, .rz-textarea, input.rz-inputtext, .rz-dropdown {
    border-radius: 4px !important;
    border: 1px solid var(--dl-shade-color) !important;
    background: #fff !important;
    box-shadow: none;
    vertical-align: middle;
}


    .rz-textbox:focus, .rz-textbox:hover,
    .rz-spinner-input:focus, .rz-spinner-input:hover,
    .rz-textarea:focus, .rz-textarea:hover,
    input.rz-inputtext:focus, input.rz-inputtext:hover,
    .rz-dropdown:focus, .rz-dropdown:hover {
        border: 1px solid var(--dl-primary-color) !important;
    }

.rz-variant-text .label {
    font-size: 1em;
}

.rz-variant-text .rz-text-truncate {
    padding-left: 0.7em;
}

.rz-textbox:focus {
    border: none !important;
}

.rz-textbox:disabled, .rz-spinner-input:disabled, .rz-textarea:disabled, input.rz-inputtext:disabled, .rz-dropdown:disabled {
    border: 1px solid var(--dl-shade-300-color) !important;
    background: var(--dl-shade-300-color) !important;
    box-shadow: none;
    vertical-align: middle;
}

.rz-spinner.rz-state-disabled, .rz-calendar.rz-state-disabled .rz-inputtext, .rz-listbox.rz-state-disabled, .rz-autocomplete-input:disabled, .rz-state-disabled.rz-autocomplete, .rz-state-disabled.rz-multiselect, .rz-state-disabled.rz-dropdown, .rz-radiobutton-box.rz-state-disabled, .rz-chkbox-box.rz-state-disabled, .rz-colorpicker:disabled, .rz-lookup-search input:disabled, .rz-spinner:disabled, .rz-calendar .rz-inputtext:disabled, .rz-multiselect:disabled, .rz-dropdown:disabled, .mask:disabled, .rz-textarea:disabled, .rz-textbox:disabled {
    box-shadow: none;
    border: 1px solid var(--dl-shade-300-color) !important;
}

/* Numeric */
.rz-spinner {
    border: none !important;
}

.rz-spinner-button {
    right: 7px !important;
    background: var(--dl-primary-color) !important;
    color: var(--rz-button-base-color)
}

.rz-spinner:hover .rz-spinner-button, .rz-spinner:focus .rz-spinner-button {
    background: var(--dl-primary-dark-color) !important;
}
/* Input DatePicker */
.rz-datepicker-calendar td .rz-state-active, .rz-datepicker-calendar td .rz-state-default:hover {
    background: var(--dl-primary-light-color) !important;
}

.rz-datepicker-trigger {
    color: var(--dl-primary-light-color);
}

    .rz-datepicker-trigger:hover {
        color: var(--dl-primary-color) !important;
    }


/* Button */
.btn-primary {
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.btn-primary, .rz-primary, .rz-apply-filter, .rz-clear-filter {
    background: var(--dl-primary-color) !important;
    border: 1px solid var(--dl-primary-color) !important;
    color: #fff !important;
}

    .btn-primary:hover, .rz-primary:hover {
        background: var(--dl-primary-dark-color) !important;
        border: 1px solid var(--dl-primary-dark-color) !important;
        box-shadow: none !important;
    }

    .btn-primary:active, .rz-primary:active {
        background: var(--dl-primary-darker-color) !important;
        border: 1px solid var(--dl-primary-darker-color) !important;
    }

    .btn-primary:disabled, .rz-primary:disabled { /* background: var(--dl-primary-color) !important;
    border-color: var(--dl-primary-lighter-color) !important;*/
    }

.btn-secondary, .rz-secondary {
    background: #fff !important;
    border: 1px solid var(--dl-primary-color) !important;
    color: var(--dl-primary-color) !important;
}

    .btn-secondary:hover, .rz-secondary:hover {
        background: var(--dl-secondary-light-color) !important;
    }

    .btn-secondary:active, .rz-secondary:active {
        background: var(--dl-secondary-light-color) !important;
    }

    .btn-secondary:disabled, .rz-secondary:disabled {
        /*    color: var(--dl-primary-lighter-color) !important;
    border-color: var(--dl-primary-lighter-color) !important;*/
    }

.btn-light, .rz-light {
    background: transparent !important;
    border: 0px !important;
    color: var(--dl-primary-color) !important;
}

    .btn-light:hover, .rz-light:hover {
        background: var(--dl-primary-lighter-color) !important;
    }

    .btn-light:active, .rz-light:active {
        background: var(--dl-primary-light-color) !important;
    }

    .btn-light:disabled, .rz-light:disabled {
        /*  color: var(--dl-primary-lighter-color) !important;
  border-color: var(--dl-primary-lighter-color) !important;*/
    }

/* Dropdown selected item */
.rz-dropdown-item.rz-state-highlight, .rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-dropdown-items li.rz-state-highlight, .rz-autocomplete-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight {
    background: var(--dl-primary-light-color) !important;
    color: var(--dl-shade-900-color);
}
/* Dropdown hover item */
.rz-dropdown-item:hover, .rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-dropdown-items li:hover, .rz-autocomplete-items li:hover, .rz-multiselect-items li:hover {
    background: var(--dl-primary-light-color) !important;
    color: var(--dl-shade-900-color);
}

/* Dropdown hover selected item */
.z-dropdown-item.rz-state-highlight:hover, .rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover {
    color: var(--dl-shade-900-color);
}
/* Checkbox */
.rz-chkbox-box {
    border: 1px solid var(--dl-primary-color) !important;
    border-radius: 5px !important;
}

    .rz-chkbox-box.rz-state-active {
        background: var(--dl-primary-color) !important;
    }

/* Switch */
.rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--dl-primary-color) !important;
}

/* Notifications */
.rz-growl-message {
    padding-left: 35px;
    color: var(--dl-shade-800-color) !important;
}

.rz-growl-icon-close {
    color: var(--dl-shade-color) !important;
}

.rz-growl-title {
    color: var(--dl-shade-900-color) !important;
}

.rz-growl-item {
    border-radius: 4px 10px 10px 4px !important;
}

.rz-growl-message-info .rz-growl-item {
    background: linear-gradient(to right,var(--dl-Gradient6-color100), var(--dl-Gradient6-color50));
    border-left: 4px solid var(--dl-info-color) !important;
}

.rzi-info-circle {
    color: var(--dl-info-color);
}

.rz-growl-message-success .rz-growl-item {
    background: linear-gradient(to right,var(--dl-Gradient4-color100), var(--dl-Gradient4-color50));
    border-left: 4px solid var(--dl-success-color) !important;
}

.rz-growl-message-success .rz-growl-image {
    color: var(--dl-success-color) !important;
}

.rz-growl-message-warn .rz-growl-item {
    background: linear-gradient(to right,var(--dl-Gradient7-color100), var(--dl-Gradient7-color50));
    border-left: 4px solid var(--dl-warning-color) !important;
}

.rz-growl-message-warn .rz-growl-image {
    color: var(--dl-warning-color) !important;
}

.rz-growl-message-error .rz-growl-item {
    background: linear-gradient(to right,var(--dl-Gradient7-color100), var(--dl-Gradient7-color50));
    border-left: 4px solid var(--dl-danger-color) !important;
}

.rz-growl-message-error .rz-growl-image {
    color: var(--dl-danger-color) !important;
}

/* Guide */
.rz-steps .rz-state-highlight .rz-steps-number {
    background: var(--dl-primary-color) !important;
}

.rz-steps-number {
    background: var(--dl-primary-light-color) !important;
    color: #fff !important;
}

.rz-steps .rz-state-highlight .rz-steps-title {
    border-bottom: 2px solid var(--dl-primary-color) !important;
    font-weight: bold;
}

.rz-steps-title {
    color: var(--dl-shade-900-color) !important;
}

/* DataGrid */
span.rz-column-title {
    padding: 0 0 0 10px !important;
}


.rz-group-header-drop {
    color: white;
}

.rz-column-drag {
    color: white;
}

.rz-datatable {
    border: none;
    border-radius: 4px;
}

.rz-datatable-thead th, .rz-datatable-thead th.rz-composite-cell, .rz-grid-table thead th, .rz-grid-table thead th.rz-composite-cell {
    border: none;
}

.rz-datatable-data td, .rz-datatable-data td.rz-composite-cell, .rz-grid-table td, .rz-grid-table td.rz-composite-cell {
    border-right: none;
}

.rz-selectable .rz-datatable-even.rz-state-highlight > td, .rz-selectable .rz-datatable-odd.rz-state-highlight > td, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: var(--dl-primary-light-color) !important;
}

.rz-selectable .rz-datatable-even:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell), .rz-selectable .rz-datatable-odd:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell) {
    background-color: var(--dl-primary-light-color) !important;
}

.rz-selectable .rz-datatable-even:hover:not(.rz-state-highlight) .rz-cell-data,
.rz-selectable .rz-datatable-odd:hover:not(.rz-state-highlight) .rz-cell-data {
    color: var(--dl-hover-text-color) !important;
}


.rz-datatable-data td, .rz-grid-table td {
    padding: 0.5rem 0.625rem 0.5rem 0.625rem;
    border: none;
}

.rz-datatable-odd > td {
    background-color: var(--dl-primary-lighter-color);
    border: none;
}

.rz-paginator-page {
    background-color: var(--dl-primary-lighter-color) !important;
}

    .rz-paginator-page.rz-state-active {
        background-color: var(--dl-primary-light-color) !important;
        color: inherit !important;
    }

.rz-paginator-last, .rz-paginator-next, .rz-paginator-first, .rz-paginator-prev {
    background-color: var(--dl-primary-lighter-color) !important;
    color: inherit !important;
    border-radius: 50%;
}

div.rz-data-grid-data > table > thead > tr:nth-child(2) > th:nth-child(1n+1) {
    background-color: var(--rz-grid-filter-background-color) !important;
}


/* DataGrid - datepicker */
.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover:not(.rz-state-highlight) {
    background-color: var(--dl-primary-light-color) !important;
    color: var(--dl-hover-text-color);
    border-radius: 4px;
}

.rz-listbox-item.rz-state-highlight {
    background-color: var(--dl-primary-color) !important;
}









/* Textbox with label */
.textbox-with-label-wrapper .rz-textbox, .textbox-with-label-wrapper .rz-spinner {
    flex-grow: 1;
    /*width: 300px;*/
}

.textbox-with-label-wrapper {
    position: relative;
    display: flex;
}


    .textbox-with-label-wrapper > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 50%;
        pointer-events: none;
        width: 25px;
        text-align: center;
        font-style: normal;
        right: 0;
    }

.textbox-with-labwel-wrapper > input {
    padding-left: 30px;
    padding-right: 0;
    padding-left: 10px;
    padding-right: 30px;
    width: 100%;
    text-align: left;
}

.loading-spinner-container {
    height: 100%;
    align-items: center;
    justify-content: center !important;
    display: flex !important;
    box-sizing: border-box;
}

/*SelectBar style*/
.rz-selectbutton .rz-button.rz-state-active, .rz-selectbutton .rz-state-active.rz-paginator-element {
    background-color: var(--dl-primary-color);
    color: #ffffff;
    border: solid 1px var(--dl-primary-color);
}





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

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

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

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

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

.clickable-icon-wrapper {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s;
}

@font-face {
    font-family: Red Hat Text;
    src: url(../Fonts/RedHatText/RedHatText-Regular.ttf);
    font-weight: normal
}

@font-face {
    font-family: Red Hat Text;
    src: url(../Fonts/RedHatText/RedHatText-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: Red Hat Text;
    src: url(../Fonts/RedHatText/RedHatText-Bold.ttf);
    font-weight: bold
}

@font-face {
    font-family: Red Hat Text;
    src: url(../Fonts/RedHatText/RedHatText-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Red Hat Text;
    src: url(../Fonts/RedHatText/RedHatText-Bold.ttf);
    font-weight: 500;
}