/*<style>*/
	body {
		background-color: #fff;
	}
	
	#pageContainer {
		background-color: #ffffff;
		margin: 100px auto 0px auto;
		font-family: Roboto;
		padding: 0px;
		width: 70%;
		min-width: 300px;
	}
/*</style>*/


/*<!-- Calendar -->*/
/*<style>*/
	    .calendar {
	      width: 90%;
	      margin: auto;
	      max-width: 600px;
	      background: #fff;
	      border-radius: 10px;
	      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	      overflow: hidden;
	    }

	    .calendar-header {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      background: #1976d2;
	      color: #fff;
	      padding: 0px;
	    }
	    
	    #monthYear { 
	    	color: #FFF; 
	    }

	    .calendar-header h2 {
	      margin: 0;
	      font-size: 18px;
	    }

	    .calendar-header button {
	      background: none;
	      border: none;
	      color: #fff;
	      font-size: 22px;
	      cursor: pointer;
	    }

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

	    .calendar-table th,
	    .calendar-table td {
	      text-align: left;
	      padding: 5px;
	      border: 1px solid #ddd;
	      width: 14.28%; /* 100% / 7 days */
	      position: relative;
	      vertical-align: top;
	    }

	    .calendar-table td {
	      height: 60px;
	      transition: background 0.3s;
	    }

	    .calendar-table td .day-number {
	      position: absolute;
	      top: 2px;
	      right: 2px;
	      font-size: 14px;
	      color: #000;
	    }

	    .calendar-table td .event-count {
	      position: absolute;
	      bottom: 2px;
	      right: 2px;
	      font-size: 12px;
	      color: #1976d2;
	      
	      padding: 8px;
	      min-width: 16px;
	      text-align: center;
	      border: 1px solid #c5c5c5;
	      border-radius: 50%;
	      background: #ededed;
	    }

	    .calendar-table td:hover {
	      background: #f0f8ff;
	    }

	    .calendar-table .today {
	      background: #ffeeba;
	    }

	    .calendar-table .other-month .day-number {
	      color: #aaa;
	    }

	    @media (max-width: 600px) {
	      .calendar-table td .event-count {
		font-size: 12px;
	      }
	    }
/*</style>*/
/*<style>*/
	.calendar-table td.has-events {
	  cursor: pointer;
	}
/*</style>*/

/*<!-- Modal -->*/
/*<style>*/
	/* The Modal (background) */
	.modal {
		display: none;
		/* Hidden by default */
		position: fixed;
		/* Stay in place */
		z-index: 1002;
		/* Sit on top */
		left: 0;
		top: 0;
		width: 100%;
		/* Full width */
		height: 100%;
		/* Full height */
		overflow: auto;
		/* Enable scroll if needed */
		background-color: rgb(0, 0, 0);
		/* Fallback color */
		background-color: rgba(0, 0, 0, 0.4);
		/* Black w/ opacity */
		
		/* padding-top: 60px; */
	}

	/* Modal Content/Box */
	.modal-content {
		background-color: #fefefe;
		margin: 5% auto 15% auto;
		/* 5% from the top, 15% from the bottom and centered */
		border: 1px solid #888;
		width: 80%;
		/* Could be more or less, depending on screen size */
	}

	/* The Close Button (x) */
	.close {
		position: absolute;
		right: 25px;
		top: 0;
		color: #000;
		font-size: 35px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: red;
		cursor: pointer;
	}
/*</style>*/

/*<style>*/
  .modal-header {
	  margin-bottom: 20px;
	  font-size: 20px;
	  font-weight: bold;
	  text-align: center;
	  color: #fff;
	  background-color: #1976d2;
	  padding: 10px;
	  text-transform: capitalize; /* Pour une meilleure présentation des mois/jours */
	}
  
  .event-item {
	  padding: 10px;
	  background-color: #f9f9f9; /* Default for odd items */
	}

	.event-item:nth-child(odd) {
	  background-color: #f0f8ff; /* Light blue for odd items */
	}

	.event-item:nth-child(even) {
	  background-color: #e8f5e9; /* Light green for even items */
	}

	.event-item h3 {
	  margin: 0 0 8px;
	  font-size: 16px;
	  color: #1976d2;
	}

	.event-item p {
	  margin: 5px 0;
	  font-size: 14px;
	  color: #555;
	}

	.event-item a {
	  display: inline-block;
	  margin-top: 8px;
	  font-size: 14px;
	  color: #fff;
	  background-color: #1976d2;
	  text-decoration: none;
	  padding: 5px 10px;
	  border-radius: 3px;
	}

	.event-item a:hover {
	  background-color: #145ea8;
	}
/*</style>*/