.c-main {
  color: #222;
  background: #fff;
  text-align: center;
  letter-spacing: 0.3px;
  padding: 12px 10px 16px;
}

.yearDiv {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  padding: 6px 0 2px;
  color: #111;
}

.monthDiv {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 0 10px;
  color: #444;
}

.left {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
}

.right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
}

.left:hover, .right:hover {
  color: #000;
}

svg {
  width: 15px;
  height: 15px;
}

#fillDate {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#fillDate tr td {
  padding: 0;
  color: #222;
  text-align: center;
}

.wDay {
  cursor: default;
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0 10px !important;
}

.date {
  color: #222;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  vertical-align: middle;
}

.date:hover {
  background: transparent;
}

.date-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.18s, color 0.18s;
  pointer-events: none;
}

.date:not(.disabled):hover .date-circle {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.35);
}

.disabled {
  color: #ccc;
  cursor: default;
}

.disabled:hover {
  background: transparent;
}

.disabled .date-circle {
  color: #ccc;
}