PickerV2.css

.container {
  margin-top: 400px;
}
.datepicker {
  position: relative;
  padding: 1rem 2rem;
  font-size: 1.5rem;
}

.close {
  position: absolute;
  right: 5%;
  margin: auto;
}

.calendar {
  position: absolute;
  z-index: 9999;
  transform: translateY(-100%);
  width: 300px;
  height: 280px;
  box-shadow: 0 0 3em rgba(0, 0, 0, 0.15);
  font-weight: 500;
  font-size: larger;
}

.calendar-inner {
  width: 100%;
  height: 100%;
}

.calendar-top {
  text-align: center;
}

.calendar-month {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  color: #ffffff;
  background-color: rgba(50, 98, 174, 0.8)
}

.calendar-year {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  color: #ffffff;
  background-color: rgb(50, 98, 174)
}

.calendar span {
  margin-left: 5px;
  margin-right: 5px;
}

.i .fa .fa-chevron-left {
  margin-right: 5px;
}

.i .fa .fa-chevron-righ {
  margin-left: 5px;
}

.calendar-days {
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-label {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-left: 0 auto;
  margin-right: 0 auto;
}

.calendar-label > li {
  list-style-type: none;
  background-color: rgb(44, 69, 116);
  color: #fff;
}

.calendar-content {
}

.day {
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: 5px;
}

.day:hover {
   opacity: 2.5;
  cursor: pointer;
  /* font-weight: 900; */
  border-radius: 50%;
}
.day-empty {
}

.choosen-date {
  text-align: right;
  margin-right: 5%;
}


.close-button {
  margin-left: auto;
  color: #ffffff;
  background-color: rgba(50, 98, 174, 0.8);
  padding: 15px;
  position: relative;
}

.close-button > * {
  right: 5%;
  position: absolute;
}