:root {
    --atec-logo-bars-green-light: #76E500; /* logo bars-green-light */
    --atec-logo-bars-green-mid: #59AC00; /* logo bars-green-mid */
    --atec-logo-bars-green-dark: #407200; /* logo bars-green-dark */
    --atec-logo-bars-gray: #6d6e70; /* logo bars-gray */
    --atec-logo-text-dark: #333; /* logo text-dark */
    --atec-logo-text-light: #999; /* logo text-light */

    --atec-logo-bars-green-light-shade: #5DCC00; /* logo bars-green-light - 10% darker */
    --atec-logo-bars-green-mid-shade: #409300; /* logo bars-green-mid - 10% darker */
    --atec-logo-bars-green-dark-shade: #275900; /* logo bars-green-dark - 10% darker  */
    --atec-logo-bars-gray-shade: #545557; /* logo bars-gray - 10% darker  */
    --atec-logo-text-dark-shade: #1A1A1A; /* logo text-dark - 10% darker */
    --atec-logo-text-light-shade: #808080; /* logo text-light - 10% darker */

    --primary: var(--atec-logo-bars-green-light);
    --secondary: var(--atec-logo-bars-green-mid);
    --tertiary: var(--atec-logo-bars-green-dark);
    --ancillary: var(--atec-logo-bars-gray);
    --gray-light: var(--atec-logo-text-light);
    --primary-shade: var(--atec-logo-bars-green-light-shade);
    --secondary-shade: var(--atec-logo-bars-green-mid-shade);
    --tertiary-shade: var(--atec-logo-bars-green-dark-shade);
    --ancillary-shade: var(--atec-logo-bars-gray-shade);
    --gray-light-shade: var(--atec-logo-text-light-shade);
    --black: var(--atec-logo-text-dark);
    --calendar-grid-gap: 0 0;
    --calendar-border-width: 1px;
    --calendar-border-color: #EDEBE9;
    --calendar-body-bg: #FAF9F8;
    --calendar-body-color: #605E5C;
    --calendar-font-size: 1rem;
    --calendar-days-templatecolumns: repeat(7, minmax(8rem, 1fr));
    --calendar-days-templatecareas: ". . . . . . .";
    --calendar-daynames-bg: var(--ancillary);
    --calendar-daynames-color: var(--white);
    --calendar-daynames-font-size: 1.2em;
    --calendar-daynumber-font-size: 0.8rem;
    --calendar-event-font-size: 0.8rem;
    --calendar-event-bg: var(--gray);
    --calendar-event-color: var(--white);
    --calendar-event-expired-bg: var(--gray-light);
    --calendar-event-expired-color: var(--black);
}

