/* Notification cards */
@import "components/NotificationCard.css";
@import "components/F4bTabViewContent.css";
@import "components/F4bApplicationTabs.css";



#blazor-error-ui {
    display: none;
}

html, body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    font-size: var(--rth-layout-font-size);
    color: var(--rth-color-content-default);
    font-family: "Inter", Verdana, sans-serif;
    line-height: initial !important;
}

iframe {
    height: 100%;
    width: 100%;
    border: none;
}

/*#region scrollbar*/
* {
    scrollbar-width: thin;
}



::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: inherit;
}


::-webkit-scrollbar-thumb {
    background: var(--rth-color-thumbBG);
    border: 0;
    border-radius: 2px;
}

    ::-webkit-scrollbar-thumb:hover {
        border: 0;
        background-color: var(--rth-color-thumbBG-hover);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--rth-color-thumbBG-active);
    }

/*#endregion*/

/*#region f4b-ellipsis*/
.f4b-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.f4b-ellipsis {
    display: block;
}

div .f4b-ellipsis {
    overflow: hidden;
}


.ellipsis_vertical {
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

/*#endregion*/



/*#region Icon*/
.f4b-icon {
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
}
/*#endregion*/

/*#region form*/
form {
    height: 100%;
    overflow: inherit;
}

/*#endregion form */

/*#region backdrop*/
.f4b-backdrop {
    transition-duration: 130ms;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--rth-color-overlay);
    opacity: 0.5;
}
/*#endregion*/


/*#region validation modal*/
.f4b-validation-modal-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .f4b-validation-modal-wrapper .f4b-validation-icon .dx-icon {
        font-size: 5rem;
    }

    .f4b-validation-modal-wrapper .f4b-validation-model-container {
        width: 70%;
        justify-content: center;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

        .f4b-validation-modal-wrapper .f4b-validation-model-container .dx-icon {
            color: var(--rth-color-status-error);
        }

    .f4b-validation-modal-wrapper .f4b-validation-icon + .f4b-validation-model-container {
        margin-top: 2rem;
    }

/*#endregion validation modal*/



.row-template {
    display: flex;
    align-items: center;
    gap: 4px;
    /*padding: 0 12px;*/
    height: 100%;
}


.modified-item {
    font-weight: bold;
    color: var(--rth-color-accent-primary);
}


/*#region designer mode*/
div[designer-mode-selected], ul[designer-mode-selected], li[designer-mode-selected], span[designer-mode-selected], p[designer-mode-selected] {
    position: relative;
    align-items: center;
}

div[class*=f4b-layout-item][designer-mode-selected] {
    height: 100%;
}

div[designer-mode-selected], li[designer-mode-selected], span[designer-mode-selected], p[designer-mode-selected] {
    display: flex;
}

    div[designer-mode-selected]::after, ul[designer-mode-selected]::after, li[designer-mode-selected]::after, span[designer-mode-selected]::after, p[designer-mode-selected]::after, button[designer-mode-selected]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--rth-color-overlay);
        opacity: 0.2;
        border-radius: var(--rth-layout-border-radius);
        border: 2px dashed var(--rth-color-status-error);
    }

.sub-menu-scrollable.dx-blazor-context-menu.dropdown-menu, .sub-menu-scrollable.dxbl-context-menu-submenu {
    max-height: calc(50vh - 48px);
    overflow: auto;
}
/*#endregion designer mode*/

/*#region new global css*/
.has-resizer {
    padding-right: 8px !important;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .has-resizer {
        padding-right: 0px !important;
    }
}

/*#region MainSidebar.razor*/
.f4b-main-sidebar {
    /*background-color: var(--rth-color-background-tertiary);*/
}

.f4b-main-sidebar-pinned-bg-div {
}

    .f4b-main-sidebar-pinned-bg-div.f4b-main-sidebar-pinned-bg-div_hidden {
        display: none;
    }

.f4b-main-sidebar_pinned {
    position: absolute;
    z-index: 98;
    /*overflow: visible !important;*/
}

.f4b-main-sidebar__right-side-wrapper_closed {
    transition: width 230ms ease-in;
}

.f4b-main-sidebar__right-side-wrapper_opened {
    transition: width 230ms ease-out;
}

.f4b-main-sidebar-body {
    width: fit-content;
    height: 100%;
}

@media only screen and (min-width: 768px) {
    .f4b-main-sidebar-body {
        width: 100vw;
    }
}

/*.f4b-main-sidebar__right-side-wrapper_opened.has-resizer {
        padding-right: 4px;
    }*/

/*#endregion*/
/*#region Header.razor*/
.f4b-header-icon {
    height: 24px !important;
    width: auto !important;
}

    .f4b-header-icon .f4b-icon-color-fill-1 {
        fill: var(--rth-color-content-inverted);
    }

    .f4b-header-icon .st0 {
        fill: var(--rth-color-content-inverted);
    }

    .f4b-header-icon .st1 {
        fill: var(--rth-color-content-inverted);
    }
/*#endregion*/

/*#region F4bApplicationTile*/

.f4b-tile-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--rth-layout-border-radius);
}

    .f4b-tile-wrapper:hover {
        transform: scale(1.01);
        box-shadow: 0px 4px 4px var(--rth-color-shadow);
        cursor: pointer;
    }

.f4b-tile-wrapper__header {
    padding: 10px 12px;
    height: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: end;
}

