* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
}

.yhc-page {
  color: #eee;
  display: flex;
  flex-flow: row-reverse wrap;
  gap: 3px;
  justify-content: center;
  align-items: top;
  box-sizing: border-box;
}

.yhc-container {
  width: 384px;
  color: #eee;
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: top;
  box-sizing: border-box;
  user-select: none;
}

.yhc-diary {
  background-color: white;
  color: black;
}

.yhc-calendar {
	width: 240px;
	height: 274px;
	color: black;
	background-color: #fff;
	border: 1px solid black;
	border-radius: 4px;
	box-shadow: 3px 3px #0001;
}

.yhc-key {
	width: 132px;
	height: 240px;
	color: #131;
	font-size: 0.875rem;
	background-color: white;
	padding-left: 0.5rem;
	border: 1px solid black;
	border-radius: 4px;
	box-shadow: 3px 3px #0001;
}

.yhc-key img {
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

.yhc-key .diary-name {
	font-size: 1rem;
	font-weight: bold;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.yhc-month,
.yhc-diary-month {
	height: 3.25rem;
	color: #eea;
	background-color: #185;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	text-align: center;
	text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.75);
}

.yhc-month .prev,
.yhc-diary-month .prev {
  font-size: 2rem;
  cursor: pointer;
}

.yhc-month .next,
.yhc-diary-month .next {
  font-size: 2rem;
  cursor: pointer;
}

.yhc-diary-month button {
	width: 6rem;
	height: 2rem;
	background-color: #fff2;
	color: #fff;
	font-size: 0.8rem;
	box-shadow: 0 2px 2px 0 #0007;
	border: none;
	border-radius: 0.5rem;
}

.yhc-diary-month button:hover {
	width: 6rem;
	height: 2rem;
	background-color: #fff2;
	color: #ff7;
	font-size: 0.8rem;
	box-shadow: 0 4px 2px 0 #0007;
	border: none;
	border-radius: 0.5rem;
}

.yhc-diary-month button:active {
	width: 6rem;
	height: 2rem;
	background-color: #fff2;
	color: #cff;
	font-size: 0.8rem;
	box-shadow: 0 1px 2px 0 #0007;
	border: none;
	border-radius: 0.5rem;
}

.yhc-diary-month button:disabled {
	width: 6rem;
	height: 2rem;
	background-color: #fff1;
	color: #0005;
	box-shadow: 0 2px 2px 0 #0001;
	border: none;
	border-radius: 0.5rem;
}

.yhc-date h1,
.yhc-diary-date h1 {
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.yhc-weekdays {
	font-size: 0.9rem;
	height: 1rem;
	padding: 0 0.4rem;
	display: flex;
	align-items: center;
}

.yhc-weekdays div {
  width: calc(100% / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
}

.yhc-days,
.yhc-diary-days {
  display: flex;
  justify-content: left;
  align-items: left;
  flex-wrap: wrap;
  padding: 0.2rem;
}

.yhc-days div {
  width: calc(100% / 7);
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s;
  margin-top: 1px;
}

.yhc-days div:hover:not(.today) {
  /* background-color: #222; */
  border: 2px solid #bbb;
  cursor: pointer;
}

.yhc-diary-entry {
	width: 100%;
	border-radius: 4px;
}

.yhc-diary-entry-weekend {
	width: 100%;
	background-color: #edf;	
	border-radius: 4px;
}

.yhc-diary-entry div,
.yhc-diary-entry-weekend div{
	margin-left: 2px;	
	margin-right: 2px;	
}

.yhc-diary-day {
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  text-align: center;
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
  margin-top: 1px;
  cursor: pointer;
  user-select: none;
}

.yhc-diary-sel {
	margin-left: 4px;
	margin-right: 4px;
	background-color: #eee;
}

.yhc-diary-ref {
	display: inline-block;
	width: 6rem;
	min-width: 6rem;
	text-align: left;
	background-color: #eee;
}

.yhc-diary-note {
	display: inline-block;
	width: 30rem;
	min-width: 30rem;
	text-align: left;
	background-color: #eee;
}

.yhc-outside-date,
.yhc-prev-date,
.yhc-next-date {
  opacity: 0.33;
}

.yhc-today {
	border: 2px solid #0a0;
	border-radius: 0.6rem;
}

.yhc-unavailable {
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("yhc-unavailable.svg");
	background-size: 100% 100%;
}
.yhc-limited {
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("yhc-limited.svg");
	background-size: 100% 100%;
}
.yhc-available {
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("yhc-available.svg");
	background-size: 100% 100%;
}
.yhc-provisional {
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("yhc-provisional.svg");
	background-size: 100% 100%;
}
.yhc-booked {
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("yhc-booked.svg");
	background-size: 100% 100%;
}
.yhc-past {
	width: 1.5rem;
	height: 1.5rem;
	background-color: #222;
}