.datePicker {
   display: inline-block;
   position: relative;
   border: 1px solid #eaeaea;
 }

 svg {
   pointer-events: none;
 }

 .datePicker input {
   border: 0;
   outline: 0;
   padding: 10px 5px;
   min-height: 20px;
   min-width: 200px;
   font-size: 1em;
 }

 .datePicker .icon {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   width: 1.2em;
   height: 1.2em;
   display: block;
   cursor: pointer;
 }

 .datepicker-container {
   position: absolute;
   height: auto;
   border-radius: 3px;
   margin-top: 8px;
   z-index: 9;
   background-color: #fff;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }

 .datepicker-container li {
   list-style: none;
   padding: 5px 0;
   text-align: center;
   cursor: pointer;

 }

 .datepicker-container li:hover {
   background-color: #aaa;
   color: #fff;
 }

 .datepicker-container li.checked,
 .datepicker-month li.checked,
 .datepickeer-day li.checked {
   background-color: #010130;
   color: #fff;
 }

 .datepicker-container li.current,
 .datepicker-month li.current,
 .datepickeer-day li.current {
   border: 1px solid orange;
   color: orange;
 }

 .datepicker-year li.not-available,
 .datepicker-month li.not-available,
 .datepicker-day li.not-available {
   color: #aaa;
   pointer-events: none;
   cursor: default;
 }

 .datepicker-year, .datepicker-month {
   padding: 0;
   min-width: 300px;
   background-color: #fff;
 }

 .datepicker-month {
   padding: 10px;
   display: grid;
   grid-template-columns: repeat(auto-fill, calc(100% / 3));
 }

 .datepicker-day {
   margin: 10px;
   padding: 0;
   display: grid;
   min-width: 340px;
   background-color: #fff;
   grid-template-columns: repeat(auto-fill, calc(100% / 7));
 }


 .day-header {
   text-align: center;
   height: 45px;
   line-height: 45px;
   background: #ddd;
   font-weight: 700;
   position: relative;
   cursor: default;
   border-bottom: 1px solid #aaa;
 }

 .day-header span:nth-of-type(2), .day-header span:nth-of-type(1) {
   cursor: pointer;
   padding: 0 5px;
 }
 .day-header span.focus{
  border: 2px solid #010130;
  border-radius: 3px;
 }

 .day-header .prev-month {
   font-size: 1.2em;
   font-weight: 400;
   cursor: pointer;
   position: absolute;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
 }

 .day-header .next-month {
   font-size: 1.2em;
   font-weight: 400;
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
 }

 .week-box {
   display: grid;
   grid-template-columns: repeat(auto-fill, calc(100% / 7));
   padding: 10px;
   border-bottom: 1px solid #aaa;
 }

 .week-box span {
   text-align: center;
 }

 @media screen and (max-width:560px) {
   .datepicker-day, .datepicker-year, .datepicker-month {
     min-width: 200px;
   }
 }