header {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: calc(var(--spacing) * 6);
}

    header img {
        width: auto;
        height: calc(var(--spacing) * 10);
        object-fit: contain;
    }

    header h1 {
        display: block;
        text-align: center;
        font-size: var(--text-base);
        margin: 0;
        padding: 0;
        color: var(--color-white);
    }

    header .hometouroptitle {
    }

        header .hometouroptitle p.totitle {
            color: var(--primary-foreground);
            font-size: var(--text-base);
            margin: 0;
            padding: 0;
            line-height: normal;
        }

        header .hometouroptitle p.toname {
            color: var(--muted);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            margin: 0;
            padding: 0;
            line-height: normal;
        }

        header .hometouroptitle .touroplink {
            color: var(--muted);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            padding: 6px 12px;
            border: solid 1px var(--muted);
            border-radius: var(--radius-sm);
            line-height: 20px;
        }

            header .hometouroptitle .touroplink:hover {
                background-color: var(--accent);
                border-color: var(--accent);
                color: var(--foreground);
            }


    header .nonhometouroptitle {
    }

        header .nonhometouroptitle p.totitle {
            color: var(--foreground);
            font-size: var(--text-base);
            margin: 0;
            padding: 0;
            line-height: normal;
        }

        header .nonhometouroptitle p.toname {
            color: var(--muted-foreground);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            margin: 0;
            padding: 0;
            line-height: normal;
        }

        header .nonhometouroptitle .touroplinkholder {
            padding-top: 10px;
            text-align: right;
        }

        header .nonhometouroptitle .touroplink {
            color: var(--foreground);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            padding: 6px 12px;
            border: solid 1px var(--border);
            border-radius: var(--radius-sm);
            line-height: 20px;
        }

            header .nonhometouroptitle .touroplink:hover {
                background-color: var(--accent-foreground);
                border-color: var(--accent-foreground);
            }

    header .signintext {
        position: relative;
    }

        header .signintext p {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            margin: 0;
            padding: 0;
            padding: calc(var(--spacing) * 2 + 2px);
            padding-bottom: 0;
        }

        header .signintext a {
            color: var(--primary-foreground);
            padding: var(--spacing);
        }

            header .signintext a:hover {
                color: var(--muted-foreground);
            }

            header .signintext a.officesignin {
                border: solid 1px var(--primary-foreground);
                border-radius: 50%;
                padding: calc(var(--spacing) * 2 + 2px);
            }

                header .signintext a.officesignin:hover {
                    border: solid 1px var(--faded-foreground);
                }

    header p.signinlink {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        margin: 0;
        padding: 0;
        padding: calc(var(--spacing) * 2 + 2px);
        padding-bottom: 0;
        margin-bottom: 0;
    }

        header p.signinlink a {
            color: var(--primary-foreground);
            padding: var(--spacing);
        }

            header p.signinlink a:hover {
                color: var(--primary-foreground);
            }

    header.availabilityheader {
        background-color: #ffffff;
        color: var(--primary-foreground);
        border-bottom: solid 1px var(--border);
        padding: calc(var(--spacing) * 4);
        position: sticky;
        top: 0rem;
    }

        header.availabilityheader .signinbutton {
            margin: auto;
            color: var(--primary);
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
            display: block;
        }

        header.availabilityheader .signintext {
            color: var(--primary);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            text-overflow: ellipsis;
            text-wrap: nowrap;
        }

        header.availabilityheader .officelink {
            padding-top: calc(var(--spacing) * 2);
            position: relative;
        }

            header.availabilityheader .officelink .officesignin {
                color: var(--primary);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                border: solid 1px var(--primary);
                border-radius: 50%;
                padding: calc(var(--spacing) * 2 + 2px);
            }

                header.availabilityheader .officelink .officesignin:hover {
                    color: var(--muted-foreground);
                    border: solid 1px var(--muted-foreground);
                }

        header.availabilityheader .headerbasket {
            position: relative;
            padding-top: 0.5rem;
            cursor: pointer;
        }

            header.availabilityheader .headerbasket .basket {
                width: calc(var(--spacing) * 7);
                height: calc(var(--spacing) * 7);
                color: var(--primary);
            }

            header.availabilityheader .headerbasket .basketcount {
                position: absolute;
                font-size: var(--text-xs);
                top: calc(var(--spacing) * -1);
                right: calc(var(--spacing));
                text-align: center;
                width: calc(var(--spacing) * 6);
                height: calc(var(--spacing) * 6);
                background-color: var(--primary);
                color: var(--primary-foreground);
                clip-path: circle();
                padding-top: 0.15rem;
            }

        header.availabilityheader .signout button {
            border-radius: var(--radius-sm);
            width: calc(var(--spacing) * 9);
            height: calc(var(--spacing) * 9);
            transition: .3s ease-out;
            padding: 0;
            margin: 0;
            cursor: pointer;
        }

            header.availabilityheader .signout button.logout {
                width: unset;
                height: calc(var(--spacing) * 8);
                padding: calc(var(--spacing) * 2);
                color: var(--foreground);
                background: var(--background);
                font-size: var(--text-sm);
                line-height: var(--text-sm-line-height);
                border: solid 1px var(--border);

                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: calc(var(--spacing) * 2);
                height: calc(var(--spacing) * 8);
                padding: 0 calc(var(--spacing) * 3); /* horizontal only */
                line-height: 1;
                font-size: var(--text-sm);
            }

            header.availabilityheader .signout button:hover {
                background-color: var(--accent);
                color: var(--accent-foreground);
            }

        header.availabilityheader .signout svg {
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4);
            color: var(--foreground);
            font-size: var(--text-sm);
            line-height: var(--text-sm-line-height);
            margin-right: calc(var(--spacing) * 2);
        }

        header.availabilityheader .signout button.logout svg {
            display: block;
            flex: none;
        }

        header .officeusertools {
            position: absolute;
            width: 600px;
            top: 40px;
            left: -100px;
            z-index: 100;
            background-color: white;
            color: black;
            padding: 0.5rem 1.5rem;
            border: solid 1px var(--border);
            border-radius: var(--radius);
        }

        header .officeusertools p {
            padding: 0.5625rem 0;
            font-size: var(--text-sm);
        }

        header .officeusertools a {
            color: var(--primary);
        }

            header .officeusertools a:hover {
                color: var(--muted);
            }

        header .officeusertools .input-group {
            margin-bottom: 0;
        }

    header .headeractions {
    }

        header .headeractions .headeraction {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: calc(var(--spacing) * 5); /* 20px, and it stays 20px */
        }