.calendar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-auto-columns: 1fr;
    gap: var(--calendar-grid-gap);
    grid-auto-flow: row;
    grid-template-areas:
        "calendar-header"
        "calendar-body";
    width: 100%;
    font-size: var(--calendar-font-size);
    margin-bottom: 1em;
}

    .calendar .calendar-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr;
        gap: var(--calendar-grid-gap);
        grid-auto-flow: row;
        grid-template-areas:
            "header-left header-center header-right";
        grid-area: calendar-header;
    }

        .calendar .calendar-header .header-left {
            grid-area: header-left;
            text-align: left;
            padding: 0.25rem;
        }

        .calendar .calendar-header .header-right {
            grid-area: header-right;
            text-align: right;
            padding: 0.25rem;
        }

        .calendar .calendar-header .header-center {
            grid-area: header-center;
            text-align: center;
            padding: 0.25rem;
        }

    .calendar .calendar-body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-auto-rows: auto;
        gap: var(--calendar-grid-gap);
        grid-auto-flow: row;
        grid-template-areas:
            "day-names"
            "weeks";
        grid-area: calendar-body;
        border-width: var(--calendar-border-width);
        border-style: solid;
        border-color: var(--calendar-border-color);
        background-color: var(--calendar-body-bg);
        color: var(--calendar-body-color);
        overflow-x: scroll;
    }

        .calendar .calendar-body .day-names {
            grid-template-rows: 1fr;
            grid-auto-flow: row;
            grid-area: day-names;
            background-color: var(--calendar-daynames-bg);
            color: var(--calendar-daynames-color);
            font-size: var(--calendar-daynames-font-size);
        }

        .calendar .calendar-body .day-names,
        .calendar .calendar-body .week {
            display: grid;
            grid-template-columns: repeat(7, minmax(8rem, 1fr));
            grid-template-areas: ". . . . . . .";
            gap: var(--calendar-grid-gap);
            list-style: none;
            margin: 0;
            padding: 0;
            border-bottom-width: var(--calendar-border-width);
            border-bottom-style: solid;
            border-bottom-color: var(--calendar-border-color);
        }

            .calendar .calendar-body .day-names .day {
                text-align: center;
                padding: 0.5rem;
                border-right-width: var(--calendar-border-width);
                border-right-style: solid;
                border-right-color: var(--calendar-border-color);
            }

        .calendar .calendar-body .weeks {
            grid-area: weeks;
        }

        .calendar .calendar-body .week {
            grid-template-rows: auto; /* first row auto height (day number) */
            grid-auto-rows: auto; /* remaining rows distribute height (events) */
            grid-auto-flow: dense;
            min-height: 5rem;
        }

            .calendar .calendar-body .week .day {
                display: contents;
                /*border: 1px solid #111;*/ /* if display contents, this won't color */
                /*background-color: #DDD;*/ /* if display contents, this won't color */
            }

                .calendar .calendar-body .week .day .day-number {
                    font-size: var(--calendar-daynumber-font-size);
                    margin: 0;
                    padding: 0.25rem;
                }

                .calendar .calendar-body .week .day .event {
                    background: var(--calendar-event-bg);
                    color: var(--calendar-event-color);
                    font-size: var(--calendar-event-font-size);
                    text-decoration: none;
                    padding: 0.15rem 0.275rem;
                    margin: 0.125rem 0.25rem 0;
                    border-radius: 0.25rem;
                    font-weight: bold;
                    height: fit-content;
                    min-height: 2rem;
                }

                    .calendar .calendar-body .week .day .event:not(.expired) {
                        cursor: pointer;
                    }

                    .calendar .calendar-body .week .day .event.expired {
                        background: var(--calendar-event-expired-bg);
                        color: var(--calendar-event-expired-color);
                        text-decoration: line-through;
                    }

                        .calendar .calendar-body .week .day .event.expired:hover {
                            cursor: not-allowed;
                        }


    /* week view, show only first week */
    .calendar.arrangement-week .calendar-body .week {
        min-height: 25rem !important;
        grid-template-rows: min-content !important;
        grid-auto-rows: max-content !important;
    }

    /*.calendar.arrangement-week .calendar-body .weeks .week:not(:first-of-type) {
                        display: none;
                    }*/

    /* day view, show only first day name, and first day of first week */
    .calendar.arrangement-day .calendar-body .day-names,
    .calendar.arrangement-day .calendar-body .week {
        grid-template-columns: 1fr !important;
        grid-template-areas: "." !important;
    }

    .calendar.arrangement-day .calendar-body .week {
        min-height: 25rem !important;
        grid-template-rows: min-content !important;
        grid-auto-rows: max-content !important;
    }

    /* .calendar.arrangement-day .calendar-body .weeks .week:not(:first-child) {
                            display: none;
                        }*/

    .calendar.arrangement-day .calendar-body .day-names .day:not(:first-child),
    .calendar.arrangement-day .calendar-body .weeks .week .day:not(:first-child) {
        display: none;
    }

    .calendar .calendar-body .week .day:nth-child(1n) > .event {
        grid-column-start: 1;
    }

    .calendar .calendar-body .week .day:nth-child(2n) > .event {
        grid-column-start: 2;
    }

    .calendar .calendar-body .week .day:nth-child(3n) > .event {
        grid-column-start: 3;
    }

    .calendar .calendar-body .week .day:nth-child(4n) > .event {
        grid-column-start: 4;
    }

    .calendar .calendar-body .week .day:nth-child(5n) > .event {
        grid-column-start: 5;
    }

    .calendar .calendar-body .week .day:nth-child(6n) > .event {
        grid-column-start: 6;
    }

    .calendar .calendar-body .week .day:nth-child(7n) > .event {
        grid-column-start: 7;
    }

    .calendar .calendar-body .week .day .event[data-span="1"] {
        grid-column-end: span 1;
    }

    .calendar .calendar-body .week .day .event[data-span="2"] {
        grid-column-end: span 2;
    }

    .calendar .calendar-body .week .day .event[data-span="3"] {
        grid-column-end: span 3;
    }

    .calendar .calendar-body .week .day .event[data-span="4"] {
        grid-column-end: span 4;
    }

    .calendar .calendar-body .week .day .event[data-span="5"] {
        grid-column-end: span 5;
    }

    .calendar .calendar-body .week .day .event[data-span="6"] {
        grid-column-end: span 6;
    }

    .calendar .calendar-body .week .day .event[data-span="7"] {
        grid-column-end: span 7;
    }

