:root
{
    --timeline-header-max-width: 300px;
    --timeline-header-width: 30%;
    --timeline-header-min-width: calc(var(--post-font-size) * 12);
    --timeline-entry-left-border-width: 3px;
    --timeline-entry-circle-border-width: calc(var(--post-font-size)/8);
    --timeline-entry-left-border-colour: color-mix(in srgb, 60% var(--background-colour), 40% var(--text-colour));
    --timeline-entry-background-colour: color-mix(in srgb, 99% var(--background-colour), 1% var(--text-colour));
    --timeline-entry-box-shadow-colour: color-mix(in srgb, 75% var(--search-screen-item-background-colour), 25% var(--text-colour));
    --timeline-date-font-size: calc(3 * var(--post-font-size));
    --padding-below-transition: calc(2 * var(--post-font-size));
    --calendar-background-colour: var(--background-colour);
    --calendar-header-text-colour: var(--left-nav-text-colour);
    --calendar-header-background-colour: var(--left-tool-nav-background-colour);
    --calendar-header-button-border-colour: var(--left-nav-text-colour);
    --timeline-cancelled-event-colour: red;
    --timeline-header-bottom-border-colour: var(--accent-colour);
    --timeline-column-width: var(--webpage-column-width);
}

#PostContent.Timeline
{
    width: var(--timeline-column-width);
    margin-left: auto;
    margin-right: auto;
}

#PostContent.Timeline .SectionContent
{
    padding-top: 0px;
}

#PostContent.Timeline #CalendarContainer
{
    padding-bottom: calc(3 * var(--post-font-size));
    border-bottom: var(--timeline-entry-left-border-width) solid var(--timeline-entry-left-border-colour);
}

#CalendarContainer #TimelineCalendar
{
    background-color: var(--calendar-background-colour);
    margin: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px color-mix(in srgb, var(--background-colour), var(--text-colour));
    border-collapse: collapse;
    /* font-size: var(--post-font-size); */
    width: calc(100% - 20px);
}

.HeaderRow
{
    background-color: var(--calendar-header-background-colour);
    color: var(--calendar-header-text-colour);
}

#CalendarContainer #TimelineCalendar tr:last-child td:first-child
{
    border-radius: 4px;
}

#CalendarContainer #TimelineCalendar .NextPrevButtons
{
    outline: none;
    background: none;
    border: none;
    /* font-size: var(--post-font-size); */
    font-family: var(--post-font-family);
    color: var(--text-colour);
    border-color: var(--calendar-header-button-border-colour);
}

#CalendarContainer #TimelineCalendar #CalendarYearLabel, #CalendarContainer #TimelineCalendar #CalendarMonthLabel, #CalendarContainer #TimelineCalendar .CalendarDayLabel
{
    font-weight: bold;
}

#CalendarContainer #TimelineCalendar #CalendarYearLabel, #CalendarContainer #TimelineCalendar #CalendarMonthLabel
{
    /* font-size: calc(1.25 * var(--post-font-size)); */
}

#CalendarContainer #TimelineCalendar .CalendarDayLabel
{
    border-bottom: 5px solid var(--timeline-header-bottom-border-colour);
}

#CalendarContainer #TimelineCalendar .CalendarDay, #CalendarContainer #TimelineCalendar .NextPrevButtons
{
    min-width: calc(2 * var(--post-font-size));
    max-width: calc(2 * var(--post-font-size));
    border-bottom: 3px solid var(--calendar-background-colour);
}

#CalendarContainer #TimelineCalendar .OutsideMonthDay
{
    opacity: 0.3;
}

#CalendarContainer #TimelineCalendar .HasEvent, #CalendarContainer #TimelineCalendar .NextPrevButtons
{
    background-color: var(--calendar-header-background-colour);
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--left-nav-text-colour) 75%, var(--calendar-header-background-colour));
    border-bottom: 3px solid color-mix(in srgb, var(--left-nav-text-colour) 50%, var(--calendar-header-background-colour));
    color: var(--calendar-header-text-colour);
}

#CalendarContainer #TimelineCalendar .HasEvent:hover, #CalendarContainer #TimelineCalendar .NextPrevButtons:hover
{
    cursor: pointer;
    background-color: color-mix(in srgb, var(--accent-colour), var(--calendar-header-background-colour));
    border-color: color-mix(in srgb, var(--accent-colour) 75%, var(--calendar-header-background-colour));
    border-bottom-color: color-mix(in srgb, var(--accent-colour) 90%, var(--calendar-header-background-colour));
}

#CalendarContainer #TimelineCalendar .CurrentDay
{
    color: var(--accent-colour);
    font-weight: bold;
}

