#pgmcontent {
	width: 100%;
	overflow: auto;
}
.page {
	overflow: auto;
}

.tabs {
            display: flex;
            cursor: pointer;
			margin-bottom: 0px !important;
        }
        .tab {
			background-color: #4EADDD;
            flex: 1;
            padding: 10px;
            border: 1px solid #024059;
            text-align: center;
            transition: background-color 0.3s ease-in-out; /* Add transition */
			font-size: 20px;
			font-weight: bold;
        }
        .tab:hover {
            background-color: #A5D0F1; /* Set hover background color */
        }
        .tab.active {
            background-color: #F4F4F4;
			border-bottom: 1px solid #F4F4F4; 
        }
        .content {
			width: 100%;
			overflow: auto;
            padding: 20px;
            border: 1px solid #024059;
            border-top: none;
            opacity: 1;
            transition: opacity 0.5s ease-in-out; /* Add transition */ 
        }

#header {
	margin: auto;
	font-size: 20px;
	padding-bottom: 8px;
}

.container {
	position: relative;
    margin: 0 auto;
}

.program-table {
    width: 100%;
    border-collapse: collapse;
	background-color: white;
}

.program-table th, .program-table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
}

.program-table th {
    background-color: #333;
    color: #fff;
}

.program-table th:first-child,
.program-table td:first-child {
    border: .5px solid #ccc !important;
  width: 4%;
}

.program-table th:not(:first-child),
.program-table td:not(:first-child) {    
  border: .5px solid #fff !important;
  width: 16%;
}
.program-table td:not(:first-child):hover {
  width: 16%;
 color: white !important;
  background-color: dimgrey !important;
	cursor: pointer;
}
.program-table td.empty-cell:hover {
  /* Reset hover styles */
  background-color: initial !important;
  color: initial !important;
  cursor: default !important;
}
.time {
	font-weight: 700;
	background-color: white;
}

.PGMmodal {
  max-width: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  z-index: 10000;
}


  .PGMmodal-content {
	overflow: auto;
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
	max-width: 1300px;
  }
  .PGMclose {
    color: #ccc;
    float: right;
    font-size: 28px;
    font-weight: bold;
	margin: 10px;
  }
  .PGMclose:hover,
  .PGMclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

@media only screen and (max-width: 600px) {
.program-table th, .program-table td {
    font-size: 14px;
}
#header, .tab {
	font-size: 16px;
}

}