body {
    font-family: Arial !important;
}
#inContent.wondr, .dx-widget {
    font-family: Arial !important;
    
}
#inContent.wondr .dx-datagrid-headers {
        background-color: #2D103E !important;
        color:#fff;
}
#inContent.wondr #pTitle {
    margin: 15px 50px;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing:2px;
        
}
    #inContent.wondr .dx-header-filter {
        color:#fff;
    }
    #inContent.wondr #gridContainer {
        padding-top:3.5rem;
        padding-bottom:100px;
    }
    #legend {
        float: right;
        font-size: 12px;
    }
.dx-datagrid-headers .dx-datagrid-content .dx-row > td {
    height: 52px;
    /*line-height: 52px;*/ /* Ensures the text is vertically centered */
    font-size:12px;
    font-weight:700;
}
.dx-header-filter {
    float: right;
}
.dx-master-detail-cell {
    padding: 0 !important;
}
/* Override the default selection color */
.dx-datagrid .dx-selection{
    background-color: transparent !important;
}
.master-detail-container {
    display: flex;
    flex-wrap: wrap;
}

.master-detail-side {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    font-size:12px;
}

.master-detail-left {
    background-color: rgba(45, 16, 62, 0.2);
}

.master-detail-right {
    background-color: rgba(45, 16, 62, 0.1);
}
#ViewProof .dx-popup-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#proofImage {
    flex-grow: 1;
    width: 100%;
    height: auto;
    overflow: auto;
}

#ViewProof .dx-toolbar-items-container {
    justify-content: flex-end;
}
.dx-popup-title {
    background-color: #2D103E; /* Same color as the data grid header */
    color: white; /* Optional: Set text color to white for better contrast */
}

#commentsPopup .dx-popup-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#commentsTextArea {
    flex-grow: 1;
    width: 100%;
    height: auto;
    overflow: auto;
}

/*.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
    background-color: transparent !important;
    color: #fff;
}*/