.f4b-tile-wrapper__body {
    cursor: pointer;
    padding: 0 12px;
    height: 100%;
    display: grid;
    overflow: hidden;
}

    .f4b-tile-wrapper__body .f4b-application-tile__content {
        font-size: 16px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

        .f4b-tile-wrapper__body .f4b-application-tile__content .f4b-application-tile__text {
            display: block
        }

.f4b-application-tile__footer {
    padding: 12px;
}

.f4b-tile-wrapper__header-button {
    cursor: pointer;
    display: none;
    justify-content: center;
    align-content: center;
}

.f4b-tile-wrapper:hover .f4b-tile-wrapper__header-button {
    display: flex;
}

/*#endregion F4bApplicationTile*/

/*#region F4bWidgetTile
*/
.f4b-widget-tile-wrapper__body {
    padding: 16px;
    overflow: hidden;
}

.f4b-widget-tile-wrapper {
    background-color: var(--rth-color-background-secondary);
    border-radius: var(--rth-layout-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.f4b-widget-tile-wrapper__header {
    height: 48px;
    background-color: var(--rth-color-accent-primary-light);
    padding: 12px;
    border-radius: var(--rth-layout-border-radius) var(--rth-layout-border-radius) 0 0;
}

.f4b-widget-tile-wrapper__header-text {
    font-weight: 500;
    font-size: 18px;
}

/*#endregion F4bWidgetTile*/

/*#region Home.razor*/




.f4b-home-page .f4b-tile-layout-container {
    gap: 0.5rem !important;
    background-color: transparent;
    grid-template-columns: repeat(auto-fit, 250px) !important;
    grid-template-rows: repeat(auto-fit, minmax(100px, 100px));
    justify-content: start;
    padding-top: 2rem;
    padding: 0 1.25rem;
    justify-self: center;
    width: 100%;
}



.f4b-application-tile-container {
    grid-template-columns: repeat(auto-fit, 100%);
    grid-auto-rows: 100px;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .f4b-application-tile-container {
        grid-template-columns: repeat(auto-fit, 49%);
    }
}

@media only screen and (min-width: 992px) {
    .f4b-application-tile-container {
        grid-template-columns: repeat(auto-fit, 250px);
    }
}

/*#endregion*/
/*#region F4bSidebarInbox.razor*/
.f4b-ticket-inbox {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr
}

.category-unread ::deep .f4b-label {
    color: var(--rth-color-accent-primary);
    font-weight: 500
}

.category-counter {
    color: var(--rth-color-accent-primary);
    font-weight: 600
}

.f4b-ticket-inbox__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    gap: 5px
}

    .f4b-ticket-inbox__header > div:first-child {
        flex: 1
    }

    .f4b-ticket-inbox__header > div:nth-child(2) {
        display: flex;
        align-items: center
    }

.f4b-ticket-inbox__content-wrapper {
    position: relative;
    overflow: auto
}

.f4b-ticket-inbox__content {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: auto
}

    .f4b-ticket-inbox__content > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px;
        overflow: hidden
    }

    .f4b-ticket-inbox__content > div:nth-child(2) {
        overflow: auto;
        height: 100%
    }

.f4b-ticket-inbox__history {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: auto;
    transition: all 130ms ease-in-out;
    visibility: hidden;
    width: 0;
    position: absolute;
    background: var(--rth-color-background-primary);
    z-index: 1
}

    .f4b-ticket-inbox__history.show {
        visibility: visible;
        width: 100%
    }

    .f4b-ticket-inbox__history > div:first-child {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
        padding: 5px
    }

    .f4b-ticket-inbox__history > div:nth-child(2) {
        overflow: auto;
        height: 100%;
        padding: 5px
    }

    .f4b-ticket-inbox__history:not(.show) div {
        display: none
    }

.f4b-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.f4b-inbox-content {
    display: flex;
    position: relative;
    flex-direction: column;
}

    .f4b-inbox-content + .f4b-inbox-content {
        margin-top: 5px;
    }

.f4b-inbox-content-card {
    cursor: pointer;
    border: var(--rth-layout-border);
    border-radius: var(--rth-layout-border-radius);
}

.f4b-inbox-content-card-vertical-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: var(--rth-color-accent-primary);
}

.f4b-inbox-content-card:hover {
    background-color: var(--rth-color-button-hover)
}

.f4b-inbox-content_active {
    background-color: var(--rth-color-accent-primary-active)
}

.f4b-inbox-content_notread {
    background-color: var(--rth-color-background-secondary)
}

.f4b-inbox-content_read {
    color: var(--rth-color-content-default);
}

.f4b-inbox-content_row-1-notread {
    color: var(--rth-color-accent-primary);
}

.f4b-inbox-content_row-1 > div {
    display: flex;
    flex-shrink: 0
}

.f4b-inbox-content_row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.f4b-inbox-content_row-3 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .f4b-inbox-content_row-3 > div {
        display: flex;
        gap: 5px
    }

    .f4b-inbox-content_row-3 > ::deep .f4b-button-base {
        height: 16px
    }

.f4b-ticket-notifications-list-item {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    cursor: pointer
}

    .f4b-ticket-notifications-list-item + .f4b-ticket-notifications-list-item {
        border-top: 1px solid var(--rth-color-border-default)
    }

    .f4b-ticket-notifications-list-item > .f4b-ticket-notifications-list-item-row-1 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px
    }

    .f4b-ticket-notifications-list-item > .f4b-ticket-notifications-list-item-row-2 {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

/*#endregion*/

/*#region F4bContextEditorAvailableAction.razor*/
.draggable-context-editor-available-action {
    position: relative;
    cursor: grab;
    margin-bottom: 4px;
}

    .draggable-context-editor-available-action:hover {
        background-color: var(--rth-color-background-secondary)
    }

/*#endregion*/

/*#region F4bContextEditorHelp.razor*/
.context-editor-help-paragraph {
    margin: 10px 0;
    text-align: justify
}
/*#endregion*/



/*#region ApplicatoinPage2.razor*/
.f4b-treeview .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
    background-color: var(--rth-color-accent-primary-light) !important;
    border-radius: 0 !important;
}

.f4b-treeview .dxbl-text {
    padding: 0;
    border: 0;
}

.f4b-treeview .dxbl-treeview-item > .dxbl-treeview-item-content {
    padding-bottom: 0;
}

    .f4b-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(.dxbl-active):hover::before {
        background: none;
        opacity: 1;
    }

    .f4b-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):hover .f4b-treeview__node_title {
        color: var(--rth-color-accent-primary);
    }



.f4b-treeview__node_code,
.f4b-treeview__node_title {
    color: var(--rth-color-content-default);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.f4b-treeview__node_title,
.f4b-treeview__node_code {
    white-space: nowrap;
}

.f4b-treeview__node_code {
    font-size: 12px
}

.f4b-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn:not(.dxbl-nav-expand-btn-custom):not(.dxbl-disabled):not(:disabled):hover::before {
    background-color: transparent;
}


/*#region ApplicatoinPage2.razor*/
.f4b-treeview .dxbl-treeview-item.dxbl-active > div:first-child {
    background-color: var(--rth-color-accent-primary-light) !important;
    border-radius: 0 !important;
}

.f4b-treeview .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
    color: var(--rth-color-content-default) !important;
    cursor: pointer;
    position: initial !important;
}

.f4b-treeview__node_code,
.f4b-treeview__node_title {
    color: var(--rth-color-content-default) !important;
}

.f4b-treeview__node_code {
    font-size: 12px
}

[node-badge]:after {
    background-color: var(--rth-color-background-primary);
    border-radius: var(--rth-layout-border-radius);
    border: var(--rth-layout-border);
    color: var(--rth-color-content-default);
    content: attr(node-badge);
    font-size: 12px;
    margin-left: 100px;
    min-width: 20px;
    padding: 0px;
    position: absolute;
    text-align: center
}

