:root {
  --titleColor: white;
  --titleBackgroundColor: #0070C0;
  --semestrColor: black;
  --semestrBackgroundColor: #E7E6E6;
  --monthColor: black;
  --monthBackgroundColor: white;
  --dayColor: black;
  --dayBackgroundColor: white;
  --emptyBackgroundColor: white;
  --weekdayColor: black;
  --weekdayBackgroundColor: white;
  --weekendColor: red;
  --weekendBackgroundColor: #D9D9D9;
  --startEndOfYearColor: white;
  --startEndOfYearBackgroundColor: #00B050;
  --dayOffColor: white;
  --dayOffColor1: red;
  --dayOffBackgroundColor: red;
  --hollidaysColor: white;
  --hollidaysBackgroundColor: #00B0F0;

  --cell-width: auto;
}

#calendar-table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border: 2px #000 solid;
  border-collapse: collapse;
}

.calendar-title {
  text-align: center;
  font-family: "Royal Arial", serif;
  font-size: 1.2rem;
  /*14.5pt;*/
  font-weight: bold;
  font-style: italic;
  color: var(--titleColor);
  background-color: var(--titleBackgroundColor);
  border: 2px #000 solid;
}

.semestr {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: 1rem;
  /* 12pt; */
  color: var(--semestrColor);
  background-color: var(--semestrBackgroundColor);
  border: 2px solid #000;
}

.empty {
  background-color: var(--emptyBackgroundColor);
}

.empty.title {
  border: 2px solid #000;
}

.month {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: .917rem;
  /* 11pt; */
  text-transform: capitalize;
  border: 1px solid #000;
  color: var(--monthColor);
  background-color: var(--monthBackgroundColor);
}

.day {
  text-align: center;
  font-size: .917rem;
  /* 11pt; */
  border: 3px double #000;
  color: var(--dayColor);
  background-color: var(--dayBackgroundColor);
}

.weekday {
  font-weight: bold;
  text-transform: capitalize;
  color: var(--weekdayColor);
  background-color: var(--weekdayBackgroundColor);
}

.weekend td {
  border: 3px double #000;
  color: var(--weekendColor);
  background-color: var(--weekendBackgroundColor);
}

.startEnd,
.holliday.startEnd {
  color: var(--startEndOfYearColor);
  background-color: var(--startEndOfYearBackgroundColor);
}

.weekend .startEnd {
  color: var(--dayOffColor1);
  background-color: var(--startEndOfYearBackgroundColor);
}

.weekend .startEnd.dayOff {
  color: var(--weekendColor);
  background-color: var(--startEndOfYearBackgroundColor);
}

.dayOff,
.holliday.dayOff,
.weekend .dayOff,
.weekend .holliday.dayOff {
  color: var(--dayOffColor);
  background-color: var(--dayOffBackgroundColor);
}

.holliday {
  color: var(--hollidaysColor);
  background-color: var(--hollidaysBackgroundColor);
}

.weekend .holliday {
  color: var(--dayOffColor1);
  background-color: var(--hollidaysBackgroundColor);
}

.legend {
  padding: .3rem;
  box-sizing: border-box;
  background-color: var(--dayBackgroundColor);
  font-size: .83rem;
  /* 10pt; */
}

.legend>div {
  position: relative;
  /* display: grid;
  grid-template-columns: 33% 1fr; */
}

.legend>div>div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 33.33%;
}

.legend.no-holidays p {
  position: relative;
  display: inline-block;
  margin: 0 .5rem;
}

.legend p {
  margin: 0;
}

.legend span.square {
  position: relative;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  vertical-align: middle;
}

.legend .hollidays {
  background-color: var(--hollidaysBackgroundColor);
}

.legend .dayOff {
  background-color: var(--dayOffBackgroundColor);
}

.legend .weekend {
  background-color: var(--weekendBackgroundColor);
}

.legend .startEnd {
  background-color: var(--startEndOfYearBackgroundColor);
}

.legend .day1 {
  color: var(--dayColor);
}

.legend .dayOff1 {
  color: var(--dayOffColor1);
}

@media screen and (max-width: 768px) {
  .legend>div {
    position: relative;
    display: flex;
  }
}