body {
    background: var(--nav-bg-colour);
    overflow-x: hidden;
    max-width: 100vw;
}

body nav, body main, body footer {
    transition: 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

nav {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

a {
    color: var(--primary-colour);
    text-decoration: none;
}

nav {
    background-color: var(--body-colour);
    padding: var(--inner-spacing) 0;
}

nav .mobile-title {
    display: none;
    align-items: center;
}

nav ul, nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav a {
    color: var(--body-background-colour);
    text-decoration: none;
    padding: calc(var(--inner-spacing) / 2);
}

nav a.active:after {
    background-color: var(--body-background-colour);
    transform: inherit;
}

nav a i {
    margin-right: 5px;
}

nav #toggle-nav {
    border-radius: 0;
    cursor: pointer;
    display: none;
    z-index: 6;
    box-shadow: none;
    display: block;
    padding: 0.5rem 1rem;
    color: var(--body-background-colour);
    border: rgba(255, 255, 255, 0.05) 1px solid;
    font-size: calc(var(--spacing) / 2);
}

nav .mobile-title h1 {
    margin: 0 0 0 var(--inner-spacing) !important;
    font-size: calc(var(--spacing) / 1.5);
    color: var(--body-background-colour);
    margin-left: var(--inner-spacing);
}

@media (max-width: 768px) {

    nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
    }

    main {
        padding-top: calc(var(--spacing) * 2.5);
    }

    nav .mobile-title {
        display: flex;
    }

    body.nav-active nav, body.nav-active main, body.nav-active footer {
        transform: translateX(250px);
    }

    nav .container > ul {
        position: absolute;
        width: 250px;
        height: 100%;
        left: 0;
        top: 0;
        padding: 5px var(--spacing);
        transform: translateX(-250px);
        height: 100vh;
        background: var(--fourth-colour-10);
        display: block; 
    }

    nav ul li, nav ul li a {
        display: block;
        text-align: center;
    }

}

div:not(.panel) > h1 {
    margin: var(--inner-spacing) 0 var(--spacing) 0;
}

#signup-form.panel {}

#signup-form h3 {
    margin-top: 0;
}

#signup-form h4 {
    margin-bottom: var(--inner-spacing);
}

#signup-form .account.panel>div {
    margin-bottom: var(--inner-spacing);
}

form {
    margin: 0 auto;
}

form fieldset,
div fieldset,
div.panel {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px var(--inner-spacing);
    border: #ccc 1px solid;
    padding: var(--inner-spacing);
    background: var(--body-background-colour);
}

div.panel:has(p.legend), div.panel:has(h1.legend), div.panel:has(h2.legend) {
    margin-top: calc(var(--spacing) / 1.5);
    position: relative;
    padding-top: var(--spacing);
}

legend {
    position: relative;
}

p.legend, h1.legend, h2.legend {
    display: inline;
    position: absolute;
    top: calc(var(--inner-spacing) / -0.55);
    left: var(--inner-spacing);
}