[node-badge^="-"]:after, [node-badge=""]:after {
    display: none
}

.f4b-treeview .dxbl-image {
    width: 10px;
    height: 10px;
}

[node-badge]:after {
    background-color: var(--rth-color-background-primary);
    border-radius: var(--rth-layout-border-radius);
    border: var(--rth-layout-border);
    color: var(--rth-color-content-default);
    content: attr(node-badge);
    font-size: 12px;
    margin-left: 100px;
    min-width: 20px;
    padding: 0px;
    position: absolute;
    text-align: center
}

[node-badge^="-"]:after, [node-badge=""]:after {
    display: none
}

/*#endregion ApplicatoinPage2.razor*/



/*#endregion new global css*/


/*#region devexpress*/

.dxbl-grid {
    --dxbl-grid-font-family: inherit;
    --dxbl-grid-font-size: initial;
    --dxbl-grid-line-height: var(--bs-body-line-height);
    --dxbl-grid-bg: var(--rth-color-background-primary);
    --dxbl-grid-color: var(--rth-color-content-default);
    --dxbl-grid-border-color: var(--rth-color-border-light);
    --dxbl-grid-fixed-column-border-color: var(--rth-color-border-default);
    --dxbl-grid-border-style: solid;
    --dxbl-grid-border-width: 1px;
    --dxbl-grid-border-radius: var(--rth-layout-border-radius-sm);
    --dxbl-grid-highlighted-text-bg: var(--rth-color-content-default);
    --dxbl-grid-highlighted-text-color: var(--rth-color-content-default);
    --dxbl-grid-group-panel-header-shadow: 0 2px 6px 0 var(--rth-color-shadow);
    --dxbl-grid-inplace-edit-border-width: 2px;
    --dxbl-grid-expand-btn-bg: transparent;
    --dxbl-grid-group-footer-color: inherit;
    --dxbl-grid-selection-color: inherit;
    --dxbl-grid-focus-color: var(--rth-color-background-primary);
    --dxbl-grid-focus-frame-color: var(--rth-color-accent-primary);
    --dxbl-grid-selection-focus-color: var(--rth-color-background-primary);
    --dxbl-grid-touch-color: inherit;
    --dxbl-grid-text-cell-padding-x: 12px;
    line-height: var(--dxbl-grid-line-height);
}
/*disable grid empty row on hover bg color*/
.dxbl-grid-empty-row:hover td::before {
    background-color: transparent !important;
}


.dxbl-checkbox.valid.modified:not([type=checkbox]) {
    --dxbl-checkbox-checked-focus-shadow-color: rgba(40, 167, 69, 0.5);
    --dxbl-checkbox-checked-focus-shadow-spread: 0.125rem;
    --dxbl-checkbox-checked-focus-shadow-blur: 0rem;
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(40, 167, 69, 0.5);
    --dxbl-checkbox-unchecked-focus-shadow-spread: 0.125rem;
    --dxbl-checkbox-unchecked-focus-shadow-blur: 0rem;
    --dxbl-checkbox-check-element-checked-hover-bg: #208637;
    --dxbl-checkbox-switch-checked-hover-bg: #208637;
    --dxbl-checkbox-radio-checked-hover-bg: #208637;
    outline: 0;
}

.dxbl-grid {
    height: 100%;
    overflow: auto;
}

    .dxbl-grid .dxbl-checkbox {
        --dxbl-checkbox-font-size: inherit;
        --dxbl-checkbox-font-family: inherit;
    }

    .dxbl-grid .dxbl-grid-columns-separator:not(.dxbl-disabled):not(:disabled).dxbl-active {
        background-color: var(--rth-color-accent-primary);
        box-shadow: none;
    }

.dxbl-checkbox {
    --dxbl-checkbox-radio-border-width: 1px;
    --dxbl-checkbox-check-element-unchecked-border-width: 1px;
    --dxbl-checkbox-checked-focus-shadow-spread: 0;
    --dxbl-checkbox-unchecked-focus-shadow-spread: 0;
    --dxbl-checkbox-radio-size: 16px;
    --dxbl-checkbox-radio-check-size: 8px;
    --dxbl-checkbox-radio-readonly-alhpa: 100%;
    --dxbl-checkbox-switch-width: 34px;
    --dxbl-checkbox-switch-height: 16px;
    --dxbl-checkbox-line-height: initial;
    --dxbl-checkbox-spacing: 8px;
    --dxbl-checkbox-disabled-opacity: 100%;
    --dxbl-checkbox-check-element-size: 16px;
    --dxbl-checkbox-font-size: inherit;
    --dxbl-checkbox-border-color: var(--rth-color-border-default);
    --dxbl-checkbox-check-element-checked-color: var(--rth-color-background-primary);
    --dxbl-checkbox-check-element-checked-bg: var(--rth-color-accent-primary);
    --dxbl-checkbox-indeterminate-element-disabled-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-check-element-disabled-color: var(--rth-color-background-primary);
    --dxbl-checkbox-check-element-unchecked-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-switch-checked-bg: var(--rth-color-accent-primary);
    --dxbl-checkbox-switch-element-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-switch-element-unchecked-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-switch-element-disabled-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-radio-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-radio-hover-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-radio-checked-border-color: var(--rth-color-accent-primary);
    --dxbl-checkbox-radio-unchecked-check-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-radio-check-bg: var(--rth-color-accent-primary);
    --dxbl-checkbox-radio-check-readonly-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-validation-valid-color: var(--rth-color-status-success);
    --dxbl-checkbox-validation-invalid-color: var(--rth-color-status-error);
    --dxbl-checkbox-check-element-readonly-bg: var(--rth-color-background-primary);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-checkbox-switch-checked-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-checkbox-radio-checked-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-checkbox-radio-checked-hover-border-color: var(--rth-color-accent-primary-hover);
    --dxbl-checkbox-checked-focus-shadow-color: transparent;
    --dxbl-checkbox-unchecked-focus-shadow-color: transparent;
    border: 0;
}

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image {
        width: 12px;
        height: 12px;
    }

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio) .dxbl-checkbox-check-element {
        border-radius: 2px;
    }

