:root {
  --gh-bg-color: #FFFFFF;
  --gh-base-size-4: 0.25rem;
  --gh-base-size-8: 0.5rem;
  --gh-base-size-12: 0.75rem;
  --gh-base-size-16: 1rem;
  --gh-base-size-32: 2rem;
  --gh-cell-level0-color: #ebedf0;
  --gh-cell-level1-color: #9be9a8;
  --gh-cell-level2-color: #40c463;
  --gh-cell-level3-color: #30a14e;
  --gh-cell-level4-color: #216e39;

  --gh-cell-info-bg-color: #FFFFFF;
  --gh-cell-outline-color: #d0d7de;
  --gh-cell-border-color: #d0d7de;
  --gh-border-card-color: #323232;
  --gh-border-card-width: max(0.5px, 0.0325rem);
  --gh-text-default-color: #323232;
  --gh-text-inactive-color: #848D97;
  --gh-link-hover-color: #2f81f7;
  --gh-font-default-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}

/* Main block */
#gh {
  color: var(--gh-text-default-color);
  width: fit-content;
  font-family: var(--gh-font-default-family);
}
#gh a {
  text-decoration: none;
  color: var(--gh-text-inactive-color)
}
#gh a:hover {
  color: var(--gh-link-hover-color);
}

/* Table */
.ghCalendarTable {
  color: var(--gh-text-default-color);
  border-spacing: 3px;
  border-collapse: separate;  
}
.ghCalendarTable tr {
  height: 10px;
}
.ghCalendarTable td {
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

/* DayCell */
.ghCalendarDayCell {
  width: 10px;
  border-radius: 2px;
}
.ghCalendarDayCell[data-level="NONE"] {
  background-color: var(--gh-cell-level0-color);
  border: none;
  outline: none;
}
.ghCalendarDayCell[data-level="FIRST_QUARTILE"] {
  background-color: var(--gh-cell-level1-color);
}
.ghCalendarDayCell[data-level="SECOND_QUARTILE"] {
  background-color: var(--gh-cell-level2-color);
}
.ghCalendarDayCell[data-level="THIRD_QUARTILE"] {
  background-color: var(--gh-cell-level3-color);
}
.ghCalendarDayCell[data-level="FOURTH_QUARTILE"] {
  background-color: var(--gh-cell-level4-color);
}
.ghCalendarDayCell span {
  visibility: hidden;
  position: absolute;
  transform: translate(-50%, -130%);
  word-wrap: normal;
  text-wrap: nowrap;
  pointer-events: none;
  background-color: var(--gh-cell-info-bg-color);
  padding: 10px;
  font-size: 12px;
  border-radius: 6px;
  font-family: var(--gh-font-default-family);
}
.ghCalendarDayCell span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: var(--gh-cell-info-bg-color) transparent transparent transparent;
}
.ghCalendarDayCell:hover span {
  visibility: visible;
}

.ghCalendarLabel {
  font-size: 12px;
  position: absolute;
  bottom: -3px;
  font-weight: 400;
  font-family: var(--gh-font-default-family);
}

.ghCalendarLabelLeft {
  font-size: 12px;
  position: absolute;
  bottom: -3px;
  left: -12px;
  font-weight: 400;
  font-family: var(--gh-font-default-family);
}

/* Containers */
.ghCalendarCard {
  background-color: var(--gh-bg-color);
  padding: var(--gh-base-size-16);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border: var(--gh-border-card-width, 1px) solid var(--gh-border-card-color);
}
.ghCalendarCanvas {
  display: flex !important;
  flex-direction: column;
  padding-top: var(--gh-base-size-8, 4px) !important;
  text-align: center !important;
  margin-right: var(--gh-base-size-8, 8px) !important;
  margin-left: var(--gh-base-size-8, 8px) !important;
  overflow: visible;
}

/* Header */
.ghCalendarHeader {
  margin-bottom: var(--gh-base-size-4);
  height: 20px;
}
.ghCalendarHeader span {
  float: left;
}
.ghCalendarHeader div {
  display: flex;
  flex-direction: row;
  float: right;
}
.ghCalendarHeader div img {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-left: var(--gh-base-size-4);
}

/* Footer */
.ghCalendarCardFooter {
  display: block;
  padding: var(--gh-base-size-4, 4px) var(--gh-base-size-32, 32px) !important;
  text-align: center !important;
  font-size: var(--gh-base-size-12);
  font-family: var(--gh-font-default-family);
  color: var(--gh-text-inactive-color);
}
.ghCalendarCardFooterLink {
  display: block;
  float: left;
}
.ghCalendarCardFooterColors {
  display: flex;
  flex-direction: row;
  float: right;
  align-items: center;
}
.ghCalendarCardFooterColors * {
  margin-right: var(--gh-base-size-4);
}
.ghCalendarCardFooterColors div {
  width: 10px;
  height: 10px;
}