.inplaykalender_tag { text-align: center; font-size: 8px; letter-spacing: 1px; } 
.szenen { background-color: var(--ipkszenen); } 
.geburtstag { background-color: var(--ipkgeburtstag); } 
.timeline { background-color: var(--ipktimeline); }
.event { background-color: var(--ipkevent); }

.szenentimeline { background: linear-gradient(to left top, var(--ipkszenen) 50%, var(--ipktimeline) 50%); }
.szenengeburtstag { background: linear-gradient(to left top, var(--ipkgeburtstag) 50%, var(--ipkszenen) 50%); }
.szenenevent { background: linear-gradient(to left top, var(--ipkszenen) 50%, var(--ipkevent) 50%); }
.geburtstagtimeline { background: linear-gradient(to left top, var(--ipkgeburtstag) 50%, var(--ipktimeline) 50%); }
.geburtstagevent { background: linear-gradient(to left top, var(--ipkszenen) 50%, var(--ipkevent) 50%); }
.timelineevent { background: linear-gradient(to left top, var(--ipktimeline) 50%, var(--ipkevent) 50%); }

.szenengeburtstagtimeline { background: linear-gradient(to left top, var(--ipkgeburtstag) 33%, var(--ipkszenen) 33%, var(--ipkszenen) 66%, var(--ipktimeline) 66%); }
.szenengeburtstagevent { background: linear-gradient(to left top, var(--ipkgeburtstag) 33%, var(--ipkszenen) 33%, var(--ipkszenen) 66%, var(--ipkevent) 66%); }
.szenentimelineevent { background: linear-gradient(to left top, var(--ipkszenen) 33%, var(--ipktimeline) 33%, var(--ipktimeline) 66%, var(--ipkevent) 66%); }
.geburtstagtimelineevent { background: linear-gradient(to left top, var(--ipkgeburtstag) 33%, var(--ipktimeline) 33%, var(--ipktimeline) 66%, var(--ipkevent) 66%); }

.szenengeburtstagtimelineevent { background: linear-gradient(to left top, var(--ipkgeburtstag) 25%, var(--ipkszenen) 25%, var(--ipkszenen) 50%, var(--ipktimeline) 50%, var(--ipktimeline) 75%, var(--ipkevent) 75%); }

#mini-kalender { 
  font-size: 7px;
  font-family: Montserrat;
  font-weight: 500;
}
#mini-kalender td { padding: 5px; }
.inplaykalender-eventlist { max-height: 50px; overflow: auto; padding-right: 5px; }

.ipk-container {
  margin-top: 20px;
  height: 200px;
}

.ipk-scrollable {
  max-height: 160px;
  overflow-y: auto;
scrollbar-width: thin;
}

.mini-calendar-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.mini-calendar {
  margin: 3px;
  margin-top: 0px;
  width: calc(50% - 6px); /* Two calendars per row with margins considered */
}

.ipk-scrollable::-webkit-scrollbar {
  width: 4px; /* Adjust as necessary */
}
.ipk-scrollable::-webkit-scrollbar-track {
  background: var(--designscrollbgcolor);
}
.ipk-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--designscrollbgseccolor);
  border-radius: 10px; /* Optional for rounded corners */
}
.ipk-scrollable::-webkit-scrollbar-button {
  display: none; /* Hide scrollbar arrows */
}

.ipk_cat {
  color: var(--highlight);
  padding: 6px;
  font-size: 9px;
  font-family: Montserat, Verdana, sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 600;
  font-style: normal;
}

.ipk_month {
  font-size: 12px;
  line-height: 2em;
  font-weight: 500;
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
  font-style: normal;
}

.ipk-day {
  text-align:center;
	font-size: 10px;
}

.mini-plot {
  background: var(--designbgcolorlightest); 
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 10px;
  font-family: Montserat, Verdana, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8em;
  padding: 14px;
  text-transform: none;
  text-align: justify;
  letter-spacing: 2px;
}