body, html {
      height: 100%;
      margin: 0;
      background: linear-gradient(to bottom, #1E90FF, #1E90FF);
      overflow-x: hidden;
      font-family: 'Arial', sans-serif;
  }
  .calendar-container {
      overflow-x: auto;
      margin-top: 20px;
      padding: 0 20px;
      width: 100%;
  }
  .calendar {
      width: 100%;
      table-layout: fixed;
      margin-bottom: 20px;
      border-collapse: collapse;
  }
  .calendar th, .calendar td {
      border: 1px solid #dee2e6;
      vertical-align: top;
      padding: 10px;
      text-align: center;
      word-wrap: break-word;
  }
  .calendar th {
      background-color: #007bff;
      color: white;
      height: 50px;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 1em;
  }
  .calendar td {
      height: 80px;
      font-size: 0.9em;
      transition: background-color 0.3s;
  }
  .calendar td:hover {
      background-color: rgba(255, 255, 255, 0.2);
  }
  .event-title {
      cursor: pointer;
      color: white;
      border: none;
      padding: 5px;
      margin: 2px;
      border-radius: 4px;
      display: block;
      transition: transform 0.2s;
  }
  .event-title:hover {
      transform: scale(1.05);
  }
  .month-header {
      background: #007bff;
      color: white;
      text-align: center;
      padding: 15px 0;
      font-size: 1.5rem;
      position: relative;
      z-index: 1000;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .modal-dialog {
      max-width: 100%;
      margin: 0;
  }
  .modal-content {
      height: 100vh;
      border-radius: 0;
  }