currently i'm using jQuery 4.0.0, Bootstrap 5.3.x, dataTables 2.3.7 (with select and keytable extensions). i am getting a bright blue highlight on selected rows which doesn't match my color scheme. i'm using variables for the color scheme to i can re-skin easily but i can't seem to find the correct css selector. i've tried box-shadow and outline-color and every level of css using inspect but can't seem to change that blue. i have the same issue with the keytable cell with focus.
the table tag looks like this:

<table id="dt_system" class="table table-hover headingTable" width="100%">

the css color variables look like this:

/* Define Global Variables to be used throughout the sheet */
:root {
  --FontFamily: Aptos, "Trebuchet MS", Tahoma, Calibri, Roboto, Helvetica;
  --SmallFontFamily: "Aptos Narrow", Tahoma, Calibri, "Roboto Condensed", Helvetica;
  --LineHeightCompact: 1.1;
  --MenuBG: #525357;  /* Typically same as ParamBG */
  --MenuFontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --MenuFontSize: 8pt; /* Typically same as SubDataFontSize */
  --SubMenu1BG: #3A3A3D; /* Typically 10% darker/lighter ParamBG */
  --SubMenu1FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --SubMenu2BG: #222224; /* Typically 20% darker/lighter ParamBG */
  --SubMenu2FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --ParamBG: #525357;
  --ParamFontColor: #E5E2DA;
  --ParamInputBG: #DEE1D6; /* Typically same as ParamFontColor */
  --ParamInputFontColor: #171A18; /* Typically same as ParamBG */
  --ParamFontSize: 12pt;
  --HeadBG: #394E60; 
  --HeadFontColor: #E5E2DA;
  --HeadFontSize: 18pt;
  --SubHeadBG: #635554;
  --SubHeadFontColor: #E0E5CF;
  --SubHeadInputBG: #F0F8FF; /* Typically same as SubHeadFontColor */
  --SubHeadInputFontColor: #191970; /* Typically same as SubHeadBG */
  --SubHeadFontSize: 12pt;
  --DataBG: #848973;
  --DataBGHover: #ACB396; /* to highlight selected row */
  --DataFontColor: #171A18;
  --DataFontSize: 10pt;
  --DataLinkHover: #C7CCB8; /* Typically same as SubDataBG */
  --SubDataBG: #C7CCB8;
  --SubDataFontColor: #171A18;
  --SubDataFontSize: 8pt;
  --subDataLinkHover: #635554; /* Typically same as SubNeadBG */
  --DataSelectedOutline: #C7CCB8; /* Typically same as SubDataBG */
  --dt-row-selected: #C7CCB8; /* Typically same as SubDataBG */
}

the current css attempt looks like this but i tried so many combinations without success

/* Selected Row Background */
table.dataTable tbody > tr.selected td {
  box-shadow: var(--DataSelectedOutline) !important;
  background-color: var(--DataBG) !important;
  color: var(--DataFontColor) !important;
}

/* Selected Cell Background, outline, fontColor */
table.table tr.data td.focus {
  box-shadow: var(--DataSelectedOutline) !important;
  outline-color: var(--DataSelectedOutline) !important;
  background-color: var(--DataBG) !important;
  color: var(--DataFontColor) !important;
}

the javascript has this for the keys and select options

keys: {
      editor: systemEditor,
      blurable: true,
      columns: '.editable'
},

select: {
     selector: 'td:first-child',
     blurable: true,
     style:    'os',
     headerCheckbox: false
},