.staff-calendar-wrapper table,
.staff-calendar-wrapper th,
.staff-calendar-wrapper td {
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: separate;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
vertical-align: middle;
box-sizing: border-box;
}
.staff-calendar-wrapper {
position: relative;
margin: 20px 0;
width: 100%;
} .scroll-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 123, 255, 0.7);
color: white;
text-align: center;
padding: 10px 15px;
border-radius: 5px;
z-index: 100;
cursor: pointer;
transition: opacity 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
display: none; width: auto;
height: auto;
margin: 0;
font-size: 14px;
font-weight: normal;
}
.scroll-hint.fade-out {
opacity: 0;
}
.staff-calendar-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
padding-top: 5px;
width: 100%;
}
.frontend-calendar {
width: 100%;
min-width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
background: white;
}
.frontend-calendar th,
.frontend-calendar td {
padding: 8px 12px;
text-align: center;
border: 1px solid #ddd;
white-space: nowrap;
min-width: 70px; }
.frontend-calendar th {
background-color: #f5f5f5;
font-weight: bold;
position: sticky;
top: 0;
z-index: 10;
white-space: nowrap;
}
.frontend-calendar .date-column {
font-weight: bold;
background-color: #f5f5f5;
min-width: 90px; position: sticky;
left: 0;
z-index: 20;
white-space: nowrap;
} .frontend-calendar thead th:first-child {
position: sticky;
left: 0;
z-index: 30;
background-color: #f0f0f0;
} .staff-calendar-wrapper code,
.staff-calendar-wrapper .language-plaintext,
.staff-calendar-wrapper span {
background: none;
padding: 0;
margin: 0;
border: none;
display: inline;
font-family: inherit;
font-size: inherit;
color: inherit;
} @media screen and (max-width: 768px) {
.staff-calendar-container {
margin-top: 0;
}
.frontend-calendar th,
.frontend-calendar td {
padding: 8px;
font-size: 13px;
min-width: 60px; white-space: nowrap;
overflow: visible;
}
.frontend-calendar .date-column {
min-width: 80px;
}
}