.fc {
    margin: 1rem auto;

    .fc-toolbar {
        font-size: var(--font-size-125);
        font-weight: bold;
        padding: 0.5rem;
        color: var(--colour-white);
        background: var(--colour-orange);
    }
}

.qtip {
    font-size: 0.8rem;
    z-index: 20;
    display: none;
    overflow: hidden;
    max-width: 50vw;
    border: 1px solid var(--colour-purple);
    border-radius: var(--font-size-125);
    background: var(--colour-white);
    box-shadow: 0.2rem 0.2rem 0.2rem var(--colour-purple);

    &.qtip-focused {
        position: absolute;
        display: block;
    }

    &.qtip-focus {
        position: absolute;
        display: block;
    }
}

.qtip-titlebar {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem;
    color: var(--colour-white);
    background: var(--colour-purple);
}

.qtip-content {
    padding: 1rem;
}


.eventMarker {
    font-size: 0.8rem;
    z-index: 1;
    overflow: hidden;
    margin-bottom: var(--arrow);
    border: 0.25rem solid var(--colour-blue);
    border-radius: var(--font-size-125);
    background: var(--colour-off-white);
    --arrow: 0.5rem;


    .icon {
        display: block;
        width: 1rem;
        border-radius: 100%;
        background-color: var(--colour-white);
        aspect-ratio: 1 / 1;
    }

    .details {
        display: none;
    }

    &.show {
        z-index: 10;
        box-shadow: 0.2rem 0.2rem 0.2rem var(--colour-blue);

        .icon {
            display: none;
        }

        .details {
            display: block;
        }
    }

    & h2 {
        font-size: 0.9rem;
        margin: 0;
        padding: 0.5rem;
        text-decoration: none;
        color: var(--colour-white);
        background: var(--colour-blue);
    }

    & a {
        text-decoration: none;
    }

    & p {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    &::after {
        position: absolute;
        top: calc(100% - var(--arrow));
        left: 50%;
        width: 0;
        height: 0;
        content: "";
        transform: translate(-50%, 0);
        border-top: var(--arrow) solid var(--colour-blue);
        border-right: var(--arrow) solid transparent;
        border-left: var(--arrow) solid transparent;
    }

}


.currentdate {
    flex: 1 1 auto;
}

.nav {
    display: flex;
    width: 100%;
    margin: 1rem auto;
    gap: 0.5rem;

    & h2 {
        margin: 0
    }

    .date {
        display: grid;
        align-content: center;
        flex: 0 0 auto;
        justify-content: center;
        width: 5rem;
        margin: 0 0.5rem;
        cursor: pointer;
        background: var(--colour-off-white);
        aspect-ratio: 2 / 1;

        &.forward::before {
            content: '>>';

        }

        &.back::before {
            content: '<<';
        }

        &.inactive {
            color: var(--colour-light-grey);
        }
    }
}


.eventsOptions {
    display: grid;
    width: 80vw;
    max-width: 40rem;
    margin: 1rem auto;
    grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
    gap: 0.5rem;

    & a {
        font-weight: bold;
        flex: 1 1 auto;
        padding: 0.5rem 1rem;
        text-align: center;
        text-decoration: none;
        border-radius: var(--font-size-125);
        background: var(--colour-yellow);
    }

    .feature {
        background-color: var(--colour-orange);
    }

    .active {
        color: var(--colour-white);
        background: var(--colour-blue);
    }

}

.tag-cancelled {
    background: var(--colour-red) !important;
}

details {
    &[open] {
        margin-bottom: 3.81rem;
        padding: 1.81rem;
        border: 1px solid var(--colour-off-white);
        border-radius: 0 0 0.9375rem 0.9375rem;
    }

    & ul {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
        grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
        gap: 0.5rem;
    }

    & li {
        display: grid;
        padding: 0.4rem;
        border-radius: 0.9375rem;
        background: var(--colour-off-white);
        grid-template-rows: subgrid;
        grid-row-end: span 2;
    }


    & input[type], & select, .choices {
        border: none;
        border-radius: 0.2rem;
        background-color: var(--colour-white);
    }

    & input[type="button"] {
        font-weight: normal;
        padding: 0.2rem 0.5rem;
        color: var(--colour-off-white);
        border-radius: 0 0.2rem 0.2rem 0;
        background: var(--colour-blue);
    }

    & input[disabled] {
        cursor: not-allowed;
    }


    & label {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.625em;
        display: block;
        width: 100%;
        text-transform: uppercase;
        color: var(--colour-dark-grey);
    }

    & summary {
        font-size: var(--font-size-15625);
        font-weight: 700;
        line-height: 1.8em;
        cursor: pointer;
        color: var(--colour-dark-grey);
    }

    .search-form-event-location {
        .location-search-group {
            display: flex;
            align-items: center;
            flex-direction: row;
            width: 100%;
            gap: 0.375rem;
        }

        & input[type="text"] {
            flex: 1 1 auto;
            width: 0;
            min-width: 6rem;
            padding: 0.5rem 0.75rem;
            border: 0.0625rem solid var(--colour-light-grey, #e5e5e5) !important;
            border-radius: 0.25rem !important;
        }

        .location-or-separator {
            font-size: 0.8rem;
            font-weight: bold;
            flex: 0 0 auto;
            margin: 0 0.125rem;
            text-transform: lowercase;
            color: var(--colour-dark-grey, #666);
        }

        .location-nearby-btn {
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            justify-content: center;
            width: auto;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
            white-space: nowrap;
            color: var(--colour-blue, #0073aa);
            border: 0.0625rem solid var(--colour-blue, #0073aa);
            border-radius: 0.25rem;
            background-color: var(--colour-white, #ffffff);
            gap: 0.375rem;

            &:hover:not([disabled]) {
                color: var(--colour-white, #ffffff);
                background-color: var(--colour-blue, #0073aa);

                .nearby-icon {
                    background-color: var(--colour-white, #ffffff);
                }
            }

            &[disabled] {
                cursor: not-allowed;
                opacity: 0.5;
                color: var(--colour-light-grey, #888);
                border-color: var(--colour-light-grey, #e5e5e5);

                .nearby-icon {
                    background-color: var(--colour-light-grey, #888);
                }
            }
        }

        .nearby-icon {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            transition: background-color 0.2s ease;
            background-color: var(--colour-blue, #0073aa);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06a8.994 8.994 0 0 0 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
        }
    }
}

.choices__inner {
    background-color: var(--colour-white);
}

.choices__list--multiple {
    .choices__item {
        font-size: var(--font-size-1);
        font-weight: normal;
        display: grid;
        align-items: flex-start;
        padding: 0.2rem;
        border-radius: 0.2rem;
        background-color: var(--colour-blue);
        grid-template-columns: auto 1.5rem;

        &[data-deletable] {
            padding-right: inherit;
        }
    }
}

.choices {
    &[data-type*="select-multiple"] {
        .choices__button {
            width: 1rem;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0.2rem;
            background-color: var(--colour-red);
            aspect-ratio: 1 / 1;
            justify-self: flex-end;
        }
    }
}

@media (min-width: 640px) {
    .choices__list--dropdown,
    .choices__list[aria-expanded] {
        .choices__item--selectable {
            &[data-select-text] {
                padding-right: unset;

                &::after {
                    display: none;
                    content: unset;
                }
            }
        }
    }
}