/*#region Check-Radio*/

/* Modified status, remove green: outer circle */
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-radio.dxbl-checkbox-checked:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-disabled):not(:disabled):hover .dxbl-checkbox-check-element::before,
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-radio.dxbl-checkbox-checked .dxbl-checkbox-check-element::before {
    border: var(--dxbl-checkbox-radio-border-width) solid var(--iocore-primary) !important;
}

.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-radio.dxbl-checkbox-unchecked:not(.dxbl-readonly):not(.dxbl-disabled):not(:disabled):hover .dxbl-checkbox-check-element::before,
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-radio.dxbl-checkbox-unchecked .dxbl-checkbox-check-element::before {
    border: var(--dxbl-checkbox-radio-border-width) solid var(--bs-body-color) !important;
}

/* Modified status, remove green:  Inner circle */
.dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(.dxbl-disabled):not(:disabled):hover.dxbl-checkbox-checked .dxbl-checkbox-check-element::after,
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-radio.dxbl-checkbox-checked .dxbl-checkbox-check-element::after {
    background-color: var(--iocore-primary) !important;
}

/* Modified status, remove green:  Shadow around circle on selection */
.dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element:focus-within, .dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element:focus-within,
.dxbl-checkbox.dxbl-checkbox-unchecked .dxbl-checkbox-check-element:focus-within {
    -webkit-box-shadow: 0 0 var(--iocore-primary) var(--dxbl-checkbox-checked-focus-shadow-spread) var(--iocore-primary-100) !important;
    box-shadow: 0 0 var(--iocore-primary) var(--dxbl-checkbox-checked-focus-shadow-spread) var(--iocore-primary-100) !important;
}

/*Undo the green color of checkbox check state when modified flag is applied*/
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled),
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
    background-color: var(--iocore-primary-300);
    box-shadow: unset;
}

/*Undo the green color of checkbox uncheck state when modified flag is applied*/
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-unchecked .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled),
.dxbl-checkbox.valid.modified:not([type=checkbox]).dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-unchecked .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
    background-color: var(--iocore-primary);
    box-shadow: unset;
}

/*#endregion Check-Radio*/

/*#region checkbox */

.dxbl-checkbox.valid.modified:not([type=checkbox]) {
    --dxbl-checkbox-check-element-checked-bg: var(--iocore-primary) !important;
    --dxbl-checkbox-switch-checked-bg: var(--iocore-primary) !important;
    --dxbl-checkbox-checked-focus-shadow-color: rgba(var(--iocore-primary), 50%);
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(var(--iocore-primary), 50%);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--iocore-primary);
    --dxbl-checkbox-switch-checked-hover-bg: var(--iocore-primary);
    --dxbl-checkbox-radio-checked-hover-bg: var(--iocore-primary);
    --dxbl-checkbox-check-element-unchecked-border-color: var(--iocore-gray-600);
}

/*#endregion checkbox */

/*#region textEdit*/

/*Show dropdown clear button when the combobox is hover/active/focused*/
.dxbl-text-edit:hover .dxbl-btn-group.dxbl-btn-group-right,
.dxbl-text-edit:active .dxbl-btn-group.dxbl-btn-group-right,
.dxbl-text-edit:focus-within .dxbl-btn-group.dxbl-btn-group-right {
    display: flex;
}

/*Show dropdown button when the combobox is hover/active/focused*/
.dxbl-text-edit:hover .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-clear,
.dxbl-text-edit:active .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-clear,
.dxbl-text-edit:focus-within .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-clear {
    display: flex;
}

.dxbl-text-edit-input {
    background-color: white !important;
}

/*Hide the input validation checkmark from being displayed*/
.dxbl-edit-validation-status svg.dxbl-image.dxbl-edit-validation-status-icon-valid {
    display: none !important;
}

/*#endregion textEdit*/

/*#region tabs*/

/*Set the active tab font to be bold*/
.dxbl-tabs-item.dxbl-active {
    font-weight: 600;
}

/*Set the inactive tab background color to the neutral gray*/
/*fixes the height of the tabbed items*/
.dxbl-tabs-item {
    background-color: var(--bs-gray-100);
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*forces tabs to be align to "the bottom" of their respective div*/
.dxbl-tabs.dxbl-tabs-top {
    align-self: baseline;
}

/*#endregion tabs*/

/*#region button/groups */

/*Hide dropdown clear button when the combobox is not hover/active/focused*/
.dxbl-btn-group.dxbl-btn-group-right {
    display: none;
}

/*Hide dropdown button when the combobox is not hover/active/focused*/
.dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-clear {
    display: none;
}

/*#endregion button/groups */

/*#region grid*/
/** Grid Grouping panel reduced size of top padding */
.dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-group-panel-container {
    padding-top: 4px !important;
}

/** Grid Grouping panel reduced size of bottom margin */
.dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-group-panel-container > * {
    margin-bottom: 4px !important;
}
/*#endregion grid*/


/*loading panel have a z-index of 11000, this causes the popup to be behind the loading panel, we want them to always be visible*/
dxbl-popup-cell {
    z-index: 11001 !important;
}

/*make command column header white*/
.dxbl-grid .dxbl-grid-table>thead>tr>td.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell), .dxbl-grid .dxbl-grid-table>thead>tr>th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell){
    color: white;
    background-color: white;
}