font and color change not applying only to datepicker

Question

I have created an application for getting a calendar using angularjs, I have used angular-bootstrap-datetimepicker plugin for achieving that. The application is working fine but the issue is that I want he font size of the calendar to be font-size: 105% when I applied the below style it is applying to the full page.

 *, th, tr {
  font-size: 105% !important;
}

Also how can i change the default blue color of the calendar My working demo is shown in the JSFiddle

Answer 1

apply css on calendar table instead of all th element like replace

*, th, tr {
  /* text-rendering: optimizeLegibility; */
  font-size: 105% !important;
}

by

.table-striped {
  /* text-rendering: optimizeLegibility; */
  font-size: 205% !important;
}

Answer 2

try to narrow it down by the datepicker selector itself:

#datepicker > *, th, tr {
  font-size: 105% !important;
}