﻿/*
Radzen override CSS styling - VDGL Control Panel Styling
*/

/*----------------------------------------------------------------------------------------------*/
/*stop left Toggle menu Button*/
/*----------------------------------------------------------------------------------------------*/
.rz-sidebar-toggle {
    -webkit-appearance: none;
    border: none;
    padding: var(--rz-sidebar-toggle-padding);
    margin: var(--rz-sidebar-toggle-margin);
    border-right: transparent;
    background-color: transparent;
    color: white;
}

.rz-sidebar-toggle:hover {
    color: #a5a5a5;
    background: transparent;
    border-radius: var(--rz-sidebar-toggle-hover-border-radius);
}
/*----------------------------------------------------------------------------------------------*/

.rz-panel-menu .rz-navigation-item-icon-children {
    color: var(--ukvd-cp-default-blue);
}
/*----------------------------------------------------------------------------------------------*/
/*Chart custom CSS*/
/*----------------------------------------------------------------------------------------------*/
.rz-category-axis .rz-tick-text {
    font-size: 0.65rem;
}/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/*Rz table td cell height*/
/*----------------------------------------------------------------------------------------------*/
.rz-grid-table td {
    height: 45px;
}
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/*Rz Tabs*/
/*----------------------------------------------------------------------------------------------*/
.rz-tabview-title {
    font-weight: 700;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
}
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/*Rz h font*/
/*----------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-h-headings) !important;
    font-weight: 900;
    /*font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;*/
}
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/*Rz header*/
/*----------------------------------------------------------------------------------------------*/
.rz-header {
    background-color: var(--rz-header-background-color);
}

/*----------------------------------------------------------------------------------------------*/
/*Rz layout and header*/
/*----------------------------------------------------------------------------------------------*/
.rz-layout .rz-header {
    height: 94px;
}
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/*Rz sidebar*/
/*----------------------------------------------------------------------------------------------*/
.rz-sidebar-expanded {
    width: var(--rz-sidebar-width);
    opacity: 1;
    box-shadow: var(--nav-menu-shadow) 0px 0px 19px -4px;
}/*----------------------------------------------------------------------------------------------*/


.rz-dropdown-item, .rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-dropdown-items li, .rz-autocomplete-items li, .rz-multiselect-items li {
    font-weight: 500;
}
.rz-selectable tbody tr.rz-data-row td, .rz-selectable tbody tr.rz-data-row .rz-cell-data {
    font-weight: 500;
}

.rz-menu:not(.rz-profile-menu) .rz-navigation-item {

}

/*----------------------------------------------------------------------------------------------*/
/*Rz Checkbox override*/
/*----------------------------------------------------------------------------------------------*/
.rz-chkbox-box:after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    opacity: 0;
    transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition);
}

.rz-chkbox-box:hover:not(.rz-state-disabled):after {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--rz-base-400);
    opacity: 0.3;
}

.rz-chkbox-box:active:not(.rz-state-disabled):after {
    background-color: var(--rz-base-500);
}

.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after {
    background-color: var(--rz-primary);
    opacity: 0.08;
}

.rz-chkbox-box.rz-state-active:active:hover:not(.rz-state-disabled):after {
    opacity: 0.16;
}

.rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
    box-shadow: var(--rz-input-hover-shadow);
    border: var(--rz-input-hover-border);
}

.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 {
    color: var(--rz-input-disabled-color);
    box-shadow: var(--rz-input-disabled-shadow);
    background-color: var(--rz-input-disabled-background-color);
    border: var(--rz-input-disabled-border);
    opacity: var(--rz-input-disabled-opacity);
}

    .rz-spinner.rz-state-disabled::placeholder, .rz-calendar.rz-state-disabled .rz-inputtext::placeholder, .rz-listbox.rz-state-disabled::placeholder, .rz-autocomplete-input:disabled::placeholder, .rz-state-disabled.rz-autocomplete::placeholder, .rz-state-disabled.rz-multiselect::placeholder, .rz-state-disabled.rz-dropdown::placeholder, .rz-radiobutton-box.rz-state-disabled::placeholder, .rz-chkbox-box.rz-state-disabled::placeholder, .rz-colorpicker:disabled::placeholder, .rz-lookup-search input:disabled::placeholder, .rz-spinner:disabled::placeholder, .rz-calendar .rz-inputtext:disabled::placeholder, .rz-multiselect:disabled::placeholder, .rz-dropdown:disabled::placeholder, .mask:disabled::placeholder, .rz-textarea:disabled::placeholder, .rz-textbox:disabled::placeholder {
        color: var(--rz-input-disabled-placeholder-color);
    }

    .rz-spinner.rz-state-disabled .rz-inputtext, .rz-calendar.rz-state-disabled .rz-inputtext .rz-inputtext, .rz-listbox.rz-state-disabled .rz-inputtext, .rz-autocomplete-input:disabled .rz-inputtext, .rz-state-disabled.rz-autocomplete .rz-inputtext, .rz-state-disabled.rz-multiselect .rz-inputtext, .rz-state-disabled.rz-dropdown .rz-inputtext, .rz-radiobutton-box.rz-state-disabled .rz-inputtext, .rz-chkbox-box.rz-state-disabled .rz-inputtext, .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search input:disabled .rz-inputtext, .rz-spinner:disabled .rz-inputtext, .rz-calendar .rz-inputtext:disabled .rz-inputtext, .rz-multiselect:disabled .rz-inputtext, .rz-dropdown:disabled .rz-inputtext, .mask:disabled .rz-inputtext, .rz-textarea:disabled .rz-inputtext, .rz-textbox:disabled .rz-inputtext {
        background-color: var(--rz-input-disabled-background-color);
        color: var(--rz-input-disabled-color);
    }

