@font-face {
  font-family: "dpCalendarFont";
  src: url("../fonts/inter_light.ttf");
}

:root {
  --dp-calendar-height: 320px;
  --dp-calendar-width: 340px;

  /* Fonts */

  --dp-Font_Calendar_mid: "dpCalendarFont";

  /* Colors CD */

  --dp-color-calendar-highlite: #008295 !important ;
  --dp-color-calendar-background: #026c7c !important ;
  --dp-color-calendar-font: rgb(254, 254, 254);
}

/* Calendar */

.calendarelement {
  margin: 0;

  padding: 0;
  width: var(--dp-calendar-width);
  height: var(--dp-calendar-height);
  box-sizing: border-box;
  font-size: 14px;
}

.calendar {
  width: 100%;
  height: 100%;
  background-color: var(--dp-color-calendar-background);
  color: var(--dp-color-calendar-font);
  padding: 0px;
  padding: 0;
}

.month {
  width: var(--dp-calendar-width);
  height: 20%;
  background-color: var(--dp-color-calendar-background);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  text-align: center;
}

.date {
  text-align: center;
}
.month i {
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: calc(var(--dp-calendar-width) * 0.2);
}

.month h1 {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  margin-top: 25px;
  color: var(--dp-color-calendar-font);
  font-family: var(--dp-Font_Calendar_mid);
}

.month p {
  font-size: 12px;
  padding: 0;
  margin: 0;
  color: var(--dp-color-calendar-font);
  font-family: var(--dp-Font_Calendar_mid);
}

.weekdays {
  width: var(--dp-calendar-width);
  height: calc((var(--dp-calendar-height) * 0.8) / 6);
  display: flex;
  align-items: center;
}

.weekdays div {
  height: calc((var(--dp-calendar-height) * 0.8) / 6);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1rem;
  width: calc(var(--dp-calendar-width) / 7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--Font_Calendar_mid);
}

.days div {
  font-size: 12px;
  width: calc(var(--dp-calendar-width) / 7);
  height: calc((var(--dp-calendar-height) * 0.8) / 6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s;
}

.days div:hover:not(.today) {
  background-color: var(--dp-color-calendar-background);
  border: 2px solid var(--dp-color-calendar-font);
  cursor: pointer;
}

.prev-date,
.next-date {
  opacity: 1;
  background-color: var(--dp-color-calendar-background);
}

.selected {
  background-color: var(--dp-color-calendar-highlite);
}