.filter-wrapper{
    padding: 10px;
}
.filter-wrapper .dx-field-label{
    width: 100%;
}
.filter-wrapper .dx-field-value.savedFilterField, .filter-wrapper .dx-field-value.deleteFilterField{
    width: 32% !important;
}
.filter-wrapper .dx-field-value.deleteFilterField{
    margin: 6px 0px 0px 10px;
}
.filter-wrapper .dx-field-value.applyFilterField{
    margin: 0px 10px 10px 0px;
    width: 8% !important;
}
.filter-wrapper .saveFilterField .clearFilterBtn{
    float:left !important;
    margin: 0px 10px 10px 0px;
}

.filter-wrapper .dx-field-value.builderOptionsField {
    width: 100% !important;
}
.filter-wrapper .dx-field-value.builderOptionsField, .filter-wrapper .dx-field-value.savedFilterField, .filter-wrapper .dx-field-value.applyFilterField, .filter-wrapper .dx-field-value.deleteFilterField, .filter-wrapper .dx-field-value.saveFilterField{
    float:left;
}

.filter-wrapper .dx-filterbuilder-action-icon.dx-icon-plus{
    border: 1px solid #41a1e9;
    border-radius: 47%;
    padding: 5px 4px !important;
    height: 20px;
    color: #FFFFFF !important;
    width: 20px;
    background-color: #41a1e9;
    font-size: 10px;
    margin-left: 15px;
}
.filter-wrapper .dx-filterbuilder-action-icon.dx-icon-plus:hover {
    color:white;
}

.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-group-operation, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-field, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-operation, 
.filter-wrapper .dx-filterbuilder-item-value-text {
    height: 40px;
    padding: 0px 0px 0px 12px !important;
    width: 90px;
    background-color: #FFFFFF !important;
    line-height:35px;
    border-radius: 0px;
    border: 1px solid #c6cbce;
}
.filter-wrapper .dx-filterbuilder-item-value-text, .filter-wrapper .dx-numberbox, .filter-wrapper .dx-datebox {
    width: 100% !important;
}
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-field, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-operation, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-value {
    width: 32% !important;
}
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-group-operation.dx-state-active,
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-field.dx-state-active, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-operation.dx-state-active, 
.filter-wrapper .dx-filterbuilder-text.dx-filterbuilder-item-value.dx-state-active {
    color: black !important;
}
.filter-wrapper .dx-filterbuilder {
    background-color:transparent !important;
}
.filter-wrapper .dx-filterbuilder-group-content{
    margin-top: 25px;
}
.filter-wrapper .dx-filterbuilder-group-item {
    width:100%;
}
.filter-wrapper .dx-filterbuilder-action-icon.dx-icon-remove.dx-filterbuilder-action {
    float:right;
}
.filter-wrapper .dx-filterbuilder-action-icon.dx-icon-remove.dx-filterbuilder-action {      
    border: 1px solid #c6cbce;
    border-radius: 47%;
    padding: 5px 4px !important;
    height: 20px;
    color: #FFFFFF !important;
    width: 20px;
    background-color: #c6cbce;
    font-size: 10px;
    margin-left: 15px;
    margin-top:8px;
}
.filter-wrapper .dx-texteditor.dx-textbox.dx-state-focused {
    width: 100%;
    background-color: #FFFFFF !important;    
    border-radius: 0px;
    border: 1px solid #c6cbce;
}
.filter-wrapper .saveFilterBtn {
    color: #0084e6;
    font-weight: 500;
    float:left !important;
}
.filter-wrapper .saveFilterField {
    width: 33%;
}
.filter-wrapper .clearFilterBtn {
    color: #0084e6;
    font-weight: 500;
}
.filter-wrapper .deleteFilterBtn {
    color: #0084e6;
    font-weight: 500;
    float: left !important;
}
.filter-wrapper .applyFilterBtn {
    float: left !important;
    border: 1px solid #41a1e9;
    border-radius: 4px;
    background-color: #41a1e9;
    color: white;
    font-weight: 500;
    height: 30px;
    width: 75px;
}
.filter-wrapper .saveFilterBtn, .filter-wrapper .clearFilterBtn{
    float: left !important;
    border: 1px solid #41a1e9;
    border-radius: 4px;
    background-color: #41a1e9;
    color: white;
    font-weight: 500;
    height: 30px;
    width: 120px;
    margin-right: 10px !important;    
}
.dx-overlay-content .saveFilterBtn {
    float: left !important;
    border: 1px solid #41a1e9;
    border-radius: 4px;
    background-color: #41a1e9;
    color: white;
    font-weight: 500;
    height: 30px;
    width: 120px;
    margin-right: 10px !important;
    margin-top: 40px !important;
}
.dx-overlay-content .cancelBtn {
    float: left !important;
    border-radius: 4px;
    background-color: red;
    color: white;
    font-weight: 500;
    height: 30px;
    width: 120px;
    margin-right: 10px !important;
    margin-top: 40px !important;
}
.dx-overlay-content .filterNameTxtBox {
    margin-top: 20px;
}
.filter-wrapper .dx-button-content, .dx-overlay-content .saveFilterBtn .dx-button-content, .dx-overlay-content .cancelBtn .dx-button-content {
    padding: 0px 0px 0px 0px !important;
}
.filter-wrapper .applyFilterBtn .dx-button-content, .filter-wrapper .deleteFilterBtn .dx-button-content {
    padding: 0px !important;
}
.filter-wrapper .dx-button.dx-state-hover {
    background-color: transparent;
    border-color: 0px solid grey;
    color: #41a1e9;
}
.filter-wrapper .dx-button.dx-state-focused {
    color: #41a1e9;
}
.dx-menu-item.dx-state-hover {
    background-color: #bfbfbf !important;
}
.filter-wrapper .dx-selectbox.dx-state-hover .dx-dropdowneditor-icon {
    color: #333;
}
.dx-overlay-content.dx-filterbuilder-overlay {
    max-height: 400px !important;
    /*overflow-y: auto !important;*/
    border: 1px solid #ddd;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.filter-wrapper .dx-numberbox {
    height: 38px;
}
div.dx-filterbuilder-text.dx-filterbuilder-item-field {
   margin-bottom: 20px !Important;
}