But – even if it is overriding it partially, it still doesn't explain why the original CRED/Toolset form date picker looks like it does.
The CSS you have pasted above is mostly invalid, starting with the .calendar definition here:
.calendar
position absolute
width 280px
left 50%
top 50%
margin -145px 0px 0px -140px
background #fff
border-radius 4px
overflow hidden
box-shadow 0 5px 10px rgba(0,0,0,0.2)
I'm not familiar with this syntax, is it some kind of shorthand that would eventually be resolved by a CSS compiler system? Not sure if you're accustomed to using a CSS compiler to resolve a shorthand syntax, but as it is now it's not compiled or expanded, it's simply written out to the page. So you've got invalid syntax, and nothing after .calendar will be interpreted because of syntax errors, unless I'm misunderstanding how your CSS system works. Normally the correct CSS syntax looks like this, complete with brackets, colons, and semicolons:
.calendar {
position: absolute;
width: 280px;
left: 50%;
...
}
The original Forms datepicker looks the way it does because it uses the standard jQuery UI theme (orange header / blue text with a gray background for the calendar). As I said, you can use themeroller to roll your own theme, or you can apply individual CSS styles to override that theme. There is a conflict between jQuery UI and the Twenty Twenty One theme that overrides the calendar table's min-width property, which results in the days extending out beyond the background of the table. You can resolve that issue with this code snippet:
#ui-datepicker-div table {
min-width: inherit;
}
Since you've got invalid CSS as explained above, you should probably place this snippet before the .calendar definition, or fix the syntax of the other code. That will fix the layout so the days don't extend beyond the width of the background.
Beyond that, I would need to see the results once you fix the syntax errors in the other code to understand why overrides aren't working. Let me know when you have an update available and I'll take another look.
