Resizing kendo datepicker control's overall size

I am using Kendo controls for styling my application, I was able to customize the css of almost all other kendo controls by overwriting default css but I am unable to do that in the case of Kendo datepicker.

I have tried many things but I am only able to change the font size inside the calendar/month view. but the height and width of the datepicker's selection box is too big and that doesn't look good in my page.

Can somebody help me to know how to resize the whole calendar container to be smaller that how it looks now.

I have added a live sample link and an image below for reference.

Live sample - click here for a live sample datepicker simulation

Any help would be much appreciated! Thanks in advance!

You'll have to play around with the values to get it the exact size you want, but this should work:

.k-calendar-monthview .k-calendar-td,
.k-month-calendar .k-calendar-td {
  width: 20px;
  height: 20px;
  inline-size: 20px;
  block-size: 20px;
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
  font-size: 8px;
}
.k-calendar-view {
  min-height: min-content;
  max-width: min-content;
}
.k-calendar-th {
  width: 20px;
  height: 20px;
  font-size: 8px;
}
.k-button-md {
  font-size: 8px;
}