.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: flex;
    width: 80vw;
    max-width: 40rem;
    margin: 1rem auto;
    gap: 1rem;

    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);
    }

    .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 {
        span {
            display: flex;
            flex-flow: row;
        }

        input[type="text"] {
            flex: 1 1 auto;
            width: 8rem;
            border-radius: 0.2rem 0 0 0.2rem;
        }
    }

}

.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;
                }
            }
        }
    }
}