.calendar {
width: 100%;
max-width: 1200px;
margin: 20px auto 0 auto;
text-align: center;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
font-size: 18px;
font-weight: 300 !important; 
color: #F37429;
}
.calendar-header button {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.day-name {
font-weight: bold;
}
.day, .day-name { display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.day { font-weight: 300; }
.day.other-month {
color: #aaa;
}
.isNow {
font-weight: 700;
box-shadow: 0px 0px 2px gray;
color: red;
} .day.has-event {
background-color: #1E3A8A; color: white;
border-radius: 6px;
} .myModal {
display: none;
position: absolute;
top: 20px;         
left: 50%;         
transform: translateX(-50%);
background: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
width: 260px;
max-height: 70vh;
overflow-y: auto;
z-index: 9999999;  
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
max-height: 400px; 
}
.myModal h3 {
font-size: 16px;
margin-top: 0;
margin-bottom: 10px;
}
.myModal-close {
cursor: pointer;
font-weight: bold;
position: absolute;
top: 8px;
right: 12px;
font-size: 20px;
}
#eventList {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
#eventList li {
margin-bottom: 12px;
text-align: left;
}
#eventList a {
text-decoration: none;
color: #1E3A8A;
line-height: 17px;
}
#eventList a:hover {
text-decoration: underline;
} .day.has-event {
background-color: #F37429;
color: white;
border-radius: 6px;
} .day.past-event {
background-color: #bbb; color: white;
border-radius: 6px;
}
.calendar-wrapper {
position: relative; max-width: 1200px;
margin: 20px auto 0 auto;
}  #eventTickerWrapper {
width: 100%;
overflow: hidden; background: white; margin-top: 0px;
margin-bottom: 10px; 
position: relative;
}
#eventTickerWrapper a {
color: #F37429;
}
#eventTicker {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
#eventTicker span {
margin-right: 50px;
font-weight: bold;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}