.dxbl-btn-primary:not(.dxbl-btn-standalone) {
    --dxbl-btn-bg: var(--rth-color-accent-primary);
    --dxbl-btn-border-color: var(--rth-color-accent-primary);
    --dxbl-btn-color: var(--rth-color-content-inverted);
    --dxbl-btn-active-bg: var(--rth-color-accent-primary-active);
    --dxbl-btn-active-color: var(--rth-color-content-inverted);
    --dxbl-btn-active-border-color: var(--rth-color-accent-primary-active);
    --dxbl-btn-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-btn-hover-color: var(--rth-color-content-inverted);
    --dxbl-btn-hover-border-color: var(--rth-color-accent-primary-hover);
    --dxbl-btn-disabled-bg: var(--rth-color-background-disabled);
    --dxbl-btn-disabled-color: var(--rth-color-content-disabled);
    --dxbl-btn-disabled-border-color: var(--rth-color-border-disabled);
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-shadow-color: transprent;
    --dxbl-btn-focus-shadow-spread: 0.125rem;
    --dxbl-btn-focus-shadow-blur: 0rem;
    height: var(--f4b-dialog-button-height);
    padding-left: var(--f4b-dialog-button-padding-left);
    padding-right: var(--f4b-dialog-button-padding-right);
}

.dxbl-btn-secondary:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: var(--rth-color-button-default);
    --dxbl-btn-color: inherit;
    --dxbl-btn-border-color: var(--rth-color-border-default);
    --dxbl-btn-active-bg: var(--rth-color-button-active);
    --dxbl-btn-active-color: inherit;
    --dxbl-btn-active-border-color: var(--rth-color-border-default);
    --dxbl-btn-hover-bg: var(--rth-color-button-hover);
    --dxbl-btn-hover-color: inherit;
    --dxbl-btn-hover-border-color: var(--rth-color-border-default);
    --dxbl-btn-disabled-bg: var(--rth-color-background-disabled);
    --dxbl-btn-disabled-color: var(--rth-color-content-disabled);
    --dxbl-btn-disabled-border-color: var(--rth-color-border-disabled);
    --dxbl-btn-box-shadow: none;
    height: var(--f4b-dialog-button-height);
    padding-left: var(--f4b-dialog-button-padding-left);
    padding-right: var(--f4b-dialog-button-padding-right);
}

.dxbl-text-edit {
    --dxbl-text-edit-bg: var(--rth-color-background-primary);
    --dxbl-text-edit-color: var(--rth-color-content-default);
    --dxbl-text-edit-border-color: var(--rth-color-border-default);
    --dxbl-text-edit-readonly-color: var(--rth-color-content-default);
    --dxbl-text-edit-disabled-color: var(--rth-color-content-disabled);
    --dxbl-text-edit-disabled-opacity: 1;
    --dxbl-text-edit-btn-bg: var(--rth-color-button-default);
    --dxbl-text-edit-btn-color: var(--rth-color-content-default);
    --dxbl-text-edit-btn-hover-color: var(--rth-color-content-default);
    --dxbl-text-edit-btn-disabled-color: var(--rth-color-content-default);
    --dxbl-text-edit-btn-disabled-image-color: unset;
    --dxbl-text-edit-validation-valid-color: var(--rth-color-status-success);
    --dxbl-text-edit-validation-invalid-color: var(--rth-color-status-error);
    --dxbl-text-edit-focus-shadow-color: transparent;
    --dxbl-text-edit-focus-shadow-spread: 0.125rem;
    --dxbl-text-edit-focus-shadow-blur: 0rem;
    --dxbl-text-edit-focus-border-color: var(--rth-color-border-focus);
}

.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell) > .dxbl-text-edit:focus-within::after {
    border-color: var(--rth-color-accent-primary);
}


/*#region dxbutton*/
.dxbl-btn-standalone.dxbl-btn-secondary {
    --dxbl-btn-box-shadow: 0 1px 6px -1px var(--rth-color-shadow), 0 1px 4px -2px var(--rth-color-shadow);
    --dxbl-btn-color: var(--rth-color-content-default);
    --dxbl-btn-bg: var(--rth-color-button-default);
    --dxbl-btn-border-color: var(--rth-color-button-default);
    --dxbl-btn-active-bg: var(--rth-color-button-active);
    --dxbl-btn-active-color: var(--rth-color-content-default);
    --dxbl-btn-active-border-color: var(--rth-color-button-active);
    --dxbl-btn-hover-bg: var(--rth-color-button-hover);
    --dxbl-btn-hover-color: var(--rth-color-content-default);
    --dxbl-btn-hover-border-color: var(--rth-color-button-hover);
    --dxbl-btn-disabled-bg: var(--rth-color-background-disabled);
    --dxbl-btn-disabled-color: var(--rth-color-content-default);
    --dxbl-btn-disabled-border-color: var(--rth-color-background-disabled);
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: none;
    --dxbl-btn-focus-bg: var(--rth-color-button-default);
    --dxbl-btn-focus-color: var(--rth-color-content-default);
    --dxbl-btn-focus-border-bg: var(--rth-color-button-default);
    --dxbl-btn-focus-outline-color: var(--rth-color-border-focus);
}

.dxbl-btn-standalone.dxbl-btn-primary {
    /* --dxbl-btn-box-shadow: 0 1px 6px -1px var(--rth-color-shadow), 0 1px 4px -2px var(--rth-color-shadow);*/

    --dxbl-btn-bg: var(--rth-color-accent-primary);
    --dxbl-btn-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-btn-border-color: var(--rth-color-accent-primary);
    --dxbl-btn-hover-border-color: var(--rth-color-accent-primary);
    /*
    --dxbl-btn-active-bg: var(--rth-color-button-active);
    --dxbl-btn-active-color: var(--rth-color-content-default);
    --dxbl-btn-active-border-color: var(--rth-color-button-active);
    
    
    --dxbl-btn-disabled-bg: var(--rth-color-background-disabled);
    --dxbl-btn-disabled-color: var(--rth-color-content-default);
    --dxbl-btn-disabled-border-color: var(--rth-color-background-disabled);
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: none;
    --dxbl-btn-focus-bg: var(--rth-color-button-default);
    --dxbl-btn-focus-color: var(--rth-color-content-default);
    --dxbl-btn-focus-border-bg: var(--rth-color-button-default);
    --dxbl-btn-focus-outline-color: var(--rth-color-border-focus);*/
}
/*#endregion*/

/*#region htmleditor*/
.dxbl-html-editor {
    --dxbl-html-editor-invalid-color: var(--rth-color-status-error);
    --dxbl-html-editor-border-radius: var(--rth-layout-border-radius);
    --dxbl-html-editor-primary-color: var(--rth-color-accent-primary);
    --dxbl-html-editor-border-color: var(--rth-color-border-default);
    --dxbl-html-editor-block-font-color: var(--rth-color-content-default);
    --dxbl-html-editor-invalid-message-color: var(--rth-color-content-inverted);
    --dxbl-html-editor-placeholder-color: var(--rth-color-content-default);
    --dxbl-html-editor-code-block-background-color: rgba(191, 191, 191, 0.15);
}
/*#endregion*/

