/* 
    Hex EO: #036557
    Hex Acescam: #0E4E89

    Rgb EO: rgba(14, 78, 137
    Rgb Acescam: rgba(14, 78, 137
*/
html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    /*
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
*/
    background-image: url('../images/Logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    width: 170px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}
.header-left-side {
    /*background-color: #036557*/
    background-color: #0E4E89
}
.xaf-sidebar {
    /*background-color: #036557*/
    background-color: #0E4E89
}

.xaf-nav-item {
    color: white;
    /*background-color: #036557*/
    background-color: #0E4E89
}

.xaf-nav-link{
    color: white;
}

.header-right-side {
    background-color: #c00000;
}

.xaf-nav-item.dxbl-accordion-item {
    /*--dxbl-accordion-group-border-color: #036557;*/
    --dxbl-accordion-group-border-color: #0E4E89;
}

.xaf-caption-container {
    color: white
}

.xaf-image {
    /*color: white*/
}
.about-info {
    color: white
}


.dxbl-btn-primary {
    --dxbl-btn-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-btn-hover-bg: rgba(14, 78, 137, 1) !important;
}

:root {
    --dxbl-btn-border-color: rgba(14, 78, 137, 0.8) !important;
    --dxbl-listbox-item-selected-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-treeview-item-selection-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-listbox-item-selected-hover-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-grid-focus-frame-color: rgba(14, 78, 137, 0.8) !important;
    --dxbl-grid-selection-focus-color: rgba(14, 78, 137, 0.8) !important;
    --dxbl-grid-selection-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-pager-active-page-btn-color: rgba(14, 78, 137, 0.8) !important;
    --dxbl-pager-active-page-btn-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-btn-bg: rgba(14, 78, 137, 0.8) !important;
}

.dxbl-pager {
    --dxbl-pager-active-page-btn-bg: rgba(14, 78, 137, 0.8) !important;
}

.dxbl-checkbox {
    --dxbl-checkbox-switch-checked-bg: rgba(14, 78, 137, 0.8) !important;
}

.dxbl-grid {
    --dxbl-grid-focus-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-grid-selection-focus-bg: rgba(14, 78, 137, 0.8) !important;
}

.customerBgColor { /* there are a lot of built-in buttons in other controlse => don't override dxbl-btn, but make a dedicated style to be applied to every dedicated button*/
    background-color: rgba(14, 78, 137, 0.8);
    border-color: rgba(14, 78, 137, 0.8);
    --dxbl-btn-hover-background: rgba(14, 78, 137, 0.8);
    --dxbl-btn-bg: rgba(14, 78, 137, 0.8);
    --dxbl-btn-hover-bg: rgba(14, 78, 137, 0.8) !important;
}

.dxbl-checkbox {
    --dxbl-checkbox-switch-checked-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-checkbox-check-element-checked-bg: rgba(14, 78, 137, 0.8) !important;
    --dxbl-checkbox-check-element-checked-hover-bg: rgba(14, 78, 137, 0.8) !important;
}