:root {
    --rz-primary: #145388;
    --rz-primary-dark: #10426d;
    --rz-primary-darker: #0c3252;
    --rz-primary-light: #0369AA;
    --rz-primary-lighter: rgba(20, 83, 136, 0.12); /* same color as --rz-primary but expressed in rbg with added opacity */
    --rz-on-primary-lighter: var(--rz-primary);

    --rz-sidebar-background-color: var(--rz-primary);
    --rz-panel-menu-item-background-color: #00000000;
    --rz-panel-menu-item-color: var(--rz-base-500); /*= #9e9e9e*/
    --rz-panel-menu-icon-color: var(--rz-base-500);
    --rz-panel-menu-item-hover-background-color: var(--rz-primary-light);
    --rz-panel-menu-item-hover-color: var(--rz-base-50); /*= #fafafa*/
    --rz-panel-menu-item-active-background-color: var(--rz-primary-light);
    --rz-panel-menu-item-active-color: var(--rz-base-50);
    --rz-panel-menu-item-padding-block: 10px; /* controls vertical height */

    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: rgba(20, 83, 136, 0.7);
    --rz-link-active-color: var(--rz-primary);

    --rz-button-hover-gradient: linear-gradient(rgba(55, 90, 139, 0.1), rgba(55, 90, 139, 0.1));

    --rz-grid-stripe-background-color: var(--rz-base-background-color);
    --rz-grid-stripe-odd-background-color: var(--rz-base-50);
    --rz-grid-header-font-weight: 500;
    
    --rzc-card-hover-border: var(--rz-border-hover);
    
    --rzc-card-grid-list-min-width: 115px;
}

.rz-navigation-item {
    border-bottom: none !important; /* Remove the bottom border */
}

/* overrides RadzenFormField label to make it look-like a placeholder */
.rz-form-field-label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.9rem;
    pointer-events: none;
}

/* overrides RadzenFormField: in case <Start> or <End> elements are empty, don't display the element at all to prevent unnecessary left/right margins */
.rz-form-field-start:empty,
.rz-form-field-end:empty {
    display: none;
}
.rz-form-field-end:has(.rz-button) {
    padding-inline-end: 0.1rem;
}


