.datepicker
 { position : relative;
   width : 100%;
   font-family : Arial, sans-serif;
 }
.datepicker .calendar
 { position : absolute;
   top : 110%;
   left : 0;
   width : max-content;
   background : #fff;
   border : 1px solid #ddd;
   box-shadow : 0 4px 8px rgba(0,0,0,.1);
   display : none;
   z-index : 10;
 }
.datepicker .calendar-header
 { display : flex;
   align-items : center;
   justify-content : space-between;
   gap : 6px;
   padding : 6px;
   background : #f5f5f5;
 }
.datepicker .calendar-header select
 { flex : 1;
   padding : 4px;
   background : white;
   border-radius : 3px;
   border : 1px silver solid;
 }
.datepicker .year-nav
 { display : flex;
   align-items : center;
   gap : 6px;
 }
.datepicker .year-nav button
 { padding : 2px 6px;
   cursor : pointer;
   border : 1px solid #ccc;
   background : #fff;
 }
.datepicker .year-nav button:hover
 { background : #eee;
 }
.datepicker .yearLabel
 { min-width : 45px;
   text-align : center;
   font-weight : bold;
 }
.datepicker .calendar-days, .calendar-dates
 { display : grid;
   grid-template-columns : repeat(7, 1fr);
   text-align : center;
 }
.datepicker .calendar-days
 { gap : 5px;
 }
.datepicker .calendar-days div
 { font-weight : bold;
   padding : 5px 0;
   background : #fafafa;
 }
.datepicker .calendar-dates div
 { padding : 9.5px 0px;
   cursor : pointer;
   border-radius : 50%;
 }
.datepicker .calendar-dates div:hover
 { background : #eee;
 }
.datepicker .calendar-dates .selected, .calendar-dates .selected:hover
 { background : #007bff;
   color : #fff;
 }
.datepicker .calendar-dates .today
 { border : 1px solid #007bff;
   box-sizing : border-box;
   font-weight : bold;
 }
.datepicker .box-input-calender
 { position : relative;
 }
.datepicker .clear-calender
 { position : absolute;
   top : 50%;
   transform : translateY(-50%);
   right : 10px;
   cursor : pointer;
   user-select : none;
   color : #5e5959;
   font-weight : bold;
 }