:root {
    --bs-gutter-x: 0; /* Bootstrap variable for spacing between elements. If it causes problems (it caused problems on the Dialog Questions buttons), remove it. By default it is I believe 1.5em */
    --bs-font-sans-serif: "Roboto";
    --rz-primary: #012a56;
    --rz-text-color: #000000;
    --rz-base-900: #333333;
    --vp-paginator-button-color: #aaa;
    /* 
        Radzen - Sidebar panel 
    */
    --rz-panel-menu-background-color: #1f1f1f;
    --rz-panel-menu-item-background-color: #1f1f1f;
    --rz-panel-menu-color: #ccc; /* Sidebar group font color */
    --rz-panel-menu-font-size: 1rem;
    --rz-panel-menu-font-weight: 300;
    --rz-panel-menu-icon-margin: 0 0.6rem 0 0;
    --rz-panel-menu-hover-background-color: #777777; /* VPower Hovered Top Menu Item */
    --rz-panel-menu-hover-color: #333333;
    --rz-panel-menu-item-padding: 0.75rem 0.9rem;
    /*--rz-panel-menu-item-line-height: 2.45rem;*/ /* Commented out for foldable sidemenu */
    --rz-panel-menu-item-active-indicator: #ffffff;
    --rz-panel-menu-item-2nd-level-active-background-color: #333333;
    --rz-panel-menu-item-2nd-level-active-color: #ffffff;
    --rz-panel-menu-icon-2nd-level-icon-size: 1.3em;
    --rz-panel-menu-item-2nd-level-padding: 0.75rem;
    --rz-panel-menu-icon-2nd-level-margin: 0 0.6rem 0 -1.625rem;
    --rz-panel-menu-item-2nd-level-color: #ccc; /* Sidebar item font color */
    --rz-panel-menu-item-2nd-level-hover-background-color: #777777; /* VPower Hovered 2nd level menu item */
    --rz-panel-menu-item-2nd-level-hover-color: #333333;
    --rz-panel-menu-item-2nd-level-offset: 2.5rem; /* Left margin for 2nd level menu item */
    --rz-panel-menu-item-3rd-level-hover-background-color: #777777; /* VPower Hovered 2nd level menu item */
    --rz-panel-menu-item-3rd-level-hover-color: #333333;
    --rz-panel-menu-icon-color: : green; /* rgb(204, 204, 204); */
    --rz-menu-item-hover-color: red;
    /* 
        Radzen - Grid 
    */
    /*--rz-grid-cell-padding: 1.5rem 0.5rem;*/
    --rz-grid-filter-color: #aaaaaa;
    --rz-grid-header-filter-icon-active-color: red;
    --rz-grid-header-font-weight: 300; /* Header font weight */
    /* Grid Paginator */
    --rz-paginator-first-button-color: var(--vp-paginator-button-color);
    --rz-paginator-back-button-color: var(--vp-paginator-button-color);
    --rz-paginator-next-button-color: var(--vp-paginator-button-color);
    --rz-paginator-last-button-color: var(--vp-paginator-button-color);
    /* 
        Dialogs
    */
    --rz-dialog-content-padding: 0.4rem 0rem;
    --rz-dialog-title-background-color: #fff;
    --rz-dialog-title-border: solid 1px #cccccc;
    --rz-dialog-title-padding: 0.6875rem 0rem;
    --rz-dialog-close-color: #333333;
    /* 
        Tabs
    */
    --rz-tabs-tab-color: #777777;
    --rz-tabs-tab-selected-top-border-color: var(--rz-primary);
    --rz-tabs-tab-hover-color: var(--rz-primary);
    --rz-tabs-padding: 1.2rem 0rem;
    /*
        Editors
    */
    --rz-input-shadow: none;
    --rz-input-border: solid 1px #aaaaaa;
    --rz-fieldset-border-radius: 4px;
    --rz-fieldset-legend-color: #aaaaaa;
    --rz-fieldset-border: solid 1px #aaaaaa;
    --rz-datepicker-trigger-icon-color: #777777;
    --rz-switch-checked-background-color: var(--rz-primary);
    --rz-upload-choose-background-color: var(--rz-primary);
    --rz-upload-button-bar-background-color: #fff;
    --rz-upload-button-bar-padding: 0;
}

