#wpem-calendar-container {
  max-width: 900px;
  margin: 30px auto;
}

.fc-daygrid-event {
  background-color: #0073aa !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 13px !important;
}

.fc .fc-toolbar-title {
  font-size: 1.5em;
  color: #333;
}
/* Tooltip Container */
.calendar-tooltip-box {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 300px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    pointer-events: none; /* so tooltip doesn't block hover */
    transition: opacity 0.2s ease;
}

/* Inner Tooltip */
.calendar-tooltip {
    display: flex;
    flex-direction: column;
}

/* Banner Image */
.calendar-tooltip-banner {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
}

/* Title */
.calendar-tooltip-title {
    font-weight: 600;
    font-size: 16px;
    margin: 10px 15px 5px;
    line-height: 1.3;
}

/* Content */
.calendar-tooltip-content {
    padding: 0 15px 15px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

/* Event dates */
.calendar-tooltip-event-start-date,
.calendar-tooltip-event-end-date,
.calendar-tooltip-event-location {
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 3px;
    color: #888;
}

/* Optional: add a subtle arrow at the top */
.calendar-tooltip-box::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Smooth fade-in */
.calendar-tooltip-box.show {
    display: block;
    opacity: 1;
}

/* Center the button group including prev/next and custom controls */
#wpem-calendar .fc-toolbar-chunk {
    justify-content: center !important;
    display: flex !important;
    align-items: center;
}
.fc .fc-toolbar {
    display: block;
}

/* customize calendar */.fc .fc-button .fc-icon {
    font-size: 18px;
    vertical-align: middle;
    font-weight: 500 !important;
}
 .fc .fc-button .fc-icon {
    font-size: 18px;
    vertical-align: middle;
    font-weight: 500 !important;
}
 
button.fc-prev-button.fc-button.fc-button-primary {
    background: #f5f5f5;
    color: #111111;
    border: 0px !important;
    border-radius: 4px !important;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
button.fc-next-button.fc-button.fc-button-primary {
    background: #f5f5f5;
    color: #111111;
    border: 0px !important;
    border-radius: 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}  
button#calendarSearchBtn {
    background: #eed373;
    color: #000;
    font-size: 18px !important;
    font-weight: 600;
    border: 0px !important;
}
select#monthSelect {
    border: 1px solid #e4e4e4;
    margin-right: 10px;
    padding-right: 35px;
    width: 206px;
}
select#yearSelect {
    border: 1px solid #e4e4e4;
    margin-right: 10px;
    width: 206px;
}

 
th.fc-col-header-cell {
    background: #cecece;
    height: 40px;
    vertical-align: middle;
    color: #000;
    font-size: 14px;
    font-weight: 500 !important;
}
table.fc-col-header {
    margin-bottom: 0px !important;
}
td.fc-day.fc-day-disabled {
    background: repeating-linear-gradient(-35deg,var(--wpem-gray-bg-color),var(--wpem-gray-bg-color) 10px,var(--wpem-white-color) 10px,var(--wpem-white-color) 20px);
}
 
 
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: hsla(0,0%,50.2%,.0705882353);
}

td.fc-day.fc-day-thu.fc-day-today.fc-daygrid-day {
    background: #0096ff;
    color: #fff;
    font-weight: 700;
}
 
a.fc-event.fc-event-start.fc-event-end.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
    background: #db5a3d !important;
}
.fc-daygrid-event-harness a {
    background: #db5a3d !important;
 }
table.fc-scrollgrid-sync-table {
    margin: 0px !important;
}
a.fc-event.fc-event-start.fc-event-future.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
    background: #db5a3d !important;
}
.calendar-tooltip-title.wpem-heading-text {
    padding: 10px 0px 5px !important;
    color: #000;
}
.calendar-tooltip-content i{
    color: #000;
}
.calendar-tooltip-content i.far.fa-clock{
margin-left: 18px;
}
 
.calendar-tooltip-title.wpem-heading-text {
    background: #1e4c6e;
    color: #fff;
    padding: 12px 24px !important;
    text-align: center;
    margin: 20px 0px !important;
}
.calendar-tooltip-event-start-date, .calendar-tooltip-event-end-date, .calendar-tooltip-event-location {
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 3px;
    color: #888;
    border-bottom: 1px solid #888;
    padding: 10px 0px;
}
 
.calendar-tooltip-content strong {
    color: #000;
    margin: 0px 5px;
}
.calendar-tooltip-event-location {
    border-bottom: 0px !important;
}
.calendar-tooltip-box {
    box-shadow: 0 6px 20px rgb(0 0 0 / 46%) !important;
}
 
@media (min-width:320px) and (max-width:767px) {
div#calendar-container {
    width: 100%;
    float: left;
    padding: 0px 15px !important;
}
select#monthSelect {
    width: auto !important;
}
select#yearSelect {
    width: auto !important;
}
 
div#wpem-calendar {
    overflow-x: scroll;
}
 
}