.legend:before, legend:before, h1.background:before {
    content: '';
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

p.legend, h1.legend, h2.legend, h1.background,
form fieldset legend,
div fieldset legend {
    padding: calc(var(--inner-spacing) / 2) var(--spacing);
    background: var(--primary-colour);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px var(--inner-spacing);
    color: var(--body-background-colour);
    font-size: calc(var(--spacing) / 1.5);
    font-weight: 300;
    display: inline-block;
    line-height: var(--spacing);
}

@media (max-width: 400px) {
    p.legend, h1.legend, h2.legend, h1.background,
    form fieldset legend,
    div fieldset legend {
        padding: calc(var(--inner-spacing) / 2) calc(var(--spacing) / 1.5);
    }
}

h1.background {
    position: relative;
}

@media (max-width: 600px) {
    h1.background {
        display: none;
    }
}

p.legend:nth-of-type(2n), h1.legend:nth-of-type(2n), h2.legend:nth-of-type(2n),
fieldset:nth-of-type(2n) legend,
.ignore-legend-order:nth-of-type(2n) legend,
.ignore-legend-order:nth-of-type(2n) p.legend, .legend.second, legend.second {
    background: var(--secondary-colour);
}

p.legend:nth-of-type(3n), h1.legend:nth-of-type(3n), h2.legend:nth-of-type(3n),
fieldset:nth-of-type(3n) legend,
.ignore-legend-order:nth-of-type(3n) legend,
.ignore-legend-order:nth-of-type(3n) p.legend, .legend.third, legend.third {
    background: var(--tertiary-colour);
    color: var(--body-colour);
}

p.legend:nth-of-type(4n), h1.legend:nth-of-type(4n), h2.legend:nth-of-type(4n),
fieldset:nth-of-type(4n) legend,
.ignore-legend-order:nth-of-type(4n) legend,
.ignore-legend-order:nth-of-type(4n) p.legend, .legend.fourth, legend.fourth {
    background: var(--fourth-colour) !important;
}

h1.legend + h2 {
    margin-top: 0;
}

main form .form-item {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

main form .form-item:last-of-type {
    margin-bottom: 1rem;
}

main form .form-item:last-of-type:has(small.under), main form .form-item:has(small.under) {
    margin-bottom: 0.1rem;
}

#signup-form button[type="submit"] {
    margin-top: var(--inner-spacing);
}

#signup-form label.checkbox,
#signup-form label.radio {
    font-size: 1rem;
    display: block;
}

#signup-form label.checkbox>input,
#signup-form label.radio>input {
    top: 0px;
}

#signup-form .marketing label.checkbox {
    margin-top: 0;
}

@media (max-width: 768px) {
    #signup-form.panel {
        padding: var(--inner-spacing);
    }
}

.grid > form, .grid > form > fieldset {
    height: 100%;
    width: 100%;
}

canvas {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* Add template css here */
#plans {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--spacing);
}

@media (max-width: 768px) {
    #plans {
        grid-template-columns: 1fr;
    }
}

#plans .plan {
    border: #eee 1px solid;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background: var(--body-background-colour);
}

#plans .plan a.image,
#plan .image {
    display: block;
    margin: 0 auto;
}

#plans .image {
    aspect-ratio: 2/1;
    width: 100%;
}

#plans .image img {
    height: 100%;
    object-fit: cover;
}

#plans .plan h2 {
    background: var(--primary-colour);
    padding: calc(var(--inner-spacing) / 2) var(--inner-spacing);
    color: #fff;
}

#plans .plan:nth-of-type(2n) h2 {
    background: var(--secondary-colour);
}

#plans .plan:nth-of-type(3n) h2 {
    background: var(--tertiary-colour) !important;
    color: var(--body-colour);
}

#plans .plan:nth-of-type(4n) h2 {
    background: var(--fourth-colour) !important;
}

.plan .content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan h2 {
    margin: 0;
}

#plans .plan .options {
    margin: var(--inner-spacing) 0;
}

#plans .plan a.button {
    margin-top: auto;
}

.plan a {
    text-decoration: none;
}

#plan .panel {
    background: var(--body-background-colour);
    border: #eee 1px solid;
}

#events .day {
    border-bottom: rgb(100, 100, 100, 0.5) 1px solid;
    padding-bottom: var(--spacing);
    margin-bottom: var(--spacing);
}

.event {
    background: #f6f6f6;
    padding: var(--spacing);
    margin-bottom: var(--inner-spacing);
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
}

#events .event {
    margin-bottom: 0;
}

#events .event:nth-child(odd) {
    background: none
}

.event h2 {
    margin-bottom: 0;
}

.event .time,
.event .price,
.event .date {
    font-size: calc(var(--inner-spacing) * 1.5);
    margin: 0;
}

#event .price {
    margin-top: 0;
    color: var(--secondary-colour);
}

.event .actions {
    text-align: right;
}

@media (max-width: 768px) {
    .event.grid {
        grid-gap: var(--inner-spacing);
    }

    .event .actions {
        text-align: left;
    }
}