body {
    background-color: #fff; /* VPower */
}

.rz-button.rz-primary.rz-shade-default,
.rz-primary.rz-shade-default.rz-paginator-element {
    background-color: #012a56;
    /*padding: 0;*/
}


.rz-paginator {
    border-top: solid 1px #dde3e8;
}

.rz-paginator-element {
    font-weight: 300;
}

.rz-button-md {
    font-weight: 300;
}

.rz-paginator-page.rz-state-active {
    border-color: #aaa;
}

/* Paginator page size */
.rz-paginator .rz-dropdown {
    border-color: #777777;
    max-width: 70px;
}

.rz-dropdown {
    box-shadow: none;
}

/* Combo box - inline-flex caused padding on the top making it look different than the rest of the components */
.rz-multiselect, .rz-dropdown {
    box-sizing: border-box;
    /* display: inline-flex; */
    flex-direction: column;
    position: relative;
    overflow: hidden;
}


/* Grid small action buttons */
/*.rz-grid-table .rz-cell-data .rz-button-sm.rz-button-icon-only {
    padding: 0 0.25rem;
    border-radius: 4px;
    background-color: #dde3e8;
    color: #555555;
    width: 20px;
    height: 20px;
    min-height: 1rem;
    min-width: 1rem;
}
*/

/* Grid small action buttons - NEW as of 17.5.2023 */
.rz-grid-table .rz-cell-data .rz-button-sm.rz-button-icon-only {
    padding: 0;
    border-radius: 4px;
    background-color: #dde3e8;
    color: #555555;
    width: 20px;
    height: 20px;
    min-height: 1rem;
    min-width: 1rem;
}

/* Grid small action buttons - icons */
.rz-button-sm .rzi {
    /*font-size: var(--rz-icon-size);*/
    font-size: 15px;
}
/* Edit form */
.rz-dialog-wrapper .rz-dialog {
    /* Setting padding around dialog */
    padding: 1.2em 2.4em;
    margin-top: 0.6em;
}

@media (max-width: 768px){
    .rz-dialog-wrapper .rz-dialog {
        /* Setting padding around dialog */
        left: 0 !important;

    }
}

@media (max-width: 1200px) {
    .rz-dialog-wrapper .rz-dialog {
        /* Setting padding around dialog */
        top: 0 !important;
    }
}

.rz-dialog-wrapper .rz-dialog-content {
    padding: 0em 0em 0em 0em;
    overflow-x: hidden;
}



/* Tabs */
.rz-tabview-panels {
    border: none;
    border-top: solid 1px #cccccc;
}


.rz-datatable-emptymessage-row {
    font-size: 14px;
}

/* Switch */
.rz-switch { display: block; }


.rz-fileupload-choose {
    font-weight: 300;
}



/*
    Data grid
*/
.rz-grid-table {
    border-bottom: solid 1px #eee;
}



/* VPower - Custom Grid Column */
.grid-column-strong {
    font-weight: bold;
}


/* VPower - DropDown available item */
.drop-down-item-available {
    color: black;
    font-weight: bold;
    font-size: 14px;
    padding: 0px 0px 0px 10px;
}

/* VPower - DropDown not-available item */
.drop-down-item-unvailable {
    color: #c4c4c4;
    font-weight: bold;
    font-size: 14px;
    /* Commented out on 17.3.2022 because this was shifting the items on the security roles edit form combo */
    /*padding: 7px 7px 7px 10px;*/
}


/*
    Panel menu - Sidebar
*/
/*.rz-panel-menu .rz-navigation-item-icon {
    height: var(--rz-panel-menu-icon-height);
    width: var(--rz-panel-menu-icon-width);
    color: rgb(204, 204, 204);
    margin: var(--rz-panel-menu-icon-margin);
    font-size: var(--rz-panel-menu-icon-font-size);
    transition: var(--rz-panel-menu-item-transition);
}*/


/* Radzen upload button */
.rz-fileupload-choose:not(.rz-state-disabled) {
    height: 36px;
    /*margin-top: 20px;*/
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 8px;
}

.non-scrollable-rz-dialog-content {
    overflow-y: hidden !important;
}


@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/MaterialSymbols-Outlined.woff2') format('woff2');
}

.material-symbols-outlined {
    --rz-icon-font-family: 'Material Symbols Outlined';
}