: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;
    
}

.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;
}


/* 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 start next to the label */
input.required::after,
.rz-label.required::after,
.rz-form-field.required .rz-form-field-label::after {
    content: "*";
    color: var(--rz-form-error-color);
    padding-left: 0.2rem;
}

/* 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;
}