#event form#signup {
    width: 100%;
    max-width: 50%;
    margin: 0 auto 0 25%;
    border: #eee 1px solid;
    padding: var(--spacing);
}

@media (max-width: 768px) {
    #event form#signup {
        margin-left: 0;
        max-width: 100%;
    }
}

#event form>div {
    margin-bottom: var(--spacing);
}

#event form>div:last-of-type {
    margin-bottom: 0;
}

#event form>h3 {
    margin-top: 0;
}

#event #coupon-element {
    margin-bottom: var(--spacing);
}

#event #coupon {
    display: flex;
    margin-bottom: var(--inner-spacing);
}

#event form button[type="submit"] {
    margin-top: var(--spacing);
}

#event .bookings {
    margin-top: 4px;
}

#event .bookings ul {
    padding-left: 0rem;
    margin-left: 0;
    list-style: none;
}

#event .bookings div ul li {
    margin-bottom: var(--inner-spacing);
}

#event .bookings div ul li:last-of-type {
    margin-bottom: 0;
}

#event .bookings form {
    padding: 0;
    margin: 0.5rem 0;
}

#event .bookings form button[type="submit"] {
    margin-top: 0;
}

#checkout>.grid>div {
    padding: var(--spacing);
    background: #f6f6f6;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
}

.overview {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: var(--inner-spacing);
    align-items: center;
    margin-bottom: var(--inner-spacing);
}

.overview>i {
    font-size: 100px;
    color: var(--primary-colour);
}

.overview p {
    margin: 0;
}

.overview .content span {
    font-size: calc(var(--inner-spacing) * 2);
    display: block;
    line-height: calc(var(--inner-spacing) * 2);
    text-transform: uppercase;
    color: var(--primary-colour);
}

.overview .content span a:after {
    bottom: calc(var(--inner-spacing) * -0.5);
}

.overview .content span .date {
    font-size: calc(var(--body-font-size) * 0.75);
    line-height: calc(var(--body-font-size) * 0.75);
    margin-top: 5px;
    color: var(--body-colour);
}

#training .panel {
    padding: var(--spacing);
}

#training .overview.chart {
    display: block;
    padding: var(--inner-spacing);
}

#training .overview.chart h3 {
    font-size: 1rem;
}

#training form button {
    margin-top: var(--spacing);
}

#training .grid>div {
    height: 100%;
}

#goals .panel {
    margin-bottom: var(--inner-spacing);
}

#goals>.panel:last-child {
    margin-bottom: 0;
}

#goals .completed {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    grid-gap: var(--inner-spacing);
}

#goals .completed i {
    display: block;
    font-size: 100px;
    color: var(--primary-colour);
}

#goals .completed p {
    margin: 0;
}

#goals .completed span {
    font-size: calc(var(--inner-spacing) * 2);
    display: block;
    line-height: calc(var(--inner-spacing) * 2);
    text-transform: uppercase;
    color: var(--primary-colour);
    margin-bottom: var(--inner-spacing);
}

#goals .completed p {
    font-size: 0.75rem;
}

#goals .complete ul,
#goals .complete ul li {
    margin: 0.5rem;
    padding: 0;
}

#goals .complete small {
    font-size: 0.75rem;
}

#goals .goal {
    margin-bottom: calc(var(--spacing) / 1.25);
    padding-bottom: var(--spacing);
    border-bottom: rgba(100, 100, 100, 0.25) 1px solid;
}

#goals .goals .goal:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#goals .goal h3,
#goals .goal p {
    margin: 0;
}

#goals .goal h3 {
    margin-bottom: var(--inner-spacing);
}

#goals .goal button {
    margin-top: var(--inner-spacing);
}

#goals form h2 {
    margin-top: 0;
}

#nutrition-form div {
    margin-bottom: var(--inner-spacing);
}

#nutrition-form button[type="submit"] {
    margin-top: 0;
}

#nutrition-form .tabs .grid div {
    margin-bottom: 0;
}

#account-details form {
    display: flex;
    height: 100%;
    width: 100%;
}

#account-details fieldset {
    width: 100%;
}