/*#region dropdown*/
.dxbl-dropdown, .dxbl-itemlist-dropdown {
    --dxbl-dropdown-bg: var(--rth-color-background-primary);
    --dxbl-dropdown-color: inherit;
    --dxbl-dropdown-font-family: inherit;
    --dxbl-dropdown-box-shadow: 0 0.25rem 0.5rem var(--rth-color-shadow);
    --dxbl-dropdown-border-width: 1px;
    --dxbl-dropdown-border-style: solid;
    --dxbl-dropdown-border-color: var(--rth-color-border-light);
    --dxbl-dropdown-border-radius: var(--rth-layout-border-radius-sm);
}
/*#endregion*/

.dxbl-calendar {
    --dxbl-calendar-today-border-color: var(--rth-color-accent-primary);
}

    .dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item {
        background-color: var(--rth-color-accent-primary);
        color: var(--rth-color-button-default);
    }

.dxbl-progress-bar .dxbl-progress-bar-track-container .dxbl-progress-bar-indicator {
    background-color: var(--rth-color-accent-primary);
}
/*#region listbox*/
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled), .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled) {
    background-color: var(--rth-color-accent-primary);
}

.dxbl-list-box > .dxbl-scroll-viewer {
    background-color: var(--rth-color-background-primary);
}

html:not(.dxSafari) .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr.dxbl-list-box-item-selected > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary);
}

html:not(.dxSafari) .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > tbody > tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary-hover);
}

html:not(.dxSafari) .dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr.dxbl-list-box-item-selected > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary);
}

html:not(.dxSafari) .dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr.dxbl-list-box-item-selected > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary);
}

html:not(.dxSafari) .dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr.dxbl-list-box-item-selected:focus > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary);
}

html:not(.dxSafari) .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select):not([data-dx-focus-hidden]) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > tbody > tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover:not(.dxbl-list-box-item-focused):not(:focus) > td:first-of-type::before {
    background-color: var(--rth-color-accent-primary);
}

.dxbl-list-box, .dxbl-list-box-render-container {
    --dxbl-list-box-font-family: inherit;
    --dxbl-list-box-font-size: inherit;
    --dxbl-list-box-bg: var(--rth-color-background-primary);
    --dxbl-list-box-color: inherit;
    --dxbl-list-box-border-width: 1px;
    --dxbl-list-box-border-style: solid;
    --dxbl-list-box-border-color: var(--rth-color-border-light);
    --dxbl-list-box-readonly-color: var(--rth-color-content-default);
    --dxbl-list-box-disabled-color: var(--rth-color-content-disabled);
    --dxbl-list-box-item-border-style: solid;
    --dxbl-list-box-item-border-width: 1px;
    --dxbl-list-box-item-selected-color: var(--rth-color-content-inverted);
    --dxbl-list-box-item-multi-selected-color: inherit;
    --dxbl-list-box-item-active-color: inherit;
    --dxbl-list-box-item-hover-color: inherit;
    --dxbl-list-box-item-selected-hover-color: var(--rth-color-content-inverted);
    --dxbl-list-box-item-selected-focused-bg-alpha: 20%;
    --dxbl-list-box-item-multi-selected-hover-color: inherit;
    --dxbl-list-box-item-disabled-color: inherit;
    --dxbl-list-box-column-header-color: inherit;
    --dxbl-list-box-validation-valid-color: var(--rth-color-status-success);
    --dxbl-list-box-validation-invalid-color: var(--rth-color-status-error);
    --dxbl-list-box-empty-data-icon-color: var(--rth-color-content-default);
    --dxbl-list-box-empty-data-text-color: var(--rth-color-content-default);
    --dxbl-list-box-highlighted-text-bg: var( --rth-color-status-caution);
    --dxbl-list-box-highlighted-text-color: var(--rth-color-content-default);
    --dxbl-list-box-focus-color: var(--rth-color-content-inverted);
    --dxbl-list-box-focus-frame-color: var(--rth-color-accent-primary);
}

    .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr:focus {
        outline: .15rem solid var(--dxbl-list-box-focus-color);
        outline-offset: calc(-1* .15rem);
    }

    .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before {
        background-color: var(--rth-color-accent-primary);
    }

    .dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before, .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before {
        background-color: var(--rth-color-accent-primary-hover);
    }

    .dxbl-list-box-render-container:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before, .dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before {
        background-color: var(--rth-color-accent-primary);
    }

    .dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select):not([data-dx-focus-hidden]) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]):hover.dxbl-list-box-item-selected:hover:not(.dxbl-list-box-item-focused):not(:focus)::before, .dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select):not([data-dx-focus-hidden]) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]):hover.dxbl-list-box-item-selected:hover:not(.dxbl-list-box-item-focused):not(:focus)::before {
        background-color: var(--rth-color-accent-primary);
    }

/*#endregion listbox*/
/*#region dxmodal*/
.dxbl-modal {
    --dxbl-popup-border-width: 1px;
    --dxbl-popup-border-style: solid;
    --dxbl-popup-border-color: var(--rth-color-border-light);
    --dxbl-popup-border-radius: var(--rth-layout-border-radius);
    --dxbl-popup-bg: var(--rth-color-background-primary);
    --dxbl-popup-color: var(--rth-color-content-default);
    --dxbl-popup-shadow: 0 2px 12px 0 var(--rth-color-shadow);
    --dxbl-popup-scrollable-border-width: 1px;
    --dxbl-popup-back-bg: var(--rth-color-overlay);
    --dxbl-popup-header-font-size: 1.14286em;
    --dxbl-popup-header-line-height: 1.2499343752;
    --dxbl-popup-header-bg: var(--rth-color-accent-primary);
    --dxbl-popup-header-color: var(--rth-color-content-inverted);
    --dxbl-popup-header-padding-y: 0.3125rem;
    --dxbl-popup-header-padding-x: 0.75rem;
    --dxbl-popup-header-font-weight: 500;
    --dxbl-popup-header-btn-bg: transparent;
    --dxbl-popup-header-btn-color: unset;
    --dxbl-popup-header-btn-hover-bg: unset;
    --dxbl-popup-header-btn-hover-color: unset;
    --dxbl-popup-body-padding-x: 0.75rem;
    --dxbl-popup-body-padding-y: 0.75rem;
    --dxbl-popup-footer-bg: unset;
    --dxbl-popup-footer-color: inherit;
    --dxbl-popup-footer-padding-y: 0.3125rem;
    --dxbl-popup-footer-padding-x: 0.75rem
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-modal-title, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-title {
        font-size: 18px;
    }


    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
        height: var(--rth-layout-header-height);
        border-start-end-radius: 4px;
        border-start-start-radius: 4px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content {
        border: none;
    }


        .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-popup-header-button, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
            --dxbl-btn-bg: transparent;
            --dxbl-btn-color: inherit;
            --dxbl-btn-border-color: transparent;
            --dxbl-btn-hover-border-color: transparent;
            --dxbl-btn-box-shadow: none;
            position: absolute !important;
            right: 0;
            top: 0;
        }




