@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
url(https://remscheider-hausverwaltung.de/wp-content/plugins/wp_volunteer-manager/public/fonts/OpenSans-Semibold.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url(https://remscheider-hausverwaltung.de/wp-content/plugins/wp_volunteer-manager/public/fonts/OpenSans-Bold.ttf) format('truetype');
} #volm-wrap {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
align-items: start;
text-align: left;
justify-items: stretch;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
color: #111827;
flex: 1 1 100%;
min-width: 0;
}
#volm-wrap *,
#volm-wrap *::before,
#volm-wrap *::after,
#volm-modal-overlay *,
#volm-modal-overlay *::before,
#volm-modal-overlay *::after,
.volm-login-box *,
.volm-login-box *::before,
.volm-login-box *::after {
box-sizing: border-box;
}
#volm-wrap,
#volm-modal-overlay,
.volm-login-box,
#volm-wrap h1,
#volm-wrap h2,
#volm-wrap h3,
#volm-wrap h4,
#volm-wrap h5,
#volm-wrap h6,
#volm-wrap p,
#volm-wrap a,
#volm-wrap li,
#volm-wrap span,
#volm-wrap label,
#volm-wrap input,
#volm-wrap select,
#volm-wrap textarea,
#volm-wrap button,
#volm-modal-overlay h1,
#volm-modal-overlay h2,
#volm-modal-overlay h3,
#volm-modal-overlay h4,
#volm-modal-overlay h5,
#volm-modal-overlay h6,
#volm-modal-overlay p,
#volm-modal-overlay a,
#volm-modal-overlay li,
#volm-modal-overlay span,
#volm-modal-overlay label,
#volm-modal-overlay input,
#volm-modal-overlay select,
#volm-modal-overlay textarea,
#volm-modal-overlay button,
.volm-login-box h1,
.volm-login-box h2,
.volm-login-box h3,
.volm-login-box h4,
.volm-login-box h5,
.volm-login-box h6,
.volm-login-box p,
.volm-login-box a,
.volm-login-box li,
.volm-login-box span,
.volm-login-box label,
.volm-login-box input,
.volm-login-box select,
.volm-login-box textarea,
.volm-login-box button {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
#volm-wrap.volm-fullwidth {
margin-left: auto;
margin-right: auto;
max-width: min(1400px, 100%);
width: 100%;
padding-left: clamp(12px, 3vw, 36px);
padding-right: clamp(12px, 3vw, 36px);
}
#volm-wrap.volm-fullwidth.volm-is-flex-child {
margin-left: 0;
margin-right: 0;
max-width: none;
width: 100%;
}
#volm-wrap.volm-fullbleed {
--volm-fullbleed-max: 1600px;
position: relative;
left: 50%;
margin-left: 0;
margin-right: 0;
width: min(100vw, var(--volm-fullbleed-max));
max-width: none;
transform: translateX(-50%);
padding-left: clamp(16px, 4vw, 72px);
padding-right: clamp(16px, 4vw, 72px);
}
#volm-wrap .volm-calendar-shell {
display: grid;
gap: clamp(20px, 4vw, 32px);
margin-top: clamp(10px, 3vw, 22px);
}
#volm-wrap .volm-calendar-header {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 720px) {
#volm-wrap .volm-calendar-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
#volm-wrap .volm-calendar-heading {
display: grid;
gap: 6px;
}
#volm-wrap .volm-calendar-title {
margin: 0;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
color: #111827;
}
#volm-wrap .volm-calendar-subtitle {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #4b5563;
}
#volm-wrap .volm-calendar-actions {
display: flex;
align-items: center;
gap: 12px;
}
#volm-wrap .volm-calendar-logout {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #1f2937;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#volm-wrap .volm-calendar-logout:hover,
#volm-wrap .volm-calendar-logout:focus-visible {
background: #c8524f;
border-color: #c8524f;
color: #ffffff;
box-shadow: 0 6px 18px rgba(200, 82, 79, 0.25);
outline: none;
}
#volm-wrap .volm-calendar-card {
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: clamp(20px, 4vw, 36px);
background: #ffffff;
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
}
#volm-wrap .volm-calendar-body {
display: grid;
gap: clamp(16px, 3vw, 24px);
}
#volm-wrap .volm-calendar-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
#volm-wrap .volm-view-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 999px;
border: 1px solid #d1d5db;
background: #f9fafb;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}
#volm-wrap .volm-my-events-btn {
border: 0;
border-radius: 999px;
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
background: #c8524f;
color: #ffffff;
cursor: pointer;
box-shadow: 0 6px 18px rgba(200, 82, 79, 0.2);
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#volm-wrap .volm-my-events-btn:hover {
background: #a63f3c;
box-shadow: 0 10px 28px rgba(166, 63, 60, 0.35);
}
#volm-wrap .volm-my-events-btn:focus-visible {
outline: 2px solid #f18a82;
outline-offset: 2px;
}
#volm-wrap .volm-view-switch-btn {
border: 0;
border-radius: 999px;
padding: 6px 16px;
font-size: 15px;
font-weight: 600;
background: transparent;
color: #4b5563;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#volm-wrap .volm-view-switch-btn:focus-visible {
outline: 2px solid #f18a82;
outline-offset: 2px;
}
#volm-wrap .volm-view-switch-btn.is-active {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
#volm-wrap .volm-view-panel[hidden] {
display: none;
}
#volm-wrap .volm-view-panel.is-active {
animation: volmFadeIn 0.2s ease;
}
@media (max-width: 768px) {
#volm-wrap.volm-mobile-list-only .volm-view-switch {
display: none;
}
#volm-wrap.volm-mobile-list-only .volm-view-panel[data-volm-view="calendar"] {
display: none !important;
}
#volm-wrap.volm-mobile-list-only .volm-view-panel[data-volm-view="list"] {
display: block;
}
}
#volm-wrap .volm-list-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px clamp(14px, 4vw, 24px);
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #f9fafb;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
#volm-wrap .volm-list-actions-text {
display: grid;
gap: 4px;
}
#volm-wrap .volm-list-actions-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #111827;
}
#volm-wrap .volm-list-actions-note {
margin: 0;
font-size: 14px;
color: #6b7280;
}
#volm-wrap .volm-list-create-btn {
border: 0;
border-radius: 12px;
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.25);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#volm-wrap .volm-list-create-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(217, 119, 6, 0.35);
}
#volm-wrap .volm-list-create-btn:focus-visible {
outline: 2px solid #f59e0b;
outline-offset: 2px;
}
@media (max-width: 640px) {
#volm-wrap .volm-list-actions {
flex-direction: column;
align-items: flex-start;
}
#volm-wrap .volm-list-create-btn {
width: 100%;
}
}
@keyframes volmFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#volm-wrap .volm-list {
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(18px, 4vw, 32px);
background: #ffffff;
display: grid;
gap: 24px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
#volm-wrap .volm-list-empty,
#volm-wrap .volm-list-error {
margin: 0;
font-size: 16px;
color: #4b5563;
}
#volm-wrap .volm-list-month {
display: grid;
gap: 16px;
}
#volm-wrap .volm-list-month-heading {
margin: 0;
font-size: clamp(20px, 3vw, 26px);
font-weight: 700;
color: #1f2937;
}
#volm-wrap .volm-list-day {
display: grid;
grid-template-columns: minmax(90px, 120px) 1fr;
gap: 20px;
align-items: start;
}
#volm-wrap .volm-list-day-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-top: 4px;
font-weight: 600;
text-transform: uppercase;
color: #9ca3af;
}
#volm-wrap .volm-list-day-weekday {
font-size: 15px;
letter-spacing: 0.08em;
}
#volm-wrap .volm-list-day-number {
font-size: 28px;
font-weight: 700;
color: #1f2937;
}
#volm-wrap .volm-list-day-events {
display: grid;
gap: 18px;
}
#volm-wrap .volm-list-event {
border-radius: 12px;
background: #f2e6d8;
padding: 18px 20px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
display: grid;
gap: 10px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#volm-wrap .volm-list-event:focus,
#volm-wrap .volm-list-event:focus-visible {
outline: 2px solid #f18a82;
outline-offset: 2px;
}
#volm-wrap .volm-list-event:hover {
border-color: #d1d5db;
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#volm-wrap .volm-list-event-header {
display: grid;
gap: 6px;
}
#volm-wrap .volm-list-event-time {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #c8524f;
white-space: pre-line;
}
#volm-wrap .volm-list-event-title {
margin: 0;
font-size: clamp(18px, 3vw, 22px);
font-weight: 700;
color: #111827;
}
#volm-wrap .volm-list-event-description {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #374151;
white-space: pre-wrap;
}
#volm-wrap .volm-list-event-location {
margin: 0;
font-size: 14px;
color: #6b7280;
}
#volm-wrap .volm-list-event-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#volm-wrap .volm-list-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#volm-wrap .volm-list-badge.volm-slot-info {
padding: 4px 12px;
text-transform: none;
letter-spacing: normal;
}
#volm-wrap .volm-list-badge.volm-slot-info.has-free-slots {
background: rgba(200, 82, 79, 0.18);
color: #c8524f;
}
#volm-wrap .volm-list-badge.volm-slot-info.no-free-slots {
background: rgba(107, 114, 128, 0.16);
color: #374151;
}
#volm-wrap .volm-list-badge.is-need {
background: rgba(220, 38, 38, 0.1);
color: #b91c1c;
}
#volm-wrap .volm-list-badge.is-full {
background: rgba(107, 114, 128, 0.14);
color: #374151;
}
#volm-wrap .volm-list-badge.is-status {
background: rgba(200, 82, 79, 0.14);
color: #c8524f;
}
#volm-wrap .volm-list-badge.is-status.is-status-confirmed {
background: rgba(16, 185, 129, 0.2);
color: #047857;
}
#volm-wrap .volm-list-badge.is-status.is-status-participant {
background: rgba(16, 185, 129, 0.2);
color: #047857;
}
#volm-wrap .volm-list-badge.is-status.is-status-helper {
background: rgba(16, 185, 129, 0.2);
color: #047857;
}
#volm-wrap .volm-list-badge.is-status.is-status-canceled {
background: rgba(248, 113, 113, 0.2);
color: #b91c1c;
}
@media (max-width: 768px) {
#volm-wrap .volm-list {
padding: clamp(16px, 5vw, 24px);
}
#volm-wrap .volm-list-day {
grid-template-columns: 1fr;
gap: 12px;
}
#volm-wrap .volm-list-day-meta {
flex-direction: row;
gap: 8px;
align-items: baseline;
}
}
#volm-wrap .volm-calendar-surface {
width: 100%;
min-height: clamp(320px, 65vh, 680px);
}
.volm-login-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(6px, 1.5vw, 12px);
text-align: center;
padding: clamp(10px, 2.5vw, 18px) 0;
}
body.volm-has-login-shortcode .entry-title,
body.volm-has-login-shortcode .page-title,
body.volm-has-login-shortcode .wp-block-post-title {
text-align: center;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
.volm-login-title {
margin: 0;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
color: #111827;
}
.volm-login-box {
box-sizing: border-box;
width: min(100%, 420px);
margin: clamp(8px, 2vw, 14px) auto 0;
padding: clamp(18px, 4vw, 28px);
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
font-family: inherit;
color: #111827;
text-align: left;
}
.volm-login-box form {
display: grid;
gap: 14px;
margin: 0;
}
.volm-login-box label {
font-weight: 600;
color: #374151;
}
.volm-login-box input[type="text"],
.volm-login-box input[type="password"],
.volm-login-box input[type="email"],
.volm-login-box input[type="submit"],
.volm-login-box button[type="submit"] {
width: 100%;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 10px 12px;
font: inherit;
box-sizing: border-box;
background: #ffffff;
color: inherit;
}
.volm-login-box input[type="submit"],
.volm-login-box button[type="submit"] {
background: #c8524f;
border-color: #c8524f;
color: #ffffff;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.volm-login-box .volm-error {
margin: 0 0 6px;
padding: 10px 12px;
border-radius: 10px;
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fca5a5;
font-weight: 700;
}
.volm-login-box .button,
.volm-login-box .button-primary,
.volm-login-box .button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #1f2937;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.volm-login-box .button:hover,
.volm-login-box .button:focus-visible,
.volm-login-box .button-primary:hover,
.volm-login-box .button-primary:focus-visible,
.volm-login-box .button-secondary:hover,
.volm-login-box .button-secondary:focus-visible {
background: #c8524f;
border-color: #c8524f;
color: #ffffff;
box-shadow: 0 6px 14px rgba(200, 82, 79, 0.28);
outline: none;
}
.volm-login-box input[type="submit"]:hover,
.volm-login-box input[type="submit"]:focus-visible,
.volm-login-box button[type="submit"]:hover,
.volm-login-box button[type="submit"]:focus-visible {
background: #a63f3c;
border-color: #a63f3c;
box-shadow: 0 6px 14px rgba(166, 63, 60, 0.28);
outline: none;
}
.volm-login-box p {
margin: 0;
color: #4b5563;
font-size: 15px;
line-height: 1.5;
}
.volm-login-box p+p {
margin-top: 12px;
}
.volm-login-box input[type="checkbox"] {
width: auto;
height: auto;
margin-right: 8px;
}
.volm-login-box .login-remember {
display: flex;
align-items: center;
gap: 8px;
}
.volm-login-box a {
color: #c8524f;
text-decoration: none;
font-weight: 500;
}
.volm-login-box a:hover,
.volm-login-box a:focus-visible {
text-decoration: underline;
outline: none;
} #volm-wrap #volm-calendar {
width: 100%;
padding: clamp(14px, 3vw, 22px);
border: 1px solid #e6d6bf;
border-radius: 18px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(145deg, #fef9f1 0%, #f9f1e5 60%, #f5eadb 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 18px 35px rgba(88, 63, 27, 0.08);
}
#volm-wrap #volm-calendar[data-volm-can-create="1"] .fc-daygrid-day-frame,
#volm-wrap #volm-calendar[data-volm-can-create="1"] .fc-timegrid-slot,
#volm-wrap #volm-calendar[data-volm-can-create="1"] .fc-timegrid-slot-lane {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 5v22' stroke='%2316a34a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M5 16h22' stroke='%2316a34a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, pointer;
}
#volm-wrap #volm-calendar .fc {
--fc-border-color: #eadcc5;
--fc-page-bg-color: transparent;
--fc-neutral-bg-color: #fef9f1;
--fc-today-bg-color: #f1e4ce;
--fc-event-bg-color: transparent;
--fc-event-border-color: transparent;
color: #3d2b1f;
font-family: inherit;
}
#volm-wrap #volm-calendar .fc-toolbar.fc-header-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
padding: clamp(12px, 2vw, 18px) clamp(14px, 3vw, 24px);
background: linear-gradient(135deg, rgba(255, 250, 242, 0.95), rgba(247, 233, 211, 0.95));
border: 1px solid rgba(234, 220, 197, 0.9);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(61, 43, 31, 0.12);
}
#volm-wrap #volm-calendar .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
#volm-wrap #volm-calendar .fc-toolbar-chunk:first-child {
flex: 1 1 220px;
}
#volm-wrap #volm-calendar .fc-toolbar-chunk:nth-child(2) {
justify-content: center;
}
#volm-wrap #volm-calendar .fc-toolbar-chunk:last-child {
justify-content: flex-end;
flex: 1 1 200px;
}
@media (max-width: 640px) {
#volm-wrap #volm-calendar .fc-toolbar.fc-header-toolbar {
padding: 12px 14px;
}
#volm-wrap #volm-calendar .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
flex: 1 1 100%;
justify-content: space-between;
}
#volm-wrap #volm-calendar .fc-toolbar-chunk:nth-child(2),
#volm-wrap #volm-calendar .fc-toolbar-chunk:last-child {
justify-content: flex-start;
}
}
#volm-wrap #volm-calendar .fc-toolbar-title {
font-size: clamp(20px, 3vw, 28px);
font-weight: 700;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
color: #3d2b1f;
}
#volm-wrap #volm-calendar .fc-button {
background: #ffffff;
color: #111827;
border: 1px solid #d1d5db;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
padding: 6px 14px;
box-shadow: none;
text-transform: none;
}
#volm-wrap #volm-calendar .fc-button-group {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
box-shadow: none;
}
#volm-wrap #volm-calendar .fc-button-group>.fc-button {
border-radius: 999px !important;
margin: 0;
}
#volm-wrap #volm-calendar .fc-button:focus-visible {
outline: 2px solid #f18a82;
outline-offset: 1px;
}
#volm-wrap #volm-calendar .fc-button:not(:disabled):hover {
background: #f3f4f6;
}
#volm-wrap #volm-calendar .fc-button-primary:not(:disabled).fc-button-active,
#volm-wrap #volm-calendar .fc-button-primary:not(:disabled):active,
#volm-wrap #volm-calendar .fc-button-primary:not(:disabled):focus,
#volm-wrap #volm-calendar .fc-button-primary:not(:disabled):hover {
background: #c8524f;
border-color: #c8524f;
color: #ffffff;
}
#volm-wrap #volm-calendar .fc-daygrid-day-frame {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
min-height: clamp(140px, 18vw, 180px);
overflow: hidden;
padding: 0 !important;
background: transparent;
}
#volm-wrap #volm-calendar .fc-daygrid-day-top {
padding: 0 0 10px;
}
#volm-wrap #volm-calendar .fc-daygrid-day-events {
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 14px;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
#volm-wrap #volm-calendar .fc-daygrid-day-events>* {
margin: 0 !important;
}
#volm-wrap #volm-calendar .fc-daygrid-day {
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(234, 220, 197, 0.9);
border-left: 1px solid rgba(234, 220, 197, 0.9);
position: relative;
}
#volm-wrap #volm-calendar .fc-view-harness,
#volm-wrap #volm-calendar .fc-scrollgrid,
#volm-wrap #volm-calendar .fc-scrollgrid-section,
#volm-wrap #volm-calendar .fc-scroller,
#volm-wrap #volm-calendar .fc-timegrid,
#volm-wrap #volm-calendar .fc-timegrid-body,
#volm-wrap #volm-calendar .fc-timegrid-slots,
#volm-wrap #volm-calendar .fc-timegrid-slot,
#volm-wrap #volm-calendar .fc-col-header-cell,
#volm-wrap #volm-calendar .fc-timegrid-axis,
#volm-wrap #volm-calendar .fc-timegrid-slot-label {
background-color: transparent;
}
#volm-wrap #volm-calendar .fc-scrollgrid,
#volm-wrap #volm-calendar .fc-scrollgrid table {
border-collapse: collapse;
border-spacing: 0;
}
#volm-wrap #volm-calendar .fc-scrollgrid-section>td {
padding: 0;
}
#volm-wrap #volm-calendar .fc-col-header {
background: rgba(249, 241, 229, 0.96);
border: 1px solid rgba(234, 220, 197, 0.9);
border-bottom: 0;
border-radius: 12px 12px 0 0;
overflow: hidden;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45);
}
#volm-wrap #volm-calendar .fc-col-header,
#volm-wrap #volm-calendar .fc-scrollgrid-section-header>table {
width: 100%;
table-layout: fixed;
}
#volm-wrap #volm-calendar .fc-timegrid-slot,
#volm-wrap #volm-calendar .fc-timegrid-slot-lane,
#volm-wrap #volm-calendar .fc-timegrid-slot-label,
#volm-wrap #volm-calendar .fc-timegrid-axis,
#volm-wrap #volm-calendar .fc-col-header-cell {
border-color: rgba(234, 220, 197, 0.9);
}
#volm-wrap #volm-calendar .fc-timegrid-slot,
#volm-wrap #volm-calendar .fc-timegrid-slot-lane {
background: rgba(255, 255, 255, 0.75);
}
#volm-wrap #volm-calendar .fc-timegrid-slot.fc-timegrid-slot-lane {
background: rgba(255, 255, 255, 0.9);
}
#volm-wrap #volm-calendar .fc-timegrid-slot-label,
#volm-wrap #volm-calendar .fc-timegrid-axis {
background: rgba(250, 240, 225, 0.88);
color: #7b5530;
font-weight: 600;
}
#volm-wrap #volm-calendar .fc-col-header-cell {
background: rgba(249, 241, 229, 0.96);
color: #7b5530;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 12px 10px;
}
#volm-wrap #volm-calendar .fc-timegrid-col {
background: rgba(255, 255, 255, 0.72);
}
#volm-wrap #volm-calendar .fc-timegrid-axis-frame {
justify-content: center;
font-size: 13px;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-other {
background: rgba(248, 241, 228, 0.8);
color: #b69563;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-past {
background: rgba(243, 244, 246, 0.9);
color: #9ca3af;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-past .volm-day-header,
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-past .volm-day-header * {
color: #9ca3af !important;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-past .volm-day-dot {
opacity: 0.3;
box-shadow: none;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-past .volm-calendar-event {
opacity: 0.45;
}
#volm-wrap #volm-calendar .volm-day-header {
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
font-weight: 600;
letter-spacing: 0.01em;
}
#volm-wrap #volm-calendar .volm-day-dot {
width: 10px;
height: 10px;
border-radius: 999px;
border: 2px solid transparent;
background: transparent;
opacity: 0;
transition: opacity 0.2s ease;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}
#volm-wrap #volm-calendar .volm-day-dot.is-visible {
opacity: 1;
}
#volm-wrap #volm-calendar .fc-daygrid-day-number {
font-size: clamp(22px, 4vw, 28px);
font-weight: 700;
color: #3b2b1f;
text-decoration: none;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-today {
background: #fff7db;
box-shadow: inset 0 0 0 2px #fbbf24;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-today .volm-day-header {
color: #b45309;
}
#volm-wrap #volm-calendar .fc-daygrid-day.fc-day-today .volm-day-dot {
border-color: #b45309;
}
#volm-wrap #volm-calendar .fc-daygrid-event-harness {
position: static !important;
width: 100%;
margin: 0;
padding: 0 !important;
overflow: visible !important;
align-self: stretch !important;
}
#volm-wrap #volm-calendar .fc-daygrid-event-harness>.fc-daygrid-event {
width: 100%;
}
#volm-wrap #volm-calendar .fc-daygrid-event {
margin: 0;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: inherit !important;
position: static;
overflow: visible !important;
}
#volm-wrap #volm-calendar .fc-daygrid-event .fc-event-main-frame {
padding: 0 !important;
}
#volm-wrap #volm-calendar .fc-daygrid-event-harness+.fc-daygrid-event-harness {
margin-top: 10px;
}
#volm-wrap #volm-calendar .fc-daygrid-more-link {
align-self: flex-start;
padding: 6px 0 0;
font-size: 13px;
font-weight: 500;
color: #b45309;
}
#volm-wrap #volm-calendar .volm-calendar-event {
box-sizing: border-box;
min-width: 0;
min-height: 0;
width: 100%;
padding: 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: #3d2b1f !important;
text-shadow: none !important;
opacity: 1 !important;
overflow-wrap: anywhere;
position: relative;
transition: transform 0.2s ease;
align-self: stretch;
cursor: pointer;
}
#volm-wrap #volm-calendar .volm-calendar-event:hover {
transform: translateY(-2px);
}
#volm-wrap #volm-calendar .volm-calendar-event:focus-visible {
outline: 2px solid var(--volm-event-color, #c8524f);
outline-offset: 2px;
transform: translateY(-2px);
}
#volm-wrap #volm-calendar .volm-calendar-event,
#volm-wrap #volm-calendar .volm-calendar-event * {
white-space: normal;
}
#volm-wrap #volm-calendar .volm-event-meta {
display: inline-flex;
align-items: center;
gap: 6px;
row-gap: 2px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 600;
color: #6e4a29 !important;
letter-spacing: 0.01em;
line-height: 1.25;
}
#volm-wrap #volm-calendar .volm-event-status {
display: inline-flex;
margin-top: 6px;
}
#volm-wrap #volm-calendar .volm-event-occupancy {
font-size: 12px;
font-weight: 500;
color: #4b341e;
display: inline-flex;
align-items: center;
gap: 8px;
}
#volm-wrap #volm-calendar .volm-event-occupancy-dot {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
border: 1px solid transparent;
box-shadow: 0 0 0 1px rgba(61, 43, 31, 0.08);
}
#volm-wrap #volm-calendar .volm-event-occupancy-dot.is-free {
background: #16a34a;
border-color: #16a34a;
}
#volm-wrap #volm-calendar .volm-event-occupancy-dot.is-full {
background: #dc2626;
border-color: #dc2626;
}
#volm-wrap #volm-calendar .volm-event-time {
font-size: 13px;
font-weight: 600;
color: #6e4a29 !important;
letter-spacing: 0.01em;
line-height: 1.25;
white-space: nowrap;
flex: 0 0 auto;
display: block;
}
#volm-wrap #volm-calendar .volm-event-date {
font-size: 13px;
color: #6f4d2a;
letter-spacing: 0.01em;
}
#volm-wrap #volm-calendar .volm-event-title {
font-size: 15px;
font-weight: 500;
color: #3d2b1f !important;
line-height: 1.35;
word-break: break-word;
}
#volm-wrap #volm-calendar .fc-daygrid-event.volm-calendar-event {
display: block;
padding: 10px 12px;
border-radius: 14px;
background: transparent !important;
box-shadow: 0 10px 20px rgba(61, 43, 31, 0.12), 0 0 0 1px rgba(214, 190, 157, 0.85);
}
#volm-wrap #volm-calendar .fc-daygrid-event.volm-calendar-event .volm-event-time,
#volm-wrap #volm-calendar .fc-daygrid-event.volm-calendar-event .volm-event-title {
display: block;
color: inherit;
}
#volm-wrap #volm-calendar .fc-timegrid-event.volm-calendar-event {
padding: 10px 12px;
border-radius: 14px;
background: transparent !important;
box-shadow: 0 12px 28px rgba(61, 43, 31, 0.14), 0 0 0 1px rgba(214, 190, 157, 0.9);
}
#volm-wrap #volm-calendar .fc-event-resizer {
display: none !important;
}
#volm-wrap #volm-calendar .volm-event-desc {
font-size: 13px;
color: #4b5563;
line-height: 1.4;
}
#volm-modal-overlay #volm-event-view {
display: grid;
gap: 12px;
}
#volm-modal-overlay #volm-my-events-view {
display: none;
flex-direction: column;
gap: 12px;
}
#volm-modal-overlay[data-modal-view="my-events"] #volm-event-view {
display: none;
}
#volm-modal-overlay[data-modal-view="my-events"] #volm-my-events-view {
display: flex;
}
#volm-modal-overlay .volm-event-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#volm-modal-overlay[data-modal-view="my-events"] .volm-event-actions {
display: none;
}
#volm-modal-overlay[data-modal-view="my-events"] #volm-btn-close {
margin-left: auto;
}
#volm-modal-overlay .volm-my-events {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
background: #f9fafb;
max-height: min(60vh, 420px);
overflow-y: auto;
}
#volm-modal-overlay .volm-my-events[data-loading="1"] {
opacity: 0.7;
}
#volm-modal-overlay .volm-my-events-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#volm-modal-overlay .volm-my-events-item {
margin: 0;
padding: 0;
}
#volm-modal-overlay .volm-my-event {
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px;
background: #ffffff;
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
text-align: left;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#volm-modal-overlay .volm-my-event:hover,
#volm-modal-overlay .volm-my-event:focus-visible {
border-color: #c7d2fe;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}
#volm-modal-overlay .volm-my-event:focus-visible {
outline: 2px solid #f18a82;
outline-offset: 2px;
}
#volm-modal-overlay .volm-my-event-title {
font-size: 15px;
font-weight: 600;
color: #111827;
}
#volm-modal-overlay .volm-my-event-time,
#volm-modal-overlay .volm-my-event-meta {
font-size: 13px;
color: #4b5563;
}
#volm-modal-overlay .volm-my-event-time {
white-space: pre-line;
}
#volm-modal-overlay .volm-my-event-status {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #c8524f;
}
#volm-modal-overlay .volm-my-event-status.status-waitlist {
color: #b45309;
}
#volm-modal-overlay .volm-my-event-status.status-canceled {
color: #dc2626;
}
#volm-modal-overlay .volm-my-events-empty {
margin: 0;
color: #6b7280;
text-align: center;
}
#volm-modal-overlay .volm-my-events-intro {
margin: 0;
color: #4b5563;
font-size: 14px;
} #volm-wrap #volm-legend,
#volm-wrap .volm-legend {
margin: 0 0 clamp(12px, 2vw, 18px);
font-size: 14px;
color: #374151;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
flex-wrap: wrap;
line-height: 1.2;
grid-column: 1 / -1;
}
#volm-wrap #volm-legend .legend-item,
#volm-wrap .volm-legend .volm-legend-item {
display: inline-flex;
align-items: center;
gap: 8px; white-space: nowrap; }
#volm-wrap #volm-legend .legend-dot,
#volm-wrap .volm-legend .volm-legend-dot {
width: 12px;
height: 12px;
display: inline-block;
}
#volm-wrap #volm-legend .legend-text,
#volm-wrap .volm-legend .volm-legend-text {
display: inline-block;
} .fc-event[data-volm-full="1"] {
filter: saturate(1.05) contrast(1.02);
} #volm-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: flex-start;
justify-content: center;
z-index: 99999;
overflow-y: auto;
--volm-safe-top: clamp(24px, 8vh, 96px);
--volm-safe-bottom: 24px;
padding: calc(var(--volm-safe-top) + env(safe-area-inset-top, 0px)) 12px calc(var(--volm-safe-bottom) + env(safe-area-inset-bottom, 0px));
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
color: #111827;
}
@media (min-height: 720px) {
#volm-modal-overlay {
align-items: center;
}
}
#volm-modal-overlay .volm-modal {
background: #fff;
width: min(700px, 96vw);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
#volm-modal-overlay[data-event-state="past"] .volm-modal {
border: 2px solid #fca5a5;
box-shadow: 0 22px 45px rgba(185, 28, 28, 0.18);
}
#volm-modal-overlay .volm-modal-header {
padding: 14px 18px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
}
#volm-modal-overlay .volm-modal-title-wrap {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
#volm-modal-overlay .volm-modal-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
#volm-modal-overlay .volm-modal-title-input {
font-size: 18px;
font-weight: 600;
}
#volm-modal-overlay .volm-event-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: #fee2e2;
color: #b91c1c;
font-size: 13px;
font-weight: 600;
width: fit-content;
}
#volm-modal-overlay .volm-modal-close {
border: 0;
background: transparent;
font-size: 20px;
cursor: pointer;
line-height: 1;
}
#volm-modal-overlay .volm-modal-body {
padding: 18px;
display: grid;
gap: 8px;
flex: 1 1 auto;
}
body.volm-modal-open {
overflow: hidden;
}
#volm-modal-overlay .volm-edit-form {
display: grid;
gap: 12px 16px;
}
#volm-modal-overlay .volm-edit-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 8px 16px;
align-items: center;
}
#volm-modal-overlay .volm-edit-row.volm-edit-row-textarea {
align-items: start;
}
#volm-modal-overlay .volm-edit-form label {
color: #6b7280;
font-weight: 500;
}
#volm-modal-overlay .volm-edit-form input,
#volm-modal-overlay .volm-edit-form textarea,
#volm-modal-overlay .volm-modal-title-input {
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 6px 8px;
font: inherit;
box-sizing: border-box;
width: 100%;
}
#volm-modal-overlay .volm-edit-form textarea {
min-height: 120px;
resize: vertical;
}
#volm-modal-overlay .volm-kv {
display: grid;
grid-template-columns: 160px 1fr;
gap: 8px 24px;
align-items: start;
}
#volm-modal-overlay .volm-kv dt {
color: #6b7280;
word-break: break-word;
}
#volm-modal-overlay .volm-kv dd {
margin: 0;
color: #111827;
}
#volm-modal-overlay .volm-past-notice {
border-radius: 12px;
padding: 12px 14px;
background: #fef3c7;
color: #92400e;
font-size: 14px;
line-height: 1.4;
display: flex;
gap: 10px;
align-items: flex-start;
}
#volm-modal-overlay .volm-past-notice::before {
content: '\26A0';
font-size: 18px;
line-height: 1;
}
#volm-modal-overlay .volm-event-badge[hidden],
#volm-modal-overlay .volm-past-notice[hidden] {
display: none !important;
}
#volm-modal-overlay .volm-modal-footer {
padding: 14px 18px;
border-top: 1px solid #eee;
display: flex;
gap: 8px;
justify-content: flex-end;
}
#volm-wrap .volm-btn,
#volm-modal-overlay .volm-btn,
.volm-login-box .volm-btn,
#volm-wrap .button,
#volm-wrap .button-primary,
#volm-wrap .button-secondary {
appearance: none;
border: 1px solid #e5e7eb;
background: #f9fafb;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
}
#volm-wrap .volm-btn:hover,
#volm-modal-overlay .volm-btn:hover,
.volm-login-box .volm-btn:hover,
#volm-wrap .button:hover,
#volm-wrap .button-primary:hover,
#volm-wrap .button-secondary:hover {
background: #f3f4f6;
}
#volm-wrap .volm-btn.primary,
#volm-modal-overlay .volm-btn.primary,
.volm-login-box .volm-btn.primary,
#volm-wrap .button-primary {
border-color: #d1d5db;
background: #e5e7eb;
font-weight: 600;
}
#volm-wrap .volm-btn[disabled],
#volm-modal-overlay .volm-btn[disabled],
.volm-login-box .volm-btn[disabled],
#volm-wrap .button[disabled] {
opacity: .6;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
#volm-wrap .volm-btn.danger,
#volm-modal-overlay .volm-btn.danger,
.volm-login-box .volm-btn.danger {
border-color: #fca5a5;
background: #fee2e2;
color: #991b1b;
}
#volm-wrap .volm-btn.danger:hover,
#volm-modal-overlay .volm-btn.danger:hover,
.volm-login-box .volm-btn.danger:hover {
background: #fecaca;
} #volm-modal-overlay .volm-attendees-title {
margin: 6px 0 2px;
font-size: 15px;
font-weight: 600;
color: #111827;
}
#volm-modal-overlay .volm-attendees-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
#volm-modal-overlay .volm-attendee {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-size: 14px;
}
#volm-modal-overlay .volm-attendee-name {
font-weight: 600;
}
#volm-modal-overlay .volm-attendee-sep {
color: #9ca3af;
}
#volm-modal-overlay .volm-attendee a {
text-decoration: none;
}
#volm-modal-overlay .volm-attendee a:hover {
text-decoration: underline;
}