@font-face {
    /*Add font-face*/
    font-family: 'opensans';
    src: url('/css/fonts/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'), url('/css/fonts/opensans-variablefont_wdthwght-webfont.woff') format('woff'), url('/css/fonts/opensans-variablefont_wdthwght-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.dx-theme-generic-typography {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-theme-generic-typography input,
    .dx-theme-generic-typography textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

    .dx-theme-generic-typography .dx-font-xl,
    .dx-theme-generic-typography h1 {
        /*change font weight, size and color*/
        font-weight: 600;
        font-size: 28px;
        color: #fff;
    }

    .dx-theme-generic-typography .dx-font-l,
    .dx-theme-generic-typography h2 {
        /*change font weight, size and color*/
        font-weight: 300;
        font-size: 24px;
        color: #fff;
    }

    .dx-theme-generic-typography h3 {
        /*change font color*/
        color: #000;
    }

.dx-widget {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-widget input,
    .dx-widget textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-field-label {
    /*change width*/
    width: 20%;
}

.dx-field-value.dx-datebox {
    /*change min-width*/
    min-width: 80%;
}

.dx-field {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-field input,
    .dx-field textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-field-value-static,
.dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button) {
    /*change width*/
    width: 80%;
}

.dx-fieldset-header {
    /*change font weight*/
    font-weight: 600;
}

.dx-button-mode-contained.dx-button-success {
    /*change background color*/
    background-color: #0d47aa;
}

    .dx-button-mode-contained.dx-button-success.dx-state-hover {
        /*change color and background color*/
        background-color: rgba(134, 143, 150, 0.8);
        color: #fff;
    }

    .dx-button-mode-contained.dx-button-success.dx-state-focused {
        /*change color and background color*/
        background-color: #0d47aa;
        color: #fff;
    }

    .dx-button-mode-contained.dx-button-success.dx-state-active {
        /*change background color*/
        background-color: rgba(134, 143, 150, 0.8);
    }

.dx-overlay-wrapper {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-overlay-wrapper input,
    .dx-overlay-wrapper textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-texteditor-input {
    /*Add resize*/
    resize: vertical;
}

.dx-menu-base {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-menu-base input,
    .dx-menu-base textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-datagrid-column-chooser {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-datagrid-column-chooser input,
    .dx-datagrid-column-chooser textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-treelist-column-chooser {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-treelist-column-chooser input,
    .dx-treelist-column-chooser textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area {
    /*change font family*/
    font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
}

    .dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area input,
    .dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area textarea {
        /*change font family*/
        font-family: "opensans","Segoe UI",helvetica,verdana,sans-serif;
    }

.dx-layout-manager .dx-label-h-align .dx-field-item-label .dx-field-item-label-content {
    /*change text align*/
    text-align: right;
}

.dx-field-item-help-text,
.dx-field-item-label-text {
    /*change font color and weight*/
    color: black;
    font-weight: 500;
}

.dx-switch.dx-state-hover .dx-switch-container {
    /*background-color: transparent;*/
    background-color: rgba(255, 255, 255, 0.85);
    border-color: #337ab7;
}


/**********************************************************
    dx-button-critical 
***********************************************************/
.dx-button-mode-contained.dx-button-critical {
    background-color: #b85c5c;
    border-color: transparent;
    color: #fff;
}

    .dx-button-mode-contained.dx-button-critical .dx-icon {
        color: #fff;
    }
    
    .dx-button-mode-contained.dx-button-critical.dx-state-hover {
        background-color: #a04646;
        border-color: transparent;
    }
    
    .dx-button-mode-contained.dx-button-critical.dx-state-focused {
        background-color: #964141;
        border-color: transparent;
    }
    
    .dx-button-mode-contained.dx-button-critical.dx-state-active {
        background-color: #6f3030;
        border-color: transparent;
        color: #fff;
    }

.dx-button-mode-outlined.dx-button-critical {
    background-color: transparent;
    border-color: #ae4c4c;
    color: #ae4c4c;
}
    
    .dx-button-mode-outlined.dx-button-critical .dx-icon {
        color: #ae4c4c;
    }
    
    .dx-button-mode-outlined.dx-button-critical.dx-state-focused,
    .dx-button-mode-outlined.dx-button-critical.dx-state-hover {
        background-color: rgba(174,76,76,.1);
        border-color: #ae4c4c;
    }
    
    .dx-button-mode-outlined.dx-button-critical.dx-state-active {
        background-color: rgba(174,76,76,.4);
        border-color: #ae4c4c;
        color: #ae4c4c;
    }

.dx-button-mode-text.dx-button-critical {
    background-color: transparent;
    border-color: transparent;
    color: #ae4c4c;
}
    
    .dx-button-mode-text.dx-button-critical .dx-icon {
        color: #ae4c4c;
    }
    
    .dx-button-mode-text.dx-button-critical.dx-state-focused,
    .dx-button-mode-text.dx-button-critical.dx-state-hover {
        background-color: rgba(174,76,76,.1);
        border-color: transparent;
    }
    
    .dx-button-mode-text.dx-button-critical.dx-state-active {
        background-color: rgba(174,76,76,.4);
        border-color: transparent;
        color: #ae4c4c;
    }

.dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected).dx-button-critical {
    border-color: #ae4c4c;
}
    
    .dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected).dx-button-critical.dx-state-hover {
        background-color: #f5f5f5;
    }
    
    .dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected).dx-button-critical.dx-state-focused {
        background-color: #ebebeb;
    }

    .dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected).dx-button-critical,
    .dx-buttongroup-item.dx-button.dx-button-mode-contained:not(.dx-item-selected).dx-button-critical .dx-icon {
        color: #ae4c4c;
    }

.dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-button-critical.dx-state-focused,
.dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-button-critical.dx-state-hover {
    background-color: rgba(174,76,76,.1);
}

.dx-buttongroup-item.dx-button.dx-button-mode-text.dx-button-critical.dx-state-focused,
.dx-buttongroup-item.dx-button.dx-button-mode-text.dx-button-critical.dx-state-hover {
    background-color: rgba(174,76,76,.1);
}

.dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-item-selected.dx-button-critical,
.dx-buttongroup-item.dx-button.dx-button-mode-text.dx-item-selected.dx-button-critical {
    background-color: rgba(184,92,92,.3);
}
    
    .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-item-selected.dx-button-critical.dx-state-focused,
    .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-item-selected.dx-button-critical.dx-state-hover,
    .dx-buttongroup-item.dx-button.dx-button-mode-text.dx-item-selected.dx-button-critical.dx-state-focused,
    .dx-buttongroup-item.dx-button.dx-button-mode-text.dx-item-selected.dx-button-critical.dx-state-hover {
        background-color: rgba(184,92,92,.2);
    }

    .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-item-selected.dx-button-critical,
    .dx-buttongroup-item.dx-button.dx-button-mode-outlined.dx-item-selected.dx-button-critical .dx-icon,
    .dx-buttongroup-item.dx-button.dx-button-mode-text.dx-item-selected.dx-button-critical,
    .dx-buttongroup-item.dx-button.dx-button-mode-text.dx-item-selected.dx-button-critical .dx-icon {
        color: #b85c5c;
    }
.dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-outlined.dx-button-critical,
.dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-text.dx-button-critical {
    background-color: rgba(184,92,92,.3);
}
    
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-outlined.dx-button-critical.dx-state-focused,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-outlined.dx-button-critical.dx-state-hover,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-text.dx-button-critical.dx-state-focused,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-text.dx-button-critical.dx-state-hover {
        background-color: rgba(184,92,92,.2);
    }
    
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-outlined.dx-button-critical,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-outlined.dx-button-critical .dx-icon,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-text.dx-button-critical,
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-text.dx-button-critical .dx-icon {
        color: #b85c5c;
    }

.dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-contained.dx-button-critical {
    background-color: #b85c5c;
}
    
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-contained.dx-button-critical.dx-state-hover {
        background-color: #a04646;
    }
    
    .dx-htmleditor-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-mode-contained.dx-button-critical.dx-state-focused {
        background-color: #964141;
    }

.dx-diagram-toolbar .dx-format-active:not(.dx-color-format):not(.dx-background-format).dx-button-critical {
    background-color: #449d44;
}

/**********************************************************
    dx-tab
***********************************************************/

.dx-tab {
    padding: 9px;
    background-color: rgba(51,122,183,.2); /*RGB of #337ab7*/
    color: #337ab7;
}

    .dx-tab.dx-state-hover {
        background-color: rgba(51,122,183,.4); /*RGB of #337ab7*/
        color: #337ab7;
    }

    .dx-tab.dx-state-active {
        background-color: rgba(88,88,88,.2);
        color: #333;
    }

    .dx-tab.dx-tab-selected {
        background-color: #337ab7;
        color: #fff;
        font-weight: 600;
    }

    .dx-tab .dx-tab-text {
        color: #fff;
    }

    .dx-tab-selected::after {
        border-right: 1px solid #337ab7;
        border-left: 1px solid #337ab7;
        border-top: 1px solid #337ab7;
        border-bottom: 1px solid #337ab7;
    }

.dx-tab.dx-tab-selected .dx-icon, .dx-tab.dx-tab-selected .dx-tab-text {
    color: #fff;
}