/*#endregion dxmodal*/

/*#region treeview*/
.dxbl-treeview {
    --dxbl-treeview-font-size: inherit;
    --dxbl-treeview-navigation-filter-content-bg-color: var(--rth-color-status-caution);
    --dxbl-treeview-navigation-filter-content-color: var(--rth-color-content-default);
    --dxbl-treeview-item-selection-color: var(--rth-color-background-primary);
    --dxbl-treeview-checkbox-checked-color: var(--rth-color-background-primary);
    --dxbl-treeview-checkbox-checked-hover-bg: var(--rth-color-accent-primary-hover);
    --dxbl-treeview-checkbox-disabled-color: var(--rth-color-background-disabled);
    --dxbl-treeview-checkbox-unchecked-bg: var(--rth-color-background-primary);
    --dxbl-treeview-checkbox-unchecked-hover-bg: var(--rth-color-background-primary);
    --dxbl-treeview-item-focus-outline-color: var(--rth-color-border-focus);
    --dxbl-treeview-checkbox-readonly-bg: var(--rth-color-background-primary);
}

    .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
        background-color: var(--rth-color-accent-primary);
        opacity: 100%;
    }

    .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container .dxbl-treeview-item-text-container.dxbl-treeview-item-text-tmpl > .dxbl-text .f4b-grid-item .f4b-tlbr-buttons .f4b-button--icon-only:not(:disabled) .f4b-icon-color-fill-1 {
        fill: var(--rth-color-content-inverted);
    }

/*#endregion treeview*/


/*#endregion*/



/*#region css status class*/

.f4b-error-color {
    color: var(--rth-color-status-error);
}

.f4b-success-color {
    color: var(--rth-color-status-success);
}
/*#endregion css status class*/

/*#region htmleditor*/
.dxbl-client-component {
    overflow: auto;
}

.dxbl-office-ribbon .dxbl-ribbon-toolbar {
    overflow: auto;
}
/*#endregion htmleditor*/


dxbl-toolbar-item > button:nth-child(1) {
    height: 28px !important;
}

.dxbl-grid-table td:has(div[style*=background-color]) {
    padding: 0 !important;
    /* height:0;*/
}

    .dxbl-grid-table td:has(div[style*=background-color]) .row-template {
        padding: 0.25rem 12px;
    }

.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > tbody > tr > th.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > tbody > tr > th.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > tfoot > tr > td.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > tfoot > tr > th.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > thead > tr > td.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > thead > tr > td.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-last-fixed-left-cell + td, .dxbl-grid .dxbl-grid-table > thead > tr > th.dxbl-grid-last-fixed-left-cell + th:not(.dxbl-grid-fixed-cell,.dxbl-grid-bordered-left) {
    border-left-width: 0
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tbody > tr > th, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > td, .dxbl-grid .dxbl-grid-table > thead > tr > th {
    border-left-width: 0;
}

    .dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tbody > tr > th:first-child:not(.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > tfoot > tr > td:first-child, .dxbl-grid .dxbl-grid-table > tfoot > tr > th:first-child:not(.dxbl-grid-bordered-left), .dxbl-grid .dxbl-grid-table > thead > tr > td:first-child, .dxbl-grid .dxbl-grid-table > thead > tr > th:first-child:not(.dxbl-grid-bordered-left) {
        border-left-width: 0
    }

.dxbl-grid .dxbl-grid-table > thead > .dxbl-grid-filter-row > td, .dxbl-grid .dxbl-grid-table > thead > tr > th {
    border-left-width: var(--dxbl-grid-border-width);
}

.dxbl-grid-table:not(.dxbl-grid-table-no-scroll) td {
    height: 0;
}

.dxFirefox .dxbl-grid-table:not(.dxbl-grid-table-no-scroll) tr, .dxFirefox .dxbl-grid-table:not(.dxbl-grid-table-no-scroll) tr td {
    height: 100%;
}

.dxbl-grid-search-box-container {
    width: 100% !important;
}

.dxbl-list-box-item-selected {
    background: var(--rth-color-accent-primary) !important;
}

.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled), .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled) {
    background: var(--dxbl-list-box-item-selected-bg, unset) !important;
}

dxbl-dropdown-box > input.dxbl-text-edit-input {
    font-size: 14px !important;
    padding: 6px 10px !important;
}

.applied-filters-expander {
    padding-top: 5px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    transition: height 0.2s, opacity 0.2s;
    overflow: hidden;
    padding-top: 5px;
}

.filter-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 0.25rem;
    font-size: 0.825rem;
    border: 1px solid var(--rth-color-border-light);
    height: 28px;
    overflow: hidden;
    max-width: 30vw;
}

.filter-tag-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* ------------ PWA INSTALL  ------------*/
.pwa-install-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rth-color-background-primary);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: none;
    align-items: center;
    max-width: 90%;
    width: auto;
    /* border: 1px solid #f0f0f0;*/
    border: 1px solid var( --rth-color-border-default);
    animation: pwaSlideUp 0.3s ease-out;
    user-select: none;
    z-index: 9999;
    box-sizing: border-box;
    flex-direction: column;
}

.pwa-install-container-body {
    display: flex;
    gap: 16px;
}

.pwa-install-container-footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

    .pwa-install-container-footer input[type="checkbox"] {
        margin-right: 0.5rem;
        cursor: pointer;
        width: 16px;
        height: 16px;
        accent-color: var(--rth-color-accent-primary);
    }

    .pwa-install-container-footer label {
        cursor: pointer;
        user-select: none;
    }

.pwa-install-text {
    font-size: 14px;
    margin: 0;
    color: var(--rth-color-content-default);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}


