:root{
--jet-mdc-gap: 6px;
--jet-mdc-day-min-h: 76px; --jet-mdc-date-pad-top: 8px;
--jet-mdc-date-line-h: 22px;
--jet-mdc-events-top: calc(var(--jet-mdc-date-pad-top) + var(--jet-mdc-date-line-h) + 6px);
--jet-mdc-events-bottom: 8px;
--jet-mdc-event-pad: 4px 8px;
--jet-mdc-radius: 10px;
--jet-mdc-c-border: #e5e7eb;
--jet-mdc-c-bg: #fff;
--jet-mdc-c-event: #eef2ff;
--jet-mdc-c-event-bd: #c7d2fe;
--jet-mdc-c-event-text: #1f2937;
--jet-mdc-c-dot: #4f46e5;
}
.brxe-jet-listing-multiday-calendar {
width: 100%;
box-sizing: border-box;
}
.jet-md-calendar__days-ow {
display:grid;
grid-template-columns:repeat(7,1fr);
gap:var(--jet-mdc-gap);
}
.jet-md-calendar__day-ow {
text-align:center;
padding: 8px 0;
font-weight: 600;
}
.jet-md-calendar__week{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
margin-bottom:0;
padding-top: var(--jet-mdc-gap);
}
.jet-md-calendar__days,
.jet-md-calendar__events{
grid-area: 1 / 1 / 2 / 2;
}
.jet-md-calendar__days{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(7,1fr);
gap:var(--jet-mdc-gap);
}
.jet-md-calendar__day {
position:relative;
min-height:var(--jet-mdc-day-min-h);
border:1px solid var(--jet-mdc-c-border);
border-radius:12px;
background:#fff;
padding: var(--jet-mdc-date-pad-top) 8px 8px;
overflow:visible;
}
.jet-md-calendar__day.is-nearby-month {
opacity:.5;
}
.jet-md-calendar__date{
text-align:right;
display:block;
top:var(--jet-mdc-date-pad-top);
right:8px;
height:var(--jet-mdc-date-line-h);
line-height:var(--jet-mdc-date-line-h);
color:var(--jet-mdc-c-muted);
z-index:2;
text-decoration: inherit;
} .jet-md-calendar__events {
list-style: none;
margin: 0;
padding: var(--jet-mdc-events-top) 0 var(--jet-mdc-events-bottom);
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-flow: row dense;
row-gap: 4px;
z-index: 1;
pointer-events: none;
}
.jet-md-calendar__events .jet-md-calendar__event{
pointer-events: auto;
cursor: pointer;
}
.jet-md-calendar__event{
display:flex;
align-items:center;
gap:var(--jet-mdc-gap);
min-width:0;
padding:var(--jet-mdc-event-pad);
background:var(--jet-mdc-c-event);
border:1px solid var(--jet-mdc-c-event-bd);
color:var(--jet-mdc-c-event-text);
border-radius:var(--jet-mdc-radius);
overflow:hidden;
text-overflow:ellipsis;
margin: 0 var(--jet-mdc-gap);
}
@media (max-width: 768px) {
.jet-md-calendar__event{
white-space: nowrap;
}
} .jet-md-calendar__event.jet-md-calendar__event--cont-left {
border-top-left-radius:4px;
border-bottom-left-radius:4px;
position:relative
}
.jet-md-calendar__event.jet-md-calendar__event--cont-left::before {
content:"";
position:absolute;
left:-5px;
top:50%;
transform:translateY(-50%);
border:6px solid transparent;
border-right-color:rgba( 0, 0, 0, .15 );
}
.jet-md-calendar__event.jet-md-calendar__event--cont-right {
border-top-right-radius:4px;
border-bottom-right-radius:4px;
position:relative
}
.jet-md-calendar__event.jet-md-calendar__event--cont-right::after {
content:"";
position:absolute;
right:-5px;
top:50%;
transform:translateY(-50%);
border:6px solid transparent;
border-left-color:rgba( 0, 0, 0, .15 );
}
.jet-md-calendar__event .jet-md-calendar__dot {
width:10px;
height:10px;
border-radius:999px;
background:var(--jet-mdc-c-dot);
flex:0 0 auto
}
.jet-md-calendar__event-content {
display: none;
}
.jet-md-calendar__event-content.is-active {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
align-items: center;
justify-content: center;
z-index: 999999;
}
.jet-md-calendar__event-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 1000000;
}
.jet-md-calendar__event-body {
width: 600px;
max-width: 85vw;
max-height: 85vh;
overflow: auto;
background: #fff;
position: relative;
z-index: 1000001;
}
.jet-md-calendar__event-body-container {
position: relative;
z-index: 1000001;
}
.jet-md-calendar__event-close {
position: absolute;
top: -32px;
right: -32px;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 1000001;
}
.jet-md-calendar__event-close:hover,
.jet-md-calendar__event-close:focus {
background: transparent;
}
.jet-md-calendar__event-close svg path {
fill: currentColor;
}
@media (max-width:900px) {
:root{
--jet-mdc-day-min-h: 64px
}
}