@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --stratus_blaze: #FF6249;
    --stratus_twilight: #400186;
    --stratus_twilight_rgb: 64, 1, 134;
    --stratus_sky: #62CBC9;
    --stratus_airglow: #B5DBD2;
    --dimgrey: #696969;
    --dark_red: #8b0000;
    --avocado_green: #568203;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.stratus-btn-primary {
    color: white;
    background-color: var(--stratus_twilight);
    border-color: var(--stratus_twilight);
}

    .stratus-btn-primary:hover {
        background-color: white !important;
        border-color: var(--stratus_twilight) !important;
        color: var(--stratus_twilight) !important;
    }

    .stratus-btn-primary:disabled,
    stratus-btn-primary[disabled] {
        background-color: white !important;
        border-color: var(--stratus_twilight) !important;
        color: var(--stratus_twilight) !important;
    }

.stratus-btn-link-primary {
    color: white;
    background-color: var(--stratus_twilight);
    border-color: var(--stratus_twilight);
}
    .stratus-btn-link-primary:hover, .stratus-btn-link-primary:focus, .stratus-btn-link-primary:active {
        background-color: white !important;
        border-color: var(--stratus_twilight) !important;
        color: var(--stratus_twilight) !important;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.details-title {
    font-size: 20px;
    margin-top: 20px;
    width: 95%;
}

.details-text {
    font-size: 18px;
}

.text-color-stratus-twilight {
    color: var(--stratus_twilight);
}

.text-color-stratus-blaze {
    color: var(--stratus_blaze);
}

.text-color-gray {
    color: dimgray;
}

.text-color-light-gray {
    color: lightgray;
}

.details-header {
    font-size: 25px;
    border-bottom: 1px solid #d2d2d2;
    height: 50px;
}

/* Pager active selected page */
.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-pager-active-page-btn-bg: var(--stratus_twilight) !important;
}

/* Tab Text color */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
    --dxbl-tabs-tab-selected-color: var(--stratus_twilight) !important;
}

.dxbl-grid > .dxbl-grid-toolbar-container {
    padding: 12px 0px 12px 0px !important
}

.dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled {
    --dxbl-btn-hover-color: var(--stratus_twilight) !important;
    --dxbl-btn-color: var(--stratus_twilight) !important;
}

.dx-datagrid-checkbox-size.dx-checkbox-checked .dx-checkbox-icon {
    color: var(--stratus_twilight) !important;
}

.nav-link {
    color: white;
}

.navbar-nav {
    --bs-nav-link-hover-color: white;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: white;
}

.dropdown-item {
    color: var(--stratus_twilight) !important;
}

.dxbl-treeview .dxbl-checkbox {
    --dxbl-treeview-checkbox-checked-bg: var(--stratus_twilight) !important;
}
.dxbl-checkbox {
    
    --dxbl-checkbox-checked-focus-shadow-color: rgba(var(--stratus_twilight_rgb), 50%);
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(var(--stratus_twilight_rgb), 50%);
    --dxbl-checkbox-check-element-checked-bg: var(--stratus_twilight) !important;
    --dxbl-checkbox-check-element-checked-hover-bg: var(--stratus_airglow) !important;
}

.dxbl-btn-primary:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: var(--stratus_twilight) !important;
    --dxbl-btn-border-color: var(--stratus_twilight) !important;
    --dxbl-btn-active-bg: var(--stratus_twilight) !important;
    --dxbl-btn-active-border-color: var(--stratus_twilight) !important;
    --dxbl-btn-hover-bg: var(--stratus_twilight) !important;
    --dxbl-btn-hover-border-color: var(--stratus_twilight) !important;
    --dxbl-btn-disabled-bg: var(--stratus_twilight) !important;
    --dxbl-btn-disabled-border-color: var(--stratus_twilight) !important;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--stratus_twilight) !important;
}

input[type='file'] {
    color: transparent;
}

.bg-twilight {
    background-color: var(--stratus_twilight);
}

.bg-soft-purple {
    background-color: #957DAD;
}

.bg-softer-purple {
    background-color: #C5B3D9;
}

.bg-airglow {
    background-color: var(--stratus_airglow);
}

.bg-blaze {
    background-color: var(--stratus_blaze);
}

.bg-sky {
    background-color: var(--stratus_sky);
}

.bg-warm-peach {
    background-color: #FF9E80;
}

.bg-open {
    background-color: #61bd50;
}

.text-twilight {
    color: var(--stratus_twilight);
}

.text-soft-purple {
    color: #957DAD;
}

.text-softer-purple {
    color: #C5B3D9;
}

.text-warm-peach {
    color: #FF9E80;
}

.mh-360 {
    min-height:360px;
}

@media (min-width: 770px) {
    .dxbl-grid-search-box-container {
        width: auto!important;
    }
}

.dxbl-grid-search-box-container, .dxbl-grid-group-panel-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.dxbl-grid-edit-form-buttons > .dxbl-btn-primary {
    --dxbl-btn-bg: var(--stratus_twilight);
    --dxbl-btn-border-color: var(--stratus_twilight);
    --dxbl-btn-hover-bg: var(--stratus_sky);
    --dxbl-btn-hover-border-color: var(--stratus_sky);
}

.highlighted-item:hover, .highlighted-item:hover > td {
    background-color: var(--stratus_airglow);
    cursor: pointer;
}

.highlighted-blaze > td {
    background-color: var(--stratus_blaze);
}