html {
  --vikend: #00B200; /* var(--vikend) */
  --mimoMesic: #CCCCCC;
  --dnes: #E60099;
  --dnesMimoMesic: #FFB2E6;
  --hover: #F2F2F2;
  --vybrane: #E680E6;
  --vybraneMimoMesic: #F7D9FF;
}

.kal-mesic {
  width: 223px;
  margin: auto;
  display: inline-block;
  margin: 10px;
}
.kal-skryty {display: none;}

.kal-sipka-skryta {visibility: hidden;}

.kal-zahlavi-navigace, .kal-zahlavi-dny, .kal-dny {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
}
.kal-zahlavi-navigace {flex-wrap: nowrap; justify-content: space-between;}
.kal-zahlavi-dny {margin-top: 10px;}

.kal-zahlavi-dny > div:nth-child(7n-1), .kal-dny > div:nth-child(7n-1), .kal-zahlavi-dny > div:nth-child(7n), .kal-dny > div:nth-child(7n) {color: var(--vikend);}

.kal-zahlavi-dny > div, .kal-dny > div {
  width: 30px;
  height: calc(30px - 6px);
  padding-top: 6px;
  text-align: center;
  border-radius: 50%;
}

.kal-zahlavi-navigace > div:not(:nth-child(2)):hover {cursor: pointer;}
.kal-dny > div:not(.kal-vybrane):hover {background-color: var(--hover);}
.kal-dny > div:hover {cursor: pointer;}

.kal-zahlavi-navigace > div, .kal-zahlavi-dny > div {font-weight: bold;}

.kal-z-nasledujiciho, .kal-z-predchoziho {color: var(--mimoMesic) !important;}

.kal-dnes {
  border: 2px solid var(--dnes);
  margin: -2px;
}
.kal-dnes.kal-z-nasledujiciho, .kal-dnes.kal-z-predchoziho {border-color: var(--dnesMimoMesic);}

.kal-vybrane {
  background-color: var(--vybrane);
  color: white !important;
}
.kal-vybrane.kal-z-nasledujiciho, .kal-vybrane.kal-z-predchoziho {background-color: var(--vybraneMimoMesic);}
.kal-vybrane.dblpreskrtnute:before, .kal-vybrane.dblpreskrtnute:after {border-color: rgba(100, 100, 100, 0.75);}
.kal-vybrane.kal-z-nasledujiciho:before, .kal-vybrane.kal-z-predchoziho:before, 
.kal-vybrane.kal-z-nasledujiciho:after, .kal-vybrane.kal-z-predchoziho:after {border-color: rgba(120, 120, 120, 0.35);}