.sc-calendar {
--sc-green: #426856;
--sc-beige: #e2dad0;
--sc-text: #426856;
--sc-muted: #a4aab1;
--sc-day: #4d4d4d;
--sc-dow: #636f72;
--sc-title: #2d4d43;
--sc-nav: #a9a9a9;
--sc-border: #eaeaea;
--sc-white: #ffffff;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.3;
letter-spacing: 0.95px;
color: var(--sc-text);
background: var(--sc-white);
border: 1px solid #e8e8e8;
position: relative;
box-sizing: border-box;
}
.sc-calendar *,
.sc-calendar *::before,
.sc-calendar *::after {
box-sizing: border-box;
}
.sc-calendar__month {
flex: 1 1 58%;
min-width: 0;
}
.sc-calendar__detail {
flex: 1 1 280px;
max-width: 340px;
padding: 1.25rem 1.15rem;
border-left: 1px solid var(--sc-border);
background: var(--sc-white);
}
.sc-calendar__detail-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 10rem;
padding: 1rem;
text-align: center;
color: var(--sc-muted);
font-size: 13px;
letter-spacing: 0.6px;
}
.sc-calendar__detail-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.sc-calendar__detail-image {
display: block;
width: 112px;
height: 112px;
margin: 0 auto 1.35rem;
border-radius: 50%;
object-fit: cover;
}
.sc-calendar__detail-date {
margin: 12px 0 0.35rem;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--sc-green);
}
.sc-calendar__detail-title {
margin: 0 0 0.45rem;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
letter-spacing: normal;
text-transform: uppercase;
color: #171c24;
}
.sc-calendar__detail-desc {
margin: 0 0 0.35rem;
font-size: 13px;
line-height: 1.45;
color: var(--sc-text);
}
.sc-calendar__detail-more {
margin-top: 0;
align-self: flex-start;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
color: var(--sc-green);
}
.sc-calendar__detail-more:hover,
.sc-calendar__detail-more:focus {
color: #2f4b3d;
text-decoration: underline;
}
.sc-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 0.65rem 0.75rem;
}
.sc-calendar__title {
margin: 0;
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 700;
line-height: 1.15;
letter-spacing: normal;
text-transform: uppercase;
color: var(--sc-title);
}
.sc-calendar__nav {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-width: 5.5rem;
margin: 0;
padding: 0 10px;
border: 1px solid #eeeeee;
background: transparent;
color: var(--sc-nav);
font-family: inherit;
font-size: 12px;
font-weight: 400;
line-height: 30px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
}
.sc-calendar__nav:hover,
.sc-calendar__nav:focus {
color: var(--sc-green);
border-color: var(--sc-green);
outline: none;
}
.sc-calendar__nav:disabled {
opacity: 0.4;
cursor: default;
}
.sc-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--sc-border);
}
.sc-calendar__dow,
.sc-calendar__day {
min-height: 70px !important;
text-align: center;
border-right: 1px solid var(--sc-border);
border-bottom: 1px solid var(--sc-border);
background: var(--sc-white);
}
.sc-calendar__dow:nth-child(7n),
.sc-calendar__day:nth-child(7n) {
border-right: 0;
}
.sc-calendar__dow {
display: flex;
align-items: center;
justify-content: center;
min-height: 51px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.95px;
text-transform: uppercase;
color: var(--sc-dow);
}
.sc-calendar__day {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10px;
color: var(--sc-muted);
font-weight: 700;
font-size: 14px;
line-height: 1;
}
.sc-calendar__day--empty {
background: var(--sc-white);
color: #d0d4d8;
}
.sc-calendar__day-num {
display: block;
line-height: 3;
color: #2d4d43;
}
.sc-calendar__day--today:not(.sc-calendar__day--event) .sc-calendar__day-num {
color: var(--sc-green);
}
.sc-calendar__day--event {
color: var(--sc-day);
cursor: pointer;
}
.sc-calendar__day--event::after {
content: "";
position: absolute;
left: 50%;
bottom: 17px;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 50%;
background: var(--sc-green);
}
.sc-calendar__day--event:hover,
.sc-calendar__day--event:focus,
.sc-calendar__day--selected {
background: var(--sc-green);
color: var(--sc-white);
outline: none;
z-index: 2;
}
.sc-calendar__day--event:hover::after,
.sc-calendar__day--event:focus::after,
.sc-calendar__day--selected::after {
background: var(--sc-white);
}
.sc-calendar__day--event:hover .sc-calendar__day-num,
.sc-calendar__day--event:focus .sc-calendar__day-num,
.sc-calendar__day--selected .sc-calendar__day-num {
color: var(--sc-white);
}
.sc-calendar__loading {
flex: 1 1 100%;
padding: 2rem 1rem;
text-align: center;
color: var(--sc-muted);
letter-spacing: 0.95px;
}
.sc-calendar__day--event{
background: #fdb68e;
}
a.sc-calendar__detail-more.button {
margin: 16px auto 0 auto;
}
@media (max-width: 760px) {
.sc-calendar {
flex-direction: column;
}
.sc-calendar__month,
.sc-calendar__detail {
flex: 1 1 auto;
max-width: none;
width: 100%;
}
.sc-calendar__detail {
border-left: 0;
border-top: 1px solid var(--sc-border);
}
}