.pwa-install-button {
    background: var(--rth-color-accent-primary);
    color: var(--rth-color-background-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

    .pwa-install-button:hover {
        background: var(--rth-color-accent-primary-hover);
        transform: translateY(-1px);
    }

    .pwa-install-button:active {
        transform: translateY(0);
    }

.pwa-dismiss-container {
    display: flex;
    align-items: center;
    align-self: center;
}

.pwa-emoji {
    font-size: 28px;
}

.pwa-dismiss-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /*background: #f3f4f6;*/
    border: 1px solid var(--rth-color-border-default);
    /*  color: #6b7280;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  font-size: 14px;*/
    padding: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pwa-fade-out {
    animation: pwafadeOut 0.3s ease-out forwards;
}

@keyframes pwafadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes pwaSlideUp {
    from {
        transform: translateY(20px) translateX(-50%);
        opacity: 0;
    }

    to {
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
}


.pwa-install-steps-macos {
    display: none;
    color: var(--rth-color-content-default);
    font-size: 14px;
    flex-direction: column;
    gap: 16px;
}

.pwa-install-steps-iphone {
    display: none;
    color: var(--rth-color-content-default);
    font-size: 14px;
    flex-direction: column;
    gap: 16px;
}


.pwa-install-steps-macos.visible {
    display: flex;
}

.pwa-install-steps-iphone.visible {
    display: flex;
}

.pwa-step-content {
    display: flex;
    gap: 8px;
    align-content: center;
}

.pwa-step {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

    .pwa-step:last-child {
        margin-bottom: 0;
    }

.pwa-step-number {
    background: var(--rth-color-accent-primary);
    color: var(--rth-color-button-default);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

@media (max-width: 772px) {
    .pwa-install-container {
        padding: 16px;
        bottom: 16px;
        left: 16px;
        transform: none;
        width: calc(100% - 32px);
        max-width: none;
        flex-direction: column;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        gap: 16px;
    }

    .pwa-install-container-body {
        flex-direction: column;
    }

    .pwa-install-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .pwa-dismiss-container {
        align-self: flex-end;
    }
    /*.pwa-dismiss-button {
        align-self: flex-end;
    }*/

    @keyframes pwaSlideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}
/*------------- PWA INSTALL -------------*/


.filter-type-container {
    display: flex;
}

    .filter-type-container > div {
        width: 100%;
    }

    .filter-type-container > button {
        height: 28px;
        border-radius: 0px !important;
    }

    .filter-type-container .dxbl-text-edit {
        height: 28px;
        border-radius: 0px !important;
        border-color: var(--rth-color-border-light);
        border: 0;
    }


.filter-type-button {
    background: var(--rth-color-background-primary);
    color: var(--rth-color-content-default);
    border: none;
}

.filter-type-dropdown {
    margin-left: -3px;
}

td:has(div.filter-type-container) {
    padding: 1px !important;
}


.f4b-tab-overflow-wrapper {
    display: flex;
    background-color: transparent;
    list-style-type: none;
    flex-direction: column;
    white-space: nowrap;
    align-items: stretch;
    overflow: auto;
    max-height: 40vh;
    position: relative;
}

.right {
    margin-left: 2px;
    margin-right: 2px
}

tr:has(td[style*="background-color"]:hover) td, tr:has(td[style*="background-color"]).dxbl-grid-selected-row td {
    backdrop-filter: opacity(25%);
}

.f4b-tab-border {
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--rth-color-border-frame)
}

@keyframes line {
    from {
        left: 50%;
        width: 0;
    }

    to {
        left: 0;
        width: 100%
    }
}

.f4b-tabs__item {
    cursor: pointer;
    position: relative;
    height: 100%;
    color: var(--rth-color-secondary);
    min-width: 100px;
    max-width: 264px;
    padding-left: 16px;
    padding-right: 8px;
}

.f4b-tabs__item .f4b-tab-border_left {
    left: -.3px
}

.f4b-tabs__item .f4b-tab-border_right {
    right: 0
}

.f4b-tabs__item:first-child .f4b-tab-border {
    display: none
}

.f4b-active-tab-border.f4b-tab-visible {
    width: calc(100%);
    left: 0;
}

.f4b-active-tab-border {
    height: 2px;
    position: absolute;
    left: calc(50%);
    bottom: 0;
    background-color: var(--rth-color-accent-primary);
    z-index:1;

    margin: 0 auto;
    width: 0;
    transition: width 450ms ease, left 450ms ease;
}

.f4b-tabs-item__content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.f4b-tabs-item__content:hover {
    color: var(--rth-color-content-default)
}

.f4b-tabs-item__content.isLoading {
    place-items: center
}

.f4b-tabs-item__content .f4b-tabs__item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem
}

.f4b-tabs-item__content .f4b-tabs__item-icon ::deep .f4b-fill {
    fill: var(--rth-color-status-error)
}

.f4b-tabs-item__content .f4b-tabs-item-content__text {
    overflow: hidden;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center
}

.f4b-tabs-item__content .f4b-tabs__item-icon + .f4b-tabs-item-content__text {
    padding: 0
}

.f4b-tabs-item__content .f4b-tab-button-area {
    justify-content: center;
    align-items: center;
    display: flex
}

.f4b-tabs-item__content .f4b-tab-button-area path.f4b-icon-color-fill-7 {
    fill: var(--rth-color-content-default) !important;
}

.f4b-tab-button-area ::deep .f4b-tab-close-button {
    height:auto;
    width:auto;
    padding:8px;
}

.f4b-tabs__item.active + .f4b-tabs__item .f4b-tab-border {
    display: none
}


.f4b-tabs__item {
    background-color: var(--rth-color-background-secondary);
}

.f4b-tab-active {
    color: var(--rth-color-content-default);
}

.f4b-tab-active:hover {
    color: var(--rth-color-content-default)
}

.f4b-tab-active .f4b-tabs-item__color-bar {
    display: block
}

.f4b-tab-active .f4b-tab-border {
    display: none
}

@keyframes line {
    from {
        left: 50%;
        width: 0%
    }

    to {
        left: 0;
        width: 100%
    }
}



.f4b-report-content {
    height: 100%;
    background-color: var(--rth-color-button-default);
    display:grid;
    grid-template-rows: 1fr;
}


tr.dxbl-grid-focused-row:not(.dxbl-grid-selected-row), tr.dxbl-grid-focused-row:not(.dxbl-grid-selected-row) > td {
    background-color: var(--rth-color-button-hover);
}

.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.dxbl-grid-focused-row:not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):hover > td:not(.dxbl-grid-edit-form):not(.dxbl-grid-indent-cell):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-empty-cell) {
    background-color: var(--rth-color-button-hover);
}

.dxbl-grid-group-row {
    background-color: var(--bs-light-bg-subtle);
    font-weight: 600;
}

tr.dxbl-grid-focused-row.dxbl-grid-selected-row {
    background-color: var(--rth-color-background-tertiary);
}

tr.dxbl-grid-focused-row > td {
    color: black !important;
}


.verification-history-item-wrapper {
    filter: var(--rth-layout-shadow);
    cursor: pointer;
    background-color: var(--rth-color-background-primary);
    height: min-content;
}

    .verification-history-item-wrapper:hover {
        background-color: var(--rth-color-background-secondary)
    }

    /*document-tile*/

.document-tile-card {
    --card-bg-color: var(--rth-color-background-primary);
    --card-bg-color-hover: var(--rth-color-button-hover);
    --card-border-color: var(--rth-color-border-default);
    --card-font-color-inverted: var(--rth-color-content-inverted);
    --card-check-selected-bg-color: var(--rth-color-accent-primary);
    /*--card-title-color-hover: var(--rth-color-accent-primary-hover);*/
    font-size: 14px;
    background-color: var(--card-bg-color);
    padding: 16px;
    padding-top: 12px;
    border: 1px solid var(--card-border-color);
    height: auto;
    display: grid;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
}

    .document-tile-card:hover {
        transform: scale(101%);
    }

.document-tile-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    max-width: calc(100% - 30px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}


.document-tile-clickable {
    cursor: pointer;
}

    .document-tile-clickable:hover {
        color: var(--rth-color-accent-primary-hover);
    }

.document-tile-card-status-area {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    overflow: hidden;
}

.document-tile-card-status {
    padding: 4px 8px;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    border-radius: 4px;
    font-weight: 400;
    margin-bottom: 16px;
}

.document-tile-card-content {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border-color);
}

