Custom css code to apply background for Data Picker object

[Raju_6952]

Hi,

As we already aware of that multi kpi object is getting sunset on the Qlik cloud by november 2025, we are using advanced kpi object to reolace the css functionality of multi kpi and observed that few challebges with two objets while the css code used is same.

MultiKpi:

 AdavancedKPI:

we are unable to fetch the div part of that white space which we need to make it as black backhground color as it looks in first image using multi kpi.

Here is the code I am using:

.qlik-daterangepicker td.empty {
    background-color: rgb(30,30,30) !important;
  color: rgb(30, 30, 30) !important;
  }

.qlik-daterangepicker .calendar-table {

    background: rgb(30,30,30) !important;
  color:white;
  }
table.table-condensed {
    background-color: rgb(30,30,30) !important;
}
.qlik-daterangepicker td.nodata {
    background-color: rgb(30,30,30) !important;
  }

  .css-1i6hvh3 {
    color:white !important;
    background-color: rgb(30,30,30) !important;
  }

  .css-16w2jh8 {

    color: white !important;
  }
  div#dropDown_CPWgRj {
    background-color: rgb(30,30,30) !important;
}
.qlik-daterangepicker .ranges,.qlik-daterangepicker .ranges ul {

    background-color: rgb(30,30,30) !important;
  }

  .css-1tqwq08 .RowColumn-row {

    color: white !important;
}
button.njs-7c03-ButtonBase-root.njs-7c03-IconButton-root.njs-7c03-IconButton-sizeLarge.njs-cell-action.actions-toolbar-more.css-1yer5jj {

    color: white !important;
  }

.qlik-daterangepicker.in-selection td.stateS, .qlik-daterangepicker td.stateA {
    background-color: #f2f2f2;
}

td.stateA.available {
    color: #a6a6a6;
  font-weight: 600;
}

.qlik-daterangepicker td.stateO {
    background-color: #f2f2f2;
    font-weight: 600;
    color: #a6a6a6;
}  

  

.qv-object-qlik-date-picker  div{
    background-color: #1e1e1e !important;
    color: white;
}

.qlik-daterangepicker {
    background: #1e1e1e;
}

Regards,

Raju