:root{

}
html,body,button{
font-family:'Open Sans',sans-serif;
}
body{
margin:0;
padding:0;
}
.cal-wrapper{
width:1400px;
margin:0 auto;
}
.month{
margin-bottom:40px;
}
table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
th{
border:1px solid #e0e0e0;
padding:8px;
text-align:center;
background-color:#f9f9f9;
font-weight:500;
}
td{
border:1px solid #e0e0e0;
vertical-align:top;
height:120px;
position:relative;
padding:0;
transition:all 140ms;
background:white;
cursor:pointer;
overflow:hidden;
}
td:hover{
background-color:rgba(0,0,0,0.04);
box-shadow:0 0 2px rgba(0,0,0,0.22);
z-index:1;
}
.weekend{
background-color:#f9f9f9;
}
.holiday{
background-color:#fff3e0;
}
.holiday:hover{
background-color:rgba(255,243,224,0.8);
}
.special-holiday{
background-color:#fff3e0;
}
.special-holiday:hover{
background-color:rgba(255,243,224,0.8);
}
.payday{
background-color:#e8f5e9;
color:#1B5E20;
}
.half-day-holiday{
background:linear-gradient(to bottom,#ffd9df 50%,white 50%);
border:none;
}
.half-day-holiday::after{
content:'';
position:absolute;
bottom:50%;
left:0;
width:100%;
border-bottom:1px solid #ffd6d6;
}
.half-day-text,.closed-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#b71c1c;
opacity:0.2;
font-size:36px;
line-height:36px;
font-weight:700;
pointer-events:none;
text-align:center;
}
.good-friday-icon{
position:absolute;
left:50%;
transform:translate(-50%,-50%);
width:114px;
height:114px;
display:flex;
align-items:center;
justify-content:center;
}
.payday svg{
width:80px;
height:80px;
opacity:0.3;
pointer-events:none;
}
.month td svg{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.payday:hover{
background-color:rgba(232,245,233,0.8);
}
.all-day-event{
color:#1a237e;
font-weight:400;
}
.date-number{
position:absolute;
top:0px;
left:0px;
padding:1px 4px;
width:30px;
font-size:16px;
font-weight:400;
z-index:2;
text-align:center;
border-right:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;
}
.today,.today:hover{
z-index:999;
outline:3px solid rgba(0,0,0,.7);
border-radius:2px;
}
.today .date-number{
color:#000;
border:none;
margin:2px 2px 2px 0px;
height:24px;
width:24px;
display:flex;
align-items:center;
justify-content:center;
padding:0 1px 1px 0;
font-size:28px;
font-weight:600;
}
.day-content{
position:relative;
margin:0 0 0 31px;
padding:0 11px 0 0;
}
.event-item>*{
font-size:1em;
}
.event-list{
height:calc(100% - 4px);
overflow-y:auto;
font-size:14px;
scrollbar-width:thin;
position:relative;
z-index:2;
}
.event-item,.event-item>*{
line-height:22px;
letter-spacing:-.14px;
}
.event-list.expanded{
font-size:1em;
}
.event-list::-webkit-scrollbar{
width:6px;
}
.event-list::-webkit-scrollbar-track{
background:rgba(0,0,0,0.05);
border-radius:3px;
}
.event-list::-webkit-scrollbar-thumb{
background:rgba(0,0,0,0.2);
border-radius:3px;
}
.event-list::-webkit-scrollbar-thumb:hover{
background:rgba(0,0,0,0.3);
}
.event-item{
color:#b71c1c;
font-weight:500;
padding:2px 5px 2px 4px;
position:relative;
line-height:1.3;
margin-bottom:8px;
margin:0;
}
.event-time{
color:#1565c0;
margin-right:1px;
}
.event-separator{
height:1px;
background:rgba(0,0,0,0.1);
margin:10px 0;
width:100%;
}
.navigation{
margin:20px 0;
text-align:center;
}
.navigation a{
transition:background-color 200ms;
font-size:30px;
padding:10px 20px;
color:#111;
border-radius:2px;
}
.year-prev,.year-next{
background-color:#f9f9f9;
border:1px solid #e0e0e0;
color:#000;
text-decoration:none;
margin:0 5px;
text-decoration:none;
font-weight:600;
}
.year-prev-out,.year-next-out{
font-weight:300;
}
.navigation .year-prev:hover,.navigation .year-next:hover{
background-color:rgba(0,0,0,.07);
border:1px solid #ccc;
}
.middle-year{
text-decoration:none;
text-decoration-thickness:5px;
font-weight:800;
}
.invisible-year{
display:inline-block;
font-size:30px;
font-weight:700;
padding:0 20px;
margin:0 5px;
background:transparent;
border-right:1px solid transparent;
border-left:1px solid transparent;
box-sizing:border-box;
color:transparent;
pointer-events:none;
}
.current-highlight{
font-weight:bold;
color:#ff6600;
background-color:#f00;
}
.expanded-day{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
width:80%;
max-width:600px;
max-height:80vh;
background:white;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
z-index:1000;
padding:20px;
opacity:0;
transition:all 200ms ease;
}
.expanded-day:after{
content:'Use left/right arrows to navigate';
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
font-size:1em;
color:#666;
opacity:0.3;
font-weight:300;
display:none;
}
.expanded-day.active{
transform:translate(-50%,-50%) scale(1);
opacity:1;
}
.expanded-day-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
padding-bottom:10px;
border-bottom:1px solid #e0e0e0;
}
.expanded-day-title{
font-size:1.3em;
font-weight:600;
}
.close-expanded{
background:none;
border:1px solid rgba(0,0,0,.2);
font-size:1.5em;
cursor:pointer;
padding:6px;
color:#666;
}
.close-expanded:hover{
border:1px solid rgba(0,0,0,.4);
background-color:rgba(0,0,0,.04);
}
.expanded-events{
max-height:calc(80vh - 100px);
overflow-y:auto;
}
.toggle-switch{
position:relative;
display:inline-block;
width:46px;
height:22px;
}
.toggle-switch input{
opacity:0;
width:0;
height:0;
}
.toggle-slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:#bbb;
transition:.2s;
border-radius:2px;
}
.toggle-slider:before{
position:absolute;
content:"";
height:24px;
width:24px;
left:0px;
bottom:0px;
background-color:rgba(0,0,0,.44);
box-shadow:0 0 1px #555;
transition:.2s;
border-radius:2px;
border:none;
}
.toggle-slider:hover:before{
background-color:rgba(0,0,0,.66);
}
input:checked+.toggle-slider{
background-color:#53b668;
}
input:checked+.toggle-slider:before{
transform:translateX(22px);
}
.toggle-label{
font-size:.9em;
font-weight:500;
color:#333;
}
.overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.5);
z-index:999;
opacity:0;
visibility:hidden;
transition:all 200ms ease;
}
.overlay.active{
opacity:1;
visibility:visible;
}
.empty{
cursor:default;
}
.empty:hover{
background:white;
box-shadow:none;
}
*{
box-sizing:border-box;
}
.controls-inner{
height:52px;
margin:0 auto;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
width:100%;
padding:0 8px;
}
.holiday{
background-color:#ffd9df;
}
.holiday:hover,.half-day-howliday:hover{
background-color:rgba(255,235,238,0.8);
}
.personal-leave{
color:darkgreen;
}
.today.payday{
background:linear-gradient(145deg,#e8f5e9 0%,#c8e6c9 100%);
border:2px solid #1B5E20;
}
.today.holiday{
background:linear-gradient(145deg,#ffd9df 0%,#ffcdd2 100%);
border:2px solid #b71c1c;
}
.calendar-container{
max-width:1400px;
margin:0 auto;
padding:0 20px;
}
.jump-to-today{
cursor:pointer;
border:none;
}
.jump-to-today,td[onclick],.toggle-switch,.navigation a{
cursor:pointer;
}
.mini-day.has-payday{
background-color:#e8f5e9;
color:#1B5E20;
}
.mini-day.has-holiday{
background-color:#ffd9df;
color:#b71c1c;
}
.mini-day.has-events{
background-color:#e3f2fd;
color:#1565c0;
}
.mini-day.has-special-holiday{
background-color:#fff3e0;
color:#e65100;
}
.event-description.has-pdf{
cursor:pointer;
color:#0066cc;
}
.event-description.has-pdf:hover{
text-decoration:underline;
}
.expanded-day .event-item{
cursor:default;
}
.pdf-indicator{
color:#cc0000;
font-weight:500;
margin-left:5px;
}
.cal-pdf-link{
text-decoration:none;
cursor:pointer;
color:#b71c1c;
}
.cal-pdf-link:hover{
text-decoration:underline;
text-decoration-thickness:1px;
}
.cal-pdf-indicator{
color:#ad9a00;
}
.day-content .cal-pdf-link{
cursor:default;
pointer-events:none;
text-decoration:none;
}
.scroll-to-top{
all:unset;
margin:0;
padding:7px;
display:flex;
align-items:center;
cursor:pointer;
}
.scroll-to-top svg{
width:24px;
height:24px;
}
.link-acc,.scroll-to-top{
background-color:rgba(0,0,0,.04);
border:1px solid rgba(0,0,0,.22);
border-radius:2px;
padding:5px;
font-size:18px;
text-decoration:none;
color:#111;
font-weight:600;
}
.go-to-today{
all:unset;
margin:0;
cursor:pointer;
background-color:#333;
border:1px solid #333;
color:#fff;
border-radius:2px;
padding:5px;
font-size:18px;
text-decoration:none;
font-weight:600;
}
.controls-inner>a:hover,.scroll-to-top:hover{
background-color:rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.28);
}
.go-to-today:hover{
background-color:#262626;
border:1px solid #262626;
}
.event-toggle{
display:flex;
align-items:center;
gap:4px;
margin:0;
}
.toggle-switch{
height:24px;
}
.has-events{
background-color:#e3f2fd;
color:#1565c0;
}
.mini-day.empty{
cursor:pointer;
}
.mini-month-container{
text-decoration:none;
color:inherit;
display:block;
padding:2px;
border:1px solid transparent;
transition:all 0.2s ease;
}
.mini-months-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
width:980px;
margin:0 auto;
gap:10px;
padding:10px 10px 0 10px;
}
.mini-month{
font-size:12px;
}
.mini-month-name{
display:block;
text-align:center;
font-weight:600;
margin-bottom:2px;
text-decoration:none;
color:#333;
}
.mini-days-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
border-left:1px solid #e0e0e0;
border-top:1px solid #e0e0e0;
}
.mini-day,.mini-day-header{
height:19px;
font-size:10px;
border-right:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;
display:flex;
align-items:center;
justify-content:center;
}
.mini-day-header{
color:#666;
}
.mini-month-container:hover .mini-day,.mini-month-container:hover .mini-day-header{
border-right:1px solid #555;
border-bottom:1px solid #555;
}
.mini-month-container:hover .mini-days-grid{
border-left:1px solid #555;
border-top:1px solid #555;
}
.print-button{
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
border:1px solid #ddd;
padding:8px 12px;
border-radius:2px;
cursor:pointer;
margin:0 5px;
transition:all 0.2s ease;
}
.print-button:hover{
background:#f5f5f5;
border-color:#ccc;
}
.print-button svg{
width:20px;
height:20px;
}
.mini-calendar-container.print-landscape .mini-months-grid{
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(3,1fr);
}
.mini-calendar-container.print-portrait .mini-months-grid{
grid-template-columns:repeat(2,1fr);
grid-template-rows:repeat(6,1fr);
}
.mini-calendar-container{
width:100%;
margin:0 auto 20px auto;
padding-bottom:0;
}
.print-landscape .mini-months-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(3,1fr);
gap:15px;
box-sizing:border-box;
}
.print-portrait .mini-months-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(4,1fr);
gap:15px;
box-sizing:border-box;
width:600px;
}
.board-meeting{
background-color:#d1c4e9;
}
.board-meeting:hover{
background-color:rgba(209,196,233,0.8);
}
.hhs-board-meeting{
background-color:#c8e6c9;
}
.hhs-board-meeting:hover{
background-color:rgba(200,230,201,0.8);
}
.cotw-meeting{
background-color:#d8eaff;
}
.cotw-meeting:hover{
background-color:rgba(216,234,255,0.8);
}
.budget-meeting{
background-color:#ffe0b2;
}
.budget-meeting:hover{
background-color:rgba(255,224,178,0.8);
}
.weekend{
background:linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(0,0,0,0.17) 50%,transparent calc(50% + .5px));
background-size:100% 100%;
background-repeat:no-repeat;
}
.print-controls{
display:flex;
justify-content:center;
gap:10px;
margin:10px auto;
text-align:center;
position:static;
}
.print-button{
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
border:1px solid #ddd;
padding:8px 12px;
border-radius:2px;
cursor:pointer;
margin:0 5px;
transition:all 0.2s ease;
}
.print-button:hover{
background:#f5f5f5;
border-color:#ccc;
}
.mini-day.has-payday{
background-color:#e8f5e9;
color:#1B5E20;
}
.mini-day.has-holiday{
background-color:#ffd9df;
color:#b71c1c;
}
.mini-day.has-board-meeting{
background-color:#d1c4e9;
color:#4527a0;
}
.mini-day.has-hhs-board-meeting{
background-color:#c8e6c9;
color:#1b5e20;
}
.mini-day.has-cotw-meeting{
background-color:#d8eaff;
color:#1565c0;
}
.mini-day.has-bae-meeting{
background-color:#ffe6e6;
color:#b71c1c;
}
.mini-day.has-budget-meeting{
background-color:#ffe0b2;
color:#e65100;
}
.month-name{
align-items:center;
background-color:#333;
color:#fff;
display:flex;
font-size:28px;
font-weight:700;
justify-content:space-between;
position:relative;
text-align:center;
padding:26px;
}
.month-name span{
position:absolute;
left:50%;
transform:translateX(-50%);
}
.month-scroll-to-top{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
cursor:pointer;
padding:8px;
background-color:rgba(255,255,255,0.14);
border-radius:2px;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
transition:background-color 0.2s;
}
.month-scroll-to-top:hover{
background-color:rgba(255,255,255,0.3);
}
.month-scroll-to-top svg{
width:20px;
height:20px;
fill:#fff;
}
.calendar-controls{
padding:0;
display:flex;
align-items:center;
margin-bottom:20px;
flex-wrap:wrap;
background-color:#f5f5f5;
border-bottom:1px solid #ddd;
width:100%;
box-sizing:border-box;
position:sticky;
top:0;
left:0;
right:0;
z-index:100;
}
.month{
scroll-margin-top:90px;
}
.cal-wrapper{
padding-top:20px;
}
td.hide-event{
}
.mini-day.hide-event{
}
.event-item.hidden-cat{
display:none;
}