.calendar-main{
	   padding:5px;
   }

    .calendar {
      display: inline-block;
      margin-top: 20px;
    }
    .header1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      margin-top: 10px;
    }
    .day {
      padding: 10px;
     /*** background: #f0f0f0; ***/
	  background: #d1efdabf;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
    }
    .day.header {
      font-weight: bold;
      background: #ddd;
      cursor: default;
    }
    .day.active {
      background: #4caf50;
      color: white;
      font-weight: bold;
    }
	
	
	
	/***** Mobile View CSS Start *****/
	
	@media (min-width: 100px) and (max-width: 991px) {
    
	.header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: -webkit-fill-available;
     }
	
	   .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
      margin-top: 10px;
	   min-width: -webkit-fill-available;
    }
	
   }
	
	
	/***** Mobile View CSS End *****/