th, td {
    padding: 0.3em 0;
}
.day a:hover {
    color: #ccc;
}
.calendar-filter-container a
{
    color: var(--link-color);
    border-bottom: 2px solid;
}
.calendar-filter-container a:hover
{
    color: #fff;
}

/* class */
.calendar {
    table-layout: fixed;
    width: 100%;
    top: 0px;
    transform-origin: left center;
    float: right;
    -webkit-text-stroke-width: 0.02em;
}

.month {
    position: sticky;    
    top: 42px;
    text-align: left;
    margin-bottom: 0.5em;
    width: 840px;
}

.day {
    --font-size-base: 96px;
    --body-text-font: inherit;
    font-size:  var(--font-size-base);
    text-align: right;
    line-height: .45em;
    /* background-color: #333; */
    position: relative;
}

.day.available a{
    text-decoration: underline;
    text-underline-offset: .1em;
	text-decoration-thickness: .1em;
}

.day.available .thumbnail {
    position: absolute;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
    top: -25%;
    height: 150%;
    width: 100%;
    object-fit: contain;
    transform: rotate(-6deg);
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.day.available .thumbnail:hover {
    opacity: 1.0;
}

/*
.day[system="222-bowery"] {
    font-size: calc(0.69 * var(--font-size-base));
    letter-spacing: -.075em;
}
.day[system="dial-a-poem"] {
    font-size: calc(0.83 * var(--font-size-base));
}
.day[system="grants"] {
    font-size: calc(0.95 * var(--font-size-base));
}
.day[system="gps-records"] {
    font-size: calc(1 * var(--font-size-base));
}
*/

.days_of_the_week {
    line-height: 1;
    text-align: right;
    font-size: .75em;
}
.today {
    position: relative;
}

.footer-menu.footer-message {
    position: fixed;
    bottom: 30px;
    left: 30px;
}

.footer-menu.footer-message .footer-menu-item {
    -webkit-text-stroke-width: initial;
}

.message {
    margin-left: 50px;
    display: none;
}

/*
#submenu[data-stuck] ~ .footer-menu {
    position: fixed;
    display: block;
    opacity: 0.0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
#submenu[data-stuck="1"] ~ .footer-menu {
    opacity: 1;
    pointer-events: auto;
}
*/

/* id  */

#calendar {
    --height: auto;
    height: var(--height);
    min-height: calc( 100dvh - 40px);
    position: relative;
    padding-bottom: 80px;
    /* margin-bottom: 50vh; */
    /* column-span: all; */
    /* min-height: 880px; */
}
.calendar-month-container {
    width: 840px;
}
.calendar-month-container.active {
    /* display: block; */
}

.timetables-container {
    display: none;
}

/* icon */
.month-arrow, 
.scroll-arrow {
    padding-left: .15em;
    padding-right: .15em;
    vertical-align: top;
    display: inline-block;
    height: 35px;
    width: 35px;
    position: absolute;
}

.month-arrow.prev-month-arrow {
    right: 60px;
}
.month-arrow.next-month-arrow {
    right: 0px;
}
.month-arrow.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.scroll-arrow {
    position: absolute;
    bottom: 0px;
    transition: transform 500ms ease;
    transform-origin: center;
}
.scroll-arrow.rotated {
    transform: rotate(180deg);
}

#main .month a > img {
    opacity: 1.0;
}

#main .month a > img:hover {
    opacity: 0.5;
}

.icon-wrapper {
    --icon-width: 2em;
    --icon-height: 1em;
    --icon-thickness: 2px;
    --icon-color: var(--body-text-color); 
    --icon-hover-color: #aaa;
    --icon-disabled-color: #aaa;
    cursor: pointer;
}
.icon.arrow-left,
.icon.arrow-right {
    display: block;
    position: relative;
    width: var(--icon-width);
    height: var(--icon-height);
}
.icon.arrow-left:before,
.icon.arrow-right:before,
.icon.arrow-left:after,
.icon.arrow-right:after {
    content: '';
    position: absolute;
}
.icon.arrow-right:before,
.icon.arrow-left:before {
    /* arrow tail */
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: var(--icon-thickness);
    background-color: var(--icon-color);
}
.icon.arrow-right:after,
.icon.arrow-left:after {
    width: calc(var(--icon-height) / 1.414);
    height: calc(var(--icon-height) / 1.414);
    transform: rotate(45deg);
}
.icon.arrow-right:after {
    border-top: var(--icon-thickness) solid var(--icon-color);
    border-right: var(--icon-thickness) solid var(--icon-color);
    transform-origin: top right;
    top: 50%;
    right: 10%;
}
.icon.arrow-left:after {
    border-bottom: var(--icon-thickness) solid var(--icon-color);
    border-left: var(--icon-thickness) solid var(--icon-color);
    transform-origin: bottom left;
    bottom: 50%;
    left: 10%;
}
.day {
    margin-bottom: 3px;
}

.calendar-child {
    padding-top: 20px;
    /* display: inline-block; */
} 

.calendar-child-date {
    margin-top: 20px;
    padding-bottom: 20px;
}

/* mobile */

@media screen and (max-width: 900px) {
    #calendar {
        /* width: 100%; */
    }
    .calendar-month-container {
        width: 100%;
    }
    .day {
        --font-size-base: 10.67vw;
        line-height: .5em;
    }
}
@media screen and (max-width: 650px) {
    .calendar-listing-item.show-information {
        display: block;
        margin-bottom: 100vh;
    }
    .listing-item-information {
        margin-left: 20px;
    }
}
/* vertical iPhone */
@media screen and (max-width: 500px) {
    th, td {
        padding-top: 10px;
        padding-bottom: 7.5px;
    }
    #calendar {
        /* margin-bottom: 75vh; */
    }
    .calendar-month-container {
        position: initial;
        width: initial;
    }
    .month {
        width: initial;
        /* min-height: initial; */
        margin-bottom: 1em;
    }
    .day {
        --font-size-base: 10vw;
        line-height: .7em;
    }
    .today-underline {
      right: 0px;
    }
    .days_of_the_week {
      padding-left: 0;
      text-align: right;
    }
    caption {
      padding-left: 0;
    }
    #docket-calendar .calendar {
        margin-left: auto;
        margin-right: auto;
    }
    .calendar-picker {
        padding-top: 20px;
    }
    #docket-calendar .sans.normal.other {
        padding-right: 0;
    }
    #docket-calendar .calendar-filter-container {
        padding: 0 25px;
    }
    #docket-calendar-container {
        padding-top: 40px;
        width: auto;
        margin-left: 30px;
        margin-right: 30px;
    }
    .footer-menu.footer-message {
        left: 20px;
    }
    .footer-menu.footer-message img {
        width: initial;
    }
    .footer-menu.footer-message .footer-menu-item .message {
        display: none;    
    }
}