.ctsfw-event-calendar {
--navy: #001846;
--maroon: #7b1824;
--eggshell: #f6f4ee;
--ink: #111827;
--blue-200: #a3c4f6;
--ring: rgba(0, 0, 0, .12);
font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} .ctsfw-event-calendar,
.ctsfw-event-calendar * {
border-radius: 0 !important;
} .ctsfw-event-calendar.theme-dark {
color: var(--eggshell);
background: var(--navy);
}
.ctsfw-event-calendar.theme-light {
color: var(--ink);
background: #fff;
border: 2px solid #e5e7eb;
} .ctsfw-event-calendar .calendar-title-row {
padding: .4rem .5rem .25rem;
text-align: center;
}
.ctsfw-event-calendar .calendar-title-row h2[data-role="calendar-month"] {
margin: 0; font-size: 2.7rem;
font-weight: 500; color: var(--blue-200);
} .ctsfw-event-calendar.theme-light .calendar-title-row h2[data-role="calendar-month"] {
color: var(--navy);
} .ctsfw-event-calendar .calendar-actions-row {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
padding: .5rem .5rem .25rem;
}
.ctsfw-event-calendar .calendar-actions-row .actions-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .4rem .75rem;
min-width: auto;
cursor: pointer;
border-width: 2px !important;
background-image: none !important;
box-shadow: none !important;
text-decoration: none;
}
.ctsfw-event-calendar.theme-dark .calendar-actions-row .actions-btn {
color: var(--eggshell);
background: transparent;
border: 2px solid var(--eggshell) !important;
}
.ctsfw-event-calendar.theme-dark .calendar-actions-row .actions-btn:hover {
color: var(--navy);
background: #fff;
border-color: var(--navy) !important;
}
.ctsfw-event-calendar.theme-light .calendar-actions-row .actions-btn {
color: var(--navy);
background: #fff;
border: 2px solid var(--navy) !important;
}
.ctsfw-event-calendar.theme-light .calendar-actions-row .actions-btn:hover {
color: var(--navy);
background: #fff;
border-color: var(--navy) !important;
} .ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon svg,
.ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon svg *,
.ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon path,
.ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon rect,
.ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon polygon,
.ctsfw-event-calendar .calendar-actions-row .actions-btn .ctsfw-icon circle {
fill: currentColor !important;
stroke: currentColor !important;
transition: fill .2s ease, stroke .2s ease;
} .ctsfw-event-calendar .calendar-nav-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: .5rem .5rem;
}
.ctsfw-event-calendar .calendar-nav-row .nav-left {
justify-self: start;
}
.ctsfw-event-calendar .calendar-nav-row .nav-right {
justify-self: end;
}
.ctsfw-event-calendar .calendar-nav-row .btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
min-width: auto;
cursor: pointer;
border-width: 2px !important;
border-color: currentColor !important;
background-image: none !important;
box-shadow: none !important;
}
.ctsfw-event-calendar .calendar-nav-row .btn::before,
.ctsfw-event-calendar .calendar-nav-row .btn::after {
content: none !important;
}
.ctsfw-event-calendar.theme-dark .calendar-nav-row .btn {
color: var(--eggshell);
background: transparent;
border-color: var(--eggshell) !important;
}
.ctsfw-event-calendar.theme-dark .calendar-nav-row .btn:hover {
color: var(--navy);
background: #fff;
border-color: var(--navy) !important;
}
.ctsfw-event-calendar.theme-light .calendar-nav-row .btn {
color: var(--navy);
background: #fff;
border-color: var(--navy) !important;
}
.ctsfw-event-calendar.theme-light .calendar-nav-row .btn:hover {
background: #fff;
} .ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon svg,
.ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon svg *,
.ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon path,
.ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon rect,
.ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon polygon,
.ctsfw-event-calendar .calendar-nav-row .btn .ctsfw-icon circle {
fill: currentColor !important;
stroke: currentColor !important;
} .ctsfw-event-calendar .calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: rgba(255, 255, 255, .5);
font-weight: 700;
}
.ctsfw-event-calendar .calendar-day {
padding: .5rem 0;
text-align: center;
background: rgba(200, 200, 200, .35);
}
.ctsfw-event-calendar .calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, minmax(100px, 1fr));
gap: 1px;
background: rgba(255, 255, 255, .5);
}
.ctsfw-event-calendar .calendar-cell {
background: rgba(255, 255, 255, .9);
border: 1px solid #ddd;
padding: 5px;
box-sizing: border-box;
position: relative;
}
.ctsfw-event-calendar.theme-dark .calendar-cell {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
} .ctsfw-event-calendar .calendar-cell a {
text-decoration: none;
display: inline-block;
padding: .15rem .25rem;
background: #f9fafb;
color: var(--ink);
cursor: pointer;
}
.ctsfw-event-calendar.theme-dark .calendar-cell a {
background: rgba(255, 255, 255, .12);
color: var(--eggshell);
}
.ctsfw-event-calendar .calendar-cell a.cal-multi {
display: inline-block;
width: 100%;
background: #f0f3f8;
color: inherit;
border-left: 3px solid var(--blue-200);
padding: .15rem .35rem;
box-sizing: border-box;
}
.ctsfw-event-calendar.theme-dark .calendar-cell a.cal-multi {
background: rgba(255, 255, 255, .10);
} .ctsfw-card-tooltip {
position: absolute;
width: 220px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
padding: 10px;
z-index: 9999;
text-align: center;
}
.ctsfw-event-calendar.theme-dark .ctsfw-card-tooltip {
background: #0d1429;
border-color: rgba(255, 255, 255, .12);
color: var(--eggshell);
}
.ctsfw-card-tooltip img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
margin-bottom: 8px;
}
.ctsfw-card-tooltip-title {
font-weight: 600;
} .ctsfw-event-calendar .modal {
display: none;
position: fixed;
z-index: 10000;
inset: 0;
background: rgba(0, 0, 0, .4);
padding-top: 10%;
}
.ctsfw-event-calendar .modal-content {
position: relative;
background: var(--eggshell);
margin: auto;
padding: 28px 20px 20px;
border: 1px solid #888;
width: 75%;
max-width: 800px;
color: var(--navy);
}
.ctsfw-event-calendar .modal-content h2 {
text-align: center;
margin-top: 0;
} .ctsfw-event-calendar .modal-close-square.btn {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
font-weight: 700;
text-transform: uppercase;
background: #fff;
color: var(--navy);
border: 2px solid var(--navy);
cursor: pointer;
min-width: 0;
padding: 5;
}
.ctsfw-event-calendar .event-item {
margin-bottom: 15px;
padding: 10px;
background-color: var(--eggshell);
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
border-bottom: 1px solid #ddd;
}
.ctsfw-event-calendar .calendar-icons {
display: flex;
gap: 10px;
}
.ctsfw-event-calendar .calendar-icon-wrapper {
display: flex;
align-items: center;
color: var(--navy);
text-decoration: none;
}
.ctsfw-event-calendar .calendar-icon-wrapper:hover {
color: var(--maroon);
} @media (max-width: 768px) {
.ctsfw-event-calendar .calendar-days {
display: none;
}
.ctsfw-event-calendar .calendar-grid {
display: block;
}
.ctsfw-event-calendar .calendar-cell {
display: flex;
flex-direction: column;
margin-bottom: 10px;
min-height: 50px;
}
.ctsfw-event-calendar .calendar-cell.hidden {
display: none;
}
.ctsfw-event-calendar .modal-content {
width: 95%;
}
} .ctsfw-event-calendar .btn .ctsfw-icon svg,
.ctsfw-event-calendar .btn .ctsfw-icon svg *,
.ctsfw-event-calendar .btn .ctsfw-icon path,
.ctsfw-event-calendar .btn .ctsfw-icon rect,
.ctsfw-event-calendar .btn .ctsfw-icon polygon,
.ctsfw-event-calendar .btn .ctsfw-icon circle {
fill: currentColor !important;
stroke: currentColor !important;
}  .modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5);
overflow: auto; -webkit-overflow-scrolling: touch;
} .modal[style*="display: block"] {
display: block;
}
.modal .modal-content {
position: relative;
max-width: 900px;
width: calc(100% - 2rem);
margin: 4rem auto;
background: #fff;
color: #001846;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
padding: 1.25rem 1.25rem 1.5rem;
}
@media (min-width: 768px) {
.modal .modal-content {
padding: 1.75rem 2rem 2rem;
}
}
.modal .modal-close-square.btn {
position: absolute;
top: .5rem;
right: .5rem;
line-height: 1;
cursor: pointer;
background: transparent;
border: 0;
font-weight: 600;
font-size: 1rem;
color: #001846;
}
.modal [data-role="event-list"] .ctsfw-modal-row+.ctsfw-modal-row {
border-top: 1px solid rgba(0, 0, 0, .08);
}
.modal .btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .75rem;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, .08);
}
body.ctsfw-modal-open {
overflow: hidden; }