.document-tile-card-label-area {
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.document-tile-card-content-area {
    grid-column: 2/3;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    overflow: hidden;
}

    .document-tile-card-content-area .document-tile-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
    }

.document-tile-card-footer {
    display: flex;
}

.document-tile-card-check {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
}

.header-zoom-button{
    background-color:transparent;
    border:none;
}

.header-zoom-button:hover {
    background-color: transparent;
    border: none;
}

.header-zoom-button .f4b-icon-color-fill-1 {
    fill:white;
}

    .header-zoom-button:hover .f4b-icon-color-fill-1 {
        fill: white;
    }

/**/


/**/
.f4b-notification-exception__notifications-wrapper {
    position: fixed;
    top: 20px; /* Adjusted slightly from 50px for a cleaner 'top-center' look */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures individual toasts are centered relative to each other */
    z-index: 99999; /* Increased slightly to ensure it stays on top */
    width: auto;
    /*pointer-events: none;*/ /* Allows clicking 'through' the wrapper to the grid below */
}

.f4b-notification-exception__notifications-list {
    width: 100%; /* Spans the width allowed by the wrapper */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
    padding: 10px;
    scrollbar-gutter: stable;
}

    .f4b-notification-exception__notifications-list > * {
        flex-shrink: 0;
    }



.f4b-notification-exception {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    border-radius: var(--rth-layout-border-radius);
    margin-bottom: 16px;
    position: relative;
    background-color: var(--rth-color-background-primary);
    filter: var(--rth-layout-shadow);
    overflow: hidden;
}

    .f4b-notification-exception.f4b-notification-exception-toast {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-radius: 4px;
        overflow: hidden;
        /* The "Sweet Spot" Logic */
        width: 35vw; /* Responsive width */
        min-width: 380px; /* Prevents it from getting too skinny on small screens */
        max-width: 600px; /* Prevents it from looking like a giant bar on 4K screens */

        margin-bottom: 12px;
        animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

@keyframes slideDownFade {
    0% {
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


.f4b-notification-exception.f4b-notification-success-reinforcement {
    animation: popInSuccess 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popInSuccess {
    0% {
        transform: translateY(20px) scale(0.9);
        opacity: 0;
    }

    70% {
        transform: translateY(-5px) scale(1.02);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


.f4b-notification-exception-vertical-line {
    position: absolute;
    display: block;
    height: 100%;
    width: 4px;
}

    .f4b-notification-exception-vertical-line.warning {
        background-color: var(--rth-color-status-warning);
        margin-top: 2px;
    }

    .f4b-notification-exception-vertical-line.notification {
        background-color: var(--rth-color-status-success);
        margin-top: 2px;
    }

    .f4b-notification-exception-vertical-line.error {
        background-color: var(--rth-color-status-error);
        margin-top: 2px;
    }

    .f4b-notification-exception-vertical-line.externalsystemerror {
        background-color: #963e00;
        margin-top: 2px;
    }

    .f4b-notification-exception-vertical-line.warningadministrator {
        background-color: #6A3DE8;
        margin-top: 2px;
    }

    .f4b-notification-exception-vertical-line.success {
        background-color: var(--rth-color-status-success);
        margin-top: 2px;
    }

.f4b-notification-exception__title {
    display: flex;
    align-items: baseline;
}

.f4b-notification-exception__title > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.f4b-notification-exception__title > div:last-child {
    flex: 0 0 auto;
    margin-left: 8px;
}

.f4b-notification-exception .f4b-notification-exception__content-area {
    padding: 16px;
    display: flex;
    gap: 16px;
}

    .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area {

        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .warning {
            color: var(--rth-color-status-warning);
            font-size: 32px;
        }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .error {
            color: var(--rth-color-status-error);
            font-size: 32px;
        }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .notification {
            color: var(--rth-color-status-success);
            font-size: 32px;
        }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .externalsystemerror {
            color: #963e00;
            font-size: 32px;
        }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .warningadministrator {
            color: #6A3DE8;
            font-size: 32px;
        }

        .f4b-notification-exception .f4b-notification-exception__content-area .f4b-notification-exception__icon-area .success {
            color: var(--rth-color-status-success);
            font-size: 32px;
        }

    .f4b-notification-exception .f4b-notification__content-area .f4b-notification__icon-area .notification {
        color: var(--rth-color-status-success)
    }


.f4b-notification-exception .f4b-notification-exception__button-area {
    display: flex;
    align-self: stretch;
    justify-content: space-between;
    flex-direction: column;
    position: absolute;
    right: 4px
}

    .f4b-notification-exception .f4b-notification-exception__button-area .f4b-icon-color-fill-7 {
        fill: var(--rth-color-content-default)
    }

.f4b-notification-exception .f4b-notification-exception__expand-button .f4b-button {
    border: none
}






.f4b-notification-exception .f4b-notification-exception__message {
    word-break: break-word
}

.f4b-notification-exception .f4b-notification-exception__message-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding-right: 32px;
}

    .f4b-notification-exception .f4b-notification-exception__message-area.message-area-success {
        justify-content: center;
    }

.f4b-notification-exception__footer{
    justify-items: flex-end;
}

.f4b-notification-exception__additional-content {
    grid-column: 1 / -1;
    display: grid;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    padding: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap; /* Keeps stack trace formatting */
    max-height: 200px;
    overflow-y: auto;
    color: #555;
}

.f4b-text-red {
    color: var(--rth-color-status-error) !important;
}

/**/