/* Overrides sidebar elements (language buttons, etc.) */
.rz-sidebar-expanded {
    width: min-content;
}
.rz-sidebar-expanded.open {
    width: 224px;
}
.rz-sidebar .rz-button.lang-item,
.language-popup .rz-button.lang-item{
    color: var(--rz-panel-menu-item-color) !important;
}
.rz-sidebar .rz-button.lang-item.active,
.language-popup .rz-button.lang-item.active {
    color: var(--rz-panel-menu-item-active-color) !important;
}
.rz-sidebar .rz-button.lang-item:hover,
.language-popup .rz-button.lang-item:hover {
    color: var(--rz-panel-menu-item-active-color) !important;
    background-color: var(--rz-panel-menu-item-active-background-color) !important;
}
.rz-sidebar .navigation-item {
    padding-block: var(--rz-panel-menu-item-padding-block), 0;
    padding-inline: var(--rz-panel-menu-item-padding-inline);
}
.rz-sidebar .navigation-item-no-icon {
    padding-block: var(--rz-panel-menu-item-padding-block);
    padding-block-start: 0;
}
.rz-sidebar .navigation-item .navigation-item-icon {
    width: var(--rz-panel-menu-icon-width);
    height: var(--rz-panel-menu-icon-height);
    color: var(--rz-base-500);
}
.rz-sidebar .navigation-item img.navigation-item-icon {
    border-radius: 50%;
    object-fit: cover;
}
.rz-sidebar .navigation-item-icon:has(+ p) {
    margin-inline: var(--rz-panel-menu-icon-margin-inline);
    margin-inline-end: 5px;
}
.rz-sidebar .navigation-item .navigation-item-label {
    color: var(--rz-base-500);
    max-width: 125px;
}
/* - adds arrow next to link to signify that it's an external link that will open in new tab */
.rz-sidebar a.rz-navigation-item-link[href^="http://"] > span::after,
.rz-sidebar a.rz-navigation-item-link[href^="https://"] > span::after {
    content: "";
    /* We use color code of --rz-panel-menu-item-color = --rz-base-500 = #9e9e9e (note that the # char is encoded as %23) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239e9e9e' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0.3rem;
    padding-right: 0.7rem;
}
.rz-sidebar a.rz-navigation-item-link[href^="http://"]:hover > span::after,
.rz-sidebar a.rz-navigation-item-link[href^="https://"]:hover > span::after {
    /* We use color code of --rz-panel-menu-item-active-color = --rz-base-50 = #fafafa (note that the # char is encoded as %23) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fafafa' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
}

a.rz-link[href^="http://"] > span::after,
a.rz-link[href^="https://"] > span::after {
    content: "";
    /* We use color code of --rz-link-color = #145388 (note that the # char is encoded as %23) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23145388' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0.3rem;
    padding-right: 0.7rem;
}

a.rz-link[href^="http://"]:hover > span::after,
a.rz-link[href^="https://"]:hover > span::after {
    opacity: 0.7;
}

/* Styling input followed by button on the right */
.input-group {
    display: flex;
}
.input-group .rz-form-field-content {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .rz-button {
    margin-top: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 
    Styling required input by adding a red star next to the label.
    For Radzen form field with floating label, the red star next to the label is shown only
    when the input is focused. When not focused a red star is shown inside the input on the
    right (i.e. required-icon). The required-icon is shown only when not focused or when
    there is no label.
*/
input.required::after,
.rz-label.required::after,
.rz-form-field:not(.rz-floating-label).required .rz-form-field-label::after,
.rz-form-field.rz-floating-label.rz-state-focused.required .rz-form-field-label::after {
    content: "*";
    color: var(--rz-form-error-color);
    padding-left: 0.2rem;
}
.rz-form-field.rz-floating-label.rz-state-focused.required .required-icon {
    display: none;
}

/* Styling table header: add a bottom border to the DataGrid header and make text uppercase */
.rz-grid-table thead th {
    border-bottom: var(--rz-grid-bottom-cell-border) !important;
}
.rz-column-title {
    text-transform: uppercase !important;
}

/* ToolTip CSS Position Override so the tooltip does not go out of screen */
.rzc-tooltip.rz-tooltip {
    max-width: 20rem !important;
}
.rzc-tooltip.rz-tooltip .rz-tooltip-content {
    --rz-tooltip-font-size: 0.8rem;
    --rz-tooltip-border-radius: 0.375rem;
    --rz-tooltip-padding: 0.5rem 0.75rem;
    --rz-tooltip-shadow: none;
    --rz-tooltip-background-color: var(--rz-primary-light);

    white-space: normal !important;
    word-wrap: break-word !important; /* Allow breaking very long words so they don't overflow the tooltip's bounds */
}
.rzc-tooltip.rz-tooltip .rz-top-tooltip-content:after {
    left: 18px !important;
}

/* Styling card to be selectable with hover effect and selected state */
.rzc-card-grid-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rzc-card-grid-list-min-width), 1fr));
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
}
.rzc-card-grid-list .rz-card p {
    line-height: 1.2;
}
.rzc-card-grid-list .rz-card .rz-stack > div:first-of-type {
    min-height: 35px;
}
.rzc-card-grid-list .rz-card .rz-stack > div:last-of-type {
    flex-grow: 1;
    align-content: center;
}
.rz-card.rzc-card-selectable {
    cursor: pointer;
    padding: 15px 5px;
    transition: border 0.15s ease-in-out;
}
.rz-card.rzc-card-selectable.selected {
    background-color: var(--rz-primary-lighter) !important;
    color: var(--rz-primary);
}
.rz-card.rzc-card-selectable.disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
}
.rz-card.rzc-card-selectable:not(.disabled):hover {
    background-image: var(--rz-button-hover-gradient);
    background-size: var(--rz-button-hover-background-size);
}
.rz-card.rzc-card-selectable.disabled * {
    color: var(--rz-text-disabled-color);
}
.rz-card.rzc-card-selectable.disabled img {
    filter: grayscale(30%);
    opacity: 0.5;
}
.rz-card.rzc-card-selectable:hover:not(.selected),
.rz-card.rzc-card-selectable:hover:not(.disabled) {
    border: var(--rzc-card-hover-border);
}