#calendar table {
    border-collapse: collapse;
    width: 100%;
  }
  
  #calendar th,
  #calendar td {
    border: none;
    text-align: center;
    width:calc(100% / 7);
    cursor: default;

  }
  
  #calendar th{
    padding: 5px 0px;
  }
  #calendar td {
    padding: 2px 0px;
  }
  .calDay {
    border-radius:20px;
    width:24px;
    height:24px;
    display: inline-block;
    vertical-align: middle;
  }
  #calendar th {
    background-color: var(--main-color-2);
    color:white;
  }
  
  #calendar td.today .calDay {
    background-color: lightblue;
  }

  #calendar td.hiliteDay .calDay{
    background-color: var(--main-color-2);
  }
  
  #calendar td:hover .calDay {
    background-color: var(--main-color-1);
  }