#CalendarContainer #TimelineCalendar .TimelineDateCancelled
{
    color: var(--timeline-cancelled-event-colour);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='red' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='red' stroke-width='4'/></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

#CalendarContainer #TimelineCalendar .TimelineDateCancelled:hover
{
    cursor: pointer;
    background-color: color-mix(in srgb, var(--timeline-cancelled-event-colour), var(--calendar-background-colour));
    border-color: color-mix(in srgb, var(--timeline-cancelled-event-colour) 75%, var(--calendar-header-background-colour));
    border-bottom-color: color-mix(in srgb, var(--timeline-cancelled-event-colour) 90%, var(--calendar-header-background-colour));
}

#CalendarContainer #TimelineCalendar td
{
    border: none;
    font-size: var(--post-font-size);
}

#PostContent.Timeline .Entry
{
    display: flex;
}

#PostContent.Timeline .Entry:not(.TransitionEntry)
{
    min-height: calc(3 * var(--post-font-size) + var(--timeline-date-font-size));
    font-size: var(--post-font-size);
}

#PostContent.Timeline .Entry:not(.TransitionEntry) .Body
{
    padding: calc(1.5 * var(--post-font-size));
    padding-bottom: calc(2 * var(--post-font-size));
    padding-top: calc(2 * var(--post-font-size));
    background-color: var(--timeline-entry-background-colour);
    box-shadow: 0px 0px 4px var(--timeline-entry-box-shadow-colour);
    border-radius: 0px 4px 4px 0px;
    border-left: var(--timeline-entry-left-border-width) solid var(--timeline-entry-left-border-colour);
}

#PostContent.Timeline .Entry:not(.TransitionEntry):hover .Body
{
    border-left: var(--timeline-entry-left-border-width) solid var(--accent-colour);
}

#PostContent.Timeline .Entry:last-child
{
    padding-bottom: 20px;
}

#PostContent.Timeline .Entry header
{
    position: relative;
    display: block;
    min-width: var(--timeline-header-min-width);
    width: var(--timeline-header-width);
    max-width: var(--timeline-header-max-width);
    text-align: right;
    padding-top: var(--padding-below-transition);
    flex-shrink: 0;
}

#PostContent.Timeline .Entry.TransitionEntry header
{
    padding-top: 0px;
}

#PostContent.Timeline .Entry:not(.TransitionEntry) header
{
    padding-right: calc(1.5*var(--post-font-size));
}

#PostContent.Timeline .Entry.TransitionEntry
{
    position: sticky;
    top: 0px;
    z-index: var(--timeline-entry-zindex);
    background-color: inherit;
    font-size: calc(1.5 * var(--post-font-size));
    line-height: calc(2.5 * var(--post-font-size));
}

#PostContent.Timeline .Entry.TransitionEntry:not(:first-of-type)
{
    margin-top: 20px;
}

#PostContent.Timeline .Entry.TransitionEntry header .TransitionHeading
{
    background-color: var(--text-colour);
    color: var(--background-colour);
    padding-right: calc(1.5*var(--post-font-size));
    display: flex;
    justify-content: space-between;
}

#PostContent.Timeline .Entry.TransitionEntry header .TransitionHeading button
{
    background: none;
    outline: none;
    border: none;
    font-size: var(--post-font-size);
    font-family: var(--post-font-family);
    color: var(--background-colour);
}

#PostContent.Timeline .Entry.TransitionEntry header .TransitionHeading button:hover
{
    text-decoration: underline;
}

#PostContent.Timeline h1
{
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 115%;
    text-align: right;
}

#PostContent.Timeline .TimelineDate
{
    color: var(--accent-colour);
    font-size: var(--timeline-date-font-size);
}

#PostContent.Timeline .TimeTracker
{
    font-size: 90%;
    font-style: italic;
}

#PostContent.Timeline header .ButtonGroup
{
    background: none;
    justify-content: flex-end;
    margin-top: calc(2*var(--post-font-size)/3);
}

#PostContent.Timeline header .ButtonGroup, #PostContent.Timeline .ButtonGroup button
{
    padding: 0px;
}

#PostContent.Timeline header .ButtonGroup label
{
    font-size: calc(0.75*var(--post-font-size));
}

#PostContent.Timeline header button img
{
    width: calc(var(--post-font-size));
    height: calc(var(--post-font-size));
    margin-right: calc(var(--post-font-size)/5)
}

#PostContent.Timeline .Body
{
    flex-grow: 1;
    margin-top: calc(0.75 * var(--post-font-size));
    overflow-x: auto;
    overscroll-behavior: auto;
}

#PostContent.Timeline .Entry:not(.TransitionEntry) header
{
    padding-bottom: calc(3 * var(--post-font-size));
}