/**********************************************************************************************************************/
/************************************************** Calendar styles ***************************************************/
/**********************************************************************************************************************/

.cal-table {
    width: 100%;
    border: none;
}

#upcoming {
    width: 100%;
}

tr.CalFin,
tr.SidebarCalFin {
    cursor: pointer;
}

tr.calendarRow,
tr.sidebarCalendarRow {
    display: block;
    border-top: 1px solid var(--LightBorderColor);
    border-right: 1px solid var(--LightBorderColor);
    border-left: 1px solid var(--LightBorderColor);
    background: #FFF;
    background-color: var(--DetailsLightBackgroundColor);
    max-width: 100%;
}

/* IE proof custom property fallback */
tr.noneFound {
    display: block;
    border: 1px solid var(--LightBorderColor);
    background: #FFF;
    background-color: var(--DetailsLightBackgroundColor);
    max-width: 100%;
    padding: 10px 10px 2px 10px;
}

.calendarRow td {
    padding: 10px 20px 20px 10px;
}

tr.sidebarCalendarRow {
    padding: 5px 10px 10px 7px;
}
    /* IE proof custom property fallback */
    tr.calendarRow:hover,
    tr.sidebarCalendarRow:hover {
        background: #FFF;
        background-color: var(--DetailsLightBackgroundColor);
    }

tr.CalFin,
tr.SidebarCalFin {
    transition: border 0.2s;
}

.cal-table td {
    border: none;
}

.calendarRow h3 {
    text-transform: uppercase;
    color: var(--DetailsDarkBackgroundColor);
    margin-bottom: 7px;
    font-size: 16pt;
}

.sidebarCalendarRow h3 {
    text-transform: uppercase;
    color: var(--FontColor);
    margin-bottom: 5px;
    font-size: var(--ParagraphFontSize);
}

.preview h3 {
    margin-top: 10px;
    line-height: 1em;
}

.preview .time {
    margin-right: 15px;
}

span.day {
    margin-top: -10px;
    font-size: 22pt;
    font-weight: 600;
    color: var(--DetailsDarkBackgroundColor);
}
/* IE proof custom property fallback */
span.month {
    text-transform: uppercase;
    font-size: 8pt;
    font-size: var(--SmallTextFontSize);
    color: var(--DetailsDarkBackgroundColor);
    margin-left: 2px;
}

tr.SidebarCalFin > td.caldate {
    vertical-align: top;
    padding-top: 13px;
}

span.sidebarDay {
    vertical-align: top;
    font-size: 18pt;
    font-weight: 600;
    color: var(--DetailsDarkBackgroundColor);
}

span.sidebarMonth {
    text-transform: uppercase;
    font-size: 7pt;
    color: var(--DetailsDarkBackgroundColor);
    margin-left: 2px;
}

.sidebarCalendarRow > .caldate {
    padding-right: 20px;
}

.categories li {
    list-style-type: none;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.sidebarHiddenRow > .icon {
    width: 15px;
    position: relative;
}

.sidebarHiddenRow > td > table > tbody > tr.sidebarCalendarRow > td.icon > i {
    position: absolute;
    color: var(--DetailsDarkBackgroundColor);
}

td.icon {
    width: 17px;
    position: relative;
}

    td.icon > .fa-lg {
        position: absolute;
        top: 11px;
        color: var(--DetailsDarkBackgroundColor);
    }

.sidebarHiddenRow td, .hiddenRow td {
    vertical-align: top;
}

.calendarRow td.eventTimeDetails {
    border-right: 1px solid var(--LightBorderColor);
    min-width: 350px;
}

.hiddenRow,
.sidebarHiddenRow {
    display: none;
}

    .hiddenRow .noMargin, .sidebarHiddenRow .noMargin {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }

#sidebarHiddenRow td,
#hiddenRow td {
    vertical-align: top;
}

.map {
    clear: both;
    height: 100%;
    margin: 0;
}

.categories li {
    cursor: pointer;
    color: var(--DetailsDarkBackgroundColor);
}

    .categories li.active {
        border-bottom: 2px solid var(--MainBorderColor);
    }

.lastRow {
    border-bottom: 1px solid var(--LightBorderColor);
}

#months span.currentMonth {
    text-transform: uppercase;
    font-size: var(--ParagraphFontSize);
    color: var(--FontColor);
    font-weight: bold;
}

#months {
    margin-top: 15px;
    padding-bottom: 15px;
}

    #months > svg {
        background: var(--DetailsDarkBackgroundColor);
        color: var(--DetailsDarkContrastColor);
        border-radius: 70px;
        cursor: pointer;
        float: right;
        margin-top: -6px;
    }

.fa-chevron-right {
    padding: 4px 6px 4px 8px;
}

.fa-chevron-left {
    padding: 4px 8px 4px 6px;
    margin-right: 5px;
}

#months > svg:hover {
    background: var(--HoverLinkColor);
}

.calendarRow li,
.sidebarCalendarRow li {
    list-style-type: none;
    margin-bottom: 5px;
}

td.eventImage {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

tr.eventImage {
    padding: 0;
    margin: 0;
}

td.eventImage img {
    max-width: 100%;
    max-height: 100%;
}