#account-details form button {
    margin-top: var(--inner-spacing);
}

#account h2 {
    margin-top: 0;
}

#account .order {
    margin-bottom: var(--inner-spacing);
}

#account .order h3,
#account .order p {
    margin: 0;
}

#account .order .grid {
    grid-template-columns: 100px 1fr;
}

#account .order .header {
    background-color: #f6f6f6;
    display: flex;
    padding: var(--inner-spacing);
    justify-content: space-between;
}

#account .order .header span {
    margin-left: var(--inner-spacing);
    display: inline-block;
}

@media (max-width: 768px) {
    #account .order .header {
        display: block;
    }

    #account .order .header span {
        display: block;
        margin-left: 0;
    }
}

#account .order .content {
    border: rgba(100, 100, 100, 0.05) 1px solid;
    padding: var(--inner-spacing);
}

#account #payment-plans .plan {
    margin-bottom: var(--inner-spacing);
}

#account #payment-plans h2 {
    margin-bottom: 1rem;
}

#account #payment-plans h3 {
    font-size: 1rem;
}

#account #payment-plans .price {
    font-size: 1.25rem;
    margin-bottom: 0;
}

#account #payment-plans a.button,
#account #payment-plans button {
    display: block;
    margin-bottom: var(--inner-spacing);
    max-width: 300px;
    width: 90%;
}

#account #payment-plans .renews {
    margin-top: 0;
}

#account #payment-plans table {
    max-width: 300px;
    width: 90%;
}

#studio-hire button {
    margin-top: var(--inner-spacing);
}

#studio-hire #payment-element {
    margin: var(--inner-spacing) 0;
}

table.fc-scrollgrid tr,
table.fc-scrollgrid tr:hover,
.fc-timegrid-slots table tr,
.fc-timegrid-slots table tr:hover {
    background: inherit;
    color: inherit;
}

table.fc-scrollgrid tr:nth-child(even):hover,
table.fc-scrollgrid tr:nth-child(even),
.fc-timegrid-slots table tr:nth-child(2n){
    background: #00000006;
    color: inherit;
}

.fc .fc-daygrid-day.fc-day-today {
    background: inherit;
}

.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:first-child > div {
    display: flex;
}

.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:first-child > div > * {
    margin-right: calc(var(--inner-spacing) / 2);
}
.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:first-child > div > h2 {
    margin-right: var(--inner-spacing);
    margin-top: 3px;
}
.fc .fc-list-sticky .fc-list-day > * {
    background: #333b5e;
}
.fc table tbody tr:nth-child(2n) {
    background: rgba(0, 0, 0, 0.025);
}
.fc table tbody tr:hover, .fc table tbody tr:hover:nth-child(2n) {
    color: var(--body-colour);
}
.fc a.fc-daygrid-day-number {
    color: var(--body-colour);
}

a.fc-event {
    color: var(--body-colour);
}
.fc-daygrid-dot-event .fc-event-title {
    font-weight: normal;
}

.fc .fc-scrollgrid table, .fc .fc-daygrid-body {
    width: 100% !important;
}

@media (max-width: 980px) {
    .fc .fc-toolbar {
        display: block;
        text-align: center;
    }
    .fc .fc-toolbar .fc-toolbar-chunk {
        margin: 0.5rem 0;
    }
    .fc .fc-toolbar .fc-toolbar-chunk:first-child {
        margin-top: 0;
    }
    .fc .fc-toolbar .fc-toolbar-chunk:last-child {
        margin-bottom: 0;
    }
    .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:first-child > div {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .fc .fc-toolbar-title {
        font-size: calc(var(--inner-spacing) * 1.5);
    }
    .fc .fc-button-primary {
        padding: 0 0.25rem;
    }
    .fc .fc-toolbar .fc-toolbar-chunk:last-child .fc-button-primary {
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:first-child > div {
        display: block;
    }
    .fc .fc-button-primary {
        padding: 0.25rem 0.5rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1.75em;
        display: block;
        margin-bottom: 0.5rem;
    }
}