.yssc-calendar-list,
.yssc-calendar-viewer,
.yssc-yearly-calendar {
margin: 24px auto;
max-width: 1080px;
}
.yssc-calendar-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.yssc-calendar-list li {
align-items: center;
border-bottom: 1px solid #e7e7e7;
display: flex;
gap: 12px;
justify-content: space-between;
padding: 12px 0;
}
.yssc-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.yssc-button {
border-radius: 6px;
display: inline-flex;
font-weight: 700;
line-height: 1;
padding: 10px 14px;
text-decoration: none;
}
.yssc-button--primary {
background: #8f1a24;
color: #fff;
}
.yssc-button--dark {
background: #222;
color: #fff;
}
.yssc-month-tabs {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 22px;
overflow-x: auto;
padding-bottom: 6px;
}
.yssc-month-tabs a {
background: #f2f2f2;
border-radius: 8px;
color: #111;
padding: 9px 13px;
text-decoration: none;
white-space: nowrap;
}
.yssc-month-tabs a.is-active {
background: #8f1a24;
color: #fff;
}
.yssc-viewer-heading {
align-items: center;
display: flex;
gap: 18px;
justify-content: center;
margin-bottom: 20px;
}
.yssc-viewer-heading h2 {
margin: 0;
text-align: center;
}
.yssc-arrow {
align-items: center;
background: #f2f2f2;
border-radius: 999px;
color: #111;
display: inline-flex;
font-size: 24px;
font-weight: 700;
height: 48px;
justify-content: center;
text-decoration: none;
width: 48px;
}
.yssc-calendar-image {
border-radius: 8px;
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
.yssc-calendar-frame {
border: 0;
border-radius: 8px;
display: block;
height: 900px;
width: 100%;
}
@media (max-width: 640px) {
.yssc-calendar-list li {
align-items: flex-start;
flex-direction: column;
}
.yssc-calendar-frame {
height: 640px;
}
}