.cal-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
    align-items: flex-start;
}

div#currentMonthYear1 {
    min-width: 160px;
    text-align: center;
	font-size: 22px;
	    color: #004e82;
}

div#currentMonthYear2 {
    min-width: 160px;
    text-align: center;
	font-size: 22px;
	    color: #004e82;
}
.calendar {
      width: 100%;
      max-width: 400px;
      margin-bottom: 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .month-selector {
      display: flex;
      align-items: center;
    }

    select {
     padding: 10px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #fff;
      padding: 8px;
      text-align: center;
    }

   th {
background-color: #004e82;
color: color(srgb 0.9985 0.7449 0.0009);
}

    .prev, .next {
cursor: pointer;
padding: 20px;
}

    .checkbox-container {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .checkbox-label {
      margin-left: 5px;
    }

    .available {
    background-color: #8abb2a91;
    color: white;
}

    .occupied {
         background-color: red;
    color: white; 

    }