:root {
    --rz-checkbox-width: 1.125rem;
    --rz-checkbox-height: 1.125rem;
    --rz-checkbox-border-radius: 2px;
    --rz-checkbox-border-width: 2px;
    --rz-checkbox-label-margin: 0 1rem;
    --rz-checkbox-margin: 1rem 0;
    --rz-checkbox-checked-icon-border-radius: 0;
    --rz-checkbox-icon-width: var(--rz-body-font-size);
    --rz-checkbox-icon-height: var(--rz-body-font-size);
    --rz-checkbox-icon-font-size: var(--rz-body-font-size);
    --rz-checkbox-tri-icon-width: var(--rz-body-font-size);
    --rz-checkbox-tri-icon-height: var(--rz-body-font-size);
    --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size);
    --rz-panel-menu-item-line-height: 2.15rem;
}

.rz-checkbox-list-vertical .rz-checkbox {
    display: flex;
    align-items: center;
    margin: var(--rz-checkbox-margin);
    cursor: pointer;
}

.rz-checkbox-list-horizontal .rz-checkbox {
    display: inline-flex;
    align-items: center;
}

.rz-state-disabled .rz-checkbox {
    cursor: initial;
}

.rz-chkbox-label {
    margin: var(--rz-checkbox-label-margin);
}

.rz-chkbox {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: var(--rz-checkbox-width);
    min-width: var(--rz-checkbox-width);
    height: var(--rz-checkbox-height);
}

.rz-chkbox-box {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--rz-input-border);
    border-width: var(--rz-checkbox-border-width);
    border-radius: var(--rz-checkbox-border-radius);
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color);
    transition: var(--rz-transition-all);
}

.rz-chkbox-box:hover:not(.rz-state-disabled) {
    border-width: var(--rz-checkbox-border-width);
}

.rz-chkbox-box.rz-state-disabled {
    cursor: initial;
    border-width: var(--rz-checkbox-border-width);
}

.rz-chkbox-box .rzi, .rz-chkbox-box .rz-column-drag, .rz-chkbox-box .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-loading-content .rz-chkbox-box .rzi-circle-o-notch, .rz-chkbox-box .rz-datatable-header .rzi-plus, .rz-datatable-header .rz-chkbox-box .rzi-plus, .rz-chkbox-box .rz-sortable-column .rzi-grid-sort, .rz-sortable-column .rz-chkbox-box .rzi-grid-sort, .rz-chkbox-box .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rz-chkbox-box .rzi-chevron-circle-down, .rz-chkbox-box .rz-datatable .rzi-chevron-circle-right, .rz-datatable .rz-chkbox-box .rzi-chevron-circle-right, .rz-chkbox-box .rz-fileupload-row .rz-button .rzi-close, .rz-chkbox-box .rz-fileupload-row .rz-paginator-element .rzi-close, .rz-fileupload-row .rz-button .rz-chkbox-box .rzi-close, .rz-fileupload-row .rz-paginator-element .rz-chkbox-box .rzi-close,
.rz-chkbox-box .rz-fileupload-row .rz-button .rzi-times,
.rz-chkbox-box .rz-fileupload-row .rz-paginator-element .rzi-times,
.rz-fileupload-row .rz-button .rz-chkbox-box .rzi-times,
.rz-fileupload-row .rz-paginator-element .rz-chkbox-box .rzi-times,
.rz-chkbox-box .rz-fileupload-row .rz-button .rz-icon-trash,
.rz-chkbox-box .rz-fileupload-row .rz-paginator-element .rz-icon-trash,
.rz-fileupload-row .rz-button .rz-chkbox-box .rz-icon-trash,
.rz-fileupload-row .rz-paginator-element .rz-chkbox-box .rz-icon-trash, .rz-chkbox-box .rz-menuitem .rz-menuitem-icon, .rz-menuitem .rz-chkbox-box .rz-menuitem-icon {
    width: var(--rz-checkbox-icon-width);
    height: var(--rz-checkbox-icon-height);
    font-size: var(--rz-checkbox-icon-font-size);
    color: var(--rz-checkbox-checked-color);
    vertical-align: middle;
    background-color: var(--rz-checkbox-checked-icon-background-color);
    border-radius: var(--rz-checkbox-checked-icon-border-radius);
}