.pagetitle {
    padding-block: calc(var(--spacing) * 6);
    text-align: center
}

    .pagetitle h1 {
        margin-bottom: calc(var(--spacing) * 2);
        font-size: var(--text-2xl);
        line-height: 1.5;
    }

    .pagetitle p {
        margin-bottom: calc(var(--spacing) * 1);
        font-size: var(--text-base);
        line-height: 1.5;
    }

.booking {
    padding-block: calc(var(--spacing) * 12);
    line-height: 1.5;
}

    .booking .bookingarea {
        border: solid 1px var(--border);
        border-radius: var(--radius);
        padding: calc(var(--spacing) * 8);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

        .booking .bookingarea h2 {
            text-align: center;
            font-size: var(--text-base);
            font-weight: normal;
        }

.selection {
    margin-bottom: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 4);
    background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    border-radius: var(--radius);
}

    .selection .selection-title {
        color: var(--muted-foreground);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        margin-bottom: calc(var(--spacing) * 1);
    }

    .selection .selection-resort {
        margin: 0;
        font-size: var(--text-base);
        line-height: normal;
    }

    .selection .selection-dates {
        font-size: var(--text-sm);
        margin: 0;
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }

.prevbutton {
    font-size: var(--text-base);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    padding: calc(var(--spacing) * 6);
}

    .prevbutton a {
        color: var(--color-blue-600);
    }

        .prevbutton a:hover {
            text-decoration: underline;
        }

.basketheadline {
    padding: calc(var(--spacing) * 4);
    background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    border-radius: var(--radius);
    margin-top: calc(var(--spacing) * 4);
}

    .basketheadline p {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        color: var(--foreground);
        margin: 0;
        padding: 0;
    }

        .basketheadline p.itemtotal {
            text-align: right;
        }

