.dx-header-row td,
.dx-row td {
    vertical-align: middle !important;
}

.link-grid-blue,
.link-grid-green,
.link-grid-orange,
.link-grid-purple,
.link-grid-red {
    line-height: normal;
    text-transform: capitalize;
}

.dx-placeholder,
.link-grid-blue,
.link-grid-green,
.link-grid-orange,
.link-grid-purple,
.link-grid-red {
    font-style: normal;
    font-weight: 400;
}

.dx-placeholder,
.dx-widget input,
.dx-widget textarea {
    font-family: YaraMx;
}

.dx-datagrid-headers {
    border: 1px solid #eff2ff !important;
    border-bottom: 1px solid #dbdade;
    background: #f8f9fa;
}

.dx-datagrid-borders .dx-datagrid-rowsview {
    border: 1px solid #eff2ff;
}

.dx-datagrid-nodata {
    font-size: 14px;
}

.dx-datagrid .dx-row,
.link-grid-blue,
.link-grid-green,
.link-grid-orange,
.link-grid-purple,
.link-grid-red {
    font-feature-settings: "clig" off, "liga" off;
    font-size: 13px;
}

.dx-datagrid .dx-searchbox .dx-texteditor-input {
    padding: 7px 7px 8px 34px;
}

.dx-datagrid .dx-pager .dx-pages {
    float: none;
    justify-content: center;
    display: flex;
    width: 100%;
    margin-top: 23px;
}

.dx-datagrid-rowsview .dx-master-detail-row > .dx-master-detail-cell {
    padding: 20px 0;
}

.dx-header-row td {
    color: #8b909a;
}

.dx-datagrid .dx-row {
    height: 52px;
}

.dx-datagrid .dx-page-indexes .dx-next-button,
.dx-datagrid .dx-page-indexes .dx-prev-button {
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: unset !important;
    width: 35px !important;
    height: 35px !important;
}

.dx-datagrid .dx-pager .dx-pages .dx-page {
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: unset;
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0px;
    margin-right: 0px;
    color: #333;
    font-size: 13px;
}

.dx-datagrid .dx-pager .dx-pages .dx-page-indexes {
    display:inline-flex;
    gap:7px;
}

.dx-separator {
    align-self: end;
}

.dx-datagrid .dx-page-index input {
    height: 37px;
    min-width: 60px;
    padding: 9px 9px 7px !important;
}

.dx-datagrid .dx-pager .dx-pages .dx-selection {
    border: 1px solid #0056b8;
    background: #fff;
    color: #0056b8;
}

.dx-dropdowneditor-icon::before {
    content: url("/images/icon/dashboard/arrow-filter.svg");
}

.dx-icon-column-chooser::before {
    content: url("/images/icon/columnchooser.svg");
}

.dx-datagrid-export-button .dx-icon-export-to::before {
    content: url("/images/icon/export.svg");
}

.dx-icon-export::before {
    content: url("/images/icon/export.svg") !important;
}

.dx-checkbox-checked .dx-checkbox-icon::before {
    content: url("/images/icon/checkdevexpress2.svg");
    left: 45%;
}

.dx-pager .dx-pages .dx-next-button::before {
    content: url("/images/icon/chevronright.svg");
}

.dx-pager .dx-pages .dx-prev-button::before {
    content: url("/images/icon/chevronleft.svg");
}

.dx-searchbox .dx-icon-search {
    content: url("/images/icon/icon-wrapper.svg");
}

.paginationjs .paginationjs-pages li {
    border: unset !important;
    background: unset !important;
    color: unset !important;
}

    .paginationjs .paginationjs-pages li.active {
        border: unset !important;
    }

    .paginationjs .paginationjs-pages li > a {
        border-radius: 2px;
        border: 1px solid #d9d9d9 !important;
        line-height: 30px !important;
        padding: unset;
        width: 33px !important;
        height: 33px !important;
        margin-left: 5px;
        margin-right: 5px;
        color: #333;
        font-size: 15px;
    }

    .paginationjs .paginationjs-pages li.active > a {
        border: 1px solid #0056b8 !important;
        background: #fff !important;
        color: #0056b8 !important;
        height: 33px !important;
        width: 34px !important;
    }

.dx-datagrid-pager {
    border-top: none !important;
}

.dx-datagrid .dx-placeholder {
    padding: unset;
}

.dx-texteditor-input {
    padding: 16px;
}

.link-grid-blue {
    color: #0056b8;
}

.link-grid-purple {
    color: #ad5bff;
}

.link-grid-green {
    color: #0db63c;
}

.link-grid-red {
    color: #f5222d;
}

.link-grid-orange {
    color: #f5941d;
}

.dx-placeholder {
    color: #9b959f;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.5px;
    padding-left: 16px;
    padding-right: 16px;
}

    .dx-placeholder::before {
        padding: 0;
    }

.dx-textarea .dx-placeholder::before {
    padding-top: 16px;
}

.dx-checkbox-container {
    text-overflow: unset;
}

.dx-checkbox-icon {
    border-radius: 6px;
    margin-right: 8px;
}

.dx-checkbox-checked .dx-checkbox-icon {
    font: 900 15px/16px DXIcons;
    text-align: center;
    background-color: #0056b8;
    border: none;
    color: #fff;
}

.dx-state-disabled {
    border-radius: 4px !important;
    background: #e2e2e2 !important;
    color: #333 !important;
}

.dx-treeview-search .dx-icon-search,
.dx-treeview-search input {
    margin-left: 16px;
}

.dx-treeview .dx-empty-message {
    padding: 10px 16px;
}

.dx-item {
    margin: 5px 0;
}

.dx-popup-content {
    padding: 5px 0 10px;
}

.dx-button-mode-contained.dx-button-default {
    border-radius: 3px;
    color: #fff;
    border: none;
    background: #2777b8;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
}

.checkbox-custom {
    font-weight: 700;
}

.dx-texteditor.dx-invalid .dx-texteditor-input-container::after {
    right: 10px !important;
}

.button-transparent,
.button-transparent:focus,
.button-transparent:hover {
    display: grid;
    border: none;
    background-color: transparent;
    height: 100%;
    align-content: center;
    margin-top: 3px !important;
}

    .button-transparent .dx-button-content {
        padding: 0 16px 0 0;
    }

.size-button {
    max-height: 36px;
    justify-content: center;
    display: flex;
}

.dx-tagbox .dx-texteditor-input {
    padding: 5px 11px !important;
}

.dx-tagbox .dx-tag-container {
    padding: 5px;
}

.dx-tag-content {
    background-color: #f1f5f9;
}



@media (max-width: 1090px) {
    .checkbox-custom,
    .checkbox-custom label {
        font-size: 12px;
    }
}

@media (max-width: 550px) {
    .checkbox-custom,
    .checkbox-custom .label-asterisk {
        font-size: 10px;
    }
}

@media (max-width: 450px) {
    .checkbox-custom,
    .checkbox-custom .label-asterisk {
        font-size: 8px;
    }
}