.rz-chkbox-box .rzi-check:before {
    content: 'check';
}

.rz-chkbox-box .rzi-times {
    width: var(--rz-checkbox-tri-icon-width);
    height: var(--rz-checkbox-tri-icon-height);
    font-size: var(--rz-checkbox-tri-icon-font-size);
}

.rz-chkbox-box .rzi-times:before {
    content: 'remove';
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--rz-checkbox-checked-background-color);
    border: var(--rz-checkbox-checked-border);
}

.rz-chkbox-box.rz-state-active:hover {
    background-color: var(--rz-checkbox-checked-hover-background-color);
    border: var(--rz-checkbox-checked-hover-border);
}

.rz-chkbox-box.rz-state-disabled.rz-state-active {
    background-color: var(--rz-checkbox-checked-disabled-background-color);
    border: var(--rz-checkbox-checked-disabled-border);
    opacity: 0.5;
}

.rz-chkbox-box.rz-state-disabled.rz-state-active:hover {
    background-color: var(--rz-checkbox-checked-disabled-background-color);
}
/*----------------------------------------------------------------------------------------------*/
/* End > Rz Checkbox override*/
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/
/* Radzen Datagrid column titles override*/
/*----------------------------------------------------------------------------------------------*/
.rz-grid-table-fixed .rz-frozen-cell {
    position: -webkit-sticky;
    position: sticky;
    background: #242a33;
    /* border-right: var(--rz-grid-frozen-cell-border) !important; */
    box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.12);
    z-index: 1;
    color: white;
    border-right-color: #6e7581;
}

.rz-datatable-thead th,
.rz-grid-table thead th {
    background-color: #3c434d;
    padding: 0px 8px 0px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: var(--rz-grid-header-cell-border-bottom);
}

    .rz-datatable-thead th .rz-column-title,
    .rz-grid-table thead th .rz-column-title {
        display: inline-flex;
        flex: auto;
        width: 100%;
        align-items: center;
        font-size: var(--rz-grid-header-font-size);
        line-height: var(--rz-grid-header-line-height);
        text-transform: var(--rz-grid-header-text-transform);
        color: #ffffff;
        padding: var(--rz-grid-header-title-padding);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.rz-datatable-thead th:not(:last-child),
.rz-grid-table thead th:not(:last-child) {
    border-right: var(--rz-grid-header-cell-border);
    border-right-color: #6e7581;
}

.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th {
    border-bottom: var(--rz-grid-header-cell-border);
    border-bottom-color: #6e7581;
}

.rz-datatable-thead th .rz-column-title-content, .rz-grid-table thead th .rz-column-title-content {
    display: inline-block;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.73rem;
}

.rz-grid-filter-icon {
    color: #ffffff;
}

/*----------------------------------------------------------------------------------------------*/
/* Radzen Dialogue & Title bar - override*/
/*----------------------------------------------------------------------------------------------*/
.rz-dialog {
    border: 1px solid var(--ukvd-dialogue-border-colour);
}

.rz-dialog-title {
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: 0rem;
    color: #ffffff;
}

.rz-dialog-titlebar {
    background-color: var(--ukvd-dialogue-title-background-colour);
    padding: 0.8rem;
    font-size: var(--rz-dialog-title-font-size);
    line-height: var(--rz-dialog-title-line-height);
    border-bottom: var(--rz-dialog-title-border);
    /*box-shadow: #000000 -2px 0px 14px 0px;*/
}

/*----------------------------------------------------------------------------------------------*/
/* Radzen Icon override*/
/*----------------------------------------------------------------------------------------------*/
i.rzi {
    font-variation-settings: 'FILL' 1;
}

/*.rz-menu:not(.rz-profile-menu) .rz-navigation-menu {*/
    /*background-color: #616161;*/
/*}*/
.rz-button.rz-variant-outlined.rz-light.rz-shade-default {
    box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-light-button-colour);
    color: var(--rz-light-button-colour);
}

/*----------------------------------------------------------------------------------------------*/
/* Radzen <p> class re-added*/
/*----------------------------------------------------------------------------------------------*/
.rz-card p {
    margin-bottom: 0;
}