.editlesson {
    width: 100%;
    height: 90%;
    max-width: 32em;
    border-radius: var(--radius);
    border: solid 1px var(--border);
    padding: 0;
}

    .editlesson::backdrop {
        background-color: color-mix(in oklab, #000 50%, transparent);
    }

    .editlesson .editlessonheader {
        padding: calc(var(--spacing) * 5);
        border-bottom: solid 1px var(--border);
    }

        .editlesson .editlessonheader a svg {
            color: var(--foreground);
        }

    .editlesson .editlessonmain {
        padding: calc(var(--spacing) * 5);
        padding-bottom: 0;
    }

        .editlesson .editlessonmain .lessondetails {
            padding: calc(var(--spacing) * 4);
            background-color: color-mix(in oklab, var(--muted) 30%, transparent);
            border-radius: var(--radius);
            margin-bottom: calc(var(--spacing) * 6);
            color: var(--foreground);
        }

            .editlesson .editlessonmain .lessondetails p {
                color: var(--muted-foreground);
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                margin: 0;
                margin-bottom: calc(var(--spacing) * 1);
                padding: 0;
            }

                .editlesson .editlessonmain .lessondetails p.title {
                    font-weight: 500;
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height));
                }

        .editlesson .editlessonmain svg {
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4);
            font-family: var(--font-family);
            margin-right: 0.5rem;
        }

        .editlesson .editlessonmain .assignline {
            margin-bottom: calc(var(--spacing) * 3);
        }

            .editlesson .editlessonmain .assignline label {
                margin-top: calc(var(--spacing) * 1);
            }

        .editlesson .editlessonmain .assignreason {
            margin-top: calc(var(--spacing) * 6);
        }

        .editlesson .editlessonmain label, .editlesson .editlessonmain p {
            line-height: 1;
            font-size: var(--text-sm);
            color: var(--foreground);
        }

            .editlesson .editlessonmain label.sublabel {
                color: var(--muted-foreground);
                font-size: var(--text-xs);
                line-height: var(--tw-leading, var(--text-xs--line-height));
            }

        .editlesson .editlessonmain textarea, .editlesson .editlessonmain select, .editlesson .editlessonmain [type='text'], .editlesson .editlessonmain [type='time'], .editlesson .editlessonmain [type='number'], .editlesson .editlessonmain [type='email'], .editlesson .editlessonmain [type='tel'], .editlesson .editlessonmain [type='password'], .editlesson .editlessonmain [type='button'].astext {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding-inline: calc(var(--spacing) * 3);
            background-color: var(--input-background);
            border: solid 1px var(--input);
            height: calc(var(--spacing) * 9);
            border-radius: var(--radius-sm);
            margin-top: calc(var(--spacing) * 2);
            margin-bottom: calc(var(--spacing) * 4);
        }

        .editlesson .editlessonmain select {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding-inline: calc(var(--spacing) * 3);
            background-color: var(--input-background);
            border: solid 1px var(--input);
            height: calc(var(--spacing) * 9);
            border-radius: var(--radius-sm);
            margin-top: calc(var(--spacing) * 2);
            margin-bottom: calc(var(--spacing) * 4);
            padding-right: 2rem;
        }

    .editlesson .editlessonfooter {
        padding: calc(var(--spacing) * 5);
        border-top: solid 1px var(--border);
    }

        .editlesson .editlessonfooter .newgenbutton {
            border-radius: var(--radius-sm);
            padding-inline: calc(var(--spacing) * 2);
            margin: 0;
            margin-top: calc(var(--spacing) * 8);
            margin-bottom: calc(var(--spacing) * 8);
            font-weight: bold;
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            background-color: var(--primary);
        }

            .editlesson .editlessonfooter .newgenbutton.notbold {
                font-weight: normal;
            }

            .editlesson .editlessonfooter .newgenbutton:hover, .editlesson .editlessonfooter .newgenbutton:focus {
                background-color: #000000;
            }

            .editlesson .editlessonfooter .newgenbutton.empty {
                background-color: white;
                color: var(--accent-foreground);
                border: solid 1px var(--border);
                border-radius: var(--radius);
            }

                .editlesson .editlessonfooter .newgenbutton.empty:hover, .editlesson .editlessonfooter .newgenbutton.empty:focus {
                    background-color: var(--input-background);
                }

footer {
    padding-block: calc(var(--spacing) * 6);
    background-color: var(--muted);
    border-top: solid 1px var(--border);
}

    footer p.footertitle {
        font-size: var(--text-base);
        font-weight: var(--font-weight-normal);
        line-height: 1.5;
        color: var(--muted-foreground);
        margin-bottom: calc(var(--spacing) * 2);
    }


/* Small Screen */
@media screen and (max-width: 39.99875em) {
    header {
        padding: calc(var(--spacing) * 6);
    }

        header img {
            width: unset;
            height: unset;
        }

        header.availabilityheader .headerbasket .basketcount {
            right: calc(var(--spacing) * 4);
        }

        header .hometouroptitle:first-child {
            margin-bottom: calc(var(--spacing) * 2);
        }

            header .hometouroptitle p.totitle {
            }

            header .hometouroptitle p.toname {
                text-align: right;
                line-height: var(--text-sm--line-height);
            }

            header .hometouroptitle .showtolink {
                text-align: right;
            }

        header .nonhometouroptitle:first-child {
            margin-bottom: calc(var(--spacing) * 2);
        }

        header .nonhometouroptitle .touroplinkholder {
            text-align: left;
            padding-top: 0;
        }

        header .nonhometouroptitle .basketholder {
            text-align: right;
        }

        header .nonhometouroptitle p.toname {
            margin-bottom: 20px;
        }

        header.availabilityheader .nonhometouroptitle .headerbasket {
            padding-top: 0;
        }

    .booking {
        padding-top: calc(var(--spacing) * 3);
    }

    .booking .bookingarea h2 {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .pagetitle {
        padding-block: calc(var(--spacing) * 2);
    }

    .basketpanel {
        width: 100%;
    }
}

/* Medium Screen */
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
    .basketpanel {
        width: 50%;
    }
}