.bg-primary {
    background: var(--primary) !important;
}

.bg-secondary {
    background: var(--secondary) !important;
}

.bg-tertiary {
    background: var(--tertiary) !important;
}

.bg-ancillary {
    background: var(--ancillary) !important;
}

.bg-gray-light {
    background: var(--gray-light) !important;
}

a.bg-primary:hover,
a.bg-primary:focus {
    background: var(--primary-shade) !important;
}

a.bg-secondary:hover,
a.bg-primary:focus {
    background: var(--secondary-shade) !important;
}

a.bg-tertiary:hover,
a.bg-primary:focus {
    background: var(--tertiary-shade) !important;
}

a.bg-ancillary:hover,
a.bg-primary:focus {
    background: var(--ancillary-shade) !important;
}

a.bg-gray-light:hover,
a.bg-primary:focus {
    background: var(--gray-light-shade) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-tertiary {
    color: var(--tertiary) !important;
}

.text-ancillary {
    color: var(--ancillary) !important;
}

.text-gray-light {
    color: var(--gray-light) !important;
}

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-secondary {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

.btn-tertiary {
    background: var(--tertiary) !important;
    border-color: var(--tertiary) !important;
    color: var(--white) !important;
}

.btn-ancillary {
    background: var(--ancillary) !important;
    border-color: var(--ancillary) !important;
    color: var(--white) !important;
}

.btn-gray-light {
    background: var(--gray-light) !important;
    border-color: var(--gray-light) !important;
    color: var(--white) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background: var(--primary-shade) !important;
    border-color: var(--primary-shade) !important;
    color: var(--white) !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
    background: var(--secondary-shade) !important;
    border-color: var(--secondary-shade) !important;
    color: var(--white) !important;
}

.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary.active {
    background: var(--tertiary-shade) !important;
    border-color: var(--tertiary-shade) !important;
    color: var(--white) !important;
}

.btn-ancillary:hover,
.btn-ancillary:active,
.btn-ancillary.active {
    background: var(--ancillary-shade) !important;
    border-color: var(--ancillary-shade) !important;
    color: var(--white) !important;
}

.btn-gray-light:hover,
.btn-gray-light:active,
.btn-gray-light.active {
    background: var(--gray-light-shade) !important;
    border-color: var(--gray-light-shade) !important;
    color: var(--white) !important;
}

.btn-outline-primary {
    background: var(--white) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline-secondary {
    background: var(--white) !important;
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}

.btn-outline-tertiary {
    background: var(--white) !important;
    border-color: var(--tertiary) !important;
    color: var(--tertiary) !important;
}

.btn-outline-ancillary {
    background: var(--white) !important;
    border-color: var(--ancillary) !important;
    color: var(--ancillary) !important;
}

.btn-outline-gray-light {
    background: var(--white) !important;
    border-color: var(--gray-light) !important;
    color: var(--gray-light) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

.btn-outline-tertiary:hover,
.btn-outline-tertiary:active,
.btn-outline-tertiary.active {
    background: var(--tertiary) !important;
    border-color: var(--tertiary) !important;
    color: var(--white) !important;
}

.btn-outline-ancillary:hover,
.btn-outline-ancillary:active,
.btn-outline-ancillary.active {
    background: var(--ancillary) !important;
    border-color: var(--ancillary) !important;
    color: var(--white) !important;
}

.btn-outline-gray-light:hover,
.btn-outline-gray-light:active,
.btn-outline-gray-light.active {
    background: var(--gray-light) !important;
    border-color: var(--gray-light) !important;
    color: var(--white) !important;
}

.head {
    text-decoration: none;
    font-weight: 600;
}

.location {
    padding: 0.8rem;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.25rem;
    display: block;
}

a.checkbuttons:before {
    font-family: "Font Awesome 5 Free";
    margin-right: 0.4em;
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    content: "\f0c8";
}

a.checkbuttons.active:before {
    content: "\f14a";
}